/* The rules section: Driver Resources, each sanction's landing, and the body
   and rulebook pages. Linked from {% block page_css %} in new_header.html,
   after the theme and navbar.css, so it wins every specificity tie with
   them. Colours, spaces, type sizes and radii are the --dst-* tokens in
   navbar.css; this file defines none of its own (the four layout values
   below are sizes, not tokens of the scale).

   Spacing: every vertical gap is a margin-top on the later sibling, or a
   gap on a flex or grid parent, and every value comes from the scale; the
   test suite greps this file for anything else (plan 3.2, 12.3).

   The body and rulebook pages' tables, rule cards and 3D car still use
   includes/usra_styles.html and usra_body_styles.html until their own
   components arrive here. */

/* --- Margin model (3.2) ------------------------------------------------------ */
/* Block margins only: Bootstrap's .container auto inline margins survive. */
.rules-page :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend) { margin-block: 0; }
/* Reboot floats a legend, sizes it at about 22px and keeps 8px under it, and
   clears whatever follows it (styles.css:405-420). */
.rules-page :where(fieldset) { padding: 0; border: 0; min-width: 0; }
.rules-page :where(legend) { float: none; width: auto; padding: 0; font: inherit; line-height: inherit; }
/* The theme gives every aside and section 5rem of block space above and below (styles.css:11313-11317); today's usra_styles.html:17 cancels it, and that file is deleted (2.7). */
.rules-page :where(section, aside) { padding-top: 0; padding-bottom: 0; }
.rules-page { color: var(--dst-ink); }
/* Lists are ruled, not bulleted, and start flush with the h1. */
.rules-page :where(ul, ol) { padding-left: 0; list-style: none; }

/* Layout values used only here (5.1, 5.7, C11). */
:root {
  --rules-3d-h: clamp(400px, calc(100vh - 193px), 600px);
  --rules-thead-h: 2.25rem;
  --rules-readout-h: calc(var(--dst-hit) + 2px + 9.9375rem);
  --rules-3d-reserve: calc(var(--dst-hit) + var(--dst-space-2) * 3 + 1px + var(--dst-space-3) + 3.5rem);
}

/* The footer sits at the bottom of a tall screen (6.2). */
body { min-height: 100vh; display: flex; flex-direction: column; }
.rules-page { flex: 1 0 auto; padding-bottom: var(--dst-space-8); font: 500 var(--dst-text-body) var(--dst-font-ui); }
footer { flex-shrink: 0; }

