/* Fit & Proper, fitandproper.co.uk
   One stylesheet, no build step.

   ---------------------------------------------------------------------------
   THE COLOUR SYSTEM (30Aug2026, owner direction: "think football")
   ---------------------------------------------------------------------------
   Four colours, all native to the game, each with exactly one job. Blue is
   gone entirely — which also settles the long-standing complaint about blue
   and black mixing inside a sentence, because there is now one brand hue.

     PITCH GREEN  the brand. Headings' rule device, the wordmark hover, links
                  that are actions, buttons, focus rings. Deep, not grass:
                  large areas of grass green read as a betting site. Green is
                  the ground you play on — it is NEVER a status colour here.

     REFEREE BLACK  the ink. The official's authority: all body copy and
                  headings. Near-black with a faint green cast so it sits in
                  the same family as the pitch.

     YELLOW CARD  a caution, and nothing else. Fix it, but it does not stop
                  you. Fill only, never text: football yellow fails contrast
                  against white at any text size (1.56:1). Ink on yellow is
                  11.34:1, so the chip is a yellow field with black on it.

     RED CARD     you do not get on the pitch. A hard fail: a missed statutory
                  deadline, a breach, a validation error the form cannot pass.

   Cards appear ONLY where the page is making a real judgement about a
   consequence, never as ornament. That is: the two free checks' results and
   their legend, the worked extract on the Schedule Five page, the
   enforcement ladder (which sorts the Act's actual sanctions into the two
   cards), a warning in an article where a hard consequence follows, the
   closed-application-window state, and form validation. There is no card for
   doing it right, so a clean area is marked in pitch green and called
   "In place", which is what football would do. One carve-out: the countdown
   board's digits use the card yellow as the board's own luminance, not as a
   caution (see the countdown section below).

   Palette (contrast checked, WCAG AA needs 4.5:1 for body text):
     ink     #15191B on white #FFFFFF = 17.70:1   on alt #F4F7F4 = 16.40:1
     muted   #4A5A52 on white         =  7.30:1   on alt          =  6.77:1
     pitch   #0B4A2F on white         = 10.32:1   on alt          =  9.56:1
     white   #FFFFFF on pitch         = 10.32:1  (buttons)
     white   #FFFFFF on the board #15191B       = 17.70:1
     red     #B4241C on white         =  6.54:1   white on red    =  6.54:1
     yellow  #FFC72C — FILL ONLY. ink on yellow  = 11.34:1
     yellow  #FFC72C on the board #15191B        = 11.34:1  (the digits)
*/

/* Display face: Oswald (SIL Open Font Licence), self-hosted, latin subset.
   One variable-weight file covers 500-600. Body text stays system-ui.
   URLs in this file resolve against styles.css, so fonts/ works from the
   root pages and from articles/ alike. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('fonts/oswald-latin-500-600.woff2') format('woff2');
}

:root {
  --white: #FFFFFF;
  --alt: #F4F7F4;          /* paper, with the faintest green cast */
  --ink: #15191B;          /* referee black */
  --muted: #4A5A52;
  --pitch: #0B4A2F;        /* the brand */
  --pitch-deep: #073A24;   /* button hover */
  --pitch-tint: #EAF2ED;   /* quiet panels */
  --line: #DBE4DD;
  --rule: #A9B8AF;         /* underlines and hover borders: line, one step up */
  --card-yellow: #FFC72C;  /* FILL ONLY — never text */
  --card-yellow-tint: #FFF4DC;
  --card-yellow-line: #B08200; /* 3.48:1 on white, 3.18:1 on the yellow tint */
  --card-red: #B4241C;
  --card-red-tint: #FBEDEB;
  --board: #15191B;        /* the fourth official's board */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: 'Oswald', 'Arial Narrow', sans-serif;
  /* Added 31Aug2026 for the Schedule Five tour: the product screens set
     requirement codes, filenames and Schedule 1 provenance lines in a
     monospaced face, and no existing token carried one. Not a colour. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-sm: .875rem;
  --fs-xs: .78rem;
  --r-s: 4px;   /* buttons, inputs */
  --r-m: 8px;   /* cards, panels, notes */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

::selection { background: var(--pitch); color: var(--white); }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
}

img, svg { max-width: 100%; }

/* The display face works only at display sizes: h1, h2, stat figures and
   prices. h3 runs in the body face at a heavier weight. */
h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; text-rendering: optimizeLegibility; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.9rem, 2.6vw, 2.45rem); }
h3 { font-family: var(--sans); font-weight: 650; font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.005em; }
h1, h2, h3 { text-wrap: balance; }

p + p, .prose h2, .prose h3, .prose p, .prose ul, .prose ol, .prose .table-wrap { margin-top: 1rem; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.9rem; }

/* Links in running text stay ink-coloured with a plain underline so a
   sentence never mixes two colours. Pitch green is reserved for buttons,
   navigation and standalone calls to action (owner direction, 29Aug2026). */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; transition: text-decoration-color .16s ease; }
a:hover { text-decoration-color: var(--ink); }
h1 a, h2 a, h3 a { color: inherit; }
/* Standalone action links (not inside sentences) carry the pitch green.
   Green text only on standalone elements — buttons, nav, figures — never on
   a word inside a sentence. */
a.action { color: var(--pitch); }
/* Standalone action links carry a trailing arrow, drawn in CSS so the
   copy stays clean, with a small slide on hover. */
