/* Upscale Trades live dashboard.
 *
 * The chart hue (#2a78d6 light / #3987e5 dark) and the status palette are carried
 * over unchanged from the validated static dashboard, so no new colour decisions
 * are introduced here. Magnitude is sequential -> one hue. Send readiness is the
 * only categorical-looking scale and it uses the reserved status palette with an
 * icon and a label beside every mark, so colour is never load-bearing.
 *
 * Dark mode is selected, not an inverted flip: each token has its own value
 * chosen against the dark surface.
 */

:root {
  --bg:#fff; --side:#f6f7f9; --card:#fcfcfb; --plane:#f9f9f7;
  --fg:#0b0b0b; --fg2:#52514e; --mut:#898781;
  --line:#e5e7eb; --grid:#e1e0d9; --track:#eceae4; --baseline:#c3c2b7;
  --series-1:#2a78d6; --accent:#2563eb;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --goodfg:#065f46; --goodbg:#d1fae5;
  --warnfg:#92400e; --warnbg:#fef3c7;
  --badfg:#991b1b;  --badbg:#fee2e2;
  --lo:#dc2626; --mid:#d97706; --hi:#059669;
  --shadow:0 1px 2px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:#0d0d0d; --side:#14171d; --card:#1a1a19; --plane:#111;
    --fg:#fff; --fg2:#c3c2b7; --mut:#898781;
    --line:#2c2c2a; --grid:#2c2c2a; --track:#232322; --baseline:#383835;
    --series-1:#3987e5; --accent:#7aa2f7;
    --goodfg:#6ee7b7; --goodbg:#052e26;
    --warnfg:#fcd34d; --warnbg:#3a2a06;
    --badfg:#fca5a5;  --badbg:#3b0d0d;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

/* The UA rule for [hidden] is `display:none` at the lowest specificity, so ANY
 * class that sets display beats it. `.centre` sets display:grid, which meant the
 * login overlay stayed on screen on top of the signed-in app even with the hidden
 * attribute set. Make hidden win everywhere. */
[hidden] { display: none !important; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
a { color:var(--accent); }
.muted { color:var(--mut); }
.small { font-size:13px; }
.note { color:var(--mut); font-size:12.5px; margin:6px 0 0; }
h1 { font-size:20px; margin:0 0 6px; }
h2 { font-size:14px; margin:0 0 2px; letter-spacing:.01em; }
h4 { margin:16px 0 6px; font-size:12px; text-transform:uppercase;
     letter-spacing:.04em; color:var(--mut); }

/* ------------------------------------------------------------------- login */
.centre { min-height:100vh; display:grid; place-items:center; padding:24px; }
.gatebox {
  width:min(360px,100%); background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:24px; box-shadow:var(--shadow);
}
.gatebox label { display:block; font-size:12px; color:var(--mut);
  margin:14px 0 4px; text-transform:uppercase; letter-spacing:.04em; }
.gatebox input {
  width:100%; padding:9px 11px; font:inherit; color:var(--fg);
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
}
.gatebox button {
  width:100%; margin-top:18px; padding:10px; font:inherit; font-weight:600;
  color:#fff; background:var(--series-1); border:0; border-radius:8px; cursor:pointer;
}
.gatebox button:disabled { opacity:.6; cursor:default; }
.gateerr {
  margin:14px 0 0; padding:8px 10px; border-radius:6px; font-size:13px;
  background:var(--badbg); color:var(--badfg);
}

/* ----------------------------------------------------------------- sidebar */
#burger {
  position:fixed; top:12px; left:12px; z-index:40; width:34px; height:34px;
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  color:var(--fg); font-size:16px; line-height:1; cursor:pointer;
}
#burger:hover { border-color:var(--accent); }
#side {
  position:fixed; inset:0 auto 0 0; width:252px; overflow-y:auto;
  background:var(--side); border-right:1px solid var(--line);
  padding:56px 12px 24px; transition:transform .18s ease;
}
body.collapsed #side { transform:translateX(-100%); }
.brand { font-weight:700; font-size:15px; padding:0 8px; }
.brandsub { color:var(--mut); font-size:12px; padding:0 8px 14px; }
.navgroup { margin-bottom:16px; }
.navhead { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--mut); padding:0 8px 6px; }
.navitem {
  display:flex; width:100%; align-items:center; gap:8px; background:none;
  border:0; padding:6px 8px; border-radius:7px; cursor:pointer; color:var(--fg);
  font:inherit; font-size:13.5px; text-align:left;
}
.navitem:hover { background:color-mix(in oklab, var(--accent) 10%, transparent); }
.navitem.active { background:color-mix(in oklab, var(--accent) 16%, transparent);
  font-weight:600; }
