:root {
  color-scheme: light;
  --plane: #f2f3f0; --surface: #fcfcfb; --surface-sunk: #f6f6f3;
  --ink: #0b0b0b; --ink-2: #52514e; --ink-3: #898781;
  --rule: #e1e0d9; --rule-strong: #c3c2b7;
  --accent: #2a78d6; --counter: #eb6834; --pos: #2a78d6; --neg: #d03b3b;
  --good-ink: #006300; --crit: #d03b3b; --warn-ink: #b07a00;
  --ring: rgba(11,11,11,0.10);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane: #0d0d0d; --surface: #1a1a19; --surface-sunk: #141413;
    --ink: #fff; --ink-2: #c3c2b7; --ink-3: #898781;
    --rule: #2c2c2a; --rule-strong: #383835;
    --accent: #3987e5; --counter: #d95926; --pos: #3987e5; --neg: #e66767;
    --good-ink: #0ca30c; --crit: #d03b3b; --warn-ink: #fab219;
    --ring: rgba(255,255,255,0.10);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #0d0d0d; --surface: #1a1a19; --surface-sunk: #141413;
  --ink: #fff; --ink-2: #c3c2b7; --ink-3: #898781;
  --rule: #2c2c2a; --rule-strong: #383835;
  --accent: #3987e5; --counter: #d95926; --pos: #3987e5; --neg: #e66767;
  --good-ink: #0ca30c; --crit: #d03b3b; --warn-ink: #fab219;
  --ring: rgba(255,255,255,0.10);
}

body { background: var(--plane); color: var(--ink); font-family: var(--sans); font-size: 16.0px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 32px 28px 110px; display: flex; flex-direction: column; gap: 30px; }

.masthead { display: flex; flex-direction: column; gap: 12px; }
.masthead-rule { height: 3px; background: var(--ink); }
.masthead h1 { font-size: 29.9px; font-weight: 640; letter-spacing: -0.022em; }
.masthead p { color: var(--ink-2); max-width: 76ch; font-size: 15.4px; }
.stamp { font-family: var(--mono); font-size: 11.7px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 5px 18px; }
.stamp b { color: var(--ink-2); font-weight: 500; }

