/* Mobile article spine presentation.
   The engine tokens in app/ds/obd.ds.css remain the visual SSOT; this file is
   route-scoped layout glue for the v07 article renderer only. */

[data-renderer="mobile-article-spine"] {
  width: 100%;
  min-width: 0;
  padding-bottom: max(var(--ds-space-8), env(safe-area-inset-bottom));
  color: var(--ds-label-1);
  color-scheme: light dark;
}

[data-renderer="mobile-article-spine"],
[data-renderer="mobile-article-spine"] * {
  min-width: 0;
}

[data-renderer="mobile-article-spine"] > header {
  padding-top: var(--ds-space-4);
}

[data-renderer="mobile-article-spine"] :is(h1, h2, h3, h4) {
  overflow-wrap: break-word;
  text-wrap: balance;
}

[data-renderer="mobile-article-spine"] :is(section, nav, footer, li[id]) {
  scroll-margin-top: var(--ds-space-6);
}

[data-renderer="mobile-article-spine"] :is(.ds-list, .ds-section, .wizard) {
  width: 100%;
  max-width: 100%;
  border: 0.5px solid var(--ds-separator);
}

[data-renderer="mobile-article-spine"] :is(.ds-cell, .ds-notice, .ds-section__body) {
  overflow-wrap: anywhere;
}

/* Inline editorial/source links stay visibly links. Navigation rows and
   button-shaped CTAs carry their affordance through shape and icon instead. */
[data-renderer="mobile-article-spine"] :where(a:not(.ds-btn):not(.ds-cite)) {
  text-decoration: underline;
  text-underline-offset: var(--ds-space-1);
}

[data-renderer="mobile-article-spine"].ds-screen nav a,
[data-renderer="mobile-article-spine"].ds-screen a.ds-btn {
  text-decoration: none;
}

/* chrome.css intentionally restores accent-colored content links with higher
   specificity than the DS button primitive. Reassert the filled button's
   contrast token on this route so the dark accent fill never inherits accent
   text and collapses to near-zero contrast. */
[data-renderer="mobile-article-spine"].ds-screen a.ds-btn--primary {
  background: color-mix(
    in srgb,
    var(--ds-accent) 96%,
    var(--ds-ext-frame-base-lo)
  );
  color: var(--ds-accent-contrast);
}

[data-renderer="mobile-article-spine"].ds-screen a.ds-cite {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* Preserve the inline footnote rhythm while expanding its touch hit area. */
[data-renderer="mobile-article-spine"].ds-screen a.ds-cite::after {
  content: "";
  position: absolute;
  inset-inline: calc(-1 * var(--ds-space-2));
  top: 50%;
  min-height: var(--ds-hit);
  transform: translateY(-50%);
}

[data-renderer="mobile-article-spine"].ds-screen a.ds-cite:hover,
[data-renderer="mobile-article-spine"].ds-screen a.ds-cite:focus-visible {
  text-decoration: underline;
}

[data-renderer="mobile-article-spine"] .article-checklist__icon {
  display: inline-flex;
  flex: none;
  width: var(--ds-icon-lg);
  height: var(--ds-icon-lg);
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-row);
  color: var(--ds-accent);
  background: var(--ds-state-info-bg);
}

/* Explicit glossary help only. The article manifest chooses a few terms; the
   renderer never auto-matches prose. Definitions stay in the initial HTML,
   while this client-side layer supplies disclosure, persistence, and viewport
   placement. A viewed term becomes neutral instead of remaining a page-wide
   accent competing with the diagnostic actions. */
[data-renderer="mobile-article-spine"] .ds-term-help-wrap {
  position: relative;
  display: inline;
  max-width: 100%;
}

[data-renderer="mobile-article-spine"] .ds-term-label {
  overflow-wrap: anywhere;
}

/* Keep only the final word and its definition control together. Making the
   whole authored term atomic would reintroduce overflow for long translated
   labels; leaving the button independent can orphan `?` on the next line. */
