/* ============================================================================
   BLOCKS — the page-level building blocks (spec §1.1).
   Tokens only. No literal colours or sizes.
   ========================================================================== */

/* --- hero ----------------------------------------------------------------- */
.hero { background: var(--color-surface-hero); color: var(--color-text-inverse); padding-block: var(--space-7) var(--space-8); }
.hero h1 { font-size: var(--text-3xl); margin: var(--space-4) 0 0; color: var(--color-text-inverse); }
.hero__standfirst { margin-top: var(--space-4); font-size: var(--text-md); max-width: 56ch; color: var(--color-text-inverse); }
.hero--plain { background: var(--color-surface-muted); color: var(--color-text); }
.hero--plain h1, .hero--plain .hero__standfirst { color: var(--color-text); }

/* Every hero is pulled up under the header so the band runs behind it, then
   padded back down by the same amount. --header-h is measured by chrome.js on
   load; the token is the pre-script fallback. This is what lets the header have
   no fill of its own. */
.hero {
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--space-7));
}

/* Homepage feature band — Figma 153:2568. One navy field from the top of the
   viewport to the Get Started cards, holding the header, the hero and the whole
   Get Started section. Scoped to this variant: the orange band is the settled
   decision from Figma 29:2327 and every other page keeps it.

   A gradient rather than a flat fill, and it runs to the bottom of the band, so
   the darker foot meets the page at a smaller step than #264466 would. White is
   9.99:1 at the head and 12.89:1 at the foot. */
.hero--feature {
  background: linear-gradient(var(--color-band-feature-head),
                              var(--color-band-feature-foot));
  min-height: var(--hero-feature-min-h);
  padding-bottom: var(--space-9);
}
.hero--feature > * + * { margin-top: var(--space-8); }

/* Hero: text beside the photograph, entry chips on their own row underneath
   both. The art column is capped at the asset's natural width so the supplied
   684x387 is never upscaled; the text column takes what is left. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(var(--hero-lede-min), 1fr) minmax(0, var(--hero-art-w));
  gap: var(--space-8);
  align-items: center;
}
.hero__lede { min-width: 0; }
.hero__lede h1 { margin-top: 0; }
/* No CSS radius and no crop: the supplied asset carries its corner radius and
   its blue overlay in its own alpha channel, so a radius here would double up
   and a crop would cut them off. The image sets the column's height. */
.hero__art { margin: 0; min-width: 0; }
.hero__art img { display: block; width: 100%; height: auto; }
/* The photograph is decorative — the heading beside it already names the
   organisation, and a screen reader gains nothing from a description of glass.
   Hence the empty alt in index.html. */

/* Entry chips. Outlined, not filled: every solid dark token in the palette
   lands within 1.3:1 of this band, so a fill would be invisible on it, whereas
   a white border is 9.99:1 — far above the 3:1 SC 1.4.11 asks of a control's
   boundary. */
/* The row spans the content container rather than sitting centred inside it,
   and every chip grows by an equal share of what is left over, so the gaps stay
   exactly --space-5 at every width and the outer edges line up with the cards
   and the heading above. Growth rather than equal columns: the labels run from
   "I was served a notice" to "I am looking for a case or record", and four
   equal columns would wrap the longest one at 1440. */
.hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; }
.hero__chips li { display: flex; flex: 1 1 auto; }
.hero-chip {
  display: inline-flex; align-items: center; flex: 1; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  min-height: var(--tap-min);
  background: none;
  color: var(--color-text-inverse);
  border: var(--border-width) solid var(--color-text-inverse);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.hero-chip:hover { background: var(--color-surface); color: var(--color-surface-inverse); }
.hero-chip__arrow { transition: transform var(--duration-fast) var(--ease); }
.hero-chip:hover .hero-chip__arrow { transform: translateX(2px); }

/* "What can we help you with?" (Version B). A section heading in its own
   right, at the size of a card title rather than a page section, because it
   labels a row of four controls and should not outweigh the h1 above it. */
.hero__chips-title { font-size: var(--text-lg); color: var(--color-text-inverse); margin-bottom: var(--space-5); }

/* The mobile picker and its sheet. Both are hidden above 767px, where the
   chip row does the job; the 767 block at the foot of this file swaps them. */
.hero-picker { display: none; }

/* Styled as the desktop chips are (Celeste, Oct 2026): white outline, white
   label, no fill, so the phone and the desktop offer the same-looking
   control. The chevron is what says it opens rather than goes. White on the
   navy band is 9.99:1 at its palest. Hover fills white like a chip does. */
.hero-picker {
  align-items: center; justify-content: space-between; gap: var(--space-4);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  background: none;
  color: var(--color-text-inverse);
  border: var(--border-width) solid var(--color-text-inverse);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.hero-picker:hover { background: var(--color-surface); color: var(--color-surface-inverse); }
.hero-picker__chevron { flex: none; }

/* The sheet is a <dialog> in the top layer, pinned to the bottom edge. The
   dialog itself is transparent and unpadded, so its panel fills it and a
   click on the dialog element can only be a click on the backdrop. The panel
   is a light surface, and the dialog sits inside the hero's on-dark remap, so
   it reads the canonical --color-ink names, not --color-text. */
.bottom-sheet {
  margin: auto 0 0; padding: 0; border: 0;
  width: 100%; max-width: 100%;
  max-height: 85vh;
  background: transparent;
}
.bottom-sheet::backdrop { background: var(--color-scrim); }
.bottom-sheet__panel {
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--layout-gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
}
.bottom-sheet[open] .bottom-sheet__panel { animation: sheet-up var(--duration-base) var(--ease); }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.bottom-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.bottom-sheet__title { font-size: var(--text-md); color: var(--color-ink); margin: 0; }
.bottom-sheet__close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--tap-min); height: var(--tap-min);
  background: none; border: 0; border-radius: var(--radius-pill);
  color: var(--color-ink);
}
.bottom-sheet__close:hover { background: var(--color-fill-muted); }
.bottom-sheet__list { list-style: none; margin: 0; padding: 0; }
.bottom-sheet__list li + li { border-top: var(--border-width) solid var(--color-line-subtle); }
.bottom-sheet__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--tap-min);
  padding-block: var(--space-3);
  color: var(--color-ink);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.bottom-sheet__link:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* --- homepage Get Started band --------------------------------------------
   Inside .hero--feature rather than after it, because the comp treats the navy
   as ONE field: heading, search and cards all sit on it. Two elements sharing
   one gradient cannot line up, so they have to be one element. */
/* Its own space above, larger than the --space-8 rhythm the band's other rows
   use: Get Started is a second section inside the band, not the next row of the
   hero, and it has to read that way without a rule or a colour change to say
   so. The matching space below is on Featured topics, which pads past the
   overhanging cards. */
.hero__intro { text-align: center; margin-top: var(--space-10); }
.hero__intro h2 { color: var(--color-text-inverse); margin-bottom: var(--space-5); }
.hero__intro .hero-search { margin-inline: auto; margin-top: 0; }

/* The straddle, and the best idea in the frame: the cards cross the band's
   bottom edge rather than sitting inside one band or the other, which stitches the two
   together. The overlap is a fixed length because a percentage margin resolves
   against width, not height. --shadow-card-raised, one step above every other
   card, is what makes them read as in front of both surfaces.

   `color` is reset because .hero sets --color-text-inverse for the band, and a
   card is a light surface sitting on it — without this the card headings are
   white on white. */
.hero__cards {
  /* The band's own bottom padding is cancelled as well as the overlap pulled,
     so --intro-card-overlap means the VISIBLE overhang rather than a number you
     have to do arithmetic on to predict. */
  margin-bottom: calc((var(--intro-card-overlap) + var(--space-9)) * -1);
  position: relative; z-index: 1;
}
.hero__cards .card { color: var(--color-text); box-shadow: var(--shadow-card-raised); }
.hero__cards .card-grid-wrap { margin: 0; }

/* Every control inside the dark band. The search pill takes the field focus
   (navy border and light halo), which reads on the band as it is. */
.hero--feature :focus-visible { outline-color: var(--color-focus-on-dark); }

/* Homepage search field — Figma 29:660: a full pill, white fill, magnifier at
   the left, submit button at the right. The frame's gold button fill predates
   the orange decision, so the button is the standard --color-accent .button.
   Focus ring lives on the wrapper so the pill, not the bare input, is
   outlined. */
.hero-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--width-search);
  min-height: var(--height-search);
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
}
/* Field focus, shared by every search pill, filter select, date input and
   the Filter by date button (tokens.css, --shadow-focus-field). On the pill it sits
   on the wrapper, so the whole pill, not the bare input, is marked. Fields
   show it on :focus, mouse or keyboard, as the pill's :focus-within does;
   the Filter by date button is a button, so only on :focus-visible. */
.hero-search:focus-within,
.rt__field input:focus, .rt__field select:focus,
.datepick__field input:focus,
.filter-trigger:focus-visible {
  outline: none;
  border-color: var(--color-focus-field);
  box-shadow: var(--shadow-focus-field);
}
.hero-search__icon { flex: none; color: var(--color-text-muted); }
.hero-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--text-md); color: var(--color-text); }
.hero-search__input::placeholder { color: var(--color-text-muted); }
.hero-search__input:focus { outline: none; }
.hero-search__submit { flex: none; border-radius: var(--radius-pill); }
/* The magnifier inside the button is for the mobile shape only — above 767 the
   field has its own leading icon and the button carries a word. */
.hero-search__submit-icon { display: none; }

/* The filter pill (Oct 2026). Find a record and the hearing schedule filter
   as you type, so there is no submit button; otherwise it is the homepage
   search, one component site-wide. The placeholder is just "Search"
   (Celeste, Oct 2026); the visually hidden label keeps the full "Search by
   person or company" as the accessible name. Capped at the homepage pill's width rather
   than running the whole content column. */
.hero-search--filter {
  min-height: var(--height-search-sm);
  margin-top: 0;
  padding: var(--space-2) var(--space-5);
}
.hero-search--filter .hero-search__input { font-size: var(--text-base); }
.hero-search--filter .hero-search__input::-webkit-search-cancel-button { cursor: pointer; }
/* On the hearing schedule the pill shares the results bar with the count,
   right-aligned (Celeste, Oct 2026). */
