/* Chapter-only styles (SVG text classes, custom activity layouts). Shared styles live in ../shared/styles.css. */

.obj-name { font: 700 28px system-ui, sans-serif; fill: #e8eefc; }
.band-name { font: 800 23px system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(10, 18, 40, .7); stroke-width: 4px; }
.scale-text { font: 700 21px system-ui, sans-serif; fill: #cfd9ef; }
.scale-text.dim { font-weight: 600; font-style: italic; fill: #9fb4dd; }
.inset-title { font: 800 28px system-ui, sans-serif; fill: var(--gold); }
.panel-name { font: 800 25px system-ui, sans-serif; fill: #fff; }
.panel-use { font: 600 21px system-ui, sans-serif; fill: #e8eefc; }
.panel-why { font: italic 600 19px system-ui, sans-serif; fill: var(--gold); }
.icon-text { font: 800 22px system-ui, sans-serif; fill: #1b4332; }
.ph-text { font: 800 28px system-ui, sans-serif; fill: #fff; }
.ph-small { font: 600 21px system-ui, sans-serif; fill: #cfd9ef; }
.bar-name { font: 700 21px system-ui, sans-serif; fill: #e8eefc; }

.ex-figure { width: 100%; }
.ex-figure svg { display: block; width: 100%; height: auto; }
.ex-band-name { font: 800 15px system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(10, 18, 40, .7); stroke-width: 3px; }
.ex-slider-row { display: flex; align-items: center; gap: 10px; width: 100%; font-weight: 700; color: #cfd9ef; white-space: nowrap; }
.ex-slider { flex: 1; min-width: 0; accent-color: var(--gold); height: 28px; }
.ex-panels { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: max(10px, 1.6cqw); width: 100%; align-items: start; }
.ex-readout { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3em .8em; font-size: .95em; align-items: center; }
.ex-readout dt { font-weight: 700; color: #9fb4dd; }
.ex-readout dd { margin: 0; font-weight: 700; color: #fff; display: flex; flex-direction: column; gap: .25em; }
.ex-meter { display: block; height: .7em; border-radius: 1em; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ex-meter-fill { display: block; height: 100%; width: 50%; border-radius: 1em; background: var(--gold); }
.ex-task { display: flex; flex-direction: column; align-items: center; gap: .5em; padding: .7em; border: 2px solid #3a4f7d; border-radius: .8em; background: #16223d; text-align: center; }
.ex-ask { margin: 0; font-weight: 700; line-height: 1.35; }
.ex-ask b { color: var(--gold); }
.ex-task .btn[hidden] { display: none; }

.act:has(.row4[style*="--cols:7"]) { width: min(100%, 90cqw); }
.row4[style*="--cols:7"] .tile { font-size: .85em; }

@container (max-width: 620px) {
  .ex-panels { grid-template-columns: 1fr; }
  .act .row4[style*="--cols:7"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}