[data-renderer="mobile-article-spine"] .ds-term-no-orphan {
  display: inline-block;
  white-space: nowrap;
}

[data-renderer="mobile-article-spine"] button.ds-term-help {
  appearance: none;
  display: inline-flex;
  margin: 0;
  padding: 0;
  min-width: 1.05rem;
  min-height: 1.05rem;
  border: 0;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  vertical-align: baseline;
  cursor: help !important;
}

/* Glossary controls are inline disclosure affordances, never badges.  An
   ancestor may carry the badge tone used by a neighbouring chip; reset those
   inherited custom properties here so the question mark cannot acquire a
   filled pill surface in another section or theme. */
[data-renderer="mobile-article-spine"] button.ds-term-help {
  --ds-badge-bg: transparent;
  --ds-badge-ink: var(--ds-term-ink);
  background: transparent;
  background-image: none;
  box-shadow: none;
}

[data-renderer="mobile-article-spine"] button.ds-term-help:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 32%, transparent);
  outline-offset: 2px;
}

[data-renderer="mobile-article-spine"] .ds-term-mark {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  /* Keep the circular help affordance visibly separate from the dotted
     glossary cue.  The gap is small at reading size, but prevents the
     underline and the circle's lower border from reading as one stroke. */
  margin-inline-start: 0.62em;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  background-image: none;
  box-shadow: none;
  line-height: 1;
  /* The DS default is superscript for compact citation-like marks. Here the
     mark belongs to a tappable inline term, so keeping it on the text's
     middle avoids lifting the chip into the preceding wrapped line. */
  vertical-align: middle;
}

[data-renderer="mobile-article-spine"] .ds-term-tip {
  position: fixed;
  z-index: 40;
  width: min(280px, calc(100vw - 2 * var(--ds-space-4)));
  max-width: none;
  margin: 0;
  border: 0.5px solid var(--ds-glass-hairline);
  color: var(--ds-label-1);
  line-height: 1.45;
  white-space: normal;
}

[data-renderer="mobile-article-spine"] .ds-term-tip[hidden] {
  display: none;
}

[data-renderer="mobile-article-spine"] .ds-term-tip__body,
[data-renderer="mobile-article-spine"] .ds-term-tip__sources {
  display: block;
}

[data-renderer="mobile-article-spine"] .ds-term-tip__sources {
  margin-top: var(--ds-space-2);
  color: var(--ds-label-2);
  font: var(--ds-type-footnote);
}

@media (max-width: 640px) {
  [data-renderer="mobile-article-spine"] .ds-term-tip {
    inset-inline: var(--ds-space-3);
    top: auto !important;
    bottom: max(var(--ds-space-3), env(safe-area-inset-bottom));
    left: auto !important;
    width: auto;
    max-height: min(42vh, 18rem);
    overflow-y: auto;
  }
}

/* Screen one: one decision surface. The SEO title remains long in metadata;
   the visible H1 is deliberately short, followed by one grouped verdict card.
   Full signed rationale stays in initial HTML behind one disclosure. */
[data-renderer="mobile-article-spine"] .report-verdict {
  margin-top: var(--ds-space-3);
}

[data-renderer="mobile-article-spine"] .report-verdict-card {
  /* A physical left border terminates sharply where the grouped card starts
     its bottom radius. Keep the verdict accent as a clipped surface layer
     instead, so it follows both rounded corners at every card height. */
  background:
    linear-gradient(var(--ds-accent), var(--ds-accent)) left / 3px 100% no-repeat,
    var(--ds-surface-card);
}

[data-renderer="mobile-article-spine"] .report-verdict-card__header {
  display: grid;
  gap: var(--ds-space-1);
  padding: var(--ds-space-3) var(--ds-space-4);
}

[data-renderer="mobile-article-spine"] .report-verdict-card__eyebrow {
  margin: 0;
  color: var(--ds-accent);
}

[data-renderer="mobile-article-spine"] .report-verdict-card__title {
  margin: 0;
}