.hero-search--bar { flex: 0 1 auto; width: var(--width-search-bar); margin-left: 0; }


.breadcrumb--on-dark a { color: var(--color-text-inverse); }
.breadcrumb--on-dark [aria-current] { color: var(--color-text-inverse); opacity: .85; }
.breadcrumb--on-dark li + li::before { color: var(--color-text-inverse); opacity: .7; }

/* --- two-column layout ---------------------------------------------------- */
.layout { display: grid; grid-template-columns: var(--width-sidebar) minmax(0, 1fr); gap: var(--space-7); padding-block: var(--space-8); align-items: start; }
.layout__side { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: var(--space-5); }
/* The reading column stops at --measure-wide so a heading and a table end at
   the same right edge. Without it the column took whatever the grid gave it —
   952px at 1440 — while the text inside stopped at 622, and the 300px of
   trailing space read as unfinished rather than as margin.

   .page-body is deliberately NOT capped: the record index and the hearing
   schedule are tables of data that want the full width, and their prose is
   capped block by block. */
/* The rail pages' column: capped at --measure-column, and inside it the
   three reading tiers are switched off, so every block fills the column and
   shares its right edge. `none` because every use of these tokens is a
   max-width. --measure-panel has to be reset too: it is calc()ed from
   --measure at :root and inherits as a resolved length. */
.layout__main {
  max-width: var(--measure-column);
  --measure: none;
  --measure-panel: none;
  --measure-wide: none;
}

/* Both page shells, not just the sidebar one: blocks rendered into
   .shell.page-body had no spacing at all, so a section heading on Home sat
   16px from the paragraph above it where the same heading on a Guide page
   had 40px. A block that wants different spacing (Featured topics on Home) sets
   its own margin later in this file and still wins. */
.layout__main > * + *,
.page-body > * + * { margin-top: var(--space-block); }

/* --- sidebar cards -------------------------------------------------------- */
/* THREE CARDS, THREE WEIGHTS (Celeste, Sep 2026). They were one treatment —
   a grey fill and a hairline — on the page summary, the contents rail and the
   help card alike, so nothing said which mattered most and the help card read
   as disabled. The order is: Overview first, help second, contents last.

     .panel          white, a resting shadow and a navy top rule. Elevation is
                     the strongest signal available and it costs no colour, so
                     the summary wins without competing with the orange.
     .side-card--cta the light navy tint. Offering something, not switched off.
     .side-card--toc no box at all above 1024. Dissolving it leaves the amber
                     active row as the only fill in the rail, which is the one
                     thing in there a reader is meant to track. Below 1024 the
                     box comes back — see the mobile pattern; a sticky
                     disclosure with no fill has page content scrolling
                     through it. */
.side-card { background: var(--color-surface-subtle); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
.side-card h2 { font-size: var(--text-md); margin-bottom: var(--space-4); }
.side-card ul { list-style: none; margin: 0; padding: 0; }
.side-card li + li { margin-top: var(--space-1); }
.side-card a { display: block; padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--color-text-secondary); border-radius: var(--radius-md); font-size: var(--text-sm); }
.side-card a:hover { text-decoration: underline; color: var(--color-text); }
.side-card__note { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }
/* `.side-card a` (0,1,1) out-specifies `.button` (0,1,0), so a button inside a
   sidebar card lost its colour and padding. Restore them explicitly. */
.side-card .button { display: inline-block; color: var(--color-accent-ink); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); }
.side-card .button:hover { color: var(--color-accent-ink); text-decoration: none; }

.side-card--toc { background: none; border: 0; padding: 0; }
/* The links carry --space-3 of inline padding; the heading has to match it or
   the rail reads as two columns half a step apart. */
.side-card--toc h2 { padding-inline: var(--space-3); }
/* The active row: light navy, no stroke, navy label (Celeste, Oct 2026). It
   was amber with a greige stroke and an orange label, the same tint as the
   Important note, so a warning in the reading column and "you are here" in
   the rail looked like the same kind of thing. Navigation now takes the blue
   family (Need help, record-row hover), which leaves amber meaning
   "attention". The label is navy, not orange: --color-accent on
   --color-surface-brand is 4.37:1, under the 4.5 that 14px text needs;
   --color-text is 12.0:1. The tint is drawn by ONE shape, the list's
   ::before, which blocks.js positions under the active link and slides from
   row to row. The link itself only changes its label colour, and fades that.
   Every row keeps a transparent border so the weight change never nudges
   the text.

   Without JS, or before the first placement, the link falls back to painting
   its own tint, so the active row is never unmarked. */
.side-card--toc ul { position: relative; }
.side-card--toc ul::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: var(--toc-marker-h, 0);
  transform: translateY(var(--toc-marker-y, 0));
  background: var(--color-surface-brand);
  border-radius: var(--radius-md);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease),
              height var(--duration-slow) var(--ease),
              opacity var(--duration-base) var(--ease);
  pointer-events: none;
}
.side-card--toc ul.has-marker::before { opacity: 1; }
.side-card--toc ul.no-marker-motion::before { transition: none; }
/* The link sits above the marker. Positioned itself rather than its <li>,
   so its offsetTop stays measured from the <ul>, which is what place() reads. */
.side-card--toc a { position: relative; border: var(--border-width) solid transparent; transition: color var(--duration-base) var(--ease); }
.side-card--toc a[aria-current="true"] { background: var(--color-surface-brand); color: var(--color-text); font-weight: var(--weight-medium); }
.side-card--toc ul.has-marker a[aria-current="true"] { background: none; }
.side-card--cta { background: var(--color-surface-brand); border-color: var(--color-line-callout); }
/* Secondary rather than muted: on the tint, muted grey was most of what made
   this card look switched off. */
.side-card--cta p { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }

/* Need help? as a full-width block above Related resources (Oct 2026). It
   runs the full width of whatever column it is in — the capped main column on
   a chapter page, the whole content width on the Guide landing — matching
   Related resources below it. The copy keeps the reading measure. Stacks
   below 767px — see the block at the foot of this file. */
.help-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); }
.help-card__text { max-width: var(--measure); }
.help-card h2 { margin-bottom: var(--space-2); }
.help-card p { margin-bottom: 0; }
.help-card .button { flex: none; white-space: nowrap; }
/* The tertiary-CTA variant (the CanLII hand-off). `.side-card a` would take
   its colour and padding, so the tertiary tier is restored here. Darker
   orange, not --color-accent: that is 4.37:1 on --color-surface-brand, under
   the 4.5 that 14px text needs; --color-accent-hover is 6.14:1. */
.side-card .button--tertiary { padding: 0; border-radius: 0; color: var(--color-accent-hover); font-size: var(--text-sm); }
.side-card .button--tertiary:hover { color: var(--color-accent-hover); text-decoration: underline; }
/* A secondary button in a side card: `.side-card a` and `.side-card .button`
   would otherwise force the primary's white label and hide the outline. */
.side-card .button--secondary.button--brand { color: var(--color-band-feature-head); display: inline-flex; align-items: center; gap: var(--space-2); }
.side-card .button--secondary.button--brand:hover { color: var(--color-text-inverse); }
/* Stacked shape: copy, then the CTA under it. A tertiary link reads as the
   paragraph's next line, and a long paragraph beside a no-wrap link would
   squeeze to a narrow column in anything but the widest layout. */
.help-card--stacked { flex-direction: column; align-items: flex-start; gap: var(--space-6); }

