/* ═══════════════════════════════════════════════════════════════════════════
   TV — Office Pipeline Blueprint
   Live ambient information radiator. Cyanotype-blueprint aesthetic with
   drafting-grid background, stencil typography, and FLIP-animated job
   cards that drift between stage columns when transitions fire.

   Intended viewport: 1920×1080 office TV, 10-20 ft viewing distance.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Cyanotype palette */
  --tv-bg-1: #0a1f3d;
  --tv-bg-2: #0c2547;
  --tv-bg-3: #061a35;
  --tv-ink: #e4ecf7;
  --tv-ink-dim: #7d97bd;
  --tv-ink-deep: #4d6c95;
  --tv-grid-minor: rgba(196, 219, 255, 0.045);
  --tv-grid-major: rgba(196, 219, 255, 0.085);
  --tv-card-bg: rgba(8, 28, 56, 0.55);
  --tv-card-border: rgba(196, 219, 255, 0.18);
  --tv-card-inset: rgba(196, 219, 255, 0.06);

  /* Pencil + paper accents */
  --tv-gold: #d4a949;
  --tv-gold-hi: #f0c66a;
  --tv-gold-soft: rgba(212, 169, 73, 0.18);

  /* Stage stripe colors */
  --tv-s-lead: #8aabd6;
  --tv-s-visit: #5ab0f0;
  --tv-s-quote: #22cce6;
  --tv-s-sold: #7ec98c;
  --tv-s-prep: #d4b66a;
  --tv-s-sched: #f5a648;
  --tv-s-build: #fb8c3a;
  --tv-s-punch: #f5d062;

  /* Typography */
  --tv-font-stencil:
    "Big Shoulders Stencil Display", "Arial Narrow", sans-serif;
  --tv-font-mono: "DM Mono", "JetBrains Mono", ui-monospace, monospace;
  --tv-font-hand: "Architects Daughter", "Comic Sans MS", cursive;
}

/* ─── Reset within TV scope ─────────────────────────────────────────────── */
html[data-tv="true"],
html[data-tv="true"] body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  cursor: none;
}

.tv-body {
  font-family: var(--tv-font-mono);
  color: var(--tv-ink);
  background: radial-gradient(
    ellipse at center top,
    var(--tv-bg-2) 0%,
    var(--tv-bg-1) 55%,
    var(--tv-bg-3) 100%
  );
  font-feature-settings:
    "tnum" 1,
    "ss01" 1;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ─── Frame ─────────────────────────────────────────────────────────────── */
.tv-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  /* header · sparkline-strip · board · side-row · ticker · footer */
  grid-template-rows: 80px 48px minmax(0, 1fr) 175px 42px 58px;
  gap: 0;
  padding: 18px 30px 14px 30px;
  box-sizing: border-box;
}

/* ─── Background layers (grid, noise, vignette) ─────────────────────────── */
.tv-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--tv-grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tv-grid-minor) 1px, transparent 1px),
    linear-gradient(to right, var(--tv-grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tv-grid-major) 1px, transparent 1px);
  background-size:
    16px 16px,
    16px 16px,
    96px 96px,
    96px 96px;
  background-position: 0 0;
  animation: tv-grid-breathe 12s ease-in-out infinite;
}

@keyframes tv-grid-breathe {
  0%,
  100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}

.tv-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.93 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.tv-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(
      ellipse at center,
      transparent 55%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25) 0%,
      transparent 8%,
      transparent 92%,
      rgba(0, 0, 0, 0.25) 100%
    );
}

/* ─── Header ────────────────────────────────────────────────────────────── */
.tv-header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  border-bottom: 1px dashed rgba(196, 219, 255, 0.16);
  padding-bottom: 16px;
}

.tv-monogram {
  display: flex;
  align-items: baseline;
  font-family: var(--tv-font-stencil);
  font-weight: 900;
  font-size: 62px;
  letter-spacing: -2px;
  color: var(--tv-ink);
  line-height: 1;
  text-shadow: 0 0 24px rgba(212, 169, 73, 0.15);
}
.tv-mono-s {
  color: var(--tv-ink);
}
.tv-mono-slash {
  color: var(--tv-gold);
  margin: 0 2px;
  font-size: 0.85em;
}
.tv-mono-c {
  color: var(--tv-ink);
}

