/* CineRoll — Material 3 Expressive throughout. Colours are M3 roles (--md-*) from css/scheme.css,
   generated from the reel's amber; a poster recolours its part of the page with a scheme class
   (js/color.js). Shapes from the M3 Expressive library in css/shapes.css.
   Google Sans Flex 5.3.1 (weight axis), SIL OFL (fonts/LICENSE-google-sans-flex.txt), hosted here. */
@import url('scheme.css?v=3');
@import url('shapes.css?v=3');

@font-face {
    font-family: 'Google Sans Flex';
    font-style: normal;
    font-weight: 1 1000;
    font-display: swap;
    src: url('../fonts/google-sans-flex-latin-wght-5.3.1.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Google Sans Flex';
    font-style: normal;
    font-weight: 1 1000;
    font-display: swap;
    src: url('../fonts/google-sans-flex-latin-ext-wght-5.3.1.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
    --font: 'Google Sans Flex', 'Roboto', system-ui, sans-serif;
    --shape-xs: 4px;
    --shape-sm: 8px;
    --shape-md: 12px;
    --shape-lg: 16px;
    --shape-xl: 28px;
    --shape-xxl: 48px;
    /* Springs sampled from damped springs: moving things overshoot a little and settle */
    --spring: linear(0, 0.054, 0.185, 0.357, 0.538, 0.708, 0.853, 0.967, 1.047, 1.097, 1.122, 1.126, 1.116, 1.098, 1.075, 1.053, 1.032, 1.015, 1.001, 0.992, 0.987, 0.984, 0.984, 0.986, 0.988, 0.991, 0.994, 0.997, 0.999, 1);
    --spring-gentle: linear(0, 0.038, 0.131, 0.251, 0.38, 0.505, 0.618, 0.716, 0.798, 0.864, 0.915, 0.953, 0.98, 0.998, 1.01, 1.016, 1.019, 1.02, 1.019, 1.017, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1);
    --standard: cubic-bezier(0.2, 0, 0, 1);
    --rail: 96px;
    --topbar: 72px;
    --navbar: 80px;
    --gutter: 24px;
    --content-max: 1440px;
    color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar) + 16px); }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    background: var(--md-surface);
    color: var(--md-on-surface);
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }

.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 12px 20px; border-radius: var(--shape-xl); background: var(--md-primary); color: var(--md-on-primary); }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Type scale (M3 Expressive, emphasized where it matters) ===== */
.display { font-size: clamp(40px, 6vw, 57px); line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; }
.headline { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.title-lg { font-size: 22px; line-height: 28px; font-weight: 500; }
.title-md { font-size: 16px; line-height: 24px; font-weight: 600; }
.body-sm { font-size: 14px; line-height: 20px; }
.label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; }
.muted { color: var(--md-on-surface-variant); }

