@font-face { font-family: Geist; src: url(fonts/geist-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(fonts/geist-mono-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

/* One grid, one accent. Colour other than the accent always means a status. */
:root {
  --ground: #080b10;
  --panel: #0e131a;
  --well: #131a23;
  --line: #1d2631;
  --ink: #e8edf2;
  --dim: #8b96a5;
  --faint: #5d6877;
  --accent: #3d8fe0;
  --good: #3fb27f;
  --bad: #e5604d;
  --warn: #d9a43a;
  --gap: 12px;
  --pad: 16px;
  --sans: Geist, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--ground); }
body { color: var(--ink); font: 400 14px/1.4 var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num, td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.bar, main, #gate { max-width: 1480px; margin: 0 auto; padding: 0 20px; }
#sample { background: var(--warn); color: #15100a; font-weight: 600; text-align: center; padding: 6px 16px; font-size: 13px; }

.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.mark { font-weight: 650; font-size: 15px; letter-spacing: .01em; margin-right: 8px; }
.mark span { color: var(--faint); font-weight: 400; }
.seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px; }
.seg button { border: 0; background: none; padding: 5px 12px; border-radius: 4px; color: var(--dim); font-size: 13px; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed=true] { background: var(--well); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.seg.small button { padding: 3px 10px; font-size: 12.5px; }
.status { margin-left: auto; color: var(--dim); font-size: 13px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.dot.bad { background: var(--bad); }
#signout { border: 0; background: none; color: var(--dim); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

main { display: grid; gap: var(--gap); padding-bottom: 28px; }
.view { display: grid; gap: var(--gap); min-width: 0; }
.view[hidden] { display: none; }
#note { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 6px; padding: 10px var(--pad); color: var(--ink); font-size: 14px; }
#note span { color: var(--faint); margin-right: 10px; }

.panel, .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); }
.panel h2 { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.hint { color: var(--faint); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.body { padding: var(--pad); }
.body.flush { padding: 0; overflow-x: auto; }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.kpi { padding: 14px var(--pad) 12px; display: grid; grid-template-rows: auto auto auto 30px; gap: 2px; }
.kpi .label { color: var(--dim); font-size: 13px; }
.kpi .value { font: 500 30px/1.15 var(--mono); letter-spacing: -.02em; }
.delta { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.delta b { font-family: var(--mono); font-weight: 500; }
.delta.good b { color: var(--good); }
.delta.bad b { color: var(--bad); }
.kpi svg { display: block; width: 100%; height: 30px; align-self: end; }
.kpi .aside { align-self: end; color: var(--faint); font-size: 12.5px; line-height: 30px; }

.row { display: grid; gap: var(--gap); }
.r-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.r-ads { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.r-op { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
.r-op2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.curve { width: 120px; height: 34px; display: block; }
.change { padding: 12px var(--pad); border-bottom: 1px solid var(--line); }
.change .t { font-weight: 600; }
.change .d { color: var(--dim); font-size: 13px; margin-top: 2px; }
.scroll { max-height: 520px; overflow-y: auto; }
td.note { white-space: normal; min-width: 240px; max-width: 420px; color: var(--dim); font-size: 13px; line-height: 1.4; padding-top: 8px; padding-bottom: 8px; }
.empty { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px var(--pad); color: var(--dim); }
.alerts { list-style: none; max-height: 560px; overflow-y: auto; }
.alerts li { padding: 12px var(--pad); border-bottom: 1px solid var(--line); display: grid; gap: 3px; }
.alerts li:last-child { border-bottom: 0; }
.alerts .t { font-weight: 500; }
.alerts .d { color: var(--dim); font-size: 13px; line-height: 1.4; }
.alerts .w { color: var(--faint); font: 400 12px var(--mono); overflow-wrap: anywhere; }
.alerts .chip { justify-self: start; }
#v-operate tbody tr { cursor: default; }
#v-operate td { height: 52px; }
td.why { white-space: normal; min-width: 280px; max-width: 460px; color: var(--dim); font-size: 13px; line-height: 1.4; padding-top: 8px; padding-bottom: 8px; }
.was { display: block; color: var(--faint); font-size: 12px; }
.names { display: block; color: var(--faint); font: 400 12px var(--mono); }

#trend-body svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.g-line { stroke: var(--line); }
.g-t { fill: var(--faint); font: 400 11px var(--mono); }
.c-cross { stroke: var(--dim); stroke-width: 1; }
#tip { position: absolute; z-index: 5; background: var(--ink); color: var(--ground); font-size: 12.5px; line-height: 1.35; padding: 6px 9px; border-radius: 5px; pointer-events: none; white-space: nowrap; }
#tip b { font-family: var(--mono); }

.pace { display: grid; gap: 20px; }
.pace .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pace .name { font-weight: 500; }
.chip { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.chip::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.chip.good { color: var(--good); } .chip.bad { color: var(--bad); } .chip.warn { color: var(--warn); }
.track { position: relative; height: 10px; background: var(--well); border-radius: 3px; margin: 8px 0 6px; }
.track .spent { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px 0 0 3px; }
.track .proj { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 6px); opacity: .55; }
.track .tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.track .even { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--dim); }
.pace .nums { display: flex; justify-content: space-between; color: var(--dim); font-size: 12.5px; }
.pace .nums b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.legend { display: flex; gap: 16px; color: var(--faint); font-size: 12px; margin-top: 18px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }
.legend .l-spent { background: var(--accent); }
.legend .l-proj { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 5px); }
.legend .l-budget { width: 2px; height: 12px; background: var(--ink); vertical-align: -2px; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 400; color: var(--faint); font-size: 12.5px; height: 34px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { height: 44px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
th.n, td.n { text-align: right; }
td.n { font-size: 13.5px; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--well); }
tr[aria-selected=true] td { background: var(--well); }
tr[aria-selected=true] td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
tr.total td { color: var(--dim); cursor: default; background: none; }
.share { display: inline-block; width: 96px; height: 6px; background: var(--well); border-radius: 3px; vertical-align: middle; margin-right: 10px; }
.share i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.up, .down { font-family: var(--mono); font-size: 12.5px; }
.t-good { color: var(--good); } .t-bad { color: var(--bad); } .t-flat { color: var(--faint); }

#ads td { height: 56px; }
.subbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 8px var(--pad); border-bottom: 1px solid var(--line); color: var(--faint); font-size: 12.5px; }
#ads header .hint { margin-right: auto; margin-left: 4px; }
#ads tr.section td { height: 46px; background: var(--well); cursor: default; font-weight: 600; border-top: 1px solid var(--line); }
#ads tr.section td:first-child { font-size: 15px; box-shadow: inset 2px 0 0 var(--accent); }
#ads tr.group td:first-child { padding-left: 28px; }
#ads tr[data-ad] td:first-child { padding-left: 28px; }
#ads tr.group td { height: 42px; background: var(--ground); cursor: default; color: var(--dim); }
#ads tr.group td:first-child { color: var(--ink); }
.gname { font-weight: 600; margin-right: 12px; }
.gsub { color: var(--faint); font: 400 12.5px var(--mono); }
.where { line-height: 1.3; }
.where span { display: block; color: var(--faint); font: 400 12px var(--mono); }
.more { color: var(--faint); font-size: 12.5px; }
.facts .wide { grid-column: 1 / -1; }
.facts .wide dd { font: 400 12.5px var(--mono); overflow-wrap: anywhere; }
#detail { position: sticky; top: 12px; align-self: start; }
.ad { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ad img, .ad .ph { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; background: var(--well); flex: none; }
.ad .t { overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
.ad .s { color: var(--faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.ad div { min-width: 0; }

#detail-body { display: grid; gap: 14px; align-content: start; }
#detail-body .shot { background: var(--well); border-radius: 4px; height: 230px; display: grid; place-items: center; overflow: hidden; color: var(--faint); font-size: 13px; }
#detail-body .shot img { max-width: 100%; max-height: 230px; display: block; }
#detail-body h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
#detail-body p { color: var(--dim); font-size: 13.5px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.facts dt { color: var(--faint); font-size: 12.5px; }
.facts dd { font-family: var(--mono); font-size: 14px; }
.facts dd.txt { font-family: var(--sans); }

footer { color: var(--faint); font-size: 12.5px; padding-top: 6px; }

#gate { padding-top: 14vh; max-width: 440px; }
#gate h1 { font-size: 26px; font-weight: 600; }
#gate p { color: var(--dim); margin-top: 10px; }
#gate form { display: grid; gap: 8px; margin-top: 22px; }
#gate label { font-size: 13px; color: var(--dim); }
#gate input { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
#gate button { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 10px 14px; font-weight: 600; margin-top: 6px; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r-main, .r-ads, .r-op, .r-op2 { grid-template-columns: minmax(0, 1fr); }
  .panel .flush { overflow-x: auto; }
}
@media (max-width: 700px) {
  .bar { height: auto; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .bar, main, #gate { padding-left: 12px; padding-right: 12px; }
  .status { margin-left: 0; width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .value { font-size: 24px; }
  .hint { display: none; }
}