/**
 * defcon.css — the state-of-the-house screen.
 *
 * A giant readiness numeral, a one-line verdict, and a card per child saying
 * what happens next and when they will actually be out. Ported from
 * frontend/lab/07-defcon.html.
 *
 * Sized in vh/vw throughout: it has to read from three metres at 1920x1080 and
 * still fit at 1280x720.
 */

#screen-defcon {
  --dc-bg: #0a0f0d;
  --dc-text: #e2e8f0;
  --dc-muted: #64748b;
  --dc-green: #22c55e;
  --dc-amber: #eab308;
  --dc-red: #ff3b3b;
  --dc-display: 'Rajdhani', sans-serif;
  --dc-mono: 'Share Tech Mono', monospace;

  --dc-level: var(--dc-green);
  position: relative;
  overflow: hidden;
}

/* Level drives the whole screen's colour. */
#screen-defcon[data-defcon="5"] { --dc-level: #22c55e; }
#screen-defcon[data-defcon="4"] { --dc-level: #6ee7b7; }
#screen-defcon[data-defcon="3"] { --dc-level: #eab308; }
#screen-defcon[data-defcon="2"] { --dc-level: #fb923c; }
#screen-defcon[data-defcon="1"] { --dc-level: #ff3b3b; }

.dc-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 22% 45%, color-mix(in srgb, var(--dc-level) 22%, transparent), transparent 62%);
  transition: background .9s ease;
}
#screen-defcon[data-defcon="1"] .dc-wash { animation: dc-throb 1.6s ease-in-out infinite; }
@keyframes dc-throb { 50% { opacity: .55; } }

