:root {
  /* Light, welcoming palette shared with the onboarding track (dark theme retired). */
  --bg:#eef1f6; --panel:#ffffff; --panel2:#f5f8ff; --line:#e6e9f0; --text:#20242e; --muted:#8790a3;
  --ok:#1f9d55; --warn:#c9821a; --bad:#e5484d; --pend:#8790a3; --accent:#2f6fed;
}
* { box-sizing:border-box; }
body { margin:0; font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); cursor:pointer; text-decoration:none; }
h1,h2,h3,h4 { margin:.2em 0; }
.muted { color:var(--muted); font-weight:400; }
.mono { font-family:ui-monospace,Menlo,monospace; font-size:.85em; }

.login { max-width:440px; margin:16vh auto; text-align:center; padding:32px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }

/* ===== Public landing page (signed-out) — dark editorial theme, fully scoped to .landing ===== */
.landing {
  --ink:#0C171B; --slate:#132329; --slate-2:#1A2F37; --line:#223D46;
  --steel:#7A97A3; --steel-2:#A9C0C8; --bone:#ECEFEC;
  --ash:#E4E7E2; --ash-2:#F1F3EF; --graphite:#465A60;
  --ember:#F0910F; --ember-deep:#B96A05;
  --disp:'Archivo',sans-serif; --body:'IBM Plex Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
  min-height:100vh; background:var(--ash); color:var(--ink);
  font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased;
}
.landing * { box-sizing:border-box; margin:0; padding:0; }
.landing .wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
.landing .mono { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }

/* nav */
.landing .nav { background:var(--ink); border-bottom:1px solid var(--line); }
.landing .nav .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.landing .mark { font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:-.02em; color:var(--bone); display:flex; align-items:center; gap:10px; }
.landing .dot { width:9px; height:9px; background:var(--ember); border-radius:50%; flex:none; }
.landing .nav a { color:var(--steel-2); text-decoration:none; font-size:14px; }
.landing .nav a:hover { color:var(--bone); }

/* hero */
.landing .hero { background:var(--ink); color:var(--bone); padding:88px 0 96px; }
.landing .eyebrow { color:var(--ember); }
.landing h1 { font-family:var(--disp); font-weight:800; font-size:clamp(2.7rem,6.4vw,5.1rem); line-height:.97; letter-spacing:-.035em; margin:20px 0 0; max-width:15ch; }
.landing h1 .was { color:var(--steel); display:block; }
.landing h1 .now { color:var(--bone); display:block; }
.landing h1 .now b { font-weight:800; box-shadow:inset 0 -.14em 0 var(--ember-deep); }
.landing .deck { color:var(--steel-2); font-size:1.06rem; max-width:56ch; margin-top:26px; }
.landing .deck b { color:var(--bone); font-weight:500; }
.landing .cta-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:34px; }
.landing .btn { font-family:var(--body); font-size:15px; font-weight:600; padding:13px 24px; border-radius:2px; border:1px solid transparent; text-decoration:none; cursor:pointer; display:inline-block; }
.landing .btn-p { background:var(--ember); color:#241300; }
.landing .btn-p:hover { background:#ffa42a; }
.landing .btn-s { background:transparent; color:var(--bone); border-color:var(--line); }
.landing .btn-s:hover { border-color:var(--steel); background:var(--slate); }
.landing .note { font-size:13px; color:var(--steel); }

/* ladder + panel */
.landing .build { display:grid; grid-template-columns:1.02fr .98fr; gap:56px; margin-top:76px; border-top:1px solid var(--line); padding-top:44px; }
.landing .lab { color:var(--steel); margin-bottom:20px; }
.landing .ladder { list-style:none; }
.landing .lvl { display:flex; gap:16px; align-items:baseline; width:100%; text-align:left; background:none; border:0; border-left:2px solid var(--line); padding:13px 0 13px 18px; cursor:pointer; font-family:var(--body); color:var(--steel); font-size:15px; transition:color .18s,border-color .18s; }
.landing .lvl:hover { color:var(--steel-2); }
.landing .lvl .n { font-family:var(--mono); font-size:12px; color:var(--line); flex:none; width:22px; transition:color .18s; }
.landing .lvl:hover .n { color:var(--steel); }
.landing .lvl[aria-current="true"] { border-left-color:var(--ember); color:var(--bone); font-weight:500; }
.landing .lvl[aria-current="true"] .n { color:var(--ember); }
.landing .lvl:focus-visible { outline:2px solid var(--ember); outline-offset:3px; }
.landing .panel { background:var(--slate); border:1px solid var(--line); border-radius:3px; padding:24px; align-self:start; position:sticky; top:24px; }
.landing .p-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--line); }
.landing .p-head strong { font-family:var(--disp); font-weight:600; font-size:14px; letter-spacing:-.01em; color:var(--bone); }
.landing .live { display:flex; align-items:center; gap:7px; color:var(--ember); }
.landing .pulse { width:7px; height:7px; border-radius:50%; background:var(--ember); }
.landing .stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:18px 0; }
.landing .stat { background:var(--slate); padding:14px 15px; }
.landing .stat span { display:block; color:var(--steel); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.landing .stat strong { font-family:var(--disp); font-weight:600; font-size:1.65rem; color:var(--bone); letter-spacing:-.02em; line-height:1.3; }
.landing .grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.landing .mod { background:var(--slate); padding:11px 13px; font-family:var(--mono); font-size:11px; color:var(--line); display:flex; align-items:center; gap:9px; transition:color .3s,background .3s; }
.landing .mod::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--line); flex:none; transition:background .3s; }
.landing .mod.on { color:var(--steel-2); background:var(--slate-2); }
.landing .mod.on::before { background:var(--ember); }
.landing .p-foot { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--steel-2); min-height:44px; }
.landing .p-foot em { font-style:normal; color:var(--ember); font-family:var(--mono); font-size:11px; letter-spacing:.1em; display:block; margin-bottom:5px; }