a.action::after {
  content: "\2192";
  display: inline-block;
  margin-left: .35em;
  transition: transform .15s ease;
}
a.action:hover::after { transform: translateX(2px); }

/* Designed two-ring focus state. */
:focus-visible {
  outline: 2px solid var(--pitch);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(11, 74, 47, .16);
}

.shell { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- the 12-column grid ----------
   One real grid, used asymmetrically. Sections must not all align the same
   way: a narrow label column against wide content (cols 1-3 / 4-12), an
   indented measure (cols 3-11), a split (cols 1-7 / 8-12), and the
   occasional full-bleed break. The variation between sections is the
   composition; below 820px everything stacks to one column. */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid12 > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 820px) {
  .grid12 > .c1-3 { grid-column: 1 / 4; }
  .grid12 > .c4-12 { grid-column: 4 / 13; }
  .grid12 > .c3-11 { grid-column: 3 / 12; }
  .grid12 > .c1-7 { grid-column: 1 / 8; }
  .grid12 > .c8-12 { grid-column: 8 / 13; }
}

/* The narrow left label column: an index device in the 37signals manner.
   The label may be a real heading set in the kicker style; a side note
   beneath it carries marginal facts. Sticky so the label keeps station
   while long content scrolls. */
h2.kicker, h3.kicker { font-family: var(--sans); line-height: 1.5; }
.side-label .kicker { margin-bottom: 0; }
.side-label .side-note { margin-top: .9rem; font-size: var(--fs-sm); color: var(--muted); max-width: 26ch; }
@media (min-width: 820px) {
  .side-label { position: sticky; top: 4.5rem; align-self: start; }
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--pitch); color: var(--white);
  padding: .5rem 1rem; z-index: 10; text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ---------- header ---------- */

/* Sticky glass header: translucent white over a blur, solid white where
   backdrop-filter is unsupported. The hairline is strengthened a touch by a
   constant one-pixel shadow beneath it; nothing changes on scroll, no JS. */
.site-head {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(21, 25, 27, 0.05);
  position: sticky; top: 0; z-index: 8;
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .site-head {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.25rem; }

.wordmark {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0;
  font-size: 1.45rem;
  text-decoration: none;
  color: var(--ink);
  transition: color .16s ease;
}
.wordmark .amp { color: inherit; }
.wordmark:hover { color: var(--pitch); }

.nav-d { display: none; list-style: none; align-items: center; gap: 1.4rem; }
.nav-d a { position: relative; text-decoration: none; font-size: .95rem; color: var(--ink); transition: color .16s ease; }
.nav-d a:hover { color: var(--pitch); }
.nav-d a[aria-current="page"] { color: var(--pitch); font-weight: 600; }
/* the one diagonal device, part two: a short slanted underline in pitch green */
.nav-d a:hover::after,
.nav-d a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: -6px;
  width: 1.1rem;
  height: 3px;
  background: var(--pitch);
  transform: skewX(-12deg);
}

.nav-m { position: relative; }
.nav-m summary {
  list-style: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-s);
  padding: .35rem .9rem; font-size: .95rem;
}
.nav-m summary::-webkit-details-marker { display: none; }
.nav-m[open] summary { border-color: var(--pitch); color: var(--pitch); }
.nav-m ul {
  list-style: none;
  position: absolute; right: 0; top: calc(100% + .5rem);
  min-width: 12rem; z-index: 5;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: 0 4px 14px rgba(21, 25, 27, 0.07);
  padding: .5rem 0;
}
.nav-m li a { display: block; padding: .55rem 1.1rem; text-decoration: none; color: var(--ink); }
.nav-m li a:hover, .nav-m li a[aria-current="page"] { color: var(--pitch); }

@media (min-width: 720px) {
  .nav-d { display: flex; }
  .nav-m { display: none; }
}

/* ---------- shared blocks ---------- */

.alt { background: var(--alt); }

/* One eyebrow grammar: the green tab and the kicker are a single unit that
   always sits ABOVE the heading. Where a section has a kicker, the kicker
   carries the tab (class="kicker tab-head") and the heading below it is
   plain; where there is no kicker, the heading carries the tab itself. */
.tab-head::before {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  background: var(--pitch);
  margin-bottom: .8rem;
}
.kicker {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .55rem;
}

/* Section rhythm: three weights of silence. The default carries most
   sections; .roomy gives hero-adjacent and final-CTA sections a wide moat;
   .snug tightens stat and utility strips.
   29Aug2026: tightened (4.5/6.75 -> 3.25/4.5rem desktop). The old rhythm was
   set for a gallery — about 1,400px of pure padding on the home page before a
   word was read. Air kept, scroll cost cut. */
section { padding: 2.5rem 0; }
.roomy { padding: 3.25rem 0; }
.snug { padding: 1.75rem 0; }
@media (min-width: 720px) {
  section { padding: 3.25rem 0; }
  .roomy { padding: 4.5rem 0; }
  .snug { padding: 2.25rem 0; }
}

.lead { font-size: 1.15rem; color: var(--muted); max-width: 64ch; margin-top: .9rem; }

/* A base .meta, so the small print reads the same wherever it appears rather
   than only inside the components that happened to style it. */
.meta { font-size: var(--fs-sm); color: var(--muted); }

/* Prices as anchors: Oswald, large, ink. Pitch green stays reserved for
   actions. The qualifier splits onto its own small uppercase line. */
