/* Signal — built on the chassis of dashboard.coderco.io (same app shell, same
   density, same IBM Plex Sans, same neutral-chrome / coloured-data discipline),
   with Deployd's accent in place of CoderCo purple.
   Chrome is neutral. Colour means something or it is not used. */

:root {
  --paper:#f7f7f8; --bg:#f7f7f8; --surface:#fff; --card:#fff;
  --ink:#0f1115; --ink-2:#3f434d; --muted:#8a8f9a;
  --line:#ececee; --line-2:#e0e0e4;

  /* Deployd blue-deep: AA on white, the only accent in the chrome */
  --brand:#3a55d6; --brand-weak:#eef1ff; --brand-edge:rgba(58,85,214,.16);

  /* the three signals that are worth money — pastel fill, dark ink, like the
     dashboard's chips. Mint / blue / pink differ in hue AND lightness. */
  --moved:#c9f5e4;    --moved-edge:#7fdcb9;    --moved-ink:#04543a;
  --returned:#d7e0ff; --returned-edge:#a7b8ff; --returned-ink:#1b2f8f;
  --stuck:#ffd6ea;    --stuck-edge:#ffa8cf;    --stuck-ink:#8c0f4d;
  --flat:#eceef1;     --flat-edge:#dcdfe4;     --flat-ink:#3f434d;

  --up:#047857; --down:#b91c1c;
  --sh-sm:0 1px 2px rgba(16,17,21,.05);
  --sh-md:0 2px 8px rgba(16,17,21,.06),0 1px 2px rgba(16,17,21,.04);
  --sh-lg:0 10px 30px rgba(16,17,21,.10),0 2px 6px rgba(16,17,21,.05);

  --hdr:56px; --sidew:228px; --content-max:1480px;
}

:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:#0d0e12; --bg:#14161c; --surface:#191c23; --card:#191c23;
  --ink:#e9ebee; --ink-2:#aeb4bf; --muted:#7f8590;
  --line:#282c35; --line-2:#363b46;

  --brand:#8ea4ff; --brand-weak:#1a2142; --brand-edge:rgba(142,164,255,.22);

  --moved:#103a2c;    --moved-edge:#1d6a4f;    --moved-ink:#6ee7b7;
  --returned:#1a2550; --returned-edge:#2f4290; --returned-ink:#a9bcff;
  --stuck:#46132e;    --stuck-edge:#7d2250;    --stuck-ink:#ffa8cf;
  --flat:#262a33;     --flat-edge:#363b46;     --flat-ink:#aeb4bf;

  --up:#34d399; --down:#f87171;
  --sh-sm:0 1px 2px rgba(0,0,0,.45);
  --sh-md:0 2px 8px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --sh-lg:0 12px 34px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.45);
}