/* --- Type (3.3) ---------------------------------------------------------------- */
.rules-page h1 {
  max-width: 20em;
  color: var(--dst-ink);
  font: 600 var(--dst-text-display) var(--dst-font-display);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.rules-page h2 { color: var(--dst-ink); font: 600 var(--dst-text-h2) var(--dst-font-display); text-wrap: balance; }
.rules-page h3, .rules-page h4 { color: var(--dst-ink); font: 700 var(--dst-text-h3) var(--dst-font-ui); }
.rules-page p { text-wrap: pretty; }

/* --- Focus (3.4) ----------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--dst-primary); outline-offset: 2px; }
.rules-3d-frame canvas:focus-visible { outline: none; }
/* Two rules: a browser without :has() drops a whole list that contains it. */
.rules-3d-frame:has(canvas:focus-visible) { outline: 3px solid var(--dst-primary); outline-offset: 2px; }
.rules-3d-frame.is-focused { outline: 3px solid var(--dst-primary); outline-offset: 2px; }
/* A visually hidden radio draws its ring on its label. */
.rules-radio > input:focus-visible + label { outline: 3px solid var(--dst-primary); outline-offset: 2px; }
/* Row-shaped controls inside clipping or scrolling boxes ring inside themselves. */
.rules-3d-key li > button:focus-visible,
.rules-sheet .rules-radio > input:focus-visible + label,
.rules-aside .rules-aside-articles a:focus-visible,
.rules-class-picker__panel a:focus-visible { outline-offset: -3px; }
/* A navy fill keeps the ring outside it: primary on white, not on navy. */
[aria-pressed="true"]:focus-visible, .rules-radio > input:checked:focus-visible + label { outline-offset: 2px; }
.rules-switch input:focus-visible + .rules-switch__track { outline: 3px solid var(--dst-primary); outline-offset: 2px; }

/* --- Sticky height and anchors (3.5) ---------------------------------------- */
/* rules.js writes the measured values inline on <html>; these are the same
   values before it runs and when it never does. */
:root:has(.rules-bar) { --dst-sticky-h: calc(var(--dst-nav-bottom) + 60px); }   /* nav + the 60 px bar (C7) */
@media screen and (max-width: 61.99em) {
  html:is(:not(.js), .rules-rows-fallback):has(.rules-bar) { --dst-sticky-h: var(--dst-nav-bottom); }  /* bar hidden, 2.7 */
}
/* The rulebook keeps its bar at every width until the aside (C23) arrives,
   so without the script its bar is hidden at every width. */
html:is(:not(.js), .rules-rows-fallback):has(.rules-bar--book) { --dst-sticky-h: var(--dst-nav-bottom); }
@media screen and (max-height: 31.25em) and (orientation: landscape) { :root:has(.rules-bar) { --dst-sticky-h: var(--dst-nav-bottom); } }
/* :root (0,1,0), not html (0,0,1): it must beat the theme's html rule at styles.css:11290, 4.5rem */
:root { scroll-padding-top: calc(var(--dst-sticky-h, var(--dst-nav-bottom)) + var(--dst-space-2)); }

/* --- Section boundaries (3.2) ---------------------------------------------------- */
/* <main>'s children are the header, the bar, then the sections, each its own
   page container; these set the space between them. */
.rules-header + section { margin-top: var(--dst-space-6); }
@media screen and (min-width: 48em) { .rules-header + section { margin-top: var(--dst-space-7); } }
.rules-bar + :is(section, .rules-results, .rules-wide) { margin-top: var(--dst-space-5); }
.rules-bar + .rules-results[hidden] + section { margin-top: var(--dst-space-5); }
section + .rules-results[hidden] + section { margin-top: var(--dst-space-8); }
section + section, section + .rules-results { margin-top: var(--dst-space-8); }
/* While a search shows its results line, hidden sections pass their space on. */
.rules-results:not([hidden]) ~ section { margin-top: var(--dst-space-4); }
.rules-results:not([hidden]) ~ section:not([hidden]) ~ section { margin-top: var(--dst-space-8); }

/* Areas and groups inside a section. */
.rules-intro + .rules-areas, .rules-intro ~ .rules-open-all { margin-top: var(--dst-space-2); }
.rules-area { margin-top: var(--dst-space-5); }
.rules-area:not([hidden]) ~ .rules-area { margin-top: var(--dst-space-6); }
.rules-results:not([hidden]) ~ section .rules-area { margin-top: var(--dst-space-4); }
.rules-results:not([hidden]) ~ section .rules-area:not([hidden]) ~ .rules-area { margin-top: var(--dst-space-6); }
.rules-group { margin-top: var(--dst-space-4); }
.rules-group:not([hidden]) ~ .rules-group { margin-top: var(--dst-space-6); }
.rules-group > .rules-rule-list { margin-top: var(--dst-space-3); }

/* Inside an area: the h3, the table, the "Other rules" h4, the notes. */
.rules-area > .rules-mtable { margin-top: var(--dst-space-3); }
.rules-area > h4 { margin-top: var(--dst-space-4); }
.rules-area > .rules-notes { margin-top: var(--dst-space-3); }
.rules-area > h4:not([hidden]) + .rules-notes { margin-top: var(--dst-space-2); }

/* Conflict notes, the diagram section and Sources. */
.rules-conflicts-intro { margin-top: var(--dst-space-4); }
.rules-conflicts-intro ~ .rules-conflict { margin-top: var(--dst-space-4); }
.rules-conflicts-intro ~ .rules-conflict:not([hidden]) ~ .rules-conflict { margin-top: var(--dst-space-3); }
.rules-conflict > * + * { margin-top: var(--dst-space-1); }
#diagram > .rules-intro + .rules-diagram-note { margin-top: var(--dst-space-3); }
.rules-letters { margin-top: var(--dst-space-4); }
.rules-sources > p + p { margin-top: var(--dst-space-3); }
.rules-sources > p + .rules-links { margin-top: var(--dst-space-4); }

/* h2 to its first content: 16, named per section, never a generic h2 + *. */
#car > h2 ~ :is(.rules-3d, .rules-3d-msg, noscript),
#measurements > .rules-intro,
#diagram > .rules-intro,
.rules-sources > p:first-of-type,
.rules-body-classes > .rules-classes,
.rules-books > .rules-links,
.rules-official > h2 + p,
#rules > .rules-sanctions,
#calendars > h2 + .rules-calendars,
#calendars > h2 + .rules-empty,
.rules-col > section > h2 + .rules-rule-list { margin-top: var(--dst-space-4); }
#car > noscript { display: block; }

/* Labelled groups in the Sections sheet and the rulebook aside (C8, C23). */
.rules-nav-label, .rules-nav-group > legend { font: 600 var(--dst-text-small) var(--dst-font-ui); color: var(--dst-ink); }
.rules-nav-label + *, .rules-nav-group > legend + * { margin-top: var(--dst-space-2); }
.rules-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dst-space-2); }
.rules-radio-rows { display: flex; flex-direction: column; gap: var(--dst-space-2); }
.rules-sheet__head ~ .rules-nav-group { margin-top: var(--dst-space-2); }
.rules-sheet__head ~ .rules-nav-group:not([hidden]) ~ .rules-nav-group { margin-top: var(--dst-space-5); }
.rules-aside > * + * { margin-top: var(--dst-space-5); }

