/* XFINALE — THE ROOMY CONSOLE (Gene, 2026-10-31: "the panel under PLOT
   ENGINEERS is hard to read and I can't easily find things. Fill the black
   space; make the TVs larger and the panel larger and more organized.")
   Desktop only (≥1101px). Phones keep their own layout untouched.
   1 · the wires leave the rail for a strip across the top of the deck
   2 · the rail widens, its type grows, its four buttons sit in a 2×2 grid,
       so the creator guide gets real height
   3 · the tube and the monitors grow into the space that was black */

.deckwires { display: none; }

@media (min-width: 1101px) {
  /* --fit-h: the height the console is laid out at. The short-desktop rules in
     console.css zoom the whole console out, so they lay it out taller. */
  :root { --rail-w: clamp(300px, 20vw, 380px); --fit-h: 100dvh; }

  /* ── 1 · the deck wires ── */
  .rail .wires, .rail .rail-wires-k, .rail .dial, .rail .rail-dial-k { display: none; }
  .rail__status { margin-top: 14px; }
  /* one line each, always: a strip that wraps steals the tube's height, so
     a narrow screen scrolls the strip sideways instead */
  .deckwires {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: safe center; gap: 8px;
    width: 100%; max-width: 1500px; flex: none;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 2px 0;
  }
  .deckwires::-webkit-scrollbar { display: none; }
  .deckwires > * { flex: none; }
  .deckwires__k {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.3em; color: var(--ink-faint); margin-right: 4px;
  }
  .deckwires .wires__link {
    font-size: 0.72rem; letter-spacing: 0.12em; padding: 9px 14px; border-radius: 999px;
    color: var(--ink); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
    background: color-mix(in srgb, var(--c) 7%, rgba(13, 8, 3, 0.7));
  }
  .deckwires .wires__link::before { width: 7px; height: 7px; }
  /* the shows ride the second strip as pills: channel number, name, flag */
  .deckwires--dial { margin-top: -6px; }
  .deckwires .dial__row { display: inline-flex; align-items: center; gap: 7px; min-height: 0; width: auto;
    padding: 7px 13px 7px 15px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    background: rgba(13, 8, 3, 0.7); }
  .deckwires .dial__row::before { top: 9px; bottom: 9px; left: 7px; }
  .deckwires .dial__name { font-size: 0.74rem; color: var(--ink); overflow: visible; }
  .deckwires .dial__ch { font-size: 0.6rem; }
  .deckwires .dial__glyph { display: none; }
  .deckwires .dial__flag { font-size: 0.52rem; }
  .deckwires .wires__link:hover, .deckwires .wires__link:focus-visible {
    background: color-mix(in srgb, var(--c) 20%, transparent); border-color: var(--c);
  }

  /* ── 2 · the rail: readable, grouped ── */
  .rail__brand { padding: 20px 20px 16px; }
  .wordmark__tag { font-size: 0.8rem; color: var(--ink-dim); }
  .wordmark__verse { font-size: 0.74rem; color: var(--ink-dim); }
  .dial__kicker { font-size: 0.62rem; letter-spacing: 0.26em; color: var(--ink-dim); margin-top: 16px; }
  .dial__glyph { font-size: 0.85rem; }
  .dial__flag { font-size: 0.56rem; }
  /* status: ON AIR, the count and the broadcast chip on one line */
  .rail__status { font-size: 0.68rem; flex-wrap: nowrap; gap: 8px; }
  .rail__status-txt, .rail__count { white-space: nowrap; }
  .rail__count { margin-left: 0; }
  .rail__count [data-i18n="channels"] { display: none; }
  .rail__count::after { content: " ch"; }
  .autopilot-chip { margin-left: auto; }
  .autopilot-chip { font-size: 0.6rem; padding: 5px 9px; }

  /* the four buttons: one 2×2 block instead of four full-width rows */
  .rail__brand { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .rail__brand > * { grid-column: 1 / -1; }
  .rail__brand > .strings-btn, .rail__brand > .imagine-btn,
  .rail__brand > .today-line, .rail__brand > .pulse-chip { grid-column: auto; margin-top: 8px; min-height: 52px; }
  .rail__brand > .hidden { display: none; }
  .strings-btn { font-size: 0.68rem; letter-spacing: 0.12em; line-height: 1.35; }
  .imagine-btn, .today-line, .pulse-chip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  .imagine-btn b, .today-line b, .pulse-chip b { font-size: 0.68rem; }
  .imagine-btn span, .today-line span, .pulse-chip span {
    font-size: 0.7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .rail__search { margin: 12px 20px; padding: 10px 14px; }
  .rail__search input { font-size: 0.82rem; }

  /* ── 3 · bigger tubes ── */
  .deck { gap: 14px; padding: 16px 24px; }
  .stage { gap: clamp(12px, 1.4vw, 24px); }
  .tv { width: min(100%, 1120px, calc((var(--fit-h) - 400px) * 4 / 3)); }
  .monitors { width: clamp(160px, 13.5vw, 280px); }
  /* the creator column stacks Instillious, three tubes and tonight's pattern:
     its tubes go widescreen and the pattern keeps three lines, so the column
     stands no taller than the main tube beside it */
  .monitors--creator .mini__screen { aspect-ratio: 16 / 9; }
  #thread-strip > div:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* if a short screen still overflows, spill downward, never off the top */
  .deck { justify-content: safe center; }
  .stage { align-items: safe center; }
  .mini__label { font-size: 0.64rem; }
  .controls { width: min(100%, 1120px); padding: 10px 18px; }
}

@media (min-width: 1101px) and (max-height: 950px) { :root { --fit-h: calc(100dvh / 0.86); } }
@media (min-width: 1101px) and (max-height: 820px) { :root { --fit-h: calc(100dvh / 0.74); } }
@media (min-width: 1101px) and (max-height: 700px) { :root { --fit-h: calc(100dvh / 0.64); } }

/* the show pills drop their channel numbers so the seven fit one line */
@media (min-width: 1101px) {
  .deckwires .dial__ch { display: none; }
  .deckwires .dial__row { padding: 7px 12px 7px 16px; }
  .deckwires .wires__link { padding: 8px 11px; }
}
/* up to 1200px tall: tonight's pattern keeps its title and names, and the
   creator column stays no taller than the tube */
@media (min-width: 1101px) and (max-height: 1199px) {
  #thread-strip > div:last-child { display: none; }
}

/* below 1600px the strips drop their labels and tighten so they fit one line */
@media (min-width: 1101px) and (max-width: 1599px) {
  .deckwires__k { display: none; }
  .deckwires .wires__link { font-size: 0.64rem; letter-spacing: 0.08em; padding: 7px 10px; }
  .deckwires .dial__name { font-size: 0.66rem; letter-spacing: 0.06em; }
  .deckwires .dial__row { padding: 6px 10px 6px 14px; }
}