.price {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price .price-q {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .3rem;
}

/* Statement band: the dark-bar substitute. One per key page, a single large
   Oswald line between full-bleed hairlines, no fill. */
.statement { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statement-line {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 30ch;
  text-wrap: balance;
}
.statement-src { margin-top: 1.1rem; font-size: var(--fs-xs); color: var(--muted); max-width: 70ch; }

/* Superscript footnote markers tying big figures to their source lines. */
sup.fn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .55em;
  line-height: 0;
  color: var(--muted);
  margin-left: .1em;
}

.btn {
  display: inline-block; margin-top: 1.6rem;
  background: var(--pitch); color: var(--white);
  border: 1px solid var(--pitch); border-radius: var(--r-s);
  padding: .65rem 1.6rem;
  font-size: .98rem; font-weight: 600; text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover { background: var(--pitch-deep); border-color: var(--pitch-deep); }
.btn:active { transform: translateY(1px); }
.btn-light {
  background: var(--white); color: var(--pitch);
  border-color: var(--line);
}
.btn-light:hover { background: var(--white); border-color: var(--pitch); color: var(--pitch); }

/* button rows (hero and anywhere two actions sit together) */
.btn-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; margin-top: 1.8rem; }
.btn-row .btn { margin-top: 0; }

/* hero, the one diagonal device, part one: a subtle slanted bottom edge.
   Browsers without clip-path support show a plain band edge instead, and
   the extra bottom padding keeps text clear of the clipped corner. */
.hero {
  background: var(--alt);
  padding: 5rem 0 calc(3.6rem + min(3vw, 2.75rem));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - min(3vw, 2.75rem)), 0 100%);
}
.hero .shell { display: flex; flex-direction: column; align-items: flex-start; }
.hero .kicker { margin-bottom: .95rem; }
/* Checker intros run snug while keeping the diagonal edge. */
.hero.snug { padding: 2.75rem 0 calc(2rem + min(3vw, 2.75rem)); }
.hero h1 { max-width: 24ch; letter-spacing: -0.015em; line-height: 1.05; }
.hero .lead { font-size: 1.2rem; max-width: 58ch; margin-top: 1.2rem; }

/* Home hero: one very large statement, one short support line, one action.
   Padding generous enough that little else sits above the fold; the
   diagonal bottom edge comes from .hero. */
.hero-max { padding: clamp(5rem, 15vh, 8.5rem) 0 calc(clamp(4rem, 11vh, 6.5rem) + min(3vw, 2.75rem)); }
.hero-max h1 { font-size: clamp(2.8rem, 6.2vw, 5.2rem); max-width: 22ch; line-height: 1.02; }
.hero-max .lead { margin-top: 1.5rem; }

/* ---------- the countdown: the fourth official's board ----------
   The site's signature moment is a number counting down, and football's own
   image for exactly that is the board the fourth official holds up. So the
   band is the board: a dark panel with luminous yellow digits, the one dark
   element on a light site, earned because the reference is literal rather
   than decorative.

   The number is the days until the provisional licence application window
   closes on 26 February 2027. A few lines of script compute it from the
   client clock and unhide the board; with scripts off the number stays hidden
   and the label states the closing date, so nothing decays between deploys.
   Yellow here is the board's own luminance, not a caution —
   the card meaning lives only in .status and .tool-error. */
.countdown { background: var(--board); padding: clamp(3rem, 8vh, 5rem) 0; }
.countdown .shell { display: flex; flex-direction: column; align-items: flex-start; }
.countdown-days {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(4rem, 13vw, 9rem);
  line-height: .95;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--card-yellow);
  /* the faint bloom of an LED board, not a glow effect */
  text-shadow: 0 0 28px rgba(255, 199, 44, 0.18);
}
/* display: block above would otherwise beat the browser's [hidden] rule, and
   the board is hidden twice: with scripts off, and once the window has gone. */
.countdown-days[hidden] { display: none; }
.countdown-label { margin-top: 1rem; font-size: 1.15rem; color: var(--white); max-width: 44ch; text-wrap: balance; }
.countdown-dates { margin-top: 1.2rem; font-size: var(--fs-xs); color: #B8C4BC; max-width: 70ch; }
/* Links and focus rings have to survive on the board. */
.countdown a { color: var(--white); text-decoration-color: rgba(255, 255, 255, .5); }
.countdown a:hover { text-decoration-color: var(--white); }
.countdown :focus-visible { outline-color: var(--card-yellow); box-shadow: 0 0 0 5px rgba(255, 199, 44, .22); }

/* card grids */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 1.25rem 1.35rem 1.35rem;
  transition: border-color .15s ease, background-color .15s ease;
}
/* One-property-ish hover: border shift plus a very faint tint. No lift,
   no shadow. Clickable insight cards go green below; plain cards stay
   neutral so green keeps meaning "action". */
.card:hover {
  border-color: var(--rule);
  background-color: rgba(11, 74, 47, 0.025);
}
.alt .card { box-shadow: 0 1px 3px rgba(21, 25, 27, 0.05); }
/* internal spacing scale: title .35rem, body .75rem, meta .9rem */
.card h3 { margin-bottom: .35rem; }
/* Muted-by-default card bodies; ink is for headings and prices. */
.card p { color: var(--muted); }
.card li { color: var(--muted); }
.card .price { color: var(--ink); margin: .3rem 0 .8rem; }
.card p + p { margin-top: .75rem; }
.card .meta { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: .9rem; }

