/* ==========================================================
   GOOD BRAIN DAY
   Palette taken from the logo: deep navy #002B52, bright blue
   #1496C8. Never pure white or pure black, high-contrast
   extremes cause visual stress for many people after a TBI.
   ========================================================== */
:root{
  --paper:#EEF2F6;  --surface:#FBFCFE;  --surface-2:#E2EAF2;
  --ink:#132635;    --ink-2:#546A7C;    --line:#D2DDE7;
  --navy:#002B52;
  --accent:#0F6899; --accent-2:#1496C8; --accent-wash:#DFEDF7;
  --support:#0E7273; --support-wash:#DCEDED;
  --alert:#A9491F;  --alert-wash:#F5E3DA;
  --good:#1E7A4E;
  --shadow:0 1px 2px rgba(0,43,82,.04), 0 8px 24px rgba(0,43,82,.06);
  --shadow-lift:0 2px 4px rgba(0,43,82,.06), 0 16px 40px rgba(0,43,82,.10);
  --r:14px; --r-lg:20px;
  --measure:62ch;
  --step:1; --pace:1;
}
[data-theme="dark"]{
  --paper:#0B1B29;  --surface:#132637;  --surface-2:#1C3448;
  --ink:#DFE9F1;    --ink-2:#93A8BA;    --line:#254157;
  --navy:#DFE9F1;
  --accent:#68B9E8; --accent-2:#1496C8; --accent-wash:#16314A;
  --support:#5FB8B3; --support-wash:#123332;
  --alert:#DE9270;  --alert-wash:#3A2721;
  --good:#63BC8D;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 26px rgba(0,0,0,.26);
  --shadow-lift:0 2px 6px rgba(0,0,0,.34), 0 18px 44px rgba(0,0,0,.34);
}
[data-theme="warm"]{
  --paper:#EDE7DB;  --surface:#F6F1E8;  --surface-2:#DFD7C7;
  --ink:#302D26;    --ink-2:#5A5447;    --line:#CDC4B2;
  --navy:#302D26;
  --accent:#2A6183; --accent-2:#3C7C9E; --accent-wash:#DFE6E9;
  --support:#4A6B5C; --support-wash:#DEE6E0;
  --alert:#8E4A24;  --alert-wash:#E9DBCE;
  --good:#4A6B4E;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:calc(1.0625rem * var(--step));
  font-weight:400; line-height:1.8; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.face{
  font-family:"Atkinson Hyperlegible",-apple-system,"Segoe UI",system-ui,sans-serif;
  font-weight:700; line-height:1.2; letter-spacing:-.012em; color:var(--ink);
  text-wrap:balance;
}
h1{font-size:calc(2.4rem * var(--step)); margin:0 0 .45em}
h2{font-size:calc(1.55rem * var(--step)); margin:0 0 .6em}
h3{font-size:calc(1.15rem * var(--step)); margin:0 0 .45em}
h4{font-size:calc(1rem * var(--step)); margin:0 0 .35em}
p{margin:0 0 1.15em; text-wrap:pretty}
ul,ol{padding-left:1.25em; margin:0 0 1.3em}
li{margin-bottom:.6em}
a{color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1.5px}
a:hover{text-decoration-thickness:2.5px}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px; border-radius:6px}
/* The section wrappers get focus() called on them purely so screen
   readers announce the new page after navigating, never from an
   actual Tab press, since tabindex="-1" makes them unreachable that
   way. A fresh page load (no prior click) can make the browser show
   a focus ring for that programmatic call anyway, which reads as a
   stray border around the whole page until something is clicked.
   Real keyboard focus on buttons and links elsewhere is untouched. */
.view:focus{outline:none}

.skip{position:absolute; left:-9999px; top:.5rem; z-index:200;
  background:var(--accent); color:#fff; padding:.7em 1.1em; border-radius:10px}
.skip:focus{left:.6rem}

/* ---------- shell ---------- */
.wrap{width:min(100% - 2.4rem, 76rem); margin-inline:auto}

header.top{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)}
@supports not (backdrop-filter:blur(1px)){ header.top{background:var(--paper)} }
.top-in{display:flex; align-items:center; gap:.7rem; padding:.6rem 0}
.topchips{display:flex; align-items:center; gap:.7rem; flex:none}

/* When the logo and all three chips can't share a row, the chips move
   to their own centred row underneath rather than wrapping one at a
   time. Measured in JS, since the text-size control changes the widths.
   Brand and the chip row are each forced onto a full-width line of
   their own; the menu button and social pill are left as normal-width
   items so they share whatever line is left, menu on the left. */
.top-in.stacked{flex-direction:row; flex-wrap:wrap; align-items:center;
  justify-content:center; column-gap:.6rem; row-gap:.55rem; padding-bottom:.7rem}
.top-in.stacked .brand{flex:1 1 100%; justify-content:center; margin-right:0}
.top-in.stacked .topchips{flex:1 1 100%; justify-content:center; flex-wrap:wrap}
.top-in.stacked .navtoggle-compact{margin-left:0}
.top-in.stacked .socialbar{margin-left:auto}
.top-in.stacked .daymenu{right:auto; left:50%; transform:translateX(-50%)}
/* Icon-only brain-day chip once stacked, with the label gone it's
   narrow enough that all three display-setting chips fit on one line
   instead of wrapping to two. */
.top-in.stacked #chipLabel{display:none}
.top-in.stacked .daychip>button{gap:.3rem}

.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink); margin-right:auto}
.brand img{width:38px; height:38px; flex:none; display:block}
.bname{display:block; line-height:1.15}
.bname b{font-family:"Atkinson Hyperlegible",system-ui,sans-serif; font-size:calc(1.05rem*var(--step)); letter-spacing:-.015em; color:var(--ink)}
.bname span{display:block; font-size:calc(.63rem*var(--step)); color:var(--ink-2);
  letter-spacing:.13em; text-transform:uppercase; font-weight:400}

.iconbtn{appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  min-height:42px; padding:0 .75rem; border-radius:10px; cursor:pointer; font:inherit;
  font-size:calc(.8rem*var(--step)); display:inline-flex; align-items:center; gap:.4rem}
.iconbtn:hover{border-color:var(--accent-2); color:var(--accent)}

nav.main{background:var(--surface); border-bottom:1px solid var(--line); position:relative}
.navwrap{padding:.4rem 0}
.navlist{display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:thin}
.navlist button, .navlist a{appearance:none; border:0; background:transparent; color:var(--ink-2);
  font:inherit; font-size:calc(.87rem*var(--step)); font-weight:500; white-space:nowrap;
  padding:.5em .95em; min-height:44px; border-radius:999px; cursor:pointer}
