/* Per-renderer layout and typography.
   The .screen element is a size container; all cqw/cqh units here are
   percentages of the screen itself, so channels scale with the set. */

:root {
  --mono: "Consolas", "Menlo", "Courier New", monospace;
  --sans: "Segoe UI", system-ui, sans-serif;
  --cond: "Arial Narrow", "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --script: "Segoe Script", "Comic Sans MS", cursive;
}

.seg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--sans);
}

/* ---- board ----------------------------------------------------------- */

.seg-board {
  background: #04100b;
  color: #e8e3d5;
  display: flex;
  flex-direction: column;
}

.board-header {
  font-family: var(--mono);
  font-size: 5.4cqw;
  letter-spacing: 0.32em;
  color: #ffb300;
  padding: 3.4cqw 4cqw 2cqw;
  border-bottom: 0.4cqw solid #1c2b1f;
}

.board-table {
  flex: 1;
  padding: 1.6cqw 4cqw;
  font-family: var(--mono);
  overflow: hidden;
}

.board-row {
  display: grid;
  grid-template-columns: 24% 34% 19% 23%;
  gap: 0 1cqw;
  padding: 1.15cqw 0;
  font-size: 2.9cqw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.board-head {
  color: #7d8a7d;
  font-size: 2.3cqw;
  letter-spacing: 0.18em;
}

.board-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-cell[data-status] {
  color: #cfd6cc;
}

.board-cell[data-status="departed"] {
  color: #868d84;
}

.board-cell[data-status="delayed"],
.board-cell[data-status="holding"] {
  color: #ffb300;
}

.board-cell[data-status="cancelled"] {
  color: #ff4d3d;
}

.board-cell[data-status="boarding"] {
  color: #45d96a;
}

.board-ticker {
  overflow: hidden;
  white-space: nowrap;
  background: #081208;
  border-top: 0.4cqw solid #1c2b1f;
  padding: 1.6cqw 0;
}

.board-ticker-track {
  display: inline-flex;
  animation: ticker-scroll linear infinite;
  will-change: transform;
}

.board-ticker-text {
  font-family: var(--mono);
  font-size: 2.9cqw;
  color: #ffb300;
  padding-right: 9cqw;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- alert ----------------------------------------------------------- */

.seg-alert {
  background: #101c4a;
  display: grid;
  place-items: center;
}

.alert-frame {
  width: 84%;
  border: 0.7cqw double #cdd6ff;
  padding: 4cqw 5cqw 5cqw;
  text-align: center;
}

.alert-kind {
  display: inline-block;
  background: #e8e0c8;
  color: #16161a;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 3.4cqw;
  letter-spacing: 0.34em;
  padding: 1cqw 3cqw;
  margin-bottom: 3.4cqw;
}

.alert-body {
  margin: 0;
  font-family: var(--mono);
  font-size: 3.5cqw;
  line-height: 1.65;
  color: #f2efe2;
}

/* ---- commercial ------------------------------------------------------ */

.seg-commercial {
  background: #f4e8cf;
  display: flex;
  flex-direction: column;
  border: 1.6cqw solid #b3251e;
}

.com-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6cqw;
  gap: 2.6cqw;
}

.com-product {
  font-family: var(--cond);
  font-weight: 900;
  font-size: 8.4cqw;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: #b3251e;
  text-shadow: 0.3cqw 0.3cqw 0 rgba(58, 45, 26, 0.18);
}

.com-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.2cqw;
  color: #3a2d1a;
}

.com-fine {
  font-size: 2cqw;
  line-height: 1.5;
  color: #6b5f4c;
  text-align: center;
  padding: 0 7cqw 3cqw;
}

/* ---- talkshow -------------------------------------------------------- */

.seg-talkshow {
  background: linear-gradient(170deg, #1c1134 0%, #0a0618 70%);
  color: #efeaf6;
  display: flex;
  flex-direction: column;
}

.ts-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2.6cqw 4cqw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ts-name {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 3cqw;
  letter-spacing: 0.2em;
}

.host-name {
  color: #ffb300;
}

.guest-name {
  color: #a48cff;
}

.ts-tonight {
  font-size: 1.9cqw;
  letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.45);
}

.ts-feed {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2cqw;
  padding: 3cqw 4cqw;
}

