/* PREMIUM: the one section with a real time axis, and now with a real window.
 *
 * ══ THE INK BUDGET, AND WHY IT IS WEIGHT AND NOT HUE ═══════════════════════
 *
 *   --pos and --neg are DIRECTION here (bought / sold) and mean that everywhere
 *   else, so no mark on this screen is drawn in them.
 *
 *   --accent IS THE LIVE THING YOU ARE MOVING, and it is spent on exactly two
 *   objects: the WINDOW you are dragging (the rail's filled span and its two
 *   thumbs) and the DAY you have selected (the caret, the changed-hands line,
 *   the bar's top edge and the value label above it). --mint resolves to the
 *   same value as --accent in this theme, which is why the day marks below
 *   still name it: they are one hue with one meaning, "where you are".
 *
 *   HATCH IS THE ONE TEXTURE AND IT MEANS "WE CANNOT SAY". It is spent on the
 *   cap of premium no venue named a counterparty for, and on a day with no
 *   changed-hands figure at all, and on nothing else.
 *
 *   THE FIVE-WEIGHT VENUE RAMP IS GONE (2026-09-01). It encoded venue identity
 *   inside the bar, across a window where one venue is 98.4% and the smallest
 *   is 0.11%. Venues are named in the coverage card and in the readout with
 *   THEIR OWN MARKS from marks.js, next to exact dollars, which is a reading
 *   that works at 0.11%. The bar is one ink, because it is one quantity.
 *
 * ══ THE CARD GRID, AND THE ONE RULE IT EXISTS TO OBEY ══════════════════════
 *
 *   A KPI CARD WITH A BIG NUMBER AND NO POPULATION BESIDE IT IS THE MOST
 *   DANGEROUS OBJECT THIS SECTION COULD SHIP. So the card is FOUR slots, not
 *   one, and the last two are not optional:
 *
 *     .pm-kpi-pop  WHAT POPULATION, WHAT WINDOW   --t-xs, --ink3, and FIRST
 *     .pm-kpi-v    the figure, in full            --t-hero on the lead, --t-lg else
 *     .pm-kpi-u    what the figure counts         --t-sm, --ink
 *     .pm-kpi-say  the clause a label cannot hold --t-sm, --ink2
 *     .pm-kpi-pin  does it follow the window      --t-xs, uppercase, on the floor
 *
 *   THE ORDER IS system.css's, NOT THIS SHEET'S INVENTION. DESIGN-SYSTEM.md
 *   states it as the system's one rule: "on this product of what, over what
 *   comes before the quantity". A card that leads with the quantity is the
 *   trader-dashboard card, and this audience is the eleven venues and their
 *   investors. .ds-stat is not used directly only because system.css lives on a
 *   sibling branch and markup written against it here could not be checked on a
 *   PNG; the slot order, the sizes and the failure rule are taken verbatim.
 *
 *   premium.js throws rather than render a card without .pm-kpi-pop, because a
 *   population line that is merely conventional gets dropped the first time
 *   somebody is in a hurry.
 *
 *   .pm-card.fixed IS A CARD THAT DOES NOT FOLLOW THE WINDOW. It is separated
 *   three ways and only one of them is hue, on the same principle the payoffs
 *   deck separates a right from an obligation: the WORDS on the pin say so, the
 *   pin gets a real outlined badge where the others get plain text, and the
 *   figure sits one ink step back. Any one of the three survives greyscale, a
 *   screenshot, and a reader who does not separate two hues. Without it, four
 *   numbers in a row where one silently refuses to move is a lie told by
 *   adjacency rather than by arithmetic.
 *
 *   THE DIVISIONS ARE 1px GAPS OVER A --line GROUND, which is this app's own
 *   way of drawing a division without a second border, and it is what payoff.js
 *   uses. There is no card border, no radius and no shadow: instrument.css pins
 *   border-radius and box-shadow to 0 / none with !important on
 *   `body *:not(svg):not(svg *)` and an important declaration beats a normal
 *   one at ANY specificity, so a raised card is not available here and does not
 *   need to be.
 *
 * ══ TOKENS THAT DO NOT EXIST ═══════════════════════════════════════════════
 *
 *   --s1, --s2, --s3, --fill-1 and --fill-2 are ALL `transparent` in this
 *   theme, in both light and dark, on purpose. The first cut of this sheet
 *   painted the bar with --s3, which rendered it invisible and left the chart
 *   showing the interior alone: a chart that looked correct, threw no error,
 *   and was silently missing its own series. Nothing in this file may reach for
 *   them, and anything new has to be checked against a RENDERED PAGE.
 *
 *   --accent-ink RESOLVES TO THE SAME VALUE AS --accent in this theme, so
 *   painting it on an accent fill prints the accent on the accent and the
 *   element renders as a blank blob. Anything sitting ON the accent takes --bg.
 *
 *   --gold-* are from a retired palette and are the wrong hue here.
 *
 * ══ WHY THERE IS !important ON TYPE ════════════════════════════════════════
 *
 *   instrument.css:343 pins `body *:not(svg):not(svg *)` to var(--t-sm),
 *   weight 400, no tracking, radius 0 and shadow none, with !important. That is
 *   a correct normalisation layer and this section is not exempting itself from
 *   the scale: EVERY SIZE BELOW IS ONE OF THE FIVE THE SCALE DEFINES, --t-xs,
 *   --t-sm, --t-md, --t-lg, --t-hero. NO NEW SIZE IS INVENTED. What the
 *   !important is doing is claiming a ROLE, because a headline that renders at
 *   label size is the wall of numbers the owner correctly complained about.
 *   Class selectors are (0,1,0) and the pin is (0,0,3), so !important plus a
 *   class wins. SVG is excluded from the pin, so nothing in the chart needs it.
 *
 * ══ MONEY IS PRINTED IN FULL AND THAT SETS THE TYPE, NOT THE OTHER WAY ═════
 *
 *   "$59.6M" was on this screen and the owner could not read it; it is also two
 *   digits short of a column anyone can add up. Fourteen characters of money is
 *   therefore a LAYOUT CONSTRAINT, and it is why the lead card is full width
 *   rather than half: measured on the rendered page at a 1030px host,
 *   $59,641,031.66 at --t-hero is about 585px, which fits a full-width card and
 *   does not fit a half. Below 760px the lead figure drops to --t-lg, which is
 *   the next size the scale actually has, because at --t-hero on a 390px phone
 *   the same string is wider than the screen. Both were verified on the PNG,
 *   not inferred from the token.
 */

