/* Reusable Editorial V2 capability composition.
   The generated design system remains the visual source of truth; this file
   only composes its tokens and primitives for navigation, tooltips, and the
   optional diagnostic wizard. Pair and make selectors are forbidden. */

.editorial-v2-triage {
  scroll-margin-top: var(--ds-space-4);
}

.report-verdict-card__make-note {
  margin: var(--ds-space-2) 0 0;
  color: var(--ds-label-2);
  font: var(--ds-type-footnote);
}

/* Cost ladder: one grouped list of routes follows the drive verdict. Each
   entire row is the primary action. At narrow widths the price moves below
   the title instead of competing with it; Shortcuts uses the same row grammar. */
.cost-ladder {
  display: grid;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-6);
  scroll-margin-top: var(--ds-space-4);
}

.cost-ladder__heading {
  display: flex;
  gap: var(--ds-space-4);
  align-items: end;
  justify-content: space-between;
}

.cost-ladder__heading :is(.ds-overline, .ds-title2, .ds-footnote),
.cost-ladder__row :is(.ds-headline, .ds-footnote),
.cost-ladder__closing {
  margin: 0;
}

.cost-ladder__scope {
  max-width: 16rem;
  color: var(--ds-label-2);
  text-align: right;
}

.cost-ladder__table {
  margin: 0;
  overflow: hidden;
}

.cost-ladder__group-label {
  margin: 0;
  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-2);
  color: var(--ds-accent);
}

/* Keep a later decision group visually attached to the list while making the
   change in buying criteria explicit. The final row in each nested list has
   no bottom border, so the group label owns this separator. */
.cost-ladder__rows + .cost-ladder__group-label {
  border-top: 0.5px solid var(--ds-separator);
}

.cost-ladder__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cost-ladder__row {
  display: grid !important;
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto var(--ds-icon-sm);
  grid-template-areas:
    "what price chevron"
    "note source chevron";
  gap: var(--ds-space-1) var(--ds-space-3);
  align-items: baseline;
  min-width: 0;
  min-height: var(--ds-hit);
  padding: var(--ds-space-3) var(--ds-space-4) !important;
}

.cost-ladder__row-action {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: inherit;
  background: transparent;
  text-decoration: none;
}

[data-renderer="mobile-article-spine"].ds-screen .cost-ladder__row-action,
[data-renderer="mobile-article-spine"].ds-screen .cost-ladder__row-action:hover {
  color: var(--ds-label-1);
  text-decoration: none;
}

.cost-ladder__row-action:hover {
  background: var(--ds-state-info-bg);
}

.cost-ladder__row-action:focus-visible {
  border-radius: 0;
  outline: var(--ds-focus-ring);
  outline-offset: calc(-1 * var(--ds-focus-offset));
}

/* Visual identity is selected by the pair projection, never inferred from
   the row label. Bound first-party artwork is local and content-addressed;
   semantic SVG icons are decorative and cannot change the accessible name. */
.cost-ladder__row:has(.cost-ladder__icon) {
  grid-template-columns: 44px minmax(0, 1fr) auto var(--ds-icon-sm);
  grid-template-areas:
    "icon what price chevron"
    "icon note source chevron";
}

.cost-ladder__icon {
  position: relative;
  z-index: 2;
  grid-area: icon;
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ds-accent);
  background: var(--ds-state-info-bg);
  border-radius: 12px;
  box-shadow: inset 0 0 0 0.5px var(--ds-separator);
  pointer-events: none;
}

.cost-ladder__icon > svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cost-ladder__icon--artwork {
  overflow: hidden;
  background: var(--ds-surface-card);
  border-radius: 10px;
}

.cost-ladder__icon--artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cost-ladder__shortcuts .cost-ladder__icon {
  color: var(--ds-label-2);
  background: color-mix(in srgb, var(--ds-separator) 28%, transparent);
}

.cost-ladder__row-chevron {
  position: relative;
  z-index: 2;
  grid-area: chevron;
  align-self: center;
  color: var(--ds-label-2);
  pointer-events: none;
}

.cost-ladder__row:hover .cost-ladder__row-chevron,
.cost-ladder__row:focus-within .cost-ladder__row-chevron {
  color: var(--ds-accent);
}

