/* CryptoArb console styles.
 * Extracted verbatim from the approved design (design/dashboard-preview.html) and served as a
 * separate file so the API's Content-Security-Policy can stay at script-src/style-src 'self'
 * with no inline allowance. Loosening a security header to fit a convenience is the wrong trade.
 */
/* ============================================================================
   CryptoArb — design tokens
   Visual language: flat enterprise surfaces, signature green accent, deep
   navy-teal neutrals, hairline borders instead of shadows, Lato humanist sans.
   This is CryptoArb's own product skin. No third-party marks are used.
   ========================================================================= */
:root{
  /* ---- brand ramp -------------------------------------------------------- */
  --green-bright:#62D84E;   /* signature accent — fills, bars, indicators     */
  --green-mid:#2FA24A;
  --green-deep:#00703C;     /* accessible green for text on light            */
  --green-ink:#0B2E12;      /* text placed on top of the bright green        */
  --navy-900:#07191F;       /* deep navy-teal — dark mode canvas             */
  --navy-800:#0C242E;
  --navy-700:#123240;
  --navy-600:#1B4354;

  /* ---- semantic: LIGHT (default) ---------------------------------------- */
  --bg:#FFFFFF;
  --surface:#F7F9F9;
  --surface-2:#EFF3F3;
  --surface-inset:#FBFCFC;
  --border:#DCE4E4;
  --border-strong:#BECACA;
  --text:#0F262C;
  --text-muted:#4D6168;
  --text-faint:#5C6E73; /* AA on white, --surface and --surface-2 (4.78:1 worst case) */
  --accent:var(--green-deep);
  --accent-fill:var(--green-bright);
  --accent-on-fill:var(--green-ink);
  --accent-wash:#E8F7E4;
  --focus:#00703C;

  --ok-text:#14532D;      --ok-bg:#E3F5E4;   --ok-line:#2FA24A;
  --warn-text:#7A4E00;    --warn-bg:#FCF0D6; --warn-line:#C98A0A;
  --bad-text:#A3170F;     --bad-bg:#FCE9E7;  --bad-line:#C0392B;
  --info-text:#0B4E63;    --info-bg:#E2F1F6; --info-line:#1B7C9B;
  --neutral-text:#38494E; --neutral-bg:#EBF0F0;

  --banner-bg:#FFF6E0;
  --banner-line:#C98A0A;
  --banner-text:#5E3C00;

  /* ---- type ------------------------------------------------------------- */
  --font:'Lato','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px;

  /* ---- space ------------------------------------------------------------ */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --radius:3px; --radius-lg:6px;
  --nav-w:238px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--navy-900);
    --surface:#0B2129;
    --surface-2:#102C37;
    --surface-inset:#09202A;
    --border:#1C3D4A;
    --border-strong:#2A5266;
    --text:#E9F1F1;
    --text-muted:#9CB2B7;
    --text-faint:#8EA5AB; /* AA on --bg, --surface and --surface-2 (5.65:1 worst case) */
    --accent:#62D84E;
    --accent-fill:#62D84E;
    --accent-on-fill:#052A0C;
    --accent-wash:rgba(98,216,78,.12);
    --focus:#8BE87C;

    --ok-text:#8CE87A;      --ok-bg:rgba(98,216,78,.14);  --ok-line:#62D84E;
    --warn-text:#F7C35C;    --warn-bg:rgba(247,195,92,.14);--warn-line:#F5BA45;
    --bad-text:#FF9C90;     --bad-bg:rgba(255,141,128,.14);--bad-line:#FF8D80;
    --info-text:#6FCDEA;    --info-bg:rgba(111,205,234,.13);--info-line:#4FC3E8;
    --neutral-text:#B7C9CD; --neutral-bg:rgba(255,255,255,.06);

    --banner-bg:#2A1F06;
    --banner-line:#F5BA45;
    --banner-text:#FBE3AE;
  }
}
:root[data-theme="dark"]{
  --bg:var(--navy-900);
  --surface:#0B2129;
  --surface-2:#102C37;
  --surface-inset:#09202A;
  --border:#1C3D4A;
  --border-strong:#2A5266;
  --text:#E9F1F1;
  --text-muted:#9CB2B7;
  --text-faint:#8EA5AB; /* AA on --bg, --surface and --surface-2 (5.65:1 worst case) */
  --accent:#62D84E;
  --accent-fill:#62D84E;
  --accent-on-fill:#052A0C;
  --accent-wash:rgba(98,216,78,.12);
  --focus:#8BE87C;

  --ok-text:#8CE87A;      --ok-bg:rgba(98,216,78,.14);  --ok-line:#62D84E;
  --warn-text:#F7C35C;    --warn-bg:rgba(247,195,92,.14);--warn-line:#F5BA45;
  --bad-text:#FF9C90;     --bad-bg:rgba(255,141,128,.14);--bad-line:#FF8D80;
  --info-text:#6FCDEA;    --info-bg:rgba(111,205,234,.13);--info-line:#4FC3E8;
  --neutral-text:#B7C9CD; --neutral-bg:rgba(255,255,255,.06);

  --banner-bg:#2A1F06;
  --banner-line:#F5BA45;
  --banner-text:#FBE3AE;
}

