/* RIVET streaming-style course/skill library */
.lib-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin:clamp(18px,2.4vw,30px) 0 clamp(20px,2.6vw,32px); }
.lib-search { position:relative; flex:1; min-width:220px; max-width:360px; }
.lib-search input { width:100%; font-family:inherit; font-size:0.95rem; padding:11px 14px 11px 38px; border:1px solid var(--line); border-radius:var(--r-pill,999px); background:#fff; color:var(--ink); }
.lib-search input:focus { outline:2px solid var(--violet); outline-offset:1px; border-color:var(--violet); }
.lib-search svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--fg-mute); }
.lib-filters { display:flex; flex-wrap:wrap; gap:8px; }
.lib-chip { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.03em; color:var(--fg-soft); background:var(--paper-2,#f3f1f8); border:1px solid var(--line); border-radius:var(--r-pill,999px); padding:8px 15px; cursor:pointer; transition:.16s; }
.lib-chip:hover { border-color:color-mix(in oklab,var(--violet) 40%,var(--line)); color:var(--ink); }
.lib-chip[aria-pressed="true"] { background:var(--violet); border-color:var(--violet); color:#fff; }
.lib-count { font-family:var(--font-mono); font-size:0.72rem; color:var(--fg-mute); margin-left:auto; }

.lib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:clamp(14px,1.8vw,22px); }
.lib-card { position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--card-shadow); text-align:left; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; padding:0; font:inherit; color:inherit; }
.lib-card:hover { transform:translateY(-6px); box-shadow:var(--card-shadow-hover,0 26px 50px -26px rgba(0,0,0,.45)); }
.lib-card:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
.lib-card__top { position:relative; aspect-ratio:16/10; padding:16px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; background:linear-gradient(150deg, color-mix(in oklab,var(--gc) 78%,#000), var(--gc)); }
.lib-card__top::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 85% 8%, rgba(255,255,255,.22), transparent 60%); pointer-events:none; }
.lib-card__cat { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; opacity:.9; }
.lib-card__title { font-size:1.12rem; line-height:1.2; letter-spacing:-0.01em; margin:0; padding-right:40px; text-wrap:balance; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lib-card__play { position:absolute; right:14px; bottom:14px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); }
.lib-card__body { padding:13px 15px 15px; display:flex; flex-direction:column; gap:8px; }
.lib-card__meta { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--fg-mute); }
.lib-card__desc { font-size:0.86rem; line-height:1.5; color:var(--fg-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lib-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill,999px); border:1px solid var(--line); }
.lib-badge__dot { width:6px; height:6px; border-radius:50%; }
.lib-badge--available { color:#0a7a4b; border-color:color-mix(in oklab,var(--green) 45%,var(--line)); }
.lib-badge--available .lib-badge__dot { background:var(--green); }
.lib-badge--soon { color:#9a6a12; border-color:color-mix(in oklab,var(--amber) 50%,var(--line)); }
.lib-badge--soon .lib-badge__dot { background:var(--amber); }
.lib-card--soon .lib-card__top { filter:saturate(.7); }
.lib-empty { grid-column:1/-1; text-align:center; padding:40px 0; color:var(--fg-mute); font-family:var(--font-mono); font-size:0.82rem; }

/* modal */
.lib-modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.lib-modal[hidden] { display:none; }
.lib-modal__backdrop { position:absolute; inset:0; background:rgba(10,6,20,.55); backdrop-filter:blur(6px); }
.lib-modal__panel { position:relative; width:100%; max-width:560px; max-height:86vh; overflow:auto; background:#fff; border-radius:20px; box-shadow:0 40px 90px -30px rgba(0,0,0,.55); }
.lib-modal__hero { padding:26px 28px; color:#fff; background:linear-gradient(150deg, color-mix(in oklab,var(--gc) 78%,#000), var(--gc)); }
.lib-modal__cat { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; opacity:.9; }
.lib-modal__title { font-size:1.7rem; line-height:1.15; letter-spacing:-0.02em; margin:8px 0 0; }
.lib-modal__body { padding:24px 28px 28px; }
.lib-modal__meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.lib-modal__chip { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.02em; color:var(--fg-soft); background:var(--paper-2,#f3f1f8); border:1px solid var(--line); border-radius:var(--r-pill,999px); padding:6px 12px; }
.lib-modal__lead { font-size:1rem; line-height:1.6; color:var(--ink); margin:0 0 18px; text-wrap:pretty; }
.lib-modal__inc { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; }
.lib-modal__inc li { position:relative; padding-left:24px; font-size:0.92rem; color:var(--fg-soft); line-height:1.45; }
.lib-modal__inc li::before { content:""; position:absolute; left:2px; top:7px; width:11px; height:11px; border-radius:50%; border:2px solid var(--violet); }
.lib-modal__cta { display:flex; flex-wrap:wrap; gap:10px; }
.lib-modal__x { position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:none; background:rgba(255,255,255,.9); color:var(--ink); font-size:1.1rem; cursor:pointer; line-height:1; }
.lib-modal__x:hover { background:#fff; }
.lib-modal__note { font-family:var(--font-mono); font-size:0.7rem; color:var(--fg-mute); margin:14px 0 0; }
body.lib-open { overflow:hidden; }
@media (max-width:520px){ .lib-modal__title { font-size:1.4rem; } .lib-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } }