/* css/shared-view.css — .sc-pub-* public read-only page: top bar, hero,
   now/next strip (Phase 50), footer, read-only slot row tweaks (.sc-slot--ro).
   Structural shell (.sc-app/.sc-top/.sc-main/.sc-scroll/.sc-main-inner/.sc-spacer/
   .sc-list-head/.sc-btn--sm/.sc-btn--ghost) ported from design reference and
   SCOPED under body.shared-view so they cannot leak into the operator UI.
   Imported into components layer. */

/* ── CR-02 / IN-01: App shell — scoped to body.shared-view so operator UI is unaffected ── */

/* #shared-view.sc-pub acts as the app shell (replaces .sc-app from design ref).
   IN-01: add content + display so the ::before ambient glow pseudo-element renders. */
body.shared-view #shared-view.sc-pub {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  overflow: hidden;
}

body.shared-view #shared-view.sc-pub::before {
  content: "";
  display: block;
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 520px;
  pointer-events: none;
  z-index: 0;
  /* D-V2.0-COLOR-MIX fallback */
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(232, 168, 56, 0.09), transparent 70%);
  background: radial-gradient(ellipse 50% 60% at 50% 50%, color-mix(in oklab, var(--accent-amber) 9%, transparent), transparent 70%);
}

/* Top bar — fixed height, backdrop blur */
body.shared-view .sc-top {
  position: relative;
  z-index: 20;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 62px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-subtle);
  /* D-V2.0-COLOR-MIX fallback */
  background: rgba(10, 10, 10, 0.80);
  background: color-mix(in oklab, var(--bg-primary) 80%, transparent);
  backdrop-filter: blur(10px);
  flex-wrap: nowrap; /* UI-01: never wrap the top bar — single row at every width */
  min-width: 0; /* allows flex children to shrink */
}

/* UI-01: Right cluster base rule — was only defined inside the ≤430px media query, leaving
   intermediate widths (430-900px) without an explicit single-row contract. Force nowrap +
   flex:none here so the cluster never wraps even when brand + 4 buttons + toggle + push-mount
   run wide. Trade-off: at <360px the brand text ellipsizes (acceptable — icon mark carries it). */
body.shared-view .sc-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  flex-wrap: nowrap;
  min-width: 0;
}
body.shared-view .sc-top-right > * { flex-shrink: 0; }
body.shared-view .sc-top-right .lbl { white-space: nowrap; }

/* UI-01: At narrow widths hide the button text labels — icon-only keeps the row intact.
   The view toggle keeps its labels because the segmented control needs verbal distinction
   (Run of show vs Clock); the iCal/Print icon buttons lose their labels. */
@media (max-width: 720px) {
  body.shared-view .sc-pub-clock-btn .lbl,
  body.shared-view .sc-pub-ical-btn .lbl,
  body.shared-view .sc-pub-print-btn .lbl { display: none; }
  body.shared-view .sc-pub-clock-btn,
  body.shared-view .sc-pub-ical-btn,
  body.shared-view .sc-pub-print-btn { padding: 8px 10px; }
}
/* UI-07: <=520px media query for the old segmented toggle is removed — all action buttons
   now use the same .sc-btn--ghost .sc-btn--sm base, and the 720px rule above already
   handles label hiding for narrow viewports. */

/* Main content area — fills remaining height, scroll container */
body.shared-view .sc-main {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
}

/* Scrollable region — webkit scrollbar styling */
body.shared-view .sc-scroll::-webkit-scrollbar { width: 10px; }
body.shared-view .sc-scroll::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 8px;
  border: 3px solid var(--bg-primary);
}
body.shared-view .sc-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* UI-05 (v2.9.1): .sc-spacer element + rule removed. The brand now pushes the right
   cluster to the far edge via margin-right:auto on .sc-pub-brand (the standard flex
   idiom for "left + right" distribution without a filler element). */

/* Inner max-width wrapper */
body.shared-view .sc-main-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 4px 30px 60px;
}

/* "Run of show" list header — sticky within scroll */
body.shared-view .sc-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 10px 0 16px;
  margin-bottom: 4px;
  background: linear-gradient(var(--bg-primary) 70%, transparent);
}