/* ===== Navigation rail (wide) and bar (phone) ===== */
.rail {
    position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 30;
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 0;
    background: var(--md-surface);
}
.rail-logo { margin-bottom: 8px; transition: transform .5s var(--spring); }
.rail-logo:hover { transform: rotate(72deg); }
.fab {
    width: 56px; height: 56px; display: grid; place-items: center;
    border-radius: var(--shape-lg); background: var(--md-primary-container); color: var(--md-on-primary-container);
    box-shadow: 0 1px 3px rgb(0 0 0 / .2), 0 4px 8px rgb(0 0 0 / .12);
    transition: border-radius .4s var(--spring), transform .4s var(--spring);
}
.fab:hover { border-radius: var(--shape-xl); }
.fab:active { transform: scale(.94); }
.fab.active { background: var(--md-primary); color: var(--md-on-primary); border-radius: var(--shape-xl); }
.fab .icon { width: 28px; height: 28px; transition: transform .6s var(--spring); }
.fab:hover .icon { transform: rotate(72deg); }
.rail-items { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; color: var(--md-on-surface-variant); }
.nav-pill {
    width: 56px; height: 32px; display: grid; place-items: center; border-radius: 16px; position: relative;
    transition: background-color .2s var(--standard), width .45s var(--spring);
}
.nav-item:hover .nav-pill { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.nav-item.active { color: var(--md-on-surface); }
.nav-item.active .nav-pill { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.nav-label { font-size: 12px; line-height: 16px; font-weight: 600; }

.navbar {
    position: fixed; inset: auto 0 0 0; z-index: 30; height: calc(var(--navbar) + env(safe-area-inset-bottom));
    padding: 12px 8px env(safe-area-inset-bottom);
    display: none; justify-content: space-around; background: var(--md-surface-container);
}

/* ===== Top app bar with a search bar ===== */
.topbar {
    position: sticky; top: 0; z-index: 20; height: var(--topbar);
    margin-left: var(--rail); padding: 0 var(--gutter);
    display: flex; align-items: center; gap: 16px;
    background: color-mix(in srgb, var(--md-surface) 88%, transparent);
    backdrop-filter: blur(16px);
    transition: background-color .3s var(--standard);
}
.topbar.scrolled { background: color-mix(in srgb, var(--md-surface-container) 92%, transparent); }
.topbar-logo { display: none; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; }
.searchbar {
    flex: 1; max-width: 720px; height: 56px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px; padding: 0 20px;
    border-radius: var(--shape-xl); background: var(--md-surface-container-high); color: var(--md-on-surface-variant);
    transition: background-color .2s var(--standard);
}
.searchbar:hover { background: var(--md-surface-container-highest); }
.account { position: relative; }
.avatar {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); font-weight: 600; font-size: 16px;
    clip-path: var(--m3-shape-cookie9); transition: clip-path .5s var(--spring);
}
.avatar:hover { clip-path: var(--m3-shape-flower); }
.avatar-lg { width: 48px; height: 48px; font-size: 20px; }
.menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; z-index: 40;
    padding: 8px 0; border-radius: var(--shape-lg); background: var(--md-surface-container);
    box-shadow: 0 2px 6px rgb(0 0 0 / .2), 0 8px 24px rgb(0 0 0 / .18);
    transform-origin: top right; animation: menu-in .35s var(--spring);
}
@keyframes menu-in { from { opacity: 0; transform: scale(.9); } }
.menu-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 16px; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 8px; }
.menu-head small { display: block; color: var(--md-on-surface-variant); font-size: 12px; }
.menu-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: left; }
.menu-item:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }

main { margin-left: var(--rail); padding: 8px var(--gutter) 48px; min-height: calc(100dvh - var(--topbar) - 80px); outline: none; }
.page { max-width: var(--content-max); margin: 0 auto; animation: page-in .5s var(--spring-gentle); }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }
.footer { margin-left: var(--rail); padding: 24px var(--gutter) 32px; color: var(--md-on-surface-variant); font-size: 12px; text-align: center; }
.footer a { text-decoration: underline; }

@media (max-width: 839px) {
    :root { --gutter: 16px; --topbar: 64px; }
    .rail { display: none; }
    .navbar:not([hidden]) { display: flex; }
    .navbar .nav-item { flex: 1; }
    .topbar, main, .footer { margin-left: 0; }
    .topbar-logo { display: flex; }
    .searchbar { flex: 0 0 48px; height: 48px; padding: 0; justify-content: center; margin: 0 0 0 auto; background: none; }
    .searchbar > span:last-child { display: none; }
    main { padding-bottom: calc(var(--navbar) + 32px); }
    .footer { padding-bottom: calc(var(--navbar) + 24px); }
}

