/* ==========================================================================
   components.css — only what P0 renders.
   Translated from design/midnight-stream/components/ (Button, Card, Badge,
   NavBar, RundownRow, ScheduleList). Single-class selectors, nesting no
   deeper than two levels, no !important.
   ========================================================================== */

/* Button — names what happens; one primary per view */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:var(--control-h); padding:0 var(--space-4);
  border:1px solid transparent; border-radius:var(--radius-sm); background:transparent;
  color:var(--text-1); font-size:15px; font-weight:var(--weight-semibold); line-height:1;
  white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn:hover{ text-decoration:none; }
.btn--primary{ background:var(--accent); color:var(--accent-on); }
.btn--primary:hover{ background:var(--accent-hover); color:var(--accent-on); }
.btn--secondary{ border-color:var(--border-strong); color:var(--text-1); }
.btn--secondary:hover{ background:var(--hover); color:var(--text-1); }
.btn--ghost{ color:var(--text-2); }
.btn--ghost:hover{ background:var(--hover); color:var(--text-1); }
.btn--danger{ background:var(--live); color:var(--live-on); }
.btn--danger:hover{ background:var(--live-hover); color:var(--live-on); }
.btn--sm{ height:var(--control-h-sm); padding:0 var(--space-3); font-size:var(--text-sm); }
.btn--block{ width:100%; }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
.icon{ flex:none; }

/* Card — flat container, hairline border, no shadow */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5); color:var(--text-1); }
.card--flush{ padding:0; overflow:hidden; }