/* Hazard stripes down the edges, only when it is actually bad. */
.dc-stripes {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  background: repeating-linear-gradient(45deg, var(--dc-red) 0 1.6vh, #3a0000 1.6vh 3.2vh);
}
.dc-stripes.l { left: 0; top: 0; bottom: 0; width: .9vh; }
.dc-stripes.r { right: 0; top: 0; bottom: 0; width: .9vh; }
#screen-defcon[data-defcon="1"] .dc-stripes { opacity: 1; animation: dc-slide 1s linear infinite; }
@keyframes dc-slide { to { background-position: 0 4.53vh; } }

.dc-frame {
  position: relative;
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 2.5vw;
  height: 100%;
  padding: 3vh 2.5vw;
  box-sizing: border-box;
  align-items: stretch;
}
.dc-frame > :first-child { align-self: center; }

/* ── Left: the verdict ──────────────────────────────────────────── */

.dc-numwrap { display: flex; align-items: center; gap: 1.6vw; }

.dc-numeral {
  font: 700 30vh/0.8 var(--dc-display);
  color: var(--dc-level);
  text-shadow: 0 0 7vh color-mix(in srgb, var(--dc-level) 55%, transparent);
  font-variant-numeric: tabular-nums;
  transition: color .6s ease;
}
#screen-defcon[data-defcon="1"] .dc-numeral { animation: dc-blink 1.1s steps(2) infinite; }
@keyframes dc-blink { 50% { opacity: .45; } }

.dc-scale { display: flex; flex-direction: column; gap: .5vh; }
.dc-scale .blk {
  width: 3.4vw;
  padding: .5vh 0;
  text-align: center;
  font: 700 2vh/1 var(--dc-mono);
  color: var(--dc-muted);
  border: 1px solid rgba(100, 116, 139, .3);
  border-radius: .4vh;
  transition: all .4s ease;
}
.dc-scale .blk.on {
  color: var(--dc-bg);
  background: var(--dc-level);
  border-color: var(--dc-level);
  box-shadow: 0 0 2vh color-mix(in srgb, var(--dc-level) 60%, transparent);
}

.dc-sentence {
  margin-top: 2vh;
  font: 700 5.4vh/1.05 var(--dc-display);
  color: var(--dc-text);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.dc-sentence em { font-style: normal; color: var(--dc-level); }

.dc-tagline {
  margin-top: 1.2vh;
  font: 2.9vh var(--dc-mono);
  color: var(--dc-level);
  letter-spacing: .1em;
}

.dc-sub {
  margin-top: 1.6vh;
  font: 2vh var(--dc-mono);
  color: var(--dc-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dc-sub b { color: var(--dc-text); font-weight: 400; }

/* ── Right: a card per child ────────────────────────────────────── */

.dc-cards {
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
  min-height: 0;
  height: 100%;
}

.dc-card {
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(100, 116, 139, .25);
  border-left: .5vh solid var(--dc-cc, var(--dc-muted));
  border-radius: .7vh;
  padding: 1.3vh 1.2vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8vh;
  /* Share the column's height so the screen fills a TV rather than stacking
     everything into the top third. */
  flex: 1;
  min-height: 0;
}
.dc-card.departed { opacity: .5; }
.dc-card.critical { background: rgba(255, 59, 59, .1); border-color: rgba(255, 59, 59, .45); }

.dc-card .top { display: flex; align-items: baseline; justify-content: space-between; gap: 1vw; }
.dc-card .name {
  font: 700 3.6vh/1 var(--dc-display);
  color: var(--dc-cc, var(--dc-text));
  text-transform: uppercase;
  letter-spacing: .02em;
}
.dc-card .buf {
  font: 2.6vh var(--dc-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dc-card .buf.green { color: var(--dc-green); }
.dc-card .buf.amber { color: var(--dc-amber); }
.dc-card .buf.red   { color: var(--dc-red); }

.dc-card .instr {
  font: 2.3vh var(--dc-display);
  color: var(--dc-text);
  font-weight: 600;
}
.dc-card .instr b { color: var(--dc-cc, var(--dc-text)); font-weight: 700; }
.dc-card .instr.late b { color: var(--dc-red); }

.dc-card .queue { display: flex; align-items: center; gap: .5vw; flex-wrap: wrap; }
.dc-card .chip {
  display: inline-flex;
  align-items: center;
  gap: .4vw;
  font: 1.9vh var(--dc-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dc-muted);
  border: 1px solid rgba(100, 116, 139, .3);
  border-radius: .4vh;
  padding: .35vh .55vw;
  white-space: nowrap;
}
.dc-card .chip b { color: var(--dc-text); font-weight: 400; font-variant-numeric: tabular-nums; }
.dc-card .chip.active {
  color: var(--dc-cc, var(--dc-text));
  border-color: var(--dc-cc, var(--dc-muted));
  background: color-mix(in srgb, var(--dc-cc, #64748b) 14%, transparent);
}
.dc-card .chip.active.over { color: var(--dc-red); border-color: var(--dc-red); background: rgba(255, 59, 59, .12); }
.dc-card .chip.blocked { opacity: .45; }
.dc-card .arrow { color: var(--dc-muted); font: 1.8vh var(--dc-mono); }
.dc-card .none { font: 2vh var(--dc-mono); color: var(--dc-green); letter-spacing: .12em; text-transform: uppercase; }

.dc-card .pips { display: flex; gap: .35vw; margin-top: .2vh; }
.dc-card .pip {
  flex: 1;
  height: .7vh;
  border-radius: .35vh;
  background: rgba(100, 116, 139, .28);
}
.dc-card .pip.done    { background: var(--dc-green); }
.dc-card .pip.active  { background: var(--dc-cc, var(--dc-text)); animation: dc-pip 1.1s steps(2) infinite; }
.dc-card .pip.skipped { background: var(--dc-amber); }
.dc-card .pip.failed  { background: var(--dc-red); }
@keyframes dc-pip { 50% { opacity: .35; } }

/* 1280x720: the numeral has to give way first. */
@media (max-height: 800px) {
  .dc-numeral { font-size: 24vh; }
  .dc-sentence { font-size: 4.6vh; }
  .dc-card .name { font-size: 3.1vh; }
  /* Keep the tally on one line rather than orphaning the last word. */
  .dc-sub { font-size: 1.8vh; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-wash, .dc-numeral, .dc-stripes, .dc-card .pip.active { animation: none !important; }
}