/* Home page: the attack on the grid and its replay with the threats identified. */
.stage-chip--identified { background: var(--amber); color: var(--ink); }
.readout-bar { position: relative; height: 6px; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, rgb(20 35 58 / 0.12) 90%, rgb(192 52 29 / 0.35) 90%); overflow: hidden; }
.readout-bar span { position: absolute; inset: 0 auto 0 0; width: calc(var(--load, 0) * 100%); border-radius: 3px; background: var(--power); }
.readout-bar.is-high span { background: #f08a24; }
.spectrogram {
  position: absolute;
  right: 16px;
  bottom: 56px;
  width: min(320px, 46%);
  margin: 0;
  padding: 12px 14px 10px;
  border-radius: 16px;
  background: rgb(15 27 45 / 0.92);
  color: #d6dde8;
  opacity: 0;
  visibility: hidden;
}
.spectrogram figcaption { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; }
.spectrogram-plot { display: block; width: 100%; height: auto; }
.panel-head { width: 26px; height: 26px; flex: none; transform-origin: 40% 60%; transition: transform 0.2s linear; }
.spectrogram .hum { fill: #8fa3bf; }
.spectrogram .rotor-column rect { fill: var(--amber); }
.spectrogram .axis { stroke: rgb(214 221 232 / 0.3); stroke-width: 1; }
.spectrogram .legend { font-family: var(--mono); font-size: 7.5px; fill: #aab6c8; }
.spectrogram .legend--rotor { fill: var(--amber); }
.rail {
  --rail: 0;
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0;
}
.rail::before, .rail::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  height: 2px;
  border-radius: 1px;
}
.rail::before { right: 0; background: rgb(20 35 58 / 0.15); }
.rail::after { width: calc(var(--rail) * 100%); background: var(--red); }
.rail li { position: relative; flex: 1; text-align: center; }
.rail li:first-child { text-align: left; }
.rail li:last-child { text-align: right; }
.stage[data-dark="true"] .rail { color: #b7c1d0; }
.stage[data-dark="true"] .rail::before { background: rgb(255 255 255 / 0.18); }
.plate .copper { fill: none; stroke: #b8733d; stroke-width: 3.5; stroke-linecap: round; }
.plate .nine rect { fill: var(--card); stroke: var(--ink); stroke-width: 1.4; }
.plate .nine path { stroke: var(--ink); stroke-width: 1.4; }
.scene .steam { fill: var(--steam); }
.scene .sub-glow { fill: url(#glow-attack); opacity: 0; }
.scene .burst { fill: #fff6d8; }
.scene .arc { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.scene .drone-trail { fill: none; stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0; }
.scene .drone-shadow { fill: #000; opacity: 0; }
.scene .strike-tag rect { fill: var(--red); }
.scene .strike-tag text { font-family: var(--mono); font-size: 10px; font-weight: 500; fill: #fff; letter-spacing: 0.04em; }

/* Story elements added by the home scene's tracks */

.scene .sub-glow.is-off { fill: url(#glow-off); }
.scene .strike-tag.is-heard rect { fill: var(--amber); }
.scene .strike-tag.is-heard text { fill: var(--ink); }
.scene .operator-tag rect { fill: var(--amber); }
.scene .operator-tag text { fill: var(--ink); }
.scene .alert-ring { fill: none; stroke: var(--red); stroke-width: 1.4; opacity: 0; }
.scene .scan-line { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.scene .scan-attack { stroke: var(--red); }
.scene .scan-audit { stroke: var(--amber); }
.scene .phone-alert rect, .scene .phone-alert > path:first-of-type { fill: var(--card); }
.scene .phone-alert-dot { fill: var(--red); }
.scene .phone-alert-lines { fill: none; stroke: #8a93a0; stroke-width: 1.3; stroke-linecap: round; }
.scene .siren-ring { fill: none; stroke: var(--red); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0; }
.scene .beacon { fill: #3a4e6e; }
.scene .beacon.is-lit { fill: #7fb2ff; }
.scene .vehicle--fire .beacon.is-lit { fill: #ffc24a; }
.scene .fire-glow { fill: url(#glow-fire); opacity: 0.6; }
.scene .flame-outer { fill: #f08a24; }
.scene .flame-inner { fill: #ffd36e; }
.scene .smoke { fill: #7d8591; }
.scene .housing { display: none; }
.scene[data-housings="on"] .housing { display: inline; }
.scene .housing-eye { fill: var(--amber); }
.scene .sound-arc { fill: none; stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; }
.scene .alert-path { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; }
.scene .browser-frame { fill: var(--card); stroke: var(--ink); stroke-width: 1; }
.scene .browser-rule, .scene .browser-stem { stroke: var(--ink); stroke-width: 1; }
.scene .browser-stem { stroke-dasharray: 2 2; }
.scene .browser-dot { fill: #c9c2b4; }
.scene .browser-line { fill: #cfd5dd; }
.scene .browser-line.is-flaw { fill: var(--red); }
.scene .browser-scan { fill: var(--red); opacity: 0; fill-opacity: 0.22; }

/* Evidence drawings added in stage 3 */

.plate .signal { fill: none; stroke: var(--amber-ink); stroke-width: 1.6; stroke-dasharray: 4 5; }
.plate .lakes path { fill: #cfe0e6; stroke: var(--ink); stroke-width: 1.2; }
.plate .blackout-area { fill: var(--red); fill-opacity: 0.2; stroke: var(--red); stroke-width: 1; stroke-opacity: 0.5; }
.plate .cities circle { fill: var(--ink); }
.plate .clock { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.plate .clock .clock-pin { fill: var(--ink); stroke: none; }
.plate .clock-hand { stroke: var(--red); stroke-width: 2.2; }

/* 1.4: real incidents as a fanned stack */

.incidents { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.incidents li {
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 10px 24px -18px rgb(20 35 58 / 0.4);
}
.incidents li:nth-child(1) { transform: rotate(-1.2deg); }
.incidents li:nth-child(2) { transform: rotate(0.8deg) translateX(10px); }
.incidents li:nth-child(3) { transform: rotate(-0.6deg) translateX(4px); }
.incidents li:nth-child(4) { transform: rotate(1.1deg) translateX(14px); }
.incidents p { margin: 0 0 4px; font-size: 0.975rem; line-height: 1.45; }
.incidents .source { margin: 0; font-size: 0.8125rem; }
.incident-when { font-family: var(--mono); font-size: 0.6875rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-ink); }
.eyebrow--identified { color: var(--amber-ink); }
.beat--turn .beat-card > p:not(.eyebrow) { font-family: var(--display); font-weight: 560; font-size: clamp(1.6rem, 2.6vw, 2.3rem) !important; line-height: 1.15 !important; font-variation-settings: "SOFT" 50; }

/* After the story: the two areas of work */

.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 24px;
  padding: 16px var(--gutter) 32px;
  max-width: 76rem;
}
.area {
  display: block;
  padding: 28px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.area:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgb(20 35 58 / 0.45); }
.area p { margin: 0 0 12px; }
.area-text { font-size: 1.125rem; line-height: 1.5; }
.area-link { font-weight: 600; color: var(--ink); margin: 0 !important; }
.area-icon { width: 64px; height: 48px; margin-bottom: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.area-icon-accent { fill: var(--amber); stroke: none; }
.area-icon-mark { stroke: var(--ink); stroke-width: 2; }

@media (max-width: 880px) {
  .rail { left: 14px; right: 14px; bottom: 12px; font-size: 0.625rem; }
  .rail li { visibility: hidden; }
  .rail li.is-current { visibility: visible; }
  .spectrogram { right: 8px; bottom: 36px; width: 62%; padding: 8px 10px; }
  .spectrogram figcaption { margin-bottom: 2px; }
  .panel-head { width: 20px; height: 20px; }
  .incidents li { transform: none !important; }
}