/* Aabetahura analytics dashboard.
 *
 * Colours are the validated reference palette, used verbatim - hues, slot
 * ORDER and both surfaces - so its published CVD and contrast results apply
 * as measured. Substituting a hue or a surface would invalidate that, and
 * this machine has no node to re-run the validator with.
 *
 * Series slots are assigned in fixed order and never cycled. Chart text wears
 * ink tokens, never a series colour.
 */
:root {
  color-scheme: light;
  --plane: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f4f3f0;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --line: rgba(11, 11, 11, .10);
  --line-solid: #e6e5df;

  --accent: #2a78d6;
  --accent-ink: #1c5cab;
  --accent-soft: #eaf1fc;

  --good: #006300;
  --bad: #d03b3b;
  --warning: #fab219;
  --warn-bg: #fdf6e6;
  --warn-line: #f3e2b4;
  --warn-ink: #6d5410;

  /* categorical slots 1-8, fixed order */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  --spark: #b7d3f6;

  --r: 10px;
  --shadow: 0 1px 1px rgba(11,11,11,.04), 0 2px 8px rgba(11,11,11,.04);
  --shadow-lift: 0 1px 2px rgba(11,11,11,.06), 0 8px 24px rgba(11,11,11,.07);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232322;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --line: rgba(255, 255, 255, .10);
  --line-solid: #2c2c2a;

  --accent: #3987e5;
  --accent-ink: #86b6ef;
  --accent-soft: #16283f;

  --good: #0ca30c;
  --bad: #e66767;
  --warn-bg: #241f10;
  --warn-line: #4a3f1c;
  --warn-ink: #e8cd86;

  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --spark: #256abf;

  --shadow: 0 1px 1px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--plane); color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.011em; }
a { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* ------------------------------------------------------------------ login */
#login { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
#login form {
  background: var(--surface); padding: 32px; border-radius: 14px;
  box-shadow: var(--shadow-lift); width: 100%; max-width: 348px;
  border: 1px solid var(--line);
}
#login h1 { font-size: 20px; letter-spacing: -.02em; }
#login p { color: var(--muted); font-size: 13px; margin: 5px 0 22px; }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-solid);
  border-radius: 8px; background: var(--surface-2); transition: border-color .12s, box-shadow .12s;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ----------------------------------------------------------------- header */
header {
  position: sticky; top: 0; z-index: 40; background: var(--surface);
  border-bottom: 1px solid var(--line); padding: 11px 20px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.brand { font-weight: 620; letter-spacing: -.02em; font-size: 15px; white-space: nowrap; line-height: 1.25; }
.brand span { color: var(--muted); font-weight: 400; font-size: 11.5px; display: block;
              letter-spacing: 0; font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }

.btn {
  border: 1px solid var(--line-solid); background: var(--surface); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; font-size: 13px; white-space: nowrap; color: var(--ink-2);
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--axis); color: var(--ink); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.small { padding: 4px 9px; font-size: 12px; border-radius: 7px; }

/* ---------------------------------------------------------------- filters */
.filters {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 11px 20px 12px; display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap;
  position: sticky; top: 53px; z-index: 30;
}
.fgroup { display: flex; flex-direction: column; gap: 6px; }
.fgroup > label {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 500;
}
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line-solid); background: var(--surface); border-radius: 999px;
  padding: 4px 11px; font-size: 12.5px; cursor: pointer; white-space: nowrap; color: var(--ink-2);
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { background: var(--surface-2); border-color: var(--axis); color: var(--ink); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.filters input[type=date] {
  padding: 6px 9px; border: 1px solid var(--line-solid); border-radius: 8px;
  background: var(--surface); font-variant-numeric: tabular-nums;
}
.slicer { position: relative; }
.slicer-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 246px; max-height: 320px;
  overflow: auto; background: var(--surface); border: 1px solid var(--line-solid);
  border-radius: 10px; box-shadow: var(--shadow-lift); padding: 7px;
}
.slicer-panel label {
  display: flex; gap: 9px; align-items: center; padding: 5px 8px; border-radius: 6px;
  font-size: 13px; cursor: pointer;
}
.slicer-panel label:hover { background: var(--surface-2); }
.slicer-panel hr { border: 0; border-top: 1px solid var(--line); margin: 5px 2px; }