/* --- panels and prose ----------------------------------------------------- */
.panel {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-top: var(--border-width-accent) solid var(--color-band-feature-head);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
/* The summary sets a step above the body it summarises. --text-md is the same
   size the hero standfirst and a block intro take, which is the role this is
   playing. */
.panel p { font-size: var(--text-md); }
.panel h2, .prose h2, .qa h2, .faq h2, .card-grid-wrap h2, .news__head h2,
.table-block h2, .def-list-block h2, .steps-block h2, .factstrip-block h2
  { font-size: var(--text-xl); margin-bottom: var(--space-heading); }
/* An `intro` under a block heading. Same role as .flow__standfirst, and the
   same treatment, so a table introduced by a sentence and the process flow
   introduced by one do not look like different kinds of thing. */
.block-intro { font-size: var(--text-md); color: var(--color-text-secondary);
  max-width: var(--measure); margin-bottom: var(--space-6); }
.prose p, .qa p { max-width: var(--measure); }
/* The opt-in wide reading width, about 95 characters at 16px — past the
   45-75 target on purpose, for one short intro on a single-column page. */
.prose--wide p { max-width: var(--measure-wide); }
/* The box is the measure plus its own padding, and the text inside fills it —
   so the Overview's copy is at --measure like every other paragraph and the
   card ends where the copy ends. It used to be a 952px box holding 700px of
   text, which is a quarter of a bordered card left empty. */
.panel { max-width: var(--measure-panel); }
.panel p { max-width: none; }

/* Matches --space-heading, so the first question is spaced from the section
   heading exactly as the later ones are from each other. */
.qa__item + .qa__item { margin-top: var(--space-heading); }
.qa__item h3 { font-size: var(--text-base); font-weight: var(--weight-bold); margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.qa__item p { margin-bottom: var(--space-3); }

/* --- feature rows (Featured topics, Version B) ---------------------------
   Full-width horizontal cards: media and copy side by side, alternating sides
   row to row. White on the page with --shadow-card, the resting step, like
   every other card. The media column is a fixed share rather than the
   image's own width so all three rows split at the same line, and the
   placeholder tile is the light navy tint, the quiet "something goes here"
   colour already used for the help card. */
.feature-rows__list { display: flex; flex-direction: column; gap: var(--space-6); }
.feature-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Even rows put the image on the right. `order` rather than a reversed
   grid, so the DOM, and therefore the reading order, stays copy-after-image
   on every row. */
.feature-row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature-row:nth-child(even) .feature-row__media { order: 2; }
/* height:100% plus cover: the image fills its half however tall the copy
   beside it runs, rather than setting the row height itself. */
.feature-row__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature-row__placeholder {
  display: grid; place-items: center;
  width: 100%; height: 100%; aspect-ratio: 4 / 3;
  /* One step darker than the band behind the rows, so the tile still reads
     as a tile on it. --color-text-muted on it is 4.73:1. */
  background: var(--color-surface-brand-pressed);
  color: var(--color-text-muted);
}
.feature-row__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: var(--space-7); }
.feature-row__body h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.feature-row__body p { color: var(--color-text-secondary); margin-bottom: var(--space-5); }

/* On the homepage the Get Started cards hang out of the navy band, so the
   first block below them pads its content down past the overhang. Keyed to
   the section attribute already on <html> rather than to :has(). Was the
   CheckFirst band's rule; Featured topics took its place.

   The light-navy band (Celeste, Oct 2026). Below the navy, Home's whole page
   body — Featured topics and Latest news — sits on --color-surface-brand, so
   the white cards have a surface to stand off and the Get Started cards
   straddle navy into light navy. Full-bleed without touching the shell's
   width: a spread box-shadow paints the colour out to both viewport edges and
   clip-path trims it to the band's own height. body's overflow-x: clip
   already guards the overhang. The footer's margin is dropped on Home so the
   band runs straight into it.

   CONTRAST: --color-accent on this tint is 4.37:1, under the 4.5 that 14px
   text needs. Anything orange sitting DIRECTLY on the band must use
   --color-accent-hover (6.14:1) — see .news__viewall below. Text inside the
   white cards is unaffected. */
[data-section="Home"] .page-body {
  padding-top: 0;
  padding-bottom: var(--space-9);
  background: var(--color-surface-brand);
  box-shadow: 0 0 0 100vmax var(--color-surface-brand);
  clip-path: inset(0 -100vmax);
}
[data-section="Home"] .site-footer { margin-top: 0; }
[data-section="Home"] .news__viewall { color: var(--color-accent-hover); }
[data-section="Home"] .page-body > .feature-rows:first-child {
  margin-top: 0;
  /* --space-10 clear BELOW the overhanging cards, matching the space above the
     Get Started heading so the block is evenly framed. */
  padding-top: calc(var(--space-10) + var(--intro-card-overlap));
}

/* --- callouts: ONE design, variants of it (Celeste, Oct 2026) -------------
   Every callout panel shares the same shell: a black 5% stroke
   (--color-line-callout), --radius-lg corners, and a tinted fill. What a
   variant may change is only:

     tint       amber (--color-surface-accent)  .callout-card, .cta-card
                light navy (--color-surface-brand)  .side-card--cta
     CTA        primary button, or a tertiary text link
     type size  body copy at --text-base, or --text-sm in compact cards
     shape      stacked (the .cta-card is stacked and narrow), or inline
                (copy beside the button, .help-card). All left-aligned.

   No callout has a coloured border any more: the orange strokes are gone.
   The CanLII hand-off became a light-navy .help-card with a tertiary CTA.
   See library/callouts.html for all of them side by side.

   Standout callout card in the page body. Body text on the amber tint is
   12.9:1. */
.callout-card {
  background: var(--color-surface-accent);
  border: var(--border-width) solid var(--color-line-callout);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
}
.callout-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.callout-card p { max-width: var(--measure); margin-bottom: var(--space-4); }
.callout-card .rich-list { margin-bottom: var(--space-4); }
.callout-card > :last-child { margin-bottom: 0; }
/* THE CTA GAP (Celeste, Oct 2026): a callout's CTA sits as far from the text
   above it as the card's own padding, so the button has the same room on
   every side and reads as the card's action, not the next line of copy. It
   was 16px, a paragraph gap. The last text keeps its --space-4 bottom margin;
   the button adds the rest. Cards and news cards already follow this. */
.callout-card > .button { margin-top: var(--space-4); }

/* Rich body content inside prose/qa answers (Guide ch.2, Sep 2026). */
.rich-list { max-width: var(--measure); margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.rich-list li { margin-bottom: var(--space-2); }
.rich-list li:last-child { margin-bottom: 0; }
/* A list of short items in columns (`{ list, columns }`), so twelve
   one-line items do not run twelve lines down the left of a wide page. The
   list takes the wide measure; items never split across columns, and the
   last item in each column keeps its gap so the columns stay level. */
.rich-list--cols { max-width: var(--measure-wide); columns: var(--list-cols, 3); column-gap: var(--space-7); }
.rich-list--cols li, .rich-list--cols li:last-child { break-inside: avoid; margin-bottom: var(--space-2); }
/* A term that fills the item and wraps sits on its first line, so the
   bullet lines up with the first line rather than the button's last one. */
.rich-list--cols .term { vertical-align: top; }
/* The Guide's flagged asides. The base keeps the amber rather than being
   colourless, so a call that predates the tones — or one that loses its
   modifier in an edit — still renders as the warning it was written to be.

   --color-text is 12.9:1 on --color-surface-accent and 12.3:1 on
   --color-fill-muted, so both tints carry body copy safely. The left bar is
   the only thing that distinguishes them at a glance, which is the point:
   an aside that is a pointer should not arrive with a warning's colour. */
.rich-note {
  max-width: var(--measure);
  background: var(--color-surface-accent);
  border-left: var(--space-1) solid var(--color-accent-bright);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
/* Info, Oct 2026 (Celeste): a 5% black fill with blue text, 14px, rounded
   all round, no bar. It was a grey tint with a grey bar, then briefly solid
   navy, which read too dark. The fill is translucent, so it darkens whatever
   it sits on by the same step: on the page, inside a white card, or inside
   the process flow's grey step. The text is --color-band-feature-head navy,
   8.15:1 even at its darkest (in the grey step); the brighter
   mid blue (#3d65bd, --color-term) would only just pass there, at 4.51:1. Links
   and the "Note:" label take the same blue. */
.rich-note--info {
  background: var(--color-fill-note);
  color: var(--color-band-feature-head);
  border-left: 0;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
}
.rich-note--info strong { color: var(--color-band-feature-head); }
.rich-note--info a, .rich-note--info a:hover,
.flow__text .rich-note--info a { color: var(--color-band-feature-head); text-decoration-color: currentColor; }
/* Important, Oct 2026 (option A2 plus a shadow and a double-exclamation mark): the word on its
   own line above the sentence, so it is seen before the text is read, and
   --shadow-sm, which the tiles, chips and callout cards do not have. The
   label is --color-accent-hover, 6.65:1 on the tint. */
.rich-note--important { padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); }
.rich-note--important > p { margin: 0; font-size: var(--text-sm); }
/* The label is the title: the larger size, the sentence under it the smaller
   (Celeste, Oct 2026). */
.rich-note--important > p.rich-note__label {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-1);
  color: var(--color-accent-hover);
  font-size: var(--text-base); font-weight: var(--weight-bold);
}
.rich-note__label svg { flex: none; }

/* A bolded lead-in opening a paragraph. Not a heading: it names what the
   paragraph is about without adding a level to the document outline, which
   is what the Guide's own bolding is doing wherever it appears mid-section. */
.rich-lead { color: var(--color-text); font-weight: var(--weight-bold); }

/* --- comparison table ------------------------------------------------------
   Rules only where the data changes and none down the sides: a full grid
   draws nine lines to separate three things. Cells are top-aligned, because a
   first column of two words beside a column of three sentences centres to
   nothing.

   THE TABLE IS A PANEL (Celeste, Oct 2026). It sits on the sand fill
   (--color-fill-muted) with the callouts' black 5% stroke and --radius-lg,
   generous padding inside and a clear margin above and below, so it stands
   off the prose around it and scans as one object. Sand, not amber: amber
   means attention on this site, and a table is not a warning. The header
   row has no fill of its own; its bold labels and a stronger rule carry it.
   Rules between rows are translucent black so they sit on the sand without
   turning cool. Links inside take the darker orange: --color-accent is
   4.36:1 on sand, under AA; --color-accent-hover is 6.13:1.

   .table-wrap scrolls instead of the page — see wireTables in blocks.js for
   why the focusability is conditional. */
.table-wrap {
  max-width: var(--measure-wide); overflow-x: auto;
  background: var(--color-fill-muted);
  border: var(--border-width) solid var(--color-line-callout);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-6) var(--space-4);
  margin-block: var(--space-7);
}
.table-wrap:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table caption { text-align: left; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.data-table th, .data-table td {
  text-align: left; vertical-align: top;
  padding: var(--space-5) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-line-table);
}
/* The panel's own padding is the outer gutter, so the first and last
   columns sit flush with it. */
.data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table a { color: var(--color-accent-hover); }
/* nowrap on the column heads only: they are short labels, and letting "What
   starts it" break to two lines costs a row of height across the whole table
   to save a few characters of width the body cells need anyway. */
.data-table thead th {
  padding-top: var(--space-4); padding-bottom: var(--space-3);
  font-weight: var(--weight-bold); color: var(--color-text);
  border-bottom-color: var(--color-line-table-head);
  white-space: nowrap;
}
/* The row header is the thing being compared, so it holds the ink; the cells
   explaining it take the secondary tier. 12ch stops a two-word term breaking
   one word per line while the sentence beside it has room to spare. */
/* Column heads and row heads are bold, same face and size as the cells
   (Celeste, Oct 2026): at medium weight they read as another line of body
   text, which made the tables hard to scan. */
.data-table tbody th { font-weight: var(--weight-bold); color: var(--color-text); min-width: 12ch; }
.data-table td { color: var(--color-text-secondary); }
.data-table__nowrap { white-space: nowrap; }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

/* --- definition list -------------------------------------------------------
   Two columns, so the terms form a rail the eye can run down and a reader can
   find the one word that applies to them. The term column is a fixed 12rem
   rather than max-content: the Guide's terms run from "Staff" to
   "Discretionary matters", and sizing every row to the longest one strands
   the short ones halfway across the page. */