[data-renderer="mobile-article-spine"] .report-verdict-status {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: var(--ds-space-1);
  margin: var(--ds-space-1) 0 0;
  padding: var(--ds-space-1) var(--ds-space-2);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-label-1);
  background: var(--ds-state-pass-bg);
  font: var(--ds-type-subhead);
  font-weight: 600;
}

[data-renderer="mobile-article-spine"] .report-verdict-card__meaning {
  margin: var(--ds-space-2) 0 0;
  color: var(--ds-label-2);
}

[data-renderer="mobile-article-spine"] .report-verdict-rows {
  border-top: 0.5px solid var(--ds-separator);
}

[data-renderer="mobile-article-spine"] .report-verdict-row {
  display: grid;
  grid-template-columns: var(--ds-icon-lg) minmax(0, 1fr);
  align-items: start;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-4);
  border-bottom: 0.5px solid var(--ds-separator);
}

[data-renderer="mobile-article-spine"] .report-verdict-row__icon {
  display: inline-flex;
  width: var(--ds-icon-lg);
  height: var(--ds-icon-lg);
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-row);
  color: var(--ds-label-1);
  background: var(--ds-state-warn-bg);
}

[data-renderer="mobile-article-spine"] .report-verdict-row--ok .report-verdict-row__icon {
  background: var(--ds-state-pass-bg);
}

[data-renderer="mobile-article-spine"] .report-verdict-row__condition {
  margin: 0;
  color: var(--ds-label-2);
  font: var(--ds-type-subhead);
}

[data-renderer="mobile-article-spine"] .report-verdict-row__action {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-1);
  margin: 2px 0 0;
  color: var(--ds-label-1);
  font: var(--ds-type-headline);
}

[data-renderer="mobile-article-spine"] .report-verdict-row__arrow {
  flex: none;
  color: var(--ds-label-2);
}

[data-renderer="mobile-article-spine"] .report-verdict-disclosure {
  border: 0;
}

[data-renderer="mobile-article-spine"] .report-verdict-disclosure > summary {
  display: flex;
  min-height: var(--ds-hit);
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  padding: 0 var(--ds-space-4);
  color: var(--ds-accent);
  cursor: pointer;
  font: var(--ds-type-subhead);
  font-weight: 600;
}

[data-renderer="mobile-article-spine"] .report-verdict-disclosure__chevron {
  flex: none;
  transition: transform 160ms ease;
}

[data-renderer="mobile-article-spine"] .report-verdict-disclosure[open]
  .report-verdict-disclosure__chevron {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  [data-renderer="mobile-article-spine"] .report-verdict-disclosure__chevron {
    transition: none;
  }
}

[data-renderer="mobile-article-spine"] .report-verdict-disclosure__body {
  padding: 0 var(--ds-space-4) var(--ds-space-3);
}

[data-renderer="mobile-article-spine"] .report-verdict-rationale {
  padding: var(--ds-space-3) 0;
  padding-inline-end: var(--ds-space-2);
  border-top: 0.5px solid var(--ds-separator);
}

[data-renderer="mobile-article-spine"] .report-verdict-rationale :is(h3, p) {
  margin: 0;
}

[data-renderer="mobile-article-spine"] .report-verdict-rationale p {
  margin-top: var(--ds-space-1);
}

/* Screen two: five answer destinations in one vertical, thumb-safe list. */
[data-renderer="mobile-article-spine"] > nav .ds-cell > a {
  width: 100%;
  min-height: var(--ds-hit);
  border-radius: var(--ds-radius-row);
}

[data-renderer="mobile-article-spine"] > nav .ds-subhead {
  display: block;
}

[data-renderer="mobile-article-spine"] > nav .ds-badge,
[data-renderer="mobile-article-spine"] > nav .ds-icon {
  flex: none;
}

