/* Little Synapses · shared tokens and components */
:root, .ls{
  --bg:#F3F2EC; --surface:#FFFFFF; --surface-2:#EAE8DF; --warm:#F5EDDF; --warm-2:#EBDDC4;
  --ink:#16201E; --ink-2:#33413E; --muted:#55625E; --line:#D9D6CB; --line-2:#B3AFA1;
  --brand:#1C4D48; --brand-2:#123632; --brand-ink:#FFFFFF; --brand-soft:#DDE8E3;
  --accent:#EDA632; --accent-2:#DC9219; --accent-ink:#1B1406; --accent-soft:#FBECCD;
  --ok:#1A6549; --ok-soft:#DCEEE4; --no:#A2321C; --no-soft:#F8E2DB;
  --alert:#8E2A12; --alert-soft:#FBE8E0; --alert-line:#E2AE9B;
  --eeg-paper:#FFFEF9; --eeg-grid:rgba(28,77,72,.06); --eeg-grid-5:rgba(28,77,72,.13); --eeg-grid-s:rgba(28,77,72,.30);
  --eeg-trace:#111614; --eeg-anno:#B04E08; --eeg-label:#3E4B48;
  --shadow:0 1px 2px rgba(22,32,30,.06), 0 10px 30px rgba(22,32,30,.07);
  --f-display:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --f-mono:"Atkinson Hyperlegible Mono","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.ls.fam{font-size:19px; line-height:1.65}
html.dark .ls, .ls.dark{
  --bg:#0E1513; --surface:#151E1C; --surface-2:#1E2926; --warm:#221F19; --warm-2:#302A20;
  --ink:#E8EDE9; --ink-2:#C9D2CE; --muted:#9FACA7; --line:#2C3835; --line-2:#4A5955;
  --brand:#88C8BB; --brand-2:#AEDDD2; --brand-ink:#0B1210; --brand-soft:#17302C;
  --accent:#F2B550; --accent-2:#F6C772; --accent-ink:#1A1405; --accent-soft:#3A2C12;
  --ok:#74D0A6; --ok-soft:#133026; --no:#F39882; --no-soft:#3B1D16;
  --alert:#F7A890; --alert-soft:#2E1710; --alert-line:#6B3424;
  --eeg-paper:#0F1615; --eeg-grid:rgba(150,210,195,.05); --eeg-grid-5:rgba(150,210,195,.10); --eeg-grid-s:rgba(150,210,195,.24);
  --eeg-trace:#E3E9E5; --eeg-anno:#F6A65F; --eeg-label:#A9B6B2;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}
.ls *, .ls *::before, .ls *::after{box-sizing:border-box}
.ls a{color:var(--brand); text-decoration-thickness:1px; text-underline-offset:3px}
.ls a:hover{color:var(--brand-2); text-decoration-thickness:2px}
.ls :focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:6px}
.ls h1, .ls h2, .ls h3, .ls h4{font-family:var(--f-display); font-weight:560; letter-spacing:-.012em; line-height:1.15; margin:0; color:var(--ink); text-wrap:balance}
.ls p{margin:0; text-wrap:pretty}
.ls ul, .ls ol{margin:0}
.ls .mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.ls .eyebrow{font-family:var(--f-mono); font-size:13px; line-height:1.35; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500}
.ls .wrap{width:100%; max-width:1240px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px}
.ls .wrap.wide{max-width:1400px}
@media (max-width:640px){ .ls .wrap{padding-left:16px; padding-right:16px} }
.ls .vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ls .skip{position:absolute; left:12px; top:-80px; z-index:60; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; font-weight:700}
.ls .skip:focus{top:12px; color:var(--bg)}
.ls .plain{list-style:none; padding:0; margin:0}

/* buttons */
.ls .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border-radius:999px; border:1.5px solid transparent; font-family:var(--f-body); font-size:17px; font-weight:650; line-height:1.1; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s}
.ls .btn svg{flex:none}
.ls .btn-primary, .ls a.btn-primary{background:var(--accent); color:var(--accent-ink)}
.ls .btn-primary:hover, .ls a.btn-primary:hover{background:var(--accent-2); color:var(--accent-ink)}
.ls .btn-brand, .ls a.btn-brand{background:var(--brand); color:var(--brand-ink)}
.ls .btn-brand:hover, .ls a.btn-brand:hover{background:var(--brand-2); color:var(--brand-ink)}
.ls .btn-ghost, .ls a.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.ls .btn-ghost:hover, .ls a.btn-ghost:hover{background:var(--surface-2); color:var(--ink)}
.ls .btn-sm{min-height:44px; padding:0 16px; font-size:15.5px}
.ls .btn-block{width:100%}
.ls .icon-btn{display:inline-grid; place-items:center; width:44px; height:44px; flex:none; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; padding:0}
.ls .icon-btn:hover{background:var(--surface-2)}