.navlist button:hover, .navlist a:hover{background:var(--accent-wash); color:var(--accent)}
.navlist button[aria-current="page"], .navlist a[aria-current="page"]{background:var(--accent); color:#fff}
[data-theme="dark"] .navlist button[aria-current="page"],
[data-theme="dark"] .navlist a[aria-current="page"]{color:#0B1B29}

/* nav.main's own internal collapse+toggle has been superseded by the
   unified menu button living in the header itself (below), it now
   covers both the narrow layout and the compact-on-scroll layout, so
   nav.main is simply hidden outright whenever it would have shown its
   own separate toggle, rather than showing a second, redundant one. */
.navtoggle{display:none; appearance:none; align-items:center; gap:.6rem; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink); font:inherit;
  font-weight:500; font-size:calc(.9rem*var(--step)); line-height:1; min-height:44px;
  padding:.4em 1em; border-radius:11px}
.navtoggle:hover{border-color:var(--accent-2); color:var(--accent)}
.navtoggle .navbars{display:block; width:18px; height:13px; position:relative; flex:none; margin:0}
.navtoggle .navbars i{position:absolute; left:0; right:0; height:2.2px; border-radius:2px;
  background:currentColor; transition:transform calc(.2s*var(--pace)) ease, opacity .2s ease}
.navtoggle .navbars i:nth-child(1){top:0}
.navtoggle .navbars i:nth-child(2){top:5.4px}
.navtoggle .navbars i:nth-child(3){top:10.8px}
nav.main.open .navtoggle .navbars i:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
nav.main.open .navtoggle .navbars i:nth-child(2){opacity:0}
nav.main.open .navtoggle .navbars i:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}
nav.main.collapsed{display:none}

/* ---------- unified menu button ----------
   Shown in the header itself whenever the full nav bar isn't usable.
   The condition is deliberately tied to nav.main.collapsed, the very
   thing that hides the bar, rather than to the header's own stacking
   measurement. Those are two independent thresholds, and when the
   button keyed off .stacked alone there was a wide band of window
   widths where the nav bar had already collapsed but the header had
   not yet stacked, leaving no way to reach the navigation at all. */
.navtoggle-compact{display:none; margin-left:auto; flex:none}
body:has(nav.main.collapsed) .navtoggle-compact,
body.navcollapsed .navtoggle-compact,
.top-in.stacked .navtoggle-compact,
body.compact .navtoggle-compact{display:inline-flex}
/* Scrolling collapses the stacked layout back to a single row, the
   chips and social pill it would otherwise show are the whole reason
   it was stacked, and both are hidden below while compact anyway. */
body.compact .top-in.stacked{flex-wrap:nowrap; justify-content:flex-start; padding-bottom:.6rem}
body.compact .top-in.stacked .brand{flex:0 1 auto; justify-content:flex-start; margin-right:auto}
body.compact #topChips,
body.compact .socialbar{display:none}

/* The real nav bar has scrolled off by this point, so the menu opens
   as a panel pinned under the header instead. */
.navpanel{position:fixed; left:0; right:0; z-index:59; display:none;
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lift); padding:.6rem 0;
  max-height:calc(100vh - 5rem); overflow-y:auto; overscroll-behavior:contain}
.navpanel.on{display:block}
.navpanel .wrap{display:flex; flex-direction:column; gap:.15rem}
.navpanel button, .navpanel a{appearance:none; border:0; background:transparent; color:var(--ink-2);
  font:inherit; font-size:calc(.98rem*var(--step)); font-weight:500; text-align:left;
  padding:.7em 1em; min-height:44px; border-radius:11px; cursor:pointer; width:100%}
.navpanel button:hover, .navpanel a:hover{background:var(--accent-wash); color:var(--accent)}
.navpanel button[aria-current="page"], .navpanel a[aria-current="page"]{background:var(--accent); color:#fff}
[data-theme="dark"] .navpanel button[aria-current="page"],
[data-theme="dark"] .navpanel a[aria-current="page"]{color:#0B1B29}

/* ---------- back to top ---------- */
.totop{position:fixed; z-index:70; cursor:pointer; border:0;
  right:clamp(.9rem,3vw,1.8rem); bottom:clamp(.9rem,3vw,1.8rem);
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; box-shadow:var(--shadow-lift);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity calc(.25s*var(--pace)) ease, transform calc(.25s*var(--pace)) ease, visibility calc(.25s*var(--pace))}
[data-theme="dark"] .totop{color:#0B1B29}
body.scrolled .totop{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--accent-2)}

/* ---------- brain-day chip in the top bar ---------- */
.daychip{position:relative}

/* ---------- social links: header pill ----------
   One outlined pill matching the Text/Cool/brain-day buttons' shape,
   border and height, but no fill, so it reads as a lighter group
   alongside them rather than a fourth identical button. Each icon
   gets its own hover background; thin dividers separate the three. */
.socialbar{display:inline-flex; align-items:stretch; flex:none;
  border:1px solid var(--line); border-radius:10px; min-height:42px; overflow:hidden}
.socialbar a{display:inline-flex; align-items:center; justify-content:center;
  width:42px; padding:0; color:var(--ink-2)}
.socialbar a:not(:first-child){border-left:1px solid var(--line)}
.socialbar a:hover{background:var(--accent-wash); color:var(--accent)}
.socialbar a:focus-visible{outline:none; box-shadow:inset 0 0 0 3px var(--accent-2)}

/* ---------- social links: footer ---------- */
.sociallinks{display:flex; align-items:center; gap:.15rem}
.sociallinks a{display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; color:var(--ink-2); flex:none}
.sociallinks a:hover{background:var(--accent-wash); color:var(--accent)}
.sociallinks a:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.fcol .sociallinks.footer-social{gap:.3rem; margin-top:.9rem}
.fcol .sociallinks.footer-social a{width:42px; height:42px; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1}
.fcol .sociallinks.footer-social a:hover{border-color:var(--accent-2)}
.daychip>button{display:inline-flex; align-items:center; gap:.5rem}
.daychip .dots{display:flex; gap:.2rem; flex:none}
.daychip .dots i{width:5px; height:12px; border-radius:99px; background:var(--surface-2); display:block}
.daychip .dots i.f{background:var(--accent-2)}
.daychip .caret{width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-2px); flex:none}
.daymenu{position:absolute; right:0; top:calc(100% + .45rem); z-index:80; min-width:14rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lift); padding:.4rem; display:none}
.daymenu.on{display:block}
.daymenu p{margin:.35rem .6rem .5rem; font-size:calc(.72rem*var(--step)); color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.11em; font-weight:600}
.daymenu button{display:flex; width:100%; gap:.6rem; align-items:center; text-align:left; cursor:pointer;
  background:transparent; border:0; border-radius:10px; padding:.6rem .6rem; color:var(--ink);
  font:inherit; font-size:calc(.88rem*var(--step)); min-height:44px}