/* Badge — explicit status text; colour never carries meaning alone */
.badge{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 var(--space-2);
  border:1px solid var(--border-strong); border-radius:var(--radius-pill);
  background:var(--elevated); color:var(--text-2);
  font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:1; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.badge--accent{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.badge--success{ background:var(--success-soft); color:var(--success); border-color:transparent; }
.badge--warning{ background:var(--warning-soft); color:var(--warning); border-color:transparent; }
.badge--live{ background:var(--live-soft); color:var(--live); border-color:transparent; }
.badge__dot{ width:6px; height:6px; border-radius:3px; background:currentColor; }
.badge__dot--pulse{ animation:ms-live 2s ease-in-out infinite; }
@keyframes ms-live{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* Price — Espees, two decimals, tabular figures. Widths come from the column, not the price. */
.price{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.price--free{ letter-spacing:0.02em; text-transform:uppercase; font-size:0.92em; }

/* Nav — fixed 64px bar, hairline bottom, translucent + blurred once scrolled */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-height);
  border-bottom:1px solid var(--border); background:var(--bg);
  transition:background-color var(--duration) var(--ease);
}
.nav--scrolled{ background:var(--nav-glass); -webkit-backdrop-filter:var(--nav-blur); backdrop-filter:var(--nav-blur); }
.nav__inner{ display:flex; align-items:center; gap:var(--space-4); height:100%; } /* 16px: a coordinator's six items must fit the 1180px container */
.nav__brand{ display:inline-flex; gap:6px; align-items:baseline; font-size:var(--text-lg); font-weight:var(--weight-bold); letter-spacing:var(--tracking-heading); color:var(--text-1); white-space:nowrap; }
.nav__brand:hover{ color:var(--text-1); text-decoration:none; }
.nav__brand-light{ font-weight:var(--weight-regular); color:var(--text-2); }
/* Links collapse when they do not fit, at whatever width that is for this viewer's links (P4.5 nav fix).
   .nav__panel is an in-flow, invisible twin of .nav__row, so it reserves exactly the row's width; .nav__probe
   is a size-query container holding whatever is left. Row-reverse keeps the probe at the right edge, so the
   row (absolute, right-aligned) covers the twin and the menu button sits where the links end. When the
   leftover reaches zero the row hides and the button shows; opening turns the twin into the dropdown.
   No fixed breakpoint, no JavaScript decision, no flash. The 719px media query below is the floor for
   browsers without container queries. */
.nav__links{ flex:1 1 0; min-width:0; align-self:stretch; display:flex; flex-direction:row-reverse; }
.nav__probe{ flex:1 1 0; min-width:0; position:relative; container-type:inline-size; container-name:nav-space; }
.nav__row,.nav__panel{ display:flex; align-items:center; gap:var(--space-1); }
.nav__row{ position:absolute; top:0; bottom:0; right:0; }
.nav__panel{ flex:none; visibility:hidden; }
@container nav-space (max-width:0px){
  .nav__row{ display:none; }
  .js .nav__toggle{ display:grid; }
}
.nav__link{
  display:inline-flex; align-items:center; height:var(--control-h); padding:0 var(--space-3);
  border-radius:var(--radius-sm); font-size:15px; font-weight:var(--weight-medium); color:var(--text-2); white-space:nowrap;
  transition:background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.nav__link:hover{ color:var(--text-1); background:var(--hover); text-decoration:none; }
.nav__link--active{ color:var(--text-1); background:var(--hover); }
.nav__actions{ display:flex; gap:var(--space-2); align-items:center; flex:none; }
/* Menu button: 44px, below 720px only, and only once JavaScript is running (html.js) so it is never a dead control.
   Elevated fill under a blur: on the solid bar it is a quiet button; over the hero the home page re-points
   --elevated and --border-strong at the on-image set, so the glyph stays legible on the photograph. */
.nav__toggle{
  display:none; position:absolute; right:0; top:0; bottom:0; margin:auto 0; width:var(--touch-min); height:var(--touch-min); place-items:center;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); color:var(--text-1);
  background:var(--elevated); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.nav__toggle:hover{ background:var(--hover); border-color:var(--border-strong); }
.nav__toggle-close{ display:none; }
/* Open (app.js adds .nav--open): the twin becomes the panel and the collapsed state is forced while it is open,
   since taking the twin out of flow hands its width back to the probe. */
.nav--open .nav__row{ display:none; }
.js .nav--open .nav__toggle{ display:grid; background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.nav--open .nav__toggle-open{ display:none; }
.nav--open .nav__toggle-close{ display:block; }
.nav--open .nav__panel{
  visibility:visible; position:absolute; top:var(--nav-height); left:0; right:0;
  flex-direction:column; align-items:stretch; gap:0; padding:var(--space-2);
  background:var(--elevated); border-bottom:1px solid var(--border-strong); box-shadow:var(--shadow-2);
}
.nav--open .nav__panel .nav__link{ height:48px; font-size:var(--text-md); }
.nav--open .nav__panel .nav__link--active{ background:var(--accent-soft); color:var(--text-1); }
.nav--open .nav__panel .nav__theme{ justify-content:space-between; height:48px; padding:0 var(--space-3); font-size:var(--text-md); }

/* Theme control (P4.5 §4): a visible label and a native select, System / Light / Dark. It needs app.js to act, so
   it is displayed only under html.js; without JavaScript the page still follows the system theme and no dead control shows. */
.nav__theme{ display:none; align-items:center; gap:var(--space-2); padding-left:var(--space-1); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-2); white-space:nowrap; }
.js .nav__theme{ display:inline-flex; }
.nav__theme-select{
  height:var(--control-h-sm); padding:0 var(--space-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text-1); font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer;
  transition:border-color var(--duration) var(--ease), background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.nav__theme-select:hover{ border-color:var(--text-3); }

/* Schedule list + rundown row — the signature layout: time, content, status */
.schedule{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.schedule__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); padding:14px var(--space-4); border-bottom:1px solid var(--border); }
.schedule__title{ font-size:var(--text-md); font-weight:var(--weight-semibold); letter-spacing:0; }
.schedule__note{ font-size:13px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.rundown{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:var(--space-4); align-items:center;
  min-height:64px; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); color:var(--text-1);
}
.rundown:last-child{ border-bottom:0; }
.rundown__time{ font-size:15px; font-weight:var(--weight-medium); color:var(--text-2); font-variant-numeric:tabular-nums; }
.rundown__body{ min-width:0; }
.rundown__title{ font-size:15px; font-weight:var(--weight-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rundown__meta{ font-size:13px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rundown__status{ display:flex; align-items:center; gap:var(--space-2); }
.rundown__price{ min-width:96px; text-align:right; font-size:var(--text-sm); }

/* Form fields — 44px input, hairline border, cyan focus glow; errors say what to do next (design Input) */
.form{ display:flex; flex-direction:column; gap:var(--space-4); }
.field{ display:flex; flex-direction:column; gap:6px; font-size:var(--text-sm); color:var(--text-1); }
.field__label{ font-weight:var(--weight-medium); }
.field__input{
  width:100%; height:var(--control-h); padding:0 var(--space-3);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-1);
  font-size:var(--text-md); font-variant-numeric:tabular-nums;
  transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.field__input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow); border-radius:var(--radius-sm); }
.field__input::placeholder{ color:var(--text-3); }
.field--error .field__input{ border-color:var(--live); }
.field__hint{ color:var(--text-3); }
.field__error{ color:var(--live); }
.form__actions{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-2); }
.form__row{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.alert{ padding:var(--space-3) var(--space-4); border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--elevated); color:var(--text-1); font-size:var(--text-sm); }
.alert--error{ border-color:var(--live-line); background:var(--live-soft); }
.alert--success{ border-color:var(--success-line); background:var(--success-soft); }
.divider{ display:flex; align-items:center; gap:var(--space-3); color:var(--text-3); font-size:var(--text-sm); }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--border); }
.nav__form{ display:contents; }


/* ── Rundown family (shared by the home page, the catalogue, course and track pages) ──
   Section head, index column, hairline rows, tabular price column, and the compact
   strip row with an inset frame. Block links carry their own colour, no underline. */
.row,.strip__item,.head__link{ color:inherit; }
.row:hover,.strip__item:hover,.head__link:hover{ color:inherit; text-decoration:none; }
/* Cohort rundown: index column, hairline rows, 120px right-aligned tabular price column */
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-8); }
.head--ruled{ padding-top:var(--space-12); }
.head__title{ font-size:clamp(34px, 3.4vw, 49px); letter-spacing:var(--tracking-heading); line-height:1.05; color:var(--text-strong); }
.head__sub{ margin-top:var(--space-3); color:var(--text-2); }
.head__link{ font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-2); }
.head__link:hover{ color:var(--text-1); text-decoration:underline; }
.rundown-list{ border-top:1px solid var(--border-strong); }
.group{ display:grid; grid-template-columns:88px minmax(0,1fr); border-bottom:1px solid var(--border); font-size:13px; color:var(--text-3); }
.group > span{ padding:12px; }
.group b{ color:var(--text-2); font-weight:var(--weight-medium); }
.group__r{ display:flex; justify-content:space-between; gap:var(--space-4); padding-left:20px; }
.row{ display:grid; grid-template-columns:88px minmax(0,1fr); border-bottom:1px solid var(--border); color:var(--text-1); transition:background-color var(--duration) var(--ease); }
.row:hover,.row:focus-visible{ background:var(--surface); }
.row:focus-visible{ border-radius:0; box-shadow:inset 0 0 0 2px var(--accent); }
.row__idx{ padding:20px 12px; font-size:13px; color:var(--text-3); border-right:1px solid var(--border); font-variant-numeric:tabular-nums; }
.row__body{ display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:var(--space-5); align-items:center; padding:16px 12px 16px 20px; min-width:0; }
.row__time{ font-size:var(--text-lg); font-weight:var(--weight-medium); color:var(--text-strong); font-variant-numeric:tabular-nums; white-space:nowrap; }
.row__time small{ display:block; font-size:var(--text-xs); font-weight:var(--weight-regular); color:var(--text-3); }
.row__main{ min-width:0; }
.row__title{ display:block; font-size:var(--text-md); font-weight:var(--weight-medium); }
.row__meta{ display:block; margin-top:2px; font-size:13px; color:var(--text-3); }
.row__end{ display:flex; align-items:center; gap:var(--space-5); }
.row__end .price{ min-width:120px; text-align:right; font-size:var(--text-md); font-weight:var(--weight-medium); color:var(--text-strong); }
.rundown-list .empty{ padding:var(--space-8) 0; }

