/* Check ADHD Now — shared stylesheet.
   Palette carried over from the original single-page design. */

:root{
  --paper:#F1F3F5;
  --paper-2:#E6EAED;
  --surface:rgba(255,255,255,.72);
  --surface-solid:#FFFFFF;
  --ink:#1E242B;
  --muted:#5C656F;
  --line:rgba(30,36,43,.11);
  --line-strong:rgba(30,36,43,.17);

  --accent:#4C6478;
  --accent-deep:#3A4E5E;
  --accent-tint:rgba(76,100,120,.10);
  --btn-ink:#FFFFFF;
  --sand:#98795A;
  --glow:rgba(76,100,120,.12);

  --panel-bg:#1E242B;
  --panel-bg-2:#161B21;
  --panel-ink:#ECEFF2;
  --panel-muted:#99A2AC;

  --shadow-sm:0 1px 2px rgba(22,27,33,.05);
  --shadow-md:0 2px 6px rgba(22,27,33,.05),0 10px 40px rgba(22,27,33,.07);
  --shadow-glow:0 10px 46px rgba(58,78,94,.24);

  --display:"Fraunces",Georgia,serif;
  --body:"Nunito",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Follow the system unless the reader has picked a theme themselves. */
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

:root[data-theme="dark"]{
  --paper:#15191E;
  --paper-2:#101317;
  --surface:rgba(255,255,255,.045);
  --surface-solid:#1B2027;
  --ink:#E8EBEF;
  --muted:#9AA2AC;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.17);

  --accent:#A2B4C2;
  --accent-deep:#7F91A1;
  --accent-tint:rgba(162,180,194,.11);
  --btn-ink:#14181D;
  --sand:#C4A582;
  --glow:rgba(162,180,194,.09);

  --panel-bg:#0F1317;
  --panel-bg-2:#13181E;
  --panel-ink:#E8EBEF;
  --panel-muted:#8E96A1;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 2px 6px rgba(0,0,0,.28),0 10px 40px rgba(0,0,0,.3);
  --shadow-glow:0 10px 46px rgba(127,145,161,.20);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --paper:#15191E; --paper-2:#101317;
    --surface:rgba(255,255,255,.045); --surface-solid:#1B2027;
    --ink:#E8EBEF; --muted:#9AA2AC;
    --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.17);
    --accent:#A2B4C2; --accent-deep:#7F91A1; --accent-tint:rgba(162,180,194,.11);
    --btn-ink:#14181D; --sand:#C4A582; --glow:rgba(162,180,194,.09);
    --panel-bg:#0F1317; --panel-bg-2:#13181E;
    --panel-ink:#E8EBEF; --panel-muted:#8E96A1;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 2px 6px rgba(0,0,0,.28),0 10px 40px rgba(0,0,0,.3);
    --shadow-glow:0 10px 46px rgba(127,145,161,.20);
  }
}

/* ---------------------------------------------------- extra palettes ---
   All deliberately low-saturation. Nothing here should read as bright on a
   page someone may be looking at for a long time. */

/* Sand — warm paper, brown ink. */
:root[data-theme="sand"]{
  color-scheme:light;
  --paper:#F4F0E9; --paper-2:#EBE5D9;
  --surface:rgba(255,255,255,.66); --surface-solid:#FDFBF7;
  --ink:#2A2620; --muted:#6B6257;
  --line:rgba(42,38,32,.13); --line-strong:rgba(42,38,32,.20);
  --accent:#8A6F52; --accent-deep:#6D5640; --accent-tint:rgba(138,111,82,.10);
  --btn-ink:#FFFFFF; --sand:#7C8A6A; --glow:rgba(138,111,82,.10);
  --panel-bg:#2A2620; --panel-bg-2:#211E19;
  --panel-ink:#F2EDE4; --panel-muted:#A79C8C;
  --shadow-sm:0 1px 2px rgba(42,38,32,.06);
  --shadow-md:0 2px 6px rgba(42,38,32,.06),0 10px 40px rgba(42,38,32,.08);
  --shadow-glow:0 10px 46px rgba(109,86,64,.22);
}

/* Sage — soft muted green. */
:root[data-theme="sage"]{
  color-scheme:light;
  --paper:#EFF2ED; --paper-2:#E2E8DE;
  --surface:rgba(255,255,255,.66); --surface-solid:#FBFCFA;
  --ink:#232820; --muted:#5C6557;
  --line:rgba(35,40,32,.12); --line-strong:rgba(35,40,32,.19);
  --accent:#5B7355; --accent-deep:#455840; --accent-tint:rgba(91,115,85,.10);
  --btn-ink:#FFFFFF; --sand:#8A7B57; --glow:rgba(91,115,85,.10);
  --panel-bg:#232820; --panel-bg-2:#1B1F19;
  --panel-ink:#EDF1EA; --panel-muted:#9AA394;
  --shadow-sm:0 1px 2px rgba(35,40,32,.06);
  --shadow-md:0 2px 6px rgba(35,40,32,.06),0 10px 40px rgba(35,40,32,.08);
  --shadow-glow:0 10px 46px rgba(69,88,64,.22);
}

