/* Shared geometry for touch, keyboard, tablet split view and large displays. */
:root{--page-gutter:clamp(16px,4.5vw,86px)}
html{scroll-padding-top:24px}
html.modal-open{overflow:hidden;scrollbar-gutter:stable}
body{overflow-wrap:break-word}
main{min-width:0}
.header{padding-inline:max(var(--page-gutter),env(safe-area-inset-left));gap:24px}
.header nav{min-width:0;overflow-x:auto;scrollbar-width:none;padding:5px 4px;margin-inline:-4px}
.header nav::-webkit-scrollbar{display:none}
.header-actions{flex-shrink:0;gap:12px}
.nav,.icon,.profile,.close{min-height:44px}
.icon,.close{min-width:44px}
.avatar{flex-shrink:0}
.avatar img{display:block}
.profile-option{min-width:0}
.profile-option>span:not(.avatar){min-width:0;overflow-wrap:anywhere;text-align:left}
.hero{height:auto;min-height:clamp(480px,72svh,760px);max-height:none}
.hero-copy{width:62%;max-width:740px;padding:132px 0 64px var(--page-gutter);margin-left:max(0px,calc((100vw - 1920px)/2))}
.hero h1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere;font-size:clamp(32px,4.3vw,66px)}
.hero-art{animation:none}
.rows,.grid-page{max-width:1920px;width:100%;margin-inline:auto;padding-inline:var(--page-gutter)}
.rows{margin-top:-16px}
.grid-page{padding-top:126px}
.manage-page{width:100%;padding-top:126px}
.grid-empty{padding-block:32px}
.grid-page h1,.manage-heading h1{overflow-wrap:anywhere}
.page-head{flex-wrap:wrap;gap:12px;margin-bottom:24px}
.page-head h1{margin-block:0}
.page-head .pill{flex-shrink:0}
.shelf-line{scroll-padding-inline:4px;padding-block:8px 18px}
.shelf-head h2{min-width:0}
.poster img{aspect-ratio:2/3}
.poster-title{color:#e7e7ec}
.poster-info{color:#a3a3ae}
.shelf:has(.shelf-line:empty){display:none}
footer{width:calc(100% - 2 * var(--page-gutter));max-width:1748px;margin:32px auto 0;padding-bottom:max(28px,env(safe-area-inset-bottom));min-width:0}
.foot-brand,.foot-links{min-width:0;gap:16px}
.foot-links a,.foot-links .text-button{min-height:44px;display:inline-flex;align-items:center}
.text-button{min-height:44px}
dialog{max-height:calc(100dvh - 32px);overscroll-behavior:contain;scrollbar-gutter:stable;padding-top:56px}
dialog[open]{animation:dialog-in .16s ease-out}
dialog h2{padding-right:24px;overflow-wrap:anywhere}
dialog p,.auth-kicker{overflow-wrap:anywhere}
.close{position:sticky;float:right;top:0;margin:-42px 0 0 0;right:auto;outline-offset:2px}
#modal-content,#player-content{clear:both}
.search-form{min-width:0;flex-wrap:wrap}
.search-form input{min-width:0;flex:1 1 150px}
.search-form .pill{flex:0 0 auto}
.search-feedback{margin-top:16px}
.search-feedback .actions{margin-top:12px}
.player-modal{padding-top:56px}
.player-modal h2{padding-right:0}
.player-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.player-tools.series-tools{grid-template-columns:repeat(5,minmax(0,1fr))}
.player-tools .field{min-width:0;overflow:hidden;padding:4px;margin:0 -4px}
.player-tools select{width:100%;min-height:44px;padding-right:38px;text-overflow:ellipsis}
.player-note{line-height:1.6;overflow-wrap:anywhere}
.detail-actions .pill{max-width:100%}
.settings-card .actions,.row-actions{gap:10px}
.profile-heading{min-width:0}
.profile-heading img{flex-shrink:0}
.profile-heading strong{overflow-wrap:anywhere}
.settings-fields select{width:100%}
.country{min-height:48px}
.loading-rows{min-width:0}
.loading-rows div{min-width:0}
.skip-link{position:fixed;left:16px;top:12px;padding:12px 18px;border-radius:24px;background:#fff;color:#111;z-index:50;transform:translateY(-160%)}
.skip-link:focus{transform:none}
#toast{bottom:max(20px,env(safe-area-inset-bottom));text-align:center}
@keyframes dialog-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1100px){
 .header{height:70px;gap:20px}
 .header nav{position:absolute;top:70px;left:var(--page-gutter);right:var(--page-gutter);gap:22px}
 .nav{font-size:13px;padding-block:12px}
 .grid-page,.manage-page{padding-top:144px}
 .hero-copy{padding-top:162px;width:70%}
 .hero h1{font-size:clamp(34px,4.8vw,48px)}
 .profile #account-name{display:none}
}
@media(max-width:800px){
 .settings-grid{grid-template-columns:1fr}
 .hero-copy{width:78%}
 .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .settings-card{padding:22px}
 .player-tools.series-tools{grid-template-columns:repeat(4,minmax(0,1fr))}
 .series-tools .field:first-child,.series-tools .field:nth-last-child(-n+2){grid-column:span 2}
}
@media(max-width:650px){
 .brand img{width:58px;height:auto}
 .hero{min-height:min(640px,82svh);align-items:flex-end}
 .hero-copy{width:100%;max-width:none;margin:0;padding:172px var(--page-gutter) 42px}
 .hero h1{font-size:clamp(28px,8.2vw,38px);line-height:1.08;max-width:100%}
 .hero p{max-width:100%}
 .hero .eyebrow{letter-spacing:1.6px;font-size:9px}
 .hero-art.wide{height:85%}
 .meta{gap:8px 12px;font-size:12px}
 .actions{gap:8px}
 .pill{min-height:44px;padding:11px 18px}
 .rows{margin-top:-8px}
 .shelf-head{margin-bottom:10px}
 .shelf h2{font-size:18px}
 .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
 .grid .poster-title{font-size:12px}
 .grid .poster-info{font-size:11px}
 .page-head .pill{font-size:12px}
 .page-head h1{font-size:28px}
 .settings-fields{grid-template-columns:1fr}
 .settings-card{padding:20px}
 .manage-heading{margin-bottom:24px}
 dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:56px 20px 24px;border-radius:20px}
 .player-modal{width:calc(100% - 16px);max-width:calc(100% - 16px);padding:54px 12px 20px}
 .player-tools,.player-tools.series-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
 .player-tools .field:first-child{grid-column:1/-1}
 .series-tools .field:nth-last-child(-n+2){grid-column:auto}
 .player-tools .field{font-size:12px}
 .player-tools select{font-size:16px;padding:10px 36px 10px 10px;background-position:right 12px center}
 .detail-poster{width:80px;margin-top:0}
 .detail-actions{gap:8px}
 .auth-kicker{padding-right:20px;letter-spacing:1.3px}
 footer{grid-template-columns:1fr;margin-top:24px}
 .foot-links{gap:8px 18px;justify-content:flex-start}
}
@media(max-width:380px){
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .taste-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero .actions .pill{padding-inline:14px}
 .country-list{grid-template-columns:1fr}
 .profile-avatar-editor{align-items:flex-start}
}
@media(max-height:500px) and (orientation:landscape){
 .hero{min-height:0}
 .hero-copy{padding-top:142px;padding-bottom:40px;width:80%}
 .hero h1{-webkit-line-clamp:2;font-size:32px}
 .hero .eyebrow{margin-bottom:12px}
 .hero p{-webkit-line-clamp:2}
 .hero .actions{margin-top:16px}
 .player-modal video{max-height:65dvh}
}
@media(hover:none){
 button:hover{filter:none}
 .pill:hover,.poster:hover .poster-image,.avatar-choice:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
 dialog[open]{animation:none}
 .intro{display:none}
}
.sources-page{max-width:1000px;padding-top:40px;line-height:1.7}
.sources-page a:not(.brand):not(.pill){text-decoration:underline;text-underline-offset:3px}