.tv-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tv-title-main {
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 6px;
  color: var(--tv-ink);
  line-height: 1;
}
.tv-title-sub {
  font-family: var(--tv-font-mono);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--tv-ink-dim);
  text-transform: uppercase;
}

.tv-meta {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 16px;
  align-items: center;
  text-align: right;
}
.tv-date {
  font-family: var(--tv-font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--tv-ink-dim);
}
.tv-clock {
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  font-size: 38px;
  color: var(--tv-ink);
  letter-spacing: 3px;
  line-height: 1;
  font-feature-settings: "tnum" 1;
  min-width: 160px;
}
.tv-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tv-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--tv-gold-hi);
  padding: 6px 12px;
  border: 1px solid var(--tv-gold-soft);
  border-radius: 2px;
}
.tv-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tv-gold-hi);
  box-shadow: 0 0 12px var(--tv-gold-hi);
  animation: tv-live-pulse 1.4s ease-in-out infinite;
}
@keyframes tv-live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

/* ─── Annotations strip ─────────────────────────────────────────────────── */
.tv-annot-strip {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--tv-font-hand);
  font-size: 14px;
  color: var(--tv-gold);
  letter-spacing: 1px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(196, 219, 255, 0.07);
}
.tv-annot-sep {
  color: var(--tv-ink-deep);
  opacity: 0.6;
}
.tv-annot {
  white-space: nowrap;
}

/* ─── Main board (pipeline columns) ─────────────────────────────────────── */
.tv-board {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
  padding: 20px 0 16px 0;
  min-height: 0;
  overflow: hidden;
}

.tv-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.tv-col-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.tv-col-label {
  font-family: var(--tv-font-stencil);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: 4px;
  line-height: 1;
  color: var(--tv-ink);
  text-shadow: 0 0 18px rgba(196, 219, 255, 0.12);
}
.tv-col-rule {
  position: relative;
  height: 2px;
  background: var(--tv-ink-deep);
}
.tv-col-count {
  font-family: var(--tv-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--tv-ink-dim);
  margin-top: 4px;
}
.tv-col-count::before {
  content: "N · ";
  opacity: 0.5;
}

.tv-col[data-stage="new_job"] .tv-col-rule {
  background: var(--tv-s-lead);
}
.tv-col[data-stage="sales_visit_scheduled"] .tv-col-rule {
  background: var(--tv-s-visit);
}
.tv-col[data-stage="estimate_sent"] .tv-col-rule {
  background: var(--tv-s-quote);
}
.tv-col[data-stage="sold"] .tv-col-rule {
  background: var(--tv-s-sold);
}
.tv-col[data-stage="pre_production"] .tv-col-rule {
  background: var(--tv-s-prep);
}
.tv-col[data-stage="scheduled"] .tv-col-rule {
  background: var(--tv-s-sched);
}
.tv-col[data-stage="in_progress"] .tv-col-rule {
  background: var(--tv-s-build);
}
.tv-col[data-stage="punch_list"] .tv-col-rule {
  background: var(--tv-s-punch);
}

.tv-col-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.tv-overflow {
  font-family: var(--tv-font-hand);
  font-size: 13px;
  color: var(--tv-gold);
  padding: 6px 4px;
  letter-spacing: 1px;
  border-top: 1px dashed rgba(196, 219, 255, 0.15);
  margin-top: 4px;
  text-align: center;
}

/* ─── Card ──────────────────────────────────────────────────────────────── */
.tv-card {
  position: relative;
  background: var(--tv-card-bg);
  border: 1px solid var(--tv-card-border);
  border-radius: 3px;
  padding: 12px 12px 10px 16px;
  box-shadow:
    inset 0 1px 0 var(--tv-card-inset),
    0 2px 16px rgba(0, 0, 0, 0.25);
  transition:
    transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s ease,
    box-shadow 0.6s ease,
    background 0.6s ease;
  will-change: transform;
  backdrop-filter: blur(1px);
}