.ni-l { flex:1; display:flex; align-items:center; gap:7px; overflow-wrap:anywhere; }
.ni-c { color:var(--mut); font-size:12px; font-variant-numeric:tabular-nums; }
.navitem.active .ni-c { color:var(--fg); }
i.dot { width:8px; height:8px; border-radius:99px; display:inline-block; flex:none; }
i.dot.good { background:var(--good); }
i.dot.warn { background:var(--warning); }
i.dot.bad  { background:var(--critical); }

/* -------------------------------------------------------------------- main */
/* The sidebar navigates both tabs now (projects, then lead filters), so it is
   always present and `#main` always allows for it. */
#main { padding:20px 24px 60px; max-width:1120px; margin-left:252px;
  transition:margin .18s ease; }
body.collapsed #main { margin-left:0; padding-left:60px; }
@media (max-width:900px) {
  #side { z-index:35; box-shadow:0 0 30px rgba(0,0,0,.3); }
  #main { margin-left:0; padding-left:56px; }
}

.apphead { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 18px; padding-left:44px; }
.tabs { display:flex; gap:4px; }
.tabbtn {
  padding:6px 14px; font:inherit; font-size:13.5px; border-radius:8px;
  border:1px solid transparent; background:none; color:var(--mut); cursor:pointer;
}
.tabbtn:hover { color:var(--fg); }
.tabbtn.active { background:var(--card); border-color:var(--line);
  color:var(--fg); font-weight:600; }
.spacer { flex:1; }
.ghost {
  padding:5px 10px; font:inherit; font-size:12.5px; border-radius:7px;
  border:1px solid var(--line); background:var(--card); color:var(--fg2);
  cursor:pointer;
}
.ghost:hover { color:var(--fg); border-color:var(--accent); }
.livewrap { display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  color:var(--mut); }
.livedot { width:8px; height:8px; border-radius:99px; display:inline-block; }
.livedot.on  { background:var(--good); animation:pulse 2.4s ease-in-out infinite; }
.livedot.off { background:var(--critical); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion: reduce) { .livedot.on { animation:none } }

/* ------------------------------------------------------------------- tiles */
.tiles { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tile {
  flex:1 1 150px; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:10px 13px;
}
.tile .tl { display:block; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--mut); }
.tile b { font-size:24px; font-variant-numeric:tabular-nums; line-height:1.25; }
.tile .ts { display:block; font-size:12px; color:var(--mut); }

/* ------------------------------------------------------------------- cards */
/* min() so the track can shrink below its preferred 330px on a phone; a bare
   minmax(330px,1fr) forces the grid wider than the viewport. */
.cards { display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px 16px; min-width:0;
}
.ch { color:var(--mut); font-size:12.5px; margin:2px 0 12px; }

/* ------------------------------------------------------------------- bars */
.bars { display:flex; flex-direction:column; gap:5px; }
.bars .row { display:grid; grid-template-columns:minmax(84px,34%) 1fr auto;
  align-items:center; gap:9px; }
.bars .row:focus-visible { outline:2px solid var(--accent); outline-offset:2px;
  border-radius:4px; }
.lbl { font-size:12.5px; color:var(--fg2); display:flex; align-items:center;
  gap:5px; overflow-wrap:anywhere; }
.track { background:var(--track); border-radius:0 4px 4px 0; height:9px;
  min-width:0; overflow:hidden; }
/* Data-end rounded, baseline end square, so length reads from one edge. */
.bar { display:block; height:100%; background:var(--series-1);
  border-radius:0 4px 4px 0; }