.daymenu button:hover{background:var(--accent-wash)}
.daymenu button[aria-checked="true"]{background:var(--accent-wash); color:var(--accent); font-weight:600}
.daymenu button small{display:block; color:var(--ink-2); font-size:calc(.74rem*var(--step)); font-weight:400}

main{padding:clamp(1.8rem,5vw,3.4rem) 0 6rem; min-height:70vh}
.view{display:none} .view.on{display:block}

/* ---------- THE LAYOUT FIX: prose column + aside rail ----------
   Text is never wider than a comfortable measure, but the rail
   fills the rest of the page so nothing looks half-finished. */
.layout{display:grid; gap:clamp(1.6rem,4vw,3.2rem); grid-template-columns:minmax(0,1fr); align-items:start}
@media (min-width:64rem){
  .layout{grid-template-columns:minmax(0,var(--measure)) minmax(15rem,20rem)}
}
.prose>*:last-child{margin-bottom:0}
.rail{display:flex; flex-direction:column; gap:1rem}
@media (min-width:64rem){ .rail{position:sticky; top:7.5rem} }
.rail.nosticky{position:static}

/* generous rhythm between blocks: the main cure for wall-of-text */
.block{margin:0 0 clamp(2.4rem,6vw,4rem)}
.block:last-child{margin-bottom:0}
.sub{margin:0 0 clamp(1.6rem,4vw,2.4rem)}
.sub:last-child{margin-bottom:0}

.eyebrow{font-family:"Lexend",sans-serif; text-transform:uppercase; letter-spacing:.16em;
  font-size:calc(.68rem*var(--step)); font-weight:600; color:var(--accent); margin:0 0 .9rem;
  display:flex; align-items:center; gap:.6rem}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line); max-width:6rem}
.lede{font-size:calc(1.2rem*var(--step)); color:var(--ink-2); line-height:1.68; font-weight:300; max-width:var(--measure)}

/* pull a key sentence out of the flow, breaks up long passages */
.keypoint{border-left:4px solid var(--accent-2); padding:.1rem 0 .1rem 1.25rem; margin:2rem 0;
  font-family:"Atkinson Hyperlegible",sans-serif; font-size:calc(1.14rem*var(--step));
  line-height:1.5; color:var(--ink)}
.keypoint p{margin:0}

/* ---------- cards & grids ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.15rem,3vw,1.6rem); box-shadow:var(--shadow)}
.card>*:last-child{margin-bottom:0}
.grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.grid-3{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}

.mini{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem}
.mini h4{color:var(--accent); margin-bottom:.3rem}
.mini p{font-size:calc(.9rem*var(--step)); color:var(--ink-2); margin:0; line-height:1.65}

/* stat / fact chips for the rail */
.fact{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem}
.fact h4{font-size:calc(.72rem*var(--step)); text-transform:uppercase; letter-spacing:.13em;
  font-family:"Lexend",sans-serif; font-weight:600; color:var(--ink-2); margin-bottom:.6rem}
.fact ul{margin:0; padding-left:1.1em}
.fact li{font-size:calc(.88rem*var(--step)); line-height:1.6; color:var(--ink-2); margin-bottom:.45em}
.fact li:last-child{margin-bottom:0}
.fact p{font-size:calc(.9rem*var(--step)); color:var(--ink-2); margin:0; line-height:1.65}

/* The "What this is" box sits in the main column rather than the
   sidebar, so its heading is set as a proper friendly title instead
   of the small uppercase label the sidebar cards use. */
.fact.intro{padding:1.4rem 1.5rem}
.fact.intro h4{font-family:"Atkinson Hyperlegible",sans-serif; font-weight:700;
  font-size:calc(1.35rem*var(--step)); line-height:1.2; letter-spacing:-.01em;
  text-transform:none; color:var(--ink); margin-bottom:.9rem}
.fact.intro p{font-size:calc(.96rem*var(--step)); line-height:1.7}

/* ---------- images ---------- */
figure{margin:0}
.figimg{display:block; width:100%; height:auto; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface-2)}
.figimg.cover{aspect-ratio:4/3; object-fit:cover}
.figimg.contain{aspect-ratio:4/3; object-fit:contain; padding:.9rem}
figcaption{font-size:calc(.75rem*var(--step)); color:var(--ink-2); margin-top:.65rem; line-height:1.55}

/* ---------- home hero ---------- */
.hero{display:grid; gap:clamp(1.6rem,4vw,3rem); align-items:center; grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(2rem,5vw,3.2rem)}
@media (min-width:60rem){ .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} }
.hero h1{font-size:clamp(2.1rem, 1.2rem + 3.4vw, 3.3rem); letter-spacing:-.02em; margin-bottom:.4em}
.hero .lede{font-size:calc(1.24rem*var(--step))}
.herologo{width:clamp(64px,9vw,92px); height:auto; display:block; margin-bottom:1.4rem}

/* ---------- check-in ---------- */
.checkin{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.2rem,3.5vw,1.8rem); box-shadow:var(--shadow)}
.checkin h2{font-size:calc(1.15rem*var(--step)); margin-bottom:.3em}
.dayrow{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr)); margin-top:1.1rem}
.daybtn{cursor:pointer; font:inherit; text-align:left; background:var(--paper);
  border:2px solid var(--line); border-radius:var(--r); padding:.8rem .9rem; color:var(--ink); min-height:44px}
.daybtn:hover{border-color:var(--accent-2)}
.daybtn[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-wash)}
.daybtn b{display:block; font-family:"Atkinson Hyperlegible",sans-serif; font-size:calc(.95rem*var(--step))}
.daybtn small{color:var(--ink-2); font-size:calc(.76rem*var(--step)); line-height:1.4; display:block}
.dial{display:flex; gap:.25rem; margin-bottom:.5rem}
.dial i{width:20px; height:6px; border-radius:99px; background:var(--surface-2); display:block}
.daybtn[aria-pressed="true"] .dial i.f{background:var(--accent-2)}

