/* CoreScribe compare table, phone layout (<= 820px).
   Each question becomes a stacked block: the question as a small heading, then one line per
   product ("Wispr Flow — In the cloud, always ¹"), CoreScribe first with a thin lavender rule.
   Needs js/compare-phone.js, which fills td[data-label] and sets data-stacked on .matrix-wrap;
   without it nothing here applies and the scrolling table is unchanged.
   Load after css/site.css. Selectors are id-scoped so they win regardless of order.
   Nothing here affects viewports wider than 820px. No blue, no glow, no blur, no cards. */
@media (max-width: 820px) {

  /* The wrapper stops being a scrolling card; the stack runs on the page ground. */
  #compare [data-stacked] {
    margin-top: 24px; padding: 0; overflow: visible;
    background: none; box-shadow: none; border-radius: 0;
  }

  #compare [data-stacked] .matrix { display: block; width: 100%; min-width: 0; font-size: 15px; }
  #compare [data-stacked] .matrix caption {
    display: block; padding: 0 0 14px; font-size: 17px; line-height: 1.35; color: var(--text);
  }

  /* Column headers are replaced by the per-answer product names; keep them for assistive tech. */
  #compare [data-stacked] .matrix thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  #compare [data-stacked] .matrix tbody { display: block; }
  #compare [data-stacked] .matrix tbody tr {
    display: block; padding: 16px 0 14px; border-top: 1px solid var(--hairline);
  }

  /* The question, as a small heading. */
  #compare [data-stacked] .matrix tbody th {
    display: block; width: auto; padding: 0 0 8px; border: 0;
    font-size: 15px; line-height: 1.3; font-weight: 650; color: var(--text);
  }

  /* One line per product. All share a 2px gutter so text aligns; only CoreScribe colors it. */
  #compare [data-stacked] .matrix td {
    display: block; padding: 3px 0 3px 12px; border: 0; border-left: 2px solid transparent;
    background: none; font-size: 15px; line-height: 1.45; color: var(--secondary);
    overflow-wrap: break-word;
  }
  #compare [data-stacked] .matrix td[data-label]::before {
    content: attr(data-label) " \2014\0020"; font-weight: 600; color: var(--text); /* label + space + em dash + space */
  }

  /* CoreScribe: first, full-strength text, thin lavender rule. */
  #compare [data-stacked] .matrix td.us {
    margin-bottom: 6px; padding-top: 4px; padding-bottom: 4px;
    border-left-color: var(--lavender); background: none; color: var(--text); font-size: 16px;
  }
  #compare [data-stacked] .matrix td.us::before { color: var(--lavender); font-weight: 650; }

  /* Talon and Dragon: still present, quieter. Secondary color keeps 4.5:1 or better. */
  #compare [data-stacked] .matrix td[data-label="Talon"],
  #compare [data-stacked] .matrix td[data-label="Dragon"] { font-size: 14px; }
  #compare [data-stacked] .matrix td[data-label="Talon"]::before,
  #compare [data-stacked] .matrix td[data-label="Dragon"]::before { color: var(--secondary); font-weight: 500; }

  /* Footnote markers: raised, but 14px and with a real tap area. */
  #compare [data-stacked] .matrix sup {
    font-size: 14px; line-height: 0; vertical-align: baseline; position: relative; top: -.45em; margin-left: 2px;
  }
  #compare [data-stacked] .matrix sup a {
    font-size: inherit; font-weight: 600; padding: 8px 3px; margin: -8px -3px; color: var(--lavender);
  }

  /* Note and sources: 14px, secondary color (the site's tertiary gray is under 4.5:1). */
  #compare [data-stacked] .fine {
    margin: 20px 0 4px; max-width: none; font-size: 14px; line-height: 1.5; color: var(--secondary);
  }
  #compare [data-stacked] .sources {
    margin: 14px 0 0; padding-left: 22px; columns: 1; font-size: 14px; line-height: 1.45; color: var(--secondary);
  }
  #compare [data-stacked] .sources li {
    margin-bottom: 8px; overflow-wrap: anywhere;
    scroll-margin-top: calc(var(--menubar-h, 118px) + 16px); /* footnote jumps land below the fixed island */
  }
  #compare [data-stacked] .sources a {
    color: var(--secondary); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .28);
    text-underline-offset: 2px;
  }
}