/* The theory guides: the interactive figures, the level cards on the index, and nothing else.
 *
 * A separate file from learn.css on purpose. learn.css is the shared component vocabulary for
 * every /learn page and is edited by more than one pair of hands; everything here belongs to
 * /learn/theory alone. Written against the design system's custom properties
 * (client/design/starcraft.css), so these figures change colour when the theme does. */

/* --- the interactive figures ------------------------------------------------------------- */

.theory-figure {
  margin: 0; display: grid; gap: 14px;
  padding: 20px; border: 1px solid var(--sc-edge); background: var(--sc-panel);
}
.theory-figure-stage {
  border: 1px solid var(--sc-edge); background: var(--sc-void); padding: 6px;
}
.theory-svg { display: block; width: 100%; height: auto; }

.theory-figure-controls { display: grid; gap: 12px; }
.theory-control {
  display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) minmax(90px, auto);
  gap: 12px; align-items: center;
}
.theory-control-label {
  font: 500 11px/1.6 var(--sc-font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sc-muted);
}
.theory-control-value { font: 13px var(--sc-font-mono); color: var(--sc-gold); text-align: right; }
.theory-control input[type="range"] { width: 100%; accent-color: var(--sc-gold); }
@media (max-width: 560px) {
  .theory-control { grid-template-columns: 1fr auto; }
  .theory-control input[type="range"] { grid-column: 1 / -1; }
}

.theory-figure-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.theory-choice {
  padding: 6px 12px; border: 1px solid var(--sc-edge); background: var(--sc-metal);
  color: var(--sc-ink); font-size: 13px; cursor: pointer;
}
.theory-choice:hover { border-color: var(--sc-edge-bright); color: var(--sc-gold); }
.theory-choice[aria-checked="true"] {
  border-color: var(--sc-gold-edge); color: var(--sc-gold);
  background: color-mix(in srgb, var(--sc-gold) 10%, var(--sc-metal));
}

.theory-figure-readout {
  margin: 0; padding: 12px 14px;
  border-left: 3px solid var(--sc-gold); background: color-mix(in srgb, var(--sc-gold) 7%, transparent);
  color: var(--sc-ink); font-size: 15px; line-height: 1.45;
}
.theory-figure-caption { margin: 0; font-size: 13px; color: var(--sc-muted); line-height: 1.5; }

/* --- what the SVG parts are made of -------------------------------------------------------- */

.theory-grid { stroke: var(--sc-edge); stroke-width: 1; }
.theory-axis { stroke: var(--sc-edge-bright); stroke-width: 1.5; }
.theory-axis-title {
  fill: var(--sc-muted); font: 500 11px var(--sc-font-display); letter-spacing: .1em;
  text-transform: uppercase; text-anchor: middle;
}
.theory-tick { fill: var(--sc-muted); font: 11px var(--sc-font-mono); text-anchor: middle; }
.theory-tick-right { text-anchor: end; }
.theory-key { fill: var(--sc-muted); font: 12px var(--sc-font-display); }
.theory-key[data-tone="hot"] { fill: var(--sc-gold); }
.theory-key[data-tone="cool"] { fill: var(--sc-ice); }

.theory-line { fill: none; stroke: var(--sc-ink); stroke-width: 2.5; }
.theory-line[data-tone="hot"] { stroke: var(--sc-gold); }
.theory-line[data-tone="cool"] { stroke: var(--sc-ice); stroke-dasharray: 6 5; }
.theory-cursor { stroke: var(--sc-edge-bright); stroke-width: 1; stroke-dasharray: 3 4; }
.theory-dot { stroke: var(--sc-void); stroke-width: 2; fill: var(--sc-ink); }
.theory-dot[data-tone="hot"] { fill: var(--sc-gold); }
.theory-dot[data-tone="cool"] { fill: var(--sc-ice); }
.theory-dot[data-tone="ghost"] { fill: var(--sc-muted); }
.theory-region { fill: color-mix(in srgb, var(--sc-gold) 12%, transparent); stroke: none; }
.theory-arc { fill: none; stroke: var(--sc-muted); stroke-width: 1.5; stroke-dasharray: 4 5; }

