/* Table-first with a tonal hierarchy. Each layer of the report sits on
   its own surface step above a black page; the black shows through as the
   channels between the MT camp, the Kedone camp and All sites. */
:root {
  --page: #000;          /* page, and the channels between camps */
  --chrome: #151515;     /* header + summary strip */
  --chrome-l: #232323;
  --pane: #0c0c0c;       /* chart panes */
  /* table surfaces: these are re-pointed per camp under tone=camps */
  --s1: #0e0e0e;  --s1z: #151515;    /* site cells, zebra */
  --band: #1e1e1e;                   /* Partner header band */
  --tot: #191919; --totz: #1f1f1f;   /* Partner Total columns */
  --totcap: #2a2a2a;                 /* Partner Total banner and footer */
  --ft: #181818;                     /* Month Total + Change, site cells */
  --frame: #353535;
  --all: #212121; --allz: #292929; --allcap: #333;   /* All sites, always neutral */
  --line: #222; --line2: #383838;
  --tx: #e8e6e1; --val: #d3d1cb; --dim: #8f8d88; --faint: #5b5a56;
  --amber: #ffa21f; --amber-d: #a8670c;
  --up: #52c98a; --dn: #f0645a;
  --trendcap: rgba(255,255,255,.55);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Geist", -apple-system, "Helvetica Neue", sans-serif;
  --gut: 10px;
}
/* tone=camps: the same steps, with a faint slate blue for MT and a faint
   mauve for Kedone. All sites stays neutral. */
.tone-camps .cp-MT {
  --s1: hsl(214 16% 6.6%); --s1z: hsl(214 16% 9.6%);
  --band: hsl(214 20% 13.5%); --tot: hsl(214 16% 10.5%); --totz: hsl(214 16% 13%);
  --totcap: hsl(214 18% 18%); --ft: hsl(214 16% 10.5%); --frame: hsl(214 16% 26%);
}
.tone-camps .cp-Kedone {
  --s1: hsl(292 10% 6.6%); --s1z: hsl(292 10% 9.6%);
  --band: hsl(292 13% 13.5%); --tot: hsl(292 10% 10.5%); --totz: hsl(292 10% 13%);
  --totcap: hsl(292 12% 18%); --ft: hsl(292 10% 10.5%); --frame: hsl(292 10% 26%);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--tx); }
body {
  font: 400 12px/1.3 var(--sans);
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: 48px auto 26px minmax(0, 1fr) 64px;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.grid td, .top .v, .rk, .tip .mono, .tip .row, .card .n, .ax, kbd, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 1px solid var(--amber); outline-offset: -1px; }
kbd { font-size: 10px; font-weight: 500; color: var(--dim); border: 1px solid var(--line2); border-radius: 3px; padding: 0 4px; margin: 0 1px; line-height: 15px; display: inline-block; }

