/*
 * Koydo Flashcards — Phase 2 screen styling
 * Library · Study · Exam · Progress · Settings
 * Consumes the shell tokens from app.css (--brand-*, --surface-*, --ink-*,
 * --sp-*, --r-*, --shadow-*, --fs-*). Card visuals come from koydo-cards.css.
 */

/* Subject accent map (mirrors koydo-cards subject hues, for deck covers/pills) */
:root {
  --subj-math:#7c3aed; --subj-science:#0891b2; --subj-ela:#e11d48; --subj-social:#d97706;
  --subj-music:#db2777; --subj-art:#ea580c; --subj-bio:#059669; --subj-chem:#ca8a04;
  --subj-physics:#2563eb; --subj-astro:#4f46e5; --subj-history:#b45309; --subj-geo:#0d9488;
  --subj-cs:#65a30d; --subj-phil:#8b5cf6; --subj-sel:#f97316; --subj-anatomy:#ef4444;
}

/* Let app screens use the full canvas — override the 900px reading cap */
#screen-library, #screen-study, #screen-exam, #screen-progress, #screen-settings {
  max-width: 1180px;
}
#screen-study { max-width: none; }

/* ── Shared bits ─────────────────────────────────────────────── */
.eyebrow-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.muted { color: var(--ink-tertiary); }
.subject-pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size: var(--fs-label-sm); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color: var(--_c, var(--ink-secondary));
  background: color-mix(in oklab, var(--_c, #888) 10%, white);
  border: 1px solid color-mix(in oklab, var(--_c, #888) 28%, white);
  padding: 4px 10px; border-radius: var(--r-full);
}
.subject-pill .dot { width:7px; height:7px; border-radius:50%; background: var(--_c, #888); }

/* ════════════════════════════════════════════════════════════
   LIBRARY
   ════════════════════════════════════════════════════════════ */
.lib-hero { margin-bottom: var(--sp-6); }
.lib-sellingpoints { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top: var(--sp-3); }
.sell-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size: var(--fs-body-sm); font-weight:600; color: var(--ink-secondary);
  background: var(--surface-elevated); border:1px solid var(--border-subtle);
  padding:6px 12px; border-radius: var(--r-full); box-shadow: var(--shadow-sm);
}
.sell-chip svg { width:14px; height:14px; }

.lib-filters { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin: var(--sp-5) 0 var(--sp-6); }
.filter-pill {
  font-size: var(--fs-body-sm); font-weight:600; color: var(--ink-secondary);
  background: var(--surface-elevated); border:1px solid var(--border-subtle);
  padding:7px 14px; border-radius: var(--r-full); cursor:pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.filter-pill:hover { border-color: var(--brand-primary); color: var(--nav-item-active-ink); }
.filter-pill.is-active { background: var(--brand-gradient-pill); color:#fff; border-color:transparent; box-shadow:0 2px 8px rgba(168,85,247,.25); }

.deck-grid {
  display:grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.deck-card {
  position:relative; text-align:left;
  background: var(--surface-elevated); border:1px solid var(--border-subtle);
  border-radius: var(--r-2xl); overflow:hidden; cursor:pointer; padding:0;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-medium) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  display:flex; flex-direction:column;
}
.deck-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--_c,#888) 35%, var(--border-subtle)); }
.deck-card:focus-visible { box-shadow: var(--focus-ring), var(--shadow-md); outline:none; }
.deck-card__cover {
  position:relative; height:116px; overflow:hidden;
  background:
    radial-gradient(120% 120% at 18% 12%, color-mix(in oklab, var(--_c,#888) 36%, white) 0%, color-mix(in oklab, var(--_c,#888) 18%, white) 55%, color-mix(in oklab, var(--_c,#888) 8%, white) 100%);
}
.deck-card__cover::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(255,255,255,.5), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 22px, color-mix(in oklab, var(--_c,#888) 12%, transparent) 22px 24px);
  mix-blend-mode: soft-light; opacity:.8;
}
.deck-card__cover-icon {
  position:absolute; right:14px; bottom:-10px; font-size:64px; line-height:1; opacity:.9;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
}
.deck-card__style-tag {
  position:absolute; top:12px; left:12px; z-index:2;
  font-family: var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color: color-mix(in oklab, var(--_c,#555) 75%, black);
  background: rgba(255,255,255,.78); padding:3px 8px; border-radius: var(--r-full);
  backdrop-filter: blur(4px);
}
.deck-card__body { padding: var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
.deck-card__title { font-family: var(--font-display); font-size: var(--fs-heading-sm); font-weight:600; color: var(--ink-primary); letter-spacing: var(--ls-heading); line-height:1.15; }
.deck-card__blurb { font-size: var(--fs-body-sm); color: var(--ink-secondary); line-height:1.5; flex:1; }
.deck-card__meta { display:flex; align-items:center; gap:var(--sp-3); margin-top: var(--sp-1); font-size: var(--fs-label-md); color: var(--ink-tertiary); }
.deck-card__meta b { color: var(--ink-secondary); font-weight:700; }
.deck-card__cta {
  margin-top: var(--sp-3); display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size: var(--fs-body-sm); color: var(--_c, var(--nav-item-active-ink));
}
.deck-card__cta svg { width:18px; height:18px; transition: transform var(--dur-fast) var(--ease-standard); }
.deck-card:hover .deck-card__cta svg { transform: translateX(3px); }

/* AI deck card */
.deck-card--ai .deck-card__cover {
  background: var(--brand-gradient);
}
.deck-card--ai .deck-card__cover::after {
  background: radial-gradient(60% 80% at 80% 10%, rgba(255,255,255,.55), transparent 60%);
  mix-blend-mode: soft-light;
}

/* ════════════════════════════════════════════════════════════
   STUDY STAGE
   ════════════════════════════════════════════════════════════ */
.study-stage {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--sp-5); width:100%;
  min-height: calc(100dvh - var(--topbar-height) - var(--sp-12));
}
.study-topline { width:100%; max-width:560px; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.study-deckname { display:flex; flex-direction:column; gap:2px; min-width:0; }
.study-deckname .t { font-family: var(--font-display); font-weight:600; font-size: var(--fs-heading-md); color: var(--ink-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.study-deckname .s { font-size: var(--fs-label-md); color: var(--ink-tertiary); }

.study-progress { width:100%; max-width:560px; }
.study-progress__bar { height:8px; border-radius: var(--r-full); background: var(--surface-deep); overflow:hidden; }
.study-progress__fill { height:100%; border-radius: var(--r-full); background: var(--brand-gradient-pill); transition: width var(--dur-medium) var(--ease-out); }
.study-progress__label { display:flex; justify-content:space-between; margin-top:6px; font-size: var(--fs-label-md); color: var(--ink-tertiary); }

/* The card itself — height-driven so it's generous but never oversized */
.study-card-wrap { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:100%; padding: var(--sp-2) 0; }
.study-card-wrap .kc-card {
  width:auto; height: min(58vh, 500px); aspect-ratio: 5/7;
}
@media (max-width: 720px) {
  /* Stack naturally; the content-area's bottom padding already reserves the
     bottom-nav height, so the grade bar never hides behind it. */
  .study-stage { min-height: 0; gap: var(--sp-4); justify-content: flex-start; }
  .study-card-wrap { flex: 0 0 auto; }
  .study-card-wrap .kc-card { height: min(48vh, 400px); }
  .study-hint { display: none; } /* keyboard shortcuts n/a on touch */
}

.study-controls { display:flex; flex-direction:column; align-items:center; gap: var(--sp-3); width:100%; max-width:560px; }
.study-actions { display:flex; gap: var(--sp-2); }
.study-hint { font-size: var(--fs-label-md); color: var(--ink-tertiary); text-align:center; }
.study-hint kbd { font-family: var(--font-mono); font-size:11px; background: var(--surface-subtle); border:1px solid var(--border-subtle); border-radius:6px; padding:1px 6px; }

.grade-bar { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-2); width:100%; }
.grade-btn {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding: var(--sp-3) var(--sp-2); border-radius: var(--r-xl);
  border:1.5px solid var(--border-default); background: var(--surface-elevated);
  font-weight:700; font-size: var(--fs-body-sm); color: var(--ink-primary); cursor:pointer;
  transition: all var(--dur-fast) var(--ease-standard); box-shadow: var(--shadow-sm);
}
.grade-btn small { font-weight:500; font-size: 11px; color: var(--ink-tertiary); }
.grade-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.grade-btn:active { transform: scale(.97); }
.grade-btn[data-grade="again"]:hover { border-color: var(--accent-amber); }
.grade-btn[data-grade="hard"]:hover  { border-color: #d97706; }
.grade-btn[data-grade="good"]:hover  { border-color: var(--accent-emerald); }
.grade-btn[data-grade="easy"]:hover  { border-color: var(--accent-cyan); }
.grade-btn.is-hidden { opacity:.4; pointer-events:none; }

/* Session summary */
.session-summary { width:100%; max-width:520px; margin:auto; text-align:center; display:flex; flex-direction:column; gap:var(--sp-5); align-items:center; }
.summary-ring { width:140px; height:140px; }
.summary-stats { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); width:100%; }
.summary-stat { background: var(--surface-elevated); border:1px solid var(--border-subtle); border-radius: var(--r-xl); padding: var(--sp-4); }
.summary-stat .v { font-family: var(--font-display); font-size: var(--fs-display-sm); font-weight:700; color: var(--ink-primary); }
.summary-stat .l { font-size: var(--fs-label-md); color: var(--ink-tertiary); }

/* ════════════════════════════════════════════════════════════
   EXAM
   ════════════════════════════════════════════════════════════ */
.exam-setup, .exam-runner, .exam-results { width:100%; max-width:680px; margin:0 auto; }
.exam-deck-list { display:flex; flex-direction:column; gap: var(--sp-3); margin-top: var(--sp-5); }
.exam-deck-row {
  display:flex; align-items:center; gap: var(--sp-4); padding: var(--sp-4);
  background: var(--surface-elevated); border:1px solid var(--border-subtle); border-radius: var(--r-xl);
  cursor:pointer; transition: all var(--dur-fast) var(--ease-standard); text-align:left; width:100%;
}
.exam-deck-row:hover { border-color: var(--brand-primary); transform: translateX(2px); box-shadow: var(--shadow-sm); }
.exam-deck-row__icon { font-size:30px; }
.exam-deck-row__txt { flex:1; }
.exam-deck-row__txt .t { font-weight:700; color: var(--ink-primary); }
.exam-deck-row__txt .s { font-size: var(--fs-label-md); color: var(--ink-tertiary); }

.exam-runner__top { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--sp-5); gap:var(--sp-4); }
.exam-timer { font-family: var(--font-mono); font-weight:700; font-size: var(--fs-heading-md); color: var(--ink-primary); }
.exam-timer.is-low { color: var(--feedback-warn); }
.exam-qcount { font-size: var(--fs-label-md); color: var(--ink-tertiary); }
.exam-question {
  background: var(--surface-elevated); border:1px solid var(--border-subtle); border-radius: var(--r-2xl);
  padding: var(--sp-8) var(--sp-6); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-5);
}
.exam-question__prompt { font-family: var(--font-display); font-size: var(--fs-heading-lg); font-weight:600; color: var(--ink-primary); line-height:1.3; text-align:center; }
.exam-choices { display:grid; gap: var(--sp-3); }
.exam-choice {
  display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  background: var(--surface-elevated); border:1.5px solid var(--border-default); border-radius: var(--r-xl);
  font-size: var(--fs-body-lg); color: var(--ink-primary); cursor:pointer; text-align:left; width:100%;
  transition: all var(--dur-fast) var(--ease-standard);
}
.exam-choice:hover:not([disabled]) { border-color: var(--brand-primary); background: var(--nav-item-active-bg); }
.exam-choice__key { width:26px; height:26px; flex-shrink:0; display:grid; place-items:center; border-radius:8px; background: var(--surface-subtle); font-family: var(--font-mono); font-size:13px; font-weight:700; color: var(--ink-secondary); }
.exam-choice.is-correct { border-color: var(--feedback-success); background: color-mix(in oklab, var(--feedback-success) 12%, white); }
.exam-choice.is-correct .exam-choice__key { background: var(--feedback-success); color:#fff; }
.exam-choice.is-wrong { border-color: var(--accent-amber); background: color-mix(in oklab, var(--accent-amber) 14%, white); }
.exam-choice.is-wrong .exam-choice__key { background: var(--accent-amber); color:#fff; }

/* Results */
.exam-score-ring { width:160px; height:160px; margin:0 auto var(--sp-5); }
.exam-review { margin-top: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-3); }
.exam-review__item { display:flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface-elevated); border:1px solid var(--border-subtle); }
.exam-review__mark { flex-shrink:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:700; }
.exam-review__mark.ok { background: var(--feedback-success); }
.exam-review__mark.no { background: var(--accent-amber); }
.exam-review__q { font-weight:600; color: var(--ink-primary); }
.exam-review__a { font-size: var(--fs-body-sm); color: var(--ink-secondary); }

/* ════════════════════════════════════════════════════════════
   PROGRESS
   ════════════════════════════════════════════════════════════ */
.progress-top { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.progress-panel { background: var(--surface-elevated); border:1px solid var(--border-subtle); border-radius: var(--r-2xl); padding: var(--sp-5); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-5); }
.progress-panel__title { font-family: var(--font-display); font-size: var(--fs-heading-sm); font-weight:600; color: var(--ink-primary); margin-bottom: var(--sp-4); display:flex; align-items:center; justify-content:space-between; }

.ring-stat { display:flex; align-items:center; gap: var(--sp-4); }
.ring-stat svg { flex-shrink:0; }
.ring-stat__txt .v { font-family: var(--font-display); font-size: var(--fs-display-sm); font-weight:700; color: var(--ink-primary); line-height:1; }
.ring-stat__txt .l { font-size: var(--fs-label-md); color: var(--ink-tertiary); margin-top:4px; }

.mastery-row { display:flex; align-items:center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.mastery-row__label { width:108px; flex-shrink:0; font-size: var(--fs-body-sm); font-weight:600; color: var(--ink-secondary); display:flex; align-items:center; gap:6px; }
.mastery-row__track { flex:1; height:10px; border-radius: var(--r-full); background: var(--surface-deep); overflow:hidden; }
.mastery-row__fill { height:100%; border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease-out); }
.mastery-row__pct { width:40px; text-align:right; font-size: var(--fs-label-md); font-weight:700; color: var(--ink-secondary); }

.heatmap { display:grid; grid-template-columns: repeat(14, 1fr); gap:5px; }
.heatmap__cell { aspect-ratio:1; border-radius:4px; background: var(--surface-deep); }

.smart-review { display:flex; align-items:center; gap: var(--sp-4); background: linear-gradient(120deg, rgba(192,132,252,.10), rgba(249,168,212,.08)); border:1px solid rgba(192,132,252,.25); border-radius: var(--r-2xl); padding: var(--sp-5); }
.smart-review__icon { width:46px; height:46px; flex-shrink:0; border-radius:var(--r-xl); background: var(--brand-gradient); display:grid; place-items:center; color:#fff; box-shadow: var(--shadow-md); }
.smart-review__txt { flex:1; }
.smart-review__txt .t { font-weight:700; color: var(--ink-primary); }
.smart-review__txt .s { font-size: var(--fs-body-sm); color: var(--ink-secondary); margin-top:2px; }

/* ════════════════════════════════════════════════════════════
   SETTINGS
   ════════════════════════════════════════════════════════════ */
.settings-group { background: var(--surface-elevated); border:1px solid var(--border-subtle); border-radius: var(--r-2xl); padding: var(--sp-2) var(--sp-5); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-5); }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom:1px solid var(--border-subtle); }
.settings-row:last-child { border-bottom:none; }
.settings-row__label { font-weight:600; color: var(--ink-primary); }
.settings-row__sub { font-size: var(--fs-body-sm); color: var(--ink-tertiary); margin-top:2px; }

.segmented { display:inline-flex; background: var(--surface-subtle); border-radius: var(--r-full); padding:3px; gap:2px; flex-wrap:wrap; }
.segmented button { padding:6px 12px; border-radius: var(--r-full); font-size: var(--fs-body-sm); font-weight:600; color: var(--ink-secondary); transition: all var(--dur-fast) var(--ease-standard); }
.segmented button.is-active { background: var(--surface-elevated); color: var(--nav-item-active-ink); box-shadow: var(--shadow-sm); }

/* Toggle switch */
.toggle { position:relative; width:46px; height:26px; flex-shrink:0; }
.toggle input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.toggle__track { position:absolute; inset:0; border-radius: var(--r-full); background: var(--surface-deep); transition: background var(--dur-fast) var(--ease-standard); }
.toggle__thumb { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-standard); }
.toggle input:checked ~ .toggle__track { background: var(--brand-primary); }
.toggle input:checked ~ .toggle__thumb { transform: translateX(20px); }
.toggle input:focus-visible ~ .toggle__track { box-shadow: var(--focus-ring); }

/* ── Modal (AI composer) ─────────────────────────────────────── */
.modal-backdrop { position:fixed; inset:0; z-index:80; background:rgba(28,20,16,.42); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding: var(--sp-4); opacity:0; pointer-events:none; transition:opacity var(--dur-medium) var(--ease-standard); }
.modal-backdrop.is-open { opacity:1; pointer-events:auto; }
.modal { width:100%; max-width:480px; background: var(--surface-elevated); border-radius: var(--r-3xl); padding: var(--sp-8); box-shadow: var(--shadow-lg); transform: translateY(12px) scale(.98); transition: transform var(--dur-medium) var(--ease-out); }
.modal-backdrop.is-open .modal { transform:none; }
.modal h3 { font-family: var(--font-display); font-size: var(--fs-heading-lg); font-weight:600; color: var(--ink-primary); margin-bottom: var(--sp-2); }
.modal p { font-size: var(--fs-body-md); color: var(--ink-secondary); margin-bottom: var(--sp-5); }
.modal label { display:block; font-size: var(--fs-label-md); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-tertiary); margin-bottom: var(--sp-2); }
.modal input[type="text"], .modal select {
  width:100%; height:44px; padding:0 var(--sp-4); border-radius: var(--r-lg);
  border:1.5px solid var(--border-default); background: var(--surface-canvas);
  font-size: var(--fs-body-md); color: var(--ink-primary); margin-bottom: var(--sp-4);
}
.modal input:focus-visible, .modal select:focus-visible { outline:none; border-color: var(--brand-primary); box-shadow: var(--focus-ring); }
.modal__actions { display:flex; gap: var(--sp-3); justify-content:flex-end; margin-top: var(--sp-2); }
.modal__note { font-size: var(--fs-label-md); color: var(--ink-tertiary); margin-top: var(--sp-4); display:flex; gap:6px; align-items:flex-start; }

/* Empty state */
.empty-state { text-align:center; padding: var(--sp-12) var(--sp-6); color: var(--ink-tertiary); }
.empty-state__icon { font-size:48px; margin-bottom: var(--sp-3); }

/* ════════════════════════════════════════════════════════════
   CDN LIBRARY — toolbar, filters, small deck tiles
   ════════════════════════════════════════════════════════════ */
.lib-loading { display:flex; align-items:center; gap:10px; color:var(--ink-tertiary); padding:var(--sp-8) 0; font-size:var(--fs-body-md); }
.spinner { width:18px; height:18px; border-radius:50%; border:2px solid var(--border-default); border-top-color:var(--brand-primary); display:inline-block; animation: kc-spin 0.7s linear infinite; }
@keyframes kc-spin { to { transform: rotate(360deg); } }

.lib-toolbar { display:flex; gap:var(--sp-3); align-items:center; margin:var(--sp-5) 0 var(--sp-4); flex-wrap:wrap; }
.lib-search { flex:1 1 280px; min-width:0; position:relative; display:flex; align-items:center; }
.lib-search svg { position:absolute; left:14px; color:var(--ink-tertiary); pointer-events:none; }
.lib-search input { width:100%; height:44px; padding:0 16px 0 38px; border-radius:var(--r-full); border:1px solid var(--border-subtle); background:var(--surface-elevated); font-size:var(--fs-body-md); color:var(--ink-primary); }
.lib-search input:focus-visible { outline:none; border-color:var(--brand-primary); box-shadow:var(--focus-ring); }
.lib-toolbar .btn-pill { flex:0 0 auto; white-space:nowrap; }
.lib-toolbar .btn-pill svg { width:16px; height:16px; flex:0 0 auto; }
@media (max-width:520px){ .lib-toolbar .btn-pill span, .lib-toolbar .btn-pill { gap:6px; } }

.lib-filters { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.lib-filter-row { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.lib-filter-row--tier .filter-pill { font-size:var(--fs-label-md); padding:5px 11px; }
.lib-count { font-size:var(--fs-label-md); color:var(--ink-tertiary); margin-bottom:var(--sp-3); font-weight:600; }
.lib-more { display:flex; justify-content:center; margin:var(--sp-6) 0 var(--sp-2); }

.deck-tile-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(166px, 1fr)); gap:var(--sp-4); }
.deck-tile {
  display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden;
  background:var(--surface-elevated); border:1px solid var(--border-subtle); border-radius:var(--r-xl);
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-medium) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.deck-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:color-mix(in oklab, var(--_c,#888) 40%, var(--border-subtle)); }
.deck-tile:focus-visible { outline:none; box-shadow:var(--focus-ring), var(--shadow-md); }
.deck-tile__cover {
  position:relative; height:84px; overflow:hidden;
  background:
    radial-gradient(120% 130% at 20% 10%, color-mix(in oklab, var(--_c,#888) 42%, white) 0%, color-mix(in oklab, var(--_c,#888) 20%, white) 60%, color-mix(in oklab, var(--_c,#888) 10%, white) 100%);
  display:flex; align-items:center; justify-content:center;
}
.deck-tile__cover img { width:100%; height:100%; object-fit:cover; }
.deck-tile__mono { font-family:var(--font-display); font-weight:700; font-size:34px; color:color-mix(in oklab, var(--_c,#555) 78%, white); opacity:.8; }
.deck-tile__body { padding:var(--sp-3) var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:6px; flex:1; }
.deck-tile__body .subject-pill { align-self:flex-start; font-size:9.5px; padding:3px 8px; }
.deck-tile__title { font-family:var(--font-display); font-size:var(--fs-body-lg); font-weight:600; line-height:1.2; color:var(--ink-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.deck-tile__meta { font-size:var(--fs-label-md); color:var(--ink-tertiary); margin-top:auto; }
.deck-tile__meta b { color:var(--ink-secondary); }

@media (max-width:520px){ .deck-tile-grid { grid-template-columns:repeat(auto-fill, minmax(144px,1fr)); gap:var(--sp-3); } }

/* ── Category-first browse (Level 1 shelves + Level 2 back bar) ── */
.cat-section-title { font-family:var(--font-display); font-size:var(--fs-heading-md); font-weight:600; color:var(--ink-primary); margin:var(--sp-6) 0 var(--sp-3); }
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:var(--sp-4); }
.cat-card {
  display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden;
  background:var(--surface-elevated); border:1px solid var(--border-subtle); border-radius:var(--r-2xl);
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-medium) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.cat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in oklab, var(--_c,#888) 45%, var(--border-subtle)); }
.cat-card:focus-visible { outline:none; box-shadow:var(--focus-ring), var(--shadow-md); }
.cat-card__cover {
  position:relative; height:112px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(130% 130% at 22% 12%, color-mix(in oklab, var(--_c,#888) 48%, white) 0%, color-mix(in oklab, var(--_c,#888) 24%, white) 55%, color-mix(in oklab, var(--_c,#888) 12%, white) 100%);
}
.cat-card__cover img { width:100%; height:100%; object-fit:cover; }
.cat-card__mono { font-family:var(--font-display); font-weight:700; font-size:44px; color:color-mix(in oklab, var(--_c,#555) 80%, white); opacity:.85; }
.cat-card__badge { position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(28,20,16,.42); padding:3px 8px; border-radius:var(--r-full); backdrop-filter:blur(4px); }
.cat-card__body { padding:var(--sp-3) var(--sp-4) var(--sp-4); display:flex; flex-direction:column; gap:4px; }
.cat-card__title { font-family:var(--font-display); font-size:var(--fs-heading-sm); font-weight:600; color:var(--ink-primary); line-height:1.15; }
.cat-card__meta { font-size:var(--fs-label-md); color:var(--ink-tertiary); }
.cat-card__meta b { color:var(--ink-secondary); }

.browse-bar { display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.browse-back { height:38px; padding:0 14px; flex:0 0 auto; }
.browse-title { font-family:var(--font-display); font-size:var(--fs-display-sm); font-weight:600; letter-spacing:var(--ls-display); color:var(--ink-primary); }
.browse-title em { font-style:normal; }
@media (max-width:520px){ .cat-grid { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); } }

/* Major (Level-1) shelves — larger, fewer columns to guide the eye */
.cat-grid--major { grid-template-columns:repeat(auto-fill, minmax(232px,1fr)); gap:var(--sp-5); }
.cat-card--major .cat-card__cover { height:140px; }
.cat-card--major .cat-card__title { font-size:var(--fs-heading-md); }
@media (max-width:520px){ .cat-grid--major { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); } }

/* "change level" chip in the eyebrow */
.lvl-chip { font: inherit; font-size:11px; font-weight:600; color:var(--nav-item-active-ink); background:var(--nav-item-active-bg); border:none; border-radius:var(--r-full); padding:2px 9px; margin-left:6px; cursor:pointer; text-transform:none; letter-spacing:0; vertical-align:middle; }
.lvl-chip:hover { filter:brightness(1.05); }

/* Age/level onboarding */
.onb-modal { max-width:560px; text-align:center; }
.onb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-2); }
.onb-card { display:flex; flex-direction:column; align-items:center; gap:4px; padding:var(--sp-5) var(--sp-3); border-radius:var(--r-2xl); border:1.5px solid var(--border-default); background:var(--surface-canvas); cursor:pointer; transition:all var(--dur-fast) var(--ease-standard); }
.onb-card:hover { border-color:var(--brand-primary); background:var(--nav-item-active-bg); transform:translateY(-2px); }
.onb-card b { font-family:var(--font-display); font-size:var(--fs-body-lg); color:var(--ink-primary); }
.onb-card small { font-size:var(--fs-label-md); color:var(--ink-tertiary); line-height:1.3; }
.onb-emoji { font-size:34px; }
@media (max-width:520px){ .onb-grid { grid-template-columns:1fr; } }

/* Subtle per-level maturity theming (covers carry most of it; shell adjusts gently) */
body[data-level="adults"] .deck-tile, body[data-level="adults"] .cat-card { border-radius:var(--r-lg); }
body[data-level="adults"] .screen__title em, body[data-level="students"] .screen__title em { background:linear-gradient(120deg,#7c3aed,#2563eb); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body[data-level="kids"] .cat-card, body[data-level="kids"] .deck-tile { border-radius:var(--r-3xl); }
body[data-level="kids"] .cat-card__title { font-family:var(--font-display); }