*,*::before,*::after{box-sizing:border-box}

:root{
  /* ═══ THEMEABLE ═══ surfaces, text polarity, the button gradient. These are
     the ONLY values that moved between the two reference themes (spec 04 §6),
     and a light-to-dark inversion moved all of them together. */
  --surface-page:#fff;
  --surface-chrome:#2e2e2e;
  --surface-chrome-rim:#292929;
  --surface-chrome-raised:#3c3c3c;
  --surface-colhead:#cde9a7;
  --surface-colhead-edge:#c3e595;
  --surface-badge:#989898;
  --text-body:#333;
  --text-title:#ccc;
  --text-muted:#777;
  --text-muted-chrome:#999;
  --text-oncolour:#fff;
  --link:#406d01;
  --link-hover:#3a3417;
  --danger:#94424a;
  --btn-top:#95c665;
  --btn-foot:#89b257;
  --btn-bottom:#7ba552;
  --depth-1:#e6f4d3;
  --depth-2:#def0c6;
  --depth-3:#d8eebd;
  --depth-4:#d1ebb3;
  --rule-major:#bcbcbc;
  --rule-minor:#ccc;
  /* OURS, not measured: the reference has no "partially known" state to
     colour, because it never admitted to one. We do, so it needs a hue that
     is neither the green of a good number nor the red of a failure. */
  --text-pending:#8a6a12;

  /* ═══ FIXED ═══ theme-invariant. The brand greens read identically in both
     reference themes, and every geometric value is byte-identical between
     them (spec 04 §6). A theme that restates anything below is a bug. */
  --green:#7aa054;
  --green-light:#abdb6c;
  --green-line:#6b944a;
  --green-shade:#638442;
  --green-chrome:#bce27f;

  /* Geometry. ONE 18px rhythm unit and ONE 5px inset unit carry the whole
     layout: page margin, column gutter, toolbar-to-content and pane-to-pane
     are all 18px; frame, toolbar inset and tab padding are all 5px
     (spec 04 §8). Nothing in the reference board uses any other spacing. */
  --unit:18px;
  --inset:5px;
  --frame-r:5px;
  --body-r:4px;
  --tab-r:4px;
  --band-r:3px;
  --toolbar-h:35px;
  --toolbar-inner-h:24px;
  --head-h:32px;
  --tab-h:23px;
  --tab-pad:5px;
  --tab-flare:4px;
  --body-pad:2px;
  --filter-h:19px;
  --capsule-h:13px;
  --capsule-pad:7px;
  --capsule-gap:3px;
  --band-h:20px;
  --row-h:19px;
  --row-lh:13px;
  --btn-h:16px;
  --nav-gap:10px;
  --plot-h:132px;

  /* Type. Spec 04 §7: base 10px and exactly four steps — 9 / 10 / 11 / 18.
     There is no 12, 14 or 16 tier anywhere in the reference, and there is NO
     letter-spacing anywhere either. The face itself is deliberately ours: the
     reference rendered in the host OS UI font of 2007, which is a fact about
     that machine, not a design decision worth reproducing. */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-title:18px;
  --fs-nav:11px;
  --fs-body:11px;
  --fs-ui:10px;
  --fs-small:9px;
}

/* ⛔ The background goes on html AS WELL as body. A short page does not make
   body fill the viewport, and the browser paints its OWN colour behind it —
   near-black on a dark-mode machine — so the page reads as dark below the fold
   while every rule is correct. color-scheme pins the UA's own widget palette
   to the one this design actually has. */
html{background:var(--surface-page);color-scheme:only light;-webkit-text-size-adjust:100%}
body{margin:0;padding:0 0 11px;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-ui);font-size:var(--fs-ui);line-height:1.3}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
li{list-style:none}
code{font-family:var(--font-mono);font-size:var(--fs-ui)}
/* ── global toolbar ────────────────────────────────────────────────────────
   Spec 04 §2: 35px tall, flat chrome, a 1px rim along its VERY TOP row and no
   bottom border at all — the bar simply ends and the page background resumes.
   It is inset 18px from each side (it is a bar on the page, not a full-bleed
   banner) and sits flush against the top of the document. */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--unit);
  margin:0 var(--unit);height:var(--toolbar-h);padding:0 var(--inset) 0 7px;
  background:var(--surface-chrome);border-top:1px solid var(--surface-chrome-rim);
  border-radius:2px}
