/* wags.graphics. The type and colors are the WAGS3 manual's and ident's. */

@font-face { font-family: "Barlow"; font-weight: 400; src: url(/fonts/Barlow-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 600; src: url(/fonts/Barlow-SemiBold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; src: url(/fonts/BarlowCondensed-Bold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: italic; src: url(/fonts/BarlowCondensed-ExtraBoldItalic.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; src: url(/fonts/BarlowSemiCondensed-SemiBold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Plex Mono"; font-weight: 500; src: url(/fonts/IBMPlexMono-Medium.woff2) format("woff2"); font-display: swap; }

:root {
  --ink: #12161C;
  --body: #2A3038;
  --muted: #66707C;
  --rule: #DCE0E6;
  --paper: #FFFFFF;
  --tint: #F4F6F9;
  --dark: #0E1116;
  --red: #E5322D;
  --amber: #FFB340;
  --measure: 36rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tint); color: var(--body);
  font: 400 1.0625rem/1.55 "Barlow", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.page { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }

/* ── The program monitor: 75% color bars with the WAGS3 lower third keyed over them ── */
.top { display: flex; align-items: baseline; justify-content: space-between; padding: 1.5rem 0 1.25rem; }
.sign-in { font-weight: 600; color: var(--ink); }
.wordmark {
  font: italic 800 1.875rem/1 "Barlow Condensed", sans-serif; letter-spacing: -0.005em;
  color: var(--ink); text-decoration: none;
}
.wordmark span { color: var(--red); }

.monitor { margin: 0; background: var(--dark); padding: clamp(6px, 1vw, 12px); border-radius: 6px; }
.screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; container-type: inline-size; }
.bars, .castellations { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.bars { top: 0; bottom: 25%; }
.bars span:nth-child(1) { background: #C0C0C0; }
.bars span:nth-child(2) { background: #C0C000; }
.bars span:nth-child(3) { background: #00C0C0; }
.bars span:nth-child(4) { background: #00C000; }
.bars span:nth-child(5) { background: #C000C0; }
.bars span:nth-child(6) { background: #C00000; }
.bars span:nth-child(7) { background: #0000C0; }
.castellations { bottom: 17%; height: 8%; }
.castellations span { background: #101010; }
.castellations span:nth-child(1) { background: #0000C0; }
.castellations span:nth-child(3) { background: #C000C0; }
.castellations span:nth-child(5) { background: #00C0C0; }
.castellations span:nth-child(7) { background: #C0C0C0; }
.pluge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 17%;
  background: linear-gradient(90deg, #00214C 0 18%, #FFFFFF 18% 36%, #32006A 36% 54%, #101010 54%);
}

/* The lower third, in the ident's type: the wordmark on dark, its red and amber strap, the line under it. */
.lower-third {
  position: absolute; left: 6.5%; bottom: 13%;
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: clamp(0.5rem, 3cqi, 2.6rem);
}
.lt-name {
  display: block; background: var(--dark); color: #fff;
  font: italic 800 3em/1 "Barlow Condensed", sans-serif; letter-spacing: -0.005em;
  padding: 0.1em 0.3em 0.06em 0.24em;
}
.lt-name span { color: var(--red); }
.lt-strap { display: flex; width: 100%; height: 0.34em; }
.lt-strap .red { flex: 0 0 74%; background: var(--red); }
.lt-strap .amber { flex: 1; background: var(--amber); }
.lt-title {
  display: block; white-space: nowrap; background: #fff; color: var(--ink);
  font: 600 1em/1 "Barlow Semi Condensed", sans-serif;
  text-transform: uppercase; letter-spacing: 0.16em;
  padding: 0.6em 0.8em 0.55em 0.72em;
}
@media (prefers-reduced-motion: no-preference) {
  .lt-name, .lt-title { clip-path: inset(0 100% 0 0); animation: wipe 0.7s cubic-bezier(.16, 1, .3, 1) forwards; }
  .lt-name { animation-delay: 0.5s; }
  .lt-title { animation-delay: 0.95s; }
  .lt-strap span { transform-origin: left center; transform: scaleX(0); animation: grow 0.55s cubic-bezier(.16, 1, .3, 1) forwards; }
  .lt-strap .red { animation-delay: 0.75s; }
  .lt-strap .amber { animation-delay: 0.95s; }
}
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes grow { to { transform: scaleX(1); } }

.tally-row {
  display: flex; gap: 1.5rem; align-items: center; padding: 0.75rem 0 0;
  color: var(--muted); font: 500 0.8125rem/1 "Plex Mono", ui-monospace, monospace;
}
.tally { display: inline-flex; align-items: center; gap: 0.55em; }
.lamp { width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(229, 50, 45, 0.2); }
.tally-row .output { margin-left: auto; }

/* ── Copy ───────────────────────────────────────────────── */
h1, h2, .cue dt { color: var(--ink); }
.intro {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
h1 {
  margin: 0; max-width: 18ch;
  font: 700 clamp(2.4rem, 6vw, 4.4rem)/0.98 "Barlow Condensed", sans-serif; letter-spacing: -0.005em;
}
.lede { margin: 0; max-width: var(--measure); font-size: 1.1875rem; }
@media (min-width: 56rem) {
  .intro { grid-template-columns: 1.15fr 1fr; align-items: end; gap: 3rem; }
}

.rundown { border-top: 3px solid var(--ink); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.rundown h2 { margin: 1rem 0 0.25rem; font: 600 1rem/1.4 "Barlow Semi Condensed", sans-serif; color: var(--muted); }
.rundown dl { margin: 0; }
.cue {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem 2rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
}
.cue dt { font: 700 1.375rem/1.2 "Barlow Condensed", sans-serif; }
.cue dd { margin: 0; max-width: var(--measure); color: var(--muted); }
@media (min-width: 44rem) {
  .cue { grid-template-columns: 15rem minmax(0, 1fr); align-items: baseline; }
}

.status { padding: 0 0 clamp(3rem, 7vw, 5rem); max-width: var(--measure); }
.status h2 { margin: 0 0 0.4rem; font: 700 1.75rem/1.15 "Barlow Condensed", sans-serif; }
.status p { margin: 0; }

footer {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 0 2rem; color: var(--muted); font-size: 0.875rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
}