/*
IC SHIP PASS — generated by icpass.py from the map. edit the CODE; rerun to refresh this.

══════════════════════════════════════════════════════════════════════
 PAGE 0 — TABLE OF CONTENTS  (goldfish pointers)
 jump by SEARCHING the anchor phrase — line numbers drift, names don't.
══════════════════════════════════════════════════════════════════════
  input row .................................... search: "input row"
  the writer desk sections: persona ............ search: "the writer desk"
  PA's oz-funnel dashboard: the pitch, the ..... search: "PA's oz-funnel"
  the 4 collapsible bars ....................... search: "the 4 collapsible bars"
  practice — Oregon-Trail: endless, ............ search: "practice"
  explore — related directions; click one to ... search: "explore — related"
  test — "test your knowledge": ................ search: "test — "test your"
  gear button .................................. search: "gear button"
  settings panel (⚙️ gear opens this) .......... search: "settings panel (⚙️ gear"
  p-learn — the LEARN card, run through ........ search: "p-learn — the LEARN"
══════════════════════════════════════════════════════════════════════

 FOR AI
 ───────
   **OWNS** — the visual styling for the LEARN card (`.card-learn`, `.p-learn`), its four
   **collapsible bars (practice, explore, test, settings), the input row, writer desk, and PA
   **dashboard. Every class name here is the single source of truth for what the HTML must match;
   **renaming a class here orphans markup.
   
   **TOUCH HERE**
   - Change input field appearance → `.learn-q` L12
   - Change collapsible bar colors/spacing → `.lbar-head`, `.lbar-body` L119–124
   - Change practice/explore/test button styles → `.lp-go`, `.le-item`, `.lt-check` L144, L152,
   - L163
   - Change settings panel layout → `.learn-settings` L173
   - Change tutor card (blue) accent colors → `.p-learn` rules L222–256
   - Change writer voice box styling → `.wv-box`, `.wv-rules` L60, L70
   - Change progress bar colors → `.lpg-fill` L47, L52–54
   
   **TRAPS**
   - `.p-learn` prefix (L219–256) is load-bearing: it targets the card when worn by the tutor
   - agent. Renaming breaks the tutor's visual identity.
   - `.lbar` class names (L118–124) are referenced by JavaScript to toggle `.open` state.
   - Renaming breaks expand/collapse.
   - Color variables like `var(--tutor)`, `var(--accent)`, `var(--quiz-right)` (L222, L239, L135,
   - L161) are defined elsewhere; changing them here has no effect.
   - `.lbar-fresh` animation (L125, L244) is triggered by JS adding this class; the keyframe
   - names must match exactly.
   - `.lt-sel`, `.lp-right`, `.lp-wrong` (L159, L135, L136) are applied by JS after user
   - interaction; the class names are hardcoded in logic.
   - Line 225 sets `.p-learn .card-body { height: 440px; }` — this is a draggable window
   - constraint; changing it breaks the resize mechanic.
   
   **DO NOT**
   - Rename any `.learn-*`, `.lbar-*`, `.lp-*`, `.le-*`, `.lt-*`, `.ls-*`, `.wv-*`, `.wk-*`,
   - `.pa-*` class without checking the HTML and JavaScript that apply them.
   - Add new color variables here; define them in the theme file (skin/historian.css or the tutor
   - bean).
   - Move the `.p-learn` rules (L219–256) to another file; they are card-specific overrides that
   - belong here.
   - Change the structure of `.ls-folder-files` (L194) nesting without updating the folder tree
   - logic in JavaScript.
   
   
   
   ---

END IC SHIP PASS
*/

/* learn.css — the LEARN card. input at top → collapsible bars:
   snippet · 🎓 PhD · 🧒 5th-grade · 🧭 explore · 🎯 practice · ✅ test. */

.card-learn .learn-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }

/* the learn card wears the WRITER's BOOK bean via makeCard wear:'historian' — the bookshelf head + book-frame
   body now come from skin/historian.css (.card[data-skin="historian"]), shared with the tutor agent + tiptap.
   no one-off here anymore: one bean, worn by agent and card alike. */

/* ── input row ─────────────────────────────────────────── */
.learn-input { flex-shrink: 0; padding: var(--space-md); border-bottom: 1px solid var(--line); background: var(--surface-2); }
/* (Sum 2026-08-17) "needs a resize handle, that window is tiny" — it had `resize: none`, so the
   corner grip was switched OFF and a one-row box clipped its own placeholder. Vertical only: a
   horizontal drag would break out of the card's column. min-height keeps three rows as the floor. */
