/* T3 spec page (scripts/lib/templates/spec.mjs, ops/design/templates/spec/contract.md).
   The answer sheet (components/sheet.css) and the video takeaways (components/takeaways.css)
   are shared with the class page; this file lays out the spec page around them.

   Up to 72rem the page is one column, as on the class page: the answer and the red button,
   then the tree pane (the tree tabs on top, the tree beside its notes from 44rem: legend,
   source conflict, new talents and the tree in numbers), then the headline changes. From
   72rem the answer box and the headline changes sit left (5 of 12) beside the pane (7 of
   12), whose tree is drawn at 56 px. Neither column stretches, so a short one ends in page
   ground, not in an empty frame. Below: every talent in two balanced columns from 60rem, then the
   lower sections in pairs from 72rem. Brand v2.1 tokens only; the accent is the class color
   set by .class-<slug> on <main>. */

.spec-page { padding-bottom: var(--s-6); }
.spec-head .wfg-page-head { padding-bottom: var(--s-2); }

.spec-top { display: grid; gap: var(--s-3); align-items: start; }
@media (min-width: 72rem) {
  .spec-top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "sheet pane" "leads pane";
    grid-template-rows: auto 1fr;
  }
  .spec-top > [data-spec-sheet] { grid-area: sheet; }
  .spec-top > [data-spec-pane] { grid-area: pane; }
  .spec-top > [data-spec-leads] { grid-area: leads; }
  /* The headline changes stack under the answer, beside the tree. */
  [data-spec-leads] .wfg-facts { display: block; }
  [data-spec-leads] .wfg-fact { padding-block: 5px; border-top: 1px solid var(--hairline); }
  [data-spec-leads] .wfg-fact:first-child { border-top: 0; }
  /* The loaded calculator needs the full width, so it runs under the answer box. */
  .spec-top:has([data-calc-view="calc"]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sheet" "pane" "leads"; grid-template-rows: auto; }
}

/* ---------- Answer box, the tree in numbers, headline changes ---------- */

[data-spec-sheet] .class-answer { margin-bottom: var(--s-2); }
[data-spec-sheet] .class-sheet-action { margin-top: var(--s-2); }
.spec-counts { padding-top: var(--s-2); border-top: 1px solid var(--hairline); }
[data-spec-counts] .class-sheet-block:first-of-type { padding-top: 0; border-top: 0; }
[data-spec-counts] .class-caption { margin-top: .35rem; }
/* Label and value columns, so long values (a rename, a list of names) wrap under
   themselves instead of dropping below the label. */
[data-spec-counts] .class-tree-rows li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 .75rem; }
[data-spec-counts] .class-tree-rows li > span { text-align: left; }
@media (max-width: 40rem) {
  [data-spec-counts] .class-tree-rows li { grid-template-columns: 6.4rem minmax(0, 1fr); gap: 0 .5rem; }
}
/* A link alone in its row gets a 28 px target without moving the row. */
[data-spec-counts] .class-tree-rows a { display: inline-block; padding-block: .3rem; margin-block: -.3rem; color: var(--ink); text-decoration-color: var(--line-control); }
[data-spec-counts] .class-tree-rows a:hover { color: var(--accent-text); }
.spec-pins li > span { color: var(--ink-2); }
[data-spec-leads] > .class-label { margin-bottom: .2rem; }
[data-spec-leads] .wfg-facts.is-compact .wfg-fact { grid-template-columns: minmax(0, 1fr); }
[data-spec-leads] .wfg-facts.is-compact .wfg-fact-tier { justify-content: flex-start; }
[data-spec-leads] .wfg-fact:first-child { border-top: 0; }
@media (min-width: 48rem) {
  [data-spec-leads] .wfg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: var(--s-5); }
  [data-spec-leads] .wfg-fact { border-top: 0; padding-block: 0; }
  [data-spec-leads] { padding-block: 10px 8px; }
}

/* ---------- Tree pane ---------- */

/* The game's tree tabs head the pane: the three trees of the class, each a link. */
.spec-tabs { margin: 0 0 var(--s-3); }
.spec-tabs ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.spec-tabs a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .3rem .75rem .3rem .45rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font: 400 .9rem/1.2 var(--font-ui);
  text-decoration: none;
  color: var(--ink-2);
}
.spec-tabs img { width: 20px; height: 20px; box-shadow: 0 0 0 1px var(--edge); }
.spec-tabs a:hover { border-color: var(--line-control); color: var(--ink); }
.spec-tabs a[aria-current="page"] { border-color: var(--accent); background: var(--panel-2); color: var(--ink); }

.spec-frame { display: grid; gap: var(--s-3); align-items: start; }
.spec-frame[hidden] { display: none; }
.spec-frame .wfg-talents[data-mode="tree"] { --cell: 2.5rem; --gap: .6rem; }
.spec-frame .wfg-tree { padding: .75rem .9rem 1rem; }
.spec-frame .wfg-tree-head { margin-bottom: .6rem; }
.spec-frame .wfg-trees { justify-content: center; }
.spec-frame-notes { display: grid; gap: var(--s-2); min-width: 0; }
.spec-frame-notes .class-legend { margin: 0; }
/* From 44rem the tree stands beside its notes, like the game's pane beside its tooltip. */
@media (min-width: 44rem) {
  .spec-frame { grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-4); }
  .spec-frame .wfg-talents[data-mode="tree"] { --gap: .75rem; }
}
/* The one tree at full size: 56 px, the icons' own size. */
@media (min-width: 72rem) {
  .spec-frame .wfg-talents[data-mode="tree"] { --cell: 3.5rem; --gap: .8rem; }
}
[data-spec-pane] .wfg-calc { margin-top: var(--s-3); }
[data-spec-pane] .wfg-calc[data-calc-state="idle"] { margin-top: 0; }
[data-spec-pane] .talent-calculator-attribution { margin-top: var(--s-2); font-size: .8rem; color: var(--ink-3); }
[data-spec-pane] .wfg-calc[data-calc-state="idle"] .talent-calculator-attribution { display: none; }