/* platform feature list */
.feature-list { list-style: none; margin-top: 1.5rem; }
.feature-list li { padding: .85rem 0; border-top: 1px solid var(--line); max-width: 72ch; color: var(--muted); }
.feature-list li:last-child { border-bottom: 1px solid var(--line); }
.feature-list b { font-weight: 650; color: var(--ink); }

/* Two columns where the list is short and even (home platform band): the
   same hairline rows, half the vertical cost. The closing hairline moves to
   the final ROW rather than the final item. Single column below 820px. */
@media (min-width: 820px) {
  .feature-list.cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.75rem, 3vw, 3rem);
  }
  .feature-list.cols-2 li { max-width: none; }
  .feature-list.cols-2 li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* service detail blocks */
.svc { border-top: 1px solid var(--line); padding: 1.9rem 0; max-width: 74ch; }
.svc:first-of-type { border-top: 0; }
.svc .price { margin: .35rem 0 1rem; }

/* Numbered stages as objects: 01/02/03 rendered from a CSS counter rather
   than literal digits typed into the headings. */
.ladder { counter-reset: stage; }
.ladder .svc { counter-increment: stage; }
.stages { counter-reset: stage; }
.stages .stage { counter-increment: stage; }
.ladder .svc::before,
.stages .stage::before {
  content: counter(stage, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(11, 74, 47, 0.16);
  font-variant-numeric: tabular-nums;
  margin-bottom: .45rem;
}
.svc ul { margin: 1rem 0 0 1.2rem; }
.svc li + li { margin-top: .4rem; }
/* Service titles at a size the display face earns. */
.svc h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.45rem, 1.8vw, 1.7rem); line-height: 1.12; letter-spacing: -0.005em; }

/* The three stages on the home page, with a hierarchy: stage 01 dominant
   in the wide column, stages 02 and 03 a narrower stacked pair. The grid
   says "start here" before the copy does. No cards; text on the band. */
.stages { margin-top: 2.4rem; }
.stage p { color: var(--muted); max-width: 54ch; }
.stage .price { color: var(--ink); margin: .35rem 0 .9rem; }
.stage .meta { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 1rem; }
.stage-lead::before { font-size: 3.4rem; margin-bottom: .7rem; }
.stage-lead h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -0.005em; }
.stage-lead .price { font-size: 2rem; margin: .55rem 0 1rem; }
.stage-rest .stage + .stage { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1.5rem; }
.stage-rest .stage::before { font-size: 1.6rem; margin-bottom: .35rem; }

/* Delivery modes indented under a stage: a ruled, indented list rather
   than three equal cards. Extends .feature-list. */
.mode-list { margin: 1.4rem 0 0 clamp(1rem, 4vw, 2.5rem); border-left: 3px solid var(--line); padding-left: clamp(1.1rem, 2.5vw, 1.8rem); }

/* ---------- article index rows ----------
   Dated hairline rows rather than a card grid: editorial, and scales
   past six articles. */
.index-list { list-style: none; }
.index-list a { display: block; text-decoration: none; color: inherit; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.index-list li:last-child a { border-bottom: 1px solid var(--line); }
.index-list h3 { margin-bottom: .3rem; transition: color .15s ease; }
.index-list p { color: var(--muted); max-width: 62ch; }
.index-list .meta { display: block; margin-top: .5rem; font-size: var(--fs-sm); color: var(--muted); }
.index-list a:hover h3 { color: var(--pitch); }

/* Home variant: title and date only. The standfirst belongs on the insights
   page, where the reader has chosen to browse; on the home page it was
   costing a third of the band to repeat what the title already said. */
.index-list.tight a { padding: .95rem 0; }
.index-list.tight .meta { margin-top: .3rem; }

/* ---------- the embedded first question ----------
   The first scored question of the IFR readiness check, shown on the home
   page as real markup. The "Start the check" button carries the reader to
   the tool page; selecting an answer alone never navigates, nothing is
   scored here and no answer is carried over. */
.home-check { max-width: 74ch; }
.home-check .tool-q { margin-top: 1.6rem; }
.home-check .btn { margin-top: 1.5rem; }
.home-check-more { margin-top: 1.1rem; font-size: var(--fs-sm); color: var(--muted); max-width: 64ch; }

/* q & a */
.qa { max-width: 74ch; }
.qa h3 { margin-top: 1.9rem; }
.qa h3:first-of-type { margin-top: 1.2rem; }
.qa p { margin-top: .4rem; }

/* article */
.article-head { padding: 3.4rem 0 2.4rem; background: var(--alt); border-bottom: 1px solid var(--line); }
.article-head.roomy { padding: 4rem 0 2.6rem; }
@media (min-width: 720px) { .article-head.roomy { padding: 6.5rem 0 3.4rem; } }
.article-head h1 { max-width: 28ch; }
.article-head .meta { margin-top: .4rem; font-size: var(--fs-sm); color: var(--muted); }
.prose { max-width: 70ch; padding: 2.5rem 0 1rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .5rem; }
.note {
  margin: 2.5rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--pitch-tint);
  padding: 1.1rem 1.3rem;
  max-width: 70ch;
}
.disclaimer { margin: 1.5rem 0 3rem; font-size: var(--fs-sm); color: var(--muted); max-width: 70ch; }