.def-list { max-width: var(--measure-wide); margin: 0 0 var(--space-3); }
.def-list__item {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) 0;
  border-top: var(--border-width) solid var(--color-border-subtle);
}
.def-list__item:first-child { border-top: 0; padding-top: 0; }
.def-list__item:last-child { padding-bottom: 0; }
.def-list dt { font-weight: var(--weight-medium); color: var(--color-text); }
/* A source line under the term, quieter than the term and on its own line. */
.def-list__cite { display: block; margin-top: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.def-list dd { margin: 0; color: var(--color-text-secondary); }
.def-list dd p { margin: 0; max-width: var(--measure); }
.def-list dd p + p { margin-top: var(--space-3); }

/* --- compact step sequence -------------------------------------------------
   The small sibling of .flow. No card, no connector rail, no caveat slot —
   just numbered instructions at body scale, for a sequence that belongs
   inside an answer rather than standing as the page's infographic.

   --color-accent on --color-surface-accent is 4.77:1, which clears AA for the
   bold 14px the numeral is set at. */
.steps { --steps-marker: 1.75rem; list-style: none; max-width: var(--measure); margin: 0 0 var(--space-3); padding: 0; }
.steps__item { display: grid; grid-template-columns: var(--steps-marker) minmax(0, 1fr); gap: 0 var(--space-4); }
.steps__item + .steps__item { margin-top: var(--space-4); }
.steps__num {
  width: var(--steps-marker); height: var(--steps-marker);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface-accent); color: var(--color-accent);
  border: var(--border-width) solid var(--color-border-accent);
  font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1;
}
.steps__label { margin: 0; color: var(--color-text); font-weight: var(--weight-medium); }
.steps__body { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }

/* The horizontal variant — the small infographic. A hairline above each
   column rather than an arrow between them: the numerals already carry the
   sequence, and a chevron between four boxes is the first thing to break when
   the row reflows. auto-fit means three steps and four both fill the row. */
.steps--row { display: grid; grid-template-columns: repeat(var(--steps-cols, 3), minmax(0, 1fr)); gap: var(--space-5); max-width: var(--measure-wide); }
.steps--row .steps__item { display: block; margin-top: 0; padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.steps--row .steps__num { margin-bottom: var(--space-3); }

/* --- fact strip ------------------------------------------------------------
   Three or four figures in a row, each with the thing it measures under it.
   The value is set in the heading face: it is the one word the reader is here
   for, and the serif separates it from the label without needing a size jump
   large enough to unbalance the row. auto-fit at 11rem is the width the
   longest label in use needs before it breaks to a third line. */
.factstrip {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  max-width: var(--measure-wide);
  display: grid; grid-template-columns: repeat(var(--facts-cols, 3), minmax(0, 1fr)); gap: var(--space-4);
}
.factstrip__item {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-subtle);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}
.factstrip__value { font-family: var(--font-heading); font-size: var(--text-lg); line-height: var(--leading-tight); color: var(--color-text); }
.factstrip__label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- related resources -----------------------------------------------------
   Deliberately not built from .card. This is wayfinding at the foot of the
   page, not content, and it has to read as a different KIND of thing or a
   reader treats it as one more section to work through. So: the subtle fill
   the sidebar cards use rather than .card's white, a flat surface with no
   shadow, a smaller heading than a section h2 (--text-lg against --text-xl),
   and body copy a step down at --text-sm.

   A rule across the top does most of the work — it says the page's content
   has finished. The whole card is the anchor rather than a link inside it,
   which gives a target far past the 44px AAA threshold.

   Contrast on the --color-surface-subtle fill: the muted "Previous" eyebrow
   is 6.3:1, the secondary body 9.9:1, the accent title 4.8:1. */
.related { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-6); }
.related__title { font-size: var(--text-lg); margin-bottom: var(--space-5); }
.related__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
}
.related__grid > li { display: flex; }
.related-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  width: 100%;
  padding: var(--space-5);
  background: var(--color-surface-subtle);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}
.related-card:hover { background: var(--color-surface); border-color: var(--color-border); }
/* The direction glyph, which is what makes two cards legible as a sequence
   rather than as two unrelated suggestions. It replaced an uppercase
   "PREVIOUS" / "NEXT" eyebrow (Celeste, Sep 2026); the words are still in the
   DOM under .visually-hidden, so the direction survives for a screen reader.

   No tile behind it, unlike .card__icon. The card is already a tinted panel,
   and a tint on a tint at this size reads as a smudge rather than a shape.
   --color-accent rather than --color-accent-bright: the arrow now carries
   meaning, so WCAG 1.4.11 wants 3:1 and bright is only 3.1:1 on this fill. */
.related-card__icon { display: flex; color: var(--color-accent); }
.related-card__title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-accent); }
.related-card:hover .related-card__title { text-decoration: underline; }
.related-card__body { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* --- card grid ------------------------------------------------------------ */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
/* A white fill and a resting shadow, not a bare hairline: on the #FCFCFC page
   a 1px outline round nothing reads as a dotted region rather than an object.
   --shadow-card (sm) is the resting step — the card is part of the page, not
   floating above it. No hover state (Celeste, Oct 2026): the links inside
   carry their own. */
.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-surface-accent); border: var(--border-width) solid var(--color-border-accent); color: var(--color-accent-bright); margin-bottom: var(--space-4); }
.card h3 { font-size: var(--text-md); margin-bottom: var(--space-3); }
.card p { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; margin-bottom: var(--space-4); max-width: none; }
.card__link { font-size: var(--text-sm); }
/* `.card__head` is unstyled by default so the existing cards on the Hearings
   and Guide landings render exactly as before — icon above heading. */
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--color-accent); text-decoration: underline; }

/* Card colourways are gone in Version B (Oct 2026). Figma 153:2568 gave each
   Get Started card its own colour, teal, blue and orange; the feedback took
   the teal out and put all three cards in the house orange, so every card is
   the one base treatment above. `accent` still adds a `card--<name>` class if
   a colourway is ever wanted back. */

/* Card child links — Figma 29:660 draws them bold and underlined. */
.card__links { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.card__links li + li { margin-top: var(--space-2); }
.card__links a { font-size: var(--text-sm); }

/* Homepage quicklink variant: icon and heading share a row.
   Figma also wraps the row in a carousel with prev/next chevrons and a
   "See more" link. Skipped — three cards fit a static row at every
   breakpoint, and a carousel would hide two thirds of the homepage entry
   points behind a control. */
.card-grid--quicklink .card__head { display: flex; align-items: center; gap: var(--space-4); }
.card-grid--quicklink .card__icon { margin-bottom: 0; }
.card-grid--quicklink .card__head h3 { margin-bottom: 0; }
.card-grid--quicklink .card__head + p { margin-top: var(--space-4); }
/* `body` is optional on a quicklink card. Without it the link list follows the
   head directly and has to carry the gap the paragraph used to. */
.card-grid--quicklink .card__head + .card__links { margin-top: var(--space-5); }
/* The body paragraph already carries a bottom margin; without this the two
   stack to a 32px gap above the link list. */
.card-grid--quicklink .card__links { margin-top: 0; }

/* --- news row — Figma 29:660 ---------------------------------------------- */
.news__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); }
.news__viewall { flex: none; font-size: var(--text-sm); }
.news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.news-card { background: var(--color-surface); box-shadow: var(--shadow-card); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; }
.news-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); max-width: none; }
.news-card__date { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.news-card__tag { font-size: var(--text-xs); font-weight: var(--weight-medium); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-accent); border: var(--border-width) solid var(--color-border-accent); color: var(--color-accent); }
.news-card h3 { font-size: var(--text-md); margin-bottom: var(--space-5); }
/* The reference tertiary: bare label plus arrow. */
.news-card__link { margin-top: auto; font-size: var(--text-sm); }

/* --- FAQ ------------------------------------------------------------------ */
.faq__sub { color: var(--color-text-muted); margin-top: calc(var(--space-4) * -1 + var(--space-1)); }
.faq__list { border-top: var(--border-width) solid var(--color-border-subtle); }
.faq__item { border-bottom: var(--border-width) solid var(--color-border-subtle); }
.faq__item h3 { margin: 0; font-size: var(--text-base); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; background: none; border: 0; text-align: left; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text); }
.faq__chev { flex: none; transition: transform var(--duration-fast) var(--ease); }
.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(180deg); }
.faq__a { padding-bottom: var(--space-4); }
.faq__a p { color: var(--color-text-secondary); }

/* --- process flow (Guide infographic) --------------------------------------
   A numbered vertical spine with a filled panel per step. Vertical rather than
   the horizontal icon row the CER and Library of Parliament examples use, for
   two reasons: the steps carry two or three sentences each, not a two-word
   label, and a vertical stack is already the mobile layout, so there is no
   second design to keep in sync.

   The fill is the point of the block as much as the numbering. This sits in a
   page that is otherwise unbroken Guide prose, and a reader who has just been
   served a notice needs to find it by scanning, not by reading. The AER's
   hearing-process graphic tints every row for the same reason.

   The disc stays OUTSIDE the fill, in the left gutter, so the spine can run
   between panels. Put it inside and each panel becomes a self-contained card
   and the sequence stops reading as one movement.

   The block caps its own width. The content column runs to ~950px beside the
   sidebar, and a spine that long with text capped at --measure reads as a thin
   ribbon adrift in the field rather than as one object.                     */
/* --measure-panel, the same box width .panel takes, rather than the measure
   plus this block's own chrome. Computed the second way it came to 748px
   against the panel's 704 — two outer edges 44px apart, which reads as a
   mistake where two clearly different widths would read as a decision.

   The cost is that the step text sits at 596px rather than 640px, about 65
   characters at 16px. That is still inside the 45-75 band and closer to the
   66 usually given as the target, so the tighter column is arguably the
   better measure anyway. */
.flow { max-width: var(--measure-panel); }

/* Graphics keep the tables' room above and below (Celeste, Oct 2026): the
   fact strip, the step row and the flow as a part inside a `qa` answer were
   16px from the paragraphs around them, which read as crowded next to a
   table's 40px. Same token, and the same step down on a phone (below). The
   page-level `section.flow` is left alone; it has its own h2 and rhythm. */
div.flow, .factstrip, .steps--row { margin-block: var(--space-7); }
.flow__standfirst { font-size: var(--text-md); color: var(--color-text-secondary); margin-bottom: var(--space-6); }

.flow__steps { list-style: none; margin: 0; padding: 0; }

.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--flow-marker) minmax(0, 1fr);
  gap: 0 var(--flow-gap);
  padding-bottom: var(--space-4);
}
.flow__step:last-child { padding-bottom: 0; }