.toolbar__brand{display:flex;align-items:center;gap:6px;flex:0 0 auto;
  color:var(--green-chrome);font-size:12px;font-weight:700;text-transform:uppercase}
.toolbar__leaf{width:14px;height:14px;flex:0 0 auto;background:var(--green-light);
  border-radius:50% 0 50% 50%;transform:rotate(-45deg)}

/* The nav sits on a raised panel inset 5px inside the bar (spec 04 §4).
   ⛔ NO ACTIVE STATE. Every pane name in the reference renders in the same
   green at the same weight — nothing underlined, boxed or brightened. The
   toolbar nav is a jump list, not a selector; active-ness lives one level
   down, in the pane tabs and the filter pills. Do not invent one here. */
.toolbar__nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  gap:var(--nav-gap);min-height:var(--toolbar-inner-h);padding:0 var(--inset);
  background:var(--surface-chrome-raised);border-radius:3px}
.toolbar__lead{color:var(--text-muted-chrome);font-size:var(--fs-ui)}
.toolbar__nav a{color:var(--green-chrome);font-size:var(--fs-nav);font-weight:700}
.toolbar__nav a:hover{color:var(--surface-page);text-decoration:none}

/* The 2007 glossy pill, rebuilt as a gradient rather than a sprite. Spec 04 §3
   measured a two-band step inside 16px: a flat top band, a darker lower band,
   then a 1px foot highlight. Stops are in px because the measurement was. */
.btnset{display:inline-flex;align-items:stretch;height:var(--btn-h);flex:0 0 auto;
  border-radius:4px;overflow:hidden;box-shadow:1px 1px 0 0 var(--surface-chrome-rim)}
.btnset a{display:inline-flex;align-items:center;padding:0 9px;
  color:var(--text-oncolour);font-size:var(--fs-ui);font-weight:700;white-space:nowrap;
  background:linear-gradient(var(--btn-top) 0 9px,var(--btn-bottom) 10px 14px,
    var(--btn-foot) 14px 15px,var(--btn-top) 15px 16px)}
.btnset a:hover{text-decoration:none;background:var(--btn-top)}
.btnset a+a{border-left:1px solid var(--green-line)}

/* OURS, not measured. The reference has no status line, so rather than invent
   a new band it borrows the 18px rhythm unit and sits on the page background
   between the toolbar and the board. */
.statusline{display:flex;flex-wrap:wrap;gap:var(--unit);margin:var(--unit) var(--unit) 0;
  color:var(--text-muted);font-size:var(--fs-small)}
.statusline b{color:var(--link);font-weight:700}

/* ── the board ─────────────────────────────────────────────────────────────
   Four columns, and MULTI-COLUMN rather than grid, because the reference is a
   masonry board: panes take their natural height and each column packs
   independently (spec 04 §9 names this as the "max" mode of the original).
   A grid would leave a ragged gap under every short pane. break-inside is what
   stops a pane being sliced across a column boundary. */
.board{margin:var(--unit);column-count:4;column-gap:var(--unit)}

/* ⛔ RESPONSIVE IS OURS AND IS NOT MEASURED. The reference is a desktop-only
   1680px capture and documents no breakpoint at all. Four columns hold above
   ~1100px and collapse from there, and a side gutter survives at every width. */
@media (max-width:1100px){.board{column-count:3}}
@media (max-width:860px){.board{column-count:2}}
@media (max-width:620px){.board{column-count:1}}

/* Page::shell's optional wrapper, for any screen that is not the board. It
   takes the same 18px page margin the toolbar and the board take, so a new
   screen inherits the rhythm instead of restating it. */
.wrap{margin:var(--unit)}

.credit{margin:0 var(--unit);padding-top:var(--unit);
  color:var(--text-muted);font-size:var(--fs-ui)}
.credit a{color:var(--text-muted);text-decoration:underline}
/* ── the pane frame ────────────────────────────────────────────────────────
   ⛔ TWO NESTED ROUNDED BOXES, NOT ONE BORDERED BOX. Spec 01 §3 names the trap
   explicitly: a 5px solid border plus a 5px border-radius renders a SQUARE inner
   corner, because a border follows the OUTER curve and leaves the inner edge
   flat. The reference has a 5px outer curve AND a separate 4px curve on the
   body inside it.
   HOW WE SOLVE IT: the frame carries no border at all. It is a filled box with
   PADDING, and the body is an independent element with its own radius sitting
   in that padding. Two boxes, two curves, and the inner corner is round
   because it belongs to a box that is actually rounded.

   The padding is asymmetric on purpose. Spec 01 §1 measured the frame as 5px
   on every side, but the INNERMOST pixel of the right and bottom edges is one
   step darker — a 1px authored bevel. We draw that bevel as a 1px inset rim on
   the body, so the padding on those two sides is 4px and 4 + 1 = the measured
   5. Left stays a full 5 because there is no rim there. */
