/* ============================================================ THE THEME LAYER
   The site's new visual language, shipped as its own sheet.

   WHY A SECOND STYLESHEET.  The live sheet (style.css) is 165KB and 178
   tokens of accumulated, working rules across 18 templates.  Rewriting it
   in one go would put every page at risk for what is really a
   presentation lift.  So the new language ships BESIDE the old one: a
   page that has been ported links this file, and a page that has not is
   untouched.  The port is therefore reversible one page at a time, which
   is the only way a live site can be redesigned without a flag day.

   HOW IT IS SCOPED.  Every rule here is scoped to `body.ui-v2`.  A page
   that has not been ported does not link this file at all, and if it did,
   the scope would stop every rule below from reaching it.  Within a
   ported page the legacy rules still apply wherever this layer says
   nothing -- the layer is ADDITIVE, so a page can be ported a section at
   a time rather than all at once.

   THE LANGUAGE.  Four rules, and every screen obeys them:

     1. ONE DOMINANT NUMBER PER VIEW.  The page opens with a single
        enormous figure -- the forecast, the rate, the count.  Everything
        else is quiet by comparison.  The reference's "premium" feeling
        comes from one number being large and everything else being
        small, not from ornament.

     2. COLOUR IS CONTENT, NOT CHROME.  The accent is spent on the one
        thing the page is about, and on nothing else.  Chrome is ink on
        near-black.  Two saturated surfaces on a screen is a mistake.

     3. SEPARATION BY SURFACE, NOT BY BORDER.  Cards are flat, with a
        soft shadow and a hairline inset.  Inside a card, rows are
        separated by a hairline rule and nothing else.

     4. TYPE CARRIES THE HIERARCHY.  Four sizes, one scale.  A caption is
        small and quiet; a figure is large and tabular.  No borders, no
        boxes, no badges doing the work type should do.

   The palette is NOT redefined here.  --bg, --surface, --accent, --violet
   and the rest are the live tokens, so the three palettes (Signal / Met
   Desk / Mono) and both themes keep working, and the ported page cannot
   drift away from the site's brand.
   ============================================================ */

/* ------------------------------------------------------------------ tokens
   Only the tokens the new language needs that the live sheet does not
   already declare.  Everything else -- the surfaces, the ink, the accent
   family -- is inherited from style.css.

   `--line` IS SCOPED TO THE PORTED PAGES, and not by accident: the live
   sheet already uses the name in `.login-input`, where it is an UNDEFINED
   variable (so the border never draws).  Declaring it globally would
   quietly give the login input a border it has never had.

   The rest are the prototype's own tokens, in the root, where the
   prototype has them. */
:root {
  --line-soft: color-mix(in srgb, var(--border) 58%, transparent);
  --ink-4: color-mix(in srgb, var(--muted) 66%, transparent);
  --accent-ink: color-mix(in srgb, var(--bg) 90%, #000);

  /* The page's radii.  The live sheet has a 4px radius, which is right
     for the old language of hairline rows and is too tight for the new
     language of surfaces. */
  --radius-card: 16px;
  --radius-ctl: 10px;
  --radius-pill: 999px;
}

body.ui-v2 {
  /* A hairline: the rule between two rows.  Softer than a border, so it
     separates without drawing. */
  --line: var(--border);
}

/* ====================================================== THE SHARED CHROME

   The header belongs to the site, not to any one page, so these rules are
   NOT scoped to `body.ui-v2`.  A ported page and an unported one must wear
   the same header, or the site reads as two products.

   THE IDEA, taken from the reference: the navigation is ONE GROUP, not a
   row of loose links.  The pages are cells in a single capsule, and the
   page you are on is a filled pill inside it.  Everything to the right of
   the brand is then a small set of rounded controls, and nothing in the
   header competes with the page for attention.

   What is kept from the live site: the arrangement the operator chose (the
   ☰ first, then the three pages a reader moves between constantly), the
   dark canvas, the orange accent, the logo tile and the wordmark.  What
   changes is the SHAPE: capsules instead of boxes, one grouped nav, and a
   filled active cell.

   The header also follows the page's column.  The dashboard's column is
   wider than the rest of the site's, so the header's inset follows it
   rather than the other way round -- a header whose content does not line
   up with the content under it reads as two unrelated things stacked. */
:root {
  --site-col: 1120px;
}
body.ui-v2 {
  --site-col: 1240px;
}

@media (min-width: 721px) {
  .topbar {
    padding-left: max(18px, calc((100% - var(--site-col)) / 2 + 20px));
    padding-right: max(18px, calc((100% - var(--site-col)) / 2 + 20px));
  }
}

/* ------------------------------------------------------------------ brand
   The reference's brand is an icon tile and a wordmark, and ours already
   is.  The tile is given the reference's softer corner so it reads as one
   object with the word rather than a badge beside it. */
.brand {
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

/* -------------------------------------------------------------- the nav
   ONE capsule.  The nav-more button is its first cell and the three
   inline pages follow it, separated by a hairline, exactly as the
   operator arranged them on 2026-10-09.

   DESKTOP ONLY, and that is not a preference: on a phone the live sheet
   hides `.nav` entirely and the drawer takes over.  A media query adds no
   specificity, so a `.nav { display: inline-flex }` written here would
   beat the query that hides it -- and the desktop nav would appear on
   top of the drawer's own toggle. */
@media (min-width: 721px) {
  .nav {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: 16px;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 0.5px var(--border);
  }
  .nav-group {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  /* The hairline between the menu button and the pages. */
  .nav-group::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 1px;
    background: var(--border);
  }
  .nav a {
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--muted);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .nav a:hover {
    color: var(--text);
    background: var(--surface-2);
  }
  /* The page you are on: a filled pill.  In the reference it is ink on
     white; here the page is near-black, so the pill is ink on near-black
     -- the same inversion, and the same contrast, in both themes.

     BOTH MARKERS COUNT.  The live site marks the current page two ways:
     the `.active` class that `initShell()` adds, and the
     `aria-current="page"` that the markup carries.  The class is the one a
     reader can SEE, and /predict -- a static page with no initShell()
     call -- only ever had the attribute, so on that page no nav item
     looked selected at all.  The attribute is the one the markup
     guarantees, so both are honoured. */
  .nav a.active,
  .nav a.active:hover,
  .nav a[aria-current="page"],
  .nav a[aria-current="page"]:hover {
    color: var(--surface);
    background: var(--text);
    font-weight: 600;
  }
  /* The menu button, when the current page is one of the pages behind
     it.  The secondary pages live behind the ☰, so this is the only
     signal that says "you are inside this group". */
  .nav-more-btn.active {
    color: var(--text);
    background: var(--surface-3);
  }
  /* The menu button, as the capsule's first cell. */
  .nav-more-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .nav-more-btn:hover {
    color: var(--text);
    background: var(--surface-2);
  }
  .nav-more-btn[aria-expanded="true"] {
    color: var(--text);
    background: var(--surface-3);
  }
  /* The dropdown, which hangs below the capsule. */
  .nav-more-menu {
    left: 0;
    top: calc(100% + 12px);
    min-width: 186px;
    padding: 6px;
    border-radius: 12px;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 0.5px var(--border-strong), 0 18px 40px rgba(0, 0, 0, 0.5);
  }
  .nav .nav-more-menu a {
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-soft);
    white-space: nowrap;
  }
  .nav .nav-more-menu a:hover {
    color: var(--text);
    background: var(--surface-3);
  }
}

/* --------------------------------------------------------- the right side
   A small set of rounded controls: one accent call-out, one search, one
   readout, two settings and the account. */
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The Edge Finder stays the accent -- it is the one thing in the header
   that is a call to action, and the reference's header spends exactly one
   colour on the same job. */
.edge-finder-btn {
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 42%, var(--border));
  color: var(--accent);
  font-size: 12px;
  font-weight: 550;
}

/* The search: a capsule, like the reference's notifications pill. */
.topbar-search {
  width: 186px;
  flex: 0 1 186px;
}
.topbar-search input {
  border-radius: 999px;
  padding: 7px 30px 7px 32px;
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px var(--border);
}
.topbar-search::before {
  left: 12px;
}

/* The clock is a readout, not a control, so it gets no box: a bare
   monospace time in the margin of the header, like the reference's quiet
   right-hand column. */
.clock {
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 0 2px;
}

/* The two settings are round, the way the reference's avatar is. */
#display-btn,
[data-theme-btn] {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* The account: the reference's avatar and name, which is also where the
   session lives.  A circle and a word is the whole thing. */
.nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--border);
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.nav-auth:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.nav-auth.has-avatar {
  padding: 3px 13px 3px 3px;
}
.nav-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 11px var(--mono);
}
.nav-auth-name {
  white-space: nowrap;
}

/* The phone header.  The nav is hidden there and the drawer takes over, so
   the row is the brand, the drawer's toggle, the controls and the search --
   and the search needs a row of its own, which is the fix for a search box
   that used to run off the side of the screen. */
@media (max-width: 720px) {
  .edge-finder-btn {
    padding: 6px 10px;
  }
  .nav-drawer-toggle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 0.5px var(--border);
    color: var(--text-soft);
    font-size: 14px;
  }

}

/* ================================================================ the footer

   The last thing on the page, and it should be the quietest.  The
   reference's footer is one line: the name on the left, the pages on the
   right.  Ours was three stacked blocks -- the brand, a boxed support
   panel, then the links -- which made the end of every page busier than
   the middle of it.

   THE FOOTER NOW LIVES IN THE PAGE'S COLUMN, like the prototype's, rather
   than running the full width of the screen under a centred column: the
   rule that separates it from the page should be the width of the page.
   The reference's own footer content sits 30px inside its column (a
   narrower inner box); this one is aligned with the content above it
   instead, which is the tidier of the two and the same rule the header
   follows. */
.site-foot {
  margin-top: 34px;
}
body.ui-v2 .site-foot {
  max-width: var(--site-col, 1180px);
  margin: 34px auto 0;
  padding: 0 20px 40px;
}
.site-foot-inner {
  max-width: var(--site-col, 1180px);
  margin: 0 auto;
  padding: 26px 20px 40px;
  display: flex;
  flex-direction: column;
  /* The brand and the pages each take a line of their own, and each is
     the width of the column -- the prototype's geometry. */
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px 28px;
}
body.ui-v2 .site-foot-inner {
  /* The reference's footer content sits 30px inside its column: a narrower
     inner box, centred.  This one is the same. */
  max-width: 1180px;
  padding: 26px 20px 40px;
  gap: 16px;
}
.site-foot-inner .foot-brand {
  order: 1;
}
/* The pages sit under the brand, both at the left.  They cannot share the
   brand's line -- the brand's sentence and the eleven links together are
   1300px against a 1240px column, and they never will be, because the
   column is the same on every page -- so the nav is a block of its own,
   and a right-aligned one under a left-aligned brand reads as a
   diagonal nobody meant. */
.site-foot-inner .foot-nav {
  order: 2;
}
/* The support block takes a line of its own, under the brand and the
   pages. */
.site-foot-inner > [data-donate-slot] {
  order: 3;
  flex: 1 0 100%;
}

/* The support line: a sentence and an address, not a panel. */
.foot-support {
  align-items: baseline;
  gap: 6px 14px;
}
.support-note {
  font-size: 12px;
  color: var(--muted);
}
.support-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.06em;
}
/* The address loses its box: it was the loudest thing in the footer,
   which is the wrong place for the least important sentence on the
   page.  It stays legible -- monospace, one step up from the muted text
   -- because it is the thing a reader who wants to support actually
   copies. */
.support-chip {
  padding: 0;
  background: transparent;
  box-shadow: none;
  gap: 8px;
}
.support-addr {
  font-size: 11px;
  color: var(--text-soft);
}
.support-copy {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--muted);
}
.support-copy:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* A page that carries the prototype's footer carries NOTHING else in it:
   no support block and no social badge.  The badge would otherwise be
   left where the markup put it -- the fixed bubble at the foot of the
   screen -- which the prototype does not have either. */
body.no-support .x-link {
  display: none;
}

/* =========================================================== the page shell
   The dashboard's own frame: the status bar at the top, the slabs below
   it, and the two-column split that carries the report card beside the
   rail. */

body.ui-v2 main {
  /* The page is WIDER than the live 1120px, and it has to be: the board's
     card grid was measured at five 200px cards plus four 20px gaps in a
     1080px container, and a slab's own 24px padding eats into that.  At
     1120px the grid dropped to four cards a row and the short row left a
     hole on the right -- the exact raggedness the card measurements exist
     to prevent.  1240px keeps five cards a row with room to spare, and
     still shows a sixth only on a very wide screen.

     The reference's own column was 1280px; this is the same idea, sized
     for a page that carries a record grid rather than a card grid. */
  max-width: 1240px;
  /* The prototype's page column has no padding above its title: the
     title's own margin sets the page down.  The live sheet padded the
     column as well, so the title sat 18px lower than the prototype's. */
  padding-top: 0;
}

/* A station page starts with a short server-rendered summary and then
   hydrates a multi-thousand-pixel dashboard into #station-root.  Without a
   stable shell the insertion moved main and the footer on every load (measured
   CLS 0.83 mobile; main grew from 517px to 4084px).

   flow-root contains the summary's top margin so main itself cannot move, and
   min-height keeps the footer below the fold while the live view is pending.
   The svh unit follows the small viewport on phones, so the shell does not
   change height as the address bar hides. */
body.ui-v2.station-page main,
body.ui-v2.station-page #station-root {
  display: flow-root;
  min-height: 100vh;
  min-height: 100svh;
}

/* The station page serves a sentence summary for crawlers and no-JS readers.
   A sighted JavaScript visitor should not read that sentence and then watch it
   turn into a dashboard.  The inline head script adds html.js before paint, so
   the summary stays in the document (and in the accessibility tree) but is
   visually clipped, while the neutral loading shell below takes its place. */
html.js body.ui-v2.station-page .ssr-forecast {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.ui-v2.station-page .station-loading {
  display: none;
}
html.js body.ui-v2.station-page .station-loading {
  display: block;
}
/* The separate share affordance arrives after its own API call and is then
   replaced by the dashboard.  Keep it out of the loading view so it cannot
   flash a second block of station text over the skeleton. */
html.js body.ui-v2.station-page #station-root[aria-busy="true"] #station-share {
  display: none;
}

/* The shell mirrors the masthead and focal card's first screen, so the
   dashboard arrives where the skeleton was rather than in a different place. */
body.ui-v2.station-page .station-loading-masthead {
  margin: 34px 0 26px;
}
body.ui-v2.station-page .station-loading-title {
  width: min(280px, 62%);
  height: 43px;
}
body.ui-v2.station-page .station-loading-note {
  width: min(380px, 80%);
  height: 14px;
  margin-top: 10px;
}
body.ui-v2.station-page .station-loading-focal {
  min-height: 330px;
  padding: 26px 28px 30px;
  border-radius: var(--radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%,
    var(--surface) 74%);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow);
}
body.ui-v2.station-page .station-loading-label {
  width: 140px;
  height: 12px;
}
body.ui-v2.station-page .station-loading-number {
  width: min(240px, 60%);
  height: 76px;
  margin-top: 22px;
}
body.ui-v2.station-page .station-loading-line {
  width: min(420px, 76%);
  height: 14px;
  margin-top: 18px;
}
body.ui-v2.station-page .station-loading-line.short {
  width: min(260px, 50%);
  margin-top: 8px;
}
body.ui-v2.station-page .station-loading-cells {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
body.ui-v2.station-page .station-loading-cell {
  height: 150px;
}

/* The first swap is a short fade so the placeholder does not blink into a
   multi-thousand-pixel dashboard.  Later renders (unit/theme changes) are
   immediate; station.js removes both classes after the first swap. */
body.ui-v2.station-page #station-root {
  transition: opacity 160ms var(--ease);
}
body.ui-v2.station-page #station-root.is-leaving {
  opacity: 0;
}
body.ui-v2.station-page #station-root.is-entering {
  animation: station-view-in 220ms var(--ease) both;
}
@keyframes station-view-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  body.ui-v2.station-page .station-loading-focal {
    min-height: 290px;
  }
  body.ui-v2.station-page .station-loading-cells {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.ui-v2.station-page #station-root,
  body.ui-v2.station-page #station-root.is-entering {
    transition: none;
    animation: none;
  }
}

/* The slabs.  The live dashboard is a full-bleed 12-column grid of
   hairline-separated cells; the new language is a column of surfaces.
   The legacy classes stay (other pages and the tests address them) and
   the layout is re-pointed here. */
body.ui-v2 .dash-grid {
  display: block;
  margin-top: 0;
  border-top: 0;
}
body.ui-v2 .dash-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}
body.ui-v2 .dash-cell {
  padding: 22px 24px 24px;
  border-bottom: 0;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  min-width: 0;
}
/* The legacy cells are placed by a 12-column grid.  In the new layout they
   are placed by a two-column split and a rail, so every grid placement has
   to be released -- a stray `grid-column: 8 / span 5` inside a one-column
   rail would open five implicit columns and tear the page apart. */
body.ui-v2 .dash-pickability,
body.ui-v2 .dash-hero,
body.ui-v2 .dash-verdicts,
body.ui-v2 .dash-status,
body.ui-v2 .dash-scorecards,
body.ui-v2 .dash-meta {
  grid-column: auto;
}
/* The board keeps its air underneath: the report card below it is a
   different question, and the break between them has to be visible. */
body.ui-v2 .dash-pickability {
  padding-bottom: 28px;
}
body.ui-v2 .dash-hero {
  padding-right: 24px;
  border-right: 0;
}
body.ui-v2 .dash-rail {
  display: grid;
  gap: 0;
}
body.ui-v2 .dash-rail .rail-sec {
  display: block;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
body.ui-v2 .dash-rail .rail-sec:first-child {
  padding-top: 0;
  border-top: 0;
}
body.ui-v2 .dash-rail .rail-sec:last-child {
  padding-bottom: 0;
}
/* The rail's own head: a title and a quiet note on one line. */
body.ui-v2 .rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
body.ui-v2 .rail-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-soft);
}
body.ui-v2 .rail-head .note {
  font-size: 11.5px;
  color: var(--muted);
}

/* The section head of a slab: a title, a note, and the tools. */
body.ui-v2 .cell-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px;
}
body.ui-v2 .cell-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
body.ui-v2 .cell-head .cell-note {
  font-size: 11.5px;
  color: var(--muted);
}
body.ui-v2 .cell-head .filters {
  margin-left: auto;
}

/* ================================================================ the focal
   The one saturated surface on the page: a single enormous number, the
   sentence that says what it measures, and the accent spent once.  The
   page's headline answers "what is the single most useful thing I can
   read here", and it must not change when a filter is clicked -- a
   headline that flickers is a headline nobody reads. */
body.ui-v2 .focal {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 26px 28px 28px;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 15%, var(--surface)) 0%,
    var(--surface) 78%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--border)),
              var(--shadow);
  color: var(--text);
}
body.ui-v2 .focal-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
body.ui-v2 .focal-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
body.ui-v2 .focal-code {
  font: 600 12.5px var(--mono);
  color: var(--muted);
}
body.ui-v2 .focal-num {
  font-size: 84px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
  margin: 22px 0 0;
  color: var(--accent);
}
body.ui-v2 .focal-num sup {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: 6px;
  color: var(--text-soft);
}
body.ui-v2 .focal-where {
  font-size: 16px;
  margin-top: 10px;
  color: var(--text);
}
body.ui-v2 .focal-where b {
  font-weight: 700;
}
body.ui-v2 .focal-band {
  font-size: 14px;
  margin-top: 7px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
body.ui-v2 .focal-band .muted {
  color: var(--muted);
}
body.ui-v2 .focal-stars {
  font-size: 17px;
  letter-spacing: 3px;
  margin-top: 14px;
}
body.ui-v2 .focal-stars .pk-stars {
  font-size: 17px;
  letter-spacing: 3px;
}
body.ui-v2 .focal-foot {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--muted);
}
body.ui-v2 .focal-foot .l2 {
  margin-top: 3px;
  opacity: 0.8;
}