.bar.good { background:var(--good); }
.bar.warning { background:var(--warning); }
.bar.critical { background:var(--critical); }
.val { font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--fg);
  white-space:nowrap; }
.pctd { color:var(--mut); margin-left:6px; font-size:11.5px; }
i.ic { font-style:normal; font-size:9px; line-height:1; }
i.ic.good { color:var(--good); }
i.ic.warning { color:var(--warning); }
i.ic.critical { color:var(--critical); }

/* --------------------------------------------------------------- histogram */
.hist { display:flex; align-items:flex-end; gap:4px; height:150px;
  padding-top:16px; }
.col { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; height:100%; min-width:0; }
.col:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cval { font-size:10.5px; color:var(--mut); font-variant-numeric:tabular-nums; }
/* Bars grow from a shared baseline; the band tint marks where A/B/C begin. */
.colbar { width:100%; background:var(--series-1); border-radius:4px 4px 0 0;
  min-height:0; }
.colbar.bC { opacity:.55; }
.colbar.bB { opacity:.8; }
.colbar.bA { opacity:1; }
.ctick { font-size:10px; color:var(--mut); border-top:1px solid var(--baseline,var(--grid));
  width:100%; text-align:center; padding-top:3px; }

/* --------------------------------------------------------- table fallback */
.tv { margin-top:12px; }
.tv summary { font-size:12px; color:var(--mut); cursor:pointer; }
.dt { width:100%; border-collapse:collapse; margin-top:8px; font-size:12.5px; }
.dt th, .dt td { text-align:left; padding:4px 8px 4px 0;
  border-bottom:1px solid var(--line); }
.dt th { color:var(--mut); font-weight:600; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.04em; }
.dt .num { text-align:right; font-variant-numeric:tabular-nums; }

/* -------------------------------------------------------------- leads list */
.topbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
#q { flex:1 1 260px; padding:9px 12px; font:inherit; font-size:14.5px;
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  color:var(--fg); }
#sort { padding:9px 10px; font:inherit; font-size:13px; border:1px solid var(--line);
  border-radius:8px; background:var(--card); color:var(--fg); cursor:pointer; }
.crumb { font-size:14px; font-weight:600; margin:0 0 2px; }
.empty { color:var(--mut); padding:24px 0; }

.lead { border:1px solid var(--line); border-radius:8px; margin-bottom:8px;
  background:var(--card); }
.lead[open] { background:var(--bg); }
.lead.flash { animation:flashin 2.5s ease-out; }
@keyframes flashin {
  from { border-color:var(--series-1); background:color-mix(in oklab,var(--series-1) 12%,transparent) }
  to   { border-color:var(--line) }
}
@media (prefers-reduced-motion: reduce) { .lead.flash { animation:none;
  border-color:var(--series-1) } }
summary { cursor:pointer; padding:12px 14px; display:flex; flex-wrap:wrap;
  gap:8px; align-items:center; }
summary::marker { color:var(--mut); }
.nm { font-weight:600; }
.tag { font-size:11px; padding:2px 8px; border-radius:99px;
  border:1px solid var(--line); color:var(--mut); }
.meta { color:var(--mut); font-size:12.5px; }
.pill { margin-left:auto; flex:none; white-space:nowrap; font-size:11.5px;
  padding:3px 9px; border-radius:99px; font-weight:600; }
.pill.good { background:var(--goodbg); color:var(--goodfg); }
.pill.warn { background:var(--warnbg); color:var(--warnfg); }
.pill.bad  { background:var(--badbg);  color:var(--badfg); }
.body { padding:0 14px 16px; border-top:1px solid var(--line); }
.why { font-size:13px; padding:8px 11px; border-radius:6px; margin:12px 0 0; }
.why.good { background:var(--goodbg); color:var(--goodfg); }
.why.warn { background:var(--warnbg); color:var(--warnfg); }
.why.bad  { background:var(--badbg);  color:var(--badfg); }
.grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
@media (max-width:720px) { .grid { grid-template-columns:1fr } }
.quote { border-left:3px solid var(--line); padding-left:10px; font-style:italic; }
.ev { color:var(--mut); font-size:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace; }
.scores { display:flex; flex-wrap:wrap; gap:6px; }
.sc { border:1px solid var(--line); border-radius:6px; padding:5px 9px;
  font-size:12px; min-width:96px; }
