/* /tv3: a second cut of the /tv board, 5 Oct 2026 (the owner: "can you come up
   with a new more efficient layout please? dont change it just make a v2 link
   i can look at"). Not a fork: the server sends tv2.html with this sheet added
   after tv2.css, so it is the same page, the same script and the same data.
   Delete the /tv3 route and this file and nothing else notices.

   What is different from /tv:
   - the stream time band and the month half of the bottom card are one card,
     "hours": tonight on top, the month at its foot. Two thin full-width bands
     that were mostly empty are gone.
   - "the site" is a full card of its own, beside the room card, so "is it us
     or is it the site" is read left to right.
   - the room that frees goes to the chart and, on portrait, to two more rows
     in each list.

   How it is done without touching the DOM: .pair-time, .pair-lists and
   .zone.plan become display:contents, every card is placed by a named grid
   area, and the month block sits in the same area as the time card, pinned to
   its foot (the time card is the surface, the month block is drawn over it).
   If either grows, check they do not meet: tv-shoot.py does.

   Only the ordinary board is re-cut. Show mode (main[data-show]) is tv2.css
   untouched, which is why every rule here sits under main:not([data-show]).
   Row counts are --rows-lists and --rows-site on main, read by tv2.js. */

main:not([data-show]) .pair-time,
main:not([data-show]) .pair-lists,
main:not([data-show]) .zone.plan { display: contents; }
main:not([data-show]) .ribbon { grid-area: ribbon; }
main:not([data-show]) .zone.money { grid-area: money; }
main:not([data-show]) .zone.time { grid-area: hours; }
main:not([data-show]) #month-air { grid-area: hours; }
main:not([data-show]) .zone.room { grid-area: room; }
main:not([data-show]) #site-half { grid-area: site; }
main:not([data-show]) .zone.ladder { grid-area: ladder; }
main:not([data-show]) .zone.chart { grid-area: chart; }
main:not([data-show]) .zone.tips { grid-area: tips; }
main:not([data-show]) .zone.spenders { grid-area: spenders; }

/* ---- hours: tonight on top, the month at the foot ------------------------ */
main:not([data-show]) .zone.time { justify-content: flex-start; gap: 12px; padding: var(--pad); }
main:not([data-show]) .time-cell { flex: 0 0 auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; }
/* Up to seven characters, "12h 14m". */
main:not([data-show]) .time-cell .fig { font-size: clamp(var(--sec), 21cqi, 84px); }
main:not([data-show]) .time-notes,
main:not([data-show]) .time-notes:has(#show-plan[hidden]) { align-self: stretch; text-align: left; gap: 2px; }
main:not([data-show]) .time-cell .sub { text-align: left; white-space: normal; }
/* The card is a column here, never a band: the show plan takes the short
   form the wide strip already uses. */
main:not([data-show]) #show-plan .b-hide { display: none; }
main:not([data-show]) .air-track { position: static; flex: 0 0 auto; }
/* .zone.time is position:relative, so the block needs lifting over it. */
main:not([data-show]) #month-air { position: relative; z-index: 1; align-self: end; margin: 0 var(--pad) var(--pad); padding-top: 12px; border-top: 1px solid var(--line); }
main:not([data-show]) #month-air .zone-head { flex-wrap: wrap; gap: 2px 12px; }
main:not([data-show]) #month-air .ma-need { margin-left: 0; flex-basis: 100%; }

/* ---- the site: a card of its own ---------------------------------------- */
main:not([data-show]) #site-half { padding: var(--pad); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
main:not([data-show]) #site-half .ma-need { margin-left: 0; }
main:not([data-show]) { --rows-site: 5; }
/* Two-line rows (the .rows.two-line shape): the card is a narrow column on C
   and B, and what a row is about runs under its name. */
main:not([data-show]) #site-rows .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lead fig" "meta fig"; row-gap: 2px; align-content: center; }

/* ---- C: landscape 1920x1080 ----------------------------------------------
   rows 56 + 480 + 480, as /tv. Row 1: money 470, hours 330, room 660, site
   348. Row 2: tips 520, spenders 520, chart 784. The two rows do not share
   column edges, so the grid has six tracks cut at every edge:
   470 + 34 + 280 + 224 + 420 + 348 = 1776, gaps 80 = 1856. */
main:not([data-show]) {
  grid-template-columns: 470fr 34fr 280fr 224fr 420fr 348fr;
  grid-template-rows: 56px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "ribbon ribbon ribbon ribbon ribbon ribbon"
    "money hours hours room room site"
    "tips tips spenders spenders chart chart";
}
/* Three figures across 624px, viewers the widest: six characters in a 224px
   cell. The card is 480 tall here (354 on /tv), so the call's sentence gets
   its own line under the chip instead of being cut short beside it. */
main:not([data-show]) .room-figs { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, 1fr); }
main:not([data-show]) .room-figs .fig { font-size: clamp(40px, 28cqi, 64px); }
main:not([data-show]) .room-figs .fig.narrow { font-size: clamp(36px, 21cqi, 50px); }
main:not([data-show]) .tc-text { flex-basis: auto; }
main:not([data-show]) #month-air .ma-days { height: 56px; }