* { box-sizing:border-box }
html { overflow-x:hidden }
body {
  margin:0; min-height:100%; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:14px;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea { font:inherit }
a { color:var(--brand); text-decoration:none }
a:hover { text-decoration:underline }
.num, td.num, .v { font-variant-numeric:tabular-nums }

/* ── app bar ──────────────────────────────────────────────────────────────── */
.appbar {
  position:sticky; top:0; z-index:45; height:var(--hdr);
  display:flex; align-items:center; gap:14px; padding:0 20px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.lock { display:flex; align-items:center; gap:11px; flex:none }
/* The Deployd logotype ships with a white wordmark, which disappears on the light
   ground. Two files, one shown per theme, rather than a filter that would flatten
   the mint-to-blue glyph. */
.lock img { height:22px; width:auto; display:block }
/* Not scoped to one lockup: the sign-in page uses .mark, and scoping this to
   .lock left both logotypes on screen there. */
img.on-dark { display:none }
:root[data-theme="dark"] img.on-light { display:none }
:root[data-theme="dark"] img.on-dark { display:block }
.lock .div { width:1px; height:22px; background:var(--line-2) }
.lock .wm { font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.1 }
.lock .sub { font-size:11px; color:var(--muted); font-weight:500; margin-top:1px }
.side-toggle {
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  border-radius:9px; width:34px; height:34px; display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; flex:none; padding:0;
}
.side-toggle:hover { color:var(--ink); border-color:var(--muted) }
.topright { margin-left:auto; display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.meta {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:5px 10px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.meta b { color:var(--ink); font-weight:600 }
.dot { width:7px; height:7px; border-radius:50%; background:var(--up); flex:none }
.dot.idle { background:var(--muted) }
/* A run is in flight, or the last one just ended — the one chip that answers
   "is it still going?" without anybody having to remember which tab started it. */
.runstate { border-color:var(--brand-edge); background:var(--brand-weak); color:var(--ink-2) }
.runstate b { color:var(--brand) }
.runstate[hidden] { display:none }

/* On a phone the bar wraps onto two rows and the model chip goes — which model
   answered is a desk question, not something you check on the train. */
@media (max-width:620px) {
  .appbar { height:auto; flex-wrap:wrap; row-gap:8px; padding:10px 14px }
  .topright { margin-left:0; width:100% }
  #modelmeta { display:none }
}

/* ── left rail ────────────────────────────────────────────────────────────── */
.sidenav {
  position:fixed; top:var(--hdr); left:0; bottom:0; width:var(--sidew);
  background:var(--surface); border-right:1px solid var(--line);
  padding:14px 10px 24px; overflow-y:auto; z-index:39;
  display:flex; flex-direction:column; gap:2px;
}
.side-grp { display:flex; flex-direction:column; gap:2px }
.side-grp-l {
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:15px 10px 5px; white-space:nowrap;
}
.side-grp:first-child .side-grp-l { margin-top:2px }
.side-item {
  display:flex; align-items:center; gap:10px; width:100%; border:none; background:transparent;
  border-radius:9px; padding:8px 10px; font-size:13.5px; font-weight:600; color:var(--ink-2);
  cursor:pointer; text-align:left;
}
a.side-item, a.side-item:hover { text-decoration:none }
.side-item:hover { background:var(--bg); color:var(--ink) }
.side-item.on { background:var(--brand-weak); color:var(--brand); font-weight:700 }
.side-ic { width:16px; height:16px; flex:none; display:grid; place-items:center }
.side-ic svg { width:16px; height:16px; display:block }
.side-tx { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.side-ct {
  font-size:10.5px; font-weight:700; color:var(--muted); background:var(--bg);
  border-radius:999px; padding:1px 7px; flex:none; font-variant-numeric:tabular-nums;
}
.side-item.on .side-ct { color:var(--brand); background:var(--surface) }
.side-foot { margin-top:auto; padding:14px 10px 0; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); line-height:1.5 }

body.side-mini { --sidew:58px }
body.side-mini .side-tx, body.side-mini .side-grp-l, body.side-mini .side-ct, body.side-mini .side-foot { display:none }
body.side-mini .side-item { justify-content:center; padding:9px }
body.side-mini .sidenav { padding:14px 7px }

#appmain { margin-left:var(--sidew); min-width:0 }
@media (max-width:860px) {
  .sidenav {
    position:static; width:auto; border-right:0; border-bottom:1px solid var(--line);
    flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px 14px; gap:6px;
  }
  .side-grp { flex-direction:row; flex-wrap:wrap; gap:6px }
  .side-grp-l, .side-foot { display:none }
  .side-item { width:auto; border:1px solid var(--line); border-radius:999px; padding:7px 12px; font-size:12.5px }
  .side-ic { display:none }
  #appmain { margin-left:0 }
  .side-toggle { display:none }
}

/* ── toolbar ──────────────────────────────────────────────────────────────── */
.toolbar {
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  padding:11px 22px; background:var(--surface); border-bottom:1px solid var(--line);
}
.field {
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  border-radius:9px; padding:7px 11px; font-size:13px; min-height:34px;
}
.field:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-weak) }
.field.grow { flex:1 1 240px; min-width:0 }
select.field { cursor:pointer }
textarea.field { width:100%; min-height:76px; line-height:1.5; resize:vertical }

.btn {
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  border-radius:9px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
}
.btn:hover:not(:disabled) { border-color:var(--brand); color:var(--brand) }
.btn:disabled { opacity:.5; cursor:default }
.btn-accent { background:var(--brand); border-color:var(--brand); color:#fff }
.btn-accent:hover:not(:disabled) { color:#fff; filter:brightness(1.08) }
.btn-ghost { background:transparent }
.btn-xs { padding:6px 12px; font-size:12.5px }

/* ── KPI strip · small, dense, tabular. The dashboard's proportions. ──────── */
.kpis {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr));
  gap:10px; padding:16px 22px 0;
}
.kpi {
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  padding:10px 13px 11px; box-shadow:var(--sh-sm); text-align:left;
  display:flex; flex-direction:column; gap:3px; min-width:0;
}
.kpi[data-view] { cursor:pointer }
.kpi[data-view]:hover { border-color:var(--line-2); box-shadow:var(--sh-md) }
.kpi.on { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) }
.kpi .l { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700 }
.kpi .v { font-size:24px; font-weight:700; letter-spacing:-.035em; line-height:1.05; color:var(--ink) }
.kpi .n { font-size:11.5px; color:var(--ink-2); line-height:1.35 }
.kpi[data-tone="mint"] .v { color:var(--moved-ink) }
.kpi[data-tone="blue"] .v { color:var(--returned-ink) }
.kpi[data-tone="pink"] .v { color:var(--stuck-ink) }

/* ── the sheet ────────────────────────────────────────────────────────────── */
.wrap { max-width:var(--content-max); padding:16px 22px 40px; display:flex; flex-direction:column; gap:16px }
.sheet { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); overflow:hidden }
.sheet-h {
  display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.sheet-t { font-size:14.5px; font-weight:700; letter-spacing:-.01em }
.sheet-n { font-size:12px; color:var(--muted) }
.sheetwrap, .tblwrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100% }

