/* ==========================================================================
   The Record — legibility guarantees
   ---------------------------------------------------------------------------
   Loaded last. This file does not restyle anything; it holds the floors that
   must hold no matter which template a block ends up inside: contrast on
   inverted surfaces, table overflow containment, long-URL wrapping, reduced
   motion and small-screen behaviour.
   ========================================================================== */

/* 1. Nothing may push the page sideways. Wide content scrolls in its own box. */
body { overflow-x: hidden; }
.qc-table-scroll, .scroller, .table-wrap { max-width: 100%; overflow-x: auto; }
.qc-table-scroll > table { margin-block: 0; }

/* 2. Long, unbreakable strings — URLs, reference codes, domain names. */
a, td, th, li, p, dd, .cite, .metaline, .aeo-network-links a { overflow-wrap: break-word; }
.cite, .studio-source-list a, .stage2-sources a, .identity-source { overflow-wrap: anywhere; }

/* 3. Inverted surfaces. Anything sitting on an ink ground inherits the ink
   ground's own colour, so that a global rule such as `strong { color: ink }`
   can never paint dark type onto a dark panel. Written with :where() so it
   carries no specificity and never fights the authored component styles. */
.site-footer, .verdict, .capsule__label, .studio-answer__label, .studio-topline {
  -webkit-font-smoothing: antialiased;
}
:where(.site-footer, .verdict, .capsule__label, .studio-answer__label,
       .studio-topline, .btn:not(.btn--ghost))
  :where(p, li, dt, dd, span, small, strong, b, em, i, time, code, h1, h2, h3, h4) {
  color: inherit;
}
.verdict :where(p, li) { color: var(--on-ink-meta); }
.verdict :where(p) strong { color: #fff; }

/* 4. Light record blocks must never inherit an inverted ink colour. */
:where(.entity-answer-card, .capsule, .authority-page-card, .studio-toc,
       .studio-asidecard, .stage2-hub-card, .identity-source, .comp-aside__card,
       .stage2-callout, .comp-callout, .panel)
  :where(h1, h2, h3, h4, p, li, dt, dd, em, small) { color: inherit; }
.capsule, .entity-answer-card, .authority-page-card, .studio-toc,
.studio-asidecard, .stage2-hub-card, .identity-source, .comp-aside__card { color: var(--ink-body); }
.capsule :where(h1, h2, h3), .entity-answer-card :where(h1, h2, h3) { color: var(--ink); }

/* 5. Tables stay readable at every width. */
table th, table td { line-height: 1.5; vertical-align: top; word-break: normal; hyphens: none; }
@media (max-width: 40rem) {
  table { font-size: var(--fs-xs); min-width: 30rem; }
  thead th, tbody th, tbody td { padding: 0.55rem 0.65rem; }
}

/* 6. Media and embeds. */
img, svg, video, iframe { max-width: 100%; }
iframe { border: 0; }

/* 7. Small screens: keep headings from towering and rails from stacking oddly. */
@media (max-width: 30rem) {
  :root { --h1: clamp(1.6rem, 1.2rem + 3.2vw, 2.1rem); }
  .cover__meta { font-size: var(--fs-3xs); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .aeo-social-rail { align-items: flex-start; }
}

/* 8. Sticky rails must never trap content taller than the viewport. */
@media (min-width: 64rem) {
  .rail, .studio-article__aside, .comp-aside {
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* 9. Motion. */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* 10. Forced-colours mode keeps the hairline system visible. */
@media (forced-colors: active) {
  .capsule, .panel, .studio-answer, .comp-aside__card, .studio-asidecard,
  .btn, .aeo-social-btn { border: 1px solid CanvasText; }
  .status::before, .studio-topline__dot { forced-color-adjust: none; background: Highlight; }
}