/* ============================================================ the figure row
   The numbers a panel leads with, above the detail.  Four cells, one
   type scale: a small quiet label, a large tabular value, a line of
   context. */
body.ui-v2 .figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
body.ui-v2 .figs-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
body.ui-v2 .fig-k {
  font-size: 10.5px;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
body.ui-v2 .fig-v {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
body.ui-v2 .fig-v sup {
  font-size: 15px;
  font-weight: 600;
  vertical-align: super;
  letter-spacing: 0;
}
body.ui-v2 .fig-s {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.42;
}
body.ui-v2 .fig-s b {
  color: var(--text-soft);
  font-weight: 600;
}
body.ui-v2 .fig a {
  color: inherit;
}
/* The verdict rail reuses the site's own stat card, because the wrapper
   shape (.stat-link > .stat) is load-bearing in the stylesheet and in the
   tests that bind it.  So the card is re-cut here into the new language's
   figure: a small quiet label, a large tabular value, a line of context --
   and the 4px dot before the label goes, because in this language the
   label is already the quietest thing on the card. */
body.ui-v2 .figs > .stat-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
body.ui-v2 .figs .stat {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
body.ui-v2 .figs .stat:hover {
  box-shadow: none;
}
body.ui-v2 .figs .stat .label {
  font-size: 10.5px;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
body.ui-v2 .figs .stat .label::before {
  content: none;
}
body.ui-v2 .figs .stat .value {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
body.ui-v2 .figs .stat .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.42;
}
body.ui-v2 .figs > .stat-link + .stat-link > .stat {
  box-shadow: none;
  padding-top: 0;
}
body.ui-v2 .figs > .stat-link:hover .stat .value {
  color: var(--accent);
}

/* ============================================================== the records
   A row is a record: a code, a name, then one number per column.  The
   board and the report card are the same component with different
   columns, and each declares its own template. */
body.ui-v2 .rec {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 128px 92px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
body.ui-v2 .rec-code {
  font: 600 12.5px var(--mono);
  color: var(--text-soft);
}
body.ui-v2 .rec-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.ui-v2 .rec-name .muted {
  color: var(--muted);
  font-size: 12px;
  margin-left: 6px;
}
body.ui-v2 .rec-num {
  font: 500 12.5px var(--mono);
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
body.ui-v2 .rec-num b {
  color: var(--text-soft);
  font-weight: 600;
}
body.ui-v2 .rec-verdict {
  text-align: right;
  white-space: nowrap;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
body.ui-v2 .rec-verdict.hit {
  color: var(--success);
}
body.ui-v2 .rec-verdict.miss {
  color: var(--danger);
}
body.ui-v2 .rec a {
  color: inherit;
}
body.ui-v2 .rec:hover .rec-name {
  color: var(--accent-2);
}

/* ------------------------------------------------- the board, as records
   The board's own columns.  The rank leads, because a ranking whose
   order you cannot see is not a ranking; then the airport, the stars
   those stars mean, the checkpoint and rate they come from, the action,
   and the evidence.

   The star column is left-aligned on a fixed track so the glyphs stack
   into a scannable column -- which is the whole reason the board is a
   list and not a grid. */
body.ui-v2 .r-board {
  grid-template-columns: 34px 58px minmax(0, 1fr) 78px 190px 130px 192px;
  grid-template-areas: "rank code name stars best act ev";
  gap: 14px;
  padding: 9px 0;
}
body.ui-v2 .r-board .rec-rank {
  grid-area: rank;
}
body.ui-v2 .r-board .rec-code {
  grid-area: code;
}
body.ui-v2 .r-board .rec-name {
  grid-area: name;
}
body.ui-v2 .r-board .rec-stars {
  grid-area: stars;
}
body.ui-v2 .r-board .rec-best {
  grid-area: best;
}
body.ui-v2 .r-board .rec-act {
  grid-area: act;
}
body.ui-v2 .r-board .rec-ev {
  grid-area: ev;
}
body.ui-v2 .r-board .rec-rank {
  font: 500 12px var(--mono);
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* The airport the focal card names.  Its rank is the one number on the
   page that is also the page's headline, so it is spent in the accent. */
body.ui-v2 .r-board.is-pick .rec-rank {
  color: var(--accent);
  font-weight: 700;
}
body.ui-v2 .r-board .rec-stars {
  font-size: 14px;
  letter-spacing: 1.5px;
}
body.ui-v2 .r-board .rec-best {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
body.ui-v2 .r-board .rec-best b {
  color: var(--text-soft);
  font-weight: 600;
}
body.ui-v2 .r-board .rec-act {
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
}
body.ui-v2 .r-board .rec-act.easiest,
body.ui-v2 .r-roster .rec-act.easiest { color: var(--success); }
body.ui-v2 .r-board .rec-act.guessable,
body.ui-v2 .r-roster .rec-act.guessable { color: var(--accent); }
body.ui-v2 .r-board .rec-act.engine,
body.ui-v2 .r-roster .rec-act.engine { color: var(--accent-2); }
body.ui-v2 .r-board .rec-act.hard,
body.ui-v2 .r-roster .rec-act.hard { color: var(--muted); }
body.ui-v2 .r-board .rec-ev {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The view switch: rows or tiles.  A segmented control in the panel's
   head, the same shape as the nav's active cell. */
/* The chips are the prototype's: a pill, not a rounded rectangle. */
body.ui-v2 .chip {
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 0.5px var(--line);
  background: transparent;
  font: 500 12.5px var(--font);
}
body.ui-v2 .chip.on,
body.ui-v2 .chip.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

body.ui-v2 .seg-ctl {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
body.ui-v2 .seg-ctl button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 5px 12px;
  font: 500 12px var(--font);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
body.ui-v2 .seg-ctl button:hover {
  color: var(--text);
}
body.ui-v2 .seg-ctl button.on {
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
}

/* The disclosure that opens the full list.  The legacy stylesheet gives it a
   bordered box; in the new language it is a quiet line with a hairline over
   it, and the list beneath it is the records. */
body.ui-v2 .recap-details {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  margin-top: 20px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
body.ui-v2 .recap-details summary {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
body.ui-v2 .recap-details summary:hover {
  color: var(--text-soft);
}
body.ui-v2 .rec-list {
  margin-top: 6px;
}

/* ================================================== the tape (the blotter)
   Yesterday's errors, drawn.  One bar per airport: up when the forecast
   ran warm, down when it ran cold, and the height is the size of the
   miss.  The point is that thirty numbers become a SHAPE -- one cluster
   warm, one cluster cold, one long bar worth reading -- instead of a
   table a reader has to scan.

   The scale is +-5 degrees, which is where the live data's errors sit;
   a bar that runs past the top is one that beat the scale. */
body.ui-v2 .tape {
  position: relative;
  height: 64px;
  margin-top: 22px;
}
body.ui-v2 .tape-mid {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border);
}
body.ui-v2 .tape-bar {
  position: absolute;
  border-radius: 2px;
  min-width: 2px;
}
body.ui-v2 .tape-bar.cold {
  background: var(--violet);
}
body.ui-v2 .tape-bar.warm {
  background: var(--accent-2);
}
body.ui-v2 .tape-bar.flat {
  background: var(--surface-3);
}
body.ui-v2 .tape-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--muted);
  font-family: var(--mono);
  margin-top: 7px;
}
body.ui-v2 .tape-key {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
}
body.ui-v2 .tape-key i {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  margin-right: 7px;
  vertical-align: middle;
}

/* ================================================================ the spark
   The engine's own 30-day score, as a quiet line under the verdicts. */
body.ui-v2 .spark {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: 16px;
}
body.ui-v2 .volume {
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--mono);
  margin-top: 10px;
}
body.ui-v2 .spark-cap {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
  margin-top: 6px;
}

/* ============================================================ the region row
   The scorecard reports, as rows rather than a seven-column table: the
   region, a bar against the worst region's MAE, then the two numbers. */
body.ui-v2 .rrow {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 72px 48px 72px 48px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
body.ui-v2 .rrow-head {
  font-size: 10.5px;
  color: var(--muted);
  border-top: 0;
  padding-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
body.ui-v2 .rrow-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.ui-v2 .rrow:hover .rrow-name {
  color: var(--accent-2);
}
body.ui-v2 .rrow-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}
body.ui-v2 .rrow-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
body.ui-v2 .rrow-num {
  font: 500 12px var(--mono);
  text-align: right;
  color: var(--text-soft);
}
body.ui-v2 .rrow-num.dim {
  color: var(--muted);
  font-weight: 400;
}
body.ui-v2 .rrow-h-num {
  text-align: right;
}

/* ================================================================= the pills
   Small facts, in a row.  A pill here is a label, not a button, so it
   carries no border and no fill. */
body.ui-v2 .pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 12.5px;
  color: var(--muted);
}
body.ui-v2 .pills b {
  color: var(--text-soft);
  font-weight: 600;
}
body.ui-v2 .pills a {
  color: var(--accent);
}

/* ============================================================== the board
   The "Where to look" cards.  The grid stays a grid of tiles -- a
   visitor is CHOOSING an airport, and a choice reads better as tiles
   than as 37 lines to scan -- but the tiles are re-cut in the new
   language: a flatter surface, a tighter radius, and the star filter
   promoted from pills to a plain inline tab strip.

   The measurements the tile grid was tuned against (a fixed 200px
   basis, a 20px gap, an 11.5px evidence line that cannot wrap) are
   deliberately left alone: they are load-bearing, and the tile's
   measurements have not been retaken against a new width. */
body.ui-v2 .pk-filter {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 4px 0;
  font-size: 13px;
  gap: 8px;
}
body.ui-v2 .pk-filter:hover {
  box-shadow: none;
  color: var(--text);
}
body.ui-v2 .pk-filter.active {
  color: var(--text);
}
/* The star bands are coloured, so the colour cannot also be the "you are
   here" signal -- the selected tab needs a mark that is not a colour.
   An underline is that mark, and it survives the Mono palette, where the
   bands are all grey. */
body.ui-v2 .pk-filter.active {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--accent);
}
body.ui-v2 .pk-filter.active .pk-count {
  color: var(--text);
  font-weight: 600;
}
/* The star filter is a SCALE, so it is drawn as one: each band's glyphs
   carry that band's colour whether or not it is selected.  The legacy
   sheet coloured only the active band, which meant the scale was
   invisible until you chose from it. */
body.ui-v2 .pk-filter-stars {
  font-size: 14px;
  letter-spacing: 1px;
}
body.ui-v2 .pk-filter-stars[data-stars="5"] { color: var(--success); }
body.ui-v2 .pk-filter-stars[data-stars="4"] { color: var(--accent-2); }
body.ui-v2 .pk-filter-stars[data-stars="3"] { color: var(--accent); }
body.ui-v2 .pk-filter-stars[data-stars="2"] { color: var(--warn); }
body.ui-v2 .pk-filter-stars[data-stars="1"] { color: var(--danger); }
body.ui-v2 .pk-count {
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: 11.5px;
}
body.ui-v2 .pk-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
body.ui-v2 .pk-intro {
  font-size: 13.5px;
  color: var(--text-soft);
  margin: 0 0 14px;
  max-width: 68ch;
}
body.ui-v2 .pk-fresh {
  font-size: 11.5px;
  color: var(--muted);
  margin: 0 0 10px;
}
body.ui-v2 .pk-card {
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--line-soft);
  padding: 13px 14px 14px;
}
body.ui-v2 .pk-card:hover {
  box-shadow: inset 0 0 0 1px var(--border-strong);
  background: var(--surface-3);
}
body.ui-v2 .pk-card-code {
  font-size: 15px;
  color: var(--text);
}
body.ui-v2 .pk-card-name {
  color: var(--muted);
}
body.ui-v2 .pk-stars {
  font-size: 13px;
  letter-spacing: 1.5px;
}

/* ============================================================== the roster

   The stations page, in the prototype's language.  Its rules are the
   prototype's LAYER, copied rather than re-invented: the head's tools, the
   filter strip, the records, the tiles, the table and the map.

   It is a PAGE LAYER, so it is scoped to the ported page; the header and
   the footer are the shared chrome and live above it, unscoped. */
body.ui-v2 .roster-panel {
  margin-top: 20px;
}

/* The head's tools: the view switch and the search, in the slot the
   dashboard gives its window chips. */
body.ui-v2 .head-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: center;
}
body.ui-v2 .head-tools .search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  padding: 6px 10px;
  color: var(--ink-4);
}
body.ui-v2 .head-tools .search input {
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font: 400 13px var(--font);
  width: 132px;
  padding: 0;
}

/* One strip of filters, the tab grammar -- plain words, no boxes.  The
   dashboard's star bands sit in exactly this strip. */
body.ui-v2 .roster-controls {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
body.ui-v2 .roster-controls .tabs {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 16px 0 4px;
}
body.ui-v2 .roster-controls .tab {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-4);
  font: 500 12.5px var(--font);
}
body.ui-v2 .roster-controls .tab .count {
  font: 500 11.5px var(--mono);
  color: var(--muted);
}
body.ui-v2 .roster-controls .tab:hover {
  color: var(--text-soft);
}
body.ui-v2 .roster-controls .tab.on {
  color: var(--text);
}
body.ui-v2 .roster-controls .tab.on .count {
  color: var(--text-soft);
}
body.ui-v2 .roster-controls .tabs-sep {
  margin: 0 14px;
  align-self: center;
}

/* The records.  One row per airport, and the columns are the ones a
   reader compares down the page: the airport, its hit rate, today's call
   against what the day actually did, the verdict, and the error. */
body.ui-v2 .r-roster {
  grid-template-columns: 58px minmax(0, 1fr) 64px 232px 104px 176px 34px;
}
body.ui-v2 .r-roster .rec-hit {
  font: 500 12px var(--mono);
  color: var(--text-soft);
  text-align: right;
}
body.ui-v2 .r-roster .rec-call {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
body.ui-v2 .r-roster .rec-call b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-soft);
}
body.ui-v2 .r-roster:hover .rec-name {
  color: var(--accent-2);
}
body.ui-v2 .r-roster .name {
  color: var(--text-soft);
}
body.ui-v2 .r-roster .r-region {
  color: var(--muted);
  font-size: 12px;
  margin-left: 6px;
}
body.ui-v2 .r-roster .r-hit {
  font: 500 12px var(--mono);
  color: var(--text-soft);
  text-align: right;
}
body.ui-v2 .r-roster .r-call {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
body.ui-v2 .r-roster .r-call b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-soft);
}
body.ui-v2 .r-roster:hover .name {
  color: var(--accent-2);
}
body.ui-v2 .fresh-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* The tiles. */
body.ui-v2 .r-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  padding-top: 16px;
}
body.ui-v2 .r-card {
  position: relative;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 14px 16px;
}
body.ui-v2 .r-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.ui-v2 .r-card-top .code {
  font: 600 12.5px var(--mono);
  color: var(--text);
}
body.ui-v2 .r-card-region {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
}
body.ui-v2 .r-card .cmp-add {
  margin-left: 8px;
}
body.ui-v2 .r-card-name {
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  line-height: 1.35;
}
body.ui-v2 .r-card-num {
  font: 600 20px var(--mono);
  margin-top: 10px;
}
body.ui-v2 .r-card-num .dim {
  font-size: 12px;
  font-weight: 400;
}
body.ui-v2 .r-card-foot {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* The table and the map. */
body.ui-v2 .table-wrap {
  overflow-x: auto;
}
body.ui-v2 table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption, 12.5px);
}
body.ui-v2 .table-wrap table.data th {
  text-align: left;
  font-size: 11px;
  font-weight: 550;
  color: var(--muted);
  padding: 9px 12px;
  border-bottom: 0.5px solid var(--border);
}
body.ui-v2 .table-wrap table.data td {
  padding: 9px 12px;
  border-bottom: 0.5px solid var(--border);
}
body.ui-v2 table.data .num {
  text-align: right;
}
body.ui-v2 table.data .nums {
  font-weight: 600;
}
body.ui-v2 table.data .muted {
  color: var(--muted);
}
body.ui-v2 table.data a.station-link {
  color: var(--text);
  font-weight: 600;
}
body.ui-v2 .map-wrap {
  padding-top: 16px;
}
body.ui-v2 .map-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The roster's focal card carries one more line than the dashboard's: the
   network's own average hit rate and error, which is the only place a
   reader sees the whole fleet measured at once. */
body.ui-v2 .focal-avg {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* ======================================================== the station page

   The station page, in the prototype's own words: its focal card, its
   Today panel, its two-column chart rows, its three-column summary row
   and its checkpoint log.

   The class names are the layer's (the dashboard's .focal, .dash-cell,
   .cell-head, .figs, .fig) and the VALUES are the prototype's, copied
   rather than re-invented -- including the focal card's own numbers,
   which the prototype's station page sets a shade tighter than the
   dashboard's copy of the same card.

   Everything here is scoped to #station-root, because the live sheet
   already has a .stat (a card), a .tab (a pill) and a .masthead (a
   ruled strip), and this page wants the prototype's versions of all
   three. */

body.ui-v2 #station-root .focal {
  padding: 26px 28px 30px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%,
    var(--surface) 74%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, var(--border)),
    var(--shadow);
}
/* The prototype's focal card is a column with its foot on the floor, so
   the card is the same height whatever it says. */
body.ui-v2 #station-root .focal:has(.focal-num) {
  display: flex;
  flex-direction: column;
  min-height: 330px;
}
body.ui-v2 #station-root .focal:has(.focal-num) .focal-foot {
  margin-top: auto;
  padding-top: 20px;
}
body.ui-v2 #station-root .focal-num {
  font-size: 82px;
}
body.ui-v2 #station-root .focal-num sup {
  font-size: 24px;
  color: var(--muted);
}
body.ui-v2 #station-root .focal-where {
  font-size: 15px;
  margin-top: 8px;
}
body.ui-v2 #station-root .focal-band {
  font-size: 14.5px;
  margin-top: 6px;
}
body.ui-v2 #station-root .focal-avg {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
body.ui-v2 #station-root .focal-foot {
  margin-top: 20px;
  font-size: 12px;
}
body.ui-v2 #station-root .focal-foot .l2 {
  margin-top: 2px;
  opacity: .78;
}

/* The title block. */
body.ui-v2 #station-root .masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: 34px 0 26px;
  flex-wrap: wrap;
  padding: 0;
  border-bottom: 0;
}
body.ui-v2 #station-root .masthead h1 {
  font-size: 42px;
  margin: 0;
  letter-spacing: -.035em;
  font-weight: 600;
}
body.ui-v2 #station-root .masthead-note {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* The hero's checkpoint tabs: the prototype's plain tabs, in mono. */
body.ui-v2 #station-root .focal-top .tabs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
}
body.ui-v2 #station-root .focal-top .tab {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-4);
  font: 500 12px var(--mono);
}
body.ui-v2 #station-root .focal-top .tab:hover {
  color: var(--text-soft);
}
body.ui-v2 #station-root .focal-top .tab.on {
  color: var(--text);
}