/* ------------------------------------------------------------------ notes */
main { padding: 16px 20px 64px; }
.notebar {
  display: flex; align-items: flex-start; gap: 10px; background: var(--warn-bg);
  border: 1px solid var(--warn-line); color: var(--warn-ink); border-radius: var(--r);
  padding: 9px 12px; font-size: 12.5px; margin-bottom: 14px; line-height: 1.5;
}
.notebar .ico { flex: none; margin-top: 1px; }
.notebar .body { flex: 1; min-width: 0; }
.notebar .lead { font-weight: 560; }
.notebar ul { margin: 7px 0 0; padding-left: 17px; }
.notebar li { margin-bottom: 4px; }
.notebar li:last-child { margin-bottom: 0; }
.notebar b { font-weight: 600; }
.notebar summary { cursor: pointer; list-style: none; }
.notebar summary::-webkit-details-marker { display: none; }
.notebar summary .more { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------------- KPIs */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 14px;
  /* Every row the same height, so the sparklines all sit on one baseline and
     a tile carrying a delta does not stand taller than one that cannot. */
  grid-auto-rows: minmax(126px, auto);
}
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 13px 10px; box-shadow: var(--shadow); height: 100%;
  display: flex; flex-direction: column; position: relative;
  border-top: 3px solid var(--tile-accent, var(--accent));
  transition: box-shadow .15s, transform .15s;
}
.kpi:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
/* The hero tile carries the headline figure, so it earns a coloured wash
   rather than only a coloured edge - the one place "colourful" should read
   as "important", not just "pretty". */
.kpi.hero {
  grid-column: span 2;
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--tile-accent, var(--accent)) 10%, var(--surface)) 0%,
    var(--surface) 65%);
}
@media (max-width: 560px) { .kpi.hero { grid-column: span 1; } }
.kpi .k {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 500; display: flex; align-items: center; gap: 5px;
}
.kpi .k .dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.kpi .v { font-size: 20px; font-weight: 600; margin-top: 4px; letter-spacing: -.025em; line-height: 1.15; }
.kpi.hero .v { font-size: 48px; letter-spacing: -.035em; margin-top: 2px; }
.kpi .v.na { color: var(--muted); font-weight: 400; font-size: 15px; font-style: italic; letter-spacing: 0; }
.kpi .d { font-size: 12px; margin-top: 3px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kpi .d.na { font-style: italic; cursor: help; }
.kpi .d .up { color: var(--good); font-weight: 550; }
.kpi .d .down { color: var(--bad); font-weight: 550; }
.kpi .sparkhost { margin-top: auto; padding-top: 8px; }
.kpi .why {
  flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line-solid);
  color: var(--muted); font-size: 10px; line-height: 13px; text-align: center; cursor: help;
  background: var(--surface); margin-left: auto;
}
.kpi .why:hover { color: var(--ink); border-color: var(--axis); }

