/* Garage Board v2.3 — glanceable · 1 job per column · 10 ft / 30"
   1920×1080 + 1280×720 · no clip · no ellipsis on primary lines
*/
:root {
  --bg: #0a0604;
  --panel: #16100c;
  --ink: #fff7ee;
  --muted: #d8c0a8;
  --accent: #f0a84a;
  --red: #c62828;
  --line: #3a281c;
  --font: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --dur: 750ms;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font);
}
.hidden { display: none !important; }

/* Gate */
.gate {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(800px 400px at 50% 25%, #2a1610, #0a0604 70%);
}
.gate-card {
  width: min(540px, 92vw); text-align: center; padding: 36px 30px;
  background: var(--panel); border: 2px solid var(--line); border-radius: 18px;
}
.gate-mark { font-size: 48px; color: var(--accent); }
.gate-title { font-size: 30px; font-weight: 900; letter-spacing: .08em; margin: 10px 0; }
.gate-sub { font-size: 22px; color: var(--muted); margin-bottom: 20px; }
.gate-card input {
  width: 100%; font-size: 26px; padding: 12px; border-radius: 12px;
  border: 2px solid var(--line); background: #100a07; color: var(--ink); margin-bottom: 12px;
}
.gate-card button {
  width: 100%; font-size: 26px; font-weight: 800; padding: 12px; border: 0;
  border-radius: 12px; background: var(--accent); color: #1a0f0a; cursor: pointer;
}

/* Critical takeover */
.crit-takeover {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px; text-align: center;
  background: linear-gradient(180deg, #8a1414, #2a0606 60%, #100303 100%);
  animation: fadeIn var(--dur) ease both;
}
.crit-takeover.out { animation: fadeOut var(--dur) ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.ct-label {
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 900; letter-spacing: .3em; color: #ffc9c9;
}
.ct-vid {
  font-size: clamp(100px, 13vw, 150px);
  font-weight: 900; line-height: .9;
}
.ct-role {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 800; color: #ffd0d0; letter-spacing: .06em;
}
.ct-problem {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 850; max-width: 90vw;
}
.ct-next {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800; color: #ffd59a;
}
.ct-owner {
  margin-top: 6px;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 900; letter-spacing: .1em;
  background: #fff; color: #7a1212; padding: 8px 22px; border-radius: 12px;
}

/* Dashboard grid: banner ~25% · counts thin · columns flex · ticker ~9% */
.dash {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: minmax(22vh, 26vh) auto 1fr minmax(8vh, 10vh);
  overflow: hidden;
  background: radial-gradient(1000px 480px at 10% -5%, #26180f 0%, var(--bg) 50%);
}

/* Critical banner — high priority, ~25% height */
.banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 1.5vw, 24px);
  align-items: center;
  padding: clamp(10px, 1.5vh, 18px) clamp(14px, 1.6vw, 24px);
  background: linear-gradient(90deg, #7a1414 0%, #3a1212 40%, #1a100c 100%);
  border-bottom: 4px solid #a02828;
  min-width: 0; overflow: hidden;
}
.banner.is-crit { animation: bannerPulse 2.6s ease-in-out infinite; }
.banner.is-soft {
  background: linear-gradient(90deg, #2a2012, #16100c 55%, #100c08);
  border-bottom-color: var(--line);
  animation: none;
}
/* Amber — Service at Risk (FB-44) — not red Critical */
.banner.is-amber {
  background: linear-gradient(90deg, #8a5a10 0%, #4a3010 40%, #1a1208 100%);
  border-bottom: 4px solid #e0a020;
  animation: amberPulse 3s ease-in-out infinite;
}
.banner.is-amber .banner-tag { color: #ffe0a0; letter-spacing: .12em; }
.banner.is-amber .banner-needed { color: #ffe8b0; }
@keyframes amberPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
@keyframes bannerPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}
.banner-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.banner-tag {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 900; letter-spacing: .2em; color: #ffc9c9;
}
.banner-vid {
  font-size: clamp(64px, 8vw, 100px);
  font-weight: 900; line-height: .9;
  white-space: nowrap;
}
.banner-mid { min-width: 0; overflow: hidden; }
.banner-problem {
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 850; line-height: 1.1;
  /* no ellipsis — short summaries only */
  white-space: nowrap;
}
.banner-sub {
  display: flex; gap: clamp(12px, 1.5vw, 28px); align-items: center;
  margin-top: 6px; flex-wrap: wrap;
}
.banner-needed {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 750; color: #ffd0c8;
}
.banner-owner {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 900; letter-spacing: .06em;
  background: var(--accent); color: #1a0f0a;
  padding: 4px 16px; border-radius: 10px;
  white-space: nowrap;
}
.banner-clock { text-align: right; flex-shrink: 0; }
.clock {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 900;
}
.fresh {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 750; color: var(--muted); margin-top: 2px;
}
.stale {
  margin-top: 4px; display: inline-block;
  font-size: clamp(18px, 1.8vw, 24px); font-weight: 900;
  background: #5a1a1a; color: #ffd0d0; padding: 4px 12px; border-radius: 999px;
}

/* Large simple counters — separate from critical message */
.counts {
  display: flex; justify-content: center; gap: clamp(28px, 4vw, 64px);
  padding: clamp(4px, 0.8vh, 10px) 12px;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid var(--line);
}
.count { text-align: center; }
.count-n {
  display: block; font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 900; color: var(--accent); line-height: 1;
}
.count-l {
  display: block; font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 800; letter-spacing: .1em; color: var(--muted); margin-top: 2px;
}

/* Three columns · one job each */
.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(10px, 1.4vh, 16px) clamp(14px, 1.5vw, 22px);
  min-height: 0; overflow: hidden;
}
.cols.swap { animation: colSwap var(--dur) ease both; }
@keyframes colSwap {
  0% { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: none; }
}
.col {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: rgba(0,0,0,.25);
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: clamp(10px, 1.2vh, 14px);
  overflow: hidden;
}
.col-head {
  font-size: clamp(32px, 3.5vw, 48px); /* 42–50 target at 1080 */
  font-weight: 900; letter-spacing: .06em;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 6px; margin-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: uppercase;
}
.col-slot {
  flex: 1; min-height: 0; display: flex;
}
.job {
  flex: 1; width: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  background: var(--panel);
  border: 3px solid #4a3224;
  border-radius: 16px;
  padding: clamp(14px, 2vh, 22px) clamp(14px, 1.5vw, 20px);
  min-width: 0; overflow: hidden;
}
.job.crit-edge { border-color: #c62828; }
.job.empty {
  border-style: dashed; border-color: #2a2018; background: transparent;
  align-items: center; opacity: .4;
}
.job.empty::after {
  content: "—";
  font-size: clamp(40px, 4vw, 56px); color: var(--muted);
}
.job .vid {
  font-size: clamp(56px, 6.5vw, 88px); /* 72–90 target */
  font-weight: 900; line-height: .92;
  white-space: nowrap;
}
.job .problem {
  font-size: clamp(30px, 3.4vw, 46px); /* 40–48 target */
  font-weight: 800; line-height: 1.12;
  /* short summaries — no ellipsis */
  white-space: normal;
  max-height: 2.4em; overflow: hidden;
  text-transform: uppercase;
}
.job .next {
  font-size: clamp(26px, 2.9vw, 38px); /* 34–40 target */
  font-weight: 800; color: var(--accent); line-height: 1.15;
  white-space: normal;
  max-height: 2.4em; overflow: hidden;
}
.job .meta {
  font-size: clamp(22px, 2.2vw, 30px); /* 28–32 target */
  font-weight: 700; color: var(--muted);
  white-space: nowrap;
}

/* Ticker — slower, larger */
.ticker-wrap {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 14px;
  padding: 0 clamp(12px, 1.4vw, 20px);
  border-top: 2px solid var(--line);
  background: #100a07;
  overflow: hidden;
}
.ticker-lab {
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 900; letter-spacing: .16em; color: var(--muted);
}
.ticker-mask { overflow: hidden; min-width: 0; }
.ticker-track {
  display: inline-block;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 750;
  white-space: nowrap;
  padding-left: 100%;
  /* ~14s for a typical message width ≈ slower readable crawl */
  animation: ticker 70s linear infinite;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .crit-takeover, .crit-takeover.out, .banner.is-crit, .cols.swap, .ticker-track {
    animation: none !important;
  }
  .ticker-track { padding-left: 0; white-space: normal; }
}

@media (max-width: 1360px), (max-height: 800px) {
  .banner-vid { font-size: clamp(52px, 7vw, 72px); }
  .banner-problem { font-size: clamp(28px, 3.2vw, 36px); }
  .banner-needed, .banner-owner { font-size: clamp(20px, 2.2vw, 26px); }
  .col-head { font-size: clamp(28px, 3.2vw, 36px); }
  .job .vid { font-size: clamp(48px, 5.5vw, 64px); }
  .job .problem { font-size: clamp(26px, 3vw, 34px); }
  .job .next { font-size: clamp(24px, 2.6vw, 30px); }
  .job .meta { font-size: clamp(20px, 2vw, 26px); }
  .ticker-track { font-size: clamp(22px, 2.4vw, 28px); }
  .count-n { font-size: clamp(28px, 3vw, 36px); }
}