/* The two-column and three-column rows. */
body.ui-v2 #station-root .grid-two {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
body.ui-v2 #station-root .grid-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* The probability columns. */
body.ui-v2 #station-root .prob-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 20px 0 4px;
}
body.ui-v2 #station-root .prob-head .pct {
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
body.ui-v2 #station-root .prob-head .like {
  font-size: 19px;
  font-weight: 600;
}
body.ui-v2 #station-root .prob-head .note {
  font-size: 12px;
  color: var(--ink-4);
  margin-left: 6px;
}
body.ui-v2 #station-root .plot {
  position: relative;
  margin-top: 14px;
}
body.ui-v2 #station-root .cols {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 190px;
  margin-left: 34px;
}
body.ui-v2 #station-root .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
body.ui-v2 #station-root .col .bar {
  border-radius: 10px 10px 0 0;
  position: relative;
}
body.ui-v2 #station-root .col.modal .bar {
  box-shadow: 0 0 0 1.5px var(--text);
}
body.ui-v2 #station-root .col .chip {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font: 700 10.5px/1 var(--mono);
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--text);
  color: var(--bg);
}
body.ui-v2 #station-root .col .lab {
  text-align: center;
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 9px;
  font-family: var(--mono);
}
body.ui-v2 #station-root .gl {
  position: absolute;
  left: 34px;
  right: 0;
  border-top: 1px solid var(--line-soft);
}
body.ui-v2 #station-root .gl span {
  position: absolute;
  right: calc(100% + 8px);
  top: -7px;
  color: var(--ink-4);
  font-size: 10.5px;
  font-family: var(--mono);
}

/* The chart legends. */
body.ui-v2 #station-root .legend {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px;
}
body.ui-v2 #station-root .legend i {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

/* The forecast-evolution rows. */
body.ui-v2 #station-root .evo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
}
body.ui-v2 #station-root .evo-row {
  display: grid;
  grid-template-columns: 60px 1fr 64px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
}
/* The evolution row the focal card is showing. */
body.ui-v2 #station-root .evo-row.on {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
body.ui-v2 #station-root .evo-row .h {
  color: var(--ink-4);
  font: 500 12.5px var(--mono);
}
body.ui-v2 #station-root .evo-row .v {
  font-weight: 600;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
body.ui-v2 #station-root .evo-row .d {
  text-align: right;
  color: var(--ink-4);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}

/* The about list. */
body.ui-v2 #station-root .about {
  font-size: 13.5px;
  margin: 0;
}
body.ui-v2 #station-root .about dt {
  color: var(--ink-4);
  font-size: 11px;
  margin-top: 14px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
body.ui-v2 #station-root .about dd {
  margin: 3px 0 0;
  color: var(--text-soft);
}

/* The two big numbers, and the tick strip.  The live sheet's .stat is a
   card; the prototype's is a bare figure. */
body.ui-v2 #station-root .stat {
  position: static;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
body.ui-v2 #station-root .stat:hover {
  box-shadow: none;
}
body.ui-v2 #station-root .stat .num {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -.035em;
  margin-top: 16px;
  font-variant-numeric: tabular-nums;
}
body.ui-v2 #station-root .stat .num sup {
  font-size: 18px;
  font-weight: 600;
  vertical-align: super;
}
body.ui-v2 #station-root .ticks {
  display: flex;
  gap: 3px;
  margin-top: 18px;
  height: 34px;
  align-items: flex-end;
}
body.ui-v2 #station-root .ticks i {
  flex: 1;
  border-radius: 2px;
  background: var(--success);
  height: 62%;
}
body.ui-v2 #station-root .ticks i.miss {
  background: var(--surface-3);
  height: 34%;
}

/* The regime card.  Its words and its icon are the live's; its type is
   the layer's. */
body.ui-v2 #station-root .regime-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.ui-v2 #station-root .regime-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
body.ui-v2 #station-root .regime-blurb {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}
body.ui-v2 #station-root .regime-headline {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  margin: 16px 0 0;
  max-width: 62ch;
}
body.ui-v2 #station-root .regime-note {
  font-size: 13px;
  line-height: 1.55;
  margin: 10px 0 0;
  max-width: 62ch;
}
body.ui-v2 #station-root .regime-foot {
  font-size: 12px;
  line-height: 1.55;
  margin: 12px 0 0;
  max-width: 62ch;
}

/* The quiet line under a panel. */
body.ui-v2 #station-root .strip {
  color: var(--ink-4);
  font-size: 11.5px;
  margin: 12px 0 0;
  font-family: var(--mono);
}

/* The checkpoint log folds.  It is the longest thing on the page --
   thirty issues -- and a reader who wants the number above it should not
   have to scroll past all of them to reach the next panel. */
body.ui-v2 #station-root .log-fold > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}
body.ui-v2 #station-root .log-fold > summary::-webkit-details-marker {
  display: none;
}
body.ui-v2 #station-root .log-fold > summary::after {
  content: "\25B8";
  position: absolute;
  right: 0;
  top: 1px;
  font-size: 11px;
  color: var(--ink-4);
  transition: transform 0.15s ease;
}
body.ui-v2 #station-root .log-fold[open] > summary::after {
  transform: rotate(90deg);
  color: var(--muted);
}

/* The fold's own line, and the day picker beside the log's title. */
body.ui-v2 #station-root .log-fold > .log-fold-note {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 12px 0 2px;
  font-size: 12px;
  color: var(--ink-4);
}
body.ui-v2 #station-root .log-fold > .log-fold-note::-webkit-details-marker {
  display: none;
}
body.ui-v2 #station-root .log-fold > .log-fold-note::after {
  content: "\25B8";
  position: absolute;
  right: 0;
  top: 12px;
  font-size: 11px;
  transition: transform 0.15s ease;
}
body.ui-v2 #station-root .log-fold[open] > .log-fold-note::after {
  transform: rotate(90deg);
  color: var(--muted);
}
body.ui-v2 #station-root .cell-head .filters .ctl {
  max-width: 220px;
}

/* The log's head row, so a row reads as a row and not as five numbers. */
body.ui-v2 #station-root .r-log-head {
  display: grid;
  grid-template-columns: 48px 88px 132px 108px 48px;
  justify-content: space-between;
  padding: 0 0 8px;
  border-top: 0;
  font: 500 10.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-4);
}

/* The date the issues below belong to, once per day. */
body.ui-v2 #station-root .r-log-date {
  font: 500 11px var(--mono);
  color: var(--ink-4);
  padding: 16px 0 6px;
  border-top: 0;
}

/* The checkpoint log wears the dashboard's record grammar, with the log's
   own columns.  One row per published issue. */
body.ui-v2 #station-root .r-log {
  grid-template-columns: 48px 88px 132px 108px 48px;
  justify-content: space-between;
  padding: 9px 0;
}
body.ui-v2 #station-root #checkpoint-log .r-log:first-child {
  border-top: 0;
}
body.ui-v2 #station-root .r-log .lg-c {
  font: 600 13px var(--mono);
  color: var(--text);
}
body.ui-v2 #station-root .r-log .lg-b {
  font: 500 12px var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
body.ui-v2 #station-root .r-log .lg-o {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
body.ui-v2 #station-root .r-log .lg-o b {
  font: 500 12px var(--mono);
  color: var(--text-soft);
}
body.ui-v2 #station-root .r-log .lg-m {
  font: 500 12px var(--mono);
  color: var(--ink-4);
  text-align: right;
  white-space: nowrap;
}
body.ui-v2 #station-root .r-log .lg-m.moved {
  color: var(--text-soft);
}
body.ui-v2 #station-root .r-log.on .code {
  color: var(--accent-2);
}

/* =========================================================== the type scale

   THE PROTOTYPE'S SCALE AND ITS BOXES, EXACTLY.

   These are the prototype's values, not an approximation of them, and
   they sit LAST among the layer's rules on purpose: the layer carries
   two sets of selectors for the same components, and the earlier set
   was the one winning -- which is why the cards on the live page had
   their own padding, their own shadow and their own type while the
   prototype's did not.

   The cards cast the shadow with the LIVE `--shadow`, exactly as the
   prototype does.  The layer used to carry a second, softer shadow of
   its own; that is the one thing that could never match, so it is
   gone. */
body.ui-v2 {
  font-size: 14px;
}

/* --- the title block ------------------------------------------------ */
body.ui-v2 .masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: 34px 0 26px;
  flex-wrap: wrap;
}
body.ui-v2 .masthead-main {
  /* The prototype's title block is a plain block: its two children are
     blocks and take the block's width.  As a flex column they shrink to
     their own text, and the note came out 190px wide where the
     prototype's is 259.  And it must not STRETCH: the live sheet gives
     it `flex: 1 1 auto`, which left the block 724px wide with its text
     hugging the left edge. */
  display: block;
  flex: 0 0 auto;
  min-width: 0;
}
body.ui-v2 .masthead-name {
  /* The prototype's title inherits the BODY stack.  The live sheet gives
     the title `var(--font-head)`, a different stack, and the two render
     the same word at different widths. */
  font-family: var(--font);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin: 0;
  color: var(--text);
}
body.ui-v2 .masthead-note {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  /* A <p> carries a default 1em bottom margin, which the prototype's
     rule zeroes; left alone it added 14px of nothing under the note. */
  margin: 8px 0 0;
}
body.ui-v2 .masthead-actions {
  gap: 12px;
}
body.ui-v2 .status-pill {
  padding: 7px 13px;
}
body.ui-v2 .ctl {
  /* The select keeps its arrow.  The live sheet hides it with
     `appearance: none` and no replacement, which leaves a control that
     does not look like a dropdown. */
  appearance: auto;
  padding: 8px 12px;
  border-radius: var(--radius-ctl);
}
body.ui-v2 #refresh-now {
  font-size: 11px;
  padding: 6px 11px;
}
body.ui-v2 .last-updated {
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 11.5px;
}

/* --- the focal card ------------------------------------------------- */
body.ui-v2 .focal {
  /* The prototype's focal card carries NO top margin -- the title's own
     margin sets the page down -- and the panel that follows it is 20px
     away.  On the live page the two boxes were touching: the card had a
     margin of its own and the grid below it had none, so the gap between
     them was zero. */
  margin-top: 0;
  padding: 26px 28px 30px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%,
    var(--surface) 74%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, var(--border)),
    var(--shadow);
}
body.ui-v2 .focal + .dash-grid {
  margin-top: 20px;
}
/* The focal card is a fixed height, with its foot on the floor of it, so
   the page's first line of type starts in the same place every day and
   the card does not breathe around the data it holds. */
body.ui-v2 .focal:has(.focal-num) {
  display: flex;
  flex-direction: column;
  min-height: 330px;
}
body.ui-v2 .focal:has(.focal-num) .focal-foot {
  margin-top: auto;
  padding-top: 20px;
}
body.ui-v2 .focal-num {
  font-size: 82px;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .92;
  font-variant-numeric: tabular-nums;
  margin: 22px 0 0;
  color: var(--accent);
}
body.ui-v2 .focal-num sup {
  font-size: 24px;
  font-weight: 600;
  vertical-align: super;
  margin-left: 5px;
  letter-spacing: 0;
  color: var(--muted);
}
body.ui-v2 .focal-where {
  font-size: 15px;
  margin-top: 8px;
  color: var(--text);
}
body.ui-v2 .focal-where b {
  font-weight: 700;
}
body.ui-v2 .focal-band {
  font-size: 14.5px;
  margin-top: 6px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
body.ui-v2 .focal-band .muted {
  color: var(--muted);
}
body.ui-v2 .focal-stars {
  font-size: 17px;
  letter-spacing: 3px;
}
body.ui-v2 .focal-foot {
  margin-top: 20px;
  font-size: 12px;
  color: var(--muted);
}
body.ui-v2 .focal-foot .l2 {
  margin-top: 2px;
  opacity: .78;
}
body.ui-v2 .focal-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
body.ui-v2 .focal-code {
  font: 600 12.5px var(--mono);
  color: var(--muted);
}

/* --- the slabs ------------------------------------------------------ */
body.ui-v2 .dash-cell {
  padding: 24px 26px 24px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
body.ui-v2 .cell-head {
  gap: 18px;
  padding-bottom: 15px;
  margin-bottom: 18px;
}
body.ui-v2 .cell-head h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}
body.ui-v2 .cell-head .cell-note {
  font-size: 11.5px;
  color: var(--ink-4);
}

/* --- the figures ---------------------------------------------------- */
body.ui-v2 .figs {
  gap: 26px;
  margin-top: 6px;
}
body.ui-v2 .fig-k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-4);
}
body.ui-v2 .fig-v {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -.035em;
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
body.ui-v2 .fig-v sup {
  font-size: 16px;
  font-weight: 600;
  vertical-align: super;
}
body.ui-v2 .fig-s {
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
}
/* The verdict rail reuses the site's own stat card, so its value is
   re-cut to the same scale as the figures beside it. */
body.ui-v2 .figs .stat .value {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -.035em;
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
body.ui-v2 .figs .stat .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
}

/* --- the records ---------------------------------------------------- */
body.ui-v2 .rec {
  padding: 12px 0;
  gap: 14px;
  font-size: 13.5px;
}
/* A grid item defaults to min-width:auto, which refuses to shrink below
   its content's min-content width.  A record's name is one line that
   ellipsises, so without this the LONGEST name sets the width of the
   whole table and the row runs off the edge of a phone. */
body.ui-v2 .rec > * {
  min-width: 0;
}
body.ui-v2 .r-board {
  padding: 12px 0;
}
body.ui-v2 .r-board .rec-code {
  font: 600 12.5px var(--mono);
  color: var(--text-soft);
}
body.ui-v2 .r-board .rec-stars {
  font-size: 13px;
  letter-spacing: 2px;
}
body.ui-v2 .r-board .rec-best {
  font-size: 12.5px;
  color: var(--muted);
}
body.ui-v2 .r-board .rec-best b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-soft);
}
body.ui-v2 .r-board .rec-act,
body.ui-v2 .r-roster .rec-act {
  font-size: 12px;
}
body.ui-v2 .r-board .rec-act.easiest { color: var(--success); }
body.ui-v2 .r-board .rec-act.guessable { color: var(--accent); }
body.ui-v2 .r-board .rec-act.engine { color: var(--accent-2); }
body.ui-v2 .r-board .rec-act.hard { color: var(--ink-4); }
body.ui-v2 .r-board .rec-ev,
body.ui-v2 .r-roster .rec-ev {
  font-size: 11.5px;
  color: var(--ink-4);
}

/* --- the board's note ------------------------------------------------
   The metadata moved BELOW the list, where the prototype has it: the
   reader meets the airports first and the explanation afterwards, instead
   of two lines of explanation in front of the thing being explained. */
body.ui-v2 .pk-fresh {
  margin: 16px 0 0;
  font-size: 11.5px;
}
/* --- the title on a phone --------------------------------------------
   The title is the largest thing on the page, and on a 375px phone that
   is the most expensive place to spend it: a 42px title and its note
   push the first forecast number almost a fifth of the way down the
   screen before anything has been said.  Thirty pixels keeps the
   character of the block at half the height. */
@media (max-width: 720px) {
  body.ui-v2 .masthead {
    align-items: flex-start;
    gap: 14px;
    margin: 18px 0 16px;
  }
  body.ui-v2 .masthead-name {
    font-size: 30px;
  }
  body.ui-v2 .masthead-note {
    font-size: 13px;
    margin-top: 4px;
  }
  body.ui-v2 .masthead-actions {
    width: 100%;
  }
}

/* ================================================================ responsive
   The board's tiles and the figure rows are the two places the new
   language needs to give way on a narrow screen.

   The topbar is fixed here too, and it is a real fix rather than a
   restyle.  On a phone the legacy sheet gives the search box `width:
   100%` of a topbar-right row that does not wrap, so the row's own width
   became the width of the search, and the row ran off the side of the
   screen -- the search, the clock and the right edge of every panel were
   all unreachable.  The search now takes a row of its own, and the row
   is allowed to wrap. */

/* The tablet band, 721-1100px, has the full row of content but not the room
   for every header control at full size: the row's fixed widths add up to
   1038px, so at 900 the auth button and the theme toggle sat past the right
   edge and could not be scrolled to.  The clock is a readout, not a control,
   so it goes first; the search narrows; and as the room runs out the two
   least essential items step aside rather than push the controls off the
   screen. */
@media (max-width: 1100px) {
  body.ui-v2 .clock {
    display: none;
  }
  body.ui-v2 .topbar-search {
    width: 120px;
    flex: 0 1 120px;
    min-width: 0;
  }
  /* At 120px the shortcut badge sits on top of the placeholder. */
  body.ui-v2 .topbar-search .search-key {
    display: none;
  }
}

@media (min-width: 721px) and (max-width: 880px) {
  body.ui-v2 .topbar-search {
    display: none;
  }
}

@media (min-width: 721px) and (max-width: 760px) {
  body.ui-v2 .edge-finder-btn {
    display: none;
  }
}

@media (max-width: 720px) {
  body.ui-v2 .topbar {
    flex-wrap: wrap;
    row-gap: 8px;
    height: auto;
    padding: 8px 12px;
  }
  body.ui-v2 .topbar-right {
    flex-wrap: wrap;
    row-gap: 6px;
    width: 100%;
    margin-left: 0;
  }
  body.ui-v2 .topbar-search {
    order: 9;
    flex: 1 1 100%;
    width: auto;
    min-width: 0;
  }
}
@media (max-width: 900px) {
  body.ui-v2 .dash-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  body.ui-v2 .figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.ui-v2 .rrow {
    grid-template-columns: 88px minmax(0, 1fr) 68px 44px 68px 44px;
  }
}

/* The board on a narrow screen: a record becomes TWO lines, because seven
   columns of numbers do not fit a phone and a record squeezed into one
   line is a record nobody can read.

   The line that is dropped is the evidence -- "how many points better than
   always saying the usual degree" -- which is the board's refinement
   rather than its answer; the airport, its stars, its rate and the action
   all stay.  The action moves UP to the first line, because it is the word
   the reader is looking for, and the stars drop to the second with the
   rate they belong to. */