/* Table rows draw their rule only under a visible row. */
.rules-mtable tbody :is(th, td) { border-top: 0; }
.rules-mtable tbody tr:not([hidden]) ~ tr > :is(th, td) { border-top: 1px solid var(--dst-line); }
@media screen and (max-width: 61.99em) {
  .rules-mtable tbody tr:not([hidden]) ~ tr > :is(th, td) { border-top: 0; }
  .rules-mtable tbody tr { border-top: 0; }
  .rules-mtable tbody tr:not([hidden]) ~ tr { border-top: 1px solid var(--dst-line); }
}

/* Ruled lists end on a rule; in two columns each column ends on its own. */
.rules-letters, .rules-classes, .rules-rule-list { border-bottom: 1px solid var(--dst-line); }
@media screen and (min-width: 48em) {
  .rules-letters, .rules-classes { border-bottom: 0; padding-top: 1px; /* exempt: rule overlap */ row-gap: 0; }
  .rules-letters > div, .rules-classes > li {
    border-top: 1px solid var(--dst-line);
    border-bottom: 1px solid var(--dst-line);
    margin-top: -1px; /* exempt: rule overlap */
  }
}

/* --- C1 Page header ------------------------------------------------------------- */
.rules-header {
  background: #fff;
  border-bottom: 1px solid var(--dst-line);
  padding: calc(var(--dst-nav-bottom) + var(--dst-space-5)) 0 var(--dst-space-5);
}
@media screen and (min-width: 48em) {
  .rules-header { padding: calc(var(--dst-nav-bottom) + var(--dst-space-7)) 0 var(--dst-space-6); }
}
.rules-print-meta { display: none; }
.rules-crumbs + h1 { margin-top: var(--dst-space-2); }
.rules-header h1 + .rules-tabs { margin-top: var(--dst-space-3); }
.rules-header :is(h1, .rules-tabs) + .rules-lede { margin-top: var(--dst-space-2); }
.rules-header .rules-lede + :is(.rules-legend, .rules-disclaimer),
.rules-header .rules-legend + .rules-disclaimer { margin-top: var(--dst-space-3); }
.rules-lede { max-width: 40rem; color: var(--dst-muted); font: 500 var(--dst-text-lead) var(--dst-font-ui); }
/* The rulebook's one legend sentence (7.1): its coloured words are spans, so
   screen readers don't announce edits. */
.rules-legend { max-width: 40rem; color: var(--dst-ink); font: 500 var(--dst-text-small) var(--dst-font-ui); }
.rules-fix-ins { color: var(--dst-green); font-weight: 700; }
.rules-fix-del { color: var(--dst-red); text-decoration: line-through; text-decoration-thickness: 2px; }
.rules-amber { color: var(--dst-amber); font-weight: 700; }

