/* ============================================================
   StudyLoop — "study desk" design system
   No frameworks, no webfonts, no external requests.
   ============================================================ */

:root {
  /* palette — warm desk, ink, one highlighter */
  --bg: #f2ede2;
  --bg-soft: #eae3d3;
  --card: #fffdf6;
  --card-edge: #e7dfcb;
  --ink: #202f42;
  --ink-soft: #4d5b76;   /* 5.8:1 on --bg */
  --ink-faint: #5c6a84;  /* 4.7:1 on --bg */
  --accent: #ffd84d;
  --accent-soft: #ffe9a1;
  --accent-hover: #ffe9a1;
  --accent-ink: #8a6d00;
  --agent: #6d51d8;
  --agent-soft: #ece7fb;
  --correct: #22754a;
  --correct-soft: #e2f2e6;
  --wrong: #bb3a2e;
  --wrong-soft: #fbe9e4;
  --flag: #c77c1b;
  --flag-soft: #fdf1dc;
  --shadow: 0 1px 2px rgba(46, 40, 24, .08), 0 6px 18px -8px rgba(46, 40, 24, .18);
  --shadow-lift: 0 2px 4px rgba(46, 40, 24, .1), 0 14px 32px -12px rgba(46, 40, 24, .28);
  --radius: 12px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --grain-opacity: .05;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161e;
    --bg-soft: #171d27;
    --card: #1d2532;
    --card-edge: #2b3648;
    --ink: #e9e6da;
    --ink-soft: #a4aebf;
    --ink-faint: #8d97a9;  /* 5.2:1 on --card */
    --accent: #f5c93c;
    --accent-soft: #4a3f14;
    --accent-hover: #ffdf66; /* keeps the hardcoded navy label at ~10:1 */
    --accent-ink: #f0d580;
    --agent: #a795ec;
    --agent-soft: #2c2747;
    --correct: #63c98d;
    --correct-soft: #17301f;
    --wrong: #e78779;
    --wrong-soft: #3a201b;
    --flag: #e0a33f;
    --flag-soft: #38290f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .5);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 32px -12px rgba(0, 0, 0, .6);
    --grain-opacity: .04;
  }
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

/* author display rules (flex/grid) must never beat the hidden attribute */
[hidden] { display: none !important; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Question text, options, and topics are arbitrary agent input — a long
     unbroken token must wrap instead of blowing out cards or the viewport. */
  overflow-wrap: anywhere;
}

.opt-text, .feed-text { min-width: 0; }