.calmbar{display:none; align-items:center; gap:.8rem; flex-wrap:wrap;
  background:var(--accent-wash); border:1px solid var(--accent-2); border-radius:var(--r);
  padding:.7rem 1rem; margin-bottom:1.6rem; font-size:calc(.88rem*var(--step))}
[data-calm="1"] .calmbar{display:flex}
[data-calm="1"]{--measure:54ch}
body.locked{overflow:hidden}

/* ---------- brain-day content tiers ----------
   good  = everything   mid = main content only   rough = essentials
   Default (nothing chosen yet) behaves as a good day. */
html:not([data-day="good"]) .when-good{display:none !important}
html:not([data-day="rough"]) .when-rough{display:none !important}
[data-day="rough"] .when-busy{display:none !important}

/* Swap long prose for a short version on rough days. */
[data-day="rough"] .t-long{display:none !important}
html:not([data-day="rough"]) .t-short{display:none !important}
/* Trim the tail of long bullet lists on rough days. */
[data-day="rough"] li.extra{display:none !important}
[data-day="rough"] .lede{font-size:calc(1.1rem*var(--step))}
.t-short p{font-size:calc(1.04rem*var(--step))}
.daymsg{margin:.9rem 0 0; font-size:calc(.82rem*var(--step)); color:var(--accent); line-height:1.55}

/* ---------- doorways ---------- */
.doors{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.door{display:flex; gap:.9rem; align-items:flex-start; text-align:left; width:100%; cursor:pointer; font:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.2rem; color:var(--ink); box-shadow:var(--shadow);
  transition:transform calc(.18s*var(--pace)) ease, box-shadow .18s ease, border-color .18s ease}
.door:hover{transform:translateY(-3px); border-color:var(--accent-2); box-shadow:var(--shadow-lift)}
.door svg{width:24px; height:24px; flex:none; color:var(--accent-2); margin-top:.15rem}
.door b{display:block; font-family:"Atkinson Hyperlegible",sans-serif; font-size:calc(1.02rem*var(--step)); margin-bottom:.2rem}
.door small{color:var(--ink-2); font-size:calc(.84rem*var(--step)); line-height:1.55; display:block}
.door.support svg{color:var(--support)}
.door.alert svg{color:var(--alert)}

/* ---------- accordions ---------- */
details.acc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:.65rem; overflow:hidden; box-shadow:var(--shadow)}
details.acc>summary{cursor:pointer; list-style:none; padding:1rem 1.2rem; min-height:44px;
  font-family:"Atkinson Hyperlegible",sans-serif; font-weight:700;
  font-size:calc(1.01rem*var(--step)); display:flex; align-items:center; gap:.75rem}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary:hover{background:var(--accent-wash)}
details.acc>summary::after{content:""; margin-left:auto; flex:none; width:11px; height:11px;
  border-right:2.2px solid var(--accent); border-bottom:2.2px solid var(--accent);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform calc(.2s*var(--pace)) ease}
details.acc[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
details.acc[open]>summary{border-bottom:1px solid var(--line)}
.acc-body{padding:1.3rem 1.2rem 1.4rem; display:grid; gap:1.4rem}
@media (min-width:52rem){ .acc-body{grid-template-columns:1fr 1fr} .acc-body .full{grid-column:1/-1} }
.acc-body>*>*:last-child{margin-bottom:0}
.tagpill{font-size:calc(.66rem*var(--step)); text-transform:uppercase; letter-spacing:.11em;
  font-weight:600; color:var(--accent); background:var(--accent-wash);
  padding:.28em .7em; border-radius:99px; font-family:"Lexend",sans-serif; flex:none}
.lbl{font-family:"Lexend",sans-serif; font-weight:600; font-size:calc(.72rem*var(--step));
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); margin:0 0 .7rem}
.feels p{font-size:calc(.97rem*var(--step)); color:var(--ink-2); line-height:1.7}
.helps{border-left:3px solid var(--accent-2); padding-left:1.1rem}
.forothers{border-left:3px solid var(--support); padding-left:1.1rem}
.acc-body ul{margin-bottom:0; padding-left:1.15em}
.acc-body li{font-size:calc(.94rem*var(--step)); line-height:1.65}

/* ---------- callouts ---------- */
.note{border-radius:var(--r); padding:1.1rem 1.3rem; border:1px solid var(--line); background:var(--surface)}
.note.warn{background:var(--alert-wash); border-color:var(--alert)}
.note.warn h3,.note.warn h4{color:var(--alert)}
.note.calmnote{background:var(--accent-wash); border-color:var(--accent-2)}
.note.carer{background:var(--support-wash); border-color:var(--support)}
.note.carer h3,.note.carer h4{color:var(--support)}
.note>*:last-child{margin-bottom:0}
.note ul{margin-bottom:0}

/* ---------- controls ---------- */
label{display:block; font-weight:500; font-size:calc(.85rem*var(--step)); margin-bottom:.35rem; color:var(--ink-2)}
input[type=text],input[type=number],select,textarea{
  width:100%; font:inherit; font-size:calc(.95rem*var(--step)); color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:11px;
  padding:.6rem .8rem; min-height:44px}