/* tables, the GOV.UK treatment: no vertical rules, no header fill, a 2px
   ink rule under the header, hairlines between body rows, none after the
   last, and numeric or date columns right-aligned via .num. */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
caption { text-align: left; font-size: var(--fs-sm); color: var(--muted); padding-bottom: .5rem; caption-side: top; }
th, td {
  text-align: left; vertical-align: top;
  padding: .7rem .9rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
tbody tr:last-child > td { border-bottom: 0; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* insight cards */
.insight-card { display: block; text-decoration: none; color: inherit; }
.insight-card:hover { border-color: var(--pitch); }
.insight-card:hover h3 { color: var(--pitch); }
.insight-card .meta { display: block; margin-top: .9rem; }

/* footer */
/* No margin above the footer: section padding already carries the rhythm,
   so a margin here would double it. */
.site-foot { background: var(--alt); border-top: 1px solid var(--line); padding: 2.5rem 0; }
.site-foot p { max-width: 70ch; }
.site-foot .foot-legal { margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}

/* ---------- free check tools ----------
   Used only by tools.html, ifr-readiness-check.html and
   odse-ownership-check.html. Palette tokens only; no new colours. This is
   one of the two places cards are allowed to appear. */

.tool-form { max-width: 74ch; }
.tool-area-title { margin-top: 2.6rem; }
.tool-area-title:first-of-type { margin-top: 1.6rem; }

.tool-q {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
  padding: 1.2rem 1.4rem 1.4rem;
  margin-top: 1.2rem;
}
.tool-q legend {
  font-weight: 650;
  font-size: 1.05rem;
  line-height: 1.4;
  padding: 0 .35rem;
}
.tool-help { font-size: var(--fs-sm); color: var(--muted); margin-top: .5rem; }

/* Scroll and focus targets sit clear of the sticky header: its height plus
   breathing room, matching the sticky side-label offset. */
.tool-q, #results-h, #lead-thanks { scroll-margin-top: 4.5rem; }

/* The first unanswered question after a failed submit. A yellow card: the
   form is cautioning you, fix it and carry on. Same tint-and-line pairing
   the other yellow-card states use, held on the fieldset until any answer
   inside it changes. */
.tool-q.is-unanswered {
  border-color: var(--card-yellow-line);
  border-left: 3px solid var(--card-yellow-line);
  background: var(--card-yellow-tint);
  outline: 2px solid var(--card-yellow-line);
  outline-offset: 2px;
}

.tool-options { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.tool-options label {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white);
  padding: .45rem .95rem;
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.tool-options label:hover { border-color: var(--pitch); }
.tool-options input { accent-color: var(--pitch); }
.tool-options label:has(input:checked) {
  background: var(--pitch); color: var(--white); border-color: var(--pitch);
}
.tool-options label:has(input:focus-visible) {
  outline: 2px solid var(--pitch); outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(11, 74, 47, .16);
}

.tool-actions { margin-top: 2rem; }
.tool-actions .btn { margin-top: 0; cursor: pointer; font-family: inherit; }

/* Validation warnings take a red card: the form cannot proceed. */
.tool-error {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--card-red);
  border-radius: var(--r-m);
  background: var(--card-red-tint);
  padding: .8rem 1.1rem;
  max-width: 70ch;
}
.tool-error a { color: var(--ink); text-decoration-color: var(--ink); }

/* results */
.tool-results { max-width: 74ch; }
.tool-results[hidden] { display: none; }
.tool-results h2:focus {
  outline: 2px solid var(--pitch);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(11, 74, 47, .16);
}
.result-headline { margin-top: 1rem; font-size: 1.1rem; max-width: 70ch; }
.result-window {
  margin-top: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--pitch-tint);
  padding: 1rem 1.2rem;
  max-width: 70ch;
}
.result-window .src { display: block; margin-top: .4rem; font-size: var(--fs-xs); color: var(--muted); }
.result-scope-note { margin-top: 1.2rem; font-size: .95rem; color: var(--muted); max-width: 70ch; }

.result-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
  padding: 1.3rem 1.4rem;
  margin-top: 1.3rem;
}
/* The left edge carries the decision: red card, yellow card, or clean. */
.result-card.is-gap { border-left-color: var(--card-red); }
.result-card.is-partial { border-left-color: var(--card-yellow-line); }
.result-card.is-ready { border-left-color: var(--pitch); }
.result-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

/* ---------- the cards ----------
   A status chip is a tinted pill carrying an actual card glyph: a small
   portrait rounded rectangle in the card's colour, drawn in CSS so there is
   no image to load and it prints. Text on the chip is always ink, never the
   card colour — football yellow is unreadable as type (1.56:1 on white).
   "In place" gets no glyph: there is no card for doing it right. */
.status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .14rem .75rem .18rem;
  white-space: nowrap;
}
.status.is-gap::before,
.status.is-partial::before {
  content: "";
  display: block;
  width: .62em;
  height: .88em;
  border-radius: 1.5px;
  /* held at the angle a referee holds one */
  transform: rotate(-8deg);
  flex-shrink: 0;
}
.status.is-gap {
  background: var(--card-red-tint);
  border-color: var(--card-red);
}
.status.is-gap::before { background: var(--card-red); }
.status.is-partial {
  background: var(--card-yellow-tint);
  border-color: var(--card-yellow-line);
}
.status.is-partial::before { background: var(--card-yellow); box-shadow: 0 0 0 1px var(--card-yellow-line); }
.status.is-ready {
  background: var(--pitch-tint);
  border-color: var(--pitch);
}

/* ---------- cards at display size ----------
   The same object as the chip glyph, drawn large enough to be the picture
   rather than the punctuation: a portrait rounded rectangle, held at the
   angle a referee holds one. Used where the page is making a real judgement
   about consequence — the enforcement ladder, the article warnings, the
   closed-window state. Never as ornament on a heading. */
.card-mark {
  display: block;
  width: 2.1rem;
  height: 3rem;
  border-radius: 3px;
  transform: rotate(-7deg);
  flex-shrink: 0;
}
.card-mark.is-yellow { background: var(--card-yellow); box-shadow: 0 0 0 1px var(--card-yellow-line); }
.card-mark.is-red { background: var(--card-red); }
.card-mark.lg { width: 3.1rem; height: 4.4rem; border-radius: 4px; }

/* The enforcement ladder: what the regulator can actually do, sorted into
   the two cards. Each row is a real sanction with its paragraph in Schedule
   9 of the Act, so the metaphor carries information rather than decorating
   it. */
.enforce { list-style: none; margin-top: 1.8rem; }
.enforce > li {
  display: flex;
  gap: clamp(1.1rem, 3vw, 1.9rem);
  align-items: flex-start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.enforce > li:last-child { border-bottom: 1px solid var(--line); }
.enforce h3 { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.15; }
.enforce p { color: var(--muted); margin-top: .4rem; max-width: 58ch; }
.enforce .sanction-list { list-style: none; margin-top: .7rem; }
.enforce .sanction-list li { padding: .5rem 0; border-top: 1px solid var(--line); color: var(--muted); max-width: 58ch; }
.enforce .sanction-list b { color: var(--ink); font-weight: 650; }
.enforce .cite { display: block; margin-top: .8rem; font-size: var(--fs-xs); color: var(--muted); }

/* An article warning that carries a card: the consequence in the margin of
   the argument. Two flavours, matching the two cards. */
.card-note {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin: 2.5rem 0 0;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-m);
  padding: 1.1rem 1.3rem;
  max-width: 70ch;
}
.card-note.is-yellow { border-left-color: var(--card-yellow-line); background: var(--card-yellow-tint); }
.card-note.is-red { border-left-color: var(--card-red); background: var(--card-red-tint); }
.card-note .kicker { margin-bottom: .2rem; color: var(--ink); }
.card-note p:last-child { margin-top: 0; }

/* The legend on the free-checks page: what the three outcomes mean, using
   the very chips the results will use. */
.legend { list-style: none; margin-top: 1.4rem; }
.legend li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.legend li:last-child { border-bottom: 1px solid var(--line); }
.legend span.what { color: var(--muted); max-width: 56ch; }

.result-card .finding { margin-top: .7rem; }
.result-card .aside-note { margin-top: .7rem; font-size: var(--fs-sm); color: var(--muted); }
.result-card .cite { margin-top: .8rem; font-size: var(--fs-sm); color: var(--muted); }
.result-card .steps { margin: .8rem 0 0 1.2rem; }
.result-card .steps li + li { margin-top: .35rem; }

.tool-honesty { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--muted); max-width: 70ch; }

/* two-card grid for the tools index and the home section */
.tool-card-grid { grid-template-columns: 1fr; }
@media (min-width: 720px) { .tool-card-grid { grid-template-columns: repeat(2, 1fr); } }
.tool-card .meta { display: block; margin-top: .9rem; }

/* print, every page: chrome off the sheet, article link targets spelled out
   because paper cannot be clicked, and no heading stranded at a page foot */
@media print {
  .site-head,
  .site-foot,
  .skip-link,
  .nav-m { display: none; }
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .9em;
    word-break: break-all;
  }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
}

/* print: chrome hidden; once results exist, only the results print */
@media print {
  body.tool-page .site-head,
  body.tool-page .site-foot,
  body.tool-page .skip-link,
  body.tool-page .tool-cta,
  body.tool-page .tool-actions,
  body.tool-page .tool-error { display: none; }
  body.tool-page.has-results .tool-form,
  body.tool-page.has-results .tool-intro { display: none; }
  body.tool-page .result-card { break-inside: avoid; }
  /* Print keeps the card glyphs: they are the status, and a black-and-white
     printout of a results page must still say which areas took a card. */
  body.tool-page .status { background: #fff; color: #000; border-color: #000; }
  body.tool-page .status.is-gap::before,
  body.tool-page .status.is-partial::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- lead capture ----------
   Used by the results follow-up card on the two free checks and by the
   contact form on contact.html. Palette tokens only; no new colours. */

.capture-card {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--alt);
  padding: 1.5rem 1.6rem 1.7rem;
  margin-top: 2rem;
  max-width: 70ch;
}
.capture-card > p { margin-top: .5rem; }

.capture-fields { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.2rem; }
@media (min-width: 720px) { .capture-fields { grid-template-columns: 1fr 1fr; } }

.capture-field label { display: block; font-size: var(--fs-sm); font-weight: 600; }
.capture-field .optional { font-weight: 400; color: var(--muted); }
.capture-field input,
.capture-field textarea {
  display: block; width: 100%; margin-top: .35rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--white);
  padding: .55rem .75rem;
  font: inherit; color: inherit;
}
.capture-field input:hover, .capture-field textarea:hover { border-color: var(--pitch); }
.capture-field-wide { grid-column: 1 / -1; }
.capture-field textarea { min-height: 8rem; resize: vertical; }

