.kaml-library { --kaml-rule:rgba(127,127,127,.28); --kaml-player-clearance:140px; margin:1.5rem 0 0; padding-bottom:calc(var(--kaml-player-clearance) + env(safe-area-inset-bottom,0px)); color:inherit; font:inherit; }
.kaml-library [hidden] { display:none !important; }
.kaml-library .kaml-artwork > .kaml-collection-link { display:block; height:100%; color:inherit; }
.kaml-library .kaml-collection-title > .kaml-collection-link { color:inherit; font:inherit; text-decoration:none; }
.kaml-library .kaml-collection-title > .kaml-collection-link:hover { text-decoration:underline; }
.kaml-library.kaml-single { margin-top:0; padding-bottom:0; }
.kaml-library .kaml-categories { display:flex; flex-wrap:wrap; gap:.65rem 1.7rem; margin:0 0 2rem; padding:0 0 1rem; border-bottom:1px solid var(--kaml-rule); }
.kaml-library .kaml-categories button { background:none; color:inherit; font:inherit; border:0; border-radius:0; box-shadow:none; cursor:pointer; padding:.4rem 0; text-decoration:none; font-weight:600; border-bottom:2px solid transparent; }
.kaml-library .kaml-categories button[aria-pressed="true"] { border-bottom-color:currentColor; }
.kaml-library .kaml-categories button:hover { text-decoration:underline; }
.kaml-library :is(a,button):focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.kaml-library .kaml-category-title { margin:0 0 2rem; }
.kaml-library .kaml-collection { display:grid; grid-template-columns:220px minmax(0,1fr); gap:2.25rem; margin:0; padding:2.5rem 0; border-bottom:1px solid var(--kaml-rule); }
.kaml-library .kaml-collection:first-child { padding-top:0; }
.kaml-library .kaml-artwork { width:220px; aspect-ratio:1; align-self:start; overflow:hidden; background:rgba(127,127,127,.08); }
.kaml-library .kaml-artwork img { width:100%; height:100%; aspect-ratio:1; object-fit:contain; display:block; margin:0; }
.kaml-library .kaml-artwork .kaml-artwork-deferred { display:none; }
.kaml-library[data-kaml-ready] .kaml-artwork .kaml-artwork-deferred { display:block; }
.kaml-library .kaml-artwork-fallback { display:flex; align-items:center; justify-content:center; height:100%; padding:1rem; text-align:center; font-size:.85em; }
.kaml-library .kaml-collection-content { min-width:0; }
.kaml-library .kaml-collection-title { margin:0 0 .65rem; line-height:1.3; overflow-wrap:anywhere; }
.kaml-library .kaml-summary { margin:0; font-size:.9em; }
.kaml-library .kaml-album-controls { min-height:1.5rem; }
.kaml-library .kaml-tracks { list-style:none; margin:0; padding:0; }
.kaml-library .kaml-track { display:grid; grid-template-columns:2.5ch minmax(0,1fr) 6ch 1.8rem 1.8rem; gap:.65rem; align-items:center; margin:0; padding:.8rem 0; border-bottom:1px solid var(--kaml-rule); font-size:.95em; }
.kaml-library .kaml-track-number,.kaml-library .kaml-duration { font-variant-numeric:tabular-nums; }
.kaml-library .kaml-duration { text-align:right; }
.kaml-library .kaml-track-title { overflow-wrap:anywhere; line-height:1.5; }
.kaml-library .kaml-track-status { display:block; font-size:.85em; font-style:italic; }
.kaml-library .kaml-unavailable .kaml-track-title { text-decoration:none; }
.kaml-library .kaml-expand { display:inline-block; background:none; color:inherit; border:0; border-bottom:1px solid currentColor; border-radius:0; box-shadow:none; padding:.3rem 0; margin:1rem 0 0; font:inherit; font-size:.9em; text-transform:none; letter-spacing:normal; cursor:pointer; }
@media (max-width:900px) { .kaml-library .kaml-collection { gap:1.5rem; grid-template-columns:180px minmax(0,1fr); } .kaml-library .kaml-artwork { width:180px; } }
@media (max-width:640px) { .kaml-library .kaml-collection { grid-template-columns:minmax(0,1fr); gap:1.2rem; padding:2rem 0; } .kaml-library .kaml-artwork { width:160px; } .kaml-library .kaml-track { grid-template-columns:2ch minmax(0,1fr) 6ch 1.3rem 1.3rem; gap:.35rem; } .kaml-library .kaml-categories { gap:.5rem 1.2rem; } }
/* Collection slots retain measured flow while their complete nodes are detached. */
.kaml-library .kaml-slot { display:flow-root; overflow-anchor:none; }
.kaml-library .kaml-slot > .kaml-collection { padding-top:2.5rem; }
.kaml-library .kaml-slot:first-child > .kaml-collection { padding-top:0; }
.kaml-library .kaml-placeholder { margin:0; padding:2.5rem 0; font:inherit; }
.kaml-library .kaml-placeholder button { background:none; border:0; color:inherit; font:inherit; cursor:pointer; }
@media (max-width:640px) { .kaml-library .kaml-slot > .kaml-collection { padding-top:2rem; } }
.kaml-library [data-kaml-action] { font:inherit; color:inherit; background:transparent; border:1px solid var(--kaml-rule); border-radius:3px; padding:.35rem; cursor:pointer; }
.kaml-library [data-kaml-action]:disabled { opacity:.4; cursor:default; }
.kaml-library [data-kaml-state="playing"] { outline:2px solid currentColor; }
.kaml-library .kaml-album-controls { display:flex; flex-wrap:wrap; gap:.6rem; padding:.75rem 0; }
.kaml-feedback { position:fixed; z-index:99999; bottom:155px; left:1rem; max-width:min(34rem,calc(100vw - 2rem)); padding:.7rem 1rem; background:#222; color:#fff; font-size:14px; border-radius:3px; }
.kaml-feedback:empty { display:none; }
.kaml-dialog { max-width:min(32rem,90vw); padding:1.5rem; background:#fff; color:#222; border:1px solid #777; }
.kaml-dialog::backdrop { background:rgba(0,0,0,.6); }
.kaml-dialog button { margin:.4rem; padding:.6rem; font:inherit; cursor:pointer; }
.kaml-dialog button:focus-visible { outline:3px solid #222; outline-offset:3px; }
/* Reserved slots and mounted controls have identical height, preserving measurements. */
.kaml-library .kaml-play-space,.kaml-library .kaml-queue-space { display:block; height:2rem; }
.kaml-library .kaml-track [data-kaml-action] { box-sizing:border-box; height:2rem; min-width:0; padding:0; line-height:1; }
.kaml-library .kaml-track-number { white-space:nowrap; }
@media (max-width:640px) { .kaml-library .kaml-track { grid-template-columns:2.5ch minmax(0,1fr) 6ch 2rem 2rem; } }