/* Mist — cool pale blue-grey. */
:root[data-theme="mist"]{
  color-scheme:light;
  --paper:#EDF1F4; --paper-2:#DFE6EC;
  --surface:rgba(255,255,255,.68); --surface-solid:#FAFCFD;
  --ink:#1F262C; --muted:#59636D;
  --line:rgba(31,38,44,.12); --line-strong:rgba(31,38,44,.19);
  --accent:#4E6B80; --accent-deep:#3A5265; --accent-tint:rgba(78,107,128,.10);
  --btn-ink:#FFFFFF; --sand:#87795F; --glow:rgba(78,107,128,.11);
  --panel-bg:#1F262C; --panel-bg-2:#181D22;
  --panel-ink:#EAEEF1; --panel-muted:#98A2AC;
  --shadow-sm:0 1px 2px rgba(31,38,44,.06);
  --shadow-md:0 2px 6px rgba(31,38,44,.06),0 10px 40px rgba(31,38,44,.08);
  --shadow-glow:0 10px 46px rgba(58,82,101,.22);
}

/* Dusk — a softer, warmer dark than the default. */
:root[data-theme="dusk"]{
  color-scheme:dark;
  --paper:#1C2027; --paper-2:#161A20;
  --surface:rgba(255,255,255,.05); --surface-solid:#232832;
  --ink:#E7E9EE; --muted:#9AA2AE;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.17);
  --accent:#A9B7C8; --accent-deep:#8394A8; --accent-tint:rgba(169,183,200,.11);
  --btn-ink:#171B22; --sand:#C6AE8B; --glow:rgba(169,183,200,.08);
  --panel-bg:#141820; --panel-bg-2:#181D26;
  --panel-ink:#E7E9EE; --panel-muted:#939BA7;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 2px 6px rgba(0,0,0,.28),0 10px 40px rgba(0,0,0,.3);
  --shadow-glow:0 10px 46px rgba(131,148,168,.20);
}

:root[data-font="legible"]{
  --display:"Atkinson Hyperlegible",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,sans-serif;
}
:root[data-font="legible"] body{letter-spacing:.012em;line-height:1.8}
:root[data-font="legible"] h1,
:root[data-font="legible"] h2,
:root[data-font="legible"] h3{letter-spacing:0;line-height:1.24}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  background:
    radial-gradient(1100px 620px at 50% -280px,var(--glow),transparent 68%),
    linear-gradient(var(--paper),var(--paper) 60%,var(--paper-2));
  background-attachment:fixed;
  font-family:var(--body);font-size:1.0625rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.35rem}
h1,h2,h3,h4{font-family:var(--display);line-height:1.16;letter-spacing:-.015em;margin:0}
a{color:var(--accent);text-underline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:.5rem;z-index:20;
  background:var(--surface-solid);color:var(--ink);
  padding:.7rem 1.1rem;border-radius:.7rem;border:1px solid var(--line-strong);
  font-weight:700;text-decoration:none;
}
.skip:focus{left:1rem}

/* ------------------------------------------------------------------ nav */
.nav{
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:.8px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:.75rem;padding-top:.7rem;padding-bottom:.7rem;max-width:72rem}
.brand{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:1.0625rem;
  color:var(--ink);text-decoration:none;letter-spacing:-.02em;flex:none;
}
.brand-mark{
  width:1.15rem;height:1.15rem;border-radius:.42rem;flex:none;
  background:linear-gradient(140deg,var(--accent),var(--accent-deep));
  box-shadow:var(--shadow-sm);
}
.nav-links{display:flex;flex-wrap:wrap;gap:.15rem;margin-left:auto}
.nav-links a{
  font-size:.8125rem;font-weight:600;color:var(--muted);text-decoration:none;
  padding:.45rem .6rem;border-radius:.6rem;white-space:nowrap;
  transition:color .18s,background .18s;
}
.nav-links a:hover{color:var(--accent);background:var(--accent-tint)}
.nav-links a[aria-current="true"]{color:var(--accent);background:var(--accent-tint)}
.nav-prefs{display:flex;gap:.35rem;flex:none}
.nav-toggle{display:none}

.pill{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);
  border:.8px solid var(--line);border-radius:9999px;
  padding:.42rem .8rem;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;
}
.pill:hover{color:var(--accent);border-color:var(--line-strong)}
.pill:focus-visible,.nav-links a:focus-visible,.brand:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.pill[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-tint)}

@media (max-width:820px){
  .nav-toggle{
    display:inline-block;margin-left:auto;
    font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);background:var(--surface);
    border:.8px solid var(--line);border-radius:9999px;padding:.42rem .8rem;cursor:pointer;
  }
  .nav-links{
    display:none;order:3;width:100%;margin:0;
    flex-direction:column;gap:0;padding:.4rem 0 .2rem;
    border-top:.8px solid var(--line);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.6rem .4rem;font-size:.9375rem}
  .nav-prefs{order:2}
}

