/* Hide the partial's duplicate summary — we show it in the hero */
    .page-scps .combined-modal-plot { display: none; }

    .origin-plot {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      line-height: 1.6;
      max-width: 700px;
      margin-top: 0.5rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .origin-hero-main .origin-poster-info--mobile {
      display: none;
    }

    /* ============ RESPONSIVE ============ */
    /* Desktop (>= 901px): contain the backdrop to the right of the poster,
       bottom-aligned with the poster's bottom and right-aligned with the
       page container's content edge (same as search bar). This avoids
       scaling a wide backdrop to fill the full hero, which reads as
       heavily zoomed-in. */
    /* Desktop (>= 901px): Letterboxd-style hero — backdrop sits full-width
       at the top of the hero, poster/info content sits below with a slight
       overlap into the faded bottom of the backdrop. */
    @media (min-width: 901px) {
      .origin-hero {
        min-height: 760px;
      }

      .origin-backdrop {
        left: 50%;
        right: auto;
        top: 0;
        bottom: auto;
        width: min(var(--max-content-width, 1280px), 100%);
        transform: translateX(-50%);
        height: 560px;
        border-radius: 0;
        overflow: hidden;
      }

      body.scps-origin-page--has-backdrop .origin-backdrop {
        top: calc(-1 * var(--navbar-height, 64px));
        height: calc(620px + var(--navbar-height, 64px));
      }

      .origin-backdrop img {
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
        object-position: center top;
        -webkit-mask-image: linear-gradient(to bottom,
          #000 0%,
          #000 52%,
          rgba(0, 0, 0, 0.78) 66%,
          rgba(0, 0, 0, 0.34) 84%,
          transparent 100%);
        mask-image: linear-gradient(to bottom,
          #000 0%,
          #000 52%,
          rgba(0, 0, 0, 0.78) 66%,
          rgba(0, 0, 0, 0.34) 84%,
          transparent 100%);
      }

    /* Pseudo side bands retired — Letterboxd-style mask below covers
         both sides + bottom in one stacked gradient. */
      .origin-backdrop::before,
      .origin-backdrop::after {
        display: none;
      }

    /* Letterboxd-style dense-stop mask. The dense alpha stops (17+ per
         axis, computed from a smoothstep curve) make the perceived fade
         linear to the eye — sparse stops produce a visible banding edge
         in the middle of the gradient even when the math looks smooth. */
      .origin-backdrop-overlay {
        display: block;
        pointer-events: none;
        background-image:
          linear-gradient(to right,
            var(--color-bg),
            rgba(15, 15, 17,0.984) 0.97%,
            rgba(15, 15, 17,0.945) 2.078%,
            rgba(15, 15, 17,0.882) 3.297%,
            rgba(15, 15, 17,0.804) 4.602%,
            rgba(15, 15, 17,0.710) 5.967%,
            rgba(15, 15, 17,0.608),
            rgba(15, 15, 17,0.500),
            rgba(15, 15, 17,0.396) 10.16%,
            rgba(15, 15, 17,0.294) 11.505%,
            rgba(15, 15, 17,0.204) 12.78%,
            rgba(15, 15, 17,0.120) 13.958%,
            rgba(15, 15, 17,0.060) 15.017%,
            rgba(15, 15, 17,0.016) 15.928%,
            rgba(15, 15, 17,0) 16.667%,
            rgba(15, 15, 17,0) 83.333%,
            rgba(15, 15, 17,0.016) 84.072%,
            rgba(15, 15, 17,0.060) 84.983%,
            rgba(15, 15, 17,0.120) 86.042%,
            rgba(15, 15, 17,0.204) 87.22%,
            rgba(15, 15, 17,0.294) 88.495%,
            rgba(15, 15, 17,0.396) 89.84%,
            rgba(15, 15, 17,0.500),
            rgba(15, 15, 17,0.608),
            rgba(15, 15, 17,0.710) 94.033%,
            rgba(15, 15, 17,0.804) 95.398%,
            rgba(15, 15, 17,0.882) 96.703%,
            rgba(15, 15, 17,0.945) 97.922%,
            rgba(15, 15, 17,0.984) 99.03%,
            var(--color-bg)),
          linear-gradient(to top,
            var(--color-bg) 0%,
            rgba(15, 15, 17,0.98) 4%,
            rgba(15, 15, 17,0.90) 8%,
            rgba(15, 15, 17,0.76) 13%,
            rgba(15, 15, 17,0.60) 20%,
            rgba(15, 15, 17,0.40) 30%,
            rgba(15, 15, 17,0.20) 42%,
            rgba(15, 15, 17,0.06) 52%,
            rgba(15, 15, 17,0) 62%);
      }

    /* Push content down so poster/info sit near the faded bottom of the
         backdrop, slightly overlapping it (Letterboxd pattern). */
      .origin-hero-content {
        align-items: flex-start;
        padding-top: 460px;
        min-height: 760px;
      }

      .origin-poster {
        width: 230px;
        box-shadow: none;
      }

      .origin-left-column {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        position: sticky;
        top: calc(var(--navbar-height, 64px) + 1rem);
        align-self: flex-start;
      }

      .origin-poster-info {
        width: 230px;
        color: var(--color-text-secondary);
        font-size: 0.9rem;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
      }

      .origin-poster-info .origin-meta,
      .origin-poster-info .origin-ratings,
      .origin-poster-info .origin-actors,
      .origin-poster-info .origin-plot,
      .origin-poster-info .origin-stats {
        margin: 0;
      }

      .origin-hero-main {
        flex: 1;
        min-width: 0;
      }

      .origin-hero-main .origin-title {
        margin-bottom: 0.35rem;
      }

      .origin-hero-main .origin-year {
        /* Neutral muted text matching the rest of the dashboard. The
           previous `#9ab` read as a random cyan-blue against everything
           else painted in our gray tokens. */
        color: var(--color-text-muted);
        font-size: 1.1rem;
        margin-bottom: 0.4rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
      }

      .origin-year-separator {
        color: var(--color-text-disabled);
      }

      .origin-hero-stats {
        margin-bottom: 1.5rem;
      }

      .origin-info {
        align-self: flex-start;
        margin-top: 0;
        background: none;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
      }
    }

    @media (max-width: 900px) {
      .origin-hero {
        min-height: 0;
      }

      .origin-backdrop {
        top: calc(-1 * var(--navbar-height, 64px));
        bottom: auto;
        height: clamp(500px, 125vw, 620px);
        pointer-events: none;
      }

      body.scps-origin-page--has-backdrop .origin-backdrop {
        top: calc(-1 * var(--navbar-height, 64px));
      }

      .origin-backdrop img {
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
        margin: 0;
        object-fit: cover;
        object-position: center top;
      }
      .origin-backdrop-overlay {
        background:
          linear-gradient(to bottom,
            rgba(15, 15, 17, 0) 0%,
            rgba(15, 15, 17, 0.04) 28%,
            rgba(15, 15, 17, 0.18) 48%,
            rgba(15, 15, 17, 0.46) 66%,
            rgba(15, 15, 17, 0.82) 82%,
            var(--color-bg) 96%,
            var(--color-bg) 100%);
      }
      .origin-backdrop::before {
        display: none;
      }

      .origin-backdrop::after { display: none; }
    }

    @media (max-width: 900px) {
      .origin-page-container {
        padding: 0 1rem;
      }
      .origin-hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 360px;
        gap: 0.75rem;
        padding-top: clamp(12rem, 44vw, 16rem);
      }

      /* On mobile, show the poster first (natural DOM order) then the info.
         Also drop the radial-gradient halo: it's painted as the element's
         background, so the box's bottom edge hard-clips the gradient at
         ~30% opacity and reads as a visible horizontal line right under
         the stats row. The mobile backdrop-overlay already scrims the
         hero heavily, so the halo isn't contributing anything here. */
      .origin-info {
        margin-top: 0;
        padding-bottom: 0;
        background: none;
      }

      .page-scps .origin-left-column {
        position: relative;
        z-index: 2;
      }

      .origin-poster {
        width: 165px;
      }

      .page-scps .origin-left-column > .origin-poster-info {
        display: none;
      }

      .origin-hero-main {
        position: relative;
        z-index: 1;
        width: 100%;
        margin-top: -3.25rem;
        padding: 3.25rem 1rem 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.25rem;
        background: rgba(15, 15, 17, 0.78);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .page-scps .origin-hero-main .origin-poster-info--mobile {
        display: flex;
        width: 100%;
        margin: 0 0 1rem;
        color: var(--color-text-secondary);
        font-size: 0.9rem;
        flex-direction: column;
        gap: 0.85rem;
      }

      .page-scps .origin-hero-main .origin-poster-info--mobile .origin-meta,
      .page-scps .origin-hero-main .origin-poster-info--mobile .origin-ratings,
      .page-scps .origin-hero-main .origin-poster-info--mobile .origin-actors,
      .page-scps .origin-hero-main .origin-poster-info--mobile .origin-plot,
      .page-scps .origin-hero-main .origin-poster-info--mobile .origin-stats {
        margin: 0;
      }

      .page-scps .origin-more-info {
        width: 100%;
        text-align: center;
      }

      .page-scps .origin-more-info summary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 0;
        color: var(--color-text-muted);
        font-size: 0.84rem;
        font-weight: 700;
        list-style: none;
        cursor: pointer;
      }

      .page-scps .origin-more-info summary::-webkit-details-marker {
        display: none;
      }

      .page-scps .origin-more-info-chevron {
        width: 0.95rem;
        height: 0.95rem;
        color: var(--color-icon);
        transition: transform 0.16s ease;
      }

      .page-scps .origin-more-info[open] .origin-more-info-chevron {
        transform: rotate(180deg);
      }

      .page-scps .origin-more-info-content {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding-top: 0.85rem;
      }

      .page-scps .origin-more-info .origin-ratings {
        justify-content: center;
      }

      .page-scps .origin-more-info .origin-actors {
        text-align: center;
      }

      .origin-title { font-size: 1.75rem; }

      .origin-hero-main .origin-year,
      .origin-hero-main .origin-year a {
        color: var(--color-text-muted);
      }

      /* Stack the meta row (year / genre / category) on mobile so each
         piece gets its own line. The bullet separators are hidden — they
         only make sense inline. */
      .origin-meta {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
      }
      .origin-meta .origin-meta-separator { display: none; }
      .origin-ratings { justify-content: center; }
      .origin-actors { text-align: center; }
      .origin-stats { justify-content: center; }
      .origin-content { padding: 1rem 0 0; }
      .origin-actions { justify-content: center; }
      .origin-search { max-width: 100%; }
      .origin-plot { text-align: center; }
    }

    /* ============ MOBILE SCENEPACK CARDS ============
       Redesign of the stacked-table-as-cards layout. The generic mobile
       rules in index.css (@media 768px) turn each <tr> into a loose
       block with an absolute-positioned download cell, which makes meta
       chips wrap awkwardly and the card feel boundary-less. Here we
       override with a tight 2-row grid: title + meta span the top,
       size + downloads share the footer row. Scoped with `.page-scps`
       so it only affects this page. */
    @media (max-width: 768px) {
      /* Critical: index.css (@media 768px) has `.combined-scenepacks-table tr
         { display: block; }` which overrides Alpine's inline
         `display: none` from x-show. Without the rule below, the initial-render
         rows (x-show="!ready", containing `<a href="/download/...">` anchors)
         stay visible on mobile even after Alpine is ready. Tapping a row then
         hits the anchor and navigates straight to download, bypassing selection
         mode entirely while those global rules used forced declarations. */
      .page-scps .combined-scenepacks-table tr[style*="display: none"],
      .page-scps .combined-scenepacks-table tr[style*="display:none"] {
        display: none;
      }

    /* Our card layout. Guard with :not([style*="display: none"]) so the rule
         above isn't fighting itself. */
      .page-scps .combined-scenepacks-table tr:not([style*="display: none"]):not([style*="display:none"]) {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "main    main"
          "size    downloads";
        column-gap: 0.75rem;
        row-gap: 0.75rem;
        align-items: center;
        background: var(--color-bg-elevated);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.25rem;
        padding: 0.875rem 1rem;
        margin-bottom: 0.625rem;
        box-shadow: none;
        position: relative;
      }

      .page-scps .combined-scenepacks-table tr:not([style*="display: none"]):not([style*="display:none"]):hover {
        border-color: rgba(255, 255, 255, 0.22);
      }

      .page-scps .combined-scenepacks-table tr.combined-row-selected:not([style*="display: none"]):not([style*="display:none"]) {
        border-color: var(--color-brand);
        box-shadow:
          0 0 0 1px var(--color-brand),
          0 0 0 4px rgba(var(--color-brand-rgb), 0.16);
      }

    /* td1 — title + meta chips block */
      .page-scps .combined-scenepacks-table tr > td:nth-child(1) {
        grid-area: main;
        display: block;
        padding: 0;
        margin: 0;
        border: none;
        text-align: left;
      }

    /* td2 — size (was hidden below sm; surface it as footer-left) */
      .page-scps .combined-scenepacks-table tr > td:nth-child(2) {
        grid-area: size;
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        border: none;
        text-align: left;
      }

      .page-scps .combined-scenepacks-table td:nth-child(2) .combined-date {
        color: var(--color-text-muted);
        font-family: var(--font-mono);
        font-size: 0.8125rem;
      }

    /* td3 — download count (override absolute-positioned default) */
      .page-scps .combined-scenepacks-table td.combined-download-cell {
        grid-area: downloads;
        position: static;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0;
        margin: 0;
        border: none;
        bottom: auto;
        right: auto;
        top: auto;
        left: auto;
      }

    /* inline-flex + align-items:center keeps the download icon
         optically centered with the number's x-height instead of
         sitting on the baseline (which read as low because the icon
         is smaller than the number). */
      .page-scps .combined-download-count {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 1.125rem;
        font-weight: 700;
        min-width: 0;
        color: var(--color-blue-200);
        font-family: var(--font-mono);
        line-height: 1;
      }

    /* Download icon after the count so a bare number reads as
         "downloads" without needing a text label. Uses the same
         brand accent as the meta icons elsewhere on the page. */
      .page-scps .combined-download-count::after {
        content: " downloads";
        color: var(--color-accent-light);
        font-size: 0.78rem;
        line-height: 1;
        margin-left: 0.2rem;
      }

      .page-scps .combined-download-label {
        display: none;
      }

    /* td4 — mobile info button: redundant now that meta is inline. */
      .page-scps .combined-mobile-info-cell {
        display: none;
      }

    /* Title styling */
      .page-scps .combined-scenepack-title {
        display: block;
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.35;
        color: var(--color-text);
        margin: 0 0 0.55rem 0;
        padding-bottom: 0;
        word-break: break-word;
      }

      .page-scps .combined-scenepack-title::after {
        content: none;
        display: none;
      }

    /* Meta chip row — right-aligned so the longest chip anchors to
         the card's right edge and shorter chips line up under it
         rather than floating awkwardly to the left. */
      .page-scps .combined-scenepack-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.35rem;
        margin-top: 0;
      }

      .page-scps .combined-meta-item {
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-text-secondary);
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 0.2rem 0.55rem;
        font-size: 0.6875rem;
        border-radius: 9999px;
      }

      .page-scps .combined-meta-item i {
        color: var(--color-icon);
      }

    /* Put title on the left and the chip column on the right (chips
         stack vertically because flex-wrap kicks in once the meta
         flex-item's intrinsic width narrows). The Alpine-rendered rows
         wrap title+meta in an extra .combined-scenepack-copy div, so we
         also turn that into a flex row with the same layout so both
         renders match. */
      .page-scps .combined-scenepack-main {
        display: block;
        position: relative;
      }

      .page-scps .combined-scenepack-copy {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 0.5rem;
        flex: 1;
        min-width: 0;
        width: 100%;
      }

    /* Title takes the remaining horizontal space; meta hugs its
         intrinsic width on the right. */
      .page-scps .combined-scenepack-copy > .combined-scenepack-title,
      .page-scps .combined-scenepack-main > .combined-scenepack-title {
        flex: 1 1 auto;
        min-width: 0;
      }

    /* width:min-content on the flex-wrap meta container pins its
         width to the WIDEST chip. Chips narrower than that wrap
         underneath it, giving the vertical stack. Without this, meta
         claims enough horizontal space to lay all chips out in a row,
         squeezing the title into a narrow column. */
      .page-scps .combined-scenepack-copy > .combined-scenepack-meta,
      .page-scps .combined-scenepack-main > .combined-scenepack-meta {
        flex: 0 0 auto;
        width: min-content;
      }

      .page-scps .combined-row-checkbox {
        position: absolute;
        left: 0;
        top: 0.125rem;
        margin: 0;
      }

      .page-scps .combined-scenepack-copy {
        flex: 1;
        min-width: 0;
      }

    /* Center the action button rows that flank the search bar
         (Select / Follow / Share above, selection-toolbar and
         filter-chips below). On desktop they left-align under the
         title block; on mobile the card layout looks unbalanced when
         the buttons hug the left edge while the search is full-width. */
      .page-scps .combined-modal-header > .flex.flex-wrap,
      .page-scps .filter-chips-container {
        justify-content: center;
      }

      .page-scps .combined-modal-header {
        margin-bottom: 0.85rem;
      }

      .page-scps .combined-modal-search {
        background: rgba(255, 255, 255, 0.055);
      }

      .page-scps .combined-scenepacks-container {
        border-color: transparent;
        background: transparent;
      }
    }