/* --- C2 Breadcrumb ---------------------------------------------------------------- */
.rules-crumbs ol { display: flex; flex-wrap: wrap; row-gap: var(--dst-space-5); font: 600 var(--dst-text-small) var(--dst-font-ui); }
.rules-crumbs li + li::before { content: "/"; margin: 0 var(--dst-space-2); color: var(--dst-muted); }
.rules-crumbs a, .rules-crumbs a:hover { position: relative; display: inline-block; color: var(--dst-primary); text-decoration: none; }
.rules-crumbs a:hover, .rules-crumbs a:focus-visible { text-decoration: underline; }
/* A 45px tall target with no change to the layout. */
.rules-crumbs a::before { content: ""; position: absolute; inset: calc(var(--dst-space-3) * -1) calc(var(--dst-space-1) * -1); }
.rules-crumbs li > span { color: var(--dst-muted); }

/* --- C3 Disclaimer line --------------------------------------------------------------- */
.rules-disclaimer { max-width: 40rem; color: var(--dst-muted); font: 500 var(--dst-text-small) var(--dst-font-ui); }
.rules-disclaimer a, .rules-disclaimer a:hover { color: var(--dst-primary); font-weight: 500; text-decoration: underline; }
/* A phone number never breaks at its hyphens (disclaimer, Sources, the landing's ruling line). */
.rules-page a[href^="tel:"] { white-space: nowrap; }

/* --- C4 Page tabs ------------------------------------------------------------------------ */
.rules-tabs { display: flex; flex-wrap: wrap; column-gap: var(--dst-space-5); }
.rules-tabs a, .rules-tabs a:hover {
  display: inline-flex;
  align-items: center;
  min-height: var(--dst-hit);
  color: var(--dst-primary);
  font: 600 var(--dst-text-control) var(--dst-font-ui);
  text-decoration: none;
}
.rules-tabs a[aria-current="page"], .rules-tabs a[aria-current="page"]:hover {
  color: var(--dst-ink);
  font-weight: 700;
  text-decoration: underline 2px var(--dst-primary);
  text-underline-offset: 10px;
}

/* --- C5 Class picker ------------------------------------------------------------------------- */
/* Rendered twice: in the header below 1200px, in the bar from 1200px. */
.rules-class-picker { position: relative; }
.rules-class-picker > summary {
  display: flex;
  align-items: center;
  gap: var(--dst-space-2);
  min-height: 48px;
  padding: 0 var(--dst-space-4);
  border: 1px solid var(--dst-control);
  border-radius: var(--dst-radius-control);
  background: #fff;
  color: var(--dst-ink);
  font: 600 var(--dst-text-control) var(--dst-font-ui);
  cursor: pointer;
  list-style: none;
}
.rules-class-picker > summary::-webkit-details-marker { display: none; }
.rules-class-picker > summary strong { font-weight: 700; }
.rules-class-picker > summary svg { flex: none; width: 16px; height: 16px; margin-left: auto; }
.rules-class-picker__panel {
  position: absolute;
  top: calc(100% + var(--dst-space-2));
  left: 0;
  z-index: 1020;
  width: 16rem;
  max-height: calc(100svh - var(--dst-sticky-h, var(--dst-nav-bottom)) - var(--dst-space-4));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--dst-space-2) 0;
  border: 1px solid var(--dst-line);
  border-radius: var(--dst-radius);
  background: #fff;
  box-shadow: var(--dst-shadow);
}
.rules-class-picker__panel a, .rules-class-picker__panel a:hover {
  display: flex;
  align-items: center;
  min-height: var(--dst-hit);
  padding: 0 var(--dst-space-4);
  color: var(--dst-ink);
  font: 500 var(--dst-text-body) var(--dst-font-ui);
  text-decoration: none;
}
.rules-class-picker__panel a:hover { text-decoration: underline; }
.rules-class-picker__panel a[aria-current="page"], .rules-class-picker__panel a[aria-current="page"]:hover {
  font-weight: 700;
  text-decoration: underline 2px var(--dst-primary);
  text-underline-offset: 6px;
}
.rules-bar .rules-class-picker > summary { min-height: var(--dst-hit); }
.rules-bar .rules-class-picker { flex: none; display: none; }
@media screen and (max-width: 47.99em) {
  .rules-header .rules-class-picker, .rules-class-picker__panel { width: 100%; }
}
@media screen and (min-width: 48em) and (max-width: 74.99em) {
  .rules-header .rules-class-picker > summary { min-width: 14rem; }
}
@media screen and (min-width: 75em) {
  .rules-header .rules-class-picker { display: none; }
  .rules-bar .rules-class-picker { display: block; margin-left: auto; }
}