/* ============================================================================
   base
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-base); line-height:1.5;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.25; letter-spacing:-.01em;}
p{margin:0 0 var(--s3);}
p:last-child{margin-bottom:0;}
a{color:var(--accent);}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:2px;}
::selection{background:var(--accent-wash); color:var(--text);}

.skip{
  position:absolute; left:var(--s3); top:-60px; z-index:100;
  background:var(--accent-fill); color:var(--accent-on-fill);
  padding:var(--s2) var(--s4); border-radius:var(--radius); font-weight:700;
  transition:top .12s ease;
}
.skip:focus{top:var(--s3);}

.mono{font-family:var(--mono); font-size:.92em; letter-spacing:-.01em;}
.num{font-variant-numeric:tabular-nums;}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ============================================================================
   top bar
   ========================================================================= */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:var(--s4);
  padding:0 var(--s5); min-height:56px;
  background:var(--bg); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:var(--s3); margin-right:auto; min-width:0;}
.brand-mark{
  flex:0 0 auto; width:28px; height:28px; border-radius:var(--radius);
  background:var(--accent-fill); color:var(--accent-on-fill);
  display:grid; place-items:center;
}
.brand-name{font-size:var(--fs-md); font-weight:900; letter-spacing:-.015em; white-space:nowrap;}
.brand-name span{font-weight:400; color:var(--text-muted);}
.brand-sub{
  display:block; font-size:var(--fs-xs); font-weight:700; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.09em; line-height:1.2;
}
.topbar-modes{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; justify-content:flex-end;}

/* permanent mode badges — deliberately solid and undismissable */
.mode-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 8px; border-radius:var(--radius);
  font-size:var(--fs-xs); font-weight:900; letter-spacing:.09em; text-transform:uppercase;
  background:var(--accent-fill); color:var(--accent-on-fill); white-space:nowrap;
}
.mode-badge--lock{
  background:transparent; color:var(--text);
  border:1px solid var(--border-strong); font-weight:700;
}
.mode-badge--lock .dot{width:7px;height:7px;border-radius:50%;background:var(--bad-line);flex:0 0 auto;}

.icon-btn{
  display:inline-grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg); color:var(--text-muted); cursor:pointer;
  transition:border-color .12s ease, color .12s ease;
}
.icon-btn:hover{border-color:var(--border-strong); color:var(--text);}
.icon-btn svg{width:17px;height:17px;}

/* ============================================================================
   persistent sample-data banner (not dismissible, not a toast)
   ========================================================================= */
.sample-banner{
  position:sticky; top:56px; z-index:35;
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s3) var(--s5);
  background:var(--banner-bg); color:var(--banner-text);
  border-bottom:1px solid var(--banner-line);
  border-top:3px solid var(--banner-line);
  font-size:var(--fs-sm);
}
.sample-banner svg{flex:0 0 auto; width:19px; height:19px; margin-top:1px; color:var(--banner-line);}
.sample-banner b{
  display:block; font-size:var(--fs-sm); font-weight:900;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:2px;
}
.sample-banner .bnr-body{max-width:104ch;}

/* small repeated markers so the warning survives scrolling and screenshots */
.sample-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 7px; border-radius:2px;
  border:1px dashed var(--banner-line); color:var(--warn-text); background:transparent;
  font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  vertical-align:middle;
}

/* ============================================================================
   shell / nav
   ========================================================================= */
.shell{display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); align-items:start;}

.sidenav{
  position:sticky; top:calc(56px + 62px);
  align-self:start;
  border-right:1px solid var(--border);
  background:var(--bg);
  padding:var(--s5) 0;
  min-height:calc(100vh - 118px);
}
.sidenav h2{
  font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-faint); padding:0 var(--s5) var(--s3);
}
.sidenav ul{list-style:none; margin:0; padding:0;}
.navbtn{
  width:100%; display:flex; align-items:center; gap:var(--s3);
  padding:9px var(--s5); border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:var(--fs-base); color:var(--text-muted); text-align:left;
  border-left:3px solid transparent; margin-left:-0px;
  transition:background .12s ease, color .12s ease;
}
.navbtn:hover{background:var(--surface); color:var(--text);}
.navbtn svg{width:16px;height:16px;flex:0 0 auto;opacity:.85;}
.navbtn[aria-selected="true"]{
  color:var(--text); font-weight:700;
  background:var(--accent-wash); border-left-color:var(--accent-fill);
}
.navbtn .navcount{
  margin-left:auto; font-size:var(--fs-xs); font-weight:700;
  color:var(--text-faint); font-variant-numeric:tabular-nums;
}
.navbtn[aria-selected="true"] .navcount{color:var(--accent);}

.sidenav-foot{
  margin-top:var(--s6); padding:var(--s4) var(--s5) 0;
  border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--text-faint);
}
.sidenav-foot dt{font-weight:700; color:var(--text-muted); margin-top:var(--s3);}
.sidenav-foot dd{margin:0;}

main{padding:var(--s6) var(--s8) var(--s10); min-width:0;}

/* ============================================================================
   page header
   ========================================================================= */