.cost-ladder__price {
  position: relative;
  z-index: 2;
  grid-area: price;
  color: var(--ds-label-1);
  font: var(--ds-type-headline);
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
}

.cost-ladder__what {
  position: relative;
  z-index: 2;
  grid-area: what;
  min-width: 0;
  pointer-events: none;
}

.cost-ladder__note {
  position: relative;
  z-index: 2;
  grid-area: note;
  min-width: 0;
  color: var(--ds-label-2);
  text-wrap: pretty;
  pointer-events: none;
}

.cost-ladder__source {
  position: relative;
  z-index: 3;
  grid-area: source;
  align-self: end;
  justify-self: end;
  display: inline-block;
  font: var(--ds-type-caption);
  white-space: nowrap;
  pointer-events: auto;
}

.cost-ladder__shortcuts {
  margin: 0;
  border-top: 0.5px solid var(--ds-separator);
}

.cost-ladder__shortcuts > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--ds-icon-sm);
  grid-template-areas:
    "what price chevron"
    "note note chevron";
  gap: var(--ds-space-1) var(--ds-space-3);
  align-items: baseline;
  min-height: var(--ds-hit);
  padding: var(--ds-space-3) var(--ds-space-4);
  list-style: none;
  cursor: pointer;
}

.cost-ladder__shortcuts > summary:hover {
  background: var(--ds-state-info-bg);
}

.cost-ladder__shortcuts > summary:focus-visible {
  outline: var(--ds-focus-ring);
  outline-offset: calc(-1 * var(--ds-focus-offset));
}

.cost-ladder__shortcuts > summary::-webkit-details-marker {
  display: none;
}

.cost-ladder__shortcuts > summary :is(.ds-headline, .ds-footnote) {
  margin: 0;
}

.cost-ladder__shortcut-summary > .cost-ladder__what,
.cost-ladder__shortcut-summary > .cost-ladder__price,
.cost-ladder__shortcut-summary > .cost-ladder__note {
  pointer-events: none;
}

.cost-ladder__shortcuts[open] > summary > .cost-ladder__row-chevron {
  transform: rotate(90deg);
}

.cost-ladder__shortcut-body {
  padding: 0;
  border-top: 0.5px solid var(--ds-separator);
}

.cost-ladder__shortcuts .cost-ladder__row:last-child {
  border-bottom: 0;
}

.cost-ladder__closing {
  color: var(--ds-label-2);
}

/* Shortcut guidance reads like a magazine explainer instead of one long legal
   paragraph: a deck, four numbered mechanism cards, a restrained rules note,
   and one clear closing principle. Content, citations, and tooltips stay
   unchanged and remain in document order. */
.shortcut-editorial {
  --shortcut-card-copy-top-inset: 5px;
}

.shortcut-editorial .editorial-v2-prose {
  display: grid;
  gap: var(--ds-space-4);
}

.shortcut-editorial__deck {
  max-width: 48rem;
  color: var(--ds-label-2);
  font: var(--ds-type-body);
  text-wrap: pretty;
}

.shortcut-editorial__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The base article stylesheet gives prose lists an inline start inset.  These
   are editorial cards, not indented prose bullets, so the capability-owned
   list must win that cascade at every viewport. */
.shortcut-editorial .shortcut-editorial__cards {
  padding-inline-start: 0;
}

.shortcut-editorial__cards > li {
  min-width: 0;
  margin: 0;
  padding: var(--ds-space-4);
  border: 0.5px solid var(--ds-separator);
  border-radius: var(--ds-radius-card);
  background: color-mix(in srgb, var(--ds-surface-card) 92%, var(--ds-accent) 8%);
  text-wrap: pretty;
}

.shortcut-editorial__cards > li.shortcut-editorial__card--first-party {
  position: relative;
  padding: var(--ds-space-4);
  border-color: color-mix(in srgb, var(--ds-accent) 40%, var(--ds-separator));
}

.shortcut-editorial__card-action {
  display: inline-flex;
  min-height: var(--ds-hit);
  align-items: center;
  color: var(--ds-accent);
  font-weight: 700;
  text-decoration: none;
}

