/* ============================================================
   THE HONEST QUANT — design system
   Concept: "the ledger, not the casino."
   Trading tools look like slot machines — dark, neon, dopamine.
   The honest one looks like print: warm paper, ink, hairline
   rules, serif headlines, tabular numerals, auditor's stamps.
   ============================================================ */
:root{
  --paper:#F7F4ED;        /* warm ivory */
  --paper2:#EFEBE0;       /* card tint */
  --paper3:#E7E2D4;       /* deeper tint */
  --ink:#181510;          /* near-black warm ink */
  --ink2:#6B6354;         /* muted ink */
  --ink3:#9A9282;         /* faint ink */
  --rule:#D9D3C3;         /* hairlines */
  --ledger:#1E5C46;       /* brand: deep ledger green */
  --ledger2:#2E7A5E;
  --good:#1E5C46;
  --warn:#9A6B15;         /* ochre */
  --poor:#B4541E;         /* burnt orange */
  --bad:#8C2B2B;          /* oxblood */
  --stamp:#A33327;        /* stamp red */
  --serif:"New York","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:15.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ledger);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
::selection{background:var(--ledger);color:var(--paper)}

/* ---------- masthead ---------- */
.mast{display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;border-bottom:2px solid var(--ink);
  position:sticky;top:0;background:var(--paper);z-index:10}
.mast .brand{font:700 19px var(--serif);letter-spacing:-.2px;color:var(--ink)}
.mast .brand:hover{text-decoration:none}
.mast .brand em{font-style:normal;color:var(--ledger)}
.mast nav{display:flex;gap:22px;align-items:center;font-size:14px}
.mast nav a{color:var(--ink2);text-decoration:none;padding-bottom:2px}
.mast nav a:hover{color:var(--ink)}
.mast nav a.on{color:var(--ink);font-weight:600;border-bottom:2px solid var(--ledger)}
.mast .right{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink2)}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:40px 24px 100px}
.rule{border:none;border-top:1px solid var(--rule);margin:34px 0}
.rule.heavy{border-top:2px solid var(--ink)}

/* ---------- type ---------- */
h1{font:700 44px/1.12 var(--serif);letter-spacing:-.8px;margin:0 0 14px}
h2{font:700 26px/1.2 var(--serif);letter-spacing:-.3px;margin:0 0 8px}
h3{font:700 17px var(--sans);margin:0 0 6px}
.lede{font-size:18px;color:var(--ink2);max-width:620px;margin:0 0 8px}
.kicker{font:600 12px var(--sans);text-transform:uppercase;letter-spacing:2.2px;
  color:var(--ledger);margin:0 0 10px}
.secno{font:400 13px var(--mono);color:var(--ink3);margin-right:10px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink2)} .faint{color:var(--ink3)}
.small{font-size:13px}

/* ---------- cards / panels ---------- */
.panel{background:var(--paper);border:1px solid var(--ink);border-radius:4px;
  padding:26px 28px;margin-bottom:22px;
  box-shadow:4px 4px 0 var(--paper3)}
.panel.flat{box-shadow:none;border-color:var(--rule)}
.panel .phead{display:flex;align-items:baseline;gap:4px;border-bottom:1px solid var(--rule);
  padding-bottom:12px;margin-bottom:16px}
.panel .phead h2{font-size:20px;margin:0}
.panel .hint{color:var(--ink2);font-size:13.5px;margin:6px 0 0}

/* ---------- buttons ---------- */
.btn{background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  border-radius:4px;padding:12px 24px;font-size:15px;font-weight:600;cursor:pointer;
  transition:background .15s,transform .05s}
.btn:hover{background:var(--ledger);border-color:var(--ledger)}
.btn:active{transform:translate(1px,1px)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--paper2);color:var(--ink)}
.btn.sm{padding:7px 14px;font-size:13px}
.btn.big{padding:15px 30px;font-size:16px}

/* ---------- forms ---------- */
select,input{background:#FFFDF8;border:1px solid var(--ink3);color:var(--ink);
  border-radius:4px;padding:9px 11px;font-size:14px;font-family:var(--sans)}
select:focus,input:focus{outline:none;border-color:var(--ledger);
  box-shadow:0 0 0 2px rgba(30,92,70,.18)}