.triage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.triage div { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.triage .k { font-family: var(--mono); font-size: 11.2px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.triage .v { font-family: var(--mono); font-size: 24.5px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.triage .s { font-family: var(--mono); font-size: 12.2px; color: var(--ink-2); }

.sheet { background: var(--surface); border: 1px solid var(--ring); display: flex; flex-direction: column; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding: 18px 24px; border-bottom: 1px solid var(--rule); }
.code { font-family: var(--mono); font-size: 12.7px; font-weight: 600; letter-spacing: 0.1em; padding: 4px 8px; background: var(--ink); color: var(--surface); }
.sheet-head h2 { font-size: 22.4px; font-weight: 620; letter-spacing: -0.015em; }
.sheet-head .meta { font-family: var(--mono); font-size: 11.7px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.pills { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.7px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; white-space: nowrap; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pill.crit { color: var(--crit); } .pill.warn { color: var(--warn-ink); } .pill.calm { color: var(--ink-3); }

.block { padding: 24px 28px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; }
.sheet .block:last-child { border-bottom: 0; }
.label { font-family: var(--mono); font-size: 11.2px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.label .qual { font-weight: 400; letter-spacing: 0.07em; text-transform: none; }

.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.9px; }
th, td { padding: 8px 11px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { font-family: var(--mono); font-size: 10.6px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-strong); }
thead th.grp { text-align: center; border-bottom: 0; padding-bottom: 2px; color: var(--ink-2); }
tbody td { border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 13.3px; }
tbody td:first-child { font-family: var(--sans); font-size: 13.9px; color: var(--ink-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.sum td { font-weight: 700; border-top: 1px solid var(--rule-strong); border-bottom: 0; }
tbody tr.sum td:first-child { color: var(--ink); font-weight: 620; }
tbody tr.gap td { padding-top: 12px; }
td.neg { color: var(--crit); }
.pnl tbody td:nth-child(3), .pnl tbody td:nth-child(5) { color: var(--ink-3); font-size: 12.2px; }

.ue { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.uecell { background: var(--surface); padding: 16px 19px; display: flex; flex-direction: column; gap: 3px; }
.uecell .k { font-family: var(--mono); font-size: 11.2px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.uecell .v { font-family: var(--mono); font-size: 24.5px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.uecell .v.neg { color: var(--crit); }
.uecell .s { font-family: var(--mono); font-size: 12.2px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.uecell .b { font-family: var(--mono); font-size: 12.2px; font-variant-numeric: tabular-nums; }
.b .under { color: var(--crit); } .b .over { color: var(--good-ink); }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.charts.one { grid-template-columns: 1fr; }
.chart { background: var(--surface); padding: 17px 17px 13px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chart .t { font-size: 13.9px; font-weight: 600; }
.chart .d { font-size: 13.3px; color: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 5px 16px; font-family: var(--mono); font-size: 11.7px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; flex: none; }
figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.tick { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
.dlab { font-family: var(--mono); font-size: 11px; font-weight: 600; }

.cuts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cut { background: var(--surface); padding: 17px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cut .ct { font-size: 13.9px; font-weight: 600; }
.cut .cd { font-family: var(--mono); font-size: 11.2px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.bars { display: flex; flex-direction: column; gap: 7px; }
.brow { display: grid; grid-template-columns: 118px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.brow .k { font-size: 13.3px; color: var(--ink-2); text-align: right; overflow: hidden; text-overflow: ellipsis; }
.btrack { height: 19px; background: var(--surface-sunk); position: relative; }
.bfill { height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; }
.bmark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .55; }
.brow .v { font-family: var(--mono); font-size: 12.2px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; text-align: right; }
.brow .v em { font-style: normal; color: var(--ink-3); }
.brow .v .hi { color: var(--crit); font-weight: 600; }
.bkey { font-family: var(--mono); font-size: 11.2px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.bkey i { display: inline-block; width: 2px; height: 12px; background: var(--ink); opacity: .55; }

/* options */
.goalbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 12px 14px; background: var(--surface-sunk); border-left: 3px solid var(--accent); }
.goalbar .g { font-family: var(--mono); font-size: 13.3px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.goalbar .g b { color: var(--ink); font-weight: 700; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.opt { background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.opt .n { font-family: var(--mono); font-size: 11.2px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.opt .h { font-size: 15.0px; font-weight: 640; }
.opt .big { font-family: var(--mono); font-size: 23.4px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.opt .big.neg { color: var(--crit); }
.opt ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.opt li { font-size: 13.3px; color: var(--ink-2); display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.opt li span { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.opt .why { font-size: 13.3px; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 8px; }
.opt .why b { color: var(--ink); font-weight: 600; }

.method { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; border-top: 1px solid var(--rule-strong); }
.method h3 { font-size: 16.0px; font-weight: 640; }
.method p { color: var(--ink-2); font-size: 14.4px; max-width: 84ch; }
.method dl { display: grid; grid-template-columns: 210px 1fr; gap: 8px 22px; font-size: 13.9px; }
.method dt { font-family: var(--mono); font-size: 11.7px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.method dd { color: var(--ink-2); }
.method code { font-family: var(--mono); font-size: 12.2px; color: var(--ink); background: var(--surface-sunk); padding: 1px 5px; }
.panel { background: var(--surface); border: 1px solid var(--ring); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 26px; }
.chk { display: grid; grid-template-columns: 3px 1fr; gap: 12px; }
.chk .bar { background: var(--rule-strong); }
.chk.have .bar { background: var(--accent); }
.chk.gap .bar { background: var(--warn-ink); }
.chk .t { font-size: 14.4px; font-weight: 600; }
.chk .d { font-size: 13.3px; color: var(--ink-2); }
.chk .d b { color: var(--ink); font-weight: 600; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chk .st { font-family: var(--mono); font-size: 10.6px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

.idx { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.idx a { flex: 1 1 auto; background: var(--surface); padding: 9px 12px; text-decoration: none; color: var(--ink-2); display: flex; align-items: baseline; gap: 8px; min-width: 152px; }
.idx a:hover { background: var(--surface-sunk); }
.idx a .c { font-family: var(--mono); font-size: 11.7px; font-weight: 700; letter-spacing: 0.07em; color: var(--ink); }
.idx a .g { font-family: var(--mono); font-size: 11.7px; font-variant-numeric: tabular-nums; color: var(--crit); margin-left: auto; }
.rubric { display: grid; grid-template-columns: minmax(0,260px) minmax(0,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.rbox { background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rbox .k { font-family: var(--mono); font-size: 11.2px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.rbox ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.rbox li { font-size: 13.3px; color: var(--ink-2); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
.rbox li span { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.rbox li span.bad { color: var(--crit); }
.bandchip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.2px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; align-self: flex-start; }
.bandchip.A { color: var(--accent); } .bandchip.B { color: var(--ink-2); }
.bandchip.C { color: var(--counter); } .bandchip.D { color: var(--crit); }
.acts { display: flex; flex-direction: column; gap: 11px; }
.act { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 11px; }
.act .an { font-family: var(--mono); font-size: 11.7px; font-weight: 700; color: var(--surface); background: var(--ink); width: 18px; height: 18px; display: grid; place-items: center; }
.act .at { font-size: 14.4px; font-weight: 640; }
.act .av { font-family: var(--mono); font-size: 12.2px; font-weight: 600; color: var(--good-ink); font-variant-numeric: tabular-nums; }
.act .ad { font-size: 13.3px; color: var(--ink-2); }
#tip { position: fixed; pointer-events: none; opacity: 0; transition: opacity .1s; background: var(--surface); border: 1px solid var(--rule-strong); box-shadow: 0 6px 20px rgba(0,0,0,0.14); padding: 8px 11px; z-index: 50; font-family: var(--mono); font-size: 12.2px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; line-height: 1.5; }
#tip .th { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-size: 10.6px; margin-bottom: 3px; }
#tip .row { display: flex; align-items: center; gap: 7px; }
#tip .row i { width: 8px; height: 8px; flex: none; font-style: normal; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (max-width: 900px) {
  .triage, .ue { grid-template-columns: repeat(2, 1fr); }
  .charts, .cuts, .opts, .checks { grid-template-columns: 1fr; }
  .brow { grid-template-columns: 96px minmax(0,1fr) auto; }
  .method dl { grid-template-columns: 1fr; gap: 2px 0; }
  .method dd { margin-bottom: 10px; }
}

/* ---- shared page chrome ---- */
.part { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--ring); padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 100%; }
.lede { font-size: 17.0px; color: var(--ink); max-width: 78ch; }
h3 { font-size: 17.0px; font-weight: 640; letter-spacing: -0.008em; }
h4 { font-size: 14.4px; font-weight: 640; }
p { color: var(--ink-2); max-width: 84ch; font-size: 15.0px; }
p b, li b { color: var(--ink); font-weight: 620; }
dl { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 9px 22px; font-size: 14.4px; }
dt { font-family: var(--mono); font-size: 11.7px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
dd { color: var(--ink-2); }
dd code, p code, li code { font-family: var(--mono); font-size: 12.2px; color: var(--ink); background: var(--surface-sunk); padding: 1px 5px; }
ol.steps { list-style: none; counter-reset: s; display: grid; gap: 10px; width: 100%; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px; font-size: 14.4px; color: var(--ink-2); min-width: 0; }
ol.steps li::before { content: counter(s); font-family: var(--mono); font-size: 11.7px; font-weight: 700; color: var(--ink-3); padding-top: 3px; }
ul.plain { list-style: none; display: grid; gap: 6px; width: 100%; font-size: 14.4px; color: var(--ink-2); }
ul.plain li { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 10px; min-width: 0; }
ul.plain li::before { content: "—"; color: var(--ink-3); }
.nav { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.nav a, .nav span.cur { flex: 1 1 auto; background: var(--surface); padding: 11px 14px; text-decoration: none; color: var(--ink-3); font-family: var(--mono); font-size: 11.7px; letter-spacing: 0.09em; text-transform: uppercase; display: flex; gap: 9px; align-items: baseline; }
.nav a:hover { background: var(--surface-sunk); color: var(--ink-2); }
.nav span.cur { background: var(--ink); color: var(--surface); }
.nav .n { font-weight: 700; }
.flow { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.frow { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 14px; align-items: start; min-width: 0; }
.frow .stage { font-family: var(--mono); font-size: 11.2px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); padding-top: 10px; }
.fcards { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fcard { border: 1px solid var(--rule-strong); padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fcard.hi { border-color: var(--accent); border-left-width: 3px; }
.fcard .t { font-family: var(--mono); font-size: 12.2px; font-weight: 600; }
.fcard .d { font-size: 12.2px; color: var(--ink-3); }
.arrowrow { display: flex; justify-content: center; color: var(--ink-3); font-size: 15.0px; }
.badge { font-family: var(--mono); font-size: 11.2px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border: 1px solid currentColor; white-space: nowrap; }
.badge.hold { color: var(--crit); } .badge.price { color: var(--counter); }
.badge.hours { color: var(--accent); } .badge.combo { color: var(--ink-2); }
.reads { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 24px; }
.read { display: grid; grid-template-columns: 3px minmax(0,1fr); gap: 13px; }
.read .bar { background: var(--accent); }
.read .t { font-size: 14.4px; font-weight: 620; }
.read .d { font-size: 13.9px; color: var(--ink-2); }
.bench3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.bcol { background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.bcol .ct { font-size: 13.9px; font-weight: 620; }
.bcol .cd { font-size: 13.3px; color: var(--ink-2); }
.picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--ring); padding: 14px 18px; position: sticky; top: 0; z-index: 20; }
.picker label { font-family: var(--mono); font-size: 11.2px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.picker select { font-family: var(--mono); font-size: 13.9px; padding: 7px 10px; background: var(--surface-sunk); color: var(--ink); border: 1px solid var(--rule-strong); min-width: 300px; }
.picker button { font-family: var(--mono); font-size: 12.7px; padding: 7px 12px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule-strong); cursor: pointer; }
.picker button:hover { background: var(--surface-sunk); color: var(--ink); }
.picker .pos { font-family: var(--mono); font-size: 12.2px; color: var(--ink-3); margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .reads, .bench3 { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 1fr; }
  dl { grid-template-columns: 1fr; gap: 2px 0; }
  dd { margin-bottom: 10px; }
  .picker select { min-width: 0; width: 100%; }
}

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tile { background: var(--surface); padding: 17px 20px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile .k { font-family: var(--mono); font-size: 11.2px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.tile .v { font-family: var(--mono); font-size: 26.6px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile .v.neg { color: var(--crit); }
.tile .s { font-family: var(--mono); font-size: 12.2px; color: var(--ink-2); }
td.dim, th.dim { color: var(--ink-3); }
#list th, #list td { padding: 6px 6px; }
#list tbody tr:hover td { background: var(--surface-sunk); }
#list th:nth-child(2), #list td:nth-child(2), #list th:nth-child(3), #list td:nth-child(3) { text-align: left; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---- app chrome ---- */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--rule-strong); }
.topbar .inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; display: flex; align-items: stretch; gap: 0; }
.topbar a.tab, .topbar span.tab { padding: 15px 18px; text-decoration: none; color: var(--ink-3); font-family: var(--mono); font-size: 11.7px; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; border-bottom: 2px solid transparent; }
.topbar a.tab:hover { color: var(--ink-2); background: var(--surface-sunk); }
.topbar .tab.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 700; }
.topbar .brand { padding: 14px 18px 14px 0; font-size: 15.0px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.topbar .who select, .topbar .who input { font-family: var(--mono); font-size: 12.7px; padding: 5px 8px; background: var(--surface-sunk); color: var(--ink); border: 1px solid var(--rule-strong); }
/* The bar is one unwrapped flex row, so on a phone it ran past the viewport and
   pushed the name picker off-screen — and nothing can be logged until a name is
   chosen. Let it wrap instead of widening the page. */
@media (max-width: 900px) {
  .topbar .inner { flex-wrap: wrap; padding: 0 16px; }
  .topbar a.tab, .topbar span.tab { padding: 11px 12px; }
  .topbar .brand { padding: 12px 14px 12px 0; }
  .topbar .who { padding: 6px 0 10px; }
}
.wrap { max-width: 1440px; }
.flash { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface); font-size: 14.4px; }
.flash.error { border-left-color: var(--crit); }
form.inline { display: inline; }
.btn { font-family: var(--mono); font-size: 11.8px; padding: 9px 15px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule-strong); cursor: pointer; }
.btn:hover { background: var(--surface-sunk); color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn.primary:hover { opacity: .88; color: var(--surface); }
.btn.danger { color: var(--crit); border-color: var(--crit); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-family: var(--mono); font-size: 10.6px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea { font-family: var(--sans); font-size: 14.4px; padding: 7px 9px; background: var(--surface-sunk); color: var(--ink); border: 1px solid var(--rule-strong); width: 100%; }
.field input[type=number], .field.mono input { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.field .hint { font-size: 12.2px; color: var(--ink-3); }
.formgrid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.formgrid .span2 { grid-column: span 2; } .formgrid .span3 { grid-column: span 3; }
.formgrid .span6 { grid-column: span 6; }
.actionrow { border: 1px solid var(--ring); background: var(--surface); }
.actionrow + .actionrow { margin-top: 10px; }
.actionrow .head { min-height: 46px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.actionrow .head .t { font-size: 15.0px; font-weight: 620; }
.actionrow .head .meta { font-family: var(--mono); font-size: 11.7px; letter-spacing: 0.05em; color: var(--ink-3); text-transform: uppercase; }
.actionrow .body { padding: 14px 16px; display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; }
.actionrow .impact { display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 12.7px; font-variant-numeric: tabular-nums; }
.actionrow .impact div { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.actionrow .impact div b { color: var(--ink); font-weight: 600; }
.st { font-family: var(--mono); font-size: 11.2px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 7px; border: 1px solid currentColor; }
.st.Proposed { color: var(--ink-3); } .st.Agreed { color: var(--accent); }
.st\.Inflight, .st.Inflight { color: var(--counter); }
.st.Done { color: var(--good-ink); } .st.Dropped { color: var(--ink-3); opacity: .6; }
.suggest { border: 1px dashed var(--rule-strong); padding: 11px 13px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
.suggest + .suggest { margin-top: 8px; }
.suggest .t { font-size: 14.4px; font-weight: 600; }
.suggest .w { font-size: 13.3px; color: var(--ink-2); }
.notelog { margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.notelog .n { font-size: 13.3px; color: var(--ink-2); }
.notelog .n .by { font-family: var(--mono); font-size: 11.2px; color: var(--ink-3); }
/* auto-fit, not repeat(5): the client page has five cells but the client list has
   four, and a fixed five-column track left a bare grey cell on the end. */
.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.plan .c { background: var(--surface); padding: 17px 20px; display: flex; flex-direction: column; gap: 3px; }
.plan .k { font-family: var(--mono); font-size: 11.2px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.plan .v { font-family: var(--mono); font-size: 24.5px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan .v.good { color: var(--good-ink); } .plan .v.bad { color: var(--crit); }
.plan .s { font-size: 12.7px; color: var(--ink-2); }
.meter { height: 8px; background: var(--surface-sunk); margin-top: 4px; }
.meter i { display: block; height: 100%; background: var(--accent); }
.meter i.full { background: var(--good-ink); }

/* ---- delivery group chip ---- */
[class^="grp-"] { font-family: var(--mono); font-size: 11px; font-weight: 600;
                  letter-spacing: .04em; white-space: nowrap; padding: 2px 7px;
                  border: 1px solid currentColor; color: var(--ink-3); }
.grp-media-led { color: var(--accent); }
.grp-creative-heavy { color: var(--counter); }
.grp-devbuild { color: var(--warn-ink); }
.grp-service-led { color: var(--ink-3); }

/* ---- the exit option, on the client list ---- */
.hero { border: 1px solid var(--rule); background: var(--rule); display: flex; flex-direction: column; gap: 1px; }
.herohead { background: var(--surface); padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.hero .hk { font-family: var(--mono); font-size: 11.2px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.hero .hcodes { font-family: var(--mono); font-size: 12.2px; color: var(--ink-3); }
.herogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--rule); }
.hcell { background: var(--surface); padding: 17px 20px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hcell .k { font-family: var(--mono); font-size: 11.2px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.hcell .v { font-family: var(--mono); font-size: 24.5px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hcell .v.good { color: var(--good-ink); } .hcell .v.bad { color: var(--crit); }
.hcell .s { font-size: 12.7px; color: var(--ink-2); }
.heronote { background: var(--surface); padding: 14px 20px; font-size: 14.4px; color: var(--ink-2); }
.heronote b { color: var(--ink); font-weight: 600; }
@media (max-width: 1000px) {
  .formgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .formgrid .span3, .formgrid .span6, .formgrid .span2 { grid-column: span 2; }
  .actionrow .body { grid-template-columns: 1fr; }
}

/* One column on a phone. Two columns leaves a cell about 90px wide, and a mono
   figure like $2,675,389 needs 126px — it was being cut off mid-number, which
   on a page of dollar amounts is worse than any layout complaint. */
@media (max-width: 560px) {
  .triage, .tiles, .ue, .herogrid { grid-template-columns: 1fr; }
  /* the hour-mix rows: label, bar, then the figures on their own line rather
     than a nowrap third column that runs off the side of the phone */
  .brow { grid-template-columns: 86px minmax(0,1fr); }
  .brow .v { grid-column: 1 / -1; text-align: left; padding-left: 96px; }
  /* fully-qualified table names on the How page are longer than a phone */
  code { overflow-wrap: anywhere; }
}

/* ---- comfortable reading width for prose inside a wide app shell ---- */
p, .lede { max-width: 92ch; }
.masthead h1 { font-size: 33px; }
.tile .v, .plan .v { font-size: 27px; }
.uecell .v { font-size: 25px; }
.field input, .field select, .field textarea { padding: 8px 10px; }

/* ---- focus marker: the accounts carrying 80% of the gap ---- */
.focusmark { display: inline-block; width: 1.15em; margin-right: 4px; font-size: 1.5em;
             line-height: 1; vertical-align: -0.12em; color: var(--accent); opacity: 0; }
.focusmark.on { opacity: 1; }

/* ---- activity feed on the Data page ---- */
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
           padding: 12px 0; border-bottom: 1px solid var(--rule); }
.filters label { display: flex; align-items: center; gap: 8px; font-family: var(--mono);
                 font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.filters select { font-family: var(--sans); font-size: 14px; padding: 7px 10px;
                  background: var(--surface-sunk); color: var(--ink); border: 1px solid var(--rule-strong); }
.feed { display: flex; flex-direction: column; }
.ev { display: grid; grid-template-columns: 78px 16px minmax(0,1fr); gap: 0 12px;
      padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.ev:last-child { border-bottom: 0; }
.ev .when { font-family: var(--mono); font-size: 12px; line-height: 1.35; text-align: right;
            font-variant-numeric: tabular-nums; }
.ev .when b { display: block; color: var(--ink); font-weight: 600; }
.ev .when span { color: var(--ink-3); font-size: 11px; }
.ev .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
           background: var(--rule-strong); justify-self: center; }
.ev-create .dot { background: var(--good-ink); }
.ev-update .dot { background: var(--accent); }
.ev-archive .dot { background: var(--crit); }
.ev-restore .dot { background: var(--counter); }
.ev .what { min-width: 0; }
.ev .line { font-size: 15px; color: var(--ink-2); }
.ev .line b { color: var(--ink); font-weight: 640; }
.ev .cchip { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
             padding: 2px 7px; border: 1px solid var(--rule-strong); color: var(--ink-2);
             text-decoration: none; margin-left: 6px; white-space: nowrap; }
.ev .cchip:hover { border-color: var(--accent); color: var(--accent); }
.ev .diff { margin-top: 7px; display: flex; flex-direction: column; gap: 3px;
            font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ev .diff .f { display: inline-block; min-width: 128px; color: var(--ink-3);
               text-transform: uppercase; font-size: 10.5px; letter-spacing: .08em; }
.ev .diff .b { color: var(--ink-3); text-decoration: line-through; }
.ev .diff .arrow { color: var(--ink-3); margin: 0 4px; }
.ev .diff .a { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) {
  .ev { grid-template-columns: 62px 12px minmax(0,1fr); }
  .ev .diff .f { display: block; min-width: 0; }
}