@media (max-width: 720px) {
  body.ui-v2 .r-board {
    grid-template-columns: 20px 44px minmax(0, 1fr) 96px;
    grid-template-areas:
      "rank code name act"
      "rank code best stars";
    column-gap: 6px;
    row-gap: 3px;
    padding: 11px 0;
  }
  body.ui-v2 .r-board .rec-rank,
  body.ui-v2 .r-board .rec-code,
  body.ui-v2 .r-board .rec-name,
  body.ui-v2 .r-board .rec-act,
  body.ui-v2 .r-board .rec-stars {
    align-self: start;
  }
  body.ui-v2 .r-board .rec-ev {
    display: none;
  }
  /* The action and the rate are the two phrases that must not be cut, so
     they are a size smaller and the action is allowed to WRAP rather
     than run past the edge of a phone.  A row that overflows is a row the
     reader cannot finish. */
  body.ui-v2 .r-board .rec-act,
  body.ui-v2 .r-board .rec-best {
    font-size: 11.5px;
  }
  body.ui-v2 .r-board .rec-act {
    white-space: normal;
  }
  body.ui-v2 .r-board .rec-act,
  body.ui-v2 .r-board .rec-stars {
    text-align: right;
  }

  /* The roster's record has one more column than the board's -- the
     compare button -- so it needs its own cut: three lines, the code
     down the side, and the numbers on the right.  Seven columns across a
     375px screen is a row the reader cannot finish. */
  body.ui-v2 .r-roster {
    grid-template-columns: 44px minmax(0, 1fr) 58px 30px;
    grid-template-areas:
      "code name hit cmp"
      "code call act ."
      "code ev   .   .";
    column-gap: 10px;
    row-gap: 2px;
    padding: 12px 0;
  }
  body.ui-v2 .r-roster .rec-code { grid-area: code; align-self: start; }
  body.ui-v2 .r-roster .rec-name { grid-area: name; align-self: start; }
  body.ui-v2 .r-roster .rec-hit { grid-area: hit; align-self: start; text-align: right; }
  body.ui-v2 .r-roster .rec-call { grid-area: call; align-self: start; white-space: normal; }
  body.ui-v2 .r-roster .rec-act { grid-area: act; align-self: start; text-align: right; }
  body.ui-v2 .r-roster .rec-ev { grid-area: ev; align-self: start; }
  /* The region goes on a phone.  It shares the name's line, and the name
     is what a reader is looking for; the region is one tap away in the
     filter strip above. */
  body.ui-v2 .r-roster .r-region {
    display: none;
  }
  body.ui-v2 .r-roster .cmp-add {
    grid-area: cmp;
    align-self: start;
    justify-self: end;
    margin-left: 0;
  }

  /* The station's figures take the same cut as the dashboard's: two
     across, and the value a size smaller. */
  body.ui-v2 #station-root .stat-grid,
  body.ui-v2 #station-root .stat-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  body.ui-v2 #station-root .stat .value {
    font-size: 30px;
  }
  body.ui-v2 #station-root .sum-value {
    font-size: 58px;
  }
  body.ui-v2 #station-root .hero h1 {
    font-size: 34px;
  }
  body.ui-v2 #station-root .sum-panel {
    padding: 22px 20px 24px;
  }
  body.ui-v2 #station-root details.fold > summary {
    padding: 16px 18px 14px;
  }
  body.ui-v2 #station-root details.fold .panel-body,
  body.ui-v2 #station-root details.fold .stat-grid,
  body.ui-v2 #station-root details.fold > .section > .panel-body {
    padding: 0 18px 18px;
  }
  body.ui-v2 #station-root details.fold .panel-head {
    padding: 0 18px;
  }
  body.ui-v2 #station-root details.fold .table-wrap {
    margin: 0 18px 18px;
  }
}
@media (max-width: 560px) {
  body.ui-v2 .dash-cell {
    padding: 18px 16px 20px;
  }
  body.ui-v2 .focal {
    padding: 20px 18px 22px;
  }
  body.ui-v2 .focal-num {
    font-size: 64px;
  }
  body.ui-v2 .figs,
  body.ui-v2 .figs-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  body.ui-v2 .fig-v {
    font-size: 30px;
  }
  body.ui-v2 .rec:not(.r-board) {
    grid-template-columns: 52px minmax(0, 1fr) 104px;
  }
  body.ui-v2 .rec:not(.r-board) .rec-num {
    display: none;
  }
  /* The scorecard row keeps only what a phone can show: the region and
     the two errors.  The bar and the paired-sample counts go, because a
     row that cannot fit is a row that is cut off -- and a cut-off number
     is worse than no number. */
  body.ui-v2 .rrow {
    grid-template-columns: minmax(0, 1fr) 66px 66px;
    gap: 8px;
  }
  body.ui-v2 .rrow-bar,
  body.ui-v2 .rrow-pair,
  body.ui-v2 .rrow-h-bar,
  body.ui-v2 .rrow-h-pair {
    display: none;
  }
}

/* ====================================================== the station, small

   The station page's phone cut.  It goes last in the sheet because the
   layer's own rules are written after this file's responsive block, and
   a media query that loses a specificity tie to a later rule is a media
   query that does nothing. */
@media (max-width: 720px) {
  /* The station page on a phone: the columns stack, the title shrinks, and
     the checkpoint log keeps its columns and scrolls rather than running
     off the edge. */
  body.ui-v2 #station-root .masthead {
    margin: 22px 0 18px;
  }
  body.ui-v2 #station-root .masthead h1 {
    font-size: 30px;
  }
  body.ui-v2 #station-root .masthead-note {
    font-size: 13px;
  }
  body.ui-v2 #station-root .masthead-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  body.ui-v2 #station-root .masthead-actions .last-updated {
    order: -1;
  }
  body.ui-v2 #station-root .grid-two,
  body.ui-v2 #station-root .grid-three {
    grid-template-columns: minmax(0, 1fr);
  }
  body.ui-v2 #station-root #checkpoint-log {
    overflow-x: auto;
  }
  body.ui-v2 #station-root .r-log {
    grid-template-columns: 40px 70px minmax(0, 1fr) 78px 38px;
    column-gap: 8px;
  }
  /* A grid and a flex item both default to min-width:auto, which refuses to
     shrink below their content.  The log's rows are wider than a phone, so
     without this the panel grows to fit them and the page scrolls sideways. */
  body.ui-v2 #station-root .masthead-main,
  body.ui-v2 #station-root .dash-cell,
  body.ui-v2 #station-root .grid-two > *,
  body.ui-v2 #station-root .grid-three > * {
    min-width: 0;
    max-width: 100%;
  }
  body.ui-v2 #station-root .masthead-note {
    overflow-wrap: anywhere;
  }
}

/* ======================================================== THE PRO FUNNEL

   Two pages, one job: turn "I clicked a locked airport" into a sale.  They
   are the ONLY pages on the site a reader sees with their wallet out, so
   they carry the deck's language at its most deliberate.

   WHAT WAS WRONG WITH THE OLD ONES.  Both were a 680px column of 14px text
   on a black page: a heading, a paragraph, a nine-row table and a button,
   with the rest of the screen empty.  Nothing was shown -- only described
   -- and the only picture was a bar chart whose caption named the one bar
   the chart itself greys out.  A page that looks like a README does not
   sell a $12 product, whatever the copy says.

   THE FOUR RULES, APPLIED TO A CHECKOUT.  One dominant number (the
   airport's exact-hit rate), colour spent on the one thing being bought
   (the offer), separation by surface, and type carrying the hierarchy.
   The page opens like a product page: the airport on the left, the price
   on the right, both visible without scrolling.

   THE PRICE CARD IS THE ONLY SATURATED SURFACE.  Everything else is a
   quiet card, so the eye lands on the price and the button by
   construction, not by decoration. */

body.ui-v2.page-pro {
  min-height: 100vh;
  background:
    radial-gradient(920px 420px at 16% -12%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 68%),
    var(--bg);
}

/* --------------------------------------------------------------- the header
   The funnel keeps its own slim nav -- no clock, no menu, no script -- but
   it takes the deck's shape: the brand, and one capsule of quiet links. */
body.ui-v2.page-pro .funnel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 32px 0;
  font-size: 13px;
}

body.ui-v2.page-pro .funnel-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
}

body.ui-v2.page-pro .funnel-brand:hover {
  color: var(--text);
}

body.ui-v2.page-pro .funnel-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: block;
}

body.ui-v2.page-pro .funnel-links {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 1px 2px rgba(0, 0, 0, 0.18);
}

body.ui-v2.page-pro .funnel-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

body.ui-v2.page-pro .funnel-links a:hover {
  background: var(--surface-2);
  color: var(--text);
}

body.ui-v2.page-pro .funnel-back span {
  transition: transform var(--t-fast) var(--ease);
}

body.ui-v2.page-pro .funnel-back:hover span {
  transform: translateX(-2px);
}

/* ---------------------------------------------------------------- the shell */
body.ui-v2.page-pro .pro-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.ui-v2.page-pro .pro-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 46px 32px 88px;
}

body.ui-v2.page-pro .pro-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 22px;
  align-items: start;
}

body.ui-v2.page-pro .pro-card {
  min-width: 0;
  padding: 32px 34px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------- the airport
   One card, one number.  The code is the page's title at display size, and
   the rate is the only figure that gets to be enormous. */
body.ui-v2.page-pro .pro-lead {
  padding: 36px 38px 32px;
}

/* The identity on the left, the number on the right, sharing the card's
   width.  The alternative -- a 450px column of type in an 840px card --
   left half the hero empty, which reads as an unfinished page rather than
   as a quiet one. */
body.ui-v2.page-pro .pro-lead.has-figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  column-gap: 44px;
  align-items: end;
}

body.ui-v2.page-pro .pro-lead-id {
  min-width: 0;
}

body.ui-v2.page-pro .pro-lead.has-figure .pro-figure {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  text-align: right;
}

body.ui-v2.page-pro .pro-lead.has-figure .pro-figure-v {
  justify-content: flex-end;
}

body.ui-v2.page-pro .pro-lead.has-figure .pro-figure-s {
  margin-left: auto;
}

body.ui-v2.page-pro .pro-lead.has-figure .pro-figrow {
  grid-column: 1 / -1;
}

body.ui-v2.page-pro .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

body.ui-v2.page-pro .hero-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  animation: none;
}

body.ui-v2.page-pro .pro-code {
  margin: 20px 0 0;
  font-size: clamp(52px, 6.2vw, 84px);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

body.ui-v2.page-pro .pro-name {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-soft);
}

body.ui-v2.page-pro .pro-region {
  margin: 6px 0 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

body.ui-v2.page-pro .paywall-rating {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

body.ui-v2.page-pro .pro-stars {
  margin-right: 7px;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--accent);
  white-space: nowrap;
}

/* The one dominant number.  A 100px figure with a 11px label above it is
   the whole trick: the page has a subject, and the subject is not the
   product copy. */
body.ui-v2.page-pro .pro-figure {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

body.ui-v2.page-pro .pro-figure-v {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-top: 10px;
  font-size: clamp(64px, 7.6vw, 104px);
  line-height: 0.8;
  font-weight: 600;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

body.ui-v2.page-pro .pro-figure-v sup {
  margin-top: 0.12em;
  margin-left: 1px;
  font-size: 0.34em;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
}

body.ui-v2.page-pro .pro-figure-s {
  margin: 16px 0 0;
  max-width: 42ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

body.ui-v2.page-pro .pro-figrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

body.ui-v2.page-pro .pro-figrow .fig-v {
  font-size: 26px;
}

body.ui-v2.page-pro .pro-figrow .fig-k,
body.ui-v2.page-pro .pro-figure .fig-k {
  font-size: 11px;
}

/* --------------------------------------------------------------- the offer
   Sticky, because a reader who scrolls into the evidence should not have
   to scroll back to buy.  Accent-washed, because it is the one thing on
   the page that is for sale. */
body.ui-v2.page-pro .pro-offer-card {
  position: sticky;
  top: 22px;
  padding: 26px 26px 24px;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 13%, var(--surface)) 0%,
    var(--surface) 60%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, var(--border)),
    var(--shadow);
}

body.ui-v2.page-pro .pro-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

body.ui-v2.page-pro .pro-amount {
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

body.ui-v2.page-pro .pro-once {
  font-size: 12.5px;
  color: var(--muted);
}

body.ui-v2.page-pro .pro-offer-lede {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}

body.ui-v2.page-pro .pro-cta {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: 18px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
}

body.ui-v2.page-pro .pro-cta-ghost {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin-top: 8px;
  padding: 0 16px;
  border-radius: 10px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 500;
}

body.ui-v2.page-pro .pro-cta-ghost:hover {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
}

body.ui-v2.page-pro .pro-reassure {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

body.ui-v2.page-pro .pro-includes {
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}

body.ui-v2.page-pro .pro-includes li {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-soft);
}

body.ui-v2.page-pro .pro-includes li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------- the evidence
   The climb chart, at twice its old size and inside a card that matches
   the deck.  The caption is the argument: what the engine does at each
   checkpoint, and why the grey bar is not counted. */
body.ui-v2.page-pro .pro-evidence {
  margin-top: 22px;
}

body.ui-v2.page-pro .pro-evidence .cell-head {
  margin-bottom: 22px;
}

body.ui-v2.page-pro .pro-evidence .cell-head h2 {
  font-size: 15px;
}

body.ui-v2.page-pro .climb {
  margin: 0;
}

body.ui-v2.page-pro .climb-figure {
  margin: 0;
}

body.ui-v2.page-pro .climb-svg {
  max-width: 760px;
  padding: 4px 0 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

body.ui-v2.page-pro .climb-caption {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

body.ui-v2.page-pro .climb-caption strong {
  color: var(--text);
}

/* The dashed baseline's key, in the card's head: a swatch, then its name.
   It used to be a label floating on the 4pm bar, which is where the line
   and the last bar meet. */
body.ui-v2.page-pro .climb-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

body.ui-v2.page-pro .climb-key::before {
  content: "";
  width: 18px;
  height: 0;
  border-top: 1.5px dashed var(--warn);
}

/* ----------------------------------------------------------- what it opens
   Four promises, as a hairline grid rather than a bulleted list.  A list
   of bullets reads as a README; a grid of cells reads as a product. */
body.ui-v2.page-pro .pro-opens {
  margin-top: 22px;
}

body.ui-v2.page-pro .pro-opens .cell-head {
  margin-bottom: 20px;
}

body.ui-v2.page-pro .pro-opens .cell-head h2 {
  font-size: 15px;
}

body.ui-v2.page-pro .pro-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--line-soft);
}

body.ui-v2.page-pro .pro-item {
  padding: 20px 22px;
  background: var(--surface);
}

body.ui-v2.page-pro .pro-item .n {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
}

body.ui-v2.page-pro .pro-item strong {
  display: block;
  margin-top: 9px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.ui-v2.page-pro .pro-item p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

body.ui-v2.page-pro .pro-also {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

body.ui-v2.page-pro .pro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

body.ui-v2.page-pro .pro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

body.ui-v2.page-pro .pro-chip:hover {
  background: var(--surface-3);
  color: var(--text);
}

body.ui-v2.page-pro .pro-chip.is-more {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--muted);
  font-weight: 500;
}

/* ----------------------------------------------------------------- the facts
   The two questions this reader actually has, answered side by side. */
body.ui-v2.page-pro .pro-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}

body.ui-v2.page-pro .pro-fact {
  padding: 26px 28px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

body.ui-v2.page-pro .pro-fact h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.ui-v2.page-pro .pro-fact p {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

body.ui-v2.page-pro .pro-fact a {
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border-strong);
}

/* ------------------------------------------------------------- the last call
   The page ends on the price and the button, in the same accent wash as
   the card at the top, so the offer is the first and last thing seen. */
body.ui-v2.page-pro .pro-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 30px 32px;
  border-radius: var(--radius-card);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%,
    var(--surface) 64%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--border)),
    var(--shadow);
}

body.ui-v2.page-pro .pro-band h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

body.ui-v2.page-pro .pro-band p {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--text-soft);
}

body.ui-v2.page-pro .pro-band-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.ui-v2.page-pro .pro-band .btn {
  height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 13px;
}

/* -------------------------------------------------------------- the /pro page
   The offer page shares the grammar: a display heading, the price card
   beside it, and every section below as a card on the same rhythm. */
