/* The full TV directory uses the same small system windows as the music library. */
.tv-toolbar #tv-library-toggle{display:flex;align-items:center;justify-content:space-between;gap:5px;flex:1;min-width:0;width:auto;aspect-ratio:auto;padding:0 5px;border:0;background:#000;color:var(--paper);font:10px/1 var(--mono);letter-spacing:-1px;text-align:left}
.tv-toolbar #tv-library-toggle:hover{background:#303030}
.tv-toolbar #tv-library-toggle:focus-visible{outline:1px dotted #fff;outline-offset:-2px}
.tv-toolbar #tv-library-toggle span{padding:0}
.tv-toolbar #tv-filename{display:block;min-width:0;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tv-toolbar #tv-library-toggle>span:last-child{flex:none;font:10px/1 Arial}
.tv-toolbar #tv-position{flex:none;white-space:nowrap;padding:0 5px;color:#c7c7c0;font:9px/1 var(--mono);letter-spacing:-1px}
.tv-playback-status{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;max-width:85%;padding:15px 18px;border:1px solid #000;border-radius:4px;box-shadow:2px 2px #0005;background:var(--paper);color:#000;font:16px/1.25 var(--ui);text-align:center}
.tv-playback-status[hidden],.tv-playback-status button[hidden]{display:none!important}
.tv-playback-status .retro-button{padding:6px 12px;font:16px/1 var(--dock-font)}
.tv-library-window{width:460px;height:585px;left:7%;top:7%;min-width:280px}
.tv-library-window .tv-library-content{display:flex;flex-direction:column;min-height:0;padding:16px 15px 12px;overflow:hidden;background:#fff}
.tv-library-intro{flex:none}
.tv-library-kicker{font:10px/1.3 var(--mono);letter-spacing:-.5px}
.tv-library-intro h3{margin:8px 0 6px;font:34px/1 var(--serif);font-weight:400;letter-spacing:-1px}
.tv-library-intro p{margin:0;font:14px/1.3 var(--ui)}
.tv-library-tools{display:flex;align-items:center;gap:7px;flex:none;margin-top:15px}
.tv-library-tools input{display:block;flex:1;min-width:0;height:29px;padding:5px 8px;border:1px solid #000;border-radius:2px;box-shadow:inset 1px 1px #0003;background:#fff;color:#000;font:16px/1 var(--ui)}
.tv-library-tools .retro-button{flex:none;min-height:29px;padding:5px 8px;background:var(--mint);font:16px/1 var(--dock-font)}
.tv-results-count{flex:none;margin:9px 0 7px;font:10px/1.2 var(--mono);letter-spacing:-.5px;color:#555}
.tv-program-list{flex:1;min-height:0;overflow:auto;border:1px solid #000;border-radius:2px;scrollbar-width:thin;scrollbar-color:var(--tertiary) #f5f4ed;overscroll-behavior:contain}
.tv-program{display:flex;align-items:center;gap:9px;width:100%;min-height:31px;padding:7px 9px;border:0;border-bottom:1px dotted #ccc;border-radius:0;background:#fff;color:#000;text-align:left}
.tv-program:last-child{border-bottom:0}
.tv-program:hover{background:#f3eee6}
.tv-program[aria-pressed=true]{background:#000;color:var(--paper)}
.tv-program:focus-visible{outline:1px dotted currentColor;outline-offset:-3px}
.tv-program-number{flex:none;width:24px;font:10px/1 var(--mono);letter-spacing:-1px;opacity:.6}
.tv-program-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:14px/1.1 var(--ui)}
.tv-program-play{flex:none;font:10px/1 Arial;opacity:.55}
.tv-library-empty{padding:20px 10px;text-align:center;font:16px/1.3 var(--ui)}
.tv-library-window .window-status>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tv-library-window .window-status>span:last-child{font:9px/1 var(--mono);letter-spacing:-1px}
.mixtape-catalog-summary{display:flex;justify-content:space-between;align-items:center;gap:8px;flex:none;margin:0 0 5px;padding:4px 3px 2px;color:#000;font:12px/1 var(--ui)}
.mixtape-catalog-summary>span:last-child{font:8px/1 var(--mono);letter-spacing:-1px}
.mixtape-loading{grid-column:1/-1;padding:20px 10px;font:16px/1.3 var(--ui)}
@media(max-width:700px){
 .tv-library-window{min-width:0;height:590px}
 .tv-library-window .tv-library-content{padding:15px 12px 11px}
 .tv-library-intro h3{font-size:31px}
 .tv-library-tools{gap:6px}
 .tv-library-tools .retro-button{font-size:15px;padding-left:7px;padding-right:7px}
 .tv-program{min-height:35px;padding:8px 7px;gap:7px}
 .tv-program-name{font-size:14px}
 .tv-toolbar .tv-resolution{font-size:8px}
 .tv-toolbar #tv-position{padding:0 4px;font-size:8px}
 .mixtape-catalog-summary{font-size:11px}
 .mixtape-catalog-summary>span:last-child{font-size:7px}
}