/* ===== Buttons: pills that square off a little when pressed (Expressive shape morph) ===== */
.btn {
    --h: 40px;
    height: var(--h); padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: calc(var(--h) / 2); font-weight: 600; font-size: 14px; letter-spacing: .01em; white-space: nowrap;
    background: var(--md-primary); color: var(--md-on-primary); position: relative; overflow: hidden;
    transition: border-radius .35s var(--spring), background-color .2s var(--standard), transform .35s var(--spring);
}
.btn::after { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .2s var(--standard); }
.btn:hover::after { opacity: .08; }
.btn:active { border-radius: var(--shape-sm); }
.btn:active::after { opacity: .12; }
.btn:disabled { opacity: .38; pointer-events: none; }
.btn .icon { width: 20px; height: 20px; }
.btn-lg { --h: 56px; padding: 0 28px; font-size: 16px; }
.btn-lg .icon { width: 24px; height: 24px; }
.btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn-outlined { background: none; color: var(--md-on-surface-variant); box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.btn-text { background: none; color: var(--md-primary); padding: 0 12px; }
.icon-btn {
    width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
    color: var(--md-on-surface-variant); position: relative; transition: border-radius .35s var(--spring), background-color .2s;
}
.icon-btn:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.icon-btn:active { border-radius: var(--shape-md); }
.icon-btn.filled { background: var(--md-primary); color: var(--md-on-primary); }
.icon-btn.tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* Connected button group (M3 Expressive): the chosen one turns round, the others stay squarer */
.group { display: flex; flex-wrap: wrap; gap: 2px; }
.group button {
    height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
    background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); border-radius: var(--shape-sm);
    transition: border-radius .4s var(--spring), background-color .2s var(--standard), color .2s;
}
.group button:first-child { border-radius: 20px var(--shape-sm) var(--shape-sm) 20px; }
.group button:last-child { border-radius: var(--shape-sm) 20px 20px var(--shape-sm); }
.group button:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, var(--md-surface-container-highest)); }
.group button[aria-pressed="true"] { background: var(--md-secondary); color: var(--md-on-secondary); border-radius: 20px; }
.group button .icon { width: 18px; height: 18px; }
.group.vertical { flex-direction: column; align-items: stretch; }
.group.vertical button:first-child { border-radius: 20px 20px var(--shape-sm) var(--shape-sm); }
.group.vertical button:last-child { border-radius: var(--shape-sm) var(--shape-sm) 20px 20px; }
.group.vertical button[aria-pressed="true"] { border-radius: 20px; }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    height: 32px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--shape-sm);
    font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--md-outline-variant); color: var(--md-on-surface-variant);
    transition: background-color .2s var(--standard), padding .3s var(--spring);
}
.chip:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.chip[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; padding-left: 8px; }
.chip .icon { width: 18px; height: 18px; display: none; }
.chip[aria-pressed="true"] .icon { display: block; }
.chip .count { opacity: .7; font-variant-numeric: tabular-nums; }

/* ===== Sections and rows ===== */
.section { margin-top: 40px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.row {
    display: grid; grid-auto-flow: column; grid-auto-columns: 160px; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.row::-webkit-scrollbar { display: none; }
.row > * { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
@media (max-width: 599px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; } .row { grid-auto-columns: 128px; } }

/* ===== Poster card ===== */
.poster-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.poster {
    position: relative; aspect-ratio: 2 / 3; border-radius: var(--shape-lg); overflow: hidden;
    background: var(--md-surface-container-high);
    transition: border-radius .45s var(--spring), transform .45s var(--spring);
}
.poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s var(--standard); }
.poster img.loaded { opacity: 1; }
.poster-card:hover .poster { border-radius: var(--shape-xl); transform: translateY(-4px); }
.poster-card:active .poster { transform: scale(.97); }
.poster-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font-weight: 600; font-size: 15px; color: var(--md-on-surface-variant); }
.poster-fallback .icon { width: 40px; height: 40px; opacity: .4; }
.poster-badge {
    position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: var(--shape-sm);
    background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 12px; font-weight: 700;
}
.poster-score {
    position: absolute; top: 8px; right: 8px; min-width: 36px; height: 36px; display: grid; place-items: center;
    background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); font-size: 13px; font-weight: 700;
    clip-path: var(--m3-shape-cookie9);
}
.poster-progress { position: absolute; left: 8px; right: 8px; bottom: 8px; }
.poster-title { font-size: 14px; line-height: 20px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster-sub { font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); margin-top: -6px; }

/* Progress: the M3 wavy indicator, like Android's media player. The wave runs up to where you are,
   a round dot marks the spot, and only after it the flat track goes on. The wave starts 6px in and
   stops 6px early, so the dot stays whole at 0 and at 100%; the track runs past the bar's end and is
   cut off there (clip-path, which leaves room above and below for the dot). */
.progress { --p: 0; position: relative; height: 10px; clip-path: inset(-4px 0); }
.progress > span { position: absolute; left: 6px; top: 0; height: 10px; width: calc(var(--p) * (100% - 12px)); }
.progress > span::before {
    content: ''; position: absolute; inset: 0; background: var(--wave, var(--md-primary));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5 Q5 1 10 5 T20 5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 20px 10px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5 Q5 1 10 5 T20 5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 20px 10px repeat-x;
}
.progress > span::after {
    content: ''; position: absolute; top: -1px; left: calc(100% - 6px); width: 100vw; height: 12px;
    background:
        radial-gradient(circle at 6px 6px, var(--wave, var(--md-primary)) 5.5px, transparent 6px) 0 0 / 12px 12px no-repeat,
        linear-gradient(var(--track, var(--md-secondary-container)) 0 0) 12px 4.5px / 100% 3px no-repeat;
}
.poster-title { font-size: 14px; line-height: 20px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster-sub { font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); margin-top: -6px; }