.page-head{margin-bottom:var(--s6); padding-bottom:var(--s4); border-bottom:1px solid var(--border);}
.page-head .eyebrow{
  font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:6px;
}
.page-head h1{font-size:var(--fs-2xl); margin-bottom:6px;}
.page-head p{color:var(--text-muted); max-width:92ch; font-size:var(--fs-md);}

/* ============================================================================
   cards, grids
   ========================================================================= */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--s5);
}
.card--flush{padding:0; overflow:hidden;}
.card-head{
  display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
  margin-bottom:var(--s4);
}
.card-head h2{font-size:var(--fs-lg);}
.card-head h3{font-size:var(--fs-md);}
.card-head .hint{font-size:var(--fs-sm); color:var(--text-muted); margin-left:auto;}

.grid{display:grid; gap:var(--s4);}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.stack{display:grid; gap:var(--s5);}

/* stat tiles */
.stat{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--s4) var(--s4) var(--s4) var(--s5);
  border-left:3px solid var(--border-strong);
}
.stat--accent{border-left-color:var(--accent-fill);}
.stat--warn{border-left-color:var(--warn-line);}
.stat--bad{border-left-color:var(--bad-line);}
.stat dt{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:5px;
}
.stat dd{margin:0; font-size:var(--fs-xl); font-weight:700; line-height:1.15; letter-spacing:-.02em;}
.stat .sub{display:block; font-size:var(--fs-sm); font-weight:400; color:var(--text-muted); margin-top:4px; letter-spacing:0;}

/* ============================================================================
   pills / status
   ========================================================================= */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:2px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap; background:var(--neutral-bg); color:var(--neutral-text);
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.pill--ok{background:var(--ok-bg); color:var(--ok-text);}
.pill--warn{background:var(--warn-bg); color:var(--warn-text);}
.pill--bad{background:var(--bad-bg); color:var(--bad-text);}
.pill--info{background:var(--info-bg); color:var(--info-text);}
.pill--unknown{background:var(--neutral-bg); color:var(--neutral-text); border:1px dashed var(--border-strong);}

.flag{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 7px; border-radius:2px; font-size:var(--fs-xs); font-weight:700;
  background:var(--warn-bg); color:var(--warn-text); border:1px solid var(--warn-line);
  white-space:normal; text-align:left; line-height:1.3;
}
.flag svg{width:12px;height:12px;flex:0 0 auto;}

.val-pos{color:var(--ok-text); font-weight:700;}
.val-neg{color:var(--bad-text); font-weight:700;}
.val-zero{color:var(--text-faint);}
.val-cost{color:var(--text-muted);}
.val-na{color:var(--text-faint); font-style:italic;}

/* ============================================================================
   tables
   ========================================================================= */
.t-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);}
table{width:100%; border-collapse:collapse; font-size:var(--fs-sm);}
caption{
  text-align:left; padding:var(--s4) var(--s5) var(--s3);
  border-bottom:1px solid var(--border); background:var(--surface);
}
caption .cap-title{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; font-size:var(--fs-md); font-weight:700; color:var(--text);}
caption .cap-note{display:block; margin-top:4px; font-size:var(--fs-sm); font-weight:400; color:var(--text-muted); max-width:100ch;}
thead th{
  position:sticky; top:0; z-index:1;
  background:var(--surface-2); color:var(--text-muted);
  font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  text-align:left; padding:9px 10px; white-space:normal; /* headers wrap so 11
     numeric columns fit 1440 without a horizontal scroll */
  border-bottom:1px solid var(--border-strong);
}
tbody th, tbody td{
  padding:9px 10px; border-bottom:1px solid var(--border);
  vertical-align:top; text-align:left;
}
/* Row headers wrap: they carry explanatory sub-text, and nowrap here would
   blow the first column out to thousands of pixels and hide the numbers. */
tbody th{font-weight:700; white-space:normal;}
tbody th[scope="row"]{min-width:168px; max-width:360px;}
tbody tr.row-flagged .t-sub{color:var(--text-muted);}
tbody tr:last-child th, tbody tr:last-child td{border-bottom:0;}
tbody tr:hover{background:var(--surface-inset);}
tbody tr.row-flagged{background:var(--warn-bg);}
tbody tr.row-flagged:hover{background:var(--warn-bg);}
tbody tr.row-group th{background:var(--surface-2); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);}
.cv{display:block; min-width:0;}
.t-num{text-align:right; font-family:var(--mono); font-size:12px; white-space:nowrap;}
th.t-num{text-align:right;}
.t-sub{display:block; font-size:var(--fs-xs); font-weight:400; color:var(--text-faint); letter-spacing:0; text-transform:none;}
.t-foot{padding:var(--s3) var(--s5); border-top:1px solid var(--border); background:var(--surface-2); font-size:var(--fs-sm); color:var(--text-muted);}

/* ============================================================================
   funnel (Overview hero)
   ========================================================================= */
