/* News article (T8, scripts/lib/templates/news-article.mjs; ops/design/templates/news-article/
   contract.md). Phones stack head, summary, source trail and hand-off, then the article. From
   64rem the summary and the article share the main column and the trail, the red button and
   the sticky table of contents fill a rail on the right. Component styles (page head, panel,
   fact rows, FAQ, quest log, sigils, video) come from public/components/; this file lays them
   out. Only transform and opacity animate. No JavaScript beyond the shared TOC highlight. */

.na-wrap { padding-bottom: var(--s-7); }
.na .wfg-page-head { padding-bottom: var(--s-3); }
.na .wfg-page-meta { max-width: 72rem; }
.wfg-dispatch b { font-weight: 400; color: var(--ink-2); }
.wfg-dispatch a { display: inline-block; padding-block: .35rem; margin-block: -.35rem; color: var(--ink-2); text-decoration-color: var(--line-control); }
.wfg-dispatch a:hover { color: var(--accent-text); }

.na-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.na-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.na-article { min-width: 0; }

/* ---------- Summary ---------- */

/* Rows are dense: label and tier share the first line on phones, the answer sits under them. */
.na-summary .wfg-fact { padding: 6px 0; }
.na-summary .wfg-fact-value { font-size: .95rem; line-height: 1.45; }
.na-summary .wfg-fact-value > small { margin-top: 2px; }
.na-summary .wfg-fact-value a, .na-summary-foot a { display: inline-block; padding-block: .3rem; margin-block: -.3rem; color: var(--ink); text-decoration-color: var(--line-control); }
.na-summary .wfg-fact-value a:hover, .na-summary-foot a:hover { color: var(--accent-text); }
.na-summary .wfg-fact-value .table-list { margin: 0; padding-left: 1.1em; }
.na-row-more span, .na-row-guide { color: var(--ink-3); }
.na-row-note { color: var(--ink-3); }
.na-summary-intro { margin: 0 0 6px; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.na-summary-foot { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--hairline); font: 400 .76rem/1.5 var(--font-ui); color: var(--ink-3); }
.na-summary-foot a { color: var(--ink-2); }
.na-sep { margin-inline: 2px; }
/* A kept conflict ("Ambiguous: keep both") is not a tier, but it reads at a tag's weight. */
.na-summary .wfg-fact-untiered { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px dashed var(--line-control); border-radius: var(--r-ctl); font: 400 .74rem/1.35 var(--font-ui); letter-spacing: .03em; color: var(--ink-2); }
@media (max-width: 40rem) {
  .na-summary .wfg-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
  .na-summary .wfg-fact-label { order: 0; flex: 1 1 auto; }
  .na-summary .wfg-fact-tier { order: 1; margin-left: auto; }
  .na-summary .wfg-fact-value { order: 2; flex: 1 1 100%; }
}
@media (min-width: 40rem) {
  .na-summary .wfg-fact { grid-template-columns: 9.5rem minmax(0, 1fr) auto; }
}

/* ---------- Source trail and hand-off ---------- */

