/* 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); }
/* 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; }
}

.class-sheet-action { 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(--evidence-confirmed); 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; }