table.grid { width:100%; border-collapse:collapse; min-width:860px }
table.grid th {
  text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line-2);
  background:var(--bg); cursor:pointer; user-select:none; white-space:nowrap; position:sticky; top:0; z-index:2;
}
table.grid th:hover { color:var(--ink) }
table.grid th.on { color:var(--brand) }
table.grid th .ar { font-size:8px; margin-left:4px; opacity:0 }
table.grid th.on .ar { opacity:1 }
table.grid th.r, table.grid td.r { text-align:right }
table.grid td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle }
table.grid tbody tr { cursor:pointer }
table.grid tbody tr:hover > td { background:var(--brand-weak) }
table.grid tbody tr:last-child td { border-bottom:0 }
tr.gone { opacity:.5 }
tr.mine > td:first-child { box-shadow:inset 3px 0 0 var(--brand) }
.co { font-weight:700; font-size:13.5px; letter-spacing:-.005em; line-height:1.25 }
.ro { font-size:12px; color:var(--ink-2); margin-top:2px; line-height:1.3 }
.sm { font-size:11.5px; color:var(--muted); line-height:1.4 }
.pay { font-weight:600; font-variant-numeric:tabular-nums }
.up { color:var(--up); font-size:11.5px; font-weight:700 }
.dn { color:var(--down); font-size:11.5px; font-weight:700 }
.empty { padding:34px 18px; text-align:center; color:var(--muted); font-size:13px; line-height:1.6; cursor:default }

/* Signals. Only the three that are worth money carry a fill. */
.sig {
  display:inline-block; font-size:11px; font-weight:700; border-radius:999px;
  padding:2px 9px; margin:1px 4px 1px 0; white-space:nowrap;
  background:transparent; border:1px solid var(--flat-edge); color:var(--flat-ink);
}
.sig[data-s="Budget moved"] { background:var(--moved); border-color:var(--moved-edge); color:var(--moved-ink) }
.sig[data-s="Returned"]     { background:var(--returned); border-color:var(--returned-edge); color:var(--returned-ink) }
.sig[data-s="Stuck"]        { background:var(--stuck); border-color:var(--stuck-edge); color:var(--stuck-ink) }
.sig[data-s="Budget cut"]   { background:var(--stuck); border-color:var(--stuck-edge); color:var(--stuck-ink) }

/* Narrow screens drop the columns a phone cannot read without scrolling sideways. */
@media (max-width:980px) { .hide-md { display:none } }

select.st {
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  border-radius:8px; padding:5px 8px; font-size:12px; font-weight:600; cursor:pointer; min-height:30px;
}
select.st[data-v="Untouched"] { color:var(--muted) }
select.st[data-v="Won"] { color:var(--up); border-color:var(--up) }
select.st[data-v="Dead"] { color:var(--muted); opacity:.7 }

