/* Theatre-only compositions. Canonical roles plus the Web-only shape roles; local measures are app geometry. */
/* Bundled Noto Sans/Serif (OFL, Vietnamese + Latin subset; provenance in assets/provenance.json).
   The shared type roles name these families; without these faces a machine lacking Noto would
   silently fall back to Georgia/system-ui. Two weights each: 500/600 map to the regular/bold faces. */
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/noto-sans-regular.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/noto-sans-bold.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/noto-serif-regular.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/noto-serif-bold.woff2") format("woff2"); }
body { margin: 0; }
.theatre-shell { min-block-size: 100vh; }
.theatre-app {
  --theatre-rail-size: 13.5rem;
  --theatre-player-clearance: 13rem;
  display: grid;
  grid-template-columns: var(--theatre-rail-size) minmax(0, 1fr);
  min-block-size: 100vh;
}
.theatre-app * { box-sizing: border-box; }
.theatre-app :where(h1, h2, h3, p) { margin-block-start: 0; overflow-wrap: anywhere; }
.theatre-app :where(a, button, input, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--cantos-size-focus-width) solid var(--cantos-color-focus);
  outline-offset: var(--cantos-size-focus-offset);
}
/* Route changes move focus to <main> for assistive technology; the landmark itself is not a control. */
.theatre-main:focus { outline: none; }
.theatre-app :where(a, button, input, select) {
  scroll-margin-block: var(--cantos-space-xl) var(--theatre-player-clearance);
}
.theatre-app a { color: inherit; text-decoration-thickness: var(--cantos-size-border); text-underline-offset: var(--cantos-space-xs); }
.theatre-app h1 { font: var(--cantos-type-headline-weight) var(--cantos-type-headline-size)/var(--cantos-type-headline-line-height) var(--cantos-type-family-editorial); }
.theatre-app h2 { font: var(--cantos-type-title-weight) var(--cantos-type-title-size)/var(--cantos-type-title-line-height) var(--cantos-type-family-editorial); }
.theatre-app h3 { font: var(--cantos-type-title-weight) var(--cantos-type-body-size)/var(--cantos-type-body-line-height) var(--cantos-type-family-editorial); }
.theatre-muted { color: var(--cantos-color-on-surface-variant); }
.theatre-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.theatre-eyebrow {
  color: var(--cantos-color-accent);
  font-size: var(--cantos-type-metadata-size);
  font-weight: var(--cantos-type-label-weight);
  letter-spacing: .08em;
}
.theatre-icon { display: inline-flex; flex-shrink: 0; inline-size: var(--cantos-size-icon); block-size: var(--cantos-size-icon); }
.theatre-icon svg { inline-size: 100%; block-size: 100%; }
.theatre-skip {
  position: fixed;
  inset-block-start: var(--cantos-space-sm);
  inset-inline-start: var(--cantos-space-sm);
  z-index: 50;
  padding: var(--cantos-space-md);
  background: var(--cantos-color-primary);
  color: var(--cantos-color-on-primary) !important;
  transform: translateY(-200%);
}
.theatre-skip:focus { transform: none; }
.theatre-rail {
  position: sticky;
  inset-block-start: 0;
  align-self: start;
  min-block-size: 100vh;
  padding: var(--cantos-space-xl) var(--cantos-space-md);
  background: var(--cantos-color-surface);
}
.theatre-brand { display: grid; gap: var(--cantos-space-sm); padding: var(--cantos-space-md); text-decoration: none; }
.theatre-brand-name { font: var(--cantos-type-headline-weight) var(--cantos-type-headline-size)/var(--cantos-type-headline-line-height) var(--cantos-type-family-editorial); color: var(--cantos-color-primary); }
.theatre-brand small { color: var(--cantos-color-on-surface-variant); font-size: var(--cantos-type-metadata-size); }
.theatre-nav { display: grid; gap: var(--cantos-space-sm); margin-block: var(--cantos-space-xl); }
.theatre-nav-link {
  display: flex;
  align-items: center;
  gap: var(--cantos-space-inset);
  min-block-size: var(--cantos-size-control);
  padding: var(--cantos-space-inset) var(--cantos-space-md);
  border-radius: var(--cantos-web-shape-control);
  text-decoration: none;
  color: var(--cantos-color-on-surface-variant) !important;
}
.theatre-nav-link[aria-current="page"] { background: var(--cantos-color-primary-container); color: var(--cantos-color-on-primary-container) !important; font-weight: var(--cantos-type-label-weight); }
.theatre-nav-link:hover { background: var(--cantos-color-surface-container); }
.theatre-quote { padding: var(--cantos-space-md); font-family: var(--cantos-type-family-editorial); color: var(--cantos-color-on-surface-variant); }
.theatre-content { min-inline-size: 0; }
.theatre-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cantos-space-md); padding: var(--cantos-space-lg) var(--cantos-space-xl); color: var(--cantos-color-on-surface-variant); }
.theatre-topbar p { margin: 0; }
.theatre-topbar-actions { display: flex; align-items: center; gap: var(--cantos-space-md); }
.theatre-demo-label { font-size: var(--cantos-type-metadata-size); }
.theatre-main { padding: var(--cantos-space-md) var(--cantos-space-lg) var(--theatre-player-clearance); }
.theatre-demo-notice { padding: var(--cantos-space-md); border-radius: var(--cantos-web-shape-reading); background: var(--cantos-color-surface-container); color: var(--cantos-color-on-surface-variant); font-size: var(--cantos-type-metadata-size); }
.theatre-page-heading { margin-block: var(--cantos-space-xl); }
.theatre-page-heading h1 { margin-block-end: var(--cantos-space-sm); }
.theatre-page-heading .theatre-muted { max-inline-size: 65ch; }
.theatre-feature { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(12rem, 1fr); gap: var(--cantos-space-lg); background: var(--cantos-color-surface); border-radius: var(--cantos-web-shape-overlay); overflow: hidden; }
.theatre-feature-copy { padding: var(--cantos-space-xl); align-self: center; }
.theatre-feature h2 { font-size: var(--cantos-type-headline-size); }
.theatre-feature-copy > p { max-inline-size: 50ch; }
.theatre-feature-cover .theatre-cover { block-size: 100%; border-radius: 0; }
.theatre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cantos-space-inset); margin-block: var(--cantos-space-md); }
.theatre-action, .theatre-chip, .theatre-text-link, .theatre-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cantos-space-sm);
  min-block-size: var(--cantos-size-control);
  max-inline-size: 100%;
  padding: var(--cantos-space-sm) var(--cantos-space-md);
  border: 0;
  border-radius: var(--cantos-web-shape-control);
  font: var(--cantos-type-label-weight) var(--cantos-type-label-size)/var(--cantos-type-label-line-height) var(--cantos-type-family-ui);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.theatre-action { background: var(--cantos-color-primary); color: var(--cantos-color-on-primary) !important; }
