/* T7 topic guide (scripts/lib/templates/topic-guide.mjs,
   ops/design/templates/topic-guide/contract.md). The quest log entry: the answer panel (quick
   answer, headline facts, the red Next button) and the answer table open the page. Below
   72rem they stack in that order, so 820 and 1024 are one column; from 72rem the answer
   takes 5 of 12 columns beside the table's 7. Everything below runs in the guide grid with
   the table of contents. Brand v2.1 tokens only, Classic yellow accent. Shared component
   styles live in public/components/. */

.tg { padding-bottom: var(--s-6); }
.tg-head .wfg-page-head { padding-bottom: var(--s-3); }
.tg-range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; color: var(--ink-2); }

/* ---------- The answer ---------- */

.tg-top { display: grid; gap: var(--s-3); align-items: start; }
/* The 72rem layouts also need 71rem of page (styles.css, main), so under 200% text 1440
   stacks the answer over the table as 1024 does. */
@media (min-width: 72rem) { @container page (width >= 71rem) {
  .tg-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4); }
  .tg--answer-only .tg-top { grid-template-columns: minmax(0, 55rem); }
} }
/* The partner CTA (components/partner-cta.css) sits right under the TL;DR at every width. From
   72rem, beside an evidence panel, the panel spans both rows so the CTA stays under the answer.
   Beside an answer table (/leveling's route), the table spans three rows and the tier list
   (#quick-facts) takes the left column under the CTA. */
@media (min-width: 72rem) { @container page (width >= 71rem) {
  .tg-top.has-cta > [data-tg-answer] { grid-column: 1; grid-row: 1; }
  .tg-top.has-cta > .wfg-cta { grid-column: 1; grid-row: 2; }
  .tg--facts .tg-top.has-cta > [data-tg-evidence] { grid-column: 2; grid-row: 1 / span 2; }
  .tg-top.has-cta > [data-tg-table] { grid-column: 2; grid-row: 1 / span 3; }
  .tg-top.has-cta > [data-tg-table] ~ #quick-facts { grid-column: 1; grid-row: 3; }
} }
/* /leveling, pass 2 (2026-10-03, Fable's design): the TL;DR and the CTA share the first row,
   the route table runs the full width under them with its line to the in-game route, the
   facts follow full width, and the directory sits beside the video at the end. Phones and
   tablets keep the DOM order: answer, CTA, table, line, facts, directory, video. */
@media (min-width: 72rem) { @container page (width >= 71rem) {
  .tg-top.has-cta:has(> [data-tg-table-cta]) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .tg-top.has-cta:has(> [data-tg-table-cta]) > [data-tg-answer] { grid-column: 1; grid-row: 1; }
  .tg-top.has-cta:has(> [data-tg-table-cta]) > .wfg-cta { grid-column: 2; grid-row: 1; align-self: start; }
  .tg-top.has-cta:has(> [data-tg-table-cta]) > [data-tg-table] { grid-column: 1 / -1; grid-row: 2; }
  .tg-top.has-cta > [data-tg-table-cta] { grid-column: 1 / -1; grid-row: 3; }
  .tg-top.has-cta > [data-tg-table] ~ #quick-facts.tg-facts--grid { grid-column: 1 / -1; grid-row: 4; }
  .tg-top.has-cta > .tg-dir { grid-column: 1; grid-row: 5; }
  .tg-top.has-cta > .tg-lead-video { grid-column: 2; grid-row: 5; max-width: none; }
  .tg-top.has-cta > .tg-lead-video .wfg-video { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tg-top.has-cta > .wfg-cta .wfg-cta-offer { grid-template-columns: minmax(0, 1fr); }
  .tg-top.has-cta > .wfg-cta .wfg-cta-btn { width: 100%; }
  .tg-top.has-cta > .wfg-cta .wfg-cta-note { text-align: left; }
  /* Six columns across the full width: fixed widths so each row settles at about two lines. */
  .tg-top.has-cta [data-tg-table] table { table-layout: fixed; }
  .tg-top.has-cta [data-tg-table] thead th:first-child { width: 6.5rem; }
  .tg-top.has-cta [data-tg-table] thead th:is([data-col="alliance"], [data-col="horde"], [data-col="dungeon"]) { width: 20%; }
  .tg-top.has-cta [data-tg-table] thead th:last-child { width: 5.5rem; text-align: center; }
  .tg-top.has-cta [data-tg-table] td.wfg-at-tier { text-align: center; }
} }
.tg-top .wfg-panel-title { font-size: 1.15rem; }

/* Under the answer table: one line pointing to the partner's in-game route, its link plain
   text in the accent, so the loot-orange CTA stays the one button in view. */
.tg-table-cta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .6rem; margin: calc(var(--s-3) * -1) 0 0; padding: 8px 12px; border: 1px solid var(--edge); border-top: 0; background: var(--panel); font: 400 .9rem/1.45 var(--font-ui); color: var(--ink-2); }
@media (min-width: 72rem) { @container page (width >= 71rem) { .tg-table-cta { margin-top: calc(var(--s-4) * -1); } } }
.tg-table-cta-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tg-table-cta-link:hover { color: var(--ink); }
.tg-table-cta-link svg { width: .9em; height: .9em; flex: none; }