/* ------------------------------------------------------------------- grid */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 14px 15px 12px; grid-column: span 12; min-width: 0;
}
.card > h3 { font-size: 13.5px; display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.card > h3 .sub { color: var(--muted); font-weight: 400; font-size: 12px; letter-spacing: 0; }
.card .tools { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.card:hover .tools, .card:focus-within .tools { opacity: 1; }
/* `.card` already spans the full width, but the executive pages drop plain
   sections (KPI clusters, banners) straight into the grid, and those need the
   class to mean something on their own. */
.span12 { grid-column: span 12; }
.grid > .kpis { margin-bottom: 0; }
.span4 { grid-column: span 4; } .span5 { grid-column: span 5; }
.span6 { grid-column: span 6; } .span7 { grid-column: span 7; } .span8 { grid-column: span 8; }
@media (max-width: 1040px) { .span4,.span5,.span6,.span7,.span8 { grid-column: span 12; } }

.cardnote {
  color: var(--muted); font-size: 11.5px; line-height: 1.5; margin: 9px 0 0;
  padding-top: 9px; border-top: 1px solid var(--line);
}
.legend {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px;
  font-size: 12px; color: var(--ink-2);
}
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

/* ----------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; color: var(--muted); font-weight: 500; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em; padding: 7px 8px;
  border-bottom: 1px solid var(--line-solid); white-space: nowrap;
}
td { padding: 7px 8px; border-bottom: 1px solid var(--grid); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; margin: 4px -4px 0; padding: 0 4px; }
.na { color: var(--muted); font-style: italic; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.chart-tip {
  position: fixed; z-index: 200; pointer-events: none; background: var(--surface);
  border: 1px solid var(--line-solid); border-radius: 8px; padding: 8px 10px; font-size: 12.5px;
  box-shadow: var(--shadow-lift); color: var(--ink); max-width: 268px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.chart-tip b { font-weight: 600; }
.chart-tip .k { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* ------------------------------------------------------------------- chat */
#chat {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100%); z-index: 80;
  background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .24s cubic-bezier(.32,.72,0,1); box-shadow: var(--shadow-lift);
}
#chat.open { transform: none; }
#chat header { position: static; border-bottom: 1px solid var(--line); }
#chatlog { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 13px; }
.msg { max-width: 93%; font-size: 13.5px; line-height: 1.58; }
.msg.me {
  align-self: flex-end; background: var(--accent); color: #fff;
  padding: 9px 13px; border-radius: 13px 13px 3px 13px;
}
.msg.bot {
  align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line);
  padding: 11px 13px; border-radius: 13px 13px 13px 3px; white-space: pre-wrap;
}
.msg .meta { font-size: 11px; color: var(--muted); margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag { border: 1px solid var(--line-solid); border-radius: 999px; padding: 2px 8px; font-size: 10.5px; }
.tag.calc { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.tag.guard { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.msg .figs { margin-top: 9px; font-size: 12px; }
.msg .figs summary { cursor: pointer; color: var(--muted); }
.msg .figs pre {
  background: var(--plane); border: 1px solid var(--line); border-radius: 7px; padding: 9px;
  overflow: auto; max-height: 264px; font-size: 11px; margin: 7px 0 0;
}
.msg .note {
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
  border-radius: 7px; padding: 7px 9px; font-size: 11.5px; margin-top: 8px; line-height: 1.5;
  white-space: normal;
}
#chatform { border-top: 1px solid var(--line); padding: 11px; display: flex; gap: 8px; }
#chatform textarea {
  flex: 1; resize: none; border: 1px solid var(--line-solid); border-radius: 9px;
  padding: 10px 12px; background: var(--surface-2); max-height: 120px; min-height: 41px;
}
#chatform textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.suggest { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 15px 11px; }
.suggest button {
  font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-solid);
  background: var(--surface); cursor: pointer; color: var(--muted);
}
.suggest button:hover { color: var(--ink); border-color: var(--axis); background: var(--surface-2); }

#scrim { position: fixed; inset: 0; background: rgba(11,11,11,.32); z-index: 70; display: none; }
#scrim.on { display: block; }

dialog {
  border: 1px solid var(--line-solid); border-radius: 13px; background: var(--surface);
  color: var(--ink); box-shadow: var(--shadow-lift); padding: 22px;
  max-width: 540px; width: calc(100% - 32px);
}
dialog::backdrop { background: rgba(11,11,11,.4); }
pre.out {
  background: var(--plane); border: 1px solid var(--line); border-radius: 8px; padding: 11px;
  font-size: 11.5px; overflow: auto; max-height: 320px; line-height: 1.55;
}
.spin {
  display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line-solid);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===========================================================================
 *  EXECUTIVE PAGES, added 2026-09-17
 * ======================================================================== */

/* `hidden` has to win. .filters sets display:flex, which silently beat the
   attribute and left a date picker sitting above the forecast - a control
   that promises to change a figure it cannot change. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ nav -- */
#nav {
  display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--line-solid);
  background: var(--plane); overflow-x: auto; scrollbar-width: none;
  position: sticky; top: 0; z-index: 30;
}
#nav::-webkit-scrollbar { display: none; }
.navbtn {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 520;
  padding: 11px 13px 9px; cursor: pointer; white-space: nowrap; letter-spacing: -.01em;
}
.navbtn:hover { color: var(--ink); }
.navbtn.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 620; }
.navbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-soft); }

