/* T10 tool page, /talents (scripts/lib/templates/tool.mjs, ops/design/templates/tool/contract.md).
   The stage is the answer: nine class sigils in one row; the chosen class's name and counts on
   one row with the point readout and the red button; the class's three trees; and, from 75rem,
   a side column beside the trees (how to read them, the first two rules) that ends near them.
   The loaded calculator takes the full width and lands under the class row. Under the stage a
   band of two panel stacks of about equal height, then the partner slot, then the article and FAQ
   beside the sources, so no column ends in empty stone. Brand v2.1 tokens only. The stage's
   accent follows the chosen class; the page head keeps the site's Classic yellow, because the
   page serves all nine classes. Shared component styles live in public/components/. */

.tool-page { padding-bottom: var(--s-6); }
.tool-head .wfg-page-head { padding-bottom: var(--s-2); }
.tool-head .wfg-page-meta .wfg-evidence { margin-left: .3rem; }

/* ---------- Accent: the chosen class's color ---------- */

.tool-stage:has(#tool-class-warrior:checked) { --accent: var(--class-warrior); --accent-text: var(--class-warrior); }
.tool-stage:has(#tool-class-paladin:checked) { --accent: var(--class-paladin); --accent-text: var(--class-paladin); }
.tool-stage:has(#tool-class-hunter:checked) { --accent: var(--class-hunter); --accent-text: var(--class-hunter); }
.tool-stage:has(#tool-class-rogue:checked) { --accent: var(--class-rogue); --accent-text: var(--class-rogue); }
.tool-stage:has(#tool-class-priest:checked) { --accent: var(--class-priest); --accent-text: var(--ink); }
.tool-stage:has(#tool-class-shaman:checked) { --accent: var(--class-shaman); --accent-text: var(--class-shaman-text); }
.tool-stage:has(#tool-class-mage:checked) { --accent: var(--class-mage); --accent-text: var(--class-mage); }
.tool-stage:has(#tool-class-warlock:checked) { --accent: var(--class-warlock); --accent-text: var(--class-warlock); }
.tool-stage:has(#tool-class-druid:checked) { --accent: var(--class-druid); --accent-text: var(--class-druid); }

/* ---------- Stage layout ---------- */

.tool-stage { display: grid; gap: var(--s-4); align-items: start; }
.tool-main, .tool-side { min-width: 0; }
.tool-side { display: grid; gap: var(--s-3); align-content: start; }
/* One-column stage: the legend and the rules sit side by side under the trees. */
@media (min-width: 48rem) and (max-width: 75rem) {
  .tool-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 75rem) {
  .tool-stage { grid-template-columns: minmax(0, 1fr) 20rem; }
  /* The loaded calculator needs the full width, so the side column drops under it. */
  .tool-stage:has([data-calc-view="calc"]) { grid-template-columns: minmax(0, 1fr); }
}
/* The board is a two-column grid so the calculator's "Show the trees" button can sit on the
   row of the differences note; everything else spans both columns. */
.tool-stage .wfg-board { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.tool-stage .wfg-board > * { grid-column: 1 / -1; }
.tool-stage .wfg-board > script { display: none; }

/* ---------- Class sigils: one row of nine ---------- */

.tool-stage .wfg-sigils { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .25rem; }
.tool-stage .wfg-sigils legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tool-stage .wfg-sigil { min-height: 2.75rem; padding: .2rem 0; gap: .2rem; }
.tool-stage .wfg-sigil-ring { width: 2.5rem; height: 2.5rem; }
.tool-stage .wfg-sigil-ring img { width: 1.85rem; height: 1.85rem; }
.tool-stage .wfg-sigil b { font-size: .76rem; }
@media (max-width: 40rem) {
  .tool-stage .wfg-sigils { gap: 0; }
  .tool-stage .wfg-sigil { gap: 0; padding: .15rem 0; }
  /* The ring fills its ninth of the row, 40px on a 390px phone and never wider than 2.5rem. */
  .tool-stage .wfg-sigil-ring { width: min(2.5rem, 100%); height: auto; aspect-ratio: 1; }
  .tool-stage .wfg-sigil-ring img { width: 72%; height: auto; aspect-ratio: 1; }
  /* The chosen class's name heads the row below; each sigil keeps its name as its label. */
  .tool-stage .wfg-sigil b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Class row: name and counts, readout, red button ---------- */

.tool-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.tool-titles { flex: 1 1 18rem; min-width: 0; }
.tool-class-title {
  display: none;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .75rem;
  margin: 0;
  font: 400 1.7rem/1 var(--font-display);
  letter-spacing: .01em;
  color: var(--ink);
}
.tool-class-title small { font: 400 .8rem/1.3 var(--font-ui); color: var(--ink-3); }
.tool-class-title [data-state="new"] { color: var(--new); }
.tool-class-title [data-state="reworked"] { color: var(--reworked); }
.tool-class-title [data-state="unchanged"] { color: var(--unchanged-text); }
.tool-stage:has(#tool-class-warrior:checked) .tool-class-title[data-for="warrior"],
.tool-stage:has(#tool-class-paladin:checked) .tool-class-title[data-for="paladin"],
.tool-stage:has(#tool-class-hunter:checked) .tool-class-title[data-for="hunter"],
.tool-stage:has(#tool-class-rogue:checked) .tool-class-title[data-for="rogue"],
.tool-stage:has(#tool-class-priest:checked) .tool-class-title[data-for="priest"],
.tool-stage:has(#tool-class-shaman:checked) .tool-class-title[data-for="shaman"],
.tool-stage:has(#tool-class-mage:checked) .tool-class-title[data-for="mage"],
.tool-stage:has(#tool-class-warlock:checked) .tool-class-title[data-for="warlock"],
.tool-stage:has(#tool-class-druid:checked) .tool-class-title[data-for="druid"] { display: flex; }
@supports not selector(:has(*)) {
  .tool-class-title.is-default { display: flex; }
}
.tool-readout { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; margin: 0; font: 400 .95rem/1.3 var(--font-ui); color: var(--ink-2); }
.tool-readout b { font: 400 2rem/1 var(--font-display); color: var(--accent-text); font-variant-numeric: tabular-nums; }
/* The button's height is held before calculator.js shows it, so nothing moves when it does. */
.tool-action { display: flex; align-items: center; min-height: 2.75rem; }
.tool-bar .wfg-btn[hidden] { display: none; }
.tool-bar .wfg-calc-nojs { max-width: 22rem; }
@media (max-width: 40rem) {
  .tool-bar { gap: .35rem; }
  .tool-titles { flex-basis: 100%; }
  .tool-class-title { font-size: 1.45rem; }
  .tool-readout b { font-size: 1.6rem; }
  .tool-action { flex-basis: 100%; }
  .tool-bar .wfg-btn { width: 100%; justify-content: center; }
}

/* ---------- The trees ---------- */

.tool-stage .wfg-verdicts[hidden] { display: none; }
@media (max-width: 40rem) {
  .tool-stage .wfg-tree-tabs { margin-bottom: .5rem; }
  .tool-stage .wfg-tree { padding: .7rem .8rem 1rem; }
  .tool-stage .wfg-tree-head { margin-bottom: .6rem; }
}
/* Three trees side by side from 44rem, sized to the column; phones keep the tree tabs. */
@media (min-width: 44rem) and (max-width: 60rem) {
  .tool-stage .wfg-talents[data-mode="class"] { --cell: clamp(1.6rem, 5vw, 2.6rem); --gap: calc(var(--cell) * .28); }
  .tool-stage .wfg-talents[data-mode="class"] .wfg-trees { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; padding-bottom: 0; }
  .tool-stage .wfg-tree { padding: .8rem .6rem 1rem; }
}
/* 40px talents in the one-column layout, the class pages' size at 1024. */
@media (min-width: 60rem) and (max-width: 75rem) {
  .tool-stage .wfg-talents[data-mode="class"] { --cell: 2.5rem; --gap: .7rem; }
}

/* ---------- The calculator and what it shows differently ---------- */

.tool-stage .wfg-calc[data-calc-state="idle"] { display: none; }
/* Loaded, the section's children join the board grid, so the swap button shares a row. */
.tool-stage .wfg-calc[data-calc-state="loaded"] { display: contents; }
.tool-stage .wfg-calc[data-calc-state="loaded"] > * { grid-column: 1 / -1; }
.tool-stage .wfg-calc[data-calc-state="loaded"] > .wfg-calc-swap { grid-column: 2; margin: 0; }
/* With the trees showing, the red button is the way back to the calculator. */
.tool-stage .wfg-calc[data-calc-view="restore"] .wfg-calc-swap { display: none; }
.tool-stage .talent-calculator-attribution { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--ink-3); }
.tool-stage .wfg-calc:not([data-calc-state="loaded"]) .talent-calculator-attribution { display: none; }
.tool-diff { display: none; grid-column: 1; padding: 0 .8rem; border: 1px solid var(--edge); border-left: 2px solid var(--evidence-confirmed); background: var(--panel-2); font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.tool-stage .wfg-board > .tool-diff { grid-column: 1; }
.tool-diff summary { display: flex; align-items: center; gap: 1rem; min-height: 2.75rem; list-style: none; font: 400 .95rem/1.3 var(--font-ui); color: var(--ink); cursor: pointer; }
.tool-diff summary::-webkit-details-marker { display: none; }
/* A drawn chevron, not a character a screen reader would read before the summary. */
.tool-diff summary::after { content: ""; flex: none; width: .45rem; height: .45rem; margin: 0 .2rem 0 auto; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); }
.tool-diff[open] summary::after { transform: rotate(-135deg); }
.tool-diff p { margin: 0 0 .35rem; }
.tool-diff b { color: var(--ink); font-weight: 600; }
.tool-diff ul { margin: 0 0 .7rem; padding-left: 1.1rem; }
.tool-stage:has([data-calc-view="calc"]):has(#tool-class-warrior:checked) .tool-diff[data-for="warrior"],
.tool-stage:has([data-calc-view="calc"]):has(#tool-class-paladin:checked) .tool-diff[data-for="paladin"],
.tool-stage:has([data-calc-view="calc"]):has(#tool-class-hunter:checked) .tool-diff[data-for="hunter"],
.tool-stage:has([data-calc-view="calc"]):has(#tool-class-rogue:checked) .tool-diff[data-for="rogue"],
.tool-stage:has([data-calc-view="calc"]):has(#tool-class-priest:checked) .tool-diff[data-for="priest"],
.tool-stage:has([data-calc-view="calc"]):has(#tool-class-shaman:checked) .tool-diff[data-for="shaman"],
.tool-stage:has([data-calc-view="calc"]):has(#tool-class-mage:checked) .tool-diff[data-for="mage"],
.tool-stage:has([data-calc-view="calc"]):has(#tool-class-warlock:checked) .tool-diff[data-for="warlock"],
.tool-stage:has([data-calc-view="calc"]):has(#tool-class-druid:checked) .tool-diff[data-for="druid"] { display: block; }
/* The readout and red button have done their job once the calculator shows (it counts its own
   points); the ghost button switches back. */
.tool-stage:has([data-calc-view="calc"]) .tool-bar { display: none; }

/* ---------- Side: reading the trees, the first rules ---------- */

.tool-legend { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; font: 400 .88rem/1.35 var(--font-ui); color: var(--ink-2); }
.tool-legend li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); align-items: center; gap: .6rem; }
.tool-legend li > .wfg-state { justify-self: start; }
.tool-pin { display: inline-block; justify-self: start; width: .6rem; height: .6rem; margin-left: .35rem; border-radius: 50%; background: var(--evidence-confirmed); box-shadow: 0 0 0 1px var(--edge); }
.tool-legend-note { margin: .6rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--ink-3); }
.tool-legend-note .wfg-evidence { margin-right: .3rem; }
/* In narrow columns the tier and source sit under the answer. */
.tool-side .wfg-facts.is-compact .wfg-fact, .tool-panels .wfg-facts.is-compact .wfg-fact { grid-template-columns: minmax(0, 1fr); }
.tool-side .wfg-fact-value, .tool-panels .wfg-fact-value { font-size: .95rem; line-height: 1.45; }
.tool-side .wfg-fact-tier, .tool-panels .wfg-fact-tier { justify-content: flex-start; }

/* ---------- The panel band: two stacks of about equal height ---------- */

.tool-panels { display: grid; gap: var(--s-4); margin-top: var(--s-5); align-items: start; }
.tool-panel-stack { display: grid; gap: var(--s-4); min-width: 0; }
@media (min-width: 48rem) {
  .tool-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.tool-use { display: grid; gap: 0; margin: 0; }
.tool-use > div { display: grid; gap: .1rem; padding: 7px 0; border-top: 1px solid var(--hairline); }
.tool-use > div:first-child { border-top: 0; padding-top: 0; }
.tool-use dt { font: 400 .78rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tool-use dd { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }

/* ---------- Below: partner slot, article and FAQ beside the sources ---------- */

.tool-lower { display: grid; gap: var(--s-5); margin-top: var(--s-3); align-items: start; }
.tool-lower > * { min-width: 0; }
.tool-article .article-body { max-width: 66ch; }
.tool-article .article-body > h2:first-child { margin-top: 0; }
.tool-article .wfg-faq { max-width: 66ch; margin-top: var(--s-6); }
.tool-sources .sources, .tool-sources > section { margin-top: 0; }
@media (min-width: 64rem) {
  .tool-lower {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "partner partner" "article sources" "related related";
    column-gap: var(--s-6);
  }
  .tool-lower > [data-partner-slot] { grid-area: partner; }
  .tool-article { grid-area: article; }
  .tool-sources { grid-area: sources; }
  .tool-related { grid-area: related; }
}