/* LWVlife App - in-app Music player (AIMEE-20261028-MUSIC-01). Uses lounge.css tokens (--lg-*); 1rem = app --fs so A-/A+ works.
   YouTube Required Minimum Functionality: the player stays visible, at least 200 x 200 px (the mini player is exactly 200 px wide/high).
   Contrast: white on card colors #5B6CB0 5.1:1, #C2416B 5.0:1, #9A5B13 5.6:1, #1F7A4D 5.4:1, #116466 7.4:1, #B8432F 5.6:1, #1D4ED8 6.7:1, #C2410C 5.2:1.
   Tap targets >= 48 px. Reduced motion honored. No horizontal scroll at 320 px. */
.mp-wrap{margin:0 0 16px}
.mp-h{margin:0 0 4px;font-size:1.2rem;display:flex;align-items:center;gap:8px}
.mp-h2{margin:16px 0 8px;font-size:1.1rem;display:flex;align-items:center;gap:8px}
.mp-s{margin:0 0 12px;color:var(--lg-ink2);font-weight:600;font-size:.95rem}
.mp-today{margin:0 0 12px;padding:12px;border-radius:22px;background:linear-gradient(135deg,#FFF6D5,#FFE2A8);border:2px solid #EAB308}
.lg-night .mp-today{background:linear-gradient(135deg,#43360E,#5A4414);border-color:#FDE047}
.mp-today-h{display:block;margin:0 0 8px;font-size:1.1rem;color:#172B4D}
.lg-night .mp-today-h{color:#FEF08A}
.mp-today-h small{font-weight:700;color:#5B4A1B;font-size:.85rem;margin-left:4px}
.lg-night .mp-today-h small{color:#E9DDB0}
.mp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.mp-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.mp-grid{grid-template-columns:1fr 1fr}}
.mp-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic t" "btn btn";gap:8px 12px;align-items:center;padding:14px;border-radius:20px;
  background:var(--mc);color:#fff;box-shadow:0 4px 14px rgba(23,43,77,.15);border:3px solid transparent}
.mp-card.on{border-color:#FFC94D}
.mp-card.big{grid-template-areas:"ic t" "btn btn"}
.mp-ic{grid-area:ic;font-size:2.2rem;line-height:1;width:58px;height:58px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);border-radius:16px}
.mp-t{grid-area:t;min-width:0}
.mp-t b{display:block;font-size:1.15rem;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.mp-t small{display:block;font-weight:600;font-size:.95rem;opacity:.95;margin-top:2px}
.mp-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mp-tag{display:inline-block;font-size:.8rem;font-weight:800;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.95);color:#172B4D}
.lg-page .mp-play{grid-area:btn;display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:16px;border:0;background:#fff;color:#172B4D;font-weight:900;font-size:1.1rem;cursor:pointer;font-family:inherit}
.mp-play:active{transform:scale(.98)}
.mp-note{margin:12px 0 0;color:var(--lg-ink2);font-size:.9rem;font-weight:600}
.mp-in-laugh{margin:0 0 14px}

/* ---------- dock: full sheet ---------- */
#mp-dock{--mc:#116466;color:#172B4D;font-size:1rem;line-height:1.4}
#mp-dock[hidden]{display:none!important}
#mp-dock button,#mp-dock a{font-family:inherit}
#mp-dock.mp-full{position:fixed;inset:0;z-index:2500;background:var(--lg-bg,#F7F4EC);overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
#mp-dock.mp-full.lg-night{color:#EDE8DC}
.mp-bar{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 10px;background:var(--mc);color:#fff}
.mp-bar h2{margin:0;font-size:1.1rem;text-align:center;line-height:1.25;overflow-wrap:anywhere}
.mp-stage{position:relative;width:100%;max-width:760px;margin:12px auto 0;padding:0 12px;box-sizing:border-box}
.mp-full .mp-frame{position:relative;width:100%;aspect-ratio:16/9;min-height:200px;background:#000;border-radius:14px;overflow:hidden}
.mp-frame iframe,.mp-frame #mp-yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.mp-err{padding:16px;border-radius:16px;background:#FBE7E3;color:#7A2414;border:2px solid #B8432F;margin-top:-8px}
.mp-full .mp-err{position:absolute;inset:0 12px;margin:0;display:flex;flex-direction:column;justify-content:center;gap:8px}
.mp-err p{margin:0;font-weight:700}
.mp-err-t{font-size:1.1rem}
.mp-ctl{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;max-width:760px;margin:14px auto 0;padding:0 12px;box-sizing:border-box}
.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;min-width:52px;padding:6px 16px;border-radius:16px;border:2px solid #116466;background:#fff;color:#0C4C4E;font-weight:900;font-size:1.05rem;cursor:pointer;text-decoration:none;text-align:center}
.mp-btn.pri{background:#116466;border-color:#116466;color:#fff}
.mp-btn.amber{background:#FFC94D;border-color:#E0A800;color:#172B4D}
.mp-btn.coral{background:#FBE7E3;border-color:#B8432F;color:#8E2E1E}
.mp-btn.ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.mp-ctl .mp-btn.ghost{border-color:#9AA5B1;color:#172B4D;background:#fff}
.mp-btn.big{flex:1 1 220px;min-height:62px;font-size:1.15rem}
.mp-btn .t{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.2}
.mp-btn .t small{font-weight:700;font-size:.82rem}
.mp-hint{flex:1 1 100%;margin:2px 0 0;text-align:center;font-weight:600;color:#44546B;font-size:.92rem}
.lg-night .mp-hint,.mp-full.lg-night .mp-hint{color:#C3BDB0}
.mp-credit{margin:10px auto 24px;max-width:760px;padding:0 12px;font-size:.85rem;color:#44546B;text-align:center}
.mp-full.lg-night .mp-credit{color:#C3BDB0}
.mp-bar .mp-btn{min-height:48px;padding:4px 12px;font-size:1.3rem}

/* ---------- dock: mini player (stays while using other screens) ---------- */
#mp-dock.mp-mini{position:fixed;z-index:2500;right:max(10px,calc(50vw - 250px));bottom:calc(var(--nav-h,64px) + env(safe-area-inset-bottom,0px) + 10px);width:200px;
  background:#172B4D;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.35);overflow:hidden;color:#fff}
body.lg-open #mp-dock.mp-mini{bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
.mp-mini .mp-bar,.mp-mini .mp-credit{display:none}
.mp-mini .mp-stage{margin:0;padding:0;max-width:none}
.mp-mini .mp-frame{position:relative;width:200px;height:200px;background:#000}
.mp-mini .mp-err{margin:0;border-radius:0;font-size:.85rem}
.mp-mini .mp-ctl{margin:0;padding:6px;gap:6px;flex-wrap:nowrap;justify-content:space-between}
.mp-mini .mp-btn{flex:1;min-width:0;padding:4px;font-size:1.3rem;min-height:48px}
@media (prefers-reduced-motion:reduce){#mp-dock *{transition:none!important;animation:none!important}}
.mp-svg{width:1.3em;height:1.3em;fill:currentColor;flex:none}