/* The connector, drawn per step rather than once behind the whole list: a
   single full-height line has to be shortened by the last step's height to
   avoid dangling past the final disc, and that height is unknowable. Each
   step draws the segment BELOW its own disc; the last step draws none.

   `top` clears the disc, which is itself pushed down by the panel's top
   padding so that disc and title line up. --color-border is non-text, so the
   3.20:1 accent-bright would be legal here; the muted line is used instead
   because the discs already carry the accent and a second orange competes. */
.flow__step::before {
  content: "";
  position: absolute;
  left: calc(var(--flow-marker) / 2);
  top: calc(var(--flow-pad) + var(--flow-marker));
  bottom: 0;
  width: var(--border-width);
  transform: translateX(-50%);
  background: var(--color-border);
}
.flow__step:last-child::before { display: none; }

/* White on --color-accent is 4.90:1. The numeral is real text, not a CSS
   counter and not aria-hidden: `list-style: none` drops list semantics in
   Safari/VoiceOver, so the visible numeral is the only thing guaranteeing the
   order is announced.

   margin-top is what aligns the disc to the title inside the panel: both then
   start at --flow-pad from the step's top edge. The 2px difference between
   their optical centres is below the threshold at which it reads as an error,
   and closing it exactly would need a magic number tied to the title's
   line-height. */