.funnel{display:grid; gap:0;}
.fstage{display:grid; grid-template-columns:minmax(150px,190px) minmax(0,1fr) 128px; gap:var(--s4); align-items:center; padding:var(--s3) 0;}
.fstage-label{min-width:0;}
.fstage-label .fname{font-size:var(--fs-sm); font-weight:900; letter-spacing:.07em; text-transform:uppercase;}
.fstage-label .fdesc{font-size:var(--fs-xs); color:var(--text-muted); line-height:1.35;}
.fbar-track{background:var(--surface-2); border-radius:2px; height:30px; position:relative; overflow:hidden;}
.fbar{
  height:100%; min-width:3px; background:var(--accent-fill); border-radius:2px;
  display:flex; align-items:center;
}
.fbar--muted{background:var(--border-strong);}
.fbar--warn{background:var(--warn-line);}
.fbar-inlabel{
  position:absolute; left:var(--s3); top:0; height:100%;
  display:flex; align-items:center; font-size:var(--fs-xs); font-weight:700; color:var(--text-muted);
}
.fbar-inlabel--on{color:var(--accent-on-fill);}
.fstage-value{text-align:right;}
.fstage-value .fcount{font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em; line-height:1.1;}
.fstage-value .fpct{display:block; font-size:var(--fs-xs); color:var(--text-muted);}

.fdrop{
  display:grid; grid-template-columns:minmax(150px,190px) minmax(0,1fr) 128px; gap:var(--s4);
  align-items:center; padding:2px 0;
}
.fdrop-inner{
  grid-column:2 / span 2;
  display:flex; align-items:center; gap:var(--s2);
  font-size:var(--fs-xs); color:var(--bad-text); font-weight:700;
  border-left:2px dashed var(--border-strong); padding:var(--s1) 0 var(--s1) var(--s3); margin-left:6px;
}
.fdrop-inner .why{color:var(--text-muted); font-weight:400;}

.fverdict{
  margin-top:var(--s4); padding:var(--s5);
  /* Neutral, not danger: zero confirmed opportunities is the expected result of a cost model that
     works, and it is what most honest runs will show. Framing the normal reading as an alarm trains
     the reader to discount it — the opposite of what this console is for. The left rule keeps it
     prominent without claiming something broke. */
  border:1px solid var(--border-strong); border-left:4px solid var(--accent-fill);
  border-radius:var(--radius-lg);
  background:var(--surface);
}
.fverdict .vhead{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s2);}
.fverdict .vnum{font-size:var(--fs-3xl); font-weight:900; color:var(--text); line-height:1; letter-spacing:-.03em;}
.fverdict .vlabel{font-size:var(--fs-sm); font-weight:900; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted);}
.fverdict p{color:var(--text); font-size:var(--fs-sm); max-width:96ch;}

/* terminal stacked bar */
.tstack{display:flex; height:34px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);}
.tseg{min-width:2px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900;}
.tlegend{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s3); font-size:var(--fs-sm);}
.tlegend li{display:flex; align-items:center; gap:7px; list-style:none;}
.tlegend .sw{width:11px;height:11px;border-radius:2px;flex:0 0 auto;border:1px solid rgba(0,0,0,.12);}
.tlegend .lcount{color:var(--text-muted); font-family:var(--mono); font-size:12px;}

/* ============================================================================
   meters / bars
   ========================================================================= */
/* inline-block is required: a bare inline span ignores height and width */
.meter{
  display:inline-block; vertical-align:middle;
  width:100%; max-width:132px; min-width:60px; height:7px;
  background:var(--surface-2); border-radius:4px; overflow:hidden;
  border:1px solid var(--border);
}
.meter > span{display:block; height:100%; background:var(--accent-fill); border-radius:4px;}
.meter--warn > span{background:var(--warn-line);}
.meter--bad > span{background:var(--bad-line);}
.meter--neutral > span{background:var(--border-strong);}

.lat-row{display:grid; grid-template-columns:minmax(0,1fr); gap:6px;}
.lat-bar{position:relative; height:26px; min-width:210px; background:var(--surface-2); border-radius:2px; border:1px solid var(--border);}
.lat-fill{position:absolute; left:0; top:0; height:100%; background:var(--accent-wash); border-left:3px solid var(--accent-fill); border-radius:2px;}
.lat-p99{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--bad-line);}
.lat-scale{display:flex; justify-content:space-between; font-size:10px; color:var(--text-faint); font-family:var(--mono);}

/* ============================================================================
   transferability matrix
   ========================================================================= */
.matrix-note{font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--s3);}

/* callout */
.callout{
  display:flex; gap:var(--s3); padding:var(--s4);
  border:1px solid var(--border); border-left:3px solid var(--info-line);
  border-radius:var(--radius-lg); background:var(--surface); font-size:var(--fs-sm);
}
.callout svg{flex:0 0 auto; width:17px; height:17px; color:var(--info-line); margin-top:1px;}
.callout--warn{border-left-color:var(--warn-line);}
.callout--warn svg{color:var(--warn-line);}
.callout--bad{border-left-color:var(--bad-line);}
.callout--bad svg{color:var(--bad-line);}
.callout b{display:block; margin-bottom:3px;}
.callout p{color:var(--text-muted);}

.kv{display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4); font-size:var(--fs-sm); margin:0;}
.kv dt{color:var(--text-muted);}
.kv dd{margin:0; font-weight:700; text-align:right; font-family:var(--mono); font-size:12px;}

