/* Nepedia parent-area theme — matches the reader UI (nepedia.html).
   Strategy: redefine the legacy CSS custom-property names with NEW light brand
   values (so existing inline var() refs in the templates still resolve), and
   restyle the existing class names for the light theme. Markup + JS unchanged.
   Fonts (Fredoka/Newsreader/Mulish) are SELF-HOSTED: every page links
   /static/fonts.css?v={{ fonts_v }}, which declares the @font-face rules against
   woff2 files in /static/fonts/. Do not add a fonts.googleapis.com <link> back. */

:root{
  --bg:#F4F2FB; --panel:#FFFFFF; --surface:#FFFFFF; --surface-hover:#F3F1FB;
  --soft:#E2F3F3; --accent:#1F8C8C; --accent2:#1F8C8C; --accent3:#2BB6B6;
  --green:#1F8C8C; --red:#D14B4B;
  --text:#1A1633; --text-muted:#8C86A8; --line:rgba(40,20,80,.10);
  --radius:20px; --disp:'Fredoka',sans-serif; --body:'Mulish',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:var(--body);background:var(--bg);color:var(--text);min-height:100vh;font-weight:600;-webkit-font-smoothing:antialiased;padding:30px 20px 60px}

/* a11y: visible keyboard focus + respect reduced motion (all parent/static pages) */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* layout + headings */
.container{max-width:760px;margin:0 auto}
.container.wide{max-width:1000px}  /* directory pages (math index / course) — grids, not prose */
.back,.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none;font-family:var(--disp);font-weight:500;font-size:14px;margin-bottom:22px}
.back:hover,.back-link:hover{opacity:.8}
h1{font-family:var(--disp);font-weight:600;font-size:30px;line-height:1.05;color:var(--text);margin-bottom:6px;background:none;-webkit-text-fill-color:currentColor;letter-spacing:-.01em}
.subtitle{font-family:var(--body);font-weight:600;color:var(--text-muted);font-size:14.5px;margin-bottom:26px}
.tagline{font-family:var(--body);font-weight:600;color:var(--text-muted);font-size:16px;margin-bottom:34px}

/* brand */
.np-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.np-logo{width:46px;height:46px;background:url(/static/brand/nepedia-icon.svg) center/100% 100% no-repeat;color:transparent;font-size:0;flex-shrink:0;overflow:hidden}
.np-brand span{font-family:var(--disp);font-weight:600;font-size:22px;color:var(--text)}

