/* ===== Learn / Library cards (Nov 2026 redesign — one card pattern) ===== */
.lp-lib-hero { padding-bottom:2.2rem; }
.lp-lib-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem; margin-top:1.3rem; }
.lp-lib-fbtn { font:600 0.88rem var(--sans); min-height:44px; padding:0 1.15rem; border-radius:var(--radius-pill); border:1px solid var(--line-2); background:var(--panel); color:var(--text-2); box-shadow:none; }
.lp-lib-fbtn:hover { background:var(--panel-2); transform:none; box-shadow:none; }
.lp-lib-fbtn.is-on { background:var(--plum); border-color:var(--plum); color:#fff; }
.lp-lib-count { margin:0.9rem 0 0; font-size:0.82rem; color:var(--muted); }
.lp-lib { padding-top:0.5rem; }
.lp-lib-group { margin-top:2.4rem; }
.lp-lib-ghead { display:flex; align-items:baseline; flex-wrap:wrap; gap:0.4rem 0.9rem; margin-bottom:0.9rem; }
.lp-lib-ghead h2 { font-size:1.5rem; }
.lp-lib-ghead p { margin:0; color:var(--muted); font-size:0.94rem; }
.lp-lib-grid { display:grid; gap:1rem; }
.lp-cols-1 { grid-template-columns:minmax(0,1fr); }
.lp-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lp-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px) { .lp-cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.lp-lib-other { display:flex; align-items:center; gap:0.5rem; margin:1.2rem 0 0.7rem; font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#4a4e57; }
.lp-lib-other svg { width:14px; height:14px; }
.lp-lib-other::after { content:""; flex:1; border-top:1px solid #cfc9bf; }
/* "Start here" with an odd count: the last card spans the row instead of sitting alone */
.lp-lib-feat.lp-cols-2 > .lp-lc:last-child:nth-child(odd) { grid-column:1 / -1; }
.lp-lib-empty { padding:2.5rem 0; text-align:center; color:var(--muted); }

.lp-lc { display:flex; flex-direction:column; gap:0.6rem; background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.25rem 1.25rem 1.1rem; box-shadow:0 6px 18px rgba(39,43,54,.08); color:var(--text); text-decoration:none; transition:transform .15s, box-shadow .15s, border-color .15s; }
.lp-lc:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(39,43,54,.12); border-color:var(--gold); color:var(--text); }
.lp-lc-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem; min-height:24px; }
.lp-lc-kind { display:inline-flex; align-items:center; gap:0.45rem; }
.lp-lc-ic { display:inline-flex; color:var(--gold-2); }
.lp-lc-type { font-size:0.74rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-2); }
.lp-lc-chip { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.74rem; font-weight:600; padding:0.2rem 0.65rem; border-radius:var(--radius-pill); white-space:nowrap; }
.lp-lc-chip-done { background:#e3efe6; color:#2f5d3a; }
.lp-lc-chip-progress { background:#f1e7d6; color:#7a5418; }
.lp-lc-chip-locked { background:#4a4e57; color:#fff; }
.lp-lc-chip-members { background:#e6e4e0; color:#4a4e57; }
.lp-lc-name { margin:0; font-size:1.3rem; line-height:1.2; }
.lp-lc-desc { margin:0; font-size:0.85rem; line-height:1.5; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lp-lc-bar { height:6px; border-radius:99px; background:var(--bg-2); overflow:hidden; }
.lp-lc-bar i { display:block; height:100%; background:var(--gold); border-radius:99px; }
.lp-lc-foot { margin-top:auto; padding-top:0.75rem; border-top:1px solid var(--bg-2); display:flex; align-items:center; justify-content:space-between; gap:0.6rem; }
.lp-lc-meta { font-size:0.8rem; color:var(--muted); }
.lp-lc-cta { display:inline-flex; align-items:center; min-height:36px; padding:0 1rem; border-radius:var(--radius-pill); background:var(--plum); color:#fff; font-size:0.86rem; font-weight:600; white-space:nowrap; }
.lp-lc-done .lp-lc-cta { background:transparent; color:var(--text); border:1px solid var(--text); }
/* Not in their plan: still a card, but quieter than what they can open */
.lp-lc-locked { background:#e6e1d8; border-color:#cfc9bf; box-shadow:none; padding:1.1rem 1.15rem 1rem; }
.lp-lc-locked:hover { transform:none; box-shadow:none; border-color:#b7b8bb; }
.lp-lc-locked .lp-lc-name { color:#4a4e57; font-size:1.2rem; }
.lp-lc-locked .lp-lc-type, .lp-lc-locked .lp-lc-ic, .lp-lc-locked .lp-lc-desc { color:#595d66; }
.lp-lc-locked .lp-lc-foot { border-top-color:#d3ccc1; }
.lp-lc-locked .lp-lc-cta, .lp-lc-members .lp-lc-cta { background:transparent; color:#4a4e57; border:1px solid #9c9fa6; }
/* "Start here" — dark, two per row, full description */
.lp-lc-feature { background:var(--plum); border-color:var(--plum); color:#f7f5f1; padding:1.5rem 1.5rem 1.25rem; }
.lp-lc-feature:hover { color:#f7f5f1; border-color:var(--gold); }
.lp-lc-feature .lp-lc-name { color:#fff; font-size:1.55rem; }
.lp-lc-feature .lp-lc-desc { display:block; -webkit-line-clamp:unset; overflow:visible; color:#cfd1d6; font-size:0.95rem; line-height:1.55; max-width:62ch; }
.lp-lc-feature .lp-lc-type, .lp-lc-feature .lp-lc-ic { color:#d9c8bf; }
.lp-lc-feature .lp-lc-meta { color:#c3c6cc; }
.lp-lc-feature .lp-lc-foot { border-top-color:#3d4352; }
.lp-lc-feature .lp-lc-cta { background:var(--gold); color:#fff; }
.lp-lc-feature.lp-lc-done .lp-lc-cta, .lp-lc-feature.lp-lc-locked .lp-lc-cta, .lp-lc-feature.lp-lc-members .lp-lc-cta { background:transparent; color:#fff; border:1px solid #d9c8bf; }
.lp-lc-feature .lp-lc-bar { background:#3d4352; }
.lp-lc-feature .lp-lc-bar i { background:#d9c8bf; }
.lp-lc-feature.lp-lc-locked { background:var(--plum-2); }
.lp-lc-feature.lp-lc-locked .lp-lc-name { color:#e4e5e8; }
.lp-lc-feature.lp-lc-locked .lp-lc-desc { color:#c3c6cc; }

/* Phones: compact list rows (icon · title + length · chip) */
@media (max-width:600px) {
  .lp-lib-filters { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; margin-left:-16px; margin-right:-16px; padding:0 16px 4px; scrollbar-width:none; }
  .lp-lib-fbtn { flex:none; min-height:40px; }
  .lp-lib-group { margin-top:1.6rem; }
  .lp-lib-ghead h2 { font-size:1.2rem; }
  .lp-lib-ghead p { display:none; }
  .lp-lib-grid { display:block; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .lp-lc, .lp-lc-feature, .lp-lc-locked { display:grid; grid-template-columns:40px minmax(0,1fr) auto; grid-template-areas:"ic name chip" "ic meta chip" "ic bar bar"; column-gap:0.75rem; row-gap:0.1rem; align-items:center; padding:0.75rem 0.9rem; border:0; border-top:1px solid var(--bg-2); border-radius:0; box-shadow:none; background:transparent; color:var(--text); min-height:64px; }
  .lp-lc:first-child { border-top:0; }
  .lp-lc:hover { transform:none; box-shadow:none; }
  .lp-lc-top, .lp-lc-kind, .lp-lc-foot { display:contents; }
  .lp-lc-ic { grid-area:ic; width:40px; height:40px; border-radius:12px; background:var(--panel-2); align-items:center; justify-content:center; color:var(--gold-2) !important; }
  .lp-lc-type, .lp-lc-desc, .lp-lc-cta { display:none !important; }
  .lp-lc-name, .lp-lc-feature .lp-lc-name, .lp-lc-locked .lp-lc-name { grid-area:name; font-size:1.02rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lp-lc-meta, .lp-lc-feature .lp-lc-meta { grid-area:meta; font-size:0.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lp-lc-chip { grid-area:chip; font-size:0.7rem; }
  .lp-lc-bar, .lp-lc-feature .lp-lc-bar { grid-area:bar; height:4px; margin-top:0.3rem; background:var(--bg-2); }
  .lp-lc-feature .lp-lc-bar i { background:var(--gold); }
  .lp-lc-locked .lp-lc-name { color:#595d66; }
  .lp-lc-locked .lp-lc-ic { background:#efece7; color:#8a8d94 !important; }
  .lp-lc-chip-locked { background:#e6e4e0; color:#4a4e57; }
  .lp-lc-locked + .lp-lc-locked, .lp-lc-locked { background:transparent; }
  .lp-lib-other { margin:1rem 0 0.5rem; }
  .lp-lc-feature.lp-lc-locked { background:transparent; }
  .lp-lc-feature.lp-lc-locked .lp-lc-meta { color:var(--muted); }
  .lp-lc-feature.lp-lc-locked .lp-lc-name { color:#595d66; }
  /* Under the "In other plans" divider a lock is enough — keeps room for the title */
  .lp-lib-other + .lp-lib-grid .lp-lc-chip-locked .lp-lc-chiptxt { display:none; }
  .lp-lib-other + .lp-lib-grid .lp-lc-chip-locked { padding:0.3rem; }
  .lp-lc-chip-locked svg { width:14px; height:14px; }
}