.pane{display:inline-block;width:100%;margin:0 0 var(--unit);
  background:var(--surface-chrome);border-radius:var(--frame-r);
  padding:0 calc(var(--inset) - 1px) calc(var(--inset) - 1px) var(--inset);
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
/* ⛔ NO DROP SHADOW ANYWHERE. Spec 01 §6: the page background is identical to
   the pane body, and the 5px frame does 100% of the separation work. A shadow
   here is the single fastest way to make this read as a generic dashboard. */

/* ⛔ NO PANE SPANS THE BOARD, AND THERE IS DELIBERATELY NO RULE HERE ANY
   MORE. One used to live at this spot - display:block plus column-span:all -
   and Panes::all() still carries a wide flag, so this is where the reason it
   is no longer honoured has to be written down.
   WHAT column-span DOES IN A MULTI-COLUMN FLOW: a spanning element TERMINATES
   the current column run and opens a fresh one after itself. Three spanning
   panes therefore cut the board into five short runs, and a run holding only
   three panes cannot fill four columns - it piled into columns 1 and 2 and
   left columns 3 and 4 as dead space. Measured at a 1266px content width:
   Pages x=18, Referrers x=18, Searches x=330, and nothing at all at 642 or
   954.
   WHY UNIFORM WIDTH IS ALSO WHAT THE REFERENCE DOES, so this is not merely a
   workaround: spec 04 §11 measures the original's own Visits pane sitting in
   COLUMN 1 at the ordinary 393px pane width with its column chart intact -
   plot area x 24 to 404, about 380px. A chart demonstrably fits in one column
   there, and no pane in the reference spans the board. Every pane here is one
   column wide, and that is the whole layout rule.
   If a future feature genuinely needs a full-bleed row, it belongs OUTSIDE the
   multi-column flow as its own block above or below the board. A spanner
   inside the flow brings the dead space back with it. */

/* ── the pane header ───────────────────────────────────────────────────────
   ⛔ THE HEADER HAS NO BACKGROUND OF ITS OWN. It is not a bar sitting on the
   card — it is the top 32px of the card's own dark fill, which is why nothing
   divides them (spec 01 §10.2). Give it a background and you have invented a
   seam that the whole component exists to avoid.
   Title vertically centred in the full 32px band (spec 01 §5); tab strip
   pinned to the BOTTOM of it, leaving 9px of dark above (spec 02 §10.8). */
.pane__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--unit);height:var(--head-h);padding-left:6px;overflow:hidden}
.pane__title{align-self:center;flex:0 1 auto;min-width:0;overflow:hidden;
  color:var(--text-title);font-size:var(--fs-title);font-weight:300;line-height:1;
  white-space:nowrap;text-overflow:ellipsis}

/* ── the tab strip ─────────────────────────────────────────────────────────
   ⛔ THE STRIP IS RIGHT-ALIGNED WITH ZERO RIGHT PADDING (spec 02 §1), so the
   last tab's right edge lands exactly on the body's right edge. The first
   tab's offset is therefore an OUTPUT of the label widths — measured anywhere
   from 120px to 241px across the reference panes. Never hard-code it; that is
   what an auto left margin is for. */
.pane__tabs{display:flex;align-items:flex-end;flex:0 1 auto;min-width:0;
  height:var(--tab-h);margin-left:auto}
.pane__tab a{display:block;height:var(--tab-h);padding:5px var(--tab-pad) 0;
  color:var(--green-chrome);font-size:var(--fs-ui);font-weight:700;line-height:11px;
  white-space:nowrap}
/* Hover is OURS: no reference capture shows a hovered tab (spec 02 §4). Lift
   the label and leave the geometry alone, because any background change here
   would fight the selected tab. */
.pane__tab a:hover{color:var(--surface-page);text-decoration:none}