.theory-ring { fill: none; stroke: var(--sc-gold-edge); stroke-width: 1.5; stroke-dasharray: 5 6; }
.theory-blob { fill: color-mix(in srgb, var(--sc-danger) 28%, var(--sc-void)); stroke: var(--sc-danger); stroke-width: 1.5; }
.theory-blob-label {
  fill: var(--sc-ink); font: 500 12px var(--sc-font-display); text-anchor: middle;
  letter-spacing: .1em; text-transform: uppercase;
}
.theory-unit { fill: var(--sc-muted); stroke: var(--sc-void); stroke-width: 1; }
.theory-unit[data-firing="yes"] { fill: var(--sc-gold); }
.theory-meter { fill: var(--sc-metal); stroke: var(--sc-edge); stroke-width: 1; }
.theory-meter-fill { fill: var(--sc-gold); }

.theory-edge { fill: none; stroke: var(--sc-edge); stroke-width: 2; }
.theory-edge[data-on="yes"] { stroke: var(--sc-gold); stroke-width: 3; }
.theory-node { fill: var(--sc-metal); stroke: var(--sc-edge); stroke-width: 1; }
.theory-node-label { fill: var(--sc-muted); font: 500 12px var(--sc-font-display); text-anchor: middle; }
[data-part="node"][data-on="yes"] .theory-node { stroke: var(--sc-gold); fill: color-mix(in srgb, var(--sc-gold) 14%, var(--sc-metal)); }
[data-part="node"][data-on="yes"] .theory-node-label { fill: var(--sc-ink); }

/* --- the index: the guides, grouped by who they are for ------------------------------------- */

.theory-level { display: grid; gap: 12px; margin-bottom: var(--sc-space-6); }
.theory-level-head { display: grid; gap: 4px; }
.theory-level-head h3 { margin: 0; font-family: var(--sc-font-display); }
.theory-level-head p { margin: 0; color: var(--sc-muted); font-size: 14px; }

.theory-guides { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.theory-guide {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: baseline;
  padding: 14px 16px; border: 1px solid var(--sc-edge); background: var(--sc-panel);
  color: var(--sc-ink); text-decoration: none;
}
.theory-guide:hover { border-color: var(--sc-gold-edge); }
.theory-guide-number { font: 500 12px var(--sc-font-display); letter-spacing: .14em; color: var(--sc-gold); }
.theory-guide-body { min-width: 0; display: grid; gap: 4px; }
.theory-guide-body b { font-weight: 600; }
.theory-guide-body span { color: var(--sc-muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 560px) { .theory-guide { grid-template-columns: 1fr; gap: 6px; } }

/* A ledger: what a lie costs on the left, what it buys on the right. Used by T5 and T11. */
.theory-ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.theory-ledger th, .theory-ledger td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sc-edge); vertical-align: top;
}
.theory-ledger th {
  font: 500 11px var(--sc-font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sc-muted);
}
.theory-ledger td { color: var(--sc-ink); }
.theory-ledger tbody tr:last-child td { border-bottom: 0; }

.theory-arrowhead { fill: var(--sc-edge); }
.theory-arrowhead[data-on="yes"] { fill: var(--sc-gold); }

/* The index's four reading rows. A guide belongs to more than one of them, so it gets its full
   row once and a plain link after that: the row is still complete, and the page is a page. */
.theory-level-again {
  margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
/* The label reads as a heading for the chips, on its own line, so a chip never follows it
   mid-row and the list wraps as whole chips rather than as a sentence of links. */
.theory-level-again > span {
  flex-basis: 100%;
  font: 500 10px/1.6 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sc-muted);
}
.theory-level-again a {
  padding: 5px 11px; border: 1px solid var(--sc-edge); background: var(--sc-panel);
  font-size: 14px; line-height: 1.3; color: var(--sc-ice); text-decoration: none;
}
.theory-level-again a:hover { border-color: var(--sc-edge-bright); color: var(--sc-gold); }