:root {
  /* ---- Restored light-blue-tint palette (preferred GIIS9new base) ----
     Original bright accents kept; refinement lives in HIERARCHY + spacing,
     not in recolouring. All PRIMARY buttons use the blue->emerald gradient. */

  --navy: #071b33;
  --navy-2: #0a2a4a;

  --blue: #2d6cdf;
  --emerald: #00a77f;
  --lime: #a2ff86;

  /* signature gradient (blue -> emerald) for ALL primary buttons */
  --grad: linear-gradient(135deg, #2d6cdf, #00a77f);
  --grad-hover: linear-gradient(135deg, #2961c9, #00946f);

  /* soft tints for secondary/outline buttons */
  --accent: #2d6cdf;
  --accent-deep: #1f57c4;
  --accent-soft: #e8f0fe;
  --emerald-soft: #e3f5ef;

  /* text */
  --ink: #102033;
  --ink-2: #3a4a5e;
  --heading: #0e2138;
  --muted: #677489;

  /* light-blue surface ramp */
  --bg: #f4f7fb;
  --bg-2: #eef4fb;
  --card: #ffffff;
  --line: #dce5ef;
  --line-strong: #c6d4e6;

  --warn: #ffb84d;
  --danger: #ff6b6b;

  --shadow-sm: 0 1px 2px rgba(16,32,51,0.05), 0 1px 3px rgba(16,32,51,0.07);
  --shadow-md: 0 6px 18px rgba(16,32,51,0.07), 0 2px 6px rgba(16,32,51,0.05);
  --shadow-lg: 0 16px 40px rgba(16,32,51,0.10), 0 4px 10px rgba(16,32,51,0.05);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
:root {
  --top-offset: 118px;
  --panel-min-height: calc(100vh - var(--top-offset));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: radial-gradient(circle at top left, #e9f7ff, var(--bg) 40%, #f8fbff 100%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 320px 1fr;
}

.sidebar {
  background: linear-gradient(180deg, #275317, #1a3810);
  color: white;
  padding: 24px 20px;
  box-shadow: 10px 0 30px rgba(20,32,12,0.18);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex: 0 0 auto;
}

.brand-logo{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  background:transparent;
  border:none;
  box-shadow:none;
  flex:0 0 auto;
}

.brand h1 {
  margin: 0;
  font-size: 22px;
}

.brand p {
  margin: 3px 0 0;
  color: #b6c6d8;
  font-size: 13px;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.brand-wordmark-img{
  height:28px;
  width:auto;
  max-width:185px;
  object-fit:contain;
  display:block;
}

.brand-copy p{
  margin:4px 0 0;
  font-size:13px;
  color:rgba(220,230,245,0.72);
  line-height:1.2;
}

.student-card {
  display: flex;
  align-items: center;
  gap: 12px;

  width: calc(100% - 44px);
  margin: 18px 22px 20px 22px;
  padding: 18px 20px;

  box-sizing: border-box;
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.student-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #62f6a8;
  box-shadow: 0 0 14px rgba(98, 246, 168, 0.75);
  flex-shrink: 0;
}

.student-info {
  min-width: 0;
}

.student-name {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.student-plan {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(214, 225, 245, 0.78);
  line-height: 1.25;
}

.chapter-pill {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 13px;
  line-height: 1.35;
  margin-bottom: 18px;
  color: #eaf2ff;
  flex: 0 0 auto;
}

.concept-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-btn {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: #d9e7f8;
  text-align: left;
  border-radius: 14px;
  padding: 12px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.18s ease;
}

.nav-btn:hover { background: rgba(255,255,255,0.1); }
.nav-btn.active {
  background: rgba(162,255,134,0.14);
  border-color: rgba(162,255,134,0.65);
  color: white;
}

.voice-card {
  margin-top: 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  flex: 0 0 auto;
}

.voice-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.voice-card p {
  margin: 0 0 12px;
  font-size: 11px;
  color: #b6c6d8;
  line-height: 1.45;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.lesson {
  padding: 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--emerald);
  font-weight: 800;
  font-size: 12px;
}

h2 {
  margin: 5px 0 0;
  font-size: 30px;
  color: #071b33;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover { transform: translateY(-1px); }

.primary {
  background: linear-gradient(135deg, var(--blue), var(--emerald));
  color: white;
  box-shadow: 0 10px 24px rgba(45,108,223,0.22);
}

.ghost {
  background: white;
  color: var(--navy);
  border: 1px solid var(--line);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 360px;
  gap: 18px;
  align-items: stretch;
  min-height: 0;
  flex: 1 1 auto;
}

.canvas-card, .explain-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(220,229,239,0.9);
  box-shadow: 0 18px 45px rgba(18,47,77,0.08);
  border-radius: 24px;
}

.canvas-card {
  padding: 14px;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#stage {
  width: 100%;
  height: clamp(480px, 58vh, 640px);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid #e8eef6;
  flex: 1 1 auto;
}

.explain-card {
  padding: 22px;
  min-height: var(--panel-min-height);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.section h3 {
  margin: 0 0 7px;
  color: var(--navy);
  font-size: 15px;
}

.section p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.interaction-panel {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 4px 0;
  color: var(--muted);
}

.interaction-panel input, .interaction-panel select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: white;
}

.interaction-panel button {
  padding: 9px 13px;
  background: var(--navy);
  color: white;
}

.axis { stroke: #17375e; stroke-width: 3; }
.grid-line { stroke: #dce6f1; stroke-width: 1; }
.grid-major { stroke: #b8c8da; stroke-width: 1.35; }
.label { fill: #24384f; font-size: 14px; font-weight: 750; }
.small-label { fill: #53677d; font-size: 11px; font-weight: 600; }
.glow-text { fill: #071b33; font-size: 26px; font-weight: 850; }
.point { fill: var(--emerald); stroke: #063f34; stroke-width: 3; }
.point2 { fill: var(--warn); stroke: #7a4a00; stroke-width: 3; }
.point3 { fill: var(--danger); stroke: #6b1919; stroke-width: 3; }
.helper { stroke: #2d6cdf; stroke-width: 3; stroke-dasharray: 7 6; fill: none; }
.highlight { fill: rgba(162,255,134,0.26); stroke: rgba(0,167,127,0.9); stroke-width: 2; }
.room-wall { fill: #fdfefe; stroke: #102033; stroke-width: 4; }
.furniture { fill: rgba(45,108,223,0.14); stroke: #2d6cdf; stroke-width: 2; }
.door { stroke: #00a77f; stroke-width: 6; stroke-linecap: round; }
.quad { opacity: 0.28; }
.formula-box {
  fill: white;
  stroke: #dce5ef;
  stroke-width: 2;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.08));
}
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .content-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; }
}


/* Karka / Aarya avatar, chat, dynamic tutor panel, and collapsible sidebar */
.brand-logo { width: 52px; height: 52px; border-radius: 16px; box-shadow: 0 0 28px rgba(162,255,134,.3); flex: 0 0 auto; }
.collapse-btn { width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.08); color: white; border: 1px solid rgba(255,255,255,.14); margin-bottom: 14px; display: grid; place-items: center; font-size: 18px; }
.tutor-avatar-card { text-align: center; }
.avatar-wrap { width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, var(--lime), var(--emerald), var(--blue)); box-shadow: 0 0 28px rgba(162,255,134,.18); }
.avatar-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: white; }
.switch-row { justify-content: center; }
.tutor-response-section { background: #f7fbff; padding: 14px; border-radius: 16px; border: 1px solid #dce5ef; }
.formula-section { background: #fffdf6; padding: 14px; border-radius: 16px; border: 1px solid #f1dfaf; }
.chat-box {
  margin-top: 14px;
  border: 1px solid #dce5ef;
  border-radius: 20px;
  padding: 14px;
  background: #ffffff;
  flex: 0 0 auto;
}
.chat-title-row { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.chat-title { font-weight:850; color:#071b33; }
.chat-subtitle { color:var(--muted); font-size:12px; margin-top:3px; }
.chat-status { font-size:11px; padding:5px 9px; border-radius:999px; background:#edf5ff; color:#2d6cdf; border:1px solid #dcecff; white-space:nowrap; }
.chat-empty { color:#8a99aa; }
.chat-message { margin-bottom:9px; line-height:1.45; }
.chat-message strong { color:#071b33; }
.chat-input-row { display:flex; gap:10px; }
.chat-input-row input { flex:1; border:1px solid #dce5ef; border-radius:999px; padding:12px 14px; font-size:14px; }
.chat-input-row button { background:linear-gradient(135deg,#2d6cdf,#00a77f); color:white; min-width:86px; }
.app-shell.sidebar-collapsed { grid-template-columns: 92px 1fr; }
.app-shell.sidebar-collapsed .sidebar { padding: 20px 12px; }
.app-shell.sidebar-collapsed .brand { justify-content: center; margin-bottom: 16px; }
.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .chapter-pill,
.app-shell.sidebar-collapsed .concept-nav,
.app-shell.sidebar-collapsed .logout-btn { display: none; }
.app-shell.sidebar-collapsed .brand-logo { width: 50px; height: 50px; }


/* Learning mode toolbar: Visual, Formulas, Worked Example, Exemplar Practice, Mock Exam, Exercises */
.mode-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 14px;
  padding: 8px;
  border-radius: 18px;
  background: #f7fbff;
  border: 1px solid #dce5ef;
}

.mode-btn {
  background: #ffffff;
  border: 1px solid #dce5ef;
  color: #31445b;
  box-shadow: 0 6px 16px rgba(7, 27, 51, 0.04);
}
.mode-btn:hover {
  border-color: #b8c9df;
  background: #f7fbff;
  transform: translateY(-1px);
}

.mode-btn.active {
  background: linear-gradient(135deg, #0b1f33, #2563eb);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.replay-btn { margin-left: auto; }

.hidden { display: none !important; }

.mode-content {
  min-height: 560px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid #e8eef6;
  padding: 26px;
  overflow: auto;
}

.mode-card {
  background: #ffffff;
  border: 1px solid #dce5ef;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(18,47,77,0.05);
}

.mode-card h3, .mode-card h4 {
  margin: 0 0 10px;
  color: #071b33;
}

.mode-card p, .mode-card li {
  color: #53677d;
  line-height: 1.55;
}

.formula-grid, .exam-choice-grid, .chapter-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.formula-item, .exam-choice, .chapter-check {
  border: 1px solid #dce5ef;
  background: #f7fbff;
  border-radius: 16px;
  padding: 14px;
}

.formula-symbol {
  display: block;
  font-size: 18px;
  font-weight: 850;
  color: #071b33;
  margin-bottom: 6px;
}

.exam-choice {
  cursor: pointer;
  text-align: left;
}

.exam-choice.active {
  border-color: #00a77f;
  background: #eefcf7;
  color: #071b33;
}

.chapter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #071b33;
  font-weight: 700;
}

.exam-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0;
  padding: 14px;
  background: #fffdf6;
  border: 1px solid #f1dfaf;
  border-radius: 16px;
  color: #071b33;
  font-weight: 750;
}

.start-exam-btn, .practice-btn {
  background: linear-gradient(135deg, #2d6cdf, #00a77f);
  color: white;
  padding: 12px 18px;
}

.warning-text { color: #b45309; font-weight: 750; }

/* Full right-panel chat response mode */
.chat-response-mode { height: 100%; }

.chat-response-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dce5ef;
}

.chat-response-header h3 {
  margin: 0;
  color: #071b33;
  font-size: 18px;
}

.chat-response-header p {
  margin: 4px 0 0;
  color: #677489;
  font-size: 13px;
}

.small-ghost {
  background: white;
  border: 1px solid #dce5ef;
  color: #071b33;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.big-response-box {
  background: #f7fbff;
  border: 1px solid #dce5ef;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
}

.big-response-box h4 {
  margin: 0 0 8px;
  color: #071b33;
  font-size: 14px;
}

.big-response-box p {
  margin: 0;
  color: #53677d;
  line-height: 1.6;
  font-size: 15px;
  white-space: pre-line;
}

.formula-box-ui {
  background: #fffdf6;
  border-color: #f1dfaf;
}
.attach-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #f7fbff;
  border: 1px solid #dce5ef;
  cursor: pointer;
  font-size: 18px;
  color: #071b33;
  flex: 0 0 auto;
}

.attach-btn,
.premium-attach-btn {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  color: #071b33;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(162,255,134,0.95), rgba(0,167,127,0.85), rgba(45,108,223,0.85)) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    0 10px 22px rgba(7, 27, 51, 0.08),
    inset 0 0 0 1px rgba(255,255,255,0.75);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

.attach-btn:hover,
.premium-attach-btn:hover {
  transform: translateY(-1px);
  color: #00a77f;
  box-shadow:
    0 14px 28px rgba(7, 27, 51, 0.12),
    0 0 0 4px rgba(162,255,134,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.9);
}

.attach-btn:active,
.premium-attach-btn:active {
  transform: translateY(0) scale(0.98);
}

.attach-icon {
  width: 22px;
  height: 22px;
  display: block;
}
.premium-attach-btn.has-file {
  color: #ffffff;
  background:
    linear-gradient(135deg, #00a77f, #2d6cdf) padding-box,
    linear-gradient(135deg, #a2ff86, #00a77f, #2d6cdf) border-box;
}
.attachment-preview {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  background: #f7fbff;
  border: 1px solid #dce5ef;
  color: #53677d;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.attachment-preview.hidden {
  display: none;
}

.attachment-file-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.attachment-file-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-attachment-btn {
  border: 1px solid #dce5ef;
  background: white;
  color: #071b33;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  flex: 0 0 auto;
}

/* ---- Aarya mic button (v2 voice) ---- */
.mic-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: #00a77f;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease;
}
.mic-btn:hover { background: #00936f; transform: translateY(-1px); }
.mic-btn:active { transform: translateY(0); }
.mic-btn svg { display: block; }

/* ---- v2 richer-animation classes ---- */
.dir-arrow { stroke-width: 4; fill: none; stroke-linecap: round; }
.dir-arrow.pos { stroke: #00a77f; }
.dir-arrow.neg { stroke: #ff6b6b; }
text { transition: opacity .2s ease; }

/* ---- v2 chapter accordion (left panel) ---- */
.concept-nav { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 4px; margin-bottom: 14px; }
.chapter-block { display: flex; flex-direction: column; }
.chapter-header {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: #d9e7f8; text-align: left; width: 100%;
  border-radius: 12px; padding: 11px 12px; cursor: pointer;
  font-size: 13.5px; transition: 0.16s ease;
}
.chapter-header:hover { background: rgba(255,255,255,0.1); }
.chapter-header.current { border-color: rgba(162,255,134,0.5); }
.chapter-header.is-locked { opacity: 0.55; }
.chapter-header .ch-num {
  flex: 0 0 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: rgba(162,255,134,0.16); color: #cfeecf;
}
.chapter-header.is-locked .ch-num { background: rgba(255,255,255,0.08); color: #9fb1c6; }
.chapter-header .ch-title { flex: 1 1 auto; line-height: 1.25; }
.chapter-header .ch-caret { flex: 0 0 auto; font-size: 16px; color: #9fb1c6; }
.subtopic-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px 14px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.1); }
.subtopic-btn {
  border: none; background: transparent; color: #c2d4e8;
  text-align: left; border-radius: 9px; padding: 8px 10px;
  cursor: pointer; font-size: 12.7px; transition: 0.14s ease;
}
.subtopic-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.subtopic-btn.active { background: rgba(162,255,134,0.14); color: #fff; font-weight: 600; }
.subtopic-empty { color: #8aa0b8; font-size: 12px; font-style: italic; padding: 8px 10px; }

/* ---- v2.1 layout: Logout bottom-left, Aarya dock bottom-right ---- */

/* Logout pinned at the bottom of the left sidebar */
.logout-btn {
  flex: 0 0 auto;
  margin-top: 4px;
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #d9e7f8;
  font-size: 14px;
  cursor: pointer;
  transition: 0.16s ease;
}
.logout-btn:hover { background: rgba(255,255,255,0.12); }

/* Right panel becomes a flex column: explanation scrolls, Aarya dock pinned */
.explain-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;            /* inner regions handle their own padding */
  overflow: hidden;
}
.right-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 22px 14px;
}

/* Aarya dock at the bottom-right */
.Aarya-dock {
  flex: 0 0 auto;
  border-top: 1px solid #e3ebf5;
  background: linear-gradient(180deg, #f7fbff, #eef5ff);
  padding: 14px 16px 16px;
  border-radius: 0 0 24px 24px;
}
.Aarya-dock-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.Aarya-dock-avatar {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%;
  padding: 3px; background: linear-gradient(135deg, var(--lime), var(--emerald), var(--blue));
}
.Aarya-dock-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #fff; }
.Aarya-dock-meta { line-height: 1.3; }
.Aarya-dock-name { font-weight: 800; color: #071b33; font-size: 16px; }
.Aarya-dock-tag { color: var(--muted); font-size: 11.5px; }
.Aarya-dock-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #2f8f6f; margin-top: 2px; }
.Aarya-dock-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #2fbf85; box-shadow: 0 0 0 3px rgba(47,191,133,.18); }

.dock-mic { width: 100%; justify-content: center; margin: 0 0 12px; }

/* Session placeholder cards (2-col grid) */
.session-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.session-card {
  background: #fff; border: 1px solid #e3ebf5; border-radius: 12px; padding: 9px 11px;
}
.session-card-label { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #8aa0b8; margin-bottom: 3px; }
.session-card-value { font-size: 12.5px; font-weight: 700; color: #18324c; line-height: 1.25; }
.quota-bar { margin-top: 6px; height: 5px; border-radius: 999px; background: #e3ebf5; overflow: hidden; }
.quota-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--emerald), var(--blue)); }

/* ============================================================
   Aarya circular mic button (Mei-style, recoloured to the app's green/gold).
   Sits in the Aarya dock, between the header and the 4 session tiles.
   Wired to #voiceMicBtn (voice.js); data-state drives the ring animation.
   ============================================================ */
.aarya-mic-wrap { display: flex; justify-content: center; margin: 2px 0 14px; }
.aarya-mic {
  position: relative; width: 78px; height: 78px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 28%, #fbf7e6 0%, #e6d29a 38%, #7d9a4e 70%, #275317 100%);
  box-shadow: 0 16px 36px rgba(39,83,23,.34), 0 6px 16px rgba(20,32,12,.24),
              inset 0 2px 0 rgba(255,255,255,.5), inset 0 -6px 14px rgba(20,32,12,.22);
  display: grid; place-items: center;
  transition: transform .22s cubic-bezier(.2,.7,.3,1.4), box-shadow .22s ease;
}
.aarya-mic:hover { transform: translateY(-3px) scale(1.04);
  box-shadow: 0 22px 48px rgba(39,83,23,.44), 0 8px 20px rgba(20,32,12,.28),
              inset 0 2px 0 rgba(255,255,255,.55), inset 0 -6px 14px rgba(20,32,12,.22); }
.aarya-mic:active { transform: translateY(0) scale(.97); }
.aarya-mic:focus-visible { outline: 3px solid #4d6f2c; outline-offset: 4px; }
.aarya-mic:disabled { cursor: default; }
.aarya-mic-inner {
  position: absolute; inset: 6px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #fbf7e6, #e6d29a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.aarya-mic-inner img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.aarya-mic-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; font-size: 2rem; color: #275317; }
.aarya-mic-ring { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(168,134,47,.7); opacity: 0; }
.aarya-mic[data-state="idle"] .aarya-mic-ring { opacity: 1; animation: aaryaMicIdle 2.4s ease-in-out infinite; }
@keyframes aaryaMicIdle { 0%,100% { transform: scale(1); opacity: .7; border-color: rgba(168,134,47,.6); } 50% { transform: scale(1.16); opacity: 0; border-color: rgba(168,134,47,.1); } }
.aarya-mic[data-state="connecting"] .aarya-mic-ring { opacity: 1; border-color: transparent; border-top-color: #A8862F; border-right-color: #7d9a4e; animation: aaryaMicSpin 1s linear infinite; }
@keyframes aaryaMicSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.aarya-mic[data-state="listening"]::before, .aarya-mic[data-state="speaking"]::before {
  content: ""; position: absolute; inset: -13px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(168,134,47,0), rgba(168,134,47,.55), rgba(77,111,44,.5), rgba(168,134,47,0));
  filter: blur(7px); animation: aaryaMicOrbit 4s linear infinite;
}
@keyframes aaryaMicOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.aarya-mic[data-state="listening"] .aarya-mic-ring, .aarya-mic[data-state="speaking"] .aarya-mic-ring {
  opacity: 1; border-color: rgba(77,111,44,.55); animation: aaryaMicActive 1.4s ease-in-out infinite;
}
@keyframes aaryaMicActive { 0%,100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.22); opacity: 0; } }
.aarya-mic[data-state="speaking"] .aarya-mic-inner { animation: aaryaMicBreathe 1.1s ease-in-out infinite; }
@keyframes aaryaMicBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.aarya-mic-glyph { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(20,32,12,.55), rgba(20,32,12,0) 65%); opacity: 0; transition: opacity .2s ease; }
.aarya-mic-glyph svg { width: 28px; height: 28px; fill: #fbf7e6; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.aarya-mic:hover .aarya-mic-glyph,
.aarya-mic[data-state="listening"] .aarya-mic-glyph,
.aarya-mic[data-state="speaking"] .aarya-mic-glyph { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .aarya-mic-ring, .aarya-mic[data-state="listening"]::before, .aarya-mic[data-state="speaking"]::before,
  .aarya-mic[data-state="speaking"] .aarya-mic-inner { animation: none; }
}
.exercise-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 4px 4px;
}

.exercise-card {
  padding: 18px 20px;
  border-radius: 18px;
}

.exercise-meta {
  font-size: 11px;
  color: #6b7f95;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.exercise-question {
  line-height: 1.65;
  font-size: 15px;
  margin-bottom: 14px;
}

.exercise-actions {
  gap: 12px;
  margin-top: 10px;
}

.exercise-actions button {
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 850;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px rgba(7, 27, 51, 0.08);
}
.exercise-actions .view-figure-btn {
  background: #eaf1ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.exercise-actions .show-answer-btn {
  background: #e8fbf5;
  color: #007c5b;
  border: 1px solid #b7f0df;
}

.exercise-actions .show-hint-btn {
  background: #fff5e6;
  color: #b45309;
  border: 1px solid #fde3b3;
}

.exercise-answer {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #f7fbff;
  border: 1px solid #dce5ef;
  color: #53677d;
  font-size: 14px;
  line-height: 1.55;
}

.exercise-hint {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #fffaf0;
  border: 1px solid #f3e2c2;
  color: #7a5a1f;
  font-size: 14px;
  line-height: 1.55;
}

.hidden {
  display: none;
}
/* When a full-width learning mode is active */
.content-grid.focus-mode {
  grid-template-columns: 1fr;
}

.content-grid.focus-mode .explain-card {
  display: none;
}

/* Hide the large SVG space for exercise/practice style modes */
.canvas-card.no-visual #stage,
.canvas-card.no-visual #stage3d {
  display: none;
}

.canvas-card.no-visual .interaction-panel {
  padding-top: 0;
  /* In Practice/Exercises the panel holds a full document (a long question list),
     not the Visual-mode button row. Make IT the scroll region and let it fill the
     space above the chat box, so the questions scroll and "Ask Aarya" stays pinned
     as the footer instead of overlapping the list. */
  display: block;
  align-items: initial;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Keep "Ask Aarya" locked at the bottom of the card in Practice mode. */
.canvas-card.no-visual .chat-box {
  flex: 0 0 auto;
  margin-top: 12px;
}

/* Make exercise/practice cards use full width neatly */
.canvas-card.no-visual .exercise-list {
  margin-top: 18px;
}
.exercise-header {
  padding: 4px 2px 10px;
}

.exercise-header h2 {
  margin: 0 0 6px;
  font-size: 24px;
  color: #071b33;
}

.exercise-header p {
  margin: 0;
  color: #677489;
  font-size: 14px;
}
/* ---- Question rendering, Send to Aarya, and Mock Exam additions ---- */
.exercise-actions .send-to-Aarya-btn,
.exercise-actions .send-to-Aarya-btn {
  background: linear-gradient(135deg, #2563eb, #00a77f);
  color: #ffffff;
}

.mcq-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mcq-option-btn {
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f7fbff;
  border: 1px solid #dce5ef;
  color: #071b33;
  font-weight: 800;
}

.mcq-option-btn.correct {
  background: rgba(0, 167, 127, 0.12);
  border-color: #00a77f;
  color: #007c5b;
}

.mcq-option-btn.wrong {
  background: rgba(255, 107, 107, 0.12);
  border-color: #ff6b6b;
  color: #8a1f1f;
}

.mock-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.mock-preset-btn,
.start-mock-btn {
  border-radius: 14px;
  padding: 12px 14px;
  background: #071b33;
  color: white;
  border: 0;
  font-weight: 850;
}

.chapter-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.chapter-check {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #dce5ef;
  border-radius: 14px;
  background: #f7fbff;
  font-weight: 750;
}

.mock-summary {
  margin: 14px 0;
  color: #53677d;
  font-weight: 750;
}

@media (max-width: 900px) {
  .mcq-options,
  .mock-grid,
  .chapter-check-grid {
    grid-template-columns: 1fr;
  }
}
.exercise-actions .view-figure-btn {
  background: #2d6cdf;
}
.exercise-actions .view-figure-btn {
  background: #2d6cdf;
  color: #ffffff;
}
/* (toggle styles consolidated in the v2.6 block near end of file) */
.explain-card {
  position: relative;
}

.content-grid.right-collapsed {
  grid-template-columns: minmax(0, 1fr) 48px;
}

.content-grid.right-collapsed .explain-card {
  width: 48px;
  min-width: 48px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
/* hide all right panel content except toggle */
.content-grid.right-collapsed .explain-card > *:not(.right-panel-toggle) {
  display: none !important;
}


/* ============================================================
   WORLD-CLASS REFINEMENT LAYER (v2.4)
   Goals from feedback:
   - softer heading ink (no harsh black)
   - proper BUTTON HIERARCHY (one primary, quiet secondaries)
   - WHITE stage for clean animation contrast
   - fixed, elegant right-panel toggle
   - editorial spacing rhythm + considered detail
   ============================================================ */

/* ---- Display typography: Fraunces, softened weight + colour ---- */
h1, h2, .brand h1, #chapterTitle, .glow-text,
.exercise-header h2, .chat-response-header h3 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 560;
  letter-spacing: -0.015em;
}
h2, #chapterTitle { font-size: 29px; line-height: 1.15; }
.brand h1 { font-size: 21px; font-weight: 600; color: #fff; }
.section h3 { font-family: var(--font-display); font-weight: 560; color: var(--heading); font-size: 16px; letter-spacing: -0.01em; }

.eyebrow {
  color: var(--emerald);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  font-size: 10.5px;
}

/* body copy a touch warmer/softer than pure ink */
.section p, .big-response-box p, #chapterIntro { color: var(--ink-2); }

/* ---- Sidebar: deep slate, hairline edge, calm ---- */
.sidebar {
  background: linear-gradient(180deg, #275317, #1a3810);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.05);
}
.brand p { color: #97a1b6; font-size: 12px; }
.chapter-pill { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md); color: #dfe5f0; }
.chapter-header { border-radius: var(--r-md); font-weight: 550; }
.chapter-header.current { background: rgba(122,148,245,0.13); border-color: rgba(122,148,245,0.45); }
.chapter-header .ch-num { background: rgba(122,148,245,0.2); color: #cdd8fb; border-radius: 7px; font-weight: 700; }
.subtopic-btn.active { background: rgba(122,148,245,0.15); color: #fff; font-weight: 550; }
.nav-btn.active { background: rgba(122,148,245,0.15); border-color: rgba(122,148,245,0.4); }
.logout-btn { border-radius: var(--r-md); }

/* ---- Lesson canvas: generous rhythm ---- */
.lesson { padding: 18px 36px; }
.content-grid { gap: 24px; }

/* ---- Cards: hairline, soft shadow, unified radius ---- */
.canvas-card, .explain-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* ---- WHITE STAGE for clean animation contrast (key fix) ---- */
#stage {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* ---- Mode toolbar: quiet rail, single ink-filled active ---- */
.mode-toolbar { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); gap: 4px; padding: 5px; }
.mode-btn {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font-weight: 550; border-radius: var(--r-sm); font-size: 13.5px; transition: 0.15s ease;
}
.mode-btn:hover { background: #fff; color: var(--heading); box-shadow: var(--shadow-sm); }
.mode-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--shadow-sm); }
.replay-btn { color: var(--muted); }

/* ============================================================
   BUTTON HIERARCHY (the core fix for "three jarring colours")
   One PRIMARY (filled accent). SECONDARY (quiet outline).
   TERTIARY (ghost/text). Colour signals importance, not variety.
   ============================================================ */

/* global pill buttons calmer */
button { transition: transform .14s ease, box-shadow .14s ease, background .18s ease, border-color .18s ease; font-weight: 600; }
button:hover { transform: translateY(-1px); }

/* top stage controls (Play primary, rest ghost) */
.primary, #topPlayBtn, .primary-btn {
  background: var(--grad); color: #fff; border: none;
  box-shadow: var(--shadow-sm);
}
.primary:hover, #topPlayBtn:hover { background: var(--grad-hover); }
.ghost, .ghost-btn {
  background: #fff; color: var(--ink-2); border: 1px solid var(--line-strong);
}
.ghost:hover, .ghost-btn:hover { background: var(--bg-2); color: var(--heading); }

/* EXERCISE CARD actions — the trio that clashed.
   Primary = Send to Aarya (accent, the main action).
   Secondary = Show Answer (quiet outline).
   Tertiary = View Figure (ghost text-button). */
.exercise-actions { gap: 8px; align-items: center; }
.exercise-actions button { border-radius: 999px; padding: 9px 16px; font-size: 13px; }

.exercise-actions .send-to-Aarya-btn,
.exercise-actions .send-to-Aarya-rendered-btn {
  background: var(--grad); color: #fff; border: none;
  box-shadow: var(--shadow-sm); order: 1;
}
.exercise-actions .send-to-Aarya-btn:hover { background: var(--grad-hover); }

.exercise-actions .show-answer-btn {
  background: #fff; color: var(--accent-deep);
  border: 1px solid #d4dbf3; order: 2;
}
.exercise-actions .show-answer-btn:hover { background: var(--accent-soft); }

.exercise-actions .view-figure-btn {
  background: transparent; color: var(--muted);
  border: 1px solid transparent; padding-left: 10px; padding-right: 10px; order: 3;
}
.exercise-actions .view-figure-btn:hover { background: var(--bg-2); color: var(--heading); }

/* exercise cards themselves */
.exercise-card { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 18px 20px; }
.exercise-card:hover { box-shadow: var(--shadow-md); }
.exercise-meta { color: var(--muted); letter-spacing: 0.07em; font-size: 11px; text-transform: uppercase; }
.exercise-question { color: var(--ink); font-weight: 500; line-height: 1.6; }
.exercise-header p { color: var(--muted); }

/* ---- Right-panel response boxes: calm, editorial ---- */
.big-response-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.big-response-box h4 { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.formula-box-ui { background: #fbf8f0; border-color: #ecdfc6; }
.chat-response-header h3 { font-size: 19px; }
.chat-response-header p { color: var(--muted); }
.small-ghost { background: #fff; border: 1px solid var(--line-strong); color: var(--ink-2); border-radius: 999px; }
.small-ghost:hover { background: var(--bg-2); }

/* ---- Chat input row: primary send ---- */
.chat-box { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.chat-input-row input { border: 1px solid var(--line-strong); border-radius: 999px; }
.chat-input-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-input-row button { background: var(--grad); border: none; }
.chat-input-row button:hover { background: var(--grad-hover); }
.chat-status { background: var(--accent-soft); color: var(--accent-deep); border: 1px solid #dde3f7; }

/* ---- Aarya dock: warm, refined ---- */
.Aarya-dock { background: linear-gradient(180deg, #faf9f5, #f1f0ea); border-top: 1px solid var(--line); }
.Aarya-dock-name { font-family: var(--font-display); font-weight: 600; color: var(--heading); }
.dock-mic { background: var(--grad); border: none; }
.dock-mic:hover { background: var(--grad-hover); }
.session-card { border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: #fff; }
.session-card-value { color: var(--heading); }
.quota-bar span { background: linear-gradient(90deg, var(--accent), var(--emerald)); }

/* ---- MCQ options ---- */
.mcq-option-btn { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-weight: 550; }
.mcq-option-btn:hover { background: #fff; box-shadow: var(--shadow-sm); }
.mcq-option-btn.correct { background: var(--emerald-soft); border-color: var(--emerald); color: #1f6b50; }
.mcq-option-btn.wrong { background: #fbeceb; border-color: var(--danger); color: #9a322f; }

/* ============================================================
   RIGHT-PANEL TOGGLE — superseded by the floating-seam version
   at the end of this file. This block intentionally left minimal.
   ============================================================ */
.explain-card { position: relative; }

/* collapsed grid width (toggle position handled in the final block) */
.content-grid.right-collapsed { grid-template-columns: minmax(0,1fr) 48px; }
.content-grid.right-collapsed .explain-card {
  width: 48px; min-width: 48px; padding: 0;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  overflow: visible;
}
.content-grid.right-collapsed .explain-card > *:not(.right-panel-toggle) { display: none !important; }

/* ---- Refined scrollbars ---- */
.concept-nav::-webkit-scrollbar, .right-scroll::-webkit-scrollbar { width: 7px; }
.right-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.concept-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 99px; }
.right-scroll::-webkit-scrollbar-track, .concept-nav::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   v2.5 CORRECTIONS — gradient button system across ALL tabs,
   fix Mock Exam black buttons, refine toggle + active pill.
   ============================================================ */

/* Active mode pill: gradient instead of flat black */
.mode-btn.active {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* MOCK EXAM button rules formerly lived here (--accent-* token family) and were
   deleted 2026-07-19 as fully redundant: every property they set was re-declared
   by the later --karka-blue-* block, which won the cascade. Their intent comment
   moved with them — see "MOCK EXAM BUTTONS" further down.
   NOTE the .chapter-check rules immediately below are NOT redundant and stay:
   the later block re-declares background/border/border-radius/color and has its
   own :hover, but does NOT set font-weight — so deleting these would silently
   drop `font-weight: 500`. That is the fold-in case, not the delete case, and it
   is why each duplicate must be diffed property-by-property rather than assumed
   redundant by analogy. */

/* chapter checkboxes in the mock grid: clean, light */
.chapter-check { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-weight: 500; }
.chapter-check:hover { border-color: var(--accent); }
.mock-summary { color: var(--muted); }

/* any other stray dark utility buttons -> gradient primary,
   so nothing renders as flat black anywhere */
.interaction-panel button {
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.interaction-panel button:hover { background: var(--grad-hover); }

/* stage stays clean white; surrounding panel tint light-blue */
#stage { background: #ffffff; border: 1px solid var(--line); }
.canvas-card, .explain-card { background: var(--card); }

/* ---- TOGGLE: a clean pill floating ON the seam between panels.
   Anchored to the grid (not the card, which has overflow:hidden and
   would clip it). Sits clear of the panel edge with a soft shadow. ---- */
.content-grid { position: relative; }
.explain-card { position: static; }
.right-panel-toggle {
  position: absolute;
  top: 50%;
  /* centre the pill on the seam: panel 360px + 24px gap from the right
     edge; offset back by half the pill width (14px) to straddle it. */
  right: calc(360px + 24px - 14px);
  transform: translateY(-50%);
  width: 28px; height: 56px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent-deep);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 40;
  padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.right-panel-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.right-panel-toggle .rpt-chevron {
  font-size: 17px; font-weight: 700; line-height: 1;
  transition: transform .2s ease;
}
.right-panel-toggle:hover .rpt-chevron { transform: translateX(-1px); }

/* collapsed: rail is 48px; centre pill on that rail's left seam (48 + 24 gap - 14) */
.content-grid.right-collapsed .right-panel-toggle { right: calc(48px + 24px - 14px); }
.content-grid.right-collapsed .right-panel-toggle .rpt-chevron { transform: rotate(180deg); }

/* ---- Figure renderer text styles ---- */
.fig-label { fill: #1f3a52; font-size: 12px; font-weight: 700; font-family: var(--font-body); }
.fig-small { fill: #53677d; font-size: 12px; font-weight: 600; font-family: var(--font-body); text-anchor: middle; }
.fig-quad  { fill: #8aa0b8; font-size: 13px; font-weight: 700; font-family: var(--font-body); text-anchor: middle; letter-spacing: 0.04em; }
.fig-eq    { fill: #2d6cdf; font-size: 13px; font-weight: 800; font-family: var(--font-body); }

/* ============================================================
   KARKA FINAL UI OVERRIDES
   Premium light theme, cleaner spacing, better toggle behavior
   ============================================================ */

:root {
  --karka-bg: #f5f8fc;
  --karka-card: #ffffff;
  --karka-line: #dbe5f1;
  --karka-line-strong: #c8d5e6;

  --karka-text: #24364a;
  --karka-text-soft: #5f748b;
  --karka-heading: #12263a;

  --karka-blue: #2d6cdf;
  --karka-blue-deep: #1f57bc;
  --karka-blue-soft: #eaf2ff;

  --karka-teal: #12b3a6;
  --karka-teal-deep: #0d9488;
  --karka-teal-soft: #e8fbf8;

  --karka-gold-soft: #fbf7ef;
  --karka-gold-line: #eadfca;

  --karka-grad: linear-gradient(90deg, #2d6cdf 0%, #12b3a6 100%);
  --karka-grad-hover: linear-gradient(90deg, #245dc3 0%, #109c92 100%);

  --karka-shadow-sm: 0 6px 18px rgba(23, 44, 77, 0.06);
  --karka-shadow-md: 0 10px 28px rgba(23, 44, 77, 0.10);

  --karka-radius-sm: 12px;
  --karka-radius-md: 18px;
  --karka-radius-lg: 22px;
}

/* overall surfaces */
body {
  background: var(--karka-bg);
  color: var(--karka-text);
}

.canvas-card,
.explain-card,
.exercise-card,
.chat-box,
.session-card {
  background: var(--karka-card);
  border: 1px solid var(--karka-line);
  box-shadow: var(--karka-shadow-sm);
}

/* keep stage clean */
#stage {
  background: #fff;
  border: 1px solid var(--karka-line);
  border-radius: 16px;
}

/* ------------------------------------------------------------
   TOP MODE BUTTONS / TAB BUTTONS
   ------------------------------------------------------------ */
.mode-btn,
.tab-btn,
button.mode-btn {
  background: #fff;
  color: var(--karka-text);
  border: 1px solid var(--karka-line-strong);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: none;
  transition: all 0.18s ease;
}

.mode-btn:hover,
.tab-btn:hover,
button.mode-btn:hover {
  background: var(--karka-blue-soft);
  color: var(--karka-blue-deep);
  border-color: #c9daf8;
}

.mode-btn.active,
.tab-btn.active,
button.mode-btn.active {
  background: var(--karka-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--karka-shadow-sm);
}

/* replay / ghost-style controls */
.ghost,
.ghost-btn,
.small-ghost {
  background: #fff;
  color: var(--karka-text);
  border: 1px solid var(--karka-line-strong);
}

.ghost:hover,
.ghost-btn:hover,
.small-ghost:hover {
  background: #f6f9fd;
  color: var(--karka-heading);
}

/* play / primary buttons */
.primary,
.primary-btn,
#topPlayBtn {
  background: var(--karka-grad);
  color: #fff;
  border: none;
  box-shadow: var(--karka-shadow-sm);
}

.primary:hover,
.primary-btn:hover,
#topPlayBtn:hover {
  background: var(--karka-grad-hover);
}

/* ------------------------------------------------------------
   EXERCISE LAYOUT IMPROVEMENTS
   ------------------------------------------------------------ */
.exercise-card {
  padding: 20px 22px;
  border-radius: var(--karka-radius-md);
}

.exercise-meta {
  color: var(--karka-text-soft);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.exercise-question {
  color: var(--karka-heading);
  font-weight: 500;
  line-height: 1.62;
  margin-top: 8px;
}

.exercise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}

.exercise-actions button {
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.18s ease;
}

/* View Figure */
.exercise-actions .view-figure-btn {
  background: #fff;
  color: var(--karka-blue-deep);
  border: 1px solid #cddcf5;
}

.exercise-actions .view-figure-btn:hover {
  background: var(--karka-blue-soft);
  border-color: #b8cef4;
}

/* Show Answer */
.exercise-actions .show-answer-btn {
  background: #fff;
  color: #1b8f83;
  border: 1px solid #c8ece8;
}

.exercise-actions .show-answer-btn:hover {
  background: var(--karka-teal-soft);
  border-color: #a8ded7;
}

/* Send to Aarya */
.exercise-actions .send-to-Aarya-btn,
.exercise-actions .send-to-Aarya-rendered-btn {
  background: var(--karka-grad);
  color: #fff;
  border: none;
  box-shadow: var(--karka-shadow-sm);
}

.exercise-actions .send-to-Aarya-btn:hover,
.exercise-actions .send-to-Aarya-rendered-btn:hover {
  background: var(--karka-grad-hover);
}

/* ------------------------------------------------------------
   CHAT / Aarya PANELS
   ------------------------------------------------------------ */
.chat-response-header h3 {
  color: var(--karka-heading);
  font-size: 19px;
}

.chat-response-header p,
.exercise-header p,
.mock-summary,
.chat-status {
  color: var(--karka-text-soft);
}

.big-response-box {
  background: #f8fbff;
  border: 1px solid var(--karka-line);
  border-radius: 18px;
}

.big-response-box h4 {
  color: var(--karka-text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.formula-box-ui {
  background: var(--karka-gold-soft);
  border-color: var(--karka-gold-line);
}

.chat-box {
  border-radius: var(--karka-radius-lg);
  overflow: hidden;
}

.chat-input-row input {
  border: 1px solid var(--karka-line-strong);
  border-radius: 999px;
  background: #fff;
}

.chat-input-row input:focus {
  outline: none;
  border-color: var(--karka-blue);
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.12);
}

.chat-input-row button,
#sendQuestionBtn {
  background: var(--karka-grad);
  color: #fff;
  border: none;
  box-shadow: var(--karka-shadow-sm);
}

.chat-input-row button:hover,
#sendQuestionBtn:hover {
  background: var(--karka-grad-hover);
}

.chat-status {
  background: #eef5ff;
  border: 1px solid #d5e3f8;
  color: var(--karka-blue-deep);
}

/* dock */
.Aarya-dock {
  background: linear-gradient(180deg, #fafbfc 0%, #f2f6fb 100%);
  border-top: 1px solid var(--karka-line);
}

.Aarya-dock-name {
  color: var(--karka-heading);
  font-weight: 700;
}

.dock-mic {
  background: var(--karka-grad);
  border: none;
}

.dock-mic:hover {
  background: var(--karka-grad-hover);
}

/* ------------------------------------------------------------
   MOCK EXAM BUTTONS
   ------------------------------------------------------------
   ⚠️ THESE RULES LARGELY DO NOT RENDER. Verified in-browser 2026-07-19 by
   enumerating every matching rule in cascade order.

   `.interaction-panel button` has specificity (0,1,1) and beats
   `.mock-preset-btn` (0,1,0). Since these buttons live inside
   .interaction-panel, the panel rule wins on background, color, padding and
   border-radius. What actually renders is a GRADIENT PILL:
     background linear-gradient(135deg, #2d6cdf, #00a77f)
     border-radius 999px, padding 9px 13px, white text
   NOT the quiet white outline these declarations describe.

   A duplicate of this block (--accent-* tokens) was deleted 2026-07-19. Its
   comment claimed "presets = quiet outline, Generate Paper = the one primary
   gradient". That intent was never achieved, so it is deliberately NOT
   preserved verbatim — an aspirational comment describing CSS that does not
   take effect is a fossil, and reading it would send the next person hunting
   for a bug in the wrong file.

   The grouped base rule (`.mock-preset-btn, .start-mock-btn`) further up still
   supplies the PADDING nothing here re-declares, so it must stay.

   Rules that DO take effect are the ones with specificity ≥ (0,2,0):
   `:hover`, `.active`, `:focus-visible`, `:disabled`.

   BACKLOG — not fixed here, and it is a design decision rather than a cleanup:
   should mock buttons be quiet outlines (carve them out of
   `.interaction-panel button`) or gradient pills (delete the outline
   declarations below)? Needs its own pass and its own visual check.
   ------------------------------------------------------------ */
.mock-preset-btn {
  background: #fff;
  color: var(--karka-blue-deep);
  border: 1px solid #cfdbf1;
  border-radius: 14px;
  font-weight: 600;
}

.mock-preset-btn:hover {
  background: var(--karka-blue-soft);
}

.mock-preset-btn.active,
.mock-preset-btn:focus-visible {
  background: var(--karka-blue-soft);
  border-color: var(--karka-blue);
  color: var(--karka-blue-deep);
}

/* Pending presets (PT1 / PT2 / Half-Yearly) carry the native `disabled` attribute
   while their chapter bands are unmapped for Science. Read as intentionally
   pending, not broken.
   The :hover override is NOT redundant: CSS :hover still matches a disabled
   element, so without it the button would still change on hover, which reads as
   clickable and contradicts the disabled state.
   DO NOT set a background here. An earlier version set `background: #fff` on the
   assumption that the block above renders a white button — it does not (see the
   specificity note above), so that produced WHITE TEXT ON A WHITE BACKGROUND at
   50% opacity: effectively invisible. Letting opacity alone do the work keeps the
   disabled state as the enabled appearance at half strength, whatever that
   appearance currently is. */
.mock-preset-btn:disabled,
.mock-preset-btn:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
}

.start-mock-btn {
  background: var(--karka-grad);
  color: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: var(--karka-shadow-sm);
}

.start-mock-btn:hover {
  background: var(--karka-grad-hover);
}

.chapter-check {
  background: #fff;
  border: 1px solid var(--karka-line);
  border-radius: 14px;
  color: var(--karka-text);
}

.chapter-check:hover {
  border-color: var(--karka-blue);
}

/* ------------------------------------------------------------
   RIGHT PANEL TOGGLE — clean seam placement
   ------------------------------------------------------------ */
.content-grid {
  position: relative;
}

/* expanded state */
.right-panel-toggle {
  position: absolute;
  top: 50%;
  right: calc(360px + 24px - 14px);
  transform: translateY(-50%);
  width: 28px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--karka-line);
  background: #fff;
  color: var(--karka-blue-deep);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--karka-shadow-md);
  z-index: 50;
  padding: 0;
  transition: all 0.18s ease;
}

.right-panel-toggle:hover {
  background: var(--karka-blue-soft);
  border-color: var(--karka-blue);
}

.right-panel-toggle .rpt-chevron {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.18s ease;
}

/* collapsed state */
.content-grid.right-collapsed {
  grid-template-columns: minmax(0, 1fr) 48px !important;
}

.content-grid.right-collapsed .explain-card {
  width: 48px;
  min-width: 48px;
  padding: 0;
  overflow: visible;
}

.content-grid.right-collapsed .explain-card > *:not(.right-panel-toggle) {
  display: none !important;
}

.content-grid.right-collapsed .right-panel-toggle {
  right: calc(48px + 24px - 14px);
}

.content-grid.right-collapsed .right-panel-toggle .rpt-chevron {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------
   FIGURE TEXT / SVG LABEL CLEANUP
   ------------------------------------------------------------ */
.fig-label {
  fill: #1f3a52;
  font-size: 12px;
  font-weight: 700;
}

.fig-small {
  fill: #58718b;
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
}

.fig-quad {
  fill: #8aa0b8;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: 0.04em;
}

.fig-eq {
  fill: #2d6cdf;
  font-size: 13px;
  font-weight: 800;
}

/* ------------------------------------------------------------
   MOBILE / SMALL WIDTH SAFETY
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .exercise-actions {
    gap: 8px;
  }

  .exercise-actions button {
    font-size: 13px;
    padding: 8px 14px;
  }

  .right-panel-toggle {
    width: 26px;
    height: 52px;
  }
}

/* ============================================================
   REAL WORLD TAB
   ============================================================ */

.realworld-panel {
  width: 100%;
  padding: 14px 4px 4px;
}

.realworld-header h2 {
  margin: 0 0 6px;
  color: var(--karka-heading, #12263a);
  font-size: 22px;
}

.realworld-header p {
  margin: 0 0 14px;
  color: var(--karka-text-soft, #5f748b);
  font-size: 14px;
}

.realworld-feature-card {
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid var(--karka-line, #dbe5f1);
  background:
    radial-gradient(circle at top right, rgba(45,108,223,0.12), transparent 35%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: var(--karka-shadow-sm, 0 6px 18px rgba(23,44,77,0.06));
  margin-bottom: 14px;
}

.realworld-kicker {
  color: var(--karka-blue-deep, #1f57bc);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.realworld-feature-card h3 {
  margin: 0 0 8px;
  color: var(--karka-heading, #12263a);
  font-size: 20px;
}

.realworld-feature-card p {
  margin: 0 0 14px;
  color: var(--karka-text, #24364a);
  line-height: 1.55;
}

.realworld-play-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--karka-grad, linear-gradient(90deg, #2d6cdf 0%, #12b3a6 100%));
  color: #ffffff;
  font-weight: 800;
  box-shadow: var(--karka-shadow-sm, 0 6px 18px rgba(23,44,77,0.06));
}

.realworld-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.realworld-card {
  text-align: left;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--karka-line, #dbe5f1);
  background: #ffffff;
  color: var(--karka-text, #24364a);
  box-shadow: var(--karka-shadow-sm, 0 6px 18px rgba(23,44,77,0.06));
}

.realworld-card span {
  display: block;
  font-weight: 850;
  color: var(--karka-heading, #12263a);
  margin-bottom: 5px;
}

.realworld-card small {
  display: block;
  color: var(--karka-text-soft, #5f748b);
  line-height: 1.45;
}

.realworld-card.active {
  border-color: var(--karka-blue, #2d6cdf);
  background: var(--karka-blue-soft, #eaf2ff);
}
/* ============================================================
   PRACTICE CENTRE + PREMIUM REAL WORLD
   ============================================================ */

.mode-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  /* The scene overlays below are absolutely positioned a fixed distance from the
     top of .canvas-card, which assumes this toolbar stays ONE row. It wraps to
     two on a narrow stage, and the overlay then landed across the tabs. Stacking
     the toolbar above them means the controls always win — a clipped caption is
     recoverable, an unclickable tab is not. */
  position: relative;
  z-index: 7;
}

.mode-tabs .replay-mode-btn {
  margin-left: auto;
}

.practice-shell {
  padding: 18px;
  width: 100%;
}

.practice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.practice-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 850;
  color: #2d6cdf;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.practice-header h2 {
  margin: 0 0 6px;
  color: #12263a;
  font-size: 24px;
}

.practice-header p {
  margin: 0;
  color: #5f748b;
  font-size: 14px;
}

.practice-mode-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.practice-mode-btn {
  border: 1px solid #dbe5f1;
  background: #ffffff;
  color: #24364a;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.18s ease;
}

.practice-mode-btn:hover {
  background: #eaf2ff;
  color: #1f57bc;
}

.practice-mode-btn.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(90deg, #2d6cdf 0%, #12b3a6 100%);
  box-shadow: 0 8px 20px rgba(45, 108, 223, 0.16);
}

.practice-content {
  width: 100%;
}

.practice-empty {
  border: 1px solid #dbe5f1;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  color: #24364a;
}

.practice-empty h3 {
  margin: 0 0 8px;
  color: #12263a;
}

.realworld-shell {
  padding-top: 8px;
}

.realworld-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.realworld-story-card {
  text-align: left;
  border: 1px solid #dbe5f1;
  background:
    radial-gradient(circle at top right, rgba(45, 108, 223, 0.10), transparent 34%),
    #ffffff;
  border-radius: 20px;
  padding: 18px;
  min-height: 142px;
  box-shadow: 0 8px 24px rgba(23, 44, 77, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
}

.realworld-story-card:hover {
  transform: translateY(-2px);
  border-color: #b7cbef;
  box-shadow: 0 14px 32px rgba(23, 44, 77, 0.10);
}

.realworld-story-card.active {
  border-color: #2d6cdf;
  background:
    radial-gradient(circle at top right, rgba(18, 179, 166, 0.16), transparent 34%),
    #eaf2ff;
}

.realworld-story-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #ffffff;
  margin-bottom: 12px;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(23, 44, 77, 0.08);
}

.realworld-story-title {
  display: block;
  color: #12263a;
  font-weight: 850;
  font-size: 17px;
  margin-bottom: 6px;
}

.realworld-story-card small {
  display: block;
  color: #5f748b;
  font-size: 13px;
  line-height: 1.48;
}

@media (max-width: 1100px) {
  .realworld-card-grid {
    grid-template-columns: 1fr;
  }

  .mode-tabs .replay-mode-btn {
    margin-left: 0;
  }
}
.canvas-card.content-mode-card {
  min-height: auto !important;
}

.canvas-card.content-mode-card #stage {
  display: none !important;
}

.canvas-card.content-mode-card .interaction,
.canvas-card.content-mode-card #interaction {
  margin-top: 0 !important;
}

.practice-shell {
  padding: 18px;
  width: 100%;
}

.practice-mode-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.practice-mode-btn {
  border: 1px solid #dbe5f1;
  background: #ffffff;
  color: #24364a;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 750;
  cursor: pointer;
}

.practice-mode-btn.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(90deg, #2d6cdf 0%, #12b3a6 100%);
}

.practice-content {
  width: 100%;
}

.practice-empty {
  border: 1px solid #dbe5f1;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  color: #24364a;
}

/* Practice chapter dropdown (Exercises + Exemplar) */
.practice-chapter-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
}
.practice-chapter-picker label {
  font-weight: 750;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #5b6b7e);
}
.practice-chapter-select {
  flex: 1;
  max-width: 520px;
  border: 1px solid #dbe5f1;
  background: #ffffff;
  color: #24364a;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.practice-chapter-select:hover { border-color: #2d6cdf; }
.practice-chapter-select:focus {
  outline: none;
  border-color: #2d6cdf;
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.15);
}

/* Flash highlight when returning to a question after viewing its figure */
.exercise-card.question-flash {
  animation: karkaQuestionFlash 1.6s ease;
}
@keyframes karkaQuestionFlash {
  0%   { box-shadow: 0 0 0 0 rgba(45, 108, 223, 0.0); background: rgba(45,108,223,0.10); }
  25%  { box-shadow: 0 0 0 4px rgba(45, 108, 223, 0.35); background: rgba(45,108,223,0.10); }
  100% { box-shadow: 0 0 0 0 rgba(45, 108, 223, 0.0); background: transparent; }
}

/* Aarya response rendered inside the Worked Example tab */
.worked-response { width: 100%; max-width: 860px; margin: 0 auto; padding: 4px 2px; }
.worked-response-head { padding: 4px 2px 14px; }
.worked-response-head h2 { font-family: "Fraunces", serif; font-size: 24px; margin: 0 0 4px; color: #1a2b3c; }
.worked-response-head p { margin: 0; color: #5b6b7e; font-size: 14px; }
.worked-response-block {
  border: 1px solid #dce5ef;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.worked-response-block.wr-formula { background: #fffaf0; border-color: #f0e2c4; }
.worked-response-block .wr-label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  color: #2d6cdf; margin-bottom: 6px;
}
.worked-response-block.wr-formula .wr-label { color: #b8860b; }
.worked-response-block .wr-body {
  font-size: 15px; line-height: 1.55; color: #24364a; white-space: pre-wrap;
}

/* Fix: keep the right-panel toggle on-screen regardless of content height.
   (Was top:50% of a very tall .content-grid, which pushed it far below the
   fold when Practice rendered a long question list.) */
.right-panel-toggle {
  position: fixed !important;
  top: 320px !important;
  transform: none !important;
}

/* Aarya step-by-step worked solution (voice-driven) */
.worked-steps { margin: 4px 0 0; padding-left: 0; list-style: none; }
.worked-step {
  font-size: 15px; line-height: 1.55; color: #24364a;
  margin-bottom: 10px; padding-left: 0;
  display: flex; gap: 10px; align-items: baseline;
}
.worked-step::marker { content: ""; }   /* remove default "1." */
.worked-step-label {
  flex: 0 0 auto; font-weight: 800; color: #2d6cdf;
  min-width: 54px;
}
.worked-step-body { flex: 1 1 auto; }

/* Aarya live figure in the Worked Example panel */
.worked-figure-slot { margin: 6px 0 14px; display: flex; flex-direction: column; align-items: center; }
.worked-figure-svg { width: 360px; max-width: 100%; height: auto; background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; }
.worked-figure-caption { font-size: 13px; color: #5a6b7e; margin-top: 6px; font-style: italic; }
.fig-grid { stroke: #eef2f7; stroke-width: 1; }
.fig-axis { stroke: #24364a; stroke-width: 1.6; }
.fig-axis-label { font: 600 12px system-ui, sans-serif; fill: #24364a; }
.fig-helper { stroke: #2d6cdf; stroke-width: 1.4; stroke-dasharray: 6 4; }
.fig-mirror { stroke: #8a5cf6; stroke-width: 2; }
.fig-seg { stroke: #2d6cdf; stroke-width: 2.2; }
.fig-leg { stroke: #f59e0b; stroke-width: 2.2; }
.fig-hyp { stroke: #16a34a; stroke-width: 2.4; }
.fig-quad { fill: #2d6cdf; opacity: 0.06; }
.fig-point { fill: #16a34a; stroke: #fff; stroke-width: 1.5; }
.fig-point-image { fill: #8a5cf6; stroke: #fff; stroke-width: 1.5; }
.fig-point-label { font: 600 11px system-ui, sans-serif; fill: #24364a; }
.fig-label { font: 600 12px system-ui, sans-serif; fill: #44566a; }

/* Attachment send status */
.attachment-preview { margin-top: 8px; font-size: 13px; color: #2d6cdf; }
.attachment-preview.attach-error { color: #c0392b; }

/* "Aarya is working…" heartbeat in the Worked Example panel */
.Aarya-working { display: flex; align-items: center; gap: 10px; padding: 14px 4px; color: #2d6cdf; font-size: 14px; }
.Aarya-working-dots { display: inline-flex; gap: 4px; }
.Aarya-working-dots i { width: 7px; height: 7px; border-radius: 50%; background: #2d6cdf; display: inline-block; opacity: 0.35; animation: AaryaWorkingPulse 1s infinite ease-in-out; }
.Aarya-working-dots i:nth-child(2) { animation-delay: 0.18s; }
.Aarya-working-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes AaryaWorkingPulse { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Fix: in Karka Board / Formulas (content-mode) the interaction panel holds the
   agent's answer — worked steps or a chat response — which may be short or still
   streaming in. Make the PANEL the scroll region and let it fill the space ABOVE
   the chat box, so "Ask Aarya" stays locked to the bottom of the card instead of
   floating up to the middle as the panel fills. Mirrors the Practice `.no-visual`
   fix; the figure+steps combined view manages its own panel, so exclude it. */
body:not(.karka-figure-with-steps) .canvas-card.content-mode-card .interaction-panel {
  display: block;
  align-items: initial;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-top: 0;
}
/* Keep "Ask Aarya" pinned as the footer while the panel above it scrolls. */
body:not(.karka-figure-with-steps) .canvas-card.content-mode-card .chat-box {
  flex: 0 0 auto;
  margin-top: 12px;
}
.canvas-card.content-mode-card {
  overflow-y: auto;            /* long answers scroll (harmless once panel scrolls) */
}
.interaction-panel:has(.worked-response) { align-items: stretch; }
.worked-response { padding-bottom: 24px; }   /* breathing room at the end */

/* Light markdown-ish formatting for n8n answers so **bold**, lists, and line
   breaks render readably instead of as literal characters. */
.wr-body strong, .worked-step strong { font-weight: 700; color: #1a2b3c; }
.wr-body em { font-style: italic; }
.wr-body ul, .wr-body ol { margin: 6px 0 6px 20px; padding: 0; }
.wr-body li { margin: 3px 0; }
.wr-body p { margin: 0 0 8px; }
.wr-body p:last-child { margin-bottom: 0; }

/* Phase 2 figure primitives */
.fig-polygon { fill: rgba(45,108,223,0.06); stroke: #2d6cdf; stroke-width: 2.2; stroke-linejoin: round; }
.fig-circle { fill: rgba(22,163,74,0.05); stroke: #16a34a; stroke-width: 2.2; }
.fig-angle-arc { fill: none; stroke: #f59e0b; stroke-width: 2; }
.fig-arc { fill: none; stroke: #8a5cf6; stroke-width: 2.2; }
.fig-sector { fill: rgba(138,92,246,0.12); stroke: #8a5cf6; stroke-width: 2; }

/* =========================
   FORMULAS PANEL CLEANUP
   ========================= */


.formula-bank-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 0;
}

.formula-bank-title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: #10233f;
  margin: 0 0 20px 0;
}

.formula-bank-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.formula-bank-item {
  background: #f4f7fb;
  border: 1px solid #d9e3f0;
  border-radius: 14px;
  padding: 14px 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #20324d;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(16, 35, 63, 0.04);
}
.brand-wordmark {
  font-family: Inter, Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

.brand-wordmark .brand-karka {
  color:  #ffffff;
}

.brand-wordmark .brand-labs {
  color: #7d8f5f;
  font-weight: 700;
}

.brand-wordmark sup {
  font-size: 8px;
  font-weight: 700;
  margin-left: 3px;
  position: relative;
  top: -0.9em;
  color: #7d8f5f;
  letter-spacing: 0;
}

.chapter-pill {
  display: none !important;
}

/* ============================================================
   KARKA FINAL SIDEBAR FIX
   Structure:
   #appShell = left sidebar + main lesson
   .content-grid = centre panel + Aarya panel
   ============================================================ */

:root {
  --karka-sidebar-width: 320px;
  --karka-Aarya-width: 360px;
  --karka-content-gap: 18px;
}

/* Prevent horizontal page drift */
html,
body {
  overflow-x: hidden;
}

/* OUTER GRID: sidebar + lesson */
html body #appShell.app-shell {
  display: grid !important;
  grid-template-columns: var(--karka-sidebar-width) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
}

/* Sidebar fixed width in expanded state */
html body #appShell.app-shell > aside.sidebar {
  width: var(--karka-sidebar-width) !important;
  min-width: var(--karka-sidebar-width) !important;
  max-width: var(--karka-sidebar-width) !important;
  box-sizing: border-box !important;
}

/* Main lesson column must take remaining width */
html body #appShell.app-shell > main.lesson {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* INNER GRID: centre learning card + Aarya panel */
html body #appShell.app-shell .content-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--karka-Aarya-width) !important;
  gap: var(--karka-content-gap) !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Prevent cards from forcing horizontal overflow */
html body #appShell.app-shell .canvas-card,
html body #appShell.app-shell .explain-card {
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
}

/* Student card: match chapter boxes.
   Sidebar already has 20px padding, so no side margin is needed. */
html body #appShell.app-shell > aside.sidebar > .student-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 18px 0 20px 0 !important;
  padding: 18px 22px !important;

  box-sizing: border-box !important;
  align-self: stretch !important;
}

/* Hide chapter pill below student card */
html body #appShell.app-shell > aside.sidebar > .chapter-pill {
  display: none !important;
}

/* Floating sidebar collapse arrow */
html body #collapseSidebarBtn.collapse-btn {
  position: fixed !important;
  top: 50% !important;
  left: calc(var(--karka-sidebar-width) - 16px) !important;
  transform: translateY(-50%) !important;

  width: 32px !important;
  height: 58px !important;
  min-width: 32px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22) !important;

  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  cursor: pointer !important;
  z-index: 9999 !important;
}

html body #collapseSidebarBtn.collapse-btn:hover {
  background: #ffffff !important;
}

html body #sidebarCollapseIcon {
  display: block !important;
  line-height: 1 !important;
}

/* COLLAPSED STATE:
   sidebar column becomes 0;
   lesson gets the released width */
html body #appShell.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) !important;
}

/* Fully hide sidebar panel */
html body #appShell.app-shell.sidebar-collapsed > aside.sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;
}

/* Hide sidebar contents except collapse button */
html body #appShell.app-shell.sidebar-collapsed > aside.sidebar > :not(#collapseSidebarBtn) {
  display: none !important;
}

/* Move arrow to far left when collapsed */
html body #appShell.app-shell.sidebar-collapsed #collapseSidebarBtn.collapse-btn {
  left: 14px !important;
}

/* Keep centre + Aarya layout stable after sidebar collapse */
html body #appShell.app-shell.sidebar-collapsed .content-grid {
  grid-template-columns: minmax(0, 1fr) var(--karka-Aarya-width) !important;
}

/* Right panel collapse button position */
html body #appShell.app-shell .right-panel-toggle {
  right: calc(var(--karka-Aarya-width) + var(--karka-content-gap) - 14px) !important;
}

/* If Aarya panel itself is collapsed */
/* When Aarya/right panel is collapsed, centre panel gets full inner width */
html body #appShell.app-shell .content-grid.right-collapsed {
  grid-template-columns: minmax(0, 1fr) 0 !important;
  gap: 0 !important;
}

/* Fully hide Aarya panel */
html body #appShell.app-shell .content-grid.right-collapsed #rightPanel {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Keep the right-panel toggle visible at the far right */
html body #appShell.app-shell .content-grid.right-collapsed .right-panel-toggle {
  right: 14px !important;
}

/* ============================================================
   FIXED LEFT SIDEBAR WHILE LESSON CONTENT SCROLLS
   Add this at the very bottom of styles.css
   ============================================================ */

/* Lock the app to viewport height */
html,
body {
  height: 100%;
}

/* Prevent the whole browser page from moving horizontally */
body {
  overflow-x: hidden;
}

/* Main shell stays viewport-height */
html body #appShell.app-shell {
  min-height: 100vh !important;
}

/* Sidebar remains fixed/sticky in place */
html body #appShell.app-shell > aside.sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  overflow: hidden !important;
  z-index: 50 !important;
}

/* Only the chapter/subtopic list scrolls inside the sidebar */
html body #appShell.app-shell > aside.sidebar .concept-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

/* Keep logout fixed at bottom of sidebar */
html body #appShell.app-shell > aside.sidebar .logout-btn {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* LESSON = fixed one-screen flex column. Header takes its natural height; the
   content-grid fills the rest and the stage inside shrinks to fit. overflow
   hidden is the hard ceiling: controls can never be pushed below the fold. This
   is the definitive fix for "must scroll to reach Push". */
html body #appShell.app-shell > main.lesson {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
html body #appShell.app-shell > main.lesson > .topbar {
  flex: 0 0 auto !important;
}
html body #appShell.app-shell > main.lesson > .content-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   FINAL TOGGLE BUTTON POSITION + SIZE REFINEMENT
   1. Right panel button sits exactly on left edge of Aarya panel
   2. Left sidebar collapse button made smaller / cleaner
   ============================================================ */

/* Make content grid the positioning reference for the right panel toggle */
html body #appShell.app-shell .content-grid {
  position: relative !important;
}

/* Right panel collapse button:
   sits exactly on the left edge of the Aarya/right panel */
html body #appShell.app-shell .right-panel-toggle {
  position: absolute !important;
  top: 50% !important;

  /*
    Right panel width = --karka-Aarya-width.
    Button width = 32px.
    So right = panel width - half button width.
  */
  right: calc(var(--karka-Aarya-width) - 16px) !important;

  transform: translateY(-50%) !important;

  width: 32px !important;
  height: 58px !important;
  min-width: 32px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18) !important;

  color: #2563eb !important;
  font-size: 18px !important;
  font-weight: 800 !important;

  z-index: 80 !important;
}

/* ============================================================
   FINAL: MATCH LEFT + RIGHT COLLAPSE BUTTONS
   Same size, same vertical alignment, proper edge placement
   ============================================================ */

:root {
  --karka-toggle-w: 28px;
  --karka-toggle-h: 48px;
}

/* Shared toggle pill styling */
html body #collapseSidebarBtn.collapse-btn,
html body #appShell.app-shell .right-panel-toggle {
  width: var(--karka-toggle-w) !important;
  height: var(--karka-toggle-h) !important;
  min-width: var(--karka-toggle-w) !important;
  min-height: var(--karka-toggle-h) !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18) !important;

  color: #2563eb !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  z-index: 9999 !important;
}

/* Left sidebar button: fixed on right edge of left sidebar */
html body #collapseSidebarBtn.collapse-btn {
  position: fixed !important;
  top: 50% !important;
  left: calc(var(--karka-sidebar-width) - (var(--karka-toggle-w) / 2)) !important;
  transform: translateY(-50%) !important;
}

/* When left sidebar is collapsed, move left button to page edge */
html body #appShell.app-shell.sidebar-collapsed #collapseSidebarBtn.collapse-btn {
  left: 10px !important;
}

/* Right panel button: attach to left edge of Aarya panel */
html body #appShell.app-shell .content-grid {
  position: relative !important;
}

html body #appShell.app-shell .right-panel-toggle {
  position: absolute !important;
  top: 50% !important;

  /*
    Aarya panel width = --karka-Aarya-width.
    Button sits half over the panel edge.
  */
  right: calc(var(--karka-Aarya-width) - (var(--karka-toggle-w) / 2)) !important;

  transform: translateY(-50%) !important;
}

/* When Aarya panel is collapsed, keep right button on far-right edge */
html body #appShell.app-shell .content-grid.right-collapsed .right-panel-toggle {
  right: 10px !important;
}

/* Normalise arrow icon inside both buttons */
html body #sidebarCollapseIcon,
html body .right-panel-toggle .rpt-chevron {
  font-size: 18px !important;
  line-height: 1 !important;
  display: block !important;
}

/* When right panel is collapsed, keep the right toggle at far-right edge */
html body #appShell.app-shell .content-grid.right-collapsed .right-panel-toggle {
  right: 14px !important;
}

/* Reduce the LEFT sidebar collapse button size */
html body #collapseSidebarBtn.collapse-btn {
  width: 28px !important;
  height: 48px !important;
  min-width: 28px !important;

  /*
    If sidebar width is 320px:
    button sits half-in / half-out of sidebar edge.
  */
  left: calc(var(--karka-sidebar-width) - 14px) !important;

  border-radius: 999px !important;
  font-size: 18px !important;
  padding: 0 !important;
}

/* When left sidebar is collapsed, keep the smaller button on the far-left edge */
html body #appShell.app-shell.sidebar-collapsed #collapseSidebarBtn.collapse-btn {
  left: 10px !important;
}

/* Slightly reduce arrow icon weight/position */
html body #sidebarCollapseIcon {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Practice-mode fix: keep toggle on-screen even when grid is tall.
   position:fixed measures `right` from the VIEWPORT edge, so the value must
   account for everything between the viewport's right edge and the Aarya
   panel's left seam:
     - lesson right padding ............ 36px  (main.lesson padding: 32px 36px)
     - Aarya panel width ................ var(--karka-Aarya-width)   (360px)
     - inner grid gap .................. var(--karka-content-gap)  (18px)
   then offset back by half the pill width to straddle the seam. */
html body #appShell.app-shell .right-panel-toggle {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: calc(36px + var(--karka-Aarya-width) + var(--karka-content-gap) - (var(--karka-toggle-w) / 2)) !important;
}

/* Collapsed Aarya panel: pin toggle just inside the far-right edge.
   Still fixed, so this is measured from the viewport edge — sits at the
   lesson's right padding line. */
html body #appShell.app-shell .content-grid.right-collapsed .right-panel-toggle {
  right: calc(36px + 14px) !important;
}

/* Combined "figure + steps" view (Aarya's showFigure): figure on the stage
   above, step-by-step solution in the interaction panel below — no toggling. */
body.karka-figure-with-steps .canvas-card #stage {
  display: block !important;          /* keep the figure visible */
  flex: 0 0 auto;
}
/* Shrink the figure ONLY once Aarya has actually put steps below it.
   The unconditional shrink meant opening a figure from Practice showed a squat
   ~300px figure above an EMPTY bordered strip, with the Ask Aarya box pulled up
   under it — the figure lost half its height to make room for nothing. Until a
   step exists the figure keeps the full #stage height, which in Practice's
   collapsed full-width layout is where it reads best.
   Ported from GIIStest14, where this was fixed first. */
body.karka-figure-with-steps .canvas-card:has(.worked-steps li) #stage {
  height: clamp(300px, 42vh, 440px);  /* shrink so steps fit below */
}
/* Same condition for the steps panel's divider + scroll box: no border or
   padding while it is empty. */
body.karka-figure-with-steps .canvas-card:not(:has(.worked-steps li)) .interaction-panel {
  border-top: 0;
  padding-top: 0;
  min-height: 0;
}
body.karka-figure-with-steps .canvas-card .interaction-panel {
  display: block;
  align-items: stretch;
  max-height: 38vh;
  overflow-y: auto;
  padding-top: 10px;
  border-top: 1px solid var(--karka-line, #dbe5f1);
  margin-top: 8px;
}
body.karka-figure-with-steps .canvas-card.content-mode-card #stage {
  display: block !important;          /* defeat the content-mode hide rule */
}

.worked-figure-svg .fig-area-label  { font-weight:800; font-size:16px; fill:#17283d; }
.worked-figure-svg .fig-area-side   { font-weight:700; font-size:14px; fill:#60748a; }
.worked-figure-svg .fig-area-bracket{ stroke:#60748a; stroke-width:1.5; }

/* JSXGraph board for Aarya's drawGraph (function/curve plotting) */
.karka-graph-box { width: 100%; max-width: 460px; height: 360px; margin: 4px auto 8px; border: 1px solid #e8eef6; border-radius: 14px; background: #fff; }

/* ============================================================================
   SCIENCE 3D SCENES — concept line, controls strip, canvas, caption
   Added for the Class 9 Science build (three.js scenes on #stage3d).
   Palette matched to the shared shell: primary #2d6cdf, ink #071b33.
   ============================================================================ */

/* WebGL canvas shares the stage slot; app.js toggles display vs #stage.
   Height is intentionally SHORTER than the SVG #stage so (a) the ball reads at a
   sensible size and (b) the right-hand Aarya panel fits without scrolling. */
#stage3d {
  border-radius: 20px;
  display: block;
  width: 100%;
  /* Flex to absorb whatever vertical space is left after tabs + controls, with a
     floor so it never collapses. This is what guarantees controls stay visible:
     the stage shrinks on short screens instead of pushing buttons off-screen. */
  flex: 1 1 auto;
  min-height: 420px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid #e8eef6;
}

/* Live readout legend overlaid on the 3D stage (velocity, distance, net force…).
   Positioned at top-left of the canvas area (the card is position:relative). Sits
   below the concept overlay + tabs, clear of the controls row beneath the stage. */
/* Pushed INTO the top-left corner and made compact. It used to sit 22px in and
   74px down at nearly 290px wide, which put a large panel squarely over the
   animation. The bottom of the stage is not an option — that is where the
   scene's own buttons for the student live. */
.karka3d-legend {
  position: absolute;
  left: 12px;
  top: 58px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(6px);
  border: 1px solid #e2e9d9;
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3a4a2a;
  min-width: 0;
  max-width: 240px;
  box-shadow: 0 5px 18px rgba(30, 40, 25, 0.12);
  z-index: 6;
  pointer-events: none;
}

/* An empty legend was still holding its padding and border open as a blank
   strip across the top of the scene. Matches .scene3d-concept:empty below. */
.karka3d-legend:empty { display: none; }
.karka3d-legend h4 { margin: 0 0 8px; font-size: 15px; color: #3E5228; font-weight: 700; }
.karka3d-legend .val { font-variant-numeric: tabular-nums; color: #5F7A3F; font-weight: 700; }
.karka3d-legend .law {
  margin-top: 10px; padding: 9px 11px; border-radius: 9px;
  background: #eef4e2; color: #3E5228; font-size: 13px; line-height: 1.5;
}
.karka3d-legend .law.free { background: #e6f0d4; border: 1px solid #cfe0ac; }

/* Auto-rotate toggle — the one control present on every scene */
.scene3d-ctl-toggle.is-on {
  background: #eef4e2;
  border-color: #cfe0ac;
  color: #3E5228;
}

/* Description — overlaid at the TOP-RIGHT inside the animation window, as a
   constrained box (not a full-width bar). Legend sits top-left, so they never
   overlap; the 3D object sits centre/lower, clear of both. */
.canvas-card { position: relative; }
.scene3d-concept {
  position: absolute;
  top: 58px;              /* snug under the one-row tab toolbar */
  right: 12px;            /* pushed into the corner, off the scene */
  left: auto;
  max-width: 300px;
  z-index: 5;
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #24364a;
  font-weight: 500;
  text-align: left;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(6px);
  border: 1px solid #e6ebe0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(30, 40, 25, 0.10);
  pointer-events: none;
}
.scene3d-concept:empty { display: none; }

/* The old caption line under the stage is now redundant (concept overlay handles
   the description, legend handles live data). Hide it to avoid a third line. */
.karka3d-caption { display: none; }

/* Labelled trigger buttons the scene declares (scene.controls). */
.scene3d-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 18px 14px;
}
.scene3d-controls:empty { display: none; }

/* Scene picker — clickable chips to switch between a subtopic's scenes
   (e.g. ch5 Newton's Third Law: canoe / gun recoil / rocket / walking / swimming).
   Sits above the scene's own control buttons. */
.scene-view-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 2px;
}
.scene-view-picker:empty { display: none; }
.scene-view-picker .svp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a95a5;
  margin-right: 2px;
}
.scene-view-chip {
  background: #f4f7fb;
  border: 1px solid #dce5ef;
  color: #31445b;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 15px;
  transition: 0.15s;
}
.scene-view-chip:hover {
  border-color: #b8c9df;
  background: #eaf1fa;
  transform: translateY(-1px);
}
.scene-view-chip.is-active {
  background: #3E5228;
  border-color: #3E5228;
  color: #ffffff;
}

/* When the 3D caption panel is empty (3D scenes hide it), collapse its reserved
   height so the flex-growing stage can extend further down toward Ask Aarya. */
.interaction-panel:empty { min-height: 0 !important; padding: 0 !important; }

.scene3d-ctl {
  background: #ffffff;
  border: 1px solid #dce5ef;
  color: #31445b;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  box-shadow: 0 6px 16px rgba(7, 27, 51, 0.04);
  transition: 0.15s;
}
.scene3d-ctl:hover {
  border-color: #b8c9df;
  background: #f7fbff;
  transform: translateY(-1px);
}
.scene3d-ctl:active { transform: translateY(0) scale(0.98); }

/* Caption text written into #interactionPanel by the 3D runtime. */
.karka3d-caption { line-height: 1.5; color: #31445b; }
.karka3d-caption b { color: #2d6cdf; }

/* --- HOLD indicator (Build 1) — classroom holdForTutor / 1:1 holdForStudent.
   position:fixed bottom-centre so it never alters .canvas-card's layout context. */
.karka-hold-indicator {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(17, 24, 39, 0.92); color: #fff;
  font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.karka-hold-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; flex: 0 0 auto;
  animation: karkaHoldPulse 1.6s ease-out infinite;
}
@keyframes karkaHoldPulse {
  0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(251, 191, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.karka-hold-resume {
  border: 0; border-radius: 999px; padding: 4px 12px; cursor: pointer;
  background: #fff; color: #111827; font-weight: 700; font-size: 13px;
}
.karka-hold-resume:hover { background: #e5e7eb; }


/* ---------------------------------------------------------------------
   PANEL RESIZE HANDLES
   Thin drag strips on the inner edge of each panel. They sit inside the
   panel rather than in the gap, so they never widen the layout, and they
   are hidden when the panel is collapsed or the layout has stacked for a
   narrow screen — a drag handle on a collapsed panel would fight the
   collapse and leave the user with a width they cannot undo.
   --------------------------------------------------------------------- */
.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 30;
  cursor: col-resize;
  background: transparent;
  border: 0;
  padding: 0;
  touch-action: none;
}

.resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: rgba(120, 150, 180, 0.28);
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease;
}

.resize-handle:hover::after,
.resize-handle:focus-visible::after,
.resize-handle[data-dragging]::after {
  opacity: 1;
  background: rgba(90, 170, 240, 0.85);
}

.resize-handle:focus-visible {
  outline: 2px solid rgba(90, 170, 240, 0.9);
  outline-offset: -2px;
}

/* No transitions while dragging, or the panel lags the cursor and the whole
   thing feels broken rather than smooth. */
.app-shell[data-resizing] * { transition: none !important; }

.sidebar .resize-handle { right: 0; }

/* The dock handle's containing block is .content-grid, NOT .explain-card —
   `.explain-card { position: static }` is deliberate (see the toggle-pill
   block) and must stay. So `left: 0` would put this strip on the far LEFT
   edge of the canvas, 500px from the panel it resizes. Anchor it to the seam
   from the right instead, off the same variable that sizes the panel. */
.explain-card .resize-handle {
  right: calc(var(--karka-Aarya-width, 360px) - 6px);
}

.app-shell.sidebar-collapsed .sidebar .resize-handle,
.content-grid.right-collapsed .explain-card .resize-handle,
.content-grid.focus-mode .explain-card .resize-handle {
  display: none;
}

@media (max-width: 1100px) {
  .resize-handle { display: none; }
}

/* PRACTICE-TAB GATING BY SESSION MODE
 *
 * "Show Answer" and "Send to Aarya" are teacher-mode only. The point is not to
 * tempt a student who is mid-question: stuck is handled by "Show Hint", which
 * stays in both modes because the exercise data calls it "a nudge, not the answer".
 *
 * WRITTEN AS :not(.karka-mode-classroom) ON PURPOSE. The body class is applied by
 * karkaApplySessionModeUi(), and if that never runs — script error, blocked JS,
 * markup moved — this rule still hides the buttons. Failing towards "a student sees
 * fewer answer shortcuts" is the safe direction; failing towards a visible answer
 * key is not.
 *
 * This is visibility, not access control: the answer text is still rendered into a
 * .hidden div by the exercise-card template, so devtools reaches it either way. That
 * is a deliberate call — the requirement is not tempting, not preventing.
 *
 * Both card renderers share these classes, so the dead exemplar renderer
 * (showExemplarPracticeForCurrentChapter — KARKA_EXEMPLAR_PRACTICE is never assigned
 * in this app) is covered too, if it is ever fed.
 */
body:not(.karka-mode-classroom) .show-answer-btn,
body:not(.karka-mode-classroom) .send-to-diya-btn {
  display: none;
}