.sc .k { display:block; color:var(--mut); font-size:11px; }
.sc .v { font-weight:700; }
.sc.lo .v { color:var(--lo); } .sc.mid .v { color:var(--mid); }
.sc.hi .v { color:var(--hi); }
.sc.null .v { color:var(--mut); font-weight:400; font-size:11px; }
.em { border:1px solid var(--line); border-radius:6px; margin:8px 0; overflow:hidden; }
.emh { background:var(--plane); padding:6px 10px; font-size:12px; font-weight:600;
  border-bottom:1px solid var(--line); }
.day { color:var(--mut); font-weight:400; }
.subj { padding:6px 10px; font-size:13px; border-bottom:1px solid var(--line); }
.em pre { margin:0; padding:10px; white-space:pre-wrap; font:13.5px/1.6 inherit; }
.viol { background:var(--badbg); color:var(--badfg); padding:8px 12px;
  border-radius:6px; font-size:13px; }
ul { margin:4px 0; padding-left:20px; } li { margin:3px 0; }

/* ---------------------------------------------------- tooltip + toast */
.tip {
  position:absolute; z-index:60; pointer-events:none; max-width:280px;
  background:var(--fg); color:var(--bg); font-size:12px; padding:5px 8px;
  border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.toast {
  position:fixed; bottom:18px; left:50%; transform:translate(-50%,80px);
  background:var(--fg); color:var(--bg); padding:8px 14px; border-radius:99px;
  font-size:13px; opacity:0; transition:transform .2s ease, opacity .2s ease;
  z-index:70; pointer-events:none;
}
.toast.show { transform:translate(-50%,0); opacity:1; }
.toast.bad { background:var(--critical); color:#fff; }

/* ==========================================================================
   Portfolio
   ==========================================================================
   The project pane is a document you read and edit in place, so the editable
   controls are deliberately quiet — a select that looks like a select on every
   row would turn a status list into a form. They gain a border on hover and
   focus instead.
*/

/* sidebar project picker */
#clientfilter{width:100%; margin:0 0 14px; padding:7px 9px; font:inherit;
  font-size:13px; background:var(--card); color:var(--fg);
  border:1px solid var(--line); border-radius:7px; cursor:pointer}
.projitem .pi-n{overflow-wrap:anywhere}
.projitem .ni-c{display:inline-flex; align-items:center; gap:5px}
.bstar{font-style:normal; font-size:9px; color:var(--critical)}

/* project header */
.phead{margin-bottom:20px}
.phead-top{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap}
.ptitle{font-size:25px; margin:0; font-weight:650; letter-spacing:-.015em;
  flex:1 1 260px; text-wrap:balance}
.pctl{display:flex; gap:6px; flex-wrap:wrap}
.psum{color:var(--fg); font-size:15.5px; margin:10px 0 0; max-width:74ch}
.pfacts{display:flex; flex-wrap:wrap; gap:6px 26px; margin:16px 0 0}
.pfacts div{display:flex; flex-direction:column; gap:1px}
.pfacts dt{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mut)}
.pfacts dd{margin:0; font-size:13.5px}

/* progress */
.pbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 18px}
.pbar-t{flex:1 1 220px; height:9px; background:var(--track); border-radius:0 4px 4px 0;
  overflow:hidden; min-width:0}
.pbar-f{display:block; height:100%; background:var(--series-1); border-radius:0 4px 4px 0}
.pbar-l{font-size:13px; color:var(--mut); white-space:nowrap}
.pbar-l b{color:var(--fg); font-variant-numeric:tabular-nums}
.tone-good{color:var(--good); font-style:normal}
.tone-bad{color:var(--critical); font-style:normal}

