/* A stationary listening desk and a separately scrolling case index. */
.mini-player{display:none}
.case-label .case-stamp{position:static;margin-left:auto;flex-shrink:0;font:14px/1 var(--display);letter-spacing:.4px;padding:4px 6px;transform:rotate(-4deg);border:3px double #75512e;background:none}

.row-complete[aria-pressed=true]{min-width:108px;padding:5px 10px}
.row-stamp{display:inline-block;border:3px double #bca275;color:#cdb888;padding:4px 6px;transform:rotate(-5deg);font:15px/1 var(--display);letter-spacing:.7px;white-space:nowrap}
.row-complete:hover .row-stamp{color:var(--gold);border-color:var(--gold)}
.episode-row.completed .episode-title{color:#b3baa9}
.catalog-scroll:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
/* The transformed desktop gear must stack above the case folder, including its menu. */
.settings-wrap{position:relative;z-index:2;display:flex;align-items:center}
.settings-gear{color:var(--muted)}
.settings-gear[aria-expanded=true]{color:var(--gold);background:var(--panel)}
.playback-settings{position:absolute;right:0;bottom:calc(100% + 10px);z-index:12;display:grid;grid-template-columns:1fr;width:260px;max-width:calc(100vw - 32px);padding:10px;background:#24291f;border:1px solid #657055;border-radius:4px;box-shadow:0 8px 30px #0007}
.setting-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.setting-name{font-size:14px;line-height:1.3;color:var(--muted);white-space:nowrap}
.setting-button strong{font:14px/1.3 var(--mono);color:var(--text);white-space:nowrap}
.setting-button:hover{background:#303727}
.setting-button:hover strong,.setting-button.setting-active strong,.setting-button[aria-pressed=true] strong{color:var(--gold)}
.playback-settings .volume-row{display:flex;justify-content:space-between;gap:2px;margin:5px 0;padding-inline:10px}
.playback-settings .volume-row input{width:95px;min-width:0}
.collection-settings{justify-content:center;border-top:1px solid var(--line);min-height:40px;width:100%;color:var(--muted)}
.case-sheet h1{font-size:clamp(36px,4.5vw,58px);line-height:1.02;margin:22px 0 14px;max-width:100%}
.case-sheet h1.long-title{font-size:clamp(26px,3vw,38px)}
.case-label #case-kind{font:12px/1.3 var(--mono);letter-spacing:1px}
.case-sheet .typewriter{font-size:14px;color:#565d52}
.transport{gap:clamp(2px,1vw,14px)}

@media(min-width:801px){
 html{height:100%;overflow:hidden}
 body{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
 .masthead{width:100%;padding:15px 32px;gap:28px}
 .brand{font-size:43px}
 .brand span{font-size:10px;letter-spacing:2.4px;margin-top:7px}
 main{width:100%;height:100%;min-height:0;grid-template-columns:minmax(315px,.88fr) minmax(355px,1.28fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"player catalog";gap:18px 38px;padding:18px 32px 16px}
 .listening-room{grid-area:player;position:static;align-self:stretch;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px}
 .listening-room>.section-caption{margin:0;font-size:11px}
 .case-sheet{min-height:0;padding:15px 22px 12px;display:flex;flex-direction:column;border-top-width:4px;box-shadow:3px 3px 0 #333831}
 .case-label{margin-top:0;font-size:11px;gap:8px}
 .case-label span{font-size:21px}
 h1{font-size:clamp(28px,2.8vw,42px);line-height:1.03;margin:12px 0 10px;max-width:100%}
 h1.long-title{font-size:clamp(21px,2vw,29px)}
 .typewriter{font-size:14px;margin:0 0 10px}
 .sheet-bottom{margin-top:auto;padding-top:9px;font-size:10px;flex-wrap:wrap}
 .main-player{padding:3px 0 0}
 .timeline input{height:16px}
 .time-labels{margin-top:3px;font-size:12px}
 .play-button{width:56px;height:56px}
 .play-button svg{width:25px;height:25px}
 .play-message{margin:4px 0 8px;font-size:12px;line-height:1.4;min-height:0}
 .play-message:empty{display:none}
 .episode-actions{gap:4px 16px;margin:0;justify-content:center;border-top:1px solid var(--line);padding-top:4px}
 .episode-actions .text-button{min-height:36px;font-size:12px;gap:5px}
 .episode-actions label{font-size:12px;white-space:nowrap}
 .episode-actions select{font-size:12px;min-height:30px;padding:4px;max-width:145px}
 
 
 
 
 .catalog{grid-area:catalog;min-height:0;display:flex;flex-direction:column}
 .catalog-heading{margin-bottom:10px}
 h2{font-size:39px}
 .catalog-heading .section-caption{font-size:11px}
 .completion-count{gap:4px}
 .completion-count strong{font-size:23px}
 .completion-count>span{font-size:10px}
 .collections{margin-bottom:8px}
 .collections select{min-height:36px}
 .filter-row{padding:10px 0 12px}
 .catalog-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#6d765d transparent;scrollbar-gutter:stable;overscroll-behavior:contain}
 .catalog-scroll .episode-row{padding-right:4px}
 .toast{bottom:24px}
}

@media(min-width:801px) and (max-height:740px){
 .masthead{padding-block:10px}
 .brand{font-size:37px}
 .brand span{margin-top:5px}
 main{padding-block:12px;column-gap:30px;row-gap:12px}
 .listening-room{gap:7px}
 .case-sheet{padding:12px 18px 9px}
 .case-label{margin-top:0}
 h1{font-size:30px;margin-block:10px 8px}
 h1.long-title{font-size:22px}
 .typewriter{font-size:13px;margin-bottom:8px}
 .sheet-bottom{padding-top:7px}
 .transport{margin-block:4px}
 .play-button{width:50px;height:50px}
 
}

@media(min-width:801px) and (max-width:1000px){
 .masthead{padding-inline:22px}
 .header-note{display:none}
 .masthead>.outline{margin-left:auto}
 main{padding-inline:22px;column-gap:24px;grid-template-columns:minmax(310px,.95fr) minmax(340px,1.1fr)}
 .case-sheet{padding-inline:16px}
 .row-complete[aria-pressed=true]{min-width:95px;padding-inline:6px}
 .row-stamp{font-size:14px;padding-inline:4px}
}

@media(max-width:800px){
 .mini-player:not([hidden]){display:flex}
 .case-label .case-stamp{font-size:13px}
 .catalog-scroll{overflow:visible}
 
 .row-complete[aria-pressed=true]{min-width:95px;padding-inline:5px}
 .row-stamp{font-size:14px;padding-inline:4px;letter-spacing:.3px}
}

/* Very short or heavily zoomed windows need natural reflow to stay accessible. */
@media(min-width:801px) and (max-height:640px){
 html{overflow:auto}
 body{height:auto;min-height:100dvh;overflow:visible;display:block}
 main{height:auto;align-items:start;grid-template-rows:auto}
 .listening-room{grid-template-rows:auto auto auto auto}
 .case-sheet{min-height:180px}
 .catalog-scroll{max-height:65dvh}
}

@media(min-width:801px) and (max-height:740px){
 .case-sheet h1{font-size:clamp(32px,3.7vw,46px);margin-top:16px}
 .case-sheet h1.long-title{font-size:26px}
}
@media(max-width:360px){
 .transport{gap:2px}
 .transport .play-button{width:56px;height:56px}
 .case-sheet h1{font-size:34px}
 .case-label .case-stamp{font-size:12px;padding-inline:3px}
}

/* File-cover typography and the numbered tab share the episode's real metadata. */
.case-sheet{
 margin-top:27px;
 padding:18px 23px 15px;
 border:1px solid #ac9565;
 border-radius:0 4px 3px 3px;
 background-color:#e3d5b1;
 background-image:linear-gradient(110deg,#fff5d438,transparent 58%),repeating-linear-gradient(0deg,transparent 0 3px,#54452b05 3px 4px);
 box-shadow:2px 3px 0 #b69d6b,4px 6px 0 #6e6044,5px 9px 15px #0003;
 color:#293027;
}
.case-sheet .case-label{
 position:absolute;
 left:-1px;
 top:-28px;
 display:flex;
 align-items:center;
 gap:11px;
 min-width:156px;
 height:28px;
 padding:0 19px;
 margin:0;
 border:1px solid #ac9565;
 border-bottom:0;
 border-radius:5px 9px 0 0;
 background:#d8c497;
 color:#3b402e;
}
.case-sheet .case-label #case-kind{font:12px/1 var(--mono);letter-spacing:.6px}
.case-sheet .case-label #case-number{font:17px/1 var(--mono);letter-spacing:1px}
.file-subject-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:29px}
.file-field-label{font:12px/1.3 var(--mono);letter-spacing:1.1px;color:#67634d;white-space:nowrap}
.case-sheet .case-stamp{
 position:static;
 flex-shrink:0;
 transform:rotate(-6deg);
 border:3px double #8b3d30;
 padding:3px 7px;
 background:none;
 color:#8b3d30;
 font:20px/1 var(--display);
 letter-spacing:1.1px;
}
.case-sheet h1{margin:13px 0 17px}
.file-date{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 15px;padding:10px 0;border-top:1px solid #a0926d}
.case-sheet .file-date .typewriter{margin:0;font:15px/1.4 var(--mono);color:#424734}
.case-sheet .sheet-bottom{border-top:1px solid #a0926d;color:#66624c;padding-top:10px;letter-spacing:.7px}
@media(min-width:801px) and (max-height:740px){
 .case-sheet{padding:12px 18px 10px}
 .case-sheet h1{margin-block:10px 12px}
 .file-date{padding-block:8px}
 .case-sheet .case-stamp{font-size:18px}
}
@media(max-width:800px){
 .case-sheet{min-height:275px;padding:17px 22px 16px;display:flex;flex-direction:column}
 .case-sheet .sheet-bottom{margin-top:auto}
}
@media(max-width:360px){
 .case-sheet{padding-inline:18px}
 .case-sheet .case-stamp{font-size:17px;letter-spacing:.7px}
}