:root {
  --page-bg: #f7f9fc;
  --surface: #fff;
  --text-main: #111827;
  --text-muted: #6b7280;
  --border: #e2e8f0;
  --brand-blue: #2563eb;
}

.public-page { min-width: 320px; background: var(--page-bg); color: var(--text-main); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", sans-serif; }
.public-page .tv-shell { width: calc(100% - 32px); max-width: 960px; min-height: 100svh; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 0 max(26px, env(safe-area-inset-bottom)); }
.public-page .masthead { display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px; }
.public-page .brand { gap: 10px; min-height: 0; }
.public-page .brand-logo.brand-wordmark { width: 168px; height: auto; }
.public-page .masthead h1 { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--text-main); }
.public-page #presence-status { display: block; margin: 0; color: var(--text-muted); font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.public-page #presence-count { margin: 0; color: var(--brand-blue); font-variant-numeric: tabular-nums; }
.public-page .screen { border-radius: 12px; }
.public-page .screen:fullscreen, .public-page .screen:-webkit-full-screen { border-radius: 0; }
.public-page .audio-unmute-overlay { display: none; }
.public-page .player-controls { gap: 10px; padding: 14px 0; }
.public-page .player-controls button { height: 44px; min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.public-page #sound-toggle { border-color: var(--brand-blue); background: var(--brand-blue); color: #fff; }
.public-page #sound-toggle.is-audible { border: 1px solid #cbd5e1; background: var(--surface); color: var(--text-main); }
.public-page #fullscreen-toggle { border: 1px solid #cbd5e1; background: var(--surface); color: var(--text-main); font-weight: 600; }
.public-page .player-controls svg { width: 17px; height: 17px; margin-right: 7px; }

@media (max-width: 767px) {
  .public-page #sound-toggle.is-audible { border-right: 0; }
}

@media (min-width: 1366px) {
  .public-page .screen { position: relative; }
  .public-page #sound-toggle.is-audible { border-bottom: 0; }
  .public-page .audio-unmute-overlay:not([hidden]) { display: inline-flex; position: absolute; z-index: 2; top: 30px; left: 18px; align-items: center; height: 56px; padding: 0 18px; gap: 10px; border: 0; border-radius: 1px; background: #fff; color: #000; font-size: 21px; font-weight: 500; cursor: pointer; }
  .public-page .audio-unmute-overlay svg { width: 36px; height: 36px; fill: currentColor; }
}

/* Surfaces come from public-shared.css; this base layer provides the common border. */
.public-page .program-info, .public-page .next-info { border: 1px solid var(--border); }
.public-page .kicker, .public-page #next-label { margin: 0; color: var(--text-main); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.public-page #next-label { color: var(--brand-blue); }
.public-page .program-start { color: var(--text-muted); font-weight: 500; }
.public-page .program-info h2, .public-page .next-info h2 { color: var(--text-main); font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.public-page .program-info p:not(.kicker), .public-page .next-info p:last-child { color: #4b5563; font-size: 13px; font-weight: 500; line-height: 1.45; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }