/* CRAMMIT Design System
   Chunky, flat Duolingo-style components shared across the site.
   Matches the .pill-* and .ca-card rules in games/classic/shared.css so the
   games and the rest of the site read as one system. Colors are the ones
   already in use; only the styling is new. */

:root {
  --ds-font: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  --ds-font-display: 'Fredoka', 'Nunito', ui-sans-serif, system-ui, sans-serif;

  --ds-primary: #4f46e5;
  --ds-primary-edge: #3730a3;
  --ds-green: #58cc02;
  --ds-green-edge: #3c8500;
  --ds-red: #ff4b4b;
  --ds-red-edge: #cc2222;
  --ds-yellow: #ffc800;
  --ds-yellow-edge: #b38900;
  --ds-purple: #8b5cf6;
  --ds-purple-edge: #6d28d9;

  --ds-surface: #ffffff;
  --ds-surface-muted: #f3f4f6;
  --ds-edge: #d9dce3;
  --ds-text: #1c1917;
  --ds-text-muted: #6b7280;

  --ds-radius-card: 16px;
  --ds-radius-sm: 12px;
}

.dark {
  --ds-surface: #1e293b;
  --ds-surface-muted: #334155;
  --ds-edge: #0b1220;
  --ds-text: #f8fafc;
  --ds-text-muted: #94a3b8;
}