.pm-wait { color: var(--ink2); padding: 40px 0; text-align: center; }
.pm-unk {
  border-bottom: 1px dotted var(--ink3); cursor: help; color: var(--ink3);
}
/* ══ 1. THE CARD GRID ══════════════════════════════════════════════════════
   SIX TRACKS, AND THE SPANS ARE SET BY WHAT THE FIGURE MEASURES, not by taste.

     the lead card              span 6   $59,641,031.66 at --t-hero needs it
     changed hands              span 2   $36,983,852.26 at --t-lg is ~231px
     bought by three            span 2   a percentage; two is generous
     sold by three              span 2   the pinned one, same width as its pair
     the coverage card          span 6   three venues, each with money in full

   minmax(0, 1fr) AND NOT 1fr. A grid track's default minimum is auto, which is
   min-content, so one long unbreakable figure in one card silently widens its
   whole column and pushes the row past the container with the document
   reporting no overflow at all. This is the same class of defect the readout's
   own comment records about minmax(min(300px, 100%), 1fr). */
.pm-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 20px 0 22px;
}
.pm-card {
  grid-column: span 2;
  background: var(--bg);
  padding: 16px 18px 18px;
  min-width: 0;
  /* FLEX AND NOT GRID, for one reason: the pin has to sit on the card's floor
     so that the three pins in a row share a baseline, and `margin-top: auto` on
     the last child is how a flex column does that. In a grid the cards would
     stretch and the pins would float wherever their own row landed. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.pm-card.lead, .pm-card.full { grid-column: span 6; }

/* ── THE SLOTS, IN THE ORDER system.css ARGUES FOR ───────────────────────
   POPULATION AND WINDOW FIRST, FIGURE SECOND, UNIT THIRD. On this product "of
   what, over what" comes before the quantity, and a card that leads with the
   quantity is the trader-dashboard card the audience is not. DESIGN-SYSTEM.md
   states it as the system's one rule and .ds-stat draws a --neg failure when
   the population slot is missing; card() in premium.js throws instead, which is
   the same refusal one layer earlier.

   THESE ARE pm- CLASSES AND NOT .ds-stat, and that is a branch fact rather than
   a disagreement. system.css lives on design/system and is not in this
   worktree, so markup written against .ds-stat here would render unstyled and
   could not be checked on a PNG. The slot ORDER, the sizes and the rule are
   taken from it verbatim; whoever merges the two branches can swap .pm-card for
   .ds-stat in one function. */
html body .pm-kpi-pop {
  margin: 0; color: var(--ink3); line-height: 1.45;
  font-size: var(--t-xs) !important;
  /* TWO LINES OF ROOM, RESERVED. Three figures in a row whose population lines
     are one, two and three lines long put their three figures at three
     different heights, and a row of stat figures that does not share a baseline
     reads as three unrelated objects rather than three answers to one question.
     Two lines is what these actually run to at every width checked; a longer
     one still pushes its own figure down, which is the honest trade, because
     the alternative is truncating a population. */
  min-height: 2.9em;
}
/* THE WINDOW IS THE PART OF THE POPULATION A READER SCANS FOR, so it is one ink
   step up inside its own line. The weight has to be restated on the child:
   instrument.css:343 pins font-weight to 400 with !important on every element,
   so a 600 declared on the parent does not survive into a nested <b>. Measured,
   not assumed: the window rail's own range read back at 400 for exactly this
   reason before it was restated on the child. */
html body .pm-kpi-pop b { color: var(--ink2); font-weight: 600 !important; }

/* THE FIGURE. tabular-nums is not pinned by either blanket and is the one thing
   that makes a column of these readable: without it a 1 is narrower than a 7
   and the separators do not line up between two cards in the same row.
   instrument.css:1883 pins font-family to --sans on every element, so the face
   here is Inter and not the mono stack whatever a comment elsewhere says; Inter
   carries tabular figures, so the alignment is had without an !important fight
   over the face. Verified on the render: 76px Inter 600. */
html body .pm-kpi-v {
  /* ONE HOME FOR THE TRACKING. The odometer's column width is 1ch plus this,
     which is exactly the advance a digit had before the figure was split into
     columns, so splitting it changed the width of the figure by nothing. Two
     literals would drift and the figure would silently get wider. */
  --pm-kpi-tr: -0.015em;
  margin: 3px 0 0; color: var(--ink);
  font-size: var(--t-lg) !important;
  font-weight: 600 !important;
  letter-spacing: var(--pm-kpi-tr) !important;
  line-height: 1.04;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pm-card.lead .pm-kpi-v { font-size: var(--t-hero) !important; line-height: .96; }

/* ── THE ODOMETER ──────────────────────────────────────────────────────────
   The hero figure, one digit per column, each column clipped to a single cell
   so a roll can only ever show a digit sliced against the window edge and
   never a clean number that was not measured.

   --pm-odo-h IS THE ONLY PLACE THE CELL HEIGHT IS WRITTEN. premium.js reads it
   back out of the computed style and translates by a whole multiple of it. A
   second literal in the JS is how a reel comes to rest between two digits.

   THE INHERIT BLOCK IS NOT DEFENSIVE STYLING, IT IS THE FIREWALL. instrument.
   css sets font-family, font-size, font-weight and letter-spacing on
   `body *:not(svg):not(svg *)` with !important, and an important declaration
   beats a normal one at any specificity, so every span inside this figure
   would otherwise render at the app's 15px body size and the hero would
   collapse into a row of small digits beside a large dollar sign. `html body
   .pm-kpi-v.odo <descendant>` is (0,3,2) and important, which is what it takes
   to win. `.pm-kpi-v.odo` ITSELF IS DELIBERATELY NOT IN THAT LIST: it has to
   keep --t-hero from the rule above, and `font-size: inherit` on it would take
   the card's size instead.

   letter-spacing goes to 0 inside the reel and the column is exactly 1ch, so
   the advance of every digit is the advance of "0". That is only true because
   .pm-kpi-v already sets font-variant-numeric: tabular-nums, which is
   inherited here and is what makes the columns fixed.

   NO @keyframes. The roll is the Web Animations API, so this sheet adds no
   document-global animation name. Nothing in app/static uses a pm-odo-*
   keyframe and nothing here creates one. */
html body .pm-kpi-v.odo .pm-odo,
html body .pm-kpi-v.odo .pm-odo-s,
html body .pm-kpi-v.odo .pm-odo-d,
html body .pm-kpi-v.odo .pm-odo-r,
html body .pm-kpi-v.odo .pm-odo-r > span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  font-variant-numeric: tabular-nums;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .pm-kpi-v.odo {
  --pm-odo-h: 1.06em;
  --pm-odo-w: calc(1ch + var(--pm-kpi-tr));
  /* The flex line replaces the text line, so the paragraph's own wrapping
     rules no longer apply to it. */
  overflow-wrap: normal;
}
.pm-kpi-v.odo .pm-odo {
  display: inline-flex;
  align-items: flex-start;
  /* Every child is exactly one cell tall, so their boxes and therefore their
     baselines coincide without any baseline arithmetic. */
}
/* THE DOLLAR SIGN, THE COMMAS AND THE POINT DO NOT ROLL. They are static boxes
   in the same line at the same cell height, which is what stops the figure
   shearing while the digits move. */
html body .pm-kpi-v.odo .pm-odo-s {
  display: block;
  height: var(--pm-odo-h);
  line-height: var(--pm-odo-h);
  letter-spacing: inherit !important;
}
/* THE WINDOW. One cell tall, one character wide, clipped. Fixed width is what
   makes a roll incapable of reflowing anything: the column is 1ch whichever
   digits are passing through it. */
html body .pm-kpi-v.odo .pm-odo-d {
  display: block;
  width: var(--pm-odo-w);
  height: var(--pm-odo-h);
  overflow: hidden;
  /* THE TRACKING STAYS ON THE CELL rather than being taken out of the box, so
     the advance of the character inside equals the width of the box exactly.
     Narrowing the box instead would leave scrollWidth a pixel over clientWidth
     on every column and make the clipping check unreadable. */
  letter-spacing: var(--pm-kpi-tr) !important;
}
/* THE REEL. Transform only. Its resting transform is written inline by
   premium.js before the animation is created, so a cancelled roll snaps to the
   measured digit rather than stopping between two. */
html body .pm-kpi-v.odo .pm-odo-r {
  display: block;
  letter-spacing: var(--pm-kpi-tr) !important;
}
html body .pm-kpi-v.odo .pm-odo-r > span {
  display: block;
  width: var(--pm-odo-w);
  height: var(--pm-odo-h);
  line-height: var(--pm-odo-h);
  letter-spacing: var(--pm-kpi-tr) !important;
}
@media (prefers-reduced-motion: reduce) {
  /* premium.js builds no reel and creates no animation under this setting.
     This is the belt: if one is ever created by any path, it does not move. */
  html body .pm-kpi-v.odo .pm-odo-r { transition: none !important; }
}
/* ONE INK STEP BACK ON THE PINNED CARD. It is the third of the three
   separations, and it is the only one that is hue, so it never carries the
   distinction alone. */
html body .pm-kpi-v.fixed { color: var(--ink2); }

/* THE UNIT: what the figure counts, not who it covers. That split is the reason
   the population line above can stay short enough to be read at label size. */
html body .pm-kpi-u {
  margin: 3px 0 0; color: var(--ink); line-height: 1.4;
  font-size: var(--t-sm) !important;
}
html body .pm-kpi-u b { color: var(--ink); font-weight: 600 !important; }

/* THE SENTENCE a label cannot carry. One ink step back, body size. */
html body .pm-kpi-say {
  margin: 6px 0 0; color: var(--ink2); line-height: 1.5;
  font-size: var(--t-sm) !important;
}
html body .pm-kpi-say b { color: var(--ink); font-weight: 600 !important; }

/* THE PIN: does this figure follow the window. Plain text when it does, a real
   outlined badge when it does not, because the reader needs to be able to spot
   the frozen card in a row of moving ones without reading four lines of prose
   to find it. Outline and not a fill: a fill would need --bg as its ink and
   would compete with the accent, which on this screen means "the live thing you
   are moving" and is therefore the exact wrong signal on a card that does not
   move. */
html body .pm-kpi-pin {
  margin: 14px 0 0; margin-top: auto; color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: var(--tr-label) !important;
  font-size: var(--t-xs) !important;
  line-height: 1.4;
}
.pm-card.fixed .pm-kpi-pin {
  align-self: start;
  color: var(--ink2);
  border: 1px solid var(--line2);
  padding: 4px 9px;
}

/* ── THE VENUE SPLIT, AS ROWS. ONE OBJECT, USED IN TWO PLACES ─────────────
   .pm-vt IS THE SAME TABLE ON THE LEAD CARD AND IN THE DAY READOUT, and that
   is the point: the two blocks answer the same question about the same three
   venues, one over the window and one over the selected day, so a reader who
   has learned to read one has learned to read the other.

   2026-09-07, THE OWNER: "the cards for derive paradex and hypercall are also
   not very good, make them more like the table or rows better i don't like the
   card view". They were chips: three little clusters laid side by side, each
   with its own x for its own money, so the ONE comparison this block exists to
   support, $60,511,066.31 against $67,055.88, could not be made by running an
   eye down a column. Now it is one row per venue with the columns in the same
   places on every row.

   THE MONEY IS THE COLUMN THAT MATTERS AND IT KEEPS ITS CENTS. The in-bar
   venue split came off this chart in the first place because a share encoding
   cannot resolve 0.11%; dollars can, and only at full precision. Right
   aligned, tabular figures, nowrap, so the separators and the decimal points
   stack and the column can be read down.

   WHY THE NUMERIC TRACKS ARE `auto` AND THE NAME TRACK IS THE 1fr. Fixed ch
   tracks would put the boxes at the same x too, and would ALSO overflow: the
   three names, the widest money and the share measure 267px of unbreakable
   content against the 264px a 390px phone actually offers, so any layout that
   pins the numeric tracks and lets the name track shrink has to truncate a
   venue name or clip a figure. Letting the name track absorb the slack puts
   every row's money against the same right edge and every row's share against
   the same right edge, which is where the eye reads a column of numbers, and
   it fits at every width without dropping a digit. Measured, not assumed.

   THE MARK AND THE NAME ARE ONE CELL, and so is the readout's note button: it
   belongs to the VENUE, and anything sitting after the numeric tracks would
   shift them on the one row that carries it and break every other row. */
.pm-vt {
  list-style: none; padding: 0; margin: 0; width: 100%;
  /* A THREE-ROW TABLE DOES NOT WANT 880px OF ROW. Capped, so the name and its
     money stay in one eye movement instead of being thrown to opposite edges
     of a full-width card. It is a max, so a phone is unaffected. */
  max-width: 560px;
  display: grid; gap: 0;
}
/* THREE TRACKS. There is one venue table on this section now, on the lead
   card, so there is no second table to be told apart from and no fourth
   denominator cell. See the note over venueChips() in premium.js for why the
   day readout's split was deleted rather than relabelled. */
.pm-vtr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: 16px;
  padding: 7px 0;
  color: var(--ink2);
}
/* HAIRLINES BETWEEN ROWS AND NOT AROUND THEM. Same construction as the card
   grid: a division drawn as a 1px line over the ground, never as a border box
   around each row, because instrument.css pins radius and shadow to 0 and a
   boxed row would read as the chip this replaced. */
.pm-vtr + .pm-vtr { border-top: 1px solid var(--line); }
.pm-vn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
html body .pm-vn b {
  color: var(--ink); font-weight: 600 !important;
  font-size: var(--t-sm) !important; letter-spacing: 0 !important;
}
html body .pm-vv {
  color: var(--ink2); font-variant-numeric: tabular-nums;
  font-size: var(--t-sm) !important; letter-spacing: 0 !important;
  text-align: right; white-space: nowrap;
}
/* 6.2ch AND NOT 5.5ch, AND THE DIFFERENCE WAS MEASURED. The share track is
   `auto`, so if one row's share string is wider than another's, that row's
   money cell is pushed left and the money column stops being a column. It was
   live: "<0.01%" renders 42.3px against 38.2px for "99.9%", and the readout's
   three money cells came back at 397.8 / 393.7 / 397.8. The widest string this
   formatter can produce for a venue share is six characters, so the floor is
   set above it and every row's numeric tracks are the same width. This one is
   a min-width on the ELEMENT, so its ch resolves against --t-xs, where 6.6ch
   measures 45.8px. The media query below sizes a TRACK instead, against the
   row's --t-sm, and the numbers there are different for that reason. */
html body .pm-vs {
  color: var(--ink3); font-variant-numeric: tabular-nums;
  font-size: var(--t-xs) !important;
  text-align: right; white-space: nowrap; min-width: 6.6ch;
}
/* The marks sit under the data rather than beside it. */
.pm-mk { opacity: .92; }

/* THE TWO PLACES IT IS USED KEEP THEIR OWN RULE OFF THE BLOCK ABOVE THEM, and
   both are declared AFTER .pm-vt so the later of two equal-specificity rules
   wins. The readout's copy is in section 5, beside the rest of the readout. */
.pm-vch { margin: 12px 0 0; padding: 11px 0 0; border-top: 1px solid var(--line); }

/* ══ 2. THE SCALE TOGGLE ═════════════════════════════════════════════════
   THE KEY IS GONE (2026-09-07, the owner). It was three swatches naming the
   line, the hatch and the counterfactual rule. What is left in this row is the
   linear/log toggle, and it stays where it was, hard right above the plot,
   because that is where a reader who has used it once will look for it again.
   .pm-sp, the flexible spacer that used to push it there past the key, went
   with the key; justify-content does the same job with no element.

   NOTHING REPLACED THE SWATCHES. premium.js carries the note on what a reader
   can still discover about each mark and what they now cannot; do not add a
   caption here without reading it. */
.pm-ctl {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 10px;
}
/* THE TWO SCALE BUTTONS ARE ONE CONTROL AND MUST BREAK AS ONE. The row is a
   wrapping flex line, so a single extra character beside them was once enough
   to carry `linear` up onto the row above and leave `log` alone underneath:
   one toggle, rendered as two unrelated buttons. */
.pm-scg { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.pm-sc {
  background: none; border: 1px solid var(--line);
  padding: 4px 10px; color: var(--ink2);
  cursor: pointer; transition: color var(--t), border-color var(--t);
}
.pm-sc:hover { color: var(--ink); border-color: var(--ink3); }
.pm-sc.on { color: var(--ink); border-color: var(--ink); }
.pm-sc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ══ 3. THE PANEL ══════════════════════════════════════════════════════════
   ASPECT-RATIO, NOT A FIXED HEIGHT. With `height: 340px` and a 1000x340 viewBox
   the SVG letterboxes: preserveAspectRatio scales uniformly to fit BOTH axes,
   so at 400px wide the drawing rendered 136px tall inside a 240px box and gave
   up 100px of a phone screen to nothing. */
.pm-chart { margin: 0; }
/* The ratio is set INLINE by the script from the viewBox it just chose, because
   the viewBox height is a function of the measured stage. This is the fallback
   for the first frame only. */
.pm-svg { width: 100%; height: auto; aspect-ratio: 1000 / 340; display: block; overflow: visible; }
/* THE STAGE IS THE DAY CONTROL. It wraps the panel, it is a single tab stop, it
   holds the pointer capture, and being a plain HTML box it receives a press
   anywhere across it, including the parts of the plot where no mark happens to
   be painted. An <svg> root paints nothing over empty space, which is why a
   drag across those gaps used to do nothing at all.
   touch-action IS ON THE ELEMENT THAT RECEIVES THE POINTER. pan-y and not none,
   so a vertical swipe that lands on the plot still scrolls the page. */
.pm-stage { display: block; cursor: grab; touch-action: pan-y; outline: none; }
.pm-stage:active { cursor: grabbing; }
.pm-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
/* The transparent press surface behind the marks. */
.pm-plot { fill: transparent; pointer-events: all; }

/* Announced, never seen: the day summary that moves with the selection, and the
   whole window as a table, which is a better affordance for a screen reader
   than 36 long labels on marks it cannot reach. */
.pm-sr, .pm-sr-table {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; white-space: nowrap; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ── INSIDE A BAR ──────────────────────────────────────────────────────────
   .pm-hit is the ONLY pointer target in a day group. Everything else is
   pointer-events:none, or the drag scrub would be hijacked by whichever mark
   happened to be under the cursor. */
.pm-hit { fill: transparent; pointer-events: all; }
.pm-day > *:not(.pm-hit) { pointer-events: none; }
.pm-day { cursor: pointer; }
.pm-day:focus { outline: none; }

/* The bar's opaque backing. The value axis governs the bar's TOP and nothing
   inside it, so a gridline showing through the fill would be an invitation to
   read the interior against the axis. It cannot show through. */
.pm-bg { fill: var(--bg); }

/* ONE INK, ONE QUANTITY. The bar is the day, and the day is not split. */
.pm-v { fill: var(--ink); opacity: .42; transition: opacity var(--t-card); }
.pm-day.on .pm-v { opacity: .58; }

/* HATCH MEANS WE CANNOT SAY, and it is spent here and on a null-net column and
   nowhere else. The pattern's own backing is --bg, NOT --s2 as once specified:
   --s2 is transparent in this theme and a transparent backing would let the
   gridlines through the one band whose job is to say nothing is known here. */
/* FULL OPACITY, NOT .85 (2026-09-07). With the key gone the hatch has to be
   legible as a TEXTURE from the drawing alone, and at .85 over a bar body at
   .42 it was a slightly different grey. The pitch and the geometry are
   untouched: this changes how well the mark can be seen, never what it says or
   how tall it is. */
.pm-hatchl { stroke: var(--ink3); stroke-width: 1; opacity: 1; }
.pm-unc { stroke: var(--ink3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .95; }
/* Below about four rendered pixels a 4px-pitch hatch aliases into a flat tone,
   so the cap keeps its height and drops to a solid neutral. --empty is the
   theme's own "nothing here" grey and is used for nothing else on this screen,
   so the meaning survives the loss of the texture. */
.pm-unc.flat { fill: var(--empty); }
.pm-nonet { opacity: .55; }

/* The knock-back above the changed-hands line. Below the line is money that
   moved; above it is legs cancelling inside one ticket plus the cap no venue
   named a counterparty for. One rect per bar, no clip paths. */
.pm-above { fill: var(--bg); opacity: .46; }

.pm-cash { fill: var(--ink); transition: fill var(--t-card); }
.pm-top { stroke: var(--ink); opacity: .5; transition: stroke var(--t-card), opacity var(--t-card); }

/* SELECTION IS ONE OF THE TWO PLACES THE ACCENT IS SPENT. --mint resolves to
   --accent in this theme; the other place is the window rail. */
.pm-day:focus-visible .pm-cash, .pm-day.on .pm-cash { fill: var(--mint); }
.pm-day:focus-visible .pm-top, .pm-day.on .pm-top { stroke: var(--mint); opacity: 1; }
.pm-day:focus-visible .pm-above, .pm-day.on .pm-above { opacity: .30; }
/* THE SELECTED DAY'S COUNTERFACTUAL RULE IS BROUGHT UP TOO. It is the mark on
   this chart with the least ink and, since the key came off, the least
   explanation; the day you are reading is the one place it can be paid for. */
.pm-day:focus-visible .pm-ex, .pm-day.on .pm-ex { opacity: 1; }

/* ── HOVER, AND WHY IT IS NOT THE ACCENT ───────────────────────────────────
   THE KEY CAME OFF ON 2026-09-07 and the owner's reason was that the graph
   should carry its own reading. A pointer resting on a bar is the one moment
   the reader is asking about one day, so every mark inside that bar steps
   forward: the body, its top edge, the changed-hands line's knock-back, the
   cap and the dashed rule. It is WEIGHT and never hue. --mint on this screen
   means "where you are", it is spent on the selection and on the window rail,
   and lending it to a hover would put the same signal on two different states.

   IT WORKS BECAUSE .pm-hit IS INSIDE THE GROUP. Every other mark in the group
   is pointer-events:none, so the hover is entered exactly once, on the full
   height column, and never flickers between marks under the cursor. */
.pm-day:hover .pm-v { opacity: .58; }
.pm-day:hover .pm-top { opacity: .9; }
.pm-day:hover .pm-above { opacity: .30; }
.pm-day:hover .pm-unc { opacity: 1; }
.pm-day:hover .pm-ex { opacity: 1; }

/* ── AXES AND RULES ────────────────────────────────────────────────────────
   Gridlines sit UNDER the bars and are the faintest ink on the chart: they are
   a reference, not a series. Every stroke here is non-scaling, set on the
   element, because a stroke-width of 1 in a 1000-unit viewBox renders at 0.36px
   on a phone and at 1.3px on a wide screen, which is a hairline that is
   invisible on exactly the device that needs it most. */
.pm-grid { stroke: var(--line); opacity: .55; stroke-width: 1; }
.pm-base { stroke: var(--line); opacity: .9; stroke-width: 1; }
.pm-med { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 3 4; opacity: .75; }
.pm-xtick { stroke: var(--ink3); stroke-width: 1; opacity: .5; }
.pm-ylab, .pm-tick, .pm-medl, .pm-vlab {
  font-family: var(--mono, ui-monospace, monospace);
  pointer-events: none;
}
/* THE Y AXIS IS THE LOG SCALE'S OWN EXPLANATION, so it is not the faintest ink
   on the chart any more. Every decade is labelled and every label is printed in
   full, which makes the column read $100 / $1,000 / $10,000 / $100,000 /
   $1,000,000 / $10,000,000: the zeros accumulate on the page, and that is what
   replaced the log-scale paragraph the owner asked twice to have removed. A
   label a reader has to squint at cannot do that job. */
.pm-ylab { fill: var(--ink2); opacity: 1; }
.pm-tick { fill: var(--ink3); opacity: .9; }
.pm-medl { fill: var(--ink3); }

/* THE PARTIAL DAY, MARKED ON THE AXIS RATHER THAN IN A SENTENCE. The last bar
   is today and is still filling, which is the one thing on this chart that can
   be misread as a fall. */
.pm-tick.now { fill: var(--ink2); opacity: 1; }

/* ── THE VALUE LABELS ──────────────────────────────────────────────────────
   Two numbers printed on the plot: the biggest day, always, and the selected
   day, while it is not the biggest. With the median rule already labelled, the
   reader has both terms of the comparison a log axis compresses and can make it
   from the drawing instead of being handed the answer in prose.
   They sit ABOVE the bar top, which is OUTSIDE the bar, because this section's
   grammar is that anything read against the value axis leaves the bar. */
.pm-vlab { fill: var(--ink2); font-weight: 600; }
.pm-vlab.on { fill: var(--mint); }

/* The caret. NOT painted with --s3, which is transparent in this theme. */
.pm-caret { stroke: var(--mint); stroke-width: 1; opacity: .5; pointer-events: none; }

/* ── THE "WITHOUT THE RECORD'S TOP 3" MARK ─────────────────────────────────
   It OVERHANGS the bar on both sides, and the overhang is the grammar rather
   than decoration: in this section a mark that crosses the bar's edge is read
   against the y axis, like the bar top, and a mark contained inside the bar is
   a share of that bar, like the changed-hands line.

   Dashed, because it is a COUNTERFACTUAL: a level the day would have had, not
   one it did. Solid marks on this chart are all things that happened.

   THE DASH RHYTHM AND THE BRIGHTNESS BOTH DIFFER FROM .pm-med ON PURPOSE. The
   median rule is also a dashed horizontal, and at 3/4 dim it read as the same
   object at a glance. This one is 5/2 and brighter, it spans one bar rather
   than the plot, and it overhangs. Four separations, because two marks that
   mean different things must not be distinguishable only by length. */
.pm-ex {
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-dasharray: 5 2;
  fill: none;
  pointer-events: none;
  opacity: .85;
}

/* ══ 4. THE WINDOW RAIL ════════════════════════════════════════════════════
   TWO NATIVE <input type=range> OVERLAID ON ONE TRACK, sitting on the chart's
   bottom edge the way the payoffs rail sits on its stage. It is a control over
   the picture above it, not a widget parked underneath one.

   THE GEOMETRY. Each input is one thumb wider than the wrapper and pulled back
   half a thumb at each end, so thumb CENTRE at value 0 lands on the wrapper's
   left edge and at max on its right. That is what lets the filled span below,
   which is expressed as a percentage of the WRAPPER, line up with the thumbs
   instead of drifting by ten pixels at each end. Same construction as
   payoff.css and for the same reason.

   WHY THE THUMBS DO NOT FIGHT. Both inputs cover the whole track, so the top
   one would eat every press. `pointer-events: none` on the inputs with
   `pointer-events: auto` restored on the THUMB pseudo-elements makes each thumb
   grabbable and lets a press on bare track fall through to the wrapper, which
   then moves whichever handle is nearer. premium.js keeps a minimum span of two
   steps so the two thumbs can never land on the same pixel, which is the state
   where z-order stops being a preference and becomes a trap.

   THE THUMB IS ROUND. instrument.css pins border-radius to 0 on
   `body *:not(svg):not(svg *)`, and `body *` matches ELEMENTS, never
   ::-webkit-slider-thumb, so the pin does not reach it. Confirmed on the
   rendered PNG rather than inferred from the selector: a square thumb would
   mean the pin does reach it and this rule needs !important.

   touch-action IS ON BOTH THE INPUTS AND THE WRAPPER, and that is not
   belt-and-braces. On this control BOTH receive pointers: the thumbs belong to
   the inputs, the bare track belongs to the wrapper. Declaring it only on the
   wrapper and expecting it to reach the thumb is the failure this codebase
   already records. pan-y and not none, so a vertical swipe that starts on a
   26px handle two thirds of the way down a phone still scrolls the page. */
/* INSET BY HALF A THUMB. The inputs are one thumb wider than the wrapper and
   pulled back half a thumb at each end, so a thumb at value 0 is centred on the
   wrapper's left edge and half of it sits outside. Padding the wrapper by that
   half keeps the whole grip inside the section box at both ends, and because
   the filled span is a percentage OF THE WRAPPER the alignment is unaffected. */
.pm-win { margin: 0 0 4px; padding: 0 10px; }
.pm-rail {
  position: relative;
  height: 30px;
  touch-action: pan-y;
  cursor: pointer;
}
/* THE RECORD, and THE WINDOW YOU KEPT. Two greys and one accent, never two
   accents: the unselected track has to be visible enough to read as a control
   at all (--line alone against a #0c0a08 ground measured as no rail at all in
   payoff's first render, which is why that file splits its track too). */
.pm-rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px;
  background: var(--line2);
}
.pm-rail::after {
  content: ""; position: absolute; top: 13px; height: 4px;
  left: var(--pm-f0, 0%); right: calc(100% - var(--pm-f1, 100%));
  background: var(--accent);
}
html body .pm-r {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 2px;
  left: -10px;
  width: calc(100% + 20px);
  height: 26px;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  touch-action: pan-y;
}
.pm-r::-webkit-slider-runnable-track { height: 2px; border: 0; background: transparent; }
.pm-r::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  margin-top: -8px;
  cursor: ew-resize;
}
.pm-r::-moz-range-track { height: 2px; border: 0; background: transparent; }
.pm-r::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); cursor: ew-resize;
}
.pm-r:focus { outline: none; }
/* THE FOCUS RING GOES ON THE INPUT AND NOT ON THE THUMB, because a ring drawn
   on the pseudo-element is clipped by the input's own box at both ends of the
   track. It is offset inward so it does not collide with the chart above. */