.flow__num {
  margin-top: var(--flow-pad);
  width: var(--flow-marker);
  height: var(--flow-marker);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The fill. --color-surface-muted rather than --color-surface-accent: the
   amber tint is already the callout signal, carried by .rich-note and
   .callout-card, and spending it on six consecutive steps would leave the
   block's own closing caveat with nothing louder to say. Body text at
   --color-text-secondary is 9.6:1 on this grey. */
.flow__text {
  background: var(--color-surface-muted);
  border-radius: var(--radius-lg);
  padding: var(--flow-pad);
}

/* Links inside a panel take the deeper orange. --color-accent is 4.90:1 on
   white but only 4.46:1 on this grey — an AA failure by 0.04. Lightening the
   fill until the link passes would take the fill to 1.05:1 against the page,
   which is no fill at all, so the link steps down a tier instead:
   --color-accent-hover is 6.27:1 here and invents no new colour. Same move as
   the dark surfaces make, at a much smaller scale.

   Hover stays the global underline-thickening from base.css, so no second
   colour is needed and the link is never distinguished by colour alone. */
.flow__text a { color: var(--color-accent-hover); }

/* Title and chip share a row (Celeste, Sep 2026 — the chip was below the
   title and now sits beside it). `wrap` is load-bearing: "Only if the
   allegations are proven" beside "The sanctions hearing" needs about 430px,
   so on a narrow panel the chip drops to its own line rather than squeezing
   the title. `baseline` rather than `center` so the chip's text sits on the
   title's baseline and the pill's extra height hangs below it. */
.flow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

/* Optical, not arithmetic: the disc is 36px and the h3's line box is 24px, so
   matching their tops leaves the numeral looking high against the title. */
.flow__title {
  font-size: var(--text-md);
  margin: 0;
  padding-top: var(--space-1);
}
/* Named rather than `.flow__text > p`: that selector is (0,2,1) and beat
   .flow__tag's (0,1,0), so the pill silently rendered in the body colour.
   Two single-class selectors let source order decide, which is legible. */
.flow__body { margin: 0 0 var(--space-3); color: var(--color-text-secondary); }
.flow__body:last-child { margin-bottom: 0; }

/* For a step that does not always happen, so the diagram never implies that
   every case takes every step — step 3, because not every proceeding involves
   a hearing at all. White on the step's grey fill, which is the only pairing
   that gives the pill an edge. */
.flow__tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* The caveat, now inside the step it qualifies rather than under the whole
   block. Smaller than the step's own body (Celeste, Sep 2026): it is an aside
   about that step, and at body size two amber-tinted lines compete with the
   step they are qualifying.

   It is the dark navy Info note (Celeste, Oct 2026), which stands clear of
   the step's grey fill; it was an amber Important note. `max-width` is
   cancelled because
   .rich-note caps at --measure for full-width Guide prose, and inside a panel
   that is already narrower than the measure it would do nothing but leave the
   note ragged against the panel's right edge. */
.flow__note {
  margin: var(--space-4) 0 0;
  max-width: none;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* --- responsive ----------------------------------------------------------- */
/* The chips are the one component whose breakpoint is derived rather than
   chosen. Measured, not estimated: their four labels plus the three gaps come
   to 1254px of content column, so the row needs 1302px of viewport once the
   gutters are counted. Below that the flex row wraps 3 + 1, and a lone
   full-width chip under three peers reads as the important one, which it is
   not. A 2x2 grid keeps the set reading as a set.

   Re-measure if the labels or the chip padding change — it is a measurement,
   not a taste. Set the row to `flex-wrap: nowrap; width: max-content` with the
   items at `flex: 0 0 auto` and read its width back. */
@media (max-width: 1301px) {
  .hero__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 900 is where the homepage's wide composition stops fitting.

   THIS BLOCK MUST STAY BELOW the .hero / .card / .card-grid definitions it
   overrides. Media queries carry no extra specificity, so a max-width rule
   placed above its own base rule silently loses on source order. That is what
   the earlier 2-up bug was: the rule lived in a (max-width: 767px) block with
   a SECOND (max-width: 767px) block underneath resetting the same grid to 1fr,
   so the 2-up state rendered at no width at all and the 3-up grid held right
   down to 768 — iPad portrait. */
@media (max-width: 900px) {
  /* Photograph under the text rather than beside it. */
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero--feature > * + * { margin-top: var(--space-6); }
  .hero__intro { text-align: left; margin-top: var(--space-9); }
  [data-section="Home"] .page-body > .feature-rows:first-child { padding-top: var(--space-9); }
  /* One column, image on top whatever the row, 16:9 so the picture does not
     cost a full screen before the heading. */
  .feature-row, .feature-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .feature-row:nth-child(even) .feature-row__media { order: 0; }
  .feature-row__media img, .feature-row__placeholder { aspect-ratio: 16 / 9; }
  .feature-row__body { padding: var(--space-5); }
  /* One column, not two. Every card grid on the site holds three cards, so a
     2-up row leaves the third stranded at half width under two full ones.
     Straight from 3-up to 1-up has no orphan at any width. */
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Stacked cards would need an overlap taller than the band itself, so the
     straddle is a wide-viewport device only. Below here the two bands simply
     meet, and Featured topics reverts to its own padding. */
  .hero__cards { margin-bottom: 0; }
}

@media (max-width: 1024px) {

  .layout { grid-template-columns: 1fr; gap: var(--space-6); }

  /* MOBILE PATTERN (Sep 2026 review). On This Page leads as a STICKY
     disclosure, the content follows, and the other side cards drop to the
     bottom — blocks.js moves them out of the rail so .layout__side holds only
     the ToC.

     .layout goes display:block on purpose: as a grid, a sticky item is
     confined to its own row and cannot travel. As a block child, the rail
     sticks against the full height of .layout, which is the whole page. */
  .layout { display: block; }
  .layout__side { position: sticky; top: 0; z-index: 20; margin-bottom: var(--space-6); }
  .layout > .side-card { margin-top: var(--space-6); }

  /* The box comes back. Above 1024 the ToC has no fill at all so the amber
     active row can be the only one; here the card is STUCK over scrolling
     content, and without a solid fill the page runs through it. */
  .side-card--toc {
    background: var(--color-surface-subtle);
    border: var(--border-width) solid var(--color-border-subtle);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
  }
  .side-card--toc h2 { padding-inline: 0; }
  /* Collapsed, the heading is the whole card, so it carries no bottom gap. */
  .side-card--toc h2 { margin-bottom: 0; }
  /* Expanded while stuck, it must not swallow the viewport. */
  .side-card--toc ul { max-height: 50vh; overflow-y: auto; }
  /* Jumping to a section must clear the stuck bar, or the heading lands
     underneath it. Roughly the collapsed card plus a gap. */
  .layout__main h2[id] { scroll-margin-top: calc(var(--space-9) + var(--space-5)); }
}

/* Below 767 the header is sticky too, so the rail stacks under it rather than
   colliding, and jump targets have to clear both layers. */
@media (max-width: 767px) {
  /* --space-4 clear of the header, so the two stuck layers read as separate
     rather than one welded bar. Jump targets clear both plus that gap. */
  .layout__side { top: calc(var(--header-condensed-h) + var(--space-4)); }
  .side-card--toc ul { max-height: 40vh; }
  .layout__main h2[id] {
    scroll-margin-top: calc(var(--header-condensed-h) + var(--space-4)
                            + var(--space-9) + var(--space-5));
  }
  .side-card--toc ul:not([hidden]) { margin-top: var(--space-4); }
  .toc__toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: var(--space-3); padding: 0; background: none; border: 0;
    font: inherit; color: inherit; text-align: left;
  }
  .toc__chev { flex: none; transition: transform var(--duration-fast) var(--ease); }
  .toc__toggle[aria-expanded="true"] .toc__chev { transform: rotate(180deg); }
}
@media (max-width: 767px) {
  .hero h1 { font-size: var(--text-2xl); }
  .card-grid { grid-template-columns: 1fr; }
  .news__grid { grid-template-columns: 1fr; }
  /* The disc, its gutter and the panel's own padding together cost 108px of a
     360px screen. Shrinking all three keeps the step text above roughly 40
     characters, below which the sentences ladder badly. The numerals stay
     legible at --text-sm. */
  .flow { --flow-marker: 1.75rem; --flow-gap: var(--space-3); --flow-pad: var(--space-4); }
  .flow__num { font-size: var(--text-sm); }
  .flow__title { font-size: var(--text-base); padding-top: 0; }
  /* Chips stack and run full width: three pills wrapping raggedly across a
     360px row read as debris rather than as a set of choices, and a centred
     column of three different widths is no better. The <li> is what stretches,
     so the chip inside it has to be told to fill it — inline-flex sizes to its
     content otherwise. */
  .hero__chips { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .hero-chip { font-size: var(--text-sm); }
  /* "View all" beside a wrapped h2 crowds a 360px row; drop it below. */
  .news__head { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
  .news__head h2 { margin-bottom: 0; }
  /* The pill stays a pill. It used to wrap, dropping the button onto its own
     full-width row and squaring the shape off, which made the homepage's most
     prominent control look like a different component on a phone.

     Instead the button collapses to a round icon target and the field's leading
     magnifier goes with it, since the button now carries the only one. That
     frees enough room for a real field: at 402 the input keeps 274px. The label
     stays in the DOM as visually-hidden text, so the button's accessible name is
     still "Search" and the stub toast still reads it. */
  .hero-search {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    min-height: auto;
  }
  .hero-search__icon { display: none; }
  .hero-search--filter { padding: var(--space-2) var(--space-4); min-height: var(--height-search-sm); }
  .hero-search--filter .hero-search__icon { display: block; }
  .hero-search__input { font-size: var(--text-base); }
  .hero-search__submit {
    width: var(--tap-min); height: var(--tap-min); padding: 0;
    justify-content: center;
  }
  .hero-search__submit-icon { display: block; }
  /* Same rule as .visually-hidden, applied by breakpoint rather than by class
     so the markup does not have to know which size it is rendering at. */
  .hero-search__submit-label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .layout__side { flex-direction: column; }
  .panel { padding: var(--space-5); }
}

/* ============================================================================
   RECORD TABLE — spec §3.4.3
   ========================================================================== */
.rt__field { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.rt__field > span { font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.rt__field input, .rt__field select { padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); background: var(--color-surface); color: var(--color-text); }
.rt__field input:hover, .rt__field select:hover { border-color: var(--color-border-strong); }

.rt__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); padding-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
/* The hearing schedule's bar has no rule under it (Celeste, Oct 2026): the
   table's own panel starts right below and already separates the two. */
.rt__bar--plain { padding-bottom: 0; border-bottom: 0; }
.rt__count { margin: 0; font-weight: var(--weight-bold); }
/* Find a record's sheet: the four filter selects, two across in the
   popover and stacked in the phone sheet. */
.filter-sheet.filter-sheet--records { width: var(--width-filter-sheet); }   /* two classes: the base .filter-sheet rule comes later */
.filter-sheet__selects { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); }
.filter-sheet__selects select { width: 100%; min-width: 0; }
.rt__chips { display: contents; }
.rt__clear { background: none; border: 0; color: var(--color-accent); text-decoration: underline; font-size: var(--text-sm); padding: var(--space-2); }

.rt__results { margin-top: var(--space-5); }

/* EVERY ROW IS ONE LINK (Celeste, Sep 2026). A record row names a document
   and had no way to open it, so the grid moved off the <li> and onto an
   anchor filling it. Fetching the PDF is not built; the row raises the stub
   toast, which is what tells a moderator a participant went looking for one.

   The whole row highlights rather than the title underlining — the same
   affordance as the On this page rail, in the light navy instead of the
   amber, because amber is the rail's ACTIVE state and a hover that borrowed
   it would read as "you are here". Three states: hover tints, :active
   deepens, :focus-visible takes the global ring.

   THE TITLE IS NAVY AT REST, NOT ORANGE, and that is a contrast result
   rather than a taste one. --color-accent on --color-surface-brand is 4.37:1
   — under the 4.5 this 14px text needs — so an orange title could not
   survive its own hover state. It goes to --color-accent-hover on hover
   instead, at 6.1:1, which also gives the row a second cue beyond the fill.
   At rest the row is quiet, which is what "highlight the line, not an
   underline" asks for.

   Every state was checked at the sizes actually used, the 12px type column
   included: on --color-surface-brand body text is 12.0:1, muted 5.3:1 and
   --color-accent-hover 6.1:1; on --color-surface-brand-pressed 10.8:1,
   4.7:1 and 5.5:1.

   The negative inline margin is what lets the highlight breathe without
   knocking the date out of alignment: the anchor pads by --space-3 and the
   list pulls back by the same, so the first column still lines up with the
   prose above it and the tint extends past the text on both sides. */
/* Column labels, and they are aria-hidden on purpose. This is a list of
   links, not a table: an <a> cannot wrap <td>s, so the rows could not become
   a real table without giving up the whole-row link. Exposing three orphan
   words to a screen reader as if they headed columns would claim a structure
   the markup does not have — and each row already reads date, type, title in
   that order, all three self-describing. So the labels are for the eye only.

   The list's --color-border top rule doubles as the rule under this head; it
   is the stronger border, matching .data-table's thead for the same reason.

   Hidden below 900 with the grid, where the row stacks to one column and
   three headings would be labelling nothing. */
.rt__docs-head {
  display: grid; grid-template-columns: var(--rt-doc-cols);
  gap: var(--space-4);
  margin-inline: calc(var(--space-3) * -1);
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
}
/* One definition for the three columns, read by the head and the rows, so
   they cannot drift out of alignment. Date, then type, then the document —
   the two short fixed fields first and the long flexible one last (Celeste,
   Sep 2026), which also puts the title next to nothing that can push it. */
.rt__docs, .rt__docs-head { --rt-doc-cols: 110px 200px minmax(0, 1fr) auto; }
.rt__docs { list-style: none; margin: 0; padding: 0; margin-inline: calc(var(--space-3) * -1); border-top: var(--border-width) solid var(--color-border); }
.rt__docs li { border-bottom: var(--border-width) solid var(--color-border-subtle); }
.rt__docs li:last-child { border-bottom: 0; }
.rt__doc {
  display: grid; grid-template-columns: var(--rt-doc-cols);
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  align-items: baseline;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease);
}
.rt__doc:hover  { background: var(--color-surface-brand); }
.rt__doc:active { background: var(--color-surface-brand-pressed); }
.rt__doc:hover .rt__doc-title,
.rt__doc:active .rt__doc-title { color: var(--color-accent-hover); }
.rt__doc-date { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rt__doc-title { color: var(--color-text); }
.rt__doc-type { color: var(--color-text-muted); font-size: var(--text-xs); }

/* Document rows, Oct 2026 (B.docRows): the type is a small sand chip, the
   case line sits under the title on All case records, and a trailing
   "PDF" mark with a download glyph says what the row fetches. */
.rt__doc-case { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.rt__doc-file {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-accent);
}
.rt__doc:hover .rt__doc-file { color: var(--color-accent-hover); }
/* The Document column (the PDF) is right-aligned and held off the card's
   edge, the head label over it, so the mark does not sit hard against the
   right of the row. */
.rt__doc-file, .rt__docs-head-file { justify-self: end; margin-right: var(--space-4); }
/* The document list and the case cards take the hearing schedule's light
   data panel (Celeste, Oct 2026): --color-fill-data, the callouts' 5%
   stroke, no shadow. Rules inside are the schedule table's translucent
   blacks, which darken the sand rather than laying cool grey on it. */
.doc-list {
  padding: var(--space-4) var(--space-5);
  background: var(--color-fill-data);
  border: var(--border-width) solid var(--color-line-callout);
  border-radius: var(--radius-lg);
}
.doc-list .rt__docs { border-top-color: var(--color-line-table-head); }
.doc-list .rt__docs li { border-bottom-color: var(--color-line-table); }


/* ============================================================================
   CHIPS — one design language (Celeste, Oct 2026)
   ----------------------------------------------------------------------------
   Every small labelled shape on All case records, the case page and the
   hearing schedule is a .chip. One anatomy: 12px medium text at tight
   leading, 4px x 12px padding, a 14px icon 8px from the text, a 1px stroke,
   --radius-tag (a pill on one line, a soft tag if it wraps): 24px tall,
   the AA target size. The modifier says what the chip is DOING, and the
   colour follows the site's rules: navy is state, amber is attention,
   orange is action.

     .chip                 a fact            white, 5% stroke, muted icon
     .chip--state          where a case is   light navy, navy text (open)
     .chip--attention      needs attention   amber, the amber edge (unpaid)
     .chip--action         a link            white, orange icon; amber on hover
     .chip--filter         an applied filter light navy button with an X

   A closed case is a plain fact chip with a check. White chips read on
   both the page and the sand data panel; the sand fills they had
   disappeared on it (1.02:1).
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-min-aa);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-line-callout);
  border-radius: var(--radius-tag);
  background: var(--color-surface);
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--leading-tight);
  color: var(--color-text); text-align: left; text-decoration: none; white-space: nowrap;
}
.chip svg { flex: none; width: 14px; height: 14px; color: var(--color-text-muted); }
/* A chip whose label can be long (a document type) wraps instead of
   pushing its column wider. */
.chip--wrap { white-space: normal; }
.chip--state { background: var(--color-surface-brand); border-color: var(--color-border-brand); color: var(--color-band-feature-head); }
.chip--state svg { color: var(--color-band-feature-head); }
.chip--attention { background: var(--color-surface-accent); border-color: var(--color-border-accent); color: var(--color-accent-hover); }
.chip--attention svg { color: var(--color-accent-hover); }
.chip--action { cursor: pointer; }
.chip--action svg { color: var(--color-accent-hover); }
.chip--action:hover { background: var(--color-surface-accent); border-color: var(--color-accent-bright); }
.chip--filter {
  background: var(--color-surface-brand); border-color: var(--color-border-brand);
  cursor: pointer;
}
.chip--filter svg { width: 12px; height: 12px; color: var(--color-text); }
.chip--filter:hover { background: var(--color-surface-brand-pressed); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rt__doc-title .chip { margin-left: var(--space-2); vertical-align: middle; }

/* --- tabs (Oct 2026, B.tabs) ----------------------------------------------
   Text tabs on a bottom rule. The selected tab is navy with a navy bar:
   navigation takes the blue family, like the rail's selected row. Counts
   are light navy chips. The strip scrolls sideways inside itself on a
   phone (never the page); position: relative so B.wireTabs can measure a
   tab's offsetLeft against it. */
.tabs {
  position: relative;
  display: flex; gap: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-line);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  border: 0; border-bottom: var(--border-width-accent) solid transparent;
  margin-bottom: calc(var(--border-width) * -1);
  background: none; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; scroll-snap-align: start;
}
.tabs__tab:hover { color: var(--color-text); border-bottom-color: var(--color-border-brand); }
.tabs__tab[aria-selected="true"] { color: var(--color-band-feature-head); font-weight: var(--weight-bold); border-bottom-color: var(--color-band-feature-head); }
.tabs__count {
  min-width: 1.5rem; padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--color-surface-brand);
  color: var(--color-band-feature-head); font-size: var(--text-xs); font-weight: var(--weight-bold); text-align: center;
}
.tabs + .rt__bar { margin-top: var(--space-5); }
.case-page__docs .tabs { margin: var(--space-5) 0 var(--space-4); }

/* --- case cards (Oct 2026) ------------------------------------------------
   One card per case on All case records: parties and status, a row of
   fact chips, then the plain-language summary. The whole card is one link
   (the title's ::after covers it); it tints on hover and takes the focus
   ring on the card. It sits on the schedule's data panel, flat. */
.case-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.case-card {
  position: relative;
  padding: var(--space-5) var(--space-6);
  background: var(--color-fill-data);
  border: var(--border-width) solid var(--color-line-callout);
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast) var(--ease);
}
.case-card:hover { background: var(--color-surface-brand); }
.case-card:has(a:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.case-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.case-card__title { margin: 0; font-size: var(--text-md); }
.case-card__title a { color: var(--color-text); text-decoration: none; }
.case-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.case-card__title a:focus-visible { outline: none; }
.case-card:hover .case-card__title a { color: var(--color-accent-hover); text-decoration: underline; }
.case-card__chips { margin-top: var(--space-3); }
/* Labels for the status and the summary (Celeste, Oct 2026), so each reads
   as what it is at a glance: the mobile schedule cards' field-label style. */
.case-card__label { display: block; margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.case-card__status { display: flex; align-items: center; gap: var(--space-2); flex: none; margin: 0; }
.case-card__status .case-card__label { margin: 0; }
.case-card__summary { max-width: var(--measure-wide); margin-top: var(--space-4); }
.case-card__summary p:not(.case-card__label) { max-width: var(--measure-wide); margin: 0; color: var(--color-text-secondary); }

/* --- case page (Oct 2026) -------------------------------------------------- */
.case-page__glance { margin: 0; }
.page-body.case-page > .case-page__glance + * { margin-top: var(--space-7); }
/* The case page's panel runs to the brief's wide measure, so In brief and
   Case details share one right edge. */
.case-page > .panel { max-width: var(--measure-wide); }
.case-facts__formal { color: var(--color-text-muted); font-size: var(--text-sm); }

.rt__empty { text-align: center; padding: var(--space-9) var(--space-5); border: var(--border-width) dashed var(--color-border); border-radius: var(--radius-lg); }
.rt__empty h3 { font-size: var(--text-md); }
.rt__empty p { color: var(--color-text-muted); margin-inline: auto; margin-bottom: var(--space-5); }

/* --- hearing schedule table (Celeste, Oct 2026) ---------------------------
   The sand-panel table, tuned for finding a date. The date is the anchor and
   the sort key, so it is stacked (weekday and day over time), bold, and never
   wraps mid-date. One continuous list: no month grouping or section rows
   (Celeste, Oct 2026), so the date carries the year. The case name is the
   only link on a row,    so the row itself is not one. */
.sched-wrap { max-width: none; margin-top: 0; }
/* The large-format data table: a lighter panel than the Guide's sand tables
   (see --color-fill-data). Opt in with the modifier; do not restyle .table-wrap. */
.table-wrap--data { background: var(--color-fill-data); }
.sched__party { display: block; }
.sched th, .sched td { padding-block: var(--space-4); }
.sched__when { white-space: nowrap; }
.sched__day, .sched__time { display: block; }
.sched__day { font-weight: var(--weight-bold); color: var(--color-text); }
.sched__time { color: var(--color-text-secondary); }
.sched td a { font-weight: var(--weight-medium); }
/* A chip in a table cell is still a chip: the table's link colour (a
   two-class selector) would otherwise turn its label orange. */
.data-table .chip { color: var(--color-text); }
.sched__id { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
/* The Date and time header is the sort toggle. It keeps the header's own
   look, bold ink at the cells' size, plus two carets; the current direction's
   caret is ink and the other muted. */
.sched__sort {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-min-aa);
  padding: 0; border: 0; background: none;
  font: inherit; font-weight: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.sched__sort:hover { color: var(--color-accent-hover); }

/* Count and sort chip share the bar's left side. The chip is sized like the
   How to attend chips (12px, 4px 12px padding) and takes the light navy
   of navigation and state, not amber, which means attention. */
.rt__lead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }

/* Search and the Filter by date button share the bar's right side. */
.rt__tools { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; min-width: 0; }

/* The Filter by date control is a BUTTON, and must not read as a second field
   (Celeste, Oct 2026). It is the site's secondary button (orange outline,
   orange label, orange fill on hover) with a chevron saying it opens
   something, beside the search's white field with its grey outline and
   magnifier. Only its height is its own, to line up with the pill. Once a
   range is set it stays filled orange, the secondary's hover look, so an
   applied filter shows on the button as well as in the chip. */
.filter-trigger {
  flex: none;
  height: var(--height-search-sm); padding-block: 0;
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer;
}
.filter-trigger__icon, .filter-trigger__chevron { flex: none; }
/* Two labels, icons and titles, one per width: "Filter by date" with a
   calendar above 767px, "Sort and filter" with sliders below, where the
   sheet also holds the sort (the column headers are hidden there). The
   hidden one is display:none, so it is out of the accessible name too. */
.only-phone, .filter-trigger__icon--sliders { display: none; }
.filter-trigger.is-active { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.filter-trigger.is-active:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* --- date range picker ----------------------------------------------------
   A <dialog> in the top layer. Above 767px blocks.js places it under the
   Filter by date button (fixed top/left) with a clear backdrop, so it reads as a
   popover; below, it is a bottom sheet on the scrim (media query further
   down). The panel is a light surface and reads the canonical ink names. */
.filter-sheet {
  position: fixed; margin: 0; padding: 0; border: 0;
  width: var(--width-datepick); max-width: calc(100vw - 2 * var(--space-4));
  background: transparent; overflow: visible;
}
.filter-sheet::backdrop { background: transparent; }
.filter-sheet__panel {
  background: var(--color-surface); color: var(--color-ink);
  border: var(--border-width) solid var(--color-line-callout);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.filter-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.filter-sheet__title { margin: 0; font-size: var(--text-md); color: var(--color-ink); }
.filter-sheet__close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--size-datepick-day); height: var(--size-datepick-day); margin-right: calc(var(--space-2) * -1);
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink); cursor: pointer;
}
.filter-sheet__close:hover { background: var(--color-fill-muted); }

.datepick__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.filter-sheet__sort { margin: 0 0 var(--space-5); padding: 0; border: 0; }
.filter-sheet__subhead { margin: 0 0 var(--space-2); padding: 0; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-ink); }
.filter-sheet__option {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min);
  border-bottom: var(--border-width) solid var(--color-line-subtle);
  font-size: var(--text-base); color: var(--color-ink); cursor: pointer;
}
/* A radio is a field too, so its keyboard ring is the field navy. */
.filter-sheet__option input:focus-visible { outline-color: var(--color-focus-field); }
.filter-sheet__option input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); }
.datepick__field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.datepick__field > span { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-ink-secondary); }
.datepick__field input {
  width: 100%; min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-line); border-radius: var(--radius-md);
  font: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink);
  background: var(--color-surface);
}
.datepick__field input:hover { border-color: var(--color-border-strong); }
.datepick__error { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-accent-hover); }
.datepick__error:empty { display: none; }

