/* Shared home/music showcase; reuse existing site tokens without changing other LABs. */
.youtube-music { margin-block:2.5rem; scroll-margin-top:6rem; color:var(--text); }
.youtube-music *, .youtube-music *::before, .youtube-music *::after { box-sizing:border-box; min-width:0; }
.youtube-music-inner { border-top:1px solid var(--border); padding-top:2rem; }
.youtube-music-heading { display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:1rem; margin-bottom:var(--landing-heading-gap, 1.5rem); }
.youtube-music-heading .label-mono { margin:0 0 .5rem; }
.youtube-music-heading h2 { margin:0; font-size:var(--landing-section-title-size, 1.75rem); line-height:1.4; font-weight:800; letter-spacing:-.02em; overflow-wrap:anywhere; }
.youtube-music-description { margin:.5rem 0 0; color:var(--muted); font-size:var(--landing-description-size, .95rem); line-height:1.7; }
.youtube-music-more { display:inline-flex; align-items:center; min-height:44px; color:var(--brand-accent-text); font-weight:700; font-size:.9rem; }
.youtube-music-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap:var(--landing-grid-gap, 1.5rem); }
.youtube-music-card { display:flex; flex-direction:column; overflow:hidden; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .15s, box-shadow .15s; }
.youtube-music-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-md); }
.youtube-music-card.is-video-open { border-color:var(--brand-accent); }
.youtube-music-cover { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--border); background:var(--bg-soft); }
.youtube-music-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.youtube-music-play-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:48px; height:48px; padding-left:3px; border:1px solid #ffffff50; border-radius:50%; color:#fff; background:#000b; font-size:1.2rem; }
.youtube-music-duration { position:absolute; bottom:.5rem; right:.5rem; padding:.1rem .35rem; border-radius:3px; color:#fff; background:#000d; font-size:.72rem; line-height:1.6; font-variant-numeric:tabular-nums; }
.youtube-music-card-copy { display:flex; flex-direction:column; flex:1; padding:var(--landing-card-inset, 1.25rem); }
.youtube-music-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.4rem .8rem; color:var(--muted); font-size:.75rem; line-height:1.7; }
.youtube-music-meta span:first-child { color:var(--brand-accent-text); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.youtube-music-meta span:last-child { font-variant-numeric:tabular-nums; }
.youtube-music-card h3 { margin:.6rem 0 1rem; color:var(--text); font-size:var(--landing-card-title-size, 1.125rem); font-weight:700; line-height:1.45; letter-spacing:-.02em; overflow-wrap:anywhere; }
.youtube-music-actions { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem .8rem; margin-top:auto; }
.youtube-music-watch { display:inline-flex; justify-content:center; align-items:center; gap:.4rem; min-height:44px; padding:.5rem .85rem; border:1px solid var(--cta); border-radius:7px; background:var(--cta); color:var(--cta-text); font:inherit; font-size:.82rem; font-weight:700; }
.youtube-music-watch:hover { background:var(--cta-hover); color:var(--cta-hover-text); }
.youtube-music-external { display:inline-flex; align-items:center; min-height:44px; color:var(--brand-accent-text); font-size:.82rem; font-weight:700; }
.youtube-music-note { margin:.85rem 0 0; color:var(--muted); font-size:.8rem; line-height:1.8; }
.youtube-music :is(a,button):focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.youtube-music .youtube-music-cover:focus-visible { outline-offset:-4px; }
.youtube-music-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.youtube-music-dialog { width:min(960px, calc(100% - 2rem)); max-height:calc(100dvh - 2rem); padding:1.25rem; overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); color:var(--text); }
.youtube-music-dialog::backdrop { background:#000b; }
.youtube-music-dialog-heading { display:flex; justify-content:space-between; align-items:start; gap:1rem; margin-bottom:1rem; }
.youtube-music-dialog-heading .label-mono { margin:0 0 .35rem; font-size:.7rem; color:var(--muted); }
.youtube-music-dialog-heading h3 { margin:0; font-size:1.2rem; line-height:1.5; overflow-wrap:anywhere; }
.youtube-music-close { flex-shrink:0; display:flex; align-items:center; gap:.65rem; min-height:44px; padding:.5rem .8rem; border:1px solid var(--border); border-radius:7px; background:var(--bg-soft); color:var(--text); cursor:pointer; font:inherit; font-size:.85rem; }
.youtube-music-close span { font-size:1.3rem; }
.youtube-music-player-mount { width:100%; aspect-ratio:16/9; min-height:200px; background:#000; }
.youtube-music-player-mount iframe { display:block; width:100%; height:100%; min-height:200px; border:0; }
.youtube-music-dialog-note { margin:1rem 0 0; font-size:.85rem; line-height:1.8; color:var(--muted); overflow-wrap:anywhere; }
.youtube-music-dialog-note a { color:var(--brand-accent-text); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:400px) { .youtube-music-dialog { padding:.75rem; }.youtube-music-dialog-heading { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { .youtube-music-card { transition:none; } }