/* 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; }
@media (min-width: 72rem) {
  .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); }
}
.tg-top .wfg-panel-title { font-size: 1.15rem; }
.tg-answer { margin: 0 0 var(--s-2); font-size: 1rem; line-height: 1.5; color: var(--ink); }
/* Headline facts, like a quest objective: the label, the answer at full width, then the tier
   and its source on one line. Labels run long on these pages, so nothing shares their line. */
.tg-top .wfg-facts.is-compact .wfg-fact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "tier"; gap: 1px 0; padding-block: 6px; }
.tg-top .wfg-fact-label { grid-area: label; min-width: 0; }
.tg-top .wfg-fact-value { grid-area: value; font-size: .95rem; line-height: 1.4; }
.tg-top .wfg-fact-tier { grid-area: tier; justify-content: flex-start; gap: 2px 10px; }
.tg-top .wfg-fact-source { min-height: 1.75rem; }
.tg-next { margin: var(--s-3) 0 0; }
.tg-next .wfg-btn { width: 100%; }
@media (min-width: 40.01rem) {
  .tg-next .wfg-btn { width: auto; }
}

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

.tg-lower { margin-top: var(--s-section); }
.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; }
}

@media (min-width: 72rem) {
  .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: 400 1.2rem/1.1 var(--font-display); 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; }
}