.capture-consent { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.2rem; font-size: .95rem; }
.capture-consent input { accent-color: var(--pitch); margin-top: .3rem; flex-shrink: 0; }

.capture-card .btn { cursor: pointer; font-family: inherit; }

/* Positive confirmation: pitch green, the brand's own colour. */
.capture-thanks {
  border: 1px solid var(--line);
  border-left: 3px solid var(--pitch);
  border-radius: var(--r-m);
  background: var(--pitch-tint);
  padding: 1rem 1.2rem;
  margin-top: 1.2rem;
}

/* Honeypot: hidden from people, present for bots. Not display:none, which
   some bots skip; moved off-screen and out of the accessibility tree. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media print {
  body.tool-page .capture-card { display: none; }
}

/* ---------- the Schedule Five product screens ----------
   Used only by schedule-five-tour.html. Every rule is prefixed s5- so it
   cannot collide with the site's own components, several of which share
   names with the product's (.card, .status, .btn, .meta, .foot-note).

   These depict a light-surfaced interface embedded in the page: white
   panels, hairline rules, small type. The palette is the site's own tokens
   throughout, mapped from the product's raw values —
     product bg/fg          -> --white / --ink
     product muted surface  -> --alt
     product muted text     -> --muted
     product border/ring    -> --line
     product pitch family   -> --pitch / --pitch-tint
     product caution family -> --card-yellow / --card-yellow-tint / --card-yellow-line
     product sending-off    -> --card-red / --card-red-tint
   The product's caution TEXT colour is deliberately not carried over: the
   site's rule is that yellow is fill only, never type, so those few strings
   run in --ink or --muted instead. Yellow and red appear here only as
   genuine statuses (card chips, the due-window counters), never as
   ornament. */

.s5-screen {
  margin-top: 2rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  font-size: .875rem;
  line-height: 1.5;
}

/* Product chrome: a topbar across the full width, a nav rail, the content
   column, and the product's own standing footnote. One column below the
   site's 820px stacking breakpoint, where the rail is dropped. */
.s5-viewport { display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .s5-viewport { grid-template-columns: 14rem 1fr; }
}