body.shared-view .sc-list-head__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Small button modifier — scoped to shared-view so operator .sc-btn is unaffected */
body.shared-view .sc-btn--sm {
  padding: 8px 12px;
  font-size: 13px;
}

/* Ghost button variant for public page — scoped over the existing slot-modal.css definition */
body.shared-view .sc-btn--ghost {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

body.shared-view .sc-btn--ghost:hover {
  border-color: var(--border-strong);
  background: var(--bg-surface-2);
}

/* Responsive: tighten gutters on narrow viewports */
@media (max-width: 680px) {
  body.shared-view .sc-top { gap: 8px; padding: 0 12px; }
  body.shared-view .sc-main-inner { padding: 4px 16px 60px; }
}

/* Print: hide top bar glow + scrollbar decorations */
@media print {
  body.shared-view #shared-view.sc-pub::before { display: none; }
}

/* ── Public page height spacer (IN-01: content + display so ::before renders) ── */
.sc-pub::before { content: ""; display: block; height: 520px; }

/* ── Top bar branding ── */
.sc-pub-top { justify-content: flex-start; }

.sc-pub-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto; /* UI-05: replaces the deleted .sc-spacer — pushes .sc-top-right to the right edge */
}

.sc-pub-mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--accent-amber);
  /* D-V2.0-COLOR-MIX fallback */
  background: rgba(232, 168, 56, 0.13);
  background: color-mix(in oklab, var(--accent-amber) 13%, transparent);
  border: 1px solid rgba(232, 168, 56, 0.32);
  border: 1px solid color-mix(in oklab, var(--accent-amber) 32%, transparent);
}

.sc-pub-wm {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-primary);
}

.sc-pub-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 4px 9px;
  border-radius: 999px;
}

/* ── Page inner wrapper ── */
.sc-pub-inner {
  max-width: 880px;
  padding-top: 14px;
}

/* ── Event hero ── */
.sc-pub-hero {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0 26px;
}

.sc-pub-hero__logo {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  display: grid;
  place-items: center;
  color: var(--text-faint);
  overflow: hidden;
}

.sc-pub-hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SV-03 (v2.9): broken-image fallback. When a shared-logo data URL passes the MIME
   regex but fails to decode (corrupt data, truncated payload), the onerror handler
   adds this class to collapse the <img> entirely — no broken-image icon shows.
   The parent .sc-pub-hero__logo box (72×72 grid) remains as an empty placeholder
   until the next successful render cycle replaces it. */
.sc-pub-hero__logo-img--error {
  display: none;
}

.sc-pub-hero__main {
  min-width: 0;
  flex: 1;
  padding-top: 2px;
}

.sc-pub-hero__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-amber);
  margin-bottom: 9px;
}

.sc-pub-hero__title {
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--text-primary);
  text-wrap: balance;
}

.sc-pub-hero__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.sc-pub-hero__meta .dot { color: var(--text-faint); }

/* ── Now / up next strip (Phase 50 CSS shell — rendered as placeholder this phase) ── */
.sc-pub-now {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  /* D-V2.0-COLOR-MIX fallback */
  background: linear-gradient(135deg, rgba(232, 168, 56, 0.11), var(--bg-surface) 62%);
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent-amber) 11%, var(--bg-surface)), var(--bg-surface) 62%);
  border: 1px solid rgba(232, 168, 56, 0.30);
  border: 1px solid color-mix(in oklab, var(--accent-amber) 30%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 30px;
  /* D-V2.0-COLOR-MIX fallback */
  box-shadow: 0 0 44px -18px rgba(232, 168, 56, 0.55);
  box-shadow: 0 0 44px -18px color-mix(in oklab, var(--accent-amber) 55%, transparent);
}

.sc-pub-now__col {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.sc-pub-now__col--next {
  /* D-V2.0-COLOR-MIX fallback */
  background: rgba(10, 10, 10, 0.35);
  background: color-mix(in oklab, var(--bg-primary) 35%, transparent);
  border-left: 1px solid var(--border-subtle);
}

.sc-pub-now__lbl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 11px;
}

.sc-pub-now__col--live .sc-pub-now__lbl { color: var(--accent-amber); }