input[type=number]{width:86px;font-family:var(--mono)}
label.f{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--ink2);
  text-transform:uppercase;letter-spacing:1px;font-weight:600}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}

/* ---------- verdict stamp ---------- */
.stamp{display:inline-block;border:3px double currentColor;border-radius:4px;
  padding:8px 18px;font:800 18px var(--sans);text-transform:uppercase;
  letter-spacing:2.5px;transform:rotate(-2deg);opacity:.92}
.stamp.sm{font-size:12px;padding:5px 11px;letter-spacing:1.8px;border-width:2px}

/* ---------- score block ---------- */
.scorewrap{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin:6px 0 14px}
.bigscore{font:700 64px/1 var(--serif);letter-spacing:-2px}
.bigscore small{font:400 16px var(--mono);color:var(--ink3);letter-spacing:0}
.headline{color:var(--ink2);margin:6px 0 0;max-width:470px;font-size:14.5px}

/* validator bars: ledger lines */
.vbar{margin:14px 0;border-bottom:1px solid var(--rule);padding-bottom:12px}
.vbar:last-child{border-bottom:none}
.vbar .vtop{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.vbar .vtop b{font-family:var(--mono)}
.vbar .track{height:7px;background:var(--paper3);border-radius:2px;overflow:hidden}
.vbar .fill{height:100%;border-radius:2px;transition:width .5s ease}
.findings{list-style:none;padding:0;margin:7px 0 0}
.findings li{font-size:13px;color:var(--ink2);padding:2px 0}

.flags{background:#F4E7E2;border:1px solid var(--bad);border-radius:4px;
  padding:14px 18px;margin-top:16px}
.flags h4{margin:0 0 7px;color:var(--bad);font-size:12px;text-transform:uppercase;letter-spacing:1.5px}
.flags li{color:#6e2f2f}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:0;
  border:1px solid var(--ink);border-radius:4px;overflow:hidden;margin-bottom:18px}
.stat{padding:14px 16px;border-right:1px solid var(--rule);background:#FFFDF8}
.stat:last-child{border-right:none}
.stat .v{font:700 21px var(--mono);font-variant-numeric:tabular-nums}
.stat .k{color:var(--ink2);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-top:3px}

/* ---------- chart ---------- */
.chartbox{background:#FFFDF8;border:1px solid var(--ink);border-radius:4px;
  padding:16px;margin-bottom:18px}
canvas{width:100%;height:260px;display:block}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
td,th{text-align:left;padding:8px 8px;border-bottom:1px solid var(--rule)}
th{color:var(--ink2);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:1px}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pos{color:var(--good)} .neg{color:var(--bad)}

/* ---------- misc ---------- */
.err{color:var(--bad);font-size:14px;margin-top:10px;font-weight:500}
.hidden{display:none}
.loading{display:inline-block;width:15px;height:15px;border:2px solid rgba(247,244,237,.4);
  border-top-color:var(--paper);border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:-3px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.foot{color:var(--ink3);font-size:12.5px;margin-top:40px;border-top:2px solid var(--ink);
  padding-top:16px;line-height:1.7}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(24,21,16,.45);display:flex;
  align-items:center;justify-content:center;z-index:30;backdrop-filter:blur(2px)}
.modal.hidden{display:none}
.modal .mbox{background:var(--paper);border:2px solid var(--ink);border-radius:4px;
  padding:28px;width:360px;max-width:calc(100vw - 32px);box-shadow:6px 6px 0 rgba(24,21,16,.25)}
.modal h3{font:700 22px var(--serif);margin:0 0 6px}
.modal .msub{color:var(--ink2);font-size:13.5px;margin:0 0 16px}
.modal .field{margin-bottom:12px}
.modal input{width:100%}

@media(max-width:620px){
  h1{font-size:32px}
  .mast{padding:12px 16px;flex-wrap:wrap;row-gap:10px}
  .mast>div:first-child{flex-wrap:wrap;gap:8px 16px !important}
  .mast nav{gap:14px}
  .mast nav a{font-size:13px;white-space:nowrap}
  .mast .brand{font-size:16px;white-space:nowrap}
  .mast .right{margin-left:auto}
  .wrap{padding:28px 16px 80px}
  .panel{padding:20px 18px}
  .bigscore{font-size:48px}
}