/* --- C6 Header actions, share and toast ---------------------------------------------- */
.rules-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dst-space-2); }
.rules-header .rules-disclaimer + .rules-actions { margin-top: var(--dst-space-4); }
@media screen and (min-width: 48em) { .rules-header .rules-disclaimer + .rules-actions { margin-top: var(--dst-space-5); } }
@media screen and (max-width: 47.99em) {
  /* Phones print from the Sections sheet. */
  .rules-actions #rules-print { display: none; }
  .rules-actions .rules-btn--primary { width: 100%; }
}
@media screen and (min-width: 48em) and (max-width: 74.99em) {
  .rules-actions #rules-print { margin-left: auto; }
}
/* One label from the first paint: the share sheet on a touch screen, the
   clipboard on a computer. */
.rules-label-touch { display: none; }
@media (pointer: coarse) {
  .rules-label-touch { display: inline; }
  .rules-label-desk { display: none; }
}
html.rules-no-share .rules-label-touch { display: none; }
html.rules-no-share .rules-label-desk { display: inline; }
/* Controls that need rules.js are rendered in place and hidden by CSS when it
   can't run, so nothing moves when it does (2.7). */
html:is(:not(.js), .rules-rows-fallback) :is(.rules-actions .rules-btn, .rules-search, .rules-sections, .rules-open-all, .rules-sheet__head button) { display: none; }
@media screen and (min-width: 75em) {
  html:is(:not(.js), .rules-rows-fallback) .rules-actions { display: none; }
}

/* Toast: "Link copied." Fixed, so it reserves no space; empty, it is
   transparent rather than hidden, so it stays a live region. */
.rules-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dst-space-4) + env(safe-area-inset-bottom));
  z-index: 1040;
  transform: translateX(-50%);
  padding: var(--dst-space-3) var(--dst-space-4);
  border-radius: var(--dst-radius);
  background: var(--dst-navy);
  color: #fff;
  font: 600 var(--dst-text-small) var(--dst-font-ui);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.rules-toast.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rules-toast { transition: none; } }

/* --- C7 Sticky bar (its box; the search and Sections sheet come later) ------------ */
.rules-bar {
  position: sticky;
  top: var(--dst-nav-bottom, var(--dst-nav-h));
  z-index: 1010;
  height: 60px;
  box-sizing: border-box;
  padding: 0;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--dst-line);
}
.rules-bar > .container { position: relative; height: 100%; display: flex; align-items: center; gap: var(--dst-space-2); }
/* Landscape phones keep only the nav fixed; relative, not static, keeps the
   bar's stacking context. A browser that shrinks the layout viewport for the
   on-screen keyboard can match this while typing; current iOS Safari and
   Chrome don't. */
@media screen and (max-height: 31.25em) and (orientation: landscape) { .rules-bar { position: relative; } }
@media screen and (max-width: 61.99em) {
  html:is(:not(.js), .rules-rows-fallback) .rules-bar { display: none; }
}
html:is(:not(.js), .rules-rows-fallback) .rules-bar--book { display: none; }
.rules-bar__links { display: flex; gap: var(--dst-space-5); min-width: 0; }
.rules-bar__links a, .rules-bar__links a:hover {
  display: inline-flex;
  align-items: center;
  min-height: var(--dst-hit);
  color: var(--dst-ink);
  font: 600 var(--dst-text-control) var(--dst-font-ui);
  text-decoration: none;
  white-space: nowrap;
}
.rules-bar__links a:hover { text-decoration: underline; }
.rules-bar__links a[aria-current] {
  text-decoration: underline 2px var(--dst-primary);
  text-underline-offset: 10px;
}

