/* Curriculum track + skill-tree pages (2026-05-30 restructure).
   Mobile-first, dark-capable. Mastery-tier colour system shared by both pages. */

/* Retokenized to the Emerald/Teal palette (2026-06-03 reskin). Variable NAMES
   are kept as --cm-* so /math, /track/*, /price-the-market need no template
   edits; VALUES now match static/design-system.css (--accent/--teal/...). */
:root{
  --cm-bg:#081210; --cm-bg2:#0b1815; --cm-surface:#0f1f1a; --cm-surface2:#15291f;
  --cm-border:rgba(255,255,255,0.09); --cm-border-bright:rgba(255,255,255,0.16);
  --cm-text:#eef2ff; --cm-dim:#9aa6c4; --cm-faint:#6b7799;
  --cm-accent:#10b981; --cm-accent-bright:#34d399; --cm-accent-dim:rgba(16,185,129,0.16);
  --cm-cyan:#2dd4bf; --cm-cyan-dim:rgba(45,212,191,0.14);
  --cm-shadow-soft:0 8px 22px rgba(0,0,0,0.25);
  --t-untried:#64748b; --t-untried-bg:rgba(100,116,139,0.16);
  --t-prog:#f59e0b;   --t-prog-bg:rgba(245,158,11,0.16);
  --t-prof:#3b82f6;   --t-prof-bg:rgba(59,130,246,0.16);
  --t-master:#fbbf24; --t-master-bg:rgba(251,191,36,0.16);
  --cm-good:#34d399; --cm-bad:#fb7185;
}
@media (prefers-color-scheme: light){
  :root{
    --cm-bg:#eaf3ee; --cm-bg2:#e0ece6; --cm-surface:#ffffff; --cm-surface2:#f1f8f4;
    --cm-border:rgba(15,23,42,0.10); --cm-border-bright:rgba(15,23,42,0.18);
    --cm-text:#0f172a; --cm-dim:#475069; --cm-faint:#7a85a3;
    --cm-accent:#059669; --cm-accent-bright:#10b981;
    --cm-accent-dim:rgba(16,185,129,0.13); --cm-cyan:#0d9488; --cm-cyan-dim:rgba(13,148,136,0.12);
    --cm-shadow-soft:0 8px 22px rgba(15,23,42,0.10);
    --t-untried-bg:rgba(100,116,139,0.12); --t-prog-bg:rgba(245,158,11,0.14);
    --t-prof-bg:rgba(59,130,246,0.12); --t-master:#ca8a04; --t-master-bg:rgba(202,138,4,0.14);
  }
}

.cm-page{ *,*::before,*::after{box-sizing:border-box;} }
.cm-wrap{ max-width:620px; margin:0 auto; padding:18px 16px 64px; min-width:0; }

/* skill rows: 2-up menu everywhere (owner: less scrolling to scan untried).
   Cards stack vertically so they fit a narrow 2-column cell on mobile. */
.cm-skill-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; }
.cm-skill-grid > .cm-topic{
  margin-top:0; flex-direction:column; align-items:stretch; gap:5px; padding:12px;
}
.cm-skill-grid > .cm-topic .right{ margin-left:0; text-align:left; }
.cm-skill-grid > .cm-topic .tnm{ font-size:14px; }
@media (min-width:900px){
  .cm-wrap{ max-width:960px; }
  .cm-skill-grid{ gap:12px; }
}
.cm-back{ display:inline-flex; align-items:center; gap:6px; color:var(--cm-dim); text-decoration:none;
  font-size:13px; margin-bottom:10px; }
.cm-back:hover{ color:var(--cm-text); }

.cm-h1{ font-size:clamp(22px,5vw,30px); margin:2px 0 4px; letter-spacing:-.02em; color:var(--cm-text); }
.cm-sub{ color:var(--cm-faint); font-size:13.5px; margin:0 0 16px; }

/* hero / overall progress */
.cm-card{ background:var(--cm-surface); border:1px solid var(--cm-border); border-radius:16px; padding:16px; }
.cm-card.hero{ background:linear-gradient(160deg,var(--cm-surface2),var(--cm-surface));
  border-color:var(--cm-border-bright); box-shadow:0 10px 26px rgba(0,0,0,0.25); }
.cm-overall{ display:flex; align-items:center; gap:16px; }
.cm-ring{ width:70px; height:70px; flex:0 0 auto; border-radius:50%;
  background:conic-gradient(var(--cm-accent-bright) calc(var(--p,0)*1%), rgba(255,255,255,0.08) 0);
  display:grid; place-items:center; }
