/* =========================================================================
   AGENT BOURSE — "Midnight Desk" (V4.1)
   One file, the entire identity. Served at /theme.css (pre-auth allowlisted
   so the front door dresses itself before a session exists).

   Ported from the approved mockup: docs/mockups/v4.1-overview-reference.html
   Source of truth for every token and component class below is that file's
   <style> block. One deliberate deviation from the mockup: the mockup
   defaults its accent swatch to gold — here TEAL is the default (no
   data-accent attribute needed), gold and blue are opt-in via
   :root[data-accent="gold"|"blue"].

   Fonts are self-hosted (offline VPS, no egress): General Sans (UI) and
   JetBrains Mono (numbers). Font files land in Task 2 at /fonts/; until
   then the system-font fallback chain carries the page.
   ========================================================================= */

/* ------------------------------------------------------------------ fonts */
@font-face{
  font-family:'General Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/GeneralSans-Medium.woff2") format("woff2");
}
@font-face{
  font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/GeneralSans-Semibold.woff2") format("woff2");
}
@font-face{
  font-family:'General Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/GeneralSans-Bold.woff2") format("woff2");
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens */
:root{
  /* MIDNIGHT — dark-first. Deep navy-black room lit by the data. */
  --bg:#06080F; --bg2:#080B14; --void:#04060B;
  --panel:#0E1320; --panel2:#141B2B; --raise:#1A2334;
  --glass-hi:rgba(180,200,240,.05); --glass-lo:rgba(180,200,240,.015);
  --line:rgba(150,175,220,.09); --line2:rgba(150,175,220,.17); --line3:rgba(150,175,220,.28);
  --ink:#ECEFF8; --ink2:#909BB4; --ink3:#525D77; --ink4:#39425A;
  --up:#2FE0A0; --up2:#16B67F; --up-soft:rgba(47,224,160,.13); --up-glow:rgba(47,224,160,.55);
  --down:#FF6A72; --down-soft:rgba(255,106,114,.13);
  --warn:#F1B24B; --warn-soft:rgba(241,178,75,.14);
  --grid:rgba(150,175,220,.05);
  /* TEAL is the bare-:root default accent (V4.1 decision — mockup ships gold as
     default; flipped here). Gold moves to :root[data-accent="gold"] below. */
  --accent:#37D8D0; --accent2:#189E97; --accent-ink:#012321;
  --accent-soft:rgba(55,216,208,.14); --accent-line:rgba(55,216,208,.42); --accent-glow:rgba(55,216,208,.5);
  --sans:'General Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --r:16px; --r-sm:11px; --r-xs:8px;
  color-scheme:dark;
}
:root[data-accent="gold"]{--accent:#F0C25E;--accent2:#C79A3C;--accent-ink:#171200;--accent-soft:rgba(240,194,94,.14);--accent-line:rgba(240,194,94,.4);--accent-glow:rgba(240,194,94,.5)}
:root[data-accent="blue"]{--accent:#5A9BFF;--accent2:#2D6CE0;--accent-ink:#00102e;--accent-soft:rgba(90,155,255,.15);--accent-line:rgba(90,155,255,.42);--accent-glow:rgba(90,155,255,.55)}

@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#EEF1F6; --bg2:#E6EAF1; --void:#DDE2EB; --panel:#FFFFFF; --panel2:#F5F7FB; --raise:#EEF2F8;
  --glass-hi:rgba(255,255,255,.7); --glass-lo:rgba(255,255,255,.2);
  --line:rgba(24,34,54,.09); --line2:rgba(24,34,54,.15); --line3:rgba(24,34,54,.24);
  --ink:#0E1524; --ink2:#4E5A70; --ink3:#8390A6; --ink4:#AAB4C6;
  --up:#0EA372; --up2:#0B8A60; --up-soft:rgba(14,163,114,.1); --up-glow:rgba(14,163,114,.28);
  --down:#E0454C; --down-soft:rgba(224,69,76,.1);
  --warn:#C4881B; --warn-soft:rgba(196,136,27,.1);
  --grid:rgba(24,34,54,.055);
  /* light-theme default accent is also TEAL (flipped from the mockup's gold default) */
  --accent:#0E8F88; --accent2:#0A6E68; --accent-ink:#fff8e6; --accent-soft:rgba(14,143,136,.11);
  --accent-line:rgba(14,143,136,.36); --accent-glow:rgba(14,143,136,.2);
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#EEF1F6; --bg2:#E6EAF1; --void:#DDE2EB; --panel:#FFFFFF; --panel2:#F5F7FB; --raise:#EEF2F8;
  --glass-hi:rgba(255,255,255,.7); --glass-lo:rgba(255,255,255,.2);
  --line:rgba(24,34,54,.09); --line2:rgba(24,34,54,.15); --line3:rgba(24,34,54,.24);
  --ink:#0E1524; --ink2:#4E5A70; --ink3:#8390A6; --ink4:#AAB4C6;
  --up:#0EA372; --up2:#0B8A60; --up-soft:rgba(14,163,114,.1); --up-glow:rgba(14,163,114,.28);
  --down:#E0454C; --down-soft:rgba(224,69,76,.1);
  --warn:#C4881B; --warn-soft:rgba(196,136,27,.1);
  --grid:rgba(24,34,54,.055);
  /* light-theme default accent is also TEAL (flipped from the mockup's gold default) */
  --accent:#0E8F88; --accent2:#0A6E68; --accent-ink:#fff8e6; --accent-soft:rgba(14,143,136,.11);
  --accent-line:rgba(14,143,136,.36); --accent-glow:rgba(14,143,136,.2);
  color-scheme:light;
}
:root[data-theme="light"][data-accent="gold"]{--accent:#B0821F;--accent2:#8A6414;--accent-ink:#fff8e6;--accent-soft:rgba(176,130,31,.12);--accent-line:rgba(176,130,31,.36);--accent-glow:rgba(176,130,31,.2)}
:root[data-theme="light"][data-accent="blue"]{--accent:#2665DC;--accent2:#1B4EB0;--accent-soft:rgba(38,101,220,.1);--accent-line:rgba(38,101,220,.34);--accent-glow:rgba(38,101,220,.2)}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1200px 620px at 68% -12%, var(--accent-soft), transparent 55%),
    radial-gradient(900px 520px at 8% 108%, rgba(47,224,160,.05), transparent 60%);
  background-attachment:fixed;}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.lbl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.pos{color:var(--up)} .neg{color:var(--down)}

.shell{display:grid;grid-template-columns:60px 1fr;min-height:100vh}
/* rail */
.rail{display:flex;flex-direction:column;align-items:center;gap:5px;padding:15px 0;height:100vh;position:sticky;top:0;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg2),var(--void));}
.brand{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:16px;
  color:var(--accent-ink);margin-bottom:12px;position:relative;
  background:linear-gradient(140deg,var(--accent),var(--accent2));
  box-shadow:0 6px 20px var(--accent-glow),0 0 0 1px rgba(255,255,255,.14) inset}
.rc{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--ink3);cursor:pointer;
  border:1px solid transparent;transition:.16s}