/* ── cards ────────────────────────────────────────────────────────────────── */
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); overflow:hidden }
.card h3 {
  margin:0; padding:12px 16px; border-bottom:1px solid var(--line);
  font-size:13px; font-weight:700; letter-spacing:-.005em; background:var(--bg);
}
.card .pad { padding:14px 16px }
.card table.grid { min-width:0 }
.card table.grid th { background:var(--surface) }

/* ── drawer ───────────────────────────────────────────────────────────────── */
/* Above the app bar (45), or clicking the scrim near the top hits the rail button. */
.scrim { position:fixed; inset:0; background:rgba(15,17,21,.34); z-index:46; display:none }
.scrim.on { display:block }
.drawer {
  position:fixed; top:0; right:0; height:100%; width:min(760px,96vw); z-index:47;
  background:var(--paper); border-left:1px solid var(--line-2); box-shadow:var(--sh-lg);
  transform:translateX(101%); transition:transform .22s ease; overflow-y:auto;
}
.drawer.on { transform:none }
.dhead { position:relative; padding:20px 54px 18px 24px; background:var(--surface); border-bottom:1px solid var(--line) }
.dhead .x {
  position:absolute; top:16px; right:18px; width:32px; height:32px; border-radius:9px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  font-size:19px; line-height:1; cursor:pointer;
}
.dhead .x:hover { color:var(--ink); border-color:var(--muted) }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.dtitle { font-size:22px; font-weight:700; letter-spacing:-.025em; margin-top:5px; line-height:1.15 }
.dsub { font-size:13px; color:var(--ink-2); margin-top:5px; line-height:1.45 }
.dbody { padding:16px 24px 48px; display:flex; flex-direction:column; gap:14px }

dl.kv { margin:0; display:grid; grid-template-columns:minmax(118px,auto) 1fr; gap:9px 16px; font-size:13px }
dl.kv dt { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding-top:2px }
dl.kv dd { margin:0; font-weight:600; color:var(--ink); line-height:1.45 }

/* ── timeline ─────────────────────────────────────────────────────────────── */
.tlwrap { position:relative }
svg.tl { width:100%; height:auto; display:block; overflow:visible }
svg.tl text { font-family:"IBM Plex Sans",sans-serif; font-size:10px; fill:var(--muted); font-variant-numeric:tabular-nums }
svg.tl .tlline { fill:none; stroke:var(--up); stroke-width:2; stroke-linejoin:round }
svg.tl .tldot { fill:var(--surface); stroke:var(--up); stroke-width:2 }
svg.tl .tlrule { stroke:var(--line-2); stroke-dasharray:3 4 }
svg.tl .tlbar { fill:var(--moved-edge) }
svg.tl .tlbar.off { fill:var(--stuck); stroke:var(--stuck-edge); stroke-width:1 }
.tip {
  position:absolute; transform:translate(-50%,-128%); background:var(--ink); color:var(--paper);
  font-size:11px; font-weight:600; padding:4px 8px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s;
}
.tip.on { opacity:1 }
.legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:11px; font-size:11.5px; color:var(--muted) }
.legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px }

/* ── scorecard prose ──────────────────────────────────────────────────────── */
.md { font-size:13.5px; line-height:1.65; color:var(--ink-2) }
.md h2 { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:16px 0 6px }
.md h2:first-child { margin-top:0 }
.md p { margin:0 0 9px }
.md b { color:var(--ink); font-weight:700 }
.md ul { margin:0 0 9px; padding-left:18px }
.md li { margin:3px 0 }
.md hr { border:0; border-top:1px solid var(--line); margin:14px 0 }
.md .lead { display:block; font-size:15px; font-weight:700; color:var(--ink); margin:0 0 9px; letter-spacing:-.01em }
.md .note { font-size:12px; color:var(--muted); font-style:italic }

/* ── toast · spinner ──────────────────────────────────────────────────────── */
.toast {
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:60;
  background:var(--ink); color:var(--paper); font-size:13px; font-weight:600;
  padding:11px 18px; border-radius:11px; box-shadow:var(--sh-lg);
  opacity:0; pointer-events:none; transition:opacity .18s,transform .18s;
}
.toast.on { opacity:1; transform:translate(-50%,0) }
.spin {
  display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-1px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:sp .7s linear infinite;
}
@keyframes sp { to { transform:rotate(360deg) } }

@media (prefers-reduced-motion:reduce) {
  .drawer, .toast, .tip { transition:none }
  .spin { animation:none }
}