/* Bid Desk. Tokens carried over from the E-470 workspace and the NIVA product
   map, so the console, the strategy documents and this read as one system. */
:root{
  --ground:#F2F4F7; --panel:#FBFCFD; --sunk:#E8ECF1;
  --ink:#131A2A; --ink-2:#4E5A6E; --ink-3:#7B879A;
  --hair:#D4DBE4; --hair-hi:#BCC6D3;
  --accent:#1D4E9F; --accent-ink:#173F82; --accent-soft:#DDE7F7;
  --amber:#9A4B0B; --amber-soft:#F7E6D3;
  --good:#1B6B3A; --good-soft:#DCEDE2;
  --crit:#A32D2D; --crit-soft:#F4DEDE;
  /* A surface that must stay dark in BOTH themes needs its own token. --ink is
     the text colour: it flips to near-white in dark mode, which turned the app
     bar, the toast and every code block into light on light. */
  --deep:#131A2A; --deep-ink:#F2F4F7; --deep-dim:#9FB3D1; --deep-hair:#2C3853;
  --display:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1522; --panel:#161D2C; --sunk:#1E2636;
    --ink:#E6EAF1; --ink-2:#AEB8C8; --ink-3:#7D889B;
    --hair:#2A3345; --hair-hi:#3A4558;
    --accent:#7FA6E8; --accent-ink:#A9C4F1; --accent-soft:#1E2F4D;
    --amber:#E3A46A; --amber-soft:#3A2A18;
    --good:#7CC59A; --good-soft:#17301F;
    --crit:#EE8E8E; --crit-soft:#3A1E1E;
    /* Darker than the ground, so the bar still reads as a bar. */
    --deep:#080D16; --deep-ink:#E6EAF1; --deep-dim:#8496B4; --deep-hair:#212B40;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink)}
.grow{flex:1}
.mono{font-family:var(--mono);font-size:11.5px}
.small{font-size:11.5px}
.dim{color:var(--ink-3)}
.hide{display:none !important}

/* ---------------------------------------------------------------- chrome */
.appbar{height:46px;display:flex;align-items:center;gap:16px;padding:0 18px;background:var(--deep);
  color:var(--deep-ink);border-bottom:1px solid var(--deep-hair);position:sticky;top:0;z-index:20}
.mark{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.03em;background:none;border:0;color:var(--deep-ink);cursor:pointer;padding:0}
.mark:hover{color:var(--accent-ink)}
.appbar nav{display:flex;gap:4px}
.appbar nav button{background:none;border:0;color:var(--deep-dim);font:inherit;font-size:13px;padding:5px 11px;border-radius:6px;cursor:pointer}
.appbar nav button:hover{background:rgba(127,166,232,.14);color:var(--deep-ink)}
.appbar nav button.on{background:rgba(127,166,232,.2);color:var(--deep-ink);font-weight:600}
.appbar .dim{color:var(--deep-dim)}
.ghost{background:transparent;border:1px solid var(--deep-hair);color:var(--deep-dim);border-radius:6px;padding:4px 11px;font:inherit;font-size:11.5px;cursor:pointer}
.ghost:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.wrap{max-width:1160px;margin:0 auto;padding:24px 20px 80px}

h1{font-family:var(--display);font-size:30px;font-weight:700;margin:0 0 4px;line-height:1.1;text-wrap:balance}
h2{font-family:var(--display);font-size:19px;font-weight:600;margin:30px 0 10px}
h2 .why{font-family:var(--body);font-size:12px;font-weight:400;color:var(--ink-3);margin-left:8px}
h3{font-family:var(--display);font-size:16px;font-weight:600;margin:0 0 6px}
p{margin:0 0 12px;color:var(--ink-2);max-width:74ch}
.eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}