.theatre-action-tonal { background: var(--cantos-color-primary-container); color: var(--cantos-color-on-primary-container) !important; }
.theatre-action-text, .theatre-text-link, .theatre-back { background: transparent; color: var(--cantos-color-primary) !important; }
.theatre-action:disabled { background: var(--cantos-color-surface-container); color: var(--cantos-color-on-surface-variant) !important; cursor: default; }
.theatre-action:not(:disabled):hover, .theatre-chip:hover { background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--cantos-state-hover-opacity) * 100%), transparent), color-mix(in srgb, currentColor calc(var(--cantos-state-hover-opacity) * 100%), transparent)); }
.theatre-action, .theatre-chip { transition: background-color var(--cantos-motion-feedback-duration) var(--cantos-motion-effects-easing); }
.theatre-chip { background: var(--cantos-color-surface-container); color: var(--cantos-color-on-surface-variant); }
.theatre-chip[aria-pressed="true"] { background: var(--cantos-color-primary-container); color: var(--cantos-color-on-primary-container); }
.theatre-action-tonal[aria-pressed="true"] { background: var(--cantos-color-primary); color: var(--cantos-color-on-primary) !important; }
.theatre-filters { display: flex; flex-wrap: wrap; gap: var(--cantos-space-sm); margin-block: var(--cantos-space-lg); }
.theatre-section-heading { margin-block: var(--cantos-space-xl) var(--cantos-space-lg); }
.theatre-library-section { margin-block: var(--cantos-space-xl); }
/* Panels: the Web v2 base panel is 24px (panel role); nested art and rows keep the container role. */
.theatre-panel { padding: var(--cantos-space-lg); background: var(--cantos-color-surface-container); color: var(--cantos-color-on-surface); border-radius: var(--cantos-web-shape-panel); }
/* The one app-private listener avatar (guest glyph); `large` is the account identity size. */
.theatre-app .theatre-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--cantos-size-control);
  min-block-size: var(--cantos-size-control);
  border-radius: var(--cantos-shape-pill);
  background: var(--cantos-color-primary-container);
  color: var(--cantos-color-on-primary-container);
  text-decoration: none;
}
.theatre-avatar svg { inline-size: var(--cantos-size-icon); block-size: var(--cantos-size-icon); }
.theatre-avatar[data-size="large"] { inline-size: var(--cantos-size-avatar-large); min-block-size: var(--cantos-size-avatar-large); }
.theatre-avatar[data-size="large"] svg { inline-size: calc(var(--cantos-size-icon) * 1.5); block-size: calc(var(--cantos-size-icon) * 1.5); }
.theatre-avatar[aria-current="page"] { outline: var(--cantos-size-focus-width) solid var(--cantos-color-primary); outline-offset: calc(var(--cantos-size-focus-offset) * -1); }
.theatre-cover[data-art] { padding: 0; background: var(--cantos-color-surface-container); }
.theatre-cover-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Small covers: artwork only; the typographic fallback keeps just its title. */
.theatre-continue-art .theatre-cover, .theatre-row-art .theatre-cover { aspect-ratio: 1; min-block-size: 0; padding: var(--cantos-space-sm); justify-content: center; }
.theatre-continue-art .theatre-cover[data-art], .theatre-row-art .theatre-cover[data-art] { padding: 0; }
.theatre-continue-art .theatre-cover:not([data-art]) > :not(strong), .theatre-row-art .theatre-cover:not([data-art]) > :not(strong) { display: none; }
.theatre-continue-art .theatre-cover strong, .theatre-row-art .theatre-cover strong { font-size: var(--cantos-type-metadata-size); line-height: var(--cantos-type-body-line-height); }
/* Artwork and copy sit side by side while the copy keeps a readable measure, and stack when it would not (small viewport or large text). */
.theatre-continue { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--cantos-space-lg); max-inline-size: 44rem; }
.theatre-continue-art { flex: 0 0 clamp(4.5rem, 18vw, 8rem); }
.theatre-continue-body { flex: 1 1 11rem; }
.theatre-continue-body { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--cantos-space-sm); min-inline-size: 0; }
.theatre-app .theatre-continue-title { margin: 0; font-size: var(--cantos-type-title-size); line-height: var(--cantos-type-title-line-height); }
.theatre-continue-title a, .theatre-row-copy h3 a, .theatre-work-meta h3 a { display: inline-flex; align-items: center; min-block-size: var(--cantos-size-control); text-decoration: none; }
.theatre-continue-episode { margin: 0; color: var(--cantos-color-on-surface-variant); }
.theatre-continue-body .theatre-action { margin-block-start: var(--cantos-space-sm); }
.theatre-hint { margin: 0; font-size: var(--cantos-type-metadata-size); }
.theatre-progress-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cantos-space-xs) var(--cantos-space-md); inline-size: 100%; margin-block-start: var(--cantos-space-sm); }
.theatre-progress-row .theatre-time { margin: 0; white-space: normal; color: var(--cantos-color-on-surface-variant); font-size: var(--cantos-type-metadata-size); }
.theatre-progress { flex: 1 1 8rem; block-size: var(--cantos-space-sm); border-radius: var(--cantos-shape-pill); background: var(--cantos-color-outline-variant); overflow: hidden; }
.theatre-progress > span { display: block; inline-size: var(--theatre-progress, 0%); block-size: 100%; border-radius: inherit; background: var(--cantos-color-primary); }
.theatre-history-list { display: grid; gap: var(--cantos-space-md); max-inline-size: 44rem; margin: 0; padding: 0; list-style: none; }
.theatre-continue + .theatre-history-list { margin-block-start: var(--cantos-space-md); }
.theatre-listening-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: var(--cantos-space-md); }
.theatre-row-copy { display: grid; gap: var(--cantos-space-xs); min-inline-size: 0; }
.theatre-app .theatre-row-copy :where(h3, p) { margin: 0; }
.theatre-quiet-empty { max-inline-size: 65ch; margin: 0; }
.theatre-empty { display: flex; align-items: flex-start; gap: var(--cantos-space-md); max-inline-size: 44rem; }
.theatre-empty > div { min-inline-size: 0; }
.theatre-app .theatre-empty h3 { margin-block-end: var(--cantos-space-sm); }
.theatre-empty .theatre-icon { margin-block-start: var(--cantos-space-xs); color: var(--cantos-color-primary); }
.theatre-empty .theatre-action { margin-block-start: var(--cantos-space-sm); }
.theatre-account { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 36rem); align-items: start; gap: var(--cantos-space-lg); }
.theatre-account-identity { display: grid; justify-items: start; gap: var(--cantos-space-md); }
.theatre-app .theatre-account-name h2 { margin: 0 0 var(--cantos-space-xs); }
.theatre-account-name p { margin: 0; }
.theatre-account-content { display: grid; gap: var(--cantos-space-lg); min-inline-size: 0; }
.theatre-app .theatre-group-heading { margin: 0 0 var(--cantos-space-sm); color: var(--cantos-color-on-surface-variant); font: var(--cantos-type-label-weight) var(--cantos-type-label-size)/var(--cantos-type-label-line-height) var(--cantos-type-family-ui); }
.theatre-rows { display: grid; gap: var(--cantos-space-xs); margin: 0; padding: 0; list-style: none; }
.theatre-rows dd { margin: 0; }
.theatre-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--cantos-space-xs) var(--cantos-space-md); min-block-size: var(--cantos-size-control); padding-block: var(--cantos-space-inset); }
.theatre-row-label { font-weight: var(--cantos-type-label-weight); }
.theatre-row-value { padding: var(--cantos-space-xs) var(--cantos-space-md); border-radius: var(--cantos-shape-pill); background: var(--cantos-color-surface-container-high); font-size: var(--cantos-type-metadata-size); font-weight: var(--cantos-type-label-weight); }
.theatre-row-help { grid-column: 1 / -1; font-size: var(--cantos-type-metadata-size); }
.theatre-row-link { grid-template-columns: auto minmax(0, 1fr); gap: var(--cantos-space-md); padding-inline: var(--cantos-space-md); border-radius: var(--cantos-web-shape-control); text-decoration: none; }
.theatre-row-link .theatre-row-copy { display: grid; gap: var(--cantos-space-xs); }
.theatre-row-link:hover { background: var(--cantos-color-surface-container-high); }
.theatre-section-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cantos-space-sm); }
.theatre-section-header h2 { margin-block: var(--cantos-space-md); }
.theatre-history-confirm { margin-block: var(--cantos-space-lg); padding: var(--cantos-space-lg); border-radius: var(--cantos-web-shape-container); background: var(--cantos-color-surface-container-high); }
.theatre-library-section .theatre-shelf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 16rem)); }
.theatre-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cantos-space-lg); }
.theatre-work-card { min-inline-size: 0; }
.theatre-cover-link { display: block; border-radius: var(--cantos-web-shape-container); text-decoration: none; }
.theatre-cover {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: end;
  min-block-size: 15rem;
  padding: var(--cantos-space-lg);
  background: var(--cantos-color-primary-container);
  color: var(--cantos-color-on-primary-container);
  border-radius: var(--cantos-web-shape-container);
  overflow: hidden;
  isolation: isolate;
}
.theatre-cover[data-work="den-khuya"] { background: var(--cantos-color-surface-container-high); color: var(--cantos-color-on-surface); }
.theatre-cover[data-work="mong-ho-diep"] { background: var(--cantos-color-surface-container); color: var(--cantos-color-on-surface); }
.theatre-cover-moon { position: absolute; z-index: -1; inset-block-start: var(--cantos-space-lg); inset-inline-end: var(--cantos-space-lg); inline-size: 4rem; block-size: 4rem; border-radius: var(--cantos-shape-pill); background: var(--cantos-color-surface); }
.theatre-cover-index { margin-block-end: auto; font-size: var(--cantos-type-metadata-size); padding-block-end: var(--cantos-space-xxl); }
.theatre-cover strong { font: var(--cantos-type-headline-weight) var(--cantos-type-headline-size)/var(--cantos-type-headline-line-height) var(--cantos-type-family-editorial); }
.theatre-cover small { padding-block-start: var(--cantos-space-sm); }
.theatre-work-meta { padding-block: var(--cantos-space-md); }
.theatre-work-meta h3 { font-size: var(--cantos-type-title-size); margin-block-end: var(--cantos-space-sm); }
.theatre-work-meta h3 a { text-decoration: none; }
.theatre-search-field { display: grid; gap: var(--cantos-space-sm); }
.theatre-input { inline-size: 100%; min-block-size: var(--cantos-size-control); padding: var(--cantos-space-inset) var(--cantos-space-md); border: var(--cantos-size-border) solid var(--cantos-color-outline); border-radius: var(--cantos-web-shape-reading); background: var(--cantos-color-surface); color: var(--cantos-color-on-surface); font: inherit; }
.theatre-state { padding: var(--cantos-space-xl); background: var(--cantos-color-surface-container); border-radius: var(--cantos-web-shape-container); max-inline-size: 65ch; }
.theatre-state p { margin-block: var(--cantos-space-md); }
.theatre-work-intro { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); align-items: center; gap: var(--cantos-space-xl); margin-block: var(--cantos-space-lg); }
.theatre-synopsis { font-family: var(--cantos-type-family-editorial); line-height: var(--cantos-type-editor-line-height); max-inline-size: 65ch; }
.theatre-episode-list, .theatre-bookmarks { padding: 0; list-style: none; }
.theatre-episode-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cantos-space-md); padding: var(--cantos-space-md); margin-block: var(--cantos-space-sm); }
.theatre-episode-row[data-current="true"] { background: var(--cantos-color-surface-container); border-radius: var(--cantos-web-shape-container); }
.theatre-episode-number { font-variant-numeric: tabular-nums; color: var(--cantos-color-on-surface-variant); }
.theatre-episode-copy { flex: 1 1 16rem; min-inline-size: 0; }
.theatre-episode-copy h3 { margin-block-end: var(--cantos-space-xs); }
.theatre-episode-copy p { margin-block-end: 0; }
.theatre-episode-copy p span { display: inline-block; margin-inline-start: var(--cantos-space-sm); }
.theatre-episode-actions { display: flex; flex-wrap: wrap; gap: var(--cantos-space-sm); }
.theatre-queue-action { display: grid; gap: var(--cantos-space-xs); }
.theatre-queue-action p { margin: 0; }
.theatre-bookmark-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cantos-space-md); padding-block: var(--cantos-space-lg); }
.theatre-bookmark-row > div { flex: 1 1 16rem; min-inline-size: 0; }
.theatre-bookmark-row h2, .theatre-bookmark-row h3, .theatre-bookmark-row p { margin-block-end: var(--cantos-space-sm); }
.theatre-player { display: grid; grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); gap: var(--cantos-space-xl); }
.theatre-player-cover .theatre-cover { aspect-ratio: 1; }
.theatre-player-body h2 { margin-block-end: var(--cantos-space-sm); }
.theatre-player-body > p { margin-block: var(--cantos-space-md); }
.theatre-range-field { display: grid; gap: var(--cantos-space-sm); margin-block-start: var(--cantos-space-lg); }
.theatre-range-field input { inline-size: 100%; min-block-size: var(--cantos-size-control); accent-color: var(--cantos-color-primary); cursor: pointer; }
.theatre-player-facts { margin-block: var(--cantos-space-lg); }
.theatre-player-facts > div { display: flex; flex-wrap: wrap; gap: var(--cantos-space-md); }
.theatre-player-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.theatre-mini-player {
  position: fixed;
  z-index: 20;
  inset-inline-start: calc(var(--theatre-rail-size) + var(--cantos-space-lg));
  inset-inline-end: var(--cantos-space-lg);
  inset-block-end: max(var(--cantos-space-md), env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cantos-space-md);
  padding: var(--cantos-space-md) var(--cantos-space-lg);
  background: var(--cantos-color-surface-container-high);
  color: var(--cantos-color-on-surface);
  border-radius: var(--cantos-web-shape-overlay);
  box-shadow: var(--cantos-elevation-overlay);
  max-block-size: calc(100vh - var(--cantos-space-xl));
  overflow-y: auto;
}
.theatre-mini-title { display: flex; align-items: center; gap: var(--cantos-space-inset); flex: 1 1 18rem; min-inline-size: 0; min-block-size: var(--cantos-size-control); text-decoration: none; }
.theatre-mini-title span { min-inline-size: 0; }
.theatre-mini-title strong, .theatre-mini-title small { display: block; overflow-wrap: anywhere; }
.theatre-mini-title small { color: var(--cantos-color-on-surface-variant); }
.theatre-mini-cover { flex: 0 0 var(--cantos-size-control); inline-size: var(--cantos-size-control); aspect-ratio: 1; overflow: hidden; border-radius: var(--cantos-web-shape-container); }
.theatre-mini-cover .theatre-cover { inline-size: 100%; block-size: 100%; min-block-size: 0; padding: 0; }
.theatre-mini-cover .theatre-cover :is(strong, small, .theatre-cover-index) { display: none; }
.theatre-mini-player .theatre-time { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.theatre-mini-player .theatre-transport { grid-column: 2; grid-row: 1; }
.theatre-mini-progress { grid-column: 1 / -1; inline-size: 100%; block-size: var(--cantos-space-xs); accent-color: var(--cantos-color-primary); }
.theatre-demo-tools { margin-block-start: var(--cantos-space-xl); }
.theatre-unsupported { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cantos-space-md); margin-block: var(--cantos-space-md); }
.theatre-unsupported p { margin: 0; }
.theatre-footer { margin-block-start: var(--cantos-space-xl); color: var(--cantos-color-on-surface-variant); font-size: var(--cantos-type-metadata-size); }
@media (max-width: 73.75rem) { .theatre-app { --theatre-rail-size: 11.5rem; } .theatre-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 56.25rem) { .theatre-player { grid-template-columns: minmax(0, 1fr); } .theatre-player-cover { max-inline-size: 20rem; } .theatre-feature { grid-template-columns: minmax(0, 1fr) minmax(8rem, .65fr); } }
@media (max-width: 43.75rem) {
  .theatre-app { --theatre-rail-size: 0rem; --theatre-player-clearance: 19rem; display: block; }
  .theatre-rail { position: static; min-block-size: 0; padding: var(--cantos-space-md); }
  .theatre-brand { padding: var(--cantos-space-xs); }
  .theatre-brand small, .theatre-quote, .theatre-rail-note { display: none; }
  .theatre-nav { display: flex; flex-wrap: wrap; gap: var(--cantos-space-xs); margin-block: var(--cantos-space-md) 0; }
  .theatre-nav-link { flex: 1 1 8rem; padding: var(--cantos-space-sm); }
  .theatre-topbar { padding: var(--cantos-space-md); }
  .theatre-main { padding-inline: 0; }
  .theatre-shelf, .theatre-work-intro { grid-template-columns: minmax(0, 1fr); }
  .theatre-work-intro > .theatre-cover { max-inline-size: 20rem; }
  .theatre-feature { display: block; }
  .theatre-feature-copy { padding: var(--cantos-space-lg); }
  .theatre-feature-cover { display: none; }
  .theatre-mini-player { inset-inline: var(--cantos-space-sm); padding: var(--cantos-space-md); }
  .theatre-mini-title { flex-basis: 100%; }
  .theatre-mini-player .theatre-time { margin-inline-start: 0; }
  .theatre-episode-row { padding-inline: 0; }
  .theatre-episode-row[data-current="true"] { padding-inline: var(--cantos-space-sm); }
}
@media (prefers-reduced-motion: reduce) { .theatre-action, .theatre-chip { transition: none; } }
@media (forced-colors: active) {
  .theatre-action, .theatre-chip, .theatre-nav-link[aria-current="page"] { outline: var(--cantos-size-border) solid ButtonText; }
  .theatre-action:disabled { color: GrayText !important; }
  .theatre-chip[aria-pressed="true"], .theatre-action[aria-pressed="true"] { outline: var(--cantos-size-focus-width) solid Highlight; }
}
@media (max-width: 56.25rem) { .theatre-account { grid-template-columns: minmax(0, 1fr); max-inline-size: 36rem; } }
@media (max-width: 43.75rem) {
  .theatre-panel { padding: var(--cantos-space-md); }
  .theatre-continue { gap: var(--cantos-space-md); }
  .theatre-continue-art { flex-basis: clamp(4.5rem, 18vw, 5rem); }
  .theatre-listening-row { grid-template-columns: clamp(2.5rem, 14vw, 3.5rem) minmax(0, 1fr); }
  .theatre-listening-row > .theatre-action { grid-column: 2; justify-self: start; }
}
@media (forced-colors: active) {
  .theatre-progress { outline: var(--cantos-size-border) solid ButtonText; }
  .theatre-progress > span { background: Highlight; }
}