/* --------------------------------------------------------------- notes --- */
.pagenote {
  font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 10px;
  max-width: 78ch;
}
.pagenote.warn { color: var(--warn-ink); }
[data-theme=dark] .pagenote.warn { color: var(--warning); }
.cardnote.warn { color: var(--warn-ink); background: var(--warn-bg); }
[data-theme=dark] .cardnote.warn { color: var(--warning); background: transparent; }
.na { color: var(--muted); font-style: italic; font-weight: 400; }
.na.big { font-size: 17px; margin: 10px 0; display: block; }
.badge {
  font-size: 10px; font-weight: 640; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-solid);
  color: var(--muted); white-space: nowrap;
}
.badge.est { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); }
[data-theme=dark] .badge.est { color: var(--warning); background: transparent; border-color: var(--warning); }
.badge.gate { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }

/* ---------------------------------------------------------- vital signs -- */
.verdict { display: block; }
.verdict-main { display: flex; gap: 14px; align-items: flex-start; }
.verdict-main h2 { font-size: 19px; letter-spacing: -.025em; line-height: 1.3; }
.verdict-main .muted { font-size: 12.5px; margin-top: 4px; }
.verdict-dot {
  width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 5px;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent);
}
.verdict-dot.good { background: var(--good); color: var(--good); }
.verdict-dot.watch { background: var(--warning); color: var(--warning); }
.verdict-dot.bad { background: var(--bad); color: var(--bad); }
.gatebar {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.gate {
  font-size: 11.5px; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--line-solid); color: var(--ink-2);
}
.gate.good { border-color: color-mix(in srgb, var(--good) 40%, transparent); color: var(--good); }
.gate.watch { border-color: var(--warn-line); color: var(--warn-ink); }
.gate.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); }
[data-theme=dark] .gate.watch { color: var(--warning); border-color: var(--warning); }

.signs { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 10px; }
.sign {
  border: 1px solid var(--line-solid); border-radius: 9px; padding: 11px 12px 9px;
  background: var(--plane); display: flex; flex-direction: column; gap: 3px;
}
.sign.bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--line-solid)); }
.sign.unknown { opacity: .72; }
.sign-top { display: flex; align-items: center; gap: 6px; }
.sign-label { font-size: 12px; color: var(--ink-2); font-weight: 550; line-height: 1.3; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.dot.good { background: var(--good); }
.dot.watch { background: var(--warning); }
.dot.bad { background: var(--bad); }
.dot.unknown { background: transparent; border: 1.5px dashed var(--axis); }
.dot.info { background: var(--accent); }
.sign-value {
  font-size: 22px; font-weight: 620; letter-spacing: -.03em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sign-value small { font-size: 12px; font-weight: 450; color: var(--muted); letter-spacing: 0; }
.sign-value.na { font-size: 14px; font-weight: 400; font-style: italic; color: var(--muted); }
.sign-target { font-size: 11px; color: var(--muted); }
.sign-working { font-size: 11px; color: var(--ink-2); line-height: 1.45; margin-top: 3px; }
.sign-why { margin-top: auto; padding-top: 6px; }
.sign-why summary {
  font-size: 11px; color: var(--muted); cursor: pointer; list-style: none;
  text-decoration: underline; text-underline-offset: 2px;
}
.sign-why summary::-webkit-details-marker { display: none; }
.sign-why p { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; margin-top: 6px; }

/* -------------------------------------------------------------- tables --- */
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* A table that scrolls has to LOOK like it scrolls, or the columns past the
   edge are simply invisible. The fade is the only affordance on a phone. */
.scrollx { background:
  linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat,
  linear-gradient(to left,  var(--surface) 30%, transparent) right / 24px 100% no-repeat,
  radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), transparent) left / 10px 100% no-repeat,
  radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) right / 10px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
