@font-face{font-family:CaseHand;src:url('fonts/handwriting-pen.woff') format('woff');font-display:swap;font-weight:400}
/* Keep the portrait desk's props above and beside the live case file. */
.desk-scene{
 position:relative;
 min-width:0;
 min-height:0;
 display:flex;
 flex-direction:column;
 padding:52% 20% 14px 4%;
 border:1px solid #62665e;
 border-radius:4px;
 background:#555b54 url('assets/dragnet-police-desk.webp') center top / cover no-repeat;
 box-shadow:inset 0 0 20px #171b1926,0 3px 14px #0004;
}
.desk-scene .case-sheet{
 position:relative;
 top:28px;
 z-index:1;
 flex:0 0 auto;
 aspect-ratio:1.28;
 min-height:min-content;
 margin:0 0 clamp(20px,7%,38px);
 padding:10px 12px;
 border-color:#aa9366 #a18a60 #957d55 #b39b70;
 border-radius:1px 3px 2px 2px;
 background:#e3d5b1 url('assets/case-paper.webp') center / 100% 100% no-repeat;
 transform:rotate(-1deg) scale(.86);
 transform-origin:0 0;
 box-shadow:inset 0 0 12px #72542b0c,1px 2px 0 #c1ab7a,3px 4px 0 #a48c5f,5px 8px 9px #0006;
}
/* A fixed interior gives the text fitter the folder's actual usable space. */
.case-content{position:absolute;inset:0;padding:inherit}
#case-content-inner{display:flex;flex-direction:column;min-height:100%}
#case-content-inner>*{flex-shrink:0}
/* Photographic wisps share the background image's cover projection. */
.desk-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none;border-radius:inherit;visibility:hidden}
.desk-atmosphere[data-ready=true]{visibility:visible}
.desk-atmosphere-plane{position:absolute;left:0;top:0;width:1122px;height:1402px;transform-origin:0 0}
.coffee-steam,.cigarette-smoke{position:absolute;width:0;height:0}
.vapor-plume{position:absolute;display:block;bottom:0;background:url('assets/desk-vapor.webp') center bottom / 100% 100% no-repeat;transform-origin:50% 100%;opacity:0;will-change:transform,opacity}
/* A fixed, faint envelope contains two independently rising texture fields.
   Each travels exactly one tile per loop, so the steam never bobs downward
   or resets into a dense puff. */