.shortcut-editorial__card-action::before {
  position: absolute;
  inset: 0;
  content: "";
}

.shortcut-editorial__card-action:hover,
.shortcut-editorial__card-action:focus-visible {
  text-decoration: none;
}

.shortcut-editorial__card--first-party:has(.shortcut-editorial__card-action:hover) {
  background: color-mix(in srgb, var(--ds-accent) 8%, transparent);
}

.shortcut-editorial__card--first-party:has(.shortcut-editorial__card-action:focus-visible) {
  outline: var(--ds-focus-ring);
  outline-offset: calc(-1 * var(--ds-focus-offset));
}

.shortcut-editorial__card--first-party .ds-term-help {
  position: relative;
  z-index: 2;
}

[data-renderer="mobile-article-spine"] .shortcut-editorial__card--first-party button.ds-term-help {
  margin-inline-start: -0.08em;
}

.shortcut-editorial__card-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--ds-space-3);
  align-items: start;
}

.shortcut-editorial__card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ds-accent);
  background: var(--ds-state-info-bg);
  border-radius: 11px;
  box-shadow: inset 0 0 0 0.5px var(--ds-separator);
}

.shortcut-editorial__card-icon > svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shortcut-editorial__card-icon--artwork {
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.shortcut-editorial__card-icon--artwork img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}

.shortcut-editorial__card-heading {
  min-width: 0;
}

.shortcut-editorial__card-heading > strong {
  display: block;
  color: var(--ds-label-1);
  font: var(--ds-type-headline);
}

.shortcut-editorial__price-reference {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2) var(--ds-space-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ds-space-3);
  padding-top: var(--ds-space-2);
  border-top: 0.5px solid var(--ds-separator);
  color: var(--ds-label-2);
  font: var(--ds-type-caption);
}

.shortcut-editorial__price-text {
  font-weight: 600;
}

.shortcut-editorial__source-link {
  display: inline-flex;
  min-height: var(--ds-hit);
  align-items: center;
  color: var(--ds-accent);
  font-weight: 600;
  text-underline-offset: 0.14em;
}

.shortcut-editorial__source-link:focus-visible {
  outline: var(--ds-focus-ring);
  outline-offset: var(--ds-focus-offset);
}

.shortcut-editorial__app-store-label {
  margin-inline-start: auto;
}

.shortcut-editorial__app-store-label::after {
  margin-inline-start: var(--ds-space-1);
  content: "↗";
}

.shortcut-editorial__card-copy {
  margin: var(--ds-space-3) 0 0;
  padding-top: var(--shortcut-card-copy-top-inset);
  color: var(--ds-label-1);
}

.shortcut-editorial__guidance {
  display: grid;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-2);
}

.shortcut-editorial__legal-context,
.shortcut-editorial__closing {
  overflow: hidden;
  border: 0.5px solid var(--ds-separator);
  border-radius: var(--ds-radius-row);
  background: color-mix(in srgb, var(--ds-surface-card) 94%, var(--ds-separator) 6%);
}

.shortcut-editorial__legal-note {
  margin: 0;
  padding: var(--ds-space-3) var(--ds-space-4);
  color: var(--ds-label-2);
}

.shortcut-editorial__legal-note + .shortcut-editorial__legal-note {
  border-top: 0.5px solid var(--ds-separator);
}

.shortcut-editorial__closing {
  margin: 0;
  padding: var(--ds-space-3) var(--ds-space-4);
  border-inline-start: 3px solid var(--ds-accent);
  color: var(--ds-label-1);
  font: var(--ds-type-body);
  font-weight: 400;
}

