/* F3. Load last. Sources: receipts/audit-6-a11y.md (scrollable-region-focusable)
   and receipts/audit-2-mobile.md (M14-M17, enlarged text and zoom).
   site.css body: 17px / 16 = 1.0625rem; below 640px: 16.5px / 16 = 1.03125rem.
   Existing prose-specific font sizes already use rem. Keep the root user-sized. */
body,
.prose {
  font-size: 1.0625rem;
}

.prose,
.crumbs li,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.head-copy,
.visual-stage-title {
  min-width: 0;
}

.prose .table-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  margin: 1.6em 0;
  /* The local paper cover hides the fixed edge fade at the content's end.
     With no overflow it covers the fade entirely. No script or motion needed.
     The table's transparent base exposes the cue behind its unstriped rows. */
  background-color: var(--paper, #F7F9FB);
  background-image:
    linear-gradient(to left, var(--paper, #F7F9FB) 35%, transparent),
    linear-gradient(to left, rgba(29, 58, 87, .18), transparent);
  background-position: right center;
  background-size: 2rem 100%, 1rem 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}

.prose .table-scroll:focus {
  outline: 2px solid var(--red, #E0644C);
  outline-offset: 3px;
}

/* Restore native table display after site.css's mobile display:block rule.
   The wrapper owns scrolling, preserving table semantics and column layout. */
.prose .table-scroll > table {
  display: table;
  overflow: visible;
  width: 100%;
  margin: 0;
  background: transparent;
}

.cards,
.stage-index {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.cards > li,
.stage-index > li {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  body,
  .prose {
    font-size: 1.03125rem;
  }
}