/* 16-player-tools.css — every rule for the player card's tool buttons (±10s, prev/next, lyrics, queue, share, volume) and their rows,
   gathered from 02/04/06/07/08/09/10/11/13 in their original cascade order.
   Rules shared with other components stay in the topic files. */
@media (min-width:960px){
.wcard.active:not(.lyr-open) .card-player .cp-lyrbtn{display:none}
}
.cp-controls{display:grid;grid-template-columns:1fr auto 1fr;column-gap:14px;align-items:center;direction:ltr;zoom:var(--cpz,1)}
.cpc-l{display:flex;align-items:center;gap:6px;justify-content:flex-start;min-width:0}
.cpc-c{display:flex;align-items:center;gap:clamp(10px,calc(var(--cardw)*.04),16px)}
.cpc-r{display:flex;align-items:center;gap:clamp(8px,calc(var(--cardw)*.034),22px);justify-content:flex-end;min-width:0}
.cp-controls .k-tool{width:auto;height:auto;min-width:24px;min-height:24px;border-radius:8px;background:none;color:#e8eef5;opacity:.75;transition:opacity .15s var(--ease),color .15s var(--ease),transform .12s var(--ease)}
.cp-controls .k-tool:hover, .cp-controls .k-tool:focus-visible{background:none;opacity:1;color:#fff}
.cp-controls .k-tool:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--theme) 55%,transparent)}
.cp-controls .k-tool:active{transform:scale(.88)}
.cp-controls .cp-b10 svg, .cp-controls .cp-f10 svg{width:18px;height:18px}
.cp-controls .cp-tprev svg, .cp-controls .cp-tnext svg{width:20px;height:20px;fill:currentColor}
.cp-controls .cp-lyrbtn svg{width:18px;height:18px}
.cp-controls .cp-queue svg{width:19px;height:19px}
.cp-queue[aria-pressed="false"]{color:rgba(255,255,255,.45)}
.cp-lyrbtn[aria-expanded="true"]{color:var(--song-text);opacity:1}
.k-tool{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.78);cursor:pointer}
.k-tool:hover, .k-tool:focus-visible{background:rgba(255,255,255,.15);color:#fff;outline:none}
.k-tool svg, .k-volume-wrap svg{width:19px;height:19px;fill:currentColor}
.kt-lbl{display:none;font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.k-volume-wrap{display:flex;align-items:center;gap:6px;color:#cfd8e3}
.k-volume{-webkit-appearance:none;appearance:none;--kv-h:3px;--kv-fill:color-mix(in srgb,var(--theme2) 55%,#fff); width:clamp(48px,calc(var(--cardw)*.16),86px);height:18px;margin:0;padding:0;background:none;border:0;cursor:pointer}
.k-volume::-webkit-slider-runnable-track{height:var(--kv-h);border-radius:99px; background:linear-gradient(to right,var(--kv-fill) 0 var(--kv-pct,80%),rgba(255,255,255,.22) var(--kv-pct,80%) 100%)}
.k-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border:0;border-radius:50%; background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);margin-top:calc((var(--kv-h) - 12px)/2)}
.k-volume::-moz-range-track{height:var(--kv-h);border-radius:99px;background:rgba(255,255,255,.22)}
.k-volume::-moz-range-progress{height:var(--kv-h);border-radius:99px;background:var(--kv-fill)}
.k-volume::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.k-volume:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:3px;border-radius:99px}
.cp-controls .k-volume-wrap svg{width:20px;height:20px}
@media (max-width:959px){
.wcard:not(.k-playing):not(.k-pending):not(.k-live) .card-player .cp-b10, .wcard:not(.k-playing):not(.k-pending):not(.k-live) .card-player .cp-f10{display:none}
.wcard.active:not(.lyr-open) .card-player .cp-queue{display:none}
.wcard.active:not(.lyr-open) .card-player .cpc-l{display:none}
.wcard.active:not(.lyr-open) .card-player .cp-tprev{display:none}
.wcard.active:not(.lyr-open) .card-player .cpc-c{flex:0 0 auto}
.wcard.active:not(.lyr-open) .card-player .cpc-r{justify-content:center;flex:0 0 auto;flex-wrap:nowrap}
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);opacity:1;color:rgba(232,238,245,.9)}
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool:hover, .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool:focus-visible{background:rgba(255,255,255,.15);color:#fff}
.wcard.active:not(.lyr-open) .card-player .cpc-r .kt-lbl{display:none}
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{border-radius:50%;justify-content:center}
}
@media (max-width:959px) and (hover:none){
.wcard.active:not(.lyr-open) .card-player .cpc-c{gap:6px}
.wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool{min-width:44px;min-height:44px}
}
.cp-controls .cp-lyrpanel svg{width:19px;height:19px}
.cp-lyrpanel[aria-pressed="false"]{color:rgba(255,255,255,.45)}
.card-player .cpc-r .cp-lyrpanel, .card-player .cpc-r .cp-queue{display:none}
@media (max-width:959px){
.cp-lyrpanel{display:none}
}
.cp-lyrbtn{transition:background .18s var(--ease),color .18s var(--ease),transform .14s var(--ease),filter .2s var(--ease)}
@media (max-width:959px) and (min-aspect-ratio:1/1){
.wcard.active:not(.lyr-open) .card-player .cp-controls{gap:9px;padding:2px 0 0}
.wcard.active:not(.lyr-open) .card-player .cpc-r{flex-wrap:wrap;gap:6px}
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{min-height:29px;padding:5px 10px}
}
@media (max-width:959px){
.card-player .cpc-l{display:none}
.cp-controls .k-tool.cp-tprev, .cp-controls .k-tool.cp-tnext{min-width:44px;min-height:44px}
.cp-controls .cp-tprev svg, .cp-controls .cp-tnext svg{width:22px;height:22px}
.cp-controls .k-tool{min-height:44px}
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{padding:8px 14px}
.k-volume-wrap{display:none}
}
.cp-b10, .cp-f10{display:none}
body.two-tracks .cp-b10, body.two-tracks .cp-f10{display:inline-flex}
@media (min-width:960px){
.cp-controls .k-tool{min-width:52px;min-height:52px}
.cp-controls .cpc-c{gap:14px}
.cp-controls .cpc-c .k-tool{width:52px;height:52px;border-radius:50%; background:none;border:0;opacity:1;color:rgba(232,238,245,.72); transition:background .18s var(--ease),color .18s var(--ease)}
.cp-controls .cpc-c .k-tool:hover, .cp-controls .cpc-c .k-tool:focus-visible{background:rgba(255,255,255,.07); color:color-mix(in srgb,var(--theme) 60%,#fff)}
.cp-controls .cp-tnext svg, .cp-controls .cp-tprev svg{width:28px;height:28px}
.cp-controls .cp-b10 svg, .cp-controls .cp-f10 svg{width:32px;height:32px}
.cp-controls .k-volume-wrap svg{width:24px;height:24px}
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{min-height:44px;padding:9px 14px}
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool svg{width:19px;height:19px}
.cp-controls .cpc-l{min-width:0}
.cp-controls .k-volume-wrap{position:relative;min-width:0;flex:1 1 auto;max-width:170px}
.cp-controls .k-volume{width:auto;flex:1 1 auto}
.k-vol-pct{position:absolute;z-index:6;left:50%;top:-26px;transform:translateX(-50%);padding:2px 7px;border-radius:6px; background:rgba(10,16,26,.85);border:1px solid rgba(255,255,255,.16); font-size:10.5px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:rgba(232,238,245,.9); opacity:0;pointer-events:none;transition:opacity .15s var(--ease)}
.k-volume-wrap:hover .k-vol-pct, .k-volume-wrap:focus-within .k-vol-pct{opacity:1}
}
@media (max-width:959px){
.k-vol-pct{display:none}
}
body.sky-day .k-volume::-webkit-slider-thumb{background:#2563a8;box-shadow:0 1px 4px rgba(16,40,72,.4)}
body.sky-day .k-volume::-moz-range-thumb{background:#2563a8;box-shadow:0 1px 4px rgba(16,40,72,.4)}
body.sky-day .cp-controls .k-tool{color:#12405c}
body.sky-day .cp-controls .k-tool:hover, body.sky-day .cp-controls .k-tool:focus-visible{color:#083049}
body.sky-day .k-tool{background:rgba(16,48,79,.07);color:rgba(16,48,79,.82)}
body.sky-day .k-tool:hover, body.sky-day .k-tool:focus-visible{background:rgba(16,48,79,.13);color:#083049}
body.sky-day .k-volume-wrap{color:rgba(16,48,79,.75)}
body.sky-day .k-volume{--kv-fill:color-mix(in srgb,var(--theme) 65%,#0d2b47)}
body.sky-day .cp-queue[aria-pressed="false"]{color:rgba(16,48,79,.45)}
@media (max-width:959px) and (min-aspect-ratio:1/1){
body.sky-day .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{background:rgba(16,48,79,.07);border-color:rgba(24,74,128,.22);color:rgba(16,48,79,.85)}
}
@media (max-width:959px){
body.sky-day .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{background:rgba(16,48,79,.07);border:1px solid rgba(24,74,128,.22);color:rgba(16,48,79,.85)}
}
@media (min-width:960px){
.cp-controls .k-volume{height:36px}
}
body.sky-day .k-volume::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--kv-fill) 0 var(--kv-pct,80%),rgba(16,60,110,.22) var(--kv-pct,80%) 100%)}
body.sky-day .k-volume::-moz-range-track{background:rgba(16,60,110,.22)}
body.sky-day .cp-controls .k-tool{opacity:.92}
@media (max-width:959px){
body.two-tracks .wcard.active:not(.lyr-open) .card-player .cp-tprev{display:inline-flex}
.wcard.active:not(.lyr-open) .card-player .cpc-c{gap:clamp(6px,2vw,12px)}
.wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool{padding:0;border-radius:50%;justify-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:rgba(232,238,245,.9);opacity:1}
.wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool:hover, .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool:focus-visible{background:rgba(255,255,255,.15);color:#fff}
.wcard.active:not(.lyr-open) .card-player .cpc-r{gap:14px}
body.sky-day .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool{background:rgba(16,48,79,.07);border-color:rgba(24,74,128,.22);color:rgba(16,48,79,.85)}
body.sky-day .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool:hover, body.sky-day .wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool:focus-visible{background:rgba(16,48,79,.13);color:#083049}
}
@media (max-width:959px) and (max-height:740px){
.wcard.active:not(.lyr-open) .card-player .cp-controls{gap:8px}
.wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool, .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{--sat:48px}
}
@media (min-width:960px){
body .wcard.active:not(.lyr-open) .card-player .cp-tprev{display:inline-flex;align-items:center;justify-content:center}

}
body.sky-day.panels-bare .card-player :is(.k-tool, .k-volume-wrap){color:#0d2b47;opacity:1}
body.sky-day.panels-bare .card-player .cp-queue[aria-pressed="false"]{color:rgba(13,43,71,.6)}
@media (max-width:959px){
.wcard.active:not(.lyr-open) .card-player .cp-controls{display:flex}
.wcard.active:not(.lyr-open) .card-player .cpc-c, .wcard.active:not(.lyr-open) .card-player .cpc-r{display:contents}
.wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool, .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{width:var(--sat);height:var(--sat);min-width:var(--sat);min-height:var(--sat)}
.wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool svg, .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool svg{width:clamp(20px,5.4vw,24px);height:clamp(20px,5.4vw,24px)}
.wcard.active:not(.lyr-open) .card-player .cp-tprev{order:-2}
.wcard.active:not(.lyr-open) .card-player .cp-b10{order:-1}
.wcard.active:not(.lyr-open) .card-player .cp-f10{order:1}
.wcard.active:not(.lyr-open) .card-player .cp-tnext{order:2}
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{order:3}
.wcard.active:not(.lyr-open) .card-player :is(.cp-b10, .cp-f10){display:none}
.wcard.active:not(.lyr-open) .card-player .cp-controls{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;padding:2px 0 0;gap:clamp(8px,2.8vw,14px);zoom:1}
.wcard.active:not(.lyr-open) .card-player .cpc-c .k-tool, .wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{--sat:clamp(46px,12.5vw,54px)}
}
.cpt-share svg{width:23px;height:23px;fill:currentColor}
.cp-controls .cpt-share{position:relative;width:48px;height:48px;min-width:48px;min-height:48px;justify-content:center}
@media (min-width:960px) and (max-height:820px){
.wcard.active:not(.lyr-open) .card-player :is(.cp-b10, .cp-f10){display:none!important}
.wcard.active:not(.lyr-open) .card-player .cp-controls{gap:22px;padding:4px 0 2px}
.wcard.active:not(.lyr-open) .card-player .cpc-c{gap:clamp(18px,calc(var(--cardw)*.08),32px)}
.wcard.active:not(.lyr-open) .card-player .cpc-r{gap:14px;margin-inline-start:6px}
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{width:48px;height:48px;min-width:48px;min-height:48px}
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool svg{width:23px;height:23px}
}
@media (min-width:960px) and (max-height:700px){
.wcard.active:not(.lyr-open) .card-player .cpc-r .k-tool{width:44px;height:44px;min-width:44px;min-height:44px}
}
@media (min-width:960px){
.cp-controls{grid-template-columns:minmax(76px,1fr) auto minmax(max-content,1fr);column-gap:16px}
.cp-controls .k-volume{--kv-h:5px;min-width:46px}
body .wcard.active:not(.lyr-open) .card-player .cpc-c{gap:clamp(14px,calc(var(--cardw)*.12 - 22px),46px)}
.wcard.active.k-video:not(.k-pending):not(.k-error) .card-player .cpc-c{gap:clamp(24px,3vw,48px)}
.cp-controls>.cpc-l{grid-column:1}
.cp-controls>.cpc-r{grid-column:3}
}
.wcard.k-ended .card-player .cpc-c{display:none!important}

/* ── state overrides from shared rules ──
   These repeat declarations from shared rules in the topic files that used to come AFTER the rules above
   and win on equal specificity. Kept here so moving the rules into this file changes nothing. */
@media (prefers-reduced-motion:reduce){.cp-controls .k-tool{transition:none}}
@media (max-width:959px){.k-tools .k-tool{width:44px;height:44px}}
@media (max-width:959px){.cl-playback .k-tool{width:44px;height:44px}}
@media (min-width:960px) and (max-height:820px){.cp-controls .cpt-share{width:48px;min-width:48px;height:48px;min-height:48px}}
@media (min-width:960px) and (max-height:700px){.cp-controls .cpt-share{width:44px;min-width:44px;height:44px;min-height:44px}}
/* Panel borders OFF (Settings → Panels): player tool pills drop their hairlines too —
   selectors mirror the bordered variants above so they win on equal-or-higher specificity */
body.no-borders .k-tool{border-color:transparent}
body.no-borders .wcard.active:not(.lyr-open) .card-player :is(.cpc-r,.cpc-c) .k-tool{border-color:transparent}
body.sky-day.no-borders .wcard.active:not(.lyr-open) .card-player :is(.cpc-r,.cpc-c) .k-tool{border-color:transparent}
@media (min-width:960px){.wcard.active:not(.lyr-open) .card-player :is(.cp-timeline,.cpc-l,.cp-b10,.cp-f10){display:none!important}}
/* 2026-09-26: calm desktop transport — play/pause is the hero; ⏭ track-skipping left the player,
   the Up-next rail (and the end-of-song Next) owns song changes. Phones keep ⏭ — it is their only
   way to switch songs since swipe retired. Restore by deleting this rule when the catalogue grows. */
@media (min-width:960px){html body .wcard .card-player :is(.cp-tprev,.cp-tnext){display:none!important}}