/* Shared final layer: reflow content instead of shrinking the whole page. */
:root{--header-height:64px;--screen-height:100vh;--page-gap:clamp(12px,2vw,30px)}
@supports(height:100dvh){:root{--screen-height:100dvh}}
html{scroll-padding-top:calc(var(--header-height) + 16px)}
body{min-width:0}
main#app{min-width:0;max-width:none;padding:var(--page-gap);min-height:calc(var(--screen-height) - var(--header-height))}
main#app :where(section,article,.panel,.body,.details,.studio-grid,.staff-shell,.staff-main,.staff-overview-grid,.form-grid,.tool-grid,.overlay-builder,.panels-grid){min-width:0}
:where(h1,h2,h3,h4,p,code,.notice,.list-row,.field,.staff-task,.gift-person,.panel-card){overflow-wrap:anywhere}
:where(input,textarea,select){max-width:100%;min-width:0}
:where(.panel img,.channel-banner img,.panel-image,.channel-panel img,.overlay-preview,video){max-width:100%}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.category-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,125px),150px));max-width:none;justify-content:start}
.studio-grid,.panels-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.tool-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.collectible-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.stats,.staff-metrics,.inspect-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.row,.intro,.section-head,.creator-tool-header,.watch-header,.featured-info,.list-row,.queue-filters,.collection-toolbar,.case-actions{flex-wrap:wrap;gap:12px}
.row .field,.queue-filters .field,#staff-search .field,.collection-toolbar .field{min-width:0;flex:1 1 150px}
.list-row .body{flex:1 1 180px}
.tabs,.studio-nav,.staff-nav nav{min-width:0;max-width:100%;overscroll-behavior-inline:contain}
.actions{max-width:100%;flex-wrap:wrap}
/* Membership buttons must never compete with the channel text for width. */
.watch-layout .featured-info{display:grid;grid-template-columns:65px minmax(0,1fr);align-items:start;gap:12px 15px}
.watch-layout .featured-info>.avatar{grid-column:1;grid-row:1}
.watch-layout .featured-info>.details{grid-column:2;grid-row:1;width:100%;min-width:0}
.watch-layout .featured-info>.actions{grid-column:1 / -1;grid-row:2;display:flex;width:100%;margin:0;gap:9px;flex-wrap:wrap}
.watch-layout .featured-info>.actions>*{max-width:100%;white-space:normal}
.watch-layout>section{container-name:channel-content;container-type:inline-size}
.watch-layout .featured-info>.channel-community-links{grid-column:1 / -1;grid-row:3;min-width:0;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.community-links-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.community-links-heading strong{font-size:13px}.community-links-edit{font-size:12px;color:var(--accent)}
.community-links-list{display:flex;flex-wrap:wrap;gap:7px}
.community-links-list>a{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:5px;font-size:13px;overflow-wrap:anywhere;background:var(--raised)}
.community-links-list>a:hover{border-color:var(--accent);color:var(--accent)}
@container channel-content (min-width:640px){
 .watch-layout .featured-info:has(>.channel-community-links){grid-template-columns:65px minmax(0,1fr) minmax(180px,240px)}
 .watch-layout .featured-info:has(>.channel-community-links)>.actions{grid-column:1 / 3}
 .watch-layout .featured-info>.channel-community-links{grid-column:3;grid-row:1 / 3}
 .community-links-list{flex-direction:column}.community-links-list>a{width:100%}
}
.table-scroll{width:100%;max-width:100%;min-width:0;overflow:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
.table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.admin-table{width:100%}
pre{max-width:100%;overflow:auto}
dialog#modal{max-width:calc(100vw - 24px);max-height:calc(var(--screen-height) - 24px);overflow-y:auto;overscroll-behavior:contain}
.account-dropdown{max-width:calc(100vw - 24px);max-height:calc(var(--screen-height) - var(--header-height) - 16px)}
.search-results{min-width:0;max-height:calc(var(--screen-height) - var(--header-height) - 20px)}
body>header{gap:clamp(8px,1.5vw,24px);padding-inline:clamp(8px,1.5vw,25px)}
header .search{flex:1 1 180px;min-width:0;max-width:410px;width:auto}
header .account{flex-shrink:0}
.sidebar{top:var(--header-height)}
.staff-nav{top:var(--header-height);height:calc(var(--screen-height) - var(--header-height));overflow-y:auto}
.studio-nav{top:calc(var(--header-height) + 12px)}
body.staff-page main#app{margin-left:0;padding:0}
.staff-main{padding:var(--page-gap)}
.overlay-preview{height:auto;aspect-ratio:16/9}
.stage-center{max-width:100%;padding:clamp(10px,2vw,25px)}
.sts-player-controls{max-width:100%;min-width:0}
.player-quality-menu{max-width:calc(100vw - 32px)}
@media(min-width:801px){
 .watch-layout,.theater .watch-layout{grid-template-columns:minmax(0,1fr) clamp(280px,26vw,360px);gap:var(--page-gap)}
 body.watch-page:not(.chat-popout) .watch-layout .chat,
 body.watch-page:not(.chat-popout):has(.search-open) .watch-layout .chat{top:calc(var(--header-height) + 12px);height:var(--chat-fit-height,calc(var(--screen-height) - var(--header-height) - 24px));max-height:var(--chat-fit-height,calc(var(--screen-height) - var(--header-height) - 24px));min-height:0}
}
@media(max-width:1100px){header>nav{display:none}}
@media(max-width:1000px){
 .studio-shell{grid-template-columns:minmax(0,1fr)}
 .studio-nav{position:static;flex-direction:row;overflow-x:auto}
 .studio-nav strong{display:none}.studio-nav button{flex-shrink:0;white-space:nowrap}
 .staff-shell{grid-template-columns:minmax(0,1fr)}
 .staff-nav{position:static;height:auto;padding:12px}
 .staff-nav nav{flex-direction:row;overflow-x:auto}.staff-nav nav a{flex-shrink:0;white-space:nowrap}
 .staff-overview-grid{grid-template-columns:minmax(0,1fr)}
 .overlay-builder{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:800px){
 main#app{margin-left:0}
 body>header{height:auto;min-height:64px;padding-block:8px;flex-wrap:wrap}
 header .search{display:none}
 header .search.search-open{display:flex;flex:1 0 100%;max-width:none;order:10;margin:0}
 body:has(.search-open) .sidebar{top:var(--header-height)}
 body.mobile-open .sidebar{width:min(260px,calc(100vw - 40px))}
 .watch-layout,.theater .watch-layout{grid-template-columns:minmax(0,1fr)}
 body.watch-page:not(.chat-popout) .watch-layout .chat{position:relative;top:auto;min-height:0;height:clamp(360px,70dvh,620px);max-height:none}
 body.mobile-chat-view:not(.chat-popout) .watch-layout .chat{height:max(240px,calc(var(--screen-height) - var(--header-height) - 110px))}
 .watch-layout .featured-info .actions{width:100%}
 .staff-heading{flex-wrap:wrap;gap:12px}
 .panel{padding:clamp(12px,3vw,23px)}
 dialog#modal{padding:20px}
 :where(.field input,.field textarea,.field select,header .search input,#chat-input){font-size:16px}
 .table-scroll .admin-table{min-width:560px}
}
@media(max-width:480px){
 .grid{grid-template-columns:minmax(0,1fr)}
 .category-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,100px),1fr));gap:12px}
 .category-cover.category-artwork{max-height:180px}
 .stats,.staff-metrics,.inspect-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .form-grid,.panels-grid,.subplans{grid-template-columns:minmax(0,1fr)}
 .program-path summary{flex-wrap:wrap}.program-completed{white-space:normal}
 .program-goal>div{flex-wrap:wrap;gap:5px}
 .reward-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sts-player-controls{gap:2px;padding-inline:6px}
 .sts-player-controls #player-volume{display:none}
 .sts-player-controls button{padding-inline:5px;min-width:30px}
 .player-control-spacer{min-width:0}
 .chat-actions{flex-wrap:wrap;gap:8px}
 header .brand.halloween-brand .halloween-logo{width:clamp(72px,25vw,108px)}
 .account .small{padding:7px;font-size:12px}
 header .account{gap:4px}
 .stage-center h2{font-size:clamp(17px,5vw,26px)}
 .stage-center p{margin:4px 0;font-size:12px}
}
/* Popout windows must fill their own viewport without desktop offsets. */
body.chat-popout main#app{margin:0;padding:0;min-height:0}
body.chat-popout .watch-layout .chat{position:relative;top:0;height:var(--screen-height);max-height:var(--screen-height);min-height:0}

