/* The work area uses the available viewport; lists scroll inside their panels. */
body:has(#opening-view:not([hidden])),body:has(#decks-view:not([hidden])){height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body:has(#opening-view:not([hidden]))>.site-header,body:has(#decks-view:not([hidden]))>.site-header{flex:none;min-height:72px;padding-top:7px;padding-bottom:7px}
body:has(#opening-view:not([hidden]))>main,body:has(#decks-view:not([hidden]))>main{flex:1;min-height:0;display:flex;flex-direction:column}
body:has(#opening-view:not([hidden]))>footer,body:has(#decks-view:not([hidden]))>footer,body:has(#opening-view:not([hidden])) .opening-mode-toolbar,body:has(#decks-view:not([hidden])) .opening-mode-toolbar{display:none!important}
#opening-view:not([hidden]){position:relative;flex:1;min-height:0;width:100%;padding:10px 16px 12px;display:flex;flex-direction:column}
#opening-view .opening-layout{flex:1;min-height:0;display:flex}
#opening-view .studio,#opening-view .studio.inspecting{height:100%;min-height:0;max-height:none;width:100%}
#opening-view .studio-audio{position:absolute;right:32px;bottom:25px;margin:0;min-height:36px}
#opening-view .studio-audio .sound-toggle{width:36px;height:36px;font-size:18px}
#opening-view .volume-panel{left:auto;right:0;transform:none}
#opening-view .studio .studio-space{inset:0;height:100%}
#opening-view .studio .pack-pulls{top:20px;bottom:20px}
#opening-view .studio .pull-mini{max-height:56px}
/* Reserve a compact bottom area for sleeve, rotation and serial number. */
#opening-view .card-protection{bottom:78px}
#opening-view .rotate-reset{bottom:34px;width:34px;height:34px;font-size:22px}
#opening-view .card-serial{bottom:7px;padding:3px 12px;font-size:12px}
#opening-view .studio-space:has(#card:not([hidden])){clip-path:inset(50px 0 110px);transform:translateY(-35px)}
#opening-view .studio .pull-value,#opening-view .studio .viewed-card-price{top:calc(50% - 35px)}
#decks-view:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column;width:100%;padding:12px 18px}
#decks-view>.section-heading{flex:none;margin:0 0 10px;gap:12px}
#decks-view h1{font-size:30px}
#decks-view .eyebrow{display:none}
#saved-decks{flex:none;max-height:55px;overflow:auto;margin:0 0 10px}
#decks-view .deck-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(180px,22%) minmax(0,1fr) minmax(240px,25%);grid-template-rows:minmax(0,1fr);gap:14px;align-items:stretch}
#decks-view .deck-preview{grid-column:1;grid-row:1;position:static;max-height:none;min-height:0;overflow:auto;padding:12px;display:block}
#decks-view .deck-browser{grid-column:2;grid-row:1;min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
#decks-view .deck-editor{grid-column:3;grid-row:1;position:relative;top:auto;max-height:none;min-height:0;overflow:auto;padding:14px;scrollbar-width:thin;overscroll-behavior:contain}
#decks-view .deck-editor-title{font-size:24px;margin-bottom:10px}
#decks-view #deck-save{position:sticky;bottom:0;z-index:3;width:100%;box-shadow:0 0 0 7px var(--cp-surface,#fff);min-height:44px}
#decks-view .deck-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#decks-view .deck-filters{padding:10px;gap:7px;margin-bottom:8px}
#decks-view .deck-filters>input{flex-basis:100%}
#decks-view #deck-set{min-width:0}
#decks-view .deck-preview h2{font-size:24px}
#decks-view .deck-preview .preview-effect{font-size:14px;line-height:1.45}
@media(min-width:1600px){#decks-view .deck-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
 #decks-view .deck-layout{grid-template-columns:minmax(0,1fr) minmax(180px,38%);grid-template-rows:100px minmax(0,1fr);gap:10px}
 #decks-view .deck-preview{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:55px minmax(0,1fr);gap:0 12px;padding:8px;max-height:100px}
 #decks-view .deck-preview>img{grid-column:1;grid-row:1/6;height:78px;width:55px}
 #decks-view .deck-preview h2,#decks-view .deck-preview p,#decks-view .deck-preview .card-facts{grid-column:2;margin:0;font-size:13px}
 #decks-view .deck-browser{grid-column:1;grid-row:2}
 #decks-view .deck-editor{grid-column:2;grid-row:2;padding:9px}
 #decks-view #deck-selected{max-height:none;overflow:visible}
 #decks-view .deck-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){
 #opening-view:not([hidden]){padding:5px 5px 7px}
 #opening-view .studio .pack-pulls{left:22px;width:23px;gap:3px;top:16px;bottom:16px}
 #opening-view .studio-back-actions{top:8px}
 #opening-view .studio-back-actions button{min-height:32px;padding:7px 10px}
 #opening-view .studio-audio{right:16px;bottom:18px}
 #opening-view .card-protection{width:145px}
 #decks-view:not([hidden]){padding:8px}
 #decks-view .deck-layout{grid-template-columns:minmax(0,1fr) 155px;gap:7px}
 #decks-view h1{font-size:23px}
 #decks-view .deck-catalog{grid-template-columns:1fr}
 #decks-view .deck-ownership-row,#decks-view .deck-ownership{flex-wrap:wrap}
 #decks-view .deck-filters input,#decks-view .deck-filters select{width:100%;max-width:100%}
 #decks-view .deck-editor>input{font-size:15px}
 #decks-view .deck-editor-title{font-size:20px}
}
#decks-view .deck-editor{display:flex;flex-direction:column;gap:7px}#decks-view .deck-editor>*{flex-shrink:0;margin-top:0;margin-bottom:0}#decks-view #deck-selected{flex:1;min-height:50px;overflow:auto;max-height:none}#decks-view #deck-validation{max-height:85px;overflow:auto}#decks-view #deck-missing{font-size:12px}#decks-view .deck-editor>details{max-height:70px;overflow:auto}#decks-view #deck-save{position:static;box-shadow:none}#decks-view #deck-save-status:empty{display:none}
@media(max-width:540px){#decks-view>.section-heading{flex-direction:row;align-items:center}#decks-view>.section-heading .button{font-size:12px;padding:9px;min-height:40px}#decks-view #deck-save{font-size:12px;padding:10px 3px;white-space:nowrap;min-height:44px}#decks-view .deck-editor>p.muted:first-of-type{font-size:11px;line-height:1.3}}