.pm-r:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
#pm-r0 { z-index: 2; }
#pm-r1 { z-index: 3; }
/* When the whole window has been dragged up against the right end, the handle
   the reader means to grab there is the INNER one. */
.pm-rail.hi-lo #pm-r0 { z-index: 3; }
.pm-rail.hi-lo #pm-r1 { z-index: 2; }

.pm-win-b {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap; margin-top: 2px;
}
/* THE RANGE AND ITS COUNT WRAP AS WHOLE UNITS, NEVER MID-DATE. Left as one text
   run the line broke as "1 Aug to 19 / Aug", which reads as a different date.
   Two nowrap children in a wrapping flex row break BETWEEN them or not at all. */
html body .pm-win-range {
  margin: 0; color: var(--ink); font-weight: 600 !important;
  font-size: var(--t-md) !important;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px;
}
html body .pm-win-range .r { white-space: nowrap; font-weight: 600 !important; }
html body .pm-win-range .c {
  color: var(--ink3); font-weight: 400 !important; white-space: nowrap;
  text-transform: uppercase; letter-spacing: var(--tr-label) !important;
  font-size: var(--t-xs) !important;
}
/* THE WINDOW RULE, ONCE, ON THE CONTROL IT IS ABOUT. Deliberately NOT the
   uppercase label treatment of .c beside it: this is a sentence a reader reads
   once and then stops seeing, not a quantity they come back to, and three
   uppercase runs on one line is a row of shouting with no hierarchy in it. */
