/*
 * 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. Applied once, at the root, rather
   than sprinkled through components (spec section 7.1). */
#app {
  padding: 5vh 5vw;
}

/* 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;
  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). Each row is a heading and a
   strip that scrolls sideways; five cards and a sliver of the sixth show, so a
   row that continues says so. The strip pads its block axis because
   overflow-x clips vertically too, and on a remote the focus ring is the
   interface: it must never be cut off. */
.wall.rows {
  display: grid;
  /* minmax(0, 1fr), and min-inline-size: 0 on the row and the strip: a grid or
     flex item defaults to min-width auto, so the strip grew to its content --
     measured 5008 px wide at a 960 px viewport, 1146 px cards, one row per
     screen and a scroll that jumped. Bounded, it is the screen's width. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  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: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.4rem 0.4rem 0.5rem;
  scrollbar-width: none;
}
.row-strip > .card {
  /* Five and a sliver: at four, the second row's first card was 42% on the
     first screen (measured at 960 x 540), and the owner judges by that. */
  flex: 0 0 calc((100% - 5rem) / 5.3);
  min-inline-size: 0;
}