body.ui-v2.page-pro .pro-hero {
  padding: 38px 38px 34px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

body.ui-v2.page-pro .pro-title {
  margin: 20px 0 0;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.04em;
}

body.ui-v2.page-pro .pro-title span {
  display: block;
  color: var(--muted);
}

body.ui-v2.page-pro .pro-lede {
  max-width: 54ch;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

body.ui-v2.page-pro .pro-lede em {
  font-style: normal;
  color: var(--text);
  font-weight: 600;
}

body.ui-v2.page-pro .pro-why,
body.ui-v2.page-pro .pro-what,
body.ui-v2.page-pro .pro-free,
body.ui-v2.page-pro .pro-faq,
body.ui-v2.page-pro .pro-locked-section {
  margin: 22px 0 0;
  padding: 30px 32px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

body.ui-v2.page-pro .pro-why h2,
body.ui-v2.page-pro .pro-what h2,
body.ui-v2.page-pro .pro-free h2,
body.ui-v2.page-pro .pro-faq h2,
body.ui-v2.page-pro .pro-locked-section h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

body.ui-v2.page-pro .pro-why > p,
body.ui-v2.page-pro .pro-what > p {
  max-width: 62ch;
  margin: 12px 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}

body.ui-v2.page-pro .pro-table,
body.ui-v2.page-pro .pro-catalog {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

body.ui-v2.page-pro .pro-table th,
body.ui-v2.page-pro .pro-catalog th {
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

body.ui-v2.page-pro .pro-table td,
body.ui-v2.page-pro .pro-catalog td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-soft);
}

body.ui-v2.page-pro .pro-table tr:last-child td,
body.ui-v2.page-pro .pro-catalog tr:last-child td {
  border-bottom: 0;
}

body.ui-v2.page-pro .pro-table tbody tr:first-child td {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--text);
}

body.ui-v2.page-pro .pro-catalog tbody tr:hover {
  background: var(--surface-2);
}

/* The state panel inside the price card: the card is already the panel. */
body.ui-v2.page-pro .pro-offer-card .panel,
body.ui-v2.page-pro .pro-offer-card .panel-body {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.ui-v2.page-pro .pro-offer-card .panel {
  margin: 0;
}

body.ui-v2.page-pro .pro-offer-card .panel-body {
  padding: 0;
}

body.ui-v2.page-pro .pro-offer-card p {
  font-size: 12.5px;
  line-height: 1.55;
}

body.ui-v2.page-pro .pro-offer-card > p:first-of-type {
  margin-top: 10px;
}

body.ui-v2.page-pro .pro-offer-card .btn.btn-primary {
  margin-top: 16px;
}

/* The discount, as a quiet inset block rather than a second product. */
body.ui-v2.page-pro .pro-discount {
  margin-top: 20px;
  padding: 16px 16px 14px;
  border-radius: 12px;
  background: var(--surface-2);
}

body.ui-v2.page-pro .pro-discount-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

body.ui-v2.page-pro .pro-discount-badge {
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

body.ui-v2.page-pro .pro-discount-body {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

body.ui-v2.page-pro .pro-discount .pro-buy-discount {
  margin-top: 12px;
  width: 100%;
  height: 40px;
  border-radius: 9px;
  font-size: 12px;
}

body.ui-v2.page-pro .pro-discount-fine {
  margin: 10px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-4);
}

body.ui-v2.page-pro .pro-faq dl {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 36px;
}

body.ui-v2.page-pro .pro-faq-item {
  min-width: 0;
}

body.ui-v2.page-pro .pro-faq dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

body.ui-v2.page-pro .pro-faq dd {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

body.ui-v2.page-pro .pro-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

body.ui-v2.page-pro .pro-list li {
  position: relative;
  padding-left: 22px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

body.ui-v2.page-pro .pro-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}

body.ui-v2.page-pro .pro-list strong {
  color: var(--text-soft);
  font-weight: 600;
}

body.ui-v2.page-pro .pro-locked-count,
body.ui-v2.page-pro .pro-note {
  max-width: 66ch;
  margin: 12px 0 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

body.ui-v2.page-pro .pro-have {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-2);
}

body.ui-v2.page-pro .pro-have p {
  margin: 0;
}

/* The track record strip is public evidence; it sits on the card, not in
   a box of its own. */
body.ui-v2.page-pro .track {
  margin-top: 22px;
  padding: 30px 32px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

body.ui-v2.page-pro .track h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

body.ui-v2.page-pro .track-strip {
  margin-top: 18px;
}

body.ui-v2.page-pro .track-source {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* A real free-station example on the offer page, not a fabricated result. */
body.ui-v2.page-pro .pro-preview {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: center;
  margin-top: 22px;
  padding: 30px 32px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
body.ui-v2.page-pro .preview-intro { min-width: 0; }
body.ui-v2.page-pro .preview-eyebrow { color: var(--accent); font: 600 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
body.ui-v2.page-pro .preview-intro h2 { margin: 14px 0 0; font-size: clamp(23px, 2.7vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
body.ui-v2.page-pro .preview-intro p { margin: 14px 0 18px; color: var(--text-soft); font-size: 13px; line-height: 1.65; }
body.ui-v2.page-pro .preview-intro .btn { min-height: 44px; gap: 10px; }
body.ui-v2.page-pro .preview-intro .preview-fine { margin: 10px 0 0; font-size: 11px; color: var(--muted); }
body.ui-v2.page-pro .preview-screen { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
body.ui-v2.page-pro .preview-screen-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
body.ui-v2.page-pro .preview-screen-head strong { font: 600 19px var(--mono); }
body.ui-v2.page-pro .preview-screen-head div > span { display: block; color: var(--text-soft); font-size: 11px; margin-top: 5px; }
body.ui-v2.page-pro .preview-free { padding: 5px 9px; border-radius: 999px; font-size: 10px; color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
body.ui-v2.page-pro .preview-screen figcaption { margin-top: 20px; font-size: 11px; line-height: 1.5; color: var(--text-soft); }
body.ui-v2.page-pro .preview-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: var(--text-soft); font-size: 10px; }
body.ui-v2.page-pro .preview-legend span::before { content: ""; display: inline-block; width: 12px; margin-right: 5px; border-top: 2px solid var(--accent); vertical-align: middle; }
body.ui-v2.page-pro .preview-legend span:last-child::before { border-top: 2px dashed var(--success); }
body.ui-v2.page-pro .preview-screen svg { display: block; width: 100%; height: auto; margin: 8px 0; }
body.ui-v2.page-pro .preview-axis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin: 0 0 14px; color: var(--text-soft); font: 10px var(--mono); }
body.ui-v2.page-pro .preview-grid { stroke: var(--line); stroke-width: 1; }
body.ui-v2.page-pro .preview-actual { stroke: var(--success); stroke-width: 2; stroke-dasharray: 5 4; }
body.ui-v2.page-pro .preview-forecast { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
body.ui-v2.page-pro .preview-checkpoints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.ui-v2.page-pro .preview-checkpoints div { padding: 10px 8px; border-radius: 8px; background: var(--surface); }
body.ui-v2.page-pro .preview-checkpoints span { display: block; color: var(--text-soft); font-size: 10px; }
body.ui-v2.page-pro .preview-checkpoints strong { display: block; margin-top: 5px; font: 500 15px var(--mono); }
body.ui-v2.page-pro .preview-screen-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; color: var(--text-soft); font-size: 10px; }
@media (max-width: 720px) {
  body.ui-v2.page-pro .pro-preview { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 24px; }
  body.ui-v2.page-pro .preview-screen { padding: 14px; }
}

/* Account/feedback additions use the same desk tokens as the Pro offer. */
body.ui-v2.page-pro .pro-feedback { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; }
body.ui-v2.page-pro .pro-feedback summary { min-height: 44px; cursor: pointer; font-size: 12px; line-height: 1.6; color: var(--text-soft); }
body.ui-v2.page-pro .pro-feedback-form { display: grid; gap: 12px; margin-top: 16px; }
body.ui-v2.page-pro .pro-feedback-form label { font-size: 12.5px; line-height: 1.6; color: var(--text-soft); }
body.ui-v2.page-pro .pro-feedback-form :is(input:not([type="checkbox"]), select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); font: 13px/1.6 var(--font); }
body.ui-v2.page-pro .pro-feedback-form textarea { resize: vertical; }
body.ui-v2.page-pro .pro-feedback-form .btn { min-height: 44px; justify-self: start; white-space: normal; }
body.ui-v2.page-pro .pro-feedback-privacy { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--text-soft); }
body.ui-v2.page-pro .pro-consent { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; cursor: pointer; }
body.ui-v2.page-pro .pro-consent input { flex: 0 0 auto; margin-top: 4px; }
body.ui-v2.page-account [hidden] { display: none !important; }
body.ui-v2.page-account .account-payment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
body.ui-v2.page-account .account-payment { padding: 18px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); overflow-wrap: anywhere; }
body.ui-v2.page-account .account-payment h3 { margin: 0 0 12px; font: 600 14px var(--mono); }
body.ui-v2.page-account .account-payment p { margin: 8px 0; font-size: 12.5px; line-height: 1.7; color: var(--text-soft); }
body.ui-v2.page-account #account-status { line-height: 1.7; color: var(--text-soft); }
body.ui-v2.page-account .funnel-links .btn { min-height: 44px; }
body.ui-v2.page-account #testimonial-withdraw { margin-top: 16px; min-height: 44px; }
#pro-customer-panel .private-feedback-note { overflow-wrap: anywhere; white-space: pre-wrap; margin: 12px 0; line-height: 1.7; }
@media (max-width: 720px) { body.ui-v2.page-account .account-payment-grid { grid-template-columns: minmax(0, 1fr); } }

/* Purchase guidance uses real records and approved terms, not trust badges. */
body.ui-v2.page-pro .pro-recover {
  margin: 16px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--surface-2);
  color: var(--text-soft);
  overflow-wrap: anywhere;
}
body.ui-v2.page-pro .pro-recover p { margin: 8px 0; }
body.ui-v2.page-pro .pro-recover a { display: inline-flex; align-items: center; min-height: 44px; }
body.ui-v2.page-pro .pro-purchase-help,
body.ui-v2.page-pro .pro-purchase-proof { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
body.ui-v2.page-pro .pro-purchase-help p,
body.ui-v2.page-pro .pro-purchase-proof p { margin: 0 0 8px; color: var(--text-soft); font-size: 12px; line-height: 1.6; }
body.ui-v2.page-pro .pro-help-links { display: flex; flex-wrap: wrap; column-gap: 18px; }
body.ui-v2.page-pro .pro-help-links a,
body.ui-v2.page-pro .pro-purchase-proof > a { display: flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
body.ui-v2.page-pro .pro-purchase-proof .pro-proof-date { font: 10.5px/1.6 var(--mono); }
body.ui-v2.page-pro #pro-check-again { margin: 12px 0; min-height: 44px; white-space: normal; }
body.ui-v2.page-pro #pro-check-again[hidden] { display: none; }
body.ui-v2.page-pro .pro-terms {
  margin-top: 22px;
  padding: 30px 32px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  scroll-margin-top: 24px;
}
body.ui-v2.page-pro .pro-terms-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
body.ui-v2.page-pro .pro-terms h2 { margin: 10px 0 0; font-size: 23px; font-weight: 600; letter-spacing: -.025em; }
body.ui-v2.page-pro .pro-terms-date { font: 11px var(--mono); color: var(--text-soft); }
body.ui-v2.page-pro .pro-terms-intro,
body.ui-v2.page-pro .pro-terms-limit { max-width: 76ch; margin: 16px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-soft); }
body.ui-v2.page-pro .pro-terms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; margin: 24px 0 0; }
body.ui-v2.page-pro .pro-terms-grid > div { min-width: 0; }
body.ui-v2.page-pro .pro-terms-grid dt { font-size: 13px; font-weight: 600; }
body.ui-v2.page-pro .pro-terms-grid dd { margin: 8px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--text-soft); }
body.ui-v2.page-pro .pro-terms-limit { border-top: 1px solid var(--line); padding-top: 16px; }
body.ui-v2.page-pro .pro-terms a,
body.ui-v2.page-pro .pro-faq a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  body.ui-v2.page-pro .pro-terms { padding: 24px 20px; }
  body.ui-v2.page-pro .pro-terms-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  body.ui-v2.page-pro .pro-top {
    grid-template-columns: minmax(0, 1fr);
  }
  body.ui-v2.page-pro .pro-offer-card {
    position: static;
  }
}

@media (max-width: 720px) {
  body.ui-v2.page-pro .funnel-nav {
    padding: 18px 18px 0;
  }
  body.ui-v2.page-pro .funnel-links a {
    padding: 6px 11px;
    font-size: 12px;
  }
  body.ui-v2.page-pro .pro-shell {
    padding: 28px 18px 60px;
  }
  body.ui-v2.page-pro .pro-card,
  body.ui-v2.page-pro .pro-lead,
  body.ui-v2.page-pro .pro-hero {
    padding: 24px 20px;
  }
  body.ui-v2.page-pro .pro-lead.has-figure {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  body.ui-v2.page-pro .pro-lead.has-figure .pro-figure {
    text-align: left;
  }
  body.ui-v2.page-pro .pro-lead.has-figure .pro-figure-v {
    justify-content: flex-start;
  }
  body.ui-v2.page-pro .pro-lead.has-figure .pro-figure-s {
    margin-left: 0;
  }
  body.ui-v2.page-pro .pro-code {
    font-size: 46px;
  }
  body.ui-v2.page-pro .pro-name {
    font-size: 16px;
  }
  body.ui-v2.page-pro .pro-figure-v {
    font-size: 68px;
  }
  body.ui-v2.page-pro .pro-figrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  body.ui-v2.page-pro .pro-items,
  body.ui-v2.page-pro .pro-facts,
  body.ui-v2.page-pro .pro-faq dl {
    grid-template-columns: minmax(0, 1fr);
  }
  body.ui-v2.page-pro .pro-band {
    padding: 24px 20px;
  }
  body.ui-v2.page-pro .pro-band h2 {
    font-size: 19px;
  }
  body.ui-v2.page-pro .pro-band .btn {
    width: 100%;
  }
  body.ui-v2.page-pro .pro-why,
  body.ui-v2.page-pro .pro-what,
  body.ui-v2.page-pro .pro-free,
  body.ui-v2.page-pro .pro-faq,
  body.ui-v2.page-pro .pro-locked-section,
  body.ui-v2.page-pro .track {
    padding: 24px 20px;
  }
  body.ui-v2.page-pro .pro-table,
  body.ui-v2.page-pro .pro-catalog {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ========================================================= THE ENGINE PAGE

   A research scoreboard: fifteen sections of tables, every one of them
   filled by engine.js after first paint.  The shell is the deck's, and the
   JS's own components -- stat cards, badges, panels, coverage tracks -- are
   mapped onto it here rather than being rewritten, so the data layer keeps
   every number, every formatter and every test it had.

   Everything is scoped to `body.engine-page`, not just `body.ui-v2`: the
   same `.badge`, `.stat` and `.panel` appear on pages that have not been
   ported, and restyling them globally would move pages nobody asked about.

   The TOC is a card here, because a rail of fifteen plain links floating on
   the page background was the single strongest "old site" signal on the
   page.  On a phone it folds into a row of chips above the body. */

/* The shared masthead keeps its title block at max-content so the note keeps
   the prototype's narrow measure.  This page's note is a full sentence, and
   at 390px max-content pushed the document 217px sideways; let it shrink and
   wrap instead. */
body.engine-page .masthead-main {
  flex: 1 1 420px;
  min-width: 0;
}

body.engine-page .engine-focal {
  margin-top: 22px;
  padding: 32px 34px 30px;
}

body.engine-page .engine-focal .focal-top {
  margin-bottom: 0;
}

/* The ring was the old hero.  The number is the subject now: at display
   size, with the tier word beside it, and no dial around it. */
body.engine-page .engine-focal .gauge {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  place-items: initial;
}

body.engine-page .engine-focal .gauge::before,
body.engine-page .engine-focal .gauge::after {
  content: none;
  display: none;
}

body.engine-page .engine-focal-body {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 14px;
}

body.engine-page .engine-focal .tier-number {
  font-family: var(--mono);
  font-size: clamp(76px, 9vw, 124px);
  font-weight: 600;
  line-height: 0.84;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

body.engine-page .engine-focal .tier-side {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 8px;
}

body.engine-page .engine-focal .tier-word {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
}

body.engine-page .engine-focal .focal-where {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

body.engine-page .tier-desc {
  max-width: 92ch;
  margin: 16px 4px 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
}

body.engine-page .tier-desc strong {
  color: var(--text-soft);
  font-weight: 600;
}

/* ---------------------------------------------------------- the pillars
   Four measured weights, as a quiet row inside the card -- no boxes, so the
   numbers read as one statement rather than four widgets. */
body.engine-page .engine-pillars {
  margin-top: 22px;
}

body.engine-page .engine-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.engine-page .engine-figs .stat {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.engine-page .engine-figs .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

body.engine-page .engine-figs .value {
  margin-top: 9px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

body.engine-page .engine-figs .value small {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

body.engine-page .engine-figs .sub {
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

body.engine-page .engine-figs .sub .badge {
  margin-left: 2px;
}

body.engine-page .engine-trend {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

body.engine-page .engine-trend svg {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
}

/* -------------------------------------------------------------- the rail */
body.engine-page .engine-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 22px;
}

body.engine-page .engine-toc {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: calc(100vh - 40px);
  padding: 18px 14px 16px;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

body.engine-page .engine-toc .toc-title {
  margin: 0 0 8px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

body.engine-page .engine-toc a {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-soft);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

body.engine-page .engine-toc a:hover {
  background: var(--surface-2);
  color: var(--text);
}

body.engine-page .engine-body {
  min-width: 0;
}

/* ------------------------------------------------------------ the sections */
body.engine-page .engine-sec {
  margin-bottom: 18px;
}

body.engine-page .engine-sec:last-child {
  margin-bottom: 0;
}

body.engine-page .engine-sec .cell-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

body.engine-page .engine-sec .cell-head h2 {
  font-size: 15px;
}

body.engine-page .sec-note {
  max-width: 84ch;
  margin: 10px 0 20px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* The card is the panel.  The JS still wraps a few boards in `.panel`
   (it predates this layer), so those wrappers are flattened rather than
   removed: the markup stays, the double box does not. */
body.engine-page .engine-sec .panel,
body.engine-page .engine-sec .panel-body {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.engine-page .engine-sec .panel-head {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

body.engine-page .engine-sec .panel-head h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

body.engine-page .engine-sec .panel + .panel {
  margin-top: 22px;
}

/* Only one table is wider than its card (the lane breakdown); the wrapper
   scrolls it.  A thin, always-drawn scrollbar is the affordance that says
   so -- the default overlay bar appears only while hovering, which read as
   a column chopped off at the card edge. */
body.engine-page .engine-sec .table-wrap {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent;
}

body.engine-page .engine-sec .table-wrap::-webkit-scrollbar {
  height: 8px;
}

body.engine-page .engine-sec .table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 999px;
}

body.engine-page .engine-sec .table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

/* Hardest / sharpest: two quiet inset panels rather than two more cards. */
body.engine-page .engine-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

body.engine-page .engine-sub {
  min-width: 0;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--surface-2);
}

body.engine-page .engine-sub .cell-head {
  margin-bottom: 10px;
}

body.engine-page .engine-sub .cell-head h3 {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------- the components the JS emits */
body.engine-page .badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
}

body.engine-page .badge.info {
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
}

body.engine-page .badge.success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}

body.engine-page .badge.warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
}

body.engine-page .badge.danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

body.engine-page .delta-pill {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: none;
}

body.engine-page .delta-pill.good {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}

body.engine-page .delta-pill.bad {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* The coverage cell: below / inside / above, with the nominal quarters as
   ticks.  A thicker rounded track reads as data rather than as a border. */
body.engine-page .range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
}

body.engine-page .range-band {
  border-radius: 999px;
  background: var(--accent);
}

body.engine-page .range-center {
  width: 1px;
  background: var(--text);
  opacity: 0.3;
}

body.engine-page .empty-state {
  padding: 20px 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* A dense table can be wider than the card; the wrapper scrolls rather than
   crushing every column.  These two keep the lane table's first cell from
   collapsing to one word a line while it does: the sub-line carries the
   edition count and must not wrap. */
body.engine-page #lane-table tbody td:first-child {
  min-width: 200px;
}

body.engine-page #lane-table tbody td:first-child > div {
  white-space: nowrap;
}

/* The calibration mass cell is a bare percentage-width bar, which the table
   layout cannot measure -- the column collapsed and every bar but the widest
   rendered as a tick.  A width on the column gives the bars something to be
   a percentage of. */
body.engine-page #reliability-strip table.data th:nth-child(2),
body.engine-page #reliability-strip table.data td:nth-child(2) {
  width: 132px;
}

/* The mass cell's bar is scaled to the biggest bin, and the zero-mass bin
   dwarfs the rest, so every other bar is a sliver.  A track keeps the
   column legible as a scale rather than as one long bar and nine dots. */
body.engine-page #reliability-strip td:nth-child(2) > div {
  height: 7px;
  border-radius: 4px;
  background: var(--surface-3);
}

/* The coverage cell is a distribution on a 0-100 track.  Full-card width
   made it read as a rule rather than as a measure. */
body.engine-page .range-track {
  max-width: 480px;
}

/* Anchor jumps to a section must not tuck the heading under the top edge. */
body.engine-page .engine-sec {
  scroll-margin-top: 20px;
}

body.engine-page .skeleton {
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1040px) {
  body.engine-page .engine-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* A sticky 15-link rail on a tablet eats half the width; the same links
     read better as a strip above the body. */
  body.engine-page .engine-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-height: none;
    padding: 12px;
  }
  body.engine-page .engine-toc .toc-title {
    width: 100%;
    margin: 0 0 4px 6px;
  }
  body.engine-page .engine-toc a {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12px;
  }
}

@media (max-width: 720px) {
  body.engine-page .engine-focal {
    padding: 24px 20px;
  }
  /* The number and its caption do not share a line at 390; when they wrap,
     the row gap turned into a rift between 54 and FAIR. */
  body.engine-page .engine-focal-body {
    gap: 10px;
  }
  body.engine-page .engine-focal .tier-side {
    gap: 2px;
    padding-bottom: 0;
  }
  body.engine-page .engine-focal .tier-number {
    font-size: 72px;
  }
  body.engine-page .engine-figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  /* A two-word pillar label on one card and a three-word label on the next
     put the two values on different baselines.  Reserve the taller line. */
  body.engine-page .engine-figs .label {
    min-height: 2.8em;
  }
  body.engine-page .engine-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================================ compare
   The comparison is a row, not a single number: up to four stations share
   the page's one headline card, and the evidence follows in the same slabs
   as the rest of the site.  The picker lives in that card's head, so the
   first thing on the page is the thing the page is for.
*/

/* The control strip: the search field, then the stations already in the
   comparison.  They share a line while there is room and stack on a
   phone, where the chips wrap under the field. */
body.compare-page .compare-pick-row {
  display: flex;
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
body.compare-page .compare-pick-row .picker-wrap {
  flex: 0 1 330px;
  min-width: 210px;
}
body.compare-page .compare-pick-row .sel-chips {
  flex: 1 1 320px;
  min-height: 0;
  margin-top: 0;
}

/* The picker is the topbar search's twin: a pill, not a boxed field. */
body.compare-page .picker-input {
  width: 100%;
  height: 38px;
  padding: 0 16px 0 36px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--line);
  color: var(--text);
  font: 400 13px var(--font);
}
body.compare-page .picker-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
body.compare-page .picker-input::placeholder { color: var(--muted); }
body.compare-page .picker-wrap::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: var(--muted);
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  pointer-events: none;
}
body.compare-page .picker-pop {
  top: calc(100% + 6px);
  min-width: min(320px, calc(100vw - 40px));
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px var(--border-strong), 0 18px 40px rgba(0, 0, 0, 0.28);
  padding: 6px;
}
body.compare-page .picker-item {
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px;
}
body.compare-page .picker-item b { color: var(--accent); }
body.compare-page .picker-item span { font-size: 12px; }
body.compare-page .picker-flag {
  border-radius: 4px;
  font-size: 10px;
}

/* A selected station is a quiet pill with the chart's colour on its left,
   so the chips and the series read as the same four things. */
body.compare-page .sel-chip {
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--line);
  color: var(--text-soft);
  padding: 5px 7px 5px 11px;
  gap: 7px;
  font: 500 12px var(--mono);
}
body.compare-page .sel-chip i { width: 7px; height: 7px; border-radius: 2px; }
body.compare-page .sel-chip button {
  color: var(--muted);
  font-size: 11px;
  padding: 2px 4px;
}
body.compare-page .sel-chip button:hover { color: var(--danger); }
body.compare-page #selected-chips .muted {
  font-size: 12.5px;
  color: var(--muted);
}

/* The four headline figures.  A flex row, not a fixed four-column grid:
   with two stations chosen, two wide figures read better than two and two
   holes, and a single station gets the full card.  From 720 down the row
   is a 2x2, the same give-way as the deck's. */
body.compare-page #summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 24px;
}
body.compare-page #summary-grid > .stat {
  flex: 1 1 0;
  min-width: 150px;
}
/* One station is a start, not a comparison: use the empty half to say so
   rather than leaving a hole where the other airfields will go. */
body.compare-page #summary-grid:has(> .stat:only-child)::after {
  content: "One station selected — add up to three more to compare.";
  flex: 0 1 360px;
  align-self: center;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
@media (min-width: 721px) {
  body.compare-page #summary-grid:has(> .stat:only-child) .stat .value {
    font-size: 56px;
  }
}
body.compare-page #summary-grid > .skeleton {
  flex: 1 1 100%;
  height: 84px;
}
body.compare-page #summary-grid > .empty-state,
body.compare-page #summary-grid > .error-state {
  flex: 1 1 100%;
  border: 0;
  border-radius: 0;
  outline: 0;
  padding: 4px 0 0;
  text-align: left;
  font-size: 12.5px;
}

/* The evidence slabs. */
body.compare-page .compare-stack {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}
body.compare-page .compare-stack .panel-body { padding: 0; }
body.compare-page .compare-stack .empty-state,
body.compare-page .compare-stack .error-state {
  border: 0;
  border-radius: 0;
  outline: 0;
  padding: 10px 0 2px;
  text-align: left;
  font-size: 12.5px;
}

/* renderSources() owns a .sec-head, not a .cell-head: its paragraph is
   part of the section's explanation, so it gets a line of its own. */
body.compare-page .sec-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  margin: 0 0 18px;
}
body.compare-page .sec-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
body.compare-page .sec-head p {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 78ch;
}
/* renderSources() appends the network-wide caveat to the paragraph, but
   the panel repeats it directly above the table -- say it once. */
body.compare-page .sec-head p .muted { display: none; }

/* Tables: the deck's hairlines, aligned to the card's inner edge rather
   than inset by the cell padding. */
body.compare-page .compare-stack table.data th:first-child,
body.compare-page .compare-stack table.data td:first-child { padding-left: 0; }
body.compare-page .compare-stack table.data th:last-child,
body.compare-page .compare-stack table.data td:last-child { padding-right: 0; }
body.compare-page .compare-stack table.data tbody th {
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-soft);
}
/* The lane labels are a sentence, not a code: give the first column room
   so a phone scrolls the table rather than stacking the label one word
   per line. */
body.compare-page #sources-panel table.data th:first-child,
body.compare-page #sources-panel table.data td:first-child {
  min-width: 170px;
}
/* Only the lane table is wider than its card; the wrapper scrolls it.  A
   thin, always-drawn bar is the affordance that says so. */
body.compare-page .compare-stack .table-wrap {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent;
}
body.compare-page .compare-stack .table-wrap::-webkit-scrollbar { height: 8px; }
body.compare-page .compare-stack .table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 999px;
}
body.compare-page .compare-stack .table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
body.compare-page .compare-stack table.data td { vertical-align: top; }
body.compare-page .compare-stack .win-cell { font-variant-numeric: tabular-nums; }
body.compare-page .compare-stack .delta-pill {
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10.5px;
}
body.compare-page .compare-stack .badge { border-radius: 999px; }

