/* Article reading frame (resources/*). Owner: WP-F (resources and articles). Tokens only, no raw colours.
   Loaded after author.css and before each article's own page CSS, so page rules can still override.
   Parts: reading column and type, contents box and desktop rail, byline share button, sources disclosure,
   CTA spacing, Keep reading rows, reading progress bar, print. The body text itself is never styled here. */

/* 1. Reading column and type ---------------------------------------------------------------- */
.article { padding-bottom: clamp(48px, 7vw, 96px); }
.article-column { max-width: calc(660px + 2 * var(--gutter)); }
.article-body.prose-lg { line-height: 1.7; }
@media (max-width: 767px) {
  .article-body.prose-lg { line-height: 1.6; }
  /* A tighter byline on phones: the share button sits on the same row as the author */
  .article-header > * + * { margin-top: 16px; }
  .article-header .lead { font-size: 17px; line-height: 1.55; }
  .article-header .byline { margin-top: 20px; padding-block: 14px; }
  .article-header .byline-role { font-size: 13px; }
}
.article-grid { margin-top: clamp(24px, 4vw, 48px); }
.article-grid .article-body { margin-top: 0; }
.article-main { min-width: 0; }

@media (min-width: 1200px) {
  .article-column { max-width: calc(640px + 80px + 200px + 2 * var(--gutter)); }
  .article-header { max-width: 640px; }
  .article-grid { display: grid; grid-template-columns: minmax(0, 640px) 200px; column-gap: 80px; }
  .article-rail {
    position: sticky; top: calc(var(--header-h) + 40px); align-self: start;
    max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; scrollbar-width: none;
  }
  .article-rail::-webkit-scrollbar { display: none; }
  .article-toc { display: none !important; }
}
@media (max-width: 1199px) { .article-rail { display: none !important; } }

/* 2. "In this article" contents box (below 1200). Visual base: details.disclosure.disclosure-box in site.css */
details.article-toc { margin-top: 24px; }
details.article-toc > summary { min-height: 48px; }
details.article-toc > summary::after { margin-left: 0; }
.article-toc-count { margin-left: auto; color: var(--muted); font-size: 13.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.article-toc .toc { padding-top: 0; }
/* Bigger rows: this box only shows on phones and tablets */
.article-toc .toc a { padding-block: 10px; font-size: 15px; }
.article-toc .toc ol ol a { padding-left: 28px; }

/* 3. Byline share button ------------------------------------------------------------------- */
html:not(.js) [data-share-link] { display: none; }
/* Date and read time: the separator dot belongs to the read time and sits in the gap before it. When the
   read time wraps to its own line (narrow phones) the dot falls outside the box and is clipped, so no line
   ends or starts with a stray dot. */
.article-header .byline-meta { overflow: hidden; column-gap: 13px; }
.article-header .byline-meta .dot { display: none; }
.article-header .byline-meta [data-reading-time] { position: relative; }
.article-header .byline-meta [data-reading-time]::before {
  content: ""; position: absolute; left: -8px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%; background: var(--faint);
}
@media (max-width: 479px) {
  .byline { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
  .byline-share { min-width: 44px; min-height: 40px; padding: 0; justify-content: center; flex: none; }
  .byline-share .icon { margin: 0; }
  .byline-share-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* 4. Sources, collapsed into a disclosure (every entry stays in the page; opens for print) ---- */
.article .sources { margin-top: clamp(32px, 4vw, 48px); padding-top: 0; border-top: 0; }
details.sources-details { border-radius: var(--r); }
details.sources-details > summary { min-height: 52px; padding: 0 16px; border-radius: var(--r); }
details.sources-details > summary h2 { margin: 0; font-size: 16px; line-height: 1.3; letter-spacing: -.005em; }
.sources-count { font-variant-numeric: tabular-nums; }
.sources-details > .disclosure-body { padding: 0 16px 16px; }
.sources-details > .disclosure-body > :is(ol, ul) { margin-top: 4px; }
/* From 768 the CTA and author boxes below use 24px padding: line the Sources label up with them */
@media (min-width: 768px) {
  details.sources-details > summary { padding: 0 24px; }
  .sources-details > .disclosure-body { padding: 0 24px 20px; }
}

/* 5. CTA box: one spacing fix for every article (the shared ".cta-box > div > * + *" also hit the button row) */
.article .article-cta { margin-top: 24px; }
.article-cta > .actions > * + * { margin-top: 0; }
/* The CTA and the author box are stacked cards: the same inner padding (author.css) so their text lines up */
.article .article-cta { padding: 16px; }
@media (min-width: 768px) { .article .article-cta { padding: 24px; } }
/* Two buttons don't fit beside the copy in a 640-660px column: copy first, buttons in a row under it */
@media (min-width: 768px) { .article .article-cta.cta-box-row { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* 6. Keep reading: Next plus Related. Phones: one bordered list (.row-list). From 768: two compact cards */
.article .related { margin-top: clamp(32px, 5vw, 56px); }
.related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.article .related-title { margin: 0; font-size: 18px; }
.related-head .btn-link { font-size: 14.5px; padding-block: 12px; margin-block: -12px; } /* 44px hit area, same layout */
.related-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.related-item { position: relative; display: grid; align-content: start; gap: 2px; padding: 14px 16px; }
.related-kicker { color: var(--accent-text); font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.related-num { color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.related-item a { display: block; padding-block: 2px; color: var(--ink); font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; text-decoration: none; }
@media (max-width: 767px) {
  .related-list { gap: 0; }
  .related-item.card-link:focus-within { outline-offset: -2px; }
}
@media (min-width: 768px) {
  .related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-item { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
  /* Keeps "Related · 02 · What changed · 8 min" on one line in a 312px card, so both titles start level */
  .related-kicker { letter-spacing: .06em; }
}
@media (hover: hover) { .related-item:hover a { color: var(--accent-text); } }

/* 7. Reading progress: a 2px bar on the bottom edge of the sticky header (added by resources.js, decorative) */
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.read-progress > span { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--read, 0)); transform-origin: 0 50%; }

/* 8. Print: sources open (resources.js), no navigation chrome */
@media print {
  .article-toc, .article-rail, .read-progress, .byline-share { display: none !important; }
  details.sources-details > summary::after { display: none; }
  .article-column { max-width: none; }
}