.shortcut-editorial__closing::before {
  display: block;
  margin-bottom: var(--ds-space-1);
  color: var(--ds-accent);
  font: var(--ds-type-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  content: "A real repair preserves";
}

@media (max-width: 640px) {
  .cost-ladder__heading {
    display: grid;
    gap: var(--ds-space-1);
  }

  .cost-ladder__scope {
    max-width: none;
    text-align: left;
  }

}

@media (max-width: 520px) {
  .cost-ladder__row {
    grid-template-columns: minmax(0, 1fr) auto var(--ds-icon-sm);
    grid-template-areas:
      "what what chevron"
      "price price chevron"
      "note source source";
    column-gap: var(--ds-space-2);
  }

  .cost-ladder__row:has(.cost-ladder__icon) {
    grid-template-columns: 44px minmax(0, 1fr) var(--ds-icon-sm);
    grid-template-areas:
      "icon what chevron"
      "icon price chevron"
      "icon note source";
  }

  .cost-ladder__shortcuts > summary:has(.cost-ladder__icon) {
    grid-template-columns: 44px minmax(0, 1fr) var(--ds-icon-sm);
    grid-template-areas:
      "icon what chevron"
      "icon price chevron"
      "icon note note";
  }

  .cost-ladder__shortcuts > summary {
    grid-template-columns: minmax(0, 1fr) var(--ds-icon-sm);
    grid-template-areas:
      "what chevron"
      "price chevron"
      "note note";
    column-gap: var(--ds-space-2);
  }

  .cost-ladder__price {
    max-width: none;
    text-align: left;
    white-space: normal;
  }

  .cost-ladder__source {
    align-self: end;
    justify-self: end;
  }
}

/* The signed diagnostic tree reuses the first-screen verdict rows.  There is
   one choice set, not a second wizard that repeats the same three symptoms. */
.report-verdict-rows--interactive .report-verdict-row {
  position: relative;
  display: flex !important;
  padding: 0 !important;
}

.report-verdict-rows--interactive .report-verdict-row__trigger {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--ds-icon-lg) minmax(0, 1fr) var(--ds-icon-sm);
  gap: var(--ds-space-2);
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--ds-hit) + var(--ds-space-3));
  padding: var(--ds-space-2) var(--ds-space-4);
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.report-verdict-rows--interactive .report-verdict-row__trigger:hover,
.report-verdict-rows--interactive .report-verdict-row__trigger[aria-expanded="true"] {
  background: var(--ds-state-info-bg);
}

.report-verdict-rows--interactive .report-verdict-row__trigger:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: -2px;
}

.report-verdict-rows--interactive .report-verdict-row__copy {
  min-width: 0;
}

.report-verdict-rows--interactive .report-verdict-row__condition {
  display: flex;
}

.report-verdict-rows--interactive .report-verdict-row__chevron {
  align-self: center;
  color: var(--ds-label-3);
  transition: transform 160ms ease;
}

.report-verdict-rows--interactive [aria-expanded="true"] .report-verdict-row__chevron {
  transform: rotate(90deg);
}

.report-verdict-rows--interactive .report-verdict-row--info .report-verdict-row__icon {
  color: var(--ds-accent);
  background: var(--ds-state-info-bg);
}

.report-verdict-rows--interactive .ds-cite {
  align-self: center;
  margin-inline-end: var(--ds-space-3);
}

.report-verdict-wizard__results {
  display: grid;
  width: 100%;
}

.report-verdict-wizard__results [data-wizard-result][hidden] {
  display: none !important;
}

.report-verdict-wizard__results .wizard-result {
  gap: var(--ds-space-2);
  margin: 0;
  padding: var(--ds-space-4);
  border: 0;
  border-bottom: 0.5px solid var(--ds-separator);
  border-radius: 0;
}

.report-verdict-wizard__results :is(.wizard-result__eyebrow, .ds-notice__title, .ds-notice__body) {
  margin: 0;
}

.report-verdict-wizard__results .wizard-result__eyebrow {
  color: var(--ds-accent);
}

.report-verdict-wizard__results .wizard-result__reset {
  width: fit-content;
  margin-top: var(--ds-space-2);
}

.editorial-v2-triage__details,
.editorial-v2-triage__body {
  margin: 0;
}

.editorial-v2-triage__details {
  margin-top: var(--ds-space-4);
  border-radius: var(--ds-radius-card);
}

.editorial-v2-triage__details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ds-icon-sm);
  gap: var(--ds-space-3);
  align-items: center;
  min-width: 0;
}

.editorial-v2-triage__summary {
  display: grid;
  gap: var(--ds-space-1);
  min-width: 0;
}

