/* Sean And Jaxson shared music player (preview only) + Jordy music list + photo lightbox. No external assets. */
.sjp{position:fixed;left:0;top:72px;bottom:92px;z-index:45;display:flex;align-items:center;gap:6px;pointer-events:none;max-width:100vw}
.sjp[hidden],.sjp-tab[hidden]{display:none}
.sjp-rail{pointer-events:auto;width:56px;max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 6px;background:rgba(250,250,252,.94);border-radius:0 20px 20px 0;box-shadow:0 2px 10px rgba(0,0,0,.25);scrollbar-width:none;transition:transform .2s ease}
.sjp-rail::-webkit-scrollbar{display:none}
.sjp.is-collapsed .sjp-rail,.sjp.is-collapsed .sjp-panel{display:none}
.sjp button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sjp-cover{width:40px;height:40px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#eee;flex:none;margin-bottom:2px}
.sjp-cover img,.sjp-tab img{display:block;width:100%;height:100%;object-fit:cover}
.sjp-ic{width:40px;height:40px;flex:none;border:0;border-radius:50%;background:transparent;color:#7b8096;display:flex;align-items:center;justify-content:center;padding:0}
.sjp-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sjp-ic:hover{background:#eee;color:#4b5068}
.sjp-ic[aria-pressed="true"]{color:#9333ea;background:#f3e8ff}
.sjp-ic.on{color:#9333ea}
.sjp-play{width:44px;height:44px;border:0;border-radius:50%;flex:none;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(168,85,247,.35);margin:2px 0}
.sjp-play svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sjp-play .i-pause{display:none}
.sjp.is-playing .sjp-play .i-play{display:none}.sjp.is-playing .sjp-play .i-pause{display:block}
.sjp-panel{pointer-events:auto;width:min(280px,calc(100vw - 76px));max-height:100%;overflow:auto;background:var(--card,#24263a);color:var(--txt,#dfe2f0);border:1px solid var(--line,#34374f);border-radius:18px;padding:12px;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.sjp-panel[hidden]{display:none}
.sjp-ph{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.sjp-ph img{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none}
.sjp-np{min-width:0;flex:1}
.sjp-np b{display:block;color:var(--head,#fff);font-size:1rem;line-height:1.2;overflow-wrap:anywhere}
.sjp-np span{display:block;color:var(--mut,#9aa1bd);font-size:.88rem;font-weight:700}
.sjp-x{width:38px;height:38px;flex:none;border-radius:50%;border:0;background:rgba(127,127,160,.2);color:inherit;font-size:1.3rem;line-height:1;padding:0}
.sjp-seek{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:.78rem;font-weight:800;color:var(--mut,#9aa1bd)}
.sjp-seek input{flex:1;min-width:0;height:28px;accent-color:#a855f7;margin:0}
.sjp-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sjp-item{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;padding:6px;border-radius:14px;background:rgba(127,127,160,.12);border:2px solid transparent}
.sjp-item.is-current{border-color:#14b8a6}
.sjp-item img{width:40px;height:40px;border-radius:10px;object-fit:cover}
.sjp-item .t{min-width:0;font-size:.88rem;line-height:1.2}
.sjp-item .t b{display:block;color:var(--head,#fff);overflow-wrap:anywhere}
.sjp-item .t i{font-style:normal;color:var(--mut,#9aa1bd);font-size:.78rem;font-weight:700}
.sjp-item .go{width:44px;height:44px;border:0;border-radius:50%;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;display:flex;align-items:center;justify-content:center;padding:0}
.sjp-item .go svg{width:18px;height:18px;fill:#fff;stroke:#fff;stroke-width:1;stroke-linejoin:round}
.sjp-msg{margin:10px 0 0;font-size:.82rem;font-weight:700;color:var(--mut,#9aa1bd);min-height:1.2em}
.sjp-tab{position:fixed;left:0;bottom:calc(88px + env(safe-area-inset-bottom));z-index:45;width:40px;height:40px;padding:0;border:0;border-radius:0 20px 20px 0;background:rgba(250,250,252,.94);box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sjp-tab img{width:40px;height:40px;border-radius:12px}
@media (max-height:600px){.sjp-rail{pointer-events:auto;width:56px;max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 6px;background:rgba(250,250,252,.94);border-radius:0 20px 20px 0;box-shadow:0 2px 10px rgba(0,0,0,.25);scrollbar-width:none;transition:transform .2s ease}.sjp-ic{width:40px;height:40px;flex:none;border:0;border-radius:50%;background:transparent;color:#7b8096;display:flex;align-items:center;justify-content:center;padding:0}.sjp-cover{width:40px;height:40px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#eee;flex:none;margin-bottom:2px}.sjp-play{width:44px;height:44px;border:0;border-radius:50%;flex:none;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(168,85,247,.35);margin:2px 0}}
@media (prefers-reduced-motion:reduce){.sjp-rail{pointer-events:auto;width:56px;max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 6px;background:rgba(250,250,252,.94);border-radius:0 20px 20px 0;box-shadow:0 2px 10px rgba(0,0,0,.25);scrollbar-width:none;transition:transform .2s ease}}

/* Jordy page: sections */
.jm-sec{margin:36px 0 0;scroll-margin-top:84px}
.jm-sec>h2{margin:0 0 12px;font-size:1.25rem;font-weight:800;color:var(--head)}
.jm-sec>p.sub{margin:-6px 0 14px;color:var(--mut);font-weight:600;font-size:.92rem}
/* Photos */
.ph-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ph{display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;border-radius:16px;overflow:hidden;background:#000;cursor:zoom-in;position:relative;box-shadow:0 2px 10px rgba(0,0,0,.25);-webkit-tap-highlight-color:transparent}
.ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
/* Lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,8,18,.92);display:flex;align-items:center;justify-content:center;padding:56px 12px 64px}
.lb[hidden]{display:none}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}
.lb img{display:block;width:auto;height:auto;object-fit:contain;max-width:92vw;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);border-radius:10px;cursor:zoom-out;background:#000}
.lb figcaption{color:#e5e7eb;font-weight:700;text-align:center;font-size:.92rem;max-width:520px}
.lb-x,.lb-prev,.lb-next{position:absolute;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:1.7rem;line-height:1;width:48px;height:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.lb-x{top:max(10px,env(safe-area-inset-top));right:10px;font-size:2rem}
.lb-prev,.lb-next{bottom:max(10px,env(safe-area-inset-bottom))}
.lb-prev{left:calc(50% - 60px)}.lb-next{left:calc(50% + 12px)}
.lb-x:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.3)}
.lb-x:focus-visible,.lb-prev:focus-visible,.lb-next:focus-visible{outline:3px solid #facc15;outline-offset:3px}
/* Music list (matches Base44 Music tab) */
.mus-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mus-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:10px 14px 10px 10px;border-radius:20px;background:#f0fdfa;border:2px solid #ccfbf1;color:#0f172a}
.mus-row.is-current{border-color:#2dd4bf}
.mus-row img{width:64px;height:64px;border-radius:16px;object-fit:cover;display:block}
.mus-meta{min-width:0}
.mus-meta b{display:block;font-size:1.02rem;line-height:1.25;color:#111827;overflow-wrap:anywhere}
.mus-meta span{display:block;color:#6b7280;font-weight:700;font-size:.95rem;margin-top:2px}
.mus-play{width:48px;height:48px;border-radius:50%;border:0;padding:0;background:linear-gradient(135deg,#c084fc,#ec4899);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.mus-play svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mus-play .i-pause{display:none}.mus-row.is-playing .mus-play .i-play{display:none}.mus-row.is-playing .mus-play .i-pause{display:block}
a.buy{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:2px solid #e9d5ff;color:#7e22ce!important;font-weight:800;font-size:.95rem;text-decoration:none;white-space:nowrap}
a.buy:hover{background:#faf5ff}
.mus-note{margin:10px 2px 0;color:var(--mut);font-size:.88rem;font-weight:700;min-height:1.3em}
@media (max-width:520px){
 .ph-grid{gap:10px}
 .mus-row{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"c m p" "b b b";gap:10px 12px}
 .mus-row img{width:56px;height:56px;grid-area:c}.mus-meta{grid-area:m}.mus-play{grid-area:p}
 a.buy{grid-area:b;width:100%}
}

/* header music button (shown while the player is collapsed) */
.sjp-hb{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
html.light .sjp-hb{color:#1e1b3a;background:rgba(255,255,255,.5)}
.sjp-hb[hidden]{display:none}
.sjp-hb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sjp-hb.is-playing{background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff}
.sjp-tab img{width:30px;height:30px;border-radius:9px}
/* panel never covers the page on wide desktops: fit it in the left margin */
@media (min-width:1240px){.sjp-panel{width:calc((100vw - 680px)/2 - 72px)}.sjp-ph img{width:44px;height:44px}.sjp-item{grid-template-columns:36px 1fr auto}.sjp-item img{width:36px;height:36px}}

/* calmer Jordy page */
#videos .ep-pill{display:none}
#videos{margin-top:8px}
#videos .ep{margin:0 0 24px}#videos .ep:last-child{margin-bottom:0}

/* paid songs: owned state, download links */
.sjp-item .dl{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(20,184,166,.18);color:#14b8a6}
.sjp-item .dl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sjp-item.is-owned{grid-template-columns:40px 1fr auto auto}
.sjp-item.is-owned .t i{color:#14b8a6}
a.buy.owned{background:#14b8a6;border-color:#14b8a6;color:#fff!important}
a.buy.owned:hover{background:#0d9488}
/* grown-up check before checkout */
.gate{position:fixed;inset:0;z-index:120;background:rgba(8,8,18,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.gate-box{width:min(420px,100%);background:var(--card,#24263a);color:var(--txt,#dfe2f0);border:1px solid var(--line,#34374f);border-radius:22px;padding:22px 20px;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.gate-box h3{margin:0 0 8px;font-size:1.3rem}
.gate-box p{margin:0 0 12px;font-weight:600}
.gate-box label{display:block;font-weight:800;margin:0 0 6px}
.gate-box input{width:100%;font:inherit;font-size:1.3rem;padding:10px 14px;border-radius:14px;border:2px solid var(--line,#34374f);background:var(--input,#191a27);color:var(--txt,#dfe2f0)}
.gate-err{min-height:1.3em;color:#f87171;font-weight:800;margin:8px 0!important}
html.light .gate-err{color:#b91c1c}
.gate-btns{display:flex;gap:10px;flex-wrap:wrap}.gate-btns .btn{flex:1 1 140px;font-size:1rem;padding:12px 16px;cursor:pointer;border:0}
.gate-btns .btn.ghost{border:2px solid var(--line,#34374f)}
.gate-btns .btn[disabled]{opacity:.7;cursor:wait}
/* thank-you page */
.song-thanks{text-align:center;padding:8px 0 16px}
.song-thanks .cover{width:160px;height:160px;border-radius:28px;object-fit:cover;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.song-thanks h1{margin:14px 0 4px;font-size:1.7rem}
.song-thanks .by{margin:0 0 18px;color:var(--mut);font-weight:800}
.dl-big{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;margin:0 auto 12px;min-height:68px;border-radius:999px;background:linear-gradient(90deg,#10b981,#14b8a6);color:#fff!important;font-weight:900;font-size:1.35rem;text-decoration:none;box-shadow:0 6px 18px rgba(16,185,129,.35)}
.dl-big svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.song-thanks .tip{max-width:460px;margin:14px auto 0;color:var(--mut);font-weight:600;font-size:.95rem}
.song-thanks .st{font-weight:800;font-size:1.1rem}
.song-thanks .st.err{color:#f87171}
html.light .song-thanks .st.err{color:#b91c1c}
.song-thanks .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