/* ⭐⭐ THE NOTCH — the one effect this whole component exists to produce.
   Spec 02 §2: scan one pixel down through the selected tab and you read dark,
   then body colour, carrying on through to the body. No border on any edge, no rule
   under the strip, no shadow, no hairline, no tone change at the boundary. The
   dark bar's bottom edge simply does not exist across the tab's width — the
   tab is a hole punched through the bar and filled with the body's own colour.
   ⛔ THE FILL IS THE BODY TOKEN, never a literal white. In the reference's own
   dark theme that fill is the dark page colour, so the rule is "the selected
   tab takes the body background", not "the selected tab is white". Written as
   a hardcoded #fff this effect survives exactly until someone adds a theme. */
.pane__tab--on{position:relative}
.pane__tab--on a{background:var(--surface-page);color:var(--surface-chrome);
  border-radius:var(--tab-r) var(--tab-r) 0 0}
.pane__tab--on a:hover{color:var(--surface-chrome)}

/* The fillet. Spec 02 §2 measures a ~4px convex curve where the dark bar
   terminates against the tab, so the junction reads as a smooth fillet rather
   than a mechanical notch. It is explicitly a "nice", not a "must".
   Built as a 4px square of BODY colour with a quarter-disc masked out of the
   outward corner, so the dark shows through the curve. Mask, not gradient:
   interpolating a var() colour to a transparent stop runs through transparent-black
   and leaves a grey fringe, and a fringe at this boundary is the seam we just
   spent the rule above erasing. */
.pane__tab--on::before,.pane__tab--on::after{content:"";position:absolute;bottom:0;
  width:var(--tab-flare);height:var(--tab-flare);background:var(--surface-page);
  pointer-events:none}