/* ---- A: portrait strip 1280x2160 -------------------------------------------
   rows 80 + 350 + 490 + 96 + 492 + 540 = 2048, gaps 80, pad 32 = 2160.
   money across the top as on /tv; room 760 beside the site 472; the ladder;
   chart 760 beside hours 472; tips and spenders 616 each, eight rows (seven
   on /tv). The hours card needs about 482: tonight 227, the month 223.
   Tracks 616 + 128 + 472 = 1216, gaps 32 = 1248: the lists split down the
   middle, the cards above them split 760 to 472. */
@media (max-aspect-ratio: 1/1) {
  main:not([data-show]) {
    --rows-lists: 8;
    --rows-site: 4;
    grid-template-columns: 616fr 128fr 472fr;
    grid-template-rows: 80px 350fr 490fr 96fr 492fr 540fr;
    grid-template-areas:
      "ribbon ribbon ribbon"
      "money money money"
      "room room site"
      "ladder ladder ladder"
      "chart chart hours"
      "tips spenders spenders";
  }
  main:not([data-show]) .cell.hero .fig { font-size: clamp(var(--hero-min), 25cqi, 160px); }
  /* The room card is 760 wide here, the shape it has on the wide strip, so it
     takes that strip's rules: three figures across, the call text on its own
     line, two rows of pills with the two that repeat the figures left out. */
  main:not([data-show]) .room-figs { flex: 0 0 auto; gap: 8px var(--gap); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, 1fr); }
  main:not([data-show]) .room-figs .lbl { font-size: 22px; }
  main:not([data-show]) .room-figs .lbl .age { font-size: inherit; }
  main:not([data-show]) .room-figs .cell { gap: 2px; }
  main:not([data-show]) .room-figs .fig { font-size: clamp(40px, 26cqi, 66px); }
  main:not([data-show]) .room-figs .fig.narrow { font-size: clamp(36px, 20cqi, 52px); }
  main:not([data-show]) .tc-text { flex-basis: auto; font-size: 24px; }
  main:not([data-show]) .tc-light { font-size: 22px; padding: 0 7px; }
  main:not([data-show]) .tc-lights { gap: 5px; max-height: 67px; overflow: hidden; }
  main:not([data-show]) .tc-light[data-key="placement"], main:not([data-show]) .tc-light[data-key="viewers"] { display: none; }
  main:not([data-show]) .room-foot { line-height: 1.2; }
  /* The goal bar sits beside its text here, not under it: the card has no
     spare 16px of height (PIM-122, 11 Oct 2026). */
  main:not([data-show]) .room-foot #goal-line { flex-direction: row; align-items: center; gap: 14px; }
  main:not([data-show]) .room-foot #goal-line .goal-text { flex: 0 1 auto; }
  main:not([data-show]) .room-foot #goal-line .goal-track { flex: 1 0 160px; }
  main:not([data-show]) #month-air .ma-days { height: 40px; }
}

/* ---- B: wide strip 3840x720 -------------------------------------------------
   one row of seven cards: 700 + 360 + 640 + 400 + 744 + 432 + 432 = 3708,
   gaps 96, pad 32 = 3836. */
@media (min-aspect-ratio: 3/1) {
  main:not([data-show]) {
    grid-template-columns: 700fr 360fr 640fr 400fr 744fr 432fr 432fr;
    grid-template-rows: 56px minmax(0, 1fr);
    grid-template-areas:
      "ribbon ribbon ribbon ribbon ribbon ribbon ribbon"
      "money hours room site chart tips spenders";
  }
  main:not([data-show]) .time-cell .fig { font-size: clamp(var(--sec), 21cqi, 84px); }
  main:not([data-show]) .room-figs .fig { font-size: clamp(40px, 26cqi, 60px); }
  main:not([data-show]) .room-figs .fig.narrow { font-size: clamp(36px, 20cqi, 48px); }
  main:not([data-show]) #month-air .ma-days { height: 48px; }
  /* The room card is 616 tall here against 496 on /tv: every pill is back and
     the four blocks spread over the height. */
  main:not([data-show]) .zone.room { justify-content: space-between; }
  main:not([data-show]) .tc-lights { max-height: none; }
  main:not([data-show]) .tc-light[data-key="placement"], main:not([data-show]) .tc-light[data-key="viewers"] { display: inline-block; }
}