/* AnswerTable (scripts/lib/components/answer-table.mjs): the tiered table that answers a
   topic guide's search. Dense addon rows on hairlines, the name column in the ink color, a
   tier tag and source on every row, the source line as the table's caption under it. Under
   40rem each row becomes labeled lines, so no cell is squeezed to one word per line and
   nothing scrolls sideways. Brand v2.1 tokens only. */

.wfg-answer-table { min-width: 0; }
.wfg-answer-table table { width: 100%; border-collapse: collapse; font: 400 .9rem/1.4 var(--font-ui); }
.wfg-answer-table th, .wfg-answer-table td { padding: 6px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--hairline); }
.wfg-answer-table thead th {
  padding-block: 5px;
  border-top: 0;
  border-bottom: 1px solid var(--edge);
  background: var(--panel-2);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.wfg-answer-table tbody tr:first-child > * { border-top: 0; }
.wfg-answer-table tbody th { font-weight: 400; color: var(--ink); }
.wfg-at-name { display: block; font-size: .96rem; }
.wfg-at-name a { color: var(--accent-text); }
.wfg-answer-table tbody th small { display: block; margin-top: 1px; font-size: .78rem; line-height: 1.35; color: var(--ink-3); }
.wfg-answer-table .wfg-fact-change[data-change="new"] { color: var(--new); }
.wfg-answer-table .wfg-fact-change[data-change="changed"] { color: var(--reworked); }
.wfg-answer-table td { color: var(--ink-2); }
.wfg-at-na { font-style: italic; color: var(--ink-3); }
.wfg-at-tier { white-space: nowrap; }
.wfg-answer-table .wfg-at-tier .wfg-fact-source { display: flex; align-items: center; min-height: 1.75rem; white-space: normal; }
.wfg-answer-table caption.wfg-at-caption { caption-side: bottom; margin: 0; padding: 6px 10px 8px; border-top: 1px solid var(--hairline); text-align: left; font: 400 .8rem/1.45 var(--font-ui); color: var(--ink-3); }

/* Phones: one block per row. The name leads; each cell follows on its own line under its
   column's label; the tier and source close the row. */
@media (max-width: 40rem) {
  .wfg-answer-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wfg-answer-table table, .wfg-answer-table tbody, .wfg-answer-table tr, .wfg-answer-table th, .wfg-answer-table td, .wfg-answer-table caption { display: block; }
  .wfg-answer-table tbody tr { padding: 6px 12px; border-top: 1px solid var(--hairline); }
  .wfg-answer-table tbody tr:first-child { border-top: 0; }
  .wfg-answer-table th, .wfg-answer-table td { padding: 1px 0; border: 0; }
  .wfg-answer-table td[data-label] { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 .5rem; font-size: .88rem; }
  .wfg-answer-table td[data-label]::before { content: attr(data-label); font-size: .7rem; line-height: 1.9; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .wfg-at-tier { white-space: normal; }
  .wfg-answer-table td.wfg-at-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; }
  .wfg-answer-table td.wfg-at-tier::before { content: none; }
  .wfg-answer-table .wfg-at-tier .wfg-fact-source { display: inline-flex; }
  .wfg-answer-table caption.wfg-at-caption { padding-inline: 12px; }
}