/* chips and segmented controls */
.ls .chip{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink); font-family:var(--f-body); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; line-height:1.2}
.ls a.chip{color:var(--ink)}
.ls .chip:hover, .ls a.chip:hover{border-color:var(--ink); color:var(--ink)}
.ls .chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.ls .seg{display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border:1.5px solid var(--line-2); border-radius:12px; background:var(--surface)}
.ls .seg > button, .ls .seg > a{min-height:44px; padding:0 14px; border:0; border-radius:9px; background:transparent; color:var(--ink-2); font-family:var(--f-body); font-size:15.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none}
.ls .seg > button:hover, .ls .seg > a:hover{background:var(--surface-2); color:var(--ink)}
.ls .seg > [aria-pressed="true"], .ls .seg > [aria-current="page"]{background:var(--ink); color:var(--bg)}
.ls .seg > [aria-pressed="true"]:hover, .ls .seg > [aria-current="page"]:hover{background:var(--ink); color:var(--bg)}
.ls .seg.mono > button, .ls .seg.mono > a{font-family:var(--f-mono); font-size:14.5px; font-weight:500; letter-spacing:.02em}

/* switch */
.ls .switch{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 4px; border:0; background:none; color:var(--ink); font-family:var(--f-body); font-size:15.5px; font-weight:600; cursor:pointer}
.ls .switch .track{position:relative; width:42px; height:24px; border-radius:12px; background:var(--line-2); transition:background .15s; flex:none}
.ls .switch .knob{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.3); transition:left .15s}
.ls .switch[aria-checked="true"] .track{background:var(--brand)}
.ls .switch[aria-checked="true"] .knob{left:21px}

/* surfaces */
.ls .card{background:var(--surface); border:1px solid var(--line); border-radius:20px}
.ls .card-a{background:var(--surface); border:1px solid var(--line); border-radius:10px}
.ls .tag{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:12.5px; letter-spacing:.03em; padding:4px 9px; border-radius:6px; background:var(--surface-2); color:var(--ink-2); line-height:1.3}
.ls .gridbg{background-color:var(--eeg-paper); background-image:linear-gradient(var(--eeg-grid-5) 1px, transparent 1px), linear-gradient(90deg, var(--eeg-grid-5) 1px, transparent 1px), linear-gradient(var(--eeg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--eeg-grid) 1px, transparent 1px); background-size:40px 40px, 40px 40px, 8px 8px, 8px 8px}
.ls .bar{height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden}
.ls .bar > span{display:block; height:100%; background:var(--brand); border-radius:3px}

/* forms */
.ls .label{display:block; font-weight:650; font-size:16.5px; margin-bottom:6px; color:var(--ink)}
.ls .hint{font-size:15px; color:var(--muted); line-height:1.5}
.ls .input{width:100%; min-height:48px; padding:10px 14px; border:1.5px solid var(--line-2); border-radius:12px; background:var(--surface); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.4}
.ls .input::placeholder{color:var(--muted)}
.ls textarea.input{min-height:120px; resize:vertical; line-height:1.5}
.ls select.input{appearance:auto}
.ls .check{display:flex; gap:12px; align-items:flex-start; min-height:44px; padding:10px 0; font-size:17px; line-height:1.45; cursor:pointer}
.ls .check input{width:22px; height:22px; margin:1px 0 0; accent-color:var(--brand); flex:none}

/* prose */
.ls .prose > * + *{margin-top:1em}
.ls .prose h2{font-size:clamp(26px, 3vw, 32px); margin-top:1.8em; font-weight:560}
.ls .prose ul, .ls .prose ol{padding-left:1.25em}
.ls .prose li + li{margin-top:.5em}

/* header */
.ls .nav-links{display:flex; align-items:center; gap:2px}
.ls .nav-links a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px; color:var(--ink); text-decoration:none; font-weight:600; font-size:16px}
.ls .nav-links a:hover{background:var(--surface-2); color:var(--ink)}
.ls .nav-links a[aria-current="page"]{background:var(--ink); color:var(--bg)}
.ls .menu-btn{display:none}
@media (max-width:920px){ .ls .nav-links{display:none} .ls .menu-btn{display:inline-flex} }

