/*
 * The television only. Loaded after style.css on tv.showimo.com and never on
 * the site, so nothing here can reach a phone (spec section 13.4). Only what differs,
 * each rule with its reason.
 */

/* The tabs share the title row, at its far end, where the site keeps the
   Langless link and the two controls a remote cannot reach -- the owner's
   request, 2026-09-25. No seam above: they are part of the row now. */
.masthead .tabs {
  margin-inline-start: auto;
  padding-block: 0;
}

/* Overscan: televisions cut the panel edge, and the Chromecast's screenshot is
   taken before the cut, so only the owner's eye measures it. It was 5vh 5vw
   here plus style.css's 20 px on the body: a border of about three fingers,
   which the owner asked to go (2026-09-29). At a ring's room only (0.5rem) the
   owner's TV cut the page. 3.5% is the broadcast action-safe margin, and
   about half the old border. The body's own padding stays off. --edge is that
   margin, which the wall's scrolling keeps too (below). */
:root {
  --edge: 3.5vh;
}
body {
  padding: 0;
}
#app {
  /* The end gets a ring's room more: the last line scrolls up to --edge plus
     its scroll margin, and the page must be long enough to let it. */
  padding: var(--edge) 3.5vw calc(var(--edge) + 1rem);
}

/* The mark is a button on the television (spec section 13.7.2). It keeps the
   look style.css gives .logomark: no button border, and style.css's own
   start padding, which centres the play glyph, instead of the browser's. */
.logomark.home {
  border: 0;
  font: inherit;
  padding: 0 0 0 0.1rem;
}

/* The player's page controls (spec section 13.7.3). .frame holds the iframe
   AND the row under it, so fullscreen on .frame keeps the buttons (measured
   2026-09-27). style.css gives .frame a fixed 16:9 and overflow hidden, which
   would clip the row, so here it is a column and the iframe keeps the ratio.
   Nothing is drawn over the player. A class, not :has(), so the rule does not
   depend on what one browser supports. */
