/**
 * Shared article chrome for opted-in pages (body.mw-article).
 * Load after tokens.css / articles.css / navbar.css; family sheets last.
 * Component classes are additive; modifiers (mot-year-page, mw-article--faults,
 * mw-article--specs) stay free to add family rules.
 */

body.mw-article {
  font-family: 'Jost', system-ui, sans-serif;
  background: var(--color-page);
  color: var(--color-ink);
  --mw-article-anchor-offset: calc(var(--mw-header-height, 56px) + 24px);
}

body.mw-article .mw-article-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: 24px 16px 48px;
}

body.mw-article .mw-article-layout {
  display: block;
}

body.mw-article .mw-article-body {
  min-width: 0;
}

body.mw-article .mw-article-hero,
body.mw-article .mw-article-section,
body.mw-article .mw-article-cta {
  box-sizing: border-box;
  background: var(--color-surface, #fff);
  border: 0;
  box-shadow: none;
  border-radius: var(--radius-card, 18px);
  padding: 24px 20px;
}

body.mw-article .mw-article-hero,
body.mw-article .mw-article-section {
  margin-bottom: 24px;
}

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

body.mw-article #hero {
  margin-bottom: 0;
}

body.mw-article .mw-article-title {
  font-size: clamp(26px, 2.5vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

body.mw-article .mw-article-section-title {
  font-size: var(--text-h2, 21px);
  font-weight: 700;
  line-height: 1.25;
}

/* Faults/specs section pills move into the header strip (navbar.js
   mountPageTabs). The in-page copy is a no-JS fallback only; each template's
   <noscript> block reveals it. */
body.mw-article .mw-article-pagenav {
  display: none;
}

body.mw-article .mw-article-prose {
  font-size: var(--text-prose, 16px);
  line-height: var(--text-prose--line-height, 1.65);
}

body.mw-article p.mw-article-prose,
body.mw-article .mw-article-prose p {
  max-width: 70ch;
}

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

body.mw-article .mw-article-breadcrumbs {
  color: var(--color-muted, #5A636E);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.mw-article .mw-article-body a:focus-visible,
body.mw-article .mw-article-button:focus-visible {
  outline: var(--focus-ring, 2px solid var(--color-action, #3B82F6));
  outline-offset: var(--focus-ring-offset, 2px);
}

@media (min-width: 768px) {
  body.mw-article .mw-article-shell {
    padding: 32px 24px 64px;
  }

  body.mw-article .mw-article-hero,
  body.mw-article .mw-article-section,
  body.mw-article .mw-article-cta {
    padding: 32px 36px;
  }

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

@media (min-width: 1024px) {
  body.mw-article .mw-article-shell {
    padding-left: 32px;
    padding-right: 32px;
  }

  body.mw-article .mw-article-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 32px;
  }
}

/* Autodata live HTML still inlines family CSS after this sheet. Beat those
   leftovers here so faults/specs match year-page chrome without a republish.
   Year pages do not use these selectors. */
body.mw-article .hero-deck {
  font-size: var(--text-prose, 16px);
  font-weight: 400;
  line-height: var(--text-prose--line-height, 1.65);
  letter-spacing: 0;
  color: var(--color-muted, #5A636E);
  margin-top: 8px;
}

body.mw-article .hero-intro,
body.mw-article .topic-answer,
body.mw-article .fluid-prose p {
  font-size: var(--text-prose, 16px);
  line-height: var(--text-prose--line-height, 1.65);
}

body.mw-article .mw-article-hero:has(+ .hero-foot),
body.mw-article .mw-article-hero:has(+ .keys) {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

body.mw-article .mw-article-hero + .hero-foot,
body.mw-article .mw-article-hero + .keys {
  box-sizing: border-box;
  background: var(--color-surface, #fff);
  border: 0;
  border-block: 0;
  box-shadow: none;
  border-radius: 0 0 var(--radius-card, 18px) var(--radius-card, 18px);
  margin-top: 0;
  margin-bottom: 24px;
  padding: 8px 20px 24px;
}

body.mw-article .mw-article-hero .hero-foot,
body.mw-article .mw-article-hero + .hero-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

body.mw-article .mw-article-hero .hero-foot {
  margin-top: 16px;
  margin-bottom: 0;
  padding: 16px;
  border: 0;
  border-radius: var(--radius-panel, 12px);
  background: var(--color-chip, #F3F5F7);
}

body.mw-article .mw-article-hero + .hero-foot {
  background: var(--color-chip, #F3F5F7);
  border-radius: 0 0 var(--radius-card, 18px) var(--radius-card, 18px);
  padding: 16px 20px 24px;
}

body.mw-article .mw-article-hero + .hero-foot p,
body.mw-article .mw-article-hero .hero-foot p {
  max-width: 70ch;
  color: var(--color-muted, #5A636E);
  font-size: var(--text-prose-sm, 15px);
  line-height: 1.6;
}

body.mw-article .mw-article-hero + .hero-foot p {
  padding: 0;
  background: transparent;
}

body.mw-article .mw-article-hero .keys {
  margin-top: 24px;
  padding: 24px 0 0;
  border-block: 0;
}

body.mw-article .section-heading {
  display: none;
}

body.mw-article--specs .chapter-number,
body.mw-article--specs .chapter-heading::after {
  display: none;
}

body.mw-article--faults .fault-group + .fault-group,
body.mw-article--specs .chapter + .chapter,
body.mw-article--faults .end-section,
body.mw-article--specs .end-section {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 768px) {
  body.mw-article .mw-article-hero + .keys {
    padding: 8px 36px 32px;
    margin-bottom: 40px;
  }

  body.mw-article .mw-article-hero + .hero-foot {
    padding: 16px 36px 32px;
    margin-bottom: 40px;
  }

  body.mw-article .hero-deck {
    font-size: var(--text-prose, 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.mw-article) {
    scroll-behavior: auto;
  }
}

@media print {
  body.mw-article #mw-header,
  body.mw-article #mw-footer {
    display: none;
  }

  body.mw-article .mw-article-layout {
    display: block;
  }
}

/* Autodata faults/specs only: SectionCard shell + sidebar TOC.
   MotData year pages keep the white-slab rules above. Do not copy 20px
   into the shared token mirror — REPORT_CARD is an intentional exception.
   These locals mirror SectionCard and stay off the shared token mirror. */
body.mw-article.mw-article--faults,
body.mw-article.mw-article--specs {
  --mw-article-card-radius: 20px;
  --mw-article-anchor-offset: calc(var(--mw-header-height, 56px) + 24px);
  --mw-article-rail: 240px;
  --mw-article-rail-gap: 40px;
  --mw-article-rail-dek: 200px;
  --mw-article-card-pad-y: 22px;
  --mw-article-card-pad-x: 20px;
  --mw-article-card-pad-y-lg: 28px;
  --mw-article-card-pad-x-lg: 32px;
  --mw-article-section-pad-y: 24px;
  --mw-article-section-pad-top: 28px;
  --mw-article-section-pad-bottom: 64px;
  font-size: var(--text-body, 14.5px);
  line-height: var(--text-body--line-height, 1.5);
}

body.mw-article.mw-article--faults .mw-article-layout,
body.mw-article.mw-article--specs .mw-article-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.mw-article.mw-article--faults .mw-article-body,
body.mw-article.mw-article--specs .mw-article-body {
  position: relative;
  z-index: 0;
}

body.mw-article.mw-article--faults .mw-article-hero,
body.mw-article.mw-article--specs .mw-article-hero {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

body.mw-article.mw-article--faults .mw-article-hero:hover,
body.mw-article.mw-article--specs .mw-article-hero:hover,
body.mw-article.mw-article--faults .mw-article-section:hover,
body.mw-article.mw-article--specs .mw-article-section:hover {
  border: 0;
  box-shadow: none;
  transform: none;
}

body.mw-article.mw-article--faults .mw-article-hero:has(+ .hero-foot),
body.mw-article.mw-article--specs .mw-article-hero:has(+ .keys),
body.mw-article.mw-article--faults .mw-article-hero:has(+ .keys),
body.mw-article.mw-article--specs .mw-article-hero:has(+ .hero-foot) {
  margin-bottom: 0;
  border-radius: 0;
}

body.mw-article.mw-article--faults .mw-article-hero + .hero-foot,
body.mw-article.mw-article--specs .mw-article-hero + .keys,
body.mw-article.mw-article--faults .mw-article-hero + .keys,
body.mw-article.mw-article--specs .mw-article-hero + .hero-foot {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

body.mw-article.mw-article--faults .hero-deck,
body.mw-article.mw-article--specs .hero-deck {
  font-size: var(--text-compact);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--color-muted);
  margin-top: 8px;
}

body.mw-article.mw-article--faults .mw-article-hero .hero-foot,
body.mw-article.mw-article--specs .mw-article-hero .hero-foot {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  row-gap: 8px;
  margin-top: 24px;
  margin-bottom: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-card-sm);
  background: var(--color-row);
}

body.mw-article.mw-article--faults .mw-article-hero .hero-foot::before,
body.mw-article.mw-article--specs .mw-article-hero .hero-foot::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-action, var(--color-brand));
  color: var(--color-surface);
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}

body.mw-article.mw-article--faults .mw-article-hero .hero-foot p,
body.mw-article.mw-article--specs .mw-article-hero .hero-foot p {
  grid-column: 2;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: 1.45;
}

body.mw-article.mw-article--faults .mw-article-hero .hero-foot p strong,
body.mw-article.mw-article--specs .mw-article-hero .hero-foot p strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-ink);
  font-size: var(--text-row-title);
  font-weight: 700;
  line-height: 1.3;
}

body.mw-article.mw-article--faults .mw-article-hero .keys,
body.mw-article.mw-article--specs .mw-article-hero .keys {
  margin-top: 24px;
  padding: var(--mw-article-card-pad-y) var(--mw-article-card-pad-x);
  border: 1px solid var(--color-card-border);
  border-radius: var(--mw-article-card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

body.mw-article.mw-article--faults .mw-article-section,
body.mw-article.mw-article--specs .mw-article-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--mw-article-section-pad-y) 0;
  margin-bottom: 0;
  scroll-margin-top: var(--mw-article-anchor-offset);
}

body.mw-article.mw-article--faults .mw-article-section-title,
body.mw-article.mw-article--specs .mw-article-section-title {
  font-size: var(--text-h2);
  font-weight: var(--text-h2--font-weight, 800);
  line-height: var(--text-h2--line-height, 1.15);
  letter-spacing: var(--text-h2--letter-spacing, -0.035em);
  color: var(--color-ink);
}

body.mw-article.mw-article--faults .mw-article-section-rail .eyebrow,
body.mw-article.mw-article--specs .mw-article-section-rail .eyebrow {
  margin-bottom: 8px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-muted);
}

body.mw-article.mw-article--faults .mw-article-section-dek,
body.mw-article.mw-article--specs .mw-article-section-dek,
body.mw-article.mw-article--faults .mw-article-section-rail .group-note,
body.mw-article.mw-article--specs .mw-article-section-rail .section-deck {
  margin-top: 8px;
  max-width: none;
  font-size: var(--text-compact);
  line-height: 1.45;
  color: var(--color-muted);
}

body.mw-article.mw-article--faults .mw-article-section-card,
body.mw-article.mw-article--specs .mw-article-section-card {
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--mw-article-card-radius);
  box-shadow: var(--shadow-card);
  padding: var(--mw-article-card-pad-y) var(--mw-article-card-pad-x);
}

@media (min-width: 768px) {
  body.mw-article.mw-article--faults .mw-article-hero,
  body.mw-article.mw-article--specs .mw-article-hero,
  body.mw-article.mw-article--faults .mw-article-section,
  body.mw-article.mw-article--specs .mw-article-section {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
  }

  body.mw-article.mw-article--faults .mw-article-hero,
  body.mw-article.mw-article--specs .mw-article-hero {
    padding-top: 0;
  }

  body.mw-article.mw-article--faults .mw-article-hero + .keys,
  body.mw-article.mw-article--specs .mw-article-hero + .keys,
  body.mw-article.mw-article--faults .mw-article-hero + .hero-foot,
  body.mw-article.mw-article--specs .mw-article-hero + .hero-foot {
    padding: 0;
    margin-bottom: 0;
  }

  body.mw-article.mw-article--faults .hero-deck,
  body.mw-article.mw-article--specs .hero-deck {
    font-size: var(--text-compact);
  }
}

@media (min-width: 1024px) {
  /* SectionCard.jsx: 240px sticky rail (title + dek) beside the card. The
     sticky offset clears the header, which now also carries the section pills. */
  body.mw-article.mw-article--faults .mw-article-section,
  body.mw-article.mw-article--specs .mw-article-section {
    grid-template-columns: var(--mw-article-rail) minmax(0, 1fr);
    column-gap: var(--mw-article-rail-gap);
    row-gap: 12px;
    padding: var(--mw-article-section-pad-top) 0 var(--mw-article-section-pad-bottom);
  }

  body.mw-article.mw-article--faults .mw-article-section-rail,
  body.mw-article.mw-article--specs .mw-article-section-rail {
    position: sticky;
    top: calc(var(--mw-header-height, 56px) + 12px);
    align-self: start;
    padding-bottom: 28px;
  }

  body.mw-article.mw-article--faults .mw-article-section-dek,
  body.mw-article.mw-article--specs .mw-article-section-dek,
  body.mw-article.mw-article--faults .mw-article-section-rail .group-note,
  body.mw-article.mw-article--specs .mw-article-section-rail .section-deck {
    max-width: var(--mw-article-rail-dek);
  }

  body.mw-article.mw-article--faults .mw-article-section-card,
  body.mw-article.mw-article--specs .mw-article-section-card {
    padding: var(--mw-article-card-pad-y-lg) var(--mw-article-card-pad-x-lg);
  }

  body.mw-article.mw-article--faults .mw-article-hero .keys,
  body.mw-article.mw-article--specs .mw-article-hero .keys {
    padding: var(--mw-article-card-pad-y-lg) var(--mw-article-card-pad-x-lg);
  }
}

body.mw-article.mw-article--specs .source-box,
body.mw-article.mw-article--faults .source-box {
  margin-bottom: 24px;
}

body.mw-article.mw-article--specs .history,
body.mw-article.mw-article--faults .history {
  margin-bottom: 0;
}

@media print {
  body.mw-article.mw-article--faults .mw-article-layout,
  body.mw-article.mw-article--specs .mw-article-layout {
    display: block;
  }

  body.mw-article.mw-article--faults .mw-article-section,
  body.mw-article.mw-article--specs .mw-article-section {
    display: block;
    padding: 0;
    background: transparent;
  }

  body.mw-article.mw-article--faults .mw-article-section-rail,
  body.mw-article.mw-article--specs .mw-article-section-rail {
    position: static;
  }

  body.mw-article.mw-article--faults .mw-article-section-card,
  body.mw-article.mw-article--specs .mw-article-section-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: #fff;
  }

  body.mw-article.mw-article--faults .mw-article-hero,
  body.mw-article.mw-article--specs .mw-article-hero {
    padding-top: 24px;
  }
}

/* --------------------------------------------------------------------------
   Token alignment with the MOT year pages (faults + specs only).
   Values only: same type scale, colours, radii as mot-year.css. No layout
   or markup changes.
   -------------------------------------------------------------------------- */

/* Breadcrumbs */
body.mw-article.mw-article--faults .mw-article-breadcrumbs,
body.mw-article.mw-article--specs .mw-article-breadcrumbs {
  gap: 8px;
  font-size: var(--text-caption, 12.5px);
  line-height: var(--text-caption--line-height, 1.4);
}

/* Hero: meta line, H1, lede, byline */
body.mw-article.mw-article--faults .hero .eyebrow,
body.mw-article.mw-article--specs .hero .eyebrow {
  margin-bottom: 16px;
  font-size: var(--text-compact, 13.5px);
  font-weight: 400;
  line-height: var(--text-compact--line-height, 1.5);
}

body.mw-article.mw-article--faults .mw-article-title,
body.mw-article.mw-article--specs .mw-article-title {
  font-size: clamp(28px, 2.5vw, 32px);
  font-weight: var(--text-h2--font-weight, 800);
  line-height: var(--text-h2--line-height, 1.15);
  letter-spacing: var(--text-h2--letter-spacing, -0.035em);
  text-wrap: balance;
}

body.mw-article.mw-article--faults .hero-intro,
body.mw-article.mw-article--specs .hero-intro {
  max-width: 60ch;
  font-size: var(--text-lede, 17px);
  line-height: var(--text-lede--line-height, 1.5);
}

body.mw-article.mw-article--faults .byline,
body.mw-article.mw-article--specs .byline {
  font-size: var(--text-compact, 13.5px);
  line-height: var(--text-compact--line-height, 1.5);
}

/* Card headings */
body.mw-article.mw-article--faults .fault h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Small screens (under 768px), faults + specs only. One block, nothing here
   reaches 768px and up. Same method as mot-year.css.
   1. Type tokens: H2 was the same size as H1 (28px), prose 16px on a 301px
      column.
   2. Specs: fact tables run two across when there is room; units and
      qualifiers were --color-faint (2.5:1 on white).
   The family CSS is inlined after this sheet, so selectors carry the
   body.mw-article prefix to win on specificity (no !important).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.mw-article:is(.mw-article--faults, .mw-article--specs) {
    --text-h2: 23px;
    --text-card-h: 19px;
    --text-prose: 15px;
    --text-prose-sm: 14.5px;
    --text-lede: 16px;
  }

  /* Rhythm: less air under the header, fault cards a little tighter */
  body.mw-article:is(.mw-article--faults, .mw-article--specs) .mw-article-shell { padding-top: 12px; }
  body.mw-article:is(.mw-article--faults, .mw-article--specs) .mw-article-breadcrumbs { padding-top: 12px; }
  body.mw-article:is(.mw-article--faults, .mw-article--specs) .mw-article-hero { padding-top: 20px; }
  body.mw-article:is(.mw-article--faults, .mw-article--specs) .hero .eyebrow { margin-bottom: 12px; }
  body.mw-article.mw-article--faults .mw-article-section-card { padding: 20px 16px; }
  body.mw-article.mw-article--faults .fault + .fault { margin-top: 8px; padding-top: 24px; }

  /* Breadcrumb: drop "Articles /" (the header logo is home) so the trail
     stops orphaning its last crumb at 320px. The link keeps a 44px hit area. */
  body.mw-article:is(.mw-article--faults, .mw-article--specs) .mw-article-breadcrumbs > :nth-child(-n+2) { display: none; }
  body.mw-article:is(.mw-article--faults, .mw-article--specs) .mw-article-breadcrumbs a { padding-block: 13px; margin-block: -13px; }

  /* Hero meta line: separator trails the previous item instead of leading
     a wrapped line ("· Technical specifications"). */
  body.mw-article.mw-article--specs .spec-meta span { white-space: nowrap; }
  body.mw-article.mw-article--specs .spec-meta span + span::before { content: none; }
  body.mw-article.mw-article--specs .spec-meta span:not(:last-child)::after { content: "\00b7"; margin: 0 8px; }

  /* Faults hero note */
  body.mw-article.mw-article--faults .mw-article-hero .hero-foot { padding: 12px 14px; }
  body.mw-article.mw-article--faults .mw-article-hero .hero-foot p { font-size: var(--text-compact); line-height: 1.5; }

  /* Specs: fact tables two across when 128px columns fit, one at 320px */
  body.mw-article.mw-article--specs table.spec tbody {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 20px 16px;
  }
  body.mw-article.mw-article--specs table.spec .qual,
  body.mw-article.mw-article--specs table.spec td.v span[aria-label] { color: var(--color-mid, #6B7480); }
  body.mw-article.mw-article--specs .spec-more { padding-block: 12px; margin-top: 10px; }
}