.poster-progress { --track: color-mix(in srgb, var(--md-surface-container-highest) 85%, transparent); }

/* ===== Home ===== */
.greeting { margin: 24px 0 8px; }
.continue { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
@media (max-width: 599px) { .continue { grid-template-columns: 1fr; } }
.continue-card {
    display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 12px; align-items: center;
    border-radius: var(--shape-xl); background: var(--md-surface-container); position: relative; overflow: hidden;
    transition: border-radius .45s var(--spring), background-color .3s;
}
.continue-card:hover { border-radius: var(--shape-lg); background: var(--md-surface-container-high); }
.continue-card .poster { border-radius: var(--shape-lg); }
.continue-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.continue-title { font-weight: 600; font-size: 18px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-next { display: flex; align-items: baseline; gap: 8px; }
.continue-next strong { font-size: 32px; line-height: 36px; font-weight: 600; color: var(--md-primary); font-variant-numeric: tabular-nums; }
.continue-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.continue-card.first { grid-column: 1 / -1; grid-template-columns: 160px 1fr; padding: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.continue-card.first .continue-next strong { font-size: clamp(44px, 7vw, 72px); line-height: 1; color: inherit; }
.continue-card.first .continue-title { font-size: 24px; line-height: 32px; white-space: normal; }
.continue-card.first .poster { border-radius: var(--shape-xl); }
.continue-card.first .muted { color: inherit; opacity: .8; }
.continue-card.first .progress { --wave: var(--md-on-primary-container); --track: color-mix(in srgb, var(--md-on-primary-container) 20%, transparent); }
@media (max-width: 599px) { .continue-card.first { grid-template-columns: 112px 1fr; } }

/* Coming up: the day in a tonal shape, then the title */
.row.upcoming { grid-auto-columns: 300px; }
.upcoming-card {
    display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 10px;
    border-radius: var(--shape-xl); background: var(--md-surface-container); min-width: 0;
    transition: border-radius .45s var(--spring), background-color .3s;
}
.upcoming-card:hover { border-radius: var(--shape-lg); background: var(--md-surface-container-high); }
.upcoming-card .poster { border-radius: var(--shape-md); }
.upcoming-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upcoming-day {
    align-self: flex-start; padding: 2px 10px; margin-bottom: 4px; border-radius: var(--shape-sm);
    background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); font-size: 12px; font-weight: 700;
}
.upcoming-card.today .upcoming-day { background: var(--md-primary); color: var(--md-on-primary); }
.upcoming-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-body .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599px) { .row.upcoming { grid-auto-columns: 260px; } }

/* Recommendations sit on a surface of their own, like a widget */
.recs { padding: 24px 24px 20px; border-radius: var(--shape-xxl); background: var(--md-surface-container-low); }
.recs .row { margin: 0 -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
.recs .poster-badge { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.recs .poster-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 599px) { .recs { padding: 20px 16px 16px; margin-inline: -8px; } .recs .row { margin: 0 -16px; padding-inline: 16px; } }

.empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 64px 16px;
    border-radius: var(--shape-xxl); background: var(--md-surface-container-low);
}
.empty-shape { width: 96px; height: 96px; display: grid; place-items: center; background: var(--md-secondary-container); color: var(--md-on-secondary-container); clip-path: var(--m3-shape-sunny); }
.empty-shape .icon { width: 40px; height: 40px; }

/* ===== List page ===== */
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0; }
.list-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }

/* ===== Search ===== */
.search-field {
    display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 20px; margin: 24px 0 8px;
    border-radius: var(--shape-xl); background: var(--md-surface-container-high); max-width: 720px;
}
.search-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 16px; }
.search-field:focus-within { box-shadow: inset 0 0 0 2px var(--md-primary); }