.editorial-v2-triage__summary :is(.ds-overline, .ds-headline, .ds-subhead) {
  margin: 0;
}

.editorial-v2-triage .wizard--quiz {
  display: grid;
  gap: var(--ds-space-3);
  overflow: hidden;
  padding: var(--ds-space-4);
  border-radius: var(--ds-radius-card);
}

.editorial-v2-triage .wizard--quiz fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.editorial-v2-triage .wizard-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.editorial-v2-triage .wizard-step-count {
  box-sizing: border-box;
  display: block !important;
  width: 100%;
  margin: 0 0 var(--ds-space-3) !important;
  padding: 0;
  color: var(--ds-accent) !important;
  font: var(--ds-type-footnote) !important;
  letter-spacing: var(--ds-tracking-overline) !important;
  text-transform: uppercase !important;
}

.editorial-v2-triage .wizard--quiz fieldset > .ds-list {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.editorial-v2-triage .wizard-option {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--ds-icon-lg) minmax(0, 1fr) var(--ds-icon-sm);
  gap: var(--ds-space-3);
  align-items: center !important;
  width: 100%;
  min-height: calc(var(--ds-hit) + var(--ds-space-3));
  padding: var(--ds-space-3) var(--ds-space-4);
  color: var(--ds-label-1);
  text-align: left;
  background: transparent;
  border: 0;
}

.editorial-v2-triage .wizard-option::before {
  content: none !important;
}

.editorial-v2-triage .wizard-option__icon {
  display: inline-flex;
  width: var(--ds-icon-lg);
  height: var(--ds-icon-lg);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ds-accent);
  background: var(--ds-state-info-bg);
}

.editorial-v2-triage .wizard-option__icon svg {
  width: var(--ds-icon-sm);
  height: var(--ds-icon-sm);
}

.editorial-v2-triage .wizard-option--pass .wizard-option__icon {
  color: var(--ds-state-pass);
  background: var(--ds-state-pass-bg);
}

.editorial-v2-triage .wizard-option--warn .wizard-option__icon {
  color: var(--ds-state-warn);
  background: var(--ds-state-warn-bg);
}

.editorial-v2-triage .wizard-option--fail .wizard-option__icon {
  color: var(--ds-state-fail);
  background: var(--ds-state-fail-bg);
}

.editorial-v2-triage .wizard-option__copy {
  min-width: 0;
  font: var(--ds-type-callout);
  text-wrap: pretty;
}

.editorial-v2-triage .wizard-option__chevron {
  color: var(--ds-label-3);
}

.editorial-v2-triage [data-wizard-result][hidden],
.editorial-v2-triage #wizard-question[hidden] {
  display: none !important;
}

.editorial-v2-triage #wizard-results:empty {
  display: none;
}

.editorial-v2-triage #wizard-results {
  display: grid;
  gap: var(--ds-space-3);
}

.editorial-v2-triage .wizard-result {
  gap: var(--ds-space-2);
  margin: 0;
  padding: var(--ds-space-4);
  border-radius: var(--ds-radius-card);
}

.editorial-v2-triage .wizard-result__eyebrow,
.editorial-v2-triage .wizard-result .ds-notice__title,
.editorial-v2-triage .wizard-result .ds-notice__body {
  margin: 0;
}

.editorial-v2-triage .wizard-result__eyebrow {
  color: var(--ds-accent);
}

.editorial-v2-triage .wizard-result__reset {
  width: fit-content;
  margin-top: var(--ds-space-2);
}

.editorial-v2-navigation,
.editorial-v2-nav-list,
.editorial-v2-nav-list > .ds-cell,
.editorial-v2-nav__link,
.editorial-v2-nav__copy,
.editorial-v2-nav__title,
.editorial-v2-nav__title-copy {
  min-width: 0;
}

