/* Sky Suite — persistent podcast player (shared shell chrome).
   SOURCE OF TRUTH for the docked mini-bar (#skp-bar) and the mobile
   full-screen "Now Playing" takeover (#skp-full). Both are rendered ONCE,
   app-wide, in skysuite-shell/templates/shared/base.html, marked
   data-turbo-permanent, so Turbo preserves the live <audio> element (and
   this player's JS state in sky-podcast-player.js) across every in-app
   navigation — same-service or cross-service, since every service extends
   the one shared base.html. See sky-podcast-player.js for the behaviour;
   this file is styling only. Moved out of skysuite-core's
   dashboard/_dispatch_listen.html (which used to render its own copy of the
   bar) 2026-09 — do not re-add a second copy of these rules anywhere else. */

/* ══ Docked mini-bar ══════════════════════════════════════════════════ */
.skp-bar{position:fixed;left:0;right:0;bottom:0;z-index:1200;
  background:var(--sky-surface-2,#151924);border-top:1px solid var(--sky-border,#232836);
  box-shadow:0 -10px 28px rgba(0,0,0,.4);
  padding-bottom:env(safe-area-inset-bottom,0)}
.skp-bar[hidden]{display:none}
.skp-viz{display:block;width:100%;height:34px}
.skp-row{display:flex;align-items:center;gap:14px;padding:6px 16px 10px;
  flex-wrap:wrap;max-width:1100px;margin:0 auto;position:relative}
.skp-meta{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 220px;max-width:360px}
.skp-cover{width:42px;height:42px;border-radius:9px;object-fit:cover;flex:0 0 auto;
  background:rgba(255,255,255,.05);border:1px solid var(--sky-border,#232836)}
.skp-titles{min-width:0;cursor:default}
.skp-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--sky-text,#e7ecf5)}
.skp-sub{font-size:11px;color:var(--sky-text-dim,#8a94a6);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.skp-controls{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.skp-btn{appearance:none;border:0;background:transparent;color:var(--sky-text,#e7ecf5);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;position:relative;font-size:18px;padding:0}
.skp-btn:hover{background:rgba(255,255,255,.07)}
.skp-btn[disabled]{opacity:.3;cursor:default;pointer-events:none}
/* Play: the theme's accent (Clean Pro blue) via the pack tokens; the pink literals are only
   Classic's fallback (packs without --ss-*). 2026-10-22: no hard-coded magenta under a new theme. */
.skp-btn.skp-play{width:48px;height:48px;background:var(--ss-accent-soft,rgba(255,0,174,.16));
  color:var(--ss-accent-text,var(--sky-accent,#ff9de0));border:1px solid var(--ss-accent-line,rgba(255,0,174,.32));font-size:21px}
.skp-btn.skp-play:hover{background:var(--ss-accent-soft,rgba(255,0,174,.24));filter:brightness(1.08)}
.skp-btn-num{position:absolute;bottom:1px;font-size:8px;font-weight:700;letter-spacing:0}
.skp-scrub{display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:160px}
.skp-time{font-size:11px;color:var(--sky-text-dim,#8a94a6);font-variant-numeric:tabular-nums;
  flex:0 0 auto;width:36px;text-align:center}
.skp-seek{flex:1 1 auto;accent-color:var(--sky-accent,#ff9de0);height:28px;cursor:pointer}
.skp-vol{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.skp-volrange{width:84px;accent-color:var(--sky-accent,#ff9de0);height:28px;cursor:pointer}

/* Expand-to-full-screen affordance — MOBILE ONLY (see media query below).
   Desktop keeps the docked bar exactly as it was; nothing here changes its
   layout or behaviour. */
.skp-expand{display:none}

@media (max-width:760px){ .skp-vol{display:none} .skp-viz{height:26px}
  /* Mobile gets a visible way to reach the full-screen "Now Playing" view:
     an explicit chevron, plus the whole meta (cover+title) area is tappable
     (see sky-podcast-player.js — it checks the same breakpoint in JS before
     acting, so this rule alone is not load-bearing for correctness). */
  .skp-expand{display:inline-flex;width:32px;height:32px;font-size:15px;flex:0 0 auto}
  .skp-meta{cursor:pointer}
}
@media (max-width:560px){
  .skp-row{gap:6px;padding:6px 44px 8px 10px}
  .skp-meta{max-width:none;flex:1 1 auto;order:1}
  .skp-controls{order:3;flex:1 1 100%;justify-content:center;gap:6px}
  .skp-scrub{order:2;flex:1 1 100%}
  .skp-close{position:absolute;top:4px;right:6px}
}
body.skp-open{padding-bottom:104px}
@media (max-width:560px){ body.skp-open{padding-bottom:130px} }

/* ══ Full-screen "Now Playing" takeover — mobile behaviour ═════════════
   Structurally always in the DOM (so it can be reached from any page the
   persistent player survives on) but only ever OPENED on mobile widths —
   sky-podcast-player.js gates the open() call on matchMedia, and the
   .skp-expand affordance that triggers it is display:none above 760px.
   Desktop users never see this panel. */
.skp-full{position:fixed;inset:0;z-index:1300;display:flex;flex-direction:column;
  background:var(--sky-bg,#0c0e14);color:var(--sky-text,#e7ecf5);
  padding:calc(env(safe-area-inset-top,0) + 10px) 22px calc(env(safe-area-inset-bottom,0) + 22px);
  touch-action:none}
.skp-full[hidden]{display:none}
.skpf-head{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  padding:2px 0 6px}
.skpf-head-lab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sky-text-dim,#8a94a6)}
.skpf-collapse, .skpf-close{color:var(--sky-text-dim,#8a94a6)}
.skpf-art{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:10px 0 18px}
.skpf-cover-img, .skpf-cover-ph{width:min(78vw,340px);height:min(78vw,340px);border-radius:20px;
  object-fit:cover;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.skpf-cover-img[hidden]{display:none}
.skpf-cover-ph{display:flex;align-items:center;justify-content:center;font-size:64px;
  color:var(--ss-accent-text,rgba(255,157,224,.6));
  background:var(--ss-accent-soft,linear-gradient(155deg,rgba(255,0,174,.22),rgba(96,165,250,.18)));
  border:1px solid var(--sky-border,#232836)}
.skpf-meta{flex:0 0 auto;text-align:center;padding:0 4px 18px}
.skpf-show{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ss-accent-text,var(--sky-accent,#ff9de0));margin-bottom:6px}
.skpf-title{font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.skpf-sub{font-size:12.5px;color:var(--sky-text-dim,#8a94a6);margin-top:6px}
.skpf-scrub{flex:0 0 auto;padding:2px 0 6px}
.skpf-seek{width:100%;accent-color:var(--ss-accent,var(--sky-accent,#ff9de0));height:30px;cursor:pointer}
.skpf-times{display:flex;justify-content:space-between;font-size:11.5px;
  color:var(--sky-text-dim,#8a94a6);font-variant-numeric:tabular-nums;margin-top:2px}
.skpf-transport{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  gap:30px;padding:10px 0}
.skpf-transport .skp-btn{width:56px;height:56px;font-size:26px}
.skpf-transport .skp-btn.skpf-play{width:76px;height:76px;font-size:34px;
  background:var(--ss-accent-soft,rgba(255,0,174,.16));color:var(--ss-accent-text,var(--sky-accent,#ff9de0));
  border:1px solid var(--ss-accent-line,rgba(255,0,174,.32))}
.skpf-transport .skp-btn.skpf-play:hover{background:var(--ss-accent-soft,rgba(255,0,174,.24));filter:brightness(1.08)}
.skpf-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:64px;
  padding-bottom:6px}
.skpf-vol{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 6px 0}
.skpf-volrange{flex:1 1 auto;accent-color:var(--sky-accent,#ff9de0);height:30px;cursor:pointer}

/* Plain grouping wrapper (see base.html) around meta/scrub/transport/nav/vol.
   Portrait: behaves exactly like the 5 separate flex children it replaces —
   a column of auto-height blocks, no growing/shrinking, so nothing here
   changes portrait's existing look. Landscape below re-targets it. */
.skpf-info{display:flex;flex-direction:column;flex:0 0 auto;min-width:0}

@media (min-height:760px){
  .skpf-cover-img, .skpf-cover-ph{width:min(70vw,380px);height:min(70vw,380px)}
}

/* ══ Full-screen "Now Playing" — mobile LANDSCAPE ═══════════════════════
   Portrait rules above are untouched by anything in this block (they simply
   don't match). PROBLEM this fixes: the portrait art size — min(78vw,340px)
   — is driven off viewport WIDTH only, with no regard for how little HEIGHT
   a landscape phone actually has (as little as ~320-400px); the square art
   grew to nearly full viewport height and pushed the title/date/scrubber
   underneath/behind it, which is the reported overlap. Standard mobile-
   podcast landscape pattern instead: art on one side, sized off viewport
   HEIGHT (not width) so it can never exceed what's available, everything
   else (title/date/scrubber/transport/volume) stacked in a second column
   that can scroll internally as a last resort on the very shortest phones.
   Gated on max-height (not max-width) because orientation is what changed,
   not device class — rotating the SAME phone from portrait to landscape
   keeps it "mobile" the whole time even though its width in landscape can
   exceed the 760px docked-bar breakpoint. */
@media (orientation:landscape) and (max-height:560px){
  .skp-full{
    display:grid;
    grid-template-columns:minmax(120px,38%) 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:"head head" "art info";
    column-gap:18px; row-gap:0;
    padding:calc(env(safe-area-inset-top,0) + 6px) calc(env(safe-area-inset-right,0) + 18px)
            calc(env(safe-area-inset-bottom,0) + 6px) calc(env(safe-area-inset-left,0) + 18px);
  }
  .skpf-head{grid-area:head; padding:0 0 2px}
  .skpf-art{grid-area:art; padding:0; min-width:0; min-height:0; align-self:stretch}
  .skpf-cover-img, .skpf-cover-ph{
    width:min(34vw, calc(100vh - 90px)); height:min(34vw, calc(100vh - 90px));
    max-width:100%; max-height:100%;
  }
  .skpf-info{
    grid-area:info; justify-content:center; gap:2px;
    min-width:0; min-height:0; overflow-y:auto;
  }
  .skpf-meta{text-align:left; padding:0 0 4px}
  .skpf-title{font-size:16px}
  .skpf-sub{font-size:11px; margin-top:2px}
  .skpf-scrub{padding:0 0 2px}
  .skpf-seek{height:22px}
  .skpf-times{margin-top:0}
  .skpf-transport{gap:16px; padding:4px 0}
  .skpf-transport .skp-btn{width:42px; height:42px; font-size:19px}
  .skpf-transport .skp-btn.skpf-play{width:54px; height:54px; font-size:23px}
  .skpf-nav{gap:28px; padding-bottom:2px}
  .skpf-vol{padding:2px 0 0}
}