/* ===== Detail ===== */
.detail { position: relative; }
.backdrop {
    position: absolute; inset: calc(var(--topbar) * -1) calc(var(--gutter) * -1) auto; height: min(62vh, 560px); z-index: -1; overflow: hidden;
}
.backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--standard); }
.backdrop img.loaded { opacity: .55; }
.backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--md-surface) 30%, transparent), var(--md-surface) 96%), linear-gradient(to right, var(--md-surface), transparent 60%); }
.detail-head { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding-top: 12vh; align-items: end; }
.detail-poster { border-radius: var(--shape-xl); box-shadow: 0 12px 40px rgb(0 0 0 / .35); }
.detail-meta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--md-on-surface-variant); font-size: 14px; }
.facts span + span::before { content: '·'; margin-right: 16px; opacity: .6; }
.tagline { font-style: italic; color: var(--md-on-surface-variant); }
.detail-progress { max-width: 420px; margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; margin-top: 40px; align-items: start; }
.overview { font-size: 17px; line-height: 1.6; max-width: 70ch; }
.panel { padding: 20px; border-radius: var(--shape-xl); background: var(--md-surface-container); display: flex; flex-direction: column; gap: 16px; }
.panel-top { display: flex; align-items: center; gap: 16px; }
.panel .remove { align-self: flex-start; }
.panel h3 { font-size: 14px; font-weight: 600; color: var(--md-on-surface-variant); }
.vote {
    width: 56px; height: 56px; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 18px;
    background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); clip-path: var(--m3-shape-cookie12);
}
@media (max-width: 839px) {
    .detail-head { grid-template-columns: 120px 1fr; gap: 16px; padding-top: 18vh; }
    .detail-body { grid-template-columns: 1fr; gap: 24px; }
    .detail-head .headline { font-size: 26px; }
}

/* Score slider: M3 Expressive slider — thick track, a narrow handle with a gap, value above while dragging */
.score { display: flex; align-items: center; gap: 16px; }
.score output { min-width: 44px; font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.slider { --v: 0; flex: 1; appearance: none; height: 44px; background: none; cursor: pointer; margin: 0; }
.slider::-webkit-slider-runnable-track {
    height: 16px; border-radius: 8px;
    background: linear-gradient(to right, var(--md-primary) calc(var(--v) * 1% - 6px), transparent calc(var(--v) * 1% - 6px) calc(var(--v) * 1% + 6px), var(--md-secondary-container) calc(var(--v) * 1% + 6px));
}
.slider::-moz-range-track { height: 16px; border-radius: 8px; background: var(--md-secondary-container); }
.slider::-moz-range-progress { height: 16px; border-radius: 8px; background: var(--md-primary); }
.slider::-webkit-slider-thumb { appearance: none; width: 4px; height: 44px; margin-top: -14px; border-radius: 2px; background: var(--md-primary); transition: width .3s var(--spring); }
.slider:active::-webkit-slider-thumb { width: 2px; }
.slider::-moz-range-thumb { width: 4px; height: 44px; border: 0; border-radius: 2px; background: var(--md-primary); }

/* Seasons and episodes */
.seasons { margin-top: 40px; }
.season-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 16px; }
.episodes { display: flex; flex-direction: column; gap: 2px; border-radius: var(--shape-xl); overflow: hidden; }
.episode {
    display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 12px 16px;
    background: var(--md-surface-container); border-radius: var(--shape-xs);
    transition: background-color .25s var(--standard);
}
.episode:first-child { border-radius: var(--shape-xl) var(--shape-xl) var(--shape-xs) var(--shape-xs); }
.episode:last-child { border-radius: var(--shape-xs) var(--shape-xs) var(--shape-xl) var(--shape-xl); }
.episode:only-child { border-radius: var(--shape-xl); }
.episode-num { font-size: 22px; font-weight: 600; color: var(--md-on-surface-variant); text-align: center; font-variant-numeric: tabular-nums; }
.episode-text { min-width: 0; }
.episode-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.episode-sub { font-size: 13px; color: var(--md-on-surface-variant); }
.episode.watched { background: var(--md-surface-container-low); }
.episode.watched .episode-name, .episode.watched .episode-num { color: var(--md-on-surface-variant); }
.episode.upcoming { opacity: .6; }
.episode.next { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.episode.next .episode-num, .episode.next .episode-sub { color: inherit; }
.episode-actions { display: flex; align-items: center; gap: 4px; }
.check {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--md-outline); color: transparent;
    transition: background-color .25s var(--standard), box-shadow .25s, color .25s, clip-path .5s var(--spring), transform .4s var(--spring);
    clip-path: var(--m3-shape-circle);
}
.check:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.check[aria-pressed="true"] { background: var(--md-primary); color: var(--md-on-primary); box-shadow: none; clip-path: var(--m3-shape-cookie9); }
.check:active { transform: scale(.9); }
.upto { opacity: 0; transition: opacity .2s; }
.episode:hover .upto, .episode:focus-within .upto { opacity: 1; }
@media (hover: none) { .upto { opacity: 1; } }