/* ---------------------------------------------------------------- search */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
/* Search needs scripting, so it stays hidden until the page confirms it has it. */
.search-btn{display:none}
.js .search-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);
  border:.8px solid var(--line);border-radius:9999px;
  padding:.42rem .8rem;cursor:pointer;
  transition:color .18s,border-color .18s
}
.search-btn:hover{color:var(--accent);border-color:var(--line-strong)}
.search-btn:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.search-btn svg{
  width:.9rem;height:.9rem;flex:none;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round
}
@media (max-width:520px){.search-btn span{display:none}.js .search-btn{padding:.42rem .6rem}}

.search-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:start center}
.search-overlay[hidden]{display:none}
.search-backdrop{position:absolute;inset:0;background:rgba(10,13,17,.55);backdrop-filter:blur(3px)}
.search-panel{
  position:relative;width:min(42rem,calc(100% - 2rem));margin-top:5vh;
  background:var(--surface-solid);border:.8px solid var(--line-strong);
  border-radius:1.15rem;box-shadow:0 24px 70px rgba(0,0,0,.35);
  overflow:hidden;max-height:86vh;display:flex;flex-direction:column
}
.search-bar{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;border-bottom:.8px solid var(--line)}
.search-icon{width:1.1rem;height:1.1rem;flex:none;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}
.search-bar input{
  flex:1;border:0;background:none;outline:none;
  font-family:var(--body);font-size:1.0625rem;color:var(--ink);min-width:0
}
.search-bar input::placeholder{color:var(--muted);opacity:.75}
.search-bar input::-webkit-search-cancel-button{display:none}
.search-close{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);cursor:pointer;
  border:.8px solid var(--line);border-radius:.5rem;padding:.3rem .5rem;flex:none
}
.search-close:hover{color:var(--accent);border-color:var(--line-strong)}
.search-hint{margin:0;padding:.9rem 1.1rem;font-size:.875rem;color:var(--muted)}
.search-results{list-style:none;margin:0;padding:0 .5rem .5rem;overflow-y:auto}
.search-results:empty{display:none}
.search-results a{
  display:block;padding:.8rem .9rem;border-radius:.75rem;
  text-decoration:none;color:var(--ink)
}
.search-results li[aria-selected="true"] a,
.search-results a:hover{background:var(--accent-tint)}
.search-results a:focus-visible{outline:2.5px solid var(--accent);outline-offset:-2px}
.search-kicker{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:.2rem
}
.search-title{font-family:var(--display);font-weight:600;font-size:1rem;display:block;line-height:1.3}
.search-snippet{display:block;margin-top:.25rem;font-size:.8438rem;color:var(--muted);line-height:1.55}
.search-snippet mark,.search-title mark{
  background:var(--accent-tint);color:inherit;font-weight:700;
  padding:0 .1em;border-radius:.2em
}
@media (max-width:520px){.search-panel{margin-top:0;width:100%;max-height:100vh;border-radius:0;border:0}}

/* ----------------------------------------------------------------- home */
.hero{padding:4rem 0 1rem}
.eyebrow{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.1rem
}
.hero h1{font-size:clamp(2.3rem,7.6vw,3.5rem);font-weight:600;max-width:20ch}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--accent),var(--accent-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{font-size:1.1875rem;max-width:44ch;margin:1.6rem 0 0;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:2.1rem 0 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--body);font-weight:700;font-size:1rem;
  color:var(--btn-ink);text-decoration:none;
  background:linear-gradient(100deg,var(--accent),var(--accent-deep));
  border:0;border-radius:.95rem;padding:.9rem 1.6rem;cursor:pointer;
  box-shadow:var(--shadow-glow);
  transition:transform .18s,filter .18s;
}
.btn:hover{transform:translateY(-2px);filter:saturate(1.06)}
.btn.ghost{
  background:var(--surface);color:var(--ink);
  border:.8px solid var(--line-strong);box-shadow:var(--shadow-sm);
}
.btn:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
.btn .arrow{transition:transform .18s}
.btn:hover .arrow{transform:translateX(3px)}

.notice{
  margin:2.4rem 0 0;padding:1.2rem 1.4rem;
  background:var(--surface);border:.8px solid var(--line);
  border-left:3px solid var(--sand);border-radius:1rem;
  font-size:.9375rem;box-shadow:var(--shadow-md)
}
.notice strong{font-family:var(--display);font-weight:600}
.notice p{margin:0}
.notice p + p{margin-top:.7rem}

.topic-block{padding:3.2rem 0 0;scroll-margin-top:5rem}
.topic-block h2{font-size:clamp(1.5rem,4.4vw,1.95rem);font-weight:600}
.topic-blurb{color:var(--muted);margin:.7rem 0 0;max-width:56ch;font-size:.9688rem}