.rc svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rc:hover{color:var(--ink);background:var(--panel)}
.rc.on{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line);box-shadow:0 0 22px -6px var(--accent-glow)}
.rail .grow{flex:1}

.main{min-width:0;padding:0 28px 44px}

/* header */
.top{display:flex;align-items:center;gap:15px;padding:17px 0 13px;position:sticky;top:0;z-index:9;
  background:linear-gradient(var(--bg) 68%,transparent)}
.wm{display:flex;align-items:baseline;gap:2px;font-weight:800;font-size:16px;letter-spacing:.04em}
.wm .b{color:var(--ink3);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:7px;height:29px;padding:0 12px;border-radius:9px;font-size:11.5px;
  border:1px solid var(--line2);background:linear-gradient(180deg,var(--glass-hi),transparent),var(--panel);color:var(--ink2)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 10px var(--up-glow),0 0 0 3px var(--up-soft)}
.pill .num{color:var(--ink)}
.paper{color:var(--warn);border-color:var(--warn-soft);background:var(--warn-soft);font-weight:700;letter-spacing:.08em;font-size:11px}
.spacer{flex:1}
.swatches{display:flex;gap:7px;align-items:center}
.sw{width:15px;height:15px;border-radius:50%;cursor:pointer;outline:1.5px solid var(--line2);outline-offset:2px;transition:.15s}
.sw:hover{transform:scale(1.15)} .sw.on{outline-color:var(--ink);outline-width:2px}
.sw.gold{background:#F0C25E} .sw.teal{background:#37D8D0} .sw.blue{background:#5A9BFF}
.ib{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line2);background:var(--panel);color:var(--ink2)}
.ib:hover{color:var(--ink)} .ib svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}

/* ticker */
.ticker{display:flex;gap:0;overflow:hidden;border:1px solid var(--line);border-radius:11px;margin-bottom:16px;
  background:linear-gradient(180deg,var(--glass-hi),transparent 40%),var(--panel)}
.tk{display:flex;align-items:baseline;gap:8px;padding:9px 15px;border-right:1px solid var(--line);white-space:nowrap;flex:1}
.tk:last-child{border-right:0}
.tk .s{font-weight:700;font-size:12px;letter-spacing:.02em}
.tk .p{font-family:var(--mono);font-size:12px;color:var(--ink2)}
.tk .c{font-family:var(--mono);font-size:11px;font-weight:600;margin-left:auto}