/* ── chrome: header + summary strip share one surface ── */
.top { background: var(--chrome); }
.top { display: flex; align-items: center; gap: 14px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--chrome-l); min-width: 0; }
.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.mark { font: 600 12px var(--mono); color: #000; background: var(--amber); padding: 1px 6px 2px; border-radius: 2px; }
.title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
/* month and cell-value pickers: one button showing the choice, a menu of the rest */
.mbtn { display: inline-flex; align-items: baseline; gap: 6px; height: 28px; padding: 0 9px 0 11px; border-radius: 5px; border: 1px solid var(--line2); background: #0d0d0d; color: var(--tx); font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 26px; }
.mbtn small { color: var(--amber); font-weight: 500; font-size: 11.5px; }
.mbtn .chev, .fold .chev { width: 10px; height: 10px; align-self: center; color: var(--dim); transition: transform 180ms ease-out; }
.mbtn:hover { border-color: #555; }
.mbtn:hover .chev { color: var(--tx); }
.mbtn[aria-expanded="true"] { border-color: var(--amber-d); }
.mbtn[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--amber); }
.menu { position: fixed; z-index: 90; margin: 0; padding: 4px; list-style: none; background: #1a1a1a; border: 1px solid #3a3a3a; border-radius: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.6); transform-origin: top left; }
.menu.in { animation: menuin 140ms ease-out; }
@keyframes menuin { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
.menu li { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px 6px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; color: var(--tx); font-size: 12.5px; outline: none; }
.menu li .mt { font-weight: 500; }
.menu li small { color: var(--dim); font-size: 11.5px; }
.menu li kbd { margin-left: auto; }
.menu li .tick { width: 11px; height: 11px; align-self: center; margin-left: auto; color: var(--amber); visibility: hidden; flex: none; }
.menu li kbd + .tick { margin-left: 6px; }
.menu li[aria-checked="true"] .tick { visibility: visible; }
.menu li[aria-checked="true"] .mt { color: var(--amber); }
.menu li:hover, .menu li:focus { background: #2a2a2a; }
.menu li:focus-visible { box-shadow: inset 0 0 0 1px var(--amber-d); }
.grid th .lbtn { height: 24px; font-size: 12px; font-weight: 500; line-height: 22px; margin-left: 8px; }

/* the status chip: quiet when current, amber when stale or its sums disagree; detail on hover */
.status { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; height: 26px; padding: 0 11px 0 10px; border-radius: 13px; border: 1px solid var(--line2); color: var(--dim); cursor: default; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: #a9a7a1; }
.status b { font-weight: 600; color: var(--tx); }
.status span { font-family: var(--mono); font-size: 11.5px; }
.status.stale, .status.mismatch { border-color: var(--amber-d); background: rgba(255,162,31,.13); color: #f3c98c; }
.status.stale .dot, .status.mismatch .dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(255,162,31,.25); }
.status.stale b, .status.mismatch b { color: var(--amber); }

/* the selection's numbers, in the top row */
.top .kvs { display: flex; align-items: center; min-width: 0; white-space: nowrap; margin-left: 4px; }
.top .kv { display: flex; align-items: baseline; gap: 6px; padding: 0 12px; }
.top .kv + .kv { border-left: 1px solid var(--chrome-l); }
.top .k { color: var(--dim); font-size: 11.5px; }
.top .v { font-size: 14.5px; font-weight: 500; color: #fff; }
.top .v.s { font-size: 13px; }
.top .today .v { color: var(--amber); }
.top .scope { margin-left: 6px; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 4px 0 10px; border-radius: 12px; border: 1px solid var(--amber-d); background: #22180a; color: var(--amber); font-weight: 500; white-space: nowrap; max-width: 260px; }
.top .scope .nm { overflow: hidden; text-overflow: ellipsis; }
.top .scope i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.top .scope .x { width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; line-height: 1; color: #f3c98c; flex: none; }
.top .scope:hover .x { background: rgba(255,162,31,.2); color: #fff; }
@media (max-width: 1500px) { .top .kv { padding: 0 9px; } .top .v { font-size: 14px; } .top .k { font-size: 11px; } }

/* ── panes ── */
.pane-title { display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 12px; white-space: nowrap; flex: none; min-width: 0; }
.pt-name { font-weight: 600; font-size: 12px; color: var(--tx); }
.pt-note { color: var(--dim); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pt-note b { color: var(--amber); font-weight: 500; }
.pt-hint { margin-left: auto; color: var(--faint); }

/* ── the table: surfaces per camp, black channels between ── */
.grid-pane { min-height: 0; padding: 8px var(--gut) 0; }
.grid-scroll { overflow: auto; position: relative; scrollbar-color: var(--line2) var(--page); scroll-snap-type: y mandatory; }
.grid tbody tr { scroll-snap-align: start; }
.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; --rowh: 26px; width: max-content; min-width: 100%; }
.grid th, .grid td { padding: 0 10px; text-align: right; white-space: nowrap; }
.grid td { height: var(--rowh); font-size: 12px; color: var(--val); background-color: var(--s1); border-bottom: 1px solid rgba(0,0,0,.35); }
.grid tbody tr:nth-child(even) td { background-color: var(--s1z); }
.grid tbody td.tot { background-color: var(--tot); color: var(--tx); font-weight: 500; }
.grid tbody tr:nth-child(even) td.tot { background-color: var(--totz); }
.grid tbody td.all { background-color: var(--all); color: #fff; font-weight: 500; }
.grid tbody tr:nth-child(even) td.all { background-color: var(--allz); }
.grid td.z { color: var(--faint); }
.grid .dash { color: var(--faint); }
.grid .ch, .grid tbody tr td.ch, .grid tbody tr:nth-child(even) td.ch { padding: 0; background: var(--page); border: 0; }
.grid .pl { border-left: 1px solid var(--frame); }
.grid .pr { border-right: 1px solid var(--frame); }
/* three mode: the three values of a site read as one group */
.grid.three td, .grid.three th { padding: 0 7px; }
.grid.three td.s-leads { color: #b5b3ad; }
.grid.three td.s-epl { color: #b9a98d; }
.grid.three td.tot.s-leads, .grid.three td.all.s-leads { color: #d6d4ce; }
.grid.three td.tot.s-epl, .grid.three td.all.s-epl { color: #dcc9a6; }
.grid.three tbody td.g0:not(.pl) { border-left: 1px solid rgba(255,255,255,.07); }

.grid thead th { position: sticky; background: var(--page); z-index: 3; font-weight: 400; }
.grid thead tr.band th { height: 28px; }
.grid .date { position: sticky; left: 0; z-index: 2; text-align: left; background-color: var(--page); font-family: var(--mono); padding-left: 2px; }
.grid tbody td.date { background-color: var(--page); }
.grid tbody tr:nth-child(even) td.date { background-color: #0f0f0f; }
.grid .all { position: sticky; right: 0; z-index: 2; }
.grid .a0 { box-shadow: calc(-1 * var(--ch, 22px)) 0 0 var(--page); }
.grid thead th.date, .grid thead th.all { z-index: 4; }
/* three mode below 1600px: the All sites group is too wide to pin, so it scrolls with the rest */
.grid.unpin .all { position: static; }
.grid.unpin thead th.all { position: sticky; right: auto !important; }
.grid.unpin tfoot td.all { position: sticky; right: auto !important; }
.grid.unpin .a0 { box-shadow: none; }

/* Partner header band: calm, just the name and count */
.grid tr.band th.pband { padding: 0; text-align: left; border-top: 1px solid var(--frame); background: var(--band); }
.grid tr.band th.pband.all { background: var(--allcap); }
.grid tr.band th.pband button { width: 100%; height: 27px; display: block; padding: 0; }
.grid tr.band th.pband .in { position: sticky; left: var(--datew, 140px); display: inline-flex; align-items: baseline; gap: 9px; height: 27px; line-height: 27px; padding: 0 12px; }
.grid tr.band th.pband b { font-size: 13px; font-weight: 600; color: var(--tx); }
.grid tr.band th.pband .cnt { color: var(--dim); font-size: 11.5px; }
.grid tr.band th.pband button:hover b { color: var(--amber); }
.grid tr.band th.pband.on { box-shadow: inset 0 2px 0 var(--amber); }
.grid tr.band th.pband.on b { color: var(--amber); }

/* site banners: the site's colour at a tint over its camp surface, a trend underneath */
.grid tr.banner th { vertical-align: top; text-align: left; padding: 7px 10px 6px; height: 62px; cursor: pointer; }
.grid:not(.three) tr.banner th:not(.date):not(.ch) { border-bottom: 1px solid var(--frame); }
.grid tr.banner th.site { background: linear-gradient(var(--tint), var(--tint)), var(--s1); box-shadow: inset 0 2px 0 var(--sc); }
.grid tr.banner th .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font: 500 11.5px/14px var(--sans); color: var(--tx); min-height: 28px; }
.grid.three tr.banner th .nm { -webkit-line-clamp: 1; min-height: 14px; }
.grid tr.banner th .lb { color: var(--sc); font-weight: 600; }
.grid tr.banner th .trend { display: block; width: 100%; height: 18px; margin-top: 4px; }
.grid.three tr.banner th .trend { height: 20px; margin-top: 5px; }
.grid.three tr.banner th { height: 52px; padding-top: 6px; padding-bottom: 5px; }
.grid tr.banner th.tot { background: var(--totcap); }
.grid tr.banner th.all { background: var(--allcap); }
.grid tr.banner th.tot .nm, .grid tr.banner th.all .nm { color: #fff; font-weight: 600; }
.grid tr.banner th .sub { display: block; font-size: 10.5px; color: var(--dim); }
.grid tr.banner th.date { cursor: default; }
.grid tr.banner th:hover .nm { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 2px; }
.grid tr.banner th.iso { box-shadow: inset 0 2px 0 var(--amber), inset 0 0 0 1px var(--amber); }
.grid tr.banner th.iso .nm { color: var(--amber); }
.grid thead th.date { vertical-align: bottom; padding-bottom: 5px; color: var(--dim); font-family: var(--sans); cursor: default; }
/* three mode: the sub-column labels */
.grid tr.subh th:not(.ch) { height: 22px; font-size: 10.5px; color: var(--dim); background: var(--s1); border-bottom: 1px solid var(--frame); vertical-align: middle; }
.grid tr.subh th.tot { background: var(--tot); color: #b9b7b1; }
.grid tr.subh th.all { background: var(--all); color: #b9b7b1; }
.grid tr.subh th.date { background: var(--page); padding-bottom: 0; border-bottom: 0; }

/* date cells */
.dt { display: flex; align-items: center; gap: 7px; padding-left: 8px; }
.dt .wd { color: var(--dim); width: 26px; font-family: var(--sans); font-size: 11.5px; }
.dt .md { color: var(--tx); }
.dt .tg { margin-left: auto; }
.tagp { display: inline-block; font: 600 9.5px/13px var(--mono); color: var(--amber); border: 1px dashed var(--amber-d); border-radius: 2px; padding: 0 3px; }
.tagt { display: inline-block; font: 600 9.5px/13px var(--mono); color: #000; background: var(--amber); border-radius: 2px; padding: 0 3px; }
tr.prov td.date { box-shadow: inset 2px 0 0 var(--amber-d); }
tr.today td { color: #fff; }
tr.fut td { color: var(--faint); }
tr.fut .dt .wd, tr.fut .dt .md { color: var(--faint); }
.grid tbody tr.fut td.date { cursor: default; }

/* footer rows: span, Month Total, Change, frozen */
.grid tfoot td { position: sticky; z-index: 3; background-color: var(--ft); height: 28px; font-weight: 500; color: var(--tx); }
.grid tfoot td.tot { background-color: var(--totcap); }
.grid tfoot td.all { z-index: 4; background-color: var(--allcap); color: #fff; }
.grid tfoot td.ch { background: var(--page); }
.grid tfoot td.date { z-index: 5; background-color: var(--page); font-family: var(--sans); font-weight: 600; padding-left: 10px; }
.grid tfoot td.date small { display: block; white-space: normal; max-width: 128px; font-weight: 400; color: var(--faint); font-size: 10.5px; line-height: 12px; }
.grid tfoot tr.mt td:not(.ch):not(.date) { border-top: 1px solid var(--frame); }
.grid tfoot tr.chg td { font-weight: 400; height: 31px; }
.grid tfoot tr.chg td:not(.ch):not(.date) { border-bottom: 1px solid var(--frame); }
.grid tfoot tr.chg .up { color: var(--up); }
.grid tfoot tr.chg .dn { color: var(--dn); }
.grid tfoot tr.chg .na { color: var(--faint); }
.grid tfoot tr.sp td:not(.ch) { background-color: #22180a; color: var(--amber); border-top: 1px solid var(--amber-d); }
.grid tfoot tr.sp td.all, .grid tfoot tr.sp td.tot { background-color: #2a1d0b; }
.grid tfoot tr.sp td.date { background-color: #22180a; }

.grid.all3 td { height: auto; padding-top: 3px; padding-bottom: 3px; line-height: 14px; }
.grid.all3 td .l2 { color: var(--dim); display: block; }
.grid.all3 td .l3 { color: #b9a98d; display: block; }

/* selection states: overlays keep each camp's surface showing through */
.grid tr.out td:not(.date) { color: var(--faint); }
.grid td.dim { color: var(--faint) !important; }
.grid th.dim .nm, .grid th.dim .lb { opacity: .45; }
.grid th.dim .trend { opacity: .3; }
.grid tr.hov td:not(.ch) { background-image: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)); }
.grid tr.hov td.date { box-shadow: inset 2px 0 0 var(--amber); }
.grid td.hc:not(.ch) { background-image: linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)); }
.grid td.hx { color: #fff !important; box-shadow: inset 0 1px 0 var(--amber), inset 0 -1px 0 var(--amber); }
.grid td.hx.g0 { box-shadow: inset 1px 0 0 var(--amber), inset 0 1px 0 var(--amber), inset 0 -1px 0 var(--amber); }
.grid td.hx.gL { box-shadow: inset -1px 0 0 var(--amber), inset 0 1px 0 var(--amber), inset 0 -1px 0 var(--amber); }
.grid td.hx.g0.gL { box-shadow: inset 0 0 0 1px var(--amber); }
.grid tbody td.date { cursor: pointer; user-select: none; -webkit-user-select: none; }
.grid tr.insel td.date { background-color: #22180a; }
.grid tr.insel td.date .md { color: var(--amber); }

/* ── charts: panes on the black page, given the room the table frees (app.js PANES sets the columns) ── */
.charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .55fr) minmax(400px, .6fr); gap: var(--gut); padding: 0 var(--gut); min-height: 0; }
.cpane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--pane); border: 1px solid #1b1b1b; border-radius: 3px; }
.cpane[hidden] { display: none; }
.chart { position: relative; flex: 1; min-height: 0; min-width: 0; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.chart svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ax { fill: var(--dim); font-size: 10.5px; }
.gl { stroke: #1f1f1f; stroke-width: 1; }
.readout { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 6px 4px 6px 14px; }
.rklist { flex: 1; min-height: 0; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.ro-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; white-space: nowrap; height: 20px; line-height: 20px; }
.ro-h b { font-weight: 600; }
.ro-h .r { margin-left: auto; color: var(--dim); overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.rkgrid { display: grid; grid-template-columns: minmax(0, 1fr); }
.rk { display: grid; gap: 0 8px; align-items: center; font-size: var(--rkf, 10.5px); color: var(--val); text-align: left; width: 100%; border-radius: 2px; padding-right: 4px; }
.rk > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk .k { width: 8px; height: 8px; border-radius: 2px; }
.rk .n { text-align: right; }
.rk:hover { color: #fff; }
.rk.on { color: var(--amber); }
.rk.off { color: var(--faint); }

/* ── footer (the picker pill floats over its middle) ── */
.foot { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 6px; color: var(--faint); font-size: 11px; }
.foot .legend { display: flex; align-items: center; gap: 6px; max-width: 38%; }
.foot .sep { width: 10px; }
.foot .keys { display: flex; align-items: center; gap: 3px; }

/* ── hover card ── */
.card { position: fixed; z-index: 80; pointer-events: none; width: 300px; background: #161616; border: 1px solid #3a3a3a; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.7); padding: 10px 12px 10px; font-size: 11.5px; }
.card.in { animation: cardin 150ms ease-out; }
@keyframes cardin { from { opacity: 0; transform: translateY(var(--dy, 4px)); } to { opacity: 1; transform: none; } }
.card .ch-h { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; }
.card .ch-h i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.card .ch-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .ch-s { color: var(--dim); margin: 2px 0 8px; display: flex; gap: 6px; align-items: center; }
.card .big { font: 500 22px/1 var(--mono); color: #fff8ec; letter-spacing: -.02em; }
.card .big small { font-size: 13px; color: var(--dim); }
.card .kvs { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin-top: 8px; }
.card .kvs span:nth-child(odd) { color: var(--dim); }
.card .kvs .n { text-align: right; }
.card .cmp { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.card .cmp .n { font-size: 12.5px; }
.card .cmp .up { color: var(--up); }
.card .cmp .dn { color: var(--dn); }
.card .cmp .lab { color: var(--faint); display: block; margin-top: 1px; }
.card .note { color: var(--amber); margin-top: 6px; }
.card svg { display: block; width: 100%; height: 34px; margin-top: 8px; }
.card .spcap { color: var(--faint); font-size: 10.5px; margin-top: 2px; display: flex; justify-content: space-between; }
.card .brk { margin-top: 8px; display: grid; gap: 1px; }
.card .brow { display: grid; grid-template-columns: 9px minmax(0, 1fr) 78px 42px; gap: 0 7px; align-items: center; height: 16px; padding: 0 3px; border-radius: 2px; }
.card .brow > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .brow i { width: 8px; height: 8px; border-radius: 2px; }
.card .brow .n { text-align: right; font-family: var(--mono); }
.card .brow .sh { color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .card.in { animation: cardin-r 120ms ease-out; } @keyframes cardin-r { from { opacity: 0; } to { opacity: 1; } } }

.tip { position: fixed; z-index: 70; pointer-events: none; background: #161616; border: 1px solid var(--line2); color: var(--tx); padding: 6px 8px; font-size: 11px; line-height: 15px; white-space: nowrap; border-radius: 3px; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.tip .h { font-family: var(--sans); font-weight: 600; margin-bottom: 2px; display: flex; gap: 6px; align-items: center; }
.tip .row { display: flex; justify-content: space-between; gap: 14px; }
.tip .row span:first-child { color: var(--dim); font-family: var(--sans); }

@keyframes rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.grid.enter tbody { animation: rise 200ms ease-out; }
@media (prefers-reduced-motion: reduce) { .grid.enter tbody { animation: none; } }

.tip.wrap { white-space: normal; width: 300px; padding: 8px 10px; line-height: 16px; }
.tip.wrap .h { margin-bottom: 3px; }
/* the Status's mismatch lines, one disagreement per line */
.tip.wrap:has(.ln) { width: auto; }
.tip .ln { white-space: nowrap; }

/* ── the fold: a bar under the table that hides and shows the charts ── */
.foldbar { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 var(--gut); }
.foldbar::before { content: ""; position: absolute; left: var(--gut); right: var(--gut); top: 50%; height: 1px; background: #1e1e1e; }
.fold { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 20px; padding: 0 8px 0 10px; border-radius: 10px; border: 1px solid #2c2c2c; background: var(--page); color: var(--dim); font-size: 11.5px; }
.fold kbd { font-size: 9.5px; line-height: 13px; padding: 0 3px; }
.fold:hover { color: var(--tx); border-color: #4a4a4a; background: #111; }
.fold:hover .chev { color: var(--amber); }
.folded .fold .chev { transform: rotate(180deg); }
.folded .charts { display: none; }
body.folded { grid-template-rows: 48px minmax(0, 1fr) 26px 64px; }
.charts.in .cpane { animation: chartsin 200ms ease-out; }
@keyframes chartsin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .charts.in .cpane, .menu.in { animation: fadeonly 120ms ease-out; }
  .mbtn .chev, .fold .chev { transition: none; }
  @keyframes fadeonly { from { opacity: 0; } to { opacity: 1; } }
}
.foot .ksep { width: 12px; }
.rklist.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }

/* ── the slide: the fold bar is also a drag handle between table and charts ── */
.foldbar { cursor: row-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.foldbar:hover::before { background: #2c2c2c; }
.sliding, .sliding * { cursor: row-resize !important; }
.sliding .foldbar::before { background: var(--amber-d); }
.sliding .charts.in .cpane { animation: none; }
/* ── type, large step: windows at least 1900×1150 (app.js typeL); 13.5px numbers, 30px rows ── */
.type-l .grid { --rowh: 30px; }
.type-l .grid td { font-size: 13.5px; }
.type-l .grid thead tr.band th { height: 32px; }
.type-l .grid tr.band th.pband button, .type-l .grid tr.band th.pband .in { height: 31px; line-height: 31px; }
.type-l .grid tr.band th.pband b { font-size: 14.5px; }
.type-l .grid tr.band th.pband .cnt { font-size: 12.5px; }
.type-l .grid.three tr.banner th { height: 58px; padding-top: 7px; }
.type-l .grid tr.banner th .nm { font-size: 13px; line-height: 16px; min-height: 16px; }
.type-l .grid.three tr.banner th .trend { height: 22px; }
.type-l .grid tr.subh th:not(.ch) { height: 25px; font-size: 12px; }
.type-l .grid thead th.date { font-size: 13.5px; }
.type-l .dt .wd { width: 30px; font-size: 13px; }
.type-l .tagp, .type-l .tagt { font-size: 10.5px; line-height: 14px; }
.type-l .grid tfoot td { height: 32px; }
.type-l .grid tfoot tr.chg td { height: 35px; }
.type-l .grid tfoot td.date small { font-size: 11.5px; line-height: 13px; max-width: 146px; }