/* The new talents beside the tree, by name. */
.spec-new .class-label { margin-bottom: .25rem; }
.spec-new-list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.spec-new-list a { display: inline-flex; align-items: center; gap: .45rem; min-height: 1.75rem; font: 400 .95rem/1.25 var(--font-ui); color: var(--ink); text-decoration-color: var(--line-control); }
.spec-new-list a:hover { color: var(--accent-text); }
.spec-new-list img { width: 24px; height: 24px; box-shadow: 0 0 0 2px var(--new), 0 0 0 3px var(--edge); }

.spec-conflict { margin: 0; padding: 4px 0 4px 10px; border-left: 2px solid var(--line-control); font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.spec-conflict b { font-weight: 600; color: var(--ink); }

/* ---------- Every talent ---------- */

.spec-lower { padding-block: var(--s-6) var(--s-5); }
.spec-block { margin: 0 0 var(--s-7); }
.spec-block > h2 { margin: 0 0 .4rem; font: 400 clamp(1.7rem, 3.2vw, 2.2rem)/1.02 var(--font-display); letter-spacing: .01em; color: var(--ink); }
.spec-lower > :is(.spec-notes, .affiliate-break) { max-width: 52rem; }
/* Fact rows carry a tier and a source beside each answer, so they get a wider measure. */
.spec-lower > #quick-facts { max-width: 64rem; }

/* Rows flow through two balanced columns, so an odd row leaves no hole beside it. */
@media (min-width: 60rem) {
  .spec-rows { columns: 2; column-gap: var(--s-6); }
}
.spec-row { padding-top: var(--s-3); }
.spec-row > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0 0 .1rem; break-after: avoid; font: 400 1.35rem/1.1 var(--font-display); letter-spacing: .01em; color: var(--ink); }
.spec-row > h3 small { font: 400 .78rem/1.3 var(--font-ui); color: var(--ink-3); }
.spec-talents { margin: 0; padding: 0; list-style: none; }
.spec-talent { --st: var(--unchanged); position: relative; break-inside: avoid; scroll-margin-top: var(--s-4); padding: 8px 0 10px; border-top: 1px solid var(--hairline); }
.spec-talent[data-state="new"] { --st: var(--new); }
.spec-talent[data-state="reworked"] { --st: var(--reworked); }
/* The jumped-to entry gets the accent bar in the gutter, so its text does not move. */
.spec-talent:target::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 3px; background: var(--accent); }
.spec-talent-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.spec-talent-head img { width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--st), 0 0 0 3px var(--edge); }
.spec-talent[data-state="unchanged"] .spec-talent-head img { filter: grayscale(1) brightness(.7); }
.spec-talent h4 { margin: 0; font: 400 1.05rem/1.25 var(--font-ui); color: var(--ink); }
.spec-texts { display: grid; gap: .25rem; margin: .45rem 0 0; }
.spec-texts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0 .75rem; }
.spec-texts dt { font: 400 .75rem/1.6 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.spec-texts dd { margin: 0; font-size: .94rem; line-height: 1.45; color: var(--ink); }
.spec-texts .spec-was dd { color: var(--ink-2); }
@media (max-width: 40rem) {
  .spec-texts > div { grid-template-columns: minmax(0, 1fr); }
}
.spec-extra { margin: .35rem 0 0; font: 400 .82rem/1.45 var(--font-ui); color: var(--ink-3); }
.spec-extra a { color: var(--ink-2); text-decoration-color: var(--line-control); }
.spec-errata, .spec-note { margin: .4rem 0 0; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
/* The pin hangs at the left of the line it marks, whatever the text wraps to. */
.spec-errata { position: relative; padding-left: 1.3rem; }
.spec-errata .wfg-pin { position: absolute; top: .4em; left: .35rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--evidence-confirmed); box-shadow: 0 0 0 1px var(--edge); }
.spec-errata .wfg-evidence { margin-inline: .2rem; }
.spec-note .wfg-evidence { margin-right: .3rem; }

/* ---------- Lower sections ---------- */

.spec-pair { display: grid; gap: 0 var(--s-6); align-items: start; }
.spec-pair > * { min-width: 0; max-width: 52rem; }
@media (min-width: 72rem) {
  .spec-pair.is-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .spec-pair.is-two > * { max-width: none; }
}
.spec-notes { margin-bottom: var(--s-6); }
/* Beside the data section the sources start level with it. */
@media (min-width: 72rem) {
  .spec-pair.is-two > .source-block { margin-top: 0; }
}
.spec-notes > h2:first-child { margin-top: 0; }

/* Where the data comes from: labelled rows. */
.spec-data { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.spec-data li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0 .9rem; padding: 7px 0; border-top: 1px solid var(--hairline); font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.spec-data li:first-child { border-top: 0; }
.spec-data b { font: 400 .76rem/1.9 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.spec-data .wfg-evidence { margin-left: .2rem; }
@media (max-width: 40rem) {
  .spec-data li { grid-template-columns: minmax(0, 1fr); }
}