/* KPI Forecasts Lab (KPI-33). Approved look v1: the demand page's V13 dark theme. */
:root{--bg:#000;--card:#0e0f12;--card2:#121418;--line:rgba(84,153,219,.22);--line2:rgba(255,255,255,.12);--fg:#fff;--fg2:rgba(255,255,255,.74);--fg3:rgba(255,255,255,.55);--accent:rgb(84,153,219);--up:rgb(142,187,56);--down:rgb(255,110,100);--mark:rgb(242,202,48);--navy:rgb(12,39,57);--display:'Oxanium',system-ui,sans-serif;--body:'Public Sans',-apple-system,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--display);letter-spacing:.4px;margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:20px 24px 48px}
header{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:20px}
header h1{font-size:22px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.who{margin-left:auto;color:var(--fg3);font-size:12px}
.linkbtn{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;padding:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.card + .card{margin-top:16px}
h2{font-size:16px;margin-bottom:10px}
table{border-collapse:collapse;width:100%}
th{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--fg3);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.06);text-align:right;white-space:nowrap}
th:first-child,td:first-child,th.l,td.l{text-align:left}
tbody tr.pick{cursor:pointer}
tbody tr.pick:hover{background:var(--card2)}
tbody tr.sel{background:rgba(84,153,219,.12)}
.kname{max-width:300px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}
.flag{font-family:var(--mono);font-size:11px;border-radius:999px;padding:2px 8px;border:1px solid}
.f-trusted{color:var(--up);border-color:var(--up)}.f-mixed{color:var(--mark);border-color:var(--mark)}.f-weak{color:var(--down);border-color:var(--down)}.f-no_data{color:var(--fg3);border-color:var(--line2)}
.win{color:var(--up)}.lose{color:var(--down)}.meh{color:var(--mark)}.faint{color:var(--fg3)}
.grid{display:grid;grid-template-columns:1fr 340px;gap:16px;margin-top:16px}
.sub{color:var(--fg3);font-size:12px;margin:-4px 0 10px}
.big{font-family:var(--display);font-size:28px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin:0}
.kv dt{color:var(--fg3)}.kv dd{margin:0}
.legend{display:flex;gap:16px;font-size:12px;color:var(--fg2);margin-top:6px;flex-wrap:wrap}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.sw-reported{background:var(--accent)}.sw-backtest{border:2px solid var(--mark)}.sw-guess{background:var(--fg3)}
.sw-gap{background:repeating-linear-gradient(45deg,#333 0 3px,transparent 3px 6px)}.sw-next{background:var(--up)}
section{margin-top:16px}
.gate{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--accent);color:#000;border:0;font-family:var(--display);font-weight:700;font-size:15px;cursor:pointer}
.err{color:var(--down)}
[hidden]{display:none !important}

/* Phone layout v2 (founder, 2026-10-18): KPI cards, detail as its own screen, fewer backtest columns. */
.back{display:none;margin-bottom:8px}
.c-phone{display:none}
.c-phone-reason{display:none}
#score td.c-next{white-space:normal;max-width:220px}
@media (max-width:760px){
  body{font-size:15px}
  .wrap{padding:12px 12px 40px}
  header{flex-wrap:wrap;gap:6px 10px}
  header h1{font-size:19px}
  .who{margin-left:0;width:100%}
  .card{padding:12px;border-radius:10px}
  .grid{grid-template-columns:1fr;margin-top:12px}
  .grid>*,.card{min-width:0}
  #score{table-layout:fixed}
  #score thead{display:none}
  #score tbody tr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;padding:10px 4px;border-bottom:1px solid var(--line2)}
  #score td{border:0;padding:0;text-align:left;white-space:normal}
  #score td.c-tick{grid-column:1;color:var(--fg3)}
  #score td.c-kpi{grid-column:2;font-weight:600}
  #score td.c-kpi .kname{max-width:none;white-space:normal;display:inline}
  #score td.c-trust{grid-column:3;grid-row:1;text-align:right}
  #score td.c-next{grid-column:1/-1;color:var(--fg2)}
  #score td.c-phone{display:block;grid-column:1/-1;color:var(--fg3);font-size:13px}
  #score td.c-desk{display:none}
  .c-opt{display:none}
  .c-phone-reason{display:inline}  /* the reason a quarter was not graded, which desktop shows under Miss */
  #bt th,#bt td{padding:6px;font-size:13px}
  .big{font-size:24px}
  .back{display:inline-block}
  #score .c-phone-inline::before{content:"next "}
  body.phone-detail #scorecard{display:none}
  body:not(.phone-detail) .grid{display:none}
}