/* --- C10 Number badge ------------------------------------------------------------------- */
/* A circle means the item is drawn on the 3D car; a plain number means it isn't. */
.rules-num {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dst-badge);
  height: var(--dst-badge);
  padding: 0;
  border: 0;
  background: none;
  color: var(--dst-muted);
  font: 600 0.8125rem/1 var(--dst-font-ui);
  font-variant-numeric: tabular-nums;
}
.rules-num:is(button, .is-drawn) {
  border: 1.5px solid var(--dst-navy);
  border-radius: 50%;
  background: #fff;
  color: var(--dst-navy);
  font-weight: 700;
}
.rules-3d-frame .rules-num { box-shadow: 0 0 0 3px var(--dst-paper); }
button.rules-num:not(.is-picked, [aria-pressed="true"]):is(:hover, .is-hover) { border-color: var(--dst-primary); color: var(--dst-primary); }
.rules-num:is(.is-picked, [aria-pressed="true"]) { border-color: var(--dst-primary); background: var(--dst-primary); color: #fff; }
/* A 44px target at the default text size. */
button.rules-num::before { content: ""; position: absolute; inset: calc(var(--dst-space-2) * -1); }

/* --- C13 Conflict marker ------------------------------------------------------------------ */
a.rules-flag, a.rules-flag:hover {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--dst-amber);
  font: 700 var(--dst-text-small) var(--dst-font-ui);
  text-decoration: underline;
}

/* --- C20 Link list ------------------------------------------------------------------------- */
.rules-links { max-width: 40rem; border-bottom: 1px solid var(--dst-line); }
.rules-links > li { padding: var(--dst-space-3) 0; border-top: 1px solid var(--dst-line); }
.rules-links a, .rules-links a:hover {
  position: relative;
  display: inline-block;
  vertical-align: top;
  color: var(--dst-primary);
  font: 700 var(--dst-text-body) var(--dst-font-ui);
  text-decoration: none;
}
.rules-links a:hover, .rules-links a:focus-visible { text-decoration: underline; }
/* A target about 50px tall with no change to the layout. */
.rules-links a::before { content: ""; position: absolute; inset: calc(var(--dst-space-3) * -1) 0; }
.rules-links__desc { display: block; margin-top: var(--dst-space-1); color: var(--dst-muted); font: 500 var(--dst-text-small) var(--dst-font-ui); }
.rules-links__domain { color: var(--dst-muted); font: 500 var(--dst-text-small) var(--dst-font-ui); }