html body .pm-win-note {
  color: var(--ink3); font-weight: 400 !important; white-space: nowrap;
  font-size: var(--t-xs) !important;
}
html body .pm-win-reset {
  background: none; border: 1px solid var(--line); color: var(--ink2);
  padding: 4px 10px; cursor: pointer;
  text-transform: uppercase; letter-spacing: var(--tr-label) !important;
  font-size: var(--t-xs) !important;
  transition: color var(--t), border-color var(--t);
}
.pm-win-reset:hover:not(:disabled) { color: var(--ink); border-color: var(--ink3); }
.pm-win-reset:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* DISABLED, NOT HIDDEN. A control that vanishes when it has nothing to do
   reflows the row under the chart every time the window is reset, and a reader
   who has just used it watches it disappear under their own cursor. */
.pm-win-reset:disabled { opacity: .38; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .pm-v, .pm-cash, .pm-top { transition: none; }
}

/* ══ 5. THE READOUT ════════════════════════════════════════════════════════
   Always rendered, never conditional. An element that appears on hover and
   vanishes on mouseout reflows everything below it, and everything below this
   is the argument the chart exists to make. It is also the only place with
   exact dollars per venue per day.

   NO ADDRESS IS PRINTED IN IT. The day's largest buyer is a share and a count;
   who it was is an identity, and identity here is signed and opted into by the
   address owner or it is absent. This surface publishes losses as well as
   gains, so that is a safety rule before it is a privacy one. */
