/* Phone-first story cards for the edition page and the story page.
   Loaded after readability.css, so type floors (18 px prose, 14 px supporting text, 44 px targets) still win. */

/* Who the reporting stands on, at a glance. */
.source-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .375rem .5rem; margin: .75rem 0 1rem; padding: 0; }
.source-chips li { max-width: 100%; padding: .25rem .625rem; border: 1px solid #c9c4b2; border-radius: 999px; background: #fbf9f2; color: #2f3b32; font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; }
.source-chips .source-count { background: #244a38; border-color: #244a38; color: #f5f1e7; font-weight: 600; }
.source-chips .source-kind { background: #f3e3d4; border-color: #d9b99a; color: #6b3a1a; font-weight: 600; }
.source-chips .source-more { color: #5b594f; }

/* The records table is the text alternative to the record cards: kept, but behind a native drawer. */
.edition-table-alt { margin-top: .75rem; border-top: 1px solid #d8d3c4; }
.edition-table-alt > summary { display: flex; align-items: center; min-height: 44px; padding: .25rem 0; cursor: pointer; font-size: 1rem; }
.edition-table-alt > summary::after { content: '+'; margin-left: auto; }
.edition-table-alt[open] > summary::after { content: '\2212'; }
.edition-table-alt table { margin-top: 0; }

/* A banner crop of the archive photograph; its label, caption, credit and change note stay visible. */
.article-photo-compact { margin: 1rem 0; }
.article-photo-compact img { width: 100%; height: auto; aspect-ratio: 16 / 7; max-height: 15rem; object-fit: cover; object-position: center 40%; }

/* The one thing the filing does not say, kept where a reader sees it before the long text. */
.story-open { margin: 1rem 0; padding: .75rem 1rem; border-left: 4px solid #a8552f; background: #f8efe4; font-size: 1rem; line-height: 1.6; }
.story-open a { white-space: nowrap; }

.edition-jump { display: none; }
.records-hint { display: none; }

/* Wide screens: the lead story keeps its text on the left and its figure on the right, now with three text rows. */
.edition-lead { grid-template-rows: min-content min-content 1fr; }
.edition-lead .edition-graphic { grid-row: 1 / 4; }
.edition-lead .edition-story-rest { grid-column: 1; grid-row: 3; }
.edition-story-rest > .edition-help { align-self: flex-start; }

@media (max-width: 700px) {
  /* A sticky row of story numbers: the whole edition is one swipe away from any card. */
  .edition-jump { display: flex; align-items: center; gap: .375rem; position: sticky; top: 0; z-index: 5; margin: 0 0 .5rem; padding: .375rem 0; overflow-x: auto; background: #f5f1e7; border-bottom: 1px solid #d8d3c4; }
  .edition-jump-label { flex: 0 0 auto; padding-right: .25rem; color: #5b594f; font-size: .875rem; }
  .edition-jump a { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid #c9c4b2; border-radius: 8px; background: #fbf9f2; color: #244a38; font-size: 1rem; font-weight: 600; text-decoration: none; }
  .edition-jump { scrollbar-width: none; }
  .edition-jump::-webkit-scrollbar { display: none; }
  .edition-jump a:focus-visible { outline: 3px solid #a8552f; outline-offset: 2px; }
  .published-edition .edition-story { scroll-margin-top: 4.5rem; padding: 1.25rem 0 1rem; }

  /* The records in a story are cards you swipe across, not a tall stack. */
  .published-edition .edition-visual { padding: 0; background: none; border: 0; margin: .75rem 0; }
  .reporting-records { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; scrollbar-color: #bdb7a4 transparent; }
  .reporting-records > div { flex: 0 0 min(82%, 17rem); scroll-snap-align: start; padding: .75rem .875rem; border: 1px solid #d8d3c4; border-top: 3px solid #426652; border-radius: 6px; background: #fbf9f2; }
  .records-hint { display: block; margin: 0 0 .375rem; color: #5b594f; font-size: .875rem; }
  .published-edition .edition-visual > p { font-size: 1rem; line-height: 1.55; }
  .reporting-records:focus-visible { outline: 3px solid #a8552f; outline-offset: 2px; }
  .reporting-records strong { font-size: 1.125rem; line-height: 1.3; }
  .reporting-records p { margin: .375rem 0 0; font-size: 1rem; line-height: 1.55; }
  .published-edition .edition-evidence { margin-top: 1rem; }
  /* A preview card is already inside the carousel's own swiper, so its records stack. */
  .story-preview .reporting-records { display: grid; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .story-preview .reporting-records > div { flex: none; padding: 18px 0; border: 0; border-top: 3px solid #426652; border-radius: 0; background: none; }
}
@media (max-width: 700px) {
  /* The story page's record cards use the same swipe strip; their claim links keep the region keyboard-reachable. */
  .reader-article .process-map { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; scrollbar-color: #bdb7a4 transparent; }
  .reader-article .process-role { flex: 0 0 min(82%, 17rem); scroll-snap-align: start; padding: .75rem .875rem; border: 1px solid #d8d3c4; border-top: 3px solid #426652; border-radius: 6px; background: #fbf9f2; }
  .reader-article .process-role h3 { margin: 0; font-size: 1.125rem; line-height: 1.3; }
  .reader-article .process-role p { margin: .375rem 0 0; font-size: 1.125rem; line-height: 1.7; }
  .reader-article .process-boundary { font-size: 1rem; line-height: 1.55; }
}
@media (prefers-reduced-motion: no-preference) { .reporting-records { scroll-behavior: smooth; } }