.ds-font { font-family: var(--ds-font); }
.ds-display { font-family: var(--ds-font-display); }
/* Pages opt in with <body class="ds-page"> so only they get display headings */
.ds-page :is(h1, h2, h3, h4) { font-family: var(--ds-font-display); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ds-btn {
  --btn-bg: var(--ds-primary);
  --btn-edge: var(--ds-primary-edge);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 14px;
  font-family: var(--ds-font-display); font-weight: 600; font-size: 15px; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 2px solid var(--btn-edge);
  box-shadow: 0 4px 0 var(--btn-edge);
  cursor: pointer; text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.ds-btn:hover  { box-shadow: 0 3px 0 var(--btn-edge); transform: translateY(1px); filter: brightness(1.05); }
.ds-btn:active { box-shadow: 0 1px 0 var(--btn-edge); transform: translateY(3px); }
.ds-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; box-shadow: 0 4px 0 var(--btn-edge); }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn--sm    { padding: 8px 14px; font-size: 13px; border-radius: 12px; }

.ds-btn--green  { --btn-bg: var(--ds-green);  --btn-edge: var(--ds-green-edge); }
.ds-btn--red    { --btn-bg: var(--ds-red);    --btn-edge: var(--ds-red-edge); }
.ds-btn--purple { --btn-bg: var(--ds-purple); --btn-edge: var(--ds-purple-edge); }
.ds-btn--blue   { --btn-bg: #3b82f6; --btn-edge: #1d4ed8; }
.ds-btn--yellow { --btn-bg: var(--ds-yellow); --btn-edge: var(--ds-yellow-edge); --btn-fg: #1c1917; }
.ds-btn--ghost  { --btn-bg: var(--ds-surface); --btn-edge: var(--ds-edge); --btn-fg: var(--ds-text); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.ds-card {
  background: var(--ds-surface);
  color: var(--ds-text);
  border: 2px solid var(--ds-edge);
  border-bottom-width: 5px;
  border-radius: var(--ds-radius-card);
  box-shadow: 0 8px 20px rgba(52, 32, 68, 0.04);
}
.ds-card--interactive { transition: transform 0.15s, border-color 0.15s; }
.ds-card--interactive:hover { transform: translateY(-3px); }

/* inset panel inside a card (previews, character rows) */
.ds-panel {
  background: var(--ds-surface-muted);
  border-radius: var(--ds-radius-sm);
}

/* ── Icon tile ────────────────────────────────────────────────────────────── */
.ds-icon-tile {
  --tile-bg: var(--ds-primary);
  --tile-edge: var(--ds-primary-edge);
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; color: #fff; font-size: 20px;
  background: var(--tile-bg);
  box-shadow: 0 4px 0 var(--tile-edge);
}
.ds-icon-tile--green  { --tile-bg: var(--ds-green);  --tile-edge: var(--ds-green-edge); }
.ds-icon-tile--red    { --tile-bg: var(--ds-red);    --tile-edge: var(--ds-red-edge); }
.ds-icon-tile--purple { --tile-bg: var(--ds-purple); --tile-edge: var(--ds-purple-edge); }

/* ── Chips and badges ─────────────────────────────────────────────────────── */
.ds-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--ds-font); font-weight: 800; font-size: 12px;
  background: var(--ds-surface-muted); color: var(--ds-text-muted);
}
.ds-badge {
  --badge-bg: var(--ds-yellow);
  --badge-edge: var(--ds-yellow-edge);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--ds-font-display); font-weight: 600; font-size: 14px; color: #1c1917;
  background: var(--badge-bg);
  box-shadow: 0 3px 0 var(--badge-edge);
}
.ds-badge--primary { --badge-bg: var(--ds-primary); --badge-edge: var(--ds-primary-edge); color: #fff; }
.ds-badge--red     { --badge-bg: var(--ds-red);     --badge-edge: var(--ds-red-edge);     color: #fff; }

/* ── Tabs (segmented control) ─────────────────────────────────────────────────
   Tabs fill the track edge to edge at equal widths; the active one sits
   "pressed in" with an inset bottom edge. */
.ds-tabs {
  display: inline-flex; overflow: hidden;
  background: var(--ds-surface-muted);
  border: 2px solid var(--ds-edge); border-bottom-width: 4px;
  border-radius: 12px;
}
.ds-tab {
  flex: 1 1 0; white-space: nowrap;
  padding: 10px 18px; border-radius: 0;
  font-family: var(--ds-font-display); font-weight: 600; font-size: 14px;
  color: var(--ds-text-muted); background: transparent; border: 0; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ds-tab + .ds-tab { border-left: 2px solid var(--ds-edge); }
.ds-tab:hover { color: var(--ds-primary); background: var(--ds-surface); }
.ds-tab.is-active,
.ds-tab.active {
  background: var(--ds-primary); color: #fff;
  box-shadow: inset 0 -4px 0 var(--ds-primary-edge);
}
.dark .ds-tabs { border-color: #334155; border-bottom-color: #0b1220; }
.dark .ds-tab + .ds-tab { border-left-color: #334155; }
.dark .ds-tab:hover { color: #a5b4fc; }

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.ds-progress {
  height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--ds-surface-muted);
}
.ds-progress > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--ds-green);
}

/* ── Stat pill (streak, level/XP in the sub-nav) ──────────────────────────── */
.ds-stat {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--ds-font-display); font-weight: 600;
  background: var(--ds-surface); color: var(--ds-text);
  border: 2px solid var(--ds-edge); border-bottom-width: 4px;
}

/* ── Top navbar (partials/navbar.html) ────────────────────────────────────────
   Overrides the Tailwind utility classes already on the markup. The selectors
   are one class more specific than Tailwind's, so no !important is needed. */
nav.ds-nav {
  font-family: var(--ds-font-display);
  background: var(--ds-surface);
  border-bottom: 3px solid var(--ds-edge);
  box-shadow: none;
}
nav.ds-nav .nav-link {
  padding: 8px 14px; border-radius: 12px;
  font-size: 15px; font-weight: 500;
  border: 2px solid transparent;
  color: var(--ds-text-muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* keep the animated underline from navBar.css, inset to the pill's padding */
nav.ds-nav .nav-link::after {
  left: 14px; bottom: 0; height: 3px; border-radius: 999px;
  background-color: var(--ds-primary);
}
nav.ds-nav .nav-link:hover::after,
nav.ds-nav .nav-link.active::after { width: calc(100% - 28px); }
nav.ds-nav .nav-link:hover {
  background: var(--ds-surface-muted); color: var(--ds-text);
}
nav.ds-nav .nav-link.active { color: var(--ds-primary); }
.dark nav.ds-nav .nav-link::after  { background-color: #a5b4fc; }
.dark nav.ds-nav .nav-link.active  { color: #a5b4fc; }
.dark nav.ds-nav .nav-link:hover   { color: #fff; }

nav.ds-nav .nav-dropdown-menu {
  background: var(--ds-surface);
  border: 2px solid var(--ds-edge); border-bottom-width: 4px;
  border-radius: 14px; box-shadow: 0 8px 20px rgba(52, 32, 68, 0.08);
  overflow: hidden;
}
nav.ds-nav #mobile-menu {
  background: var(--ds-surface);
  border-top: 2px solid var(--ds-edge);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Site-wide components (forms, modals, alerts, tables, page shell)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Flat card: content that is read, not clicked (quiz, notes, rows, data) ── */
.ds-card--flat {
  border-bottom-width: 2px;
  box-shadow: none;
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.ds-shell     { max-width: 72rem; margin: 0 auto; padding: 32px 16px; }
.ds-shell--sm { max-width: 42rem; }
.ds-shell--md { max-width: 56rem; }
.ds-page-title {
  font-family: var(--ds-font-display); font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15;
  color: var(--ds-text);
}
.ds-page-sub { color: var(--ds-text-muted); font-weight: 600; }

/* ── Form controls ────────────────────────────────────────────────────────── */
.ds-label {
  display: block; margin-bottom: 6px;
  font-family: var(--ds-font-display); font-weight: 500; font-size: 14px;
  color: var(--ds-text);
}
/* Width stays at zero specificity so w-auto / flex sizing utilities win. */
:where(.ds-input, .ds-textarea) { width: 100%; }
.ds-input, .ds-select, .ds-textarea {
  padding: 11px 14px;
  font-family: var(--ds-font); font-weight: 700; font-size: 15px;
  color: var(--ds-text); background: var(--ds-surface);
  border: 2px solid var(--ds-edge); border-bottom-width: 3px;
  border-radius: 12px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ds-textarea { resize: vertical; line-height: 1.5; }
/* Room for icons/buttons inside a field: the base padding above would otherwise beat these utilities */
:is(.ds-input, .ds-select, .ds-textarea).pl-10 { padding-left: 2.5rem; }
:is(.ds-input, .ds-select, .ds-textarea).pr-4  { padding-right: 1rem; }
:is(.ds-input, .ds-select, .ds-textarea).pr-10 { padding-right: 2.5rem; }
:is(.ds-input, .ds-select, .ds-textarea).pr-12 { padding-right: 3rem; }
:is(.ds-input, .ds-select, .ds-textarea).pb-8  { padding-bottom: 2rem; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-muted); opacity: 0.7; font-weight: 600; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
.ds-input[disabled], .ds-select[disabled], .ds-textarea[disabled] { opacity: 0.6; cursor: not-allowed; }
.ds-input.is-invalid { border-color: var(--ds-red); }
.ds-checkbox { width: 18px; height: 18px; accent-color: var(--ds-primary); cursor: pointer; }
.ds-hint { font-size: 13px; font-weight: 600; color: var(--ds-text-muted); }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.ds-modal__backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.ds-modal__backdrop.hidden { display: none; }
.ds-modal {
  width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto;
  padding: 24px;
}
.ds-modal__title {
  font-family: var(--ds-font-display); font-weight: 600; font-size: 1.4rem;
  color: var(--ds-text);
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.ds-alert {
  --alert-color: var(--ds-primary);
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px;
  font-weight: 700; font-size: 14px;
  color: var(--ds-text);
  background: color-mix(in srgb, var(--alert-color) 10%, var(--ds-surface));
  border: 2px solid color-mix(in srgb, var(--alert-color) 45%, transparent);
}
.ds-alert > i { color: var(--alert-color); margin-top: 2px; }
.ds-alert--success { --alert-color: #2f9e44; }
.ds-alert--warn    { --alert-color: #d99a00; }
.ds-alert--danger  { --alert-color: var(--ds-red-edge); }

/* ── Table ────────────────────────────────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-weight: 600; }
.ds-table th {
  padding: 10px 14px; text-align: left;
  font-family: var(--ds-font-display); font-weight: 500; font-size: 13px;
  color: var(--ds-text-muted); border-bottom: 2px solid var(--ds-edge);
}
.ds-table td { padding: 12px 14px; border-bottom: 1px solid var(--ds-edge); color: var(--ds-text); }
.ds-table tr:last-child td { border-bottom: 0; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.ds-empty { text-align: center; padding: 40px 16px; color: var(--ds-text-muted); font-weight: 700; }
.ds-empty > i { font-size: 2rem; color: var(--ds-primary); margin-bottom: 12px; }

/* ── Links ────────────────────────────────────────────────────────────────── */
.ds-link { color: var(--ds-primary); font-weight: 800; text-decoration: none; }
.ds-link:hover { text-decoration: underline; }
.dark .ds-link { color: #a5b4fc; }

/* ── Game-flavored stage backdrop (lobbies, waiting rooms) ────────────────── */
.ds-stage {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 200, 0, 0.22), transparent 70%),
    linear-gradient(180deg, #4f46e5 0%, #3730a3 100%);
  color: #fff;
}
.ds-stage .ds-card { color: var(--ds-text); }

/* Tailwind's .hidden must still win on display:flex components */
.ds-alert.hidden, .ds-btn.hidden, .ds-card.hidden, .ds-stat.hidden, .ds-chip.hidden { display: none; }

/* Opt-in page font and default text color: <body class="ds-page">. The color matters: popups that inherit text
   color from the page (e.g. the Account dialog) used to turn black in dark mode on pages without text classes. */
.ds-page { font-family: var(--ds-font); color: var(--ds-text); }

.ds-icon-tile--lg { width: 64px; height: 64px; font-size: 28px; border-radius: 18px; }
.ds-icon-tile--yellow { --tile-bg: var(--ds-yellow); --tile-edge: var(--ds-yellow-edge); color: #1c1917; }
.ds-step {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ds-font-display); font-weight: 600; font-size: 14px; color: #fff;
  background: var(--ds-primary); box-shadow: 0 3px 0 var(--ds-primary-edge);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Resource content layer (flashcard.css)
   Loaded after those files via partials/navbar.html, so equal-specificity rules
   win. Content that is read stays flat; things you click or pick get the edge.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Quiz styles live in quiz.css (already on the design-system tokens). */

/* ── Flashcards ───────────────────────────────────────────────────────────── */
.card-face {
  border: 2px solid var(--ds-edge);
  border-bottom-width: 5px;
  border-radius: 24px;
  background: var(--ds-surface);
}
.card-face:hover, .dark .card-face:hover { box-shadow: none; }
.dark .card-face { background: var(--ds-surface); border-color: #334155; border-bottom-color: #0b1220; }
.card-text  { font-weight: 700; }
.card-label { font-family: var(--ds-font-display); font-weight: 500; }
.hint-text  { border-width: 2px; border-radius: 14px; font-weight: 700; }

.flashcard-btn {
  font-family: var(--ds-font-display); font-weight: 600; font-size: 15px;
  border-radius: 14px; transition: transform 0.12s, box-shadow 0.12s;
}
.flashcard-btn-primary,
.dark .flashcard-btn-primary {
  background: var(--ds-purple); color: #fff;
  border: 2px solid var(--ds-purple-edge); box-shadow: 0 4px 0 var(--ds-purple-edge);
}
.flashcard-btn-primary:hover,
.dark .flashcard-btn-primary:hover { background: var(--ds-purple); transform: translateY(1px); box-shadow: 0 3px 0 var(--ds-purple-edge); }
.flashcard-btn-secondary {
  background: var(--ds-surface); color: var(--ds-purple-edge);
  border: 2px solid var(--ds-edge); box-shadow: 0 4px 0 var(--ds-edge);
}
.flashcard-btn-secondary:hover { background: var(--ds-surface); transform: translateY(1px); box-shadow: 0 3px 0 var(--ds-edge); }
.dark .flashcard-btn-secondary { background: var(--ds-surface); color: #c4b5fd; border-color: #334155; box-shadow: 0 4px 0 #0b1220; }
.dark .flashcard-btn-secondary:hover { background: var(--ds-surface); box-shadow: 0 3px 0 #0b1220; }
.flashcard-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ds-edge); }

.modal-content, .deck-overview-content {
  border-radius: 20px; border: 2px solid var(--ds-edge); border-bottom-width: 5px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
}
.dark .modal-content, .dark .deck-overview-content { border-color: #334155; border-bottom-color: #0b1220; }
.modal-header, .dark .modal-header { background: var(--ds-purple); }
.modal-header h2, .deck-overview-header h2 { font-family: var(--ds-font-display); font-weight: 600; }
.form-group label { font-family: var(--ds-font-display); font-weight: 500; }
.form-group textarea { border: 2px solid var(--ds-edge); border-radius: 12px; font-weight: 600; }
.form-group textarea:focus { border-color: var(--ds-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18); }

/* Notes styles live in notes.css (already on the design-system tokens). */

/* ── Create pages (enhance.css, createAudio.css, manualCreation.css) ──────── */
.btn-primary {
  background: var(--ds-primary);
  border: 2px solid var(--ds-primary-edge);
  box-shadow: 0 4px 0 var(--ds-primary-edge);
  font-family: var(--ds-font-display); font-weight: 600;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-primary:hover:not(:disabled)  { transform: translateY(1px); box-shadow: 0 3px 0 var(--ds-primary-edge); }
.btn-primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ds-primary-edge); }
.btn-secondary {
  border: 2px solid var(--ds-edge);
  box-shadow: 0 4px 0 var(--ds-edge);
  font-family: var(--ds-font-display); font-weight: 600;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-secondary:hover { background-color: transparent; color: inherit; transform: translateY(1px); box-shadow: 0 3px 0 var(--ds-edge); }

.tab-button { font-family: var(--ds-font-display); font-weight: 500; border-radius: 12px; }
.tab-button.active, .dark .tab-button.active {
  background: var(--ds-primary); color: #fff;
  box-shadow: 0 3px 0 var(--ds-primary-edge);
}

.input-enhanced { border: 2px solid var(--ds-edge); border-bottom-width: 3px; border-radius: 12px; font-weight: 700; }
.input-enhanced:focus { border-color: var(--ds-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18); transform: none; }

.mrc-gradient-bg { background: var(--ds-primary); }
.mrc-card-hover:hover { transform: translateY(-3px); box-shadow: none; }

.scroll-btn, .dark .scroll-btn, .carousel-nav {
  background: var(--ds-primary);
  border: 2px solid var(--ds-primary-edge);
  box-shadow: 0 4px 0 var(--ds-primary-edge);
}
.scroll-btn:hover, .dark .scroll-btn:hover { box-shadow: 0 3px 0 var(--ds-primary-edge); }
.carousel-dot.active, .dark .carousel-dot.active { background: var(--ds-primary); box-shadow: 0 2px 0 var(--ds-primary-edge); }

/* ── Study modes (learn.css, match.css) ───────────────────────────────────── */
.answer-option, .match-tile {
  border: 2px solid var(--ds-edge);
  border-bottom-width: 4px;
  border-radius: 14px;
  background: var(--ds-surface);
  font-weight: 700;
}
.dark .answer-option, .dark .match-tile { border-color: #334155; border-bottom-color: #0b1220; background: var(--ds-surface); }
.answer-option:hover:not(.disabled):not(.correct):not(.incorrect),
.match-tile:hover:not(.matched):not(.incorrect) { border-color: #a5b4fc; background: #eef2ff; transform: translateY(-1px); box-shadow: none; }
.dark .answer-option:hover:not(.disabled):not(.correct):not(.incorrect),
.dark .match-tile:hover:not(.matched):not(.incorrect) { border-color: #818cf8; background: #312e81; box-shadow: none; }
.answer-option.selected, .match-tile.selected { border-color: var(--ds-primary); background: #eef2ff; box-shadow: none; }
.dark .answer-option.selected, .dark .match-tile.selected { border-color: #818cf8; background: #312e81; box-shadow: none; }
.answer-option.correct, .match-tile.matched     { border-color: var(--ds-green); border-bottom-color: var(--ds-green-edge); background: #ecfccb; }
.answer-option.incorrect, .match-tile.incorrect { border-color: var(--ds-red);   border-bottom-color: var(--ds-red-edge);   background: #fee2e2; }
.dark .answer-option.correct, .dark .match-tile.matched     { border-color: var(--ds-green); border-bottom-color: var(--ds-green-edge); background: #1a2e05; }
.dark .answer-option.incorrect, .dark .match-tile.incorrect { border-color: var(--ds-red);   border-bottom-color: var(--ds-red-edge);   background: #450a0a; }

.answer-letter { border-radius: 10px; font-family: var(--ds-font-display); font-weight: 600; }
.answer-option.selected .answer-letter  { background: var(--ds-primary); }
.answer-option.correct .answer-letter   { background: var(--ds-green); }
.answer-option.incorrect .answer-letter { background: var(--ds-red); }

.free-response-input { border-width: 2px; border-bottom-width: 3px; border-radius: 12px; font-weight: 700; }

.btn-hint {
  background: var(--ds-yellow); color: #1c1917;
  border: 2px solid var(--ds-yellow-edge); border-radius: 12px;
  box-shadow: 0 3px 0 var(--ds-yellow-edge);
  font-family: var(--ds-font-display);
}
.btn-hint:hover:not(:disabled) { background: var(--ds-yellow); transform: translateY(1px); box-shadow: 0 2px 0 var(--ds-yellow-edge); }

.timer-pill {
  font-family: var(--ds-font-display); font-weight: 600;
  background: var(--ds-surface); border: 2px solid var(--ds-edge); border-bottom-width: 4px;
}
.dark .timer-pill { background: var(--ds-surface); border-color: #334155; border-bottom-color: #0b1220; }
.progress-track { height: 12px; border-radius: 999px; }
.progress-track .progress-fill { border-radius: 999px; background: var(--ds-green); }
.mastery-bar { border-radius: 999px; }
.stat-item, .reflection-card, .result-stat { border-radius: 14px; }
.stat-value { font-family: var(--ds-font-display); }

/* ── Sorted review / blind recall (focusedReview.css) ─────────────────────── */
.review-card-front, .review-card-back {
  border: 2px solid var(--ds-edge); border-bottom-width: 5px; border-radius: 24px;
  background: var(--ds-surface);
}
.dark .review-card-front, .dark .review-card-back { border-color: #334155; border-bottom-color: #0b1220; background: var(--ds-surface); }
.review-card-front:hover, .review-card-back:hover,
.dark .review-card-front:hover, .dark .review-card-back:hover { box-shadow: none; }
.counter-pill { font-family: var(--ds-font-display); font-weight: 600; }
.flip-hint kbd { border-width: 2px; border-bottom-width: 3px; font-weight: 800; }

.sort-btn {
  font-family: var(--ds-font-display); font-weight: 600; border-radius: 14px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-know     { background: var(--ds-green);  border: 2px solid var(--ds-green-edge);  box-shadow: 0 4px 0 var(--ds-green-edge); }
.btn-learning { background: var(--ds-yellow); border: 2px solid var(--ds-yellow-edge); box-shadow: 0 4px 0 var(--ds-yellow-edge); color: #1c1917; }
.btn-know:hover     { background: var(--ds-green);  transform: translateY(1px); box-shadow: 0 3px 0 var(--ds-green-edge); }
.btn-learning:hover { background: var(--ds-yellow); transform: translateY(1px); box-shadow: 0 3px 0 var(--ds-yellow-edge); }
.sort-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.result-stat .val { font-family: var(--ds-font-display); font-weight: 600; }

/* ── Blind recall (inline styles in study-modes/blind-recall.html) ────────── */
.recall-card { border: 2px solid var(--ds-edge); border-bottom-width: 5px; border-radius: 24px; box-shadow: none; }
.dark .recall-card { border-color: #334155; border-bottom-color: #0b1220; background: var(--ds-surface); }
.recall-card-label { font-family: var(--ds-font-display); font-weight: 500; }
.recall-card-text { font-weight: 700; }
.answer-input { border-width: 2px; border-bottom-width: 3px; border-radius: 14px; font-weight: 700; }
.answer-input:focus { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18); }
.feedback-correct, .feedback-wrong, .feedback-reveal { border-width: 2px; border-radius: 14px; font-weight: 700; }
.btn-nav, .btn-hint-sm, .btn-show-answer {
  font-family: var(--ds-font-display); font-weight: 600; border-radius: 12px;
  border: 2px solid var(--ds-edge); box-shadow: 0 3px 0 var(--ds-edge);
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-hint-sm     { border-color: #fcd34d; box-shadow: 0 3px 0 #fcd34d; }
.btn-show-answer { border-color: #fca5a5; box-shadow: 0 3px 0 #fca5a5; }
.btn-nav:hover, .btn-hint-sm:hover, .btn-show-answer:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--ds-edge); }
.dark .btn-nav { border: 2px solid #334155; box-shadow: 0 3px 0 #0b1220; }
.nav-dot.active { background: var(--ds-primary); }
.mastery-bar-wrap { border-radius: 999px; }
.stat-box { border-radius: 14px; }
.stat-box .stat-val { font-family: var(--ds-font-display); font-weight: 600; }
.wave-badge { font-family: var(--ds-font-display); font-weight: 600; }

/* ── Stage pages: player join/verify/waiting (glass theme classes) ──────────
   Opt in with <body class="ds-page ds-stage-page">. */
body.ds-stage-page {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 200, 0, 0.18), transparent 70%),
    linear-gradient(180deg, #4f46e5 0%, #312e81 100%);
  background-attachment: fixed;
}
.ds-stage-page h1, .ds-stage-page h2, .ds-stage-page h3 { font-family: var(--ds-font-display); font-weight: 600; }
.ds-stage-page .glass-effect {
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-bottom: 6px solid rgba(0, 0, 0, 0.18);
}
.ds-stage-page .field { border-bottom-width: 4px; border-radius: 14px; font-weight: 700; }
.ds-stage-page .field:focus { border-color: #ffc800; box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.3); }
.ds-stage-page .save-btn, .ds-stage-page .join-btn {
  background: var(--ds-green); color: #fff;
  border: 2px solid var(--ds-green-edge); box-shadow: 0 4px 0 var(--ds-green-edge);
  font-family: var(--ds-font-display); font-weight: 600;
  transition: transform .12s, box-shadow .12s;
}
.ds-stage-page .save-btn:hover:not(:disabled), .ds-stage-page .join-btn:hover:not(:disabled) {
  background: var(--ds-green); transform: translateY(1px); box-shadow: 0 3px 0 var(--ds-green-edge);
}
.ds-stage-page .save-btn:active:not(:disabled), .ds-stage-page .join-btn:active:not(:disabled) {
  transform: translateY(3px); box-shadow: 0 1px 0 var(--ds-green-edge);
}
.ds-stage-page .ghost-btn {
  border: 2px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12);
  box-shadow: 0 3px 0 rgba(0,0,0,0.2); font-family: var(--ds-font-display); font-weight: 500;
  transition: background-color .2s, transform .12s, box-shadow .12s;
}
.ds-stage-page .ghost-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,0.2); }
.ds-stage-page .mode-btn, .ds-stage-page .tab-btn { font-family: var(--ds-font-display); font-weight: 500; }
.ds-stage-page .mode-btn.active, .ds-stage-page .tab-btn.active {
  background: #fff; border-color: #fff; color: #4f46e5; box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}
.ds-stage-page .opt-tile { border-bottom-width: 4px; }
.ds-stage-page .swatch.selected { box-shadow: 0 0 0 3px #3730a3, 0 0 0 6px #ffc800; }

.ds-btn--pink { --btn-bg: #ec4899; --btn-edge: #be185d; }
.ds-btn--lg   { padding: 16px 28px; font-size: 18px; border-radius: 16px; }

/* ── Resource type filter tabs (resources + public hub) ───────────────────────
   resources.js / publicResources.js rebuild these classes on click, so the
   shape lives here: rounded rectangles with an edge instead of pills. */
.type-tab-btn {
  display: inline-flex; align-items: center;
  border-radius: 12px;
  border: 2px solid var(--ds-edge); border-bottom-width: 4px;
  font-family: var(--ds-font-display); font-weight: 500;
  transition: transform 0.12s, background-color 0.15s, color 0.15s;
}
.type-tab-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.dark .type-tab-btn { border-color: #334155; border-bottom-color: #0b1220; }
.type-tab-btn.bg-indigo-600,
.dark .type-tab-btn.bg-indigo-600 {
  background: var(--ds-primary); border-color: var(--ds-primary-edge);
}

/* ── Stage pages: avatar pickers ──────────────────────────────────────────────
   Bigger tiles (fewer columns) so the character is easy to see, and a thin
   selection ring. Overrides the grid-cols-* set in the templates and in
   avatarEditor.js, and the ring-4 set by playerVerify.js / playerWaiting.js. */
.ds-stage-page #avatar-grid,
.ds-stage-page #studio-avatar-grid,
.ds-stage-page #tab-content .grid,
.ds-stage-page #studio-tab-content .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .ds-stage-page #avatar-grid,
  .ds-stage-page #studio-avatar-grid,
  .ds-stage-page #tab-content .grid,
  .ds-stage-page #studio-tab-content .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ds-stage-page .opt-tile.selected { box-shadow: 0 0 0 2px #ffc800; border-color: #ffc800; }
.ds-stage-page img.avatar-selected { box-shadow: 0 0 0 2px #ffc800; border-color: #ffc800; }
/* Bigger tiles need a little more room in the scrolling editor */
.ds-stage-page .editor-scroll { max-height: min(24rem, 44vh); }
@media (min-width: 1024px) { .ds-stage-page .editor-scroll { max-height: 26rem !important; } }

/* ── Folder cards (resources.js) ──────────────────────────────────────────────
   Capsule card with a tab on the top-left like a real folder. The tab sits
   over the body's top border so the two read as one shape. */
.ds-folder { position: relative; padding-top: 18px; transition: transform 0.15s; }
.ds-folder:hover { transform: translateY(-3px); }
.ds-folder__tab {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 42%; max-width: 140px; height: 22px;
  border: 2px solid var(--ds-edge); border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.ds-folder__body { border-top-left-radius: 0; }

/* ── Dropdown (static/scripts/dsDropdown.js) ──────────────────────────────────
   Opt in with <select data-ds-dropdown>. The native select stays in the DOM, hidden. */
:where(.ds-dd) { min-width: 10rem; }
.ds-dd { position: relative; display: inline-block; vertical-align: middle; }
.ds-dd.w-full { display: block; }
/* Compact variant for dense rows (game settings, filter bars with text-sm) */
.ds-dd--sm { min-width: 8rem; }
.ds-dd--sm .ds-dd__btn { padding: 7px 12px; font-size: 14px; }
.ds-dd--sm .ds-dd__item { padding: 7px 10px; font-size: 13px; }
.ds-dd__native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.ds-dd__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; text-align: left; cursor: pointer;
  font-family: var(--ds-font); font-weight: 700; font-size: 15px; line-height: 1.3;
  color: var(--ds-text); background: var(--ds-surface);
  border: 2px solid var(--ds-edge); border-bottom-width: 4px; border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.ds-dd__btn:hover:not(:disabled) { border-color: #a5b4fc; }
.ds-dd__btn:focus-visible,
.ds-dd.is-open .ds-dd__btn {
  outline: none; border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
.ds-dd__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ds-dd__btn.is-placeholder .ds-dd__label { color: var(--ds-text-muted); font-weight: 600; }
.ds-dd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-dd__chev { flex-shrink: 0; font-size: 12px; color: var(--ds-text-muted); transition: transform 0.15s; }
.ds-dd.is-open .ds-dd__chev { transform: rotate(180deg); color: var(--ds-primary); }

.ds-dd__menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 100%; width: max-content; max-width: min(22rem, 90vw); max-height: 18rem; overflow-y: auto;
  padding: 6px;
  background: var(--ds-surface);
  border: 2px solid var(--ds-edge); border-bottom-width: 4px; border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
.ds-dd__menu[hidden] { display: none; }
.ds-dd--up .ds-dd__menu { top: auto; bottom: calc(100% + 6px); }

.ds-dd__group {
  padding: 8px 12px 4px; font-family: var(--ds-font-display); font-weight: 500;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-muted);
}
.ds-dd__item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  text-align: left; font-family: var(--ds-font); font-weight: 700; font-size: 14px; color: var(--ds-text);
}
.ds-dd__item:hover:not(:disabled),
.ds-dd__item:focus-visible { outline: none; background: var(--ds-surface-muted); }
.ds-dd__item.is-selected { color: var(--ds-primary); background: rgba(79, 70, 229, 0.08); }
.ds-dd__item:disabled { opacity: 0.45; cursor: not-allowed; }
.ds-dd__check { font-size: 12px; opacity: 0; }
.ds-dd__item.is-selected .ds-dd__check { opacity: 1; }
.dark .ds-dd__btn:hover:not(:disabled) { border-color: #818cf8; }
.dark .ds-dd__btn { border-color: #334155; border-bottom-color: #0b1220; }
.dark .ds-dd__menu { border-color: #334155; border-bottom-color: #0b1220; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); }
.dark .ds-dd__item.is-selected { color: #a5b4fc; background: rgba(129, 140, 248, 0.14); }

/* Dropdown menu scrollbar: slim, rounded, inset from the menu edge, indigo to match the theme */
.ds-dd__menu {
  overscroll-behavior: contain;   /* scrolling the list never scrolls the page or modal behind it */
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 70, 229, 0.45) transparent;
}
.ds-dd__menu::-webkit-scrollbar { width: 10px; }
.ds-dd__menu::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.ds-dd__menu::-webkit-scrollbar-thumb {
  background-color: rgba(79, 70, 229, 0.45);
  border: 3px solid transparent;      /* transparent border + padding-box clip = a thinner pill inside the gutter */
  background-clip: padding-box;
  border-radius: 999px;
}
.ds-dd__menu::-webkit-scrollbar-thumb:hover { background-color: rgba(79, 70, 229, 0.75); }
.dark .ds-dd__menu { scrollbar-color: rgba(165, 180, 252, 0.45) transparent; }
.dark .ds-dd__menu::-webkit-scrollbar-thumb { background-color: rgba(165, 180, 252, 0.4); background-clip: padding-box; }
.dark .ds-dd__menu::-webkit-scrollbar-thumb:hover { background-color: rgba(165, 180, 252, 0.7); background-clip: padding-box; }

/* Profile Studio: a step smaller than the lobby pickers (4 per row on phones, 5 on wider screens) */
.ds-stage-page.ds-profile-studio #studio-avatar-grid,
.ds-stage-page.ds-profile-studio #studio-tab-content .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
@media (min-width: 640px) {
  .ds-stage-page.ds-profile-studio #studio-avatar-grid,
  .ds-stage-page.ds-profile-studio #studio-tab-content .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ── Custom scrollbar (.ds-scroll) ─────────────────────────────────────────────
   Same slim indigo thumb as the dropdown menus. Applied to the "View Questions" and "View Deck" lists
   by selector, and available as a class for any other scrolling area. */
.ds-scroll,
.questions-overview-list,
.deck-overview-cards {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 70, 229, 0.45) transparent;
}
:is(.ds-scroll, .questions-overview-list, .deck-overview-cards)::-webkit-scrollbar { width: 10px; }
:is(.ds-scroll, .questions-overview-list, .deck-overview-cards)::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
:is(.ds-scroll, .questions-overview-list, .deck-overview-cards)::-webkit-scrollbar-thumb {
  background-color: rgba(79, 70, 229, 0.45);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
:is(.ds-scroll, .questions-overview-list, .deck-overview-cards)::-webkit-scrollbar-thumb:hover { background-color: rgba(79, 70, 229, 0.75); background-clip: padding-box; }
.dark :is(.ds-scroll, .questions-overview-list, .deck-overview-cards) { scrollbar-color: rgba(165, 180, 252, 0.45) transparent; }
.dark :is(.ds-scroll, .questions-overview-list, .deck-overview-cards)::-webkit-scrollbar-thumb { background-color: rgba(165, 180, 252, 0.4); background-clip: padding-box; }
.dark :is(.ds-scroll, .questions-overview-list, .deck-overview-cards)::-webkit-scrollbar-thumb:hover { background-color: rgba(165, 180, 252, 0.7); background-clip: padding-box; }

/* ═══════════════════════════════════════════════════════════════════════════
   Overview modals: "View Questions" (quiz) and "Deck Overview" (flashcards)
   ═══════════════════════════════════════════════════════════════════════════ */
.questions-overview-modal,
.deck-overview-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.questions-overview-modal.hidden,
.deck-overview-modal.hidden { display: none; }

.questions-overview-content,
.deck-overview-content {
  width: 100%; max-width: 980px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ds-surface);
  border: 2px solid var(--ds-edge); border-bottom-width: 5px; border-radius: 22px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
}
.dark .questions-overview-content,
.dark .deck-overview-content { border-color: #334155; border-bottom-color: #0b1220; }

/* Header: solid indigo band, count pill, chunky close button */
.questions-overview-header,
.deck-overview-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 16px 24px;
  background: var(--ds-primary);
  border-bottom: 5px solid var(--ds-primary-edge);
}
.dark .questions-overview-header,
.dark .deck-overview-header { background: #3730a3; border-bottom-color: #1e1b4b; }

.questions-overview-header h2,
.deck-overview-header h2,
.dark .questions-overview-header h2,
.dark .deck-overview-header h2 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0;
  font-family: var(--ds-font-display); font-size: 22px; font-weight: 600; color: #fff;
}
.overview-count {
  padding: 3px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-family: var(--ds-font-display); font-size: 13px; font-weight: 500;
}

.close-overview-btn,
.dark .close-overview-btn {
  flex-shrink: 0; width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 12px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.12s, box-shadow 0.12s, background-color 0.15s;
}
.close-overview-btn:hover,
.dark .close-overview-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.24); transform: translateY(1px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
.close-overview-btn:active { transform: translateY(3px); box-shadow: none; }

/* Scrolling list on a tinted tray so the item cards stand out */
.questions-overview-list,
.deck-overview-cards {
  overflow-y: auto; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--ds-surface-muted);
}
.dark .questions-overview-list,
.dark .deck-overview-cards { background: #0F172A; }

/* Items: every number badge uses the site's indigo */
.overview-question,
.overview-card {
  --accent: #4f46e5; --edge: #3730a3;
  display: flex; gap: 16px; padding: 18px 20px;
  background: var(--ds-surface);
  border: 2px solid var(--ds-edge); border-radius: 16px;
}
.dark .overview-question,
.dark .overview-card { background: var(--ds-surface); border-color: #334155; }

.overview-question-number,
.overview-card-number {
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--accent); box-shadow: 0 3px 0 var(--edge);
  font-family: var(--ds-font-display); font-size: 16px; font-weight: 600; color: #fff;
}
.overview-question-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.overview-question-text,
.dark .overview-question-text { font-size: 16px; font-weight: 700; line-height: 1.55; color: var(--ds-text); }

/* Deck: term and definition as two panels */
.overview-card-content { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.overview-term,
.overview-definition { min-width: 0; padding: 12px 14px; border: 2px solid var(--ds-edge); border-radius: 12px; }
.overview-term { background: rgba(79, 70, 229, 0.06); border-color: rgba(79, 70, 229, 0.22); }
.overview-definition { background: var(--ds-surface-muted); }
.dark .overview-term { background: rgba(129, 140, 248, 0.1); border-color: rgba(129, 140, 248, 0.3); }
.dark .overview-definition { background: #0F172A; border-color: #334155; }

.overview-label,
.dark .overview-label {
  display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: 7px;
  font-family: var(--ds-font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.overview-term .overview-label { background: var(--ds-primary); color: #fff; }
.overview-definition .overview-label { background: #d9dce3; color: #374151; }
.dark .overview-term .overview-label { background: #6366f1; color: #fff; }
.dark .overview-definition .overview-label { background: #334155; color: #cbd5e1; }
.overview-text,
.dark .overview-text { font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--ds-text); }

.overview-image-container,
.overview-question-image-container { margin-top: 10px; }
.overview-image,
.overview-question-image {
  max-width: 100%; max-height: 200px; object-fit: contain; cursor: pointer;
  border-radius: 10px; border: 2px solid var(--ds-edge); transition: opacity 0.2s;
}
.overview-image:hover,
.overview-question-image:hover { opacity: 0.85; }

@media (max-width: 768px) {
  .questions-overview-list, .deck-overview-cards { padding: 14px; gap: 12px; }
  .questions-overview-header, .deck-overview-header { padding: 14px 16px; }
  .questions-overview-header h2, .deck-overview-header h2 { font-size: 19px; }
  .overview-question, .overview-card { padding: 14px; gap: 12px; }
  .overview-card-content { grid-template-columns: 1fr; gap: 10px; }
}

/* Studio item cards (flashcard / question / note section). They sit inside a .ds-card, so in dark mode they
   go a step darker than it and the fields inside (.ds-input / .ds-textarea) stay a step lighter. */
.card-item, .question-item, .section-item {
  background: var(--ds-surface-muted);
  border: 2px solid var(--ds-edge);
  border-radius: 18px;
}
.dark .card-item, .dark .question-item, .dark .section-item {
  background: rgba(15, 23, 42, 0.55);
  border-color: #334155;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Resource picker (templates/partials/user-resource-popup.html, static/scripts/resourceImports.js)
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-picker { z-index: 70; }

.ds-picker__panel {
  position: relative;
  width: 100%; max-width: 1100px; height: min(88vh, 780px);
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  border-radius: 22px;
}

/* Header: solid indigo band; the close button is the shared .close-overview-btn */
.ds-picker__header {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 16px 24px;
  background: var(--ds-primary); border-bottom: 5px solid var(--ds-primary-edge);
}
.dark .ds-picker__header { background: #3730a3; border-bottom-color: #1e1b4b; }
.ds-picker__header h2 {
  margin: 0; font-family: var(--ds-font-display); font-size: 22px; font-weight: 600; color: #fff;
}

.ds-picker__controls { flex-shrink: 0; padding: 16px 20px 0; }
.ds-picker__tabs { margin-bottom: 12px; }
.ds-picker__search { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ds-picker__search .ds-btn { flex-shrink: 0; }

.ds-picker__form { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; }
.ds-picker__form.hidden { display: none; }

/* The only part that scrolls */
.ds-picker__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 16px; }
.ds-picker__body.hidden { display: none; }

.ds-picker__grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* ── Compact capsule cards ── */
.ds-picker__card {
  position: relative; display: flex; flex-direction: column; text-align: left; overflow: hidden; cursor: pointer;
  background: var(--ds-surface); color: var(--ds-text);
  border: 2px solid var(--ds-edge); border-bottom-width: 4px; border-radius: 16px;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.dark .ds-picker__card { border-color: #334155; border-bottom-color: #0b1220; }
.ds-picker__card:hover:not(.is-existing) { transform: translateY(-2px); border-color: #a5b4fc; }
.ds-picker__card:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.45); outline-offset: 2px; }
.ds-picker__card.is-selected,
.dark .ds-picker__card.is-selected {
  border-color: var(--ds-primary); border-bottom-color: var(--ds-primary-edge);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
.dark .ds-picker__card.is-selected { border-color: #818cf8; border-bottom-color: #4f46e5; }
.ds-picker__card.is-existing { opacity: 0.6; cursor: not-allowed; }

.ds-picker__cap {
  position: relative; height: 84px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--cap-light);
}
.dark .ds-picker__cap { background: var(--cap-dark); }
.ds-picker__decor { position: absolute; inset: 0; width: 100%; height: 100%; stroke: rgba(255, 255, 255, 0.6); pointer-events: none; }
.dark .ds-picker__decor { stroke: rgba(255, 255, 255, 0.12); }
.ds-picker__icon { position: relative; height: 56px; width: auto; max-width: 60%; object-fit: contain; }

.ds-picker__check {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ds-primary); color: #fff; font-size: 12px;
  box-shadow: 0 2px 0 var(--ds-primary-edge);
  opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease;
}
.ds-picker__card.is-selected .ds-picker__check { opacity: 1; transform: scale(1); }

.ds-picker__added {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 8px; background: #ffc800; color: #1c1917;
  font-size: 11px; font-weight: 800;
}

.ds-picker__info { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; min-width: 0; }
.ds-picker__title {
  font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--ds-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ds-picker__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ds-picker__date { font-size: 12px; font-weight: 700; color: var(--ds-text-muted); }

/* Loading placeholders (flat, pulsing) */
.ds-picker__skel {
  height: 168px; border-radius: 16px; background: var(--ds-surface-muted);
  animation: ds-picker-pulse 1.1s ease-in-out infinite alternate;
}
.dark .ds-picker__skel { background: #0F172A; }
@keyframes ds-picker-pulse { from { opacity: 1; } to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .ds-picker__skel { animation: none; } }

/* Pagination + footer */
.ds-picker__pager {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; border-top: 2px solid var(--ds-edge);
}
.dark .ds-picker__pager { border-top-color: #334155; }
.ds-picker__pager.hidden { display: none; }

.ds-picker__footer {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; background: var(--ds-surface-muted); border-top: 2px solid var(--ds-edge);
}
.dark .ds-picker__footer { background: #0F172A; border-top-color: #334155; }
.ds-picker__footer.hidden { display: none; }
.ds-picker__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.ds-picker__sel {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0;
  padding: 6px 8px 6px 14px; border-radius: 12px;
  background: #eef2ff; border: 2px solid #c7d2fe; color: #3730a3;
  font-weight: 800; font-size: 14px;
}
.ds-picker__sel > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-picker__sel button {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; color: inherit;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s ease;
}
.ds-picker__sel button:hover { background: rgba(79, 70, 229, 0.15); }
.dark .ds-picker__sel { background: rgba(129, 140, 248, 0.14); border-color: rgba(129, 140, 248, 0.35); color: #c7d2fe; }

.ds-picker__toast { position: fixed; bottom: 16px; right: 16px; z-index: 80; pointer-events: none; }

@media (max-width: 640px) {
  .ds-picker { padding: 0; align-items: flex-end; }
  .ds-picker__panel { height: 94vh; max-width: none; border-radius: 22px 22px 0 0; }
  .ds-picker__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .ds-picker__search { flex-wrap: wrap; }
  .ds-picker__search .relative { flex-basis: 100%; }
  .ds-picker__footer { flex-direction: column; align-items: stretch; }
  .ds-picker__actions { margin-left: 0; }
  .ds-picker__actions .ds-btn { flex: 1; }
}