@media (min-width: 1024px) {
  [data-renderer="mobile-article-spine"] > nav .report-scroll-navigation__link {
    display: grid !important;
    grid-template-columns:
      var(--ds-icon-lg) var(--ds-icon-sm) minmax(0, 1fr)
      var(--ds-icon-sm);
    align-items: center !important;
    gap: 0 var(--ds-space-2) !important;
  }

  [data-renderer="mobile-article-spine"] > nav .report-scroll-navigation__number {
    grid-column: 1;
    grid-row: 1;
    align-self: center !important;
    width: var(--ds-icon-lg);
    height: var(--ds-icon-lg);
    margin-top: 0 !important;
  }

  [data-renderer="mobile-article-spine"] > nav .report-scroll-navigation__copy,
  [data-renderer="mobile-article-spine"] > nav .report-scroll-navigation__title {
    display: contents !important;
  }

  [data-renderer="mobile-article-spine"] > nav .report-scroll-navigation__icon {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  [data-renderer="mobile-article-spine"] > nav .report-scroll-navigation__title-copy {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    text-wrap: pretty;
  }

  [data-renderer="mobile-article-spine"] > nav .report-scroll-navigation__copy > .ds-subhead {
    grid-column: 3 / 5;
    grid-row: 2;
  }

  [data-renderer="mobile-article-spine"] > nav .report-scroll-navigation__chevron {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
  }
}

/* Screen three: the signed tree remains content-sized, never a 100vh hero. */
[data-renderer="mobile-article-spine"] .wizard {
  margin: 0;
}

[data-renderer="mobile-article-spine"] .wizard :is(button, select, input, textarea) {
  max-width: 100%;
  min-height: var(--ds-hit);
}

[data-renderer="mobile-article-spine"] .wizard .ds-row {
  align-items: flex-start;
  min-height: 50px;
  white-space: normal;
}

[data-renderer="mobile-article-spine"] .wizard :is(fieldset, legend) {
  max-width: 100%;
}

/* In regular width, one compact question header and consistently spaced
   radio rows are enough to identify the quiz. Avoid stacking extra labels. */
@media (min-width: 768px) {
  [data-renderer="mobile-article-spine"] .wizard--quiz {
    border-inline-start: 3px solid var(--ds-accent);
  }

  [data-renderer="mobile-article-spine"] .wizard--quiz .wizard-question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--ds-space-4);
    width: 100%;
    margin-bottom: var(--ds-space-3);
  }

  [data-renderer="mobile-article-spine"] .wizard--quiz .wizard-step-prompt {
    grid-column: 1;
    grid-row: 1;
  }

  [data-renderer="mobile-article-spine"] .wizard--quiz .wizard-step-count {
    grid-column: 2;
    grid-row: 1;
    display: block !important;
    margin: 0 !important;
    color: var(--ds-label-2) !important;
    font: var(--ds-type-footnote);
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
  }

  [data-renderer="mobile-article-spine"] .wizard--quiz .ds-row {
    align-items: center;
  }

  [data-renderer="mobile-article-spine"] .wizard--quiz .ds-row::before {
    content: "";
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ds-label-3);
    border-radius: 50%;
  }

  [data-renderer="mobile-article-spine"] .wizard--quiz .ds-row[aria-pressed="true"]::before {
    border-color: var(--ds-accent);
    background: radial-gradient(
      circle,
      var(--ds-accent) 0 4px,
      transparent 4.5px
    );
  }

  [data-renderer="mobile-article-spine"] > section[data-article-section]
    > .report-section-heading {
    margin-top: var(--ds-space-5) !important;
  }
}

/* Cause-card titles stay in one flex row with a fixed number column. Long
   signals wrap in the title column instead of moving the badge to a new line. */
[data-renderer="mobile-article-spine"] .cause-cards > .ds-cell > .ds-cell__head {
  display: grid;
  grid-template-columns: var(--ds-icon-lg) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--ds-space-2);
}

