/* Shared spacing and responsive behavior for Phosphor OS. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --frame-gap: var(--space-2);
  --panel-padding: var(--space-5);
  --control-height: 44px;
}
body { overflow-wrap: anywhere; }
button, input, textarea, select { font: inherit; }
img, video { max-width: 100%; }
button, .button, .quiet { min-height: var(--control-height); }
.button { padding: 10px 14px; font-size: 14px; border-radius: 2px; }
.button.primary { border-color: var(--accent); background: var(--selected); }
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bright);
  outline-offset: 3px;
}
.shell { padding: var(--space-2); }
.workspace, .watch-grid, .studio-grid, .watch-stack, .right-rail { gap: var(--frame-gap); }
.workspace { margin-top: var(--frame-gap); }
.topbar { padding: var(--space-4) var(--panel-padding); gap: var(--space-4); min-height: 84px; z-index: 20; }
.brand { min-width: 0; gap: var(--space-3); }
.brand svg { width: 48px; height: 48px; }
.wordmark { font-size: 38px; }
.topnav { gap: var(--space-2); }
.topnav a { padding: 10px 12px; min-height: var(--control-height); border: 1px solid transparent; border-radius: 2px; }
.top-tools { gap: var(--space-3); flex-wrap: nowrap; }
.prototype-label { display: none; }
.account-tools { width: auto; min-width: 0; gap: var(--space-2); }
.label-compact { display: none; }
.header-menu { position: relative; border: 0; min-width: 0; }
.header-menu summary { display: flex; align-items: center; gap: var(--space-2); padding: 8px; min-height: var(--control-height); list-style: none; border: 1px solid transparent; border-radius: 2px; }
.header-menu summary::-webkit-details-marker { display: none; }
.header-menu summary:hover, .header-menu[open]>summary { border-color: var(--border); background: var(--raised); }
.header-menu>div { position: absolute; right: 0; left: auto; top: calc(100% + 8px); z-index: 30; min-width: 204px; max-width: calc(100vw - 32px); padding: var(--space-2); border: 1px solid var(--border); background: var(--surface); box-shadow: 0 12px 28px #0009; }
.header-menu a, .header-menu>div>button { display: flex; align-items: center; width: 100%; padding: 10px 12px; min-height: var(--control-height); font: 13px var(--terminal); }
.header-menu .crt-control { padding: 8px; }
.account-display-name { display: block; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar { min-height: 0; }
.sidebar section, .side-bottom { padding: var(--panel-padding); }
.sidebar nav { padding: var(--space-3) var(--space-2); }
.sidebar nav a { padding: 12px; gap: var(--space-3); min-height: var(--control-height); }
.section-heading { padding: var(--space-4) var(--panel-padding); flex-wrap: wrap; }
.section-heading h2, .section-heading h3, .help-panel>h2, .welcome-panel h2, .account-card>h2 { font: 14px/1.5 var(--terminal); color: var(--bright); }
.tags { gap: var(--space-2); }
.tags span, .tag { border-radius: 2px; }
.content-card { padding: 0 var(--panel-padding) var(--panel-padding); }
.content-card>.section-heading { padding-inline: 0; }
.content-summary { padding: 0; gap: var(--space-5); align-items: flex-start; }
.content-summary .poster { width: 120px; border-radius: 2px; }
.content-copy h2 { line-height: 1.25; margin: 0; }
.content-copy .button { flex-direction: row; }
.metadata-details { margin-top: var(--space-4); }
.metadata-details p { padding-bottom: 0; margin: var(--space-3) 0; }
.metadata-empty { padding: 0; }
.metadata-credit { padding-top: var(--space-4); }
.metadata-cast { gap: var(--space-3); }
.welcome-panel { padding: var(--panel-padding); }
.player { padding: var(--space-1) var(--space-1) 0; }
.native-controls { gap: var(--space-1); padding: var(--space-1); flex-wrap: wrap; min-height: 52px; }
.native-controls .quiet { min-width: 44px; min-height: 44px; padding: 10px; }
.controls-end { gap: var(--space-1); min-width: 0; }
.volume-slider { width: 80px; max-width: 100%; }
.player-strip #theater { margin-left: 0; }
.player-settings { right: 0; bottom: calc(100% + 8px); width: 280px; max-width: 100%; padding: var(--space-4); max-height: 70vh; max-height: 70svh; overflow-y: auto; }
.player-settings select { min-height: var(--control-height); font: inherit; }
.native-stream-meta { padding: 10px 8px; gap: var(--space-3); flex-wrap: wrap; line-height: 1.5; }
.native-stream-meta .terminal { min-width: 0; white-space: normal; }
.chat { min-height: 0; }
.chat-header-actions { gap: var(--space-1); }
.chat-header-actions .quiet { min-width: 44px; padding: 10px; }
.chat .section-heading { flex-wrap: nowrap; }
.chat .section-heading h2 { min-width: 0; }
.native-chat-body { flex: none; height: 440px; padding: var(--space-4); min-height: 240px; }
.chat-composer { margin: 0 var(--space-4); border-radius: 2px; min-height: var(--control-height); }
.chat-composer #emoji-toggle, .chat-composer #send-chat { width: 44px; min-width: 44px; }
.chat-composer input { font-size: 14px; }
.chat-options { padding: var(--space-4); }
.chat-options>.button, .chat-options>a { margin: 4px 8px 0 0; min-height: var(--control-height); }
.chat-footer { padding: var(--space-3) var(--space-4); line-height: 1.5; flex-wrap: wrap; }
.chat-footer #chat-identity { max-width: 100%; }
.chat>a.button { margin: 0 var(--space-4) var(--space-4); }
.new-messages { margin: 0 var(--space-4) var(--space-2); }
.emoji-panel { gap: var(--space-2); padding: var(--space-3); }
.emoji-panel button, .message-moderation summary, .message-moderation button { min-height: var(--control-height); }
.message-moderation summary { min-width: 44px; display: flex; align-items: center; justify-content: center; }
.native-chat-row:has(.message-moderation) { padding-right: 44px; }
.page-heading { padding: var(--space-6) var(--panel-padding); align-items: flex-start; flex-wrap: wrap; }
.page-heading h1 { font-size: 32px; margin: var(--space-2) 0; }
.page-heading>.tag { margin-top: var(--space-2); }
.movie-studio { padding: var(--panel-padding); margin: 0 0 var(--frame-gap); }
.movie-studio>.section-heading { padding: 0; }
.movie-studio>p { margin: var(--space-3) 0; }
.notice { padding: var(--space-4); margin: 0 0 var(--space-4); }
.movie-studio>.notice { margin: var(--space-4) 0; }
.provider-settings { margin: var(--space-4) 0; }
.metadata-search-tools { margin-top: var(--space-4); max-width: 100%; }
.metadata-search-tools>label { margin-bottom: var(--space-2); }
.metadata-search-tools>select { margin-bottom: var(--space-4); }
.metadata-search-tools select, .episode-picker select, #viewer-season { min-height: var(--control-height); border-radius: 2px; }
.title-results { gap: var(--space-3); margin-top: var(--space-4); }
.title-result { padding: var(--space-3); gap: var(--space-3); border-radius: 2px; }
.metadata-preview { margin-top: var(--space-5); padding: var(--panel-padding); }
.metadata-preview>.section-heading { padding: 0 0 var(--space-4); }
.metadata-preview .poster { width: 132px; }
.episode-picker { gap: var(--space-3); margin: var(--space-4) 0; }
.studio-actions { padding: 0; gap: var(--space-2); margin-top: var(--space-4); align-items: center; }
.studio-main { padding: 0 0 var(--panel-padding); }
.studio-main>.notice { margin: 0 var(--panel-padding) var(--space-4); }
.studio-main>.studio-actions { padding-inline: var(--panel-padding); }
.step { padding: var(--space-5) var(--panel-padding); gap: var(--space-4); }
.step-number { min-width: 28px; font-size: 22px; }
.step p { margin: var(--space-2) 0 var(--space-4); }
.step label { margin: var(--space-4) 0 var(--space-2); }
.copy-field { min-height: var(--control-height); border-radius: 2px; min-width: 0; }
.copy-field input { padding: 10px 12px; }
.copy-field button { min-height: var(--control-height); padding: 10px 12px; }
.studio-grid>aside, #owner-settings { display: flex; flex-direction: column; gap: var(--frame-gap); min-width: 0; }
.help-panel { padding: var(--panel-padding); margin: 0; }
.help-panel>p { margin: var(--space-3) 0; }
.help-panel>p:last-child { margin-bottom: 0; }
.account-card { padding: var(--space-6); margin: var(--frame-gap) auto; }
.account-card h1 { font-size: 30px; margin: var(--space-2) 0 var(--space-3); }
.account-form { gap: var(--space-2); margin: var(--space-4) 0 0; }
.account-form label:not(:first-child) { margin-top: var(--space-2); }
.account-form :is(input, textarea, select) { min-height: var(--control-height); padding: 10px 12px; color: var(--text); background: var(--raised); border-color: var(--border); border-radius: 2px; }
.account-form textarea { line-height: 1.5; }
.account-form :is(small, [role=status]) { color: var(--muted); line-height: 1.5; }
.account-form [role=status]:empty, .movie-studio>[role=status]:empty { display: none; }
.account-form button { margin-top: var(--space-2); }
.account-form .password-field button { margin: 0; }
.account-row { gap: var(--space-2); border-color: var(--divider); }
.account-row button { color: var(--bright); background: var(--raised); border-color: var(--border); min-height: var(--control-height); }
.profile-monogram { background: var(--selected); border-color: var(--border); color: var(--bright); margin-bottom: var(--space-4); }
.auth-tabs { gap: var(--space-2); margin: var(--space-4) 0; }
#settings-logout { margin-top: var(--space-4); }
.schedule-list article { padding: var(--panel-padding); gap: var(--space-5); }
footer { padding: var(--space-4) var(--space-2); line-height: 1.6; flex-wrap: wrap; }
#toast { z-index: 50; bottom: calc(16px + env(safe-area-inset-bottom)); padding: 12px 16px; font-size: 14px; max-width: calc(100vw - 32px); }
@media (max-width: 1350px) {
  .workspace { grid-template-columns: 200px minmax(0,1fr); }
  .watch-grid { grid-template-columns: minmax(0,1fr) 300px; }
  .studio-grid { grid-template-columns: minmax(0,1fr) 280px; }
  .wordmark { font-size: 34px; }
  .topbar { gap: var(--space-3); }
}
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topnav { order: 3; width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; }
  .topnav a { display: flex; align-items: center; justify-content: center; }
  .topbar { justify-content: space-between; }
  .top-tools { margin-left: auto; }
  .studio-grid { grid-template-columns: 1fr; }
  #owner-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  #owner-settings>.help-panel:last-child { grid-column: 1/-1; }
}
@media (max-width: 960px) {
  .watch-grid, .right-rail { display: flex; flex-direction: column; }
  .right-rail>.chat { width: 100%; }
  .native-chat-body { height: 360px; max-height: 60vh; max-height: 60svh; }
}
@media (max-width: 700px) {
  #owner-settings, .title-results { grid-template-columns: 1fr; }
  .metadata-cast { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .episode-picker { grid-template-columns: 1fr; gap: var(--space-2); }
  .episode-list { grid-template-columns: 1fr; }
  .history-row { align-items: flex-start; flex-wrap: wrap; }
  .native-controls #live-duration { display: none; }
}
@media (max-width: 600px) {
  :root { --panel-padding: 16px; }
  body { font-size: 14px; }
  .shell { padding: var(--space-1); padding-bottom: max(4px,env(safe-area-inset-bottom)); }
  .topbar { padding: var(--space-3) var(--space-2); gap: var(--space-2); }
  .brand { gap: 6px; }
  .brand svg { width: 28px; height: 28px; }
  .wordmark { font-size: 26px; }
  .brand small { display: none; }
  .top-tools { gap: var(--space-1); }
  .appearance-menu summary { width: 44px; justify-content: center; padding: 8px; }
  .appearance-menu summary>span { display: none; }
  .account-display-name { max-width: 82px; }
  .account-menu summary>.tag { display: none; }
  .account-tools { gap: var(--space-1); }
  .account-tools>.button { padding: 8px 10px; font-size: 13px; }
  .label-full { display: none; }
  .label-compact { display: inline; }
  .topnav { gap: var(--space-1); font-size: 12px; }
  .topnav a { padding: 8px; }
  .topbar .header-menu { position: static; }
  .topbar .header-menu>div { right: 8px; top: calc(100% + 8px); }
  .section-heading { gap: var(--space-2); padding-block: var(--space-3); }
  .section-heading h2, .section-heading h3, .help-panel>h2, .welcome-panel h2, .account-card>h2 { font-size: 13px; }
  .content-summary { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: var(--space-3); }
  .content-summary .poster, .metadata-preview .poster { width: 84px; }
  .content-copy { display: contents; }
  .content-summary>.poster { grid-column: 1; grid-row: 1/span 3; }
  .content-copy h2 { grid-column: 2; grid-row: 1; font-size: 22px; }
  .content-copy .facts { grid-column: 2; grid-row: 2; }
  .content-copy h3 { grid-column: 2; grid-row: 3; font-size: 16px; }
  .content-copy .content-overview { grid-column: 1/-1; grid-row: 4; margin: 0; }
  .content-copy .tags, .content-copy .button { grid-column: 1/-1; margin: 0; }
  .content-copy .button { justify-self: start; }
  .content-copy p { font-size: 13px; }
  .facts { font-size: 11px; }
  .content-copy .button { padding: 8px 10px; font-size: 12px; }
  .metadata-preview .content-copy { width: auto; }
  .native-controls { display: grid; grid-template-columns: 44px 44px minmax(40px,1fr) 64px; gap: var(--space-1); }
  .native-controls #video-play { grid-column: 1; grid-row: 1; }
  .native-controls #video-mute { grid-column: 2; grid-row: 1; }
  .native-controls .volume-slider { grid-column: 3; grid-row: 1; width: 100%; margin: 0; }
  .native-controls #go-live { grid-column: 4; grid-row: 1; padding: 8px; font-size: 11px; }
  .native-controls .controls-end { grid-column: 1/-1; width: 100%; margin-left: 0; justify-content: flex-end; gap: var(--space-2); }
  .native-controls .player-settings { grid-column: 1/-1; position: static; width: 100%; max-width: 100%; max-height: 60vh; max-height: 60svh; margin-top: var(--space-1); }
  .native-controls .icon { width: 20px; height: 20px; }
  .native-overlay { padding: 14px; gap: var(--space-2); }
  .native-overlay h1 { font-size: 20px; }
  .native-overlay p { font-size: 12px; }
  .native-overlay .overlay-play { width: 50px; height: 50px; }
  .native-overlay .overlay-play .icon { width: 26px; height: 26px; }
  .native-overlay[data-mode=paused] .overlay-status, .native-overlay[data-mode=ready] .overlay-status { bottom: 8px; left: 8px; padding: 6px 10px; max-width: calc(100% - 16px); }
  .native-overlay[data-mode=paused] .overlay-status-code, .native-overlay[data-mode=ready] .overlay-status-code { display: none; }
  .native-overlay[data-mode=paused] h1, .native-overlay[data-mode=ready] h1 { font-size: 10px; }
  .native-overlay[data-mode=paused] p, .native-overlay[data-mode=ready] p { font-size: 10px; margin-top: 3px; }
  .native-stream-meta { font-size: 11px; gap: var(--space-2); }
  .native-stream-meta .terminal { font-size: 11px; }
  .native-chat-body { height: 320px; min-height: 220px; }
  .chat-composer input, .copy-field input, .account-form :is(input,textarea,select), .metadata-search-tools :is(input,select), .episode-picker select, #viewer-season, .player-settings select { font-size: 16px; }
  .chat-footer { font-size: 11px; }
  .page-heading { padding: var(--space-5) var(--space-2); gap: var(--space-3); }
  .page-heading h1 { font-size: 28px; }
  .step { gap: var(--space-3); }
  .step-number { min-width: 24px; font-size: 19px; }
  .step h3 { font-size: 20px; }
  .copy-field button { padding: 8px; }
  #copy-server span, #copy-key span, #reveal-key span { display: none; }
  #copy-server, #copy-key, #reveal-key { min-width: 44px; }
  .metadata-preview { padding: var(--space-3); }
  .studio-actions .button { flex: 1 1 auto; }
  .account-card { padding: var(--panel-padding); margin: var(--frame-gap) 0; }
  .account-card h1 { font-size: 27px; }
  .account-form>button { width: 100%; justify-self: stretch; }
  .auth-tabs>a { flex: 1; }
  .account-row { align-items: flex-start; }
  .account-row a { flex-basis: calc(100% - 60px); }
  .schedule-list article { gap: var(--space-3); align-items: flex-start; }
  .schedule-list img { width: 88px; }
  .schedule-list h2 { font-size: 20px; }
  .icon-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  footer { font-size: 9px; padding-block: var(--space-3); }
}
@media (max-width: 380px) {
  .brand>svg { display: none; }
  .account-display-name { max-width: 70px; }
  .metadata-cast { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .content-summary { grid-template-columns: 72px minmax(0,1fr); }
  .content-summary .poster, .metadata-preview .poster { width: 72px; }
}
.theater .workspace, .theater .watch-grid { display: block; }
.theater .right-rail { display: none; }
.theater .watch-stack { gap: var(--frame-gap); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}

/* Channel card: stable profile hierarchy and a two-action group. */
.identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px 24px;
  padding: var(--panel-padding);
  min-height: 0;
  container-type: inline-size;
  container-name: channel-card;
}
.identity .channel-profile {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.identity .channel-profile>.avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
}
.identity .channel-copy { flex: 1; min-width: 0; }
.identity .channel-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.identity .channel-heading h2 {
  min-width: 0;
  font: 24px/1.25 var(--ui);
  margin: 0;
  overflow-wrap: anywhere;
}
.identity #identity-state {
  flex-shrink: 0;
  padding: 3px 8px;
  font: 10px/1.5 var(--terminal);
  letter-spacing: .5px;
}
.identity .channel-copy>p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.identity .channel-copy>.tags { margin-top: 10px; gap: 6px; }
.identity .channel-copy>.tags span { padding: 3px 8px; font-size: 12px; }
.identity #channel-description-public {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.identity .identity-actions {
  display: grid;
  grid-template-columns: minmax(128px,auto) minmax(136px,auto);
  align-items: start;
  justify-content: initial;
  gap: 10px;
  margin: 0;
  width: auto;
  min-width: 0;
}
.identity .channel-follow { display: grid; gap: 6px; min-width: 0; }
.identity .identity-actions .button {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  margin: 0;
  font: 13px/1.3 var(--ui);
  white-space: nowrap;
}
.identity .channel-follow #follower-count {
  flex-basis: auto;
  text-align: center;
  font: 11px/1.4 var(--terminal);
  color: var(--muted);
  margin: 0;
}
.identity .channel-schedule .icon { width: 16px; height: 16px; }
@container channel-card (max-width: 620px) {
  .identity .channel-profile, .identity .identity-actions { grid-column: 1/-1; }
  .identity .identity-actions {
    width: 100%;
    grid-template-columns: repeat(2,minmax(0,1fr));
    border-top: 1px solid var(--divider);
    padding-top: 14px;
  }
}
@media (max-width: 700px) {
  .identity { grid-template-columns: minmax(0,1fr); row-gap: 16px; }
  .identity .channel-profile>.avatar { width: 48px; height: 48px; flex-basis: 48px; }
  .identity .channel-profile { gap: 12px; }
  .identity .channel-heading h2 { font-size: 22px; }
  .identity .identity-actions {
    width: 100%;
    grid-template-columns: repeat(2,minmax(0,1fr));
    border-top: 1px solid var(--divider);
    padding-top: 14px;
  }
}
/* Calendar keeps the same terminal panels, square edges and 44px controls. */
.schedule-toolbar,.schedule-tabs,.calendar-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.schedule-toolbar { justify-content:space-between; padding:var(--panel-padding); }
.schedule-tabs .button[aria-pressed="true"] { background:var(--selected); color:var(--bright); border-color:var(--bright); }
.schedule-time-note { margin:16px 0; line-height:1.6; }
.schedule-events,.community-requests,.schedule-calendar { margin-bottom:var(--space-4); padding:var(--panel-padding); }
.schedule-events>.section-heading,.community-requests>.section-heading,.studio-calendar>.section-heading { padding:0 0 var(--space-4); margin:0; border-bottom:1px solid var(--divider); align-items:center; gap:var(--space-3); }
.community-requests>p,.studio-calendar>p { margin:var(--space-4) 0; max-width:72ch; color:var(--muted); }
.schedule-toolbar>.studio-actions { margin:0; }
.schedule-time-note { padding-inline:var(--space-2); font-size:13px; }
.schedule-empty { padding:24px 0; }
.schedule-empty h3 { margin:12px 0; }
.schedule-event { display:grid!important; grid-template-columns:88px minmax(0,1fr)!important; align-items:start; gap:20px!important; padding:20px 0!important; border-top:1px solid var(--divider); }
.schedule-event:first-child { border-top:0; }
.schedule-event .schedule-poster { width:88px; height:132px; object-fit:cover; }
.schedule-event-copy { min-width:0; }
.schedule-event-copy h3 { margin:8px 0; font-size:21px; }
.schedule-event-copy p,.event-description { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; margin:8px 0 16px; }
.schedule-event-copy .terminal { font-size:12px; line-height:1.6; }
.schedule-event-actions { grid-column:2; margin:0; display:flex; flex-wrap:wrap; gap:var(--space-2); }
.schedule-event-copy .tag { display:inline-flex; margin:var(--space-2) 0; }
.schedule-events [data-event-pages],.community-requests [data-request-pages] { margin-top:16px; }
.upcoming-event { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:16px 0; border-top:1px solid var(--divider); text-decoration:none; }
.upcoming-event .upcoming-poster { width:44px; height:66px; object-fit:cover; }
.upcoming-event>span { display:flex; flex-direction:column; gap:8px; min-width:0; }
.upcoming-event small { font:11px/1.6 var(--terminal); color:var(--muted); }
.upcoming-event strong { line-height:1.45; }
.upcoming { padding:var(--panel-padding); }
.upcoming>.section-heading { padding:0 0 var(--space-4); gap:var(--space-2); }
.upcoming>.section-heading a { font-size:12px; }
.upcoming>p { padding:var(--space-3) 0; line-height:1.65; }
.upcoming>.button { width:100%; margin-top:var(--space-3); }
.calendar-heading { display:grid; grid-template-columns:44px minmax(0,1fr) 44px auto; gap:var(--space-2); margin-bottom:var(--space-5); }
.calendar-heading h2 { margin:0; font-size:22px; text-align:center; line-height:1.4; }
.calendar-heading [data-month] { padding:var(--space-2); width:44px; }
.calendar-help { margin:var(--space-4) 0 0; color:var(--muted); font:12px/1.6 var(--terminal); }
.calendar-week,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; }
.calendar-week { text-align:center; font:13px var(--terminal); margin-bottom:12px; }
.calendar-grid { background:var(--divider); border:1px solid var(--divider); }
.calendar-day,.calendar-blank { background:var(--surface); min-height:104px; padding:var(--space-2); min-width:0; }
.calendar-day>span { font:12px var(--terminal); color:var(--muted); }
.calendar-today { box-shadow:inset 0 0 0 1px var(--bright); }
.calendar-day a { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) 0; min-height:44px; line-height:1.35; font-size:12px; }
.calendar-day a>span:not(.sr-only) { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.calendar-day i { background:var(--bright); width:5px; height:5px; flex:0 0 5px; }
.request-row { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; padding:20px 0; border-top:1px solid var(--divider); }
.request-row .request-poster { width:48px; height:72px; object-fit:cover; }
.request-row p { margin:8px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.request-row small { color:var(--muted); line-height:1.7; }
.request-row .studio-actions { margin-top:12px; }
.studio-calendar { margin:var(--frame-gap) 0; padding:var(--panel-padding); }
.studio-calendar>h3 { margin:24px 0 12px; }
.studio-event-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:16px; align-items:center; padding:16px 0; border-top:1px solid var(--divider); }
.studio-event-row>div { display:flex; flex-direction:column; gap:8px; min-width:0; }
.studio-event-row small { color:var(--muted); line-height:1.5; }
.studio-request-review { margin-top:var(--space-6); border-top:1px solid var(--divider); }
.studio-request-review>summary { cursor:pointer; min-height:44px; padding:var(--space-4) 0; color:var(--bright); font:14px/1.6 var(--terminal); }
.schedule-dialog { width:min(800px,calc(100vw - 32px)); max-width:800px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); padding:0; background:var(--surface); color:var(--text); border:1px solid var(--bright); overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; box-sizing:border-box; }
.schedule-dialog::backdrop { background:rgba(0,5,2,.88); }
.schedule-dialog-heading { position:sticky; top:0; z-index:2; background:var(--surface); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); border-bottom:1px solid var(--divider); padding:var(--space-4) var(--panel-padding); margin:0; }
.schedule-dialog-heading h2 { margin:0; font:18px/1.4 var(--terminal); overflow-wrap:anywhere; }
.schedule-dialog-heading button { flex-shrink:0; }
.schedule-dialog [data-dialog-body] { padding:var(--panel-padding); }
.schedule-dialog [data-dialog-body]>p:first-child { margin-bottom:var(--space-4); }
.calendar-heading .icon-back { transform:rotate(180deg); }
.schedule-dialog-heading h2:focus { outline:none; }
.schedule-dialog .calendar-export-help>p { margin:var(--space-3) 0; line-height:1.65; }
.schedule-dialog details { margin:20px 0; }
.schedule-dialog summary { min-height:44px; display:flex; align-items:center; cursor:pointer; border-bottom:1px solid var(--divider); padding:8px 0; }
.schedule-dialog summary:before { content:'+'; margin-right:12px; font-family:var(--terminal); }
.schedule-dialog details[open]>summary:before { content:'−'; }
.schedule-dialog .notice { line-height:1.6; margin:16px 0; }
.schedule-dialog .event-content { border-top:1px solid var(--divider); padding-top:20px; margin-top:24px; }
.schedule-dialog .ratings-poster { max-width:240px; height:auto; }
.schedule-dialog label,.schedule-picker label { display:flex; flex-direction:column; gap:8px; min-width:0; }
.schedule-dialog input,.schedule-dialog textarea,.schedule-dialog select { width:100%; min-width:0; box-sizing:border-box; }
.schedule-dialog :is(input,textarea,select) { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:2px; padding:var(--space-3); min-height:44px; font:16px/1.4 var(--ui); }
.schedule-dialog input::placeholder,.schedule-dialog textarea::placeholder { color:var(--muted); }
.schedule-dialog textarea { resize:vertical; min-height:96px; }
.schedule-dialog label { color:var(--bright); font-size:14px; line-height:1.5; }
.schedule-dialog [role="status"] { min-height:1.5em; margin:var(--space-3) 0; color:var(--muted); line-height:1.6; }
.schedule-dialog [data-feedback] { margin:var(--space-3) 0; font-size:13px; }
.schedule-dialog .title-results { max-height:360px; max-height:40dvh; overflow-y:auto; overscroll-behavior:contain; padding:var(--space-1); }
.schedule-dialog .title-result { min-height:100px; }
.schedule-dialog .event-time { padding:var(--space-4); border:1px solid var(--divider); background:var(--raised); margin:var(--space-4) 0 var(--space-3); line-height:1.8; font:14px/1.8 var(--terminal); }
.schedule-dialog .event-description:empty { display:none; }
.schedule-editor-section { display:flex; flex-direction:column; gap:var(--space-4); border:0; border-top:1px solid var(--divider); min-width:0; padding:var(--space-5) 0 0; margin:var(--space-5) 0 0; }
.schedule-editor-section legend { padding:0 var(--space-2) 0 0; color:var(--bright); font:13px/1.6 var(--terminal); }
.schedule-editor-section>details { margin:0; }
.schedule-editor-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); padding-top:var(--space-4); border-top:1px solid var(--divider); }
.schedule-editor-actions [data-delete] { margin-left:auto; }
.schedule-search { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; margin:16px 0; }
.schedule-time-fields,.schedule-episode-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.schedule-picker [data-preview]:not(:empty) { padding:20px 0; border-top:1px solid var(--divider); margin-top:16px; }
.schedule-dialog .account-form { max-width:none; }
.schedule-dialog .schedule-event-form { margin-top:20px; }
.schedule-dialog .schedule-event-form>.schedule-editor-section:first-child { margin-top:0; }
.schedule-dialog .account-form>label { gap:var(--space-2); }
.schedule-event-actions .icon { width:16px; height:16px; }
.schedule-dialog [data-chosen] { overflow-wrap:anywhere; }
@media(max-width:600px) {
 .schedule-toolbar { align-items:stretch; }
 .schedule-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:var(--space-1); }
 .schedule-tabs .button { padding:10px 6px; font-size:13px; line-height:1.4; min-width:0; text-align:center; }
 .schedule-toolbar>.studio-actions { width:100%; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
 .schedule-event { grid-template-columns:60px minmax(0,1fr)!important; gap:12px!important; padding:16px 0!important; }
 .schedule-event .schedule-poster { width:60px; height:90px; }
 .schedule-event-copy h3 { font-size:19px; }
 .schedule-event-actions { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
 .schedule-event-actions>a:last-child { grid-column:1/-1; }
 .calendar-heading { gap:8px; }
 .calendar-heading h2 { font-size:18px; }
 .calendar-heading [data-today] { padding:var(--space-2); font-size:12px; }
 .calendar-day,.calendar-blank { min-height:70px; padding:4px; }
 .calendar-day a { min-height:44px; justify-content:center; font-size:10px; padding:4px 0; }
 .calendar-day a>span:not(.sr-only) { display:none; }
 .calendar-day i { width:8px; height:8px; flex-basis:8px; }
 .schedule-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
 .schedule-dialog-heading h2 { font-size:16px; }
 .schedule-dialog-heading { padding:var(--space-3) var(--space-4); gap:var(--space-2); }
 .schedule-dialog [data-dialog-body] { padding:var(--space-4); padding-bottom:max(16px,env(safe-area-inset-bottom)); }
 .schedule-editor-actions { display:grid; grid-template-columns:minmax(0,1fr); }
 .schedule-editor-actions [data-delete] { margin:var(--space-2) 0 0; }
 .schedule-search { grid-template-columns:minmax(0,1fr); }
 .schedule-episode-picker { grid-template-columns:minmax(0,1fr); }
 .schedule-time-fields { grid-template-columns:minmax(0,1fr); }
 .schedule-dialog input,.schedule-dialog textarea,.schedule-dialog select { font-size:16px; }
 .studio-event-row { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
 .studio-event-row .tag { grid-column:1; grid-row:2; justify-self:start; }
 .studio-event-row .button { grid-column:2; grid-row:1/3; }
}
.site-copy-studio { padding:var(--panel-padding); margin-bottom:var(--frame-gap); }
.site-copy-studio>.section-heading { padding:0 0 var(--space-4); border-bottom:1px solid var(--divider); }
.site-copy-studio>p { color:var(--muted); margin:var(--space-4) 0; max-width:76ch; }
.site-copy-studio .account-form { max-width:none; gap:var(--space-3); }
.site-copy-studio details { border-top:1px solid var(--divider); }
.site-copy-studio summary { min-height:44px; cursor:pointer; display:list-item; padding:var(--space-3) 0; color:var(--bright); font:14px/1.6 var(--terminal); }
.site-copy-fields { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:start; gap:var(--space-3) var(--space-4); padding:var(--space-3) 0 var(--space-5); }
.site-copy-fields label { padding-top:var(--space-3); }
.site-copy-fields small { grid-column:2; line-height:1.6; }
.site-copy-fields input,.site-copy-fields textarea { width:100%; min-width:0; }
#site-welcome-text,#site-sidebar-motto { white-space:pre-line; }
.site-copy-studio [role="status"] { min-height:1.6em; color:var(--muted); margin:var(--space-3) 0; }
.wordmark { display:block; max-width:min(360px,32vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand #site-header-tagline { max-width:360px; white-space:normal; overflow-wrap:anywhere; }
#site-channel-name { display:block; overflow-wrap:anywhere; }
#site-channel-blurb { overflow-wrap:anywhere; }
#edit-site-text { border-top:1px solid var(--divider); padding-top:var(--space-3); }
@media(max-width:600px) {
 .topbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-2); min-height:0; }
 .topbar .brand { flex:1 1 0; min-width:0; gap:var(--space-1); }
 .topbar .brand>svg { width:22px; height:22px; flex:0 0 22px; }
 .topbar .brand>div { min-width:0; }
 .topbar .wordmark { font-size:clamp(18px,5.2vw,24px); max-width:none; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; line-height:1.2; }
 .topbar .top-tools { display:flex; flex:0 0 auto; align-items:center; gap:var(--space-1); margin-left:0; }
 .topbar .account-tools { display:flex; gap:var(--space-1); width:auto; }
 .topbar .account-tools>.button { min-width:44px; padding:8px; font-size:12px; }
 .topbar .topnav { order:3; flex:0 0 100%; width:100%; }
 .topbar .account-menu { position:static; }
 .topbar .header-menu>div { width:min(260px,calc(100vw - 32px)); }
 .topbar .account-display-name { max-width:72px; }
}
.device-volume-hint { display:flex; align-items:center; min-height:44px; padding:0 var(--space-2); color:var(--muted); font:12px/1.4 var(--terminal); }
.native-controls .volume-slider { min-height:44px; padding-block:12px; cursor:pointer; touch-action:pan-y; }
@media(max-width:600px) {
 .native-controls .device-volume-hint { grid-column:3; grid-row:1; padding:0; font-size:11px; min-width:0; }
 .native-controls .controls-end { justify-content:space-between; gap:var(--space-1); }
 .native-controls .controls-end>.quiet { flex:0 0 44px; }
 .native-controls .player-settings { width:100%; }
 .schedule-dialog .title-results { max-height:32dvh; }
 .account-form input,.account-form textarea,.account-form select { min-width:0; max-width:100%; }
}
@media(max-width:700px) {
 .site-copy-fields { grid-template-columns:minmax(0,1fr); gap:var(--space-2); }
 .site-copy-fields label { padding-top:var(--space-2); }
 .site-copy-fields small { grid-column:1; }
}
.profile-photo-editor { display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--space-4); align-items:start; margin-top:var(--space-4); }
.profile-photo-preview,.public-profile-avatar { width:96px; height:96px; object-fit:cover; border:1px solid var(--border); border-radius:50%; }
.profile-photo-editor>div { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.profile-photo-editor p { flex-basis:100%; font-size:13px; line-height:1.6; }
.profile-photo-editor input:focus-visible+button { outline:2px solid var(--bright); }
.account-menu .account-avatar { width:28px; height:28px; flex-shrink:0; }
#email-studio details { margin:var(--space-4) 0; }
#email-studio summary { cursor:pointer; min-height:44px; padding:var(--space-3) 0; color:var(--bright); }
#email-studio details>p { margin:var(--space-3) 0; line-height:1.6; }
#email-studio>p { line-height:1.6; }
@media(max-width:600px) {
 .profile-photo-editor { grid-template-columns:72px minmax(0,1fr); gap:var(--space-3); }
 .profile-photo-preview { width:72px; height:72px; }
 .profile-photo-editor .button { width:100%; }
 .account-menu .account-avatar { width:24px; height:24px; }
}

.accent-editor{display:grid;gap:10px;padding-bottom:16px;margin-bottom:12px;border-bottom:1px solid var(--divider);min-width:220px}.accent-editor>strong{font:16px var(--ui);color:var(--bright)}.accent-wheel{width:180px;height:180px;justify-self:center;border-radius:50%;background:radial-gradient(circle,white 0%,transparent 70%),conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border:2px solid var(--border);touch-action:none;cursor:crosshair}.accent-editor label{display:flex;justify-content:space-between;align-items:center;gap:12px}.accent-editor input[type=color]{width:52px;height:40px;padding:3px;background:var(--raised);border:1px solid var(--border)}.accent-editor input[type=text]{width:100px;min-width:0;padding:8px;color:var(--text);background:var(--raised);border:1px solid var(--border);font:16px var(--terminal)}.accent-actions{display:flex;gap:8px;flex-wrap:wrap}.accent-actions .button{min-height:44px;font-size:12px;padding:8px}.appearance-menu .header-menu-panel{max-height:calc(100dvh - 100px);overflow:auto;max-width:calc(100vw - 24px)}
html[data-custom-accent=true][data-crt=on]{--glow:0 0 5px rgb(var(--accent-rgb)/12%)}html[data-custom-accent=true][data-crt=on] .panel{background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgb(var(--accent-rgb)/2%) 3px 4px),linear-gradient(rgb(var(--accent-rgb)/2%) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--accent-rgb)/2%) 1px,transparent 1px)}html[data-custom-accent=true][data-crt=on] :is(.wordmark,.section-heading h2){text-shadow:0 0 3px rgb(var(--accent-rgb)/15%)}

.calendar-heading{grid-template-columns:44px minmax(0,1fr) auto 44px auto;align-items:center}.calendar-jump input{width:150px;min-height:44px;padding:8px;background:var(--raised);color:var(--text);border:1px solid var(--border);font:14px var(--terminal)}.calendar-day{cursor:pointer}.calendar-day:hover{background:var(--raised)}.calendar-day-select{display:flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--bright);font:14px var(--terminal);cursor:pointer}.calendar-day-select:focus-visible{outline:2px solid var(--bright);outline-offset:-2px}.schedule-day-empty{margin:0 0 20px}.schedule-dialog .schedule-event{padding:12px 0}.schedule-dialog [data-day-request]{margin-top:16px}@media(max-width:640px){.calendar-heading{grid-template-columns:44px minmax(0,1fr) 44px auto}.calendar-jump{grid-row:2;grid-column:1/-1;justify-self:center}.calendar-jump input{font-size:16px}.calendar-day-select{width:100%;min-width:0;min-height:44px}.calendar-heading h2{font-size:18px}}