/* Compact channel header; keep the text readable before moving actions inline. */
.watch-layout .featured-info{margin:12px 0 0;padding:16px;border:1px solid var(--line);border-radius:8px;background:#111517;gap:12px 14px}
.watch-layout .featured-info>.avatar.big{width:56px;height:56px;font-size:20px}
.watch-layout .featured-info{grid-template-columns:56px minmax(0,1fr)}
.watch-layout .featured-info .details h2{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:23px;line-height:1.25;margin:0 0 5px}
.watch-layout .featured-info .details h2 .badge{margin-left:0;flex-shrink:0}
.watch-layout .featured-info .details>p{font-size:13px;line-height:1.45;margin:4px 0;color:var(--muted)}
.watch-layout .featured-info .channel-stream-meta{margin:7px 0;gap:6px 10px}
.watch-layout .featured-info .channel-game{font-size:13px}
.watch-layout .featured-info .channel-stream-tags .tag{font-size:11px;padding:3px 8px;line-height:1.3}
.watch-layout .featured-info>.actions{align-items:center;gap:8px;margin:0}
.watch-layout .featured-info>.actions :is(button,.button-link){display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:13px;line-height:1.4;padding:8px 12px;min-height:36px;border-radius:6px}
.watch-layout .featured-info>.actions #notify-toggle{width:36px;padding:8px;flex-shrink:0}
.watch-layout .featured-info>.actions #membership-open{background:var(--raised);border-color:var(--line);color:var(--text)}
.watch-layout .featured-info>.actions #membership-open:hover{border-color:var(--accent);color:var(--accent)}
@container channel-content (min-width:640px){
 .watch-layout .featured-info:has(>.channel-community-links){grid-template-columns:56px minmax(0,1fr) minmax(180px,240px)}
}
@container channel-content (min-width:800px){
 .watch-layout .featured-info:not(:has(>.channel-community-links)){grid-template-columns:56px minmax(280px,1fr) minmax(240px,360px)}
 .watch-layout .featured-info:not(:has(>.channel-community-links))>.actions{grid-column:3;grid-row:1;justify-content:flex-end;align-self:center}
}
@media(max-width:480px){
 .watch-layout .featured-info{padding:12px;gap:10px;grid-template-columns:44px minmax(0,1fr)}
 .watch-layout .featured-info>.avatar.big{width:44px;height:44px;font-size:17px}
 .watch-layout .featured-info .details h2{font-size:20px}
 .watch-layout .featured-info>.actions{justify-content:flex-start}
 .watch-layout .featured-info>.actions :is(button,.button-link){flex:1 1 auto}
 .watch-layout .featured-info>.actions #notify-toggle{flex:0 0 36px}
}