table.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
/* A floor width so a genuinely wide table (the customer explorer, nine
   columns) scrolls rather than squashing every column to two characters.
   Tables that drop their optional columns on mobile opt OUT of the floor
   via `.dt.fits` - forcing 560px on a three-column table pushed the one
   figure that mattered off the edge of the screen. */
@media (max-width: 760px) {
  table.dt { min-width: 560px; }
  table.dt.fits { min-width: 0; width: 100%; }
}
table.dt.compact { font-size: 12.5px; }
table.dt th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; padding: 6px 9px;
  border-bottom: 1px solid var(--line-solid); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
table.dt th.r, table.dt td.r { text-align: right; }
table.dt th.sortable { cursor: pointer; }
table.dt th.sortable:hover { color: var(--ink); }
table.dt .caret { color: var(--accent); }
table.dt td {
  padding: 7px 9px; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; vertical-align: baseline;
}
table.dt td.l { font-variant-numeric: normal; }
table.dt tbody tr:hover { background: var(--surface-2); }
table.dt td small { color: var(--muted); font-size: 10.5px; }
table.dt td.empty { color: var(--muted); font-style: italic; padding: 18px 9px; }
table.dt .bad { color: var(--bad); }
table.dt .good { color: var(--good); }
.flag { color: var(--warning); font-weight: 700; cursor: help; }

.toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.toolbar .search, .toolbar .sel {
  background: var(--plane); border: 1px solid var(--line-solid); border-radius: 7px;
  padding: 5px 9px; font: inherit; font-size: 12.5px; color: var(--ink); min-width: 150px;
}
.toolbar .search:focus, .toolbar .sel:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.toolbar .check { font-size: 12px; color: var(--ink-2); display: flex; gap: 5px; align-items: center; cursor: pointer; }
.chips.tight .chip { font-size: 11.5px; padding: 3px 8px; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px; }

.chipv {
  font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 5px;
  background: var(--surface-2); color: var(--ink-2);
}
.chipv.good { color: var(--good); background: color-mix(in srgb, var(--good) 11%, transparent); }
.chipv.watch { color: var(--warn-ink); background: var(--warn-bg); }
.chipv.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 11%, transparent); }
[data-theme=dark] .chipv.watch { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }

.seg { font-size: 11px; padding: 1px 7px; border-radius: 5px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.seg.active { color: var(--good); background: color-mix(in srgb, var(--good) 11%, transparent); }
.seg.atrisk { color: var(--warn-ink); background: var(--warn-bg); }
.seg.dormant, .seg.leave { color: var(--ink-2); }
.seg.lost, .seg.inactive, .seg.doubt { color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, transparent); }
[data-theme=dark] .seg.atrisk { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }

/* ------------------------------------------------------------- cohorts --- */
table.cohort { border-collapse: separate; border-spacing: 2px; font-size: 11.5px; }
table.cohort th {
  font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 6px; text-align: center;
}
table.cohort th.cohort-label, table.cohort td.cohort-label { text-align: left; white-space: nowrap; }
table.cohort td.cohort-label { font-weight: 560; color: var(--ink-2); padding-right: 10px; }
table.cohort td.cohort-size { color: var(--muted); text-align: right; padding-right: 10px; font-variant-numeric: tabular-nums; }
table.cohort td.cohort-cell {
  width: 38px; text-align: center; padding: 5px 0; border-radius: 5px;
  font-variant-numeric: tabular-nums; cursor: help;
  background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), transparent);
  color: var(--ink);
}
table.cohort td.cohort-cell.partial { outline: 1px dashed var(--axis); outline-offset: -1px; }
table.cohort td.cohort-none { width: 38px; }

