/* Cluecards accessibility and color-scheme layer. Shared site navigation keeps its own tokens. */
.cc-page .page,
.cc-page #cc-picker-dialog,
.cc-page #cc-question-dialog {
  color-scheme: light dark;
  --cc-canvas: #f5f4f0;
  --cc-surface: #fff;
  --cc-surface-soft: #faf8fc;
  --cc-surface-raised: #f1ecf8;
  --cc-text: #292630;
  --cc-text-muted: #6a6372;
  --cc-border: #8f7fae;
  --cc-accent: #70509e;
  --cc-accent-soft: #c9b3f2;
  --cc-focus: #6d3da5;
}

.cc-page .cc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cc-page .cc-keyboard-help {
  display: block;
  margin-top: 7px;
  color: var(--cc-text-muted);
  font-size: .72rem;
  line-height: 1.5;
}

/* All controls in the study flow retain a WCAG-sized pointer target. */
.cc-page :is(button, select, input[type="search"], .source-link) {
  min-height: 44px;
}

.cc-page :is(button, a, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--cc-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--cc-surface) !important;
}

.cc-page .reveal-button:disabled {
  opacity: 1;
  cursor: default;
  background: var(--cc-surface-raised);
  color: var(--cc-text-muted);
}

@media (prefers-color-scheme: dark) {
  body.cc-page {
    background: #10111b !important;
    color: #f1edf6;
  }

  .cc-page .page,
  .cc-page #cc-picker-dialog,
  .cc-page #cc-question-dialog {
    --cc-canvas: #10111b;
    --cc-surface: #1b1d29;
    --cc-surface-soft: #222532;
    --cc-surface-raised: #292b3a;
    --cc-text: #f1edf6;
    --cc-text-muted: #c5bdcf;
    --cc-border: #8f7fae;
    --cc-accent: #c8afe6;
    --cc-accent-soft: #8f7fae;
    --cc-focus: #d7bcf4;
    color: var(--cc-text);
  }

  .cc-page :is(.cc-account-tools, #cc-free-decks, .shell, .library, .workspace, .leaderboard, .cc-quick-switch, .cc-session-summary),
  .cc-page #cc-picker-dialog,
  .cc-page #cc-picker-dialog .library-head {
    background: var(--cc-surface) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
  }

  .cc-page :is(.study-card, .deck-card, .stat) {
    background: var(--cc-surface-soft) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
  }

  .cc-page :is(.session-title strong, .card-clue, .answer-text, .leaderboard-head strong, .cc-group-toggle, .deck-card, .cc-quick-switch label),
  .cc-page :is(.cc-account-tools strong, #cc-free-deck-count, .cc-session-summary h2) {
    color: var(--cc-text) !important;
  }

  .cc-page :is(.session-title span, .cc-keyboard-help, .card-kicker, .explain-text, .deck-meta, .stat span, .cc-group-count, #cc-quick-help, .cc-switch-footer > span, #cc-picker-help) {
    color: var(--cc-text-muted) !important;
  }

  .cc-page :is(.card-kicker, .card-answer, .session-bar, .cc-switch-footer, .cc-review-actions, .cc-group + .cc-group, .leaderboard-list li, .cc-picker-head) {
    border-color: var(--cc-border) !important;
  }

  .cc-page :is(button, select, input[type="search"], .pick-action, .grade-btn, .nav-btn, .text-action, #cc-close-picker),
  .cc-page #cc-question-dialog button {
    background: var(--cc-surface-soft) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
  }

  .cc-page #cc-question-dialog {
    background: var(--cc-surface) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
  }
  .cc-page :is(.grade-btn small, .answer-label, .deck-access) {
    color: var(--cc-text-muted) !important;
  }
  .cc-page :is(.track-picker button.active, .command-row button.active, .mode-controls button.active, .leaderboard-tabs button.active,
    .track-picker button[aria-pressed="true"], .command-row button[aria-pressed="true"], .mode-controls button[aria-pressed="true"], .leaderboard-tabs button[aria-pressed="true"],
    .leaderboard-tabs button[aria-selected="true"]) {
    background: var(--cc-accent-soft) !important;
    color: #10111b !important;
    border-color: #c8afe6 !important;
  }

  .cc-page :is(.reveal-button, .top-action.primary, #cc-start-free, #cc-my-review, .cc-change-deck, .pick-action.primary) {
    background: var(--cc-accent-soft) !important;
    color: #10111b !important;
    border-color: #c8afe6 !important;
  }

  .cc-page :is(.deck-card:hover, .deck-card.active, .deck-row.selected .deck-card, .text-action.active),
  .cc-page #cc-library-status {
    background: var(--cc-surface-raised) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
  }

  .cc-page .progress-track { background: #343747; }
  .cc-page .progress-fill { background: #c8afe6; }
  .cc-page .source-link { color: #d7bcf4; }
  .cc-page .toast { background: #222532; color: #f1edf6; border-color: #8f7fae; }
  .cc-page #cc-picker-dialog::backdrop { background: rgba(5, 6, 12, .82); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-page *,
  .cc-page *::before,
  .cc-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}