.tv-card-stripe {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 2px 2px 0;
  background: var(--tv-ink-dim);
}
.tv-card[data-stage="new_job"] .tv-card-stripe {
  background: var(--tv-s-lead);
}
.tv-card[data-stage="sales_visit_scheduled"] .tv-card-stripe {
  background: var(--tv-s-visit);
}
.tv-card[data-stage="estimate_sent"] .tv-card-stripe {
  background: var(--tv-s-quote);
}
.tv-card[data-stage="sold"] .tv-card-stripe {
  background: var(--tv-s-sold);
}
.tv-card[data-stage="pre_production"] .tv-card-stripe {
  background: var(--tv-s-prep);
}
.tv-card[data-stage="scheduled"] .tv-card-stripe {
  background: var(--tv-s-sched);
}
.tv-card[data-stage="in_progress"] .tv-card-stripe {
  background: var(--tv-s-build);
}
.tv-card[data-stage="punch_list"] .tv-card-stripe {
  background: var(--tv-s-punch);
}

.tv-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.tv-card-number {
  font-family: var(--tv-font-stencil);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--tv-ink);
  line-height: 1;
  font-feature-settings: "tnum" 1;
}

.tv-card-svc {
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  font-size: 13px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--tv-bg-1);
  letter-spacing: 0;
}
.tv-card-svc--deck {
  background: var(--tv-s-prep);
}
.tv-card-svc--porch {
  background: var(--tv-s-sched);
}
.tv-card-svc--fence {
  background: var(--tv-s-sold);
}
.tv-card-svc--patio {
  background: var(--tv-s-quote);
}

.tv-card-name {
  font-family: var(--tv-font-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--tv-ink);
  margin: 6px 0 4px 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  gap: 8px;
}

.tv-card-rep {
  font-family: var(--tv-font-hand);
  font-size: 14px;
  color: var(--tv-gold);
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(212, 169, 73, 0.4);
  padding-bottom: 1px;
}

.tv-card-micro {
  font-family: var(--tv-font-hand);
  font-size: 12px;
  color: var(--tv-ink-dim);
  letter-spacing: 1px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Card states ──────────────────────────────────────────────────────── */
.tv-card--just-moved {
  background: linear-gradient(
    135deg,
    var(--tv-gold-soft),
    var(--tv-card-bg) 60%
  );
  border-color: var(--tv-gold);
  box-shadow:
    inset 0 1px 0 var(--tv-gold-soft),
    0 0 32px var(--tv-gold-soft),
    0 8px 24px rgba(0, 0, 0, 0.35);
}
.tv-card--just-moved .tv-card-number {
  text-shadow: 0 0 16px var(--tv-gold-hi);
}

.tv-card--new {
  animation: tv-card-materialize 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes tv-card-materialize {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.92);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tv-card--leaving {
  animation: tv-card-leave 0.6s ease-in both;
}
@keyframes tv-card-leave {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}

/* ─── FLIP fly layer ───────────────────────────────────────────────────── */
.tv-fly-layer {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

/* ─── Margin decorations ────────────────────────────────────────────────── */
.tv-margin-left,
.tv-margin-right {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  font-family: var(--tv-font-hand);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--tv-gold);
}
.tv-margin-left {
  left: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
}
.tv-margin-right {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
}

.tv-scale-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tv-scale-tick {
  width: 32px;
  height: 6px;
  border: 1px solid var(--tv-gold);
}
.tv-scale-tick:nth-child(odd) {
  background: var(--tv-gold);
}
.tv-scale-label {
  margin-left: 10px;
  opacity: 0.7;
}

.tv-compass {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid var(--tv-gold);
  border-radius: 50%;
}
.tv-compass-needle {
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 50%;
  width: 1px;
  background: var(--tv-gold);
  transform: translateX(-50%);
}
.tv-compass-needle::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--tv-gold);
}
.tv-compass-n {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--tv-font-stencil);
  font-size: 12px;
  font-weight: 700;
  color: var(--tv-gold);
}

/* ─── Footer · drafting title block ─────────────────────────────────────── */
.tv-footer {
  position: relative;
  z-index: 5;
  border-top: 1px dashed rgba(196, 219, 255, 0.16);
  padding-top: 12px;
}

.tv-titleblock {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(196, 219, 255, 0.18);
  background: rgba(8, 28, 56, 0.4);
}
.tv-tb-cell {
  padding: 8px 14px;
  border-right: 1px solid rgba(196, 219, 255, 0.12);
}
.tv-tb-cell:last-child {
  border-right: none;
}
.tv-tb-label {
  font-family: var(--tv-font-mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--tv-ink-deep);
  margin-bottom: 3px;
}
.tv-tb-value {
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--tv-ink);
}
.tv-tb-status {
  color: var(--tv-gold-hi);
}