@media (prefers-color-scheme: light){ .cm-ring{ background:conic-gradient(var(--cm-accent) calc(var(--p,0)*1%), rgba(15,23,42,0.08) 0); } }
.cm-ring > i{ width:54px; height:54px; border-radius:50%; background:var(--cm-bg2); display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; font-style:normal; color:var(--cm-text); }
.cm-overall .ot{ font-weight:700; font-size:18px; color:var(--cm-text); }
.cm-overall .om{ font-size:12.5px; color:var(--cm-faint); font-family:'JetBrains Mono',monospace; margin-top:2px; }

.cm-bar{ height:9px; border-radius:99px; background:rgba(255,255,255,0.08); overflow:hidden; margin-top:8px; }
@media (prefers-color-scheme: light){ .cm-bar{ background:rgba(15,23,42,0.08); } }
.cm-bar > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--cm-accent),var(--cm-cyan)); }

.cm-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cm-cyan); margin:36px 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--cm-border-bright); display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cm-eyebrow-count{ font-weight:500; letter-spacing:.08em; color:var(--cm-dim); flex:0 0 auto; }
@media (prefers-color-scheme: light){
  .cm-eyebrow{ color:#047857; border-bottom-color:rgba(4,120,87,0.28); }
  .cm-eyebrow-count{ color:#047857; }
}

/* ── topic rows (track home) ── */
.cm-topic{ display:flex; align-items:center; gap:13px; padding:14px; border-radius:14px; margin-top:10px;
  background:var(--cm-surface); border:1px solid var(--cm-border); text-decoration:none; color:inherit;
  transition:border-color .12s, transform .12s; }
.cm-topic:hover{ border-color:var(--cm-border-bright); transform:translateY(-1px); }
.cm-topic.weak{ border-color:rgba(251,113,133,0.4); background:linear-gradient(100deg,rgba(251,113,133,0.07),var(--cm-surface)); }
.cm-topic.strong{ border-color:rgba(52,211,153,0.35); }
.cm-topic .tnm{ font-weight:600; font-size:15px; color:var(--cm-text); line-height:1.2; }
.cm-topic .tb{ font-size:12px; color:var(--cm-faint); margin-top:2px; }
.cm-topic .right{ margin-left:auto; text-align:right; flex:0 0 auto; }
.cm-topic .cnt{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--cm-dim); font-weight:700; }
.cm-flag{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 8px; border-radius:6px; display:inline-block; margin-bottom:5px; }
.cm-flag.w{ color:var(--cm-bad); background:rgba(251,113,133,0.15); }
.cm-flag.s{ color:var(--cm-good); background:rgba(52,211,153,0.15); }
.cm-seg{ display:flex; gap:3px; height:7px; width:104px; margin-top:8px; }
.cm-seg > i{ flex:1; border-radius:2px; background:var(--t-untried); }
.cm-seg > i.in_progress{ background:var(--t-prog); } .cm-seg > i.proficient{ background:var(--t-prof); }
.cm-seg > i.mastered{ background:var(--t-master); }

/* ── skill-tree path ── */
.cm-progress-top{ display:flex; align-items:center; gap:12px; }
.cm-lv{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; color:var(--cm-accent-bright); white-space:nowrap; }
.cm-pct{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--cm-faint); }

.cm-path{ position:relative; margin-top:18px; }
.cm-pnode{ position:relative; padding:0 0 6px 56px; min-height:60px; }
.cm-pnode .bub{ position:absolute; left:8px; top:0; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; z-index:2; border:2px solid transparent; }
.cm-pnode .conn{ position:absolute; left:27px; top:38px; bottom:-6px; width:3px; border-radius:2px; background:var(--cm-border-bright); z-index:1; }
.cm-pnode:last-child .conn{ display:none; }
.cm-pcard{ background:var(--cm-surface); border:1px solid var(--cm-border); border-radius:13px; padding:11px 13px;
  text-decoration:none; color:inherit; display:block; transition:border-color .12s, transform .12s; }
.cm-pcard:hover{ border-color:var(--cm-border-bright); transform:translateY(-1px); }
.cm-pn{ font-weight:600; font-size:14px; color:var(--cm-text); line-height:1.25; }
.cm-ps{ font-size:11.5px; color:var(--cm-faint); margin-top:3px; font-family:'JetBrains Mono',monospace; }

.cm-pnode.untried .bub{ background:var(--t-untried-bg); color:var(--t-untried); border-color:var(--t-untried); }
.cm-pnode.in_progress .bub{ background:var(--t-prog-bg); color:var(--t-prog); border-color:var(--t-prog); }
.cm-pnode.proficient .bub{ background:var(--t-prof-bg); color:var(--t-prof); border-color:var(--t-prof); }
.cm-pnode.mastered .bub{ background:var(--t-master-bg); color:var(--t-master); border-color:var(--t-master); }
.cm-pnode.mastered .cm-pcard{ border-color:rgba(251,191,36,0.32); }
.cm-pnode.in_progress .cm-pcard{ border-color:rgba(245,158,11,0.4); background:linear-gradient(100deg,rgba(245,158,11,0.07),var(--cm-surface)); }
.cm-pnode.locked .cm-pcard{ opacity:.66; border-style:dashed; }
.cm-pnode.locked .bub{ background:rgba(255,255,255,0.04); color:var(--cm-faint); border-color:var(--cm-border-bright); border-style:dashed; }