.sc-pub-now__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-amber);
  animation: sc-pulse 1.6s ease-in-out infinite;
  /* @keyframes sc-pulse defined in css/slot-rows.css — do NOT redeclare here */
}

.sc-pub-now__row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.sc-pub-now__name {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-pub-now__col--next .sc-pub-now__name {
  font-size: 16px;
  color: var(--text-muted);
}

.sc-pub-now__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 9px;
}

.sc-pub-now__clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 26px;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}

.sc-pub-now__time {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.sc-pub-now__zone {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 6px;
}

/* ── Read-only row tweaks — kill hover affordances, restore full pointer ── */
.sc-slot--ro .sc-slot__card { cursor: default; }

.sc-slot--ro .sc-slot__card:hover {
  border-color: var(--border-subtle);
  background: var(--bg-surface);
}

.sc-slot--ro.sc-slot--active .sc-slot__card:hover {
  /* D-V2.0-COLOR-MIX fallback */
  border-color: rgba(232, 168, 56, 0.55);
  border-color: color-mix(in oklab, var(--accent-amber) 55%, transparent);
  background: rgba(232, 168, 56, 0.09);
  background: color-mix(in oklab, var(--accent-amber) 9%, var(--bg-surface));
}

.sc-slot--ro .sc-slot__card { padding-left: 16px; }

/* ── Up next badge (read-only page only — not in operator slot-rows.css) ── */
.sc-slot__upnext {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}

/* ── Footer ── */
.sc-pub-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}

.sc-pub-foot b { color: var(--text-muted); font-weight: 600; }

.sc-pub-foot__mark {
  color: var(--accent-amber);
  display: grid;
  place-items: center;
}

/* ── body.shared-view: public page takes over — hide operator chrome ── */
/* UI-10 (v2.9.1 Path A): .clock-screen + .hud are NO LONGER hidden when the audience
   clicks the Clock tab — they become the canvas for the unified operator-renderer view.
   The body.shared-view.clock-tab-active override below re-exposes them. .timetable-panel
   stays hidden in audience context regardless of tab (no timetable to toggle for viewers). */
body.shared-view .clock-screen,
body.shared-view .hud,
body.shared-view .timetable-panel { display: none !important; }

/* UI-10 Path A: Clock tab — re-expose .clock-screen + .hud so the operator renderers
   (clock-modes.js, stage.js, slot-cards.js) have their target elements visible.
   Specific operator-only controls inside the HUD are hidden via the rules at the
   bottom of this file (body.shared-view.clock-tab-active #next-slot-btn etc.). */
body.shared-view.clock-tab-active .clock-screen,
body.shared-view.clock-tab-active .hud { display: flex !important; }

body.shared-view #shared-view { display: block; }

/* ── Responsive (SV-06) — hero + now-strip collapse at ≤680px ── */
@media (max-width: 680px) {
  .sc-pub-hero { gap: 14px; padding: 14px 0 20px; }
  .sc-pub-hero__logo { width: 56px; height: 56px; }
  .sc-pub-hero__title { font-size: 26px; }
  .sc-pub-now { grid-template-columns: 1fr; }
  .sc-pub-now__clock {
    order: -1;
    flex-direction: row;
    gap: 12px;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 22px;
  }
  .sc-pub-now__time { font-size: 24px; }
  .sc-pub-now__zone { margin-top: 0; }
  .sc-pub-now__col--next { border-left: none; border-top: 1px solid var(--border-subtle); }
  .sc-pub-top .lbl { display: inline; }
}

/* UI-07 (v2.9.1): SV-09 segmented view toggle removed — replaced with a single .sc-pub-clock-btn
   that uses the standard .sc-btn--ghost .sc-btn--sm classes (same as iCal/Print). No
   toggle-specific CSS needed anymore. */