.coffee-steam .vapor-plume{left:-135px;bottom:10px;width:270px;height:250px;background:none;overflow:hidden;mask-image:linear-gradient(to top,transparent,#000 22%,#000 64%,transparent);filter:blur(1.6px);opacity:.24;will-change:auto}
.coffee-steam .vapor-plume::before,.coffee-steam .vapor-plume::after{content:"";position:absolute;left:-8%;top:-220px;width:116%;height:calc(100% + 440px);background:url('assets/coffee-steam.webp') center top / 100% 220px repeat-y;mask-image:repeating-linear-gradient(to bottom,transparent 0,#000 30px,#000 190px,transparent 220px);opacity:.8;--steam-mirror:1;animation:coffee-flow 5.6s linear infinite;animation-delay:-2.1s;will-change:transform}
.coffee-steam .vapor-plume::after{opacity:.5;--steam-mirror:-1;animation-duration:7.6s;animation-delay:-5.3s}
/* Successive wisps rise from the same tip; their overlapping fades keep the
   stream visible without reversing direction or adding a second source. */
.cigarette-smoke .vapor-plume{left:-102px;width:204px;height:430px;filter:blur(1px);animation:cigarette-vapor 12s linear infinite;animation-delay:-8s}
.cigarette-smoke .vapor-plume:nth-child(2){animation-delay:-4s}
.cigarette-smoke .vapor-plume:nth-child(3){animation-delay:0s}
@keyframes coffee-flow{
 0%{transform:translate3d(0,0,0) scaleX(var(--steam-mirror)) skewX(0deg)}
 25%{transform:translate3d(6px,-55px,0) scaleX(var(--steam-mirror)) skewX(4deg)}
 50%{transform:translate3d(0,-110px,0) scaleX(var(--steam-mirror)) skewX(0deg)}
 75%{transform:translate3d(-6px,-165px,0) scaleX(var(--steam-mirror)) skewX(-4deg)}
 100%{transform:translate3d(0,-220px,0) scaleX(var(--steam-mirror)) skewX(0deg)}
}
@keyframes cigarette-vapor{
 0%{opacity:0;transform:scale(.66,.42) skewX(7deg)}
 25%{opacity:.5;transform:scale(.78,.62) skewX(8deg)}
 50%{opacity:.6;transform:scale(.95,.88) skewX(10deg)}
 75%{opacity:.44;transform:translateY(-12px) scale(1.12,1.13) skewX(13deg)}
 100%{opacity:0;transform:translateY(-40px) scale(1.25,1.35) skewX(16deg)}
}
.desk-atmosphere[data-paused=true] .vapor-plume,.desk-atmosphere[data-paused=true] .vapor-plume::before,.desk-atmosphere[data-paused=true] .vapor-plume::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.desk-atmosphere{display:none}}
.desk-scene .case-label{top:-29px;height:30px;min-width:126px;padding-inline:10px;gap:8px;border-radius:6px 13px 0 0;border-color:#aa9366;background:linear-gradient(#84632c16,#84632c16),url('assets/case-paper.webp') right bottom / 480px 480px no-repeat #dac59a;box-shadow:inset 0 1px #fff4d13d}
.desk-scene .case-label #case-kind{font-size:1.0625rem}
.desk-scene .case-label #case-number{font-family:CaseHand,'Segoe Print','Bradley Hand',cursive;font-size:1.6rem;font-weight:400;letter-spacing:.6px;color:#3c5060;display:inline-block;transform:rotate(-4deg)}
.desk-scene .file-subject-head{min-height:22px;gap:6px}
.desk-scene .file-field-label{font-size:1.0625rem;letter-spacing:.6px;color:#454432}
.desk-scene .case-stamp{font-size:1.125rem;letter-spacing:.4px;border-width:2px;padding:3px 4px}
.desk-scene .case-sheet h1{font-size:clamp(30px,3vw,38px);line-height:1.02;margin:7px 0 9px;letter-spacing:-.2px}
.desk-scene .case-sheet h1.long-title{font-size:22px;line-height:1.05}
.desk-scene .case-sheet h1.very-long-title{font-size:18px;line-height:1.08}
/* Two compact typed rows keep the assignment and date inside the file cover. */
.desk-scene .file-detail,.desk-scene .file-date{display:grid;grid-template-columns:minmax(0,1fr);align-items:baseline;gap:3px 8px;padding-block:5px;border-top:0}
.desk-scene .file-detail .typewriter,.desk-scene .file-date .typewriter{margin:0;font-size:1.1875rem;line-height:1.3;color:#293027;overflow-wrap:anywhere}
.desk-scene .file-detail .typewriter{font-family:CaseHand,'Segoe Print','Bradley Hand',cursive;font-size:1.625rem;line-height:1.15;letter-spacing:.4px;color:#3c5060;transform:rotate(-1deg);transform-origin:left center}
.desk-scene .sheet-bottom{font-size:1.0625rem;line-height:1.3;padding-top:6px;letter-spacing:.2px;gap:4px 8px;flex-wrap:wrap;color:#454432;border-top:0}
.desk-scene #source-indicator{margin-top:auto;justify-content:flex-end;text-align:right}
.play-message:empty{display:none}
/* A slim brass seek track retains the native range input and keyboard controls. */
#seek{--seek-progress:0%;appearance:none;-webkit-appearance:none;background:transparent;padding:0;border:0}
#seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--gold) 0 var(--seek-progress),#514936 var(--seek-progress) 100%)}
#seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border:1px solid #e5c88d;border-radius:50%;background:#c6a66a;box-shadow:0 1px 3px #0005}
#seek::-moz-range-track{height:3px;border:0;border-radius:2px;background:#514936}
#seek::-moz-range-progress{height:3px;border-radius:2px;background:var(--gold)}
#seek::-moz-range-thumb{box-sizing:border-box;width:11px;height:11px;border:1px solid #e5c88d;border-radius:50%;background:#c6a66a;box-shadow:0 1px 3px #0005}
#seek:disabled{opacity:.6;cursor:default}
.transport{--transport-gap:clamp(2px,1vw,14px);gap:var(--transport-gap)}
.transport>.icon-button,.transport>.skip-button{flex:0 0 44px}
.next-control{position:relative;flex:0 0 44px;height:44px}
.next-control>.icon-button{width:44px}
/* The gear does not participate in the five-button row's width or centering. */
.next-control .settings-wrap{position:absolute;left:calc(100% + var(--transport-gap));top:50%;transform:translateY(-50%)}
.player-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.player-footer:has(#version-picker[hidden]){display:none}
.player-footer .episode-actions{flex:1;min-width:0;justify-content:flex-start;gap:4px 12px;margin:0;padding:0;border:0}
.mobile-settings-slot,.more-cases{display:none}
.brand{flex-shrink:0}
.brand-wordmark{display:block;width:3.65em;height:.9em;fill:currentColor}
.header-player-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header-player-download{text-decoration:none}
.header-player-download:hover{color:var(--gold)}
.header-download-label{white-space:nowrap}
.header-player-download svg{display:block;width:21px;height:21px;flex-shrink:0}
.header-player-actions:not(:has(.header-player-download)){display:contents}

@media(min-width:801px){
 .masthead{padding-block:10px}
 .brand{font-size:36px}
 .brand span{margin-top:4px}
 main{--desk-width:clamp(340px,calc((100dvh - 250px) * .8),560px);grid-template-columns:var(--desk-width) minmax(355px,1fr);column-gap:30px;padding-block:12px}
 .listening-room{gap:6px;grid-template-rows:minmax(0,1fr) auto;max-height:calc(var(--desk-width) * 1.25 + 106px)}
 .main-player{padding-top:0}
 .transport{--transport-gap:clamp(2px,.7vw,10px);margin-block:4px}
 .play-button{width:50px;height:50px;flex-shrink:0}
 .play-message{margin-block:3px 5px;line-height:1.35}
 .episode-actions{padding-top:2px;gap:4px 12px}
 
 
}
@media(min-width:801px) and (max-height:800px){
 .desk-scene .case-sheet h1{font-size:30px}
 .desk-scene .case-sheet h1.long-title{font-size:20px}
 .desk-scene .case-sheet h1.very-long-title{font-size:17px}
}
@media(min-width:801px) and (max-width:1050px){
 main{--desk-width:340px;grid-template-columns:var(--desk-width) minmax(340px,1fr);column-gap:24px}
}
@media(max-width:800px){
 body{border-top:0}
 .masthead{display:flex;max-width:600px;height:80px;padding:12px 22px;gap:12px}
 .masthead .brand{font-size:36px}
 .masthead .brand span{margin-top:6px}
 .masthead #source-button{display:none}
 .header-player-actions,.header-player-actions:not(:has(.header-player-download)){display:flex;margin-left:auto}
 .header-player-download{min-width:44px;width:44px;height:44px;padding:0;border:0;color:var(--muted)}
 .header-player-download svg{width:24px;height:24px}
 .header-download-label{display:none}
 .mobile-settings-slot{display:flex;align-items:center;margin-left:auto}
 .mobile-settings-slot .settings-wrap{position:relative;transform:none}
 .mobile-settings-slot .settings-gear{width:44px;min-width:44px;height:44px}
 .mobile-settings-slot .settings-gear svg{width:24px;height:24px}
 .mobile-settings-slot .playback-settings{top:calc(100% + 8px);bottom:auto}
 main{padding:0 0 110px;row-gap:0}
 /* The viewport is a minimum, not a height limit: shrinking the desk leaves
    its unshrunk folder painted over the controls on short/narrow screens. */
 .listening-room{display:flex;flex-direction:column;height:auto;min-height:calc(var(--phone-viewport-height,100svh) - var(--phone-header-height,80px));padding-bottom:max(10px,env(safe-area-inset-bottom))}
 .main-player{order:2;flex-shrink:0;padding:8px 22px 0}
 .catalog{padding:20px 22px 0;scroll-margin-top:12px}
 .desk-scene{order:0;border:0;border-radius:0}
 .desk-scene{flex:none;aspect-ratio:4/5;min-height:min-content;padding-bottom:12px}
 .desk-scene .case-sheet{display:flex;flex-direction:column;min-height:min-content}
 .desk-scene .case-sheet h1{font-size:clamp(28px,6vw,38px)}
 .desk-scene .case-sheet h1.long-title{font-size:22px}
 .desk-scene .case-sheet h1.very-long-title{font-size:18px}
 .desk-scene .file-subject-head{align-items:center}
 .transport{justify-content:space-between;gap:0;max-width:420px;margin:14px auto 8px}
 .transport>.icon-button,.transport>.skip-button,.transport>.next-control{flex:0 0 52px;width:52px;min-width:52px;min-height:52px}
 .next-control{height:52px}
 .next-control>.icon-button{width:52px;min-height:52px}
 .transport button svg{width:27px;height:27px}
 .transport .play-button{width:74px;height:74px;flex:0 0 74px}
 .transport .play-button svg{width:33px;height:33px}
 .more-cases{order:3;display:flex;flex:0 0 48px;min-height:48px;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin-top:auto;padding-bottom:4px;color:var(--gold);font:13px/1.3 var(--mono);text-decoration:none}
 .more-cases svg{width:22px;height:22px}
 .more-cases:hover{color:#ead1a0}
}
@media(max-width:800px) and (max-height:740px){
 .desk-scene .case-sheet{margin-bottom:10px}
}
@media(max-width:800px) and (max-height:720px) and (orientation:portrait){
 .masthead{height:64px;padding-block:8px}
 .masthead .brand{font-size:32px}
 .listening-room{min-height:calc(var(--phone-viewport-height,100svh) - var(--phone-header-height,64px))}
 .main-player{padding-top:4px}
 .transport{margin-block:10px 6px}
 .more-cases{flex-basis:44px;min-height:44px}
 .desk-scene{padding-bottom:8px}
}
@media(max-width:800px) and (max-height:640px) and (orientation:portrait){
 .masthead{height:56px;padding-block:5px}
 .masthead .brand{font-size:28px}
 .masthead .brand span{font-size:9px;margin-top:4px}
 .listening-room{min-height:calc(var(--phone-viewport-height,100svh) - var(--phone-header-height,56px))}
 .transport{margin-block:6px 4px}
 .desk-scene .case-sheet{padding-block:8px}
 .desk-scene .case-sheet h1:not(.long-title){font-size:24px;margin-block:4px 6px}
 .desk-scene .case-sheet h1.long-title{font-size:18px}
 .desk-scene .case-sheet h1.very-long-title{font-size:16px}
 .desk-scene .file-subject-head{min-height:20px}
 .desk-scene .file-detail,.desk-scene .file-date{padding-block:4px}
}
/* Let short landscape or enlarged views scroll rather than clip the case. */
@media(max-width:800px) and (max-height:480px),(max-width:800px) and (orientation:landscape){
 .listening-room{height:auto;min-height:calc(100dvh - 80px)}
 .desk-scene .case-sheet{min-height:min-content}
 .more-cases{margin-top:8px}
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference){
 html{scroll-behavior:smooth}
}
/* Short windows and enlarged text use the existing accessible reflow. */
@media(min-width:801px) and (max-height:700px){
 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;max-height:none}
 .desk-scene{aspect-ratio:4/5;min-height:440px}
 .desk-scene .case-sheet{min-height:min-content}
 .catalog-scroll{max-height:65dvh}
}
@media(max-width:420px){
 .masthead{padding-inline:16px}
 .main-player{padding-inline:16px}
 .catalog{padding-inline:16px}
}
@media(max-width:360px){
 .transport{--transport-gap:2px}
 .next-control .settings-gear{min-width:36px;width:36px;padding-inline:0}
 .desk-scene{padding-right:16%}
 .desk-scene .case-sheet{padding-inline:10px;transform:rotate(-1deg) scale(.82)}
 .desk-scene .case-sheet h1{font-size:28px}
}
@media(max-width:340px){
 .transport>.icon-button,.transport>.skip-button,.transport>.next-control{flex-basis:48px;width:48px;min-width:48px;min-height:48px}
 .next-control,.next-control>.icon-button{width:48px;min-height:48px;height:48px}
 .transport .play-button{width:68px;height:68px;flex-basis:68px}
}

/* Source choices remain inside the collection dialog. */
/* Native modal focus protection also needs scroll locks for the page and case list. */
html:has(dialog[open]),body:has(dialog[open]){overflow:hidden;overscroll-behavior:none}
body:has(dialog[open]) .catalog-scroll{overflow:hidden}
body:has(dialog[open])> :not(dialog[open]){pointer-events:none}
#source-dialog{--settings-top:clamp(16px,6dvh,56px);position:fixed;inset:var(--settings-top) 0 auto;margin:0 auto;max-height:calc(100dvh - var(--settings-top) - 16px);overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;scrollbar-gutter:stable}
dialog::backdrop{touch-action:none;overscroll-behavior:none}
.settings-detail-content{display:flow-root}
#source-dialog .license-entry h3{font-size:16px;line-height:1.4;margin:18px 0 6px}
#source-dialog .license-entry p{margin:0 0 10px}
#source-dialog .license-notice{margin-top:8px;padding-top:0;border-top:0}
.license-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.5;color:var(--muted)}
.source-actions{display:grid;grid-template-columns:1fr;gap:10px}
.source-actions>button{width:100%;min-height:48px;margin:0;font-size:14px}
.source-errors{font-size:14px;color:#e7b691;overflow-wrap:anywhere}
.source-errors:empty{display:none}
#source-summary{font-size:14px;line-height:1.5}
#source-dialog details p{font-size:14px;line-height:1.6}
#source-dialog a{color:var(--gold);text-underline-offset:3px}
.local-player-download{margin-top:20px}
#source-dialog .local-player-link{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 16px;background:transparent;color:var(--gold);border:1px solid #897449;border-radius:3px;font-size:16px;font-weight:600;line-height:1.3;text-decoration:none;text-align:center}
#source-dialog .local-player-link:hover{background:#ffffff0a}
.local-player-link svg{display:block;flex-shrink:0;width:22px;height:22px}
#source-dialog .local-player-download p{margin:12px 0 0;font-size:14px;line-height:1.5}
.local-player-status{display:block;font-size:18px;color:var(--gold)}
#source-dialog .backup-actions{margin-top:14px;gap:10px}
#source-dialog .backup-actions>button{flex:1 1 180px;min-height:46px}

/* The active case shows its actual playback state without rebuilding the list. */
.episode-row.active{background:#303329;border-left:3px solid var(--gold);padding-left:7px;box-shadow:inset 0 0 0 1px #d6b67520}
.episode-row.active .episode-title{color:var(--gold)}
.row-playback{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:4px 8px;border:1px solid #d6b67566;border-radius:3px;background:#d6b67512;color:var(--gold);font:700 11px/1 var(--mono);letter-spacing:.08em}
/* Center the capitals themselves: this typewriter font reserves extra space below them. */
.row-playback-text{display:flex;align-items:center;min-height:12px;transform:translateY(.18em)}
.row-playback-text>span,.row-equalizer{display:none}
#episode-list[data-playback="playing"] [data-state="playing"],
#episode-list[data-playback="paused"] [data-state="paused"],
#episode-list[data-playback="loading"] [data-state="loading"],
#episode-list[data-playback="finished"] [data-state="finished"],
#episode-list[data-playback="selected"] [data-state="selected"]{display:inline}
#episode-list[data-playback="playing"] .row-playback{background:#d6b67526;border-color:var(--gold)}
#episode-list[data-playback="playing"] .row-equalizer{display:flex;align-items:flex-end;gap:2px;height:12px}
.row-equalizer i{width:3px;height:12px;background:currentColor;transform-origin:bottom;animation:case-equalizer .8s ease-in-out infinite alternate}
.row-equalizer i:nth-child(2){animation-duration:.6s;animation-delay:-.35s}
.row-equalizer i:nth-child(3){animation-duration:.95s;animation-delay:-.6s}
@keyframes case-equalizer{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){
 .row-equalizer i{animation:none;transform:scaleY(.55)}
 .row-equalizer i:nth-child(2){transform:scaleY(1)}
 .row-equalizer i:nth-child(3){transform:scaleY(.75)}
}

/* Keep the unclosed control visible on both active and ordinary case rows. */
.row-complete{color:#8b967f}
#source-dialog .settings-feedback{color:var(--gold);font-size:14px;line-height:1.5;margin:12px 0}

/* Explain the local download before offering the actual HTML file. */
#source-dialog button.local-player-link{width:100%}
#download-dialog{width:min(460px,calc(100% - 26px));overflow-y:auto;overscroll-behavior:contain}
#download-dialog h2{font-size:clamp(28px,6vw,36px);line-height:1.2}
#download-dialog p{font-size:16px}
#download-dialog .gold-button{margin-top:22px;min-height:48px;text-decoration:none}
#download-dialog .gold-button svg{width:22px;height:22px;flex-shrink:0}