/* -------------------------------------------------------- stat clusters -- */
.bigstat { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.bigstat .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bigstat .v { font-size: 24px; font-weight: 620; letter-spacing: -.03em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.bigstat .v small { font-size: 12px; font-weight: 450; color: var(--muted); }
.bigstat .v.bad { color: var(--bad); }
.bigstat .sub { font-size: 11.5px; margin-top: 2px; }

.unitrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.unit { border: 1px solid var(--line-solid); border-radius: 8px; padding: 9px 10px; background: var(--plane); }
.unit .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.unit .v { font-size: 17px; font-weight: 600; margin-top: 3px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.unit.neg .v { color: var(--bad); }
.unit.hero { border-color: var(--accent); background: var(--accent-soft); }
.unit.hero .v { font-size: 22px; }

.meter { position: relative; height: 10px; border-radius: 5px; background: var(--grid); margin-top: 14px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 5px; }
.meter-fill.good { background: var(--good); }
.meter-fill.bad { background: var(--bad); }
.meter-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }

ul.assume { margin: 0; padding-left: 16px; font-size: 12px; color: var(--ink-2); line-height: 1.55; }
ul.assume li { margin-bottom: 7px; }
ul.assume b { color: var(--ink); font-weight: 600; }
ul.assume.refuse { color: var(--muted); }
.card h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 7px; }

/* ------------------------------------------------- customer drawer ------- */
#cust {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  background: var(--surface); border-left: 1px solid var(--line-solid);
  box-shadow: var(--shadow-lift); transform: translateX(101%);
  transition: transform .18s ease; z-index: 60; display: flex; flex-direction: column;
}
#cust.open { transform: none; }
#cust > header {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--line-solid); flex: none;
}
#cust-body { overflow-y: auto; padding: 16px; }
#cust-body h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 20px 0 8px; }
.dsum { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.drow { display: flex; justify-content: space-between; gap: 12px; padding: 7px 11px; background: var(--surface); font-size: 12.5px; }
.drow .k { color: var(--muted); }
.drow .v { font-weight: 550; text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- settings -- */
.field2 { display: grid; grid-template-columns: 1fr 88px; gap: 10px; align-items: end; }
.field label small { color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------------------- small -- */
@media (max-width: 900px) {
  .signs { grid-template-columns: 1fr 1fr; }
  #cust { width: 100%; }
  .toolbar .search { min-width: 0; flex: 1; }
}
@media (max-width: 620px) {
  .signs { grid-template-columns: 1fr; }
  #nav { padding: 0 12px; }
  .bigstat { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
 *  THE LANDING PAGE'S RETENTION BLOCK, added 2026-09-18
 * ======================================================================== */

/* ---------------------------------------------------- attention strip ----- */
.attention {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 10px;
}
.att {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  border-left: 3px solid var(--muted);
  padding: 11px 12px; box-shadow: var(--shadow); cursor: pointer;
  font: inherit; color: inherit; width: 100%;
  transition: box-shadow .15s, transform .15s;
}
.att:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.att:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.att.good  { border-left-color: var(--good); }
.att.watch { border-left-color: var(--warning); }
.att.bad   { border-left-color: var(--bad); }
.att-dot { display: none; }
.att-body { flex: 1; min-width: 0; }
.att-head { font-size: 13.5px; font-weight: 620; letter-spacing: -.015em; line-height: 1.3; }
.att-detail { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.att-go {
  font-size: 11px; color: var(--accent); font-weight: 560; white-space: nowrap;
  align-self: center;
}

/* An insight is a sentence somebody should act on, so it is not styled as a
   footnote like the mechanical notes beside it. */
.cardnote.insight {
  color: var(--ink); font-size: 12.5px; font-weight: 520;
  background: var(--accent-soft); border-top: 0; border-radius: 8px;
  padding: 9px 11px; margin-top: 10px;
}
[data-theme=dark] .cardnote.insight { background: var(--accent-soft); color: var(--ink); }

/* -------------------------------------------------------- mini bar ------- */
.minibar {
  display: inline-block; width: 64px; height: 6px; border-radius: 3px;
  background: var(--grid); overflow: hidden; vertical-align: middle;
}
.minibar i { display: block; height: 100%; background: var(--s1); border-radius: 3px; }

table.dt .up { color: var(--good); font-weight: 550; }
table.dt .down { color: var(--bad); font-weight: 550; }

/* ===========================================================================
 *  MOBILE, added 2026-09-18
 *  Two collapse mechanisms let a phone show the DATA first, not the controls.
 *  Both hide by default on desktop (see .mobile-only) and reveal on narrow
 *  viewports via a media query. No JS state, only a class toggled on #app.
 * ======================================================================== */

/* Class-based visibility. `mobile-only` elements exist in the DOM everywhere
   but only render below the breakpoint - a two-line CSS rule that keeps the
   markup free of duplicated content. */
.mobile-only { display: none; }

@media (max-width: 720px) {
  .mobile-only { display: inline-flex; }

  /* HEADER: five secondary buttons across three rows -> one row + a menu.
     The "⋯" button toggles #app.menu-open, which reveals the hidden group
     as a dropdown row underneath. */
  #secondary-actions { display: none; }
  #app.menu-open #secondary-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    width: 100%; order: 10;         /* Push under the brand+Ask row */
    padding: 8px 4px 0; border-top: 1px solid var(--line); margin-top: 8px;
  }
  header { padding: 10px 14px; gap: 8px; }
  .brand { font-size: 14px; }
  .brand span { font-size: 10.5px; }

  /* NAV: horizontal scroll works, but the active tab needs to be reachable. */
  #nav { padding: 0 12px; }
  .navbtn { padding: 10px 12px 8px; font-size: 13px; }

  /* FILTER BAR: hidden by default on phone. The summary chip above it says
     what is currently applied, in one line, so nobody has to open the panel
     just to read what they filtered to. */
  .filters { display: none; }
  #app.filters-open .filters {
    display: block; padding: 12px 14px 14px;
  }
  #app.filters-open .filters .fgroup { margin-bottom: 14px; }
  #app.filters-open .filters > .spacer { display: none; }
  #app.filters-open #filters-summary .fs-caret { transform: rotate(180deg); }

  /* FILTER SUMMARY CHIP itself. This IS the filter bar on mobile until the
     person taps to expand - it must be readable at a glance and clearly
     tappable, so it wears a border and a caret. */
  .filters-summary {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 14px; background: var(--surface);
    border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    font: inherit; font-size: 13px; color: var(--ink-2); text-align: left;
    cursor: pointer; position: sticky; top: 42px; z-index: 25;
  }
  .filters-summary .fs-body { flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filters-summary .fs-caret {
    flex: none; color: var(--muted); font-size: 12px;
    transition: transform .15s;
  }
  .filters-summary:hover, .filters-summary:focus-visible {
    background: var(--surface-2); outline: none;
  }

  /* CHIPS: an eleven-chip Period group wraps to four rows on a 375px phone.
     Horizontal scroll instead - short labels, obvious gesture, no vertical
     cost. `nowrap` per chip so a "Last 7 days" doesn't split at the space. */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; padding: 6px 12px; font-size: 13px; }

  /* From/To on their own row is fine; put them side by side to save space. */
  .filters .fgroup { display: flex; flex-direction: column; gap: 5px; }

  /* KPI GRID: 160px min was borderline on 375px (one tile per row for the
     hero); tighten to fit two normal tiles + one hero row cleanly. */
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 10px 11px 9px; }
  .kpi.hero { grid-column: 1 / -1; }
  .kpi.hero .v { font-size: 32px; }

  /* SETTINGS DIALOG: side-by-side "id + gid" columns are cramped on phone. */
  .field2 { grid-template-columns: 1fr; gap: 6px; }
  dialog { max-width: calc(100vw - 24px); padding: 18px 16px; }

  /* MAIN PADDING: extra breathing room on the sides costs data density
     the app does not have to spare. */
  main { padding: 12px 14px 60px; }
  .grid { gap: 10px; }
}

/* Very narrow (e.g. 320px iPhone SE): drop to a single KPI column, because
   two 160px tiles with a gap will not fit and would clip. */
@media (max-width: 380px) {
  .kpis { grid-template-columns: 1fr; }
}

/* ===========================================================================
 *  SECTIONS + JUMP BAR, added 2026-09-18
 *  The Overview is now grouped into named sections. On a phone the jump bar
 *  turns each into one tap, so nobody has to scroll past Money to reach
 *  Operations. Desktop keeps the headings but not the bar - a mouse and a
 *  scroll wheel do not need it, and it was explicitly asked to stay as it is.
 * ======================================================================== */

.section-head {
  grid-column: span 12; display: flex; align-items: baseline; gap: 10px;
  margin: 18px 0 -2px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line-solid);
  scroll-margin-top: 120px;   /* so a jump lands below the sticky bars */
}
.grid > .section-head:first-child { margin-top: 2px; }
.section-head .sh-label {
  font-size: 15px; font-weight: 650; letter-spacing: -.02em; color: var(--ink);
}
.section-head .sh-sub { font-size: 12px; color: var(--muted); font-weight: 400; }

/* -------------------------------------------------------- jump bar ------- */
#jumpbar {
  display: none; gap: 4px; padding: 8px 14px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  position: sticky; top: 86px; z-index: 24;
}
#jumpbar::-webkit-scrollbar { display: none; }
.jump {
  border: 1px solid var(--line-solid); background: var(--plane); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 12.5px; color: var(--ink-2);
  white-space: nowrap; cursor: pointer;
}
.jump:hover, .jump:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }

