/* Answer sheet (docs/brand/components-code.md): the answer text, the labelled blocks and
   rows under it, the red button's row, the talent-state legend with its pin key, the data
   caption and a section dek. Class pages (T2) and spec pages (T3) share it; the class-* names
   are the ones the class page started with. No JavaScript. */

.class-answer { margin: 0 0 var(--s-3); font-size: 1rem; line-height: 1.5; color: var(--ink); }
.class-sheet-block { padding-block: var(--s-2); border-top: 1px solid var(--hairline); }
.class-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0 0 .3rem;
  font: 400 .72rem/1.3 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.class-label .wfg-evidence { letter-spacing: normal; text-transform: none; }
.class-tree-rows { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.class-tree-rows li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; padding: 3px 0; font: 400 .92rem/1.35 var(--font-ui); color: var(--ink-2); }
.class-tree-rows b { font-weight: 400; color: var(--ink); }
.class-tree-rows [data-state="new"] { color: var(--new); }
.class-tree-rows [data-state="reworked"] { color: var(--reworked); }
.class-tree-rows [data-state="unchanged"] { color: var(--unchanged-text); }
/* StateSplit (talent-frame.mjs): the row's counts as one thin bar under it, each state as wide
   as its share, in the talent-state colors with rounded caps (tldr-accent-2026-09-30). */
.wfg-split { display: flex; flex: 0 0 100%; gap: 1px; height: 4px; margin: 3px 0 2px; overflow: hidden; border-radius: 999px; background: var(--hairline); }
.class-tree-rows .wfg-split { grid-column: 1 / -1; }
.wfg-split i { flex-basis: 0; min-width: 3px; }
.wfg-split [data-state="new"] { background: var(--new); }
.wfg-split [data-state="reworked"] { background: var(--reworked); }
.wfg-split [data-state="unchanged"] { background: var(--unchanged); }
/* Phones: a fixed name column, so every row wraps the same way whatever the tree's name. */
@media (max-width: 40rem) {
  .class-tree-rows li { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 0 .5rem; }
  .class-tree-rows li > span { font-size: .84rem; text-align: right; }
}
/* Under 20rem of page (200% text on a phone; styles.css, main) the name column would leave
   the counts a word wide: the name sits over its counts. */
@container page (width < 20rem) {
  .class-tree-rows li { display: grid; grid-template-columns: minmax(0, 1fr); }
  .class-tree-rows li > span { text-align: left; }
}

/* The calculator (red) and the class leveling guide (ghost): stacked full width on phones,
   side by side from 40rem. */
.class-sheet-action { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }
.class-sheet-action .wfg-btn { width: 100%; justify-content: center; }
@media (min-width: 40rem) {
  .class-sheet-action .wfg-btn { width: auto; }
}

.class-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .45rem; font: 400 .8rem/1.3 var(--font-ui); color: var(--ink-2); }
.class-pin-key { display: inline-flex; align-items: center; gap: .4rem; }
.class-pin-key .wfg-pin { position: static; display: inline-block; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--correction); box-shadow: 0 0 0 1px var(--edge); }
.class-caption { margin: .45rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--ink-3); }
.class-caption .wfg-evidence { margin-right: .25rem; }

.class-dek { margin: 0 0 var(--s-4); font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.class-dek .wfg-evidence { margin-right: .3rem; }