.pm-read {
  border: 1px solid var(--line);
  padding: 13px 16px 15px; margin: 16px 0 20px;
}
.pm-read.rest { border-color: var(--line-2, var(--line)); }
.pm-read-d {
  margin: 0 0 11px; color: var(--ink);
  display: flex; align-items: baseline; gap: 9px; font-weight: 600 !important;
}
html body .pm-read-d span {
  color: var(--ink3); text-transform: uppercase;
  font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important;
  font-weight: 400 !important;
}
.pm-read-g {
  margin: 0; display: grid; gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
html body .pm-read-g dt {
  text-transform: uppercase; color: var(--ink3); margin-bottom: 5px;
  font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important;
}
html body .pm-read-g dd {
  margin: 0; color: var(--ink); font-size: var(--t-md) !important;
  font-weight: 600 !important; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
html body .pm-read-g dd.s {
  color: var(--ink2); margin-top: 4px; line-height: 1.45;
  font-size: var(--t-sm) !important; font-weight: 400 !important;
}
/* THE DAY'S VENUE SPLIT. Same table as the lead card's, .pm-vt, plus one
   column: the share's denominator. "of the day" is repeated on every row and
   that is deliberate, because it is the DENOMINATOR of the number beside it and
   this section does not print a share without one. In a table it would be a
   column header; a header is new ink and the owner is cutting ink, so it stays
   on the row, dimmed, in its own column, where it reads as a unit and not as a
   sentence. */
.pm-read-v {
  margin: 13px 0 0; padding: 11px 0 0;
  border-top: 1px solid var(--line);
}
html body .pm-vu {
  color: var(--ink3); font-size: var(--t-xs) !important; white-space: nowrap;
}
/* A VENUE WITH NO ROW THAT DAY. It takes the whole numeric span rather than
   sitting in the money column, because it is not a quantity and must never be
   read down the column of them as if it were one. NEVER a zero. */
.pm-none { color: var(--ink3); grid-column: 2 / -1; text-align: right; }
.pm-vnote { color: var(--ink3); grid-column: 3 / -1; }
html body .pm-vnote { font-size: var(--t-xs) !important; }

/* ══ 6. THE NOTES ══════════════════════════════════════════════════════════
   Provenance, folded. The section is a graph; the prose is the receipt. Native
   <details> rather than a scripted toggle because it is keyboard reachable and
   opens on tap without any of the hover-only failure this codebase has already
   been audited for.

   2026-09-07: THIS FOLD IS NOW THE ONLY PLACE THE COUNTERFACTUAL RULE IS
   NAMED. The key above the chart came off on the owner's instruction, and with
   it the only permanently visible reading of the three marks. The line and the
   hatch are still reachable without opening this, in the readout under the
   chart, which is always rendered: it prints CHANGED HANDS for the day, and it
   carries a note button on the venue that names no counterparty saying its
   premium is the hatched cap. The dashed overhanging rule has nothing outside
   this fold and the SVG aria-label. That is a known and reported loss, not an
   oversight, and it is the owner's call whether to spend ink on it. */
.pm-notes {
  display: grid; gap: 11px; max-width: 76ch; color: var(--ink2);
}
.pm-notes p { margin: 0; line-height: 1.65; }
html body .pm-notes b { color: var(--ink); font-weight: 600 !important; }
html body .pm-notes > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 7px;
  text-transform: uppercase; color: var(--ink3);
  font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important;
  padding: 9px 0; border-bottom: 1px solid transparent;
}
.pm-notes > summary::-webkit-details-marker { display: none; }
.pm-notes > summary::before { content: "+"; line-height: 1; opacity: .75; }
.pm-notes[open] > summary::before { content: "\2212"; }
.pm-notes > summary:hover, .pm-notes > summary:focus-visible {
  color: var(--ink); border-bottom-color: var(--line);
}
.pm-notes[open] > p { margin-top: 10px; }

/* ══ 7. THE BREAKPOINTS ════════════════════════════════════════════════════
   TWO STEPS, AND BOTH ARE SET BY A MEASURED STRING RATHER THAN BY A DEVICE.

   AT 1000px the six-track row of three cards puts $36,983,852.26 into a track
   too narrow for it at --t-lg, so the row folds to two tracks and the cards
   take three each.

   AT 760px the lead figure comes off --t-hero. At --t-hero on a 390px phone
   $59,641,031.66 is wider than the screen, and there is no size between --t-hero
   and --t-lg in this app's scale to land on, so it takes --t-lg, which is the
   size the section's other figures already use. It is still the biggest thing
   on the screen because everything else shrank with it. */
@media (max-width: 1000px) {
  .pm-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pm-card { grid-column: span 3; }
  .pm-card.lead { grid-column: span 6; }
}
@media (max-width: 760px) {
  .pm-cards { grid-template-columns: minmax(0, 1fr); }
  /* EVERY VARIANT IS NAMED HERE AND THAT IS NOT REDUNDANCY. `.pm-card.full` is
     (0,2,0) in the base sheet and `.pm-card` alone is (0,1,0), so listing only
     the bare class left the coverage card on `span 6` inside a ONE-column grid.
     A span that overruns the explicit tracks does not clamp: it MANUFACTURES
     five implicit columns, and the whole card row silently reverted to a
     desktop layout 98px wide on a 390px phone with no error, no overflow and no
     failing assertion. Measured on the PNG: computed grid-template-columns came
     back "0px 98.33px 98.33px 98.34px 0px 0px" against a rule that declares one
     track. Nothing but the screenshot would have caught it. */
  .pm-card, .pm-card.lead, .pm-card.full { grid-column: span 1; }
  html body .pm-card.lead .pm-kpi-v { font-size: var(--t-lg) !important; line-height: 1.04; }

  /* ── THE VENUE TABLE ON A PHONE: ONE ROW, TWO LINES ─────────────────────
     THE ARITHMETIC, MEASURED ON THE RENDERED PAGE AND NOT ESTIMATED. At a
     390px viewport the lead card offers 264px and the readout 266px. One line
     needs the widest venue cell (108.1px), the widest money (118.9px for
     $60,510,556.05), the share (42.3px for "<0.01%") and the readout's unit
     (52.0px for "of the day"), which is 321px before a single gap. It does not
     fit and no amount of tightening makes it fit, so the row folds: the VENUE
     on the first line, its numbers on the second.

     THE TRACKS BECOME FIXED LENGTHS HERE, and that is the whole point of the
     fold. Every <li> is its own grid, so an `auto` track is sized by THAT row's
     own content and two rows only agree by luck: on the wide layout the 1fr
     name track absorbs the difference and the numbers still share a right
     edge, but once the numbers are alone on a line there is nothing left to
     absorb it. A fixed ch length is the same width on every row by
     construction.

     THE ch VALUES ARE READ OFF THE RENDER, and the first pair was wrong in the
     dangerous direction. A grid track's ch resolves against the GRID
     CONTAINER's font size, the row at --t-sm, where 1ch measures 9.47px, not
     against the smaller --t-xs the share and the unit are actually set in.
     6.4ch and 7.8ch therefore took 60.6px and 73.8px for content needing
     42.3px and 52.0px, and left the money 107.6px of the 109.3px it needs: a
     figure one and a half pixels wider than its own cell, on a section whose
     one rule is that the money is printed in full. 4.8ch and 5.8ch clear the
     measured content and leave the money 141.6px of a needed 118.9px at the
     widest day the record holds. The money keeps the 1fr and is right aligned
     into it, so it lands on the same x on every row whatever it says, and it
     can never be clipped or shortened.

     THIS ALSO REMOVES A LIVE OVERFLOW. Before the fold the readout's rows at
     390 collapsed the name track to 18.6px and printed "Derive" straight
     through "$1,927,906.09". Caught on the PNG, not by any assertion. */
  .pm-vtr {
    grid-template-columns: minmax(0, 1fr) 4.8ch;
    column-gap: 12px; row-gap: 2px; padding: 9px 0;
  }
  .pm-vt .pm-vtr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pm-vn { grid-column: 1 / -1; }
  .pm-vv { grid-column: 1; }
  html body .pm-vs { grid-column: 2; min-width: 0; }
  .pm-vu { grid-column: 3; }
  .pm-none, .pm-vnote { grid-column: 1 / -1; text-align: right; }
  /* The median label collides with its own rule at phone width, and the rule
     alone still carries the reading; the exact figure is in the fold. */
  .pm-medl { display: none; }
  /* A BIGGER GRIP ON A TOUCH SCREEN. The rail keeps its geometry: the input is
     still exactly one thumb wider than the wrapper and pulled back half a
     thumb, so the filled span still lines up with the thumb centres. */
  .pm-win { padding: 0 13px; }
  .pm-rail { height: 36px; }
  .pm-rail::before { top: 17px; }
  .pm-rail::after { top: 16px; }
  html body .pm-r { top: 2px; height: 32px; left: -13px; width: calc(100% + 26px); }
  .pm-r::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -11px; }
  .pm-r::-moz-range-thumb { width: 22px; height: 22px; }
}

