/* Embedded so chips render identically across OSes (Consolas vs SF Mono vs
   DejaVu look quite different at 10-11px). font-display:swap means we render
   the fallback first if the font is still loading; chip widths won't be
   "perfect" for a few hundred ms but text shows immediately. */
@font-face {
    font-family: "IBM Plex Mono";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    /* Relative to this stylesheet (static/), so it resolves under a
       subpath-hosted static export as well as the live server. */
    src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}

:root {
    --bg-base: #0b0d12;
    --bg-surface: #141821;
    --bg-elevated: #1a1f2b;
    --bg-hover: #1f2532;

    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    --accent: #4fa8ff;
    --accent-soft: rgba(79, 168, 255, 0.16);
    --accent-glow: rgba(79, 168, 255, 0.38);
    --accent-edge: rgba(79, 168, 255, 0.55);

    --text-primary: #e8ecf4;
    --text-secondary: #9aa3b2;
    --text-tertiary: #6b7280;
    --text-muted: #4a5160;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;

    --shadow-glow: 0 0 0 1px var(--accent-edge), 0 0 28px var(--accent-glow), 0 4px 24px rgba(0, 0, 0, 0.35);

    --transition: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Per-theater identity colors are emitted by the server in the index
   template, one rule per theater, hue computed by golden-angle stepping
   over theaters.All. This scopes a --theater-accent variable to every
   element carrying that theater's data-theater-id, so the selected
   sidebar pill, sidebar indicator dot, and the small "•" on every movie
   card pick up the venue's tint. The default cyan (var(--accent)) is
   reserved for "default interface" touches: focus rings, hover
   affordances, the refresh button, etc. */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* The `hidden` attribute defaults to display:none, but class-level
   display:flex on cards has the same specificity and wins. Force it. */
[hidden] {
    display: none !important;
}

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "SF Pro Text", system-ui, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    overflow: hidden;
    /* Bumps everything (fonts, padding, gaps) by --page-zoom for easier
       reading. Viewport-pinned heights (like .app) divide by the same
       variable so they still fit one viewport after zoom magnification. */
    --page-zoom: 1.1;
    zoom: var(--page-zoom);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(79, 168, 255, 0.08), transparent 50%),
        radial-gradient(circle at 88% 82%, rgba(150, 100, 220, 0.06), transparent 50%);
    z-index: 0;
}

.app {
    display: flex;
    height: calc(100vh / var(--page-zoom));
    position: relative;
    z-index: 1;
}

.sidebar {
    width: 320px;
    flex-shrink: 0;
    padding: 28px 20px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
}

.sidebar-header {
    padding: 0 8px 24px;
}

.sidebar-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sidebar-header-text {
    min-width: 0;
}

/* Pre-activation: glowing amber/orange. Pulses to draw the eye. */
.activate-button {
    flex-shrink: 0;
    padding: 6px 11px;
    border-radius: 7px;
    border: 1px solid rgba(255, 184, 60, 0.55);
    background: linear-gradient(180deg, rgba(255, 200, 65, 0.28), rgba(255, 140, 30, 0.16));
    color: #ffd97a;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    animation: activate-pulse 2.2s ease-in-out infinite;
    transition: transform var(--transition), filter var(--transition);
}

.activate-button:hover {
    filter: brightness(1.1);
}

.activate-button:active {
    transform: scale(0.96);
}

@keyframes activate-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 180, 50, 0.45), 0 0 0 1px rgba(255, 180, 50, 0.25); }
    50%      { box-shadow: 0 0 26px rgba(255, 180, 50, 0.85), 0 0 0 1px rgba(255, 180, 50, 0.55); }
}

/* Activated state: subtle cog icon, no glow. */
.activate-button[data-active="true"] {
    padding: 6px;
    border-color: var(--border-default);
    background: transparent;
    color: var(--text-tertiary);
    animation: none;
    box-shadow: none;
    letter-spacing: 0;
}