/* Issue128's opt-in diagnostic uses app-owned semantic HTML and canonical roles.
   Shared auth components remain unqualified; this does not add an admission baseline. */
.membership-preview { min-block-size: 100vh; padding: var(--cantos-space-lg); }
.membership-preview * { box-sizing: border-box; }
.membership-preview :where(h1,h2,p,label,a,button,summary) { overflow-wrap: anywhere; }
.membership-preview :where(button,input,select,a,summary):focus-visible {
  outline: var(--cantos-size-focus-width) solid var(--cantos-color-focus);
  outline-offset: var(--cantos-size-focus-offset);
}
.membership-preview h1 { font: var(--cantos-type-headline-weight) var(--cantos-type-headline-size)/var(--cantos-type-headline-line-height) var(--cantos-type-family-editorial); }
.membership-preview h2 { font: var(--cantos-type-title-weight) var(--cantos-type-title-size)/var(--cantos-type-title-line-height) var(--cantos-type-family-editorial); }
.membership-preview a { color: var(--cantos-color-primary); }
.membership-preview main { min-inline-size: 0; }
.membership-preview main:focus { outline: none; }
.membership-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cantos-space-md); margin-block-end: var(--cantos-space-lg); }
.membership-toolbar strong { margin-inline-end: auto; font-family: var(--cantos-type-family-editorial); font-size: var(--cantos-type-title-size); }
.membership-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: var(--cantos-space-xl); max-inline-size: 72rem; margin: var(--cantos-space-xl) auto; }
.membership-story { align-self: start; overflow: hidden; }
.membership-story img { display: block; inline-size: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--cantos-web-shape-reading); margin-block-end: var(--cantos-space-lg); }
.membership-preview form, .membership-actions { display: grid; gap: var(--cantos-space-sm); margin-block: var(--cantos-space-lg); }
.membership-preview form label { font-weight: var(--cantos-type-label-weight); }
.membership-preview form input { inline-size: 100%; min-inline-size: 0; min-block-size: var(--cantos-size-control); padding: var(--cantos-space-md); border: var(--cantos-size-border) solid transparent; border-radius: var(--cantos-shape-auth-field); background: var(--cantos-color-surface-container); color: var(--cantos-color-on-surface); font: inherit; }
.membership-preview form input[aria-invalid="true"] { border-color: var(--cantos-color-error); }
.membership-preview form input[readonly] { border-color: var(--cantos-color-outline); }
.membership-error { color: var(--cantos-color-error); margin: 0; }
.membership-preview .theatre-action { margin-block: var(--cantos-space-xs); }
.membership-preview .theatre-action[aria-disabled="true"] { cursor: default; }
.membership-preview select { max-inline-size: 100%; min-block-size: var(--cantos-size-control); padding: var(--cantos-space-sm); font: inherit; color: var(--cantos-color-on-surface); background: var(--cantos-color-surface); border-color: var(--cantos-color-outline); }
.membership-plans { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--cantos-space-md); margin-block: var(--cantos-space-lg); }
.membership-plans article:last-child { background: var(--cantos-color-primary-container); color: var(--cantos-color-on-primary-container); }
.membership-tools { max-inline-size: 72rem; margin-inline: auto; }
.membership-preview summary { cursor: pointer; padding: var(--cantos-space-sm); min-block-size: var(--cantos-size-control); }
.membership-preview fieldset { min-inline-size: 0; border: 0; margin-block: var(--cantos-space-lg); }
@media (max-width: 52.5rem) {
  .membership-layout { grid-template-columns: minmax(0,1fr); }
  .membership-story { display: none; }
}
@media (max-width: 30rem) {
  .membership-preview { padding: var(--cantos-space-md); }
  .membership-plans { grid-template-columns: minmax(0,1fr); }
}
.membership-preview main .theatre-action { min-block-size: var(--cantos-size-auth-primary); border-radius: var(--cantos-shape-pill); }
.membership-preview main .theatre-action-tonal { min-block-size: var(--cantos-size-auth-secondary); }
.membership-preview form input { min-block-size: var(--cantos-size-auth-field); }
.membership-toolbar a { display: inline-flex; align-items: center; min-block-size: var(--cantos-size-control); }