/* cards */
.card,.section{background:var(--panel);border-radius:var(--radius);padding:24px;margin-bottom:18px;border:1px solid var(--line);box-shadow:0 12px 32px -22px rgba(40,20,80,.5)}
.card h3{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--text);margin-bottom:14px}
.section h2{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--text);margin-bottom:12px}
.section p,.section li{font-family:var(--body);font-weight:600;font-size:15px;line-height:1.7;color:#4A4466}
.section p+p{margin-top:12px}
.section ul{margin:12px 0;padding-left:20px}.section li{margin-bottom:6px}
.updated{font-size:13px;color:var(--text-muted);font-weight:600;margin-bottom:34px}
.highlight{background:var(--soft);border-left:3px solid var(--accent);padding:16px 20px;border-radius:0 12px 12px 0;margin-top:16px}
.highlight p{color:var(--accent);font-weight:700}
.signoff{font-family:'Newsreader',serif;font-style:italic;font-size:17px;line-height:1.6;color:var(--text);margin-top:6px}
.signoff .by{display:block;font-family:var(--disp);font-style:normal;font-weight:600;font-size:14px;color:var(--text-muted);margin-top:10px}
.faq-item{padding:16px 0;border-bottom:1px solid var(--line)}
.faq-item:first-of-type{padding-top:4px}
.faq-item:last-of-type{padding-bottom:2px;border-bottom:0}
.faq-q{font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--text);margin-bottom:6px}
.faq-a{font-family:var(--body);font-weight:600;font-size:15px;line-height:1.7;color:#4A4466}

/* buttons */
.btn{font-family:var(--disp);cursor:pointer;border:0;padding:11px 24px;border-radius:13px;font-size:14.5px;font-weight:600;transition:transform .12s ease,box-shadow .2s,background .2s,filter .2s}
.btn-primary,.pin-submit{font-family:var(--disp);cursor:pointer;border:0;background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;box-shadow:0 12px 24px -12px rgba(40,20,80,.5);border-radius:13px;font-weight:600}
.btn-primary:hover,.pin-submit:hover{transform:translateY(-1px)}
.pin-submit{padding:13px 32px;font-size:15px}
.btn-cancel{background:var(--soft);color:var(--accent)}
.btn-sm{font-family:var(--disp);cursor:pointer;padding:7px 14px;border-radius:10px;font-size:12.5px;font-weight:600;background:var(--soft);color:var(--accent);border:1px solid transparent;transition:filter .2s}
.btn-sm:hover{filter:brightness(.96)}
.btn-sm.primary{background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff}
.btn-sm.danger{background:#FBEAEA;color:var(--red)}
.add-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:13px;border:2px dashed var(--line);background:transparent;color:var(--text-muted);font-family:var(--disp);font-weight:600;font-size:14px;cursor:pointer;transition:all .2s}
.add-btn:hover{border-color:var(--accent);color:var(--accent)}

/* inputs */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-family:var(--disp);font-weight:500;font-size:13px;color:var(--accent);margin-bottom:8px}
.form-group input[type=text]{width:100%;padding:12px 16px;border-radius:13px;border:2px solid var(--line);background:#fff;color:var(--text);font-size:15px;font-family:var(--body);font-weight:700}
.form-group input[type=text]:focus{outline:none;border-color:var(--accent)}

/* PIN gate */
.pin-gate{text-align:center;padding:48px 20px}
.pin-gate h2{font-family:var(--disp);font-weight:600;font-size:22px;margin-bottom:8px;color:var(--text)}
.pin-gate p{color:var(--text-muted);font-size:14px;margin-bottom:24px;font-weight:600}
.pin-row{display:flex;justify-content:center;gap:10px;margin-bottom:16px}
.pin-change-row{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.pin-row input,.pin-change-row input{text-align:center;font-weight:700;font-family:var(--disp);border:2px solid var(--line);border-radius:13px;background:#fff;color:var(--text)}
.pin-row input{width:52px;height:60px;font-size:24px}
.pin-change-row input{width:48px;height:52px;font-size:20px;border-radius:11px}
.pin-row input:focus,.pin-change-row input:focus{outline:none;border-color:var(--accent)}
.pin-error{color:var(--red);font-size:13px;font-weight:700;min-height:20px;margin-bottom:12px}

/* profiles */
.profile-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:#FAF9FE;margin-bottom:8px;border:1px solid var(--line)}
.profile-item.active{border-color:rgba(31,140,140,.4);background:var(--soft)}
.profile-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent3));display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:600;font-size:18px;color:#fff;flex-shrink:0}
.profile-info{flex:1}
.profile-name{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--text)}
.profile-age{font-size:12px;color:var(--text-muted);font-weight:600}
.profile-active-badge{font-size:11px;font-weight:800;color:var(--accent);background:var(--soft);padding:3px 10px;border-radius:20px}
.profile-actions{display:flex;gap:6px}