textarea{min-height:6rem; resize:vertical; line-height:1.7}
input:focus,select:focus,textarea:focus{border-color:var(--accent-2); outline:none; box-shadow:0 0 0 3px var(--accent-wash)}
.btn{appearance:none; cursor:pointer; font:inherit; font-weight:500;
  font-size:calc(.92rem*var(--step)); min-height:44px; padding:.55em 1.2em;
  border-radius:11px; border:1.5px solid var(--accent); background:var(--accent); color:#fff}
[data-theme="dark"] .btn{color:#0B1B29}
.btn:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn:disabled{opacity:.35; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--line)}
.btn.ghost:hover{background:var(--accent-wash); border-color:var(--accent-2); color:var(--accent)}
.btn.tiny{min-height:36px; padding:.28em .75em; font-size:calc(.78rem*var(--step)); border-radius:9px}
.btn.danger{background:transparent; border-color:var(--line); color:var(--alert)}
.btn.danger:hover{background:var(--alert-wash); border-color:var(--alert)}
.row{display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end}
.row>*{flex:1 1 9rem} .row>.fit{flex:0 0 auto}
.linky{background:none; border:0; padding:0; font:inherit; font-size:calc(.82rem*var(--step));
  color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* tap scale (replaces sliders, bigger targets, saves instantly) */
.scale{display:flex; gap:.4rem; margin-bottom:1.1rem}
.scale button{flex:1; min-height:46px; cursor:pointer; font:inherit; font-weight:600;
  font-size:calc(.95rem*var(--step)); background:var(--paper); color:var(--ink-2);
  border:1.5px solid var(--line); border-radius:11px}
.scale button:hover{border-color:var(--accent-2)}
.scale button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
[data-theme="dark"] .scale button[aria-pressed="true"]{color:#0B1B29}
.scaleends{display:flex; justify-content:space-between; font-size:calc(.72rem*var(--step)); color:var(--ink-2); margin:-.75rem 0 1.2rem}

/* ---------- tools ---------- */
.toolgrid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.toolcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.3rem; text-align:left; cursor:pointer; font:inherit; color:var(--ink);
  box-shadow:var(--shadow); transition:transform calc(.18s*var(--pace)) ease, box-shadow .18s ease, border-color .18s ease}
.toolcard:hover{transform:translateY(-3px); border-color:var(--accent-2); box-shadow:var(--shadow-lift)}
.toolcard .ic{width:34px; height:34px; display:block; margin-bottom:.85rem; color:var(--accent-2)}
.toolcard b{display:block; font-family:"Atkinson Hyperlegible",sans-serif; font-size:calc(1.02rem*var(--step)); margin-bottom:.25rem}
.toolcard small{color:var(--ink-2); font-size:calc(.85rem*var(--step)); line-height:1.55; display:block}
.toolpanel{display:none} .toolpanel.on{display:block}
.backbtn{margin-bottom:1.4rem}

.batt{height:32px; border:2px solid var(--ink); border-radius:9px; overflow:hidden;
  background:var(--paper); display:flex; margin:.9rem 0 .5rem}
.batt i{display:block; height:100%; background:var(--good); transition:width calc(.4s*var(--pace)) ease}
.batt i.over{background:var(--alert)}
.pill{display:inline-flex; align-items:center; gap:.5rem; background:var(--paper);
  border:1px solid var(--line); border-radius:99px; padding:.32rem .4rem .32rem .9rem;
  margin:0 .35rem .4rem 0; font-size:calc(.86rem*var(--step))}
.pill button{appearance:none; border:0; background:var(--surface-2); color:var(--ink-2); cursor:pointer;
  width:24px; height:24px; border-radius:99px; font:inherit; line-height:1}
.pill button:hover{background:var(--alert); color:#fff}

.clock{font-family:"Atkinson Hyperlegible",monospace; font-size:calc(3.8rem*var(--step));
  font-weight:700; line-height:1; letter-spacing:-.02em; text-align:center; margin:.3rem 0 .3rem;
  font-variant-numeric:tabular-nums}
.phase{text-align:center; font-size:calc(.95rem*var(--step)); color:var(--ink-2); margin-bottom:1.2rem}

/* breathing ring */
.bwrap{display:grid; place-items:center; padding:1rem 0 1.6rem}
.bstage{position:relative; width:min(300px,74vw); aspect-ratio:1}
.bstage svg{width:100%; height:100%; display:block; transform:rotate(-90deg); overflow:visible}
.btrack{fill:none; stroke:var(--surface-2); stroke-width:4; opacity:.7}
.barc{fill:none; stroke:var(--accent-2); stroke-width:7; stroke-linecap:round;
  transition:stroke-dashoffset linear, opacity .6s ease}
/* Soft layered bloom rather than a single hard circle: three
   translucent rings that grow and shrink together with the breath. */
.bcore{transform-origin:120px 120px; transform:scale(1);
  transition:transform linear}
.bhalo{fill:var(--accent-2); opacity:.09}
.bpetal{fill:var(--accent-2); opacity:.15}
.bbody{fill:var(--surface); stroke:var(--accent-2); stroke-width:1.5; opacity:.92}
.bcentre{position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none}
.bcount{font-family:"Atkinson Hyperlegible",sans-serif; font-weight:700;
  font-size:calc(3rem*var(--step)); color:var(--accent); font-variant-numeric:tabular-nums;
  line-height:1; transition:opacity .3s ease}
.bword{font-size:calc(.95rem*var(--step)); letter-spacing:.01em;
  color:var(--ink-2); margin-top:.55rem; font-weight:500}


.notes{display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr)); margin-top:1.1rem}
.note-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.95rem 1.05rem}
.note-item.pin{border-color:var(--accent-2); background:var(--accent-wash)}
.note-item p{font-size:calc(.92rem*var(--step)); margin:0 0 .7rem; white-space:pre-wrap; word-break:break-word}
.note-item time{display:block; font-size:calc(.7rem*var(--step)); color:var(--ink-2); margin-bottom:.5rem}

.step{display:flex; gap:.7rem; align-items:flex-start; padding:.55rem .1rem; border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step input[type=checkbox]{width:22px; height:22px; margin:.25rem 0 0; accent-color:var(--accent); flex:none}
.step span{flex:1; font-size:calc(.94rem*var(--step)); line-height:1.6}
.step.done span{color:var(--ink-2); text-decoration:line-through}
.prog{height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; margin:.7rem 0 0}
.prog i{display:block; height:100%; background:var(--accent-2); transition:width calc(.35s*var(--pace)) ease}

.reader{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.6rem,5vw,3rem); min-height:12rem; display:grid; place-items:center; text-align:center;
  box-shadow:var(--shadow)}
.reader p{font-size:calc(1.45rem*var(--step)); line-height:1.65; margin:0; max-width:34ch;
  font-family:"Atkinson Hyperlegible",sans-serif}
/* Fixed height, set once per text by JS to fit the longest piece, so
   moving between pieces changes the words and nothing else. */
.rcount{text-align:center; margin:0 0 1.1rem; min-height:1.5em; line-height:1.5;
  font-size:calc(.82rem*var(--step)); color:var(--ink-2)}

/* ---------- infographics ---------- */
.chartcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.2rem,3.5vw,1.9rem); box-shadow:var(--shadow); margin:1.6rem 0 0}
.chartcard .chart-svg{width:100%; height:auto; display:block}
.chartcard figcaption{margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:calc(.88rem*var(--step)); line-height:1.65; color:var(--ink-2)}
.chartcard figcaption strong{color:var(--ink)}

/* symptom icon shown before each accordion summary */
svg.symicon{width:calc(1.55rem*var(--step)); height:calc(1.55rem*var(--step));
  flex:none; color:var(--accent)}