/* paper grain over everything, very subtle */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 { margin: 0; font-weight: 650; }
p { margin: .4em 0; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--agent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* highlighter swipe */
.hl {
  background: linear-gradient(100deg,
    transparent 0%, var(--accent) 4%, var(--accent-soft) 96%, transparent 100%);
  padding: .02em .18em;
  border-radius: .25em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Light ink on bright accent is ~1.3:1 — in dark mode the highlighter
   flattens to the soft tone so the inherited light text stays ~8:1.
   (Must follow the base .hl rule: equal specificity, source order wins.) */
@media (prefers-color-scheme: dark) {
  .hl {
    background: linear-gradient(100deg,
      transparent 0%, var(--accent-soft) 4%, var(--accent-soft) 96%, transparent 100%);
  }
}

/* ---------- buttons & chips ---------- */

.btn {
  appearance: none;
  border: 1.5px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  border-radius: 10px;
  padding: .5rem .95rem;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn:hover { background: var(--bg-soft); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }

.btn-primary { background: var(--accent); border-color: var(--ink); color: #202f42; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-danger { background: var(--wrong); border-color: var(--wrong); color: #fff; box-shadow: 0 2px 0 #7c241b; }

.btn-ghost {
  border-color: var(--card-edge);
  box-shadow: none;
  background: transparent;
  color: var(--ink-soft);
}
.btn-ghost:active { transform: translateY(1px); }

.btn-small { padding: .32rem .7rem; font-size: .82rem; }

.chip {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--card-edge);
  border-radius: 99px;
  padding: .18rem .65rem;
  /* chips carry user/agent text (topics, tags) — truncate, never overflow */
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.chip-topic { color: var(--ink); background: var(--card); }

/* ---------- topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .8rem 1.4rem;
  border-bottom: 1.5px solid var(--card-edge);
  background: color-mix(in srgb, var(--bg) 85%, var(--card));
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: baseline; gap: .6rem; }
.brand-word {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.brand-sub { font-size: .78rem; color: var(--ink-faint); }

.session-chips { display: flex; gap: .4rem; flex-wrap: wrap; }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.agent-badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px dashed var(--card-edge);
  border-radius: 99px;
  padding: .22rem .7rem;
}
.agent-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint);
}
.agent-badge.is-ready { color: var(--agent); border-color: var(--agent); border-style: solid; background: var(--agent-soft); }
.agent-badge.is-ready .agent-dot { background: var(--agent); animation: dotpulse 2.4s ease infinite; }

@keyframes dotpulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--agent) 45%, transparent); }
  55% { box-shadow: 0 0 0 6px transparent; }
}

/* ---------- layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 285px;
  gap: 1.4rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.4rem;
  align-items: start;
}

.rail, .feedbar {
  position: sticky;
  top: 4.4rem;
  display: grid;
  gap: 1rem;
  align-content: start;
  /* many topics must scroll inside the pinned rail, not vanish off-screen */
  max-height: calc(100vh - 5.4rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

.foot {
  text-align: center;
  color: var(--ink-faint);
  font-size: .78rem;
  padding: 1.2rem 1rem 2rem;
}

/* ---------- panels ---------- */

.panel {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .95rem 1.05rem 1.05rem;
}

.panel-title {
  font-family: var(--serif);
  font-size: 1.02rem;
  margin-bottom: .55rem;
  display: flex;
  align-items: baseline;
  gap: .5em;
}
.panel-note { font-family: var(--sans); font-size: .72rem; font-weight: 500; color: var(--ink-faint); }

.panel.pulse { animation: panelpulse .9s ease; }
@keyframes panelpulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--agent) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

/* ---------- mastery ---------- */

.mastery-top { display: flex; align-items: center; gap: .9rem; }

.ring { width: 72px; height: 72px; flex: none; }
.ring-track { fill: none; stroke: var(--bg-soft); stroke-width: 7; }
.ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 188.5;   /* 2πr, r=30 */
  stroke-dashoffset: 188.5;
  transform: rotate(-90deg);
  transform-origin: 36px 36px;
  transition: stroke-dashoffset .7s cubic-bezier(.2, .8, .3, 1), stroke .3s ease;
}
.ring-fill.is-good { stroke: var(--correct); }
.ring-fill.is-low { stroke: var(--wrong); }
.ring-text {
  font: 700 .95rem var(--sans);
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
}

.mastery-stats { display: flex; gap: .9rem; flex-wrap: wrap; }
.stat { display: grid; line-height: 1.15; }
.stat-num { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; }
.stat-label { font-size: .7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.stat.streak .stat-num { color: var(--flag); }
.stat.streak .stat-num::after { content: " 🔥"; font-size: .9rem; }
.stat.streak.pop .stat-num { animation: streakpop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes streakpop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

.topic-bars { display: grid; gap: .5rem; margin-top: .8rem; }
.topic-bars:empty { margin-top: 0; }
.topic-bar { display: grid; gap: .18rem; }
.topic-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .8rem; font-weight: 600;
}
.topic-bar-pct { color: var(--ink-faint); font-size: .74rem; }
.topic-bar-track {
  height: 7px; border-radius: 99px;
  background: var(--bg-soft);
  overflow: hidden;
}
.topic-bar-fill {
  height: 100%; border-radius: 99px;
  background: var(--accent);
  transition: width .7s cubic-bezier(.2, .8, .3, 1);
}
.topic-bar-fill.is-good { background: var(--correct); }
.topic-bar-fill.is-low { background: var(--wrong); }

/* ---------- study plan ---------- */

.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.plan-item {
  display: flex; align-items: center; gap: .55rem;
  font-size: .88rem;
}
.plan-mark {
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; color: var(--card);
}
.plan-item.is-in_progress .plan-mark { border-color: var(--flag); background: var(--flag-soft); }
.plan-item.is-in_progress { font-weight: 650; }
.plan-item.is-done .plan-mark { border-color: var(--correct); background: var(--correct); }
.plan-item.is-done .plan-mark::after { content: "✓"; }
.plan-item.is-done .plan-topic { text-decoration: line-through; color: var(--ink-faint); }

/* ---------- hero ---------- */

.hero {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.2rem 2.2rem 1.8rem;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  max-width: 21em;
}
.hero-sub { color: var(--ink-soft); max-width: 46em; margin-top: .7rem; }

.hero-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}
.path-card {
  border: 1.5px dashed var(--card-edge);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .35rem;
  align-content: start;
}
.path-title { font-size: 1rem; }
.path-card p { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.path-card .btn { justify-self: start; margin-top: .4rem; }
.path-foot { font-size: .78rem !important; color: var(--ink-faint) !important; min-height: 1em; }

.prompt-example {
  margin: .3rem 0;
  padding: .6rem .8rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--ink);
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}

/* ---------- question cards ---------- */

.cards { display: grid; gap: 1rem; margin-top: 1rem; }
.cards:empty { margin-top: 0; }

.qcard {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.05rem 1.2rem 1.1rem;
  transition: box-shadow .2s ease;
}
.qcard:hover { box-shadow: var(--shadow-lift); }

/* dealt-in animation for new cards */
.qcard.deal {
  animation: deal .5s cubic-bezier(.2, .9, .3, 1.05) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes deal {
  from { opacity: 0; transform: translateY(16px) rotate(-.6deg) scale(.985); }
  to { opacity: 1; transform: none; }
}

.qcard.is-flagged { border-left: 4px solid var(--flag); }
.qcard.is-correct { border-left: 4px solid var(--correct); }
.qcard.is-wrong { border-left: 4px solid var(--wrong); }

.qcard-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.qnum {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink-faint);
}
.chip-source-agent { color: var(--agent); background: var(--agent-soft); border-color: transparent; }
.chip-diff-easy { color: var(--correct); }
.chip-diff-hard { color: var(--wrong); }
.chip-flag { color: var(--flag); background: var(--flag-soft); border-color: transparent; }

.qprompt {
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 .8rem;
}

.opts { display: grid; gap: .5rem; }

.opt {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  text-align: left;
  background: var(--bg-soft);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: .55rem .75rem;
  cursor: pointer;
  font-size: .95rem;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.opt:hover:not(:disabled) { border-color: var(--ink-soft); background: var(--card); }
.opt:active:not(:disabled) { transform: scale(.995); }
.opt:disabled { cursor: default; }

.opt-letter {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-soft);
  color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 700;
}

/* answered states */
.opt.is-correct-answer {
  background: linear-gradient(100deg, transparent 0, var(--accent-soft) 6%, var(--accent-soft) 94%, transparent 100%);
  border-color: var(--correct);
}
.opt.is-correct-answer .opt-letter { border-color: var(--correct); background: var(--correct); color: #fff; }
.opt.is-picked-wrong { background: var(--wrong-soft); border-color: var(--wrong); }
.opt.is-picked-wrong .opt-letter { border-color: var(--wrong); background: var(--wrong); color: #fff; }
.opt.is-dim { opacity: .55; }

.opt-mark { margin-left: auto; font-weight: 700; font-size: .95rem; }
.opt.is-correct-answer .opt-mark { color: var(--correct); }
.opt.is-picked-wrong .opt-mark { color: var(--wrong); }

.qcard.just-answered .opt.is-correct-answer .opt-mark,
.qcard.just-answered .opt.is-picked-wrong .opt-mark {
  animation: markpop .4s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes markpop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.qcard-foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .85rem;
}

.btn-flag {
  appearance: none;
  border: 1px solid var(--card-edge);
  background: transparent;
  color: var(--ink-faint);
  border-radius: 99px;
  padding: .28rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-flag:hover { color: var(--flag); border-color: var(--flag); }
.btn-flag[aria-pressed="true"] {
  color: var(--flag);
  background: var(--flag-soft);
  border-color: var(--flag);
}

.verdict { font-size: .85rem; font-weight: 700; }
.verdict.ok { color: var(--correct); }
.verdict.bad { color: var(--wrong); }

/* explanation margin-note */
.explain {
  margin-top: .8rem;
  padding: .65rem .85rem .65rem .95rem;
  border-left: 3px solid var(--agent);
  background: var(--agent-soft);
  border-radius: 0 10px 10px 0;
  font-size: .9rem;
  animation: explainin .4s ease backwards;
}
.explain.from-you { border-left-color: var(--ink-soft); background: var(--bg-soft); }
@keyframes explainin { from { opacity: 0; transform: translateY(-4px); } }
.explain-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--agent);
  margin-bottom: .15rem;
}
.explain.from-you .explain-label { color: var(--ink-soft); }

/* ---------- stage actions & summary ---------- */

.stage-actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

.summary {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 1.6rem 1.8rem;
  animation: deal .5s cubic-bezier(.2, .9, .3, 1.05) backwards;
}
.summary-title { font-family: var(--serif); font-size: 1.5rem; }
.summary-score {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 700;
  margin: .3rem 0 .1rem;
}
.summary-score small { font-size: 1.1rem; color: var(--ink-faint); font-weight: 500; }
.summary-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}
.summary-h { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: .4rem; }
.summary ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.summary li { margin: .22rem 0; }
.weak-chip { color: var(--wrong); background: var(--wrong-soft); border-color: transparent; margin: 0 .25rem .25rem 0; }
.summary-actions { margin-top: 1.2rem; }

/* ---------- activity feed ---------- */

.feedbar .panel-title { padding: 0 .2rem; }
.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
  max-height: 68vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.feed-item {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .82rem;
  line-height: 1.4;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  padding: .45rem .65rem;
}
.feed-item.enter { animation: feedin .35s ease backwards; }
@keyframes feedin { from { opacity: 0; transform: translateX(10px); } }
.feed-icon { flex: none; font-size: .9rem; }
.feed-item.actor-agent { border-left: 3px solid var(--agent); }
.feed-item.actor-you { border-left: 3px solid var(--accent); }
.feed-item.actor-system { border-left: 3px solid var(--card-edge); color: var(--ink-soft); }
.feed-text { flex: 1; }
.feed-time { color: var(--ink-faint); font-size: .7rem; white-space: nowrap; margin-left: auto; padding-left: .4rem; }
.feed-empty { color: var(--ink-faint); font-size: .82rem; padding: .3rem .2rem; }

/* ---------- dialogs & forms ---------- */

.dlg {
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  padding: 1.3rem 1.4rem;
  width: min(94vw, 430px);
}
.dlg-wide { width: min(94vw, 560px); }
.dlg::backdrop { background: rgba(24, 20, 8, .45); backdrop-filter: blur(2px); }

.dlg-title { font-family: var(--serif); font-size: 1.2rem; margin-bottom: .8rem; }
.dlg-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

.field { display: grid; gap: .25rem; margin-bottom: .7rem; }
.field-label { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.field-note { font-weight: 500; color: var(--ink-faint); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.field input[type="text"], .field input[type="number"],
.field select, .field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1.5px solid var(--card-edge);
  border-radius: 8px;
  padding: .45rem .6rem;
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--agent);
}

.options-field { border: none; margin: 0 0 .7rem; padding: 0; }
.options-field legend { padding: 0; margin-bottom: .3rem; }
#author-options { display: grid; gap: .45rem; margin-bottom: .5rem; }
.author-opt { display: flex; align-items: center; gap: .5rem; }
.author-opt input[type="radio"] { accent-color: var(--correct); width: 17px; height: 17px; flex: none; }
.author-opt input[type="text"] {
  flex: 1;
  font: inherit;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1.5px solid var(--card-edge);
  border-radius: 8px;
  padding: .4rem .6rem;
}
.author-opt .rm {
  appearance: none; border: none; background: none;
  color: var(--ink-faint); cursor: pointer; font-size: 1rem; padding: .2rem;
}
.author-opt .rm:hover { color: var(--wrong); }

.form-error {
  color: var(--wrong);
  background: var(--wrong-soft);
  border-radius: 8px;
  padding: .45rem .7rem;
  font-size: .85rem;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .layout {
    grid-template-columns: 235px minmax(0, 1fr);
  }
  .feedbar { grid-column: 1 / -1; position: static; max-height: none; overflow: visible; }
  .feed { max-height: 260px; }
}

@media (max-width: 700px) {
  .layout { grid-template-columns: 1fr; padding: .9rem; gap: 1rem; }
  .rail { position: static; grid-template-columns: 1fr; max-height: none; overflow: visible; }
  .topbar { padding: .7rem .9rem; gap: .5rem; }
  .brand-sub { display: none; }
  .hero { padding: 1.4rem 1.2rem 1.2rem; }
  .session-chips { order: 3; width: 100%; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- dev agent-simulator harness (?dev=1 only) ---------- */

.harness {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  width: min(92vw, 360px);
  background: var(--card);
  border: 1.5px solid var(--agent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  font-size: .85rem;
}
.harness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .8rem;
  border-bottom: 1px solid var(--card-edge);
  color: var(--agent);
  font-weight: 700;
}
.harness-collapse {
  appearance: none;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .2rem;
}
.harness-body {
  display: grid;
  gap: .5rem;
  padding: .7rem .8rem .8rem;
  max-height: 60vh;
  overflow-y: auto;
}
.harness-select, .harness-args {
  font: inherit;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1.5px solid var(--card-edge);
  border-radius: 8px;
  padding: .4rem .5rem;
  width: 100%;
}
.harness-args {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  resize: vertical;
}
.harness-desc { margin: 0; color: var(--ink-soft); font-size: .78rem; }
.harness-result {
  margin: 0;
  padding: .5rem .6rem;
  background: var(--bg-soft);
  border-radius: 8px;
  font-size: .74rem;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.harness-result:empty { display: none; }

/* ---------- Phase 3: adaptive surfacing & demo polish ---------- */

/* slim session-target progress under the topbar */
.target-progress {
  position: absolute;
  left: 0;
  bottom: -1.5px;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--correct));
  border-radius: 0 99px 99px 0;
  transition: width .6s cubic-bezier(.2, .8, .3, 1);
  pointer-events: none;
}

/* weak-topic callout on the mastery bars */
.topic-bar-pct.is-weak { color: var(--wrong); font-weight: 700; }

/* a card glows when the agent attaches an explanation to it */
.panel.pulse, .qcard.pulse { animation: panelpulse .9s ease; }

/* flag wiggle when the student marks "I don't get this" */
.qcard.just-flagged .btn-flag { animation: wiggle .45s ease; }
@keyframes wiggle {
  25% { transform: rotate(-2.5deg) translateX(-1px); }
  55% { transform: rotate(2.5deg) translateX(1px); }
  80% { transform: rotate(-1deg); }
}

/* paper-bit confetti on a strong finish */
.summary { position: relative; overflow: hidden; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-bit {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 13px;
  border-radius: 2px;
  opacity: .95;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translate(var(--drift, 0px), 75vh) rotate(var(--spin, 360deg)); opacity: 0; }
}