/* =============================================================
   The library: chip sorter, cards, status badges.
   Shared by /teachers/ and /parents/, which run the same library
   over different cards. Tokens come from colors_and_type.css;
   no new colours, no new fonts.
   ============================================================= */
/* ---------- library ---------- */
.library{padding-top:72px;padding-bottom:88px}
.library .head{max-width:var(--max-prose);margin-bottom:36px}
.library h2{font-family:var(--font-display);font-weight:300;font-optical-sizing:auto;font-size:var(--fs-h1);letter-spacing:-.01em}

/* Filters read as the sorting game: you are sorting cards into piles. */
.sorter{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.sorter .row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sorter .lbl{font-size:var(--fs-micro);font-weight:var(--fw-semibold);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--fg-subtle);flex:0 0 92px}
.chip{font:inherit;font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--ink-700);
  background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-pill);
  padding:7px 16px;cursor:pointer;transition:all var(--dur-fast) var(--ease-standard)}
.chip:hover{border-color:var(--teal-600);color:var(--teal-800)}
.chip[aria-pressed="true"]{background:var(--teal-700);border-color:var(--teal-700);color:#fff}
.chip:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--shadow-focus)}
.sorter .hint{font-size:var(--fs-micro);color:var(--fg-subtle);max-width:44ch}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.rcard{display:flex;flex-direction:column;gap:14px;background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);padding:26px 26px 22px;text-decoration:none;color:var(--fg-default);
  box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.rcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px) rotate(-.4deg);color:var(--fg-default)}
.rcard[hidden]{display:none}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:var(--fs-micro);font-weight:var(--fw-semibold);padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--surface-sunken);color:var(--ink-500)}
.tag--unplugged{background:var(--bg-warm-soft);color:var(--coral-700);display:inline-flex;align-items:center;gap:5px}
.tag--unplugged svg{width:11px;height:11px;stroke:var(--coral-600);fill:none;stroke-width:2;stroke-linecap:round}
.rcard h3{font-size:var(--fs-h3);margin:0;letter-spacing:var(--ls-tight)}
.rcard .desc{font-size:var(--fs-small);color:var(--fg-muted);margin:0;flex:1}
.rcard .foot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--border-subtle);padding-top:14px}
.rcard .ailit{font-size:var(--fs-micro);color:var(--fg-subtle)}
.rcard .go{margin-left:auto;font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--teal-700);white-space:nowrap}
.free{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--success-700);background:var(--success-100);padding:4px 10px;border-radius:var(--radius-pill)}
.paid{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--coral-700);background:var(--bg-warm-soft);padding:4px 10px;border-radius:var(--radius-pill)}

/* Status is the first thing on every card, because "can I open this today?" is
   the first question. Two states only: openable now, or dated. */
.st{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:6px}
.st--now{background:var(--success-100);color:var(--success-700)}
.st--now::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success-700)}
.st--soon{background:var(--surface-sunken);color:var(--ink-500)}
/* A dated card is a <div>: nothing to tap, nothing to focus, no promise of a
   page that is not there yet. */
.rcard--soon{pointer-events:none;opacity:.72}
.rcard--soon .go{color:var(--fg-subtle);font-weight:var(--fw-semibold)}
.rcard--soon:hover{box-shadow:var(--shadow-xs);transform:none}

.empty{display:none;background:var(--surface-sunken);border-radius:var(--radius-lg);padding:40px;text-align:center;color:var(--fg-muted)}
.empty.show{display:block}
.empty button{font:inherit;font-weight:var(--fw-semibold);color:var(--teal-700);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- shop furniture ----------
   The library is a shop, not an article: the shelf says how much is on it.
   Prices are deliberately NOT on the cards — the price lives on the Buy button
   and in lib/products.js, so there is one place to change when it changes.

   The sorter scrolls with the page. It was sticky, which worked while it was
   two rows of chips: /teachers/ now carries six, and on a phone each row wraps
   to two or three lines. Stuck under the 64px header and the 56px page-anchor
   bar, that filled most of a laptop screen and nearly all of a phone one, so
   the cards it filters had a slot to appear in and no room to be read.

   The filters stay one tap away without it: .pagenav is sticky at every width
   and its first link is "The library", which lands on the heading directly
   above these chips. */
.sorter{background:var(--surface-page);
  padding:16px 0 14px;margin-bottom:20px;border-bottom:1px solid var(--border-subtle)}
.countrow{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.count{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--fg-subtle);margin:0}
.clear{font:inherit;font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--teal-700);
  background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.clear:hover{color:var(--teal-800)}
.clear:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
.clear[hidden]{display:none}