.s5-topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .75rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.s5-wordmark { font-family: var(--sans); font-size: .875rem; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.s5-pill {
  display: inline-flex; align-items: center;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 500;
  background: var(--alt); color: var(--muted);
}
.s5-topbar-right { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.s5-switcher {
  display: inline-flex; align-items: center;
  min-width: 12rem; min-height: 2rem;
  padding: 0 .65rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  font-size: .8125rem; color: var(--ink); background: var(--white);
}
.s5-switcher::after { content: "\25BE"; margin-left: auto; padding-left: .5rem; color: var(--muted); }
.s5-whoami { font-size: .8125rem; color: var(--muted); }

.s5-sidebar { display: none; }
@media (min-width: 820px) {
  .s5-sidebar {
    display: flex; flex-direction: column; gap: .125rem;
    padding: 1rem .75rem;
    border-right: 1px solid var(--line);
  }
}
.s5-nav-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .375rem .625rem;
  border-radius: var(--r-s);
  font-size: .8125rem; font-weight: 500; color: var(--muted);
}
.s5-nav-item.is-active { background: var(--pitch-tint); color: var(--pitch); }
.s5-ico { width: 1rem; flex: 0 0 1rem; text-align: center; }

.s5-content { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem; min-width: 0; }
.s5-h1 { font-family: var(--sans); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.s5-sub { font-size: .8125rem; line-height: 1.5; color: var(--muted); margin-top: .25rem; max-width: 76ch; }
.s5-note { font-size: .75rem; line-height: 1.5; color: var(--muted); margin-top: .1875rem; }
.s5-ink { color: var(--ink); }
.s5-link { color: var(--pitch); font-weight: 500; }

.s5-footnote {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding: .75rem 1.25rem;
  font-size: .72rem; line-height: 1.5; color: var(--muted);
}

/* product cards */
.s5-cards { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.s5-card {
  display: flex; flex-direction: column; gap: .375rem;
  min-width: 0;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.s5-card.is-wide { grid-column: 1 / -1; }
.s5-card-desc { font-size: .78rem; color: var(--muted); }
.s5-card-title { font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.s5-card-body { font-size: .8125rem; color: var(--muted); }
.s5-card-link { font-size: .8125rem; font-weight: 500; color: var(--pitch); }
.s5-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .125rem; }

/* Status chips. The two cards are real judgements about consequence here,
   which is the only condition on which yellow and red may appear. */
.s5-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 500;
  white-space: nowrap;
}
.s5-chip.is-green { background: var(--pitch-tint); color: var(--pitch); box-shadow: inset 0 0 0 1px var(--line); }
.s5-chip.is-amber { background: var(--card-yellow-tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--card-yellow-line); }
.s5-chip.is-red { background: var(--card-red-tint); color: var(--card-red); box-shadow: inset 0 0 0 1px var(--card-red); }
.s5-chip.is-plain { background: var(--alt); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.s5-chip.is-late { background: var(--alt); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* The card glyph at chip size: 7 by 10, held at the angle a referee holds
   one. Yellow carries a darker ring because football yellow disappears
   against white; red does not need one. */
.s5-glyph {
  display: inline-block;
  width: 7px; height: 10px;
  flex: 0 0 7px;
  border-radius: 1.5px;
  transform: rotate(-8deg);
}
.s5-glyph.is-yellow { background: var(--card-yellow); box-shadow: 0 0 0 1px var(--card-yellow-line); }
.s5-glyph.is-red { background: var(--card-red); }

.s5-badge {
  display: inline-flex; align-items: center;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--line); color: var(--ink);
}
.s5-badge.is-solid { background: var(--pitch); border-color: var(--pitch); color: var(--white); }

/* Tables. Each gets its own horizontal scroller so the page body never
   scrolls sideways. The site's global GOV.UK table treatment is overridden
   inside a screen: this is an application grid, not a document table. */
.s5-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.s5-tablewrap.is-tight { margin-top: .375rem; }
.s5-screen table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.s5-screen th {
  padding: .625rem;
  text-align: left; vertical-align: middle;
  font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink); white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.s5-screen td {
  padding: .5625rem .625rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.s5-screen th:first-child, .s5-screen td:first-child { padding-left: .625rem; }
.s5-screen th:last-child, .s5-screen td:last-child { padding-right: .625rem; }
.s5-screen tbody tr:last-child > td { border-bottom: 0; }
.s5-shrink { width: 1%; }
.s5-t-title { font-weight: 500; color: var(--ink); }
.s5-t-meta { font-family: var(--mono); font-size: .72rem; line-height: 1.45; color: var(--muted); }
span.s5-t-meta { display: block; margin-top: .125rem; }
.s5-faded { opacity: .6; }
.s5-dash { color: var(--muted); }

/* grouped sections inside a screen */
.s5-block { display: flex; flex-direction: column; gap: .5rem; }
.s5-sec-h { font-family: var(--sans); font-size: .8125rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--ink); }
.s5-sec-sub { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-top: .125rem; }

.s5-panel {
  display: flex; flex-direction: column; gap: .625rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-m);
  padding: 1rem;
}
.s5-panel-lead { font-size: .8125rem; line-height: 1.5; color: var(--ink); }
.s5-warn { color: var(--ink); }
.s5-dl { display: grid; grid-template-columns: 1fr; gap: .25rem 1.1rem; font-size: .78rem; line-height: 1.5; }
.s5-dl dt { color: var(--muted); }
.s5-dl dd { color: var(--ink); }
@media (min-width: 720px) {
  .s5-dl { grid-template-columns: minmax(11rem, 15rem) 1fr; }
}

.s5-steps { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.s5-steps li { display: flex; align-items: center; gap: .625rem; font-size: .8125rem; }
.s5-step-n {
  display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem;
  border-radius: 50%;
  background: var(--alt); color: var(--muted);
  font-size: .69rem;
}

/* Depicted controls. Not interactive: these are pictures of buttons and
   fields, so they carry no hover, focus or cursor affordance. */
.s5-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2rem; padding: 0 .625rem;
  border-radius: var(--r-s);
  font-size: .8125rem; font-weight: 500;
  background: var(--pitch); color: var(--white);
}
.s5-btn.is-ghost { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.s5-btn.is-sm { min-height: 1.625rem; }
.s5-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.s5-bar-note { font-size: .78rem; color: var(--muted); }
.s5-spacer { margin-left: auto; }

.s5-tabs { display: inline-flex; align-self: flex-start; gap: .1875rem; padding: .1875rem; background: var(--alt); border-radius: var(--r-s); }
.s5-tab { padding: .25rem .625rem; border-radius: var(--r-s); font-size: .78rem; color: var(--muted); }
.s5-tab.is-on { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

.s5-field {
  display: inline-flex; align-items: center;
  min-height: 1.875rem; padding: 0 .5rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--white);
  font-size: .78rem; color: var(--ink);
  min-width: 7rem;
}
.s5-field.is-sel::after { content: "\25BE"; margin-left: auto; padding-left: .5rem; color: var(--muted); }
.s5-field.is-ph { color: var(--muted); }
.s5-field.is-w-xs { min-width: 3.25rem; }
.s5-field.is-w-md { min-width: 6.5rem; }
.s5-field.is-w-lg { min-width: 11.25rem; }

/* Schedule 1 provenance: the cited paragraph behind each attribution. */
.s5-prov { font-family: var(--mono); font-size: .69rem; line-height: 1.45; color: var(--muted); margin-top: .25rem; max-width: 70ch; }
.s5-prov + .s5-prov { margin-top: .25rem; }
.s5-prov b { font-weight: 500; color: var(--ink); }

/* print: the screens are the substance of this page, so they stay on the
   sheet. The rail goes (it is chrome), panels are kept off page breaks, and
   the card glyphs print in colour because they are the status. */
@media print {
  .s5-sidebar { display: none; }
  .s5-viewport { grid-template-columns: 1fr; }
  .s5-screen { break-inside: avoid; page-break-inside: avoid; box-shadow: none; }
  .s5-card, .s5-block, .s5-panel { break-inside: avoid; page-break-inside: avoid; }
  .s5-tablewrap { overflow-x: visible; }
  .s5-glyph { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .s5-chip, .s5-badge, .s5-btn { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}