/* 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 icon on every row with its source in the icon's tooltip, 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%; }
.wfg-at-name { display: block; font-size: .96rem; }
.wfg-answer-table .wfg-fact-change[data-change="new"] { color: color-mix(in srgb, var(--new) 55%, var(--ink-3)); }
.wfg-answer-table .wfg-fact-change[data-change="changed"] { color: color-mix(in srgb, var(--reworked) 55%, var(--ink-3)); }
.wfg-at-na { font-style: italic; color: var(--ink-3); }
.wfg-at-tier { width: 1%; white-space: nowrap; }
/* Faction columns carry the faction color in their label (a table with alliance and horde
   column keys, /leveling's route). The first planned row after playable ones draws a lit
   rule, so "in the beta now" and "planned" read as two parts of the table. */
.wfg-answer-table th[data-col="alliance"], .wfg-answer-table td[data-col="alliance"]::before { color: var(--alliance); }
.wfg-answer-table th[data-col="horde"], .wfg-answer-table td[data-col="horde"]::before { color: var(--horde-text); }
.wfg-answer-table tbody tr:not([data-status="planned"]) + tr[data-status="planned"] { border-top: 2px solid var(--edge-lit); }
.wfg-answer-table tr[data-status="planned"] .wfg-at-note { color: var(--evidence-planned); }

/* Phones: one block per row. The name leads; each cell follows on its own line under its
   column's label. The tier icon (its source in the tooltip) sits at the top right on the
   name's line instead of taking a line of its own; it still closes the row in reading order. */
@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; }
  /* The caption is the source line under the rows, as at full width. */
  .wfg-answer-table table { display: flex; flex-direction: column; }
  .wfg-answer-table caption { order: 2; }
  .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: inline; margin-right: .85em; font-size: var(--tbl-fs-phone); line-height: 1.5; }
  .wfg-answer-table td[data-label]::before { content: attr(data-label); display: inline; margin-right: .3em; font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .wfg-answer-table td[data-label]:empty { display: none; }
  .wfg-answer-table td[data-label] > :is(small, .sub) { display: inline; margin: 0 0 0 .4em; }
  .wfg-answer-table tbody tr { position: relative; }
  .wfg-answer-table tbody th { padding-right: 1.6rem; }
  .wfg-answer-table td.wfg-at-tier { position: absolute; top: 10px; right: 12px; display: flex; width: auto; padding: 0; }
  .wfg-answer-table td.wfg-at-tier::before { content: none; }
  .wfg-answer-table caption.wfg-at-caption { padding-inline: 12px; }
}
/* The same labeled lines under 39rem of page (styles.css, main): 768 at 200% text. */
@container page (width < 39rem) {
  .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; }
  /* The caption is the source line under the rows, as at full width. */
  .wfg-answer-table table { display: flex; flex-direction: column; }
  .wfg-answer-table caption { order: 2; }
  .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: inline; margin-right: .85em; font-size: var(--tbl-fs-phone); line-height: 1.5; }
  .wfg-answer-table td[data-label]::before { content: attr(data-label); display: inline; margin-right: .3em; font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .wfg-answer-table td[data-label]:empty { display: none; }
  .wfg-answer-table td[data-label] > :is(small, .sub) { display: inline; margin: 0 0 0 .4em; }
  .wfg-answer-table tbody tr { position: relative; }
  .wfg-answer-table tbody th { padding-right: 1.6rem; }
  .wfg-answer-table td.wfg-at-tier { position: absolute; top: 10px; right: 12px; display: flex; width: auto; padding: 0; }
  .wfg-answer-table td.wfg-at-tier::before { content: none; }
  .wfg-answer-table caption.wfg-at-caption { padding-inline: 12px; }
}

/* phoneRows: brief (answer-table.mjs). A roster whose cells are fragments runs each phone cell
   in on one line, its label in small caps before the value, so a row costs the name, its note
   and one line per cell. Only under the same phone breakpoints as the labeled lines above. */
@media (max-width: 40rem) {
  .wfg-answer-table[data-phone-rows="brief"] td[data-label] { display: block; font-size: .88rem; line-height: 1.4; }
  .wfg-answer-table[data-phone-rows="brief"] tbody th .wfg-at-name { display: inline; }
  .wfg-answer-table[data-phone-rows="brief"] tbody th small.wfg-at-note { display: inline; margin: 0 0 0 .35em; }
  .wfg-answer-table[data-phone-rows="brief"] td[data-label]::before { display: inline; margin-right: .4em; font-size: .7rem; line-height: inherit; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .wfg-answer-table[data-phone-rows="brief"] tbody th small { margin-top: 0; }
}
@container page (width < 39rem) {
  .wfg-answer-table[data-phone-rows="brief"] td[data-label] { display: block; font-size: .88rem; line-height: 1.4; }
  .wfg-answer-table[data-phone-rows="brief"] tbody th .wfg-at-name { display: inline; }
  .wfg-answer-table[data-phone-rows="brief"] tbody th small.wfg-at-note { display: inline; margin: 0 0 0 .35em; }
  .wfg-answer-table[data-phone-rows="brief"] td[data-label]::before { display: inline; margin-right: .4em; font-size: .7rem; line-height: inherit; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .wfg-answer-table[data-phone-rows="brief"] tbody th small { margin-top: 0; }
}