/* The chart keeps the card's width and its own 260px plot height. */
body.compare-page #mae-chart { margin-top: 2px; }
/* The newest date sits on the plot's right edge with a middle anchor, so
   its last glyph falls a few pixels outside the SVG box.  Let it draw into
   the card's own padding rather than clip the date. */
body.compare-page #mae-chart .chart-svg { overflow: visible; }

@media (max-width: 720px) {
  body.compare-page .compare-pick-row { gap: 10px; }
  body.compare-page .compare-pick-row .picker-wrap { flex: 1 1 100%; }
  body.compare-page .compare-pick-row .sel-chips { flex: 1 1 100%; }
  body.compare-page .picker-pop { min-width: 0; width: 100%; }
  /* When the head wraps, the window chips start the next line rather than
     floating against the right edge above the picker. */
  body.compare-page .compare-hero .cell-head .filters { margin-left: 0; }
  body.compare-page #summary-grid { gap: 20px; }
  body.compare-page #summary-grid > .stat {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }
}
@media (max-width: 560px) {
  body.compare-page #summary-grid { gap: 18px; }
  body.compare-page #summary-grid .stat .value { font-size: 30px; }
  body.compare-page .compare-stack { gap: 16px; margin-top: 16px; }
}

/* ================================================================== demo
   The demo is a ledger, so the page is built like a statement rather than
   a marketing card: a balance-sheet card carrying the strategy switch, the
   equity curve, the settled receipts, then the account's own records.  It
   uses the same slabs, figures and tables as the rest of the site; the
   page is about the numbers.
*/

body.demo-page .demo-stack {
  display: grid;
  gap: 20px;
}
/* The wide account tables live inside scroll containers, but their
   min-content width can still size the stack's implicit column on a
   narrow screen.  The column is the page, not the widest table. */
body.demo-page .demo-stack > * { min-width: 0; }
/* The theme keeps the title block at max-content so it does not stretch
   across the page.  The demo's note is long enough to need a shrink on a
   phone; it still hugs its text on desktop. */
body.demo-page .masthead-main {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* The status pill is rewritten by demo.js, so its dot is drawn by CSS
   instead of living in the markup the rewrite would replace. */
body.demo-page #mirror-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  font-family: var(--font);
  font-size: 12px;
}
body.demo-page #mirror-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: currentColor;
}
body.demo-page #mirror-pill b { font-weight: 700; }
body.demo-page .masthead-actions .chip { padding: 7px 13px; }

/* --- the balance sheet --------------------------------------------- */
body.demo-page .demo-hero .cell-head { align-items: center; }
body.demo-page .demo-hero .cell-note { flex: 1 1 220px; }
body.demo-page .demo-hero .profile-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
body.demo-page .demo-hero .profile-pill {
  padding: 6px 13px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}
body.demo-page .demo-hero .profile-pill[hidden] { display: none; }
body.demo-page .demo-hero .profile-pill:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
body.demo-page .demo-hero .profile-pill.active,
body.demo-page .demo-hero .profile-pill.active:hover {
  background: var(--text);
  color: var(--surface);
  box-shadow: none;
  font-weight: 600;
}
body.demo-page .demo-hero .figs { margin-top: 2px; }
body.demo-page .demo-hero .figs .stat .value { font-size: 44px; }
body.demo-page #summary-stats > .skeleton { height: 84px; }
body.demo-page #summary-stats > .empty-state,
body.demo-page #summary-stats > .error-state {
  grid-column: 1 / -1;
  border: 0;
  outline: 0;
  border-radius: 0;
  padding: 2px 0;
  text-align: left;
  font-size: 12.5px;
}

/* The chart card keeps the card's width and its own 260px plot height. */
body.demo-page #portfolio-chart { margin-top: 2px; }
/* The newest date sits on the plot's right edge with a middle anchor, so
   its last glyph falls a few pixels outside the SVG box.  Let it draw into
   the card's own padding rather than clip the date. */
body.demo-page #portfolio-chart .chart-svg { overflow: visible; }

/* --- section heads -------------------------------------------------- */
body.demo-page .sec-head { margin: 0 0 14px; }
body.demo-page .sec-head h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body.demo-page .sec-head p {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 76ch;
}
body.demo-page .sec-head .filters { margin-top: 12px; }

/* --- the receipt cards and the account panels ----------------------- */
body.demo-page #contract-results { gap: 20px; }
body.demo-page #contract-results > * { min-width: 0; }

body.demo-page .panel {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}
body.demo-page .panel-head {
  align-items: baseline;
  gap: 10px;
  padding: 20px 22px 13px;
  border-bottom: 1px solid var(--line-soft);
}
body.demo-page .panel-head h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.demo-page .panel-head h3 span { font-size: 9px; vertical-align: 1px; }
body.demo-page .panel-head .right { font-size: 11.5px; }
body.demo-page .panel-body { padding: 16px 22px 20px; }
body.demo-page #contract-results .panel-head { padding-bottom: 13px; }
body.demo-page #contract-results .panel-body { padding: 8px 22px 18px; }

/* Flatten the legacy dashed empty/error boxes: on a card they read as a
   quiet line of copy, not as another bordered object. */
body.demo-page #portfolio-chart > .empty-state,
body.demo-page #portfolio-chart > .error-state,
body.demo-page #positions-open-body > .empty-state,
body.demo-page #positions-settled-body > .empty-state,
body.demo-page #orders-body > .empty-state,
body.demo-page #orders-body > .error-state,
body.demo-page #trades-body > .empty-state,
body.demo-page #trades-body > .error-state {
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px 0;
  text-align: left;
  font-size: 12.5px;
}
body.demo-page #contract-results > .empty-state,
body.demo-page #contract-results > .error-state {
  grid-column: 1 / -1;
  border: 0;
  outline: 0;
  border-radius: 0;
  padding: 6px 0;
  text-align: left;
  font-size: 12.5px;
}

/* --- the tables ----------------------------------------------------- */
body.demo-page #contract-results table,
body.demo-page #panel-positions table,
body.demo-page #panel-orders table,
body.demo-page #panel-fills table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.4;
}
body.demo-page #contract-results table thead th,
body.demo-page #panel-positions table thead th,
body.demo-page #panel-orders table thead th,
body.demo-page #panel-fills table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
body.demo-page #contract-results table tbody td,
body.demo-page #panel-positions table tbody td,
body.demo-page #panel-orders table tbody td,
body.demo-page #panel-fills table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
body.demo-page #contract-results table tbody tr:last-child td,
body.demo-page #panel-positions table tbody tr:last-child td,
body.demo-page #panel-orders table tbody tr:last-child td,
body.demo-page #panel-fills table tbody tr:last-child td {
  border-bottom: 0;
}
body.demo-page #contract-results table th:first-child,
body.demo-page #contract-results table td:first-child,
body.demo-page #panel-positions table th:first-child,
body.demo-page #panel-positions table td:first-child,
body.demo-page #panel-orders table th:first-child,
body.demo-page #panel-orders table td:first-child,
body.demo-page #panel-fills table th:first-child,
body.demo-page #panel-fills table td:first-child {
  padding-left: 0;
}
body.demo-page #contract-results table th:last-child,
body.demo-page #contract-results table td:last-child,
body.demo-page #panel-positions table th:last-child,
body.demo-page #panel-positions table td:last-child,
body.demo-page #panel-orders table th:last-child,
body.demo-page #panel-orders table td:last-child,
body.demo-page #panel-fills table th:last-child,
body.demo-page #panel-fills table td:last-child {
  padding-right: 0;
}
body.demo-page #contract-results table .num,
body.demo-page #panel-positions table .num,
body.demo-page #panel-orders table .num,
body.demo-page #panel-fills table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.demo-page #contract-results table tbody tr:hover td,
body.demo-page #panel-positions table tbody tr:hover td,
body.demo-page #panel-orders table tbody tr:hover td,
body.demo-page #panel-fills table tbody tr:hover td {
  background: var(--surface-2);
}
body.demo-page .panel .badge,
body.demo-page #contract-results .badge {
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
}
body.demo-page #contract-results .cr-mark { margin-right: 6px; }
body.demo-page #contract-results .cr-name { color: var(--text-soft); }
body.demo-page #contract-results .cr-meta {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--muted);
}
body.demo-page .settled-details table { opacity: 0.94; }

/* The account tables are wide.  The card keeps its width; the table
   scrolls inside it, with the sticky header showing where you are. */
body.demo-page #positions-open-body,
body.demo-page #positions-settled-body,
body.demo-page #orders-body,
body.demo-page #trades-body {
  overflow: auto;
}
body.demo-page #positions-open-body { max-height: 520px; }
body.demo-page #positions-settled-body { max-height: 520px; }
body.demo-page #orders-body,
body.demo-page #trades-body { max-height: 560px; }
body.demo-page #positions-open-body table { min-width: 860px; }
body.demo-page #positions-settled-body table { min-width: 620px; }
body.demo-page #orders-body table { min-width: 760px; }
body.demo-page #trades-body table { min-width: 720px; }
body.demo-page #positions-open-body > .muted {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
}

body.demo-page .settled-details { border-top: 1px solid var(--line-soft); }
body.demo-page .settled-details > summary {
  padding: 12px 22px;
  color: var(--muted);
  font: 600 11.5px var(--mono);
  letter-spacing: 0.02em;
}
body.demo-page .settled-details > summary:hover { color: var(--text); }
body.demo-page .settled-details > .panel-body { padding: 0 22px 18px; }

/* --- the view switch ------------------------------------------------ */
body.demo-page .tabs-bar {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
body.demo-page .tab {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  font: 500 12.5px/1.2 var(--font);
}
body.demo-page .tab:hover { background: var(--surface-2); color: var(--text); }
body.demo-page .tab.active,
body.demo-page .tab.active:hover {
  background: var(--text);
  color: var(--surface);
}
body.demo-page .tab-num {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: none;
  color: var(--muted);
  font: 600 10px var(--mono);
  text-align: center;
}
body.demo-page .tab.active .tab-num {
  background: color-mix(in srgb, var(--surface) 20%, transparent);
  color: var(--surface);
  box-shadow: none;
}

/* --- the controls --------------------------------------------------- */
body.demo-page .demo-controls { gap: 12px; }
body.demo-page .ctl-group {
  padding: 15px 17px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
body.demo-page .ctl-group-head { margin-bottom: 12px; }
body.demo-page .ctl-group-head > span:first-child {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.demo-page .ctl-group-head .chip { padding: 4px 10px; font-size: 11px; }
/* The controls are a short row of labelled inputs, not a form stretched to
   the width of the card.  Left-align the fields and keep each value box the
   width of the numbers it holds. */
body.demo-page .ctl-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
body.demo-page .ctl-field {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-soft);
}
body.demo-page .ctl-field input:not([type="checkbox"]),
body.demo-page #demo-token {
  flex: 0 0 64px;
  width: 64px;
  height: 30px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px var(--line);
  color: var(--text);
  font: 500 12px var(--mono);
}
body.demo-page #demo-token {
  flex: 0 1 230px;
  width: 230px;
  max-width: 100%;
}
body.demo-page .ctl-field input:not([type="checkbox"]):focus,
body.demo-page #demo-token:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
body.demo-page .ctl-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}
body.demo-page .ctl-field .unit { font-size: 10px; }
body.demo-page .ctl-check { font-size: 11.5px; }
body.demo-page .ctl-actions { margin-top: 12px; }
body.demo-page .ctl-actions .chip { font-size: 11.5px; }
body.demo-page .ctl-note,
body.demo-page .ctl-note-inline { font-size: 11.5px; line-height: 1.5; }
body.demo-page .ctl-lock { padding: 2px 9px; font-size: 10px; }
body.demo-page .ctl-danger {
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--danger) 30%, var(--line));
}
body.demo-page #demo-reset {
  color: var(--danger);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--danger) 35%, var(--line));
}

@media (max-width: 900px) {
  body.demo-page .demo-hero .figs .stat .value { font-size: 38px; }
}

@media (max-width: 720px) {
  body.demo-page .demo-hero .cell-head { align-items: flex-start; }
  body.demo-page .demo-hero .cell-note { flex: 1 1 100%; }
  body.demo-page .demo-hero .profile-switch { width: 100%; margin-left: 0; }
  body.demo-page .demo-stack { gap: 16px; }
  body.demo-page .sec-head h2 { font-size: 17px; }
  body.demo-page .panel-head { padding: 18px 18px 12px; }
  body.demo-page .panel-body { padding: 14px 18px 18px; }
  body.demo-page #contract-results .panel-body { padding: 8px 18px 16px; }
  body.demo-page .settled-details > summary { padding: 12px 18px; }
  body.demo-page .settled-details > .panel-body { padding: 0 18px 16px; }
  body.demo-page #contract-results { gap: 16px; }
}

@media (max-width: 640px) {
  /* The legacy phone rule turned a bare table into its own scroll box.
     These tables already live in one, so keep the table layout (and its
     sticky header) and let the wrapper own the scroll. */
  body.demo-page .panel-body > table { display: table; }
  body.demo-page .panel-body > table td { white-space: normal; }
}

@media (max-width: 560px) {
  body.demo-page .demo-hero .figs { gap: 18px; }
  body.demo-page .demo-hero .figs .stat .value { font-size: 30px; }
  body.demo-page .tabs-bar { border-radius: 16px; }
  body.demo-page .tab { padding: 6px 10px; font-size: 12px; }
  body.demo-page .masthead-actions .chip,
  body.demo-page #mirror-pill { padding: 6px 11px; font-size: 11.5px; }
  /* The live-book timestamp is long; let it take its own line in the
     positions head instead of squeezing "Open positions" into two. */
  body.demo-page #panel-positions .panel-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  body.demo-page #panel-positions .panel-head .right {
    flex: 1 1 auto;
    margin-left: 0;
  }
}

/* ====================================================================== rework
   The demo stops being a stack of same-width cards and becomes a statement:

   1. STATEMENT SPREAD  the ledger and the equity curve share one wide sheet,
      split like the two sides of an account statement: the balance page on
      the left, the value curve on the right, one desk rule across the top.
   2. SETTLED BOOK      the contract results get a headline tally (wins against
      losses, as one big score with a win-rate line) and their two receipt
      tables are cut as pages of the same book.
   3. BLOTTER           the account views keep their tab switch but it lives in
      a left-hand ledger index on wide screens, so the record runs rightwards
      like a printed blotter instead of stacking.
   IDs, panel classes and demo.js hooks are untouched; this is layout.
*/

body.demo-page .statement {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
body.demo-page .statement > * { min-width: 0; }

/* --- the desk rule: a printed statement owns a header line ---------- */
body.demo-page .statement-rule {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 11px 26px;
  border-bottom: 1px solid var(--line-soft);
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
body.demo-page .statement-rule span:nth-child(2) { color: var(--text-soft); }

/* The two halves of the spread are one sheet, so the cells lose their own
   cards and meet on a vertical spine. */
body.demo-page .statement > .dash-cell {
  padding: 22px 26px 24px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}
body.demo-page .statement > .dash-cell + .dash-cell {
  border-left: 1px solid var(--line-soft);
}

/* --- the balance page ------------------------------------------------ */
body.demo-page .statement-balance .cell-head {
  display: block;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line-soft);
}
body.demo-page .statement-balance .cell-head h2 { font-size: 20px; letter-spacing: -0.02em; }
body.demo-page .statement-balance .cell-head .cell-note {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
}
body.demo-page .statement-balance .cell-head::after { content: none; }

/* The strategy switch becomes the statement's own selector: three equal
   segments, not three floating chips. */
body.demo-page .statement-balance .profile-switch {
  display: flex;
  gap: 4px;
  width: 100%;
  margin: 14px 0 16px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
body.demo-page .statement-balance .profile-switch .profile-pill {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 8px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 12px var(--font);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
}
body.demo-page .statement-balance .profile-switch .profile-pill:hover {
  color: var(--text-soft);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
body.demo-page .statement-balance .profile-switch .profile-pill.active,
body.demo-page .statement-balance .profile-switch .profile-pill.active:hover {
  background: var(--text);
  color: var(--surface);
  box-shadow: none;
  font-weight: 600;
}

/* The balance sheet reads top down: the cash figure owns the sheet, the
   net result and open risk share a ruled row, the record closes it. */
body.demo-page .statement-balance #summary-stats {
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
}
body.demo-page .statement-balance #summary-stats > * { min-width: 0; }
body.demo-page .statement-balance #summary-stats > .stat {
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
body.demo-page .statement-balance #summary-stats > .stat:nth-child(1) { grid-column: 1 / -1; padding-top: 17px; }
body.demo-page .statement-balance #summary-stats > .stat:nth-child(2) {
  padding-right: 20px;
  border-right: 1px solid var(--line-soft);
}
body.demo-page .statement-balance #summary-stats > .stat:nth-child(3) { padding-left: 20px; }
body.demo-page .statement-balance #summary-stats > .stat:nth-child(4) { grid-column: 1 / -1; }
body.demo-page .statement-balance #summary-stats > .stat:nth-last-child(1) { border-bottom: 0; }
body.demo-page .statement-balance #summary-stats .stat .label::before { content: none; }
body.demo-page .statement-balance #summary-stats .stat .value { font-size: 26px; }
body.demo-page .statement-balance #summary-stats > .stat:nth-child(1) .value { font-size: 64px; }
body.demo-page .statement-balance #summary-stats > .stat:nth-child(4) .value { font-size: 34px; }
body.demo-page .statement-balance #summary-stats .fig-pnl.neg { color: var(--danger); }
body.demo-page .statement-balance #summary-stats .fig-pnl.pos { color: var(--success); }
body.demo-page .statement-balance #summary-stats .fig-w,
body.demo-page .statement-balance #summary-stats .fig-l { font-variant-numeric: tabular-nums; }
body.demo-page .statement-balance #summary-stats .fig-w { color: var(--success); }
body.demo-page .statement-balance #summary-stats .fig-l { color: var(--danger); }
body.demo-page .statement-balance #summary-stats .fig-w em,
body.demo-page .statement-balance #summary-stats .fig-l em {
  font-style: normal;
  font: 600 12px var(--mono);
  color: var(--muted);
  margin-left: 1px;
}
body.demo-page .statement-balance #summary-stats .fig-dash { color: var(--muted); }