.cast { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 16px; overflow-x: auto; scrollbar-width: none; }
.cast-item { text-align: center; font-size: 13px; line-height: 18px; }
.cast-photo { width: 96px; height: 96px; margin: 0 auto 8px; background: var(--md-surface-container-high); border-radius: 50%; overflow: hidden; }
/* Portraits are tall: the face sits in the upper part, so that part stays in the circle */
.cast-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .45s var(--spring); }
.cast-item small { display: block; color: var(--md-on-surface-variant); }

a.cast-item { border-radius: var(--shape-lg); padding: 4px 0 8px; transition: background-color .2s; }
a.cast-item:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
a.cast-item:hover .cast-photo img { transform: scale(1.08); }
.cast-photo { display: grid; place-items: center; color: var(--md-on-surface-variant); }
.cast-photo .icon { width: 40px; height: 40px; }

/* ===== Person ===== */
.person-head { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; margin-top: 24px; }
.person-photo {
    aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
    background: var(--md-secondary-container); color: var(--md-on-secondary-container); clip-path: var(--m3-shape-cookie12);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.person-photo .icon { width: 96px; height: 96px; }
.person-meta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bio { max-width: 75ch; line-height: 1.6; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.bio.open { display: block; }
.person-meta [data-more] { align-self: flex-start; margin-left: -12px; }
.person .poster-badge { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.person .poster-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 839px) {
    .person-head { grid-template-columns: 1fr; gap: 16px; justify-items: center; text-align: center; }
    .person-photo { width: 180px; }
    .person-meta { align-items: center; }
    .person-meta .facts { justify-content: center; }
}

/* ===== Roll ===== */
.roll-head { margin: 24px 0; display: flex; flex-direction: column; gap: 4px; }
.roll-stage {
    display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; padding: 32px;
    border-radius: var(--shape-xxl); background: var(--md-surface-container); color: var(--md-on-surface);
    transition: background-color .6s var(--standard);
}
.roll-machine { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.reel-window {
    --w: 240px;
    position: relative; width: var(--w); aspect-ratio: 2 / 3; overflow: hidden;
    border-radius: var(--shape-xl); background: var(--md-surface-container-highest);
    box-shadow: 0 16px 48px rgb(0 0 0 / .35);
}
.reel-window.rolling { outline: 3px solid var(--md-primary); outline-offset: 4px; }
.reel { position: absolute; inset: 0 0 auto; will-change: transform; }
.reel-item { width: var(--w); aspect-ratio: 2 / 3; position: relative; }
.reel-item img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.reel-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--md-primary); }
.reel-placeholder .icon { width: 96px; height: 96px; animation: turn 12s linear infinite; }
.roll-btn { min-width: 200px; }
.roll-btn .icon { width: 24px; height: 24px; }
.roll-btn:not(:disabled):hover .icon { animation: turn 1.2s linear infinite; }
.roll-result { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.roll-kicker { color: var(--md-primary); }
.roll-name { font-size: clamp(32px, 4.5vw, 52px); }
.roll-overview { max-width: 60ch; color: var(--md-on-surface-variant); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.roll-filters { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.roll-filters > div > h3 { margin-bottom: 10px; }
.roll-filters .chips, .roll-filters > div:has(#genres) { grid-column: 1 / -1; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.switch-row small { display: block; font-size: 13px; }
/* M3 switch */
.switch {
    appearance: none; flex: none; width: 52px; height: 32px; margin: 0; border-radius: 16px; position: relative; cursor: pointer;
    background: var(--md-surface-container-highest); box-shadow: inset 0 0 0 2px var(--md-outline); transition: background-color .2s var(--standard);
}
.switch::after {
    content: ''; position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--md-outline);
    transition: all .35s var(--spring);
}
.switch:checked { background: var(--md-primary); box-shadow: none; }
.switch:checked::after { top: 4px; left: 24px; width: 24px; height: 24px; background: var(--md-on-primary); }
.switch:active::after { width: 28px; height: 28px; top: 2px; }
.switch:checked:active::after { left: 22px; }
@media (max-width: 839px) {
    .roll-stage { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px; justify-items: center; text-align: center; }
    .roll-result { align-items: center; }
    .roll-result .actions, .roll-result .chips { justify-content: center; }
    .reel-window { --w: 200px; }
}

/* ===== Settings ===== */
.settings-title { margin: 24px 0; }
.settings-card { max-width: 760px; gap: 20px; }
.settings-head { display: flex; gap: 16px; align-items: flex-start; }
.settings-shape { width: 56px; height: 56px; flex: none; display: grid; place-items: center; background: var(--md-primary-container); color: var(--md-on-primary-container); clip-path: var(--m3-shape-cookie9); }
.settings-state { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--shape-lg); background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-size: 14px; }
.settings-state.warn { background: var(--md-error-container); color: var(--md-on-error-container); }
.settings-state .icon { width: 20px; height: 20px; }
.settings-note { margin: 4px 0 10px; }

/* The Jellyfin profile picture in the avatar shapes */
.avatar.has-picture { background: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }

/* ===== Sign-in ===== */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card {
    width: min(440px, 100%); padding: 40px 32px 32px; border-radius: var(--shape-xxl); background: var(--md-surface-container);
    display: flex; flex-direction: column; gap: 20px; animation: page-in .6s var(--spring-gentle);
}
.login-reel { width: 96px; height: 96px; align-self: center; }
.login-reel.spin { animation: reel 1.2s linear infinite; }
@keyframes reel { to { transform: rotate(360deg); } }
.login-card h1 { text-align: center; }
.login-card p { text-align: center; color: var(--md-on-surface-variant); }
.login-error { color: var(--md-error); font-size: 14px; text-align: center; min-height: 20px; }
.login-error:empty { display: none; }
.login-note { font-size: 13px; }
.login-card .btn { width: 100%; }
.login-card .btn-text { width: auto; align-self: center; }
/* The Quick Connect code: one tonal cell per digit, big and easy to read off */
.login-code { display: flex; justify-content: center; gap: 6px; padding: 8px; border-radius: var(--shape-xl); transition: background-color .2s; }
.login-code:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
.login-code span {
    width: 48px; height: 64px; display: grid; place-items: center; border-radius: var(--shape-md);
    background: var(--md-primary-container); color: var(--md-on-primary-container);
    font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums;
    animation: digit-in .5s var(--spring) backwards;
}
.login-code span:nth-child(2) { animation-delay: .04s; } .login-code span:nth-child(3) { animation-delay: .08s; }
.login-code span:nth-child(4) { animation-delay: .12s; } .login-code span:nth-child(5) { animation-delay: .16s; }
.login-code span:nth-child(6) { animation-delay: .2s; }
@keyframes digit-in { from { opacity: 0; transform: translateY(10px) scale(.8); } }
@media (max-width: 400px) { .login-code span { width: 40px; height: 56px; font-size: 28px; } }

/* ===== Snackbar ===== */
.snackbars { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(560px, calc(100% - 32px)); }
@media (max-width: 839px) { .snackbars { bottom: calc(var(--navbar) + 16px + env(safe-area-inset-bottom)); } }
.snackbar {
    min-height: 48px; padding: 12px 8px 12px 16px; border-radius: var(--shape-xs); display: flex; align-items: center; gap: 12px;
    background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font-size: 14px;
    box-shadow: 0 4px 12px rgb(0 0 0 / .25); animation: snack-in .4s var(--spring);
}
.snackbar span { flex: 1; }
.snackbar button { color: var(--md-inverse-primary); font-weight: 600; padding: 8px 12px; border-radius: 20px; }
.snackbar.out { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
@keyframes snack-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

/* Loading: M3 Expressive loading indicator — a shape that morphs while it turns */
.loading { display: grid; place-items: center; padding: 96px 0; }
.loading span { width: 48px; height: 48px; background: var(--md-primary); animation: morph 2.4s var(--spring) infinite, turn 2.4s linear infinite; }
@keyframes morph {
    0%, 100% { clip-path: var(--m3-shape-cookie9); }
    25% { clip-path: var(--m3-shape-flower); }
    50% { clip-path: var(--m3-shape-sunny); }
    75% { clip-path: var(--m3-shape-cookie4); }
}
@keyframes turn { to { transform: rotate(360deg); } }

/* A little burst when something is marked watched */
.burst { position: fixed; pointer-events: none; z-index: 70; width: 10px; height: 10px; background: var(--md-primary); clip-path: var(--m3-shape-cookie4); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.chip:disabled { opacity: .5; pointer-events: none; }