@media (max-width: 720px) {
  /* The bar only earns its space on a phone, where the page is one column
     and every section is a full screen apart. */
  #jumpbar { display: flex; }

  /* STICKY STACK, fixed. Four bars were each pinned with a hand-picked
     `top` (header 0, nav 0, summary 42px, jumpbar 86px) that assumed a
     shorter header than mobile actually renders - so they overlapped each
     other, and together claimed 225px of an 812px screen before a single
     figure appeared.
     On a phone only ONE of them earns permanent space: the jump bar, which
     is the whole point of sectioning the page. Everything else scrolls away
     and comes back when you scroll up. */
  header, #nav, .filters-summary { position: static; }
  #jumpbar { top: 0; }

  /* EMAIL-REPORT STYLING. The board email reads perfectly on a phone because
     it is one column of full-width blocks with generous type and a plain
     explanatory line under each figure. These rules give the Overview the
     same shape: no side-by-side cards, no shrunken charts, headings that
     actually separate the sections. */
  .grid > .card { grid-column: 1 / -1; }
  .card { padding: 14px 15px 12px; border-radius: 12px; }
  .card > h3 { font-size: 15px; margin-bottom: 6px; flex-wrap: wrap; }
  .card > h3 .sub { font-size: 12.5px; }
  .cardnote { font-size: 12px; line-height: 1.55; }

  .section-head {
    margin: 22px 0 2px; padding-bottom: 6px; scroll-margin-top: 130px;
  }
  .section-head .sh-label { font-size: 17px; }
  .section-head .sh-sub { font-size: 12px; }

  /* The tools (CSV/PNG) are hover-revealed on desktop; a phone has no hover,
     so they would never appear. Show them, quietly. */
  .card .tools { opacity: 1; }
  .card .tools .btn { font-size: 11px; padding: 3px 7px; }

  /* Secondary table columns. A table that scrolls sideways is fine until the
     column somebody opened it FOR is the one off the edge - these drop out
     so the figure that matters stays on screen. */
  table.dt th.opt, table.dt td.opt { display: none; }
}