/* academy shell */
.ls .acad-shell{display:flex; flex-wrap:wrap; gap:48px; align-items:flex-start}
.ls .acad-side{flex:1 1 236px; max-width:268px}
.ls .acad-main{flex:999 1 560px; min-width:0}
.ls .only-narrow{display:none !important}
@media (max-width:960px){ .ls .acad-side{display:none} .ls .only-narrow{display:inline-flex !important} .ls .hide-narrow{display:none !important} }
@media (max-width:640px){ .ls .hide-sm{display:none !important} }
.ls .chap{display:grid; grid-template-columns:30px 1fr auto; gap:2px 10px; align-items:baseline; padding:9px 10px; border-radius:8px; text-decoration:none; font-size:15px; line-height:1.35; min-height:44px}
.ls a.chap{color:var(--ink)}
.ls a.chap:hover{background:var(--surface-2); color:var(--ink)}
.ls a.chap[aria-current="page"]{background:var(--brand-soft); color:var(--ink); font-weight:650}
.ls .chap .n{font-family:var(--f-mono); font-size:13px; color:var(--muted)}

/* practice choices */
.ls .choice{display:flex; align-items:center; gap:14px; width:100%; min-height:56px; padding:10px 16px; border:1.5px solid var(--line-2); border-radius:12px; background:var(--surface); color:var(--ink); font-family:var(--f-body); font-size:17px; text-align:left; cursor:pointer}
.ls .choice:hover{border-color:var(--ink)}
.ls .choice .key{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:8px; border:1.5px solid var(--line-2); font-family:var(--f-mono); font-size:14px; font-weight:600; flex:none}
.ls .choice .status{margin-left:auto; font-family:var(--f-mono); font-size:13px; font-weight:600; display:inline-flex; gap:6px; align-items:center; white-space:nowrap}
.ls .choice[data-state="selected"]{border-color:var(--brand); box-shadow:inset 0 0 0 1.5px var(--brand)}
.ls .choice[data-state="selected"] .key{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.ls .choice[data-state="correct"]{border-color:var(--ok); background:var(--ok-soft); cursor:default}
.ls .choice[data-state="correct"] .key{background:var(--ok); border-color:var(--ok); color:var(--surface)}
.ls .choice[data-state="correct"] .status{color:var(--ok)}
.ls .choice[data-state="wrong"]{border-color:var(--no); background:var(--no-soft); cursor:default}
.ls .choice[data-state="wrong"] .key{background:var(--no); border-color:var(--no); color:var(--surface)}
.ls .choice[data-state="wrong"] .status{color:var(--no)}
.ls .choice[data-state="locked"]{cursor:default; color:var(--ink-2)}
.ls .choice[data-state="locked"]:hover{border-color:var(--line-2)}

/* overlays */
.ls .scrim{position:fixed; inset:0; z-index:40; background:rgba(8,13,12,.55)}
.ls .drawer{position:fixed; top:0; left:0; bottom:0; z-index:41; width:min(88vw, 340px); background:var(--surface); overflow:auto; padding:16px 12px 24px; box-shadow:var(--shadow); border-right:1px solid var(--line)}
.ls .overlay{position:fixed; inset:0; z-index:50; background:rgba(8,13,12,.78); display:flex; flex-direction:column; padding:20px; gap:14px}

@media print{ .ls .no-print{display:none !important} .ls{background:#fff} }

/* site additions */
html{scroll-behavior:smooth}
html.dark{background:#0E1513}
body.ls{margin:0; min-height:100vh}
.ls img, .ls svg{max-width:100%}
.ls button{font-family:inherit}
.ls button[disabled]{opacity:.5; cursor:not-allowed}
.ls .ico-sun{display:none}
html.dark .ls .ico-sun{display:inline}
html.dark .ls .ico-moon{display:none}
.ls .site-head{position:relative; background:var(--bg); border-bottom:1px solid var(--line)}
.ls .mobile-nav{border-top:1px solid var(--line); background:var(--surface)}
.ls .mobile-nav[hidden]{display:none}
.ls .mobile-nav a{display:flex; align-items:center; min-height:54px; font-size:19px; font-weight:650; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.ls .mobile-nav a[aria-current="page"]{color:var(--brand)}
@media (min-width:921px){ .ls .mobile-nav{display:none !important} }
.ls .preview-band{background:var(--accent-soft); color:var(--ink); font-size:14.5px; text-align:center; padding:8px 16px; border-bottom:1px solid var(--line)}

/* EEG figures */
.ls .eeg-rule{display:block; width:100%; height:28px; color:var(--brand); opacity:.55}
.ls .eeg-fig{margin:0; color:var(--ink)}
.ls .eeg-meta{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 16px; padding:7px 12px; font-size:12.5px; line-height:1.35; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-bottom:0; border-radius:8px 8px 0 0}
.ls .eeg-thumb .eeg-meta, .ls .eeg-mini .eeg-meta{font-size:11px}
.ls .eeg-paper{position:relative; background:var(--eeg-paper); border:1px solid var(--line); border-radius:0 0 8px 8px; overflow:hidden}
.ls .eeg-paper > svg{display:block; width:100%; height:auto}
.ls .eeg-paper path{fill:none}
.ls .eeg-paper .g1{stroke:var(--eeg-grid); stroke-width:.6}
.ls .eeg-paper .g5{stroke:var(--eeg-grid-5); stroke-width:.8}
.ls .eeg-paper .gs{stroke:var(--eeg-grid-s); stroke-width:1}
.ls .eeg-paper .tr{stroke:var(--eeg-trace); stroke-linejoin:round; stroke-linecap:round}
.ls .eeg-paper .sc{stroke:var(--eeg-trace); stroke-width:2.2; stroke-linecap:square}
.ls .eeg-anno{position:absolute; inset:0; width:100%; height:100%}
.ls .eeg-anno path{stroke:var(--eeg-anno); stroke-width:2; stroke-dasharray:7 5; vector-effect:non-scaling-stroke}
.ls .eeg-lab{position:absolute; left:.6%; transform:translateY(-50%); font-size:11px; line-height:1; color:var(--eeg-label); white-space:nowrap}
.ls .eeg-mini .eeg-lab{font-size:10px}
.ls .eeg-tag{position:absolute; background:var(--eeg-anno); color:var(--eeg-paper); font-size:11.5px; font-weight:600; line-height:1.3; padding:2px 6px; border-radius:4px; white-space:nowrap}
.ls .eeg-sc{position:absolute; font-size:11px; line-height:1; color:var(--eeg-label); font-weight:600; white-space:nowrap}
.ls .eeg-thumb .eeg-sc{font-size:9px}
@media (max-width:640px){ .ls .eeg-lab{font-size:8px} .ls .eeg-tag{font-size:10px} .ls .eeg-sc{font-size:9px} }

/* dialogs */
.ls dialog{border:0; padding:0; background:transparent; color:var(--ink); max-width:none; max-height:none}
.ls dialog::backdrop{background:rgba(8,13,12,.6)}
.ls dialog.drawer-dlg{margin:0; height:100%; width:min(88vw, 340px); background:var(--surface); border-right:1px solid var(--line); padding:16px 12px 24px; overflow:auto}
.ls dialog.zoom-dlg{width:calc(100vw - 32px); height:calc(100vh - 32px); background:#0b100f; border-radius:12px; padding:16px; display:none; flex-direction:column; gap:12px}
.ls dialog.zoom-dlg[open]{display:flex}
.ls .zoom-scroll{flex:1; overflow:auto; border-radius:10px; background:var(--eeg-paper)}

/* choice reset for practice and cards */
.ls .step-btn{width:100%; min-height:52px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; padding:6px 10px; border:0; border-top:4px solid var(--line-2); background:transparent; color:var(--ink-2); font-size:14px; font-weight:600; text-align:left; cursor:pointer; line-height:1.2}
.ls .step-btn.done{border-top-color:var(--brand)}
.ls .step-btn[aria-current="step"]{border-top-color:var(--ink); color:var(--ink)}
.ls .soon{font-family:var(--f-mono); font-size:12px; color:var(--muted)}

/* print: action plan page prints only the plan */
@media print{
  body.plan-page *{visibility:hidden}
  body.plan-page .plan-sheet, body.plan-page .plan-sheet *{visibility:visible}
  body.plan-page .plan-sheet{position:absolute; left:0; top:0; width:100%; aspect-ratio:auto !important; box-shadow:none !important; border:0 !important; font-size:12pt !important}
  .ls .site-head, .ls footer{display:none}
}
.ls [hidden]{display:none !important}
.ls .skip{top:auto !important; left:-9999px}
.ls .skip:focus{left:12px; top:12px !important}
.ls .acad-side{display:flex; flex-direction:column; gap:18px}
@media (max-width:960px){ .ls .acad-side{display:none} }