/* ═══════════════════════════════════════════════════════════════════════
   PASS 2 — ALIVE: weather, sparkline, rep dots, leaderboard, comms,
   pulse, KPI mini, ticker, empty-column, milestone banner, callouts.
   All append-only; nothing above is modified.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Header: weather badge inserted between title and meta ──────────── */
.tv-header {
  grid-template-columns: auto 1fr auto auto;
}
.tv-weather {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 4px 14px;
  border-left: 1px dashed rgba(196, 219, 255, 0.16);
  border-right: 1px dashed rgba(196, 219, 255, 0.16);
  font-family: var(--tv-font-mono);
}
.tv-weather-icon {
  font-family: var(--tv-font-stencil);
  font-size: 26px;
  line-height: 1;
  color: var(--tv-gold-hi);
}
.tv-weather-temp {
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  font-size: 18px;
  color: var(--tv-ink);
  letter-spacing: 1px;
}
.tv-weather-desc {
  font-family: var(--tv-font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--tv-ink-deep);
  margin-top: 2px;
}

/* ─── Strip: annotations + sparkline + rep dots ───────────────────────── */
.tv-strip {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 4px 0 8px 0;
  border-bottom: 1px solid rgba(196, 219, 255, 0.07);
}
.tv-annot-block {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--tv-font-hand);
  font-size: 14px;
  color: var(--tv-gold);
  letter-spacing: 1px;
}

.tv-sparkline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tv-sparkline svg {
  display: block;
  overflow: visible;
}
.tv-spark-line {
  fill: none;
  stroke: var(--tv-gold-hi);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tv-spark-fill {
  fill: var(--tv-gold-soft);
  stroke: none;
}
.tv-spark-label {
  font-family: var(--tv-font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--tv-ink-deep);
}

.tv-rep-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.tv-rep-dot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0.35;
  transition: opacity 0.5s ease;
}
.tv-rep-dot--active {
  opacity: 1;
}
.tv-rep-dot-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tv-ink-dim);
  box-shadow: none;
  transition:
    background 0.5s ease,
    box-shadow 0.5s ease;
}
.tv-rep-dot--active .tv-rep-dot-inner {
  background: var(--tv-gold-hi);
  box-shadow: 0 0 10px var(--tv-gold-hi);
  animation: tv-rep-pulse 2.2s ease-in-out infinite;
}
@keyframes tv-rep-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
}
.tv-rep-dot-label {
  font-family: var(--tv-font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--tv-ink-dim);
}

/* ─── Board adjustments: tighter cards to make room for the side row ── */
.tv-card {
  padding: 9px 10px 8px 14px;
}
.tv-card-number {
  font-size: 22px;
}
.tv-card-name {
  font-size: 13px;
  margin: 4px 0 3px 0;
}

/* ─── Empty-column drafting cartouche ────────────────────────────────── */
.tv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 6px;
  opacity: 0.55;
}
.tv-empty-svg {
  width: 70px;
  height: 70px;
  margin-bottom: 8px;
}
.tv-empty-stroke {
  fill: none;
  stroke: var(--tv-gold);
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: tv-empty-draw 6s linear infinite;
}
.tv-empty-tick {
  stroke: var(--tv-gold);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: tv-empty-draw 6s linear infinite 1.5s;
}
@keyframes tv-empty-draw {
  0% {
    stroke-dashoffset: 100;
  }
  35% {
    stroke-dashoffset: 0;
  }
  85% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -100;
  }
}
.tv-empty-label {
  font-family: var(--tv-font-hand);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--tv-gold);
}

/* ─── Side row: 3 panels (leaderboard | comms | pulse + KPIs) ────────── */
.tv-side {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.9fr;
  gap: 14px;
  padding: 8px 0 6px 0;
  border-top: 1px dashed rgba(196, 219, 255, 0.12);
  min-height: 0;
}
.tv-panel {
  display: flex;
  flex-direction: column;
  background: rgba(8, 28, 56, 0.45);
  border: 1px solid rgba(196, 219, 255, 0.14);
  border-radius: 3px;
  padding: 6px 12px 8px 12px;
  min-height: 0;
  overflow: hidden; /* contains panel rows that would otherwise spill into the ticker zone */
}
.tv-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(196, 219, 255, 0.18);
}
.tv-panel-title {
  font-family: var(--tv-font-stencil);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--tv-ink);
}
.tv-panel-sub {
  font-family: var(--tv-font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--tv-ink-deep);
}