/* ---------------------------------------------------------------- cards */
.cards{display:grid;gap:.7rem;margin:1.5rem 0 0}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{
  display:flex;flex-direction:column;gap:.35rem;
  background:var(--surface);border:.8px solid var(--line);border-radius:1rem;
  padding:1.15rem 1.25rem;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.card-kicker{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)
}
.card-title{font-family:var(--display);font-weight:600;font-size:1.0625rem;line-height:1.25}
.card-desc{font-size:.875rem;color:var(--muted);line-height:1.6}

/* -------------------------------------------------------------- article */
.page-head{padding:2.6rem 0 0}
.crumbs{font-size:.8125rem;color:var(--muted);margin-bottom:1.1rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.page-head h1{font-size:clamp(1.95rem,5.6vw,2.85rem);font-weight:600;max-width:24ch}
.standfirst{font-size:1.125rem;color:var(--muted);margin:1.2rem 0 0;max-width:52ch}
.byline{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:1.3rem 0 0
}

.toc{
  margin:2.2rem 0 0;padding:1.15rem 1.4rem;
  background:var(--surface);border:.8px solid var(--line);border-radius:1rem;
  box-shadow:var(--shadow-sm)
}
.toc-h{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .6rem
}
.toc ol{margin:0;padding-left:1.2rem;font-size:.9375rem}
.toc li{margin:.3rem 0}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline}

.prose{padding:.5rem 0 0}
.prose h2{
  font-size:clamp(1.45rem,4.2vw,1.85rem);font-weight:600;
  margin:2.8rem 0 0;scroll-margin-top:5rem;max-width:28ch
}
.prose h3{font-size:1.125rem;font-weight:600;margin:2rem 0 0}
.prose p{margin:1rem 0 0}
.prose ul,.prose ol{margin:1.1rem 0 0;padding-left:1.3rem}
.prose li{margin:.5rem 0}
.prose li > strong{font-weight:700}
.prose a{font-weight:600}
.prose blockquote{
  margin:1.6rem 0 0;padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--accent);color:var(--muted);font-style:italic
}

/* callout boxes usable inside prose */
.box{
  margin:1.8rem 0 0;padding:1.2rem 1.4rem;
  background:var(--surface);border:.8px solid var(--line);border-radius:1rem;
  box-shadow:var(--shadow-sm)
}
.box > :first-child{margin-top:0}
.box h3{font-size:1.0625rem;margin:0 0 .3rem}
.box.accent{border-left:3px solid var(--accent)}
.box.warn{border-left:3px solid var(--sand)}

.keypoints{
  margin:2rem 0 0;padding:1.3rem 1.5rem;
  background:linear-gradient(160deg,var(--panel-bg),var(--panel-bg-2));
  color:var(--panel-ink);border-radius:1.15rem;box-shadow:var(--shadow-md)
}
.keypoints .kp-h{
  font-size:.6875rem;margin:0;color:var(--panel-muted);
  font-family:var(--mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.keypoints ul{margin:.8rem 0 0;padding-left:1.15rem;font-size:.9375rem}
.keypoints li{margin:.45rem 0;color:var(--panel-ink)}

/* comparison table */
.table-scroll{overflow-x:auto;margin:1.8rem 0 0;-webkit-overflow-scrolling:touch}
table{
  border-collapse:collapse;width:100%;min-width:34rem;font-size:.9375rem;
  background:var(--surface);border-radius:1rem;overflow:hidden;
  box-shadow:var(--shadow-sm)
}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:.8px solid var(--line);vertical-align:top}
th{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;background:var(--accent-tint)
}
tbody tr:last-child td{border-bottom:0}

/* faq */
.faq{margin:1.6rem 0 0;display:grid;gap:.6rem}
.faq details{
  background:var(--surface);border:.8px solid var(--line);border-radius:1rem;
  padding:.2rem .3rem;box-shadow:var(--shadow-sm)
}
.faq summary{
  cursor:pointer;padding:.95rem 1.1rem;font-weight:700;font-size:1rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:700;flex:none}
.faq details[open] summary::after{content:"−"}
.faq summary:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:.8rem}
.faq .answer{padding:0 1.1rem 1rem;font-size:.9688rem}
.faq .answer > :first-child{margin-top:0}

/* --------------------------------------------------------- disclaimer */
.disclaimer{
  margin:3.2rem 0 0;padding:1.2rem 1.4rem;
  background:var(--surface);border:.8px solid var(--line);
  border-left:3px solid var(--sand);border-radius:1rem;
  font-size:.9063rem;color:var(--muted);box-shadow:var(--shadow-sm)
}
.disclaimer p{margin:0}
.disclaimer strong{color:var(--ink);font-family:var(--display);font-weight:600}