.legend-row{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); font-size:var(--fs-sm); color:var(--text-muted); padding:0; margin:var(--s3) 0 0; list-style:none;}
.legend-row li{display:flex; align-items:center; gap:6px;}

footer.app-foot{
  border-top:1px solid var(--border); margin-top:var(--s10);
  padding:var(--s5) var(--s8); font-size:var(--fs-sm); color:var(--text-muted);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); align-items:center;
}

/* ============================================================================
   responsive — 820px tablet
   ========================================================================= */
@media (max-width:1180px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);}
  .sidenav{
    position:sticky; top:calc(56px + 76px); min-height:0;
    border-right:0; border-bottom:1px solid var(--border);
    padding:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .sidenav h2, .sidenav-foot{display:none;}
  .sidenav ul{display:flex; min-width:max-content;}
  .navbtn{
    border-left:0; border-bottom:3px solid transparent;
    padding:11px var(--s4); white-space:nowrap;
  }
  .navbtn[aria-selected="true"]{border-left:0; border-bottom-color:var(--accent-fill); background:var(--accent-wash);}
  .navbtn .navcount{display:none;}
  main{padding:var(--s5) var(--s5) var(--s8);}
  footer.app-foot{padding:var(--s5);}
  .fstage, .fdrop{grid-template-columns:minmax(120px,150px) minmax(0,1fr) 96px; gap:var(--s3);}
  .fstage-value .fcount{font-size:var(--fs-lg);}
}

/* ============================================================================
   responsive — 390px phone: tables collapse to stacked cards
   Roles are authored on every table element so semantics survive display:block.
   ========================================================================= */
@media (max-width:680px){
  :root{--fs-2xl:24px; --fs-3xl:30px;}
  .topbar{flex-wrap:wrap; padding:var(--s3) var(--s4); gap:var(--s2) var(--s3);}
  .topbar-modes{width:100%; justify-content:flex-start;}
  .sidenav{top:auto; position:static;}
  .sample-banner{position:static; padding:var(--s3) var(--s4);}
  main{padding:var(--s4) var(--s4) var(--s8);}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr);}
  .card{padding:var(--s4);}

  .fstage{grid-template-columns:minmax(0,1fr) 92px; grid-template-areas:"label value" "bar bar"; gap:var(--s2) var(--s3); padding:var(--s3) 0 var(--s2);}
  .fstage-label{grid-area:label;} .fstage-value{grid-area:value;} .fbar-track{grid-area:bar;}
  .fdrop{grid-template-columns:minmax(0,1fr);}
  .fdrop-inner{grid-column:1; flex-wrap:wrap;}
  .fverdict .vnum{font-size:var(--fs-2xl);}

  .t-wrap{overflow-x:visible; border:0; background:transparent;}
  caption{display:block; width:100%; padding:0 0 var(--s3); border-bottom:0; background:transparent;}
  table{display:block;}
  thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  tbody{display:block;}
  tbody tr{
    display:block; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius-lg);
    margin-bottom:var(--s3); padding:var(--s2) 0; overflow:hidden;
  }
  tbody tr.row-flagged{border-color:var(--warn-line); border-width:2px;}
  tbody tr.row-group{background:var(--surface-2); padding:0;}
  tbody tr.row-group th{display:block; padding:var(--s2) var(--s4);}
  tbody th, tbody td{
    display:flex; gap:var(--s4); justify-content:space-between; align-items:baseline;
    padding:6px var(--s4); border-bottom:0; text-align:right; white-space:normal;
  }
  /* The row header is the card title: label above, full-width value below. */
  tbody th[scope="row"]{
    display:block; text-align:left;
    background:var(--surface-2); padding:var(--s3) var(--s4); margin-bottom:var(--s2);
    font-size:var(--fs-base); border-bottom:1px solid var(--border);
  }
  tbody td > .cv{flex:1 1 auto; min-width:0; text-align:right;}
  tbody td::before, tbody th[scope="row"]::before{
    content:attr(data-label);
    flex:0 1 auto; text-align:left; color:var(--text-muted);
    font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
    padding-top:3px; white-space:nowrap;
  }
  tbody th[scope="row"]::before{display:block; color:var(--text-faint); margin-bottom:3px;}
  tbody th[scope="row"]{min-width:0; max-width:none;}
  tbody th[scope="row"] .t-sub{text-align:left;}
  tbody td .lat-bar, tbody td .meter{flex:1 1 auto; min-width:90px;}
  .t-num{text-align:right;}
  .t-foot{border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);}
  .kv dd{text-align:right;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important;}
}
@media print{
  .sidenav,.icon-btn{display:none;}
  .sample-banner{position:static;}
  .shell{grid-template-columns:1fr;}
}


/* ==================================================================================================
   CONSOLE CHROME AND PANELS
   These classes are emitted by index.html and app.js but were never defined. The stylesheet was
   taken from design/dashboard-preview.html, whose markup uses a different vocabulary (.sidenav,
   .navbtn, .mode-badge, .fstage), while the console's own markup was written independently
   (.nav, .nav-btn, .chip, .frow). Neither file was wrong on its own; they had simply never been
   checked against each other, so the dashboard rendered as unstyled HTML for anyone who reached it.
   Defined here against the same tokens and the same visual treatment as the approved design.
   ================================================================================================= */