[data-renderer="mobile-article-spine"]
  .cause-cards
  > .ds-cell
  > .ds-cell__head
  > .ds-badge {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

[data-renderer="mobile-article-spine"]
  .cause-cards
  > .ds-cell
  > .ds-cell__head
  > h3 {
  min-width: 0;
}

/* Article body and source ledger: single column at every supported width. */
[data-renderer="mobile-article-spine"] [data-article-section] {
  width: 100%;
}

[data-renderer="mobile-article-spine"] details > summary {
  min-height: var(--ds-hit);
  overflow-wrap: anywhere;
}

/* A disclosure indicator owns a real trailing column. Long model/warranty
   labels may wrap inside the first column, but can never flow underneath the
   chevron at 320 px or with enlarged text. */
[data-renderer="mobile-article-spine"] .ds-section > summary:has(> .ds-section__chevron) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--ds-space-3);
  align-items: start;
}

[data-renderer="mobile-article-spine"]
  .ds-section > summary:has(> .ds-section__chevron) > .ds-section__chevron {
  align-self: start;
  margin-block-start: var(--ds-space-1);
}

[data-renderer="mobile-article-spine"] .ds-section > summary:has(> .ds-section__chevron)
  > :not(.ds-section__chevron) {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-renderer="mobile-article-spine"] details[open] > .ds-section__body {
  padding-block-start: var(--ds-space-2);
}

[data-renderer="mobile-article-spine"] .disclosure-list__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-2);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-renderer="mobile-article-spine"] .disclosure-list__item {
  display: flex;
  width: 100%;
  min-height: var(--ds-hit);
  min-width: 0;
  padding: var(--ds-space-2) var(--ds-space-3);
  align-items: flex-start;
  justify-self: stretch;
  overflow-wrap: anywhere;
  color: var(--ds-label-1);
  background: var(--ds-surface-inset);
  border: 0.5px solid var(--ds-separator);
  border-radius: var(--ds-radius-row);
}

/* Related accountability links are compact list rows, not one run of prose.
   The full-width hairlines keep adjacent labels visually distinct at 390px,
   while every row retains the 44px target required by the article contract. */
[data-renderer="mobile-article-spine"] .article-prose-links {
  display: grid;
  gap: 0;
  margin: var(--ds-space-3) 0 0;
  border-bottom: 0.5px solid var(--ds-separator);
}

[data-renderer="mobile-article-spine"] .article-prose-links > a {
  display: flex;
  width: 100%;
  min-height: var(--ds-hit);
  align-items: center;
  border-top: 0.5px solid var(--ds-separator);
}

/* Owner cases are longer than ordinary list rows. Give every case a full card
   inset so the final action line cannot visually merge with the hairline. */
[data-renderer="mobile-article-spine"] .scenario-cards[data-evidence-kind="owner-case"] > .ds-cell {
  padding-block: var(--ds-space-4);
}

[data-renderer="mobile-article-spine"] [data-block="article-owner-synthesis"] .scenario-cards[data-evidence-kind="owner-case"] > .ds-cell:last-child {
  padding-block-end: var(--ds-space-5);
}

/* The source ledger is one long clipped cell inside a rounded list. Keep its
   accountability line clear of the bottom radius at compact widths. */
[data-renderer="mobile-article-spine"] footer[data-block="article-sources"] > .ds-list > .ds-cell {
  padding-block-end: var(--ds-space-5);
}

[data-renderer="mobile-article-spine"] .article-source-list {
  list-style: none;
}

[data-renderer="mobile-article-spine"] .article-source-item {
  display: grid;
  grid-template-columns: 2.5ch minmax(0, 1fr);
  column-gap: var(--ds-space-2);
  align-items: start;
}

[data-renderer="mobile-article-spine"] .article-source-number {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

[data-renderer="mobile-article-spine"] .article-source-copy {
  min-width: 0;
}

/* Toyota factory paths: the group heading is a label, not a paragraph. Keep
   the conclusion and status in their own text roles, then stack bulletin
   metadata so 320px and enlarged text never force a badge beside a long scope. */
[data-renderer="mobile-article-spine"] .factory-paths__summary {
  max-width: 42rem;
}

[data-renderer="mobile-article-spine"] .factory-paths__action {
  padding-inline-start: var(--ds-space-3);
  border-inline-start: 2px solid var(--ds-accent);
}

[data-renderer="mobile-article-spine"] .factory-paths__caveat {
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-row);
  background: var(--ds-state-info-bg);
  color: var(--ds-label-1);
}