.editorial-v2-nav-list > .ds-cell {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.editorial-v2-nav__link {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: var(--ds-icon-lg) var(--ds-icon-sm) minmax(0, 1fr) var(--ds-icon-sm);
  gap: var(--ds-space-3);
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.editorial-v2-nav__number { grid-column: 1; }
.editorial-v2-nav__icon { grid-column: 2; }

.editorial-v2-nav__copy {
  grid-column: 3;
  display: grid;
  gap: var(--ds-space-1);
  min-width: 0;
  max-width: 100%;
}

.editorial-v2-nav__chevron { grid-column: 4; }

.editorial-v2-nav__title,
.editorial-v2-nav__title-copy,
.editorial-v2-nav__summary {
  display: block;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  white-space: normal;
}

[data-renderer="mobile-article-spine"].ds-screen .editorial-v2-nav__link {
  color: var(--ds-label-1);
}

[data-renderer="mobile-article-spine"] button.ds-term-help::after {
  width: var(--ds-hit);
  height: var(--ds-hit);
}

[data-renderer="mobile-article-spine"] .ds-term-no-orphan {
  display: inline-block;
  white-space: nowrap;
}

[data-renderer="mobile-article-spine"] .ds-term-copy {
  display: inline;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

[data-renderer="mobile-article-spine"] button.ds-term-help {
  margin-inline-start: -0.18em;
  vertical-align: baseline;
}

[data-renderer="mobile-article-spine"] .ds-term-mark {
  margin-inline-start: 0.12em;
}

/* Lists own their internal rhythm. The first paragraph after a list must not
   visually merge with the final row. This applies to every rich article. */
[data-renderer="mobile-article-spine"] .editorial-v2-prose :is(ul, ol) + p {
  margin-top: var(--ds-space-3);
}

/* Editorial images are declared by a pair builder and source-bound there;
   their visual treatment is shared so future articles do not fork CSS. */
[data-renderer="mobile-article-spine"] .editorial-v2-illustration {
  margin: var(--ds-space-4) 0;
}

[data-renderer="mobile-article-spine"] .editorial-v2-illustration--section {
  margin-inline: 0;
}

[data-renderer="mobile-article-spine"] .editorial-v2-illustration img {
  display: block;
  width: 100%;
  height: auto;
  border: 0.5px solid var(--ds-separator);
  border-radius: var(--ds-radius-row);
}

[data-renderer="mobile-article-spine"] .editorial-v2-illustration figcaption {
  margin: var(--ds-space-2) 0 0;
  text-align: center;
}

@media (max-width: 767px) {
  .editorial-v2-nav__link {
    grid-template-columns: var(--ds-icon-lg) minmax(0, 1fr) var(--ds-icon-sm);
  }

  .editorial-v2-nav__number { grid-column: 1; }
  .editorial-v2-nav__copy { grid-column: 2; }
  .editorial-v2-nav__chevron { grid-column: 3; }

  .editorial-v2-nav__icon,
  .editorial-v2-nav__summary {
    display: none;
  }
}

@media (max-width: 420px) {
  .editorial-v2-nav__link {
    gap: var(--ds-space-2);
  }

  .editorial-v2-triage__details > summary,
  .editorial-v2-triage__body,
  .editorial-v2-triage .wizard-option {
    padding-inline: var(--ds-space-3);
  }
}

@media (min-width: 768px) {
  [data-renderer="mobile-article-spine"] .editorial-v2-triage .wizard--quiz {
    border-inline-start: 0;
  }

  .editorial-v2-triage .wizard-option {
    min-height: calc(var(--ds-hit) + var(--ds-space-2));
  }
}

@media (max-width: 389px) {
  .editorial-v2-triage .wizard-option {
    grid-template-columns: var(--ds-icon-lg) minmax(0, 1fr);
  }

  .editorial-v2-triage .wizard-option__chevron {
    display: none;
  }
}

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

  .editorial-v2 > header {
    gap: var(--ds-space-1);
  }

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

  [data-renderer="mobile-article-spine"] .report-verdict-status {
    margin-top: 0;
    padding-block: 0;
  }

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

  [data-renderer="mobile-article-spine"] .report-verdict-row {
    padding-block: 0;
  }

  [data-renderer="mobile-article-spine"] .report-verdict-rows--interactive .report-verdict-row__trigger {
    gap: var(--ds-space-1);
    padding-block: var(--ds-space-1);
  }

  [data-renderer="mobile-article-spine"] .report-verdict-rows--interactive .report-verdict-row__condition {
    font: var(--ds-type-footnote);
  }

}