/* Modern view: same page, same divs, another order. The inside of each div stays what it is
   in Classic: a change to a div's look belongs in its own partial, never here.
   Loaded through <link media> in pages/home: under the threshold the browser does not apply
   it, so phones stay Classic and the button stays hidden. No :has, clamp() or min() here,
   because the LG TV runs Chromium 68. */
@supports (display: contents) and (display: grid) {

/* The button and the one-time message exist only where this file applies. */
html[data-wide-ready] .wide-toggle-wrap,
html[data-wide-ready] .wide-toggle { display: flex !important; }
.wide-toggle[aria-pressed="true"] { color: var(--color-neon-cyan) !important; border-color: var(--color-neon-cyan) !important; }
/* The one-time question: a bubble hanging from the switch, its arrow on the switch's centre. */
html[data-wide-ask][data-wide-ready] .wide-ask { display: block !important; }
.wide-ask { --waskbg: #151a24; --waskline: #2a2f3a; position: absolute; top: calc(100% + 14px); right: -12px; z-index: 2; width: 320px; padding: 16px; border-radius: 14px; border: 1px solid var(--waskline); background: var(--waskbg); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); text-align: left; font-family: var(--font-heading); }
.wide-ask::before { content: ""; position: absolute; top: -8px; right: 21px; width: 14px; height: 14px; border: solid var(--waskline); border-width: 1px 0 0 1px; background: var(--waskbg); transform: rotate(45deg); }
html[data-theme="light"] .wide-ask { --waskbg: #fff; --waskline: #d9dbe2; color: #14161c; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
@media (prefers-color-scheme: light) {
  html[data-theme="system"] .wide-ask { --waskbg: #fff; --waskline: #d9dbe2; color: #14161c; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
}
.wide-ask-title { margin: 0; padding-right: 28px; font-size: 16px; font-weight: 600; }
.wide-ask-text { margin: 6px 0 0; font-size: 13px; line-height: 1.45; opacity: .75; }
.wide-ask-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit; opacity: .55; font-size: 14px; cursor: pointer; }
.wide-ask-actions { display: flex; gap: 8px; margin-top: 14px; }
.wide-ask-actions button { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--waskline); background: transparent; color: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.wide-ask-actions button[data-view="modern"] { background: #002FA7; border-color: #002FA7; color: #fff; }

/* Zen lives next to the theme button here. */
html[data-wide] [data-player-target="zenBtn"] { display: none !important; }
html[data-wide][data-zen-ready="1"] .wide-zen { display: flex !important; flex-direction: column; padding: 0 6px; font-size: 12px; font-weight: 600; line-height: 1.1; }

/* ── The frame: three columns on the first screen, Donate and the footer under it, in the centre column ── */
html[data-wide] { --wl: 26vw; --wr: 24vw; --wtop: 60px; --wctl: 297px; --wdock: 48px; --wvh: 100vh; --wlistrest: 230px; --wline: rgba(255, 255, 255, .15); --wquiet: rgba(255, 255, 255, .1); --wdockbg: #161616; --sidebar-w: var(--wr); --wbandpage: #000; --wbandbg: #1a150d; --wbandline: #6b5530; --wbandtext: #e8dcc6; --wbandarrow: #f59e0b; --wbandbtn: #241d12; --wbandmuted: #a8977a; --wact: rgba(0, 240, 255, .08); }
html[data-wide][data-theme="light"] { --wline: rgba(0, 0, 0, .15); --wquiet: rgba(0, 0, 0, .06); --wdockbg: #E8ECF2; --wbandpage: #fff; --wbandbg: #fdf6e9; --wbandline: #d9b46a; --wbandtext: #4a3410; --wbandarrow: #b45309; --wbandbtn: #fff; --wbandmuted: #8a6a33; --wact: rgba(0, 122, 138, .08); }
/* One family and a short scale on the whole page: 12, .75rem, .875rem, 1rem and the headings. */
html[data-wide] body { font-family: var(--font-heading); }
html[data-wide] .font-mono { font-family: inherit; }
html[data-wide] .text-\[9px\],
html[data-wide] .text-\[10px\],
html[data-wide] .text-\[11px\] { font-size: 12px; }
html[data-wide] #mixtuby-navbar { top: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
html[data-wide] #mixtuby-navbar > :first-child { max-width: none !important; padding: 0 !important; }
/* The three columns run from the navbar to the bottom of the screen, split by hairlines and nothing else. */
html[data-wide] #mixtuby-navbar .glass { height: var(--wtop); border-width: 0 0 1px !important; border-color: var(--wline) !important; border-radius: 0 !important; }
html[data-wide] .content-col { display: grid; width: 100%; max-width: none !important; grid-template-columns: var(--wl) minmax(0, 1fr) var(--wr); grid-template-rows: calc(var(--wvh) - var(--wtop)) auto; column-gap: 0; padding: var(--wtop) 0 0 !important; }
html[data-wide] .content-col > *,
html[data-wide] [data-youtube-links-target="mainContent"] > * { margin-top: 0 !important; }
html[data-wide] [data-youtube-links-target="mainContent"] { display: contents; }
html[data-wide] [data-youtube-links-target="mainContent"] > footer { grid-column: 2; grid-row: 2; min-width: 0; margin-top: 72px !important; border: 0 !important; }
html[data-wide] .wide-ask,
html[data-wide] .snap-nav-buttons,
html[data-wide] #mood-onboard-hint,
html[data-wide] [data-input-tabs-target="quickTab"] ~ .resize-grip { display: none !important; }
/* The hero keeps working (the bar presses its buttons) but takes no room. */
html[data-wide] header.app-hero { grid-column: 1; grid-row: 1; height: 0; min-height: 0 !important; min-width: 0; margin: 0 !important; padding: 0 !important; overflow: hidden; visibility: hidden; }

/* Black, no sky: starfield_controller pauses too, and Zen takes data-wide off to bring it back. */
html[data-wide] #starfield-container { display: none !important; }
html[data-wide][data-theme="dark"],
html[data-wide][data-theme="dark"] body { background: #000 !important; }
@media (prefers-color-scheme: dark) {
  html[data-wide][data-theme="system"],
  html[data-wide][data-theme="system"] body { background: #000 !important; }
}
@media (prefers-color-scheme: light) {
  html[data-wide][data-theme="system"] { --wline: rgba(0, 0, 0, .15); --wquiet: rgba(0, 0, 0, .06); --wdockbg: #E8ECF2; --wbandpage: #fff; --wbandbg: #fdf6e9; --wbandline: #d9b46a; --wbandtext: #4a3410; --wbandarrow: #b45309; --wbandbtn: #fff; --wbandmuted: #8a6a33; --wact: rgba(0, 122, 138, .08); }
}

/* ── Column 1: the Search + Shelves div, scrolling on its own ── */
html[data-wide] [data-controller~="input-tabs"] { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; min-height: 0; }
/* Three equal tabs with equal icons, and the search field the same distance from both edges. */
html[data-wide] .folder-tab { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
html[data-wide] .folder-tab svg { flex-shrink: 0; width: 20px; height: 20px; }
/* The lens is drawn smaller than the other two and off centre in its 24 box. */
html[data-wide] .folder-tab[data-action*="showLyric"] svg { transform: translate(-1px, -1px) scale(1.2); }
html[data-wide] [data-controller~="input-tabs"] .search-field,
html[data-wide] [data-controller~="input-tabs"] .search-field::placeholder { font-size: 1rem !important; }
/* Three whole cards on every shelf, at any resolution or zoom: the card's width comes from the
   column's, never from a number of pixels. */
html[data-wide] .shelf-rail { column-gap: 8px !important; }
html[data-wide] .shelf-rail > * { flex-basis: calc((100% - 16px) / 3) !important; min-width: 0; }
/* A big screen shows three whole cards and half of the fourth, so the row reads as one that
   scrolls. Below 1800px the column is narrower and the cards would fall under ~90px, so they stay at three. Party's
   occasions and Saved Playlists keep their own. */
@media (min-width: 1800px) {
  html[data-wide] .shelf-rail:not(.party-occasions) > * { flex-basis: calc((100% - 24px) / 3.5) !important; }
}
html[data-wide] .shelf-rail .cover-fill ~ div > p:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; white-space: normal; }
/* The shelves stay open here, so those off screen skip style, layout and paint (.low-perf's rule). */
html[data-wide] [data-shelf-id] { content-visibility: auto; contain-intrinsic-size: auto 360px; }
html[data-wide] .folder-tab { border-color: var(--wline) !important; border-radius: 0 !important; }
/* The search fields take the column's square corners. */
html[data-wide] .curated-search-group,
html[data-wide] [data-controller~="input-tabs"] .search-field { border-radius: 0 !important; }
html[data-wide] .folder-panel { flex: 1; min-height: 0; padding-top: 9px !important; padding-bottom: 64px !important; border-width: 1px 0 0 !important; border-color: var(--wline) !important; border-radius: 0 !important; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; background-clip: padding-box; }
/* The search field sticks to the top of this column, not of the page. */
html[data-wide] .folder-panel .curated-sticky-bar,
html[data-wide] .folder-panel .curated-search-dock { top: 0 !important; transform: none !important; }
/* The Amazon banner rests on the bottom of the column. */
html[data-wide] [data-controller~="affiliate-track-bridge"] > * { grid-column: 1; grid-row: 1; align-self: end; min-width: 0; margin: 0 !important; position: relative; z-index: 21; }
/* It sits on a strip of its own, part of the column rather than a card floating over the shelves
   (user, 7 Nov 2026): the page's colour under it, a hairline above, the column's 18px margins.
   The warm palette, flat, a 3px corner and a visible border; no glint and no pulse, because motion
   beside the clip pulls the eye off it. Text 12px at the least. The strip shows only while there
   is a banner: closing it empties the container. */
html[data-wide] [data-affiliate-target="container"]:not(:empty) { padding: 10px 18px 12px; background: var(--wbandpage); border-top: 1px solid var(--wline); }
html[data-wide] [data-affiliate-target="container"] > * { margin: 0 !important; border-radius: 3px !important; border: 1px solid var(--wbandline) !important; background: var(--wbandbg) !important; }
html[data-wide] [data-affiliate-target="container"] .affiliate-shimmer { font-size: 13px !important; color: var(--wbandtext) !important; }
html[data-wide] [data-affiliate-target="container"] .affiliate-shimmer::after { content: none !important; }
html[data-wide] [data-affiliate-target="container"] .affiliate-icon { animation: none !important; }
html[data-wide] [data-affiliate-target="container"] .affiliate-shimmer span { color: var(--wbandarrow) !important; }
html[data-wide] [data-affiliate-part="amazon"] { border-radius: 3px !important; border-color: var(--wbandline) !important; background: var(--wbandbtn) !important; }
html[data-wide] [data-affiliate-part="amazon"] span { font-size: 12px !important; color: var(--wbandtext) !important; }
html[data-wide] [data-affiliate-part="amazon"] span + span { margin-top: 2px; color: var(--wbandmuted) !important; }
html[data-wide] [data-affiliate-target="container"] button { color: var(--wbandmuted) !important; }

/* ── Column 2: mixtuby-player, with the bottom bar over its last --wdock pixels ──
   The clip opens at the column's full width. Only a window too short for that and the controls
   (a car's wide, low screen) starts it smaller, so Play stays in view; the column scrolls. The
   one thing that moves inside: the control rows sit on one row, because stacked they need 650px. */
html[data-wide] #mixtuby-player { scroll-margin-top: var(--wtop); grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0 !important; height: 100% !important; margin: 0 !important; padding-bottom: var(--wdock); border-width: 0 1px !important; border-color: var(--wline) !important; border-radius: 0 !important; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
html[data-wide] #mixtuby-player .player-body { flex: 1 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; align-content: space-between; padding: 4px 12px 0 !important; }
html[data-wide] #mixtuby-player .player-body > * { grid-column: 1 / -1; }
html[data-wide] [data-controller~="video-resizer"] { width: 100% !important; min-width: 356px !important; max-width: calc((var(--wvh) - var(--wtop) - var(--wctl) - var(--wdock)) * 16 / 9) !important; margin-left: auto !important; margin-right: auto !important; justify-self: center; }
html[data-wide] #mixtuby-player .player-body > div { margin-top: 6px !important; }
html[data-wide] #mixtuby-player .player-body > div:not([data-controller~="video-resizer"]) { margin-bottom: 0 !important; }
/* The grip opens the frame, as the page does in Classic: the clip grows over the columns, which
   stay on screen under it, and what follows the clip moves down. A double click puts it back. */
html[data-wide][data-clip-big] .content-col { grid-template-rows: auto auto; }
html[data-wide][data-clip-big] #mixtuby-player { position: relative; z-index: 99; height: auto !important; min-height: calc(var(--wvh) - var(--wtop)) !important; overflow: visible; }
html[data-wide][data-clip-big] [data-controller~="input-tabs"],
html[data-wide][data-clip-big] #mixtuby-playlist { position: sticky; top: var(--wtop); align-self: start; height: calc(var(--wvh) - var(--wtop)); }
html[data-wide][data-clip-big] [data-controller~="affiliate-track-bridge"] > * { position: sticky; bottom: 8px; }
/* While the clip is enlarged the bars step aside. Hidden, not removed: the clip must not jump under the grip. */
html[data-wide][data-clip-big] .tab-bar-panel { visibility: hidden !important; }
/* The enlarged clip sits over the title and the buttons under it, not under them. */
html[data-wide][data-clip-big] #mixtuby-player [data-controller~="video-resizer"] { position: relative; z-index: 90; }
/* Cinema fills the screen over Modern. The page stays laid out behind it, so opening it moves
   nothing but the player (a layout change froze the LG TV, BUG-TV-CINEMA-FREEZE-001). Here the
   column's rules give way to the hall's: size, centring, and no scrolling inside it. */
html[data-wide] body.cinema-mode #mixtuby-player { z-index: 9990; display: block; padding-bottom: 0; border-width: 0 !important; overflow: hidden; }
html[data-wide] body.cinema-mode #mixtuby-player .player-body { display: contents; }
html[data-wide] body.cinema-mode #mixtuby-player .player-body > div { margin: 0 !important; }
html[data-wide] body.cinema-mode #mixtuby-player [data-controller~="video-resizer"] { max-width: none !important; }
html[data-wide] #mixtuby-player .ab-loop-panel.invisible { display: none !important; }
/* The chevron leads from the clip down to the list on a phone. Here the list is beside the clip. */
html[data-wide] [data-player-target="backToPlaylist"] { display: none !important; }
html[data-wide] #mixtuby-player .player-btn-skip-row { display: contents; }
html[data-wide] #mixtuby-player > div:first-of-type { margin-top: 0 !important; padding-top: 6px !important; }
html[data-wide] #mixtuby-player .player-btn-skip-row > button.player-btn-skip { grid-row: 9; align-self: start; margin-top: 23px; }
html[data-wide] #mixtuby-player .player-btn-skip-row > button.player-btn-skip:first-child { grid-column: 1; }
html[data-wide] #mixtuby-player .player-btn-skip-row > button.player-btn-skip:last-child { grid-column: 3; }
html[data-wide] #mixtuby-player .player-body > .player-controls { grid-column: 2; grid-row: 9; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
html[data-wide] .player-controls > div { margin: 4px 9px !important; }
html[data-wide] .player-controls > div:first-child { order: 1; gap: 0 !important; }
html[data-wide] .player-controls > div:first-child > * { margin: 0 6px; }
html[data-wide] .player-controls > div:nth-child(2) { display: contents; }
html[data-wide] .player-controls > div:nth-child(2) > div { margin: 4px 9px; }
html[data-wide] .player-controls > div:nth-child(2) > div:first-child { order: 0; }
html[data-wide] .player-controls > div:nth-child(2) > div:last-child { order: 2; }
html[data-wide] .player-controls > div:nth-child(n+3) { order: 3; flex: 0 0 calc(100% + 120px); min-width: 0; margin: 2px -60px 0 !important; padding: 2px 0 0 !important; border-color: var(--wline) !important; }
/* The seek bar lines up with the clip and its name, thumb included. */
html[data-wide] #mixtuby-player .player-body > .px-5 { padding-left: 0 !important; padding-right: 0 !important; }
/* The loop and speed buttons, the 5s buttons and Play share one centre line: the labels hang under it. */
html[data-wide] .player-controls > div:nth-child(2) > div { position: relative; }
/* On a wide middle column loop leans left and speed right, so Play stands alone in the middle. */
@media (min-width: 1440px) {
  html[data-wide] .player-controls > div:nth-child(2) > div:first-child { margin-right: 2.5vw; }
  html[data-wide] .player-controls > div:nth-child(2) > div:last-child { margin-left: 2.5vw; }
}
/* The 5s buttons sit on the grid's edges, so a wide column left them twice as far from loop
   and speed as loop is from Prev (111px against 57px at 1920). They step in by the difference.
   `left`, not a transform: the buttons' press already uses transform, and `left` moves nothing else. */
@media (min-width: 1536px) {
  html[data-wide] #mixtuby-player .player-btn-skip-row > button.player-btn-skip { position: relative; }
  html[data-wide] #mixtuby-player .player-btn-skip-row > button.player-btn-skip:first-child { left: calc(4vw - 23px); }
  html[data-wide] #mixtuby-player .player-btn-skip-row > button.player-btn-skip:last-child { left: calc(23px - 4vw); }
}
html[data-wide] .player-controls > div:nth-child(2) > div > span { position: absolute; top: 100%; left: 0; right: 0; font-size: 12px; font-style: normal; letter-spacing: 0; text-align: center; }
/* Play is the one loud thing beside the clip. A player style the person chose keeps its colours. */
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-skip,
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-nav,
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-loop,
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-speed { border: 1px solid var(--wline); background: var(--wquiet); box-shadow: none; }
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-skip,
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-nav { color: var(--color-white); }
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-skip:hover,
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-nav:hover,
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-loop:hover,
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-speed:hover { border-color: var(--color-white); }
html[data-wide] #mixtuby-player:not([data-player-style]) .player-btn-play { box-shadow: 0 2px 8px rgba(212, 0, 0, .25); }

/* ── Bottom bar under the clip: Nightstand, Your Mood, Notes, Search, Reel, Vibe ── */
html[data-wide] .tab-bar { left: calc(var(--wl) + 1px) !important; right: calc(var(--wr) + 1px) !important; bottom: 0 !important; width: auto !important; }
html[data-wide] .tab-bar > div { max-width: none !important; padding: 0 !important; }
html[data-wide] .tab-bar > div::before,
html[data-wide] #global-mini-player > div::before { content: none !important; }
html[data-wide] #global-mini-player .seo-mini-panel { box-shadow: none !important; }
html[data-wide] .tab-bar-panel { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; column-gap: 4px !important; height: var(--wdock); padding: 4px !important; border-width: 1px 0 0 !important; border-color: var(--wline) !important; border-radius: 0 !important; background: var(--wdockbg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 -2px 8px rgba(0, 0, 0, .1) !important; }
html[data-wide] .tab-bar-btn[data-press] { display: flex !important; }
html[data-wide] .tab-bar-btn[data-tab="player"],
html[data-wide] .tab-bar-btn[data-tab="shelves"] { display: none !important; }
html[data-wide] .tab-bar-btn { min-width: 0; white-space: nowrap; }
html[data-wide] .tab-bar-btn[data-active] { background: transparent !important; color: var(--color-muted, #94a3b8) !important; }

/* Mood and Notes open beside the clip, never over it: no backdrop on this layout. */
html[data-wide] [data-mood-target="backdrop"],
html[data-wide] [data-notes-target="backdrop"] { display: none !important; }
html[data-wide] .mood-drawer { max-width: calc(var(--wl) + 12px) !important; }

/* ── Column 3: the playlist, with its own height grip, and Saved Playlists under it ── */
html[data-wide] #mixtuby-playlist { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; border-width: 0 !important; border-radius: 0 !important; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
/* The list takes what the blocks under it leave, so Share, Save and the saved cards stay whole
   in the window. A height the person set with the grip stays what they set. */
html[data-wide] #mixtuby-playlist > * { flex-shrink: 0; }
html[data-wide] [data-playlist-target="trackListWrapper"],
html[data-wide] [data-playlist-target="trackListWrapper"] > :first-child { display: flex; flex-direction: column; flex: 1 1 0; }
html[data-wide] [data-playlist-target="trackListWrapper"] { min-height: 320px; }
html[data-wide] #mixtuby-playlist [data-controller~="resize"] { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
html[data-wide] #mixtuby-playlist [data-playlist-target="list"] { flex: 1 1 0; min-height: 168px; }
/* A sized list may still shrink to what the column leaves and scrolls inside: with "0 0 auto" it ran
   115px under Clear all, Share and Save (user, 7 Nov 2026). */
html[data-wide] #mixtuby-playlist [data-playlist-target="list"][data-sized] { flex: 0 1 auto; max-height: calc(var(--wvh) - var(--wtop) - var(--wlistrest)); }
/* The title needs the narrow column's room: drag and duplicate come up on the row under the mouse. */
html[data-wide] #mixtuby-playlist [data-drag-handle],
html[data-wide] #mixtuby-playlist [title="Duplicate track"] { display: none !important; }
@media (hover: hover) {
  html[data-wide] #mixtuby-playlist [data-playlist-target="list"] > *:hover [data-drag-handle],
  html[data-wide] #mixtuby-playlist [data-playlist-target="list"] > *:hover [title="Duplicate track"] { display: flex !important; }
}
/* The gear and the X take 120px of the title's room: they come up under the mouse on every row.
   With no mouse they stay on the row that is playing, the only way to reach them. */
html[data-wide] #mixtuby-playlist .track-wrapper > :not(.border-neon-cyan\/30) [title="Loop settings"],
html[data-wide] #mixtuby-playlist .track-wrapper > :not(.border-neon-cyan\/30) [title="Remove track"] { display: none; }
@media (hover: hover) {
  html[data-wide] #mixtuby-playlist .track-wrapper > * [title="Loop settings"],
  html[data-wide] #mixtuby-playlist .track-wrapper > * [title="Remove track"] { display: none; }
  html[data-wide] #mixtuby-playlist .track-wrapper:hover > * [title="Loop settings"],
  html[data-wide] #mixtuby-playlist .track-wrapper:hover > * [title="Remove track"] { display: flex; }
}
/* Square corners in the playlist only: its header and its rows (user, 7 Nov 2026). The row that
   plays is the one exception: a flat tint and a 3px rail on the left that curves with a 6px corner. */
html[data-wide] #mixtuby-playlist .playlist-header,
html[data-wide] #mixtuby-playlist .track-wrapper > div { border-radius: 0 !important; }
html[data-wide] #mixtuby-playlist .track-wrapper > .border-neon-cyan\/30 { border-radius: 6px !important; border-color: transparent !important; border-left: 3px solid var(--color-neon-cyan) !important; background: var(--wact) !important; box-shadow: none !important; }
/* Shuffle and Repeat are icon toggles, no words: a hairline when off; when on, a cyan icon on a faint
   tint, because a filled teal shouted next to the clip. The state comes from aria-pressed /
   data-repeat, which playlist_controller sets (user, 7 Nov 2026). */
html[data-wide] #mixtuby-playlist [data-playlist-target="shuffleBtn"],
html[data-wide] #mixtuby-playlist [data-playlist-target="loopBtn"] { width: 32px !important; height: 32px !important; padding: 0; border: 1px solid var(--wline) !important; border-radius: 6px !important; background: transparent !important; color: var(--color-muted) !important; }
html[data-wide] #mixtuby-playlist [data-playlist-target="shuffleBtn"][aria-pressed="true"],
html[data-wide] #mixtuby-playlist [data-playlist-target="loopBtn"][data-repeat="one"],
html[data-wide] #mixtuby-playlist [data-playlist-target="loopBtn"][data-repeat="all"] { background: var(--wact) !important; color: var(--color-neon-cyan) !important; }
/* "34 tracks · 2 h 14 min" lives once, in the footer next to Clear all (user, 7 Nov 2026).
   The YouTube credit under the left column sits centred. */
html[data-wide] #mixtuby-playlist .playlist-header [data-playlist-target="trackCount"] { display: none !important; }
/* In its place, where the playing track sits: "5 / 34". */
html[data-wide] #mixtuby-playlist .playlist-position:not(:empty) { display: inline !important; margin-right: 4px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-muted); }
html[data-wide] #mixtuby-playlist .playlist-footer > :first-child > span { font-size: 13px !important; }
html[data-wide] #mixtuby-playlist [data-playlist-target="totalDuration"] { font-weight: 600; color: var(--color-neon-cyan); }
html[data-wide] .yt-credit { text-align: center !important; padding-right: 0 !important; font-size: 12px !important; }
html[data-wide] #mixtuby-playlist [data-play-icon] { font-size: .75rem; font-weight: 500; }
/* The column's closing blocks are flat like the column and stacked because it is narrow. Nothing
   here competes with the clip: Save and Join are a quiet fill and turn blue only under the mouse. */
html[data-wide] #mixtuby-playlist > .px-5 > .border-t { border-color: var(--wline); }
html[data-wide] #mixtuby-playlist .playlist-footer { margin-top: 12px !important; padding: 12px 0 16px !important; background: none !important; border-width: 1px 0 0 !important; border-color: var(--wline) !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-wide] #mixtuby-playlist .playlist-footer > :first-child { margin-bottom: 12px !important; }
html[data-wide] #mixtuby-playlist .playlist-footer > :last-child { margin-top: 0 !important; }
html[data-wide] #mixtuby-playlist .playlist-footer button.flex-1 { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 4px !important; border-radius: 8px !important; font-size: .75rem; white-space: nowrap; }
html[data-wide] #mixtuby-playlist .playlist-footer [data-action="click->playlist#quickShare"] { background: none; border: 1px solid var(--wline); color: var(--color-white); }
html[data-wide] #mixtuby-playlist .playlist-footer [data-action="click->playlist#quickShare"]:hover { border-color: var(--color-white); }
/* Save stays a quiet fill: filled cyan beside the clip was too loud (user, 7 Nov 2026). */
html[data-wide] #mixtuby-playlist .playlist-footer [data-playlist-target="saveBtn"] { background: var(--wquiet); color: var(--color-white); }
html[data-wide] #mixtuby-playlist .playlist-footer [data-playlist-target="saveBtn"]:hover { background: #1E6CFF; color: #fff; }
html[data-wide] .playlist-join { display: block; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; transform: none !important; }
html[data-wide] .playlist-join > :first-child { display: none; }
html[data-wide] .playlist-join > .flex-1 > :first-child { font-size: .875rem; }
html[data-wide] .playlist-join > .flex-1 > :last-child { margin-top: 2px; font-size: .75rem; }
html[data-wide] .playlist-join-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 0 !important; border-radius: 8px !important; font-size: .75rem !important; background: var(--wquiet) !important; color: var(--color-white) !important; }
html[data-wide] .playlist-join:hover .playlist-join-btn { background: #1E6CFF !important; color: #fff !important; }
/* Saved Playlists: cards in three columns, or a list once the switch is pressed. */
html[data-wide] [data-playlist-target="savedGrid"][data-layout="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html[data-wide] [data-playlist-target="savedGrid"][data-layout="horizontal"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important; }
html[data-wide] [data-playlist-target="savedGrid"][data-layout="horizontal"] > * { width: auto !important; min-width: 0 !important; min-height: 48px; padding: 4px 8px !important; box-shadow: none !important; }
html[data-wide] [data-playlist-target="savedGrid"][data-layout="horizontal"] > * > .flex { flex-direction: row !important; align-items: center !important; margin: 0 !important; }
html[data-wide] [data-playlist-target="savedGrid"][data-layout="horizontal"] > * > .flex > * + * { margin-left: 10px; }
/* A card's third line only ever showed cut in a column this narrow. */
html[data-wide] [data-playlist-target="savedGrid"] > * > .truncate { display: none !important; }

/* Column 1 holds the shelves or the library, and the row's button swaps them, so nothing else
   opens or closes the library here. */
html[data-wide] [data-playlist-target="curatedQuickRow"] > button[data-action="click->playlist#toggleCurated"] { display: none !important; }
html[data-wide] .wide-show-library { display: block !important; }
html[data-wide] .wide-off,
html[data-wide] [data-playlist-target="libraryDetails"] > summary { display: none !important; }
/* The carousel arrows of column 1 take the column's own colour, square, as tall as the chips:
   the navy rounded cap read as a box stuck over the black row (user, 7 Nov 2026). */
html[data-wide] [data-controller~="input-tabs"] .scroll-rail ~ .scroll-arrow { top: 4px; bottom: 4px; border-radius: 0; background: var(--wbandpage) !important; }
/* The rows off screen skip style, layout and paint: 2.6 s to 1.75 s at 6x CPU. */
html[data-wide] [data-lib-item] { content-visibility: auto; contain-intrinsic-size: auto 47px; }

/* ── The same frame on narrower windows ── */
@media (min-width: 1924px) { html[data-wide] { --wl: 500px; --wr: 460px; } }
@media (max-width: 1124px) { html[data-wide] { --wl: 280px; --wr: 270px; } }
@media (max-width: 1023px) { html[data-wide] { --wl: 270px; --wr: 260px; } }
/* The column is narrower than the screen says: the folder tabs take their phone size. */
@media (max-width: 1919px) {
  html[data-wide] .folder-tab { padding: 0.8rem 4px; font-size: 0.8125rem; }
}
/* Narrow: three folder tabs and the ±5s buttons do not fit with everything else. */
@media (max-width: 1339px) {
  html[data-wide] { --wdock: 60px; --wr: 300px; }
  html[data-wide] .tab-bar-btn { flex-direction: column !important; height: auto !important; font-size: 12px !important; }
  html[data-wide] .tab-bar-btn svg { flex-shrink: 0; }
  html[data-wide] .tab-bar-panel { column-gap: 2px !important; }
  /* Three saved cards in a 300px column: the room comes from the margins, so names keep whole. */
  html[data-wide] [data-playlist-target="savedGrid"][data-layout="grid"] { margin: 0 -12px; column-gap: 4px; }
  html[data-wide] [data-playlist-target="savedGrid"][data-layout="grid"] > * { padding: 8px !important; }
}
/* The narrowest windows: the transport and both speed groups need 424px in the middle. */
@media (max-width: 1023px) { html[data-wide] { --wl: 258px; --wr: 258px; } }
/* A small card: the column's margins give it room, the name keeps two lines, and the second line
   ("Global · Weekly") would only ever show cut, so it goes. */
@media (max-width: 1339px), (min-width: 1400px) and (max-aspect-ratio: 8/5) {
  html[data-wide] .folder-panel { padding-left: 8px !important; padding-right: 8px !important; }
  html[data-wide] .shelf-rail .cover-fill ~ div { height: 44px !important; padding: 4px 2px 0 !important; justify-content: flex-start; }
  html[data-wide] .shelf-rail .cover-fill ~ div > p { font-size: 13px; }
  html[data-wide] .shelf-rail .cover-fill ~ div > p:not(:first-child) { display: none; }
}
/* The Trending card's region: the flag and the arrow, when the word no longer fits on the card. */
@media (max-width: 1519px), (min-width: 1400px) and (max-aspect-ratio: 8/5) {
  html[data-wide] .shelf-rail .vibe-dark > span + span { display: none; }
}
/* The track's title needs the room: the row's position number and the column's title give it. */
@media (max-width: 1499px), (min-width: 1400px) and (max-aspect-ratio: 8/5) {
  html[data-wide] .playlist-header .shelf-title { display: none; }
  html[data-wide] #mixtuby-playlist [data-playlist-target="list"] > * > * > .flex { padding-left: 4px !important; padding-right: 4px !important; }
  html[data-wide] #mixtuby-playlist [data-playlist-target="list"] > * > * > .flex > span.w-10 { display: none; }
}
/* The list's name is already over the clip, and a narrow header only ever showed it cut. */
html[data-wide] .playlist-header span.truncate { display: none; }
@media (max-width: 1459px), (min-width: 1400px) and (max-aspect-ratio: 8/5) { html[data-wide] .folder-tab svg { display: none !important; } }
@media (max-width: 1199px) {
  html[data-wide] #mixtuby-player .player-btn-skip-row > button.player-btn-skip { display: none !important; }
  html[data-wide] #mixtuby-player .player-body > .player-controls { grid-column: 1 / -1; }
  html[data-wide] .player-controls > div:nth-child(n+3) { flex-basis: 100%; margin-left: 0 !important; margin-right: 0 !important; }
  /* The two speed groups and the transport keep one row: the margins give the last pixels. */
  html[data-wide] #mixtuby-player .player-body { padding-left: 4px !important; padding-right: 4px !important; }
  html[data-wide] #mixtuby-player .player-controls > div,
  html[data-wide] #mixtuby-player .player-controls > div:nth-child(2) > div { margin-left: 0 !important; margin-right: 0 !important; }
}
/* A finger: every button on the first screen gets the 44px it needs. */
@media (any-pointer: coarse) {
  html[data-wide] #mixtuby-navbar button,
  html[data-wide] #mixtuby-navbar a,
  html[data-wide] #mixtuby-player button,
  html[data-wide] .playlist-header button,
  html[data-wide] #mixtuby-playlist .track-wrapper button,
  html[data-wide] #mixtuby-playlist [data-action="click->playlist#clearAll"] { min-width: 44px; min-height: 44px; }
}
@media (max-width: 1124px) {
  /* The labels no longer fit three equal widths: each takes what it needs. */
  html[data-wide] .folder-tab { flex: 1 1 auto; padding: 0.8rem 0.25rem; }
}
/* A tall window (tablet upright): the controls follow the clip instead of the far bottom. */
@media (orientation: portrait) {
  html[data-wide] #mixtuby-player .player-body { align-content: start; row-gap: 16px; }
}
/* Short window: the controls tighten; what is left over scrolls inside the column. */
@media (max-height: 899px) {
  html[data-wide] #mixtuby-player .player-body > div { margin-top: 2px !important; }
  html[data-wide] #mixtuby-player .player-btn-skip-row > button.player-btn-skip { margin-top: 8px; }
  html[data-wide] .player-controls > div { margin: 2px !important; }
  html[data-wide] .player-controls > div:nth-child(2) > div { margin: 2px; }
  html[data-wide] .player-controls > div:nth-child(2) > div > div { gap: 2px !important; }
  html[data-wide] .player-controls > div:first-child > * { margin: 0 2px; }
  html[data-wide] #mixtuby-player .player-btn-play { width: 52px !important; height: 52px !important; }
}
/* "Next up" repeats the list beside it: on a short window its line goes to the clip. */
@media (max-height: 759px) {
  /* Without "Next up" the loop and speed labels are the last line: room for them above the bar. */
  html[data-wide] #mixtuby-player .player-body { padding-bottom: 18px !important; }
  html[data-wide] { --wctl: 247px; }
  html[data-wide] .player-controls > div:nth-child(n+3) { display: none; }
}
/* The navbar must end above the clip, nothing may touch the YouTube player. */
@media (max-height: 599px) {
  /* What follows the clip measures 207px here. The clip gives way rather than Play. */
  html[data-wide] { --wtop: 50px; --wctl: 207px; }
  html[data-wide] [data-controller~="video-resizer"] { min-width: 240px !important; }
  html[data-wide] #mixtuby-navbar > :first-child > :first-child { padding-top: 4px !important; padding-bottom: 4px !important; }
  html[data-wide] [data-controller~="affiliate-track-bridge"] > * { display: none !important; }
  html[data-wide] #mixtuby-player > div:first-of-type { display: none !important; }
}
/* A squarer screen with room to spare (a car's upright panel): the clip takes it from the sides. */
@media (min-width: 1400px) and (max-aspect-ratio: 8/5) {
  html[data-wide] { --wl: 21vw; --wr: 21vw; }
}

}

@supports (height: 100dvh) { html[data-wide] { --wvh: 100dvh; } }