/* The skeletons stretch to none of the ruled rows' height. */
body.demo-page .statement-balance #summary-stats > .skeleton { height: 76px; }

/* --- the value page -------------------------------------------------- */
body.demo-page .statement-equity .cell-head { margin-bottom: 12px; }
body.demo-page .statement-equity #portfolio-chart { margin-top: 0; }
/* Fill the sheet's lower-right so the two halves end on the same line. */
body.demo-page .statement-equity { display: flex; flex-direction: column; }
body.demo-page .statement-equity #portfolio-chart { flex: 1 1 auto; }

/* --- the settled book ------------------------------------------------ */
body.demo-page .results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
}
body.demo-page .results-copy { min-width: 0; max-width: 74ch; }
body.demo-page .results-tally { flex: 0 0 auto; min-width: 200px; }
body.demo-page .results-tally-kicker {
  display: block;
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
body.demo-page .results-tally-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
/* The score is the point: two big figures, one green, one red. */
body.demo-page .results-tally-row b {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
body.demo-page .results-tally-wins b { color: var(--success); }
body.demo-page .results-tally-losses b { color: var(--danger); }
body.demo-page .results-tally-row em {
  font-style: normal;
  font: 600 11px var(--mono);
  color: var(--muted);
  margin-left: 2px;
}
body.demo-page .results-tally-sep { color: var(--muted); font-size: 22px; line-height: 1; transform: translateY(-4px); }
body.demo-page .results-tally-rate { margin-top: 9px; font-size: 12px; color: var(--muted); }
body.demo-page .results-tally-bar {
  margin-top: 8px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 22%, var(--surface-2));
  overflow: hidden;
}
body.demo-page .results-tally-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 55%, transparent));
  transition: width 0.5s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  body.demo-page .results-tally-bar span { transition: none; }
}

/* The two receipt tables are pages of one book: a spine-coloured top edge
   and a quiet ink wash behind each head. */
body.demo-page .statement-balance #summary-stats > .empty-state,
body.demo-page .statement-balance #summary-stats > .error-state {
  grid-column: 1 / -1;
  padding: 14px 0 10px;
}
body.demo-page #contract-results > .result-panel {
  position: relative;
  overflow: hidden;
}
body.demo-page #contract-results > .result-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--success);
}
body.demo-page #contract-results > .result-panel.losses::before { background: var(--danger); }
body.demo-page #contract-results > .result-panel.wins .panel-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--success) 8%, transparent), transparent 92%);
}
body.demo-page #contract-results > .result-panel.losses .panel-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 8%, transparent), transparent 92%);
}

/* --- the blotter ----------------------------------------------------- */
body.demo-page .blotter {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
body.demo-page .blotter > * { min-width: 0; }
/* The ledger index rides along while a wide table is read. */
body.demo-page .blotter-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.demo-page .rail-kicker {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 8px;
}
body.demo-page .blotter .tabs-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
body.demo-page .blotter .tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--muted);
  font: 500 12.5px/1.2 var(--font);
}
body.demo-page .blotter .tab:hover {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}
body.demo-page .blotter .tab.active,
body.demo-page .blotter .tab.active:hover {
  background: var(--text);
  color: var(--surface);
  box-shadow: none;
}
body.demo-page .blotter .tab-num {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: 600 10px var(--mono);
  text-align: center;
}
body.demo-page .blotter .tab.active .tab-num {
  background: color-mix(in srgb, var(--surface) 20%, transparent);
  color: var(--surface);
  box-shadow: none;
}

/* --- narrow statements ------------------------------------------------ */
@media (max-width: 980px) {
  body.demo-page .statement { grid-template-columns: minmax(0, 1fr); }
  body.demo-page .statement > .dash-cell + .dash-cell {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
}
@media (max-width: 720px) {
  body.demo-page .statement-rule { padding: 10px 18px; letter-spacing: 0.1em; }
  body.demo-page .statement > .dash-cell + .dash-cell { border-top: 1px solid var(--line-soft); }
  body.demo-page .results-head { flex-direction: column; align-items: flex-start; }
  body.demo-page .results-tally-row b { font-size: 36px; }
  body.demo-page .results-tally-row { gap: 8px; }
  body.demo-page .results-tally-sep { transform: none; font-size: 20px; }
}
@media (max-width: 900px) {
  body.demo-page .blotter { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.demo-page .blotter-rail { position: static; }
  body.demo-page .rail-kicker { display: none; }
  body.demo-page .blotter .tabs-bar {
    flex-direction: row;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
  }
  body.demo-page .blotter .tab {
    flex: 0 0 auto;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 11px;
  }
  body.demo-page .blotter .tab-num { min-width: 16px; }
}
@media (max-width: 560px) {
  body.demo-page .statement > .dash-cell { padding: 18px 16px 20px; }
  body.demo-page .statement-rule { padding: 9px 16px; }
  body.demo-page .statement-balance .cell-head h2 { font-size: 18px; }
  body.demo-page .statement-balance .profile-switch .profile-pill { font-size: 11px; padding: 8px 6px; }
  body.demo-page .statement-balance #summary-stats > .stat:nth-child(1) .value { font-size: 46px; }
  body.demo-page .statement-balance #summary-stats .stat .value { font-size: 24px; }
  body.demo-page .statement-balance #summary-stats > .stat:nth-child(4) .value { font-size: 28px; }
  body.demo-page .statement-balance #summary-stats .fig-w em,
  body.demo-page .statement-balance #summary-stats .fig-l em { font-size: 10px; }
  body.demo-page .results-tally-row b { font-size: 34px; }
}

/* ====================================================================== rework (predict)
   The call desk.  The predict page stops being a stack of plain cards and
   borrows the desk's printed language:

   1. THE CONTRACT   the four steps print as one ruled mono line under the
      masthead, numbered the way a statement numbers its notes.
   2. THE BALANCE    the member's own four counts run as one ruled strip,
      streak first and largest, the rest split behind hairlines.
   3. THE STATEMENT  the call desk and the member's record share one sheet
      with a spine between them: the ruler is the centrepiece, the chosen
      degree prints as a ticket.
   4. THE BOARD      standings and today's calls share a two-up row.
   5. THE SETTLED LINE  the public ledger gets the settled-book tally.
   The page's ids and hooks are untouched; this is layout and print.
*/

body.predict-page .predict-stack {
  display: grid;
  gap: 16px;
}
body.predict-page .predict-stack > * { min-width: 0; }

/* The masthead note is one clause, but the generic ui-v2 masthead gives
   its main block `flex: 0 0 auto`, which sizes the item at max-content:
   on a phone the item is wider than the screen and everything under it
   overflows.  The demo carries the fix already. */
body.predict-page .masthead-main {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* --- the contract line ------------------------------------------------ */
body.predict-page .call-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 26px;
  padding: 12px 2px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
body.predict-page .call-rule b {
  color: var(--accent);
  font-weight: 600;
  margin-right: 6px;
}

/* --- the balance line -------------------------------------------------- */
body.predict-page .prediction-figs {
  grid-template-columns: 1.15fr 1fr 0.9fr 0.95fr;
  gap: 0;
}
body.predict-page .prediction-figs .stat { padding: 4px 24px; }
body.predict-page .prediction-figs .stat:nth-child(1) { padding-left: 0; }
body.predict-page .prediction-figs .stat:nth-child(n+2) { border-left: 1px solid var(--line-soft); }
body.predict-page .prediction-figs .stat .value { font-size: 28px; }
body.predict-page .prediction-figs .stat:nth-child(1) .value {
  font-size: 46px;
  letter-spacing: -0.04em;
  color: var(--accent-2);
}
body.predict-page .prediction-figs .stat .label::before { content: none; }

/* --- the statement: call desk | my record ------------------------------ */
body.predict-page .statement {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
body.predict-page .statement > * { min-width: 0; }
body.predict-page .statement-rule {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 11px 26px;
  border-bottom: 1px solid var(--line-soft);
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
body.predict-page .statement-rule span:nth-child(2) { color: var(--text-soft); }
body.predict-page .statement > .dash-cell {
  padding: 22px 26px 24px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.predict-page .statement > .dash-cell + .dash-cell {
  border-left: 1px solid var(--line-soft);
}
body.predict-page .statement .cell-head h2 { font-size: 17px; }
body.predict-page .day-badge {
  margin-left: auto;
  font: 600 10px var(--mono);
  letter-spacing: 0.12em;
  color: var(--accent-2);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- pick a station ----------------------------------------------------- */
body.predict-page .pc-field {
  display: block;
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
body.predict-page select#station-sel {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2);
  color: var(--text);
  border: 0;
  box-shadow: inset 0 0 0 0.5px var(--line);
  border-radius: var(--radius-ctl);
  padding: 11px 12px;
  font: 500 13.5px var(--font);
  outline: none;
}
body.predict-page select#station-sel:focus {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* --- the day line ------------------------------------------------------- */
body.predict-page .pc-callline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
}
body.predict-page .pc-callline .day {
  color: var(--text);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
body.predict-page .pc-callline .centre {
  color: var(--accent-2);
  font-weight: 550;
}

/* --- the ruler: nine exact degrees on a tape ---------------------------- */
body.predict-page .pc-ruler-wrap {
  margin: 14px 0 0;
  padding: 14px 14px 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
body.predict-page .pc-ruler {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
body.predict-page .pc-deg {
  flex: 1 1 0;
  min-width: 0;
  font: 600 22px/1 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-soft);
  background: var(--surface);
  border: 0;
  outline: none;
  box-shadow: inset 0 0 0 0.5px var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 0 11px;
  text-align: center;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
body.predict-page .pc-deg:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
/* The engine's centre carries an amber underline; the reader's pick is
   stamped inverted, like a punched card. */
body.predict-page .pc-deg.centre {
  position: relative;
  color: var(--accent-2);
  box-shadow: inset 0 0 0 0.5px var(--line), inset 0 -3px 0 color-mix(in srgb, var(--accent) 65%, transparent);
}
body.predict-page .pc-deg.picked,
body.predict-page .pc-deg.picked:hover {
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body.predict-page .pc-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font: 600 9.5px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
body.predict-page .pc-scale .mid { color: var(--accent); }
/* The base sheet resets the scale spans to sentence case at 11px; the desk
   prints them like every other ruler caption. */
body.predict-page .pc-scale .lo,
body.predict-page .pc-scale .mid,
body.predict-page .pc-scale .hi {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 9.5px;
  font-weight: 600;
  font-family: var(--mono);
}

/* --- the ticket ---------------------------------------------------------- */
body.predict-page .pc-preview {
  margin: 16px 0 0;
  position: relative;
  overflow: hidden;
  padding: 18px 20px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 0 0 0.5px var(--line);
}
body.predict-page .pc-preview::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
body.predict-page .pc-preview.active::before { opacity: 1; }
body.predict-page .pc-preview .eyebrow {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
body.predict-page .pc-call-deg {
  font-family: var(--font);
  font-size: 64px;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
body.predict-page .pc-call-deg small {
  font-size: 22px;
  color: var(--muted);
  font-weight: 550;
  letter-spacing: 0;
  margin-left: 2px;
}
body.predict-page .pc-call-deg .none {
  color: var(--muted);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
}
body.predict-page .pc-call-deg.guest-title { font-size: 34px; letter-spacing: -0.02em; line-height: 1.05; }
body.predict-page .pc-call-sub { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.55; }
body.predict-page .pc-call-sub b { color: var(--text-soft); font-weight: 600; }

/* --- lock it ------------------------------------------------------------- */
body.predict-page .pc-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
body.predict-page button.primary,
body.predict-page .pc-cta a.primary {
  background: var(--accent);
  color: var(--bg);
  border: 0;
  border-radius: 10px;
  font: 600 13px var(--font);
  padding: 12px 20px;
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  text-decoration: none;
  display: inline-block;
}
body.predict-page button.primary:hover,
body.predict-page .pc-cta a.primary:hover { filter: brightness(1.08); }
body.predict-page button.primary:disabled { opacity: .35; cursor: not-allowed; }
body.predict-page .pc-cta-note { font-size: 12px; color: var(--muted); }
body.predict-page .pc-msg { font-size: 13px; margin-top: 12px; min-height: 16px; }
body.predict-page .pc-msg.ok { color: var(--success); }
body.predict-page .pc-msg.err { color: var(--danger); }
body.predict-page .pc-msg.idle { color: var(--muted); }
body.predict-page .pc-cardlink {
  font-size: 12.5px;
  color: var(--accent-2);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent-2) 45%, transparent);
}
body.predict-page .pc-cardlink:hover { border-bottom-style: solid; }
@media (prefers-reduced-motion: reduce) {
  body.predict-page .pc-preview::before { transition: none; }
}

/* --- my record ------------------------------------------------------------ */
body.predict-page .guest-state { padding: 10px 2px; }
body.predict-page .pc-streak-chip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 0 12px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
body.predict-page .pc-streak-chip b {
  font: 600 40px/0.9 var(--font);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
}
body.predict-page .record-scroll { max-height: 420px; }

/* --- ledgers and boards --------------------------------------------------- */
body.predict-page table.pc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
body.predict-page table.pc-table th {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 12px 9px 0;
  border-bottom: 0.5px solid var(--border);
  white-space: nowrap;
}
body.predict-page table.pc-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 0.5px solid var(--border);
  color: var(--text-soft);
  vertical-align: middle;
}
body.predict-page table.pc-table tr:last-child td { border-bottom: none; }
body.predict-page table.pc-table td.mono-num { font-variant-numeric: tabular-nums; }
body.predict-page table.pc-table td .st { color: var(--text); font-weight: 500; }
body.predict-page .pc-empty { color: var(--muted); font-size: 13px; }
body.predict-page .pc-meta,
body.predict-page .pc-meta-sm { color: var(--muted); font-size: 12px; }

body.predict-page .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
body.predict-page .pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
body.predict-page .pill.won { background: var(--success-soft); color: var(--success); }
body.predict-page .pill.lost { background: var(--danger-soft); color: var(--danger); }
body.predict-page .pill.pending { background: var(--info-soft); color: var(--info); }

body.predict-page .pc-actions { display: flex; gap: 6px; white-space: nowrap; }
body.predict-page .pc-mini {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
body.predict-page .pc-mini:hover {
  color: var(--text-soft);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
body.predict-page .pc-mini.done {
  color: var(--success);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--success) 40%, var(--line));
}

/* --- the board: standings + today ----------------------------------------- */
body.predict-page .activity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: 14px;
  align-items: start;
}
body.predict-page .activity-grid > * { min-width: 0; }
body.predict-page .cell-head h2 { font-size: 15px; }
body.predict-page .cell-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
body.predict-page .board-scroll,
body.predict-page .today-scroll { max-height: 460px; }

body.predict-page .pc-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
body.predict-page .pc-pod {
  box-shadow: inset 0 0 0 0.5px var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
body.predict-page .pc-pod .rank {
  font: 600 10px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
body.predict-page .pc-pod .who {
  font-weight: 600;
  font-size: 16px;
  margin-top: 10px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.predict-page .pc-pod .big {
  font-size: 32px;
  font-weight: 600;
  color: var(--accent-2);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
body.predict-page .pc-pod .big small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
  letter-spacing: 0;
}
body.predict-page .pc-pod .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}
body.predict-page .pc-pod.first {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--line));
}
body.predict-page .pc-pod.first::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
body.predict-page .pc-pod.first .rank { color: var(--accent); }

/* --- the settled line and its tally ---------------------------------------- */
body.predict-page .sec-head { margin: 0 0 14px; }
body.predict-page .ledger-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
}
body.predict-page .ledger-head .results-copy { min-width: 0; max-width: 74ch; }
body.predict-page .ledger-head h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body.predict-page .ledger-head p {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
body.predict-page .results-tally { flex: 0 0 auto; min-width: 200px; }
body.predict-page .results-tally-kicker {
  display: block;
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
body.predict-page .results-tally-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
body.predict-page .results-tally-row b {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
body.predict-page .results-tally-wins b { color: var(--success); }
body.predict-page .results-tally-losses b { color: var(--danger); }
/* Before anything settles the figures print as muted dashes, not as a
   false-coloured score. */
body.predict-page .results-tally-wins b.pending,
body.predict-page .results-tally-losses b.pending { color: var(--muted); }
body.predict-page .results-tally-row em {
  font-style: normal;
  font: 600 11px var(--mono);
  color: var(--muted);
  margin-left: 2px;
}
body.predict-page .results-tally-sep { color: var(--muted); font-size: 22px; line-height: 1; transform: translateY(-4px); }
body.predict-page .results-tally-rate { margin-top: 9px; font-size: 12px; color: var(--muted); }
body.predict-page .results-tally-bar {
  margin-top: 8px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 22%, var(--surface-2));
  overflow: hidden;
}
body.predict-page .results-tally-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 55%, transparent));
  transition: width 0.5s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  body.predict-page .results-tally-bar span { transition: none; }
}
body.predict-page .ledger-scroll { max-height: 560px; }

/* --- the printed notes ------------------------------------------------------ */
body.predict-page .pc-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
  border-left: 0;
  border-top: 1px solid var(--line-soft);
  margin: 0;
  padding: 14px 2px 0;
}
body.predict-page #bench-note a { color: var(--accent-2); text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--accent-2) 45%, transparent); }
body.predict-page #bench-note a:hover { border-bottom-style: solid; }

/* --- narrow sheets ----------------------------------------------------------- */
@media (max-width: 980px) {
  body.predict-page .statement { grid-template-columns: minmax(0, 1fr); }
  body.predict-page .statement > .dash-cell { padding: 20px 22px 22px; }
  body.predict-page .statement > .dash-cell + .dash-cell {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
}
@media (max-width: 900px) {
  body.predict-page .activity-grid { grid-template-columns: minmax(0, 1fr); }
  body.predict-page .prediction-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.predict-page .prediction-figs .stat { padding: 4px 0; border-left: 0; }
  body.predict-page .prediction-figs .stat:nth-child(2),
  body.predict-page .prediction-figs .stat:nth-child(4) {
    border-left: 1px solid var(--line-soft);
    padding-left: 22px;
  }
  body.predict-page .prediction-figs .stat:nth-child(3),
  body.predict-page .prediction-figs .stat:nth-child(4) {
    border-top: 1px solid var(--line-soft);
    margin-top: 14px;
    padding-top: 14px;
  }
}
@media (max-width: 720px) {
  body.predict-page .call-rule { letter-spacing: 0.1em; gap: 4px 18px; }
  body.predict-page .statement-rule { padding: 10px 18px; letter-spacing: 0.1em; }
  body.predict-page .ledger-head { flex-direction: column; align-items: flex-start; }
  body.predict-page .results-tally-row b { font-size: 36px; }
  body.predict-page .results-tally-sep { transform: none; font-size: 20px; }
  body.predict-page .prediction-figs .stat:nth-child(1) .value { font-size: 40px; }
  body.predict-page .prediction-figs .stat .value { font-size: 26px; }
  body.predict-page .pc-call-deg { font-size: 52px; }
  body.predict-page .pc-deg { font-size: 18px; padding: 12px 0 9px; }
  body.predict-page .pc-podium { grid-template-columns: minmax(0, 1fr); }
  body.predict-page .pc-pod .big { font-size: 28px; }
}
@media (max-width: 430px) {
  body.predict-page .pc-deg { font-size: 15px; padding: 10px 0 8px; }
  body.predict-page .pc-ruler-wrap { padding: 10px 8px 8px; }
  body.predict-page .pc-call-deg { font-size: 44px; }
  body.predict-page .pc-call-sub { font-size: 12px; }
}

/* ==========================================================================
   EDGE FINDER — the scan desk.  The whole market in four beats: the scan
   contract, an inverted departure-board readout, the engine's answer, the
   underpriced sheet, then one board per station.  Everything the page
   script writes into lands on these shelves; ids are its contract.
   ========================================================================== */

body.edgefinder-page .finder-stack {
  display: grid;
  /* The clamp keeps the wide mono sheets from blowing the single column
     out past the viewport; the sheets scroll inside their own wraps. */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

/* --- the scan contract --------------------------------------------------- */
/* The four moves the number makes: forecast, ask, difference, record. */
body.edgefinder-page .scan-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 26px;
  padding: 12px 2px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
body.edgefinder-page .scan-rule b {
  color: var(--accent);
  font-weight: 600;
  margin-right: 6px;
}

/* --- the readout ---------------------------------------------------------- */
/* The board every scan prints first: one inverted strip, four segments,
   the live signal beaming from the first.  Skeletons load inside it. */
body.edgefinder-page .readout {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: 0;
  overflow: hidden;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
body.edgefinder-page .readout > .stat {
  min-width: 0;
  padding: 20px 22px 18px;
  margin: 0;
  background: transparent;
}
body.edgefinder-page .readout > .stat + .stat {
  border-left: 1px solid color-mix(in srgb, var(--bg) 16%, transparent);
}
/* The live segment carries the beam, like a runway light. */
body.edgefinder-page .readout > .stat:nth-child(1) {
  box-shadow: inset 0 3px 0 var(--accent);
}
/* The desk dot marks one live signal; kill the base card's dot elsewhere. */
body.edgefinder-page .readout > .stat:nth-child(n+2) .label::before {
  content: none;
}
body.edgefinder-page .readout .label {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 60%, var(--text));
}
body.edgefinder-page .readout > .stat:nth-child(1) .label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: 1px;
}
body.edgefinder-page .readout .value {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bg);
}
body.edgefinder-page .readout .sub {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--bg) 62%, var(--text));
}
body.edgefinder-page .readout .skeleton {
  min-height: 112px;
  background: color-mix(in srgb, var(--bg) 10%, transparent);
}
/* An unavailable scan is printed on the board itself, not on a card. */
body.edgefinder-page .readout .error-state {
  grid-column: 1 / -1;
  padding: 24px 22px;
  background: transparent;
  box-shadow: none;
  text-align: left;
  color: color-mix(in srgb, var(--danger) 82%, var(--bg));
}
body.edgefinder-page .readout .empty-state {
  grid-column: 1 / -1;
  padding: 24px 22px;
  background: transparent;
  box-shadow: none;
  text-align: left;
  color: color-mix(in srgb, var(--bg) 70%, var(--text));
}

/* --- section heads -------------------------------------------------------- */
body.edgefinder-page .sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 2px 0 12px;
}
body.edgefinder-page .sec-head h2 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
body.edgefinder-page .sec-head p {
  max-width: 86ch;
}

body.edgefinder-page .cell-head h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

body.edgefinder-page .cell-head .cell-meta {
  margin-left: auto;
  text-align: right;
}

/* the region tabs ride the sheet's head, like index tabs */
body.edgefinder-page .region-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
body.edgefinder-page .region-tabs .chip {
  font: 600 10.5px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

/* sort + edge toggle ride the opportunities head */
body.edgefinder-page .sheet-ctl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.edgefinder-page .sheet-ctl label {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- the sheets ----------------------------------------------------------- */
body.edgefinder-page .table-wrap {
  overflow-x: auto;
}
body.edgefinder-page table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
body.edgefinder-page table.data th {
  padding: 2px 14px 9px 0;
  border-bottom: 1px solid var(--line);
  font: 600 9.5px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: bottom;
}
body.edgefinder-page table.data th.num,
body.edgefinder-page table.data td.num {
  text-align: right;
}
body.edgefinder-page table.data td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--text-soft);
}
body.edgefinder-page table.data tbody tr:hover td {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
body.edgefinder-page table.data a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
body.edgefinder-page table.data a:hover {
  color: var(--accent);
}

/* status badges print like desk stamps */
body.edgefinder-page .badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font: 600 10px var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-soft);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
body.edgefinder-page .badge.success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 7%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--success) 35%, transparent);
}
body.edgefinder-page .badge.warn {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 35%, transparent);
}
body.edgefinder-page .badge.info {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent-2) 35%, transparent);
}
body.edgefinder-page .badge.dim {
  color: var(--muted);
}

