/* 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); }
.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: none; 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); }
.learn-create { 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 { 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; }

/* 📊 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); }
.lbar-body { display: none; padding: 4px 18px 16px; color: var(--text); line-height: 1.65; }
.lbar.open .lbar-body { display: block; }
.lbar-fresh { animation: lbar-flash .6s ease; }
@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-next { display: flex; flex-wrap: wrap; gap: 10px; }
.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); }