/* 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 overview (the package's
   written read of the tree), then the tree pane (the tree tabs on top, the tree beside its
   notes from 44rem: the red button, legend, source conflict, new talents and the tree in
   numbers). From 72rem the overview sits 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>. The 44 and 72rem layouts also need 43 and 71rem of page
   (a container query on <main>, styles.css), so under 200% text 1440 gets one column with
   the tree beside its notes, and 768 the tree over its notes. */

.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) { @container page (width >= 71rem) {
  .spec-top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "sheet pane";
  }
  .spec-top > [data-spec-sheet] { grid-area: sheet; }
  .spec-top > [data-spec-pane] { grid-area: pane; }
  /* The loaded calculator needs the full width, so it runs under the overview. */
  .spec-top:has([data-calc-view="calc"]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sheet" "pane"; }
  /* 2026-10-02: the partner CTA (components/partner-cta.css) heads the right column, above
     the tree pane, because the 120 to 300 word overview runs past the first screen; the extra
     height of a long overview goes to the pane's row. Below 72rem it follows the overview,
     before the tree pane. */
  .spec-top.has-cta { grid-template-areas: "sheet cta" "sheet pane"; grid-template-rows: auto 1fr; }
  .spec-top > .wfg-cta { grid-area: cta; }
  .spec-top.has-cta:has([data-calc-view="calc"]) { grid-template-areas: "sheet" "cta" "pane"; grid-template-rows: none; }
} }

/* ---------- The overview, the tree in numbers ---------- */

/* The package's written read of the tree: short paragraphs with bold lead-ins, talent links
   and at most one short list, at a reading measure. */
.spec-overview { max-width: 42rem; }
.spec-overview > * { margin: 0; }
.spec-overview > * + * { margin-top: .7rem; }
.spec-overview p, .spec-overview li { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.spec-overview strong { font-weight: 600; color: var(--ink); }
.spec-overview ul { padding-left: 1.15rem; }
.spec-overview li + li { margin-top: .2rem; }
.spec-overview a:not(.wfg-btn), .spec-overview span.spell-link { color: var(--ink); text-decoration-color: var(--line-control); }
.spec-overview a:not(.wfg-btn):hover { color: var(--accent-text); }
.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; }
}
@container page (width < 20rem) {
  [data-spec-counts] .class-tree-rows li { grid-template-columns: minmax(0, 1fr); }
}
/* 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); }

/* The red button heads the tree's notes from 72rem, where the pane shares the first screen
   with the overview. Below 72rem the pane follows the whole overview, so the button follows
   the overview's first paragraph instead and stays in the first screen at 390. */
.spec-plan { margin: 0; }
.spec-overview > .spec-plan--early { margin-top: .6rem; }
.spec-plan--pane { display: none; }
@media (min-width: 72rem) { @container page (width >= 71rem) {
  .spec-plan--early { display: none; }
  .spec-plan--pane { display: block; }
} }
.spec-plan .wfg-btn { width: 100%; justify-content: center; }
@media (min-width: 30rem) {
  .spec-plan .wfg-btn { width: auto; }
}

/* ---------- 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) { @container page (width >= 43rem) {
  .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) { @container page (width >= 71rem) {
  .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: var(--heading-weight) clamp(1.7rem, 3.2vw, 2.2rem)/1.2 var(--font-heading); letter-spacing: 0; color: var(--ink); }
.spec-lower > .affiliate-break { max-width: 52rem; }
/* The notes can be a long-form guide: they read at the body measure. */
.spec-lower > .spec-notes { max-width: var(--measure); }
/* 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: var(--heading-weight) 1.35rem/1.25 var(--font-heading); letter-spacing: 0; 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: var(--heading-weight) 1.05rem/1.3 var(--font-heading); letter-spacing: 0; 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(--correction); 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); }
}