/* Directory (topic-guide.mjs, directorySection): class chips, icon over name with a thin
   class-color bar on top, one row from about 680px and 5 + 4 on a phone; then the topic guides
   as label and hint rows on hairlines, two columns from tablet width. */
.tg-dir { min-width: 0; }
.tg-dir > h2 { margin: 0 0 var(--s-2); }
.tg-dir-eyebrow { margin: var(--s-2) 0 6px; font: 400 .72rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tg-dir-classes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tg-dir-classes li { flex: 1 1 4rem; min-width: 4rem; }
.tg-dir-classes a { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 2.75rem; padding: 6px 4px 5px; border: 1px solid var(--edge); border-top: 2px solid var(--accent); background: var(--panel); font: 400 .8rem/1.2 var(--font-ui); color: var(--ink); text-decoration: none; }
.tg-dir-classes a:hover { background: var(--panel-2); color: var(--accent-text); }
.tg-dir a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.tg-dir-classes img { width: 28px; height: 28px; border: 1px solid var(--edge-inner); }
.tg-dir-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.tg-dir-topics li { display: grid; gap: 1px; align-content: start; padding: 6px 0; border-top: 1px solid var(--hairline); }
.tg-dir-topics li:nth-child(-n+2) { border-top: 0; }
.tg-dir-topics a { font: 600 .95rem/1.3 var(--font-ui); color: var(--accent-text); text-decoration: none; }
.tg-dir-topics a:hover { text-decoration: underline; }
.tg-dir-topics span { font: 400 .86rem/1.35 var(--font-ui); color: var(--ink-2); }
@media (max-width: 40rem) {
  .tg-dir-topics { grid-template-columns: minmax(0, 1fr); }
  .tg-dir-topics li:nth-child(2) { border-top: 1px solid var(--hairline); }
}

/* The facts as dense label and answer rows on hairlines, three columns once the page is wide
   and two from tablet width; the evidence icon (its source in the tooltip) at each row's top
   right. */
.tg-facts--grid > h2 { margin: 0 0 var(--s-2); }
/* The lifted video as a compact card, poster beside its caption like the home page's video
   row, so it never outweighs the CTA above it; it opens to full width once played. */
.tg-lead-video { min-width: 0; max-width: 40rem; }
.tg-lead-video .wfg-video { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0 12px; align-items: center; margin: 0; padding: 8px; border: 1px solid var(--edge); background: var(--panel); }
.tg-lead-video .wfg-video figcaption { margin: 0; font: 400 .9rem/1.4 var(--font-ui); color: var(--ink-2); }
.tg-lead-video .wfg-video .wfg-video-note { display: none; }
.tg-lead-video .wfg-video[data-video-state="playing"] { grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (max-width: 40rem) { .tg-lead-video .wfg-video { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); } .tg-lead-video .wfg-video figcaption { font-size: .84rem; } }
@media (min-width: 40.01rem) {
  .tg-block.tg-facts--grid .wfg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); max-width: none; }
  .tg-facts--grid .wfg-facts .wfg-fact:nth-child(2) { border-top: 0; }
}
@media (min-width: 72rem) { @container page (width >= 71rem) {
  .tg-block.tg-facts--grid .wfg-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tg-facts--grid .wfg-facts .wfg-fact:nth-child(3) { border-top: 0; }
} }
.tg-facts--grid .wfg-facts.is-compact .wfg-fact { align-content: start; padding: 8px 0; }
.tg-facts--grid .wfg-fact-value { font-size: .95rem; line-height: 1.4; }
.tg-answer { margin: 0 0 var(--s-1); font-size: 1rem; line-height: 1.45; color: var(--ink); }
@media (max-width: 40rem) { .tg-answer { font-size: .94rem; line-height: 1.4; } }
/* The evidence panel's facts, like a quest objective: the label and the evidence mark on one
   line, the answer at full width under them. The TL;DR's headline facts run in instead
   (components/facts.css). */