[data-renderer="mobile-article-spine"] .factory-path > .factory-path__summary {
  align-items: flex-start;
  gap: var(--ds-space-3);
  font: var(--ds-type-body);
}

[data-renderer="mobile-article-spine"] .factory-path__summary-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  align-items: start;
  gap: var(--ds-space-1);
}

/* Keep the long Highlander/Sienna scope in column one.  The generic
   disclosure rule already reserves a trailing column, but this explicit
   factory-path contract prevents a later flex/grid override from letting the
   scope text reach the chevron. */
[data-renderer="mobile-article-spine"] .factory-path > summary.factory-path__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--ds-space-3);
}

[data-renderer="mobile-article-spine"]
  .factory-path > summary.factory-path__summary > .factory-path__summary-copy {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-renderer="mobile-article-spine"]
  .factory-path > summary.factory-path__summary > .ds-section__chevron {
  grid-column: 2;
  align-self: start;
}

[data-renderer="mobile-article-spine"] .factory-path__number {
  color: var(--ds-accent);
  font: var(--ds-type-footnote);
  font-weight: 600;
}

[data-renderer="mobile-article-spine"] .factory-path__scope {
  color: var(--ds-label-1);
  font: var(--ds-type-headline);
}

[data-renderer="mobile-article-spine"] .factory-path__status {
  color: var(--ds-label-2);
  font: var(--ds-type-footnote);
}

[data-renderer="mobile-article-spine"] .factory-path .ds-section__chevron {
  margin-top: var(--ds-space-1);
}

[data-renderer="mobile-article-spine"] footer li a {
  overflow-wrap: anywhere;
}

[data-renderer="mobile-article-spine"] footer a[aria-label^="Back to"] {
  min-height: var(--ds-hit);
}

[data-renderer="mobile-article-spine"] footer .ds-cell > p {
  padding-top: var(--ds-space-3);
  border-top: 0.5px solid var(--ds-separator);
}

/* The P0420 schematic has its own mechanically verified light palette. Keep it
   on a light isolated card in both themes instead of recolouring the SVG. The
   separate owner-approval gate remains authoritative for promotion. */
[data-renderer="mobile-article-spine"] figure[data-schematic] {
  max-width: 360px;
  padding: var(--ds-space-3);
  overflow: hidden;
  color: var(--ds-ext-frame-base-lo);
  color-scheme: light;
  background: var(--ds-glass-fallback);
  border: 0.5px solid var(--ds-separator);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}

[data-renderer="mobile-article-spine"] figure[data-schematic] > div {
  width: 100%;
  line-height: 0;
}

[data-renderer="mobile-article-spine"] figure[data-schematic] picture {
  display: block;
}

[data-renderer="mobile-article-spine"] figure[data-schematic] svg,
[data-renderer="mobile-article-spine"] figure[data-schematic] img[data-schematic-image] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

[data-renderer="mobile-article-spine"] figure[data-schematic] figcaption {
  color: var(--ds-ext-frame-base-lo);
  line-height: 1.35;
}