.activate-button[data-active="true"]:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* ---- Settings modal ---- */

.settings-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 14, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: settings-fade 180ms ease-out;
}

.settings-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: 26px 28px 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 184, 60, 0.15);
    animation: settings-rise 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes settings-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes settings-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.settings-header h2 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.settings-close {
    padding: 4px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}

.settings-close:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.settings-intro {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.settings-link {
    margin-top: 8px;
    font-size: 13px;
}

.settings-link a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
}

.settings-link a:hover {
    color: #80c4ff;
}

.settings-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.settings-key-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--bg-base);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.settings-key-input:focus {
    outline: none;
    border-color: var(--accent-edge);
    box-shadow: 0 0 0 3px rgba(79, 168, 255, 0.18);
}

.settings-actions {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.settings-actions-right {
    margin-left: auto;
}

.settings-submit {
    padding: 9px 16px;
    border-radius: 9px;
    border: 1px solid var(--accent-edge);
    background: linear-gradient(180deg, rgba(79, 168, 255, 0.2), rgba(79, 168, 255, 0.06));
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.settings-submit:hover:not([disabled]) {
    box-shadow: 0 0 16px var(--accent-glow);
}

.settings-submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.settings-remove {
    padding: 9px 14px;
    border-radius: 9px;
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: all var(--transition);
}

.settings-remove:hover {
    border-color: rgba(255, 100, 100, 0.4);
    color: #ff9090;
}

.settings-status {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-tertiary);
    min-height: 1.4em;
}

.settings-status[data-state="success"] { color: #6fcf97; }
.settings-status[data-state="error"]   { color: #ff9090; }
.settings-status[data-state="working"] { color: var(--accent); }

/* NYCINEMA wordmark: monospace caps with a blue→violet gradient fill
   and a soft accent-tinted drop-shadow for a cinema-marquee feel.
   filter: drop-shadow is used instead of text-shadow because the
   transparent text-fill (background-clip: text) hides text-shadow.
   The wider letter-spacing reads as deliberate signage rather than
   "tight UI text", which suits the NYCINEMA name. */
.app-title {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.08em;
    background: linear-gradient(95deg, #4fa8ff 0%, #9a78ff 55%, #ff7ad9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(79, 168, 255, 0.3));
}

.app-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.theaters-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 10px 8px;
}

/* Shared small-caps section label, also reused by .filters-title. */
.section-title {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.theaters-toggle-all {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition);
}

.theaters-toggle-all:hover {
    color: var(--accent);
}

.theaters-toggle-all:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.theaters {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.theater-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name indicator"
        "address indicator";
    align-items: center;
    gap: 4px 12px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    text-align: left;
    font: inherit;
    cursor: grab;
    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        color var(--transition),
        transform var(--transition);
}

.theater-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.theater-card:active {
    transform: scale(0.99);
    cursor: grabbing;
}

/* Empty slot shown during a reorder drag; sits where the dragged theater
   will land if dropped right now. Matches a real theater-card's footprint
   (height is set inline by the drag handler to the actual card height). */
.theater-drop-placeholder {
    border-radius: var(--radius-md);
    border: 2px dashed var(--border-strong);
    background: rgba(255, 255, 255, 0.025);
}

.theater-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theater-card[aria-pressed="true"] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--theater-accent, var(--accent)) 16%, transparent),
        color-mix(in srgb, var(--theater-accent, var(--accent))  3%, transparent));
    border-color: color-mix(in srgb, var(--theater-accent, var(--accent)) 50%, transparent);
    color: var(--text-primary);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theater-accent, var(--accent)) 35%, transparent),
        0 0 24px color-mix(in srgb, var(--theater-accent, var(--accent)) 30%, transparent),
        0 4px 24px rgba(0, 0, 0, 0.35);
}