/* --------------------------------------------------- rating & feedback */
.feedback{
  margin:2.6rem 0 0;padding:1.5rem 1.6rem;
  background:var(--surface);border:.8px solid var(--line);border-radius:1.15rem;
  box-shadow:var(--shadow-sm)
}
.fb-h{font-size:1.0625rem !important;font-weight:600;margin:0 !important}
.fb-sub{margin:.35rem 0 0;font-size:.875rem;color:var(--muted)}
.fb-stars{display:flex;gap:.15rem;margin:.9rem 0 0}
.fb-star{
  padding:.35rem;border:0;background:none;cursor:pointer;line-height:0;
  border-radius:.5rem;transition:transform .15s
}
.fb-star svg{width:1.9rem;height:1.9rem;fill:var(--line-strong);transition:fill .15s}
.fb-star:hover{transform:translateY(-2px)}
.fb-star:focus-visible{outline:2.5px solid var(--accent);outline-offset:1px}
/* Light up the hovered star and every one before it. */
.fb-stars:hover .fb-star svg{fill:var(--sand)}
.fb-stars .fb-star:hover ~ .fb-star svg{fill:var(--line-strong)}
.fb-star.on svg{fill:var(--sand)}
.fb-star[disabled]{cursor:default}
.fb-star[disabled]:hover{transform:none}
/* Once rated, the row is a record rather than a control. */
.feedback.rated .fb-stars:hover .fb-star svg{fill:var(--line-strong)}
.feedback.rated .fb-star.on svg{fill:var(--sand)}
.feedback.rated .fb-sub{display:none}

.fb-status{margin:.9rem 0 0;font-size:.9063rem;color:var(--muted)}
.fb-status.ok{color:var(--accent);font-weight:700}
.fb-status.bad{color:var(--sand);font-weight:700}

.related{margin:3.4rem 0 0;padding-top:2.4rem;border-top:.8px solid var(--line)}
.related h2{font-size:1.35rem;font-weight:600}

/* ------------------------------------------------- inline source chips */
/* Sits beside a claim and names who says it, so the site is reporting a
   source rather than issuing an opinion of its own. */
.src{
  display:inline-flex;align-items:baseline;gap:.15rem;
  font-family:var(--mono);font-size:.6563rem;font-weight:500;letter-spacing:.03em;
  color:var(--muted);background:var(--accent-tint);
  border:.8px solid var(--line);border-radius:9999px;
  padding:.08rem .45rem;margin:0 .1rem;
  text-decoration:none;white-space:nowrap;vertical-align:.06em;
  transition:color .18s,border-color .18s
}
.src::after{content:"↗";font-size:.85em;opacity:.7}
.src:hover{color:var(--accent);border-color:var(--accent)}
.src:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.prose .src{font-weight:500}

.sources{
  margin:2.4rem 0 0;padding:1.2rem 1.4rem;
  background:var(--surface);border:.8px solid var(--line);border-radius:1rem;
  box-shadow:var(--shadow-sm)
}
.sources h3{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin:0 0 .7rem
}
.sources ul{list-style:none;margin:0;padding:0}
.sources li{margin:.4rem 0;font-size:.875rem;line-height:1.55}
.sources a{font-weight:600}