/* cards */
.pcard{background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px 16px; margin-bottom:12px}
.pcard h2{font-size:14px; margin:0}
.pcard-h{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.pcard-h h2{flex:1}
.prose{font-size:15px; max-width:74ch; margin:0; color:var(--fg)}
.ghost.sm{font-size:11.5px; padding:4px 9px}
.saving{opacity:.62; pointer-events:none}

/* the quiet editable select */
.statesel{font:inherit; font-size:12px; padding:3px 6px; border-radius:6px;
  background:transparent; color:var(--fg); border:1px solid transparent;
  cursor:pointer; max-width:150px}
.statesel:hover{border-color:var(--line); background:var(--bg)}
.statesel:focus{border-color:var(--accent); background:var(--bg); outline:none}
.pctl .statesel{border-color:var(--line); background:var(--bg); font-size:12.5px}

/* milestones */
.mlist,.blist,.ulist{list-style:none; padding:0; margin:0}
.mrow{display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:10px;
  align-items:start; padding:9px 0; border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.m-n{font-size:14.5px; font-weight:600; display:block}
.mcode{font-style:normal; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px; color:var(--mut); margin-right:7px}
.m-d{display:block; font-size:13.5px; color:var(--mut); margin-top:2px; max-width:74ch}
.m-p{display:block; margin-top:5px; width:100%; max-width:340px; font:inherit;
  font-size:12.5px; padding:3px 7px; border:1px solid transparent; border-radius:6px;
  background:transparent; color:var(--fg)}
.m-p::placeholder{color:var(--mut); opacity:.7}
.m-p:hover{border-color:var(--line); background:var(--bg)}
.m-p:focus{border-color:var(--accent); background:var(--bg); outline:none}
.mrow.tone-good .m-n{color:var(--mut); text-decoration:line-through;
  text-decoration-color:var(--line)}
.mrow.tone-bad .m-n{color:var(--critical)}
.m-x{opacity:0; transition:opacity .12s}
.mrow:hover .m-x,.brow:hover .m-x,.m-x:focus-within{opacity:1}
.linkbtn{background:none; border:0; padding:2px 4px; font:inherit; font-size:11.5px;
  color:var(--mut); cursor:pointer; text-decoration:underline}
.linkbtn:hover{color:var(--critical)}

/* blockers */
.brow{display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:10px;
  align-items:start; padding:9px 0; border-top:1px solid var(--line)}
.brow:first-child{border-top:0}
.b-c input{width:15px; height:15px; cursor:pointer; margin-top:2px}
.b-t{font-size:14.5px; font-weight:600; display:block}
.b-m{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.b-m i{font-style:normal; font-size:11px; padding:1px 7px; border-radius:99px;
  border:1px solid var(--line); color:var(--mut)}
.btag.bad{color:var(--critical); border-color:currentColor}
.btag.warn{color:var(--warning); border-color:currentColor}
.btag.info{color:var(--accent); border-color:currentColor}
.bcost{color:var(--fg)!important; font-variant-numeric:tabular-nums}
.b-d{display:block; font-size:13.5px; color:var(--mut); margin-top:5px; max-width:74ch}
.brow.is-cleared{opacity:.5}
.brow.is-cleared .b-t{text-decoration:line-through; text-decoration-color:var(--line)}
.bsep{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mut); padding:14px 0 4px; border-top:1px solid var(--line); margin-top:6px}

/* notes */
.addnote{display:flex; gap:8px; margin-bottom:12px}
.addnote input{flex:1; min-width:0; padding:7px 10px; font:inherit; font-size:13.5px;
  border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--fg)}
.ulist li{display:flex; gap:12px; align-items:baseline; padding:7px 0;
  border-top:1px solid var(--line); font-size:14px}
.ulist li:first-child{border-top:0}
.u-d{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px;
  color:var(--mut); flex:none}
.u-b{flex:1; overflow-wrap:anywhere}
.ulist .linkbtn{opacity:0}
.ulist li:hover .linkbtn{opacity:1}

@media (max-width:640px){
  .mrow{grid-template-columns:minmax(0,1fr) auto; row-gap:6px}
  .mrow .m-s{grid-column:1/-1; order:2}
  .brow{grid-template-columns:24px minmax(0,1fr)}
  .brow .m-x{grid-column:2; justify-self:start; opacity:1}
}