/* Leaderboard */
.tv-leader-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tv-leader-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 1px 3px;
  border-radius: 2px;
  font-family: var(--tv-font-mono);
}
.tv-leader-row--placeholder {
  color: var(--tv-ink-deep);
  font-style: italic;
}
.tv-leader-rank {
  font-family: var(--tv-font-stencil);
  font-weight: 900;
  font-size: 15px;
  color: var(--tv-ink-dim);
  text-align: center;
  line-height: 1;
}
.tv-leader-row:first-child .tv-leader-rank {
  color: var(--tv-gold-hi);
  text-shadow: 0 0 8px var(--tv-gold-hi);
}
.tv-leader-row:first-child::before {
  content: "♛";
  position: absolute;
  margin-left: -16px;
  margin-top: -8px;
  color: var(--tv-gold-hi);
  font-size: 11px;
  opacity: 0.85;
}
.tv-leader-rep {
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--tv-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.tv-leader-rep-count {
  font-family: var(--tv-font-mono);
  font-size: 10px;
  color: var(--tv-ink-deep);
  margin-left: 4px;
}
.tv-leader-amt {
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--tv-gold);
  font-feature-settings: "tnum" 1;
  line-height: 1.2;
}
.tv-leader-row:first-child .tv-leader-amt {
  color: var(--tv-gold-hi);
}

/* Comms feed */
.tv-comms-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.tv-comms-row {
  display: grid;
  grid-template-columns: 42px 36px 18px 1fr;
  align-items: baseline;
  gap: 6px;
  font-family: var(--tv-font-mono);
  font-size: 11px;
  color: var(--tv-ink);
}
.tv-comms-row--placeholder {
  color: var(--tv-ink-deep);
  font-style: italic;
  font-family: var(--tv-font-hand);
}
.tv-comms-ts {
  color: var(--tv-ink-deep);
  letter-spacing: 1px;
}
.tv-comms-kind {
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 10px;
  color: var(--tv-ink-dim);
}
.tv-comms-kind--sms {
  color: var(--tv-s-quote);
}
.tv-comms-kind--email {
  color: var(--tv-s-prep);
}
.tv-comms-kind--ime {
  color: var(--tv-s-build);
}
.tv-comms-dir {
  color: var(--tv-gold);
  font-weight: 700;
}
.tv-comms-with {
  color: var(--tv-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Webhook pulse + KPI mini */
.tv-pulse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.tv-pulse-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid rgba(196, 219, 255, 0.12);
  border-radius: 2px;
}
.tv-pulse-label {
  font-family: var(--tv-font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--tv-ink-deep);
}
.tv-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tv-ink-deep);
  box-shadow: none;
  transition:
    background 0.4s,
    box-shadow 0.4s;
}
.tv-pulse-cell--hot .tv-pulse-dot {
  background: var(--tv-gold-hi);
  box-shadow: 0 0 12px var(--tv-gold-hi);
  animation: tv-pulse-blink 0.9s ease-in-out infinite;
}
@keyframes tv-pulse-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}
.tv-pulse-count {
  font-family: var(--tv-font-stencil);
  font-weight: 900;
  font-size: 16px;
  color: var(--tv-ink);
}
.tv-kpi-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(196, 219, 255, 0.14);
}
.tv-kpi-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tv-kpi-label {
  font-family: var(--tv-font-mono);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--tv-ink-deep);
}
.tv-kpi-value {
  font-family: var(--tv-font-stencil);
  font-weight: 900;
  font-size: 17px;
  color: var(--tv-gold-hi);
  font-feature-settings: "tnum" 1;
}
.tv-kpi-value--bump {
  animation: tv-kpi-bump 0.7s ease-out;
}
@keyframes tv-kpi-bump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
    color: var(--tv-gold-hi);
  }
  100% {
    transform: scale(1);
  }
}