/* light sections */
.landing .sec { padding:96px 0; }
.landing h2 { font-family:var(--disp); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.85rem); letter-spacing:-.03em; line-height:1.05; max-width:20ch; }
.landing .sub { color:var(--graphite); max-width:54ch; margin-top:14px; }
.landing .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#CFD4CC; border:1px solid #CFD4CC; margin-top:48px; }
.landing .step { background:var(--ash-2); padding:30px 26px 34px; }
.landing .step .k { font-family:var(--mono); font-size:11px; color:var(--ember-deep); letter-spacing:.16em; }
.landing .step h3 { font-family:var(--disp); font-weight:600; font-size:1.22rem; letter-spacing:-.02em; margin:14px 0 10px; }
.landing .step p { font-size:14.5px; color:var(--graphite); }
.landing .chit { margin-top:22px; background:#fff; border:1px solid #D8DCD6; border-radius:2px; padding:12px 14px; font-family:var(--mono); font-size:11px; color:var(--graphite); line-height:1.9; }
.landing .chit b { color:var(--ink); font-weight:500; }
.landing .ok { color:#2E6B3E; }

/* glossary */
.landing .gloss { margin-top:92px; border-top:1px solid #CFD4CC; padding-top:48px; display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:start; }
.landing .terms { display:flex; flex-wrap:wrap; gap:8px; }
.landing .term { font-family:var(--mono); font-size:12px; padding:7px 13px; border:1px solid #C8CEC6; background:transparent; border-radius:2px; cursor:pointer; color:var(--graphite); }
.landing .term:hover { border-color:var(--graphite); }
.landing .term[aria-pressed="true"] { background:var(--ink); color:var(--ash-2); border-color:var(--ink); }
.landing .term:focus-visible { outline:2px solid var(--ember-deep); outline-offset:2px; }
.landing .defn { background:var(--ash-2); border-left:2px solid var(--ember); padding:22px 24px; min-height:132px; margin-top:22px; }
.landing .defn h4 { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember-deep); font-weight:500; }
.landing .defn p { margin-top:10px; font-size:15px; color:var(--ink); }

/* close */
.landing .close { background:var(--ink); color:var(--bone); padding:92px 0; }
.landing .who { display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-bottom:56px; padding-bottom:52px; border-bottom:1px solid var(--line); }
.landing .who h3 { font-family:var(--disp); font-weight:600; font-size:1.1rem; color:var(--bone); margin-bottom:9px; }
.landing .who p { color:var(--steel-2); font-size:14.5px; max-width:40ch; }
.landing .close h2 { color:var(--bone); }
.landing footer { background:var(--ink); border-top:1px solid var(--line); padding:26px 0; color:var(--steel); font-size:13px; }

@media (max-width:900px) {
  .landing .wrap { padding:0 22px; }
  .landing .build, .landing .steps, .landing .gloss, .landing .who { grid-template-columns:1fr; gap:40px; }
  .landing .panel { position:static; }
  .landing .steps { gap:1px; }
  .landing .hero { padding:64px 0 72px; }
  .landing .sec, .landing .close { padding:68px 0; }
}
@media (prefers-reduced-motion:reduce) { .landing * { transition:none !important; animation:none !important; } }
.btn { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:7px; padding:7px 14px; cursor:pointer; font-size:14px; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ok.on { background:var(--ok); border-color:var(--ok); color:#04240c; }
.btn.warn.on { background:var(--warn); border-color:var(--warn); color:#241b02; }
.btn.bad.on { background:var(--bad); border-color:var(--bad); color:#2a0606; }

.topbar { display:flex; align-items:center; gap:24px; padding:10px 20px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { font-weight:600; cursor:pointer; }
.topbar nav { display:flex; gap:16px; }
.topbar nav a.active { color:var(--text); font-weight:600; border-bottom:2px solid var(--accent); }
.topbar .user { margin-left:auto; display:flex; gap:12px; align-items:center; }

/* "Content ▾" dropdown — the demoted reviewer/curation tools */
.navmenu { position:relative; margin-left:auto; }
.navmenu-btn { background:none; border:none; color:var(--accent); cursor:pointer; font:inherit; padding:4px 2px; display:flex; align-items:center; gap:5px; }
.navmenu-btn.active { color:var(--text); font-weight:600; }
.navmenu-btn .caret { font-size:10px; opacity:.7; }
.navmenu-pop { position:absolute; right:0; top:calc(100% + 8px); min-width:180px; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 40px rgba(20,30,60,.16); padding:6px; z-index:6; display:flex; flex-direction:column; }
.navmenu-pop a { padding:8px 12px; border-radius:7px; color:var(--text); font-size:13.5px; }
.navmenu-pop a:hover { background:var(--panel2); }
.navmenu-pop a.active { color:var(--accent); font-weight:600; background:var(--panel2); }

main { padding:20px 24px; max-width:1100px; margin:0 auto; }

.rollup { margin-bottom:20px; } .rollup-num { font-size:18px; margin-bottom:6px; }
.bar { height:8px; background:var(--panel2); border-radius:6px; overflow:hidden; display:flex; }
.bar.big { height:14px; } .bar i { display:block; height:100%; }
.bar i.approved,.bar .approved { background:var(--ok); } .bar i.needs-work,.bar .needs-work{ background:var(--warn);} .bar i.rejected,.bar .rejected{ background:var(--bad);} .bar > i:first-child:not(.approved):not(.needs-work):not(.rejected){background:var(--ok);}

.track-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.track-card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; cursor:pointer; }
.track-card:hover { border-color:var(--accent); }
.track-stats { display:flex; gap:8px; align-items:center; margin:10px 0 6px; flex-wrap:wrap; }
.diff-row { display:flex; gap:12px; color:var(--muted); font-size:12px; }
.chip { font-size:12px; padding:2px 8px; border-radius:20px; background:var(--panel2); border:1px solid var(--line); cursor:pointer; }
.chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.chip.ok{color:var(--ok);} .chip.warn{color:var(--warn);} .chip.pend{color:var(--muted);}

.trackhead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.back { font-size:13px; } .filters { display:flex; gap:6px; margin-left:auto; }
.diff-group { margin:14px 0; } .diff-group h4 { color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:4px; }
.badge-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; cursor:pointer; }
.badge-row:hover,.badge-row.sel { background:var(--panel); }
.brow-title { flex:1; } .brow-signoff { font-size:11px; color:var(--muted); } .brow-comments{font-size:12px;color:var(--muted);}
.brow-lesson { font-size:11px; }
.lesson .md h2 { font-size:15px; margin-top:1.2em; border-bottom:1px solid var(--line); padding-bottom:3px; }
.brow-tier { font-size:10px; font-weight:600; padding:1px 5px; border-radius:8px; }
.brow-tier.t1 { background:#e6f6ec; color:#1a7d43; } .brow-tier.t2 { background:#fdf6ec; color:#b26a12; } .brow-tier.t3 { background:#fdeef5; color:#c03d82; }
.quick { display:flex; gap:4px; }
.mini { border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:5px; width:26px; height:24px; cursor:pointer; }
.mini.ok:hover{background:var(--ok);color:#04240c;} .mini.warn:hover{background:var(--warn);color:#241b02;} .mini.bad:hover{background:var(--bad);color:#2a0606;}
.decision-dot { width:9px; height:9px; border-radius:50%; background:var(--pend); flex:none; }
.decision-dot.approved{background:var(--ok);} .decision-dot.needs-work{background:var(--warn);} .decision-dot.rejected{background:var(--bad);} .decision-dot.pending{background:var(--pend);} .decision-dot.bug{background:#a371f7;}
.mini.bug:hover{background:#a371f7;color:#160a2b;}
.btn.bug{border-color:#a371f7;color:#c9a6ff;} .btn.bug.on{background:#a371f7;border-color:#a371f7;color:#160a2b;}
.bug-flag{display:flex;gap:10px;align-items:center;margin:8px 0;flex-wrap:wrap;} .bug-flag .muted{font-size:12px;flex:1;min-width:200px;}
.chip.bug{color:#c9a6ff;}

.drawer { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; justify-content:flex-end; z-index:20; }
.drawer-panel { width:min(760px,94vw); height:100%; overflow:auto; background:var(--bg); border-left:1px solid var(--line); padding:20px 24px; }
.dhead { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.dhead h2 { display:inline; } .dmeta { display:flex; gap:8px; margin-top:6px; } .close { font-size:20px; }
.tag { font-size:11px; padding:2px 8px; border-radius:5px; background:var(--panel2); border:1px solid var(--line); }
.dbody section { border-top:1px solid var(--line); padding:14px 0; }
.md { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.md pre { background:#0b0d11; padding:10px; border-radius:6px; overflow:auto; } .md code{font-family:ui-monospace,monospace;font-size:.86em;}
.prov-cards details.card { background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:8px 10px; margin:6px 0; }
.prov-cards summary { cursor:pointer; } .prov-nodes,.prov-links{ margin:6px 0; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.decide-btns { display:flex; gap:8px; margin-bottom:8px; }
textarea { width:100%; min-height:70px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:7px; padding:8px; font:inherit; margin:6px 0; }
.overrides { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
select,input { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:6px; }
.comment { background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:8px 10px; margin:6px 0; }

.cap-track { margin:12px 0; } .cap-node { display:flex; gap:10px; padding:3px 0; align-items:center; }
.cap-cov { font-family:ui-monospace,monospace; font-size:12px; padding:1px 6px; border-radius:4px; background:var(--panel2); border:1px solid var(--line); min-width:38px; text-align:center; }
.cap-cov.full{color:var(--ok);border-color:var(--ok);} .cap-cov.none{color:var(--bad);border-color:var(--bad);}
.owners { border-collapse:collapse; width:100%; margin-top:12px; } .owners th,.owners td{ text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); }
.owner-add { display:flex; gap:8px; margin:12px 0; }

/* =====================================================================
   ONBOARDING TRACK — light, welcoming home for a brand-new employee.
   Full-bleed light canvas under the (dark) reviewer topbar.
   ===================================================================== */
/* Two columns: a whole-program journey rail (left) + the selected level's build path (right). */
.onboarding {
  display:flex; align-items:stretch; height:calc(100vh - 44px); max-width:none; margin:0; padding:0;
  background:#eef1f6; color:#20242e; font:16px/1.65 -apple-system,Segoe UI,Roboto,sans-serif;
}

/* LEFT — the journey rail */
.onb-rail {
  flex:none; width:306px; overflow-y:auto; background:#fff; border-right:1px solid #e2e6ee;
  padding:18px 12px 60px;
}
.onb-railhead { padding:0 6px 12px; border-bottom:1px solid #eef1f6; margin-bottom:8px; }
.onb-railhead .onb-kicker { font-size:11px; }
.onb-jour { margin:9px 0 2px; }
.onb-jour-top { display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; margin-bottom:6px; }
.onb-jour-top b { color:#161a22; }
.onb-jour-top .muted { color:#8790a3; }
.onb-bar.sm { height:6px; }
.onb-continue {
  display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; cursor:pointer; color:#fff;
  background:#2f6fed; border:none; border-radius:10px; padding:10px 13px; margin-top:11px;
}
.onb-continue:hover { background:#245ad6; }
.oc-lab { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.92; }
.oc-lvl { font-size:14px; font-weight:600; }
.onb-alldone { margin-top:11px; font-size:13px; color:#1f9d55; font-weight:600; }

.onb-stage { margin:15px 0 2px; }
.onb-stagelab { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#96a0b0; padding:0 6px 2px; }
.onb-stageblurb { font-size:11.5px; line-height:1.45; color:#9aa2b1; padding:0 6px 7px; }
.onb-railitem {
  display:flex; align-items:flex-start; gap:9px; width:100%; text-align:left; cursor:pointer; color:inherit; font:inherit;
  background:none; border:1px solid transparent; border-radius:9px; padding:8px; margin-bottom:1px;
}
.onb-railitem:hover { background:#f5f8ff; }
.onb-railitem.active { background:#eef4ff; border-color:#cdddff; }
.ri-glyph {
  flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  background:#e6e9f0; color:#9aa2b1;
}
.ri-glyph.complete { background:#1f9d55; color:#fff; }
.ri-glyph.next { background:#2f6fed; color:#fff; }
.ri-glyph.started { background:#fff; color:#2f6fed; border:1.5px solid #2f6fed; }
.ri-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ri-title { font-size:13.5px; color:#3a4150; font-weight:550; line-height:1.3; }
.ri-n { font-weight:700; color:#8790a3; font-size:12px; }
.onb-railitem.active .ri-title, .onb-railitem.next .ri-title, .onb-railitem.complete .ri-title { color:#161a22; }
.ri-meta { display:flex; align-items:center; gap:6px; font-size:11.5px; color:#8790a3; font-variant-numeric:tabular-nums; }
.ri-tag { font-size:9.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:1px 6px; border-radius:20px; }
.ri-tag.next { background:#2f6fed; color:#fff; }
.ri-tag.lock { background:#fdf0e3; color:#b26a12; }
.ri-bar { height:4px; background:#eef1f6; border-radius:4px; overflow:hidden; }
.ri-bar i { display:block; height:100%; background:#1f9d55; }
.onb-railitem.next .ri-bar i, .onb-railitem.started .ri-bar i { background:#2f6fed; }

/* RIGHT — the selected level's build path */
.onb-main { flex:1; min-width:0; overflow-y:auto; }
.onb-wrap { max-width:880px; margin:0 auto; padding:32px 28px 80px; }

/* Level header (what this level is, what it builds on, your progress) */
.onb-levelhead { margin:0 0 6px; }
.onb-lh-kicker { color:#2f6fed; font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.onb-levelhead h1 { font-size:28px; line-height:1.2; margin:6px 0; color:#141821; font-weight:750; }
.onb-lh-n { color:#8790a3; font-weight:700; }
.onb-lh-vac { font-size:15.5px; color:#4a5160; margin:0 0 14px; max-width:720px; }
/* Goal + outcomes callout */
.onb-goal { background:#fff; border:1px solid #e6e9f0; border-left:3px solid #2f6fed; border-radius:12px; padding:14px 18px; margin:0 0 14px; box-shadow:0 1px 2px rgba(20,30,60,.04); }
.onb-goal-lab { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#2f6fed; }
.onb-goal-text { font-size:16px; line-height:1.5; color:#20242e; font-weight:600; margin:4px 0 0; }
.onb-goal .onb-goal-lab:nth-of-type(2) { margin-top:12px; color:#8790a3; }
.onb-outcomes { margin:7px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.onb-outcomes li { position:relative; padding-left:24px; font-size:14.5px; line-height:1.5; color:#3a4150; }
.onb-outcomes li::before { content:"✓"; position:absolute; left:0; top:0; color:#1f9d55; font-weight:700; font-size:13px; }

.onb-lh-next { background:#eef4ff; border:1px solid #cdddff; color:#245ad6; border-radius:10px; padding:9px 13px; font-size:14px; font-weight:600; margin:0 0 12px; }
.onb-lh-prereq { background:#fdf6ec; border:1px solid #f2ddba; color:#7a5410; border-radius:10px; padding:9px 13px; font-size:13.5px; line-height:1.5; margin:0 0 12px; }
.onb-lh-prereq b { color:#5c3f0c; }
.onb-prlink { color:#245ad6; font-weight:600; }
.onb-prlink:hover { text-decoration:underline; }

@media (max-width:860px) {
  .onboarding { flex-direction:column; height:auto; }
  .onb-rail { width:auto; border-right:none; border-bottom:1px solid #e2e6ee; padding-bottom:16px; }
  .onb-main { overflow:visible; }
}

/* Welcome hero */
.onb-welcome { margin-bottom:14px; }
.onb-kicker { color:#2f6fed; font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.onb-welcome h1 { font-size:34px; line-height:1.18; margin:10px 0 14px; color:#141821; font-weight:750; }
.onb-lede { font-size:18px; line-height:1.6; color:#3a4150; max-width:720px; margin:0 0 22px; }
.onb-lede b { color:#161a22; }

.onb-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 26px; }
.onb-card { background:#fff; border:1px solid #e6e9f0; border-radius:14px; padding:18px; box-shadow:0 1px 2px rgba(20,30,60,.04); }
.onb-card .onb-ic { font-size:26px; }
.onb-card h3 { font-size:16px; margin:8px 0 6px; color:#161a22; }
.onb-card p { font-size:14px; line-height:1.55; color:#4a5160; margin:0; }

.onb-progress { background:#fff; border:1px solid #e6e9f0; border-radius:12px; padding:14px 18px; }
.onb-progress-top { display:flex; justify-content:space-between; align-items:baseline; font-size:14px; margin-bottom:8px; }
.onb-progress-top b { color:#161a22; }
.onb-progress .muted { color:#8790a3; font-size:13px; }
.onb-bar { height:8px; background:#e6e9f0; border-radius:6px; overflow:hidden; }
.onb-bar i { display:block; height:100%; background:#2f6fed; }

/* Stages (phases) */
.onb-phase { background:#fff; border:1px solid #e6e9f0; border-radius:16px; padding:18px 18px 10px; margin:16px 0; box-shadow:0 1px 2px rgba(20,30,60,.04); }
.onb-phasehead { display:flex; align-items:center; gap:12px; padding:2px 4px 12px; border-bottom:1px solid #eef1f6; }
.onb-phasenum { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#2f6fed; color:#fff; font-size:15px; font-weight:650; flex:none; }
.onb-phasetitle { display:flex; flex-direction:column; }
.onb-phasetitle h2 { font-size:19px; color:#161a22; margin:0; font-weight:700; }
.onb-phasetitle .muted { color:#8790a3; font-size:12px; }

.onb-lessons { display:flex; flex-direction:column; padding:6px 0; }
.onb-lesson {
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:none; border:none; border-radius:10px; padding:12px 10px; cursor:pointer; color:inherit; font:inherit;
  border-bottom:1px solid #f2f4f8;
}
.onb-lessons .onb-lesson:last-child { border-bottom:none; }
.onb-lesson:hover { background:#f5f8ff; }
.onb-lesson.sel { background:#f0f5ff; outline:1px solid #cdddff; }
.onb-ord {
  flex:none; width:30px; height:30px; border-radius:50%; background:#eef1f6; color:#5a6172;
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.onb-lesson:hover .onb-ord { background:#2f6fed; color:#fff; }
.onb-lbody { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.onb-title { color:#1c212b; font-weight:550; font-size:15px; }
.onb-sub { font-size:12px; color:#8790a3; }
.onb-sub span { color:#6b7280; }
.onb-go { flex:none; color:#2f6fed; font-size:13px; font-weight:600; opacity:0; transition:opacity .12s; }
.onb-lesson:hover .onb-go { opacity:1; }

/* progress state on the ord bubble + row */
.onb-ord.done { background:#2f6fed; color:#fff; }
.onb-ord.signed { background:#1f9d55; color:#fff; }
.onb-lesson:hover .onb-ord.signed { background:#1a894a; }
.onb-lesson.signed { background:#f2fbf5; }
.onb-lesson.signed:hover { background:#eaf7ef; }

/* right-side status control */
.onb-status { flex:none; display:flex; align-items:center; gap:8px; font-size:12.5px; }
.onb-pill { display:inline-flex; align-items:center; gap:8px; padding:3px 10px; border-radius:20px; font-weight:600; }
.onb-pill.done { background:#eaf1ff; color:#2456c9; }
.onb-pill.signed { background:#e6f6ec; color:#1a7d43; }
.onb-act { color:#6b7280; font-weight:600; text-decoration:underline; cursor:pointer; }
.onb-act:hover { color:#2f6fed; }
.onb-mark {
  color:#2f6fed; font-weight:600; cursor:pointer; border:1px solid #cdddff; border-radius:20px;
  padding:4px 12px; background:#fff; opacity:0; transition:opacity .12s;
}
.onb-lesson:hover .onb-mark { opacity:1; }
.onb-mark:hover { background:#2f6fed; color:#fff; border-color:#2f6fed; }

/* reader progress banner */
.reader-progress {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:16px; padding:12px 14px; background:#fff; border:1px solid #e3e7f0; border-radius:12px;
}
.rp-badge { font-size:13px; font-weight:600; padding:4px 12px; border-radius:20px; }
.rp-badge.todo { background:#f1f3f8; color:#6b7280; }
.rp-badge.done { background:#eaf1ff; color:#2456c9; }
.rp-badge.signed { background:#e6f6ec; color:#1a7d43; }
.rp-actions { display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width:640px) {
  .onb-cards { grid-template-columns:1fr; }
  .onb-welcome h1 { font-size:27px; }
  .onb-lede { font-size:16px; }
  .onb-go { display:none; }
  .onb-mark { opacity:1; }
}

/* =====================================================================
   LESSON READER — a light, calm, non-technical reading experience.
   Full-page overlay; its own light palette (the reviewer chrome stays dark).
   ===================================================================== */
.reader {
  position:fixed; inset:0; z-index:30; overflow-y:auto;
  background:#eef1f6; color:#20242e;
  font:16px/1.7 -apple-system,Segoe UI,Roboto,sans-serif;
}
.reader-shell { min-height:100%; }
.reader-top {
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:14px;
  padding:12px 22px; background:rgba(255,255,255,.88); backdrop-filter:blur(8px);
  border-bottom:1px solid #dde1ea;
}
.reader-back { color:#2f6fed; cursor:pointer; font-size:14px; font-weight:500; text-decoration:none; }
.reader-crumb { color:#6b7280; font-size:13px; }
.reader-topactions { margin-left:auto; display:flex; align-items:center; gap:12px; }
.rbtn { background:#fff; border:1px solid #d3d8e3; color:#3a4150; border-radius:7px; padding:6px 12px; font-size:13px; cursor:pointer; }
.rbtn:hover { border-color:#2f6fed; }
.rbtn.on { background:#2f6fed; border-color:#2f6fed; color:#fff; }
.reader-x { color:#6b7280; cursor:pointer; font-size:18px; }

.reader-doc { max-width:760px; margin:0 auto; padding:8px 24px 96px; position:relative; }

/* ===== in-lesson feedback / annotations ===== */
.fb-hl { background:#eaf1ff; box-shadow:inset 0 -2px 0 #2f6fed; border-radius:2px; cursor:pointer; padding:0 1px; }
.fb-hl:hover { background:#dbe8ff; }
.fb-hl[data-resolved="1"] { background:#f0f8f2; box-shadow:inset 0 -2px 0 #9cccac; }
.fb-margin {
  position:absolute; right:-40px; width:26px; height:26px; border-radius:50%;
  background:#fff; border:1px solid #dde1ea; color:#2f6fed; font-size:12px; font-weight:600;
  cursor:pointer; box-shadow:0 1px 3px rgba(20,30,60,.08); display:flex; align-items:center; justify-content:center;
}
.fb-margin:hover { border-color:#2f6fed; background:#f5f8ff; }
.fb-margin.resolved { color:#1a7d43; }
.fb-plus {
  position:absolute; right:-38px; width:24px; height:24px; border-radius:6px; line-height:1;
  background:#fff; border:1px dashed #cdddff; color:#2f6fed; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.fb-plus:hover { border-style:solid; background:#f5f8ff; }
.fb-add {
  position:fixed; z-index:40; transform:translateX(-50%);
  background:#2f6fed; color:#fff; border:none; border-radius:8px; padding:7px 13px; font-size:13px; font-weight:600;
  cursor:pointer; box-shadow:0 6px 20px rgba(20,30,60,.22);
}
.fb-add:hover { background:#215fd6; }
.fb-form {
  position:fixed; z-index:41; transform:translateX(-50%); width:min(340px,92vw);
  background:#fff; border:1px solid #dde1ea; border-radius:12px; box-shadow:0 12px 40px rgba(20,30,60,.18); padding:12px;
}
.fb-form .fb-quote {
  font-size:12.5px; color:#4a5160; background:#f5f8ff; border-left:3px solid #2f6fed; border-radius:4px;
  padding:6px 9px; margin-bottom:8px; max-height:60px; overflow:auto;
}
.fb-form textarea, .fb-panel textarea {
  width:100%; box-sizing:border-box; border:1px solid #d3d8e3; border-radius:8px; padding:8px 10px;
  font:14px/1.5 inherit; resize:vertical; color:#20242e; background:#fff; min-height:64px;
}
.fb-form textarea::placeholder, .fb-panel textarea::placeholder { color:#9aa2b1; }
.fb-form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.fb-panel {
  position:fixed; right:20px; top:78px; z-index:35; width:min(360px,92vw); max-height:80vh; overflow:auto;
  background:#fff; border:1px solid #dde1ea; border-radius:12px; box-shadow:0 12px 40px rgba(20,30,60,.16);
  padding:14px; color:#20242e;
}
.fb-panel-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.fb-panel-head b { font-size:15px; }
.fb-showresolved { margin-left:auto; font-size:12px; color:#6b7280; display:flex; align-items:center; gap:4px; cursor:pointer; }
.fb-x { color:#6b7280; cursor:pointer; font-size:16px; }
.fb-anchor {
  font-size:13px; color:#4a5160; background:#f5f8ff; border-left:3px solid #2f6fed; border-radius:4px;
  padding:7px 10px; margin:0 0 10px; max-height:88px; overflow:auto;
}
.fb-note { border-top:1px solid #edf0f5; padding:9px 0; }
.fb-note:first-child { border-top:none; }
.fb-note.resolved { opacity:.62; }
.fb-note .who { font-size:12px; color:#6b7280; display:flex; align-items:center; gap:6px; }
.fb-note .who b { color:#3a4150; font-weight:600; }
.fb-body { font-size:14px; color:#20242e; margin:3px 0; white-space:pre-wrap; }
.fb-tag { background:#e6f6ec; color:#1a7d43; border-radius:20px; padding:1px 8px; font-size:11px; font-weight:600; }
.fb-note-actions { display:flex; gap:12px; }
.fb-note-actions a { color:#6b7280; font-size:12px; font-weight:600; cursor:pointer; text-decoration:underline; }
.fb-note-actions a:hover { color:#2f6fed; }
.fb-panel .btn.primary { margin-top:8px; }
.fb-unanchored {
  position:fixed; right:20px; bottom:20px; z-index:34; width:min(340px,92vw); max-height:44vh; overflow:auto;
  background:#fffaf3; border:1px solid #f0e0c8; border-radius:12px; box-shadow:0 10px 30px rgba(20,30,60,.14); padding:12px;
}
.fb-unanchored-head { font-size:12.5px; font-weight:600; color:#8a6d2f; margin-bottom:6px; }

.reader-hero { padding:34px 0 8px; border-bottom:1px solid #e2e6ee; margin-bottom:8px; }
.reader-kicker { color:#2f6fed; font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.reader-hero h1 { font-size:32px; line-height:1.2; margin:8px 0 14px; color:#161a22; font-weight:700; }
.reader-metarow { display:flex; gap:8px; flex-wrap:wrap; }
.rpill { font-size:12px; color:#4a5160; background:#fff; border:1px solid #dde1ea; border-radius:20px; padding:3px 11px; }

.reader-jump { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 8px; }
.reader-jump a {
  display:inline-flex; align-items:center; gap:5px; font-size:13px; color:#3a4150;
  background:#fff; border:1px solid #e2e6ee; border-radius:8px; padding:6px 11px; text-decoration:none;
}
.reader-jump a:hover { border-color:#2f6fed; color:#2f6fed; }

.reader-sec { scroll-margin-top:70px; margin:30px 0; background:#fff; border:1px solid #e6e9f0; border-radius:14px; padding:24px 28px; box-shadow:0 1px 2px rgba(20,30,60,.04); }
.reader-sec h2 { display:flex; align-items:center; gap:10px; font-size:21px; color:#161a22; margin:0 0 6px; font-weight:700; border:none; padding:0; }
.reader-sec .sec-ic { font-size:22px; }

/* Accent stripe per section so Debug / Checkpoint read distinctly */
.reader-sec[data-k="debug"]      { background:#fffaf3; border-color:#f0e2c8; }
.reader-sec[data-k="checkpoint"] { background:#f2fbf5; border-color:#cbe9d5; }
.reader-sec[data-k="study"]      { background:#f6f8fc; }

/* Body typography */
.reader-body { color:#2b303b; }
.reader-body p { margin:12px 0; }
.reader-body h3 { font-size:16px; margin:20px 0 6px; color:#161a22; }
.reader-body ul, .reader-body ol { padding-left:22px; margin:12px 0; }
.reader-body li { margin:7px 0; }
.reader-body ol > li { padding-left:4px; }
.reader-body strong { color:#161a22; font-weight:650; }
.reader-body em { color:#4a5160; }
.reader-body a { color:#2f6fed; text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
.reader-body code { background:#eceff5; color:#3a4150; border-radius:5px; padding:1px 6px; font-family:ui-monospace,Menlo,monospace; font-size:.88em; }
.reader-body blockquote { margin:14px 0; padding:8px 16px; border-left:3px solid #cdd4e2; color:#4a5160; background:#f6f8fc; border-radius:0 8px 8px 0; }
.reader-body pre { background:#1e222b; color:#e6e9ef; padding:14px; border-radius:8px; overflow:auto; }
.reader-body pre code { background:none; color:inherit; padding:0; }

/* Screenshot figures — both real images and "to be added" placeholders */
.reader-body figure, .reader-body img { display:block; }
.reader-body img { max-width:100%; border:1px solid #dde1ea; border-radius:10px; margin:16px 0; box-shadow:0 2px 8px rgba(20,30,60,.08); }
.reader-body figure { margin:18px 0; }
.reader-body figcaption { font-size:13px; color:#6b7280; margin-top:8px; text-align:center; }
.shot.ph {
  border:2px dashed #c3cbdb; border-radius:12px; background:
  repeating-linear-gradient(45deg,#f4f6fb,#f4f6fb 12px,#eef1f7 12px,#eef1f7 24px);
  padding:26px 20px; text-align:center;
}
.shot.ph .shot-cam { font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#8790a3; }
.shot.ph .shot-cam span { font-size:22px; display:block; margin-bottom:4px; }
.shot.ph figcaption { color:#5a6172; margin-top:8px; font-size:14px; }

.reader-foot { margin:36px 0 0; text-align:center; }

/* Prove-it submission panel — where a learner attaches their checkpoint artifact for review */
.reader-submit { scroll-margin-top:70px; margin:30px 0; background:#f2fbf5; border:1px solid #cbe9d5; border-radius:14px; padding:22px 26px; }
.reader-submit .rs-head { display:flex; gap:12px; align-items:flex-start; }
.reader-submit .rs-ic { font-size:22px; line-height:1.3; }
.reader-submit h2 { font-size:20px; color:#161a22; margin:0 0 4px; font-weight:700; border:none; padding:0; }
.reader-submit .rs-lede { color:#41616f; font-size:14px; margin:0; }
.reader-submit .rs-card { margin-top:16px; background:#fff; border:1px solid #d6e6dd; border-radius:11px; padding:16px 18px; }
.reader-submit .rs-card.signed { border-color:#bfe3cc; background:#f4fbf6; }
.reader-submit .rs-status { font-weight:650; font-size:14px; color:#1a7d43; margin-bottom:10px; }
.reader-submit .rs-input { width:100%; box-sizing:border-box; min-height:96px; resize:vertical; background:#fff; color:#20242e; border:1px solid #cfd6e4; border-radius:9px; padding:11px 13px; font:inherit; font-size:14px; }
.reader-submit .rs-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,237,.12); }
.reader-submit .rs-artifact, .signoffs .rs-artifact { margin:0 0 4px; padding:10px 14px; border-left:3px solid #58b47e; background:#f6faf7; border-radius:0 8px 8px 0; color:#2b3540; white-space:pre-wrap; word-break:break-word; }
.reader-submit .rs-empty { font-size:13px; margin:0; }
.reader-submit .rs-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* Prove-it file attachments: drag-and-drop dropzone + thumbnail grid */
.reader-submit .rs-drop { margin-top:10px; display:flex; flex-direction:column; gap:3px; align-items:center; text-align:center;
  border:1.5px dashed #cfd6e4; border-radius:9px; padding:14px 16px; background:#f8fafd; color:#4a5566; transition:border-color .12s, background .12s; }
.reader-submit .rs-drop.over { border-color:var(--accent); background:#eef4ff; }
.reader-submit .rs-file-input { display:none; }
.reader-submit .linklike { background:none; border:none; padding:0; font:inherit; color:var(--accent); cursor:pointer; text-decoration:underline; }
.reader-submit .rs-uploading { font-size:12px; color:var(--accent); font-weight:600; }
.reader-submit .rs-attach-err { margin:6px 0 0; font-size:12.5px; color:var(--bad); }
.reader-submit .rs-files, .signoffs .rs-files { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.reader-submit .rs-file, .signoffs .rs-file { position:relative; width:104px; display:flex; flex-direction:column; gap:4px; align-items:center;
  padding:8px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.reader-submit .rs-file img, .signoffs .rs-file img { width:86px; height:64px; object-fit:cover; border-radius:5px; background:#f0f3f8; display:block; }
.reader-submit .rs-file-doc, .signoffs .rs-file-doc { width:86px; height:64px; display:flex; align-items:center; justify-content:center; font-size:30px; background:#f0f3f8; border-radius:5px; }
.reader-submit .rs-file-name, .signoffs .rs-file-name { font-size:11px; color:var(--muted); max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-submit .rs-file-x { position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--bad); font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.reader-submit .rs-file-x:hover { background:var(--bad); color:#fff; border-color:var(--bad); }

/* Nav count badge (Sign-offs) */
.nav-badge { display:inline-block; min-width:16px; padding:0 5px; margin-left:5px; border-radius:9px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; line-height:16px; text-align:center; vertical-align:top; }

/* Staff sign-off queue */
.signoffs .so-empty { margin:24px 0; font-size:15px; color:var(--muted); }
.signoffs .so-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:16px 0 4px; }
.signoffs .so-filters input, .signoffs .so-filters select { padding:7px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; color:var(--text); }
.signoffs .so-search { min-width:230px; }
.signoffs .so-bulk { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0; padding:8px 12px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; }
.signoffs .so-selall { display:flex; gap:7px; align-items:center; cursor:pointer; font-size:13px; color:var(--muted); }
.signoffs .so-spacer { flex:1; }
.signoffs .so-list { display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.signoffs .so-card { border:1px solid var(--line); border-radius:11px; background:var(--panel); padding:16px 18px; }
.signoffs .so-card.sel { border-color:var(--accent); box-shadow:0 0 0 2px rgba(47,111,237,.12); }
.signoffs .so-topleft { display:flex; align-items:center; gap:11px; min-width:0; }
.signoffs .so-check { width:16px; height:16px; cursor:pointer; flex-shrink:0; }
.signoffs .so-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.signoffs .so-who { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.signoffs .so-who .nm { font-weight:650; }
.signoffs .so-lesson { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }
.signoffs .so-title { font-weight:600; }
.signoffs .so-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.signoffs .btn.ok { background:var(--ok); border-color:var(--ok); color:#fff; }
.signoffs .btn.ok:hover { filter:brightness(1.05); }

/* Reviewer tools panel — floats bottom-right, out of the reading flow */
.reader-review {
  position:fixed; right:20px; bottom:20px; z-index:3; width:min(380px,92vw); max-height:70vh; overflow-y:auto;
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:0 12px 40px rgba(20,30,60,.16);
}
.reader-review .rr-head { display:flex; justify-content:space-between; margin-bottom:10px; }
.reader-review .rr-head a { font-size:13px; }
.reader-review .rr-decide { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.reader-review textarea { min-height:60px; }
.reader-review .rr-comments { margin-top:10px; }

@media (max-width:520px) {
  .reader-doc { padding:8px 14px 96px; }
  .reader-hero h1 { font-size:26px; }
  .reader-sec { padding:18px 16px; }
}

/* =====================================================================
   Glossary — in-lesson term links + tooltip + the Glossary tab
   ===================================================================== */
/* In-lesson term: a dotted underline in the (light) reader — dark enough to spot on any screen */
.gloss { border-bottom:1.5px dotted #4c7fd6; cursor:help; }
.gloss:hover { background:#eef4ff; border-bottom-color:#2f6fed; }

/* In-lesson tooltip (light, matches the reader; floats over the lesson) */
.gloss-tip {
  position:fixed; z-index:60; width:310px; max-width:calc(100vw - 24px);
  background:#fff; color:#20242e; border:1px solid #e2e6ee; border-radius:11px;
  padding:12px 14px; box-shadow:0 10px 34px rgba(20,30,60,.16); font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;
}
.gloss-tip .gt-head { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.gloss-tip .gt-term { font-weight:700; font-size:15px; color:#141821; }
.gloss-tip .gt-abbr { font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:1px 6px; border-radius:5px; background:#eef3fd; color:#2f6fed; border:1px solid #dce6fb; }
.gloss-tip .gt-short { margin:6px 0 0; color:#5a6172; }
.gloss-tip .gt-conf { margin:7px 0 0; font-size:12.5px; line-height:1.45; color:#7a5410; }
.gloss-tip .gt-conf b { color:#5c3f0c; }
.gloss-tip .gt-conf span { color:#7a5410; }
.gloss-tip .gt-full { display:inline-block; margin-top:9px; color:#245ad6; font-size:12.5px; font-weight:600; cursor:pointer; }
.gloss-tip .gt-full:hover { text-decoration:underline; }

/* In-lesson glossary full-entry side panel (opens over the lesson; keeps your reading place) */
.gloss-panel {
  position:fixed; right:20px; top:78px; z-index:45; width:min(380px,92vw); max-height:80vh; overflow:auto;
  background:#fff; border:1px solid #e2e6ee; border-radius:14px; box-shadow:0 18px 50px rgba(20,30,60,.20);
  padding:18px 20px; color:#20242e;
}
.gloss-panel .gp-head { display:flex; align-items:flex-start; gap:10px; }
.gloss-panel .gp-titlewrap { flex:1; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.gloss-panel .gp-term { font-size:20px; font-weight:750; color:#141821; }
.gloss-panel .gp-abbr { font-size:11px; font-weight:700; letter-spacing:.03em; padding:1px 7px; border-radius:5px; background:#eef3fd; color:#2f6fed; border:1px solid #dce6fb; }
.gloss-panel .gp-x { color:#8790a3; cursor:pointer; font-size:18px; line-height:1; flex:none; }
.gloss-panel .gp-x:hover { color:#2f6fed; }
.gloss-panel .gp-short { margin:10px 0 0; color:#20242e; font-size:15.5px; line-height:1.55; }
.gloss-panel .gp-long { margin:9px 0 0; color:#5a6172; font-size:14px; line-height:1.6; }
.gloss-panel .gp-also { margin:11px 0 0; font-size:13.5px; color:#5a6172; }
.gloss-panel .gp-also b { color:#20242e; }
.gloss-panel .gp-conf { margin:14px 0 0; padding:11px 13px; background:#fdf6ec; border:1px solid #f2ddba; border-radius:10px; }
.gloss-panel .gp-conf-lab { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#b26a12; margin-bottom:7px; }
.gloss-panel .gp-conf-row { display:flex; gap:10px; align-items:baseline; padding:4px 0; font-size:13.5px; line-height:1.5; flex-wrap:wrap; }
.gloss-panel .gp-conf-term { flex:none; font-weight:650; color:#245ad6; cursor:pointer; min-width:130px; }
.gloss-panel .gp-conf-term:hover { text-decoration:underline; }
.gloss-panel .gp-conf-note { color:#7a5410; flex:1; min-width:150px; }
.gloss-panel .gp-full { display:inline-block; margin-top:14px; color:#245ad6; font-size:13px; font-weight:600; cursor:pointer; }
.gloss-panel .gp-full:hover { text-decoration:underline; }

/* Glossary — rail "Reference" button + the onboarding glossary pane (light UI, matches onboarding) */
.onb-railref {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer; color:inherit; font:inherit;
  background:#f5f8ff; border:1px solid #dce6fb; border-radius:9px; padding:9px; margin:2px 0 6px;
}
.onb-railref:hover { border-color:#b9d0f7; }
.onb-railref.active { background:#eef4ff; border-color:#9cc0ff; }
.onb-railref .ri-glyph.ref { background:#e7eefc; color:#2f6fed; font-size:12px; }
.onb-railref .ri-title { color:#2f6fed; font-weight:650; }
.onb-railref .ri-meta { color:#8790a3; }

.onb-glosspane .onb-gloss-h1 { font-size:28px; margin:6px 0; color:#141821; font-weight:750; }
.onb-gloss-search {
  width:100%; max-width:440px; padding:10px 13px; font-size:15px; margin:8px 0;
  background:#fff; border:1px solid #dfe4ec; border-radius:10px; color:#20242e;
}
.onb-gloss-cat { margin:22px 0 4px; }
.onb-gloss-cat h2 { font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:#8790a3; border-bottom:1px solid #e2e6ee; padding-bottom:6px; margin:0 0 10px; font-weight:700; }
.onb-gloss-entry { background:#fff; border:1px solid #e6e9f0; border-radius:12px; padding:14px 17px; margin:10px 0; box-shadow:0 1px 2px rgba(20,30,60,.04); scroll-margin-top:20px; }
.onb-gloss-entry.flash { border-color:#2f6fed; box-shadow:0 0 0 2px rgba(47,111,237,.28); }
.oge-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.oge-term { font-size:17px; font-weight:700; color:#141821; }
.oge-abbr { font-size:11px; font-weight:700; letter-spacing:.03em; padding:1px 7px; border-radius:5px; background:#eef3fd; color:#2f6fed; border:1px solid #dce6fb; }
.oge-short { margin:6px 0 0; color:#20242e; font-size:15px; line-height:1.5; }
.oge-long { margin:7px 0 0; color:#5a6172; font-size:14px; line-height:1.6; }
.oge-also { margin:9px 0 0; font-size:13.5px; color:#5a6172; }
.oge-also b { color:#20242e; }
.oge-conf { margin:11px 0 0; padding:10px 12px; background:#fdf6ec; border:1px solid #f2ddba; border-radius:9px; }
.oge-conf-lab { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#b26a12; margin-bottom:6px; }
.oge-conf-row { display:flex; gap:10px; align-items:baseline; padding:4px 0; font-size:13.5px; line-height:1.5; }
.oge-conf-term { flex:none; font-weight:650; color:#245ad6; cursor:pointer; min-width:135px; }
.oge-conf-term:hover { text-decoration:underline; }
.oge-conf-note { color:#7a5410; }

/* ---- Onboarding progress dashboard (leaderboard + per-user report) ---- */
.progress { max-width:960px; margin:0 auto; padding:8px 4px 40px; }
.progress h2 { margin:6px 0 2px; }
.progress .sm { font-size:12px; }
.pill { display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:10px; background:var(--panel2); color:var(--muted); }
.pill.ok { background:rgba(63,185,80,.15); color:var(--ok); }
.pill.warn { background:rgba(210,153,34,.15); color:var(--warn); }
.avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--panel2); }
.avatar.big { width:52px; height:52px; }
/* Leaderboard */
table.lb { width:100%; border-collapse:collapse; margin-top:12px; }
table.lb th, table.lb td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
table.lb th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
table.lb td.num, table.lb th.num { text-align:right; font-variant-numeric:tabular-nums; }
table.lb .rank { color:var(--muted); width:28px; }
table.lb .who { display:flex; align-items:center; gap:10px; }
table.lb .who .nm { font-weight:600; }
table.lb .pcell { width:38%; min-width:160px; }
tr.lb-row { cursor:pointer; }
tr.lb-row:hover { background:var(--panel); }
/* Per-user report */
.report .report-head { display:flex; align-items:center; gap:16px; margin:6px 0 18px; }
.report .report-head h2 { margin:0; }
.report .report-head p { margin:2px 0; }
table.levels { width:100%; border-collapse:collapse; }
table.levels td { padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.levels .lvl-name { width:44%; }
table.levels .pcell { width:40%; }
table.levels td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.report-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:22px; }
@media (max-width:720px) { .report-cols { grid-template-columns:1fr; } }
.fb-list, .act-list, .note-list { list-style:none; padding:0; margin:8px 0; }
.fb-list li { padding:8px 0; border-bottom:1px solid var(--line); }
.fb-quote { color:var(--muted); font-style:italic; margin:3px 0; font-size:13px; }
.fb-comment { font-size:14px; }
.act-list li { padding:4px 0; font-size:13.5px; }
.coaching { margin-top:28px; border-top:1px solid var(--line); padding-top:16px; }
.note-add { display:flex; gap:8px; align-items:flex-start; margin:8px 0 12px; }
.note-add textarea { flex:1; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:8px; font:inherit; resize:vertical; }
.note-list li { padding:8px 0; border-bottom:1px solid var(--line); }
.note-body { white-space:pre-wrap; }
.note-meta { margin-top:3px; display:flex; gap:8px; align-items:center; }