/* verdict */
.verdict{display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:14px;margin-bottom:16px;
  border:1px solid transparent;position:relative;overflow:hidden;
  background:
    linear-gradient(120deg,var(--accent-soft),transparent 44%) padding-box,
    linear-gradient(180deg,var(--glass-hi),transparent 50%) padding-box,
    var(--panel) padding-box,
    linear-gradient(150deg,var(--accent-line),var(--line2) 30%,transparent 72%) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 20px 50px -30px rgba(0,0,0,.8)}
.verdict .qt{font-size:26px;line-height:0;color:var(--accent);font-family:Georgia,serif;opacity:.7}
.verdict p{margin:0;font-size:14px;color:var(--ink2)} .verdict b{color:var(--ink);font-weight:650}
.state{margin-left:auto;flex:none;font-size:10px;font-weight:800;letter-spacing:.09em;padding:6px 11px;border-radius:8px;
  background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-soft)}

.card{border:1px solid transparent;border-radius:var(--r);position:relative;
  background:
    linear-gradient(180deg,var(--glass-hi),var(--glass-lo) 24%,transparent 50%) padding-box,
    var(--panel) padding-box,
    linear-gradient(155deg,var(--line3),var(--line2) 34%,transparent 74%) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 3px 8px rgba(0,0,0,.22),0 28px 62px -32px rgba(0,0,0,.85)}

.hero{display:grid;grid-template-columns:296px 1fr;gap:16px;align-items:stretch}
.kcol{display:flex;flex-direction:column;gap:16px}
.kpi{padding:18px 18px 16px}
.kpi .big{font-size:46px;font-weight:680;letter-spacing:-.035em;line-height:.92;margin-top:9px;
  background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 62%,var(--ink3)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi .big s{text-decoration:none;color:var(--ink3);font-size:30px}
.kpi .sub{display:flex;align-items:center;gap:9px;margin-top:13px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px;font-size:12px;font-weight:700;font-family:var(--mono)}
.chip.down{background:var(--down-soft);color:var(--down)} .chip.up{background:var(--up-soft);color:var(--up)}
.kpi .sub .mut{font-size:12.5px;color:var(--ink3)}
.kspark{height:34px;margin:15px -2px 0}
.kpi .row2{display:flex;gap:0;margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.kpi .row2>div{flex:1} .kpi .row2>div+div{border-left:1px solid var(--line);padding-left:16px}
.kpi .row2 .v{font-size:15px;font-weight:650;margin-top:4px}

.cage{padding:16px 18px}
.cage .hh{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.cage .track{height:9px;border-radius:6px;background:var(--void);border:1px solid var(--line);overflow:hidden;position:relative}
.cage .fill{height:100%;width:3%;border-radius:6px;background:linear-gradient(90deg,var(--up),var(--warn) 76%,var(--down));
  box-shadow:0 0 14px -2px var(--up-glow)}
.cage .ticks{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--ink3)}
.cage .foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:12px}
.safe{display:inline-flex;align-items:center;gap:7px;color:var(--up);font-weight:650}
.safe svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

.chart{padding:16px 18px 10px;display:flex;flex-direction:column;min-height:340px}
.chart .ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.legend{display:flex;gap:18px;font-size:12px;color:var(--ink2);align-items:center}
.legend b{color:var(--ink);font-weight:600}
.legend i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:7px;vertical-align:middle}
.legend .f i{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)} .legend .g i{background:var(--ink3);opacity:.7}
.ranges{display:flex;gap:3px;padding:3px;border-radius:9px;background:var(--void);border:1px solid var(--line)}
.range{font-size:11px;font-weight:650;color:var(--ink3);padding:5px 11px;border-radius:6px;cursor:pointer}
.range.on{color:var(--accent-ink);background:linear-gradient(180deg,var(--accent),var(--accent2))}
.plot{position:relative;flex:1;min-height:250px;margin-top:6px;cursor:crosshair}
.plot svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cross{position:absolute;top:0;bottom:0;width:1px;background:var(--line3);pointer-events:none;opacity:0;transition:opacity .1s}
.cdot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--accent);pointer-events:none;opacity:0;
  transform:translate(-50%,-50%);box-shadow:0 0 0 4px var(--bg),0 0 16px var(--accent-glow)}
.ctag{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-140%);white-space:nowrap;
  padding:5px 9px;border-radius:8px;font-family:var(--mono);font-size:12px;font-weight:600;
  background:var(--raise);border:1px solid var(--line2);color:var(--ink);box-shadow:0 8px 24px -8px rgba(0,0,0,.8)}
.ctag .d{color:var(--ink3);font-size:10.5px;margin-top:1px}