/* editor */
.editor{display:none}.editor.active{display:block}
.age-options,.chip-grid{display:flex;flex-wrap:wrap;gap:7px}
.age-opt{padding:8px 18px;border-radius:11px;font-size:14px;font-weight:600;cursor:pointer;border:2px solid var(--line);background:#fff;color:var(--text-muted);font-family:var(--disp);transition:all .2s}
.age-opt:hover{border-color:var(--accent);color:var(--accent)}
.age-opt.active{background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;border-color:transparent}
.chip{padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--text-muted);user-select:none;font-family:var(--body);transition:all .2s}
.chip.on{background:var(--soft);color:var(--accent);border-color:rgba(31,140,140,.3)}
.chip.off{background:#FBEAEA;color:var(--red);border-color:rgba(209,75,75,.3);text-decoration:line-through}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

/* history + recent lists */
.history-child-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.history-tab,.child-tab{padding:7px 15px;border-radius:10px;font-size:12.5px;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--text-muted);cursor:pointer;font-family:var(--disp);white-space:nowrap;transition:all .2s}
.history-tab:hover,.child-tab:hover{border-color:var(--accent);color:var(--accent)}
.history-tab.active,.child-tab.active{background:var(--soft);border-color:rgba(31,140,140,.3);color:var(--accent)}
.history-list,.recent-list{list-style:none}
.history-item,.recent-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.history-item:last-child{border-bottom:none}
.history-dot,.recent-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.history-title,.recent-title{font-size:13.5px;font-weight:700;color:var(--text);flex:1;font-family:var(--body)}
.history-time,.recent-time{font-size:11.5px;color:var(--text-muted);white-space:nowrap;font-weight:600}
.history-date-header{font-family:var(--disp);font-size:11px;font-weight:500;color:var(--accent);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.06em}

/* dashboard */
.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.child-tabs{display:flex;gap:8px;margin-bottom:22px;overflow-x:auto}
.child-panel{display:none}.child-panel.active{display:block}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:22px}
.stat-card{background:var(--panel);border-radius:var(--radius);padding:20px;text-align:center;border:1px solid var(--line);box-shadow:0 12px 32px -22px rgba(40,20,80,.5)}
.stat-value{font-family:var(--disp);font-size:34px;font-weight:700;color:var(--accent)}
.stat-label{font-family:var(--body);font-size:11.5px;font-weight:800;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}
.subject-bars{display:flex;flex-direction:column;gap:10px}
.subject-bar-row{display:flex;align-items:center;gap:12px}
.subject-bar-label{font-size:13px;font-weight:700;min-width:120px;color:var(--text-muted);text-transform:capitalize;font-family:var(--body)}
.subject-bar-track{flex:1;height:9px;background:var(--soft);border-radius:5px;overflow:hidden}
.subject-bar-fill{height:100%;border-radius:5px;transition:width .5s ease}
.subject-bar-count{font-size:12px;font-weight:800;color:var(--text-muted);min-width:30px;text-align:right}
.badge-row{display:flex;flex-wrap:wrap;gap:10px}
.badge-item{padding:10px 14px;border-radius:13px;text-align:center;min-width:80px;border:1px solid var(--line);background:#FAF9FE}
.badge-item.earned{background:var(--soft);border-color:rgba(31,140,140,.25)}
.badge-icon{font-size:24px}
.badge-label{font-size:10px;font-weight:800;margin-top:4px;color:var(--text-muted);font-family:var(--body)}
.badge-item.earned .badge-label{color:var(--accent)}
.streak-highlight{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:16px;font-weight:600;margin-bottom:16px;color:#C2792A}

/* about page stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:16px}
.stat{background:var(--soft);border-radius:13px;padding:16px;text-align:center}
.stat-num{font-family:var(--disp);font-size:28px;font-weight:700;color:var(--accent)}

/* toast */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);padding:13px 28px;border-radius:13px;font-family:var(--disp);font-weight:600;font-size:14px;background:var(--accent);color:#fff;z-index:100;box-shadow:0 16px 36px -14px rgba(40,20,80,.5);pointer-events:none;animation:toastIn .3s ease}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* login screen */
.np-login{max-width:430px;margin:7vh auto 0}
.np-login .card{padding:32px 28px;text-align:center}
.np-login h1{font-size:25px;margin-bottom:8px}
.np-login .sub{color:var(--text-muted);font-weight:600;font-size:14.5px;margin:0 auto 22px;line-height:1.5;max-width:330px}
.np-feats{text-align:left;display:flex;flex-direction:column;gap:13px;margin:4px 0 22px}
.np-feat{display:flex;gap:12px;align-items:flex-start}
.np-feat .e{font-size:22px;width:28px;text-align:center;flex-shrink:0}
.np-feat .t{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--text)}
.np-feat .d{font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--text-muted);line-height:1.4}
.np-gbtn{display:flex;justify-content:center;min-height:44px;margin-bottom:8px}
.np-login .reassure{font-size:12px;color:var(--text-muted);font-weight:700;margin-top:14px;line-height:1.5}