/* ─── Bottom event ticker ────────────────────────────────────────────── */
.tv-ticker {
  position: relative;
  z-index: 10; /* sit above anything that might bleed from the side row */
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  /* Fully opaque so leaderboard rows above can't visually leak through */
  background: var(--tv-bg-1);
  border: 1px solid rgba(196, 219, 255, 0.18);
  border-radius: 3px;
  padding: 0 18px;
  height: 38px;
  margin-top: 4px; /* breathing room from the side row above */
}
.tv-ticker-prefix {
  flex: 0 0 auto;
  position: relative;
  z-index: 2; /* sit ABOVE the scrolling track so items can't bleed under */
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--tv-gold-hi);
  padding: 8px 18px 8px 0;
  margin-right: 8px;
  background: var(--tv-bg-1); /* opaque slab masks anything passing under */
  box-shadow: 8px 0 8px -4px var(--tv-bg-1); /* soft fade into the track */
  border-right: 1px dashed rgba(196, 219, 255, 0.25);
}
.tv-ticker-track {
  display: flex;
  align-items: center;
  gap: 38px;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; /* clip the scrolling text to the track's own area */
  animation: tv-ticker-scroll 90s linear infinite;
  font-family: var(--tv-font-mono);
  font-size: 13px;
  letter-spacing: 1px;
}
.tv-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--tv-ink);
}
.tv-ticker-item--placeholder {
  font-family: var(--tv-font-hand);
  color: var(--tv-ink-deep);
}
.tv-ticker-item-ts {
  color: var(--tv-ink-dim);
  letter-spacing: 2px;
}
.tv-ticker-item-tag {
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--tv-gold);
}
.tv-ticker-item-job {
  color: var(--tv-ink);
  font-weight: 500;
}
.tv-ticker-item-actor {
  color: var(--tv-ink-dim);
  font-family: var(--tv-font-hand);
  margin-left: 4px;
}
@keyframes tv-ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ─── Transition callouts (popovers above destination column) ────────── */
.tv-callouts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tv-callout {
  position: absolute;
  padding: 4px 10px;
  background: var(--tv-gold);
  color: var(--tv-bg-1);
  border-radius: 2px;
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 24px var(--tv-gold-soft);
  animation: tv-callout-life 8s ease-out forwards;
  white-space: nowrap;
  transform-origin: top left;
}
.tv-callout::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--tv-gold);
}
@keyframes tv-callout-life {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  8% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  85% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
}

/* ─── Milestone banner (one-shot) ────────────────────────────────────── */
.tv-overlays {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.tv-milestone {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 14px 38px;
  background: linear-gradient(
    135deg,
    var(--tv-gold) 0%,
    var(--tv-gold-hi) 60%,
    var(--tv-gold) 100%
  );
  border-radius: 3px;
  color: var(--tv-bg-1);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    0 0 80px var(--tv-gold-soft);
  z-index: 51;
}
.tv-milestone[data-shown="true"] {
  animation: tv-milestone-drop 9s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
.tv-milestone-icon {
  font-family: var(--tv-font-stencil);
  font-size: 38px;
  line-height: 1;
}
.tv-milestone-label {
  font-family: var(--tv-font-stencil);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 6px;
}
@keyframes tv-milestone-drop {
  0% {
    transform: translateX(-50%) translateY(-120%);
    opacity: 0;
  }
  8% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  88% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-120%);
    opacity: 0;
  }
}

/* ─── Card spotlight (one card grows briefly while idle) ─────────────── */
.tv-card--spotlight {
  background: linear-gradient(
    135deg,
    var(--tv-gold-soft) 0%,
    var(--tv-card-bg) 70%
  );
  border-color: var(--tv-gold);
  transform: scale(1.04);
  z-index: 6;
  box-shadow:
    inset 0 1px 0 var(--tv-gold-soft),
    0 0 32px var(--tv-gold-soft),
    0 12px 28px rgba(0, 0, 0, 0.4);
}
.tv-card--spotlight .tv-card-number {
  text-shadow: 0 0 14px var(--tv-gold-hi);
}

/* ─── Compass slow drift (ambient idle motion) ───────────────────────── */
.tv-compass {
  animation: tv-compass-drift 60s ease-in-out infinite;
}
@keyframes tv-compass-drift {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

/* ─── Column breathing (subtle width pulse based on count) ───────────── */
.tv-col[data-pressure="high"] {
  flex-grow: 1.06;
}
.tv-col[data-pressure="low"] {
  flex-grow: 0.96;
}
.tv-board {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  /* allow flex-like growth */
}

/* ─── Mode flash: subtle scan-line that sweeps once every ~45s ──────── */
.tv-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent,
    var(--tv-gold-soft),
    transparent
  );
  pointer-events: none;
  z-index: 3;
  animation: tv-scan 45s linear infinite;
  opacity: 0.7;
}
@keyframes tv-scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PASS 3 — POLISH: trails, hourly banner, burn-drift, reconnect,
   mobile fallback. Append-only; nothing above modified.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Trailing dimension-line layer (SVG, behind moving cards) ─────── */