.theater-card[aria-pressed="true"] .theater-indicator {
    background: var(--theater-accent, var(--accent));
    box-shadow:
        0 0 12px color-mix(in srgb, var(--theater-accent, var(--accent)) 65%, transparent),
        0 0 0 4px color-mix(in srgb, var(--theater-accent, var(--accent)) 14%, transparent);
}

.theater-name {
    grid-area: name;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.theater-address {
    grid-area: address;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.theater-indicator {
    grid-area: indicator;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background var(--transition), box-shadow var(--transition);
}

.main {
    flex: 1;
    min-width: 0; /* allow flex shrinkage below intrinsic content width; otherwise wide rows would push the layout out instead of clipping */
    padding: 36px 44px;
    overflow-x: hidden; /* viewport-edge clipping for the header row: as the window narrows, Refresh and the chips slide off the right rather than wrapping or overlapping */
    overflow-y: auto;
}

/* Header is a left-anchored flex row: filter chips, then Refresh,
   grouped together on the left. No right-alignment; when the
   viewport narrows past the content's natural width, the .main
   container's overflow-x clips the right side, so the WINDOW itself
   is what starts hiding the buttons (Refresh first, then chips
   moving rightward). Nothing on this row tries to grow or shrink,
   so the chips are never pushed under Refresh. */
.main-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* Segmented control: three radio buttons sharing one rounded border. The
   active segment lights with the accent color; inactive ones are quiet. */
.filter-segment {
    display: inline-flex;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
}

.filter-segment-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}

.filter-segment-btn:hover {
    color: var(--text-primary);
}

.filter-segment-btn[aria-checked="true"] {
    background: linear-gradient(180deg, rgba(79, 168, 255, 0.28), rgba(79, 168, 255, 0.08));
    color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}

.filter-segment-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Single-toggle chips for Open Caption / Anime. Same visual language as
   segment buttons but standalone, so they read as independent toggles. */
.filter-chip {
    appearance: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}

.filter-chip:hover {
    color: var(--text-primary);
}

.filter-chip[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(79, 168, 255, 0.28), rgba(79, 168, 255, 0.08));
    border-color: var(--accent-edge);
    color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}

.filter-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* When another filter overrides this one (anime ON bypasses OC + release
   window), dim the affected control so users see it's inert. */
.filter-segment.is-overridden,
.filter-chip.is-overridden {
    opacity: 0.4;
    pointer-events: none;
}

.refresh-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* Sized to match .filter-chip / .filter-segment-btn so Refresh
       reads as a peer in the same row rather than an oversized CTA. */
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--accent-edge);
    background: linear-gradient(180deg, rgba(79, 168, 255, 0.18), rgba(79, 168, 255, 0.04));
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    /* Sits immediately to the right of the filter chips in the same
       flex row. flex-shrink: 0 keeps Refresh at its natural width;
       there's no growing or right-alignment, so the chips and Refresh
       behave as one left-anchored cluster. */
    flex-shrink: 0;
    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.refresh-button:hover:not([disabled]) {
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
    background: linear-gradient(180deg, rgba(79, 168, 255, 0.26), rgba(79, 168, 255, 0.08));
}

.refresh-button:active:not([disabled]) {
    transform: scale(0.98);
}