/* math worksheets section (color follows --accent, which math pages override to indigo) */
.mathgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:6px}
@media(min-width:540px){.mathgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}
.mcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 8px 22px -16px rgba(40,20,80,.35);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;text-decoration:none}
.mcard:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(40,20,80,.45);border-color:var(--accent)}
.mcard .n{font-family:var(--disp);font-weight:600;font-size:19px;color:var(--text)}
.mcard .meta{font-family:var(--body);font-weight:700;font-size:12.5px;color:var(--text-muted);margin-top:4px}
.mcard.soon{opacity:.6;pointer-events:none}
.mcard .soonbadge{display:inline-block;margin-top:9px;font-family:var(--body);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);background:var(--soft);padding:3px 9px;border-radius:999px}
.unititem{padding:16px 0;border-bottom:1px solid var(--line)}
.unititem:last-child{border-bottom:0}
.unithead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.unitnum{font-family:var(--disp);font-weight:800;font-size:11.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
.unittitle{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--text)}
.unitgoal{font-family:var(--body);font-weight:600;font-size:13.5px;color:var(--text-muted);line-height:1.55;margin:5px 0 12px;max-width:62ch}
.unitdl{display:flex;gap:8px;flex-wrap:wrap}
.unitpractice{margin-top:15px;padding-top:14px;border-top:1px dashed var(--line)}
.practicehdr{font-family:var(--disp);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:13px}
.dl{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:600;font-size:13px;padding:8px 15px;border-radius:10px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.dl.ws{background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;box-shadow:0 8px 18px -10px rgba(40,20,80,.45)}
.dl.guide{background:var(--soft);color:var(--accent);border:1px solid var(--line)}
.dl:hover{transform:translateY(-1px)}
.dl.disabled{opacity:.45;pointer-events:none}
.attrib{font-family:var(--body);font-weight:600;font-size:12px;color:var(--text-muted);line-height:1.6;margin-top:10px}
.attrib a{color:var(--accent);font-weight:700}
.mathsearch{display:flex;align-items:center;gap:10px;background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:0 6px 18px -12px rgba(40,20,80,.25);margin:18px 0 6px}
.mathsearch:focus-within{border-color:var(--accent)}
.mathsearch>span{flex-shrink:0;font-size:17px;color:var(--text-muted);cursor:default}
.mathsearch #msclear{cursor:pointer;font-size:14px}
.mathsearch #msclear:hover{color:var(--accent)}
.mathsearch input{flex:1;border:0;outline:0;background:transparent;font-family:var(--body);font-weight:700;font-size:16px;color:var(--text);min-width:0}
.mathsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* topics as skills with Concept→Practice→Advanced levels */
.topicrow{padding:15px 0;border-bottom:1px solid var(--line)}
.topicrow:last-child{border-bottom:0}
/* topics as a card grid (uses page width; halves the vertical scroll) */
.topicgrid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:8px;align-items:start}
@media(min-width:760px){.topicgrid{grid-template-columns:1fr 1fr}}
.topicgrid>.topicrow{padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 8px 22px -18px rgba(40,20,80,.28)}
.topic-title{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--text);margin-bottom:9px}
.topicrow.single{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topicrow.single .topic-title{margin-bottom:0;flex:1;min-width:150px}
.levels{display:flex;flex-direction:column;gap:15px}
.level{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
/* level = a difficulty LABEL (colored dot + uppercase text), NOT a button */
.level-name{flex-shrink:0;min-width:82px;display:flex;align-items:center;gap:7px;margin-top:6px;font-family:var(--disp);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;background:none;padding:0;border:0}
.level-name::before{content:"";width:9px;height:9px;border-radius:3px;flex-shrink:0}
.level-name.concept{color:#3F9E6E}
.level-name.concept::before{background:#3F9E6E}
.level-name.practice{color:#5A6CC2}
.level-name.practice::before{background:#5A6CC2}
.level-name.advanced{color:#C1662E}
.level-name.advanced::before{background:#C1662E}
.topic-extra{margin-bottom:0}
/* progressive disclosure — the libraries outgrew "show everything at once".
   The summary is styled as a real control (soft fill + accent text, same language as
   .dl.guide) so it reads as clickable, not as a caption. */
.topic-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topicfold,.unitpractice{margin-top:12px}
.topicfold>summary,.unitpractice>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;margin:0;
  font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--accent);background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:9px 16px;
  transition:filter .15s ease,box-shadow .15s ease,transform .12s ease}
.topicfold>summary::-webkit-details-marker,.unitpractice>summary::-webkit-details-marker{display:none}
.topicfold>summary:hover,.unitpractice>summary:hover{filter:brightness(.97);box-shadow:0 4px 12px -6px rgba(40,20,80,.3)}
.topicfold>summary:active,.unitpractice>summary:active{transform:translateY(1px)}
.topicfold>summary:focus-visible,.unitpractice>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* chevron: points right when closed, down when open */
.fchev{width:0;height:0;border-left:6px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;flex-shrink:0;transition:transform .18s ease}
.topicfold[open] .fchev,.unitpractice[open] .fchev{transform:rotate(90deg) translateX(1px)}
/* Show / Hide swap so the control states what it will do */
.topicfold[open] .fshow,.unitpractice[open] .fshow{display:none}
.topicfold:not([open]) .fhide,.unitpractice:not([open]) .fhide{display:none}
.fdim{color:var(--text-muted);font-weight:500}
.foldcount{font-weight:500;color:var(--text-muted)}
.topicfold>.levels,.unitpractice>.levels{padding-top:14px}
@media print{.topicfold,.unitpractice{display:block} .topicfold>summary,.unitpractice>summary{display:none}}
.level-sheets{display:flex;flex-direction:column;gap:9px;flex:1;min-width:220px}
.sheet{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sheet-num{font-family:var(--body);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);min-width:42px;max-width:150px;flex-shrink:0;line-height:1.3}
.level-files{display:flex;gap:8px;flex-wrap:wrap}

/* footer */
.np-footer{margin-top:60px;padding:28px 20px 40px;border-top:1px solid var(--line);text-align:center;font-family:var(--body);font-size:13px;color:var(--text-muted)}
.np-footer .links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.np-footer a{color:var(--text-muted);text-decoration:none;font-weight:700}
.np-footer a:hover{color:var(--accent)}
.np-footer .tag{font-family:var(--disp);font-weight:500;color:var(--accent);margin-top:8px}

@media (max-width:640px){
  .container{padding:0}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .subject-bar-label{min-width:84px;font-size:11px}
  .profile-item{flex-wrap:wrap}
  .profile-actions{width:100%;justify-content:flex-end;margin-top:6px}
}

/* ---- math map -----------------------------------------------------------
   The prerequisite graph. Three states only — mastered / ready / locked —
   because "under target / near / over" reads instantly where a continuous
   scale does not. Grey carries the structure, colour carries state, and the
   only two hues are ones the site already uses for levels (#3F9E6E green,
   the indigo accent). Edges are context, so they stay grey; solid means the
   curriculum states the dependency, dotted means it is only book order. */
.whobar[hidden]{display:none}   /* a class-level display: beats the hidden attribute */
.whobar{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;
  font-size:13px;color:var(--text-muted);background:var(--soft);border:1px solid var(--line);
  border-radius:11px;padding:8px 14px;margin-bottom:20px}
.whobar .wdot{width:7px;height:7px;border-radius:50%;background:#3F9E6E;flex-shrink:0}
.maphead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.key{display:flex;gap:14px;flex-wrap:wrap}
.key .k{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-weight:600;
  font-size:12px;color:var(--text-muted)}
.key .sw{width:11px;height:11px;border-radius:3px;display:inline-block;border:1.5px solid}
.sw.mastered{background:#E6F3EC;border-color:#3F9E6E}
.sw.ready{background:var(--soft);border-color:var(--accent)}
.sw.locked{background:#F1F0F5;border-color:#C9C5D6}

.mapwrap{overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);padding:8px 4px}
#mapsvg{display:block;max-width:none}
#mapsvg .colhead{font-family:var(--disp);font-weight:600;font-size:12px;fill:var(--text-muted)}
#mapsvg .edge{stroke:#CFCADD;stroke-width:1.4}
#mapsvg .edge.stated{stroke:#A9A2C4;stroke-width:1.8}
#mapsvg .edge.seq{stroke-dasharray:3 4}
#mapsvg .node{cursor:pointer}
#mapsvg .node rect{fill:#F1F0F5;stroke:#C9C5D6;stroke-width:1.5}
#mapsvg .node .un{font-family:var(--body);font-weight:700;font-size:9.5px;fill:var(--text-muted)}
#mapsvg .node .ti{font-family:var(--body);font-weight:600;font-size:10.5px;fill:var(--text)}
#mapsvg .node.ready rect{fill:var(--soft);stroke:var(--accent)}
#mapsvg .node.mastered rect{fill:#E6F3EC;stroke:#3F9E6E}
#mapsvg .node.mastered .ti{fill:#2F7355}
#mapsvg .node.sel rect{stroke-width:2.5}
#mapsvg .node:hover rect{stroke-width:2.5}
#mapsvg .node:focus-visible rect{stroke:var(--accent);stroke-width:3}

.readylist{display:flex;flex-direction:column;gap:8px}
.ritem{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--panel)}
.rmeta{display:flex;flex-direction:column;gap:2px;min-width:190px}
.rcourse{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-muted)}
.rtitle{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--text)}
.racts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.markbtn{font-family:var(--disp);font-weight:600;font-size:13px;cursor:pointer;
  color:#2F7355;background:#E6F3EC;border:1px solid #3F9E6E;border-radius:11px;padding:9px 15px}
.markbtn:hover{filter:brightness(.97)}
.markbtn.undo{color:var(--text-muted);background:#F1F0F5;border-color:#C9C5D6}

.detail{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:20px 22px;margin-top:22px}
.dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dcourse{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-muted)}
.dtitle{font-family:var(--disp);font-weight:600;font-size:21px;color:var(--text);line-height:1.25}
.dclose{border:none;background:none;cursor:pointer;font-size:16px;color:var(--text-muted);padding:2px 6px}
.dgoal{font-family:var(--body);font-size:14.5px;color:var(--text);margin:10px 0 4px;line-height:1.55}
.dblock{margin-top:18px}
.dlabel{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.dlabel.needs{color:#C1662E}
.dlabel.ok{color:#3F9E6E}
.prereq{border-left:2px solid var(--line);padding:2px 0 8px 12px;margin-bottom:10px}
.pline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ptitle{font-family:var(--body);font-weight:700;font-size:14px;color:var(--text)}
.pconf{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-muted)}
.pconf.stated{color:var(--accent)}
.pev{font-family:var(--body);font-size:13px;color:var(--text-muted);line-height:1.5;margin:4px 0 7px}
.seclist{margin:0;padding-left:18px;font-family:var(--body);font-size:14px;color:var(--text);line-height:1.7}
.dacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;align-items:center}
.muted{font-family:var(--body);font-weight:600;color:var(--text-muted);font-size:14px}
.muted.small{font-size:12.5px;margin-top:12px}

@media print{
  .mapwrap{overflow:visible;border:none}
  .markbtn,.dclose,.back{display:none}
}

/* Entry point to the map from the worksheet index. It answers the question most
   parents actually arrive with, so it gets real weight: a filled accent panel, not a
   bordered note. Deliberately NOT a left-stripe alert card — that pattern reads as a
   warning, and it is the one shape on this page that should read as an invitation. */
.maplink{display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-decoration:none;border:1.5px solid var(--accent);border-radius:16px;
  background:var(--soft);padding:18px 22px;margin:20px 0 6px;
  transition:filter .15s ease,transform .12s ease}
.maplink:hover{filter:brightness(.98);transform:translateY(-1px)}
.maplink:active{transform:translateY(0)}
.maplink:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.maplink-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.maplink-t{font-family:var(--disp);font-weight:600;font-size:19px;color:var(--text);line-height:1.25}
.maplink-d{font-family:var(--body);font-weight:600;font-size:14px;color:var(--text-muted)}
.maplink-go{font-family:var(--disp);font-weight:600;font-size:14px;color:#fff;
  background:var(--accent);border-radius:11px;padding:10px 18px;white-space:nowrap;flex-shrink:0}
@media (max-width:560px){
  .maplink{flex-direction:column;align-items:flex-start;gap:12px}
  .maplink-t{font-size:17px}
}

/* ---- printable study plan ------------------------------------------------
   Built to be printed, so the screen version is already the paper version:
   generous rows, a real tick box, absolute URLs on the links (a printed
   relative link is useless), and all chrome dropped at @media print. */
.pick{font-family:var(--body);font-weight:600;font-size:14px;color:var(--text);
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-right:14px}
.picklabel{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-muted);margin-right:7px}
#pickwrap{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:18px 0 24px}
.planlist{display:flex;flex-direction:column;gap:14px}
.planitem{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;background:var(--panel);break-inside:avoid}
.planbox{width:22px;height:22px;border:2px solid #C9C5D6;border-radius:6px;flex-shrink:0;margin-top:2px}
.planbody{min-width:0}
.plantop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.plann{font-family:var(--body);font-weight:800;font-size:11px;color:#fff;background:var(--accent);
  border-radius:20px;padding:2px 8px}
.plantitle{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--text)}
.plangoal{font-family:var(--body);font-size:13.5px;color:var(--text);line-height:1.5;margin-top:5px}
.plansecs{font-family:var(--body);font-size:12.5px;color:var(--text-muted);line-height:1.5;margin-top:6px}
.planlinks{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;align-items:baseline}
.planlinks a{font-family:var(--body);font-weight:700;font-size:13px;color:var(--accent)}
.planextra{font-family:var(--body);font-size:12px;color:var(--text-muted)}
.planfoot{margin-top:26px}
@media print{
  .noprint,#pickwrap{display:none !important}
  body{background:#fff}
  .container.wide{max-width:none;padding:0}
  .planitem{border:1px solid #999;background:#fff;padding:10px 12px}
  .planlinks a{color:#000;text-decoration:underline}
  .planlinks a::after{content:" (" attr(href) ")";font-weight:400;font-size:10px;color:#444}
  .plann{background:#000}
}

/* Map page runs tight at the top so the map itself clears the fold — the graph is the
   point of the page, and a visitor should not have to scroll to find out. */
h1.tight{margin-bottom:2px}
.tagline.tight{margin-bottom:14px}
.maphead{margin-bottom:2px}
.maphint{font-family:var(--body);font-weight:600;font-size:13px;color:var(--text-muted);margin:0 0 10px}
.key .ln{width:18px;height:0;border-top:2px solid #A9A2C4;display:inline-block;flex-shrink:0}
.key .ln.seq{border-top-style:dotted;border-color:#CFCADD}
.maplink + #noresults{margin-top:6px}

/* Section folds inside the unit detail — reuses the accordion language from /math. */
.secfold{border-top:1px solid var(--line)}
.secfold:last-of-type{border-bottom:1px solid var(--line)}
.secfold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:700;font-size:14px;color:var(--text);padding:11px 2px}
.secfold>summary::-webkit-details-marker{display:none}
.secfold>summary:hover{color:var(--accent)}
.secfold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.secfold[open]>summary .fchev{transform:rotate(90deg) translateX(1px)}
.secletter{font-family:var(--body);font-weight:800;font-size:11px;color:#fff;
  background:var(--text-muted);border-radius:5px;padding:2px 6px;flex-shrink:0}
.secbody{padding:0 2px 14px 26px;display:flex;flex-direction:column;gap:12px}
.secbody .dlabel{margin-bottom:4px}
.secbody ul,.secbody ol{margin:0;padding-left:18px;font-family:var(--body);font-size:13.5px;
  color:var(--text);line-height:1.65}
.secbody ol{color:var(--text-muted)}

/* Worksheet groups inside the unit detail — one row per level, mirroring the course page
   so the same content reads the same way in both places. */
.wsgroup{display:flex;align-items:flex-start;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
.wsgroup:first-of-type{border-top:none}
.wsgroup .level-name{min-width:88px;flex-shrink:0;padding-top:7px}
.level-name.unit{color:var(--text-muted)}
.level-name.unit::before{background:var(--text-muted)}

/* Child picker. Sits above the fold on /math and the map; hidden entirely unless the
   parent has more than one profile, since a one-option select is just furniture. */
.kidbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.kidbar[hidden]{display:none}
.kidlabel{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-muted)}
.kidmanage{font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--text-muted)}
.kidmanage:hover{color:var(--accent)}

/* ---- account control (on every page) -------------------------------------
   Signed out it is a single button; signed in it is the account initial plus
   Log out. Deliberately quiet — it is orientation, not a call to action, and
   on kid-facing pages its job is to let a parent notice they are browsing as a
   guest at the most protective default. */
.authbtn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--body);font-weight:700;font-size:12.5px;white-space:nowrap}
.authbtn.signin{color:var(--accent);background:var(--soft);border:1px solid var(--line);
  border-radius:10px;padding:7px 13px}
.authbtn.signin:hover{filter:brightness(.97)}
.authbtn.signin:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.authsep{color:var(--text-muted);font-weight:600}
.authwho{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--text)}
.authinitial{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:11px;font-weight:800;flex-shrink:0}
.authname{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.authwho:hover .authname{color:var(--accent)}
.authout{font-family:var(--body);font-weight:700;font-size:12.5px;color:var(--text-muted);text-decoration:none}
.authout:hover{color:var(--red)}

/* header rows that had to be created to hold it */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:18px}
.topright{display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap}

/* pages with no header of their own */
.authfloat{position:fixed;top:12px;right:14px;z-index:9998}
.authfloat .authbtn{background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:6px 11px;box-shadow:0 1px 3px rgba(40,20,80,.06)}
.authfloat.spa{top:10px;right:12px}
@media (max-width:700px){
  .authfloat .authname{display:none}
  .authfloat.spa{top:8px;right:8px}
}
@media print{.authbtn,.authfloat{display:none !important}}

/* "What is Nepedia?" — shown at the end of an article, for the visitor who arrived from
   a search engine with no idea what this site is. Orientation, not a conversion funnel:
   it explains the five-level idea and offers the two doors, and asks for nothing. */
.whatisthis{border-top:1px solid var(--line);margin-top:34px;padding-top:24px}
.whatisthis h2{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--text);margin:0 0 8px}
.whatisthis p{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--text);margin:0 0 16px;max-width:62ch}
.whatisthis-doors{display:flex;gap:12px;flex-wrap:wrap}
.door{display:flex;flex-direction:column;gap:3px;text-decoration:none;flex:1 1 260px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 16px}
.door:hover{background:var(--surface-hover)}
.door-t{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--accent)}
.door-d{font-family:var(--body);font-weight:600;font-size:13px;color:var(--text-muted)}

/* Unit / topic landing pages */
.crumbs{font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--text-muted);margin-bottom:6px}
.crumbs a{color:var(--text-muted)}
.crumbs a:hover{color:var(--accent)}
.unitnav{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-top:26px}