/* ---- top bar ---------------------------------------------------------------------------------- */
.topbar-right{display:flex; align-items:center; gap:var(--s3); margin-left:auto; flex-wrap:wrap;}
.who{font-size:var(--fs-sm); color:var(--text-muted); font-family:var(--mono);}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px; border:1px solid var(--border);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.chip-paper{color:var(--accent); border-color:var(--ok-line); background:var(--ok-bg);}
.chip-off{color:var(--text-muted); background:var(--surface-2);}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;}

.ghost-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--radius); cursor:pointer;
  border:1px solid var(--border); background:transparent; color:var(--text-muted);
  font:inherit; font-size:var(--fs-sm);
}
.ghost-btn:hover{background:var(--surface); color:var(--text);}

/* ---- navigation ------------------------------------------------------------------------------- */
.nav{
  border-right:1px solid var(--border); background:var(--bg);
  padding:var(--s5) var(--s3); display:flex; flex-direction:column; gap:var(--s5);
  align-self:stretch;
}
.nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.nav-btn{
  width:100%; text-align:left; cursor:pointer;
  padding:8px var(--s3); border-radius:var(--radius);
  border:1px solid transparent; background:transparent; color:var(--text-muted);
  font:inherit; font-size:var(--fs-sm);
}
.nav-btn:hover{background:var(--surface-2); color:var(--text);}
.nav-btn[aria-current="page"]{
  background:var(--accent-wash); color:var(--text); font-weight:700;
  border-color:var(--ok-line);
}
.nav-foot{margin-top:auto; display:flex; flex-direction:column; gap:var(--s2);}
.nav-note{font-size:var(--fs-xs); color:var(--text-faint); line-height:1.5; margin:0;}

/* The one control that changes anything. Styled as a warning, never as a primary action. */
.halt-btn{
  width:100%; cursor:pointer; padding:8px var(--s3); border-radius:var(--radius);
  border:1px solid var(--bad-line); background:var(--bad-bg); color:var(--bad-text);
  font:inherit; font-size:var(--fs-sm); font-weight:700;
}
.halt-btn:hover{filter:brightness(1.06);}
.halt-btn[disabled]{opacity:.6; cursor:default;}

/* ---- main ------------------------------------------------------------------------------------- */
.main{padding:var(--s6) var(--s6) var(--s10); display:grid; gap:var(--s5); align-content:start; min-width:0;}
.loading{color:var(--text-faint); font-size:var(--fs-sm);}

.card-title{margin:0; font-size:var(--fs-lg); font-weight:900; letter-spacing:-.01em;}
.card-note{margin:4px 0 var(--s4); font-size:var(--fs-sm); color:var(--text-muted);}

/* ---- stat tiles ------------------------------------------------------------------------------- */
.stat-label{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint);}
.stat-value{font-size:var(--fs-2xl); font-weight:900; font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.stat-note{font-size:var(--fs-xs); color:var(--text-muted);}

/* ---- funnel ----------------------------------------------------------------------------------- */
.funnel-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3);}
.frow{display:grid; grid-template-columns:minmax(7rem,auto) 1fr minmax(4rem,auto); gap:var(--s3); align-items:center;}
.ftier{font-size:var(--fs-sm); font-weight:700;}
.fcount{font-family:var(--mono); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; text-align:right;}
.fshare{font-size:var(--fs-xs); color:var(--text-faint); font-variant-numeric:tabular-nums;}
/* The bar is the measurement, so it gets the accent; the track is inert. */
.fbar{background:var(--surface-2); border-radius:2px; height:10px; overflow:hidden;}
.fbar-fill{height:100%; background:var(--accent-fill); border-radius:2px; min-width:2px; display:block;}

/* ---- tables ----------------------------------------------------------------------------------- */
/* Its own scroll container: a wide table may run past the viewport, the page must not. */
.tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg);}
.tablewrap table{width:100%; border-collapse:collapse; font-size:var(--fs-sm);}
.tablewrap th, .tablewrap td{padding:var(--s2) var(--s3); text-align:left; border-bottom:1px solid var(--border); white-space:nowrap;}
.tablewrap th{
  background:var(--surface-2); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-faint); position:sticky; top:0;
}
.tablewrap tr:last-child td{border-bottom:none;}

/* ---- absence, stated rather than faked -------------------------------------------------------- */
.empty{color:var(--text-faint); font-size:var(--fs-sm); margin:0; padding:var(--s4) 0;}
.empty.error{color:var(--bad-text);}
.muted{color:var(--text-muted);}
.val-pos{color:var(--ok-text); font-variant-numeric:tabular-nums;}
.val-neg{color:var(--bad-text); font-variant-numeric:tabular-nums;}

@media (max-width:820px){
  .shell{grid-template-columns:1fr;}
  .nav{border-right:none; border-bottom:1px solid var(--border);}
  .nav ul{flex-direction:row; flex-wrap:wrap;}
  .nav-btn{width:auto;}
  .main{padding:var(--s5) var(--s4) var(--s8);}
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  .frow{grid-template-columns:1fr auto;}
  .frow .fbar{grid-column:1 / -1;}
}

