/* Shared interface tokens. The cinema palette and media-led hierarchy are deliberate. */
:root {
  --control:#315a49;
  --control-hover:#3c6b57;
  --control-ink:#ffffff;
  --selected:#badab0;
  --selected-ink:#102018;
  --focus:#b9dfc5;
}
body {font-size:1rem;line-height:1.55}
button,input,textarea,select {font:inherit}
button,.button {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;line-height:1.4;font-size:.9375rem;
  background:var(--control);color:var(--control-ink);border-color:#668a73;
  text-align:center;text-decoration:none;transition:none;
}
button:hover,.button:hover {background:var(--control-hover);color:var(--control-ink);text-decoration:none}
.secondary {background:#243c32;color:var(--ink);border-color:#60786b}
.secondary:hover {background:#345346;color:var(--ink)}
button.quiet {background:transparent;color:var(--accent);border-color:transparent}
button.quiet:hover {background:#243c32;color:var(--ink)}
button:disabled {cursor:default}
.button:active {transform:translateY(1px)}
.watch-play-button:active {transform:translate(-50%,-50%)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:3px solid var(--focus);outline-offset:3px;
}
[hidden] {display:none!important}
input,select,textarea {min-width:0}
input[type=checkbox],input[type=radio] {
  width:20px;height:20px;min-height:20px;padding:0;flex-shrink:0;accent-color:var(--accent);
}
fieldset {min-width:0}
h1,h2,h3,.notice,.auth-card {overflow-wrap:anywhere}
.muted,.media-meta {font-size:.875rem}
.back,.prototype-back {display:inline-flex;align-items:center;min-height:44px;margin-bottom:12px;font-size:.9375rem}
.auth-links a {display:inline-flex;align-items:center;min-height:44px}

/* Flow layout replaces the top header's absolute search positioning. */
.layout-top .site-header {padding:18px 30px;min-height:80px;flex-wrap:wrap}
.layout-top .main-nav {margin-left:auto;flex-wrap:wrap}
.layout-top .utility-bar {position:static;inset:auto;height:auto;padding:12px 30px;border-bottom:1px solid var(--line)}
.search-form,.layout-top .search-form {flex:1 1 12rem;min-width:0;width:100%;max-width:650px}
.search-form input {font-size:1rem}
.utility-bar {gap:16px;flex-wrap:wrap;background:var(--paper)}
.main-nav a,.main-nav summary {font-size:.9375rem}
.main-nav [aria-current=page] {font-weight:600}
.main-nav summary {padding-right:8px}
.main-nav>a,.main-nav summary,.people-nav a {min-height:44px}
.people-nav>div {border-radius:8px}
.people-nav a[aria-current] {font-weight:600;background:#243c32;border-radius:6px}
.layout-sidebar .brand-name {white-space:normal;font-size:1.3125rem}
.layout-sidebar .settings-nav>div {border-radius:0}
.main-nav .people-nav a {font-size:.875rem}
.prototype-nav-toggle {display:none}
.main-nav[hidden] {display:none!important}
.page-heading {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.page-heading h1 {min-width:0;flex:1}
.library-heading {align-items:center}
.library-heading-actions {margin-left:auto;flex-wrap:wrap}
.library-manage {font-size:.875rem;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
.library-summary {overflow-wrap:anywhere}
.collection-chips {min-width:0}
.collection-chips a:hover {background:#243c32}
.collection-chips a[aria-current=page] {font-weight:600}
.collection-chips a[aria-current]:hover {background:var(--selected);color:var(--selected-ink)}
.view-switch {margin:0;flex-shrink:0}
.page-jump {flex-wrap:wrap}
.view-switch button {font-size:.875rem}
.view-switch button:hover {background:#243c32;color:var(--ink)}
.view-switch button[aria-pressed=true],.view-switch button[aria-pressed=true]:hover {
  background:var(--selected);color:var(--selected-ink);border-color:var(--selected);
}
.advanced-filters .library-filters {padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.library-filters label {flex:1 1 140px;min-width:0;font-size:.875rem}
.library-filters input,.library-filters select {max-width:none}
.card-copy h3 a:hover {text-decoration:underline}
.card-copy p,.media-tile p {font-size:.875rem}
.poster-link:focus-visible {outline-offset:-4px}
.card-poster:focus-within {outline:3px solid var(--focus);outline-offset:3px}
.poster-status {display:none}
.enhanced .poster-status:not([hidden]) {display:grid}
.preview-frame img {opacity:1}
.preview-frame[data-state=loading] .preview-label {display:none}
.enhanced .preview-frame[data-state=loading] img {opacity:0}
.enhanced .preview-frame[data-state=loading] .preview-label {display:flex}
.memory-card:hover img {transform:none}
.empty-state {max-width:60ch;padding:32px 0 48px}
.empty-state h2 {font-size:1.5rem;margin-bottom:12px}
.empty-state p {color:var(--muted)}
.empty-state a:not(.button) {text-decoration:underline}
.cinema-grid>.empty-state {grid-column:1/-1}
.filters a {flex-shrink:0;font-size:.9375rem}
.filters a[aria-current=page] {color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px}
.people-list {padding-left:0;list-style:none}
.people-list li {display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.people-list li>a {flex:1;min-width:0}

/* Keep playback primary, with management actions visually quiet. */
.memory-actions {flex-wrap:wrap;gap:10px}
.memory-actions>a:not(.button) {display:inline-flex;align-items:center;min-height:44px;padding:8px;font-size:.875rem;text-decoration:underline}
.memory-details>summary,.notes-disclosure>summary {color:var(--ink)}
.next-item small {font-size:.8125rem}
.note>p {overflow-wrap:anywhere}
.playlistrow h2 {font-size:1.5rem}
.playlist-memory {min-width:0}
.playlistrow form {flex-wrap:wrap}
.playlistrow form button {min-width:44px}
.playlistrow .playlist-memory>a {display:block;min-width:0}
.playlistrow .bulk-thumbnail {flex-basis:110px}

/* Account and public forms share the same reading width and field rhythm. */
.signed-out .auth-card {width:min(100%,440px);margin:24px auto;padding:12px 0 48px}
.signed-out .auth-card h1 {font-size:2rem}
.signed-out .auth-card .stack-form {width:100%;max-width:none}
.signed-out .auth-card .stack-form button {align-self:stretch}
.stack-form label {font-size:.9375rem}
/* WebKit can include a long native field value in its parent's scroll area.
   Keep that painting inside the label while leaving room for the focus ring. */
.stack-form label:not(.check-label) {overflow:clip;overflow-clip-margin:8px}
.account-details {display:grid;grid-template-columns:minmax(90px,auto) minmax(0,1fr);gap:12px 24px;margin:28px 0}
.account-details dt {color:var(--muted)}
.account-details dd {margin:0;overflow-wrap:anywhere}
.account-section {padding:24px 0;border-top:1px solid var(--line)}
.account-section h2 {font-size:1.375rem}
.account-section p {color:var(--muted);font-size:.9375rem}
.account-section .stack-form {margin-bottom:0}
.table-scroll {border-radius:4px}
.table-scroll:focus-visible {outline:3px solid var(--focus);outline-offset:3px}
table {font-size:.875rem}
.admin-workspace .admin-section table {font-size:.875rem}
.admin-sections a {font-size:.875rem}
.admin-workspace .admin-section .create {margin:24px 0}
.admin-workspace .create label {flex-basis:100%;font-size:.9375rem}
.admin-workspace .create input {flex:1 1 240px;max-width:400px}
.access-actions button {text-align:left}
.bulk-toolbar {position:static;max-height:none;margin:24px 0;padding-bottom:max(16px,env(safe-area-inset-bottom))}
[data-selection-ready] .bulk-toolbar {position:fixed;max-height:45vh;margin:0}

@media(min-width:801px) {
  .layout-sidebar .site-header .brand {align-items:center}
}
@media(max-width:800px) {
  body {font-size:1.0625rem}
  .signed-in.layout-sidebar .site-header,.signed-in.layout-top .site-header {
    position:static;display:flex;width:auto;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:8px;padding:12px 16px;overflow:visible;
  }
  .layout-sidebar .site-header .brand {width:auto;max-width:calc(100% - 110px);flex:1;min-width:0}
  .layout-top .site-header .brand {max-width:calc(100% - 110px);min-width:0;flex-shrink:1}
  .brand-name {overflow-wrap:anywhere}
  .brand-mark {width:40px;height:40px}
  .prototype-nav-toggle:not([hidden]) {display:inline-flex;min-width:100px;margin-left:auto;font-weight:600}
  .site-header .main-nav {width:100%;margin:6px 0 0;order:3;align-items:stretch;padding-top:10px;border-top:1px solid var(--line);gap:8px}
  .site-header .main-nav>a,.site-header .main-nav summary {display:flex;align-items:center;padding:8px 10px;min-height:44px}
  .site-header .main-nav summary {display:list-item;list-style-position:inside}
  .site-header .main-nav .people-nav {padding:0;flex:1 1 140px;min-width:0}
  .site-header .main-nav .people-nav>div {position:static;min-width:0;max-width:100%;max-height:40vh;overflow:auto;padding:8px}
  .signed-in .utility-bar {padding:10px 16px}
  .signed-in main {padding:20px 16px 48px}
  input,textarea,select,.library-filters input,.library-filters select {font-size:1rem}
  .library-heading {align-items:center;gap:8px}
  .library-heading h1 {font-size:2rem}
  .library-heading-actions {width:100%;justify-content:space-between;gap:8px}
  .library-manage {font-size:.875rem}
  .card-copy p {font-size:.875rem}
  .collection-chips a {font-size:.875rem}
  .advanced-filters {min-width:0}
  .advanced-filters .library-filters {padding:12px;gap:12px}
  .layout-top .main-nav {margin-left:0}
  .auth-card h1 {font-size:2rem}
  .admin-sections a {font-size:.875rem}
  .playlistrow {align-items:stretch}
  .playlistrow form {align-self:flex-start}
  .bulk-controls button {font-size:.875rem}
}
@media(max-width:380px) {
  .utility-bar {gap:8px}
  .utility-bar button {padding:10px}
  .search-form {gap:6px}
  .search-form input {padding-inline:12px}
  .playlist-memory {gap:12px}
  .playlistrow .bulk-thumbnail {flex-basis:88px}
  .account-details {grid-template-columns:1fr;gap:4px}
  .account-details dd {margin-bottom:12px}
}
@media(prefers-contrast:more) {
  :root {--line:#82998d;--muted:#d4ded7}
  button,.button {border-color:#b9dfc5}
}
@media(prefers-reduced-transparency:reduce) {
  .bulk-item-select,.duration,.watch-play-button {background:#10191a}
}
@media(prefers-reduced-motion:reduce) {
  .button:active {transform:none}
  .watch-play-button:active {transform:translate(-50%,-50%)}
}