.ts-line {
  max-width: 72%;
  padding: 1.6cqw 2.4cqw;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 0.8cqw;
}

.ts-line.host {
  align-self: flex-start;
  border-left: 0.6cqw solid #ffb300;
}

.ts-line.guest {
  align-self: flex-end;
  border-right: 0.6cqw solid #a48cff;
  text-align: right;
}

.ts-who {
  display: block;
  font-size: 1.9cqw;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.7cqw;
}

.ts-text {
  font-size: 3.1cqw;
  line-height: 1.4;
}

.ts-laugh {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffb300;
  color: #1a1005;
  font-family: var(--cond);
  font-weight: 900;
  font-size: 4.6cqw;
  letter-spacing: 0.5em;
  padding: 2cqw 4cqw 2cqw 4.5cqw;
  animation: laugh-blink 0.28s steps(2) infinite;
}

@keyframes laugh-blink {
  50% { opacity: 0.55; }
}

/* ---- bars ------------------------------------------------------------ */

.seg-bars {
  background: #000;
  display: flex;
  flex-direction: column;
}

.bars-row {
  flex: 1;
  display: flex;
}

.bar {
  flex: 1;
  position: relative;
}

.bar-label {
  position: absolute;
  bottom: 4cqw;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 2.1cqw;
  letter-spacing: 0.16em;
  color: rgba(0, 0, 0, 0.72);
  white-space: nowrap;
}

.bar.dark .bar-label {
  color: rgba(255, 255, 255, 0.82);
}

.bars-plate {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  border: 0.4cqw solid #fff;
  color: #fff;
  font-family: var(--mono);
  font-size: 4cqw;
  letter-spacing: 0.4em;
  padding: 2.4cqw 5cqw 2.4cqw 5.4cqw;
  white-space: nowrap;
}

.bars-footer {
  height: 16cqh;
  display: grid;
  place-items: center;
  background: #101010;
  color: #b9b4a6;
  font-family: var(--mono);
  font-size: 2.3cqw;
  letter-spacing: 0.12em;
  padding: 0 4cqw;
  text-align: center;
}

/* ---- void ------------------------------------------------------------ */

.seg-void {
  background: #000;
  display: grid;
  place-items: center;
}

.void-line {
  font-family: var(--mono);
  font-size: 3.4cqw;
  letter-spacing: 0.32em;
  text-align: center;
  padding: 0 8cqw;
  color: #9fb8a8;
  text-shadow: 0 0 14px rgba(140, 220, 170, 0.35);
  animation: void-in 1.6s ease both;
}

@keyframes void-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- bulletin -------------------------------------------------------- */

.seg-bulletin {
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    #565c4c;
  display: flex;
  flex-direction: column;
}

.bulletin-heading {
  align-self: center;
  margin-top: 3cqw;
  background: linear-gradient(180deg, #d8d3c4, #b7b2a2);
  color: #3a382e;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 2.9cqw;
  letter-spacing: 0.34em;
  padding: 1cqw 3.4cqw;
  border-radius: 0.4cqw;
  box-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.35);
}

.bulletin-wall {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6cqw;
  align-content: center;
  padding: 3cqw 5cqw 5cqw;
}

.note {
  background: #efe9d8;
  color: #26221a;
  padding: 2.4cqw 2.8cqw;
  font-family: var(--mono);
  font-size: 2.15cqw;
  line-height: 1.5;
  box-shadow: 0 0.8cqw 1.8cqw rgba(0, 0, 0, 0.4);
}

.note:nth-child(1) { transform: rotate(-1.3deg); }
.note:nth-child(2) { transform: rotate(0.9deg); background: #f2ecd9; }
.note:nth-child(3) { transform: rotate(-0.5deg); background: #e9e2ce; }
.note:nth-child(4) { transform: rotate(1.4deg); }

.note-body {
  margin: 0;
}

.note-replies {
  margin-top: 1.6cqw;
  display: flex;
  flex-direction: column;
  gap: 0.9cqw;
  align-items: flex-start;
}

.note-reply {
  background: #fdf7c0;
  font-family: var(--script);
  font-size: 2.2cqw;
  padding: 0.5cqw 1.6cqw;
  transform: rotate(-0.8deg);
  box-shadow: 0 0.3cqw 0.8cqw rgba(0, 0, 0, 0.3);
}

.note-reply:nth-child(even) {
  transform: rotate(1deg);
  margin-left: 2.4cqw;
}

/* ---- cam ------------------------------------------------------------- */

.seg-cam {
  background: #000;
  color: #e6f2e6;
  font-family: var(--mono);
}

.cam-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.05) brightness(0.9);
}