/* --- C21 Buttons, controls and glyphs ------------------------------------------------------ */
.rules-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--dst-space-5);
  border: 1px solid var(--dst-control);
  border-radius: var(--dst-radius-control);
  background: #fff;
  color: var(--dst-ink);
  font: 600 var(--dst-text-control) var(--dst-font-ui);
  text-decoration: none;
}
.rules-btn:hover { background: var(--dst-paper); color: var(--dst-ink); }
.rules-btn--primary, .rules-btn--primary:hover { border: 0; background: var(--dst-navy); color: #fff; font-weight: 700; }
.rules-btn--primary:hover { background: var(--dst-ink); }
/* 44px in the bar, the sheet, the 3D controls and Driver Resources' calendar rows. */
.rules-btn--small { min-height: var(--dst-hit); }
.rules-textbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--dst-primary);
  font: 600 var(--dst-text-control) var(--dst-font-ui);
}
.rules-textbtn--row { display: inline-flex; align-items: center; min-height: var(--dst-hit); }
/* Segmented control: no gaps, hairline separators, navy when pressed. */
#rules-3d-views { display: flex; border: 1px solid var(--dst-control); border-radius: var(--dst-radius-control); }
#rules-3d-views > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--dst-hit);
  padding: 0 var(--dst-space-1);
  border: 0;
  background: #fff;
  color: var(--dst-ink);
  font: 600 var(--dst-text-control) var(--dst-font-ui);
  text-align: center;
}
#rules-3d-views > button + button { border-left: 1px solid var(--dst-line); }
#rules-3d-views > button:first-child { border-radius: calc(var(--dst-radius-control) - 1px) 0 0 calc(var(--dst-radius-control) - 1px); }
#rules-3d-views > button:last-child { border-radius: 0 calc(var(--dst-radius-control) - 1px) calc(var(--dst-radius-control) - 1px) 0; }
#rules-3d-views > button[aria-pressed="true"] { background: var(--dst-navy); color: #fff; }
#rules-3d-views > button:focus-visible { position: relative; z-index: 1; }
@media screen and (min-width: 48em) { #rules-3d-views > button { padding: 0 var(--dst-space-2); } }
@media screen and (max-width: 22.49em) { #rules-3d-views > button { padding: 0; } }
@media screen and (min-width: 48em) and (max-width: 61.99em) { #rules-3d-views > button { flex: 1 0 auto; } }
/* Select: 16px, so iOS doesn't zoom on focus; the native chevron. */
.rules-select {
  height: var(--dst-hit);
  min-width: 0;
  border: 1px solid var(--dst-control);
  border-radius: var(--dst-radius-control);
  padding: 0 40px 0 var(--dst-space-3); /* exempt: native chevron */
  background-color: #fff;
  color: var(--dst-ink);
  font: 600 1rem/1.2 var(--dst-font-ui);
}
/* Vertical radio group ("Show", C8 and C23). */
.rules-radio > input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rules-radio > label {
  display: flex;
  align-items: center;
  min-height: var(--dst-hit);
  padding: 0 var(--dst-space-4);
  border: 1px solid var(--dst-line);
  border-radius: var(--dst-radius);
  color: var(--dst-ink);
  font: 600 var(--dst-text-control) var(--dst-font-ui);
  cursor: pointer;
}
.rules-radio > input:checked + label { border-color: var(--dst-navy); background: var(--dst-navy); color: #fff; }
/* Switch ("Keep the screen on"): a 40x24 track whose knob is its ::before. */
.rules-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--dst-space-2); min-height: var(--dst-hit); cursor: pointer; }
.rules-switch input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rules-switch__track { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--dst-control); }
.rules-switch__track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.rules-switch input:checked + .rules-switch__track { background: var(--dst-navy); }
.rules-switch input:checked + .rules-switch__track::before { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .rules-switch__track::before { transition: none; } }
/* A disabled stepper end stays focusable and does nothing. */
[aria-disabled="true"].rules-btn, [aria-disabled="true"].rules-textbtn { color: var(--dst-control); border-color: var(--dst-line); }
/* Glyphs are inline SVG, drawn in the text's colour. */
.rules-glyph { flex: none; width: 16px; height: 16px; }

/* --- C22 Sources and rulings ----------------------------------------------------------------- */
.rules-sources > p { max-width: var(--dst-measure); }
.rules-sources__domain { color: var(--dst-muted); }
.rules-sources a, .rules-sources a:hover { color: var(--dst-primary); }

/* --- Landing (6.3) and its class list (C19) ------------------------------------------------- */
.rules-official > p { max-width: var(--dst-measure); }
.rules-official a, .rules-official a:hover { color: var(--dst-primary); }
/* Under 576px a class is one row: its name and its count. */
.rules-classes > li > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dst-space-2);
  min-height: 56px;
  padding: var(--dst-space-4) 0;
  color: inherit;
  text-decoration: none;
}
.rules-classes > li { border-top: 1px solid var(--dst-line); }
.rules-classes__name { display: block; color: var(--dst-primary); font: 700 var(--dst-text-h3) var(--dst-font-ui); }
.rules-classes a:hover .rules-classes__name { text-decoration: underline; }
.rules-classes__spec, .rules-classes__count { color: var(--dst-muted); font: 500 var(--dst-text-small) var(--dst-font-ui); font-variant-numeric: tabular-nums; }
.rules-classes__summary { color: var(--dst-muted); }
.rules-classes__spec, .rules-classes__summary { display: none; margin-top: var(--dst-space-1); }
@media screen and (min-width: 36em) {
  .rules-classes > li > a { display: block; min-height: 0; }
  .rules-classes__count { display: none; }
  .rules-classes__spec, .rules-classes__summary { display: block; }
}
@media screen and (min-width: 48em) {
  .rules-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--dst-space-5); }
  .rules-books > .rules-links { max-width: calc((100% - var(--dst-space-5)) / 2); }
}