.datepick__nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); }
.datepick__month { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-ink); }
.datepick__step {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-datepick-day); height: var(--size-datepick-day);
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink); cursor: pointer;
}
.datepick__step:hover { background: var(--color-fill-muted); }
.datepick__step:disabled { color: var(--color-line); cursor: default; background: none; }

.datepick__grid { width: 100%; margin-top: var(--space-2); border-collapse: collapse; table-layout: fixed; }
.datepick__grid th { padding: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-ink-muted); text-align: center; }
.datepick__grid td { padding: 1px 0; text-align: center; }
/* The range is one continuous band behind the days: the cells between the
   ends are filled, and each end cell fills only its inner half. */
.datepick__grid td:has(.is-between) { background: var(--color-surface-brand); }
.datepick__grid td:has(.is-start.is-range:not(.is-end)) { background: linear-gradient(to right, transparent 50%, var(--color-surface-brand) 50%); }
.datepick__grid td:has(.is-end.is-range:not(.is-start)) { background: linear-gradient(to left, transparent 50%, var(--color-surface-brand) 50%); }
.datepick__day {
  position: relative;
  width: var(--size-datepick-day); height: var(--size-datepick-day); max-width: 100%;
  border: 0; border-radius: var(--radius-pill); background: none;
  font: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink);
  cursor: pointer;
}
.datepick__day:hover { background: var(--color-fill-muted); }
.datepick__day.is-between:hover { background: var(--color-surface-brand-pressed); }
.datepick__day[aria-current="date"] { font-weight: var(--weight-bold); }
.datepick__day[aria-disabled="true"] { color: var(--color-line); cursor: default; background: none; }
.datepick__day.has-hearing::after,
.datepick__dot {
  width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--color-accent);
}
.datepick__day.has-hearing::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
}
.datepick__day.is-start, .datepick__day.is-end,
.datepick__day.is-start:hover, .datepick__day.is-end:hover {
  background: var(--color-accent); color: var(--color-text-inverse); font-weight: var(--weight-bold);
}
.datepick__day.is-start.has-hearing::after, .datepick__day.is-end.has-hearing::after { background: var(--color-text-inverse); }

.datepick__hint { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-ink-muted); }
.datepick__dot { display: inline-block; flex: none; }
.filter-sheet__actions {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-line-subtle);
}
.sched__carets { flex: none; }
/* Inactive column: both chevrons muted, so it still reads as sortable.
   Active column: its direction in ink, the other faded to the line grey. */
.sched__carets path { fill: none; stroke: var(--color-text-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--duration-fast) var(--ease); }
.sched__sort[data-dir] .sched__carets path { stroke: var(--color-line); }
.sched__sort[data-dir="asc"] .sched__carets .sched__caret-up,
.sched__sort[data-dir="desc"] .sched__carets .sched__caret-down { stroke: currentColor; }