.refresh-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.refresh-button[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* Inline SVG (Lucide rotate-cw): a closed arc with an arrowhead at top-
   right. Looks like a proper "refresh" glyph at rest, not the half-loaded
   ring the old CSS spinner showed. The same element spins when busy. */
.refresh-icon {
    width: 12px;
    height: 12px;
    display: inline-block;
    flex-shrink: 0;
    /* SVG transforms default to 0,0 origin; explicit center keeps the
       glyph from wobbling around its top-left while spinning. */
    transform-origin: 50% 50%;
}

.refresh-button[data-busy="true"] .refresh-icon {
    animation: refresh-spin 800ms linear infinite;
}

@keyframes refresh-spin {
    to { transform: rotate(360deg); }
}

/* Static export only: replaces the Refresh button with the scrape
   timestamp, since the page can't refresh itself. */
.static-updated {
    flex-shrink: 0;
    padding: 6px 0;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.showings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.movie-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.movie-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.movie-poster {
    aspect-ratio: 2 / 3;
    background:
        radial-gradient(circle at 50% 0%, rgba(79, 168, 255, 0.06), transparent 60%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* Blurred backdrop made from the poster itself; fills the letterbox space
   around landscape banners or off-ratio posters. --poster-url is set by JS
   at load time so we don't fight html/template's URL escaping. */
.movie-poster::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--poster-url, none);
    background-size: cover;
    background-position: center;
    filter: blur(32px) saturate(1.3) brightness(0.55);
    transform: scale(1.2);
    z-index: 0;
}

/* Image is centered and letterboxed; the blurred backdrop fills the rest. */
.movie-poster img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Hairline inner stroke to keep the frame edge readable against the blur. */
.movie-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    z-index: 2;
}

/* No-poster placeholder. Preserves the 2:3 aspect so the card matches
   the height of cards with posters in the same row. Tinted with the
   theater accent (set per-theater via --theater-accent in the inline
   palette block) so the empty panel reads as intentional rather than
   broken. Hides the blurred-backdrop pseudo-element since there's no
   image to mirror. */
.movie-poster--empty {
    background:
        radial-gradient(circle at 50% 35%,
            color-mix(in oklch, var(--theater-accent, var(--accent)) 22%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
}
.movie-poster--empty::before {
    display: none;
}

.movie-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.movie-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.movie-theater {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.movie-theater-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theater-accent, var(--accent));
    box-shadow: 0 0 8px color-mix(in srgb, var(--theater-accent, var(--accent)) 55%, transparent);
    flex-shrink: 0;
}

.movie-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.movie-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.movie-meta > span {
    display: inline-flex;
    align-items: center;
}

.movie-meta > span + span::before {
    content: "·";
    margin-right: 8px;
    color: var(--text-muted);
}

.movie-rating,
.movie-format {
    padding: 1px 7px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.movie-format {
    color: var(--accent);
    border-color: var(--accent-edge);
    background: rgba(79, 168, 255, 0.08);
}

.movie-meta > .movie-rating + span::before,
.movie-meta > span + .movie-rating::before,
.movie-meta > .movie-format + span::before,
.movie-meta > span + .movie-format::before {
    display: none;
}

.movie-director {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: -2px;
}

.movie-synopsis {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.showtime-days {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

.date-tabs {
    /* Hard-lock to 3 columns so the row count is deterministic regardless of
       card width. Cards with 1 or 2 dates leave the trailing cells empty,
       so each chip still occupies exactly 1/3 of the row. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.date-tab {
    padding: 5px 6px;
    border-radius: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    /* Monospace so every chip is the same width regardless of which day/month
       it shows ("FRI MAY 15" vs "MON MAY 18"). System stack picks the
       cleanest mono each OS ships: Consolas on Windows, SF Mono on Mac. */
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}

.date-tab:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.date-tab[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(79, 168, 255, 0.20), rgba(79, 168, 255, 0.05));
    border-color: var(--accent-edge);
    color: var(--text-primary);
    box-shadow: 0 0 14px var(--accent-glow);
}

.times-pane {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-subtle);
    /* Hard-lock to 3 chips per row so the card layout doesn't depend on
       chip-width luck. Card minimum (300px) leaves ~85px per cell, which
       comfortably fits "10:30 PM" at 11.5px. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    animation: times-fade-in 160ms ease-out;
}

@keyframes times-fade-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.showtime-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    /* Monospace so "10:30 PM" and "9:45 AM" are the same width. */
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition);
}

.showtime-chip:hover {
    border-color: var(--accent-edge);
    color: var(--text-primary);
    box-shadow: 0 0 10px var(--accent-glow);
}

.empty-state {
    grid-column: 1 / -1;
    padding: 64px 32px;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.015);
}

.empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-state-hint {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.12);
}