.na-trail { margin: 0; padding: 0; list-style: none; }
.na-trail-row { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--hairline); font-size: .86rem; line-height: 1.4; }
.na-trail > .na-trail-row:first-child { border-top: 0; }
.na-trail-when { min-width: 0; overflow-wrap: anywhere; font: 400 .76rem/1.5 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.na-trail-when time { color: var(--ink-2); }
.na-trail-what { min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.na-trail-pub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 400 .74rem/1.4 var(--font-ui); letter-spacing: .02em; color: var(--ink-3); }
.na-trail-main { font: 400 .66rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.na-trail-what a { display: inline-block; padding-block: .3rem; margin-block: -.1rem; color: var(--ink); text-decoration-color: var(--line-control); }
.na-trail-what a:hover { color: var(--accent-text); }
.na-trail-row.is-site .na-trail-what { font: 400 .8rem/1.5 var(--font-ui); color: var(--ink-3); }
.na-trail-site { margin-top: 2px; border-top: 1px solid var(--hairline); }
.na-trail-note { margin: 0 0 6px; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.na-trail-more { border-top: 1px solid var(--hairline); }
.na-trail-more > summary { display: flex; align-items: center; min-height: 2.5rem; cursor: pointer; font: 400 .8rem/1.3 var(--font-ui); color: var(--ink-2); }
.na-trail-more > summary:hover { color: var(--accent-text); }
.na-trail-more[open] > summary { border-bottom: 1px solid var(--hairline); }

.na-handoff { display: grid; gap: 6px; }
.na-handoff .wfg-btn--enter { width: 100%; }
.na-also { margin: 0; font: 400 .82rem/1.5 var(--font-ui); color: var(--ink-3); }
.na-also a { display: inline-block; padding-block: .35rem; margin-block: -.35rem; color: var(--ink-2); text-decoration-color: var(--line-control); }
.na-also a:hover { color: var(--accent-text); }

/* ---------- Article ---------- */

.na-article > * + * { margin-top: var(--s-5); }
.na-article .prose { max-width: 46rem; }
.na-lead > :first-child, .na-body > :first-child { margin-top: 0; }
.na .wfg-panel[data-note] { max-width: 46rem; padding-block: 10px; }
.na .wfg-panel[data-note] p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.na .wfg-panel[data-note] p + p { margin-top: 6px; }
.na .wfg-panel[data-note="update"] { box-shadow: var(--shadow-inner), inset 3px 0 0 var(--accent); }
.na .wfg-panel[data-note="update"] strong { color: var(--ink); }
/* Without a summary table the lead is the answer, with any update or correction above it. */
.na-summary > * + * { margin-top: var(--s-4); }
.na-lead--answer { max-width: 46rem; }
.na-lead--answer > :first-child { margin-top: 0; }
.na-log { max-width: 46rem; }
/* Guide links in body tables get the same 28px target as the summary's. */
.na-body td a { display: inline-block; padding-block: .35rem; margin-block: -.35rem; }
/* A video with no frame of its own is a title bar, not an empty 16:9 box, until it plays. */
.na .wfg-video:not(.has-poster) .video-frame { aspect-ratio: 32 / 9; min-height: 8.5rem; }
.na .wfg-video:not(.has-poster) .video-frame:has(iframe) { aspect-ratio: 16 / 9; }
.na-body .wfg-panel[data-note] { margin-block: var(--s-4); }
.na-was { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.na-section + .na-section, .na-body > .affiliate-break + .na-section, .na-body > .na-section + .affiliate-break { margin-top: var(--s-6); }
.na-body > .affiliate-break { margin-block: var(--s-6) 0; }

/* Build notes: nine class links, then one section per class in its class color. */
.na-jump { max-width: 46rem; }
.na-jump-title { margin: 0 0 6px; font: 400 .76rem/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.na-jump ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: 2px 4px; margin: 0; padding: 0; list-style: none; }
.na-jump .wfg-sigil { min-height: 2.75rem; padding: 4px 0 2px; gap: 3px; }
.na-jump .wfg-sigil-ring { width: 2.6rem; height: 2.6rem; }
.na-jump .wfg-sigil-ring img { width: 1.8rem; height: 1.8rem; }
.na-jump .wfg-sigil b { font-size: .76rem; }
.na-class { margin-top: var(--s-5); }
.na-class-head { display: flex; align-items: center; gap: 10px; color: var(--accent-text); }
.na-class-head img { width: 28px; height: 28px; border: 1px solid var(--edge); border-radius: 50%; }
.na-class.class-shaman .na-class-head { color: var(--class-shaman-text); }
.na-class-link { margin: 6px 0 0; font: 400 .88rem/1.4 var(--font-ui); }
.na-class-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 1.75rem; color: var(--accent-text); text-decoration: none; }
.na-class-link a svg { width: 1em; height: 1em; transition: transform var(--t); }
.na-class-link a:hover { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .na-class-link a:hover svg { transform: translateX(3px); }
}

/* Video notes: the video on click beside its timestamped lines. */
.na-videos { max-width: 58rem; }
.na-videos > h2 { margin: 0 0 var(--s-3); }
.na-video + .na-video { margin-top: var(--s-5); }
.na-video h3 { margin: 0; }
.na-video-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 10px; font: 400 .8rem/1.5 var(--font-ui); color: var(--ink-3); }
.na-video-body { display: grid; gap: 12px; }
.na-video-body .video-embed { margin: 0; }
.na-takeaways { margin: 0; padding: 0; list-style: none; }
.na-takeaways li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--hairline); }
.na-takeaways li:first-child { border-top: 0; }
.na-takeaways p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.na-stamp { display: inline-flex; align-items: center; min-height: 1.75rem; font: 400 .82rem/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--accent-text); text-decoration-color: var(--line-control); }
@media (min-width: 60rem) {
  .na-video-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.na .wfg-faq, .na [data-quest-log] { max-width: 46rem; }

/* ---------- Table of contents ---------- */

.na-toc { display: none; }
.na-next { display: grid; gap: 14px; }
.na-toc-title { margin: 0 0 6px; font: 400 .76rem/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Wide screens ---------- */

/* Between 64 and 80rem the rail and the label column give the answers more room. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .na-summary .wfg-fact { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
  /* The 19rem rail stacks the date over the source so titles keep their width. */
  .na-trail-row { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 80rem) {
  .na .na-layout { grid-template-columns: minmax(0, 1fr) 22rem; }
}
@media (min-width: 64rem) {
  .na-layout { grid-template-columns: minmax(0, 1fr) 19rem; grid-template-areas: "summary side" "article side"; gap: 24px 28px; align-items: start; }
  .na.no-summary .na-layout { grid-template-areas: "article side"; }
  .na-summary { grid-area: summary; }
  .na-side { grid-area: side; align-self: stretch; }
  .na-article { grid-area: article; }
  /* The red button and the contents stay beside the reader as the article scrolls. */
  .na-next { position: sticky; top: var(--sticky-top); }
  .na-toc { display: block; max-height: calc(100vh - 10rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--s-3) 4px 0; margin-inline: -4px; }
  .na-article .contents-collapsible { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .na-class-link a svg { transition: none; }
}