/* --------------------------------------------------------------- pieces */
.card{background:var(--panel);border:1px solid var(--hair);border-radius:9px;padding:14px 16px;margin-bottom:12px}
.card.good{background:var(--good-soft)} .card.warn{background:var(--amber-soft)} .card.crit{background:var(--crit-soft)}
.pill{display:inline-block;font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.pill.g{background:var(--good-soft);color:var(--good)} .pill.a{background:var(--amber-soft);color:var(--amber)}
.pill.c{background:var(--crit-soft);color:var(--crit)} .pill.n{background:var(--sunk);color:var(--ink-2)}
.pill.b{background:var(--accent-soft);color:var(--accent-ink)}
button.act{background:var(--accent);color:#fff;border:0;border-radius:7px;padding:8px 15px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
button.act:hover{background:var(--accent-ink)}
button.act.sec{background:var(--panel);color:var(--ink);border:1px solid var(--hair-hi)}
button.act.sec:hover{background:var(--sunk)}
button.act:disabled{opacity:.45;cursor:not-allowed}
button.tiny{font-size:11.5px;padding:4px 9px;border-radius:6px}
label{display:block;font-size:11.5px;color:var(--ink-2);margin:0 0 4px}
input,select,textarea{font:inherit;font-size:13px;border:1px solid var(--hair-hi);border-radius:6px;padding:7px 9px;background:var(--panel);color:var(--ink);width:100%}
textarea{min-height:80px;line-height:1.5}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}

.tablewrap{overflow-x:auto;border:1px solid var(--hair);border-radius:9px;background:var(--panel)}
table{border-collapse:collapse;width:100%}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);font-weight:500;text-align:left;padding:9px 11px;background:var(--sunk);white-space:nowrap}
td{padding:9px 11px;border-bottom:1px solid var(--hair);vertical-align:top;font-size:13px;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:11.5px;white-space:nowrap}
tr.click{cursor:pointer} tr.click:hover td{background:var(--accent-soft)}
.empty{background:var(--panel);border:1px dashed var(--hair-hi);border-radius:9px;padding:18px;color:var(--ink-3);font-size:13px;line-height:1.55}

/* ------------------------------------------------------------ portfolio */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--hair);border-radius:9px;padding:12px 14px}
.kpi .v{font-family:var(--display);font-size:25px;font-weight:700;line-height:1.05}
.kpi .s{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.4}

.bidrow{display:grid;grid-template-columns:96px minmax(0,1fr) 130px 108px 92px;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--hair);border-left:3px solid var(--hair-hi);border-radius:9px;
  padding:12px 14px;margin-bottom:8px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);width:100%}
.bidrow:hover{border-color:var(--accent);border-left-color:var(--accent);background:var(--accent-soft)}
.bidrow.soon{border-left-color:var(--amber)} .bidrow.late{border-left-color:var(--crit)}
.bidrow.done{opacity:.6}
.bidrow .days{font-family:var(--display);font-size:21px;font-weight:700;line-height:1}
.bidrow .days small{display:block;font-family:var(--mono);font-size:9px;font-weight:400;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.bidrow .t{font-weight:600;font-size:14px;line-height:1.25}
.bidrow .w{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.bidrow .meta{font-size:11.5px;color:var(--ink-3)}

/* stage rail */
.stages{display:flex;gap:3px;margin:4px 0 0}
.stages i{height:4px;flex:1;border-radius:2px;background:var(--hair);display:block}
.stages i.done{background:var(--accent)} .stages i.at{background:var(--good)}

/* ------------------------------------------------------------- bid page */
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--hair);margin:18px 0 18px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 13px;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:600}
.tabs button .n{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-left:5px}

