/* NitrOS visual polish, passes 1 and 2. Presentation only; existing artwork/layout rules remain intact. */
@font-face{font-family:Barlow;src:url('/fonts/Barlow-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('/fonts/Barlow-Medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url('/fonts/Barlow-SemiBold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url('/fonts/Barlow-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Barlow;src:url('/fonts/Barlow-ExtraBold.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:Barlow;src:url('/fonts/Barlow-Black.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/BarlowCondensed-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/BarlowCondensed-Medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/BarlowCondensed-SemiBold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/BarlowCondensed-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/BarlowCondensed-ExtraBold.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/BarlowCondensed-Black.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap}

:root{--nitros-body:Barlow,system-ui,sans-serif;--nitros-display:'Barlow Condensed',Barlow,system-ui,sans-serif;--nitros-control-radius:6px;--nitros-selected:var(--aqua);--nitros-hover:var(--aqua2);--nitros-green:#43dfc0;font-family:var(--nitros-body)}
body,input,textarea{font-family:var(--nitros-body)}
h1,h2,h3,button,select,.nav,.search-link,.brand-name,.eyebrow,.type-pill,.hub-tabs,.hub-filters,.showcase-heading,.admin-section-actions{font-family:var(--nitros-display)}
.button,.chip,.ctrl-btn,.chip-select,.chip-select select,.hub-tabs a,.hub-filters a,.book-secondary-seek button,.account-menu button,.dock-menu .dock-menu-action{font-family:var(--nitros-display)}
.brand-mark{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
.card h3,.card strong,.continue-rail-card strong,.listening-card strong,.book-peek h3,.track-item strong,.episode-card strong,.episode-card h3,.fallback-cover strong,.player-title strong,.mini-copy strong{font-family:var(--nitros-body)}

/* Generic selectors and action surfaces use modest rectangles. */
.button,.chip,.hub-tabs a,.hub-filters a,.chip-select,.book-secondary-seek button,.audiobook-player .book-secondary-seek .ctrl-btn{border-radius:var(--nitros-control-radius)}
.account-menu,.dock-menu{border-radius:var(--nitros-control-radius)}
.button.primary:hover:not(:disabled),.ctrl-btn.primary:hover:not(:disabled){background:var(--nitros-hover)}
.button.secondary:hover:not(:disabled),.chip:not(.active):hover:not(:disabled),.hub-tabs a:not(.active):hover,.hub-filters a:not(.active):hover{background:#43dfc014;border-color:#43dfc066;color:var(--ink)}
.chip.active,.hub-tabs a.active,.hub-filters a.active{background:var(--nitros-selected);border-color:transparent;color:#03100e}
.chip.active:hover:not(:disabled),.hub-tabs a.active:hover,.hub-filters a.active:hover{background:var(--nitros-hover);color:#03100e}
.nav a.active,.search-link.active,.admin-topnav a.active{color:var(--nitros-selected)}
.nav a:hover,.search-link:hover,.admin-topnav a:hover{color:var(--nitros-green)}
.button:disabled,.chip:disabled,.ctrl-btn:disabled{opacity:.45;cursor:default}
.button.primary:disabled:hover,.ctrl-btn.primary:disabled:hover{background:var(--nitros-selected)}
button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--nitros-selected);outline-offset:3px}
.ctrl-btn.select-wrap:focus-within,.avatar-choice:focus-within{outline:3px solid var(--nitros-selected);outline-offset:3px}

/* Equal-width segment slots keep neighbours stable while the selected segment gains height. */
.season-browser>.season-tabs{gap:0;align-items:center;min-height:70px;padding:.4rem;max-width:100%;min-width:0;border:1px solid var(--line);border-radius:var(--nitros-control-radius);background:#ffffff06;overflow-x:auto;scroll-padding-inline:.4rem;overscroll-behavior-inline:contain}
.season-browser>.season-tabs>.chip{flex:0 0 7rem;width:7rem;height:42px;min-height:42px;margin:0;padding:.55rem .8rem;border:0;border-inline-end:1px solid var(--line);border-radius:0;background:transparent;color:var(--muted);font-size:1rem;white-space:nowrap}
.season-browser>.season-tabs>.chip:first-of-type{border-start-start-radius:4px;border-end-start-radius:4px}
.season-browser>.season-tabs>.chip:last-of-type{border-inline-end:0;border-start-end-radius:4px;border-end-end-radius:4px}
.season-browser>.season-tabs>.chip.active{height:54px;min-height:54px;border-radius:4px;background:var(--nitros-selected);color:#03100e;font-size:1.1rem;font-weight:800;box-shadow:inset 0 -3px 0 var(--nitros-green)}
.season-browser>.season-tabs>.chip:not(.active):hover{background:#43dfc014;color:var(--ink)}
.season-browser>.season-tabs>.chip.active:hover{background:var(--nitros-hover)}
.season-browser>.season-tabs>.chip:focus-visible{outline-offset:2px}
.season-tabs-loading{flex:0 0 auto;padding:0 .8rem}

/* A media clearlogo occupies only the existing Home heading rectangle, without resizing the hero. */
.home-hero-title{position:relative;min-height:80px}
.home-title-sizer{visibility:hidden}
.home-hero-title>[data-home-title-logo]{position:absolute;inset:0;width:100%;height:100%;max-height:80px;object-fit:contain;object-position:left center}

/* Pass 2: action geometry only; preserve control sizes, icons and interaction states. */
.ctrl-btn,.detail-back,.detail-close,.photo-nav,.track-play,.rail-controls button,.showcase-nav button,.search-field button,.torrent-panel-close,.album-detail .album-play,.listening-card .listening-play,.channel-info .actions .button.icon-only,.audiobook-player .book-utility-action,.account-menu button,.dock-menu .dock-menu-action{border-radius:var(--nitros-control-radius)}

/* Existing audiobook artwork is the single keyboard/remote expansion target. */
.book-mini [data-book-mini-expand]:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;}

/* Pass 3: button depth and surface shading. Light comes from above: a raised control carries a soft
   top-edge highlight, a darker lower edge and a short exterior shadow; pressing inverts the lighting
   instead of moving anything. Only shadows, background-image and transforms change, so no state
   affects layout. Existing colours, radii and the global focus outline are unchanged. */
:root{
 --depth-sheen:linear-gradient(180deg,rgb(255 255 255/.16),rgb(255 255 255/.04) 48%,rgb(0 0 0/.08));
 --depth-sheen-lit:linear-gradient(180deg,rgb(255 255 255/.22),rgb(255 255 255/.06) 48%,rgb(0 0 0/.06));
 --depth-sheen-pressed:linear-gradient(180deg,rgb(0 0 0/.12),rgb(0 0 0/0) 55%,rgb(255 255 255/.06));
 --depth-raised:inset 0 1px 0 rgb(255 255 255/.32),inset 0 -2px 0 rgb(0 0 0/.18),0 1px 2px rgb(0 0 0/.4),0 4px 12px rgb(0 0 0/.28);
 --depth-raised-lit:inset 0 1px 0 rgb(255 255 255/.4),inset 0 -2px 0 rgb(0 0 0/.18),0 2px 4px rgb(0 0 0/.4),0 8px 20px rgb(0 0 0/.32);
 --depth-pressed:inset 0 2px 4px rgb(0 0 0/.35),inset 0 -1px 0 rgb(255 255 255/.1),0 1px 1px rgb(0 0 0/.3);
 --glass-sheen:linear-gradient(180deg,rgb(255 255 255/.08),rgb(255 255 255/0) 60%);
 --glass-sheen-lit:linear-gradient(180deg,rgb(255 255 255/.13),rgb(255 255 255/.02) 60%);
 --glass-raised:inset 0 1px 0 rgb(255 255 255/.12),inset 0 -1px 0 rgb(0 0 0/.25),0 2px 8px rgb(0 0 0/.3);
 --glass-raised-lit:inset 0 1px 0 rgb(255 255 255/.18),inset 0 -1px 0 rgb(0 0 0/.25),0 4px 14px rgb(0 0 0/.36);
 --glass-pressed:inset 0 2px 5px rgb(0 0 0/.4),0 1px 1px rgb(0 0 0/.25);
 --surface-light:linear-gradient(180deg,rgb(255 255 255/.045),rgb(255 255 255/0) 42%);
 --surface-edge:inset 0 1px 0 rgb(255 255 255/.07);
 --depth-ease:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .12s,opacity .2s;
}

/* Primary actions (solid accent): raised. */
.button.primary,.ctrl-btn.primary,.track-play{background-image:var(--depth-sheen);box-shadow:var(--depth-raised)}
/* Secondary and navigation controls (translucent glass): a lighter version of the same lighting. */
.button.secondary,.ctrl-btn:not(.primary),.detail-back,.rail-controls button,.showcase-nav button,.photo-nav{background-image:var(--glass-sheen);box-shadow:var(--glass-raised)}
.button.primary,.button.secondary,.ctrl-btn,.track-play,.detail-back,.rail-controls button,.showcase-nav button,.photo-nav{transition:var(--depth-ease);-webkit-tap-highlight-color:transparent}
/* Selectors (chips, tabs) stay flat: only a faint top edge, with the selected one slightly raised. */
.chip,.hub-tabs a,.hub-filters a{box-shadow:inset 0 1px 0 rgb(255 255 255/.06)}
.chip.active,.hub-tabs a.active,.hub-filters a.active{background-image:var(--depth-sheen);box-shadow:inset 0 1px 0 rgb(255 255 255/.3),inset 0 -1px 0 rgb(0 0 0/.15),0 2px 6px rgb(0 0 0/.3)}
/* A playing track/episode keeps its selection ring on top of the raised lighting. */
.track-item.now-playing .track-play,.episode-card.now-playing .episode-play{box-shadow:0 0 0 3px #43dfc033,var(--depth-raised)}

/* Existing hover/selected rules set the `background` shorthand, which would drop the lighting (and leave
   a tapped button flat under a touch device's sticky :hover); the base lighting is restored there. */
.button.primary:hover:not(:disabled),.ctrl-btn.primary:hover:not(:disabled),.track-item.now-playing .track-play,.track-item:hover .track-play,.chip.active:hover:not(:disabled),.hub-tabs a.active:hover,.hub-filters a.active:hover{background-image:var(--depth-sheen)}
.button.secondary:hover:not(:disabled),.ctrl-btn:not(.primary):hover:not(:disabled),.rail-controls button:hover:not(:disabled),.showcase-nav button:hover{background-image:var(--glass-sheen)}
/* The segmented season selector already has its own lighting; its unselected segments stay flat. */
.season-browser>.season-tabs>.chip:not(.active){box-shadow:none}

/* Hover (pointer devices only) and keyboard/remote focus: more light, a slightly longer shadow. Focus
   adds no movement, so a D-pad-focused control never shifts or clips; the global outline still marks it. */
@media (hover:hover){
 .button.primary:hover:not(:disabled),.ctrl-btn.primary:hover:not(:disabled),.track-play:hover{background-image:var(--depth-sheen-lit);box-shadow:var(--depth-raised-lit)}
 .button.primary:hover:not(:disabled){transform:translateY(-1px)}
 .button.secondary:hover:not(:disabled),.ctrl-btn:not(.primary):hover:not(:disabled),.detail-back:hover,.rail-controls button:hover:not(:disabled),.showcase-nav button:hover,.photo-nav:hover{background-image:var(--glass-sheen-lit);box-shadow:var(--glass-raised-lit)}
}
.button.primary:focus-visible,.ctrl-btn.primary:focus-visible,.track-play:focus-visible{background-image:var(--depth-sheen-lit);box-shadow:var(--depth-raised-lit)}
.button.secondary:focus-visible,.ctrl-btn:not(.primary):focus-visible,.detail-back:focus-visible,.rail-controls button:focus-visible,.showcase-nav button:focus-visible,.photo-nav:focus-visible{background-image:var(--glass-sheen-lit);box-shadow:var(--glass-raised-lit)}

/* Press (mouse, touch, Enter/Space): the lighting inverts and the control settles 1px. */
.button.primary:active:not(:disabled),.ctrl-btn.primary:active:not(:disabled),.track-play:active{background-image:var(--depth-sheen-pressed);box-shadow:var(--depth-pressed)}
.button.secondary:active:not(:disabled),.ctrl-btn:not(.primary):active:not(:disabled),.detail-back:active,.rail-controls button:active:not(:disabled),.showcase-nav button:active,.photo-nav:active{background-image:none;box-shadow:var(--glass-pressed)}
.button.primary:active:not(:disabled),.button.secondary:active:not(:disabled){transform:translateY(1px)}
.chip:active:not(:disabled),.hub-tabs a:active,.hub-filters a:active{box-shadow:inset 0 2px 4px rgb(0 0 0/.3)}

/* Disabled controls are flat, so they never read as pressable. */
.button:disabled,.ctrl-btn:disabled,.rail-controls button:disabled,.chip:disabled{background-image:none;box-shadow:none;transform:none}

/* Surfaces: a restrained top light and edge on menus, floating players and overlay panels. Media
   artwork, heroes and detail backdrops are deliberately left as they are. */
.account-menu,.dock-menu,.book-tool-card,.admin-modal,.af-toast{background-image:var(--surface-light);box-shadow:var(--surface-edge),var(--shadow)}
.music-mini,.book-mini{background-image:var(--surface-light);box-shadow:inset 0 1px 0 rgb(255 255 255/.08),0 20px 60px #000a}
/* Interactive information cards: same top light; lifting them (already a transform) gains a matching shadow. */
.listening-card,.live-card,.library-tile{background-image:var(--surface-light);box-shadow:var(--surface-edge);transition:background-color .2s,border-color .2s,box-shadow .2s,transform .22s}
.listening-card:focus-visible,.live-card:focus-visible,.library-tile:focus-visible{box-shadow:inset 0 1px 0 rgb(255 255 255/.1),0 10px 26px rgb(0 0 0/.35)}
@media (hover:hover){.listening-card:hover,.live-card:hover,.library-tile:hover{box-shadow:inset 0 1px 0 rgb(255 255 255/.1),0 10px 26px rgb(0 0 0/.35)}}
.listening-card:active,.live-card:active,.library-tile:active{box-shadow:inset 0 2px 6px rgb(0 0 0/.3)}
/* Phone bottom navigation: a top edge lit from above and a shadow cast upward over the content. */
@media(max-width:760px){.nav{background-image:var(--surface-light);box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 -10px 30px rgb(0 0 0/.35)}}

@media (prefers-reduced-motion:reduce){
 .button,.ctrl-btn,.track-play,.detail-back,.rail-controls button,.showcase-nav button,.photo-nav,.chip,.listening-card,.live-card,.library-tile{transition:none}
 .button.primary:hover:not(:disabled),.button.primary:active:not(:disabled),.button.secondary:active:not(:disabled){transform:none}
}

/* Pass 4: focus and touch correctness. */

/* Horizontal rails scroll on x, which also clips them on y. Room is added inside the row for the 6px
   lift, poster scale and a 3px ring at 3px offset, and taken back with an equal negative margin so no
   section moves. scroll-padding keeps a D-pad/keyboard-focused card clear of the clipped edges. The
   phone rails keep their own trailing peek padding (16vw), so the right edge is only widened above 760px. */
.media-row{padding-top:1rem;margin-top:-.75rem;padding-left:.75rem;margin-left:-.75rem;scroll-padding-inline:1rem}
@media(min-width:761px){.media-row{padding-right:.75rem;margin-right:-.75rem}}

/* Focus follows the artwork: the ring sits on the poster (as Now Playing already does) instead of the
   card box the poster lifts out of. Continue, listening, live and library cards are themselves the
   moving surface (listening cards have no poster), so their ring already travels with them. */
.card:not(.listening-card):focus-visible{outline:none}
.card:focus-visible .poster{outline:3px solid var(--nitros-selected);outline-offset:3px}
/* A focused shelf cover scales 1.35x; the ring is drawn at 3px/1.35 so it renders at the standard 3px. */
.book-shelf-card:focus-visible{outline:none}
.book-shelf-card:focus-visible .book-cover{outline:calc(3px / 1.35) solid var(--nitros-selected);outline-offset:calc(3px / 1.35)}

/* Touch screens: a tap leaves :hover (and, after a tap, plain :focus) behind, so the lift/enlarge states
   are undone there unless the card has keyboard/remote focus. Focus styling is never affected. */
@media (hover:none){
 .card:hover:not(:focus-visible) .poster{transform:none;box-shadow:0 8px 30px #0008}
 .continue-rail-card:hover:not(:focus-visible){transform:none;box-shadow:0 8px 30px #0008}
 .listening-card:hover:not(:focus-visible),.live-card:hover:not(:focus-visible),.library-tile:hover:not(:focus-visible){background-color:#ffffff08;border-color:var(--line);transform:none;box-shadow:var(--surface-edge)}
 .book-shelf-card:not(:focus-visible):not(:has(:focus-visible)){z-index:auto}
 .book-shelf-card:not(:focus-visible):not(:has(:focus-visible)) .book-cover{transform:none;box-shadow:0 10px 26px #0007}
 .book-shelf-card:not(:focus-visible):not(:has(:focus-visible)) .book-peek{opacity:0;transform:translateY(4px);pointer-events:none}
 .track-item:hover:not(.now-playing):not(:focus-visible){background:transparent}
}

/* Episode and track rows: one restrained language. Hover (mouse only) and focus lighten the row; the
   focus ring is drawn inside the row so list containers never clip it; a press settles into shadow. */
@media (hover:hover){.episode-card:hover,.track-item:hover:not(.now-playing){background-color:#ffffff08}}
.episode-card:focus-visible,.track-item:focus-visible{outline-offset:-3px;background-color:#ffffff0d}
.episode-card:active,.track-item:active{background-color:#ffffff05;box-shadow:inset 0 2px 6px rgb(0 0 0/.3)}
.episode-card,.track-item{transition:background-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}

/* Poster hairline: a faint inner edge separating dark artwork from the dark background. It follows the
   poster's corners, sits above the image and never takes input. */
.poster::after,.book-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(255 255 255/.07);pointer-events:none}

/* Home hero clearlogo: the same shadow as the detail-page title logos (.title-logo img). */
.home-hero-title>[data-home-title-logo]{filter:drop-shadow(0 6px 28px rgba(0,0,0,.6))}

/* Pass 5: artwork reveal. An artwork image stays transparent over its existing placeholder until it has
   loaded, then fades in over 160ms; artwork that is already decoded when inserted (art-instant) appears at
   once without a fade. Only opacity changes, so nothing reflows. Scoped to html.art-lifecycle, which the
   image lifecycle in app.js sets, so artwork can never be hidden without the code that reveals it. A
   failed image with no richer fallback is hidden, leaving its placeholder instead of a broken-image icon. */
html.art-lifecycle img.art-reveal{opacity:0;transition:opacity .16s ease-out}
html.art-lifecycle img.art-reveal.art-ready{opacity:1}
html.art-lifecycle img.art-reveal.art-instant{transition:none}
img.art-reveal.art-failed{visibility:hidden}
@media (prefers-reduced-motion:reduce){html.art-lifecycle img.art-reveal{transition:none}}
/* Build 273: a Download button for content already requested becomes the request's status -- the same
   hard-stop horizontal fill as the playing music row (--track-progress), driven by --download-progress
   from the request's real progress. Disabled (non-interactive) but kept fully legible. */
.button.download-status,.button.download-status:disabled,.button.download-status:disabled:hover{opacity:1;cursor:default;background-image:none;box-shadow:none;color:#0b0f0e;border-color:transparent;background:linear-gradient(90deg,var(--aqua) var(--download-progress,0%),#7d7638 var(--download-progress,0%));font-variant-numeric:tabular-nums;transform:none}