/* =========================================================
   KIARAHUB — ADAPTIVE LEARNING LAYER
   Reuses the existing navy/gold/teal tokens rather than
   introducing a new palette: teal is already "live data" in
   this system (video, exam timer), so it becomes the circuit
   for adaptive-engine surfaces. Gold stays the achievement/CTA
   accent. IBM Plex Mono (already loaded) carries every number
   the engine outputs, so ratings and percentages read as
   instrumentation, not decoration.
   ========================================================= */

.kh-ai-chip{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--kh-font-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  padding:.35em .8em; border-radius:100px;
  background:var(--kh-teal-tint); color:var(--kh-teal);
  border:1px solid rgba(31,111,107,.25);
}
.kh-ai-chip::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--kh-teal-bright); flex:none;
  box-shadow:0 0 0 3px rgba(44,156,147,.22);
}
@media (prefers-reduced-motion: no-preference){
  .kh-ai-chip::before{ animation:kh-pulse 1.8s ease-in-out infinite; }
}
@keyframes kh-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---- Difficulty meter (single-quiz.php) ---- */
.kh-difficulty-meter{ margin-bottom:1em; }
.kh-difficulty-track{
  height:8px; border-radius:5px; background:var(--kh-line); overflow:hidden;
}
.kh-difficulty-fill{
  height:100%; width:0%; border-radius:5px;
  background:linear-gradient(90deg, var(--kh-teal), var(--kh-teal-bright));
  transition:width .5s var(--kh-ease);
}
.kh-difficulty-label{
  display:block; margin-top:.5em; font-family:var(--kh-font-mono);
  font-size:.72rem; letter-spacing:.03em; color:var(--kh-ink-soft);
}

/* ---- Quiz question stage ---- */
.kh-quiz-prompt{ font-family:var(--kh-font-display); font-size:1.25rem; margin:0 0 1em; }
.kh-quiz-options{ display:grid; gap:10px; }
.kh-quiz-option{
  display:flex; align-items:center; gap:.8em; text-align:left;
  width:100%; padding:.85em 1em; border-radius:var(--kh-radius-sm);
  border:1.5px solid var(--kh-line); background:var(--kh-paper-raised);
  font-family:var(--kh-font-body); font-size:.96rem; cursor:pointer;
  transition:border-color .18s ease, transform .18s var(--kh-ease), background .18s ease;
}
.kh-quiz-option:hover:not(:disabled){ border-color:var(--kh-teal); transform:translateX(2px); }
.kh-quiz-option:disabled{ cursor:default; }
.kh-quiz-option__letter{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--kh-font-mono); font-size:.75rem; font-weight:700;
  background:var(--kh-teal-tint); color:var(--kh-teal);
}
.kh-quiz-option.is-correct{ border-color:var(--kh-teal-bright); background:var(--kh-teal-tint); }
.kh-quiz-option.is-wrong{ border-color:var(--kh-coral); background:var(--kh-coral-tint); }
.kh-quiz-feedback{
  margin-top:1.2em; padding-top:1.2em; border-top:1px dashed var(--kh-line);
}
.kh-quiz-feedback p{ color:var(--kh-ink-soft); font-size:.9rem; }
.kh-quiz-summary{ text-align:center; padding:1em 0; }
.kh-quiz-summary h3{ font-family:var(--kh-font-display); font-size:2rem; margin:.6em 0 .3em; }

/* ---- Recommendation cards ---- */
.kh-ai-recs{ margin-top:1em; }
.kh-ai-recs__head{ max-width:60ch; margin-bottom:1.6em; }
.kh-ai-rec-card{
  display:block; padding:20px; position:relative;
}
.kh-ai-match{
  position:absolute; top:20px; right:20px;
  font-family:var(--kh-font-mono); font-size:.7rem; font-weight:700;
  color:var(--kh-teal);
}
.kh-ai-rec-card h3{ margin:.6em 0 0; font-size:1.05rem; }

/* ---- Dashboard: subject mastery bars ---- */
.kh-mastery-row{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.kh-mastery-row .name{ flex:0 0 140px; font-size:.85rem; color:var(--kh-ink-soft); }
.kh-mastery-track{ flex:1; height:10px; border-radius:5px; background:var(--kh-line); overflow:hidden; }
.kh-mastery-fill{ height:100%; border-radius:5px; background:var(--kh-gradient-teal); }
.kh-mastery-fill.is-weak{ background:linear-gradient(90deg, var(--kh-coral), var(--kh-gold)); }
.kh-mastery-score{ flex:0 0 42px; text-align:right; font-family:var(--kh-font-mono); font-size:.8rem; }

.kh-readiness-ring{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
}
.kh-readiness-ring .kh-ai-chip{ margin-bottom:.6em; }

/* ---- Hero adaptive sparkline (front-page.php) ---- */
.kh-hero-ai-panel{
  background:var(--kh-glass-bg); border:1px solid var(--kh-glass-border);
  border-radius:var(--kh-radius); padding:20px; backdrop-filter:blur(10px);
  margin-top:1.6em;
}
.kh-hero-ai-panel canvas{ width:100%; height:90px; display:block; }
.kh-hero-ai-panel .kh-hero-ai-caption{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:.6em; font-family:var(--kh-font-mono); font-size:.7rem;
  color:var(--kh-ink-soft); letter-spacing:.02em;
}

/* ---- Exam-board filter chips ---- */
.kh-board-chips{ display:flex; gap:10px; flex-wrap:wrap; margin:1.4em 0 2em; }
.kh-board-chip{
  font-family:var(--kh-font-mono); font-size:.78rem; font-weight:600;
  padding:.55em 1.1em; border-radius:100px; border:1.5px solid var(--kh-line);
  color:var(--kh-ink); background:var(--kh-paper-raised); text-decoration:none;
  transition:border-color .18s ease, color .18s ease, transform .18s var(--kh-ease);
}
.kh-board-chip:hover{ border-color:var(--kh-teal); color:var(--kh-teal); transform:translateY(-2px); }

@media (max-width: 780px){
  .kh-mastery-row .name{ flex-basis:100px; font-size:.78rem; }
  .kh-dashboard-report-grid{ grid-template-columns:1fr !important; }
}