/* 0.6.91 — Film / Serie detail hybrid redesign.
   Cinematic hero + compact personal dossier + primary log action + personal journey. */

.detail-hybrid{--detail-hero-ink:#f6f6f2;--detail-hero-muted:#c5c5bf;--detail-dark-panel:rgba(10,12,10,.82);--detail-dark-line:rgba(239,241,233,.22)}
.detail-hybrid .detail-rich-content{padding:0 14px 30px;scroll-padding-top:64px}
html[data-theme="dark"] .detail-hybrid .detail-rich-content{background:#0b0d0c}

/* Top bar floats over the hero, then becomes the normal sticky dossier header after scroll. */
.detail-hybrid .detail-topbar{position:absolute;inset:0 0 auto;z-index:25;background:linear-gradient(180deg,rgba(4,5,4,.64),rgba(4,5,4,0));border-bottom:0;color:#f7f7f2}
.detail-hybrid .detail-topbar .icon{background:rgba(9,11,9,.22);border-color:rgba(247,247,242,.28);color:#f7f7f2;border-radius:50%;backdrop-filter:blur(5px)}
.detail-hybrid .detail-topbar .topbar-copy{text-align:center}
.detail-hybrid .detail-brand-context{margin:0;color:#f4f4ef;font:800 11px/1 var(--mono);letter-spacing:.22em;white-space:nowrap}
.detail-hybrid .detail-topbar .topbar-copy h1{font:800 13px/1.2 var(--mono);letter-spacing:.01em;color:var(--ink)}
.detail-hybrid.detail-title-visible .detail-topbar{background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom:1px solid var(--line);color:var(--ink);backdrop-filter:blur(12px)}
.detail-hybrid.detail-title-visible .detail-topbar .icon{background:var(--surface);border-color:var(--line);color:var(--ink);border-radius:50%}
.detail-hybrid.detail-title-visible .detail-brand-context{opacity:0}

/* Hero: one large cinematic identity. Poster remains in DOM only for compatibility/resolvers. */
.detail-hybrid .detail-hybrid-hero{min-height:clamp(390px,55vh,470px);margin:0 -14px 14px;border-bottom:0;background:#080a08}
.detail-hybrid .detail-backdrop{background-position:center 26%;filter:saturate(.83) contrast(1.04)}
.detail-hybrid .detail-backdrop::after{background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.02) 55%,rgba(0,0,0,.13))}
.detail-hybrid .detail-backdrop-shade{background:linear-gradient(180deg,rgba(3,5,3,.14) 0%,rgba(3,5,3,.10) 28%,rgba(3,5,3,.50) 62%,rgba(3,5,3,.96) 91%,#0b0d0c 100%)}
.detail-hybrid .detail-poster-compat{display:none!important}
.detail-hybrid-identity{position:absolute;z-index:3;left:22px;right:22px;bottom:28px;color:var(--detail-hero-ink)}
.detail-archive-pill{display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border:1px solid color-mix(in srgb,#b7ff2a 66%,transparent);border-radius:6px;color:#b7ff2a;background:rgba(6,10,5,.42);font:800 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(6px)}
.detail-archive-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:7px}
.detail-hybrid-identity h2{margin:12px 0 0;max-width:92%;color:#f7f7f3;font:900 clamp(29px,8.5vw,40px)/.98 var(--mono);letter-spacing:-.055em;text-wrap:balance;text-shadow:0 2px 16px rgba(0,0,0,.42)}
.detail-hybrid-meta{margin-top:13px;color:#d7d7d1;font:700 10px/1.45 var(--mono);letter-spacing:.035em;text-transform:uppercase}
.detail-hybrid-byline{display:block;margin-top:8px;color:#c5c5c0;font:600 10px/1.3 var(--mono);letter-spacing:.025em}
.detail-compat-meta,.detail-compat-hidden{display:none!important}

/* Personal state card: same four concepts, less ceremony and more touch clarity. */
.detail-hybrid .hybrid-personal-panel{padding:0;margin-bottom:10px;border-radius:12px;overflow:hidden}
html[data-theme="dark"] .detail-hybrid .hybrid-personal-panel{border-color:var(--detail-dark-line);background:linear-gradient(155deg,rgba(22,24,22,.96),rgba(12,14,12,.96))}
.detail-hybrid #moviePersonalGrid,.detail-hybrid #seriesPersonalGrid{grid-template-columns:repeat(2,minmax(0,1fr));border:0}
.detail-hybrid .detail-dossier-item{min-height:76px;padding:9px 8px;border-color:var(--line);display:flex;flex-direction:column;justify-content:center;align-items:center;background:transparent}
html[data-theme="dark"] .detail-hybrid .detail-dossier-item{border-color:rgba(239,241,233,.14);background:transparent;color:#f3f3ef}
.detail-hybrid .detail-dossier-item .dossier-icon{min-height:18px;display:flex;align-items:center;justify-content:center;margin-bottom:6px;color:var(--lime);font-size:14px}
.detail-hybrid .detail-dossier-item .dossier-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.detail-hybrid .detail-dossier-item .rating-stars{font-size:19px;letter-spacing:1px;color:color-mix(in srgb,var(--purple) 78%,var(--muted))}
.detail-hybrid .detail-dossier-item strong{font:800 13px/1.1 var(--mono);overflow:visible;text-overflow:clip}
.detail-hybrid .detail-dossier-item small{margin-top:4px;color:var(--muted);font:700 7px/1.2 var(--mono);letter-spacing:.065em;text-transform:uppercase}
html[data-theme="dark"] .detail-hybrid .detail-dossier-item small{color:#9d9f99}
.detail-hybrid .detail-rating-action{background:transparent;border-color:var(--line)}
html[data-theme="dark"] .detail-hybrid .detail-rating-action{background:transparent;border-color:rgba(239,241,233,.14)}
.detail-hybrid .detail-rating-action:active{background:color-mix(in srgb,var(--purple) 8%,transparent)}

/* One dominant logging action; watchlist stays clearly secondary. */
.detail-hybrid .hybrid-detail-actions{display:grid;gap:7px;margin:0 0 15px}
.detail-hybrid .hybrid-detail-actions .button{min-height:50px;border-radius:7px;font:700 11px/1 var(--mono);letter-spacing:.015em}
.detail-hybrid .hybrid-register-action{display:flex!important;align-items:center;justify-content:center;gap:10px;background:linear-gradient(90deg,var(--lime2),var(--lime));border-color:var(--lime);color:#071004}
.detail-hybrid .hybrid-register-action::before{content:"＋";width:21px;height:21px;border:1px solid currentColor;border-radius:4px;display:grid;place-items:center;font:900 15px/1 Arial,sans-serif}
.detail-hybrid .hybrid-watchlist-action{background:transparent;color:var(--lime);border-color:color-mix(in srgb,var(--lime) 58%,var(--line))}
html[data-theme="light"] .detail-hybrid .hybrid-watchlist-action{color:var(--lime-text);border-color:color-mix(in srgb,var(--lime-text) 55%,var(--line))}
.detail-hybrid #seriesPrimaryRegister{display:flex!important}
.detail-hybrid .series-detail-actions{grid-template-columns:1fr;margin:0 0 15px}
.detail-hybrid .series-detail-actions #seriesSecondaryAction{min-height:44px}

/* The user's relationship with the title is a compact timeline, not another metric panel. */
.detail-journey-section{position:relative;margin:2px 1px 16px;padding:2px 0 0}
.detail-journey-section .detail-kicker{margin:0 0 12px}
.detail-journey-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:0 1px}
.detail-journey-line{position:absolute;left:7%;right:7%;top:12px;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--lime) 68%,var(--line)) 0 34%,var(--line) 34% 100%);opacity:.8}
.detail-journey-node{position:relative;z-index:1;min-width:0;text-align:center;color:var(--muted)}
.detail-journey-dot{width:24px;height:24px;margin:0 auto 7px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:transparent;font:900 10px/1 Arial,sans-serif}
html[data-theme="dark"] .detail-journey-dot{background:#0b0d0c}
.detail-journey-node.is-active .detail-journey-dot{border-color:var(--lime);background:color-mix(in srgb,var(--lime) 15%,var(--bg));color:var(--lime)}
html[data-theme="dark"] .detail-journey-node.is-active .detail-journey-dot{background:color-mix(in srgb,var(--lime) 18%,#0b0d0c)}
.detail-journey-node.is-current .detail-journey-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 12%,transparent)}
.detail-journey-node strong{display:block;min-height:18px;color:currentColor;font:800 6.8px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:normal}
.detail-journey-node small{display:block;margin-top:2px;color:var(--muted);font:700 6.2px/1.2 var(--mono);letter-spacing:.025em;text-transform:uppercase;white-space:normal}
.detail-journey-node.is-active strong{color:var(--ink)}
html[data-theme="dark"] .detail-journey-node.is-active strong{color:#efefea}
.detail-journey-node.is-current small{color:var(--lime)}

/* Editorial copy: one readable block, no decorative duplicate image. */
.detail-hybrid .detail-editorial-card{position:relative;margin:0 0 12px;padding:14px 14px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
html[data-theme="dark"] .detail-hybrid .detail-editorial-card{border-color:var(--detail-dark-line);background:linear-gradient(145deg,rgba(22,24,22,.94),rgba(13,15,13,.96))}
.detail-copy-heading{display:flex;align-items:flex-start;gap:9px;margin-bottom:5px}.detail-copy-heading .detail-kicker{margin:2px 0 0}.detail-quote-mark{color:var(--lime);font:900 28px/.7 Georgia,serif}
.detail-hybrid .detail-copy-block p{color:var(--ink2);font:500 10px/1.65 var(--mono)}
html[data-theme="dark"] .detail-hybrid .detail-copy-block p{color:#d1d2cc}

/* Technical data: readable 2x2 instead of squeezed tiny columns. */
.detail-hybrid .hybrid-meta-panel{padding:11px 12px 10px;border-radius:11px}
html[data-theme="dark"] .detail-hybrid .hybrid-meta-panel{border-color:var(--detail-dark-line);background:linear-gradient(145deg,rgba(18,20,18,.95),rgba(12,14,12,.98))}
.detail-hybrid .hybrid-meta-panel .detail-kicker{margin-bottom:8px}
.detail-hybrid .detail-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
html[data-theme="dark"] .detail-hybrid .detail-meta-grid{border-color:rgba(239,241,233,.13)}
.detail-hybrid .detail-meta-item{min-height:54px;padding:9px 8px;border-color:var(--line)}
html[data-theme="dark"] .detail-hybrid .detail-meta-item{border-color:rgba(239,241,233,.13)}
.detail-hybrid .detail-meta-item span{font:700 6.8px/1.2 var(--mono);letter-spacing:.07em;color:var(--muted)}
.detail-hybrid .detail-meta-item strong{font:700 9.5px/1.3 var(--mono);white-space:normal;overflow:visible;text-overflow:clip}

/* Series: progression moves into dossier + journey; next episode becomes information, not a second competing CTA. */
.detail-hybrid .hybrid-next-episode{padding:11px 12px;border-radius:11px;margin-bottom:14px}
html[data-theme="dark"] .detail-hybrid .hybrid-next-episode{border-color:var(--detail-dark-line);background:linear-gradient(145deg,rgba(18,20,18,.95),rgba(12,14,12,.98))}
.detail-hybrid .hybrid-next-episode .next-episode-main{grid-template-columns:78px minmax(0,1fr);gap:11px}
.detail-hybrid .hybrid-next-episode .episode-still{width:78px;height:56px;border-radius:6px}
.detail-hybrid .hybrid-next-episode .next-episode-action{display:none}
.detail-hybrid .next-episode-copy h3{white-space:normal;font-size:10.5px;line-height:1.25}
.detail-hybrid .detail-seasons{margin:0 0 14px}.detail-hybrid .detail-seasons .section-head h2{font:800 9px/1.2 var(--mono);letter-spacing:.08em}.detail-hybrid .detail-seasons .link{font-size:8px}
.detail-hybrid .detail-season-preview{gap:9px}
.detail-hybrid .detail-season-preview .season-index-poster{border-radius:9px}

/* Viewing history stays available, but after the new dossier hierarchy. */
.detail-hybrid .detail-history{margin-top:14px}.detail-hybrid .detail-history .section-head h2{font:800 9px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase}
html[data-theme="dark"] .detail-hybrid .detail-history .row{background:rgba(18,20,18,.75);border-color:rgba(239,241,233,.14)}

/* Light theme keeps the same architecture: dark photographic hero, paper dossier below. */
html[data-theme="light"] .detail-hybrid .detail-backdrop-shade{background:linear-gradient(180deg,rgba(3,5,3,.12) 0%,rgba(3,5,3,.12) 30%,rgba(3,5,3,.54) 65%,rgba(3,5,3,.96) 92%,#11130f 100%)}
html[data-theme="light"] .detail-hybrid .detail-archive-pill{color:var(--lime-fill);border-color:color-mix(in srgb,var(--lime-fill) 66%,transparent)}
html[data-theme="light"] .detail-hybrid .hybrid-register-action{background:linear-gradient(90deg,var(--lime-fill-2),var(--lime-fill))!important;border-color:var(--lime-fill)!important;color:#071004!important}

@media(max-width:380px){
 .detail-hybrid .detail-hybrid-hero{min-height:370px}
 .detail-hybrid-identity{left:18px;right:18px;bottom:24px}
 .detail-hybrid-identity h2{font-size:29px}
 .detail-hybrid-meta,.detail-hybrid-byline{font-size:9px}
 .detail-hybrid .detail-dossier-item{min-height:71px;padding-inline:6px}
 .detail-hybrid .detail-dossier-item strong{font-size:12px}
 .detail-journey-node strong{font-size:6.2px}.detail-journey-node small{font-size:5.8px}
 .detail-journey-dot{width:22px;height:22px}.detail-journey-line{top:11px}
}
@media(prefers-reduced-motion:reduce){.detail-hybrid .detail-topbar{backdrop-filter:none}}