.cam-label {
  position: absolute;
  top: 3.4cqw;
  left: 3.6cqw;
  font-size: 2.6cqw;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  gap: 1.2cqw;
}

.cam-rec {
  width: 1.6cqw;
  height: 1.6cqw;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 6px rgba(255, 59, 48, 0.9);
  animation: rec-blink 1.6s steps(1) infinite;
}

@keyframes rec-blink {
  50% { opacity: 0.15; }
}

.cam-timecode {
  position: absolute;
  top: 3.4cqw;
  right: 3.6cqw;
  font-size: 2.6cqw;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.8);
}

.cam-note {
  position: absolute;
  right: 4cqw;
  bottom: 16cqh;
  width: 30cqw;
  background: #f5eeb0;
  color: #3a3524;
  font-size: 1.85cqw;
  line-height: 1.45;
  padding: 1.8cqw 2cqw;
  transform: rotate(1.6deg);
  box-shadow: 0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.55);
}

.cam-note p {
  margin: 0 0 1cqw;
}

.cam-note p:last-child {
  margin-bottom: 0;
}

.cam-event {
  position: absolute;
  bottom: 5cqh;
  left: 50%;
  transform: translateX(-50%);
  max-width: 84%;
  background: rgba(0, 0, 0, 0.72);
  color: #dfe8df;
  font-size: 2.5cqw;
  padding: 1cqw 2.4cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- still ----------------------------------------------------------- */

.seg-still {
  background: #000;
}

.seg-still.no-src {
  background: radial-gradient(ellipse 90% 80% at 50% 45%, #1a150e 0%, #0a0806 75%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.still-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.still-captions {
  position: absolute;
  bottom: 6cqh;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0 2px 6px #000;
}

.seg-still.no-src .still-captions {
  position: static;
  text-shadow: none;
}

.still-caption {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 4cqw;
  letter-spacing: 0.26em;
  color: #f0ead8;
}

.seg-still.no-src .still-caption {
  font-size: 5cqw;
}

.still-subcaption {
  margin-top: 1.2cqw;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.9cqw;
  color: #c9c2ae;
}

.lower-third {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6cqw 4.5cqw 2.6cqw;
  background: linear-gradient(transparent, rgba(5, 8, 20, 0.94) 42%);
}

.lt-show {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 4.4cqw;
  letter-spacing: 0.1em;
  color: #fff;
}

.lt-detail {
  margin-top: 0.6cqw;
  font-size: 2.7cqw;
  color: #ffd27a;
}

.lt-disclaimer {
  margin-top: 1.2cqw;
  font-size: 1.9cqw;
  letter-spacing: 0.06em;
  color: #a9b0c4;
}

/* ---- gallery --------------------------------------------------------- */

.seg-gallery {
  background: #000;
}

.seg-gallery.gallery-empty {
  background: radial-gradient(ellipse 90% 80% at 50% 45%, #12100b 0%, #080604 75%);
}

.gal-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gal-caption {
  position: absolute;
  bottom: 10cqh;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 3.4cqw;
  letter-spacing: 0.24em;
  color: #f0ead8;
  text-shadow: 0 2px 6px #000;
}

.gal-caption.hidden {
  display: none;
}

.gal-dots {
  position: absolute;
  bottom: 4.5cqh;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 1.6cqw;
}

.gal-dot {
  width: 1.3cqw;
  height: 1.3cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}

.gal-dot.on {
  background: #fff;
}

.gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 3.6cqw;
  line-height: 1;
  cursor: pointer;
}

.gal-arrow.prev {
  left: 3cqw;
}

.gal-arrow.next {
  right: 3cqw;
}

/* ---- video ----------------------------------------------------------- */

.seg-video {
  background: #000;
}

.vid-el,
.vid-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- locked ---------------------------------------------------------- */

.seg-locked {
  background: #000;
}

/* ---- reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .board-ticker-track {
    animation: none;
  }

  .ts-laugh,
  .cam-rec {
    animation: none;
  }

  .void-line {
    animation: none;
  }
}