.frame--controls {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.frame--controls .player {
  aspect-ratio: 16 / 9;
  block-size: auto;
}
.prow {
  display: flex;
  /* Centred under the video, not at its left edge: the owner at the TV,
     2026-09-29. */
  justify-content: center;
  gap: 0.5rem;
  padding-block: 0.5rem;
}
.pctl {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2, #2c2c2e);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
/* On a remote the focus ring IS the interface: the same treatment the tabs
   and the mark have. */
.pctl:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.frame--controls:fullscreen {
  background: #000;
  padding: 1rem;
}
.frame--controls:fullscreen .player {
  flex: 1 1 auto;
  min-block-size: 0;
  aspect-ratio: auto;
}

/* The wall in rows by time band (spec section 14), as the owner asked on
   seeing it (14.7): each band a grid of FOUR columns that grows downward -- no
   sideways strip -- and each card its image alone. */
.wall.rows {
  display: grid;
  /* minmax(0, 1fr), and min-inline-size: 0 below: a grid item defaults to
     min-width auto and grew to its content (measured 5008 px, 14.3). */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  min-inline-size: 0;
}
.row {
  min-inline-size: 0;
}
.row-title {
  font-size: 1rem;
  font-weight: 650;
  margin: 0;
}
.row-strip {
  min-inline-size: 0;
  display: grid;
  /* Four, not five: at five the owner could not make the images out from the
     sofa (14.7). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  /* Room for the focus ring on every side: on a remote the ring is the
     interface, and nothing here may clip it. */
  padding: 0.4rem;
}
/* THE CARD IS ITS IMAGE. The body -- channel, title, age -- is hidden from the
   eye the way .sr-only hides it (style.css), not removed: a screen reader still
   reads the title, so the card keeps its name, and the markup stays the one
   definition the site shares. position: relative so the clipped body anchors
   to its card. */
.wall.rows .card {
  position: relative;
  /* The wall scrolls under the focus ("nearest"), which put the card flush with
     the screen's edge and cut its ring off on the Chromecast (14.7). The margin
     is the TV's cut (--edge) plus the ring's room, so a card scrolled to the top
     or the bottom stays inside what the owner's TV shows. */
  scroll-margin-block: calc(var(--edge) + 1rem);
}
.wall.rows .card .body {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* THE LANGLESS PANEL ON THE VIDEO SCREEN (spec 7.4, the owner at the TV,
   2026-09-29): a card of the logo, a QR code and the address, on the banner's
   own navy, with small margins. It ENDS LEVEL WITH THE PLAYER'S CONTROLS, as
   the owner asked when the first card ran down beside the title: the rail is
   the video's height plus the controls block, and the card takes what the
   rail's videos leave. */
.queue {
  /* The stage's width is the smaller of its 2.3 share and what the rail's
     300 px floor leaves; the site's formula takes only the share and runs about
     20 px long near 940, which at the Chromecast's 960 put the card's foot
     below the controls (measured). */
  block-size: calc(min((100cqw - 1.5rem) * 2.3 / 3.3, 100cqw - 1.5rem - 300px) * 9 / 16 + var(--controls-h));
}
/* The slot: what the rail leaves, measured by the card inside it. */
.promo {
  container-type: size;
  display: flex;
  justify-content: center;
  line-height: 1.2;
}
.promo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  block-size: 100%;
  box-sizing: border-box;
  padding: 0.6rem;
  border-radius: var(--radius);
  /* Sampled from the banner around its logo, so the cut-out logo sits on it
     without a seam. */
  background: rgb(20 44 70);
}
.promo .promo-logo {
  position: static;
  inline-size: 7rem;
  block-size: auto;
}
/* Square, white, with its own quiet zone, which phone cameras need against
   the navy: the slot's height less the logo, the address, the gaps and the
   padding (5.3rem), and never wider than the slot. */
.promo .promo-qr {
  position: static;
  --qr: min(calc(100cqh - 5.3rem), calc(100cqw - 1.2rem));
  inline-size: var(--qr);
  block-size: var(--qr);
  object-fit: contain;
  border-radius: 0.3rem;
  image-rendering: pixelated;
}
.promo-url {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* HOW FAR IN, AND HOW LONG: the progress line over the player's buttons (the
   owner at the TV, 2026-09-29). The controls block has one fixed height, so
   the rail beside it can end level with it. */
:root {
  --controls-h: 5.4rem;
}
.pcontrols {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  block-size: var(--controls-h);
}
/* An author display beats the browser's own [hidden] rule, so the line said
   "hidden until known" and showed an empty track (Fable and Opus, review). */
.ptime[hidden] {
  display: none;
}
.ptime {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0;
}
.pbar {
  flex: 1 1 auto;
  block-size: 0.3rem;
  border-radius: 0.15rem;
  background: rgb(255 255 255 / 0.25);
  overflow: hidden;
}
.pfill {
  display: block;
  block-size: 100%;
  /* Full width, scaled from its start by the script: a transform moves on the
     compositor, where a width change re-laid out the page every report. */
  inline-size: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: #ff0033;
}
.pclock {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.85);
}

/* Every card and rail item on the TV scrolls with the TV's edge margin, not
   only the wall's: at the bottom of the video screen the last cards came up
   flush with the edge, inside the TV's cut (the owner, 2026-09-29). */
.card,
.qitem {
  scroll-margin-block: calc(var(--edge) + 1rem);
}

/* THE LAST LINE SHOWS THE END OF THE PAGE. The colophon sits under the last
   cards, and scrolling only as far as the focused card left it below the
   screen (measured: its top at 576 of 540). A scroll margin taller than the
   screen makes the scroll clamp to the page's end, so reaching the last line
   brings the footer up (the owner at the TV, 2026-09-29).
   EXACTLY THE LAST LINE: the card that starts it (a line-start that is among
   the last N) and the cards after it. Marking "the last N" also caught cards
   of the line above, and on the video screen, whose cards are tall, UP then
   landed on one 210 px above the screen (Fable, review; measured). A wall line
   is four; the video screen's grid is pinned to three here, which is what it
   drew at 960 anyway, so the count is the layout's and not a guess. */
.more .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wall.rows .row:last-child .card:nth-child(4n + 1):nth-last-child(-n + 4),
.wall.rows .row:last-child .card:nth-child(4n + 1):nth-last-child(-n + 4) ~ .card,
.more .card:nth-child(3n + 1):nth-last-child(-n + 3),
.more .card:nth-child(3n + 1):nth-last-child(-n + 3) ~ .card {
  scroll-margin-block-end: 100vh;
}

/* THE COLOPHON ON THE TELEVISION is the site's, laid out by style.css (the
   owner at the TV, 2026-09-29), with less space above and below it than the
   site's 4rem and 2rem, which read as a gap at ten feet. The mark is text
   here, so it has no hover. */
.colophon {
  margin-block-start: 1.5rem;
  padding-block: 0.9rem 0;
}