/* Auth–Account v2: app-owned layout; shared variants retain control/state geometry. */
.theatre-live-app { --theatre-player-clearance: var(--cantos-space-xl); }
.theatre-live-app #theatre-library-account { margin-block-start: var(--cantos-space-lg); }
.theatre-live-app .theatre-topbar select, .theatre-account-theme select {
  min-block-size: var(--cantos-size-control); max-inline-size: 100%;
  padding: var(--cantos-space-sm) var(--cantos-space-md);
  font: inherit; color: var(--cantos-color-on-surface);
  background: var(--cantos-color-surface-container); border: 0;
  border-radius: var(--cantos-web-shape-control);
}
.theatre-logo-dark { display: none; }
:where(.cantos-ui[data-theme="dark"]) .theatre-logo-light { display: none; }
:where(.cantos-ui[data-theme="dark"]) .theatre-logo-dark { display: block; }
.theatre-brand .cui-logo { inline-size: 100%; max-inline-size: 10rem; block-size: auto; }
.theatre-auth { max-inline-size: 70rem; margin-inline: auto; }
.theatre-auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--cantos-space-lg); margin-block-end: var(--cantos-space-xl); }
.theatre-auth-brand { inline-size: 9rem; flex-shrink: 0; }
.theatre-auth-brand .cui-logo { inline-size: 100%; block-size: auto; }
.theatre-auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cantos-space-xl); align-items: center; }
.theatre-auth-story { overflow: hidden; }
.theatre-auth-art { min-block-size: 13rem; display: grid; place-items: center; background: var(--cantos-color-primary-container); padding: var(--cantos-space-xl); }
.theatre-auth-art .cui-logo { inline-size: 7rem; block-size: auto; }
.theatre-auth-story-copy { padding: var(--cantos-space-xl); }
.theatre-auth-story-copy h2 { font-size: var(--cantos-type-headline-size); }
.theatre-auth-copy { padding: var(--cantos-space-md); min-inline-size: 0; }
.theatre-auth-copy h1 { font: var(--cantos-type-auth-heading-weight) var(--cantos-type-auth-heading-size)/var(--cantos-type-auth-heading-line-height) var(--cantos-type-family-editorial); }
.theatre-auth-actions { display: grid; gap: var(--cantos-space-md); margin-block: var(--cantos-space-lg); }
.theatre-auth-actions .cui-button { inline-size: 100%; }
.theatre-auth-helper { font-size: var(--cantos-type-metadata-size); }
.theatre-account-profile .theatre-avatar { margin-block-end: var(--cantos-space-lg); }
.theatre-account-recovery { display: grid; gap: var(--cantos-space-sm); }
.theatre-account-content { min-inline-size: 0; display: grid; gap: var(--cantos-space-lg); }
.theatre-account-theme { display: grid; gap: var(--cantos-space-sm); margin-block: var(--cantos-space-lg); }
.theatre-account-theme p { font-size: var(--cantos-type-metadata-size); }
.theatre-account-links { list-style: none; margin: 0; padding: 0; }
.theatre-account-links a { display: flex; align-items: center; min-block-size: var(--cantos-size-control); padding-block: var(--cantos-space-sm); }
.theatre-home-auth-actions { display: flex; flex-wrap: wrap; gap: var(--cantos-space-sm); }
.theatre-public-hero { max-inline-size: 48rem; padding-block: var(--cantos-space-xl); }
.theatre-public-hero h1 { font-size: var(--cantos-type-auth-heading-size); }
.theatre-public-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--cantos-space-lg); }
.theatre-public-work, .theatre-public-state { padding: var(--cantos-space-lg); }
.theatre-public-work { position: relative; }
/* The title link is the card's one named target; its hit area covers the card. */
.theatre-public-work-link { text-decoration: none; }
.theatre-public-work-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.theatre-public-work-link:hover { text-decoration: underline; }
.theatre-public-work:has(.theatre-public-work-link:focus-visible) { outline: var(--cantos-size-focus-width) solid var(--cantos-color-focus); outline-offset: var(--cantos-size-focus-offset); }
.theatre-public-work-detail { display: grid; gap: var(--cantos-space-md); }
.theatre-public-work-intro { align-items: start; }
.theatre-public-unit-list { margin: 0; }
.theatre-public-unit[data-unavailable="true"] { color: var(--cantos-color-on-surface-variant); }
.theatre-public-units { display: grid; gap: var(--cantos-space-sm); }
.theatre-membership-information { max-inline-size: 40rem; margin-inline: auto; }
@media (prefers-color-scheme: dark) {
  :where(.cantos-ui[data-theme="system"]) .theatre-logo-light { display: none; }
  :where(.cantos-ui[data-theme="system"]) .theatre-logo-dark { display: block; }
}
@media (max-width: 55rem) {
  .theatre-auth-layout { grid-template-columns: minmax(0, 1fr); }
  .theatre-auth-story { display: none; }
}
@media (max-width: 34rem) {
  .theatre-live-app .theatre-topbar { padding: var(--cantos-space-md); }
  .theatre-live-app .theatre-main { padding-inline: var(--cantos-space-sm); }
  .theatre-auth-top { align-items: flex-start; flex-wrap: wrap; }
  .theatre-auth-brand { inline-size: 7rem; }
  .theatre-auth-copy { padding-inline: 0; }
  .theatre-locale-label { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; }
}

.theatre-live-app[data-auth="true"] { grid-template-columns: minmax(0, 1fr); }
.theatre-live-app[data-auth="true"] :is(.theatre-rail, .theatre-topbar) { display: none; }
.theatre-live-app[data-auth="true"] .theatre-main { padding-block-start: var(--cantos-space-xl); }
.theatre-live-app .theatre-account { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.theatre-auth-preview { margin: var(--cantos-space-md); padding: var(--cantos-space-md); border: var(--cantos-size-border) dashed var(--cantos-color-outline); }
@media (max-width: 56.25rem) { .theatre-live-app .theatre-account { grid-template-columns: minmax(0, 1fr); } }