/* ==================================================================================================
   SIGN-IN PAGE
   The design reviewed and approved in design/login-preview.html, implemented rather than
   approximated. An earlier version of this file carried a plain centred card I invented; the
   approved page is a two-column layout whose left panel states what the console is FOR -- the
   thesis and the five costs every opportunity is measured against -- so the first thing anyone
   sees, before signing in, is the platform's own premise.
   Every rule is scoped under .signin-gate: this stylesheet already defines .brand, .card and .chip
   for the console itself, and the two must not collide.
   ================================================================================================= */
/* Google renders its button into here at a fixed pixel width; centre whatever size it chooses. */
.gsi-mount{display:flex; justify-content:center; min-height:44px;}

.signin-gate{
  position:fixed;
  inset:0;
  z-index:100;
  overflow-y:auto;
  background:var(--bg);
}

/* Panel tokens. The left panel stays dark in BOTH themes -- it is the product's own surface, not a
   themed one -- so these are defined once and not redefined in the dark block below. */
:root{
  --panel-bg:#07191F;
  --panel-surface:#0B2129;
  --panel-border:#1C3D4A;
  --panel-text:#E9F1F1;
  --panel-muted:#9CB2B7;
  --panel-faint:#7C9298;
  --g-btn-bg:#FFFFFF;
  --g-btn-border:#747775;
  --g-btn-text:#1F1F1F;
  --g-btn-hover:#F7F8F8;
  --font-google:'Roboto','Helvetica Neue',Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --panel-bg:#040F13;
    --panel-surface:#0A1E26;
    --g-btn-bg:#131314;
    --g-btn-border:#8E918F;
    --g-btn-text:#E3E3E3;
    --g-btn-hover:#1E1F20;
  }
}
:root[data-theme="dark"]{
  --panel-bg:#040F13;
  --panel-surface:#0A1E26;
  --g-btn-bg:#131314;
  --g-btn-border:#8E918F;
  --g-btn-text:#E3E3E3;
  --g-btn-hover:#1E1F20;
}

.signin-gate .sg-eyebrow{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-faint);
}

/* ============================================================================ shell */
.signin-gate .sg-shell{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  min-height:100vh; min-height:100dvh;
}

/* ---------------------------------------------------------------- left panel */
.signin-gate .sg-panel{
  background:var(--panel-bg);
  color:var(--panel-text);
  padding:var(--s10) var(--s8);
  display:flex; flex-direction:column; gap:var(--s8);
  border-right:1px solid var(--panel-border);
  position:relative; overflow:hidden;
}
/* a faint ruled ground: the console's own grid, not decoration for its own sake */
.signin-gate .sg-panel::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--panel-border) 1px, transparent 1px);
  background-size:100% 46px;
  opacity:.4; pointer-events:none;
}
.signin-gate .sg-panel > *{position:relative;}

.signin-gate .sg-brand{display:flex; align-items:center; gap:var(--s3);}
.signin-gate .sg-brand-mark{
  width:30px; height:30px; flex:none; border-radius:var(--radius);
  background:var(--green-bright); color:var(--green-ink);
  display:grid; place-items:center; font-weight:900; font-size:15px; letter-spacing:-.04em;
}
.signin-gate .sg-brand-name{font-size:var(--fs-md); font-weight:700; letter-spacing:.01em;}
.signin-gate .sg-brand-sub{font-size:var(--fs-xs); color:var(--panel-faint); letter-spacing:.06em; text-transform:uppercase;}

.signin-gate .sg-thesis{max-width:34rem; display:flex; flex-direction:column; gap:var(--s4);}
.signin-gate .sg-thesis h1{font-size:var(--fs-3xl); color:var(--panel-text);}
.signin-gate .sg-thesis p{color:var(--panel-muted); font-size:var(--fs-md); max-width:33rem;}

/* the cost ladder: the product's method, stated as structure */
.signin-gate .sg-ladder{display:flex; flex-direction:column; gap:1px; background:var(--panel-border); border:1px solid var(--panel-border); border-radius:var(--radius-lg); overflow:hidden; max-width:34rem;}
.signin-gate .sg-rung{
  background:var(--panel-surface);
  display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
}
.signin-gate .sg-rung-n{font-family:var(--mono); font-size:var(--fs-xs); color:var(--panel-faint);}
.signin-gate .sg-rung-name{font-size:var(--fs-sm); color:var(--panel-text); font-weight:700;}
.signin-gate .sg-rung-note{font-size:var(--fs-xs); color:var(--panel-faint); text-align:right;}
.signin-gate .sg-rung.is-last{background:linear-gradient(90deg, rgba(98,216,78,.14), transparent 70%);}
.signin-gate .sg-rung.is-last .rung-name{color:var(--green-bright);}

.signin-gate .sg-panel-foot{margin-top:auto; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:center;}
.signin-gate .sg-chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px var(--s3); border-radius:999px; border:1px solid;
}
.signin-gate .sg-chip-paper{color:var(--green-bright); border-color:rgba(98,216,78,.45); background:rgba(98,216,78,.1);}
.signin-gate .sg-chip-off{color:var(--panel-muted); border-color:var(--panel-border); background:rgba(255,255,255,.03);}
.signin-gate .sg-dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

/* --------------------------------------------------------------- right side */
.signin-gate .sg-side{
  display:flex; flex-direction:column;
  padding:var(--s6) var(--s8) var(--s8);
  background:var(--bg);
}
.signin-gate .sg-side-top{display:flex; justify-content:flex-end; align-items:center; gap:var(--s2);}
.signin-gate .sg-ghost-btn{
  font:inherit; font-size:var(--fs-sm); color:var(--text-muted);
  background:transparent; border:1px solid var(--border); border-radius:var(--radius);
  padding:5px var(--s3); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.signin-gate .sg-ghost-btn:hover{background:var(--surface); color:var(--text);}

.signin-gate .sg-card-wrap{flex:1; display:grid; place-items:center; padding-block:var(--s8);}
.signin-gate .sg-card{width:100%; max-width:26.5rem; display:flex; flex-direction:column; gap:var(--s5);}

.signin-gate .sg-card-head{display:flex; flex-direction:column; gap:var(--s2);}
.signin-gate .sg-card-head h2{font-size:var(--fs-2xl);}
.signin-gate .sg-card-head p{color:var(--text-muted); font-size:var(--fs-md);}

/* ------------------------------------------------- Google sign-in button
   Built to Google's published button specification: 40px tall, 4px radius,
   1px #747775 border on white (#131314 / #8E918F in dark), Roboto Medium 14px,
   an 18px four-colour G, 12px gap. The spec is deliberately not restyled to
   match our own buttons: people recognise this control by its exact shape,
   and that recognition is what makes it trustworthy.                        */
.signin-gate .g-btn{
  width:100%; height:40px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:0 12px;
  background:var(--g-btn-bg); color:var(--g-btn-text);
  border:1px solid var(--g-btn-border); border-radius:4px;
  font-family:var(--font-google); font-size:14px; font-weight:500; letter-spacing:.005em;
  cursor:pointer; transition:background-color .12s ease, box-shadow .12s ease;
}
.signin-gate .g-btn:hover{background:var(--g-btn-hover);}
.signin-gate .g-btn:active{transform:translateY(.5px);}
.signin-gate .g-btn[disabled]{opacity:.62; cursor:default;}
.signin-gate .g-btn svg{width:18px; height:18px; flex:none;}
.signin-gate .g-btn .spinner{
  width:18px; height:18px; flex:none; border-radius:50%;
  border:2px solid var(--g-btn-border); border-top-color:transparent;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .g-btn .spinner{animation-duration:2.4s;} }

.signin-gate .sg-note{
  display:flex; gap:var(--s3); align-items:flex-start;
  border:1px solid var(--border); border-left:3px solid var(--info-line);
  background:var(--surface); border-radius:var(--radius);
  padding:var(--s3) var(--s4); font-size:var(--fs-sm); color:var(--text-muted);
}
.signin-gate .sg-note svg{flex:none; margin-top:2px; color:var(--info-line);}
.signin-gate .sg-note strong{color:var(--text); font-weight:700;}

.signin-gate .sg-msg{
  display:none; gap:var(--s3); align-items:flex-start;
  border:1px solid; border-left-width:3px; border-radius:var(--radius);
  padding:var(--s3) var(--s4); font-size:var(--fs-sm);
}
.signin-gate .sg-msg.is-on{display:flex;}
.signin-gate .sg-msg-bad{background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad-text);}
.signin-gate .sg-msg-bad strong{display:block; font-weight:700; margin-bottom:2px;}

.signin-gate .sg-facts{border-top:1px solid var(--border); padding-top:var(--s4); display:flex; flex-direction:column; gap:var(--s3);}
.signin-gate .sg-fact{display:grid; grid-template-columns:18px 1fr; gap:var(--s3); font-size:var(--fs-sm); color:var(--text-muted);}
.signin-gate .sg-fact svg{margin-top:3px; color:var(--accent);}
.signin-gate .sg-fact b{color:var(--text); font-weight:700;}

.signin-gate .sg-side-foot{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  font-size:var(--fs-xs); color:var(--text-faint);
  border-top:1px solid var(--border); padding-top:var(--s4);
}

/* -------------------------------------------------------- preview controls */

@media (max-width:900px){
  .signin-gate .sg-shell{grid-template-columns:1fr; min-height:0;}
  .signin-gate .sg-panel{
    padding:var(--s6) var(--s5);
    gap:var(--s5);
    border-right:none; border-bottom:1px solid var(--panel-border);
  }
  .signin-gate .sg-thesis h1{font-size:var(--fs-2xl);}
  .signin-gate .sg-ladder{max-width:none;}
  .signin-gate .sg-side{padding:var(--s5);}
  .signin-gate .sg-card-wrap{padding-block:var(--s6);}
}
@media (max-width:420px){
  .signin-gate .sg-panel{padding:var(--s5) var(--s4);}
  .signin-gate .sg-side{padding:var(--s4);}
  .signin-gate .sg-thesis h1{font-size:var(--fs-xl);}
  .signin-gate .sg-rung{grid-template-columns:18px 1fr; gap:var(--s2); padding:var(--s2) var(--s3);}
  .signin-gate .sg-rung-note{display:none;}
}