/* MotData year-page family sheet. Loaded after tokens.css / navbar.css /
   footer.css. Tokens come from /shared/css/tokens.css. Do not change MotData
   data or class names used by articles.js. Year pages do not load
   articles.css or article-base.css — this sheet is the complete look. */

@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   0. Page, shell, utilities, JS contracts
   -------------------------------------------------------------------------- */

body.mot-year-page,
body.mot-year-page *,
body.mot-year-page *::before,
body.mot-year-page *::after {
  box-sizing: border-box;
}

body.mot-year-page {
  margin: 0;
  min-height: 100vh;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: var(--text-body, 14.5px);
  line-height: var(--text-body--line-height, 1.5);
  font-weight: 400;
  background: var(--color-page, #FAFAFA);
  color: var(--color-ink, #11161C);
  --header-offset: 72px;
  --mw-article-anchor-offset: calc(var(--mw-header-height, 56px) + 24px);
}

body.mot-year-page h1,
body.mot-year-page h2,
body.mot-year-page h3,
body.mot-year-page p,
body.mot-year-page ul,
body.mot-year-page ol {
  margin: 0;
}

body.mot-year-page button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

body.mot-year-page a {
  color: inherit;
}

body.mot-year-page .bg-page { background-color: var(--color-page, #FAFAFA); }
body.mot-year-page .text-ink { color: var(--color-ink, #11161C); }
body.mot-year-page .text-muted { color: var(--color-muted, #5A636E); }
body.mot-year-page .tabular-nums { font-variant-numeric: tabular-nums; }

/* Shell: 1240px, gutters 16 / 24 / 32. #main-content covers published HTML
   (max-w-6xl utilities become no-ops without Tailwind). */
body.mot-year-page #main-content,
body.mot-year-page .mw-article-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: 24px 16px 48px;
}

body.mot-year-page .mw-article-layout,
body.mot-year-page .article-layout {
  display: block;
}

body.mot-year-page .article-sidebar { margin-bottom: 24px; }

body.mot-year-page .article-main,
body.mot-year-page .mw-article-body {
  min-width: 0;
}

body.mot-year-page .article-section[id],
body.mot-year-page .mw-article-body [id] {
  scroll-margin-top: var(--mw-article-anchor-offset);
}

body.mot-year-page #reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--color-action, #3B82F6);
  z-index: 100;
  pointer-events: none;
  transition: width 100ms linear;
}

/* Visible by default so no-JS pages stay readable. articles.js arms
   below-the-fold nodes with .reveal-armed, then reveals via .visible. */
body.mot-year-page .scroll-reveal {
  opacity: 1;
  transform: none;
}

body.mot-year-page .scroll-reveal.reveal-armed {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

body.mot-year-page .scroll-reveal.reveal-armed.visible {
  opacity: 1;
  transform: translateY(0);
}

body.mot-year-page .scroll-reveal[data-reveal-index="1"]  { transition-delay: 0ms; }
body.mot-year-page .scroll-reveal[data-reveal-index="2"]  { transition-delay: 50ms; }
body.mot-year-page .scroll-reveal[data-reveal-index="3"]  { transition-delay: 100ms; }
body.mot-year-page .scroll-reveal[data-reveal-index="4"]  { transition-delay: 150ms; }
body.mot-year-page .scroll-reveal[data-reveal-index="5"]  { transition-delay: 200ms; }
body.mot-year-page .scroll-reveal[data-reveal-index="6"]  { transition-delay: 250ms; }
body.mot-year-page .scroll-reveal[data-reveal-index="7"]  { transition-delay: 300ms; }
body.mot-year-page .scroll-reveal[data-reveal-index="8"]  { transition-delay: 350ms; }
body.mot-year-page .scroll-reveal[data-reveal-index="9"]  { transition-delay: 400ms; }
body.mot-year-page .scroll-reveal[data-reveal-index="10"] { transition-delay: 450ms; }

body.mot-year-page .mw-article-breadcrumbs,
body.mot-year-page nav[aria-label="Breadcrumb"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.mot-year-page .mw-article-breadcrumbs a,
body.mot-year-page nav[aria-label="Breadcrumb"] a {
  color: var(--color-muted, #5A636E);
  text-decoration: none;
}

body.mot-year-page .mw-article-breadcrumbs a:hover,
body.mot-year-page nav[aria-label="Breadcrumb"] a:hover {
  color: var(--color-action-hover, #2563EB);
}

body.mot-year-page .mw-article-breadcrumbs i,
body.mot-year-page nav[aria-label="Breadcrumb"] i {
  font-size: 11px;
  color: var(--color-faint, #9AA3AD);
}

body.mot-year-page .data-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  white-space: normal;
  border: 0;
}

/* Quiet caption chips — not the old article badge colours. */
body.mot-year-page .data-badge[class*="confidence-"] {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  font-weight: 500;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .article-crosslink {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-muted, #5A636E);
  font-size: var(--text-body-sm, 13px);
  line-height: var(--text-body-sm--line-height, 1.5);
}

body.mot-year-page .article-crosslink > i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-faint, #9AA3AD);
}

body.mot-year-page .article-crosslink a {
  color: var(--color-ink, #11161C);
  text-decoration: none;
}

body.mot-year-page .article-crosslink a:hover {
  color: var(--color-action-hover, #2563EB);
}

/* --------------------------------------------------------------------------
   1. Hero — one white card; h1 / lede / verdict / open stat grid
   -------------------------------------------------------------------------- */

body.mot-year-page .mw-article-hero,
body.mot-year-page .article-hero-card {
  box-sizing: border-box;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-card-border, #EAECEF);
  border-radius: 20px;
  box-shadow: var(--shadow-card, 0 1px 2px rgba(16, 24, 40, 0.04));
  padding: 22px 20px;
}

body.mot-year-page #hero {
  margin-bottom: 24px;
}

body.mot-year-page .mot-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 8px;
}

body.mot-year-page .article-hero-title,
body.mot-year-page .mw-article-title {
  max-width: 36ch;
  margin-bottom: 8px;
  text-wrap: balance;
  font-size: clamp(28px, 2.5vw, 32px);
  line-height: var(--text-h2--line-height, 1.15);
  letter-spacing: var(--text-h2--letter-spacing, -0.035em);
  font-weight: 800;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .mot-hero-lede,
body.mot-year-page #hero .mw-article-prose {
  max-width: 70ch;
  font-size: var(--text-prose, 16px);
  line-height: var(--text-prose--line-height, 1.65);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .mot-hero-check {
  margin-top: 8px;
  font-size: var(--text-compact, 13.5px);
  line-height: var(--text-compact--line-height, 1.5);
  font-weight: 600;
}

body.mot-year-page .mot-hero-check a {
  color: var(--color-action-hover, #2563EB);
}

body.mot-year-page .article-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted, #5A636E);
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  font-weight: 400;
  text-transform: none;
}

body.mot-year-page .article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  font-weight: 400;
  gap: 12px;
  color: var(--color-muted, #5A636E);
  text-transform: none;
}

body.mot-year-page .article-provenance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
  text-transform: none;
}

body.mot-year-page .verdict-banner {
  display: flex;
  align-items: flex-start;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 10px;
}

body.mot-year-page .verdict-banner-icon {
  flex-shrink: 0;
}

body.mot-year-page .verdict-banner-content {
  flex: 1;
  min-width: 0;
}

body.mot-year-page .verdict-banner-title {
  font-size: var(--text-body, 14.5px);
  line-height: var(--text-body--line-height, 1.5);
  font-weight: 400;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .verdict-banner-bullets {
  list-style: none;
  margin-top: 8px;
  padding: 0;
}

body.mot-year-page .verdict-banner--neutral {
  padding: 0;
  background: transparent;
  border-radius: 0;
  max-width: 75ch;
}

body.mot-year-page .verdict-banner--neutral .verdict-banner-icon {
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .verdict-banner--attention .verdict-banner-icon {
  color: var(--color-attention-dot, #E0B400);
}

/* One open group of facts, without boxes nested inside another box. */
body.mot-year-page .article-data-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.mot-year-page #hero .article-data-panel {
  margin-top: 16px;
  padding-top: 0;
  border: 0;
}

body.mot-year-page .article-data-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px;
}

body.mot-year-page .article-stat-tile {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

body.mot-year-page .article-stat-tile:first-child { grid-column: 1 / -1; }

body.mot-year-page .article-label {
  font-size: var(--text-body-sm, 13px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .article-stat-value {
  margin-top: 4px;
  font-size: var(--text-stat, 28px);
  line-height: var(--text-stat--line-height, 1.1);
  letter-spacing: var(--text-stat--letter-spacing, -0.04em);
  font-weight: var(--text-stat--font-weight, 800);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .article-stat-sub {
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page #hero .article-stat-tile:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
}

body.mot-year-page #hero .article-stat-tile:first-child .article-stat-value {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  font-size: var(--text-stat, 28px);
  line-height: var(--text-stat--line-height, 1.1);
  letter-spacing: var(--text-stat--letter-spacing, -0.04em);
  font-weight: var(--text-stat--font-weight, 800);
  font-variant-numeric: tabular-nums;
}

body.mot-year-page #hero .article-stat-tile:first-child .article-stat-sub { grid-column: 1; }

/* --------------------------------------------------------------------------
   2. Workshop section shell — title + dek on grey; one nested white card
   -------------------------------------------------------------------------- */

body.mot-year-page .article-section,
body.mot-year-page .mw-article-section {
  box-sizing: border-box;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 24px;
}

body.mot-year-page .article-section:hover,
body.mot-year-page .mw-article-section:hover {
  border: 0;
  box-shadow: none;
  transform: none;
}

/* Contents is the only desktop rail. Do not restore the 240px intro rail. */
body.mot-year-page .article-section-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* Type only on the grey — year pages do not emit a section-title icon. */
body.mot-year-page .article-section-split-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

body.mot-year-page .article-section-title,
body.mot-year-page .mw-article-section-title {
  margin: 0;
  font-size: var(--text-h2, 28px);
  line-height: var(--text-h2--line-height, 1.15);
  letter-spacing: var(--text-h2--letter-spacing, -0.035em);
  font-weight: var(--text-h2--font-weight, 800);
  color: var(--color-ink, #11161C);
}

/* Stacked year pages — do not clamp the dek to 200px (that is the 240px rail). */
body.mot-year-page .article-section-blurb {
  max-width: 70ch;
  margin: 0;
  font-size: var(--text-compact, 13.5px);
  line-height: 1.45;
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .article-section-split-label .article-section-blurb {
  grid-column: 1 / -1;
}

body.mot-year-page .article-section-split-body {
  box-sizing: border-box;
  min-width: 0;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-card-border, #EAECEF);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(16, 24, 40, 0.04));
  border-radius: 20px;
  padding: 22px 20px;
  color: var(--color-ink, #11161C);
  font-size: var(--text-prose, 16px);
  line-height: var(--text-prose--line-height, 1.65);
  font-weight: 400;
}

/* Grey-page callout slot — workshop/React: above the nested card, not inside it.
   Inner-card .callout stays flattened in section 5. */
body.mot-year-page .article-section-callout .callout,
body.mot-year-page .article-section-callout .callout.info {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius-card-sm, 14px);
  background: var(--color-row, #F7F8FA);
  box-shadow: none;
}

body.mot-year-page .article-section-callout .callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-action, #3B82F6);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

body.mot-year-page .article-section-callout .callout-title {
  font-size: var(--text-row-title, 14px);
  line-height: var(--text-row-title--line-height, 1.3);
  font-weight: 700;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .article-section-callout .callout-text {
  margin-top: 6px;
  font-size: var(--text-body, 14.5px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .article-section-callout > p {
  margin-top: 8px;
  font-size: var(--text-body-sm, 13px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page #common-faults [data-fault-basis],
body.mot-year-page #common-faults .article-table-wrapper + p {
  font-size: var(--text-body-sm, 13px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-muted, #5A636E);
  max-width: 70ch;
}

/* Common faults breathing room — Standout copy unchanged; note is a quiet chip. */
body.mot-year-page #common-faults .article-section-split {
  gap: 16px;
}

body.mot-year-page #common-faults .article-content-stack {
  gap: 28px;
}

body.mot-year-page #common-faults .article-table-wrapper + p {
  margin-top: -20px;
}

body.mot-year-page #common-faults .fault-path {
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  margin-top: 2px;
}

body.mot-year-page #common-faults .article-note {
  max-width: none;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-card-sm, 14px);
  background: var(--color-row, #F7F8FA);
  box-shadow: none;
  font-size: var(--text-body-sm, 13px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page #common-faults .article-note-label,
body.mot-year-page #common-faults .article-note strong {
  font-weight: 700;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .article-content-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Dek on grey already explains the section. Advisories' inner lead
   restates it (HTML drop is a later card). Wear inner copy still adds detail. */
body.mot-year-page #advisories .article-content-stack > .article-prose:first-child {
  display: none;
}

body.mot-year-page .article-prose {
  max-width: 70ch;
  color: var(--color-ink, #11161C);
  font-size: var(--text-prose, 16px);
  line-height: var(--text-prose--line-height, 1.65);
  font-weight: 400;
}

body.mot-year-page .article-prose p + p {
  margin-top: 0.65em;
}

body.mot-year-page .article-prose strong {
  font-weight: 600;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .article-prose a {
  color: var(--color-action-hover, #2563EB);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.mot-year-page .article-section-split-body h3,
body.mot-year-page .article-prose h3,
body.mot-year-page #buying h3 {
  margin: 0 0 8px;
  font-size: var(--text-card-title, 16px);
  line-height: var(--text-card-title--line-height, 1.15);
  font-weight: 700;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .article-prose .text-lg {
  font-size: var(--text-card-h, 22px);
  line-height: var(--text-card-h--line-height, 1.25);
  letter-spacing: var(--text-card-h--letter-spacing, -0.03em);
  font-weight: var(--text-card-h--font-weight, 700);
  color: var(--color-ink, #11161C);
}

body.mot-year-page .article-checklist {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-width: 70ch;
  font-size: var(--text-body, 14.5px);
  line-height: var(--text-body--line-height, 1.5);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .article-checklist li + li {
  margin-top: 12px;
}

body.mot-year-page .article-checklist strong {
  font-weight: 600;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.mot-year-page .callout-title {
  font-size: var(--text-row-title, 14px);
  line-height: var(--text-row-title--line-height, 1.3);
  font-weight: 700;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .callout-text {
  font-size: var(--text-prose-sm, 15px);
  line-height: var(--text-prose-sm--line-height, 1.65);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

/* --------------------------------------------------------------------------
   3. TOC / pills / 44px targets / disclosure
   -------------------------------------------------------------------------- */

body.mot-year-page .article-toc,
body.mot-year-page .article-toc-content,
body.mot-year-page .article-toc-header {
  border: 0;
  box-shadow: none;
  background: transparent;
}

body.mot-year-page .article-toc-content { padding: 4px; }
body.mot-year-page .article-toc-header { display: none; padding: 12px; margin-bottom: 4px; }

body.mot-year-page .article-toc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--spacing-control, 44px);
  padding: 12px 20px;
}

body.mot-year-page .article-toc-toggle-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.mot-year-page .article-toc-toggle-label,
body.mot-year-page .article-toc-header-text {
  font-size: var(--text-compact, 13.5px);
  line-height: var(--text-compact--line-height, 1.5);
  font-weight: 600;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .article-toc-toggle-icon,
body.mot-year-page .article-toc-header-icon {
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .article-toc-count {
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .article-toc-caret {
  color: var(--color-faint, #9AA3AD);
  transition: transform 200ms ease;
}

body.mot-year-page .article-toc.expanded .article-toc-caret { transform: rotate(180deg); }

body.mot-year-page .article-toc-content { display: none; }
body.mot-year-page .article-toc.expanded .article-toc-content { display: block; }

body.mot-year-page .article-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.mot-year-page .article-toc-item {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 4px;
}
body.mot-year-page .article-toc-item:last-child { margin-bottom: 0; }

body.mot-year-page .toc-link,
body.mot-year-page .mw-article-contents-link {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: var(--spacing-control, 44px);
  max-width: 100%;
  min-height: var(--spacing-control, 44px);
  padding: 3px 12px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-muted, #5A636E);
  font-size: var(--text-compact, 13.5px);
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast, 200ms), color var(--duration-fast, 200ms);
}

body.mot-year-page .toc-link:hover,
body.mot-year-page .mw-article-contents-link:hover {
  background: var(--color-chip, #F3F5F7);
  color: var(--color-ink, #11161C);
}

body.mot-year-page .toc-link-number { display: none; }

/* Filled active pill (same recipe as report section pills). */
body.mot-year-page .toc-link.active,
body.mot-year-page .toc-link[aria-current],
body.mot-year-page .mw-article-contents-link.active,
body.mot-year-page .mw-article-contents-link[aria-current] {
  background: var(--color-action, #3B82F6);
  color: var(--color-surface, #FFFFFF);
  font-weight: 600;
}

body.mot-year-page .toc-link.active:hover,
body.mot-year-page .toc-link[aria-current]:hover,
body.mot-year-page .mw-article-contents-link.active:hover,
body.mot-year-page .mw-article-contents-link[aria-current]:hover {
  background: var(--color-action-hover, #2563EB);
  color: var(--color-surface, #FFFFFF);
}

body.mot-year-page .mw-article-contents-link:focus-visible,
body.mot-year-page .toc-link:focus-visible,
body.mot-year-page .article-toc-toggle:focus-visible {
  outline: var(--focus-ring, 2px solid var(--color-action, #3B82F6));
  outline-offset: var(--focus-ring-offset, 2px);
  box-shadow: none;
}

body.mot-year-page .toc-link.active:focus-visible,
body.mot-year-page .toc-link[aria-current]:focus-visible,
body.mot-year-page .mw-article-contents-link.active:focus-visible,
body.mot-year-page .mw-article-contents-link[aria-current]:focus-visible {
  outline-color: var(--color-action, #3B82F6);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px var(--color-surface, #FFFFFF);
}

body.mot-year-page .article-toc-print-hint { display: none; }

/* --------------------------------------------------------------------------
   4. Tables + mobile labelled rows
   -------------------------------------------------------------------------- */

body.mot-year-page .mot-cell-label { display: none; }

/* The same table and cells serve desktop and mobile. Header associations stay
   available when the mobile CSS changes their visual layout. */
body.mot-year-page .article-table-wrapper {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow-x: auto;
}

body.mot-year-page .article-table {
  width: 100%;
  border-collapse: collapse;
}

body.mot-year-page .article-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

body.mot-year-page .article-table thead,
body.mot-year-page .article-table tbody,
body.mot-year-page .article-table tr,
body.mot-year-page .article-table th,
body.mot-year-page .article-table td {
  border: 0;
  background: transparent;
}

body.mot-year-page .article-table th,
body.mot-year-page .article-table td {
  padding: 12px 8px;
  vertical-align: top;
  text-align: left;
}

body.mot-year-page .article-table tr > :first-child { padding-left: 0; }
body.mot-year-page .article-table tr > :last-child { padding-right: 0; }

body.mot-year-page .article-table tbody tr + tr > * {
  box-shadow: inset 0 1px 0 var(--color-row-border, #EEF0F3);
}

body.mot-year-page .article-table thead th {
  font-size: var(--text-body-sm, 13px);
  line-height: var(--text-body-sm--line-height, 1.5);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
  letter-spacing: normal;
  text-transform: none;
}

body.mot-year-page .article-table thead th.num { font-weight: 400; }

body.mot-year-page .article-table td {
  font-size: var(--text-body, 14.5px);
  line-height: var(--text-body--line-height, 1.5);
  font-weight: 600;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .article-table tbody th {
  font-size: var(--text-row-title, 14px);
  line-height: var(--text-row-title--line-height, 1.3);
  font-weight: 700;
  color: var(--color-ink, #11161C);
  letter-spacing: normal;
}

body.mot-year-page .th-note {
  display: block;
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .badge,
body.mot-year-page .badge-positive,
body.mot-year-page .badge-negative {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--text-body, 14.5px);
  line-height: var(--text-body--line-height, 1.5);
  font-weight: 600;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .mot-pattern-table { table-layout: fixed; }
body.mot-year-page .mot-pattern-table th,
body.mot-year-page .mot-pattern-table td {
  padding: 12px 8px;
  vertical-align: top;
  overflow-wrap: anywhere;
}

body.mot-year-page .mot-pattern-table thead th:first-child { width: 34%; }
body.mot-year-page .mot-pattern-table tbody th {
  font-size: var(--text-row-title, 14px);
  line-height: var(--text-row-title--line-height, 1.3);
  font-weight: 700;
  color: var(--color-ink, #11161C);
  letter-spacing: normal;
}

body.mot-year-page .mot-pattern-table td {
  font-size: var(--text-body, 14.5px);
  line-height: var(--text-body--line-height, 1.5);
  font-weight: 600;
}
body.mot-year-page .mot-pattern-table tr > :first-child { padding-left: 0; }
body.mot-year-page .mot-pattern-table tr > :last-child { padding-right: 0; }

body.mot-year-page .mot-pattern-table .fault-path {
  max-width: none;
  white-space: normal;
  overflow: visible;
  font-size: var(--text-body-sm, 13px);
  font-weight: 400;
  line-height: var(--text-body-sm--line-height, 1.5);
  color: var(--color-muted, #5A636E);
  margin-top: 4px;
}

/* A comparison ratio is not a positive/negative vehicle status. */
body.mot-year-page .mot-pattern-table .data-badge[class*="pass-rate-"] {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--text-body, 14.5px);
  line-height: var(--text-body--line-height, 1.5);
  font-weight: 600;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .mot-pattern-table .data-badge {
  max-width: 100%;
  white-space: normal;
  border: 0;
}

/* Location and confidence are supporting type, not equal-weight facts.
   Comparison lifts stay ink via the pass-rate rule above. */
body.mot-year-page .mot-pattern-table tbody td:first-of-type {
  font-size: var(--text-body-sm, 13px);
  line-height: 1.35;
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .mot-pattern-table tbody td:last-child,
body.mot-year-page .mot-pattern-table .data-badge[class*="confidence-"] {
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

/* --------------------------------------------------------------------------
   5. Notes / callouts — borderless; supporting copy at body / prose-sm
   -------------------------------------------------------------------------- */

body.mot-year-page .article-note,
body.mot-year-page .rates-caveat,
body.mot-year-page .article-inner-panel,
body.mot-year-page .article-banner--neutral,
body.mot-year-page .callout.info {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.mot-year-page .article-note,
body.mot-year-page .rates-caveat,
body.mot-year-page [data-pass-rates-context],
body.mot-year-page [data-pass-rates-yoy],
body.mot-year-page .article-banner-body,
body.mot-year-page .callout-text {
  max-width: 75ch;
  font-size: var(--text-prose-sm, 15px);
  line-height: var(--text-prose-sm--line-height, 1.65);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}

body.mot-year-page .article-note-label,
body.mot-year-page .article-note strong {
  font-weight: 700;
  color: var(--color-ink, #11161C);
}

body.mot-year-page .rates-caveat { margin-top: 24px; }
body.mot-year-page [data-pass-rates-context] { margin-top: 20px; }
body.mot-year-page [data-pass-rates-yoy] { margin-top: 6px; }
body.mot-year-page .rates-caveat-list { list-style: none; padding: 0; margin: 0; }
body.mot-year-page .rates-caveat-list li { margin: 6px 0; }
body.mot-year-page .article-banner,
body.mot-year-page .callout { border: 0; box-shadow: none; }
body.mot-year-page .article-banner-title,
body.mot-year-page .callout-title {
  font-size: var(--text-row-title, 14px);
  line-height: var(--text-row-title--line-height, 1.3);
  font-weight: 700;
  color: var(--color-ink, #11161C);
}

/* --------------------------------------------------------------------------
   6. FAQ
   -------------------------------------------------------------------------- */

body.mot-year-page .article-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.mot-year-page .faq-item {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.mot-year-page .faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--spacing-control, 44px);
  padding: 8px 0;
  gap: 16px;
  font-size: var(--text-row-title, 14px);
  line-height: var(--text-row-title--line-height, 1.3);
  font-weight: 700;
  text-align: left;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-ink, #11161C);
}
body.mot-year-page .faq-question:hover,
body.mot-year-page .faq-question:active {
  background: transparent;
  color: var(--color-action-hover, #2563EB);
}
body.mot-year-page .faq-question i {
  flex-shrink: 0;
  color: var(--color-muted, #5A636E);
  transition: transform 200ms ease;
}
body.mot-year-page .faq-item.open .faq-question i { transform: rotate(180deg); }
body.mot-year-page .faq-answer {
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding-right: 0;
  padding-left: 0;
  max-width: 70ch;
  font-size: var(--text-prose, 16px);
  line-height: var(--text-prose--line-height, 1.65);
  font-weight: 400;
  transition: height 200ms ease, opacity 200ms ease;
}
body.mot-year-page .faq-item.open .faq-answer {
  opacity: 1;
  padding-bottom: 16px;
}
body.mot-year-page .faq-answer.height-auto {
  height: auto !important;
  overflow: visible;
}
body.mot-year-page .faq-question:focus-visible {
  outline: var(--focus-ring, 2px solid var(--color-action, #3B82F6));
  outline-offset: var(--focus-ring-offset, 2px);
}

/* --------------------------------------------------------------------------
   7. Methodology prose groups
   -------------------------------------------------------------------------- */

body.mot-year-page .article-method-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 24px 0;
  max-width: 70ch;
}
body.mot-year-page .article-method-card,
body.mot-year-page .article-method-honesty {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.mot-year-page .article-method-card-title,
body.mot-year-page .article-method-honesty-title {
  font-size: var(--text-card-title, 16px);
  line-height: var(--text-card-title--line-height, 1.15);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-ink, #11161C);
}
body.mot-year-page .article-method-lead,
body.mot-year-page .article-method-card > p,
body.mot-year-page .article-method-honesty .article-method-limitations li {
  font-size: var(--text-prose, 16px);
  line-height: var(--text-prose--line-height, 1.65);
  font-weight: 400;
}
body.mot-year-page .article-method-lead,
body.mot-year-page .article-method-honesty { max-width: 70ch; }
body.mot-year-page .article-method-honesty .article-method-limitations {
  padding-left: 1.05rem;
}
body.mot-year-page .article-method-honesty .article-method-limitations li { margin-top: 8px; }
body.mot-year-page .article-method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
body.mot-year-page .article-method-chip {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: var(--color-chip, #F3F5F7);
  border-radius: var(--radius-chip, 7px);
  padding: 4px 8px;
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}
body.mot-year-page #methodology .ogl-attribution {
  margin-top: 24px;
  padding-top: 0;
  border: 0;
  font-size: var(--text-body-sm, 13px);
  line-height: var(--text-body-sm--line-height, 1.5);
  color: var(--color-muted, #5A636E);
}

body.mot-year-page #methodology .ogl-attribution a {
  color: var(--color-action-hover, #2563EB);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   8. CTA + primary button
   -------------------------------------------------------------------------- */

/* REPORT_CARD: 22×20, 20px radius, hairline, shadow-card. Not --spacing-card-y 24 / --radius-card 18. */
body.mot-year-page .article-cta,
body.mot-year-page .mw-article-cta {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  text-align: left;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-card-border, #EAECEF);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(16, 24, 40, 0.04));
  border-radius: 20px;
  padding: 22px 20px;
}
body.mot-year-page .article-cta-icon {
  display: flex;
  width: auto;
  height: auto;
  margin: 0;
  padding-top: 2px;
  align-self: start;
  background: transparent;
}
body.mot-year-page .article-cta-icon i {
  font-size: 20px;
  color: var(--color-muted, #5A636E);
}
body.mot-year-page .article-cta-title {
  margin: 0;
  font-size: var(--text-card-h, 22px);
  line-height: var(--text-card-h--line-height, 1.25);
  letter-spacing: var(--text-card-h--letter-spacing, -0.03em);
  font-weight: var(--text-card-h--font-weight, 700);
  color: var(--color-ink, #11161C);
}
body.mot-year-page .article-cta-text {
  grid-column: 2;
  margin: 0;
  max-width: 60ch;
  font-size: var(--text-prose-sm, 15px);
  line-height: var(--text-prose-sm--line-height, 1.65);
  font-weight: 400;
  color: var(--color-muted, #5A636E);
}
body.mot-year-page .article-cta-btn,
body.mot-year-page .mw-article-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 12px;
  min-height: var(--spacing-control, 44px);
  padding: var(--spacing-pill-y, 9px) var(--spacing-pill-x, 18px);
  font-size: var(--text-compact, 13.5px);
  line-height: 1;
  font-weight: 600;
  border: 0;
  border-radius: 9999px;
  background: var(--color-action, #3B82F6);
  color: var(--color-surface, #FFFFFF);
  text-decoration: none;
  transition: background-color var(--duration-fast, 200ms),
              border-color var(--duration-fast, 200ms);
}
body.mot-year-page .article-cta-btn:hover,
body.mot-year-page .mw-article-button:hover {
  background: var(--color-action-hover, #2563EB);
  color: var(--color-surface, #FFFFFF);
}
body.mot-year-page .mw-article-button:focus-visible,
body.mot-year-page .article-cta-btn:focus-visible {
  outline: var(--focus-ring, 2px solid var(--color-action, #3B82F6));
  outline-offset: var(--focus-ring-offset, 2px);
}

/* --------------------------------------------------------------------------
   9. 768 / 1024 / print
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  body.mot-year-page #main-content,
  body.mot-year-page .mw-article-shell {
    padding: 32px 24px 64px;
  }

  /* Nested/hero/CTA pad stays 22×20 until 1024. Do not use --spacing-card-*-lg. */

  body.mot-year-page #hero,
  body.mot-year-page .article-section,
  body.mot-year-page .mw-article-section {
    margin-bottom: 40px;
  }

  body.mot-year-page .article-section-split { gap: 20px; }
  body.mot-year-page #common-faults .article-section-split { gap: 24px; }

  body.mot-year-page .article-data-panel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.mot-year-page .article-stat-tile:first-child { grid-column: auto; }
  body.mot-year-page #hero .article-stat-tile:first-child { display: block; }
  body.mot-year-page #hero .article-stat-tile:first-child .article-stat-value { margin: 0.35rem 0 0; }
}

@media (min-width: 1024px) {
  body.mot-year-page #main-content,
  body.mot-year-page .mw-article-shell {
    padding-left: 32px;
    padding-right: 32px;
  }

  body.mot-year-page .mw-article-layout,
  body.mot-year-page .article-layout {
    display: grid;
    grid-template-columns: var(--spacing-left-col, 230px) minmax(0, 1fr);
    gap: 32px;
  }

  body.mot-year-page .article-sidebar { margin-bottom: 0; }

  body.mot-year-page .article-toc {
    position: sticky;
    top: var(--mw-article-anchor-offset);
    align-self: start;
    max-height: calc(100vh - var(--mw-article-anchor-offset) - 16px);
    overflow-y: auto;
  }

  body.mot-year-page .article-toc-toggle { display: none; }
  body.mot-year-page .article-toc-content { display: block; }
  body.mot-year-page .article-toc-header { display: none; }

  /* Nested/hero/CTA: 28×32. Not --spacing-card-x-lg 36 / y-lg 32. */
  body.mot-year-page .article-section-split-body,
  body.mot-year-page .mw-article-hero,
  body.mot-year-page .article-hero-card,
  body.mot-year-page .article-cta,
  body.mot-year-page .mw-article-cta {
    padding: 28px 32px;
  }

  body.mot-year-page .article-cta,
  body.mot-year-page .mw-article-cta { grid-template-columns: auto minmax(0, 1fr) auto; }
  body.mot-year-page .article-cta-btn { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0 0 0 12px; }
}

@media (max-width: 767px) {
  body.mot-year-page .mot-pattern-table,
  body.mot-year-page .mot-pattern-table tbody { display: block; }

  body.mot-year-page .mot-pattern-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.mot-year-page .mot-pattern-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    padding: 16px 0;
  }

  body.mot-year-page .mot-pattern-table tbody tr + tr { margin-top: 8px; }
  body.mot-year-page .mot-pattern-table tbody tr:first-child { padding-top: 0; }

  body.mot-year-page .mot-pattern-table tbody th,
  body.mot-year-page .mot-pattern-table td {
    display: block;
    padding: 0;
    min-width: 0;
    text-align: left;
    font-size: var(--text-body, 14.5px);
    line-height: var(--text-body--line-height, 1.5);
    font-weight: 600;
    box-shadow: none;
  }

  body.mot-year-page .mot-pattern-table tbody th {
    grid-column: 1 / -1;
    font-size: var(--text-row-title, 14px);
    line-height: var(--text-row-title--line-height, 1.3);
    font-weight: 700;
    color: var(--color-ink, #11161C);
  }

  body.mot-year-page .mot-pattern-table tbody td:first-of-type {
    font-size: var(--text-body-sm, 13px);
    line-height: 1.35;
    font-weight: 400;
    color: var(--color-muted, #5A636E);
  }

  body.mot-year-page .mot-pattern-table tbody td:last-child,
  body.mot-year-page .mot-pattern-table .data-badge[class*="confidence-"] {
    font-size: var(--text-caption, 12.5px);
    line-height: var(--text-caption--line-height, 1.4);
    font-weight: 400;
    color: var(--color-muted, #5A636E);
  }

  body.mot-year-page .mot-cell-label {
    display: block;
    font-size: var(--text-body-sm, 13px);
    font-weight: 400;
    line-height: 1.35;
    margin-bottom: 4px;
    color: var(--color-muted, #5A636E);
    text-transform: none;
    letter-spacing: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mot-year-page .scroll-reveal,
  body.mot-year-page .scroll-reveal.reveal-armed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.mot-year-page .faq-answer,
  body.mot-year-page .faq-question i,
  body.mot-year-page .article-toc-caret,
  body.mot-year-page .article-cta-btn {
    transition: none;
  }
}

@media print {
  body.mot-year-page #reading-progress,
  body.mot-year-page #mw-header,
  body.mot-year-page #mw-footer,
  body.mot-year-page .article-toc,
  body.mot-year-page .article-cta,
  body.mot-year-page .article-cta-btn {
    display: none !important;
  }
  body.mot-year-page .article-section { break-inside: auto; }
  body.mot-year-page .scroll-reveal { opacity: 1 !important; transform: none !important; }
  body.mot-year-page .faq-answer {
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
}