/* The watch, live (23 Oct 2026): the Lobby wall at /watch/live, from the "Lobby wall" mockup. One stage, 1920 x 1080,
   scaled to fit the screen by /watch-live.js and letterboxed; no site chrome. BSJ look: ground #0f1526, panels #1a2540,
   hairlines #34436a, cream #f7f2e9; gold #c9a55c for live and advisories, coral for warnings and restrictions.
   Archivo for names and figures, Libre Franklin for text, Cormorant Garamond italic for "live." and the second
   question, IBM Plex Mono for times, sources and labels. Fonts are self-hosted (the CSP allows no other origin). The
   lanes flow and the pulses breathe in CSS; with reduced motion, nothing moves. */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/libre-franklin-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/libre-franklin-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Mono (SIL Open Font License), 400, 500 and the bold for the 600 the mockup sets */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-400.ttf) format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-500.ttf) format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-700.ttf) format('truetype'); }

:root {
  --ground: #0f1526;
  --panel: #1a2540;
  --hair: #34436a;
  --hair-2: #243154;
  --cream: #f7f2e9;
  --soft: #d9dde7;
  --muted: #aab3c8;
  --gold: #c9a55c;
  --gold-hi: #e6c27a;
  --coral: #e8957a;
  --coral-hi: #f0a88f;
  --sea: #0c1322;
  --letterbox: #080c17;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --sans: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--letterbox); }
p, h1, h2 { margin: 0; font-weight: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* the stage: the design size; /watch-live.js scales it to the window and centres it (letterbox) */
.wl-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: var(--ground);
  color: var(--cream);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  padding: 22px 32px 16px;
  gap: 14px;
  overflow: hidden;
  transform-origin: 0 0;
}
.wl-js body { overflow: hidden; height: 100vh; }
.wl-js .wl-stage { position: absolute; top: 0; left: 0; }

/* the masthead: the eye and the name; the clocks; when it was read */
.wl-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--hair); padding-bottom: 14px; }
.wl-brand { display: flex; align-items: center; gap: 16px; flex: none; }
.wl-eye { display: block; }
.wl-name { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.1; }
.wl-name em, .wl-q em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--gold); }
.wl-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wl-clocks { display: flex; gap: 24px; align-items: flex-end; }
.wl-clock { text-align: center; }
.wl-city { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.wl-time { font-family: var(--mono); font-weight: 500; font-size: 23px; font-variant-numeric: tabular-nums; color: var(--soft); min-width: 4.2ch; }
.wl-clock.main .wl-time { font-size: 30px; color: var(--cream); }
.wl-status { display: flex; flex-direction: column; gap: 6px; min-width: 250px; max-width: 330px; border-left: 1px solid var(--hair); padding-left: 24px; flex: none; }
.wl-read { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--gold); }
.wl-read.held, .wl-read.idle { color: var(--soft); }
.wl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); display: inline-block; flex: none; animation: wl-pulse 2.4s infinite; }
.wl-dot.idle, .wl-dot.held { background: transparent; border: 2px solid var(--muted); animation: none; }
.wl-bar { height: 5px; background: var(--hair-2); }
.wl-bar i { display: block; height: 5px; width: 0; background: var(--gold); transition: width .6s ease; }
.wl-next { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* the three lenses */
.wl-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 2.3fr) minmax(0, .82fr); gap: 14px; }
.wl-col { background: var(--panel); border: 1px solid var(--hair); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wl-head { padding: 14px 20px; border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.wl-k { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--gold); }
.wl-head h2 { font-family: var(--display); font-weight: 700; font-size: 26px; }
.wl-count { text-align: right; }
.wl-n { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.wl-nl, .wl-sl { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.wl-r { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.wl-line { padding: 8px 20px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--hair-2); }
.wl-legend { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; display: flex; gap: 16px; }
.wl-legend .a { color: var(--gold); }
.wl-legend .r { color: var(--coral); }

.wl-rows { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.wl-row { padding: 11px 20px; border-bottom: 1px solid var(--hair-2); display: flex; flex-direction: column; gap: 3px; flex: none; }
a.wl-row:hover .wl-x { text-decoration: underline; text-decoration-color: var(--hair); }
.wl-m { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.wl-m b { color: var(--cream); font-weight: 600; }
.wl-x { font-size: 16px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.wl-rows-c .wl-row { padding: 10px 20px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
.wl-rows-c .wl-m { letter-spacing: .04em; overflow-wrap: anywhere; }
.wl-rows-c .wl-x { font-size: 15.5px; -webkit-line-clamp: 2; line-clamp: 2; }
.wl-row.adv .wl-m b { color: var(--gold); }
.wl-row.restricted .wl-m b { color: var(--coral); }
.wl-quiet { padding: 14px 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.wl-src { padding: 12px 20px 4px; flex: none; }
.wl-src p { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.wl-src p.k { letter-spacing: .12em; padding-bottom: 6px; }
.wl-src p b { color: var(--soft); font-weight: 500; }

/* the map */
.wl-map { width: 100%; height: auto; display: block; background: var(--sea); flex: none; }
.wl-hubs text, .wl-chokes text, .wl-callouts text, .wl-mapstats text { font-family: var(--mono); }
.wl-flow path { stroke-dasharray: 2 17; animation: wl-flow 1.6s linear infinite; }
.wl-area { display: none; }
.wl-area.on { display: inline; }
.cp path { fill: var(--sea); stroke: #8a96b3; stroke-width: 1.4; }
.cp text { font-size: 11px; font-weight: 600; fill: var(--muted); }
.cp-unread path { stroke: #4a5677; stroke-dasharray: 2 2; }
.cp-unread text { fill: #6f7c9c; font-weight: 400; }
.cp-advisory path { stroke: var(--gold-hi); stroke-width: 1.6; }
.cp-restricted path { stroke: var(--coral-hi); stroke-width: 2; }
.cp-restricted circle { fill: var(--sea); }
.wl-co path { stroke-width: 1; fill: none; }
.wl-co rect { fill: var(--sea); fill-opacity: .94; stroke-width: 1.2; }
.wl-co .h { font-size: 12px; font-weight: 600; }
.wl-co .s { font-size: 11px; fill: var(--soft); }
.wl-co.adv path, .wl-co.adv rect { stroke: var(--gold-hi); }
.wl-co.adv .h { fill: var(--gold-hi); }
.wl-co.warn path, .wl-co.warn rect { stroke: var(--coral-hi); }
.wl-co.warn .h { fill: var(--coral-hi); }
.halo { transform-box: fill-box; transform-origin: center; animation: wl-halo 2.4s ease-out infinite; }
.halo.d1 { animation-delay: .8s; }
.halo.d2 { animation-delay: 1.6s; }
.halo.d3 { animation-delay: 1.1s; }
.wl-mapstats rect { fill: var(--sea); fill-opacity: .85; stroke: #2c3b60; }
.wl-mapstats text { font-size: 11px; fill: var(--muted); white-space: pre; }
.wl-mapstats .v { fill: var(--cream); font-weight: 600; }
.wl-mapstats .v.g { fill: var(--gold-hi); }
.wl-mapstats .v.r { fill: var(--muted); font-weight: 400; }

.wl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--hair); flex: none; }
.wl-stat { padding: 8px 20px; border-right: 1px solid var(--hair); }
.wl-stat:last-child { border-right: 0; }
.wl-sv { font-family: var(--display); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; min-height: 34px; }
.wl-sv.g { color: var(--gold); }
.wl-sv.c { color: var(--coral-hi); }

/* the watched ports */
.wl-ports { padding: 14px 20px; border-bottom: 1px solid var(--hair-2); display: flex; flex-direction: column; gap: 10px; flex: none; }
.wl-pk { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.wl-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wl-pgrid.one { grid-template-columns: minmax(0, 1fr); }
.wl-port { font-family: var(--mono); font-size: 14px; border: 1px solid var(--hair); padding: 7px 10px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-port.unread { color: #6f7c9c; border-style: dashed; }
.wl-port.warn { border-color: var(--coral); color: var(--coral-hi); }
a.wl-port:hover { border-color: var(--coral-hi); }
.wl-pnote { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; }

/* the band and the foot */
.wl-band { height: 104px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 32px; background: var(--panel); border: 1px solid var(--gold); padding: 0 28px; }
.wl-q { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.2; max-width: 1100px; }
.wl-url { font-family: var(--mono); font-size: 18px; color: var(--gold); white-space: nowrap; }
.wl-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--hair); padding-top: 10px; flex: none; }
.wl-brief { font-size: 15px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wl-bk { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted); margin-right: 12px; }
.wl-recline { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.wl-corner { position: absolute; top: 4px; right: 32px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: #6f7c9c; }

@keyframes wl-pulse { 0% { box-shadow: 0 0 0 0 rgba(201, 165, 92, .6); } 70% { box-shadow: 0 0 0 12px rgba(201, 165, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 165, 92, 0); } }
@keyframes wl-flow { to { stroke-dashoffset: -38; } }
@keyframes wl-halo { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wl-dot, .wl-flow path, .halo { animation: none; }
  .halo { opacity: .55; }
  .wl-bar i { transition: none; }
}