/* WODDI Learn — Phase 2a learning map (loads with woddi-ds.css tokens) */
.learn-hero { display:flex; align-items:center; gap:1rem; padding:1.25rem;
  border-left:4px solid var(--gmn); margin-bottom:.875rem; }
.learn-hero-body { flex:1; min-width:0; }
.learn-chip { display:inline-block; font-size:.6875rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:.375rem; }
.learn-hero h2 { margin:0 0 .25rem; font-size:1.25rem; }
.learn-hero p { margin:0 0 .875rem; font-size:.875rem; color:var(--text-2); }
.learn-cta { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.2rem;
  border:none; border-radius:var(--r-sm); background:var(--gmn); color:#fff;
  font-weight:700; font-size:.9375rem; cursor:pointer; min-height:44px; }
.learn-cta:hover { background:var(--gmn-hover); }
.learn-ring { --p:0; width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background: conic-gradient(var(--nnn) calc(var(--p)*1%), var(--surface-3) 0);
  display:flex; align-items:center; justify-content:center; }
.learn-ring span { width:48px; height:48px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:800; color:var(--text); }
.learn-phases { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.875rem; }
.learn-phase { display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
  padding:.75rem .875rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); cursor:pointer; min-height:56px; }
.learn-phase.locked { opacity:.62; }
.learn-phase.done { border-color:var(--nnn-mid); }
.learn-phase-n { width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--surface-3); color:var(--text-2); font-size:.75rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.learn-phase.done .learn-phase-n { background:var(--nnn-light); color:var(--nnn); }
.learn-phase.current .learn-phase-n { background:var(--gmn-light); color:var(--gmn); }
.learn-phase-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.learn-phase-main strong { font-size:.9375rem; }
.learn-phase-main small { font-size:.75rem; color:var(--text-3); }
.learn-phase-main .prog-bar { height:4px; margin-top:4px; }
.learn-phase-right { color:var(--text-3); font-weight:800; font-size:.8125rem; }
.learn-phase.done .learn-phase-right { color:var(--nnn); }
.learn-map-toggle, .learn-cat-toggle { display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text-2); font-weight:600; font-size:.875rem;
  cursor:pointer; min-height:44px; }
.learn-map-toggle { margin-bottom:.875rem; }
.learn-cat-bar { margin:.25rem 0 .875rem; }
.learn-map { padding:1rem; margin-bottom:.875rem; }
.learn-map-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.learn-map-head h3 { margin:0; font-size:1rem; }
.learn-map-close { border:none; background:none; color:var(--text-3); font-size:1rem; cursor:pointer; padding:.5rem; }
.learn-map-phase { margin-top:.75rem; }
.learn-map-phase h4 { margin:0 0 .5rem; font-size:.8125rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-3); }
.learn-map-item { display:flex; align-items:center; gap:.625rem; width:100%; text-align:left;
  padding:.625rem .75rem; margin-bottom:.375rem; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; min-height:48px;
  font-size:.875rem; color:var(--text); }
.learn-map-item .done { color:var(--nnn); }
.learn-map-note { font-size:.8125rem; color:var(--text-3); margin:0; }
.learn-cat-collapsed { display:none; }