/* Chapter 3: speed–time graphs in the scenes, step calculators, the bus graph analyser and the story → graph builder. */

.g-grid { stroke: rgba(255, 255, 255, .09); stroke-width: 1.5; }
.g-axis { stroke: #cfd9ef; stroke-width: 3; }
.g-arrow { fill: #cfd9ef; }
.g-tick { fill: #9fb4dd; font-family: system-ui, sans-serif; font-weight: 600; }
.g-title { fill: #e8eefc; font-family: system-ui, sans-serif; font-weight: 700; }
.g-head { fill: #fff; font: 800 34px system-ui, sans-serif; }
.g-note { font-family: system-ui, sans-serif; font-weight: 800; }
.g-story { fill: #14213d; font-family: system-ui, sans-serif; font-weight: 600; }
.g-line { fill: none; stroke: #ffd166; stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
.g-line.mid { stroke-width: 4; }
.g-line.thin { stroke-width: 3.5; }
.g-hl { stroke-width: 26; stroke-linecap: round; opacity: .5; }
.g-guide { stroke-width: 3; stroke-dasharray: 9 7; fill: none; }

/* Graphs inside activities */
.mini-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: .5em; }
.mini-svg { width: min(46%, 220px); height: auto; background: #0f1a33; border-radius: .6em; }
.mini-row .mini-svg:only-child { width: min(100%, 340px); }
.calc-question { margin: 0; font-size: 1.05em; line-height: 1.45; text-align: center; }
.calc-question p { margin: 0 0 .4em; }
.calc-question b { color: var(--gold); }
.calc-graph { display: block; width: min(100%, 440px); height: auto; margin: 0 auto; background: #0f1a33; border-radius: .7em; }

.calc-body { display: flex; flex-direction: column; gap: max(8px, 1.2cqw); width: 100%; align-items: center; }
.calc-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.calc-values { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
.calc-field { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #cfd9ef; }
.calc-input {
  width: 5.5em;
  font: 700 1em ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .45em .6em;
  border-radius: .6em;
  border: 2px solid #3a4f7d;
  background: #0f1a33;
  color: #fff;
}
.calc-input:focus { outline: none; border-color: var(--gold); }
.calc-input:disabled { opacity: .85; }
.calc-input.wrong { border-color: var(--bad); }
.calc-input.correct { border-color: var(--ok); background: #143a28; }
.calc-unit { font-weight: 700; color: #cfd9ef; }

.chip-btn.hint { box-shadow: 0 0 0 3px var(--gold); }

/* Bus graph analyser */
.an-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.an-left { display: flex; flex-direction: column; gap: 6px; }
.an-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.an-picture svg { display: block; width: 100%; height: auto; }
.an-zone { fill: rgba(0, 0, 0, 0); cursor: pointer; transition: fill .2s; }
.an-zone:hover { fill: rgba(255, 255, 255, .05); }
.an-zone.on { fill: rgba(255, 209, 102, .12); stroke: #ffd166; stroke-width: 2; stroke-dasharray: 6 6; }
.an-zone:focus-visible { outline: none; stroke: #ffd166; stroke-width: 3; }
.an-chips .chip-btn { min-width: 3em; padding: .3em .6em; }
.an-tally { margin: 0; text-align: center; font-weight: 700; font-size: .88em; color: #cfd9ef; }
.an-panel { display: flex; flex-direction: column; gap: 8px; }
.an-head { margin: 0; font-weight: 800; color: var(--gold); }
.an-summary { margin: 0; line-height: 1.4; color: #e8eefc; }
.an-choices { justify-content: flex-start; }
.an-choices .chip-btn { padding: .35em .7em; font-size: .92em; }
.an-panel .calc-step { align-items: flex-start; }
.an-panel .calc-values { justify-content: flex-start; }

/* Story → graph */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.story-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.story-picture svg { display: block; width: 100%; height: auto; }
.story-list { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: .92em; line-height: 1.35; }
.story-list li { opacity: .5; transition: opacity .3s; }
.story-list li.current { opacity: 1; font-weight: 700; color: #ffe7a8; }
.story-list li.done { opacity: .85; color: #c9f7d4; }
.story-list li.done::marker { content: '✓ '; }
.story-btn { display: flex; align-items: center; gap: 6px; padding: .35em .7em; }
.story-btn svg { width: 34px; height: 26px; flex: none; }
.story-icon-axis { stroke: #9fb4dd; stroke-width: 2; }
.story-icon-line { fill: none; stroke: #ffd166; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

@container (max-width: 620px) {
  .an-grid, .story-grid { grid-template-columns: 1fr; }
  .calc-input { width: 4.8em; }
  .story-btn span { font-size: .9em; }
}