/* --- Driver Resources (6.2) ---------------------------------------------------------------------- */
.rules-sanction { padding: var(--dst-space-4) 0; border-top: 1px solid var(--dst-line); }
.rules-sanction:last-child { border-bottom: 1px solid var(--dst-line); }
.rules-sanction__name + .rules-sanction__meta { margin-top: var(--dst-space-1); }
.rules-sanction__meta { color: var(--dst-muted); font: 500 var(--dst-text-small) var(--dst-font-ui); }
.rules-sanction .rules-links { border-bottom: 0; }
.rules-sanction .rules-links > li:last-child { padding-bottom: 0; }
.rules-sanction__head + .rules-links { margin-top: var(--dst-space-3); }
@media screen and (min-width: 62em) {
  .rules-sanction {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: var(--dst-space-5);
    max-width: calc(12rem + var(--dst-space-5) + 40rem);
  }
  .rules-sanction__head + .rules-links { margin-top: 0; }
  .rules-sanction .rules-links { max-width: none; }
  .rules-sanction .rules-links > li:first-child { border-top: 0; padding-top: 0; }
}
.rules-calendars { max-width: 40rem; border-bottom: 1px solid var(--dst-line); }
.rules-calendars > li { padding: var(--dst-space-3) 0; border-top: 1px solid var(--dst-line); }
.rules-calendar__text { min-width: 0; max-width: var(--dst-measure); }
.rules-calendar__title { display: block; font-weight: 700; }
.rules-calendar__sub { display: block; margin-top: var(--dst-space-1); color: var(--dst-muted); font: 500 var(--dst-text-small) var(--dst-font-ui); }
.rules-calendars .rules-btn { margin-top: var(--dst-space-3); }
@media screen and (min-width: 36em) {
  .rules-calendars > li { display: flex; align-items: center; justify-content: space-between; column-gap: var(--dst-space-4); }
  .rules-calendars .rules-btn { flex: none; margin-top: 0; }
}
@media screen and (min-width: 62em) {
  .rules-calendars { max-width: calc(12rem + var(--dst-space-5) + 40rem); }
}
.rules-empty { max-width: var(--dst-measure); color: var(--dst-muted); }

/* --- Forced colours (10) ---------------------------------------------------------------------- */
@media (forced-colors: active) {
  [aria-pressed="true"], :checked + label, :is(.rules-tabs a, .rules-tile, .rules-bar a, .rules-class-picker__panel a, .rules-aside-articles a)[aria-current], .rules-3d-key button[aria-expanded="true"] {
    outline: 2px solid CanvasText; outline-offset: -4px;
  }
  :is(.rules-tabs a, .rules-tile, .rules-bar a, .rules-class-picker__panel a, .rules-aside-articles a)[aria-current]:focus-visible, .rules-3d-key button[aria-expanded="true"]:focus-visible, [aria-pressed="true"]:focus-visible, .rules-radio > input:checked:focus-visible + label {
    outline: 3px solid Highlight;
  }
  .rules-num:is(button, span.is-drawn) { forced-color-adjust: none; }
  .rules-num:is(.is-picked, [aria-pressed="true"]) { border-color: CanvasText; }
  .rules-num:focus-visible { outline-color: Highlight; }
  .rules-switch__track { border: 1px solid CanvasText; }
  .rules-switch__track::before { forced-color-adjust: none; background: CanvasText; }
  .rules-switch input:checked + .rules-switch__track { background: Highlight; forced-color-adjust: none; }
  [aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  .rules-num[aria-pressed="true"]:not(:focus-visible) { outline: none; }
}

/* --- Print (section 9 completes this) ------------------------------------------------------- */
@media print {
  body { display: block; }
  .rules-print-meta { display: block; margin: 0 0 12pt; font-size: 10pt; }
  .rules-header { padding: 0 0 12pt; border: 0; }
  .rules-crumbs, .rules-tabs, .rules-actions, .rules-bar, .rules-toast { display: none !important; }
  .rules-page h1 { color: #000; font-size: 18pt; }
}