.tv-trail-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 90;
  overflow: visible;
}
.tv-trail-line {
  fill: none;
  stroke: var(--tv-gold);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.85;
  animation: tv-trail-fade 6s ease-out forwards;
}
.tv-trail-arrow {
  fill: var(--tv-gold);
  opacity: 0.9;
  animation: tv-trail-fade 6s ease-out forwards;
}
@keyframes tv-trail-fade {
  0% {
    opacity: 0.85;
  }
  20% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}

/* ─── Hourly state-of-day banner (lighter weight than milestone) ──── */
.tv-hourly {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 28px;
  background: linear-gradient(
    135deg,
    rgba(212, 169, 73, 0.92) 0%,
    rgba(240, 198, 106, 1) 60%,
    rgba(212, 169, 73, 0.92) 100%
  );
  border-radius: 3px;
  color: var(--tv-bg-1);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.35),
    0 0 60px var(--tv-gold-soft);
  z-index: 49;
}
.tv-hourly[data-shown="true"] {
  animation: tv-hourly-drop 8s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
.tv-hourly-icon {
  font-family: var(--tv-font-stencil);
  font-size: 26px;
  line-height: 1;
}
.tv-hourly-label {
  font-family: var(--tv-font-stencil);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 4px;
}
@keyframes tv-hourly-drop {
  0% {
    transform: translateX(-50%) translateY(-120%);
    opacity: 0;
  }
  10% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  85% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-120%);
    opacity: 0;
  }
}

/* hidden HTML attribute must always win over display:inline-flex/flex */
.tv-reconnect[hidden],
.tv-milestone[hidden],
.tv-hourly[hidden] {
  display: none !important;
}

/* ─── Reconnect indicator (only shown when poll has failed ≥5 times) ── */
.tv-reconnect {
  position: absolute;
  top: 22px;
  right: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(8, 28, 56, 0.85);
  border: 1px solid rgba(245, 91, 91, 0.55);
  border-radius: 2px;
  font-family: var(--tv-font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: #f5b585;
  z-index: 60;
}
.tv-reconnect-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f5b585;
  box-shadow: 0 0 12px #f5b585;
  animation: tv-reconnect-pulse 0.9s ease-in-out infinite;
}
@keyframes tv-reconnect-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.75);
  }
}

/* ─── Burn-in drift (1-2px slow nudge on static elements) ──────────── */
.tv-monogram,
.tv-title,
.tv-col-label,
.tv-titleblock,
.tv-annot-block,
.tv-panel-title {
  animation: tv-burn-drift 720s linear infinite;
}
@keyframes tv-burn-drift {
  0% {
    transform: translate(0px, 0px);
  }
  20% {
    transform: translate(1.5px, -1px);
  }
  40% {
    transform: translate(-1.5px, 1.5px);
  }
  60% {
    transform: translate(2px, 0.5px);
  }
  80% {
    transform: translate(-1px, -1.5px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
/* Don't drift things that are positioned via transform (would conflict) */
.tv-milestone,
.tv-hourly {
  animation: none;
}

/* ─── Mobile / iPad fallback ───────────────────────────────────────── */
@media (max-width: 1400px) {
  /* Scale the whole 1920×1080 design into smaller viewports rather than
     rebuilding a responsive layout. The TV is the target; everything
     else gets a downsampled preview. */
  html[data-tv="true"] body {
    overflow: auto;
  }
  .tv-frame {
    width: 1920px;
    height: 1080px;
    transform-origin: top left;
    transform: scale(calc(100vw / 1920));
  }
}
@media (max-width: 700px) {
  /* Phone-portrait: show the placeholder card instead of a tiny grid. */
  .tv-frame {
    display: none;
  }
  html[data-tv="true"] body::before {
    content: "/tv is a 1920×1080 office-TV view.\A Open on a TV or wide monitor.";
    white-space: pre;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 24px;
    text-align: center;
    font-family: "DM Mono", monospace;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--tv-ink-dim);
  }
}