.learn-q { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: var(--fs-label); resize: vertical; min-height: 74px; max-height: 40vh; outline: none; }
.learn-q:focus { border-color: var(--accent); }
.learn-q::placeholder { color: var(--text-dim); }
.learn-tools { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); align-items: center; }
.att-sink { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-sm); }
.att-sink:empty { display: none; }   /* nothing attached → no gap */
.learn-tool { width: 44px; height: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-size: 18px; cursor: pointer; }
.learn-tool:hover { background: var(--line); }
/* (Sum 2026-08-17) both pills: ONE LINE. "create lesson" wrapped inside its own pill, and the save
   button stacked its disk over its word. nowrap + inline-flex fixes both — the icon and the label
   sit on the baseline together instead of becoming two rows. */
.learn-create { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 18px; height: 36px; background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 var(--accent-deep); }
.learn-create:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-deep); }
.learn-save { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 36px; margin-left: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer; }
.learn-save:hover { background: var(--line); }

/* 📚 my courses — the saved library (click a course to load · ✕ to delete) */
.lcourses .lbar-body { padding: 0; }
.lc-list { display: flex; flex-direction: column; }
.lc-row { display: flex; align-items: center; border-top: 1px solid var(--line); }
.lc-load { flex: 1; min-width: 0; text-align: left; background: none; border: none; color: var(--text); font: inherit; padding: 9px 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-load:hover { background: var(--surface-2); }
.lc-when { color: var(--text-dim); font-size: var(--fs-chrome); }
.lc-x { flex-shrink: 0; background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 9px 13px; font-size: var(--fs-ui); }
.lc-x:hover { color: var(--danger, #c0594a); }
.lc-empty { padding: 12px; color: var(--text-dim); font-size: var(--fs-chrome); font-style: italic; }

/* ── the class expansion + the textbook reader (Sum 2026-08-28). The reader is the live paper's
   .vp viewer (0z-desk/paper.js L475–497) re-dressed: same overlay-margin-close geometry, same
   focus discipline — the cream dropped for the suite's own tokens. ── */
.lc-lessons { border-top: 1px dashed var(--line); padding: 2px 0 6px 14px; }
.lc-book, .lc-lesson { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; font-size: var(--fs-label); padding: 7px 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-book { color: var(--accent); font-weight: 700; }
.lc-book:hover, .lc-lesson:hover { background: var(--surface-2); }
.lc-noted { color: var(--accent); font-size: var(--fs-chrome); }
.lc-add { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px dashed var(--line); color: var(--accent); font: inherit; font-size: var(--fs-label); font-weight: 700; padding: 8px 12px; cursor: pointer; }
.lc-add:hover { background: var(--surface-2); }
/* the class folder (Sum 2026-08-28: files bar + scoped ＋) */
.lc-filebar { display: flex; align-items: center; }
.lc-files-head { flex: 1; text-align: left; background: none; border: none; color: var(--text); font: inherit; font-size: var(--fs-label); padding: 7px 12px; cursor: pointer; }
.lc-files-head:hover { background: var(--surface-2); }
.lc-fadd { flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-ui); cursor: pointer; padding: 2px 10px; margin-right: 10px; }
.lc-fadd:hover { background: var(--line); }
.lc-filelist { padding-left: 14px; border-left: 2px solid var(--line); margin-left: 12px; }
.lc-file { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text-dim); font: inherit; font-size: var(--fs-label); padding: 5px 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-file:hover { background: var(--surface-2); color: var(--text); }
.lc-mod { font-size: var(--fs-chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding: 9px 12px 3px; }
.learn-vp { position: fixed; inset: 0; z-index: 100; background: rgba(10, 7, 6, .62); overflow-y: auto; padding: 5vh 4vw; }
.learn-vp[hidden] { display: none; }
.learn-vp-sheet { max-width: 760px; margin: 0 auto; background: var(--surface, #1c1917); color: var(--text); border: 1px solid var(--line); box-shadow: 0 12px 60px rgba(0, 0, 0, .5); padding: 34px 40px 40px; position: relative; border-radius: var(--r-sm); }
.learn-vp-x { position: absolute; top: 12px; right: 12px; font-size: var(--fs-chrome); letter-spacing: .13em; text-transform: uppercase; background: var(--surface-2); color: var(--accent); border: 1px solid var(--accent); padding: 7px 11px; cursor: pointer; border-radius: var(--r-sm); }
.learn-vp-sheet h2 { font-weight: 900; font-size: 30px; line-height: 1.1; margin: 0 0 18px; }
.learn-vp-sheet h3 { font-size: 20px; margin: 26px 0 8px; border-top: 1px solid var(--line); padding-top: 18px; }
.learn-vp-sheet p { font-size: 16px; line-height: 1.65; margin: 0 0 13px; }
.lvp-k { font-size: var(--fs-chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 14px 0 6px; }
.lvp-notes { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--text); }

/* 📊 skills & weak spots — the report card the AI reads + writes (a rule stands in for the demo). it lives on the
   SETTINGS page now (the gear), replacing the old preset folder list — not in the lesson stack. */
.lprogress .lbar-body { padding: 0; }
.ls-skillnote { padding: 6px 0 10px; color: var(--text-dim); font-size: var(--fs-chrome); font-style: italic; line-height: 1.5; }
.ls-close-row { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.ls-close { padding: 8px 16px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer; }
.ls-close:hover { background: var(--line); }
.lpg-list { display: flex; flex-direction: column; }
.lpg-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: var(--fs-chrome); }
.lpg-skill { flex: 0 0 36%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.lpg-bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.lpg-fill { display: block; height: 100%; background: var(--text-dim); transition: width .25s; }
.lpg-pct { flex: 0 0 36px; text-align: right; color: var(--text); font-weight: 700; }
.lpg-time { flex: 0 0 42px; text-align: right; color: var(--text-dim); }
.lpg-tier { flex: 0 0 96px; text-align: right; font-size: var(--fs-ui); color: var(--text-dim); }
/* the verdict colors the fill + the label */
.lpg-t-skill .lpg-fill { background: #4caf50; } .lpg-t-skill .lpg-tier { color: #5fbf63; }
.lpg-t-weak  .lpg-fill { background: var(--danger, #c0594a); } .lpg-t-weak .lpg-tier { color: #d2756a; }
.lpg-t-mid   .lpg-fill { background: var(--warn, #d6a23e); }
.lpg-empty { padding: 12px; color: var(--text-dim); font-size: var(--fs-chrome); font-style: italic; line-height: 1.5; }

/* ✍️ writer voices — a SCROLL of boxes (not a dropdown). reuses the .tutor-settings chrome on the writer bar. */
.wv-intro { color: var(--text-dim); font-size: var(--fs-chrome); font-style: italic; line-height: 1.5; margin-bottom: var(--space-sm); }
.wv-boxes { display: flex; flex-direction: column; gap: var(--space-sm); }
.wv-box { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 8px 10px 10px; }
.wv-box.on { border-color: var(--rt-shelf-text, var(--accent)); box-shadow: inset 3px 0 0 var(--rt-shelf-text, var(--accent)); }   /* ● the active voice */
.wv-box-head { display: flex; align-items: center; gap: 7px; }
.wv-use { background: none; border: none; color: var(--rt-shelf-text, var(--accent)); font-size: var(--fs-ui); cursor: pointer; padding: 0 2px; line-height: 1; }
.wv-name { font-weight: 700; color: var(--text); }
.wv-pen { color: var(--text-dim); font-size: var(--fs-chrome); }
.wv-flex { flex: 1; }
.wv-reset, .wv-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--fs-ui); padding: 2px 6px; }
.wv-reset:hover { color: var(--text); } .wv-del:hover { color: var(--danger, #c0594a); }
.wv-blurb { color: var(--text-dim); font-size: var(--fs-ui); font-style: italic; margin: 2px 0 6px; }
.wv-rules { width: 100%; min-height: 70px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: var(--fs-chrome); line-height: 1.5; resize: vertical; outline: none; white-space: pre-wrap; }
.wv-rules:focus { border-color: var(--rt-shelf-text, var(--accent)); }
.wv-add { margin-top: var(--space-sm); padding: 9px 14px; background: var(--surface); color: var(--text); border: 1px dashed var(--line); border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer; width: 100%; }
.wv-add:hover { background: var(--line); border-style: solid; }

/* ── the writer desk sections: persona · works-in-progress · model · voices ── */
.wv-sec { margin: var(--space-md) 0 var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--line); font-weight: 800; color: var(--text); letter-spacing: 0.01em; }
.wv-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.wv-sec-sub { font-weight: 400; opacity: 0.6; }
.wv-persona { display: flex; flex-direction: column; gap: var(--space-sm); }

/* works in progress — a NAV of projects (one tag each); expand → pointers that open in tiptap */
.wk-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.wk { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: var(--space-sm) var(--space-md); }
.wk-head { display: flex; align-items: baseline; gap: var(--space-sm); cursor: pointer; list-style: none; font-weight: 800; }
.wk-head::-webkit-details-marker { display: none; }
.wk-head::before { content: '▸'; opacity: 0.6; font-weight: 400; }
.wk[open] > .wk-head::before { content: '▾'; }
.wk-title { font-weight: 800; color: var(--text); }
.wk-status { font-size: 0.82em; opacity: 0.6; font-weight: 400; }
.wk-note { margin: var(--space-sm) 0; font-size: 0.88em; opacity: 0.75; line-height: 1.45; }
.wk-files { display: flex; flex-direction: column; gap: 6px; }
.wk-file-row { display: flex; flex-direction: column; gap: 2px; }
.wk-open { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); width: 100%; text-align: left; padding: 8px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer; }
.wk-open:hover { border-color: var(--rt-shelf-text, var(--accent)); }
.wk-open-go { font-weight: 400; font-size: 0.84em; opacity: 0.55; white-space: nowrap; }
.wk-file-note { font-size: 0.8em; opacity: 0.6; padding: 0 2px 2px 10px; line-height: 1.4; }
.wk-chunk { margin-top: var(--space-sm); padding: 9px 14px; width: 100%; background: var(--surface); color: var(--text); border: 1px dashed var(--line); border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer; }
.wk-chunk:hover { background: var(--line); border-style: solid; }

/* ── PA's oz-funnel dashboard: the pitch, the quotients, the goals, the nudge ── */
.pa-pitch { padding: var(--space-sm) var(--space-md); background: color-mix(in srgb, var(--accent, #7a6cff) 12%, var(--surface)); border-left: 3px solid var(--accent, #7a6cff); border-radius: var(--r-sm); color: var(--text); line-height: 1.5; }
.pa-persona { display: flex; flex-direction: column; gap: var(--space-sm); }
.pa-q { margin-bottom: var(--space-sm); }
.pa-q-top { display: flex; align-items: center; gap: var(--space-sm); }
.pa-q-label { flex: 1; font-weight: 700; color: var(--text); }
.pa-q-num { width: 56px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 6px; font: inherit; text-align: right; outline: none; }
.pa-q-num:focus { border-color: var(--accent); }
.pa-q-pct { opacity: 0.6; }
.pa-q-bar { height: 8px; margin-top: 5px; background: var(--line); border-radius: 999px; overflow: hidden; }
.pa-q-fill { height: 100%; background: var(--accent, #7a6cff); border-radius: 999px; transition: width 0.15s ease; }
.pa-q-hint { margin-top: 3px; font-size: 0.84em; opacity: 0.62; }
.pa-goals { width: 100%; min-height: 64px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: var(--fs-chrome); line-height: 1.5; resize: vertical; outline: none; }
.pa-goals:focus { border-color: var(--accent); }
.pa-nudge { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-sm); font-size: 0.9em; line-height: 1.5; opacity: 0.9; }

/* ── the 4 collapsible bars ────────────────────────────── */
.learn-bars { display: flex; flex-direction: column; }
.lbar { border-bottom: 1px solid var(--line); }
.lbar-head { width: 100%; text-align: left; padding: 12px 16px; background: var(--surface); border: none; color: var(--text); font: inherit; font-size: var(--fs-label); font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.lbar-head:hover { background: var(--surface-2); }
.lbar-head::after { content: '▸'; margin-left: auto; color: var(--text-dim); transition: transform .15s; }
.lbar.open .lbar-head::after { transform: rotate(90deg); }
/* (Sum 2026-08-17) .lbar-body had a colour but NO BACKGROUND, so an open snippet sat transparent
   over the card's art — dark text on dark texture, unreadable. A solid ground, same on every theme.
   The heads already had one; only the bodies were see-through. */
.lbar-body { display: none; padding: 4px 18px 16px; background: var(--surface); color: var(--text); line-height: 1.65; }
.lbar.open .lbar-body { display: block; }
.lbar-fresh { animation: lbar-flash .6s ease; }
/* (Sum 2026-08-17) a bar is a BUILD — three states, not two: unbuilt · building · built.
   Same vocabulary as iq-plus/progress.js (gray/yellow/green), applied to bars instead of skills. */
.lbar-building .lbar-head { opacity: .75; }
.lbar-building .lbar-head::before { content: '◌ '; color: var(--accent); }
.lbar-wait { padding: 10px 2px; color: var(--text-dim); font-style: italic; }
/* explore — the real links the search returned, one per source. GOFAI, no model. */
.le-links { display: flex; flex-direction: column; gap: 2px; }
.le-links .le-item { text-align: left; padding: 7px 10px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; display: block; }
.le-links .le-item:hover { background: var(--surface-2); color: var(--accent); }
.le-links .le-host { color: var(--text-dim); font-size: var(--fs-chrome); }
/* practice — one problem, then buy another */
.learn-again { margin-top: 12px; padding: 0 14px; height: 34px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-chrome); cursor: pointer; white-space: nowrap; }
.learn-again:hover { border-color: var(--accent); color: var(--accent); }
.ls-sel { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: var(--fs-label); }
.ls-sel:focus { border-color: var(--tutor); outline: none; }
@keyframes lbar-flash { from { background: rgba(227, 66, 52, 0.14); } to { background: transparent; } }

/* ── practice — Oregon-Trail: endless, multi-step, teach by elimination ── */
.lp-step { display: inline-block; margin-bottom: 8px; font-size: var(--fs-chrome); font-weight: 700; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; }
.lp-prompt { font-size: var(--fs-label); margin-bottom: 12px; }
.lp-choices { display: flex; flex-direction: column; gap: 8px; }
.lp-choice { text-align: left; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font: inherit; cursor: pointer; }
.lp-choice:hover:not(:disabled) { border-color: var(--accent); }
.lp-choice:disabled { color: var(--text-dim); cursor: default; }
.lp-choice.lp-right { border-color: var(--quiz-right); background: var(--ok-bg); color: var(--text); }
.lp-choice.lp-wrong { border-color: var(--quiz-wrong); }
.lp-feedback { margin-top: 12px; min-height: 1.4em; line-height: 1.5; }
.lp-ok { color: var(--ok-soft); }
.lp-no { color: var(--bad-soft); }

/* finished a problem → the fork: keep exploring (forever) or take the test */
.lp-done { font-size: var(--fs-label); color: var(--text); margin-bottom: 14px; }
.lp-donerow { display: flex; flex-wrap: wrap; gap: 10px; }   /* sample arena row; .lp-next is the re-roll BUTTON */
.lp-go { padding: 10px 18px; background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 var(--accent-deep); }
.lp-go:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-deep); }
.lp-totest { padding: 10px 18px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 var(--btn-sh); }
.lp-totest:hover { border-color: var(--accent); }
.lp-totest:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-sh); }

/* ── explore — related directions; click one to seed the next course ── */
.le-list { display: flex; flex-direction: column; gap: 8px; }
.le-item { text-align: left; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font: inherit; cursor: pointer; }
.le-item:hover { border-color: var(--accent); color: var(--accent); }

/* ── test — "test your knowledge": single-select, check → score (no mid-teaching) ── */
.lt-q { margin-bottom: 18px; }
.lt-choice { display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font: inherit; cursor: pointer; }
.lt-choice:hover:not(:disabled) { border-color: var(--accent); }
.lt-choice.lt-sel { border-color: var(--accent); background: var(--sel-acc); }
.lt-choice:disabled { cursor: default; }
.lt-choice.lt-right { border-color: var(--quiz-right); background: var(--ok-bg); }
.lt-choice.lt-wrong { border-color: var(--quiz-wrong); background: var(--bad-bg); }
.lt-check { padding: 10px 18px; background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 var(--accent-deep); }
.lt-check:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-deep); }
.lt-score { margin-top: 14px; font-size: var(--fs-label); font-weight: 700; color: var(--accent); min-height: 1.4em; }


/* ── gear button ─────────────────────────────────────────── */
.learn-gear { background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text-dim); font-size: var(--fs-chrome); cursor: pointer; padding: 4px 8px; min-height: var(--hit); min-width: 44px; }
.learn-gear:hover { border-color: var(--line); color: var(--text); }

/* ── settings panel (⚙️ gear opens this) ──────────────────────────────── */
.learn-settings { flex-shrink: 0; overflow-y: auto; border-bottom: 2px solid var(--tutor); background: var(--bg); padding: var(--space-md); }

/* profile form */
.ls-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-md); }
.ls-label { font-size: var(--fs-chrome); color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.ls-ta, .ls-in { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font: inherit; font-size: var(--fs-chrome); padding: 8px 10px; resize: none; outline: none; }
.ls-ta:focus, .ls-in:focus { border-color: var(--tutor); }
.ls-sel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font: inherit; font-size: var(--fs-chrome); padding: 6px 8px; min-height: 36px; cursor: pointer; }
.ls-disorders { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ls-ck-row { display: flex; align-items: center; gap: 5px; font-size: var(--fs-chrome); cursor: pointer; min-height: 30px; color: var(--text); }
.ls-ck-row input { width: 18px; height: 18px; accent-color: var(--tutor); cursor: pointer; }
.ls-hide { display: none; }

/* skills/weaknesses section headers */
.ls-section-head { font-size: var(--fs-chrome); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--tutor-bright); padding: var(--space-sm) 0 4px; border-bottom: 1px solid var(--line); margin: var(--space-md) 0 var(--space-sm); }
.ls-tree { padding-bottom: var(--space-sm); }
.ls-add-folder-row { padding: 4px 0 var(--space-sm); }

/* folder rows */
.ls-folder { margin-bottom: 6px; }
.ls-folder-head { padding-left: 0; }
.ls-folder-files { padding-left: 1rem; border-left: 1px solid var(--line); margin-left: 8px; }
.ls-folder-name { color: var(--text); font-weight: 600; font-size: var(--fs-chrome); }

/* file rows */
.ls-file { margin-bottom: 4px; }
.ls-fhead { display: flex; align-items: center; gap: 6px; padding: 4px 0; min-height: var(--hit); }
.ls-fname { font-size: var(--fs-chrome); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ls-flex { flex: 1; }
.ls-body { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font: inherit; font-size: var(--fs-chrome); padding: 6px 8px; resize: none; margin-bottom: 4px; outline: none; }
.ls-body:focus { border-color: var(--tutor); }

/* toggle dot (same mechanic as pc-inj but blue) */
.ls-tog { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--text-dim); cursor: pointer; flex-shrink: 0; }
.ls-tog.on { background: var(--tutor); border-color: var(--tutor); }

/* ✕ delete buttons */
.ls-del { background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-dim); font-size: var(--fs-ui); cursor: pointer; padding: 2px 6px; min-width: 28px; min-height: var(--hit); flex-shrink: 0; line-height: 1; }
.ls-del:hover { border-color: var(--line); color: var(--text); }

/* + add file / + add folder buttons */
.ls-add-file { background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--text-dim); font-size: var(--fs-chrome); cursor: pointer; padding: 2px 8px; min-height: var(--hit); }
.ls-add-file:hover { color: var(--text); border-color: var(--text-dim); }
.ls-add-folder { background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--text-dim); font-size: var(--fs-chrome); cursor: pointer; padding: 4px 12px; min-height: var(--hit); }
.ls-add-folder:hover { color: var(--text); border-color: var(--text-dim); }

/* ══ p-learn — the LEARN card, run through makeCard, dressed in the TUTOR's blue. the tutor
   drives this card, so they match like the nurse matches the injection. only the THEME accents
   go blue — the green/red correctness feedback stays (right is right in any color). ══ */
.p-learn .card-head { background: var(--tutor-bg); border-bottom: none; box-shadow: inset 0 -2px 0 var(--tutor); }
.p-learn .card-head .card-title { color: var(--tutor-bright); letter-spacing: 1px; }
.p-learn .card-head::after { color: var(--tutor-bright); }
.p-learn .card-body { height: 440px; }   /* a draggable window — the bottom bar slides it; the bars scroll within */

/* the bottom resize bar — BIG + glowing blue, so it matches the head and you can't miss it */
.p-learn .card-bottom {
  height: 30px;
  background: var(--tutor-bg); border-top: 1px solid var(--tutor);
  box-shadow: inset 0 3px 9px -3px rgba(91,155,213,0.6);   /* an inner blue glow */
}
.p-learn .card-bottom::before { content: '⇕'; color: var(--tutor-bright); font-size: 15px; font-weight: 700; }
.p-learn .card-bottom:hover { box-shadow: inset 0 3px 13px -2px rgba(91,155,213,0.95); }
.p-learn .card-bottom:hover::before { color: var(--tutor-brighter); }

/* input row — blue focus + the blue "create course" */
.p-learn .learn-q:focus { border-color: var(--tutor); }
.p-learn .learn-create { background: var(--tutor-btn); box-shadow: 0 3px 0 var(--tutor-shadow); }
.p-learn .learn-create:active { box-shadow: 0 1px 0 var(--tutor-shadow); }
.p-learn .learn-tool:hover { border-color: var(--tutor); }

/* the create-course flash → blue (was the collar red) */
.p-learn .lbar-fresh { animation: lbar-flash-blue .6s ease; }
@keyframes lbar-flash-blue { from { background: rgba(91,155,213,0.16); } to { background: transparent; } }

/* practice · explore · test — blue accents (correctness colors untouched) */
.p-learn .lp-choice:hover:not(:disabled) { border-color: var(--tutor); }
.p-learn .le-item:hover { border-color: var(--tutor); color: var(--tutor-muted); }
.p-learn .lp-go,
.p-learn .lt-check { background: var(--tutor-btn); box-shadow: 0 3px 0 var(--tutor-shadow); }
.p-learn .lp-go:active,
.p-learn .lt-check:active { box-shadow: 0 1px 0 var(--tutor-shadow); }
.p-learn .lp-totest:hover { border-color: var(--tutor); }
.p-learn .lt-choice:hover:not(:disabled) { border-color: var(--tutor); }
.p-learn .lt-choice.lt-sel { border-color: var(--tutor); background: var(--sel-tutor); }
.p-learn .lt-score { color: var(--tutor-muted); }

/* every bar links out to what it was built from (Sum 2026-08-17: "link out to sources") */
.lbar-src { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--text-dim); font-size: var(--fs-chrome); line-height: 1.7; }
.lbar-src a { color: var(--text-dim); text-decoration: none; }
.lbar-src a:hover { color: var(--accent); text-decoration: underline; }

/* ── practice / test — the card draws these; the model only filled the text (Sum 2026-08-17) ── */
.lp-q { padding: 4px 0; }
.lp-choice { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 11px 14px; background: var(--surface);
  color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; cursor: pointer; }
.lp-choice:hover { border-color: var(--accent); }
.lp-choice.right { border-color: #3f9e5e; background: rgba(63,158,94,.12); }
.lp-choice.wrong { border-color: #c1121f; background: rgba(193,18,31,.10); }
.lp-fb { margin-top: 10px; color: var(--text); line-height: 1.6; }
.lp-fb:empty { display: none; }
.lp-worked { margin-top: 8px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-sm); font-family: var(--font-mono, monospace); }
.lt-pick { padding: 10px 0; color: var(--text-dim); }
.lt-n { margin-left: 8px; padding: 6px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); font: inherit; cursor: pointer; }
.lt-n:hover { border-color: var(--accent); color: var(--accent); }
.lp-flag { margin-top: 10px; padding: 7px 11px; border-left: 3px solid var(--warn, #c98a2e); background: rgba(201,138,46,.10); color: var(--text-dim); font-size: var(--fs-chrome); }

/* the refined search — shown UNDER what the human typed, editable, overridable (Sum 2026-08-17).
   Nothing searches behind your back: you see the query the model wrote before it runs, and you can
   change it and press ↻ again. */
.learn-refined { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: var(--fs-chrome); }
.lr-tag { color: var(--text-dim); white-space: nowrap; }
.lr-act { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
a.lr-stop { color: #c1121f; text-decoration: underline; font-size: var(--fs-chrome); cursor: pointer; }
a.lr-stop:hover { color: #8d0d17; }
input.lr-q { flex: 1; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 6px 10px; font: inherit; font-size: var(--fs-chrome); }
input.lr-q:focus { border-color: var(--tutor, var(--accent)); outline: none; }
.lr-again { padding: 6px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); font: inherit; font-size: var(--fs-chrome); cursor: pointer; white-space: nowrap; }
.lr-again:hover { border-color: var(--accent); color: var(--accent); }
.lr-over { padding: 6px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); font: inherit; font-size: var(--fs-chrome); cursor: pointer; white-space: nowrap; }
.lr-over:hover { border-color: var(--tutor, var(--accent)); color: var(--tutor, var(--accent)); }

/* the shelf hit — you already learned this (Sum 2026-08-17) */
.lr-have { flex: 1; min-width: 0; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-fresh { padding: 6px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); font: inherit; font-size: var(--fs-chrome); cursor: pointer; white-space: nowrap; }
.lr-fresh:hover { border-color: var(--accent); color: var(--accent); }

/* a failure that shows its work — folded shut, so it is a diagnostic and not a wall of text */
.lbar-raw { margin: 6px 0 2px; font-size: 12px; }
.lbar-raw summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.lbar-raw summary:hover { color: var(--accent); }
.lbar-raw pre { white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; margin: 4px 0 0; color: var(--text); }

/* the just-in-time teaching rides UNDER the choice it belongs to, not in one box below all four.
   .lp-fb:empty already collapses, so the three unpressed slots take no room. */
.lp-slot { display: block; }
.lp-slot .lp-fb { margin: 2px 0 4px; padding: 8px 12px 8px 14px;
  border-left: 2px solid var(--line); color: var(--text-dim); font-size: var(--fs-chrome); }
.lp-slot .lp-choice.right ~ .lp-fb { border-left-color: #3f9e5e; }
.lp-slot .lp-choice.wrong ~ .lp-fb { border-left-color: #c1121f; }

/* the exit that rides the teaching — "practice again" on right, "keep trying" on wrong.
   Inherits the .learn-again shape so the re-roll looks the same wherever it lives. */
.lp-exit { margin-top: 10px; }
.lp-exit button { padding: 0 14px; height: 32px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit;
  font-size: var(--fs-chrome); cursor: pointer; white-space: nowrap; }
.lp-exit button:hover { border-color: var(--accent); color: var(--accent); }
.lp-exit button:disabled { color: var(--text-dim); cursor: default; }
.lp-exit .lp-next:hover { border-color: #3f9e5e; color: #3f9e5e; }

/* a dropped question gets said out loud, not swallowed */
.lbar-note { margin: 0 0 10px; padding: 7px 11px; border-left: 3px solid var(--warn, #c98a2e);
  background: rgba(201,138,46,.10); color: var(--text-dim); font-size: var(--fs-chrome); }

/* ⚠ GRADED TEST ROWS WERE DARK-ON-DARK in clinical (Sum 2026-08-17) — .lt-sel/.lt-right/.lt-wrong
   used opaque theme fills (--sel-acc, --ok-bg, --bad-bg) with no text colour, so the answer you
   picked went unreadable the moment it was graded. The PRACTICE choices never had this bug because
   they use translucent washes over whatever the skin's own surface is. Same pattern, copied. */
.lt-choice.lt-sel { border-color: var(--accent); background: rgba(120,140,170,.14); color: var(--text); }
.lt-choice.lt-right { border-color: #3f9e5e; background: rgba(63,158,94,.14); color: var(--text); }
.lt-choice.lt-wrong { border-color: #c1121f; background: rgba(193,18,31,.12); color: var(--text); }
.lt-choice:disabled { color: var(--text); opacity: 1; }        /* graded ≠ greyed out — it must stay readable */
.lt-choice:disabled:not(.lt-right):not(.lt-wrong) { color: var(--text-dim); }

/* ‹ › walk the problems already bought — free, no call */
.lp-nav { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.lp-arw { width: 30px; height: 30px; line-height: 1; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 17px; cursor: pointer; }
.lp-arw:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lp-arw:disabled { color: var(--text-dim); cursor: default; opacity: .5; }
.lp-count { color: var(--text-dim); font-size: var(--fs-chrome); }

/* ↻ test again — sits on the score line, so the retake is where you just learned you want one */
.lt-retake { margin-left: 12px; padding: 0 12px; height: 30px; background: var(--surface);
  color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-chrome); cursor: pointer; vertical-align: middle; }
.lt-retake:hover { border-color: var(--accent); color: var(--accent); }
.lt-check:disabled { opacity: .5; cursor: default; }

/* ⚠ CLINICAL ONLY — OUTLINE, NO FILL (Sum 2026-08-17: "clinical still hard to read, just outline it…
   corp is fine"). The fill itself was never the bug: `.p-learn .lt-choice.lt-sel` (L347) is THREE
   classes and sets --sel-tutor, a dark wash designed for the dark skins. It beat the two-class fix
   above on specificity, so clinical — light paper — kept getting dark ink on dark ground. Corporate
   is dark, so the same wash reads correctly there and is LEFT ALONE.
   Clinical is the max-contrast/a11y skin, so state is carried by a heavier RULE, never by fill. */
[data-skin="clinical"] .p-learn .lt-choice.lt-sel,
[data-skin="clinical"] .lt-choice.lt-sel {
  background: transparent; color: var(--text);
  border: 2px solid var(--accent, #ab1420); box-shadow: inset 0 -2px 0 var(--accent, #ab1420);
}
[data-skin="clinical"] .p-learn .lt-choice.lt-right,
[data-skin="clinical"] .lt-choice.lt-right {
  background: transparent; color: var(--text); border: 2px solid #1d7a3e; box-shadow: inset 0 -2px 0 #1d7a3e;
}
[data-skin="clinical"] .p-learn .lt-choice.lt-wrong,
[data-skin="clinical"] .lt-choice.lt-wrong {
  background: transparent; color: var(--text); border: 2px solid #ab1420; box-shadow: inset 0 -2px 0 #ab1420;
}

/* the test sitting walker uses the same strip as practice */
.lt-arw { width: 30px; height: 30px; line-height: 1; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 15px; cursor: pointer; }
.lt-arw:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lt-arw:disabled { color: var(--text-dim); cursor: default; opacity: .5; }

/* the control row: arrows only when there is somewhere to go, re-roll always */
.lp-nav .lp-new, .lp-nav .lt-retake { margin-left: auto; padding: 0 12px; height: 30px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); font: inherit; font-size: var(--fs-chrome); cursor: pointer; }
.lp-nav .lp-new:hover, .lp-nav .lt-retake:hover { border-color: var(--accent); color: var(--accent); }

/* category groups on the shelf — a header only appears once there are two or more groups */
.lc-group { margin-bottom: 14px; }
.lc-cat { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 0 2px;
  color: var(--text-dim); font-size: var(--fs-chrome); letter-spacing: .08em; }
.lc-cat::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lc-catn { order: 3; color: var(--text-dim); opacity: .7; }