/* --- case page ------------------------------------------------------------ */
.case-facts { list-style: none; margin: 0; padding: 0; border-top: var(--border-width) solid var(--color-border-subtle); }
.case-facts > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--color-border-subtle); }
.case-facts dt { font-weight: var(--weight-bold); color: var(--color-text-secondary); font-size: var(--text-sm); }
.case-facts dd { margin: 0; }

/* --- record table responsive ---------------------------------------------- */
@media (max-width: 900px) {
  .rt__doc { grid-template-columns: 1fr; gap: var(--space-1); }
  .rt__docs-head { display: none; }
  .rt__doc-file { justify-self: start; margin-right: 0; }
  .rt__doc-date { font-size: var(--text-xs); }
  .case-facts > div { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (max-width: 767px) {
  .rt__bar { flex-direction: column; align-items: stretch; }
  /* One row on a phone: the search takes the width and Dates shrinks to its
     icon (the label stays for screen readers), both at the 44px target
     rather than the desktop pill's 48. */
  .rt__tools { margin-left: 0; width: 100%; }
  .hero-search--bar { flex: 1 1 auto; width: auto; min-height: 0; height: var(--tap-min); padding-block: 0; }
  .filter-trigger { width: var(--tap-min); height: var(--tap-min); min-height: 0; padding: 0; justify-content: center; }
  .filter-trigger__chevron { display: none; }
  .filter-sheet__selects { grid-template-columns: 1fr; }
  .filter-sheet__selects select { font-size: var(--text-base); min-height: var(--tap-min); }
  .only-wide, .filter-trigger__icon--cal { display: none; }
  .only-phone { display: revert; }
  /* The calendar waits until a date field is tapped (blocks.js). */
  .filter-sheet:not(.is-dates-open) .datepick__dates { display: none; }
  .filter-sheet.is-dates-open .datepick__dates { padding-top: var(--space-2); }
  .filter-trigger__icon--sliders { display: block; }
  .filter-trigger.has-sort { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
  /* Sort and the date range make the sheet taller than a phone, so it
     scrolls, and its footer stays pinned so "Show N hearings" is always
     in reach. */
  .filter-sheet { overflow-y: auto; }
  .filter-sheet__actions {
    position: sticky; bottom: calc((var(--space-5) + env(safe-area-inset-bottom)) * -1);
    margin-bottom: calc((var(--space-5) + env(safe-area-inset-bottom)) * -1);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    background: var(--color-surface);
  }
  .filter-trigger__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .filter-sheet {
    inset: auto 0 0 0; margin: auto 0 0;
    width: 100%; max-width: 100%; max-height: 90vh;
  }
  .filter-sheet::backdrop { background: var(--color-scrim); }
  .filter-sheet__panel {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
    padding: var(--space-5) var(--layout-gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
  }
  /* The sheet rises from the bottom edge. The animation is on the dialog,
     not its panel: the dialog scrolls (overflow-y: auto), so a panel moving
     inside it was clipped by the dialog's own box and appeared to unroll
     from the top down. */
  .filter-sheet[open] { animation: sheet-up var(--duration-base) var(--ease); }
  .datepick__day { width: var(--tap-min); height: var(--tap-min); }
  .datepick__field input { font-size: var(--text-base); }   /* 16px: iOS does not zoom on focus */
}

/* A four-up strip needs about 190px a column before the 14px body drops to
   twenty characters a line, so 4 x 190 + 3 x 24 of gap = 832px of content
   column. With the sidebar rail and the gutters that is a 1200px viewport —
   measured, like the hero chips' 1301, not chosen. Below it the strip goes
   two-up rather than three, so a four-step sequence never leaves one step
   sitting alone on a second row. Re-measure if the labels get longer. */
@media (max-width: 1200px) {
  .steps--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Figures are short where step labels are not, so the strip holds three
     across well below the width the steps need — but a four-up strip has the
     same orphan problem, so it pairs off here too. */
  .factstrip { grid-template-columns: repeat(min(var(--facts-cols, 3), 3), minmax(0, 1fr)); }
}
/* In the 680px rail column a four-up strip never fits (it needs 832px), so a
   strip of four pairs off 2x2 at every width. Three or fewer keep their count.
   `data-count` comes from blocks.js. */
.layout__main :is(.steps--row, .factstrip)[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* --- new block responsive --------------------------------------------------
   BELOW every rule above, deliberately: media queries carry no extra
   specificity, so a max-width block placed above its own base rule loses.
   CLAUDE.md records this biting the card grid twice. */
@media (max-width: 767px) {
  .related__grid { grid-template-columns: 1fr; }

  /* 64px of section break is a screen-height's worth of scrolling across a
     long Guide page on a phone, where the narrow measure has already made the
     page two or three times longer. 48 still clears the 40 it replaced.

     This leaves the heading ratio at 48:32, or 1.5:1 — below the 2:1 the
     desktop value holds and below what the old 40:24 gave. It is a knowing
     trade: on a 360px column a section heading has the full width to itself
     and little competing for the eye, so the ratio is carrying less of the
     work than it does on desktop. Watch it in testing. */
  :root { --space-block: var(--space-8); }

  /* The term rail costs more than it gives at 360px — 12rem of it leaves
     under 10rem for the definition. Stack, and let the weight carry it. */
  .def-list__item { grid-template-columns: 1fr; gap: var(--space-1); }
  .data-table th, .data-table td { padding: var(--space-4) var(--space-3); }
  .table-wrap { padding: var(--space-2) var(--space-4) var(--space-3); margin-block: var(--space-6); }
  /* Hearing schedule: each row becomes a card with its date on top, so
     five columns never need to scroll on a phone. The header row is hidden
     (visually, not from assistive tech); each cell says what it is. */
  /* The header row is gone at this width except the sort toggle, which
     stays as a strip above the cards so a phone can still reorder them. */
  /* No header row on a phone: each card labels its own fields, and sorting
     moves into the Sort and filter sheet (Celeste, Oct 2026). */
  .sched thead { display: none; }
  .sched, .sched tbody, .sched tr, .sched td { display: block; width: 100%; }
  /* Card rhythm (Celeste, Oct 2026): 16px between fields, 4px between a
     field's label and its value, 24px above and below each card. It was
     4px / 0 / 16px and read as one run-on block. */
  .sched tbody tr { padding: var(--space-5) 0; border-bottom: var(--border-width) solid var(--color-line-table); }
  .sched tbody tr:first-child { padding-top: 0; }
  .sched-wrap { padding-block: var(--space-5); }
  .sched tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .sched td { padding: 0; border-bottom: 0; }
  .sched td + td { margin-top: var(--space-4); }
  .sched td:not(.sched__when)::before { content: attr(data-label); display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
  .sched__day { font-size: var(--text-base); }
  div.flow, .factstrip, .steps--row { margin-block: var(--space-6); }
  /* 12ch of row header is a third of a 360px screen, and the sentence beside
     it drops to seven words a line. The header wraps to two lines instead —
     cheaper than the column it was buying. */
  .data-table tbody th { min-width: 7ch; }
  /* One column, not auto-fit's two-at-11rem: a 402px viewport fits two
     columns of fact by width and neither by label. */
  .factstrip, .steps--row { grid-template-columns: 1fr; }
  .steps--row { gap: var(--space-4); }
}

/* Version B: below 767px the four chips become one picker that opens the
   bottom sheet. Last in the file so it wins over the chip rules above; the
   breakpoint is mirrored as PICKER_MOBILE in blocks.js. */
@media (max-width: 767px) {
  .hero__chips { display: none; }
  .hero-picker { display: flex; }
  .hero__chips-title { font-size: var(--text-md); margin-bottom: var(--space-4); }
}

/* Need help? stacks on a phone: copy, then the button under it. */
@media (max-width: 767px) {
  .tabs { gap: var(--space-4); margin-inline: calc(var(--layout-gutter) * -1); padding-inline: var(--layout-gutter); scroll-padding-inline: var(--layout-gutter); }
  .case-card { padding: var(--space-5); }
  .case-card__head { flex-direction: column; gap: var(--space-2); }
  .case-card .chip, .case-page__glance .chip { white-space: normal; }
  .case-card__status { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; }
  .doc-list { padding: var(--space-3) var(--space-4); }
  .rich-list--cols { columns: 2; column-gap: var(--space-5); }
  .help-card { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); }
}

/* --- defined terms (Guide to hearings) --------------------------------------
   Oct 2026. A word with a definition: a dashed BLUE underline, no icon
   (Style B). Blue so it cannot be read as a link, which is solid orange. The
   word itself keeps the text colour; only the line says it is different.
   --color-term is 5.53:1 on white, far past the 3:1 a non-text indicator
   needs. Hover and open take the light navy tint, the blue family's quiet
   surface. The popup is a light card FLOATING over the page, so --shadow-lg.
   Behaviour is wireGlossary() in blocks.js. */
.term {
  display: inline; margin: 0; padding: 0 var(--space-1);
  margin-inline: calc(var(--space-1) * -1);
  font: inherit; color: inherit; background: none; border: 0;
  border-radius: var(--radius-sm);
  /* A <button> is a box even at display: inline, so a term that wraps
     centred its lines; it reads as text, so it aligns like text. */
  text-align: left;
  cursor: help;
  text-decoration: underline dashed var(--color-term);
  text-decoration-thickness: var(--border-width-term);
  text-underline-offset: var(--term-underline-offset);
  transition: background var(--duration-fast) var(--ease);
}
.term:hover, .term[aria-expanded="true"] { background: var(--color-surface-brand); }
.term-pop {
  position: absolute; z-index: 60;
  width: min(var(--width-term-pop), calc(100vw - var(--space-6)));
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface); color: var(--color-ink);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); line-height: var(--leading-body);
  opacity: 0; transform: translateY(calc(var(--space-1) * -1)); pointer-events: none;
  transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.term-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.term-pop__term { display: block; margin-bottom: var(--space-1); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-bold); }
.term-pop__arrow {
  position: absolute; top: calc(var(--space-2) * -1 + var(--border-width));
  width: var(--space-3); height: var(--space-3);
  background: var(--color-surface);
  border-left: var(--border-width) solid var(--color-line);
  border-top: var(--border-width) solid var(--color-line);
  transform: rotate(45deg);
}