.cm-here{ float:right; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:.06em;
  color:var(--cm-bg); background:var(--t-prog); padding:2px 7px; border-radius:5px; margin-left:8px; }
.cm-lockmsg{ font-size:11px; color:var(--cm-faint); margin-top:5px; display:flex; align-items:center; gap:5px; }
.cm-lockmsg svg{ width:12px; height:12px; flex:0 0 auto; }
.cm-lockmsg b{ color:var(--cm-dim); font-weight:600; }

.cm-empty{ text-align:center; color:var(--cm-faint); font-size:13px; padding:30px 10px; }

/* ── /tracks chooser tiles ── */
.cm-tracktile{ display:flex; align-items:center; gap:15px; background:var(--cm-surface); border:1px solid var(--cm-border-bright);
  border-radius:18px; padding:18px; margin-top:12px; text-decoration:none; color:inherit; box-shadow:var(--cm-shadow-soft, 0 8px 22px rgba(0,0,0,0.25));
  transition:border-color .12s, transform .12s; }
.cm-tracktile:hover{ transform:translateY(-2px); border-color:var(--cm-accent-bright); }
.cm-tracktile-ring{ --p:0; width:62px; height:62px; flex:0 0 auto; border-radius:50%;
  background:conic-gradient(var(--cm-accent-bright) calc(var(--p)*1%), rgba(255,255,255,0.08) 0); display:grid; place-items:center; }
.cm-tracktile-ring.cy{ background:conic-gradient(var(--cm-cyan) calc(var(--p)*1%), rgba(255,255,255,0.08) 0); }
@media (prefers-color-scheme: light){ .cm-tracktile-ring{ background:conic-gradient(var(--cm-accent) calc(var(--p)*1%), rgba(15,23,42,0.08) 0);} }
.cm-tracktile-ring i{ width:48px; height:48px; border-radius:50%; background:var(--cm-bg2); display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; font-style:normal; color:var(--cm-text); }
.cm-tracktile-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; color:var(--cm-text); }
.cm-tracktile-meta{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--cm-faint); margin-top:3px; }
.cm-tracktile-arrow{ margin-left:auto; color:var(--cm-faint); font-size:20px; flex:0 0 auto; }

/* ── pinned interactive tool (e.g. Greeks Explorer on Options) ── */
.cm-tool{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:14px; margin-top:9px;
  text-decoration:none; color:inherit; border:1px solid var(--cm-border);
  background:linear-gradient(100deg, var(--cm-accent-dim), var(--cm-surface));
  transition:border-color .12s, transform .12s; }
.cm-tool:hover{ border-color:var(--cm-accent-bright); transform:translateY(-1px); }
.cm-tool-ico{ font-size:20px; flex:0 0 auto; }
.cm-tool-name{ font-weight:600; font-size:14px; color:var(--cm-text); }
.cm-tool-desc{ font-size:12px; color:var(--cm-faint); margin-top:2px; }
.cm-tool-arrow{ margin-left:auto; color:var(--cm-accent-bright); font-size:18px; flex:0 0 auto; }

/* ── concept hub ── */
.cm-crumb{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cm-faint); margin-bottom:2px; }
.cm-mastery-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cm-tier-pill{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:4px 10px; border-radius:7px; }
.cm-tier-pill.untried{ background:var(--t-untried-bg); color:var(--t-untried); }
.cm-tier-pill.in_progress{ background:var(--t-prog-bg); color:var(--t-prog); }
.cm-tier-pill.proficient{ background:var(--t-prof-bg); color:var(--t-prof); }
.cm-tier-pill.mastered{ background:var(--t-master-bg); color:var(--t-master); }
.cm-mastery-stat{ font-size:13px; color:var(--cm-dim); }
.cm-next-hint{ font-size:12.5px; color:var(--cm-faint); margin-top:9px; }

.cm-prereq-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:14px; }
.cm-prereq-label{ font-size:12px; color:var(--cm-faint); }
.cm-prereq-chip{ font-size:11.5px; padding:4px 9px; border-radius:7px; text-decoration:none;
  border:1px solid var(--cm-border); color:var(--cm-dim); }
.cm-prereq-chip.done{ color:var(--cm-good); border-color:rgba(52,211,153,0.35); background:rgba(52,211,153,0.08); }
.cm-prereq-chip:hover{ border-color:var(--cm-border-bright); }