/* ── SV-10: Stale banner strip (under top bar) ── */
body.shared-view .sc-pub-stale {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  /* D-V2.0-COLOR-MIX: rgba fallback FIRST, then color-mix */
  background: rgba(217, 119, 6, 0.08);
  background: color-mix(in oklab, var(--color-warning, #d97706) 8%, var(--bg-primary));
  border-bottom: 1px solid rgba(217, 119, 6, 0.22);
  border-bottom: 1px solid color-mix(in oklab, var(--color-warning, #d97706) 22%, transparent);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  position: relative;
  z-index: 10;
}

/* UI-13 (v2.9.1 Path A Phase 2): .ac-stale rule removed — #ac-stale element was part of
   the deleted #audience-clock scaffold. updateSharedViewStale() null-guards the missing
   element so it no-ops gracefully. Operator view + rundown view still get the stale marker. */

/* ── Phone layout overrides (SVM-01..05) ≤430px — purely additive, all selectors scoped
   under body.shared-view or .sc-pub* so operator rows are unaffected ── */
@media (max-width: 430px) {
  /* SVM-01: collapse action-button labels to icon-only */
  /* CRITICAL: the 680px block has `.sc-pub-top .lbl { display: inline }` which is a no-op
     (labels are inline by default). THIS rule is the actual explicit hide. */
  body.shared-view .sc-pub-top .lbl { display: none; }

  /* SVM-01: enforce ≥44px touch targets on top-bar action buttons */
  body.shared-view .sc-btn--sm {
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
  }

  /* SVM-01: allow the top bar to flex-wrap if the pill needs room */
  body.shared-view .sc-top {
    height: auto;
    min-height: 52px;
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 6px;
  }
  body.shared-view .sc-pub-brand { flex-wrap: wrap; gap: 8px; }

  /* SVM-02: tighten the event hero */
  .sc-pub-hero { gap: 12px; padding: 12px 0 18px; }
  .sc-pub-hero__logo { width: 48px; height: 48px; }
  .sc-pub-hero__title { font-size: 20px; }

  /* SVM-03: now-strip col padding reduction (strip already single-column from ≤680px block) */
  .sc-pub-now__col { padding: 12px 14px; }
  .sc-pub-now__clock { padding: 10px 14px; }
  .sc-pub-now__time { font-size: 20px; }

  /* SVM-04: run-of-show — trim time gutter; allow tags and labels to wrap
     Scoped under body.shared-view to prevent leakage into operator .sc-slot rows */
  body.shared-view .sc-slot { grid-template-columns: 48px 18px 1fr; }
  body.shared-view .sc-slot__time .t   { font-size: 13px; }
  body.shared-view .sc-slot__time .dur { font-size: 9px; }
  body.shared-view .sc-slot__tags  { flex-wrap: wrap; }
  body.shared-view .sc-slot__label { white-space: normal; overflow-wrap: break-word; }

  /* SVM-05: notify band + sunset — the ≤480px rules in responsive.css (push 44px full-width,
     #share-sunset wrap) already cover these; only add the safe-area bottom padding here. */
  body.shared-view .sc-main-inner {
    padding-bottom: max(60px, env(safe-area-inset-bottom, 0px));
  }

  /* UI-07: SVM-01 toggle touch-target + icon-only rules removed — toggle no longer exists. */
}

/* ── PF-01: Push subscribe mount in top bar ── */
/* Align the imperatively-mounted push wrapper alongside the iCal/Print sc-btn siblings */
body.shared-view #sc-pub-push-mount {
  display: inline-flex;
  align-items: center;
}

body.shared-view #sc-pub-push-mount .share-notifier-panel__push-subscribe {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

/* Hide the verbose hint copy — redundant in the compact top bar */
body.shared-view #sc-pub-push-mount .share-notifier-panel__push-subscribe-hint {
  display: none;
}

/* ── PF-02: Sunset readout in hero meta line ── */
/* Sit inline with the date · span · slots text without adding vertical offset */
body.shared-view .sc-pub-hero__meta #share-sunset,
body.shared-view .sc-pub-hero__meta .sunset-readout {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 0;
}

/* ── Promo banner strip (PROMO-01/02/03) — own flex row between top bar and hero ── */
body.shared-view .sc-pub-promo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  /* D-V2.0-COLOR-MIX: rgba fallback FIRST, then color-mix */
  background: rgba(232, 168, 56, 0.08);
  background: color-mix(in oklab, var(--accent-amber) 8%, var(--bg-primary));
  border-bottom: 1px solid rgba(232, 168, 56, 0.22);
  border-bottom: 1px solid color-mix(in oklab, var(--accent-amber) 22%, transparent);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  position: relative;
  z-index: 10;
}

body.shared-view .sc-pub-promo__link {
  color: var(--accent-amber);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.shared-view .sc-pub-promo__dismiss {
  flex: none;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  min-height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
}

body.shared-view .sc-pub-promo__dismiss:hover { color: var(--text-muted); }

/* ── Print styles ── */
@media print {
  .sc-pub::before { display: none; }
  .sc-pub-top, .sc-pub-now__pulse { display: none; }
  /* REG-01: hide promo strip in print — keeps printed output identical to pre-promo */
  .sc-pub-promo { display: none; }
}

/* ── Phase 61 — band self-pick + threshold notifications ── */
/* css/shared-view.css is over the 500-LOC module budget (known debt — v2.7 extraction
   scoped at/after Phase 61); additions tracked. */

/* Star pick button — ghost icon button inside .sc-slot__body */
.sc-slot__star {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.sc-slot__star:hover,
.sc-slot__star:focus-visible {
  color: rgba(232, 168, 56, 0.9);
  color: color-mix(in oklab, var(--accent-amber) 90%, transparent);
}
/* Active (picked) star — filled icon */
.sc-slot__star--active {
  color: rgba(232, 168, 56, 1);
  color: color-mix(in oklab, var(--accent-amber) 100%, transparent);
}
.sc-slot__star--active svg { fill: currentColor; }

/* Picked row highlight — D-V2.0-COLOR-MIX two-line fallback */
.sc-slot--mine .sc-slot__card {
  border-color: rgba(232, 168, 56, 0.3);
  border-color: color-mix(in oklab, var(--accent-amber) 30%, transparent);
  background: rgba(232, 168, 56, 0.06);
  background: color-mix(in oklab, var(--accent-amber) 6%, var(--bg-surface));
}

/* Picked-by tag — clone of .sc-tag--cd shape (slot-rows.css:239) with amber */
.sc-tag--pickedby {
  color: var(--accent-amber);
  border-color: rgba(232, 168, 56, 0.35);
  border-color: color-mix(in oklab, var(--accent-amber) 35%, transparent);
  background: rgba(232, 168, 56, 0.12);
  background: color-mix(in oklab, var(--accent-amber) 12%, transparent);
}

/* MY SLOT chip — stronger amber, bold */
.sc-tag--mine {
  color: var(--accent-amber);
  border-color: rgba(232, 168, 56, 0.5);
  border-color: color-mix(in oklab, var(--accent-amber) 50%, transparent);
  background: rgba(232, 168, 56, 0.16);
  background: color-mix(in oklab, var(--accent-amber) 16%, transparent);
  font-weight: 700;
}

/* Notify-me affordance strip */
.sc-pub-notify {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.sc-pub-notify__hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

/* ─── TOPBAR-02 (v2.9 Phase 79): Single-row toolbar at narrow widths ─── */
/* Root cause: the SVM-01 ≤430px block (line 516+) set `.sc-top { flex-wrap: wrap } */
/* which produced a 2x2 button grid at 390pt mobile width. Brand + 4 buttons + toggle + */
/* push mount = ~360-400px, which wraps and merges the bottom-right Clock button into */
/* its neighbor. Fix: force single-row, allow brand text to ellipsis, keep all buttons. */
/* Trade-off: at very narrow widths (<360px), the brand text "ShowClock" may ellipsize. */
/* Acceptable — the clock-icon mark + pill already convey identity + read-only state. */
@media (max-width: 430px) {
  /* Override the SVM-01 wrap that caused the 2x2 grid */
  body.shared-view .sc-top {
    flex-wrap: nowrap;
    height: 56px;
    min-height: 56px;
    padding: 0 10px;
    gap: 8px;
  }
  /* Override SVM-01 brand wrap — keep brand inline so it doesn't push buttons down */
  body.shared-view .sc-pub-brand {
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;          /* allow flex children to shrink */
    overflow: hidden;
    flex-shrink: 1;        /* brand yields to buttons when space is tight */
  }
  /* Brand text may ellipsis when buttons need the space (very narrow viewports) */
  body.shared-view .sc-pub-wm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
  }
  /* Pill — shrink slightly to fit narrow widths */
  body.shared-view .sc-pub-pill {
    font-size: 9px;
    padding: 3px 7px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* Right cluster — non-shrinkable, stays intact */
  body.shared-view .sc-top-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
  }
  /* UI-07: TOPBAR-02 toggle width pin removed — toggle no longer exists. */
  /* iCal/Print/Clock buttons stay — they're 44x44 icon-only already, fits the row */
}

/* ─── TOPBAR-03 (v2.9 Phase 79): Defensive padding for Squaresmile Platform banner ─── */
/* The platform wrapper (squaresmile.de host) injects a "All tools on this platform are */
/* provided as-is..." info banner at the very top of the page. The banner is OUT of */
/* ShowClock's DOM root (#shared-view) — it's a sibling element added by the wrapper. */
/* Root cause fix is platform-side (issue to be filed on Squaresmile Platform repo per Q3). */
/* This rule reserves space defensively so the banner doesn't overlap the toolbar. */
/* */
/* Strategy: use `env(safe-area-inset-top)` which the platform wrapper sets via a CSS */
/* custom property OR via the standard safe-area inset. On a non-platform host the env() */
/* value is 0 → no visual change. On the platform host the env() value matches the */
/* banner height → toolbar pushed below the banner cleanly. */
/* */
/* If env(safe-area-inset-top) doesn't reflect the banner height on the platform host */
/* (TBD during operator ship), the platform team can override via: */
/*   body.platform-host { --sc-platform-banner-height: 48px; }  (or measured value) */
body.shared-view {
  --sc-platform-banner-height: env(safe-area-inset-top, 0px);
}
body.shared-view .sc-pub-top {
  padding-top: var(--sc-platform-banner-height);
}
/* When the banner resolves to 0 (non-platform host or unsupported env), don't leave */
/* extra padding above the toolbar — clamp via media query if needed in future. */

/* ─── UI-10 (v2.9.1 Path A): Audience Clock tab — operator .clock-screen with controls hidden ─── */
/* When body.clock-tab-active is set (audience clicked the Clock button in the shared-view top bar),
   #shared-view is hidden and the operator .clock-screen becomes visible. This block hides the
   operator-only controls so the audience sees a clean read-only clock view, and reveals the
   back button (#clock-tab-back) in the operator rail for navigation back to the rundown.
   Scoped to BOTH body.shared-view AND body.clock-tab-active so the rules ONLY apply in real
   audience context — tests call openAudienceClock() without setting body.shared-view, so the
   class addition doesn't leak operator-control hiding into the test environment. */
body.shared-view.clock-tab-active #next-slot-btn,
body.shared-view.clock-tab-active #offset-sched,
body.shared-view.clock-tab-active #reset-btn,
body.shared-view.clock-tab-active #dismiss-btn,
body.shared-view.clock-tab-active .hud__timetable-toggle,
body.shared-view.clock-tab-active .hud__shortcut-toggle,
body.shared-view.clock-tab-active .hud__wakelock,
body.shared-view.clock-tab-active .end-slot-actions {
  display: none !important;
}

/* Track B fix ("two timetables"): the UI-10 list above predates the v3 Braun
   DOM — it hid the pre-Braun operator chrome but nothing hid the v3 layout's
   right-hand OPERATOR RUNDOWN PANE, so every viewer (owner or anonymous) who
   opened the Clock tab on a desktop width saw the audience running order on
   the left AND the operator's local rundown editor on the right — two
   timetables side by side, plus operator-only chrome (Cue, mode seg,
   settings, Operator/Viewer preview seg, phone tab bar). Hide the v3
   operator surfaces; the audience keeps the big clock, the offset-shifted
   #ac-rundown, 24h + fullscreen toggles, the help link, and #clock-tab-back. */
body.shared-view.clock-tab-active .pane--rundown,
body.shared-view.clock-tab-active .rd-reopen,
body.shared-view.clock-tab-active #cue-btn,
body.shared-view.clock-tab-active .hud .seg,
body.shared-view.clock-tab-active #settings-gear,
body.shared-view.clock-tab-active #shortcut-toggle,
body.shared-view.clock-tab-active #op-viewer-seg,
body.shared-view.clock-tab-active .tabbar {
  display: none !important;
}
/* VS-01: #settings-btn (gear) is deliberately NOT in the list above — the settings sheet
   is pure device-local display prefs (clock mode / theme / clock style / 12h / wake lock /
   fullscreen), safe for viewers. sheets.js routes viewer picks through chooseTheme() etc.
   so nothing writes the operator's localStorage keys (T-59-07). The HUD mode seg stays
   hidden — the sheet's Clock-mode seg is the viewer's (device-local) entry point. */
/* The clock pane fills the width freed by the hidden rundown pane. */
body.shared-view.clock-tab-active .pane--clock { border-right: none; }
/* Audience-only back button: hidden by default (operator view never needs it), shown when
   body.clock-tab-active. The .cl-rail-back default display:none lives in css/clock-view.css. */
body.shared-view.clock-tab-active #clock-tab-back {
  display: inline-flex;
}
/* Phone (≤767px): viewers lost ALL bottom controls on the Clock tab (user report
   2026-07-10, "bottom buttons gone"). responsive.css hides .hud__util at phone
   widths because the OPERATOR reaches those toggles via the tabbar + settings
   sheet — but both are hidden in shared view, leaving viewers no 24h/fullscreen/
   theme/help at all. Re-expose the utility cluster for viewers on the Clock tab
   (settings/shortcuts stay hidden via the !important rules above) and drop the
   HUD to the true bottom edge — the 64px tabbar slot it normally sits above is
   empty here. */
@media (max-width: 767px) {
  body.shared-view.clock-tab-active .hud { display: flex !important; bottom: 0; justify-content: center; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  body.shared-view.clock-tab-active .hud__util { display: flex !important; }
}
/* Slot cards' End Slot buttons are rendered by slot-cards.js inside .active-slot-card. The
   .end-slot-actions rule above catches those. This one is a belt-and-braces for any operator
   edit affordance that might leak into the audience clock-tab view. */
body.shared-view.clock-tab-active .active-slot-card__time .delay-badge {
  pointer-events: none;
}

/* UI-13 (v2.9.1 Path A Phase 2): VIEW-01/02/04 audience-clock layout +
   .ac-onnow + .ac-rundown rules removed (~175 lines). The audience Clock tab now uses the
   operator .clock-screen; ON NOW card + Full rundown features were audience-specific and
   have no operator equivalent in this release. */

/* ── Audience Clock-tab full running order (offset-shifted) ────────────────────
   Restores the Full rundown on the shared Clock view. On a running-late show the Clock
   tab otherwise showed only the "Running late" pill with no updated per-slot times
   (the shifted list lives on the Run-of-show tab, which sits under .clock-screen while
   the Clock tab is open). Rendered by js/shared-clock.js:renderAudienceRundown into
   #ac-rundown; the body.ac-rundown-on class (set only when there are slots to show)
   gates the scroll layout so an on-schedule / empty show keeps the centered dial. */
.ac-rundown { display: none; }
body.shared-view.clock-tab-active.ac-rundown-on .pane--clock { overflow-y: auto; }
body.shared-view.clock-tab-active.ac-rundown-on .clock {
  flex: 0 0 auto; min-height: min(60vh, 520px); overflow: visible;
}
body.shared-view.clock-tab-active .ac-rundown:not([hidden]) {
  display: block; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 4px 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
}
.ac-rundown__hd {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 2px 2px 12px;
}
/* Read-only schedule: the "mark my slot" star has no wired handler on the Clock tab. */
body.shared-view.clock-tab-active .ac-rundown .sc-slot__star { display: none; }

/* ── Clock-tab stale marker ────────────────────────────────────────────────────
   Shown by updateSharedViewStale() when the operator's live feed goes offline, so a
   crew watching the Clock tab isn't fooled by a clock still ticking on stale cache.
   Anchored top-center of the clock (position:relative); only for a real shared viewer. */
.ac-stale { display: none; }
body.shared-view.clock-tab-active .ac-stale:not([hidden]) {
  display: block; position: absolute; z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%);
  padding: 5px 13px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in oklab, var(--warning) 20%, var(--surface-2));
  color: var(--fg); border: 1px solid color-mix(in oklab, var(--warning) 55%, transparent);
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}