@media (max-width: 359px) {
  [data-renderer="mobile-article-spine"] {
    padding-inline: var(--ds-space-3);
  }

  /* Keep the signed three-row verdict readable on a 320 px phone without
     changing its decision text or shrinking its type.  The card rows are
     informational (not hit targets); using the standard medium icon and one
     spacing token gives long, safety-relevant conditions enough line width to
     keep Scroll Navigation at the second-screen boundary. */
  [data-renderer="mobile-article-spine"] .report-verdict-card__header {
    padding-block: var(--ds-space-2);
    padding-inline: var(--ds-space-3);
  }

  [data-renderer="mobile-article-spine"] .report-verdict {
    margin-top: var(--ds-space-2);
  }

  [data-renderer="mobile-article-spine"] .report-verdict-row {
    grid-template-columns: var(--ds-icon-md) minmax(0, 1fr);
    gap: var(--ds-space-1);
    padding-inline: var(--ds-space-3);
  }

  [data-renderer="mobile-article-spine"] .report-verdict-row__icon {
    width: var(--ds-icon-md);
    height: var(--ds-icon-md);
  }

  [data-renderer="mobile-article-spine"] .disclosure-list__items {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* obd.ds.css currently emits a light token set only. Override that set solely
   on routes containing the new renderer so dark visual-gate shots exercise a
   real dark surface without changing legacy pages or the generated DS file. */
@media (prefers-color-scheme: dark) {
  html:has([data-renderer="mobile-article-spine"]) {
    color-scheme: dark;
    background: var(--ds-ext-frame-base-lo);
  }

  body:has([data-renderer="mobile-article-spine"]) {
    --ds-surface-page: var(--ds-ext-frame-base-lo);
    --ds-surface-card: var(--ds-ext-frame-base-hi);
    --ds-surface-chrome: var(--ds-ext-frame-base-hi);
    --ds-label-1: var(--ds-glass-fallback);
    --ds-label-2: color-mix(
      in srgb,
      var(--ds-glass-fallback) 72%,
      var(--ds-ext-frame-base-lo)
    );
    --ds-label-3: color-mix(
      in srgb,
      var(--ds-glass-fallback) 52%,
      var(--ds-ext-frame-base-lo)
    );
    --ds-accent: color-mix(
      in srgb,
      var(--ds-ext-frame-glow-teal) 40%,
      var(--ds-glass-fallback)
    );
    --ds-accent-contrast: var(--ds-ext-frame-base-lo);
    --ds-separator: color-mix(
      in srgb,
      var(--ds-glass-fallback) 20%,
      transparent
    );
    --bg: var(--ds-surface-page);
    --surface: var(--ds-surface-card);
    --surface-strong: var(--ds-surface-card);
    --ink: var(--ds-label-1);
    --muted: var(--ds-label-2);
    --line: var(--ds-separator);
    --teal: var(--ds-accent);
    color-scheme: dark;
    color: var(--ds-label-1);
    background: var(--ds-surface-page);
  }

  body:has([data-renderer="mobile-article-spine"]) .siteFooter {
    color: var(--ds-label-2);
  }

  body:has([data-renderer="mobile-article-spine"]) .siteFooter a {
    color: var(--ds-accent);
  }

  [data-renderer="mobile-article-spine"] figure[data-schematic] {
    border-color: color-mix(
      in srgb,
      var(--ds-ext-frame-base-lo) 24%,
      transparent
    );
  }

  [data-renderer="mobile-article-spine"] .ds-term-tip.ds-glass {
    background: color-mix(in srgb, var(--ds-surface-card) 94%, transparent);
    border-color: var(--ds-separator);
  }

  /* The wrapper, label and adjacent question-mark control share one state.
     Keeping the colour variables here prevents dark mode from styling only the
     tiny button while the actual glossary term disappears into body copy. */
  [data-renderer="mobile-article-spine"] .ds-term-help-wrap {
    --ds-term-ink: var(--ds-accent);
    --ds-term-line: color-mix(in srgb, var(--ds-accent) 82%, transparent);
  }

  [data-renderer="mobile-article-spine"] .ds-term-help-wrap[data-term-state="viewed"] {
    --ds-term-ink: color-mix(in srgb, var(--ds-label-1) 78%, var(--ds-label-2));
    --ds-term-line: color-mix(in srgb, var(--ds-label-2) 72%, transparent);
  }

  [data-renderer="mobile-article-spine"] .ds-term-help-wrap[data-term-state="open"] {
    --ds-term-ink: var(--ds-accent);
    --ds-term-line: var(--ds-accent);
  }
}

@media (prefers-color-scheme: dark) and (prefers-reduced-transparency: reduce) {
  [data-renderer="mobile-article-spine"] .ds-term-tip.ds-glass {
    background: var(--ds-surface-card) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-renderer="mobile-article-spine"] {
    scroll-behavior: auto;
  }
}