/* Strip row: inset frame, index, title, one line */
.strip{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:2px; background:var(--border-strong); border:1px solid var(--border-strong); margin-top:var(--space-8); }
.strip__item{ position:relative; display:grid; grid-template-columns:136px minmax(0,1fr); gap:var(--space-4); align-items:center; padding:var(--space-4); background:var(--surface); transition:background-color var(--duration) var(--ease); }
.strip__item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); opacity:0; transition:opacity var(--duration) var(--ease); }
.strip__item:hover,.strip__item:focus-visible{ background:var(--hover); }
.strip__item:hover::before,.strip__item:focus-visible::before{ opacity:1; }
.strip__item:focus-visible{ border-radius:0; box-shadow:inset 0 0 0 2px var(--accent); }
.strip__img{ width:136px; aspect-ratio:16 / 9; object-fit:cover; border:1px solid var(--border-strong); transition:filter var(--duration) var(--ease); }
.strip__item:hover .strip__img,.strip__item:focus-visible .strip__img{ filter:brightness(1.08); }
.strip__text{ min-width:0; }
.strip__idx{ display:flex; justify-content:space-between; gap:var(--space-4); font-size:11px; color:var(--text-3); }
.strip__title{ display:block; font-size:var(--text-lg); font-weight:var(--weight-semibold); color:var(--text-strong); line-height:1.2; }
.strip__line{ display:block; margin-top:4px; font-size:13px; color:var(--text-2); }


/* Row stagger (motion.js, once only, gated by html.motion) */
.motion [data-motion="stagger"] .row{ opacity:0; }
.motion [data-motion="stagger"] .row.is-on,.motion [data-motion="stagger"].is-instant .row{ opacity:1; }