.sec{display:flex;align-items:baseline;gap:11px;margin:28px 0 14px}
.sec h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0;font-weight:700;color:var(--ink2)}
.sec .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.sec .hint{font-size:11.5px;color:var(--ink3);font-style:italic}

.fleet{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.agent{padding:17px 18px;position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.3,.1,.2,1),box-shadow .2s;
  border:1px solid transparent;border-radius:var(--r);
  background:
    radial-gradient(340px 210px at 100% -14%,color-mix(in srgb,var(--ac) 16%,transparent),transparent 60%) padding-box,
    linear-gradient(180deg,var(--glass-hi),transparent 28%) padding-box,
    var(--panel) padding-box,
    linear-gradient(155deg,color-mix(in srgb,var(--ac) 30%,var(--line3)),var(--line2) 36%,transparent 76%) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 20px 46px -28px rgba(0,0,0,.82)}
.agent:hover{transform:translateY(-4px);
  background:
    radial-gradient(360px 230px at 100% -14%,color-mix(in srgb,var(--ac) 24%,transparent),transparent 60%) padding-box,
    linear-gradient(180deg,var(--glass-hi),transparent 28%) padding-box,
    var(--panel) padding-box,
    linear-gradient(155deg,color-mix(in srgb,var(--ac) 55%,var(--line3)),var(--line2) 38%,transparent 78%) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 32px 64px -28px rgba(0,0,0,.85),0 0 48px -18px var(--ac)}
.agent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac);box-shadow:0 0 22px -1px var(--ac)}
.agent .ah{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.agent .nm{font-weight:750;font-size:16px;letter-spacing:.01em}
.agent .ty{font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--ink3);
  padding:3px 8px;border-radius:6px;background:var(--void);border:1px solid var(--line)}
.status{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.09em;padding:4px 9px;border-radius:7px;display:inline-flex;align-items:center;gap:6px}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.status.observing{background:var(--warn-soft);color:var(--warn)}
.status.trading{background:var(--up-soft);color:var(--up)}
.agent .mandate{font-size:12px;line-height:1.5;color:var(--ink2);margin:11px 0 13px;min-height:36px}
.agent .midrow{display:flex;align-items:flex-end;gap:16px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.agent .midrow .v{font-size:15px;font-weight:700;margin-top:4px}
.asp{flex:1;height:30px;align-self:center}
.thesis{display:flex;align-items:center;gap:11px;padding-top:12px}
.thesis .tk2{font-family:var(--mono);font-weight:700;width:50px;font-size:13.5px}
.thesis .bar{flex:1;height:8px;border-radius:6px;background:var(--void);overflow:hidden;
  border:1px solid var(--line);position:relative;box-shadow:0 1px 2px rgba(0,0,0,.3) inset}
.thesis .bv{height:100%;border-radius:6px;position:relative;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 75%,#000),var(--ac));box-shadow:0 0 14px -1px var(--ac)}
.thesis .bv::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;border-radius:6px 6px 0 0;
  background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,0))}
.thesis .pct{width:40px;text-align:right;font-family:var(--mono);font-size:12px;font-weight:600}
.thesis .tgt{width:78px;text-align:right;font-size:10.5px;color:var(--ink3);letter-spacing:.02em}

.tape{padding:5px 6px}
.trow{display:grid;grid-template-columns:76px 62px 1fr auto;align-items:center;gap:13px;padding:10px 13px;
  border-bottom:1px solid var(--line);font-size:12.5px}
.trow:last-child{border-bottom:0} .trow:hover{background:var(--glass-lo)}
.trow .tm{font-family:var(--mono);color:var(--ink3);font-size:11.5px}
.kind{font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:3px 0;border-radius:6px;text-align:center}
.kind.buy{background:var(--up-soft);color:var(--up)} .kind.sell{background:var(--down-soft);color:var(--down)}
.kind.judge{background:var(--accent-soft);color:var(--accent)} .kind.info{background:var(--void);color:var(--ink2);border:1px solid var(--line)}
.trow .desc{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trow .desc b{color:var(--ink);font-weight:650}
.trow .amt{font-family:var(--mono);color:var(--ink3);font-size:12px}

.foot{margin-top:26px;font-size:11px;letter-spacing:.03em;color:var(--ink4);text-align:center}

@media (max-width:1080px){.hero{grid-template-columns:1fr}.fleet{grid-template-columns:1fr}.ticker{display:none}}
@media (max-width:600px){.main{padding:0 14px 30px}.kpi .big{font-size:38px}}
@media (prefers-reduced-motion:no-preference){
  .draw{stroke-dasharray:2600;stroke-dashoffset:2600;animation:dr 1.3s cubic-bezier(.35,.1,.2,1) .1s forwards}
  @keyframes dr{to{stroke-dashoffset:0}}
}