/* ---------- Dashboard ---------- */
.dash-head{margin-bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dash-actions{display:flex;align-items:stretch;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.local-preview-curriculum-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border-color:rgba(143,163,208,.52);background:rgba(143,163,208,.08)}
.local-preview-curriculum-btn:hover{border-color:#8FA3D0;background:rgba(143,163,208,.14)}
.local-preview-curriculum-kicker{font-size:11px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:#C9D4F3}
.local-preview-curriculum-copy{font-size:11px;color:var(--muted)}
.greeting{font-size:29px;font-weight:800;letter-spacing:-.5px}
.greeting .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dash-sub{color:var(--muted);font-size:14px;margin-top:4px}
.course-select{
  padding:10px 14px;border-radius:11px;font-family:var(--font);font-size:13.5px;font-weight:700;color:var(--text);
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);cursor:pointer;
}
.course-select:focus{outline:none;border-color:var(--crimson-light);box-shadow:0 0 0 3px rgba(214,40,40,.22)}
.course-select option{background:#1E2030;color:var(--text)}
.brand-banner{display:flex;align-items:center;gap:16px;padding:18px 22px;margin-bottom:22px;position:relative;overflow:hidden}
.brand-banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.banner-mark{width:44px;height:44px;border-radius:13px;background:rgba(214,40,40,.12);border:1px solid rgba(214,40,40,.4);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.banner-brand{font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:#F08A8E}
.banner-tagline{font-family:var(--eq-font);font-style:italic;font-size:19px;color:var(--text);letter-spacing:.3px}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:16px}
.stat-card{padding:16px 20px;display:flex;align-items:center;gap:15px}
.stat-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.stat-icon.i-xp{background:rgba(233,180,76,.13);border:1px solid rgba(233,180,76,.38)}
.stat-icon.i-streak{background:rgba(214,40,40,.12);border:1px solid rgba(214,40,40,.4)}
.stat-icon.i-mastered{background:rgba(143,163,208,.1);border:1px solid rgba(143,163,208,.35)}
.stat-value{font-size:21px;font-weight:800;line-height:1.15}
.stat-label{font-size:11.5px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}
.stat-hint{font-size:10.5px;color:var(--faint);margin-top:1px}

/* ---------- Journey to Pluto (gamified long-term progress map) ---------- */
.pluto-card{padding:24px 26px 18px;margin-bottom:22px;position:relative;overflow:hidden}
.pluto-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.pluto-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.pluto-title{font-size:16px;font-weight:800;letter-spacing:.2px}
.pluto-pct{font-size:13px;font-weight:900;color:#F7E1B5;background:rgba(233,180,76,.12);border:1px solid rgba(233,180,76,.45);padding:3px 12px;border-radius:999px}
.pluto-sub{font-size:12.5px;color:var(--muted);margin-bottom:10px}
/* The story of the last stop reached — what makes a journey worth a
   second look rather than just a progress bar with a rocket on it. */
.journey-note{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 12px;
  padding:10px 14px;border-left:3px solid rgba(233,180,76,.5);border-radius:0 10px 10px 0;
  background:rgba(233,180,76,.06);max-width:70ch}
.journey-note b{color:#F3DCAF}
/* When the stop has an article, the whole note is the link out. The history
   is genuinely interesting, and a student who follows it has learned
   something either way. */
a.journey-note-link{display:block;text-decoration:none;transition:background .18s ease,border-color .18s ease}
a.journey-note-link:hover{background:rgba(233,180,76,.11);border-left-color:var(--gold)}
a.journey-note-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.journey-note-more{display:block;margin-top:6px;color:#E9B44C;font-size:12px;font-weight:800;letter-spacing:.3px}
.pluto-svg-wrap{width:100%;overflow-x:auto;scrollbar-width:thin}
.pluto-svg-wrap svg{display:block;width:100%;min-width:640px;height:auto}
.pluto-stats{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}
.pluto-stats b{color:var(--text);font-weight:800}

/* ---------- Spaced-review ("peppering") strip ---------- */
.pepper-card{padding:22px 24px;margin-bottom:22px;position:relative;overflow:hidden;border-color:rgba(233,180,76,.4)}
.pepper-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-gold)}
.pepper-title{font-size:15px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pepper-count{font-size:11px;font-weight:900;color:#241A05;background:var(--grad-gold);padding:3px 11px;border-radius:999px}
.pepper-sub{font-size:12.5px;color:var(--muted);margin:4px 0 14px}
.pepper-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 15px;
  border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.02);margin-bottom:9px;
}
.pepper-row:last-child{margin-bottom:0}
.pepper-row .p-main{flex:1;min-width:170px}
.pepper-row .p-title{font-weight:700;font-size:14px}
.pepper-row .p-meta{font-size:11.5px;color:var(--muted);margin-top:1px}
.streak-dots{display:flex;gap:5px;align-items:center}
.streak-dots .sd{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line-strong)}
.streak-dots .sd.on{background:var(--grad-gold);border-color:transparent;box-shadow:0 0 8px rgba(233,180,76,.6)}
.pepper-next{font-size:12px;color:var(--faint);margin-top:10px}

/* ---------- Flashcard retrieval deck (3D flip) ---------- */
.flash-card-outer{padding:24px 26px;margin-bottom:26px;position:relative;overflow:hidden}
.flash-card-outer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#8FA3D0,#535C91)}
.flash-title{font-size:16px;font-weight:800}
.flash-sub{font-size:12.5px;color:var(--muted);margin:3px 0 16px}
.flash-scene{perspective:1400px;max-width:560px;margin:0 auto}
.flash3d{
  position:relative;width:100%;min-height:190px;cursor:pointer;border:none;background:none;padding:0;
  transform-style:preserve-3d;transition:transform .65s cubic-bezier(.32,.72,.24,1);display:block;
}
.flash3d.flipped{transform:rotateY(180deg)}
.flash3d:focus-visible{outline:2px solid var(--crimson-light);outline-offset:4px;border-radius:18px}
.flash-face{
  position:absolute;inset:0;border-radius:18px;padding:24px 26px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.flash-front{background:linear-gradient(160deg,#232640,#1A1C2E);border:1px solid var(--line-strong)}
.flash-back{background:linear-gradient(160deg,#2A1518,#1E1013);border:1px solid rgba(229,72,77,.5);transform:rotateY(180deg)}
.flash-kicker{font-size:10px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:var(--steel)}
.flash-back .flash-kicker{color:#F08A8E}
.flash-term{font-size:19px;font-weight:800;line-height:1.35;color:var(--text)}
.flash-eq{font-family:var(--eq-font);font-style:italic;font-size:24px;color:#FFB4B9;letter-spacing:1px}
.flash-note{font-size:13px;color:var(--muted);line-height:1.55;max-width:420px}
.flash-tap{font-size:10.5px;color:var(--faint);letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
.flash-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.flash-counter{font-size:12px;font-weight:800;color:var(--muted);min-width:64px;text-align:center;font-variant-numeric:tabular-nums}

/* ---------- Guided-course route card (V2-first pilot courses) ----------
   Replaces the V1 gamification strip with a quiet map of the study panels
   below it. Presentational only: it holds no progress and locks nothing. */
.course-route-card{padding:24px 26px;margin-bottom:22px;display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap;position:relative;overflow:hidden}
.course-route-card::before{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--grad)}
/* The one card on the dashboard that says what to do next. It sat at the same
   visual weight as the panels it was pointing at, so it read as one more
   option rather than the way in. Lifted deliberately, and only this card
   carries the treatment — if a second card ever gets it, neither leads. */
.course-route-card.is-primary-route{
  border-color:rgba(233,180,76,.42);
  background:linear-gradient(180deg,rgba(233,180,76,.07),rgba(233,180,76,.02));
  box-shadow:0 0 0 1px rgba(233,180,76,.12),0 8px 26px rgba(0,0,0,.22)}
.course-route-card.is-primary-route::before{width:4px;background:var(--gold)}
/* Two classes on purpose. curriculum.css loads AFTER this file and sets
   .cur-empty-kicker{color:var(--steel)} — at equal specificity the later file
   wins, so a single-class rule here lost and the badge rendered grey-on-gold,
   which is close to unreadable. Chaining both classes outranks it regardless
   of load order. dashboard-copy.test.html measures the contrast so this cannot
   quietly come back. */
.cur-empty-kicker.route-kicker-strong{
  display:inline-block;color:#0B0C12;background:var(--gold);
  font-weight:900;font-size:11px;
  padding:4px 10px;border-radius:999px;letter-spacing:1.4px;margin-bottom:9px}
@media (prefers-reduced-motion:no-preference){
  .course-route-card.is-primary-route{transition:box-shadow .2s ease}}
.route-intro{flex:1 1 300px;min-width:0}
.route-title{font-size:20px;font-weight:800;letter-spacing:-.25px;line-height:1.25}
.route-copy{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:7px;max-width:46ch}
.route-steps{flex:1 1 280px;list-style:none;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.route-step{list-style:none}
/* The whole step is the target. It described panels further down the page
   without being a way to reach them, which is a map you cannot follow. */
.route-step-btn{
  display:flex;align-items:flex-start;gap:11px;width:100%;padding:9px 12px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);
  font-family:var(--font);text-align:left;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.route-step-btn:hover{border-color:rgba(229,72,77,.45);background:rgba(214,40,40,.06);transform:translateX(2px)}
.route-step-btn:focus-visible{outline:2px solid var(--crimson-light);outline-offset:2px}
.route-step-btn:hover .route-step-num{border-color:rgba(229,72,77,.55);color:#F08A8E}
.route-step-num{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#C3CDEA;background:rgba(255,255,255,.05);border:1px solid var(--line-strong);
}
.route-step-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.route-step-text strong{font-size:13px;font-weight:800;color:var(--text);letter-spacing:.1px}
.route-step-text span{font-size:12px;color:var(--faint);line-height:1.45}

/* Course-lessons list: a browsable index, so it gets a calmer head than the
   V1 chapter wall and a little more air before the first row. */
.cur-lessons-card .chapter-top{margin-bottom:16px}
.cur-lessons-card .chapter-title{font-size:19px}
.cur-lessons-card .chapter-desc{margin-top:5px}
.cur-lessons-card .task-row{align-items:center}
.cur-lessons-card .task-name{font-size:15px;line-height:1.4}

/* Collapsible topic sections. Sixty-five lessons in one list is a wall; the
   syllabus already groups them, so the page uses that grouping. Native
   <details>, so it works with no JavaScript and keyboards get it for free. */
.cur-topic{border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.015);margin-bottom:11px;overflow:hidden}
.cur-topic[open]{background:rgba(255,255,255,.028);border-color:var(--line-strong)}
.cur-topic-summary{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:15px 18px;cursor:pointer;list-style:none;
  transition:background .2s;
}
.cur-topic-summary::-webkit-details-marker{display:none}
.cur-topic-summary:hover{background:rgba(214,40,40,.05)}
.cur-topic-summary:focus-visible{outline:2px solid rgba(229,72,77,.7);outline-offset:-2px}
/* The chevron is drawn here rather than with the default marker so it can sit
   at the start and rotate on open. */
.cur-topic-name{flex:1;min-width:0;font-weight:800;font-size:15.5px;letter-spacing:-.1px;display:flex;align-items:center;gap:11px}
.cur-topic-name::before{
  content:"";flex:0 0 auto;width:7px;height:7px;
  border-right:2px solid #F08A8E;border-bottom:2px solid #F08A8E;
  transform:rotate(-45deg);transition:transform .2s;
}
.cur-topic[open] .cur-topic-name::before{transform:rotate(45deg)}
.cur-topic-count{flex:0 0 auto;font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--faint);white-space:nowrap}
.cur-topic-body{padding:2px 18px 16px}
.cur-topic-desc{color:var(--muted);font-size:12.5px;line-height:1.5;margin:0 0 13px;max-width:620px}
.cur-topic-body .task-row:last-child{margin-bottom:0}

/* ---------- Chapter cards & task rows ---------- */
.chapter-card{padding:26px 28px;margin-bottom:26px;position:relative;overflow:hidden}
.chapter-card::before{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--grad)}
.chapter-top{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.chapter-num{
  font-size:13px;font-weight:800;letter-spacing:1.4px;color:#F3B6B9;
  background:rgba(214,40,40,.13);border:1px solid rgba(214,40,40,.4);
  padding:6px 13px;border-radius:10px;white-space:nowrap;
}
.chapter-info{flex:1;min-width:220px}
.chapter-title{font-size:22px;font-weight:800;letter-spacing:-.3px}
.chapter-desc{color:var(--muted);font-size:13.5px;margin-top:3px;max-width:560px}
.chapter-progress{display:flex;align-items:center;gap:12px;margin:16px 0 20px}
.progress-track{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.progress-fill{height:100%;border-radius:99px;background:var(--grad);transition:width .8s cubic-bezier(.16,1,.3,1)}
.progress-text{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap}
.task-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;border:1px solid var(--line);border-radius:15px;
  background:rgba(255,255,255,.02);margin-bottom:11px;transition:border-color .2s,background .2s;
}
.task-row:hover{border-color:rgba(229,72,77,.5);background:rgba(214,40,40,.05)}
.task-row.is-locked{opacity:.55}
.task-row.is-locked:hover{border-color:var(--line);background:rgba(255,255,255,.02)}
.task-num{
  width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;background:rgba(255,255,255,.04);border:1px solid var(--line-strong);color:#C3CDEA;
}
.task-num.done{background:rgba(214,40,40,.15);border-color:rgba(229,72,77,.55);color:#F08A8E}
.task-row-main{flex:1;min-width:190px}
.task-name{font-weight:700;font-size:15.5px}
.task-skill{font-size:12.5px;color:var(--muted);margin-top:1px}
.task-row-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.attempts-tag{font-size:11.5px;color:var(--faint)}
.section-label{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);margin:30px 0 13px}
.stage-tag{font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#9FB0DC;background:rgba(143,163,208,.09);border:1px solid rgba(143,163,208,.3);padding:3px 9px;border-radius:999px;white-space:nowrap}
.hidden-chapter-tag{font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#F3C878;background:rgba(233,180,76,.1);border:1px solid rgba(233,180,76,.45);padding:4px 11px;border-radius:999px}
.empty-note{font-size:13px;color:var(--faint);padding:14px 4px;font-style:italic}

/* The syllabus context line under the readiness bar. Counted in strands, never
   as a percentage of taught hours — most of a syllabus happens in school. */
.readiness-syllabus{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--faint)}
.readiness-syllabus b{color:var(--muted);font-weight:800}