.tg-top .wfg-panel:not([data-tldr]) .wfg-facts.is-compact .wfg-fact { gap: 1px 10px; padding-block: 6px; }
.tg-top .wfg-panel:not([data-tldr]) .wfg-fact-value { font-size: .95rem; line-height: 1.4; }
.tg-next { margin: var(--s-2) 0 0; }
.tg-next .wfg-btn { width: 100%; }
@media (min-width: 40.01rem) {
  .tg-next .wfg-btn { width: auto; }
}

/* ---------- Below the answer ---------- */

.tg-lower .article-column { max-width: 50rem; }
.tg-lower .article-column > * + * { margin-top: var(--s-section); }
.tg-lower .article-column > .contents-collapsible + * { margin-top: 0; }
.tg-lower .article-column > .affiliate-break { margin-block: var(--s-6); }
.tg-block { min-width: 0; }
.tg-block > h2:first-child, .tg-section > h2:first-child { margin-top: 0; }
.tg-block > h2 { margin-bottom: var(--s-3); }
.tg-section.prose { max-width: none; }
.tg-section.prose > :is(p, ul, ol, blockquote, .callout, details) { max-width: var(--measure); }
.tg-block .wfg-facts { max-width: 50rem; }
.tg-unknowns .wfg-facts { margin-bottom: var(--s-3); }
.tg-unknowns.prose { max-width: none; }
.tg-unknowns.prose > :is(p, ul, ol, details) { max-width: var(--measure); }

/* Held-back prose: a quest-log line that opens to the full paragraphs, in place. */
.tg-more { max-width: var(--measure); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.tg-more summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; min-height: 2.75rem; padding: .5rem 1.75rem .5rem 0; position: relative; cursor: pointer; list-style: none; color: var(--ink-2); }
.tg-more summary::-webkit-details-marker { display: none; }
.tg-more summary::after { content: "+"; position: absolute; right: 0; top: .45rem; width: 1.25rem; font: 400 1.2rem/1 var(--font-ui); text-align: center; color: var(--accent-text); }
.tg-more[open] summary::after { content: "\2212"; }
.tg-more-label { font: 400 1rem/1.3 var(--font-ui); color: var(--accent-text); }
.tg-more-label--open { display: none; }
.tg-more[open] .tg-more-label--closed { display: none; }
.tg-more[open] .tg-more-label--open { display: inline; }
.tg-more summary small { font: 400 .76rem/1.3 var(--font-ui); letter-spacing: .04em; color: var(--ink-3); }
.tg-more summary:hover .tg-more-lead { color: var(--ink); }
.tg-more[open] .tg-more-lead { display: none; }
.tg-more > p { margin: 0 0 .9rem; color: var(--ink-2); }
.tg-body-tier { white-space: nowrap; }
.tg-body-tier .wfg-evidence { display: inline-flex; }

/* Body tables keep a readable width on phones and scroll inside their wrapper instead of
   squeezing each cell to a word per line. */
@media (max-width: 40rem) {
  .tg-lower .table-scroll table { min-width: 34rem; }
  .tg-lower .table-scroll table.tg-compact { min-width: 0; }
}
/* Short first-column labels (skill ranges such as 90-100) stay on one line. */
.tg-compact :is(th, td):first-child { white-space: nowrap; }

@media (min-width: 72rem) { @container page (width >= 71rem) {
  .tg-top > #quick-facts { grid-column: 2; margin-top: 0; }
} }

.tg-child-rows { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--edge); box-shadow: var(--shadow-inner); background: var(--panel); }
.tg-child-rows li { display: grid; gap: 2px; padding: 8px 14px; border-top: 1px solid var(--hairline); }
.tg-child-rows li:first-child { border-top: 0; }
.tg-child-rows a { font: var(--heading-weight) 1.2rem/1.25 var(--font-heading); letter-spacing: 0; color: var(--accent-text); }
.tg-child-rows span { color: var(--ink-2); }
.tg-child-rows small { font: 400 .78rem/1.3 var(--font-ui); color: var(--ink-3); }

.tg-faq-tier { margin-top: .4rem; }
.tg-records-dek { max-width: var(--measure); margin: 0 0 var(--s-3); color: var(--ink-2); }
.tg-legend { max-width: var(--measure); font: 400 .85rem/1.5 var(--font-ui); color: var(--ink-3); }
.tg-legend a { color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
  .tg * { transition: none; }
}

/* Fable review: answer tables retain readable columns within their scroll container. */
@media(max-width:40rem){.tg-answer .table-scroll table:not(.tg-compact){min-width:34rem}}
@container page (width < 40rem){.tg-answer .table-scroll table:not(.tg-compact){min-width:34rem}}
.tg-scroll-hint{display:none}
@media(max-width:40rem){.tg-scroll-hint{display:block;margin:var(--s-2) 0;color:var(--ink-2);font-size:var(--fs-sm)}}
.tg .table-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px}