/* ==================================================================
   producer.css — the running order on a phone.

   Loaded after board.css and scoped to body[data-page=producer], so it
   only ever adds to the shared rules. The shape is the wall's rail turned
   into a single column: the service at the top, what is on and what is
   next as the biggest things on the screen, the list under them, and the
   controls parked at the bottom where a thumb already is. Everything is
   sized for one hand in a dark room — no hover, no small targets, nothing
   that needs a second look.
   ================================================================== */

body[data-page=producer] {
  /* A phone is held at arm's length, not read from across a room, but a
     thumb is still a thumb: the scale is fixed rather than viewport-led,
     and the countdown is the one thing allowed to be huge. */
  --t-2xs: 11px;
  --t-xs:  13px;
  --t-sm:  15px;
  --t-md:  18px;
  --t-lg:  22px;
  --t-xl:  27px;
  --t-2xl: 64px;
  overflow: hidden;
  background: var(--page);
}

body[data-page=producer] #admin-shell { height: 100dvh; }
.pr-app {
  height: 100dvh;
  max-width: 600px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--page);
}

/* ---- top strip: who we are, which service, are we connected ---- */
/* Two rows: the lockup and the clock, then the service under them — a
   phone is not wide enough for all three side by side. */
.pr-top {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s1) var(--s3);
  padding: calc(env(safe-area-inset-top) + var(--s2)) var(--s4) var(--s2);
  border-bottom: 1px solid var(--rule);
  background: var(--bar);
}
.pr-brand { display: flex; align-items: center; min-width: 0; }
.pr-brand .brand-mark { height: 20px; display: inline-flex; }
.pr-brand .brand-mark img { height: 100%; width: auto; filter: brightness(0) invert(1); }
.pr-brand .brand-name { font-size: var(--t-sm); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pr-svc {
  grid-column: 1 / -1; min-width: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3);
  font-size: var(--t-2xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
/* Six pills — a special service in a normal week — do not fit one row of a
   phone, so the strip wraps rather than losing the last one off the edge. */
.pr-svc .svc-strip { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pr-svc .svc-pill { height: 26px; padding: 0 8px; font-size: 11px; letter-spacing: .04em; }
.pr-right { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: var(--s2); }
/* The pills say THU and SUN; the date would only repeat them on a row of
   its own, and the header has no row to spare. */
.pr-svc #hdr-date { display: none; }
.pr-right .pill { font-size: var(--t-2xs); padding: 3px 8px; gap: 0; }
.pr-right .pill #conn-label:not(:empty) { margin-left: 6px; }
.pr-right .clock { font-family: var(--mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---- the column ---- */
.pr-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* what is on: the biggest thing on the screen */
.pr-now {
  flex: 0 0 auto;
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.pr-now .rd-eyebrow { margin-bottom: var(--s2); }
.pr-now .rd-now-title { font-size: var(--t-xl); }
.pr-now .rd-now-meta { font-size: var(--t-sm); letter-spacing: .06em; }
.pr-now .rd-countdown { margin-top: var(--s2); font-size: var(--t-2xl); line-height: 1; }
.pr-now .bar { margin-top: var(--s3); height: 6px; }
.pr-now .bar-legend { font-size: var(--t-xs); }
.pr-now .rd-turn { margin-top: var(--s3); }

/* the pre-service block the wall shows on standby, reused as-is */
body[data-page=producer] .rd-pre { padding: var(--s3) var(--s4); }
body[data-page=producer] .rd-pre .big { font-size: var(--t-xl); }

/* what is next, and who */
.pr-next {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
  background: var(--warn-deep);
}
.pr-next .rd-next-label { padding-top: 3px; }
.pr-next-body { min-width: 0; flex: 1 1 auto; }
.pr-next .rd-next-title { font-size: var(--t-md); color: var(--ink); white-space: normal; line-height: 1.25; }
.pr-next-who { margin-top: 2px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f0c078; }
.pr-next-who:empty { display: none; }

/* the list: the same rows as the wall, with room for a thumb */
body[data-page=producer] .rd-list { padding: var(--s2) var(--s3) var(--s3); -webkit-overflow-scrolling: touch; }
body[data-page=producer] .rd-item {
  grid-template-columns: 52px minmax(0, 1fr) 54px;
  padding: var(--s3) var(--s3);
  min-height: 52px;
  cursor: pointer;
}
body[data-page=producer] .rd-item .title { white-space: normal; line-height: 1.25; }
body[data-page=producer] .rd-item .note { white-space: normal; }
body[data-page=producer] .rd-item:active { filter: brightness(1.25); }

/* ---- controls, parked at the bottom ---- */
.pr-transport {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding: var(--s2) var(--s3) calc(env(safe-area-inset-bottom) + var(--s2));
}
.pr-transport .transport { border-top: 0; padding: var(--s1) 0; gap: var(--s2); background: transparent; }
.pr-transport .tbtn {
  min-height: 60px;
  font-size: var(--t-sm);
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.pr-transport .tbtn.big { flex: 1.6 1 auto; font-size: var(--t-md); }
.pr-transport .tbtn:active:not(:disabled) { filter: brightness(1.2); }
.pr-transport .tbtn#t-hold.on { font-size: var(--t-md); }
.pr-row-2 .tbtn { min-height: 48px; }
.pr-row-2 .tbtn.primary { flex: 1.6 1 auto; }
.pr-link { flex: 0 0 auto; padding-left: var(--s4); padding-right: var(--s4); }

.pr-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) var(--s1) 0;
  font-size: var(--t-2xs); color: var(--ink-4);
}
.pr-foot .build-stamp { font-family: var(--mono); order: 1; }
.pr-foot .pr-credit { order: 2; }
.pr-foot .pr-links { order: 3; flex: 1 1 100%; }
.pr-credit a { color: var(--ink-3); text-decoration: none; }

/* A toast at the foot of the screen would land on the buttons; it rises
   under the header instead, where a thumb is not. */
body[data-page=producer] .toast {
  bottom: auto; top: calc(env(safe-area-inset-top) + 92px);
  transform: translateX(-50%) translateY(-12px);
  max-width: calc(100% - 32px); text-align: center;
}
body[data-page=producer] .toast.show { transform: translateX(-50%) translateY(0); }

/* On standby the number that matters is when the service starts, so the
   item's own countdown steps down until the service is live. :has() keys
   this off the dot the engine already flips. */
body[data-page=producer]:has(#live-dot.idle) .pr-now .rd-countdown { font-size: var(--t-xl); color: var(--ink-3); margin-top: var(--s1); }
body[data-page=producer]:has(#live-dot.idle) .rd-pre .big { font-size: var(--t-2xl); line-height: 1; }
body[data-page=producer]:has(#live-dot.idle) .pr-now .bar,
body[data-page=producer]:has(#live-dot.idle) .pr-now .bar-legend { display: none; }
body[data-page=producer]:has(#live-dot.idle) .pr-now { padding-bottom: var(--s3); }

/* A short phone (an SE, or a browser bar eating the top) gets the "now"
   block compacted so the list still shows a few rows under it. */
@media (max-height: 720px) {
  .pr-now { padding: var(--s3) var(--s4) var(--s2); }
  .pr-now .rd-now-title { font-size: var(--t-lg); }
  .pr-now .rd-countdown { font-size: 46px; }
  .pr-now .bar { margin-top: var(--s2); }
  body[data-page=producer] .rd-pre { padding: var(--s2) var(--s4); }
  body[data-page=producer] .rd-pre .big { font-size: var(--t-lg); }
  body[data-page=producer]:has(#live-dot.idle) .rd-pre .big { font-size: 40px; }
  .pr-next { padding: var(--s2) var(--s4); }
  body[data-page=producer] .rd-item { min-height: 44px; padding: var(--s2) var(--s3); }
  .pr-transport .tbtn { min-height: 52px; }
  .pr-row-2 .tbtn { min-height: 42px; }
}

/* A wider screen — a tablet on the tech desk — gets the same column, no
   wider than a hand can cover, rather than a stretched one. */
@media (min-width: 720px) {
  .pr-app { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
}

/* Landscape phone: the "now" block and the list side by side, controls
   still along the bottom. */
@media (max-height: 480px) and (orientation: landscape) {
  .pr-app { max-width: none; }
  .pr-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #rd-pre-wrap { grid-column: 1 / -1; }
  .pr-now { grid-row: 2; border-right: 1px solid var(--rule); }
  .pr-next { grid-column: 2; grid-row: 1; }
  body[data-page=producer] .rd-list { grid-column: 2; grid-row: 2; }
  .pr-now .rd-countdown { font-size: 44px; }
  .pr-transport .tbtn { min-height: 44px; }
  .pr-foot { display: none; }
}

/* ================================================== a phone, upright ==
   An iPhone in portrait is 375-430 wide and, in Safari, about 660 tall
   once the address bar has taken its share. The layout above was drawn
   with room to spare and left that phone one or two rows of the list.
   Here the fixed parts give way: the pre-service block is a line, the
   "now" block puts the countdown beside the title instead of under it,
   the buttons lose a little height, the foot is one line. The list gets
   what is left, which is most of the screen. */
@media (max-width: 480px) and (orientation: portrait) {
  /* pre-service: one line, label and time on the same baseline */
  body[data-page=producer] .rd-pre {
    display: flex; align-items: baseline; justify-content: center; gap: var(--s3);
    padding: var(--s2) var(--s4);
    border-bottom: 1px solid var(--rule);
  }
  body[data-page=producer] .rd-pre .lbl { font-size: var(--t-2xs); }
  body[data-page=producer] .rd-pre .big,
  body[data-page=producer]:has(#live-dot.idle) .rd-pre .big { font-size: var(--t-lg); margin-top: 0; }

  /* now: the countdown beside the title, not under it */
  .pr-now {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "eyebrow eyebrow" "title clock" "meta clock" "bar bar" "legend legend" "turn turn";
    align-items: start; column-gap: var(--s3);
    padding: var(--s2) var(--s4) var(--s2);
  }
  .pr-now .rd-eyebrow { grid-area: eyebrow; margin-bottom: 4px; }
  .pr-now .rd-now-title { grid-area: title; font-size: var(--t-lg); line-height: 1.15; }
  .pr-now .rd-now-meta { grid-area: meta; font-size: var(--t-xs); margin-top: 2px; }
  .pr-now .rd-countdown { grid-area: clock; margin-top: 0; font-size: 44px; line-height: 1; align-self: center; }
  .pr-now .bar { grid-area: bar; margin-top: var(--s2); height: 5px; }
  .pr-now .bar-legend { grid-area: legend; font-size: var(--t-2xs); }
  .pr-now .rd-turn { grid-area: turn; margin-top: var(--s2); }
  /* on standby the item's own length is in the list already */
  body[data-page=producer]:has(#live-dot.idle) .pr-now .rd-countdown { display: none; }
  body[data-page=producer]:has(#live-dot.idle) .pr-now { padding-bottom: var(--s2); }

  /* next: a strip */
  .pr-next { padding: var(--s2) var(--s4); align-items: baseline; }
  .pr-next .rd-next-label { padding-top: 0; }
  .pr-next .rd-next-title { font-size: var(--t-sm); }

  /* the list: tighter rows, still a thumb wide */
  body[data-page=producer] .rd-list { padding: var(--s1) var(--s2) var(--s2); }
  body[data-page=producer] .rd-item {
    grid-template-columns: 46px minmax(0, 1fr) 48px;
    min-height: 44px; padding: var(--s2) var(--s2);
  }
  body[data-page=producer] .rd-item .note { font-size: var(--t-2xs); }

  /* controls: a little shorter, the foot one line */
  .pr-transport { padding-top: var(--s1); }
  .pr-transport .transport { padding: 4px 0; }
  .pr-transport .tbtn { min-height: 54px; }
  .pr-row-2 .tbtn { min-height: 42px; }
  .pr-foot { flex-wrap: nowrap; gap: var(--s2); padding-top: 4px; font-size: 10px; white-space: nowrap; }
  .pr-foot .pr-links { order: 2; flex: 1 1 auto; text-align: center; overflow: hidden; text-overflow: ellipsis; }
  .pr-foot .pr-credit { order: 3; flex: 0 0 auto; }
  .pr-foot .pr-who { display: none; }          /* the address is on the admin; no room here */
}