/* ---------- share cards ---------- */
.cardgrid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.sharecard{background:var(--navy); border-radius:var(--r-lg); padding:1.6rem 1.5rem 1.3rem;
  display:flex; flex-direction:column; box-shadow:var(--shadow); position:relative; overflow:hidden}
[data-theme="dark"] .sharecard{background:#08161F; border:1px solid var(--line)}
[data-theme="warm"] .sharecard{background:#2E3A33}
.sharecard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#1496C8}
.sharecard blockquote{margin:0 0 .9rem; font-family:"Atkinson Hyperlegible",sans-serif; font-weight:700;
  font-size:calc(1.24rem*var(--step)); line-height:1.35; color:#FCFCFC; letter-spacing:-.01em}
.sharecard .why{font-size:calc(.87rem*var(--step)); line-height:1.6; color:#A9C6DA; margin:0 0 1.2rem}
.sharecard .foot{display:flex; align-items:center; gap:.5rem; margin-top:auto; padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.14); font-size:calc(.7rem*var(--step)); color:#9DBBD1; letter-spacing:.08em}
.sharecard .acts{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem}
.sharecard .acts button{flex:1 1 auto; min-height:40px; cursor:pointer; font:inherit;
  font-size:calc(.8rem*var(--step)); border-radius:9px; padding:.35em .8em;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#EAF3F9}
.sharecard .acts button:hover{background:rgba(20,150,200,.35); border-color:#1496C8}
.sharecard .acts button:focus-visible{outline:3px solid #1496C8; outline-offset:2px}
.tagrow{display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1.4rem}
.tagrow button{appearance:none; cursor:pointer; font:inherit; font-size:calc(.83rem*var(--step));
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  padding:.45em .95em; min-height:44px; border-radius:999px}
.tagrow button:hover{border-color:var(--accent-2); color:var(--accent)}
.tagrow button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
[data-theme="dark"] .tagrow button[aria-pressed="true"]{color:#0B1B29}

/* ---------- tech section ---------- */
.techcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.2rem 1.3rem; box-shadow:var(--shadow)}
.techcard h4{margin:0 0 .5rem; color:var(--ink)}
.techcard>p{font-size:calc(.89rem*var(--step)); color:var(--ink-2); margin:0 0 .9rem; line-height:1.6}
.techcard ul{margin:0; padding-left:1.15em}
.techcard li{font-size:calc(.89rem*var(--step)); line-height:1.6; margin-bottom:.55em}
.kit{display:inline-block; font-size:calc(.64rem*var(--step)); text-transform:uppercase; letter-spacing:.11em;
  font-weight:600; padding:.25em .6em; border-radius:99px; margin-right:.4rem; vertical-align:.1em}
/* Darker than --good: this text is small, so it needs 4.5:1, and the
   shared --good green only reaches 4.4:1 on this background. */
.kit.free{color:#14603B; background:var(--support-wash)}
[data-theme="dark"] .kit.free{color:var(--good)}
.kit.built{color:var(--accent); background:var(--accent-wash)}
.kit.buy{color:var(--alert); background:var(--alert-wash)}
.techcard .howbtn{display:inline-flex; align-items:center; gap:.55rem; margin-top:1rem; cursor:pointer;
  background:var(--accent); color:#fff; border:1.5px solid var(--accent); border-radius:11px;
  font:inherit; font-weight:500; font-size:calc(.87rem*var(--step)); min-height:44px; padding:.5em 1.1em}
[data-theme="dark"] .techcard .howbtn{color:#0B1B29}
.techcard .howbtn:hover{background:var(--accent-2); border-color:var(--accent-2)}
.techcard .howbtn.open{background:transparent; color:var(--accent); border-color:var(--line)}
.techcard .howbtn .chev{width:9px; height:9px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-1px,-2px); flex:none}
.techcard .howbtn.open .chev{transform:rotate(-135deg) translate(-2px,-1px)}
.howto{margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line)}
.howto h5{margin:0 0 .7rem; font-family:"Lexend",sans-serif; font-weight:600;
  font-size:calc(.74rem*var(--step)); letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.howto ol{margin:0 0 .9rem; padding-left:1.3em}
.howto ol li{font-size:calc(.89rem*var(--step)); line-height:1.65; margin-bottom:.6em}
.howto .tip{background:var(--accent-wash); border-radius:10px; padding:.75rem .9rem;
  font-size:calc(.85rem*var(--step)); line-height:1.6; margin:0}
.howto .path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;
  background:var(--surface-2); padding:.1em .4em; border-radius:5px; word-break:break-word}
.platrow{display:inline-flex; gap:.25rem; background:var(--surface-2); padding:.25rem;
  border-radius:999px; margin:0 0 1.6rem}
.platrow button{appearance:none; cursor:pointer; font:inherit; font-weight:500;
  font-size:calc(.88rem*var(--step)); min-height:44px; padding:.45em 1.3em; border-radius:999px;
  border:0; background:transparent; color:var(--ink-2)}
.platrow button[aria-pressed="true"]{background:var(--surface); color:var(--accent);
  box-shadow:var(--shadow)}
.platlabel{font-size:calc(.86rem*var(--step)); color:var(--ink-2); margin:0 0 .6rem}

/* ---------- directory ---------- */
.filters{display:flex; gap:.35rem; flex-wrap:wrap}
.filters button,.filters a{text-decoration:none; appearance:none; cursor:pointer; font:inherit; font-size:calc(.84rem*var(--step));
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  padding:.45em .95em; min-height:44px; border-radius:999px}
.filters button:hover,.filters a:hover{border-color:var(--accent-2); color:var(--accent)}
.filters button[aria-pressed="true"],.filters a.on{background:var(--accent); border-color:var(--accent); color:#fff}
[data-theme="dark"] .filters button[aria-pressed="true"],
[data-theme="dark"] .filters a.on{color:#0B1B29}
.orglist{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.org{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.15rem 1.25rem; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.org h4{margin:0 0 .45rem}
.org p{font-size:calc(.87rem*var(--step)); color:var(--ink-2); margin:0 0 .9rem; line-height:1.65}
.org .meta{display:flex; gap:.55rem; flex-wrap:wrap; align-items:center;
  font-size:calc(.79rem*var(--step)); margin-top:auto; padding-top:.3rem}
.flag{font-size:calc(.64rem*var(--step)); text-transform:uppercase; letter-spacing:.11em; font-weight:600;
  color:var(--ink-2); background:var(--surface-2); padding:.28em .65em; border-radius:99px}
.tel{font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); background:var(--surface); padding:clamp(2.4rem,5vw,3.4rem) 0 3rem;
  font-size:calc(.85rem*var(--step)); color:var(--ink-2)}
footer a{color:var(--accent)}
footer p{max-width:58ch}
.flegal{display:grid; gap:1.4rem 2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.flegal p{max-width:none; font-size:calc(.78rem*var(--step)); line-height:1.65; margin:0; color:var(--ink-2)}
.flegal p strong{color:var(--ink)}

/* ---------- legal accordion (mobile only) ----------
   On a wide screen this is forced open by JS and reads as a plain
   section. Below the breakpoint it becomes a collapsible <details>
   with a visible toggle, so three paragraphs don't sit unopened
   under the fold on a phone. */
.flegal-acc{margin:0 0 1.6rem}
.flegal-acc>summary{display:none; cursor:pointer; list-style:none; align-items:center; gap:.6rem;
  font-family:"Atkinson Hyperlegible",sans-serif; font-weight:700; color:var(--ink);
  font-size:calc(.92rem*var(--step)); min-height:44px; padding:.2rem 0}
.flegal-acc>summary::-webkit-details-marker{display:none}
.flegal-acc>summary::after{content:""; width:10px; height:10px; flex:none; margin-left:.1rem;
  border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2);
  transform:rotate(45deg); transition:transform calc(.2s*var(--pace)) ease}
.flegal-acc[open]>summary::after{transform:rotate(-135deg) translate(1px,1px)}
.flegal-acc.collapsed>summary{display:flex}
.flegal-acc.collapsed:not([open]) .flegal{display:none}
.flegal-acc.collapsed[open] .flegal{margin-top:1.1rem}
.fgrid{display:grid; gap:clamp(1.6rem,4vw,2.6rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid var(--line)}
.fbrand{display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem}
.fbrand img{width:32px; height:32px}
.fbrand b{font-family:"Atkinson Hyperlegible",sans-serif; font-size:calc(1rem*var(--step)); color:var(--ink)}
.fcol h3{font-size:calc(.72rem*var(--step)); text-transform:uppercase; letter-spacing:.13em;
  font-family:"Lexend",sans-serif; font-weight:600; color:var(--ink-2); margin-bottom:.9rem}
.fcol ul{list-style:none; padding:0; margin:0}
.fcol li{margin-bottom:.15rem}
.fcol a,.flink,a.flink{display:inline-block; padding:.4rem 0; color:var(--ink-2); text-decoration:none;
  background:none; border:0; font:inherit; font-size:calc(.86rem*var(--step)); cursor:pointer; text-align:left}
.fcol a:hover,.flink:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
a.fcontact,.fcontact{display:inline-flex; align-items:center; gap:.5rem; margin-top:.4rem;
  background:var(--accent); color:#fff; border:1.5px solid var(--accent); border-radius:11px;
  padding:.55em 1.15em; min-height:44px; font:inherit; font-size:calc(.88rem*var(--step));
  font-weight:500; cursor:pointer; text-decoration:none}
[data-theme="dark"] a.fcontact,[data-theme="dark"] .fcontact{color:#0B1B29}
a.fcontact:hover,.fcontact:hover{background:var(--accent-2); border-color:var(--accent-2)}
.fbase{display:flex; gap:1rem 2rem; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
  margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); font-size:calc(.78rem*var(--step))}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center;
  padding:clamp(.8rem,4vh,3rem) 1rem; overflow-y:auto;
  background:color-mix(in srgb, var(--navy) 55%, transparent)}
@supports not (background:color-mix(in srgb, red 50%, blue)){ .modal{background:rgba(0,20,40,.6)} }
.modal.on{display:flex}
.modal-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift); width:min(100%,38rem); padding:clamp(1.3rem,4vw,2rem); position:relative}
.modal-head{display:flex; gap:1rem; align-items:flex-start; margin-bottom:.5rem}
.modal-head h2{margin:0; flex:1; font-size:calc(1.45rem*var(--step))}
.modal-close{flex:none; width:44px; height:44px; border-radius:10px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-2); font-size:1.3rem; line-height:1}
.modal-close:hover{border-color:var(--accent-2); color:var(--accent)}
.field{margin-bottom:1.1rem}
.field .hint{font-size:calc(.76rem*var(--step)); color:var(--ink-2); margin:.35rem 0 0; line-height:1.5}
.field.bad input,.field.bad textarea{border-color:var(--alert); box-shadow:0 0 0 3px var(--alert-wash)}
.err{color:var(--alert); font-size:calc(.8rem*var(--step)); margin:.35rem 0 0; font-weight:500}
.formnote{border-radius:var(--r); padding:.9rem 1.1rem; margin-bottom:1.2rem; font-size:calc(.85rem*var(--step))}
.formnote.ok{background:var(--support-wash); border:1px solid var(--support); color:var(--ink)}
.formnote.no{background:var(--alert-wash); border:1px solid var(--alert); color:var(--ink)}
/* honeypot: reachable by bots, never by people or screen readers */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.checkline{display:flex; align-items:center; gap:.7rem; cursor:pointer; font-weight:400;
  color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:11px;
  padding:.8rem 1rem; min-height:52px; margin:0}
.checkline:hover{border-color:var(--accent-2)}
.checkline input{width:24px; height:24px; accent-color:var(--accent); flex:none; margin:0; cursor:pointer}
.field.bad .checkline{border-color:var(--alert); box-shadow:0 0 0 3px var(--alert-wash)}
.sending{opacity:.6; pointer-events:none}

.muted{color:var(--ink-2)}
.small{font-size:calc(.83rem*var(--step))}
.center{text-align:center}
.hidden{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
#printSheet{display:none}
@media print{
  header.top,nav.main,footer,.btn,.iconbtn,.filters,.totop,.navpanel{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .card,.org,.note-item{border:1px solid #999; box-shadow:none; break-inside:avoid}
  .layout{display:block}
  /* When a print sheet has been built, it is the only thing printed:
     no page furniture, no instructions, no entry form. */
  body.printing > *{display:none !important}
  body.printing #printSheet{display:block !important}
  #printSheet{color:#000; font-family:"Lexend",system-ui,sans-serif; font-size:11pt; line-height:1.5}
  #printSheet h1{font-size:17pt; margin:0 0 .15in}
  #printSheet .psmeta{font-size:9.5pt; color:#444; margin:0 0 .3in}
  #printSheet h2{font-size:12.5pt; margin:.25in 0 .08in; padding-bottom:.04in;
    border-bottom:1px solid #999; break-after:avoid}
  #printSheet ul{margin:0 0 .1in; padding-left:.25in}
  #printSheet li{margin-bottom:.07in; break-inside:avoid}
  #printSheet .psask{margin-top:.35in; padding:.14in .18in; border:1px solid #999; break-inside:avoid}
  #printSheet .psask h2{margin-top:0; border:0; padding:0}
  #printSheet .psfoot{margin-top:.3in; font-size:9pt; color:#555}
}


/* ---------- multi-page navigation ----------
   Section navigation used to be <button> elements driven by JavaScript.
   They are real links now, which is what lets the site work without
   JavaScript, but links carry a default underline that buttons do not. */
nav.main .navlist a, .navpanel a, .door, .toolcard, .brand{ text-decoration:none; }
.door, .toolcard{ color:inherit; }

/* ---------- cookie notice ----------
   Deliberately small: a single line of text and two buttons, sitting
   at the bottom of the screen rather than covering the page. It is
   not a modal, so nothing is blocked while it is showing. */
.cookiebar{position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(0,43,82,.10)}
[data-theme="dark"] .cookiebar{box-shadow:0 -6px 24px rgba(0,0,0,.34)}
.cookiebar-in{display:flex; align-items:center; gap:1rem 1.4rem; flex-wrap:wrap;
  justify-content:space-between; padding:.85rem 0}
.cookiebar p{margin:0; font-size:calc(.86rem*var(--step)); color:var(--ink-2);
  line-height:1.55; max-width:62ch}
.cookiebar a{color:var(--accent)}
.cookiebtns{display:flex; gap:.5rem; flex:none}
.cookiebar .btn{min-height:42px; padding:.45em 1.2em; font-size:calc(.85rem*var(--step))}
@media (max-width:34rem){
  .cookiebar-in{flex-direction:column; align-items:stretch; gap:.75rem}
  .cookiebtns{justify-content:stretch}
  .cookiebtns .btn{flex:1 1 auto}
}
@media print{ .cookiebar{display:none !important} }

/* ---------- suggestion prompt ----------
   A quiet invitation rather than a demand: it sits inline with the
   page rather than interrupting it, and reads as an offer to help. */
/* Blocks only carry a bottom margin, so this needs its own top margin:
   on some pages the element above it ends flush and the two touched. */
.block .suggestbox{margin-top:clamp(2.4rem,6vw,4rem)}
.suggestbox{display:flex; align-items:center; justify-content:space-between;
  gap:1rem 1.6rem; flex-wrap:wrap;
  background:var(--accent-wash); border:1px solid var(--accent-2);
  border-radius:var(--r-lg); padding:clamp(1.1rem,3vw,1.5rem)}
.suggestbox h3{font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:calc(1.12rem*var(--step)); color:var(--ink); margin:0 0 .35rem}
.suggestbox p{margin:0; color:var(--ink-2); font-size:calc(.9rem*var(--step));
  line-height:1.6; max-width:52ch}
.suggestbox .btn{flex:none}
@media (max-width:38rem){
  .suggestbox{flex-direction:column; align-items:stretch}
  .suggestbox .btn{width:100%}
}

/* Inputs inside the suggestion modal should fill the width, as the
   contact form's do. */
#communityModal input[type="email"],
#communityModal input[type="text"]:not([tabindex="-1"]),
#suggestModal input[type="url"],
#suggestModal input[type="email"],
#suggestModal input[type="text"]:not([tabindex="-1"]){ width:100% }


/* ---------- community creations ----------
   The featured creation sits at the top, with everything shared before
   it in a grid underneath. Clicking a card reloads the page with that
   one featured, which keeps the whole thing working without
   JavaScript. */
.creation{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.2rem,4vw,2rem); box-shadow:var(--shadow)}
.creation-img{margin:0 0 1.2rem}
/* Cap the height so a tall picture cannot push the writing off the
   screen. The whole image still shows, just scaled to fit. */
.creation-img img{width:100%; height:auto; max-height:60vh; object-fit:contain;
  display:block; border-radius:var(--r-md); background:var(--surface-2)}
.creation h2{margin-bottom:.3rem}
.creation-meta{color:var(--ink-2); font-size:calc(.88rem*var(--step)); margin:0 0 .8rem}
.creation-tags{display:flex; gap:.35rem; flex-wrap:wrap; margin:0 0 1.1rem}
/* Fills the card. The card itself provides the margins, so capping the
   text as well left a narrow column inside a wide box. On a very wide
   screen the card is what keeps the line length sane. */
.creation-text{font-size:calc(1.02rem*var(--step)); line-height:1.75; max-width:none}
.creation-text p{margin:0}

.creationgrid{margin-top:1.2rem}
.creationcard{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:border-color .18s ease, transform .18s ease}
.creationcard:hover{border-color:var(--accent-2); transform:translateY(-2px)}
.creationcard:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .creationcard:hover{transform:none} }
.creationcard-img{display:block; aspect-ratio:4/3; background:var(--surface-2); overflow:hidden}
.creationcard-img img{width:100%; height:100%; object-fit:cover; display:block}
.creationcard-body{display:block; padding:.95rem 1.05rem 1.1rem}
.creationcard-body b{display:block; font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:calc(1rem*var(--step)); color:var(--ink); margin-bottom:.3rem}
.creationcard-body small{display:block; color:var(--ink-2);
  font-size:calc(.87rem*var(--step)); line-height:1.6}
.creationcard-tags{display:block; margin-top:.6rem; color:var(--accent);
  font-size:calc(.74rem*var(--step)); text-transform:uppercase; letter-spacing:.09em; font-weight:600}


/* Portrait on the About page. Fixed aspect ratio so the layout does not
   shift while the picture loads. */
.portrait{margin:0 0 1.2rem}
.portrait img{width:100%; height:auto; display:block; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface-2)}


/* A long creation is shortened on the front of the page. The fade makes
   it obvious the text continues, rather than looking like it simply
   ends mid-sentence. */
.creation-text.is-clipped{position:relative; max-height:9.5em; overflow:hidden}
.creation-text.is-clipped::after{content:""; position:absolute; left:0; right:0; bottom:0;
  height:3.2em; background:linear-gradient(to bottom, transparent, var(--surface))}
.creation-more{margin:1.1rem 0 0}