.job{background:var(--accent-soft);border:1px solid #C6D6EF;border-radius:9px;padding:12px 14px;margin-bottom:14px}
.job .steps{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.job .steps span{font-family:var(--mono);font-size:10px;padding:3px 9px;border-radius:999px;background:var(--panel);color:var(--ink-3);border:1px solid var(--hair)}
.job .steps span.done{background:var(--good-soft);color:var(--good);border-color:transparent}
.job .steps span.now{background:var(--accent);color:#fff;border-color:transparent}
.spin{display:inline-block;width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-1px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none}}

.checks div{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--hair);font-size:12.5px;align-items:baseline}
.checks div:last-child{border-bottom:0}
.checks .lv{font-family:var(--mono);font-size:10px;width:42px;flex-shrink:0;font-weight:600}
.checks .FAIL{color:var(--crit)} .checks .WARN{color:var(--amber)} .checks .OK{color:var(--good)} .checks .INFO{color:var(--ink-3)}
.checks .ck{width:190px;flex-shrink:0;color:var(--ink)}
.checks .dt{color:var(--ink-2)}

/* rendered markdown */
.md{background:var(--panel);border:1px solid var(--hair);border-radius:9px;padding:20px 24px;overflow-x:auto}
.md h1{font-size:25px;margin:0 0 10px} .md h2{font-size:18px;margin:26px 0 8px} .md h3{font-size:15px;margin:18px 0 6px}
.md p{max-width:76ch}
.md ul,.md ol{margin:0 0 12px;padding-left:22px;color:var(--ink-2)}
.md li{margin-bottom:4px}
.md table{margin:10px 0 16px;font-size:12.5px}
.md code{font-family:var(--mono);font-size:11.5px;background:var(--sunk);padding:1px 5px;border-radius:4px}
.md pre{background:var(--deep);color:var(--deep-ink);padding:12px 14px;border-radius:8px;overflow-x:auto;font-family:var(--mono);font-size:11px;line-height:1.6}
.md pre code{background:none;padding:0;color:inherit}
.md blockquote{border-left:3px solid var(--accent);margin:0 0 12px;padding:2px 0 2px 14px;color:var(--ink-2)}
.md hr{border:0;border-top:1px solid var(--hair);margin:22px 0}

/* -------------------------------------------------------------- upload */
.drop{border:2px dashed var(--hair-hi);border-radius:11px;padding:34px 24px;text-align:center;background:var(--panel);cursor:pointer;transition:border-color .12s, background .12s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop .big{font-family:var(--display);font-size:21px;font-weight:600;margin-bottom:4px}
.modal{position:fixed;inset:0;background:rgba(10,15,25,.55);display:flex;align-items:flex-start;justify-content:center;padding:60px 20px;z-index:50;overflow:auto}
.sheet{background:var(--ground);border-radius:12px;max-width:640px;width:100%;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.3)}

/* signin */
.signin{max-width:380px;margin:9vh auto;padding:0 20px}
.signin .card{padding:24px}
.toast{position:fixed;right:18px;bottom:18px;max-width:520px;background:var(--deep);color:var(--deep-ink);border:1px solid var(--deep-hair);padding:12px 15px;border-radius:9px;font-size:12.5px;line-height:1.5;box-shadow:0 8px 24px rgba(19,26,42,.3);z-index:99}
.toast.bad{background:var(--crit)} .toast.ok{background:var(--good)}

@media (max-width:820px){
  .kpis,.g4,.g3,.g2{grid-template-columns:1fr}
  .bidrow{grid-template-columns:72px minmax(0,1fr);row-gap:8px}
  .bidrow .meta,.bidrow .stagecell{grid-column:2}
}

/* ------------------------------------------------------------------- ask */
.thread{max-height:58vh;overflow-y:auto;border:1px solid var(--hair);border-radius:9px;
  background:var(--panel);padding:14px 16px;margin-bottom:12px}
.turn{margin-bottom:16px}
.turn:last-child{margin-bottom:0}
.turn .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.turn.you .what{background:var(--accent-soft);border-radius:9px;padding:9px 13px;display:inline-block;
  max-width:72ch;color:var(--ink);white-space:pre-wrap}
.turn.bot .what{color:var(--ink-2)}
.turn.bot .what.md{border:0;background:none;padding:0}
.turn.bot .what.md :first-child{margin-top:0}
.turn.bot .what.md p:last-child{margin-bottom:0}
.turn .src{margin-top:8px}
.turn .src summary{cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);list-style:none}
.turn .src summary::-webkit-details-marker{display:none}
.turn .src summary::before{content:"\25B8";margin-right:6px}
.turn .src[open] summary::before{content:"\25BE"}
.askbox textarea{min-height:52px;resize:vertical}
.chip{background:var(--panel);border:1px solid var(--hair);border-radius:999px;padding:6px 13px;
  font:inherit;font-size:11.5px;color:var(--ink-2);cursor:pointer;text-align:left;max-width:100%}
.chip:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}

/* Low confidence on a binding answer is the thing to notice. */
td.lowconf{color:var(--amber);font-weight:600}

/* A result that has just been recomputed, so an unchanged answer still reads
   as a fresh one. */
@keyframes flash { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 3px transparent; } }
.flash { animation: flash 1.2s ease-out; }

.job.live { border-left: 3px solid var(--accent); }
.job.bad { border-left: 3px solid var(--bad); }