/* ------------------------------------------------------- link directory */
.links{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
.links li{
  background:var(--surface);border:.8px solid var(--line);border-radius:1rem;
  padding:1.05rem 1.2rem;box-shadow:var(--shadow-sm)
}
.links li > a{font-weight:700;font-size:1rem;display:inline-block}
.links-note{display:block;margin-top:.35rem;font-size:.9063rem;color:var(--muted);line-height:1.6}

/* --------------------------------------------------- cartoon artwork */
.toon{display:block;width:100%;height:auto;max-width:15rem;margin:0 auto}
.toon .sky{fill:var(--accent-tint)}
.toon .body{fill:var(--accent)}
.toon .body-deep{fill:var(--accent-deep)}
.toon .face{fill:none;stroke:var(--btn-ink);stroke-width:2.4;stroke-linecap:round}
.toon .mat{fill:var(--sand);opacity:.85}
.toon .line{fill:none;stroke:var(--accent-deep);stroke-width:2.4;stroke-linecap:round}
.toon .pop{fill:var(--sand)}

/* twinkling sparkles — decorative only, hidden from assistive tech */
.sparkle{fill:var(--sand);transform-origin:center;transform-box:fill-box;animation:twinkle 3.2s ease-in-out infinite}
.sparkle:nth-of-type(2){animation-delay:.7s}
.sparkle:nth-of-type(3){animation-delay:1.4s}
.sparkle:nth-of-type(4){animation-delay:2.1s}
.sparkle:nth-of-type(5){animation-delay:2.7s}
@keyframes twinkle{
  0%,100%{opacity:.25;transform:scale(.7)}
  50%{opacity:1;transform:scale(1.15)}
}

/* ------------------------------------------------- display settings */
.display-btn{display:none}
.js .display-btn{display:inline-flex;align-items:center}
.display-btn[aria-expanded="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-tint)}

.display-panel{
  position:absolute;top:calc(100% + .5rem);right:1.35rem;z-index:30;
  width:min(19rem,calc(100vw - 2rem));
  background:var(--surface-solid);border:.8px solid var(--line-strong);
  border-radius:1rem;padding:1rem 1.1rem 1.1rem;
  box-shadow:var(--shadow-md)
}
.display-panel[hidden]{display:none}
.display-group + .display-group{margin-top:1rem;padding-top:1rem;border-top:.8px solid var(--line)}
.display-h{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .55rem
}

.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.swatch{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.45rem .2rem;cursor:pointer;
  background:none;border:.8px solid transparent;border-radius:.65rem;
  transition:border-color .18s,background .18s
}
.swatch:hover{border-color:var(--line-strong)}
.swatch:focus-visible{outline:2.5px solid var(--accent);outline-offset:1px}
.swatch[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint)}
.swatch-dot{
  width:1.35rem;height:1.35rem;border-radius:50%;
  border:.8px solid rgba(128,128,128,.35);box-shadow:inset 0 -2px 4px rgba(0,0,0,.06)
}
.swatch-label{font-size:.6563rem;color:var(--muted);line-height:1}
/* Each dot previews its palette: page colour with a slice of its accent. */
.swatch-auto  .swatch-dot{background:linear-gradient(135deg,#F1F3F5 50%,#15191E 50%)}
.swatch-light .swatch-dot{background:linear-gradient(135deg,#F1F3F5 60%,#4C6478 60%)}
.swatch-dark  .swatch-dot{background:linear-gradient(135deg,#15191E 60%,#A2B4C2 60%)}
.swatch-sand  .swatch-dot{background:linear-gradient(135deg,#F4F0E9 60%,#8A6F52 60%)}
.swatch-sage  .swatch-dot{background:linear-gradient(135deg,#EFF2ED 60%,#5B7355 60%)}
.swatch-mist  .swatch-dot{background:linear-gradient(135deg,#EDF1F4 60%,#4E6B80 60%)}
.swatch-dusk  .swatch-dot{background:linear-gradient(135deg,#1C2027 60%,#A9B7C8 60%)}

.size-row{display:flex;align-items:center;gap:.5rem}
.size-btn{
  flex:none;width:2.4rem;height:2.4rem;cursor:pointer;
  display:grid;place-items:center;line-height:1;
  font-family:var(--display);font-size:.9375rem;font-weight:600;color:var(--ink);
  background:var(--surface);border:.8px solid var(--line-strong);border-radius:.6rem;
  transition:border-color .18s,color .18s
}
.size-btn span{font-size:.75em;margin-left:.05em}
.size-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.size-btn:disabled{opacity:.35;cursor:default}
.size-btn:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.size-value{
  flex:1;text-align:center;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.06em;color:var(--muted)
}
.display-font{width:100%;justify-content:center;text-transform:none;letter-spacing:0;font-size:.8125rem}

@media (max-width:820px){
  .display-panel{right:1.35rem;left:1.35rem;width:auto}
}

/* ------------------------------------------------- breathing pop-up */
/* Needs scripting, so it stays hidden until the page confirms it has it. */
.breathe-btn{display:none}
.js .breathe-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--btn-ink);background:linear-gradient(100deg,var(--accent),var(--accent-deep));
  border:.8px solid transparent;border-radius:9999px;
  padding:.42rem .85rem;cursor:pointer;
  transition:filter .18s,transform .18s
}
.breathe-btn:hover{filter:saturate(1.1);transform:translateY(-1px)}
.breathe-btn:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.breathe-btn svg{
  width:.9rem;height:.9rem;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round
}
@media (max-width:640px){.breathe-btn span{display:none}.js .breathe-btn{padding:.42rem .6rem}}
/* Four action buttons plus the brand is tight on a phone. Reclaim the space
   from padding and gaps rather than dropping a control. */
@media (max-width:560px){
  .nav-inner{gap:.4rem}
  .nav-prefs{gap:.25rem}
  .brand{font-size:.9375rem;letter-spacing:-.03em}
  .brand-mark{width:1rem;height:1rem}
  .js .breathe-btn,.js .search-btn{padding:.42rem .5rem}
  .nav-toggle{padding:.42rem .6rem}
}
@media (max-width:400px){
  /* At this width the wordmark is what has to give, not the controls. */
  .brand span.brand-text{display:none}
}

.breathe-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.breathe-overlay[hidden]{display:none}
.breathe-backdrop{position:absolute;inset:0;background:rgba(10,13,17,.6);backdrop-filter:blur(3px)}
.breathe-panel{
  position:relative;width:min(34rem,100%);
  max-height:94vh;overflow-y:auto;
  background:var(--surface-solid);
  border:.8px solid var(--line-strong);border-bottom:0;
  border-radius:1.4rem 1.4rem 0 0;
  padding:1.4rem 1.4rem 2rem;
  box-shadow:0 -10px 60px rgba(0,0,0,.4);
  animation:slide-up .32s cubic-bezier(.22,1,.36,1)
}
@keyframes slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.breathe-panel{animation:none}}
@media (min-width:640px){
  .breathe-overlay{align-items:center}
  .breathe-panel{border-radius:1.4rem;border-bottom:.8px solid var(--line-strong);box-shadow:0 24px 70px rgba(0,0,0,.4)}
  @keyframes slide-up{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
}
.breathe-head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.2rem}
.breathe-head h2{font-size:1.2rem;font-weight:600;margin:0}
.breathe-head p{margin:.35rem 0 0;font-size:.875rem;color:var(--muted);max-width:38ch}
.breathe-close{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);cursor:pointer;flex:none;
  border:.8px solid var(--line);border-radius:.5rem;padding:.35rem .55rem;margin-left:auto
}
.breathe-close:hover{color:var(--accent);border-color:var(--line-strong)}
.breathe-close:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.breathe-panel .breather{margin-top:1rem}
.breathe-more{margin:1rem 0 0;text-align:center;font-size:.8438rem}
.breathe-more a{color:var(--accent);font-weight:600;text-decoration:none}
.breathe-more a:hover{text-decoration:underline}

/* --------------------------------------------------- meditation pop-up */
.meditate-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.meditate-overlay[hidden]{display:none}
.meditate-backdrop{position:absolute;inset:0;background:rgba(10,13,17,.6);backdrop-filter:blur(3px)}
.meditate-panel{
  position:relative;width:min(36rem,100%);
  max-height:94vh;overflow-y:auto;
  background:var(--surface-solid);
  border:.8px solid var(--line-strong);border-bottom:0;
  border-radius:1.4rem 1.4rem 0 0;
  padding:1.4rem 1.4rem 2rem;
  box-shadow:0 -10px 60px rgba(0,0,0,.4);
  animation:slide-up .32s cubic-bezier(.22,1,.36,1)
}
@media (prefers-reduced-motion:reduce){.meditate-panel{animation:none}}
@media (min-width:640px){
  .meditate-overlay{align-items:center}
  .meditate-panel{border-radius:1.4rem;border-bottom:.8px solid var(--line-strong);box-shadow:0 24px 70px rgba(0,0,0,.4)}
}

.med-picker{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 0}
.med-picker .pill{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.8125rem}

.med-stage{
  margin:1.1rem 0 0;padding:1.5rem 1.4rem;
  background:linear-gradient(160deg,var(--panel-bg),var(--panel-bg-2));
  color:var(--panel-ink);border-radius:1.15rem;min-height:9.5rem;
  display:flex;flex-direction:column;justify-content:center
}
.med-cue{
  margin:0;font-family:var(--display);font-size:1.15rem;font-weight:600;
  line-height:1.45;color:var(--panel-ink);text-align:center
}
.med-progress{
  height:3px;border-radius:2px;background:rgba(255,255,255,.14);
  margin:1.1rem 0 0;overflow:hidden
}
.med-progress span{
  display:block;height:100%;width:0;
  background:var(--sand);transition:width .4s linear
}
.med-step{
  margin:.7rem 0 0;text-align:center;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--panel-muted)
}
.med-actions{margin:1rem 0 0;display:flex;justify-content:center}
.med-actions .btn{padding:.75rem 1.9rem;font-size:.9375rem}

.med-sound{margin:1.4rem 0 0;padding-top:1.2rem;border-top:.8px solid var(--line)}
.med-sound-row{display:flex;flex-wrap:wrap;gap:.4rem}
.med-sound-row .pill{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.8125rem}
.med-vol{display:flex;align-items:center;gap:.7rem;margin:.8rem 0 0}
.med-vol span{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);flex:none
}
.med-vol input{flex:1;accent-color:var(--accent);min-width:0}
.med-sound-note{margin:.7rem 0 0;font-size:.7813rem;color:var(--muted);line-height:1.6}

.med-caution{
  margin:1.3rem 0 0;padding:1rem 1.2rem;
  background:var(--surface);border:.8px solid var(--line);
  border-left:3px solid var(--sand);border-radius:.9rem
}
.med-caution p{margin:0;font-size:.8438rem;line-height:1.65;color:var(--muted)}
.med-caution p + p{margin-top:.6rem}
.med-caution strong{color:var(--ink)}
.med-refs{
  margin:1rem 0 0;text-align:center;font-size:.7813rem;color:var(--muted);line-height:1.7
}
.med-refs a{color:var(--accent);font-weight:600;text-decoration:none}
.med-refs a:hover{text-decoration:underline}

/* ------------------------------------------------------ breathing pacer */
.breather{
  margin:2rem 0 0;padding:1.6rem 1.5rem 1.8rem;
  background:linear-gradient(160deg,var(--panel-bg),var(--panel-bg-2));
  color:var(--panel-ink);border-radius:1.25rem;box-shadow:var(--shadow-md)
}
.breather-picker{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
.breather-picker .pill{
  color:var(--panel-muted);background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14)
}
.breather-picker .pill:hover{color:var(--panel-ink);border-color:rgba(255,255,255,.3)}
.breather-picker .pill[aria-pressed="true"]{
  color:var(--panel-bg);background:var(--sand);border-color:transparent
}
.breather-stage{
  position:relative;display:grid;place-items:center;
  height:15rem;margin:1.3rem 0 .2rem
}
.breather-sparkles{position:absolute;width:100%;height:100%;pointer-events:none}
.breather-orb{
  width:8.5rem;height:8.5rem;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,var(--sand),var(--accent-deep));
  box-shadow:0 0 3rem rgba(196,165,130,.35);
  transform:scale(.62);
  transition:transform linear;
}
.breather-cue{
  font-family:var(--display);font-size:1.05rem;font-weight:600;
  color:#fff;text-align:center;padding:0 .5rem;
  text-shadow:0 1px 6px rgba(0,0,0,.35)
}
.breather-ring{
  position:absolute;width:12.5rem;height:12.5rem;border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);pointer-events:none
}
.breather-desc{
  margin:1rem auto 0;max-width:44ch;text-align:center;
  font-size:.9063rem;color:var(--panel-muted)
}
.breather-actions{
  margin-top:1.2rem;display:flex;gap:.7rem;
  align-items:center;justify-content:center;flex-wrap:wrap
}
.breather-actions .btn{padding:.75rem 1.7rem;font-size:.9375rem}
.breather-count{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--panel-muted);min-width:7rem
}
.breather-note{
  margin:1.1rem auto 0;max-width:48ch;text-align:center;
  font-size:.8125rem;color:var(--panel-muted);line-height:1.65
}

/* ------------------------------------------------------------ slideshow */
.slides{margin:2rem 0 0}
.slides-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.slides-viewport::-webkit-scrollbar{height:6px}
.slides-viewport::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.slides-track{
  display:flex;gap:.9rem;list-style:none;margin:0;padding:0 0 .8rem
}
.slide{
  flex:0 0 100%;scroll-snap-align:start;
  background:var(--surface);border:.8px solid var(--line);border-radius:1.15rem;
  padding:1.6rem 1.5rem;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:.2rem
}
.slide-step{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:center
}
.slide figure{margin:.4rem 0 .9rem}
.slide h3{font-size:1.15rem;font-weight:600;text-align:center}
.slide p{margin:.6rem 0 0;font-size:.9375rem;color:var(--muted);text-align:center;max-width:42ch;align-self:center}
.slides-nav{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:.4rem}
.slides-nav button{
  width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;
  background:var(--surface);border:.8px solid var(--line-strong);color:var(--ink);
  font-size:1rem;line-height:1;display:grid;place-items:center;
  transition:border-color .18s,background .18s
}
.slides-nav button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.slides-nav button:disabled{opacity:.35;cursor:default}
.slides-nav button:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.slides-dots{display:flex;gap:.4rem}
.slides-dots button{
  width:.55rem;height:.55rem;border-radius:50%;padding:0;border:0;
  background:var(--line-strong);cursor:pointer;transition:background .18s,transform .18s
}
.slides-dots button[aria-current="true"]{background:var(--accent);transform:scale(1.35)}
/* Without JS the nav is useless, so it stays hidden until JS enables it. */
.slides-nav{display:none}
.slides.ready .slides-nav{display:flex}

@media (min-width:720px){
  .slide{padding:2rem 2rem}
}

/* -------------------------------------------------------------- footer */
footer{
  margin-top:5rem;padding:3.2rem 0 4rem;
  border-top:.8px solid var(--line);
  font-size:.875rem;color:var(--muted)
}
.foot-grid{display:grid;gap:1.8rem;margin-bottom:2.6rem}
@media (min-width:640px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.foot-grid{grid-template-columns:repeat(3,1fr)}}
.foot-grid h3{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:.7rem
}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:.35rem 0}
.foot-grid a{color:var(--ink);text-decoration:none;font-size:.875rem}
.foot-grid a:hover{color:var(--accent);text-decoration:underline}
.crisis{
  padding:1.15rem 1.35rem;background:var(--surface);
  border:.8px solid var(--line);border-radius:1rem;color:var(--ink);
  box-shadow:var(--shadow-sm)
}
.crisis p{margin:0;font-size:.9063rem}
.foot-note{max-width:64ch;margin:2rem 0 0;font-size:.8125rem;line-height:1.7}
.foot-meta{margin:1.6rem 0 0;font-size:.8125rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  /* The pacer still works — it just cues with words and a count
     instead of a moving orb. */
  .breather-orb{transform:scale(.85)!important}
  .slides-viewport{scroll-behavior:auto}
}

/* ------------------------------------------ print: just the article */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .nav,.toc,.related,footer,.skip,.crumbs{display:none}
  .wrap{max-width:none;padding:0}
  .prose h2,.prose h3{break-after:avoid}
  .keypoints{
    background:#fff!important;color:#000!important;
    border:1px solid #999;box-shadow:none
  }
  .keypoints li,.keypoints .kp-h{color:#000!important}
  .box,.disclaimer,table{box-shadow:none;border:1px solid #999;background:#fff!important}
  .faq details{border:1px solid #999;box-shadow:none;background:#fff!important}
  .faq details .answer{display:block}
  a{color:#000;text-decoration:underline}
}