/* quiet verdict words: still legible, no shout */
body.edgefinder-page .conf-high,
body.edgefinder-page .conf-medium,
body.edgefinder-page .conf-low {
  font: 600 10px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.edgefinder-page .conf-high b,
body.edgefinder-page .conf-medium b,
body.edgefinder-page .conf-low b {
  margin-right: 2px;
}

/* --- the boards ----------------------------------------------------------- */
/* Thirty-seven ticker keys; the picked one lights up like a runway. */
body.edgefinder-page .station-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
}
body.edgefinder-page .station-card {
  display: grid;
  gap: 4px;
  align-content: start;
  justify-items: start;
  padding: 11px 13px 10px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px var(--line);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
body.edgefinder-page .station-card:hover {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
body.edgefinder-page .station-card.selected {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--accent), inset 3px 0 0 var(--accent);
}
body.edgefinder-page .station-card .sc-code {
  font: 700 12.5px var(--mono);
  letter-spacing: 0.02em;
  color: var(--text);
}
body.edgefinder-page .station-card .sc-note {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}
body.edgefinder-page .station-card .sc-edge {
  font: 600 10.5px var(--mono);
  letter-spacing: 0.02em;
  color: var(--muted);
}
body.edgefinder-page #station-detail-panel {
  margin-top: 12px;
}
body.edgefinder-page .scan-meta {
  margin-top: 14px;
  font: 600 10px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- quiet states --------------------------------------------------------- */
body.edgefinder-page .empty-state,
body.edgefinder-page .error-state {
  padding: 20px 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--line);
  text-align: left;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* the scan controls ride the masthead */
body.edgefinder-page .masthead-main {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
body.edgefinder-page .last-updated {
  font: 600 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
body.edgefinder-page .masthead-actions .ctl {
  padding: 7px 12px;
  font-size: 11.5px;
}

body.edgefinder-page .dash-cell {
  width: 100%;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  body.edgefinder-page .readout {
    grid-template-columns: 1fr 1fr;
  }
  body.edgefinder-page .readout > .stat:nth-child(odd) {
    border-left: 0;
  }
  body.edgefinder-page .readout > .stat:nth-child(n+3) {
    border-top: 1px solid color-mix(in srgb, var(--bg) 16%, transparent);
  }
  body.edgefinder-page .readout .value { font-size: 30px; }
}
@media (max-width: 720px) {
  body.edgefinder-page .dash-cell { padding: 18px 18px 20px; }
  body.edgefinder-page .region-tabs { justify-content: flex-start; }
}
@media (max-width: 480px) {
  body.edgefinder-page .readout {
    grid-template-columns: 1fr;
  }
  body.edgefinder-page .readout > .stat,
  body.edgefinder-page .readout > .stat:nth-child(odd) {
    border-left: 0;
  }
  body.edgefinder-page .readout > .stat:nth-child(n+2) {
    border-top: 1px solid color-mix(in srgb, var(--bg) 16%, transparent);
  }
  body.edgefinder-page .readout > .stat { padding: 16px 18px 15px; }
  body.edgefinder-page .readout .value { font-size: 27px; }
  body.edgefinder-page .scan-rule { gap: 4px 16px; letter-spacing: 0.1em; }
  body.edgefinder-page .station-card-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
}

/* ==========================================================================
   SCORECARDS — the verification report.  The engine is graded in public,
   and the page reads like the printed record of that grading: the chain
   of custody, the scoreboard, the region-by-period grade grid as an array
   of instrument lamps, four numbered figures like a lab report, and the
   report log at the foot.  Everything the page script writes into lands
   on these shelves; the ids are its contract.
   ========================================================================== */

body.scorecards-page .score-stack {
  display: grid;
  /* The clamp keeps the wide mono tables from blowing the single column
     out past the viewport; the grids scroll inside their own wraps. */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
body.scorecards-page .score-stack > * { min-width: 0; }
body.scorecards-page .dash-cell { width: 100%; }

/* The masthead note is a full clause; let it shrink instead of pushing
   the report-level tabs off the line. */
body.scorecards-page .masthead-main {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
body.scorecards-page .masthead-note { max-width: 72ch; }

/* --- the report level + the selector chips --------------------------------- */
body.scorecards-page .kind-tabs {
  display: inline-flex;
  gap: 6px;
}
body.scorecards-page .kind-tabs .chip,
body.scorecards-page .sc-wire .chip,
body.scorecards-page #heatmap-metric .chip {
  font: 600 10.5px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

/* --- the chain of custody ---------------------------------------------------
   Four printed steps: issued, paired, graded, published. */
body.scorecards-page .report-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 26px;
  padding: 12px 2px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
body.scorecards-page .report-rule b {
  color: var(--accent);
  font-weight: 600;
  margin-right: 6px;
}

/* --- the scope wire --------------------------------------------------------- */
/* The region selection re-queries the whole report; it rides its own wire. */
body.scorecards-page .sc-wire {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 0 2px;
}
body.scorecards-page .wire-label {
  margin-right: 2px;
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
body.scorecards-page .sc-wire .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --- the scoreboard ----------------------------------------------------------
   Eight tiles: the first four carry the verdicts in big figures, the last
   four the working conditions that qualified them.  The script writes the
   whole sheet; the hairlines make it read like one ruled page. */
body.scorecards-page .kpi-sheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
body.scorecards-page .kpi-sheet .stat {
  min-width: 0;
  padding: 0 20px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body.scorecards-page .kpi-sheet .stat:first-child,
body.scorecards-page .kpi-sheet .stat:nth-child(4n+1) {
  padding-left: 0;
  border-left: 0;
}
body.scorecards-page .kpi-sheet .stat:last-child { padding-right: 0; }
body.scorecards-page .kpi-sheet .stat:nth-child(n+5) {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
body.scorecards-page .kpi-sheet .stat .label {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
body.scorecards-page .kpi-sheet .stat .value {
  margin-top: 10px;
  font-family: var(--font);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
/* The second row are conditions, not verdicts: quieter figures. */
body.scorecards-page .kpi-sheet .stat:nth-child(n+5) .value {
  font-size: 25px;
  letter-spacing: -0.02em;
  color: var(--text-soft);
}
body.scorecards-page .kpi-sheet .stat .sub {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
/* The script's one-line read of the period closes the sheet. */
body.scorecards-page .kpi-foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}
body.scorecards-page .kpi-foot:empty { margin: 0; padding: 0; border-top: 0; }
/* While the report loads the sheet prints one pulse, not a card. */
body.scorecards-page .kpi-sheet > .skeleton { min-height: 96px; border-radius: var(--radius); }

/* --- section heads ----------------------------------------------------------- */
body.scorecards-page .sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 2px 0 12px;
}
body.scorecards-page .sec-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
body.scorecards-page .sec-head p {
  margin: 6px 0 0;
  max-width: 86ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
body.scorecards-page .cell-head h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
}
body.scorecards-page .cell-head .cell-note {
  font-size: 11.5px;
  color: var(--muted);
}
body.scorecards-page .cell-head .cell-meta {
  margin-left: auto;
  text-align: right;
}

/* --- the tables (ledger + nested detail) ------------------------------------- */
body.scorecards-page table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
/* Matched against the ui-v2 table rule one line at a time: the ui-v2
   block scoped deeper (.table-wrap table.data) outranks a plain body-page
   scope, so these re-state it one level deeper and win by file order. */
body.scorecards-page .table-wrap table.data th {
  padding: 2px 10px 9px 0;
  border-bottom: 1px solid var(--line);
  font: 600 9.5px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: bottom;
}
body.scorecards-page table.data th.num,
body.scorecards-page table.data td.num { text-align: right; }
body.scorecards-page .table-wrap table.data th:last-child,
body.scorecards-page .table-wrap table.data td:last-child { padding-right: 0; }
body.scorecards-page .table-wrap table.data td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--text-soft);
}
body.scorecards-page table.data td .muted { font-size: 11px; }
body.scorecards-page .table-wrap {
  overflow-x: auto;
}

/* --- the figures ---------------------------------------------------------------
   Numbered like a lab report: a stamped figure number, a one-sentence
   legend, then the record itself. */
body.scorecards-page .fig-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px;
}
body.scorecards-page .fig-no {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 700 9.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.scorecards-page .fig-copy { min-width: 0; }
body.scorecards-page .fig-copy h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
body.scorecards-page .fig-copy p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 96ch;
}
body.scorecards-page .chart-block + .chart-block { margin-top: 16px; }
/* The chart's own left pad is 46px; the labels line up with the plot. */
body.scorecards-page .chart-label {
  display: block;
  margin: 0 0 6px 46px;
  font: 600 9.5px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
body.scorecards-page .chart-box { position: relative; width: 100%; }
body.scorecards-page .chart-box > .skeleton { min-height: 210px; border-radius: var(--radius); }
body.scorecards-page .chart-box > .empty-state {
  min-height: 120px;
  display: flex;
  align-items: center;
}

/* the bar strips print as range strips with rounded ends */
body.scorecards-page .range-track {
  min-width: 120px;
  height: 9px;
  border-radius: 999px;
}
body.scorecards-page .range-band { opacity: 1; }
body.scorecards-page .range-center {
  top: -2px;
  height: 13px;
  background: var(--muted);
}

/* --- the grade grid -------------------------------------------------------------
   One lamp per region per period.  The red-to-green colour is printed by
   the script inline; the CSS only sets the housing.  The lamps sit as an
   instrument array, spaced like a panel, not ruled like a table. */
body.scorecards-page table.data.hm-table {
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 11px;
}
body.scorecards-page table.data.hm-table th,
body.scorecards-page table.data.hm-table td {
  padding: 8px 10px;
  border-bottom: 0;
  white-space: nowrap;
}
body.scorecards-page table.data.hm-table th {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: bottom;
}
body.scorecards-page table.data.hm-table th:first-child { text-align: left; padding-left: 2px; }
body.scorecards-page table.data.hm-table .hm-region {
  padding-right: 14px;
  font: 600 11px var(--mono);
  letter-spacing: 0.02em;
  color: var(--text-soft);
}
body.scorecards-page table.data.hm-table td.hm-cell {
  min-width: 62px;
  border-radius: 7px;
  text-align: center;
  font: 600 11px var(--mono);
  font-variant-numeric: tabular-nums;
}
body.scorecards-page #heatmap > .skeleton { min-height: 150px; border-radius: var(--radius); }

/* --- the ledger ------------------------------------------------------------------ */
body.scorecards-page .ledger-cell .panel-body { padding: 0; }
body.scorecards-page .ledger-cell .panel-body > .skeleton { min-height: 160px; border-radius: var(--radius); }
/* The log is wide; a slightly smaller face keeps all thirteen columns
   on one shelf at full width instead of clipping the last one. */
body.scorecards-page .ledger-cell table.data { font-size: 11.5px; }
body.scorecards-page .ledger-cell table.data td .muted { font-size: 10.5px; }
body.scorecards-page .ledger-cell .chip {
  padding: 7px 13px;
  border-radius: 999px;
  font: 600 10.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* an expandable record; the drawer it opens tints like a pulled sheet */
body.scorecards-page tr.sc-row { cursor: pointer; }
body.scorecards-page tr.sc-row:hover td {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
body.scorecards-page tr.sc-detail > td {
  background: color-mix(in srgb, var(--surface-2) 42%, transparent);
}
body.scorecards-page tr.sc-detail table.data { margin-top: 0; font-size: 11.5px; }
body.scorecards-page tr.sc-detail table.data th { padding-bottom: 7px; }
body.scorecards-page tr.sc-detail table.data td { padding: 8px 10px 8px 0; }
body.scorecards-page .table-wrap::-webkit-scrollbar { height: 8px; }
body.scorecards-page .table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
}
body.scorecards-page .table-wrap::-webkit-scrollbar-track { background: transparent; }

/* badges print like desk stamps */
body.scorecards-page .badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font: 600 10px var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-soft);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
body.scorecards-page .badge.success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 7%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--success) 35%, transparent);
}
body.scorecards-page .badge.info {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent-2) 35%, transparent);
}

body.scorecards-page .delta-pill { border-radius: 999px; font-size: 10.5px; }

body.scorecards-page .empty-state,
body.scorecards-page .error-state {
  padding: 20px 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--line);
  text-align: left;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* --- narrow sheets ----------------------------------------------------------------- */
@media (max-width: 980px) {
  body.scorecards-page .kpi-sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px;
  }
  body.scorecards-page .kpi-sheet .stat {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }
  body.scorecards-page .kpi-sheet .stat:nth-child(2n) {
    border-left: 1px solid var(--line-soft);
    padding-left: 22px;
  }
  body.scorecards-page .kpi-sheet .stat:nth-child(n+3) {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
  }
}
@media (max-width: 720px) {
  body.scorecards-page .dash-cell { padding: 18px 18px 20px; }
  body.scorecards-page .report-rule { gap: 4px 16px; letter-spacing: 0.1em; }
  body.scorecards-page .kpi-sheet { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.scorecards-page .kpi-sheet .stat:nth-child(2n) {
    border-left: 0;
    padding-left: 0;
  }
  body.scorecards-page .kpi-sheet .stat:nth-child(n+2) {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
  }
  body.scorecards-page .kpi-sheet .stat .value { font-size: 30px; }
  body.scorecards-page .kpi-sheet .stat:nth-child(n+5) .value { font-size: 22px; }
  body.scorecards-page table.data.hm-table { border-spacing: 2px; }
  body.scorecards-page table.data.hm-table th,
  body.scorecards-page table.data.hm-table td { padding: 6px 7px; }
  body.scorecards-page table.data.hm-table td.hm-cell { min-width: 52px; font-size: 10px; }
}
@media (max-width: 430px) {
  body.scorecards-page .fig-head { flex-direction: column; gap: 8px; }
  body.scorecards-page .fig-head .fig-no { margin-top: 0; align-self: flex-start; }
  body.scorecards-page table.data.hm-table td.hm-cell { min-width: 44px; padding: 5px 6px; font-size: 9.5px; }
  body.scorecards-page table.data.hm-table .hm-region { padding-right: 8px; font-size: 10px; }
}