/* THE DAY'S VENUE SPLIT, AS A SENTENCE. It is deliberately NOT .pm-vt. The
   window split on the lead card is a table because it is a ranking you compare
   down a column; this is a detail about one bar and it is prose, because two
   tables carrying different populations were being read as the same data. A
   table and a sentence are not confusable at a glance, which is the only
   property this rule has to have.

   EACH VENUE IS ONE UNBREAKABLE RUN. The first cut let the line wrap wherever
   it liked and the mark fell onto its own line above its own name, which read
   as three stacked rows, which is a table again. inline-flex plus nowrap on the
   run, and the line breaks BETWEEN venues or not at all. */
.pm-read-vt {
  margin: 13px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink2);
  line-height: 2;
}
.pm-rv {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  gap: 6px;
}
/* The separator is space and a hairline, never a word and never the reading
   colour. It is on the run rather than between runs so the last one has none. */
.pm-rv + .pm-rv { margin-left: 22px; }
html body .pm-rv b {
  color: var(--ink); font-weight: 600 !important; letter-spacing: 0 !important;
}
html body .pm-rv u {
  color: var(--ink3); text-decoration: none; font-size: var(--t-xs) !important;
}
html body .pm-rv i { color: var(--ink3); font-style: normal; }
.pm-rv .pm-mk { align-self: center; flex: 0 0 auto; }

/* AT PHONE WIDTH THE RUNS STACK, so the 22px that separates them side by side
   becomes an indent on every line after the first and the block reads as a
   staircase. Measured on the PNG. Flush left, one venue per line. */
@media (max-width: 620px) {
  .pm-rv { display: flex; }
  .pm-rv + .pm-rv { margin-left: 0; }
}