@media (max-width:759px){
  .group{ grid-template-columns:44px minmax(0,1fr); }
  .group > span{ padding:10px 8px; }
  .row{ grid-template-columns:44px minmax(0,1fr); }
  .row__idx{ padding:16px 8px; font-size:11px; }
  .row__body{ grid-template-columns:60px minmax(0,1fr); gap:var(--space-2) var(--space-3); padding:14px 12px; }
  .row__end{ grid-column:2; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2) var(--space-3); }
  .row__end .price{ min-width:0; }
  .strip__item{ grid-template-columns:112px minmax(0,1fr); }
  .strip__img{ width:112px; }
}

/* Empty state — an invitation, not an apology */
.empty{ padding:var(--space-8) var(--space-5); }
.empty__title{ font-size:var(--text-lg); font-weight:var(--weight-semibold); }
.empty__text{ color:var(--text-2); margin-top:var(--space-2); }
.empty__action{ margin-top:var(--space-5); }

/* Stat — big tabular number over a muted label */
.stats{ display:grid; grid-template-columns:repeat(3,auto); gap:var(--space-8); justify-content:start; padding-top:var(--space-2); }
.stat{ font-variant-numeric:tabular-nums; }
.stat__value{ font-size:var(--text-2xl); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-heading); line-height:var(--leading-heading); }
.stat__label{ font-size:var(--text-sm); color:var(--text-3); }

/* Prose — running text with a capped measure */
.prose{ display:flex; flex-direction:column; gap:var(--space-4); }
.prose p{ max-width:var(--measure); }
.prose a{ text-decoration:underline; }

/* Nav timecode — studio time in WAT, tabular figures, red on-air dot. Rendered by PHP, kept ticking by motion.js. */
.nav__tc{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:13px; color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.nav__tc-time{ font-weight:var(--weight-medium); color:var(--text-1); }
.nav__tc-dot{ width:6px; height:6px; border-radius:3px; background:var(--live); animation:ms-live 2s ease-in-out infinite; }
.nav__cta{ flex:none; }

/* Scroll signal — 2px cyan line at the viewport top; motion.js scales it with scroll progress. Invisible without JS. */
.signal{ position:fixed; top:0; left:0; z-index:60; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; pointer-events:none; }

/* Footer — wordmark and one line, a column of links, the copyright row under a hairline */
.footer{ border-top:1px solid var(--border); padding-block:var(--space-10) var(--space-12); font-size:var(--text-sm); color:var(--text-3); }
.footer__inner{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-6) var(--space-10); align-items:start; }
.footer__wordmark{ font-size:var(--text-lg); font-weight:var(--weight-bold); letter-spacing:var(--tracking-heading); color:var(--text-1); }
.footer__wordmark-light{ font-weight:var(--weight-regular); color:var(--text-2); }
.footer__line{ max-width:44ch; margin-top:var(--space-2); }
.footer__links{ display:flex; flex-direction:column; gap:var(--space-2); }
.footer__link{ color:var(--text-2); }
.footer__link:hover{ color:var(--text-1); }
.footer__copy{ grid-column:1 / -1; padding-top:var(--space-6); border-top:1px solid var(--border); max-width:none; }

/* Error pages */
.error{ padding-block:var(--space-16); }
.error__code{ font-size:var(--text-sm); color:var(--text-3); font-variant-numeric:tabular-nums; margin-bottom:var(--space-2); }
.error__text{ color:var(--text-2); margin-top:var(--space-3); }
.error__action{ margin-top:var(--space-6); }
.trace{ margin-top:var(--space-8); padding:var(--space-4); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-2); font-size:13px; line-height:1.5; }
.trace__title{ color:var(--live); font-size:var(--text-sm); font-weight:var(--weight-medium); margin-bottom:var(--space-2); }

@media (max-width:719px){
  .nav__inner{ gap:var(--space-2); }
  .nav__brand{ font-size:18px; }
  .nav__actions{ gap:var(--space-1); }
  .nav__row{ display:none; } /* floor for browsers without container queries; the query above does this from content */
  .js .nav__toggle{ display:grid; }
  .nav__cta{ height:var(--control-h-sm); padding:0 10px; font-size:var(--text-sm); }
  .nav__tc-sec{ display:none; } /* HH:MM on phones; the minutes still tick */
  .nav__tc-meta{ display:none; }
}
@media (max-width:759px){
  .footer__inner{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .rundown__status{ flex-direction:column; align-items:flex-end; gap:var(--space-1); }
  .rundown__price{ min-width:0; font-size:13px; }
  .stats{ grid-template-columns:1fr 1fr; gap:var(--space-4); }
}