.pane__tab--on::before{left:calc(var(--tab-flare) * -1);
  -webkit-mask:radial-gradient(circle var(--tab-flare) at 0 0,transparent 96%,#000 100%);
  mask:radial-gradient(circle var(--tab-flare) at 0 0,transparent 96%,#000 100%)}
.pane__tab--on::after{right:calc(var(--tab-flare) * -1);
  -webkit-mask:radial-gradient(circle var(--tab-flare) at 100% 0,transparent 96%,#000 100%);
  mask:radial-gradient(circle var(--tab-flare) at 100% 0,transparent 96%,#000 100%)}
/* When the selected tab is the LAST one it is flush with the frame's inner
   right edge, so there is no dark on that flank to round away — a fillet there
   would cut a notch out of the frame instead. */
.pane--tab-last .pane__tab--on::after{display:none}

/* ── the pane body ─────────────────────────────────────────────────────────
   ⛔ THE BODY BACKGROUND IS THE PAGE SURFACE TOKEN — pure white in the base
   theme, and identical to the page behind it (spec 01 §2 and §7). Any tint
   here is the operator's complaint that the card background is not white.
   ⛔ PADDING IS 2px. Not 8, not 12. The pane is dense on purpose; breathing
   room comes out of the 19px row pitch, never out of pane padding (spec 01 §4).
   That 2px is also the unconditional gutter under the tab strip (spec 02 §8):
   it opens a body-coloured band right across the card, which is what makes the
   tab look like it is CARRYING the panel rather than sitting on top of it. */
.pane__body{background:var(--surface-page);border-radius:var(--body-r);
  padding:var(--body-pad);box-shadow:inset -1px -1px 0 0 var(--surface-chrome-rim)}
/* The body's top-right corner is rounded EXCEPT where a selected last tab
   covers it — exactly what spec 01 §3 found when it could only measure that
   corner on panes whose last tab was inactive. */
.pane--tab-last .pane__body{border-top-right-radius:0}
/* ── filter pills ──────────────────────────────────────────────────────────
   Spec 03 §2 and §4: LEFT-aligned inside the body, 13px tall, flat brand
   green, no border, full capsule, ~7px side padding, 3px gaps. Unselected has
   no box at all — plain muted text.
   The row is a 19px block sitting in the body's 2px top gutter, which is the
   framing spec 02 §8 argues for: the gutter is unconditional and the filter
   row is optional, so a pane WITHOUT pills needs no special case and
   everything below it still lines up. */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--capsule-gap);
  min-height:var(--filter-h);padding:1px 2px 5px}
.filters a{display:inline-flex;align-items:center;height:var(--capsule-h);
  padding:0 var(--capsule-pad);border-radius:999px;
  color:var(--text-muted);font-size:var(--fs-ui)}
.filters a:hover{color:var(--link);text-decoration:none}
.filters .on a{background:var(--green);color:var(--text-oncolour)}
.filters .on a:hover{color:var(--text-oncolour)}

/* ── chart axis labels ─────────────────────────────────────────────────────
   ⛔ AN AXIS IS NOT A FILTER, AND CONFLATING THEM IS A REAL BUG WE SHIPPED.
   Spec 03 §1: only four panes of the reference have filter pills. The
   "4 weeks ago … This Week" strip under the feed chart sits on the chart
   canvas and is the x-AXIS LABEL ROW — its highlighted member gets a plain
   grey box, the identical treatment given to the Midnight/Noon marks under the
   visits chart. None of it is clickable.
   Rendering that row as green capsules makes non-interactive labels look like
   controls, so the axis gets its own component: grey, squared, 2px radius —
   deliberately nothing like a capsule. */
.axis{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--capsule-gap);padding:2px 2px 4px;
  color:var(--text-muted-chrome);font-size:var(--fs-ui)}
.axis li{white-space:nowrap}
.axis .mark{display:inline-flex;align-items:center;height:var(--capsule-h);padding:0 5px;
  border-radius:2px;background:var(--surface-badge);color:var(--text-oncolour)}

/* ── the column-header band and the rows ───────────────────────────────────
   Spec 01 §10.5: a pale green band inset inside the frame, 20px plus a 1px
   closing rule, TOP corners rounded ~3px and bottom corners square — the rule
   runs flat to both ends. The 2px inset on each side is the body's own
   padding, so the band needs none of its own.
   border-collapse must be separate or the radius on the end cells is dropped. */
.grid{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-body)}
.grid th{height:var(--band-h);padding:0 6px;text-align:left;
  background:var(--surface-colhead);border-bottom:1px solid var(--surface-colhead-edge);
  color:var(--surface-chrome-rim);font-size:var(--fs-ui);font-weight:700}
.grid th:first-child{border-top-left-radius:var(--band-r)}
.grid th:last-child{border-top-right-radius:var(--band-r)}

/* ⛔ NO SEPARATOR, NO ZEBRA, NO RULE ON DATA ROWS. Spec 03 §5 ran a 1px strip
   down an empty gutter through the whole row stack and it came back unbroken
   body colour — 142px in one pane, 123px in another. A hairline or a stripe
   would have shown. Rows are plain surface at a 19px pitch (3 + 13 + 3). */
.grid td{padding:3px 6px;border:0;background:none;vertical-align:top;
  line-height:var(--row-lh)}
/* Row hover is OURS: no reference capture shows a hovered row (spec 03 §5), so
   it takes the lightest step of the nested-depth ramp rather than inventing a
   grey the palette does not contain. */
.grid tbody tr:hover td{background:var(--depth-1)}

/* ⛔ THE COUNT COLUMN IS ON THE LEFT, right-aligned, one type step smaller
   than the row text, and otherwise undistinguished — no colour change, no
   bold, no background, no rule (spec 03 §6). Getting this backwards is the
   most visible way to make a rebuild read as generic.
   Its width is not a constant: in the reference the count column's right edge
   lines up to the pixel with its own right-aligned header word, i.e. the
   header band is literally the column ruler. A 1% width plus nowrap reproduces
   that — the column shrinks to whichever of the two is wider. */
.grid .count{width:1%;text-align:right;white-space:nowrap;font-size:var(--fs-ui);
  font-variant-numeric:tabular-nums}
.grid .tail{width:1%;text-align:right;white-space:nowrap;font-size:var(--fs-ui);
  font-variant-numeric:tabular-nums}
.grid th.count,.grid th.tail{color:var(--surface-chrome-rim)}
.grid .ctl{width:1%;padding-left:0;padding-right:0;text-align:center}
.grid .ctl a{color:var(--danger);font-size:var(--fs-body);line-height:1}

/* The only rows that stripe are expanded children (spec 03 §5), and the tints
   are the nested-depth ramp rather than a grey zebra. */
.grid .child td{background:var(--depth-1)}
.grid .child.odd td{background:var(--depth-2)}

/* ⛔ A LABEL HAS TO BE ABLE TO BREAK OR THE TABLE SETS THE PANE WIDTH. A
   table cannot lay out narrower than its own min-content, so a single
   unbreakable token - newsite.cloudpropeller.com in the Agents pane, a site
   key in Sites - would push the grid past the 281px a pane column gives it and
   put a horizontal scrollbar on the whole page. This matters now that Agents
   renders its three columns in one column rather than across the board.
   overflow-wrap:anywhere is the form that actually lowers min-content; the
   word-break form does not, which is why it would not help here. It only
   breaks a word that genuinely does not fit, so nothing moves at a width where
   the label already fitted. */
.grid .label,.grid .link{overflow-wrap:anywhere}
.grid .label{color:var(--text-body)}
.grid .link{color:var(--link)}
.grid .sub{display:block;color:var(--text-muted);font-size:var(--fs-small);
  line-height:12px}
.grid .insig .label,.grid .insig .tail{color:var(--text-muted)}
.grid .yes{color:var(--green);font-weight:700}
.grid .no{color:var(--text-muted);font-weight:700}
.grid .wait{color:var(--text-pending);font-weight:700}

/* A solid disclosure triangle, 3x6px, sitting 6px clear of the label
   (spec 03 §9). Built out of borders so it scales with the token rather than
   depending on a glyph the font may not carry. */
.exp{display:inline-block;width:0;height:0;margin-right:6px;vertical-align:1px;
  border-top:3px solid transparent;border-bottom:3px solid transparent;
  border-left:4px solid var(--text-body)}
/* The per-row source marker: a 9px framed rectangle, hard-edged (spec 03 §10c). */
.chip{display:inline-block;width:9px;height:9px;margin-left:4px;vertical-align:-1px;
  background:var(--text-body);border:2px solid var(--rule-minor)}

.empty{padding:6px;color:var(--text-muted);font-size:var(--fs-body)}
.flag{color:var(--text-pending)}
.note{padding:6px;color:var(--text-muted);font-size:var(--fs-small);line-height:1.5}
.note b{color:var(--text-body)}

/* ── headline figures ──────────────────────────────────────────────────────
   OURS. The reference has no figure row, so it takes the type scale rather
   than inventing a size: the value is the 18px title step and the key is the
   9px muted step. */
/* ⛔ THIS ROW HAS TO SURVIVE AT ONE COLUMN WIDTH. A pane column is 294px
   outer at a 1266px content width, which leaves 281px of content - four tiles
   will not sit in a row there, and the flex version (a 90px basis, wrapping)
   packed three onto the first line and stranded the fourth.
   auto-fit settles it by arithmetic instead of by breakpoint: with a 140px
   track floor the grid resolves to 2 columns inside a pane column, 2 at the
   three- and two-column board widths, and opens to 4 only when a pane is
   genuinely wide, i.e. the single-column board below 620px.
   THE TYPE DOES NOT SHRINK. Spec 04 §7 found exactly four sizes in the whole
   design - 9 / 10 / 11 / 18 - so the row reflows rather than inventing a
   fifth step. min(140px,100%) stops the track overflowing a container that is
   narrower than the floor itself, and min-width:0 plus a breakable value mean
   an unusually long number cannot push the pane wider than its column. */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
.fig{min-width:0;padding:6px}
.fig__v{display:block;color:var(--surface-chrome);font-size:var(--fs-title);
  font-weight:300;line-height:1.1;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.fig__k{display:block;margin-top:2px;color:var(--text-muted);font-size:var(--fs-small)}
.fig--pending .fig__v{color:var(--text-pending)}

/* ── the chart ─────────────────────────────────────────────────────────────
   Two stacked series in the brand greens. Spec 04 §11: the columns are
   separated by a single 1px line rather than by a gap, and the horizontal
   gridlines sit on a 26px pitch.
   ⛔ The gridlines go on the PLOT, not on the chart wrapper — the wrapper has
   padding, so a background positioned against its box would sit a couple of
   pixels below the baseline the columns actually stand on. */
.chart{padding:6px 2px 2px}
.chart__plot{display:flex;align-items:flex-end;height:var(--plot-h);
  background-image:repeating-linear-gradient(to top,var(--rule-minor) 0 1px,
    transparent 1px 26px)}
.chart__col{flex:1 1 0;min-height:1px;background:var(--green);
  border-left:1px solid var(--green-line);
  display:flex;align-items:flex-end}
.chart__col:first-child{border-left:0}
.chart__part{width:100%;background:var(--green-light);
  border-top:1px solid var(--green-line)}
.legend{padding:0 2px 4px;color:var(--text-muted);font-size:var(--fs-small)}
.legend i{display:inline-block;width:9px;height:9px;margin-right:3px;vertical-align:-1px}
.legend .s-total{background:var(--green)}
.legend .s-unique{background:var(--green-light)}
.legend em{color:var(--green-shade);font-style:normal;font-weight:700}

/* ── sign-in ───────────────────────────────────────────────────────────────
   The same frame, so the first screen of the product states the design system
   rather than a bespoke login card. */
.signin{display:block;max-width:300px;margin:14vh auto}
.signin .pane__head{justify-content:flex-start}
.signin label{display:block;margin:8px 4px 2px;color:var(--text-muted);
  font-size:var(--fs-ui)}
.signin input{width:100%;height:20px;padding:0 5px;background:var(--surface-page);
  border:1px solid var(--rule-minor);border-radius:3px;
  color:var(--text-body);font-family:var(--font-ui);font-size:var(--fs-body)}
.signin input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.signin button{width:100%;height:var(--btn-h);margin-top:var(--unit);border:0;
  border-radius:4px;cursor:pointer;
  color:var(--text-oncolour);font-family:var(--font-ui);font-size:var(--fs-ui);
  font-weight:700;
  background:linear-gradient(var(--btn-top) 0 9px,var(--btn-bottom) 10px 14px,
    var(--btn-foot) 14px 15px,var(--btn-top) 15px 16px)}
.signin button:hover{background:var(--btn-top)}
.signin .err{margin-top:8px;padding:5px;border-radius:3px;background:var(--depth-1);
  color:var(--danger);font-size:var(--fs-ui)}
.signin__body{padding:6px}

/* chart column heights — see Theme::steps() for why these are classes */
.h-0{height:0%}
.h-1{height:1%}
.h-2{height:2%}
.h-3{height:3%}
.h-4{height:4%}
.h-5{height:5%}
.h-6{height:6%}
.h-7{height:7%}
.h-8{height:8%}
.h-9{height:9%}
.h-10{height:10%}
.h-11{height:11%}
.h-12{height:12%}
.h-13{height:13%}
.h-14{height:14%}
.h-15{height:15%}
.h-16{height:16%}
.h-17{height:17%}
.h-18{height:18%}
.h-19{height:19%}
.h-20{height:20%}
.h-21{height:21%}
.h-22{height:22%}
.h-23{height:23%}
.h-24{height:24%}
.h-25{height:25%}
.h-26{height:26%}
.h-27{height:27%}
.h-28{height:28%}
.h-29{height:29%}
.h-30{height:30%}
.h-31{height:31%}
.h-32{height:32%}
.h-33{height:33%}
.h-34{height:34%}
.h-35{height:35%}
.h-36{height:36%}
.h-37{height:37%}
.h-38{height:38%}
.h-39{height:39%}
.h-40{height:40%}
.h-41{height:41%}
.h-42{height:42%}
.h-43{height:43%}
.h-44{height:44%}
.h-45{height:45%}
.h-46{height:46%}
.h-47{height:47%}
.h-48{height:48%}
.h-49{height:49%}
.h-50{height:50%}
.h-51{height:51%}
.h-52{height:52%}
.h-53{height:53%}
.h-54{height:54%}
.h-55{height:55%}
.h-56{height:56%}
.h-57{height:57%}
.h-58{height:58%}
.h-59{height:59%}
.h-60{height:60%}
.h-61{height:61%}
.h-62{height:62%}
.h-63{height:63%}
.h-64{height:64%}
.h-65{height:65%}
.h-66{height:66%}
.h-67{height:67%}
.h-68{height:68%}
.h-69{height:69%}
.h-70{height:70%}
.h-71{height:71%}
.h-72{height:72%}
.h-73{height:73%}
.h-74{height:74%}
.h-75{height:75%}
.h-76{height:76%}
.h-77{height:77%}
.h-78{height:78%}
.h-79{height:79%}
.h-80{height:80%}
.h-81{height:81%}
.h-82{height:82%}
.h-83{height:83%}
.h-84{height:84%}
.h-85{height:85%}
.h-86{height:86%}
.h-87{height:87%}
.h-88{height:88%}
.h-89{height:89%}
.h-90{height:90%}
.h-91{height:91%}
.h-92{height:92%}
.h-93{height:93%}
.h-94{height:94%}
.h-95{height:95%}
.h-96{height:96%}
.h-97{height:97%}
.h-98{height:98%}
.h-99{height:99%}
.h-100{height:100%}