/* ===========================================================================
   CHALKLINE — Mimir's design system.

   One idea: material inversion. The learner's side is paper; the machine's
   mind is slate. Structure is carried by 1px rules, never by cards, fills,
   shadows or radii. Exactly one accent colour exists in the product and it
   means "misconception" — nothing else may use it, so it always carries
   information rather than decoration.
   =========================================================================== */
:root{
  --paper:#F5F3EE; --paper-sunk:#EBE8E1;
  --ink:#0B0B0C; --ink-soft:#3A3A3D; --ink-faint:#8A8A8F; --rule:#CFCBC2;
  --slate:#0B0B0C; --chalk:#EFEDE6; --chalk-dim:#9C9A94; --slate-rule:#2A2A2E;
  --signal:#C8320A;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum";overflow:hidden}
/* paper grain: 0.9% — never consciously seen, only stops the surface reading
   as flat digital white */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  opacity:.009;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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.micro{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.title{font-family:var(--serif);font-size:26px;letter-spacing:-.02em;font-weight:400}
.body{font-size:14.5px;line-height:1.62;letter-spacing:-.006em;max-width:60ch;
  color:var(--ink-soft)}
.rule{border-top:1px solid var(--rule)}

#app{display:grid;grid-template-columns:57fr 1px 43fr;height:100vh}
.spine{background:var(--ink)}

/* ---- slate ---------------------------------------------------------- */
.slate{background:var(--slate);color:var(--chalk);display:flex;flex-direction:column;
  background-image:radial-gradient(ellipse 120% 80% at 50% 0%,#1B1B1F 0%,transparent 62%)}
.slate .micro{color:var(--chalk-dim)}
.slate .rule{border-color:var(--slate-rule)}
.slate header{display:flex;justify-content:space-between;align-items:baseline;
  padding:26px 40px 18px}
.pad{padding:24px 40px}
.chalk{font-family:var(--serif);font-size:17.5px;line-height:1.78;color:var(--chalk);
  white-space:pre-wrap;max-width:56ch;text-shadow:0 0 .6px rgba(239,237,230,.45)}
#stream{flex:1;overflow-y:auto}
.cursor{display:inline-block;width:.5em;height:1em;background:var(--chalk);
  vertical-align:-.13em;margin-left:2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{0%,52%{opacity:1}53%,100%{opacity:.12}}

.compose{border-top:1px solid var(--slate-rule);padding:20px 40px 26px;display:none}
.compose.on{display:block;animation:enter .26s var(--ease) both}
.compose .row{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.caret{font-family:var(--serif);font-size:17.5px;color:var(--chalk-dim);user-select:none}
textarea{flex:1;background:transparent;border:0;outline:0;resize:none;color:var(--chalk);
  font-family:var(--serif);font-size:17.5px;line-height:1.7}
textarea::placeholder{color:#5E5C58}

/* ---- paper side ------------------------------------------------------ */
.mirror{display:flex;flex-direction:column;overflow:hidden;background:var(--paper)}
.mirror header{display:flex;justify-content:space-between;align-items:baseline;
  padding:26px 32px 18px}
#canvas{flex:1;min-height:0;width:100%;display:block}
.tray{padding:20px 32px 26px;max-height:46vh;overflow-y:auto}

button{font-family:var(--sans);font-size:12.5px;letter-spacing:-.01em;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  padding:8px 18px;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
button:disabled{opacity:.28;cursor:default}

.micro-btn{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;
  background:transparent;color:inherit;cursor:pointer;transition:all .15s var(--ease)}
.micro-btn:hover{opacity:.75}
.slate .micro-btn{color:var(--chalk-dim);border-color:var(--slate-rule)}
.slate .micro-btn:hover{color:var(--chalk);border-color:var(--chalk)}
.slate .micro-btn.active{color:var(--chalk);border-color:var(--chalk);background:rgba(239,237,230,.12)}
.slate .micro-btn.speaking{color:#E5A93C;border-color:#E5A93C;background:rgba(229,169,60,.18);animation:pulse .8s infinite alternate}

.ada-speech-bubble{font-family:var(--serif);font-size:14px;line-height:1.5;color:var(--chalk);
  background:rgba(239,237,230,.06);border-left:2px solid #E5A93C;padding:8px 14px;
  margin:10px 40px 0;display:none;animation:enter .2s var(--ease)}
.ada-speech-bubble.active{display:block}

.course-select{font-family:var(--sans);font-size:13px;font-weight:500;
  background:transparent;border:1px solid var(--rule);color:var(--ink);
  padding:4px 8px;outline:none;cursor:pointer}
.course-select:hover{border-color:var(--ink)}

.status-badge{display:inline-flex;align-items:center;gap:6px}
.status-badge::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--chalk-dim)}
.status-badge.thinking::before{background:#E5A93C;box-shadow:0 0 6px #E5A93C;
  animation:pulse 1s infinite alternate}
.status-badge.paused::before{background:#4CAF50;box-shadow:0 0 6px #4CAF50}
.status-badge.closing::before{background:#2196F3;box-shadow:0 0 6px #2196F3}
@keyframes pulse{from{opacity:.4}to{opacity:1}}

/* ---- toast & feedback banners --------------------------------------- */
.toast-banner{margin:12px 40px;padding:12px 16px;background:rgba(239,237,230,.04);
  border:1px solid var(--slate-rule);display:flex;flex-direction:column;gap:6px;
  animation:enter .26s var(--ease)}
.toast-banner.caught_explained{border-color:rgba(76,175,80,.4);background:rgba(76,175,80,.07)}
.toast-banner.caught_unexplained{border-color:rgba(255,193,7,.4);background:rgba(255,193,7,.07)}
.toast-banner.missed,.toast-banner.miscorrected{border-color:rgba(200,50,10,.4);background:rgba(200,50,10,.07)}

.badge-pill{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;display:inline-block;font-weight:600}
.pill-success{background:#1B5E20;color:#E8F5E9}
.pill-warn{background:#E65100;color:#FFF3E0}
.pill-danger{background:#B71C1C;color:#FFEBEE}

.vicarious-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;color:var(--chalk);background:rgba(239,237,230,.08);
  padding:4px 9px;margin-top:4px;border-left:2px solid #81C784}

/* ---- diagnostic modal ----------------------------------------------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,11,12,.65);
  backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;
  justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal-card{background:var(--paper);color:var(--ink);width:min(760px,94vw);
  max-height:88vh;overflow-y:auto;padding:34px 40px;border:1px solid var(--ink);
  box-shadow:0 18px 42px rgba(0,0,0,.26);transform:translateY(12px);
  transition:transform .2s var(--ease)}
.modal-backdrop.open .modal-card{transform:translateY(0)}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}
.stat-box{border:1px solid var(--rule);padding:12px 14px;background:var(--paper-sunk)}
.stat-val{font-family:var(--mono);font-size:22px;font-weight:600;margin-top:4px;color:var(--ink)}

.progress-bar-bg{height:5px;background:var(--rule);width:100%;margin-top:6px;overflow:hidden}
.progress-bar-fill{height:100%;background:var(--ink);transition:width .4s var(--ease)}

.kv{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
  border-bottom:1px solid var(--rule);font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-faint)}
.kv .v{font-family:var(--mono);font-size:11.5px}
.up{color:var(--ink)} .down{color:var(--signal)}
.signal{color:var(--signal)}
.belief{font-family:var(--serif);font-size:16px;line-height:1.6;
  border-left:2px solid var(--signal);padding-left:14px;margin:14px 0}
.dissolving{animation:dissolve 1.15s var(--ease) forwards}
@keyframes dissolve{to{opacity:0;filter:blur(5px);letter-spacing:.34em}}
@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.enter{animation:enter .26s var(--ease) both}
::selection{background:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}

.micro-btn.mic-active {
  background: var(--signal) !important;
  color: #FFF !important;
  border-color: var(--signal) !important;
  animation: pulse-mic 1.1s infinite ease-in-out;
}
@keyframes pulse-mic {
  0% { box-shadow: 0 0 0 0 rgba(200, 50, 10, 0.7); }
  70% { box-shadow: 0 0 0 7px rgba(200, 50, 10, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 50, 10, 0); }
}