.cm-step{ display:flex; align-items:center; gap:13px; padding:15px 14px; border-radius:14px; margin-top:10px;
  text-decoration:none; color:inherit; border:1px solid var(--cm-border); background:var(--cm-surface);
  transition:border-color .12s, transform .12s; }
.cm-step:hover{ border-color:var(--cm-border-bright); transform:translateY(-1px); }
.cm-step.disabled{ opacity:.55; pointer-events:none; }
.cm-step-num{ width:32px; height:32px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; }
.cm-step.learn .cm-step-num{ background:var(--cm-accent-dim); color:var(--cm-accent-bright); }
.cm-step.practice .cm-step-num{ background:var(--cm-cyan-dim); color:var(--cm-cyan); }
.cm-step.review .cm-step-num{ background:var(--t-prog-bg); color:var(--t-prog); }
.cm-step-title{ font-weight:600; font-size:14.5px; color:var(--cm-text); }
.cm-step-desc{ font-size:12px; color:var(--cm-faint); margin-top:2px; line-height:1.4; }
.cm-step-arrow{ margin-left:auto; color:var(--cm-faint); font-size:18px; flex:0 0 auto; }
.cm-step-done{ color:var(--cm-good); font-size:11px; font-weight:700; }
.cm-step.learn.done{ border-color:rgba(52,211,153,0.3); }

/* ── mental-math category rows ── */
.cm-topic.mm-cat{ gap:11px; }
.cm-mm-bub{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; border:2px solid transparent; }
.cm-mm-bub.untried{ background:var(--t-untried-bg); color:var(--t-untried); border-color:var(--t-untried); }
.cm-mm-bub.in_progress{ background:var(--t-prog-bg); color:var(--t-prog); border-color:var(--t-prog); }
.cm-mm-bub.proficient{ background:var(--t-prof-bg); color:var(--t-prof); border-color:var(--t-prof); }
.cm-mm-bub.mastered{ background:var(--t-master-bg); color:var(--t-master); border-color:var(--t-master); }
.cm-mm-play{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; color:var(--cm-accent-bright); margin-top:5px; }

/* ── Math Home: 1–5 star mastery + recommend banner (2026-06-03) ── */
.cm-stars{ display:inline-flex; gap:2px; line-height:1; }
.cm-star{ font-size:13px; color:var(--t-untried); }
.cm-star.on{ color:var(--t-master); }
.cm-topic .stars-row{ display:flex; align-items:center; gap:8px; margin-top:3px; }

/* hero star total */
.cm-hero-stars{ display:flex; align-items:center; gap:16px; }
.cm-hero-num{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:26px; color:var(--cm-text);
  line-height:1; display:flex; align-items:baseline; gap:6px; }
.cm-hero-num .unit{ font-size:13px; color:var(--cm-faint); font-weight:500; }
.cm-hero-rating{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--cm-faint); margin-top:6px; }
.cm-hero-rating b{ color:var(--cm-accent-bright); font-size:15px; }

/* recommend-next CTA — the loud "train this" primary card */
.cm-recommend{ display:flex; align-items:center; gap:16px; padding:22px; border-radius:18px; margin:0 0 10px;
  text-decoration:none; color:inherit; border:2px solid var(--cm-accent);
  background:linear-gradient(125deg, var(--cm-accent-dim), var(--cm-cyan-dim));
  box-shadow:0 12px 30px var(--cm-accent-dim); transition:transform .12s, border-color .12s, box-shadow .12s; }
.cm-recommend:hover{ transform:translateY(-2px); border-color:var(--cm-accent-bright);
  box-shadow:0 16px 38px var(--cm-accent-dim); }
.cm-recommend-ico{ width:56px; height:56px; flex:0 0 auto; border-radius:15px; display:grid; place-items:center;
  background:var(--cm-bg2); border:1px solid var(--cm-border-bright); font-size:28px; }
.cm-recommend-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cm-accent); }
@media (prefers-color-scheme: light){ .cm-recommend-eyebrow{ color:#047857; } }
.cm-recommend-name{ font-weight:700; font-size:21px; color:var(--cm-text); margin-top:3px; line-height:1.15; }
.cm-recommend-why{ font-size:13px; color:var(--cm-dim); margin-top:4px; }
.cm-recommend-go{ margin-left:auto; flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:13.5px; letter-spacing:.02em; color:#fff; background:var(--cm-accent);
  padding:13px 20px; border-radius:12px; box-shadow:0 4px 12px var(--cm-accent-dim); white-space:nowrap; }
.cm-recommend:hover .cm-recommend-go{ background:var(--cm-accent-bright); }

.cm-topic.rec{ border-color:var(--cm-accent-bright); box-shadow:0 0 0 1px var(--cm-accent-bright) inset; }