/* Layout: an instrument, not a book. One search bar on every screen; a left rail on desktop and a tab bar on phones;
   every entry reads as its own page, and every answer is a ranked list of hypotheses with the evidence for each. */
/* Colors: the site's Forest palette and clay rose, the same values as src/theme.css (Andrew, 6 Nov 2026).
   Dark is the default; the library is its own app, so the values are repeated here. Change both together. */
:root{
  --bg:#F4EFE6; --surface:#FBF8F2; --sunk:#EAE3D6; --raised:#FBF8F2;
  --ink:#1B2420; --muted:#5A615C; --faint:#6E756F; --line:#D6CEBF; --line-strong:#BFB6A6;
  --accent:#2F5D46; --accent-ink:#F4EFE6; --accent-soft:#E3E8DC; --accent-line:#A9BDA5;
  --btn:#893D3D; --btn-ink:#F4EFE6; --dot:#893D3D; --band:#1B2420; --on-band:#F4EFE6; --band-line:rgba(244,239,230,.22);
  --mark:#EADFC2; --scrim:rgba(15,26,21,.42); --shadow:0 1px 2px rgba(27,36,32,.06),0 8px 28px rgba(27,36,32,.10);
  --ev-strong:#1A6B43; --ev-moderate:#1E676E; --ev-mixed:#855306; --ev-clinical:#535C6B; --ev-weak:#A23434;
  --f-display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:0px; --r-s:0px; --rail:252px; --bar:60px; --tabbar:0px;
}
:root[data-theme="dark"]{
  --bg:#0F1A15; --surface:#15241D; --sunk:#0B140F; --raised:#1B2D24;
  --ink:#ECE7DA; --muted:#A7B0A6; --faint:#8E998F; --line:#26382F; --line-strong:#33473C;
  --accent:#A9BDA5; --accent-ink:#0F1A15; --accent-soft:#1E3328; --accent-line:#4E6458;
  --btn:#2F5D46; --btn-ink:#ECE7DA; --dot:#E09D9A; --band:#15241D; --on-band:#ECE7DA; --band-line:rgba(236,231,218,.18);
  --mark:#4A4224; --scrim:rgba(4,8,6,.62); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.45);
  --ev-strong:#6CC79A; --ev-moderate:#6CC3C9; --ev-mixed:#E4B25F; --ev-clinical:#A9B3C2; --ev-weak:#F08A80; color-scheme:dark}
:root[data-theme="dark"] body{font-weight:440}


/* The shared menu bar and footer (src/site-chrome.css) read the site's names */
:root{--cl-bg:var(--bg);--cl-ink:var(--ink);--cl-muted:var(--muted);--cl-line:var(--line);--cl-band:var(--band);--cl-on-band:var(--on-band);
  --cl-accent:var(--accent);--cl-accent-band:#A9BDA5;--cl-dot:var(--dot);--font-sans:var(--f-body);--font-serif:var(--f-display)}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-body);margin:0;-webkit-font-smoothing:antialiased}
button,select,textarea,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:0}
h1,h2,h3{text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shell ---------- */
.rail{position:fixed;top:0;bottom:0;left:0;width:var(--rail);padding:calc(18px + env(safe-area-inset-top,0px)) 14px 18px max(14px, env(safe-area-inset-left,0px));border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:18px;overflow-y:auto;z-index:30}
.brand{display:flex;gap:10px;align-items:center;background:none;border:0;padding:4px 6px;text-align:left;color:var(--ink)}
.psi{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font:500 21px/1 var(--f-display)}
.brand b{display:block;font:600 16px/1.15 var(--f-display);letter-spacing:-.005em}
.brand small{display:block;font:700 12.5px/1.3 var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted)}
.nav{display:grid;gap:2px}
.nav button{display:flex;align-items:center;gap:12px;border:0;background:none;padding:9px 10px;border-radius:var(--r-s);color:var(--muted);font-weight:600;font-size:15px;text-align:left}
.nav button svg{flex:none;width:20px;height:20px}
.nav button:hover{background:var(--sunk);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--accent-soft);color:var(--ink)}
.nav button[aria-current="page"] svg{color:var(--accent)}
.railsec{display:grid;gap:4px}
.railsec h4{font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted);margin:0 10px 2px;display:flex;justify-content:space-between;align-items:baseline}
.railsec h4 button{border:0;background:none;color:var(--faint);font:inherit;text-transform:none;letter-spacing:0;padding:0}
.railsec h4 button:hover{color:var(--accent)}
/* a long name wraps rather than being cut off (13 Nov 2026) */
.railsec .ri{display:block;width:100%;border:0;background:none;text-align:left;padding:5px 10px;border-radius:var(--r-s);font-size:13.5px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.railsec .ri:hover{background:var(--sunk)}
.railsec .ri .k{color:var(--muted);font:700 12.5px var(--f-body);margin-right:6px;text-transform:uppercase}
.railsec .none{font-size:13px;color:var(--faint);padding:0 10px}
.railfoot{margin-top:auto;font-size:12px;color:var(--faint);padding:0 10px;line-height:1.45}

.app{margin-left:var(--rail);min-height:100vh}
.topbar{position:sticky;top:calc(var(--sc-stick,0px) + env(safe-area-inset-top,0px));z-index:25;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:10px;height:var(--bar);padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px))}
.topbar .brand{display:none}
.sbox{position:relative;flex:1 1 auto;max-width:none;min-width:0}
.sfield{display:flex;align-items:center;gap:8px;height:42px;border:1px solid var(--line-strong);background:var(--surface);border-radius:0;padding:0 6px 0 14px;transition:border-color .12s, box-shadow .12s}
.sfield:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sfield svg{flex:none;width:18px;height:18px;color:var(--faint)}
.sfield input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px;padding:0;height:100%}
.sfield input::-webkit-search-cancel-button{display:none}
.sfield input::placeholder{color:var(--faint)}
.sfield input:not(:placeholder-shown) ~ .kbd{display:none}
.kbd{font:500 11px var(--f-mono);color:var(--faint);border:1px solid var(--line);border-radius:0;padding:1px 6px}
.iconbtn{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--muted)}
.iconbtn:hover{background:var(--sunk);color:var(--ink)}
.iconbtn svg{width:19px;height:19px}
.topact{display:flex;align-items:center;gap:4px;margin-left:auto}
.cmpchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--ink);border-radius:0;padding:6px 12px;font-size:13.5px;font-weight:600}
.cmpchip b{font:600 12px var(--f-mono);background:var(--accent);color:var(--accent-ink);border-radius:0;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 5px}

/* suggestions */
.suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--raised);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:8px;max-height:min(70vh,620px);overflow:auto;z-index:40}
.sg-h{display:flex;justify-content:space-between;align-items:baseline;font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.sg-h button{border:0;background:none;font:500 12px var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted);padding:0}
.sg-h button:hover{color:var(--accent)}
.opt{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:8px 10px;border-radius:var(--r-s);color:var(--ink);min-height:40px}
.opt[aria-selected="true"],.opt:hover{background:var(--sunk)}
.opt .ic{flex:none;width:18px;height:18px;color:var(--faint)}
.opt .tx{flex:1;min-width:0}
.opt .tx b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt.wrap .tx b,.opt.wrap .tx span{white-space:normal}
.opt .tx span{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt .kd{flex:none;font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted)}
.opt .rm{flex:none;border:0;background:none;color:var(--faint);width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.opt .rm:hover{background:var(--line);color:var(--ink)}
.opt.all{color:var(--accent);font-weight:600;border-top:1px solid var(--line);border-radius:0 0 var(--r-s) var(--r-s);margin-top:6px}
.sg-close{display:none;justify-content:flex-end;padding:2px 6px 0}
.sg-try{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 10px}

/* ---------- page frame ---------- */
main{padding-top:28px;padding-bottom:calc(96px + var(--tabbar) + env(safe-area-inset-bottom,0px));padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px))}
.page{max-width:1080px;margin:0 auto}
.narrow{max-width:760px;margin:0 auto}
.eyebrow{font:700 13px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted)}
.h1{font:500 clamp(30px,4.2vw,44px)/1.08 var(--f-display);letter-spacing:-.015em;margin:6px 0 10px}
.h2{font:500 26px/1.2 var(--f-display);letter-spacing:-.01em;margin:0}
.sub{font-size:17px;color:var(--muted);max-width:62ch;margin:0}
.sec{margin-top:40px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.sec-h h2{font:500 22px/1.25 var(--f-display);margin:0}
.sec-h .n{font:400 12px var(--f-mono);color:var(--faint);margin-left:6px}
.meta{font-size:13.5px;color:var(--muted)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:600;font-size:14px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.backbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);font-weight:600;font-size:14px;padding:6px 8px 6px 2px;margin-bottom:10px}
.backbtn:hover{color:var(--ink)}
.backbtn svg{width:18px;height:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:0;padding:8px 15px;font-size:14px;font-weight:600;min-height:38px}
.btn:hover{border-color:var(--ink)}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.on{background:var(--accent-soft);border-color:var(--accent-line)}
.btn:disabled{opacity:.5;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:0;padding:6px 12px;font-size:14px;line-height:1.25;text-align:left}
.chip:hover{border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .n{font:400 11px var(--f-mono);opacity:.65}
.chip .x{opacity:.6;margin-left:2px}
.qchip{border-style:dashed;color:var(--muted)}
.qchip:hover{color:var(--ink);border-style:solid}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:0;padding:3px;background:var(--surface);gap:2px}
.seg button{border:0;background:none;border-radius:0;padding:6px 14px;font-size:14px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg .n{font:400 11px var(--f-mono);opacity:.7;margin-left:4px}
mark{background:var(--mark);color:inherit;border-radius:0;padding:0 2px}

/* evidence signal */
.ev{display:inline-flex;align-items:center;gap:7px;font:700 12.5px/1 var(--f-body);letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;color:var(--ev-c)}
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.sig i{width:3px;border-radius:0;background:currentColor;opacity:.22}
.sig i:nth-child(1){height:4px}.sig i:nth-child(2){height:7px}.sig i:nth-child(3){height:10px}.sig i:nth-child(4){height:12px}
.sig i.on{opacity:1}
.ev-strong{--ev-c:var(--ev-strong)}.ev-moderate{--ev-c:var(--ev-moderate)}.ev-mixed{--ev-c:var(--ev-mixed)}.ev-clinical{--ev-c:var(--ev-clinical)}.ev-weak{--ev-c:var(--ev-weak)}
.ev.quiet .lab{font-size:11px;letter-spacing:.06em}

/* rows / lists */
.list{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:start;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:13px 16px;text-align:left;color:var(--ink)}
.row:first-child{border-top:0}
.row:hover{background:var(--sunk)}
.row .t{font-weight:600;font-size:15.5px;min-width:0}
.row .d{grid-column:1 / -1;font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .w{grid-column:1 / -1;font-size:14px;color:var(--ink)}
.row .side{display:flex;align-items:center;gap:10px}
.kind{font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted)}
.grp{border-bottom:1px solid var(--line)}
.grp-h{margin:0;font:500 19px/1.3 var(--f-display);background:var(--bg)}
.grp.open > .grp-h{position:sticky;top:calc(var(--sc-stick,0px) + var(--bar) + env(safe-area-inset-top,0px));z-index:5}
.gbtn{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;border:0;background:none;text-align:left;padding:12px 4px 12px 0;color:var(--ink);font:inherit}
.gbtn:hover .gt{color:var(--accent)}
.gbtn svg{flex:none;width:20px;height:20px;color:var(--faint);transform:rotate(-90deg)}
.grp.open > .grp-h .gbtn svg{transform:none;color:var(--accent)}
.gbtn .gt{flex:1;min-width:0}
.gbtn .n{flex:none;font:400 12.5px var(--f-mono);color:var(--faint);font-variant-numeric:tabular-nums}
.gsub{margin:0 0 12px 30px;font-size:14px;color:var(--muted);max-width:66ch}
.gbody{padding:2px 0 22px}
.glist-h{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:28px;margin:4px 0 2px;border-bottom:1px solid var(--line);padding-bottom:6px}
.stage .grp{border-bottom:0}
.stage .grp-h{font-size:21px}
.stage .gbody{padding-bottom:4px}

/* hypotheses: the ranked answer */
.hyp{border:1px solid var(--accent-line);background:var(--surface);border-radius:var(--r);overflow:hidden}
.hyp-h{padding:16px 18px 14px;background:var(--accent-soft);border-bottom:1px solid var(--accent-line)}
.hyp-h .eyebrow{color:var(--accent)}
.hyp-h p{margin:4px 0 0;font:400 19px/1.35 var(--f-display)}
.hyp ol{list-style:none;margin:0;padding:0}
.hyp li{border-top:1px solid var(--line)}
.hyp li:first-child{border-top:0}
.hrow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 4px;width:100%;border:0;background:none;text-align:left;padding:13px 16px 13px 10px;color:var(--ink)}
.hrow:hover{background:var(--sunk)}
.hn{font:500 12px var(--f-mono);color:var(--accent);padding-top:4px;text-align:center}
.hrow .t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-weight:600;font-size:16px}
.hrow .w{grid-column:2;font-size:14.5px;color:var(--muted)}
.hyp-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13.5px;color:var(--muted)}
/* Talking instead of typing (13 Nov 2026): the same round mic as the
   reflection pages, resting in the bottom right corner of the box. */
.ta-mic-wrap{position:relative;display:block}
.ta-mic-wrap>textarea{display:block}
.mini-mic.ta-mic{position:absolute;right:10px;bottom:16px;width:42px;height:42px;border-radius:50%;border:0;background:var(--accent-soft);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.mini-mic.ta-mic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mini-mic.ta-mic:hover{background:var(--accent)}
.mini-mic.ta-mic:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mini-mic.ta-mic.live{background:var(--accent);box-shadow:0 0 0 0 var(--accent-soft);animation:tamicwave 1.6s ease-out infinite}
@keyframes tamicwave{to{box-shadow:0 0 0 14px transparent}}
@media (prefers-reduced-motion:reduce){.mini-mic.ta-mic.live{animation:none;outline:2px solid var(--accent);outline-offset:2px}}
.ta-mic-wrap>.ta-mic-st{margin:-4px 0 8px;min-height:0}
.ta-mic-wrap>.ta-mic-st:empty{display:none}
.tv-three .mini-mic.ta-mic{width:36px;height:36px;right:8px;bottom:10px}
.tv-three .mini-mic.ta-mic svg{width:16px;height:16px}
.askcard{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px 18px}
.askcard textarea{width:100%;min-height:72px;resize:vertical;margin:10px 0;padding:10px 60px 10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-s);background:var(--bg);color:var(--ink);font-size:15px}
.askcard .go{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.askres{margin-top:14px}

/* ---------- home ---------- */
.hero{padding:18px 0 6px}
.hero .h1{font-size:clamp(36px,6vw,60px);max-width:14ch}
.hero .sub{font-size:18px}
.tries{margin-top:18px}
.tries .lbl{display:block;margin-bottom:8px}
.lbl{font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:18px 20px;min-width:0}
.card h3{font:500 19px/1.3 var(--f-display);margin:0 0 6px}
.card p{margin:0;color:var(--muted);font-size:14.5px}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.door{display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:18px 20px;color:var(--ink);min-width:0}
.door:hover{border-color:var(--accent-line);background:color-mix(in srgb, var(--accent-soft) 40%, var(--surface))}
.door .lbl{color:var(--accent)}
.door b{font:500 20px/1.25 var(--f-display)}
.door span{font-size:14.5px;color:var(--muted)}
.door .go{margin-top:auto;padding-top:8px;color:var(--accent);font-weight:700;font-size:14px}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cat{display:flex;justify-content:space-between;gap:10px;align-items:baseline;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-s);padding:12px 14px;text-align:left;color:var(--ink);font-weight:600;font-size:14.5px}
.cat:hover{border-color:var(--accent-line)}
.cat .n{font:400 12px var(--f-mono);color:var(--faint)}
.resume{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r);padding:16px 18px}
.resume b{font:500 19px var(--f-display)}
.bar{height:5px;border-radius:0;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:0}
.histlist{display:grid;gap:6px}
.care{border-left:3px solid var(--ev-mixed);padding:4px 0 4px 16px;color:var(--muted);font-size:14.5px;max-width:72ch}
.care b{color:var(--ink)}
.confirm{display:inline-flex;gap:8px;align-items:center;font-size:13.5px}

/* ---------- entry ---------- */
.entry{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:48px;max-width:1040px;margin:0 auto}
.art{min-width:0;max-width:740px}
.art .h1{font-size:clamp(32px,4.4vw,46px)}
.aka{color:var(--muted);font-size:15px;margin:0 0 14px}
.evblock{display:grid;gap:6px;padding:12px 0 0;border-top:1px solid var(--line);margin-top:12px}
.evblock p{margin:0;font-size:14px;color:var(--muted);max-width:68ch}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.lead{font:400 21px/1.5 var(--f-display);margin:22px 0 4px;max-width:62ch}
.blk{margin-top:34px;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 20px)}
.blk > h2{font:500 22px/1.25 var(--f-display);letter-spacing:-.005em;color:var(--ink);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.blk p{margin:0 0 10px;max-width:68ch}
.signs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sign{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;font-size:15px;min-width:0}
.sign b{display:flex;align-items:center;gap:7px;font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.sign b svg{width:15px;height:15px}
.tells{display:grid;gap:10px}
.tell{display:grid;gap:4px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);padding:12px 16px}
.tell .h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tell p{margin:0;font-size:15px;color:var(--ink)}
.trybox{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-s);padding:14px 18px;font-size:15.5px}
.termlink{border:0;background:none;padding:0;color:var(--accent);font-weight:700;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.termlink.inl{font:inherit;display:inline;text-align:inherit}
.words{display:flex;flex-wrap:wrap;gap:6px}
.words button{border:1px dashed var(--line-strong);background:none;border-radius:0;padding:3px 11px;font-size:13.5px;color:var(--muted)}
.words button:hover{color:var(--ink);border-style:solid}
.origin{font-size:14.5px;color:var(--muted)}
.cites{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.cites li{font-size:14.5px}
.cites .yr{font:500 12.5px var(--f-mono);color:var(--accent);margin-right:8px}
.toc{position:sticky;top:calc(var(--sc-stick,0px) + var(--bar) + env(safe-area-inset-top,0px) + 28px);align-self:start;display:grid;gap:2px;font-size:13.5px}
.toc .lbl{margin-bottom:6px}
.toc a{color:var(--muted);text-decoration:none;padding:4px 0 4px 12px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--ink);border-color:var(--accent)}
.cand{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px;border-top:1px solid var(--line);padding:14px 0}
.cand:first-child{border-top:0;padding-top:4px}
.cand .h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.cand p{margin:4px 0 0;font-size:15px}

/* ---------- dictionary ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:18px 0 12px}
.filters{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 16px;display:grid;gap:12px;margin-bottom:14px}
.filters .lbl{display:block;margin-bottom:6px}
.az{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 6px}
.az a{font:700 14px var(--f-body);text-decoration:none;color:var(--muted);padding:4px 7px;border-radius:0}
.az a:hover{background:var(--sunk);color:var(--ink)}
[id^="az-"],.grp-h{scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 10px)}

/* ---------- learn ---------- */
.learn{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;max-width:1080px;margin:0 auto}
.chlist{position:sticky;top:calc(var(--sc-stick,0px) + var(--bar) + env(safe-area-inset-top,0px) + 24px);align-self:start;max-height:calc(100vh - var(--bar) - 48px);overflow:auto;font-size:14px}
.chlist ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:1px}
.chlist button{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:6px;align-items:baseline;width:100%;text-align:left;border:0;background:none;border-radius:var(--r-s);padding:7px 8px;color:var(--ink)}
.chlist button:hover{background:var(--sunk)}
.chlist button[aria-current="true"]{background:var(--accent-soft);font-weight:700}
.chlist .cn{font:500 11.5px var(--f-mono);color:var(--faint)}
.chlist .rd{font:500 11px var(--f-mono);color:var(--faint)}
.chlist .rd.done{color:var(--ev-strong)}
.chsel{display:none}
.doc{min-width:0;max-width:720px}
.doc .h1{font-size:clamp(30px,4vw,42px)}
.inch{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 24px}
.inch a{font-size:13px;border:1px solid var(--line);border-radius:0;padding:4px 11px;text-decoration:none;color:var(--muted);background:var(--surface)}
.inch a:hover{color:var(--ink);border-color:var(--line-strong)}
.chbody{font:400 18.5px/1.65 var(--f-display)}
.chbody p,.chbody li{max-width:66ch}
.chbody h3{font:600 23px/1.3 var(--f-display);margin:40px 0 10px;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 20px)}
.chbody ul,.chbody ol{padding-left:24px;display:grid;gap:8px}
.chbody strong{font-weight:600}
.chbody .termlink{font-weight:600}
.chbody .tablewrap{font:15px/1.5 var(--f-body)}
.chnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line);margin-top:48px;padding-top:20px}
.chnav button{display:grid;gap:2px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 16px;color:var(--ink)}
.chnav button:hover{border-color:var(--accent-line)}
.chnav button.next{text-align:right;background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.chnav button.next .lbl{color:inherit;opacity:.8}
.chnav b{font:500 17px/1.3 var(--f-display)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);margin:16px 0 28px}
table.data{border-collapse:collapse;width:100%;min-width:640px}
table.data th,table.data td{text-align:left;vertical-align:top;padding:12px 14px;border-top:1px solid var(--line);font-size:15px;line-height:1.5}
table.data thead th{border-top:0;font:700 12.5px var(--f-body);text-transform:uppercase;letter-spacing:.045em;color:var(--muted);background:var(--sunk)}
.loop{margin:18px 0 10px;max-width:760px}
.loop svg{width:100%;height:auto;display:block}
.loop .ln{stroke:var(--muted)} .loop .ln-fill{fill:var(--muted)}
.loop .bx{fill:none;stroke:var(--muted);stroke-width:1.25} .loop .bx-acc{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
.loop .t-ink{fill:var(--ink)} .loop .t-mut{fill:var(--muted)}

/* ---------- study / sources ---------- */
.stages{display:grid;gap:18px}
.stage{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;border-top:1px solid var(--line);padding-top:18px}
.stage .no{font:500 46px/1 var(--f-display);color:var(--accent)}
.stage h3{font:500 21px/1.25 var(--f-display);margin:6px 0 2px}
.stage .meta{margin-bottom:10px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-s);padding:12px 14px;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 20px)}
.step.done{background:var(--sunk)}
.step.done b{text-decoration:line-through;text-decoration-color:var(--faint)}
.tick{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;color:transparent;padding:0}
.tick svg{width:14px;height:14px}
.step.done .tick{background:var(--ev-strong);border-color:var(--ev-strong);color:var(--surface)}
.step p{margin:2px 0 6px;font-size:14.5px;color:var(--muted)}
.jump{display:flex;flex-wrap:wrap;gap:12px}
.jump a{font:600 13.5px var(--f-body);text-decoration:none}
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rcard{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-s);padding:14px 16px;display:grid;gap:4px;align-content:start;min-width:0;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 20px)}
.rcard .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.rcard h4{margin:0;font:500 17px/1.3 var(--f-display)}
.rcard h4 a{color:var(--ink);text-decoration-color:var(--line-strong);text-underline-offset:3px}
.rcard h4 a:hover{color:var(--accent)}
.rcard p{margin:4px 0 0;font-size:14.5px}
.pathtag{font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.tag{font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:0;padding:2px 6px}
.tag.study{color:var(--accent);border-color:var(--accent-line)}
.era{margin-top:30px}
.era h3{font:500 22px var(--f-display);margin:0;display:flex;gap:10px;align-items:baseline}
.era h3 .n{font:400 12px var(--f-mono);color:var(--faint)}
.tl{list-style:none;padding:0;margin:14px 0 0;border-left:2px solid var(--line);margin-left:5px}
.res{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:10px 0 14px;position:relative}
.res::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.res .yr{font:500 14px var(--f-mono);color:var(--accent);padding-left:16px;padding-top:2px;font-variant-numeric:tabular-nums}
.res p{margin:4px 0 8px;font-size:14.5px;max-width:70ch}
.res .rt{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.res .chips .chip{font-size:12.5px;padding:3px 9px}
.excl{display:grid;gap:10px;margin-top:12px}
.excl .card p{color:var(--ink)}

/* ---------- compare ---------- */
.cmpwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.cmpt{border-collapse:collapse;width:100%;min-width:calc(140px + var(--cols,2) * 260px)}
.cmpt th,.cmpt td{vertical-align:top;text-align:left;padding:12px 14px;border-top:1px solid var(--line);font-size:14.5px}
.cmpt thead th{border-top:0;font:500 19px/1.25 var(--f-display);background:var(--sunk)}
.cmpt tbody th{position:sticky;left:0;background:var(--surface);font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted);width:140px;box-shadow:1px 0 0 var(--line)}
.cmpt thead th:first-child{position:sticky;left:0;z-index:1}
/* On a phone the table stacks (13 Nov 2026: at 390 the second term sat off-screen
   with no sign it was there): each row's label, then each term's cell under its name. */
@media (max-width:640px){
  .cmpwrap{overflow:visible}
  .cmpt{min-width:0}
  .cmpt,.cmpt tbody,.cmpt tr,.cmpt th,.cmpt td{display:block;width:auto}
  .cmpt thead{display:none}
  .cmpt tbody th{position:static;box-shadow:none;background:var(--sunk);width:auto}
  .cmpt td{border-top:1px solid var(--line)}
  .cmpt td::before{content:attr(data-term);display:block;font:500 16px/1.3 var(--f-display);color:var(--ink);margin-bottom:6px}
}
.tellbar{display:grid;gap:8px;margin:0 0 16px}
.tellbar div{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-s);padding:10px 14px;font-size:14.5px}
.tellbar b{color:var(--accent)}

/* ---------- enneagram ---------- */
.enbox{background:var(--sunk);border-radius:var(--r);padding:16px}
.enrow{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center}
.enfig{width:100%;height:auto;display:block;max-width:420px;margin:0 auto}
.en-name{fill:var(--accent);font:600 13.5px var(--f-body);text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px} .en-name.me{font-weight:700}
.en-node:hover .en-name,.en-node:focus-visible .en-name{text-decoration-color:var(--accent)}
.en-ring{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.en-l{stroke:var(--line-strong);stroke-width:1.2}
.en-g{stroke:var(--ev-strong);stroke-width:3}
.en-s{stroke:var(--ev-weak);stroke-width:3;stroke-dasharray:7 5}
.en-ag{fill:var(--ev-strong)} .en-as{fill:var(--ev-weak)}
.en-node{cursor:pointer}
.en-n{fill:var(--surface);stroke:var(--muted);stroke-width:1.2}
.en-wn{fill:var(--surface);stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 2}
.en-me{fill:var(--accent);stroke:var(--accent);stroke-width:2}
.en-gn{fill:var(--surface);stroke:var(--ev-strong);stroke-width:3}
.en-sn{fill:var(--surface);stroke:var(--ev-weak);stroke-width:3}
.en-t{fill:var(--ink);font:600 15px var(--f-body)} .en-tme{fill:var(--accent-ink);font:700 16px var(--f-body)}
.en-node:hover circle{stroke-width:3}
.enkey{display:grid;gap:10px;min-width:0}
.enkey p{margin:2px 0 0;font-size:14.5px}
.enmove{border-left:4px solid var(--line);padding:2px 0 2px 12px}
.en-gm{border-color:var(--ev-strong)} .en-sm{border-color:var(--ev-weak);border-left-style:dashed} .en-wm{border-color:var(--accent);border-left-style:dotted}
.enlab{display:block;font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.en-gm .enlab{color:var(--ev-strong)} .en-sm .enlab{color:var(--ev-weak)}
.en-gtxt{color:var(--ev-strong);font-weight:700} .en-stxt{color:var(--ev-weak);font-weight:700}
.enbox .meta{font-size:13px}

/* ---------- floating ---------- */
.tabbar{display:none}
.float{position:fixed;right:max(18px, calc(env(safe-area-inset-right,0px) + 12px));bottom:calc(18px + var(--tabbar) + env(safe-area-inset-bottom,0px));z-index:28}
.float .iconbtn{background:var(--raised);border:1px solid var(--line);box-shadow:var(--shadow);width:40px;height:40px;color:var(--ink)}
.tray{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + var(--tabbar) + env(safe-area-inset-bottom,0px));z-index:29;display:flex;gap:8px;align-items:center;max-width:calc(100% - 140px);background:var(--ink);color:var(--bg);border-radius:0;padding:6px 6px 6px 16px;box-shadow:var(--shadow)}
.tray .names{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tray button{border:0;border-radius:0;padding:8px 14px;font-size:13.5px;font-weight:700;flex:none}
.tray .go{background:var(--btn);color:var(--btn-ink)}
.tray .clr{background:none;color:var(--bg);text-decoration:underline;padding:8px 8px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + var(--tabbar) + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--bg);border-radius:var(--r-s);padding:11px 16px;font-size:14px;max-width:calc(100% - 32px);display:grid;gap:8px;box-shadow:var(--shadow)}
.toast input{width:min(560px,78vw);padding:7px 9px;border-radius:0;border:0;background:var(--bg);color:var(--ink);font-size:13px}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,30%{background:var(--mark)}100%{background:transparent}}
/* A jumped-to section glows round its edge instead of filling, so its text never sits against a coloured edge (5 Nov 2026). */
.blk.flash{animation:flashring 1.6s ease-out;border-radius:0}
@keyframes flashring{0%,30%{box-shadow:0 0 0 14px var(--accent-soft)}100%{box-shadow:0 0 0 14px transparent}}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:35}


/* ---------- learning design ---------- */
.facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0 0;color:var(--muted);font-size:15px}
.facts b{font:500 24px var(--f-display);color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
.outcomes{margin:0;padding:0;list-style:none;counter-reset:o;display:grid;gap:10px;max-width:70ch}
.outcomes li{counter-increment:o;display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;font-size:16.5px}
.outcomes li::before{content:counter(o);font:500 20px/1.2 var(--f-display);color:var(--accent)}
.howgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.how{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-s);padding:14px}
.how b{display:block;font-size:15px}.how p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.partblk{margin-top:26px}
.parth h3{font:500 22px/1.25 var(--f-display);margin:2px 0 4px}
.parth p{margin:0 0 12px;color:var(--muted);font-size:15px;max-width:66ch}
.chrow .t{display:flex;gap:10px;align-items:baseline;font:500 18px/1.3 var(--f-display)}
.cnum{font:500 13px var(--f-mono);color:var(--accent);min-width:20px}
.chpart{margin-top:14px}.chpart:first-of-type{margin-top:4px}
.chpart .lbl{display:block;margin:0 8px 4px}
.chpart ol{margin-top:0}
.before{display:grid;gap:14px;margin:22px 0 10px}
.before h2,.lblk > h2{font:500 21px/1.25 var(--f-display);margin:0 0 10px}
.obj{border-left:3px solid var(--accent);padding:2px 0 2px 16px}
.obj ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:16px}
.kts{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px 18px}
.kts dl{margin:0;display:grid;gap:10px}
.kt{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:4px 16px;align-items:baseline}
.kt dt{font-weight:700;font-size:15.5px}.kt dd{margin:0;font-size:15px;color:var(--muted)}
.inch .lbl{align-self:center;margin-right:4px}
.lblk{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.takeaways ul{margin:0;padding-left:22px;display:grid;gap:8px;font-size:16.5px;max-width:66ch}
.quiz{display:grid;gap:14px}
.qcard{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px 18px}
.qn{font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--accent)}
.qq{margin:6px 0 12px;font:400 18px/1.45 var(--f-display)}
.qopts{display:grid;gap:8px}
.qopt{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;text-align:left;border:1px solid var(--line-strong);background:var(--bg);border-radius:var(--r-s);padding:11px 12px;font-size:15.5px;color:var(--ink)}
.qopt:not(:disabled):hover{border-color:var(--accent)}
.qopt:disabled{cursor:default}
.qk{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);font:700 12px var(--f-body);color:var(--muted)}
.qopt.right{border-color:var(--ev-strong);background:color-mix(in srgb, var(--ev-strong) 12%, var(--surface))}
.qopt.right .qk{background:var(--ev-strong);border-color:var(--ev-strong);color:var(--surface)}
.qopt.wrong{border-color:var(--ev-weak);background:color-mix(in srgb, var(--ev-weak) 10%, var(--surface))}
.qopt.wrong .qk{border-color:var(--ev-weak);color:var(--ev-weak)}
.qopt.dim{opacity:.6}
.qmark{color:var(--ev-strong)}.qmark svg{width:18px;height:18px}
.qwhy{margin-top:12px;font-size:15px;padding:10px 12px;border-radius:var(--r-s);background:var(--sunk)}
.qwhy.ok b{color:var(--ev-strong)}.qwhy.no b{color:var(--ev-weak)}

/* ---------- Learn: light motion (19 Oct 2026) ----------
   The course as four rings, one per part, a dot per chapter; a point
   circles the ring of the part you're in. Blocks fade up once as they come
   into view (ui.js adds .in), section rules draw in, the loop figure lights
   its steps in turn. Nothing moves under prefers-reduced-motion. */
.lhero{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px 40px;align-items:center}
.lrings{margin:0;text-align:center}
.lrings svg{width:100%;height:auto;display:block;overflow:visible}
.lrings figcaption{margin-top:4px;font-size:12.5px}
.lr-r{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.lr-r.cur{stroke:var(--accent-line);stroke-width:1.6}
.lr-d{fill:var(--surface);stroke:var(--faint);stroke-width:1.3}
.lr-d.read{fill:var(--accent);stroke:var(--accent)}
.lr-d.nx{fill:var(--surface);stroke:var(--accent);stroke-width:2}
.lr-c{fill:var(--accent)}
.lr-pt{fill:var(--accent)} .lr-glow{fill:var(--accent);opacity:.16}
.lr-n{font:500 9.5px var(--f-mono);fill:var(--faint);text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--bg);stroke-width:5px}
.readprog{position:sticky;top:calc(var(--sc-stick,0px) + var(--bar) + env(safe-area-inset-top,0px));z-index:5;height:2px;margin:-2px 0 0;background:transparent;pointer-events:none}
.readprog i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.chbody h3::before{content:"";display:block;width:28px;height:2px;margin-bottom:12px;background:var(--accent);transform-origin:left}
@media (max-width:760px){.lhero{grid-template-columns:minmax(0,1fr) 150px;gap:16px 20px}.lrings figcaption{display:none}}
@media (max-width:560px){.lhero{grid-template-columns:minmax(0,1fr)}.lrings{display:none}}
@media (prefers-reduced-motion:no-preference){
  .lhome.view-in .lr-r{stroke-dasharray:1;animation:lrdraw 1.1s cubic-bezier(.3,.6,.2,1) calc(var(--i) * .14s) both}
  .lhome.view-in .lr-d{transform-box:fill-box;transform-origin:center;animation:lrpop .4s ease-out calc(.5s + var(--i) * .05s) both}
  .lhome.view-in .lr-n,.lhome.view-in .lr-c{animation:lrfade .6s ease-out .3s both}
  .lhome.view-in .bar i{transform-origin:left;animation:lrbar .9s cubic-bezier(.3,.6,.2,1) .2s both}
  .lr-orb{transform-box:view-box;transform-origin:110px 110px;animation:lrorb 36s linear infinite}
  .lr-glow{transform-box:fill-box;transform-origin:center;animation:lrglow 3.2s ease-in-out infinite}
  .rv:not(.in){opacity:0;transform:translateY(10px)}
  .rv.in{transition:opacity .5s ease-out calc(var(--i,0) * .07s),transform .5s ease-out calc(var(--i,0) * .07s)}
  .chbody h3:not(.in)::before{transform:scaleX(0)}
  .chbody h3.in::before{transition:transform .6s cubic-bezier(.3,.6,.2,1) .1s}
  .loop .ln path{stroke-dasharray:1}
  .loop:not(.in) .ln path{stroke-dashoffset:1}
  .loop:not(.in) rect,.loop:not(.in) text{opacity:0}
  .loop.in rect,.loop.in text{transition:opacity .5s ease-out}
  .loop.in .ln path{transition:stroke-dashoffset .5s ease-out .4s}
  .loop.in rect.bx{animation:loopstep 12s ease-in-out calc(1.2s + var(--k,0) * 2s) infinite}
  .qcard.fresh .qwhy{animation:qin .35s ease-out both}
  .qcard.fresh .qmark path{stroke-dasharray:24;animation:qtick .45s ease-out .1s both}
  .qcard.fresh .qopt.right .qk,.qcard.fresh .qopt.wrong .qk{animation:lrpop .3s ease-out both}
  @keyframes lrdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes lrpop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
  @keyframes lrfade{from{opacity:0}to{opacity:1}}
  @keyframes lrbar{from{transform:scaleX(0)}to{transform:none}}
  @keyframes lrorb{to{transform:rotate(360deg)}}
  @keyframes lrglow{0%,100%{transform:scale(.7);opacity:.1}50%{transform:scale(1.15);opacity:.22}}
  @keyframes loopstep{0%,14%,100%{stroke:var(--muted)}4%,10%{stroke:var(--accent)}}
  @keyframes qin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @keyframes qtick{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
}
.levels{list-style:none;padding:0;margin:16px 0 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;font:15px/1.5 var(--f-body)}
.lvl{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px 18px;position:relative;min-width:0}
.lvl.key{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.lvl-n{font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--accent)}
.lvl h4{font:500 22px/1.2 var(--f-display);margin:2px 0 6px}
.lvl p{margin:0 0 10px;color:var(--muted)}
.lvl dl{margin:0;display:grid;gap:6px}
.lvl dt{font:700 12.5px var(--f-body);letter-spacing:.03em;color:var(--muted)}
.lvl dd{margin:0 0 4px;font-size:15px}
.lvl-tag{display:inline-block;margin-top:8px;font:700 12.5px var(--f-body);color:var(--accent-ink);background:var(--accent);border-radius:0;padding:3px 10px}
.chbody h4{font:600 19px/1.3 var(--f-display);margin:26px 0 6px}
.chbody .levels{padding-left:0;gap:12px}
.chbody .lvl h4{margin:2px 0 6px;font:500 22px/1.2 var(--f-display)}
.chbody .lvl p,.chbody .lvl dd{max-width:none}
.chbody > p > strong:only-child{font:600 19px/1.3 var(--f-display);display:block;margin-top:14px}


/* ---------- trustee ---------- */
.trlist{margin:0;padding-left:20px;display:grid;gap:8px}
.trband{display:grid;grid-template-columns:18px 150px minmax(0,1fr);gap:10px;align-items:center}
.trdot{width:14px;height:14px;border-radius:50%;background:color-mix(in srgb, var(--ev-strong) calc(var(--p) * 100%), var(--ev-weak))}
.trtake{max-width:640px;margin:0 auto}
.trtop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.trq{font:400 clamp(22px,3.2vw,28px)/1.35 var(--f-display);margin:8px 0 22px;text-wrap:pretty}
.trscene{font-size:clamp(19px,2.6vw,23px);line-height:1.5;margin:10px 0 22px}
.tropts{display:grid;gap:10px}
.trowner{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r);padding:16px 18px;margin-bottom:26px}
.trstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.trstats b{display:block;font:500 28px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.trstats span{font-size:13px;color:var(--muted)}
@media (max-width:640px){.trstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trplot{width:100%;max-width:300px;height:auto;display:block}
.trplot.sm{width:150px;flex:none}
.trp-bg{fill:var(--surface);stroke:var(--line-strong)}
.trp-t{fill:color-mix(in srgb, var(--ev-strong) 16%, var(--surface))}
.trp-e{fill:color-mix(in srgb, var(--ev-weak) 14%, var(--surface))}
.trp-o,.trp-y{fill:color-mix(in srgb, var(--ev-mixed) 12%, var(--surface))}
.trp-ln{stroke:var(--line-strong);stroke-width:1;fill:none}
.trp-l{font:600 12.5px var(--f-body);fill:var(--muted)}
.trp-ax{font:600 10.5px var(--f-body);fill:var(--faint)}
.trp-dot{fill:var(--accent);stroke:var(--surface);stroke-width:3}
.trlean{font-size:.55em;color:var(--muted);font-family:var(--f-display)}
.trtypes{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:20px;align-items:start}
.trtypes-list{display:grid;gap:12px}
.trtypes-list p{margin:2px 0 0;font-size:15px;color:var(--muted)}
.trtypes-list b{font:500 19px var(--f-display)}
@media (max-width:640px){.trtypes{grid-template-columns:minmax(0,1fr)}.trhero .trplot.sm{width:120px}}
.trall-p{margin-bottom:16px}
.trall{list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
.trall li{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,38%);gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:15px}
.trall li:first-child{border-top:0}
.trall-a{font-weight:700;color:var(--ink)}
.trall-q{color:var(--muted)}
@media (max-width:640px){.trall li{grid-template-columns:minmax(0,1fr)}.trall li{gap:2px}}
.notice{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px 16px;margin:0 auto 20px;max-width:1080px;font-size:14.5px;color:var(--muted)}
.notice-acts{display:flex;gap:12px;align-items:center}
.trnorm{margin:6px 0 0;font-size:14.5px;color:var(--muted);max-width:60ch}
.tropts.pair .tropt{font:400 19px/1.4 var(--f-display);padding:18px}
.tropt{display:flex;align-items:center;gap:12px;text-align:left;border:1.5px solid var(--line-strong);background:var(--surface);border-radius:var(--r);padding:15px 16px;font-size:16.5px;color:var(--ink);min-height:56px}
@media (hover:hover){.tropt:hover{border-color:var(--accent)}}
.tropt.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.tropt.on .qk{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tropt .qk{flex:none}
.trnav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.trhero{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:10px 0 6px}
.trbig{font:500 76px/1 var(--f-display);color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.trbig small{font-size:24px;color:var(--muted);margin-left:2px}
.trm{margin-bottom:20px}
.trm-h{display:flex;justify-content:space-between;align-items:baseline}
.trm-h b{font:500 21px var(--f-display)}
.trm-v{font:500 26px var(--f-display);font-variant-numeric:tabular-nums}.trm-v small{font-size:14px;color:var(--muted)}
.trm-v.trm-place{font-family:inherit;font-size:14px;font-weight:500;line-height:1.4;color:var(--muted);letter-spacing:.02em}
.trm-bar{position:relative;height:10px;border-radius:0;background:var(--line);margin:8px 0 6px}
.trm-bar i{position:absolute;inset:0 auto 0 0;border-radius:0;background:var(--accent)}
/* Self-checks on a model (6 Nov 2026): the two ends of a Big Five scale, and the schemas' domain headings. */
.tk-poles{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);margin:-2px 0 6px}
.tk-poles span:last-child{text-align:right}
.tk-group{font-size:16px;margin:26px 0 4px}
.trm-cut{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--bg)}
.trm p{margin:0;font-size:14.5px;color:var(--muted)}
.trlows{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.trlows li{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-s);padding:12px 14px;font-size:15.5px}
.trfreq{display:block;font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--ev-mixed);margin-bottom:3px}
.trlows .linkbtn{margin-left:4px;font-size:14px}
.trsafe{border:1px solid var(--ev-weak);border-left-width:4px;background:var(--surface);border-radius:var(--r-s);padding:14px 16px;margin:16px 0;font-size:15.5px}
.trnote{border-left:3px solid var(--ev-mixed);padding:4px 0 4px 14px;margin:14px 0;font-size:15px;color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .entry{grid-template-columns:minmax(0,1fr)} .toc{display:none}
}
@media (max-width:980px){
  :root{--tabbar:64px; --bar:58px}
  .rail{display:none}
  .app{margin-left:0}
  .topbar .brand{display:flex;padding:0}
  .topbar .brand b,.topbar .brand small{display:none}
  .topbar-in{gap:8px;padding-left:max(12px, env(safe-area-inset-left,0px));padding-right:max(10px, env(safe-area-inset-right,0px))}
  .kbd{display:none}
  main{padding-top:20px;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb, var(--surface) 94%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:4px max(4px, env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(4px, env(safe-area-inset-left,0px))}
  .tabbar button{display:grid;justify-items:center;gap:3px;border:0;background:none;padding:6px 0 4px;color:var(--faint);font:600 10.5px/1.1 var(--f-body);letter-spacing:-.01em;min-height:52px;border-radius:var(--r-s)}
  .tabbar button svg{width:22px;height:22px}
  .tabbar button[aria-current="page"]{color:var(--accent)}
  .tabbar button[aria-current="page"] span{color:var(--ink)}
  .suggest{position:fixed;left:0;right:0;top:calc(var(--sc-stick,0px) + var(--bar) + env(safe-area-inset-top,0px));bottom:0;border-radius:0;border:0;border-top:1px solid var(--line);max-height:none;padding:8px max(8px, env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(8px, env(safe-area-inset-left,0px));box-shadow:none}
  .sg-close{display:flex}
  .learn{grid-template-columns:minmax(0,1fr);gap:0}
  .chlist{display:none}
  .chsel{display:flex;gap:10px;align-items:center;margin-bottom:16px}
  .chsel select{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-s);background:var(--surface);font-size:15px}
  .doors{grid-template-columns:minmax(0,1fr)}
  .signs{grid-template-columns:minmax(0,1fr)}
  .stage{grid-template-columns:minmax(0,1fr);gap:6px}
  .howgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .levels{grid-template-columns:minmax(0,1fr)}
  .stage .no{font-size:34px}
  .float{right:max(14px, calc(env(safe-area-inset-right,0px) + 10px))}
  .tray{max-width:calc(100% - 90px);left:16px;transform:none}
}
@media (max-width:640px){
  .duo,.rgrid,.howgrid{grid-template-columns:minmax(0,1fr)}
  .kt{grid-template-columns:minmax(0,1fr)}
  .trband{grid-template-columns:18px minmax(0,1fr) auto}
  .hero .h1{font-size:40px}
  .lead{font-size:19px}
  .chbody{font-size:17.5px}
  .chnav{grid-template-columns:minmax(0,1fr)}
  .enrow{grid-template-columns:minmax(0,1fr)}
  .row{padding:12px 14px}
  .acts .btn{padding:7px 12px;font-size:13.5px;min-height:36px}
  .hyp-h p{font-size:17px}
  .hrow{grid-template-columns:34px minmax(0,1fr);padding-left:6px}
  .cand{grid-template-columns:34px minmax(0,1fr)}
  .res{grid-template-columns:52px minmax(0,1fr)}
  table.data{min-width:0}
  table.data thead{display:none}
  table.data, table.data tbody, table.data tr, table.data td{display:block;width:100%}
  table.data tr{border-top:1px solid var(--line);padding:16px 16px 14px}
  table.data tr:first-child{border-top:0}
  table.data td{border:0;padding:2px 0;font-size:16px;line-height:1.5}
  table.data td[data-label]::before{content:attr(data-label);display:block;font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted);margin:12px 0 2px}
  table.data td:first-child{font:500 20px/1.3 var(--f-display)}
  table.data td:first-child .termlink{font-weight:500}
  table.data td:first-child::before{display:none}
  .tablewrap{overflow-x:visible}
}
@media (prefers-reduced-motion:no-preference){
  .gbtn svg{transition:transform .16s ease}
  .row,.chip,.btn,.door,.cat,.opt,.hrow{transition:background-color .12s,border-color .12s,color .12s}
  .view-in{animation:viewin .22s ease-out}
  @keyframes viewin{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
}

/* ---------- Conscious Living frame ----------
   Psychology is a sub-brand: the guide keeps its own look inside, and the
   parent brand frames it with a strip above and the site footer below, in
   Conscious Living's own colours and type (Andrew, 14 Oct 2026). */
.clbar{background:var(--band);color:var(--on-band);font-family:var(--f-body)}
.clbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding:0 max(24px, env(safe-area-inset-right,0px)) 0 max(24px, env(safe-area-inset-left,0px))}
.clbar a{color:var(--on-band);text-decoration:none}
.clbar .cl-name{font-weight:800;font-size:14px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.clbar nav{display:flex;gap:18px;font:500 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;overflow-x:auto;scrollbar-width:none}
.clbar nav::-webkit-scrollbar{display:none}
.clbar nav a{opacity:.72;white-space:nowrap;padding:6px 0}
.clbar nav a:hover,.clbar nav a[aria-current="page"]{opacity:1}
.clbar nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--accent-line)}
.clbar-r{display:flex;align-items:center;gap:18px;min-width:0}
/* the site's menu in the strip: inline from 1201px, folded into "Menu" below (1000px until Masters made it seven, 2 Nov 2026) */
.clbar{position:relative;z-index:120}
.clbar .cl-plus{opacity:1;border:1px solid rgba(243,238,231,.34);padding:6px 10px}
.clbar .cl-plus:hover{border-color:var(--accent-line)}
.cl-menu{display:none}
.cl-menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--band-line);color:var(--on-band);font:500 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;min-height:30px;cursor:pointer;white-space:nowrap;user-select:none}
.cl-menu summary::-webkit-details-marker{display:none}
.cl-menu summary{vertical-align:top}
.cl-menu summary:hover,.cl-menu[open] summary{border-color:var(--on-band)}
.cl-burger{display:inline-grid;gap:4px;width:14px}
.cl-burger i{display:block;height:1.5px;background:currentColor;transition:transform .25s}
.cl-menu[open] .cl-burger i:first-child{transform:translateY(2.75px) rotate(45deg)}
.cl-menu[open] .cl-burger i:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.clbar .cl-drop{position:absolute;left:0;right:0;top:100%;display:grid;gap:0;overflow:visible;background:var(--band);border-top:1px solid var(--band-line);padding:4px max(24px, env(safe-area-inset-left,0px)) 18px;font:600 17px/1.2 var(--f-body);letter-spacing:-.01em;text-transform:none;box-shadow:0 18px 40px rgba(20,18,18,.28)}
.clbar .cl-drop a{opacity:1;padding:14px 0;border-bottom:1px solid rgba(243,238,231,.12)}
.clbar .cl-drop a:last-child{border-bottom:0}
.clbar .cl-drop a[aria-current="page"]{box-shadow:none;color:var(--accent-line)}
.clbar .cl-drop a.cl-plus{border:0;border-bottom:1px solid rgba(243,238,231,.12);padding:14px 0}
@media (max-width:1200px){.clbar .cl-links{display:none}.cl-menu{display:block}}
@media (prefers-reduced-motion:reduce){.cl-burger i{transition:none}}
.cl-theme{display:inline-flex;align-items:center;background:none;border:1px solid var(--band-line);color:var(--on-band);font:500 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;min-height:30px;cursor:pointer;white-space:nowrap}
.cl-theme:hover{border-color:var(--on-band)}
.cl-theme span{display:inline-flex;align-items:center;gap:6px}
.cl-theme svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.cl-theme .to-day{display:none}
:root[data-theme="dark"] .cl-theme .to-day{display:inline-flex} :root[data-theme="dark"] .cl-theme .to-night{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cl-theme .to-day{display:inline-flex}:root:not([data-theme="light"]) .cl-theme .to-night{display:none}}
.app > main{padding-bottom:72px}
a.row{text-decoration:none}
a.termlink{color:inherit}
.clfoot{background:var(--band);color:var(--on-band);font-family:var(--f-body);padding:48px max(24px, env(safe-area-inset-right,0px)) calc(32px + var(--tabbar) + env(safe-area-inset-bottom,0px)) max(24px, env(safe-area-inset-left,0px))}
.clfoot a{color:var(--on-band);text-decoration:none;opacity:.78}
.clfoot a:hover{opacity:1;color:var(--accent-line)}
.clfoot-in{display:grid;grid-template-columns:1.2fr repeat(5,minmax(0,1fr));gap:28px;max-width:1180px;margin:0 auto}
.clfoot-brand p{margin:6px 0 0;font-size:14px;opacity:.72}
.clfoot-name{font-weight:800;font-size:18px;opacity:1!important}
.clfoot-col{display:grid;align-content:start;gap:9px;font-size:14px}
.clfoot-h{margin:0 0 4px;font:500 11px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.clfoot-col .all{opacity:1;box-shadow:inset 0 -1px 0 var(--accent-line);justify-self:start}
.clfoot-note{max-width:1180px;margin:36px auto 0;padding-top:20px;border-top:1px solid var(--band-line);font-size:13px;line-height:1.5;opacity:.7}
.clfoot-bottom{max-width:1180px;margin:14px auto 0;display:flex;justify-content:space-between;gap:12px;font:500 11px/1.4 var(--f-body);letter-spacing:.08em;text-transform:uppercase;opacity:.6}
@media (max-width:1000px){.clfoot-in{grid-template-columns:repeat(2,minmax(0,1fr))}.clfoot-brand{grid-column:1 / -1}}
@media (max-width:560px){.clbar-in{padding:0 16px}.cl-drop{padding:4px 16px 16px}.clfoot-in{grid-template-columns:minmax(0,1fr)}.clfoot-bottom{flex-direction:column}}
/* the site's consent line, in the frame's colours */
.consent{position:fixed;left:22px;bottom:22px;z-index:200;width:min(calc(100vw - 44px),390px);background:var(--bg);color:var(--ink);border:1px solid var(--ink);box-shadow:0 20px 44px color-mix(in srgb,var(--ink) 16%,transparent);padding:20px 22px 18px;font-family:var(--f-body)}
.consent .lab{margin:0 0 10px;font:500 10px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.consent .lab::before{content:"";width:24px;height:1px;background:var(--accent-line)}
.consent .txt{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.consent-btns{display:flex;align-items:center;gap:20px;margin-top:16px}
.consent .c-ok{border:0;background:var(--btn);color:var(--btn-ink);font:700 13px var(--f-body);padding:11px 24px;border-radius:0}
.consent .c-ok:hover{background:var(--accent);color:var(--accent-ink)}
.consent .c-no{border:0;background:transparent;color:var(--accent);font:700 13px var(--f-body);text-decoration:underline;text-underline-offset:4px;padding:0}
/* both answers the same size, so no is as easy as yes (10 Nov 2026) */
.consent-btns{flex-wrap:wrap}
.consent .consent-btns .c-no{border:1.5px solid currentColor;padding:10px 18px;text-decoration:none;line-height:normal}
@media (max-width:980px){.consent{left:14px;right:14px;width:auto;bottom:calc(14px + var(--tabbar) + env(safe-area-inset-bottom,0px));padding:18px}}
/* phones: the slim bar from site-chrome.css, resting on the tab bar (14 Nov 2026) */
@media (max-width:640px){html #consent.consent{bottom:calc(var(--tabbar) + env(safe-area-inset-bottom,0px));padding-bottom:7px}}
a.ri,.nav a,.tabbar a,a.brand{text-decoration:none}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-s);color:var(--muted);font-weight:600;font-size:15px}
.nav a svg{flex:none;width:20px;height:20px}

/* questions to carry (14 Oct 2026) */
.inqlist{margin:0;padding:0;list-style:none;display:grid;gap:16px}
.inqlist li{display:grid;gap:4px;font:400 20px/1.4 var(--f-display);color:var(--ink)}
.inqlist li::before{content:attr(data-k);font:700 12.5px/1.4 var(--f-body);color:var(--accent);letter-spacing:.045em;text-transform:uppercase}
.inq .meta{margin-top:12px}
.inq-one{margin-top:16px;padding:14px 16px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r-s) var(--r-s) 0}
.inq-one p{margin:4px 0 0;font:400 19px/1.4 var(--f-display)}
@media (max-width:640px){.inqlist li{font-size:18.5px}}

/* Claude's reading at the top of search results (14 Oct 2026) */
.reading{border:1px solid var(--accent-line);border-radius:var(--r);background:var(--surface);padding:18px 20px 20px}
.reading .rd-sum{font:400 21px/1.45 var(--f-display);margin:6px 0 16px;color:var(--ink)}
.rd-wait{display:flex;align-items:center;gap:10px;color:var(--muted);margin:8px 0 0}
.rd-wait .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
@media (prefers-reduced-motion:no-preference){.rd-wait .dot{animation:rdpulse 1.2s ease-in-out infinite}@keyframes rdpulse{0%,100%{opacity:.25}50%{opacity:1}}}
@media (max-width:640px){.reading{padding:16px 14px 18px}.reading .rd-sum{font-size:19px}}

/* Search results and the reading in aspects (7 Nov 2026). Clean type:
   sentence-case labels; only the research ratings keep their capitals.
   The reading is a ledger: each thread of what was written on the left,
   the pages that fit it on the right; stacked on a phone. */
.srp .sr-lbl,.sr-lbl{display:block;margin:0;font:500 14px/1.4 var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.sr-what{margin:2px 0 14px;font:400 14px/1.45 var(--f-body);color:var(--faint);max-width:60ch}
.srp .sr-k{font:500 13px/1.3 var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.sr-title{font:400 clamp(28px,3.6vw,38px)/1.1 var(--f-display);letter-spacing:-.015em;margin:6px 0 14px}
.sr-said{border-left:2px solid var(--accent-line);padding:2px 0 2px 16px;max-width:66ch}
.sr-said p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.sr-said.clamp:not(.open) p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sr-more{margin:8px 0 0 18px;font-size:14px}
.sr-read{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.sr-sum{margin:8px 0 0;max-width:62ch;font-size:17.5px;line-height:1.6;color:var(--ink)}
.sr-h{margin:34px 0 4px;font:400 22px/1.25 var(--f-display);letter-spacing:-.005em;color:var(--ink)}
.sr-guide{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.sr-asp{display:grid}
.sr-th{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,25fr);gap:6px 28px;padding:18px 0 6px;border-top:1px solid var(--line)}
.sr-th:first-child{border-top:0}
.sr-th.bare{grid-template-columns:minmax(0,1fr)}
.sr-tl{margin:10px 0 0;font:400 20px/1.3 var(--f-display);color:var(--ink)}
.sr-pages{list-style:none;margin:0;padding:0}
.sr-pages li + li{border-top:1px solid var(--line)}
.sr-row,.sr-lead{display:grid;gap:3px;width:100%;border:0;background:none;text-align:left;padding:11px 10px 12px;margin:0 -10px;width:calc(100% + 20px);color:var(--ink);font:inherit}
.sr-row:hover,.sr-lead:hover{background:var(--surface)}
.sr-row:hover .sr-nm,.sr-lead:hover .sr-lead-n{text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px}
.sr-nm{font-weight:600;font-size:16px;line-height:1.35}
.sr-nm.sit{font:400 18px/1.35 var(--f-display)}
.sr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.sr-meta .ev{flex:none}
.sr-why{font-size:14.5px;line-height:1.5;color:var(--muted);max-width:60ch}
.sr-note{margin:14px 0 0;font-size:13.5px;color:var(--muted);max-width:62ch}
.sr-q{margin-top:26px}
.sr-q p{font-size:clamp(19px,2.2vw,22px)}
.sr-turn{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.sr-added{margin:4px 0 18px;padding-left:14px;border-left:2px solid var(--line);color:var(--muted);font-style:italic;max-width:62ch;overflow-wrap:anywhere}
.sr-morebox .lbl{display:block;margin-bottom:6px}
.sr-named{margin-top:22px;border-left-color:var(--accent);background:var(--surface)}
.sr-named .sr-row{margin:4px -10px 0}
.sr-named .sr-nm{font:400 clamp(22px,2.6vw,26px)/1.2 var(--f-display)}
.sr-named p{font:400 17px/1.55 var(--f-body);color:var(--ink);max-width:62ch}
.sr-named p.meta{margin-top:8px;font-size:14px;color:var(--muted)}
.sr-kept{margin-top:18px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* the tick beside "Saved to your account" had no size, so it filled the page (9 Nov 2026) */
.sr-kept svg{width:16px;height:16px;flex:none}
/* The tick in "Kept in your account" (checks.js ckKeep) had no size rule and filled its line (15 Nov 2026). Every drawing in ICON now carries width and height too. */
.ck-kept svg{width:16px;height:16px;flex:none;vertical-align:-3px}
.sr-plus{margin-top:22px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-s)}
.sr-plus p{margin:6px 0 8px;font-size:15.5px;line-height:1.55;color:var(--ink);max-width:62ch}
.sr-best{margin-top:22px;padding:28px 22px 22px;background:var(--surface);border:1px solid var(--line)}
.sr-best .sr-lead{padding-top:6px}
.sr-lead-n{font:400 clamp(24px,3vw,30px)/1.15 var(--f-display);letter-spacing:-.01em}
.sr-lead .sr-why{color:var(--ink);font-size:15.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sr-none{margin:0 0 6px;font-size:15.5px;color:var(--ink);max-width:62ch}
.srp .hyp-h .sr-lbl{color:var(--accent)}
@media (max-width:700px){
  .sr-h{font-size:19px;color:var(--muted)}
  .sr-th,.sr-th:first-child{grid-template-columns:minmax(0,1fr);gap:2px;padding-top:16px;margin-top:10px;border-top:2px solid var(--line-strong)}
  .sr-tl{margin:0;font-size:21px}
  .sr-best{padding:28px 16px 22px}
  .sr-sum{font-size:16.5px}
}

/* model figures (14 Oct 2026), drawn like the Enneagram figure */
.mfig{margin:0;background:var(--sunk);border-radius:var(--r);padding:16px}
.mf{width:100%;height:auto;display:block;max-width:520px;margin:0 auto;overflow:visible}
.mfig figcaption{text-align:center;margin-top:8px}
.mf-box,.mf-ring,.mf-venn{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.mf-venn{fill:var(--accent);fill-opacity:.06}
.mf-l{stroke:var(--line-strong);stroke-width:1.2}
.mf-arc{fill:none;stroke:var(--accent-line);stroke-width:1.5;stroke-dasharray:5 5}
.mf-wave{fill:none;stroke:var(--accent);stroke-width:2;opacity:.55}
.mf-ar{stroke:var(--accent);stroke-width:2.5} .mf-ahp{fill:var(--accent)}
.mf-hl{fill:var(--accent-soft);stroke:var(--accent-line);stroke-width:1.5}
.mf-node{fill:var(--surface);stroke:var(--muted);stroke-width:1.4}
.mf-nme{fill:var(--accent);stroke:var(--accent)}
.mf-dot{fill:var(--accent)} .mf-dot2{fill:var(--muted)}
.mf-pt{fill:var(--accent);stroke:var(--bg);stroke-width:2} .mf-pt-ring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.45}
.mf-step{fill:var(--sunk);stroke:var(--line-strong);stroke-width:1.2}
.mf-lab{fill:var(--ink);font:700 15px var(--f-body);paint-order:stroke;stroke:var(--sunk);stroke-width:5px;stroke-linejoin:round}
.mf-sub{fill:var(--muted);font:500 12.5px var(--f-body);paint-order:stroke;stroke:var(--sunk);stroke-width:4px;stroke-linejoin:round}
.mf-big{fill:var(--ink);font:500 34px var(--f-display)}
.mf-num{fill:var(--muted);font:700 15px var(--f-body)} .mf-num.on{fill:var(--accent-ink)}
.mf-link{fill:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px}
.mf-me{fill:var(--accent)}
.mf-a{cursor:pointer} .mf-a:hover .mf-link,.mf-a:focus-visible .mf-link{text-decoration-color:var(--accent)}
@media (max-width:640px){.mfig{padding:10px}.mf-lab{font-size:17px}.mf-sub{font-size:14px}}

/* model and Enneagram figures sit with the title (Andrew, 14 Oct 2026) */
.topfig{margin:18px 0 22px}

/* Psychology home: what's inside, the model gallery, Trustee (14 Oct 2026) */
.inside{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:16px 18px 18px}
.istats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;margin-top:10px}
.istats button{border:0;background:none;text-align:left;padding:10px 8px;border-radius:var(--r-s);display:grid;gap:2px;color:var(--ink)}
.istats button:hover{background:var(--sunk)}
.istats b{font:500 32px/1.05 var(--f-display);color:var(--accent)}
.istats span{font-size:13.5px;color:var(--muted);line-height:1.35}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mthumb{border:1px solid var(--line);border-radius:var(--r);background:var(--sunk);padding:12px 12px 10px;display:grid;gap:8px;text-align:left;color:var(--ink)}
.mthumb:hover{border-color:var(--accent-line)}
.mthumb-fig{display:block;height:160px;overflow:hidden;pointer-events:none}
.mthumb-fig svg{width:100%;height:160px;max-width:none}
/* Gallery glyphs (15 Oct 2026): shape only, big enough to read on a phone. */
.gl{width:100%;height:100%}
.gl-l,.gl-v,.gl-hl{fill:none;stroke:var(--ink);stroke-width:2}
.gl-v{fill:var(--accent);fill-opacity:.07;stroke-width:1.8}
.gl-hl{fill:var(--accent-soft);stroke:var(--accent)}
.gl-t{stroke:var(--muted);stroke-width:1.5}
.gl-n{fill:var(--sunk);stroke:var(--ink);stroke-width:1.8}
.gl-nme{fill:var(--accent);stroke:var(--accent);stroke-width:1.8}
.gl-af{fill:var(--accent)} .gl-dot{fill:var(--muted)}
.gl-ar{stroke:var(--accent);stroke-width:3} .gl-ahp{fill:var(--accent)}
.gl-w{fill:none;stroke:var(--accent);stroke-width:2.5}
.gl-num{fill:var(--ink);font:700 15px var(--f-body);text-anchor:middle} .gl-num.on{fill:var(--accent-ink)}
.gl-big{fill:var(--ink);font:500 34px var(--f-display);text-anchor:middle} .gl-big.on{fill:var(--accent)}
.gl-mid{fill:var(--ink);font:600 20px var(--f-body);text-anchor:middle} .gl-mid.on{fill:var(--accent-ink)}
.gl-let{fill:var(--ink);font:700 17px var(--f-body)}
.gl-ic *,.mf-ic *{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gl-ic .a,.mf-ic .a{stroke:var(--accent)} .gl-ic .f,.mf-ic .f{fill:var(--accent);stroke:none}
.gl-ic .d,.mf-ic .d{stroke-dasharray:2 2.5} .gl-ic .w,.mf-ic .w{stroke-width:3}
.mf-ic *{stroke:var(--muted)} .mf-ic.on *{stroke:var(--ink)}
/* Icons for the parts of a set: 32-unit line drawings, one accent each. */
.ic{width:22px;height:22px;flex:none;vertical-align:-6px;margin-right:8px}
.ic *{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic .a{stroke:var(--accent)} .ic .f{fill:var(--accent);stroke:none} .ic .d{stroke-dasharray:2 2.5} .ic .w{stroke-width:3}
/* A term's icon beside its name (7 Nov 2026), set in a small tile so it reads
   as the term's mark and lines up with the first line of the name. */
.thead{display:flex;align-items:flex-start;gap:16px;margin:6px 0 10px}
.thead .h1{margin:0;min-width:0}
.ticon{flex:none;display:grid;place-items:center;width:58px;height:58px;margin-top:2px;background:var(--sunk);border:1px solid var(--line)}
.ticon .ic.lg{width:38px;height:38px}
@media (max-width:560px){.thead{gap:12px}.ticon{width:46px;height:46px;margin-top:1px}.ticon .ic.lg{width:30px;height:30px}}
.ic.sm{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.chip .ic.sm{margin-right:6px}
.gt .ic{vertical-align:-5px}
.tv-crumb .ic.sm{vertical-align:-3px;margin-right:5px}
.sp-name .ic,.sr-nm .ic,.row .t .ic,.hrow .t .ic{width:20px;height:20px;vertical-align:-4px;margin-right:8px}
.sr-k .ic.sm *,.kind .ic.sm *{stroke:currentColor}
/* Two-axis grids in HTML (7 Nov 2026): the names and their lines wrap. */
.mquad{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:8px 10px}
.mq-y{grid-column:1;grid-row:1;display:grid;grid-template-rows:1fr 1fr}
.mq-y span,.mq-x span{font:500 12.5px/1.2 var(--f-body);color:var(--muted)}
.mq-y span{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;align-self:center;justify-self:center}
.mq-g{grid-column:2;grid-row:1;position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong);background:var(--bg)}
.mq-x{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;text-align:center}
.mq-c{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-height:136px;padding:18px 14px;text-align:center;min-width:0}
.mq-0,.mq-2{border-right:1px solid var(--line-strong)}
.mq-0,.mq-1{border-bottom:1px solid var(--line-strong)}
.mq-c.me{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent-line)}
.mq-c .ic.mq-i{width:32px;height:32px;margin:0 0 4px}
.mq-c .ic.mq-i *{stroke:var(--muted)} .mq-c .ic.mq-i .f{fill:var(--muted);stroke:none}
.mq-c.me .ic.mq-i *{stroke:var(--ink)} .mq-c.me .ic.mq-i .f{fill:var(--accent)} .mq-c.me .ic.mq-i .a{stroke:var(--accent)}
.mq-n{font:600 15.5px/1.25 var(--f-body);color:var(--ink);text-wrap:balance}
.mq-n.termlink{color:var(--accent);font-weight:600;text-align:center}
.mq-s{font:400 13.5px/1.35 var(--f-body);color:var(--muted);max-width:19ch;text-wrap:balance}
.mq-c.me .mq-s{color:var(--ink)}
.mq-ctr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;background:var(--surface);border:1px solid var(--line-strong);text-align:center;max-width:46%}
.has-ctr .mq-0,.has-ctr .mq-1{justify-content:flex-start;padding-bottom:44px}
.has-ctr .mq-2,.has-ctr .mq-3{justify-content:flex-end;padding-top:44px}
.mquad figcaption{grid-column:1/-1}
@media (max-width:560px){.mq-c{min-height:124px;padding:14px 8px;gap:4px}.mq-n{font-size:15px}.mq-s{font-size:13px}.mq-c .ic.mq-i{width:28px;height:28px}.mq-y span,.mq-x span{font-size:12px}}
.ic.lg{width:44px;height:44px;vertical-align:middle;margin:0}
.mg-list li[data-ic]{display:grid;grid-template-columns:30px 1fr;align-items:start}
.mg-list li[data-ic] .ic{margin:0;vertical-align:0}
.mg-list li[data-ic] small{grid-column:2}
.mg-list li.me[data-ic]::before{display:none}
.mg-list li.me[data-ic] .ic{background:var(--accent-soft);border-radius:0}
.mthumb-t{font-weight:700;font-size:15px}
.trcard{display:flex;gap:16px;align-items:center;justify-content:space-between;border:1px solid var(--accent-line);border-radius:var(--r);background:var(--accent-soft);padding:18px 20px}
.trcard h3{margin:2px 0 6px;font:500 24px/1.2 var(--f-display)}
.trcard p{margin:0;max-width:56ch}
@media (max-width:980px){.istats{grid-template-columns:repeat(2,minmax(0,1fr))}.istats button:last-child:nth-child(odd){grid-column:1/-1}.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.trcard{flex-direction:column;align-items:flex-start}.mthumb-fig,.mthumb-fig svg{height:120px}.istats b{font-size:28px}}

/* lists too long to draw (15 Oct 2026) */
.mgroups{padding:16px 18px 18px}
.mg-h{font:700 12.5px var(--f-body);letter-spacing:.045em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.mg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 18px}
.mg-grid.one .mg-list{columns:2 220px;column-gap:18px}
.mg-name{font:600 15px/1.3 var(--f-display);color:var(--ink);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line-strong)}
.mg-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mg-grid.one .mg-list{display:block}
.mg-list li{break-inside:avoid;padding:3px 0;font-size:15px;line-height:1.35}
.mg-list li small{display:block;color:var(--muted);font-size:13px}
.mg-list li.me{font-weight:700}
.mg-list li.me .termlink{color:var(--ink);text-decoration-color:var(--accent)}
.mg-list li.me::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:2px}
.mg-note{margin-top:12px}
.topfig .mfig + .mfig{margin-top:14px}

/* a term with its own field guide points to it (15 Oct 2026) */
.guidecard{display:grid;gap:4px;margin:16px 0 4px;padding:14px 16px;border:1px solid var(--accent-line);border-radius:var(--r);background:var(--accent-soft);color:var(--ink);text-decoration:none}
.guidecard b{font:500 19px/1.3 var(--f-display)}
.guidecard:hover{border-color:var(--accent)}
.byline{margin:14px 0 0;color:var(--muted);font-size:14px}
/* How this page was made (3 Nov 2026): the last line of every entry page. */
.made{margin:40px 0 8px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.6;max-width:72ch}
.made b{color:var(--ink);font-weight:600}
.made a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Why this library exists, on the library's front page (3 Nov 2026). */
.why p{max-width:66ch;line-height:1.65;margin:0 0 12px}
.why .why-by{color:var(--muted);font-size:14px;margin-top:4px}

/* a set folded near the end of a member's page (15 Oct 2026) */
.setfold{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-top:10px}
.setfold>summary{cursor:pointer;padding:12px 16px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.setfold>summary::-webkit-details-marker{display:none}
.setfold>summary::after{content:"Show";font:600 12.5px var(--f-body);color:var(--accent);letter-spacing:.04em;text-transform:uppercase}
.setfold[open]>summary::after{content:"Hide"}
.setfold .mfig{border-radius:0 0 var(--r) var(--r)}

/* Go deeper: one book, one talk, one study, each opening on another site. */
.deeper{display:grid;border-top:1px solid var(--line)}
.dp{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.dp:hover b{color:var(--accent)}
.dp-k{font:500 11px/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);padding-top:2px}
.dp-b{display:grid;gap:3px;min-width:0}
.dp-b b{font:600 17px/1.35 var(--f-display);overflow-wrap:anywhere}
.dp-by{color:var(--muted);font-size:14px}
.dp-w{font-size:15px;line-height:1.5}
.out{width:11px;height:11px;margin-left:6px;vertical-align:1px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
@media (max-width:560px){.dp{grid-template-columns:1fr;gap:4px}}

/* Who came from whom (15 Oct 2026). */
.ln-key{display:grid;gap:6px;margin:4px 0 16px;font-size:14px;color:var(--muted)}
.ln-key span{display:flex;align-items:center;gap:10px}
.ln-key svg{width:40px;height:8px;flex:none}
.ln-fig{margin:0 0 12px;background:var(--sunk);border-radius:var(--r);padding:14px 10px 8px}
.ln-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ln-svg{display:block;width:100%;min-width:960px;height:auto}
.ln-swipe{display:none;margin:6px 0 0}
@media (max-width:960px){.ln-swipe{display:block}}
.ln-row{stroke:var(--line);stroke-width:1}
.ln-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.ln-yr{fill:var(--faint);font:500 11px var(--f-mono);text-anchor:middle}
.ln-school{fill:var(--muted);font:700 11px var(--f-body);letter-spacing:.04em;text-transform:uppercase}
.ln-break{stroke:var(--faint);stroke-width:1.4;fill:none}
.ln-l{display:none}
.ln-l.on{display:inline}
.ln-l path{fill:none}
.ln-halo{stroke:var(--sunk);stroke-width:7;stroke-linecap:round}
.ln-direct{stroke:var(--ink);stroke-width:2.2}
.ln-built{stroke:var(--muted);stroke-dasharray:7 5;stroke-width:2}
.ln-parallel{stroke:var(--accent);stroke-dasharray:1.5 5;stroke-linecap:round;stroke-width:2.6}
.ln-end{fill:var(--ink)} .ln-end-built{fill:var(--muted)} .ln-end-parallel{fill:var(--accent)}
.ln-key .ln-direct,.ln-key .ln-built,.ln-key .ln-parallel{fill:none;stroke-width:1.8}
.ln-node{cursor:pointer;transition:opacity .15s}
.ln-svg.sel .ln-node:not(.on){opacity:.32}
.ln-node rect{fill:var(--surface);stroke:var(--line-strong);stroke-width:1}
.ln-node .ln-n{fill:var(--ink);font:700 13px var(--f-body)}
.ln-node .ln-w{fill:var(--muted);font:italic 400 10.5px var(--f-body)}
.ln-node:hover rect,.ln-node:focus-visible rect{stroke:var(--accent);stroke-width:1.5}
.ln-node.me rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
.ln-node:focus{outline:none}
button.ln-a{background:none;border:0;padding:0;font:inherit;cursor:pointer}
@media (prefers-reduced-motion: reduce){.ln-node{transition:none}}
.ln-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.ln-cards{grid-template-columns:minmax(0,1fr)}}
.ln-card{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface);scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 80px)}
.ln-card h3{margin:0 0 4px;font:600 19px/1.3 var(--f-display)}
.ln-card h3 .meta{font:400 14px var(--f-body);margin-left:6px}
.ln-card p{margin:0 0 8px;font-size:15px}
.ln-rel{margin:0 0 8px;padding-left:18px;font-size:14px;color:var(--muted);display:grid;gap:4px}
.ln-rel b{color:var(--ink);font-weight:600}
.ln-terms{font-size:14px;margin-top:6px}
.ln-terms .chips{margin-top:4px}
.ln-work{font-style:italic;color:var(--muted);margin:0 0 6px!important}
.ln-a{color:var(--accent);text-decoration:none;font-weight:600}
.ln-a:hover{text-decoration:underline}
.ln-terms .lbl,.lin-from .lbl{display:block;margin-bottom:2px}
.lin-from{margin:10px 0 0;font-size:15px}

/* Home: one tile per part of the library (15 Oct 2026). */
.xgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.xtile{display:flex;gap:12px;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px;color:var(--ink);min-width:0}
.xtile:hover{border-color:var(--accent-line)}
.xi{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.xi svg{width:20px;height:20px}
.xb{display:grid;gap:2px;min-width:0}
.xb b{font:600 17px/1.3 var(--f-display)}
.xb span{font-size:14px;line-height:1.45;color:var(--muted)}
.xb em{font-style:normal;font-weight:700;color:var(--ink)}

/* ---------- Home: figures and motion (19 Oct 2026) ----------
   The hero figure draws the method: one thing noticed, three explanations,
   the tell between the closest two. "How a search works" breaks the page
   with three small drawings. Tiles fade up as their icons draw. Phone 560
   and down, tablet 561 to 1000, desktop above. */
.hhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,360px);gap:16px 40px;align-items:center}
.hfig{margin:0;min-width:0}
.hfig svg{width:100%;height:auto;display:block;overflow:visible}
.hf-g0{stop-color:var(--accent);stop-opacity:.16} .hf-g1{stop-color:var(--accent);stop-opacity:0}
.hf-ring{fill:none;stroke:var(--line-strong);stroke-width:1}
.hf-ring.out{stroke-dasharray:2 5}
.hf-br{fill:none;stroke:var(--accent-line);stroke-width:1.4}
.hf-tl{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 4;opacity:.7}
.hf-tm{fill:var(--bg);stroke:var(--accent);stroke-width:1.4;stroke-linejoin:round}
.hf-lab{font:500 10.5px var(--f-mono);fill:var(--muted);dominant-baseline:central;paint-order:stroke;stroke:var(--bg);stroke-width:4px}
.hf-lab.mid{text-anchor:middle}
.hf-n circle{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.4}
.hf-n.n1 circle{fill:var(--accent);stroke:var(--accent)}
.hf-n.n2 circle{stroke:var(--accent)}
.hf-n text{font:600 11px var(--f-mono);fill:var(--muted);text-anchor:middle;dominant-baseline:central}
.hf-n.n1 text{fill:var(--accent-ink)} .hf-n.n2 text{fill:var(--accent)}
.hf-c,.hf-sig,.hf-op{fill:var(--accent)}
.hf-rip{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:0}
.hf-sig{opacity:0}
.hf-oh{fill:var(--accent);opacity:.14}
.hsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hstep{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:0;position:relative;overflow:hidden;display:flex;flex-direction:column}
.hstep::before{content:"";position:absolute;left:18px;top:0;width:32px;height:2px;background:var(--accent);transform-origin:left;z-index:1}
.hs-art{display:grid;place-items:center;height:124px;background:var(--sunk);border-bottom:1px solid var(--line)}
.hs-art svg{display:block;width:150px;height:90px;overflow:visible}
.hs-tx{padding:16px 18px 18px}
.hstep b{display:block;font:500 19px/1.25 var(--f-display);margin:2px 0 4px}
.hstep p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.hs-no{font:500 12px var(--f-mono);color:var(--accent)}
.hs-ln,.hs-tr,.hs-br{fill:none;stroke:var(--line-strong);stroke-width:5;stroke-linecap:round}
.hs-br{stroke-width:1.4;stroke:var(--accent-line)}
.hs-tr{stroke:var(--line);stroke-width:7}
.hs-fl{fill:none;stroke:var(--accent-line);stroke-width:7;stroke-linecap:round}
.hs-fl.on{stroke:var(--accent)}
.hs-caret{stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.hs-c,.hs-sig{fill:var(--accent)} .hs-sig{opacity:0}
.hs-nd{fill:var(--sunk);stroke:var(--line-strong);stroke-width:1.4}
.hs-nd.on{fill:var(--accent);stroke:var(--accent)}
.xgrid > :nth-child(2){--i:1} .xgrid > :nth-child(3){--i:2} .xgrid > :nth-child(4){--i:3} .xgrid > :nth-child(5){--i:4} .xgrid > :nth-child(6){--i:5} .xgrid > :nth-child(7){--i:6}
/* An odd last tile (the money self-check, 19 Oct 2026) spans the row, so no column sits empty. */
.xgrid > :nth-child(7):last-child{grid-column:1/-1}
@media (max-width:1000px){.hhero{grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:12px 24px}}
@media (max-width:760px){.hsteps{grid-template-columns:minmax(0,1fr)}.hstep{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:stretch}.hs-art{height:auto;min-height:100%;border-bottom:0;border-right:1px solid var(--line)}.hs-art svg{width:104px;height:62px}.hs-tx{padding:16px 18px}}
@media (max-width:560px){.hhero{grid-template-columns:minmax(0,1fr)}.hfig{width:min(100%,250px);margin:6px auto -10px}.hstep{grid-template-columns:96px minmax(0,1fr)}.hs-art svg{width:80px;height:48px}.hs-tx{padding:14px 16px}}
@media (hover:hover){.xi{transition:transform .25s ease}.xtile:hover .xi{transform:scale(1.08)}}
@media (prefers-reduced-motion:no-preference){
  .phome.view-in .hhero-t > *{animation:hrise .7s cubic-bezier(.2,.7,.2,1) both}
  .phome.view-in .hhero-t > :nth-child(2){animation-delay:.07s} .phome.view-in .hhero-t > :nth-child(3){animation-delay:.14s} .phome.view-in .hhero-t > :nth-child(4){animation-delay:.21s}
  .phome.view-in .hf-ring{stroke-dasharray:1;animation:lrdraw 1.2s cubic-bezier(.3,.6,.2,1) calc(var(--i) * .15s) both}
  .phome.view-in .hf-ring.out{animation:lrfade 1s ease-out .3s both}
  .phome.view-in .hf-br{stroke-dasharray:1;animation:lrdraw .8s ease-out calc(.5s + var(--i) * .15s) both}
  .phome.view-in .hf-n{transform-box:fill-box;transform-origin:center;animation:lrpop .45s cubic-bezier(.3,1.4,.5,1) calc(.9s + var(--i) * .15s) both}
  .phome.view-in .hf-tl,.phome.view-in .hf-tm,.phome.view-in .hf-lab{animation:lrfade .8s ease-out 1.4s both}
  .phome.view-in .hf-glow{animation:lrfade 1.4s ease-out both}
  .hf-glow{transform-box:fill-box;transform-origin:center;animation:hbreathe 7s ease-in-out infinite}
  .hf-orb{transform-box:view-box;transform-origin:180px 158px;animation:lrorb 40s linear infinite}
  .hf-rip{transform-box:fill-box;transform-origin:center;animation:hrip 3s ease-out 1.6s infinite}
  .hf-sig{animation:hsig 9s cubic-bezier(.4,0,.2,1) calc(2s + var(--i) * 3s) infinite}
  .hf-n circle{transform-box:fill-box;transform-origin:center;animation:hland 9s ease-out calc(2s + var(--i) * 3s) infinite}
  .hstep:not(.in)::before{transform:scaleX(0)}
  .hstep.in::before{transition:transform .7s cubic-bezier(.3,.6,.2,1) calc(.2s + var(--i) * .1s)}
  .hs-ln,.hs-fl{stroke-dasharray:1}
  .hstep:not(.in) .hs-ln,.hstep:not(.in) .hs-fl,.hstep:not(.in) .hs-br{stroke-dashoffset:1}
  .hs-br{stroke-dasharray:1}
  .hstep.in .hs-ln{animation:hstype 8s ease-in-out calc(.3s + var(--i) * .45s) infinite}
  .hstep.in .hs-caret{animation:hblink 1.1s steps(1) infinite}
  .hstep.in .hs-br{transition:stroke-dashoffset .6s ease-out calc(.3s + var(--i) * .15s)}
  .hstep.in .hs-nd{transform-box:fill-box;transform-origin:center;animation:lrpop .4s ease-out calc(.6s + var(--i) * .15s) both}
  .hstep.in .hs-sig{animation:hsig 3.6s cubic-bezier(.4,0,.2,1) 1.2s infinite}
  .hstep.in .hs-fl{animation:hsfill 7s cubic-bezier(.3,.6,.2,1) calc(.3s + var(--i) * .2s) infinite}
  .xtile .xi svg :is(path,circle){stroke-dasharray:1}
  .xtile:not(.in) .xi svg :is(path,circle){stroke-dashoffset:1}
  .xtile.in .xi svg :is(path,circle){transition:stroke-dashoffset 1s ease-out calc(.25s + var(--i,0) * .07s)}
  @keyframes hrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes hbreathe{0%,100%{transform:scale(.92)}50%{transform:scale(1.05)}}
  @keyframes hrip{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.4)}}
  @keyframes hsig{0%{opacity:0;transform:none}3%{opacity:1}14%{opacity:1;transform:translate(var(--dx),var(--dy))}18%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
  @keyframes hland{0%,13%,26%,100%{transform:none}17%{transform:scale(1.16)}}
  @keyframes hstype{0%{stroke-dashoffset:1;opacity:1}14%,80%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
  @keyframes hblink{0%{opacity:1}50%{opacity:0}}
  @keyframes hsfill{0%{stroke-dashoffset:1}22%,78%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
}
@media (max-width:980px){.xgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.xgrid{grid-template-columns:minmax(0,1fr)}.xtile{padding:12px}}

/* The person view (15 Oct 2026). */
.ln-explore{display:flex;flex-direction:column;gap:18px;margin:6px 0 18px}
@media (min-width:960px){.ln-mapwrap{order:-1}}
.ln-mapwrap summary{cursor:pointer;font-weight:600;color:var(--accent);padding:6px 0;list-style:none}
.ln-mapwrap summary::-webkit-details-marker{display:none}
.ln-mapwrap summary::before{content:"+ ";font-weight:700}
.ln-mapwrap[open] summary::before{content:"− "}
.ln-mapwrap[open] summary{margin-bottom:8px}
.ln-pick{display:grid;gap:6px;max-width:420px}
.ln-pick select{font:500 16px var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-s);padding:10px 12px;min-height:44px}
.ln-how{margin:8px 0 14px}
.ln-focus{max-width:640px}
.ln-trail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;margin:0 0 12px;color:var(--muted)}
.ln-trail b{color:var(--ink)}
.ln-none{margin:2px 0 0}
.ln-up .lbl,.ln-down .lbl,.ln-alike .lbl{display:block;margin:0 0 6px}
.kin{list-style:none;margin:0 0 0 14px;padding:0 0 0 20px;border-left:2px solid var(--line-strong);display:grid;gap:8px}
.kin li{position:relative}
.kin li::before{content:"";position:absolute;left:-20px;top:24px;width:18px;border-top:2px solid var(--ink)}
.kin li.k-built::before{border-top:2px dashed var(--muted)}
.kin li.k-parallel::before{border-top:3px dotted var(--accent)}
.ln-alike .kin{border-left-style:dotted;border-left-color:var(--accent-line)}
.kin-b{display:grid;gap:2px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--ink);cursor:pointer}
.kin-b:hover,.kin-b:focus-visible{border-color:var(--accent)}
.kin-n b{font:600 16px/1.3 var(--f-display)}
.kin-n .meta{font-size:13px;margin-left:4px}
.kin-b i{font-size:13px;color:var(--muted)}
.kin-b small{font-size:13px;line-height:1.45;color:var(--muted)}
.kin-b small b{color:var(--ink);font-weight:600}
.ln-stem{height:16px;margin-left:14px;border-left:2px solid var(--line-strong)}
.ln-me{border:2px solid var(--accent);background:var(--accent-soft);border-radius:var(--r);padding:14px 16px}
.ln-me h3{margin:2px 0 2px;font:600 22px/1.25 var(--f-display)}
.ln-me h3 .meta{font:400 14px var(--f-body);margin-left:6px}
.ln-me p{margin:0 0 8px;font-size:15px}
.ln-down,.ln-alike{margin-top:0}
.ln-alike{margin-top:14px}
.ln-more{margin-top:8px}
.ln-more summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:14px;list-style:none}
.ln-more summary::-webkit-details-marker{display:none}
.ln-more[open] summary{margin-bottom:6px}
#ln-explore{scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 70px)}

/* ---------- admin console (/psychology/admin) ----------
   As an app screen (7 Nov 2026, taste-skill's app-screen rules, like /admin):
   a 32px title, sentence-case labels, figures in one container on a tone
   step, tables without a header band, no sparklines. */
.pa{--pa-panel:var(--sunk);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .pa{--pa-panel:var(--surface)}
.pa .eyebrow{font:400 14px var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.pa .h1{font-size:32px;line-height:1.15;font-weight:400}
:root[data-theme="dark"] .pa .h1{font-weight:450}
.pa .pa-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 6px}
.pa .pa-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;cursor:pointer}
.pa .pa-check input{width:16px;height:16px;accent-color:var(--accent);margin:0}
.pa .pa-site{margin-left:auto}
.pa .pa-warn{color:var(--ev-weak)}
.pa .pa-lede{max-width:72ch;margin:4px 0 0}
.pa-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:16px 0 4px}
.pa-tabs::-webkit-scrollbar{display:none}
.pa-tabs button{flex:none;border:0;background:none;padding:10px 12px;font-size:14.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-s) var(--r-s) 0 0}
.pa-tabs button:hover{color:var(--ink);background:var(--sunk)}
.pa-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.pa-dim{opacity:.55;transition:opacity .2s}
.pa-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:18px;background:var(--pa-panel);overflow:hidden}
.pa-tiles.pa-tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* hairlines on each figure's left and top; the container clips the outer ones */
.pa-tile{background:none;border:0;border-radius:0;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line);padding:16px 18px 18px;min-width:0}
.pa-tile-l{font:400 14px var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.pa-tile-v{font:400 28px/1.15 var(--f-body);letter-spacing:-.01em;margin-top:6px;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .pa-tile-v{font-weight:440}
.pa-tile-s{font-size:13px;color:var(--muted);margin-top:4px}
.pa-delta{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink);margin-top:6px}
/* No sparklines on figures: the charts below draw the trend */
.pa-spark{display:none}
.pa-spark svg{display:block}
.pa-spark-l{fill:none;stroke:var(--faint);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.pa-spark-d{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.pa-sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:34px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pa-sec-h h2{font:400 24px/1.2 var(--f-display);margin:0}
:root[data-theme="dark"] .pa-sec-h h2{font-weight:450}
.pa-seg-s button{padding:4px 11px;font-size:13px}
.pa-fig{margin:16px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;min-width:0}
.pa-fig-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pa-fig-t{font-weight:500;font-size:15px}
.pa-fig-s{font-size:13px;color:var(--muted);margin-top:2px;max-width:70ch}
.pa-legend{list-style:none;display:flex;gap:16px;margin:10px 0 0;padding:0;font-size:13px;color:var(--muted)}
.pa-legend li{display:inline-flex;align-items:center;gap:6px}
.pa-key{display:inline-block;width:10px;height:10px;border-radius:0;flex:none}
.pa-key.ln{width:12px;height:2px;border-radius:0}
.pa-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
.pa-chart{position:relative;margin-top:12px;touch-action:pan-y}
.pa-chart svg{display:block;overflow:visible}
.pa-chart rect:not(.pa-hover){rx:2px}
.pa-grid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.pa-tick{font:12px var(--f-body);fill:var(--faint);font-variant-numeric:tabular-nums}
.pa-hover{fill:var(--sunk)}
.pa-ref{stroke:var(--ev-weak);stroke-width:1.5}
.pa-ref-t{font:600 11.5px var(--f-body);fill:var(--ev-weak)}
.pa-tip{position:absolute;top:0;pointer-events:none;background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-s);box-shadow:var(--shadow);padding:8px 10px;font-size:13px;white-space:nowrap;z-index:3}
.pa-tip-t{font:12px var(--f-body);color:var(--muted);margin-bottom:4px}
.pa-tip-r{display:flex;align-items:center;gap:6px;color:var(--muted)}
.pa-tip-r b{color:var(--ink);font-variant-numeric:tabular-nums}
.pa-tip-r.tot{border-top:1px solid var(--line);margin-top:4px;padding:4px 0 0 18px}
.pa-scroll{overflow-x:auto;margin-top:8px;-webkit-overflow-scrolling:touch}
.pa-table{border-collapse:collapse;width:100%;font-size:14.5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pa-fig .pa-table{border:0}
.pa-table th{font:400 13px var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted);text-align:left;padding:10px 12px 8px;background:none;border-bottom:1px solid var(--line-strong);white-space:nowrap;vertical-align:bottom}
.pa-table th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.pa-table th button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:0}
.pa-table td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:middle}
.pa-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pa-table th.num button{flex-direction:row-reverse}
.pa-table.dense td{padding:6px 12px;font-size:13.5px}
.pa-table td:first-child{min-width:18ch}
.pa-p{font-size:12px;color:var(--muted);display:inline-block;min-width:3.2em;text-align:right}
.pa-p.thin{color:var(--faint);opacity:.75}
.pa-inl{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px}
.pa-inl span{display:inline-block;height:8px;border-radius:0;background:var(--accent);flex:none}
.pa-tag{font:400 12px var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted);border:1px solid var(--line);border-radius:0;padding:1px 7px;margin-left:6px;white-space:nowrap}
.pa-num{display:inline-block;min-width:1.8em;color:var(--faint);font:12px var(--f-body);font-variant-numeric:tabular-nums}
.pa-more{margin-top:10px}
.pa-bars{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.pa-bars li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:12px;align-items:center;padding:9px 14px;border-top:1px solid var(--line)}
.pa-bars li:first-child{border-top:0}
.pa-bars-l{font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.pa-bars-l span{display:block;font-size:12px;color:var(--muted)}
.pa-bars-t{display:flex;align-items:center;gap:8px;min-width:0}
.pa-bars-b{display:block;height:10px;border-radius:0;background:var(--accent);min-width:2px;max-width:calc(100% - 4.5em)}
.pa-bars-v{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pa-heat{margin-top:10px}
.pa-heat-r{font-size:13.5px;color:var(--muted);min-height:1.5em}
.pa-heat-g{display:grid;grid-template-columns:36px repeat(24,minmax(0,1fr));gap:2px;margin-top:8px}
.pa-heat-h{font:11px var(--f-body);color:var(--faint);white-space:nowrap;height:14px}
.pa-heat-d{font:12px var(--f-body);color:var(--faint);align-self:center}
.pa-heat-c{aspect-ratio:1.6;min-height:12px;border-radius:0;background:color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--sunk))}
.pa-heat-c.on{outline:2px solid var(--ink);outline-offset:0}
.pa-heat-s{display:flex;align-items:center;gap:2px;margin-top:10px;font-size:12px;color:var(--muted)}
.pa-heat-s span{width:18px;height:10px;border-radius:0;background:color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--sunk))}
.pa-heat-s span:first-child{margin-left:6px}
.pa-heat-s span:last-child{margin-right:6px}
.pa-plot{display:flex;justify-content:center;margin-top:8px}
.pa-plot .trplot{max-width:420px}
.pa-dot{fill:var(--accent);fill-opacity:.75;stroke:var(--surface);stroke-width:2}
.pa-dot:hover{fill-opacity:1;stroke:var(--ink)}
@media (max-width:1000px){
  .pa-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pa-grid3{grid-template-columns:minmax(0,1fr)}
  .pa .pa-site{margin-left:0}
}
@media (max-width:560px){
  .pa-tiles,.pa-tiles.pa-tiles-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pa-tile{padding:14px 12px 16px}
  .pa-tile-v{font-size:24px}
  .pa-fig{padding:12px}
  .pa-heat-g{grid-template-columns:28px repeat(24,minmax(0,1fr));gap:1px}
  .pa-heat-h{font-size:9px}
  .pa-bars li{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.pa-dim{transition:none}}

/* ---------- situation portal (2 Nov 2026): the new situation layout ---------- */
.sp{max-width:1120px;margin:0 auto}
.sp-hero{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px 40px;align-items:center;padding:6px 0 4px}
.sp-h1{font:400 clamp(30px,4.2vw,50px)/1.08 var(--f-display);letter-spacing:-.018em;margin:8px 0 14px;max-width:26ch}
.sp-lede{font:400 19px/1.5 var(--f-display);color:var(--muted);max-width:60ch;margin:0}
.sp-hero .acts{margin-top:18px}
.sp-fig{margin:0;text-align:center}
.sp-fig figcaption{margin-top:2px}
.sp-orbit{width:100%;max-width:250px;height:auto;display:block;margin:0 auto;overflow:visible}
.sp-ring{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.sp-ring.in{stroke:var(--accent-line);stroke-dasharray:3 5}
.sp-q{font:italic 400 58px var(--f-display);fill:var(--accent)}
.sp-pt{fill:var(--accent)}
.sp-dot{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.6;transition:fill .3s, stroke .3s}
.sp-dot.mine{stroke:var(--accent);stroke-width:2.6}
.sp-dot.fit{fill:var(--accent);stroke:var(--accent)}
.sp-dn{font:500 10.5px var(--f-mono);fill:var(--faint)}
@media (prefers-reduced-motion:no-preference){
  .sp-spin{transform-origin:120px 120px;animation:spspin 26s linear infinite}
  @keyframes spspin{to{transform:rotate(360deg)}}
  .sp-dot.fit{animation:spglow 2.8s ease-in-out infinite}
  @keyframes spglow{0%,100%{opacity:1}50%{opacity:.55}}
}

.sp-nav{position:sticky;top:calc(var(--sc-stick,0px) + var(--bar) + env(safe-area-inset-top,0px));z-index:6;display:flex;gap:6px;margin:22px 0 0;padding:10px 0;background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sp-nav::-webkit-scrollbar{display:none}
.sp-nav a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;padding:8px 16px}
.sp-nav a b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:600 12px var(--f-mono)}
.sp-nav a:hover{border-color:var(--accent-line)}

.sp-grid{display:grid;gap:22px;margin-top:24px;grid-template-columns:minmax(0,1fr);grid-template-areas:"yours" "pats"}
.sp-side{grid-area:yours}.sp-pats{grid-area:pats}
.sp-grid.solo{grid-template-areas:"pats"}
@media (min-width:1240px){
  .sp-grid{grid-template-columns:minmax(0,1fr) 370px;grid-template-areas:"pats yours";gap:24px 30px}
  .sp-grid.solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"pats"}
  .sp-side{position:sticky;top:calc(var(--sc-stick,0px) + var(--bar) + 76px);align-self:start}
}
.sp-card{border:1px solid var(--line);background:var(--surface);border-radius:0;padding:28px 24px 24px;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 70px)}
.sp-card h2{font:500 22px/1.25 var(--f-display);margin:0 0 8px}
.sp-first{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 14px;background:var(--sunk);border-color:transparent}
.sp-first svg{width:26px;height:26px;fill:none;stroke:var(--ev-mixed);stroke-width:1.8;stroke-linecap:round;margin-top:2px}
.sp-first h2{font-size:19px;margin-bottom:4px}
.sp-first p{margin:0;max-width:66ch}

.sp-ask{border-color:var(--accent-line);box-shadow:var(--shadow)}
.sp-ask h2 span{font-style:italic;color:var(--accent)}
.tr-ask{margin:28px 0 8px}
.ck-hero{margin:18px 0 8px}
.ck-hero .lbl{display:block;margin:0 0 10px}
.ck-hero .h1{margin:0 0 14px;font-size:clamp(28px,6.4vw,40px);line-height:1.15}
.ck-hero .sub{margin:0 0 10px}
.carry{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.carry .lbl{display:block;margin-bottom:8px}
.carry-row{display:flex;flex-wrap:wrap;gap:8px}
.carry-row input{flex:1 1 200px;min-width:0;min-height:40px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:0;background:var(--bg);color:var(--ink);font-size:15px}
.carry .meta{margin:8px 0 0}
.sp-intro{margin:0 0 14px;color:var(--muted);font-size:15px}
.sp-f{display:block;margin:0 0 12px}
.sp-f > span{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:6px}
.sp-f > span b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:600 11px var(--f-mono)}
.sp-f textarea{width:100%;min-height:58px;resize:vertical;padding:10px 12px;border:1px solid var(--line-strong);border-radius:0;background:var(--bg);color:var(--ink);font-size:15.5px;line-height:1.45;transition:border-color .12s, box-shadow .12s}
.sp-f textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sp-go{width:100%;min-height:46px;font-size:15.5px;margin-top:4px}
.sp-fine{margin:10px 0 0;text-align:center}
.sp-acc{color:var(--accent);margin-bottom:6px}
.sp-sum{font:400 19.5px/1.5 var(--f-display);margin:0 0 14px}
.sp-leans{margin:0 0 4px}
.sp-leans .lbl{display:block;margin-bottom:8px}
.sp-leans .chips{display:flex;flex-wrap:wrap;gap:6px}
.sp-leans .meta{margin:8px 0 0}
.chip.on{background:var(--accent-soft);border-color:var(--accent-line)}
.sp-used{margin:0;color:var(--muted)}
.sp-onward .guidecard{margin-top:14px}

.sp-sec-h{margin:0 0 14px}
.sp-sec-h h2{font:500 26px/1.2 var(--f-display);letter-spacing:-.01em;margin:0 0 4px}
.sp-pats{scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 70px)}
.sp-short{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:0;font-size:14.5px}
.sp-short > span{display:inline-flex;align-items:center;gap:6px;flex:1 1 240px;min-width:0}
.sp-short svg{width:16px;height:16px;flex:none;color:var(--accent)}
.sp-list{display:grid;gap:10px}
.sp-pat{border:1px solid var(--line);background:var(--surface);border-radius:0;transition:border-color .2s, box-shadow .2s;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 70px)}
.sp-pat[open]{border-color:var(--accent-line);box-shadow:var(--shadow)}
.sp-pat.fit{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sp-pat.notthis summary{opacity:.55}
.sp-pat summary{list-style:none;display:grid;grid-template-columns:34px minmax(0,1fr) 24px;gap:3px 10px;padding:14px 16px 14px 12px;cursor:pointer;border-radius:0}
.sp-pat summary::-webkit-details-marker{display:none}
.sp-pat summary:hover{background:var(--sunk)}
.sp-n{grid-row:1 / span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--accent-line);color:var(--accent);font:600 13px var(--f-mono)}
.sp-pat.fit .sp-n{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.sp-pt-t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.sp-name{font:500 19px/1.3 var(--f-display)}
.sp-why{grid-column:2;font-size:14.5px;color:var(--muted)}
.sp-chev{grid-column:3;grid-row:1;width:10px;height:10px;margin:8px auto 0;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform .2s}
details[open] > summary .sp-chev{transform:rotate(-135deg);margin-top:12px}
.sp-fitpill,.sp-minepill{display:inline-flex;align-items:center;gap:4px;font:700 11.5px var(--f-body);letter-spacing:.04em;text-transform:uppercase;border-radius:0;padding:3px 9px}
.sp-fitpill{background:var(--accent);color:var(--accent-ink)}
.sp-minepill{background:var(--accent-soft);color:var(--accent)}
.sp-minepill svg{width:12px;height:12px}
.sp-pat-b{padding:2px 18px 16px 58px}
.sp-pat-b > p{margin:4px 0 12px;font:400 17.5px/1.5 var(--f-display);max-width:62ch}
.sp-claude{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0}
.sp-claude p{margin:4px 0 0;font-size:15px}
.sp-claude .lbl{color:var(--accent)}
.sp-pat-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.btn.sm{min-height:34px;padding:6px 13px;font-size:13.5px}
.btn.sm svg{width:15px;height:15px}
.btn.sm.on{color:var(--accent)}

.sp-deeper{margin-top:44px;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 70px)}
.sp-fold{border-top:1px solid var(--line)}
.sp-fold:last-child{border-bottom:1px solid var(--line)}
.sp-fold summary{list-style:none;display:flex;align-items:center;gap:10px;padding:16px 4px;cursor:pointer;font:500 20px/1.3 var(--f-display)}
.sp-fold summary::-webkit-details-marker{display:none}
.sp-fold summary > span:first-child{flex:1;min-width:0}
.sp-fold summary .sp-chev{margin:0 6px 4px}
.sp-fold[open] summary .sp-chev{margin:6px 6px 0}
.sp-cnt{font:500 12px var(--f-mono);color:var(--faint);border:1px solid var(--line);border-radius:0;padding:2px 8px}
.sp-fold-b{padding:0 4px 20px}
.sp-fold-b p{max-width:68ch}
.sp-big{font:400 18.5px/1.5 var(--f-display);margin:0 0 10px}
.sp-says{display:grid;gap:8px}
.sp-says p{margin:0;font:italic 400 17px/1.45 var(--f-display);color:var(--muted)}

.sp-rel{margin-top:40px}
.sp-more{margin-top:44px;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 70px)}
.sp-more .sp-sec-h{margin-bottom:8px}
.sp-relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.sp-relc{display:grid;gap:6px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:0;padding:14px 16px;color:var(--ink)}
.sp-relc > span:first-child{font:400 18px/1.35 var(--f-display)}
.sp-relc:hover{border-color:var(--accent-line);background:var(--sunk)}
.sp-foot{margin-top:36px}

@media (max-width:760px){
  .sp-hero{grid-template-columns:minmax(0,1fr) 120px;gap:12px 16px;align-items:start}
  .sp-fig figcaption{display:none}
}
@media (max-width:560px){
  .sp-hero{grid-template-columns:minmax(0,1fr)}
  .sp-fig{display:none}
  .sp-lede{font-size:17.5px}
  .sp-card{padding:28px 18px 22px}
  .sp-pat summary{grid-template-columns:30px minmax(0,1fr) 20px;padding:13px 12px 13px 10px;gap:3px 8px}
  .sp-n{width:26px;height:26px;font-size:12px}
  .sp-name{font-size:18px}
  .sp-pat-b{padding:2px 14px 14px 14px}
  .sp-sec-h h2{font-size:23px}
  .sp-nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;overflow:visible}
  .sp-nav a{justify-content:center;padding:9px 4px;border-radius:0;font-size:12.5px;line-height:1.2;text-align:center;min-width:0}
  .sp-nav a b{width:20px;height:20px;font-size:11px}
}

/* round 2 (Andrew, 2 Nov 2026): definition-style lede, the check folded into
   the hero, one box for Claude, nav without numbers in the phone's order */
.sp-first-p{font-size:16px;line-height:1.55;color:var(--ink);max-width:60ch;margin:14px 0 0;padding-left:14px;border-left:2px solid var(--accent-line)}
.sp-starts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.sp-ta{width:100%;min-height:128px;resize:vertical;padding:12px 60px 12px 14px;border:1px solid var(--line-strong);border-radius:0;background:var(--bg);color:var(--ink);font-size:15.5px;line-height:1.5;margin:0 0 12px}
.sp-ta:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sp-pats .sp-sec-h .eyebrow{margin-bottom:4px}
@media (max-width:1239px){.sp-nav a.n-yours{order:-1}}
/* keeping a situation reflection (2 Nov 2026): in this browser, and for Plus in the account */
.sp-mine{margin:14px 0 0;border:1px solid var(--line);border-radius:0;background:var(--bg)}
.sp-mine summary{cursor:pointer;padding:10px 14px;font-weight:600;font-size:14px}
.sp-mine p{margin:0;padding:0 14px 12px;font-size:15px;white-space:pre-line;color:var(--muted)}
.sp-keep{display:grid;gap:10px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.sp-keep .meta{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.sp-keep .linkbtn{font-size:13.5px}
.sp-keep .btn{justify-self:start;text-decoration:none}
.sp-plus{display:block;padding:12px 14px;border:1px solid var(--accent-line);border-radius:0;background:var(--accent-soft);color:var(--ink);text-decoration:none;font-size:14.5px}
.sp-plus b{color:var(--accent)}
.sp-plus:hover{border-color:var(--accent)}

/* round 3 (Andrew, 2 Nov 2026): the title in two lines, Save beside the eyebrow */
.sp-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.sp-top .btn{min-height:30px;padding:4px 12px;font-size:13px}
.sp-top .btn svg{width:15px;height:15px}
@media (max-width:560px){.sp-h1{font-size:clamp(26px,7.4vw,32px)}}
@media (min-width:981px) and (max-width:1239px){.sp-hero{grid-template-columns:minmax(0,1fr) 180px;gap:20px 28px}.sp-h1{font-size:38px}}
.sp-care{margin:16px 0 0;font-size:15px;color:var(--ink)}

/* The map (3 Nov 2026): areas down, kinds of moment across. Desktop is a
   table; on phones each area is a row of five labelled squares. */
.mapv .mapg{display:grid;gap:6px;margin:22px 0 8px}
.mapv .mapr{display:grid;grid-template-columns:minmax(150px,1.3fr) repeat(5,minmax(0,1fr));gap:6px;align-items:stretch}
.mapv .mapa{display:flex;align-items:center;font:600 15px/1.3 var(--f-body);color:var(--ink);text-align:left;padding:4px 6px 4px 0;text-decoration:none}
.mapv button.mapa:hover{color:var(--accent)}
.mapv .maphc{display:grid;gap:3px;align-content:end;padding:0 4px 6px;font-size:13px;line-height:1.35;color:var(--muted)}
.mapv .maphc b{font:600 14px/1.3 var(--f-body);color:var(--ink)}
.mapv .mapc{display:grid;place-items:center;min-height:52px;border-radius:var(--r-s);border:1px solid var(--line);background:color-mix(in srgb,var(--accent) calc(var(--h,0) * 66% + 6%),var(--surface));color:var(--ink);font:600 17px/1 var(--f-body);padding:6px}
.mapv .mapc[style*="--h:0.6"],.mapv .mapc[style*="--h:0.7"],.mapv .mapc[style*="--h:0.8"],.mapv .mapc[style*="--h:0.9"],.mapv .mapc[style*="--h:1"]{color:var(--accent-ink)}
.mapv button.mapc:hover{border-color:var(--accent)}
.mapv .mapc[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}
.mapv .mapc.none{background:transparent;border-style:dashed;color:var(--faint)}
.mapv .mapc .mk{display:none}
.mapv .mapkey{display:none}
.mapv .map-narrow{display:none}
.mapv .maplist{margin:6px 0 14px;padding:14px 0 4px;border-top:2px solid var(--accent);scroll-margin-top:150px}
.mapv .maplist h2{font:500 22px/1.25 var(--f-display);margin:0}
.mapv .maptext{margin-top:40px;padding-top:6px;border-top:1px solid var(--line)}
.mapv .maptext-h{font:500 24px/1.25 var(--f-display);margin:22px 0 4px}
.mapv .maptext .sec{margin-top:26px}
.mapv .maptext .sec h2{font:500 20px/1.25 var(--f-display);margin:0 0 4px}
.mapv .maptext h3{font:600 14px/1.3 var(--f-body);color:var(--muted);margin:16px 0 6px}
.mapv .maptext ul{margin:0;padding-left:20px;display:grid;gap:7px}
.mapv .maptext li{line-height:1.4;overflow-wrap:anywhere}
.mapv .maptext .termlink{display:block;text-align:left;font:inherit;font-weight:500}
.mapv .mapr.open .mapa{color:var(--accent)}
.mapv .mapny .mapa{color:var(--muted);font-weight:500}
.mapv .mapnyc{grid-column:2 / -1;display:flex;align-items:center;border:1px dashed var(--line-strong);border-radius:var(--r-s);padding:10px 12px;color:var(--muted);font-size:14px;line-height:1.4}
@media (max-width:760px){
  .mapv .maph{display:none}
  .mapv .map-wide{display:none}
  .mapv .map-narrow{display:inline}
  .mapv .mapkey{display:block;margin:16px 0 2px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
  .mapv .mapkey summary{cursor:pointer;padding:11px 14px;font:600 15px/1.3 var(--f-body);color:var(--ink)}
  .mapv .mapkey dl{display:grid;gap:8px;margin:0;padding:0 14px 14px;font-size:14px;line-height:1.4;color:var(--muted)}
  .mapv .mapkey dl div{display:grid;grid-template-columns:76px 1fr;gap:8px}
  .mapv .mapkey dt{font-weight:600;color:var(--ink)}
  .mapv .mapkey dd{margin:0}
  .mapv .mapr{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:12px 0 4px;border-top:1px solid var(--line)}
  .mapv .mapa{grid-column:1 / -1;padding:0 0 4px}
  .mapv .mapc{min-height:56px;gap:3px;place-content:center;font-size:16px;padding:6px 2px}
  .mapv .mapc .mk{display:block;font:500 11px/1.1 var(--f-body);color:inherit;opacity:.85}
  .mapv .maplist{scroll-margin-top:130px}
  .mapv .mapnyc{grid-column:1 / -1}
}

/* Draft areas and Your map (3 Nov 2026) */
.mapv .mapdraft{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--line);border-radius:0;font:600 10px/1.4 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);vertical-align:middle}
.mapv .mymap-p{display:block;padding:12px 0}
.mapv .mymap-p .d{display:block;margin-top:4px;color:var(--muted,var(--faint));font-size:15px;line-height:1.5}
.mapv .backbtn{margin-bottom:8px}

/* The new term page (4 Nov 2026), first on intersubjectivity: renderTermV2 in ui.js */
.tv .tv-say{margin:-4px 0 6px;color:var(--muted);font-size:15px}
.tv .tv-say strong{color:var(--ink)}
.tv .tv-plain{font:400 21px/1.45 var(--f-display);margin:24px 0 10px;max-width:44ch;color:var(--ink)}
.tv .tv-eg{font-size:17.5px;line-height:1.6;color:var(--muted);margin:0;max-width:60ch}
.tv-voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 16px}
.tv-voice{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:grid;gap:8px;min-width:0}
.tv-voice .lbl{color:var(--muted)}
.tv-voice p{margin:0;font:400 18.5px/1.45 var(--f-display);color:var(--ink)}
.tv-turn{border-left:2px solid var(--accent);padding-left:16px}
.tv-turn p:last-child{margin-bottom:0}
.tv-fig{margin:28px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px}
.tv-fig svg{width:100%;max-width:420px;height:auto;display:block;justify-self:center}
.tv-fig figcaption{color:var(--muted);font-size:15px}
.tv .tv-q{font:italic 400 21px/1.4 var(--f-display);color:var(--ink)}
.tv-isnt{display:grid;gap:10px}
.tv-isnt > div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;font-size:15.5px;max-width:72ch}
.tv-isnt > div b{display:block;margin-bottom:4px}
.tv-isnt .care-box{border-color:var(--accent);border-left-width:3px}
.tv-ladder{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;display:grid;gap:10px;margin-bottom:14px}
.tv-ladder .lbl{color:var(--muted)}
.tv-ladder p{margin:0;font-size:15px}
.tv-rungs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.tv-rungs span{font:500 12px/1.25 var(--f-body);text-align:center;padding:8px 2px;border-radius:0;background:var(--sunk);color:var(--faint);min-width:0;overflow-wrap:anywhere}
.tv-rungs span.on{color:var(--surface);background:var(--ev-clinical)}
.tv-rungs span.on.ev-strong{background:var(--ev-strong)}.tv-rungs span.on.ev-moderate{background:var(--ev-moderate)}.tv-rungs span.on.ev-mixed{background:var(--ev-mixed)}.tv-rungs span.on.ev-weak{background:var(--ev-weak)}
.tv-study{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:16px 18px;margin-bottom:12px}
.tv-study h3{font:500 19px/1.3 var(--f-display);margin:0 0 10px;color:var(--ink);text-wrap:balance}
.tv-study p{font-size:15.5px}
.tv-bars{display:grid;gap:8px;margin:4px 0 12px}
.tv-bar{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:14px}
.tv-bar > span:first-child{overflow-wrap:break-word;line-height:1.3}
.tv-bar .tr{height:12px;background:var(--sunk);border-radius:0;position:relative;overflow:hidden}
.tv-bar .tr span{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:0}
.tv-bar .n{font:500 13px var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
.tv-bars .meta{margin:0}
.tv-not b{display:inline-block;margin-right:8px;font:600 11.5px var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--ev-weak)}
.tv .tv-sum{font:400 18.5px/1.5 var(--f-display);color:var(--ink)}
.tv-try{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-s);padding:16px 18px}
.tv-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 14px}
.tv-three label{display:grid;gap:6px;font-size:14px;font-weight:600;min-width:0;align-content:start}
.tv-three textarea{font:inherit;font-weight:400;width:100%;border:1px solid var(--line-strong);border-radius:var(--r-s);padding:10px 50px 10px 10px;background:var(--surface);color:var(--ink);resize:vertical}
.tv-faq > div{padding:14px 0;border-bottom:1px solid var(--line)}
.tv-faq h3{font:700 16.5px/1.35 var(--f-body);margin:0 0 6px;color:var(--ink)}
.tv-faq p{margin:0;color:var(--muted)}
.tv-voices.n1,.tv-voices.nx,.tv-three.n1{grid-template-columns:minmax(0,1fr)}
.tv-voices.nx{gap:8px}
.tv-voices.nx .tv-voice{padding:12px 16px}
.tv-voices.nx .tv-voice p{font-size:17.5px}
.tv-three.n2,.tv-three.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.tv-moments{list-style:none;margin:6px 0 16px;padding:0;display:grid;gap:10px}
.tv-moments li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;display:grid;gap:6px;min-width:0}
.tv-moments li p{margin:0}
.tv-moments .lbl{color:var(--muted)}
@media (max-width:760px){.tv-voices,.tv-three{grid-template-columns:1fr}}
@media (max-width:600px){.tv-fig{grid-template-columns:1fr}}
@media (max-width:430px){.tv-rungs span{font-size:9.5px;letter-spacing:0}}
@media (prefers-reduced-motion:no-preference){
  .tv-fig .tv-l{animation:tvl 9s ease-in-out infinite}.tv-fig .tv-r{animation:tvr 9s ease-in-out infinite}
  @keyframes tvl{50%{transform:translateX(7px)}}@keyframes tvr{50%{transform:translateX(-7px)}}
}

/* The example's label and its one-line reason (5 Nov 2026) */
.tv-ex .tv-exl{display:block;color:var(--accent);margin-bottom:6px}
.tv .tv-why{color:var(--muted);font-size:16px;max-width:62ch}

/* Term page, folded layout (5 Nov 2026) */
.evx{margin:0}
.evx > summary{list-style:none;display:inline-flex;align-items:center;gap:10px;cursor:pointer;padding:4px 0}
.evx > summary::-webkit-details-marker{display:none}
.evx-q{font-size:13px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.evx > summary .sp-chev{margin:0 0 4px;width:8px;height:8px}
.evx[open] > summary .sp-chev{transform:rotate(-135deg);margin:4px 0 0}
.evx-b{margin:10px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:0;background:var(--surface);max-width:62ch}
.evx-b p{margin:0 0 10px;font-size:15px;color:var(--ink)}
.evx-l{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.evx-l li{display:grid;grid-template-columns:1fr;gap:4px;font-size:14px;color:var(--muted);padding:8px 10px;border-radius:0}
.evx-l li .ev{justify-self:start}
.evx-l li.on{background:var(--accent-soft);color:var(--ink)}
.evx-l b{font-weight:600;color:var(--ink)}
.tv-care{margin:18px 0 0}
.tv-folds{display:block}
.tv-acc summary small{display:block;font:400 14px/1.4 var(--f-body);color:var(--muted);margin-top:4px}
.tv-acc .sp-fold-b > :first-child{margin-top:0}
.tv-studies .tv-acc summary{font-size:17px}
#b-faq .tv-acc summary,#sp-faq .tv-acc summary{font-size:18px}

.tv-faql{margin:22px 4px 2px}
/* Folded term layout: the everyday example is labelled, and the care note
   under the definition reads as a note, smaller than the page's text (5 Nov 2026). */
.tv-egb{margin:16px 0 0;padding:12px 16px;border-left:3px solid var(--accent-line);background:var(--surface);border-radius:0;max-width:640px}
.tv-egl{display:block;margin:0 0 4px;color:var(--accent)}
.tv .tv-egb .tv-eg{font-size:16px;color:var(--ink)}
.tv-care{font-size:14px;line-height:1.55;color:var(--muted);padding:10px 16px;max-width:640px;margin-top:16px;border:1px solid var(--line);border-left:3px solid var(--ev-mixed);border-radius:0;background:var(--surface)}
.tv-care b{color:var(--ink)}
.evkey{margin-top:10px}
.evkey > summary{padding:2px 0}
/* The ratings on the orientation page, in the same words as the pill's fold (5 Nov 2026). */
.evrate{display:grid;gap:12px}
.evrate > div{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:12px;align-items:baseline}
@media (max-width:560px){.evrate > div{grid-template-columns:1fr;gap:4px}}
/* A comparison table on a term page (5 Nov 2026). Rows become cards on a phone. */
.tv-table{overflow-x:auto;margin:14px 0 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tv-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.tv-table th,.tv-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tv-table thead th{font:600 12px/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tv-table tbody th{font-weight:700;color:var(--ink)}
.tv-table tbody tr:last-child th,.tv-table tbody tr:last-child td{border-bottom:0}
@media (max-width:700px){
  .tv-table{border:0;background:none;overflow:visible}
  .tv-table thead{display:none}
  .tv-table table,.tv-table tbody,.tv-table tr,.tv-table th,.tv-table td{display:block;width:auto}
  .tv-table tr{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:0 0 12px;padding:6px 0}
  .tv-table th,.tv-table td{border-bottom:0;padding:6px 14px}
  .tv-table tbody th{font-size:17px}
  .tv-table td::before{content:attr(data-l);display:block;font:600 11px/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
}

/* Cycle and fan drawings on term pages (6 Nov 2026) */
.tv-diag{margin:22px 0 4px}
.tv-diag .tv-nt{fill:var(--ink)}.tv-diag .tv-nt.on{fill:var(--accent);font-weight:700}.tv-diag .tv-nt.b{font-weight:700}
.tv-diag .tv-mid{fill:var(--accent);font-family:var(--f-display);font-style:italic}
@media (prefers-reduced-motion:no-preference){.tv-diag .tv-arc{stroke-dasharray:400;stroke-dashoffset:400;animation:tvdraw 1.4s ease-out forwards}.tv-diag .tv-arc:nth-of-type(2){animation-delay:.3s}.tv-diag .tv-arc:nth-of-type(3){animation-delay:.6s}.tv-diag .tv-arc:nth-of-type(4){animation-delay:.9s}.tv-diag .tv-arc:nth-of-type(5){animation-delay:1.2s}}
@keyframes tvdraw{to{stroke-dashoffset:0}}
/* Plus in the strip carries the clay rose dot, as on every other page (6 Nov 2026) */
.clbar .cl-plus::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--dot);margin-right:7px;vertical-align:.08em}

/* ---------- Clean type and square corners (Andrew, 6 Nov 2026) ----------
   The site's type is plain: no italic accent words, no small uppercase labels.
   The research ratings keep their capitals: they are a scale, not a label. */
.sp-ask h2 span,.blk h2 span{font-style:normal!important;color:inherit!important}
/* Reading text is Hanken Grotesk; Newsreader stays for headings and the big question (Andrew, 6 Nov 2026) */
.sp-lede,.tv .tv-plain,.lead{font-family:var(--f-body)!important;letter-spacing:0}
:is(.brand small,.railsec h4,.railsec .ri .k,.sg-h,.opt .kd,.eyebrow,.kind,.lbl,.sign b,table.data thead th,.pathtag,.tag,.cmpt tbody th,.enlab,.qn,.trfreq,table.data td[data-label]::before,.inqlist li::before,.mg-h,.setfold>summary::after,.dp-k,.ln-school,.pa-tile-l,.pa-table th,.pa-tag,.mapv .mapdraft,.tv-not b,.tv-table thead th,.tv-table td::before){text-transform:none!important;letter-spacing:0!important}
:is(.railsec h4,.eyebrow,.lbl,.kind,.sg-h,.tag,.pathtag,.mg-h,.dp-k,.enlab,.sign b,.tv-not b,.pa-tile-l,.pa-tag,.brand small){font-size:13px!important}

/* ---------- The term page layout (6 Nov 2026, from the approved mockup) ----------
   What the term is on the left, its table or drawing beside it on wide
   screens; "How it shows" in three plain columns; what it doesn't mean beside
   the reflection box. No contents list: the page reads in one column of folds
   below. */
.entry.tv-entry{grid-template-columns:minmax(0,1fr);max-width:1160px}
.tv-entry .art.tv{max-width:none}
.tv-entry .art.tv > :not(.tv-top):not(.tv-pair){max-width:760px}
.tv-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin:0 0 10px}
.tv-crumb button{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.tv-crumb button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tv-top{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:start}
.tv-top:has(.tv-side){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.tv-top-l{min-width:0}
.tv-top-l > .tv-plain,.tv-top-l > .tv-egb,.tv-top-l > .tv-care{max-width:640px}
.tv-side{min-width:0;padding-top:8px}
.tv-side > .blk{margin-top:0}
.tv-side .tv-diag,.tv-side .topfig{margin-top:0}
.tv-side h2{font-size:22px}
/* the table beside the definition reads as one card per row */
.tv-side .tv-table{border:0;background:none;overflow:visible;margin:10px 0 0}
.tv-side .tv-table thead{display:none}
.tv-side .tv-table table,.tv-side .tv-table tbody,.tv-side .tv-table tr,.tv-side .tv-table th,.tv-side .tv-table td{display:block;width:auto}
.tv-side .tv-table tr{border-top:1px solid var(--line);padding:12px 0}
.tv-side .tv-table th,.tv-side .tv-table td{border-bottom:0;padding:2px 0}
.tv-side .tv-table tbody th{font-size:16px;margin-bottom:4px}
.tv-side .tv-table td{font-size:14.5px}
.tv-side .tv-table td::before{content:attr(data-l);display:block;font-size:13px;color:var(--muted)}
.tv .signs{gap:32px}
.tv .sign{background:none;border:0;padding:0;font-size:15.5px}
.tv .sign b{color:var(--muted);font-weight:600}
.tv .sign b svg{display:none}
.tv-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.tv-pair > :only-child{grid-column:1/-1}
.tv-pair > .blk:first-child{margin-top:40px}
@media (max-width:1000px){
  .tv-top:has(.tv-side),.tv-pair{grid-template-columns:minmax(0,1fr);gap:24px}
  .tv .signs{grid-template-columns:minmax(0,1fr);gap:18px}
}

.tv-side .tv-fig{grid-template-columns:minmax(0,1fr);background:none;border:0;padding:0}
.tv-side .tv-fig svg{max-width:100%}
/* pseudo-element labels (they cannot sit inside :is() above) */
.inqlist li::before,table.data td[data-label]::before,.setfold>summary::after,.tv-table td::before{text-transform:none!important;letter-spacing:0!important}

/* The situation page in Andrew's approved layout (6 Nov 2026): a trail in
   place of the label, the title without quote marks, no drawing beside it,
   no "on this page" bar, the patterns as a plain list without numbers, and
   Go deeper with the questions to carry open beside the folds. */
.sp{max-width:1200px}
.sp-hero{display:block;padding:4px 0 0}
.sp-hero > div{max-width:860px}
.sp-top{gap:8px 18px}
.sp-crumb{margin:0}
.sp-h1{font-size:clamp(34px,4.4vw,58px);line-height:1.05;letter-spacing:-.02em;max-width:24ch;margin:16px 0 20px}
.sp-lede{font-size:20px;line-height:1.5;color:var(--ink);max-width:62ch}
.sp-first-p{border-left:0;padding-left:0;color:var(--muted);margin-top:16px}
.sp-grid{margin-top:56px}
.sp-sec-h h2{font-weight:400;font-size:28px}
.sp-sec-h .meta{max-width:60ch}
.sp-list{gap:0}
.sp-pat,.sp-pat[open],.sp-pat.fit{border:0;border-top:1px solid var(--line);background:transparent;box-shadow:none}
.sp-pat:last-child{border-bottom:1px solid var(--line)}
.sp-pat summary{grid-template-columns:minmax(0,1fr) 24px;gap:4px 16px;padding:18px 2px}
.sp-pat summary:hover{background:transparent}
.sp-pat summary:hover .sp-name{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sp-why{grid-column:1}
.sp-chev{grid-column:2}
.sp-name{font-weight:400;font-size:21px}
.sp-pat-b{padding:0 2px 22px}
.sp-pat.flash summary{background:var(--sunk)}
.sp-ask{box-shadow:none;border-color:var(--line);background:var(--raised)}
.sp-pats .evkey{margin-top:18px}
.sp-rel{margin-top:72px}
.sp-relgrid{gap:12px}
.sp-relc{border:0;background:var(--sunk);padding:18px 18px 16px}
.sp-relc:hover{border:0;background:var(--raised)}
.sp-deeper{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:24px 6%;align-items:start;margin-top:72px}
.sp-deeper.solo{grid-template-columns:minmax(0,1fr)}
.sp-deeper > h2{grid-column:1/-1;margin:0;font:400 32px/1.15 var(--f-display);letter-spacing:-.015em}
.sp-deep-l{min-width:0}
.sp-carry h3{margin:0 0 14px;font:500 15px/1.3 var(--f-body);color:var(--muted)}
.sp-carry .inqlist{gap:0}
.sp-carry .inqlist li{padding:14px 0;border-top:1px solid var(--line);font-size:20px;line-height:1.35}
.sp-carry .inqlist li::before{font-size:13px;font-weight:500;color:var(--muted)}
.sp-carry > .meta{margin-top:14px}
.sp-foot{margin-top:56px;max-width:68ch;font-size:14.5px}
@media (max-width:1000px){.sp-deeper{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .sp-h1{font-size:clamp(28px,8vw,34px);margin:12px 0 16px}
  .sp-lede{font-size:18px}
  .sp-grid{margin-top:36px}
  .sp-name{font-size:19px}
  .sp-deeper > h2{font-size:27px}
}
.sp-says-h{margin:0 0 14px;font:500 15px/1.3 var(--f-body);color:var(--muted)}
.sp-deep-l > .sp-says{gap:0}
.sp-deep-l > .sp-says p{padding:10px 0;border-top:1px solid var(--line);font-size:18px;color:var(--ink)}

/* The rail (Andrew, 6 Nov 2026): the page you're on is marked plainly, and
   hover is quieter than it, so the row under the mouse never looks chosen. */
.nav button:hover{background:color-mix(in srgb,var(--ink) 3.5%,transparent);color:var(--ink)}
.nav button[aria-current="page"],.nav button[aria-current="page"]:hover{background:color-mix(in srgb,var(--ink) 13%,transparent);color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
.nav button[aria-current="page"] svg{color:var(--ink)}

/* Home tiles: an uneven last row spans, so no column sits empty (7 Nov 2026). */
@media (min-width:981px){.xgrid > :last-child:nth-child(3n+2){grid-column:span 2}}
@media (min-width:521px) and (max-width:980px){.xgrid > :last-child:nth-child(odd){grid-column:1/-1}}

/* ---------- Schemas and lifetraps (7 Nov 2026, src/psychology/schemas.ts) ----------
   The idea: a schema is woven from four threads that fire together. On the
   map every one of the eighteen is read through one thread at a time; on a
   lifetrap or schema page the threads are drawn as four strands meeting in
   one knot. The lifetraps hub opens on the sentence each one runs on. */
.sx,.sx-layer,.sx-hubcard{--sx-gap:56px}
@media (max-width:560px){.sx,.sx-layer,.sx-hubcard{--sx-gap:44px}}
.sx a{color:inherit}
.sx a.btn{text-decoration:none}
.sx .tv-crumb a{color:var(--muted);text-decoration:none}
.sx .tv-crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sx-h1{font:500 clamp(34px,4.6vw,56px)/1.05 var(--f-display);letter-spacing:-.02em;margin:14px 0 18px;max-width:20ch}
.sx-sub{font-size:19px;line-height:1.5;color:var(--ink);max-width:62ch;margin:0}
.sx-acts{margin:22px 0 0}
.sx-intro{color:var(--muted);font-size:15.5px;max-width:64ch;margin:-2px 0 18px}
.sx-sec > h2,.sx-more > h2,.sx-research > h2,.sx-others > h2,.sx-hubcard > h2,.sx-reslinks > h2,.sx-rank > h2{font:400 26px/1.2 var(--f-display);letter-spacing:-.01em}
.sx-note{margin:var(--sx-gap) 0 0;max-width:72ch;font-size:13.5px;line-height:1.55;color:var(--muted)}
.sx .made{margin-top:18px}

/* the four threads: four strands that meet in one knot */
.sx-weave{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);padding:22px 0 26px;margin-top:4px}
.sx-th{min-width:0;padding:0 20px}
.sx-th h3{margin:0 0 8px;font:600 15px/1.3 var(--f-body);color:var(--ink);display:flex;align-items:center;gap:8px}
.sx-th h3::before{content:"";width:8px;height:8px;background:var(--accent);flex:none}
.sx-th p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.sx-th-belief p{font:400 19px/1.4 var(--f-display)}
.sx-knot{grid-column:1/-1;display:block;width:100%;height:64px;margin-top:16px;overflow:visible}
.sx-knot path{fill:none;stroke:var(--accent);stroke-width:1.6}
.sx-knot-dot{position:absolute;left:50%;bottom:20px;width:13px;height:13px;background:var(--accent);transform:translateX(-50%) rotate(45deg)}
.sx-sec .sx-knot-cap{margin:12px 0 0;text-align:center;font-size:14px;color:var(--muted);max-width:none}
@media (max-width:760px){
  .sx-weave{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px 18px}
  .sx-th{padding:0 0 0 16px;box-shadow:inset 2px 0 0 var(--accent)}
  .sx-th h3::before{display:none}
  .sx-knot,.sx-knot-dot{display:none}
  .sx-sec .sx-knot-cap{text-align:left}
}

/* where it starts, what sets it off, three ways of coping */
.sx-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.sx-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.sx-three > div{min-width:0}
.sx-three h3,.sx-mode h3{margin:0 0 8px;font:600 16px/1.3 var(--f-body);color:var(--ink)}
.sx-three h3 small{display:block;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:2px}
.sx-three p,.sx-mode p{margin:0;font-size:15.5px}
@media (max-width:1000px){.sx-pair{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.sx-three{grid-template-columns:minmax(0,1fr);gap:18px}}

/* the modes: three parts, and the Healthy Adult holding them */
.sx-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sx-mode{background:var(--surface);padding:18px 18px 20px;min-width:0}
.sx-mode h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.sx-mode-adult{grid-column:1/-1;background:var(--accent-soft)}
.sx-mode-adult .sx-adult-note{margin-top:6px;font-size:14px;color:var(--muted)}
.sx-vm{display:inline-flex;align-items:center;gap:8px;font:500 13.5px/1 var(--f-body);color:var(--ink)}
.sx-vm b{font-weight:600}
.sx-vm-bars{display:inline-flex;align-items:flex-end;gap:2px}
.sx-vm-bars i{width:6px;background:var(--line-strong)}
.sx-vm-bars i:nth-child(1){height:7px}.sx-vm-bars i:nth-child(2){height:11px}.sx-vm-bars i:nth-child(3){height:15px}
.sx-vm[data-n="1"] i:nth-child(-n+1),.sx-vm[data-n="2"] i:nth-child(-n+2),.sx-vm[data-n="3"] i:nth-child(-n+3){background:var(--ink)}
@media (max-width:760px){.sx-modes{grid-template-columns:minmax(0,1fr)}}

/* how growth can happen */
.sx-growth{list-style:none;margin:0;padding:0;max-width:64ch}
.sx-growth li{padding:12px 0 12px 22px;position:relative;font-size:17px;line-height:1.5;border-top:1px solid var(--line)}
.sx-growth li:last-child{border-bottom:1px solid var(--line)}
.sx-growth li::before{content:"";position:absolute;left:2px;top:22px;width:8px;height:2px;background:var(--accent)}
.sx-growth-p{font-size:17px;line-height:1.55;max-width:64ch}
.sx-cl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sx-cl li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.5}
.sx-cl li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--accent)}
.sx-cl-p{margin:0;font-size:15.5px}

/* the inquiry: the one dark band on the page */
.sx-inq{margin-top:var(--sx-gap);background:var(--band);color:var(--on-band);padding:34px clamp(20px,4vw,44px) 38px;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 20px)}
.sx-inq h2{margin:0;font:400 22px/1.2 var(--f-display);color:var(--on-band)}
.sx-inq-sub{margin:6px 0 22px;font-size:14.5px;color:color-mix(in srgb,var(--on-band) 72%,transparent);max-width:60ch}
.sx-inq ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.sx-inq li{font:400 clamp(23px,2.6vw,30px)/1.25 var(--f-display);letter-spacing:-.01em;max-width:30ch}
:root[data-theme="dark"] .sx-inq{background:var(--raised)}

/* cards that lead to a page: a step in tone, no outline */
.sx-cards,.sx-hubcard-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.sx-card,.sx-hubcard-l a{display:grid;gap:8px;align-content:start;background:var(--surface);padding:18px 18px 20px;text-decoration:none;color:var(--ink);min-width:0}
.sx-card:hover,.sx-hubcard-l a:hover{background:var(--sunk)}
:root[data-theme="dark"] .sx-card:hover,:root[data-theme="dark"] .sx-hubcard-l a:hover{background:var(--raised)}
.sx-card b,.sx-hubcard-l b{font:500 20px/1.25 var(--f-display);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.sx-card > span:last-child,.sx-hubcard-l span{font-size:14.5px;color:var(--muted);line-height:1.5}
.sx-ev{font-size:13px;color:var(--muted)}

/* a lifetrap page: the sentence it runs on, set large */
.sx-lt{max-width:1080px}
.sx-ltop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"crumb crumb" "h1 h1" "gloss says" "def says" "acts says";column-gap:56px;align-items:start}
.sx-ltop > .tv-crumb{grid-area:crumb}.sx-ltop > .sx-h1{grid-area:h1;max-width:none}.sx-ltop > .sx-gloss{grid-area:gloss}.sx-ltop > .sx-def{grid-area:def}.sx-ltop > .sx-acts{grid-area:acts}
.sx-ltop > .sx-says{grid-area:says;margin:0;align-self:start;background:var(--surface);padding:22px 24px 24px}
@media (max-width:1000px){.sx-ltop{grid-template-columns:minmax(0,1fr);grid-template-areas:"crumb" "h1" "gloss" "def" "says" "acts"}.sx-ltop > .sx-says{margin-top:24px;background:none;padding:0}}
.sx-gloss{font-size:20px;line-height:1.45;margin:0 0 8px;color:var(--ink)}
.sx-def{font-size:17px;color:var(--muted);margin:0;max-width:62ch}
.sx-says{margin:30px 0 0;padding:0}
.sx-says p{margin:0;font:400 clamp(26px,2.6vw,32px)/1.2 var(--f-display);letter-spacing:-.012em;color:var(--ink);max-width:30ch;text-wrap:balance}
.sx-says p + p{margin-top:6px;color:var(--muted)}
.sx-says p::before{content:"“"}.sx-says p::after{content:"”"}
.sx-lt .blk,.sx-layer .blk{margin-top:var(--sx-gap)}
.sx-others ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 28px}
.sx-others li a{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none}
.sx-others li a b{font:500 18px/1.3 var(--f-display);color:var(--ink)}
.sx-others li a span{font-size:14px;color:var(--muted)}
.sx-others li a:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* the map of the eighteen */
.sx-hub .sx-sub{max-width:66ch}
.sx-lensbar{margin-top:48px}
.sx-lensbar h2{margin:0 0 4px;font:400 24px/1.2 var(--f-display)}
.sx-lensbar > p{margin:0 0 14px;color:var(--muted);font-size:15px;max-width:66ch}
.sx-lenses{display:flex;flex-wrap:wrap;gap:8px}
.sx-lenses button{border:1px solid var(--line-strong);background:transparent;color:var(--ink);padding:9px 15px;font-size:14.5px;font-weight:600;min-height:40px}
.sx-lenses button:hover{background:var(--sunk)}
.sx-lenses button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sx-lenses button:disabled{cursor:default}
.sx-map{margin-top:28px}
.sx-dom{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:16px 36px;padding:26px 0;border-top:1px solid var(--line)}
.sx-dom:last-child{border-bottom:1px solid var(--line)}
.sx-dom-h h2{margin:0 0 8px;font:400 23px/1.2 var(--f-display);letter-spacing:-.01em}
.sx-dom-h p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.sx-dom-h p span{display:block;color:var(--ink);font-weight:600}
.sx-tiles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sx-tiles li{display:flex;min-width:0;flex:1 1 210px}
.sx-tile{flex:1;display:flex;flex-direction:column;gap:8px;background:var(--surface);padding:16px 16px 18px;text-decoration:none;color:var(--ink);min-width:0}
.sx-tile:hover{background:var(--sunk)}
:root[data-theme="dark"] .sx-tile:hover{background:var(--raised)}
.sx-tn{font:500 19px/1.2 var(--f-display);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.sx-tile:hover .sx-tn{text-decoration-color:currentColor}
.sx-tl{font-size:14.5px;line-height:1.5;color:var(--ink);display:grid;gap:8px}
.sx-tl-q{font:400 17px/1.35 var(--f-display)}
.sx-tl-v{color:var(--muted);font-size:14px}
.sx-ltag{margin-top:auto;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.sx-ltag::before{content:"";width:7px;height:7px;border:1.5px solid currentColor}
.sx-more p{font-size:17px;line-height:1.55;max-width:64ch}
@media (max-width:900px){.sx-dom{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.sx-tiles{grid-template-columns:minmax(0,1fr)}.sx-lenses button{padding:8px 12px;font-size:14px}}
@media (prefers-reduced-motion:no-preference){
  .sx-map .sx-tl{animation:sxin .28s ease-out}
  @keyframes sxin{from{opacity:.25}to{opacity:1}}
}

/* the lifetraps: the trap drawn as a loop, then the sentences as doors */
.sx-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.sx-top-l,.sx-top-r{min-width:0}
.sx-loop{margin:0}
.sx-loop svg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
.sx-loop-ring{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.sx-loop-arc{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;marker-end:url(#sxar)}
.sx-loop-head{fill:var(--accent)}
.sx-loop-n rect{fill:var(--bg)}
.sx-loop-n text{fill:var(--ink);font:500 13.5px var(--f-body)}
.sx-loop figcaption{margin:10px auto 0;max-width:380px;font-size:14.5px;color:var(--muted);line-height:1.5}
.sx-loop figcaption b{color:var(--ink);font-weight:600}
.sx-wall-sec{margin-top:64px}
.sx-wall-sec > h2{margin:0 0 6px;font:400 30px/1.15 var(--f-display);letter-spacing:-.015em}
.sx-wall{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.sx-wall li{display:flex;min-width:0}
.sx-wi{flex:1;display:grid;gap:12px;align-content:start;padding:24px 0 26px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.sx-wi q{font:400 clamp(24px,2.5vw,30px)/1.22 var(--f-display);letter-spacing:-.012em;quotes:"“" "”"}
.sx-wi:hover q{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.sx-wn{display:grid;gap:2px;font-size:14.5px}
.sx-wn b{font-weight:600}
.sx-wn span{color:var(--muted)}
@media (max-width:1000px){.sx-top{grid-template-columns:minmax(0,1fr);gap:32px}.sx-loop svg{margin:0}.sx-loop figcaption{margin-left:0}}
@media (max-width:760px){.sx-wall{grid-template-columns:minmax(0,1fr)}.sx-wall-sec > h2{font-size:26px}.sx-loop svg{max-width:340px}}

/* the layer on each schema's term page */
.tv-entry .art.tv > .sx-layer,.tv-entry .art.tv > .sx-hubcard{max-width:1000px}
.sx-layer{margin-top:64px}
.sx-layer-h{background:var(--surface);padding:24px clamp(18px,3vw,30px) 26px}
.sx-layer-h h2{margin:0 0 10px;font:400 clamp(26px,3vw,32px)/1.15 var(--f-display);letter-spacing:-.015em;border:0;padding:0}
.sx-layer-h p{margin:0 0 8px;max-width:64ch;font-size:16.5px}
.sx-layer-h .sx-layer-dom{color:var(--muted);font-size:15px}
.sx-layer-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0 0!important}
.sx-layer-links a{color:var(--accent);font-weight:600;font-size:15px;text-underline-offset:3px}
.sx-hubcard p{font-size:16.5px;max-width:64ch}
.sx-hubcard-l{margin-top:16px}

/* the schemas self-check's result */
/* The schemas self-check's result list (9 Nov 2026): all eighteen, highest
   first, each a <details> that opens to the schema from the inside. */
.sx-rank .meta{margin:-4px 0 14px}
.sx-sum-wait{opacity:.6}
.sx-sum-by{margin-top:6px}
.sx-rk{list-style:none;margin:0;padding:0}
.sx-rk li{border-top:1px solid var(--line)}
.sx-rk li:last-child{border-bottom:1px solid var(--line)}
.sx-rk summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto 22px;column-gap:12px;row-gap:4px;align-items:baseline;padding:14px 0 16px;color:var(--ink)}
.sx-rk summary::-webkit-details-marker{display:none}
.sx-rk summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sx-rk-n{font-size:16px;line-height:1.35}
.sx-rk summary:hover .sx-rk-n{text-decoration:underline;text-underline-offset:3px}
.sx-rk-v{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.sx-rk-more{grid-column:3;grid-row:1;align-self:center;justify-self:end;width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-3px) rotate(45deg);transition:transform .15s ease}
.sx-rk details[open] .sx-rk-more{transform:translateY(2px) rotate(-135deg)}
.sx-rk-bar{grid-column:1 / -1;position:relative;height:6px;background:var(--line);margin-top:6px}
.sx-rk-bar i{position:absolute;inset:0 auto 0 0;background:var(--faint);opacity:.55}
.sx-rk-d{grid-column:1 / -1;font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:4px}
.sx-rk li.on .sx-rk-n{font:500 21px/1.25 var(--f-display)}
.sx-rk li.on .sx-rk-v{font:500 21px/1.25 var(--f-display);color:var(--ink)}
.sx-rk-v.sx-rk-w,.sx-rk li.on .sx-rk-v.sx-rk-w{font:400 14px/1.35 var(--f-body);color:var(--muted);white-space:nowrap}
.sx-rk li.on .sx-rk-v.sx-rk-w{color:var(--ink);font-weight:600}
.sx-rk li.on .sx-rk-bar{height:10px}
.sx-rk li.on .sx-rk-bar i{background:var(--accent);opacity:1}
.sx-rk-p{padding:2px 0 22px}
.sx-rk-p .sx-gloss{font-size:18px}
.sx-rk-dom{font-size:13.5px;color:var(--muted);margin:0 0 10px}
@media (prefers-reduced-motion:reduce){.sx-rk-more{transition:none}}
.sx-res .sx-says,.sx-rk-p .sx-says{margin:14px 0 18px}
.sx-res .sx-says p,.sx-rk-p .sx-says p{font-size:clamp(22px,2.4vw,26px)}
.sx-res-q{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sx-res-q li{font:400 20px/1.35 var(--f-display)}

/* ---------- Design check (7 Nov 2026): phone, iPad and desktop ----------
   One column for the whole library beside the rail: the menu bar, the search
   bar, the page and the footer start and end on the same two lines at every
   width (24px gutter beside the rail, 16px without it), capped at 1200px of
   content and centered on the space beside the rail on very wide screens.
   Pages hang from that left line instead of centering inside it. */
.app{--lib-g:24px;--lib-col:1200px;--lib-pad:max(var(--lib-g), calc((100% - var(--lib-col)) / 2))}
@media (max-width:980px){.app{--lib-g:16px}}
.app > .sc-nav,.app > .sc-ft{--sc-m:var(--lib-pad)}
.topbar-in,.app > main{padding-left:max(var(--lib-pad), env(safe-area-inset-left,0px));padding-right:max(var(--lib-pad), env(safe-area-inset-right,0px))}
#main > :is(.page,.narrow,.entry,.learn,.sp,.trtake){margin-left:0;margin-right:auto}
#main > .page{max-width:none}
/* the footer's last lines clear the phone's tab bar */
.app > .sc-ft{padding-bottom:calc(32px + var(--tabbar) + env(safe-area-inset-bottom,0px))}
/* Beside the rail the site's menu has about 730 to 950px: fold it into Menu
   until it fits in one line ("Psychology Library" and "Sign in" wrapped at 1024). */
@media (min-width:981px) and (max-width:1240px){
  .app > .sc-nav .sc-mid{display:none}
  .app > .sc-nav .sc-menu{display:inline-flex}
}
/* The home page's title stays on two lines beside its drawing at iPad landscape widths */
@media (min-width:981px) and (max-width:1239px){
  .hhero{grid-template-columns:minmax(0,1fr) minmax(200px,260px);gap:16px 32px}
  .hhero .h1{font-size:clamp(36px,4.4vw,52px)}
}
/* No decorative strokes: the short bar on each "How a search works" card and above each chapter heading */
.hstep::before,.chbody h3::before{display:none}
/* Chapters read in Hanken Grotesk like every other page; Newsreader stays for their headings */
.chbody{font:400 17.5px/1.7 var(--f-body)}
:root[data-theme="dark"] .chbody{font-weight:440}
/* Key terms: each meaning starts level with its term, even when the term wraps */
.kt{align-items:start}
.kt dd{padding-top:1px}
/* "Try one" suggestions take the same solid edge as every other chip */
.qchip{border-style:solid}
/* Situation rows on a phone: the title takes the full width and the area moves under it */
@media (max-width:560px){
  .row[data-s]{grid-template-columns:minmax(0,1fr)}
  .row[data-s] .side{order:3}
  .row[data-s] .side:empty{display:none}
}
/* Folds keep a readable measure on wide screens and the patterns' left line */
.tv-acc summary small{max-width:75ch}
.sp-fold summary{padding-left:2px;padding-right:2px}
.sp-fold-b{padding-left:2px;padding-right:2px}
/* The table beside a term's definition stays rows on a phone, not boxes with
   their text against the edge */
@media (max-width:700px){
  .tv-side .tv-table tr{border:0;border-top:1px solid var(--line);background:none;margin:0;border-radius:0}
}
/* Touch screens: buttons, chips and toggles are at least 44px (chips 40px) tall */
@media (pointer:coarse){
  .btn,.sp-ask .btn,.seg button,.sx-lenses button{min-height:44px}
  .chip{min-height:40px}
}
/* Schema tiles: every row is full, so no tile stretches across an empty row
   (four tiles sit two by two; five sit three and two) */
.sx-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.sx-tiles li{grid-column:span 2}
.sx-tiles li:only-child{grid-column:1/-1}
.sx-tiles li:nth-child(3n+1):nth-last-child(2),.sx-tiles li:nth-child(3n+2):last-child{grid-column:span 3}
.sx-tiles:has(> li:nth-child(4):last-child) li{grid-column:span 3}
@media (max-width:560px){.sx-tiles{grid-template-columns:minmax(0,1fr)}.sx-tiles > li{grid-column:auto!important}}
/* "Also a lifetrap" is marked with a small filled square, not an empty box that reads as a checkbox */
.sx-ltag::before{width:6px;height:6px;border:0;background:currentColor}
/* the search bar runs to the right line when there is nothing beside it */
.topact:not(:has(> button:not([hidden]), > span:not(:empty))){display:none}

/* ---------- The schemas field guide (8 Nov 2026, schemasHubHtml in src/psychology/schemas.ts) ----------
   The page is the object: Young's five domains are five tabbed folders, each
   named on its tab for the need that went unmet, and the eighteen are entry
   cards filed inside, each led by the sentence it runs on. Folders step in
   tone from one to the next (forest mixed into stone by day, into night stone
   at night); entry cards are the paper inside them. Square corners, no lines. */
.sx-fg{--sx-paper:var(--surface);--sx-f0:var(--sunk);max-width:1120px}
:root[data-theme="dark"] .sx-fg{--sx-paper:var(--bg);--sx-f0:var(--surface)}
.sx-fg [style*="--i"]{--sx-f:color-mix(in oklab, var(--accent) calc(3% + var(--i) * 4%), var(--sx-f0))}
:root[data-theme="dark"] .sx-fg [style*="--i"]{--sx-f:color-mix(in oklab, var(--accent) calc(2% + var(--i) * 3%), var(--sx-f0))}

/* the first screen: the title on the left, the five folders as the guide's index on the right */
.sx-fg-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 56px;align-items:start}
.sx-fg-top > .sx-fx{padding-top:58px}
.sx-fg-tl{min-width:0}
.sx-fg .sx-h1{font:500 clamp(44px,6.2vw,84px)/.98 var(--f-display);letter-spacing:-.03em;max-width:none;text-wrap:balance;margin:16px 0 22px}
.sx-fg .sx-sub{font-size:clamp(18px,1.6vw,20px);line-height:1.5;max-width:52ch}
.sx-fx{display:grid;min-width:0;padding-top:34px}
.sx-fx-f{position:relative;display:block;margin-top:34px;background:var(--sx-f);color:var(--ink);text-decoration:none;transition:transform .2s ease}
.sx-fx-f:first-child{margin-top:0}
.sx-fx-tab{position:absolute;bottom:100%;left:calc((100% - 16rem) * var(--i) / 4);width:16rem;height:30px;display:flex;align-items:center;justify-content:center;background:var(--sx-f);font:600 13px/1 var(--f-body);white-space:nowrap;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 100%,0 100%)}
.sx-fx-b{display:grid;gap:3px;padding:12px 16px 14px}
.sx-fx-b b{font:500 18px/1.25 var(--f-display)}
.sx-fx-b span{font-size:14px;line-height:1.45;color:var(--muted)}
.sx-fx-f:hover{transform:translateX(6px)}
.sx-fx-f:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sx-fx-f:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* the guide: heading, the thread switch, the folders */
.sx-guide{margin-top:120px;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 16px)}
.sx-guide-h{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:12px 56px;align-items:end}
.sx-guide-h h2,.sx-sec2 h2,.sx-reply h2{margin:0;font:400 clamp(32px,3.6vw,48px)/1.05 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.sx-guide-h p{margin:0;font-size:16.5px;line-height:1.55}
.sx-fg .sx-lensbar{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.sx-lens-l{margin:0;font-weight:600;font-size:15.5px}
.sx-fg .sx-lenses button{border:0;background:var(--sx-f0);min-height:42px}
.sx-fg .sx-lenses button:hover{background:color-mix(in oklab, var(--accent) 14%, var(--sx-f0))}
.sx-fg .sx-lenses button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.sx-minebar{margin:16px 0 0;font-size:15px;color:var(--muted);line-height:1.5}
.sx-minebar span{color:var(--ink)}
.sx-minebar a{color:var(--ink);text-underline-offset:3px}
.sx-mine-clear{border:0;background:none;padding:4px 0;margin-left:6px;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sx-mine-clear:hover{color:var(--ink)}
.sx-folders{margin-top:28px}
.sx-folder{position:relative;margin-top:18px;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 16px)}
.sx-tab{position:relative;margin-left:calc((100% - 19rem) * var(--i) / 4)!important;width:19rem;height:40px;margin:0;display:flex;align-items:center;justify-content:center;background:var(--sx-f);font:600 15px/1 var(--f-body);letter-spacing:0;white-space:nowrap;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 100%,0 100%)}
.sx-folder-h > p{grid-column:1 / -1}
.sx-folder-b{background:var(--sx-f);padding:30px clamp(16px,3vw,36px) clamp(18px,3vw,36px)}
.sx-folder-h{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 40px;align-items:baseline;margin-bottom:24px}
.sx-folder-h h3{margin:0;font:400 clamp(26px,2.6vw,34px)/1.1 var(--f-display);letter-spacing:-.015em}
.sx-folder-h p{margin:0;font:400 19px/1.4 var(--f-display);max-width:44ch}
.sx-folder-h p span{display:block;font:600 14.5px/1.4 var(--f-body);margin-bottom:2px;color:var(--muted)}
.sx-entries{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.sx-entries > li{grid-column:span 2}
.sx-entries > li:nth-child(3n+1):nth-last-child(2),.sx-entries > li:nth-child(3n+2):last-child{grid-column:span 3}
.sx-entries:has(> li:nth-child(4):last-child) > li,.sx-entries:has(> li:nth-child(2):last-child) > li{grid-column:span 3}
.sx-entry{position:relative;display:flex;flex-direction:column;background:var(--sx-paper);min-width:0;transition:background .18s ease}
.sx-entry:hover{background:color-mix(in oklab, var(--accent) 6%, var(--sx-paper))}
.sx-entry.is-mine::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent)}
.sx-ea{flex:1;display:flex;flex-direction:column;gap:12px;padding:20px 20px 12px;color:var(--ink);text-decoration:none;min-width:0}
.sx-ea:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.sx-en{font:500 22px/1.2 var(--f-display);letter-spacing:-.01em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.sx-ea:hover .sx-en{text-decoration-color:currentColor}
.sx-es{display:grid;gap:4px}
.sx-es span{font:400 19px/1.3 var(--f-display);text-wrap:pretty}
.sx-es span + span{font-size:16.5px;color:var(--muted)}
.sx-es span::before{content:"\201C"}.sx-es span::after{content:"\201D"}
.sx-el{display:grid;gap:8px;font-size:15px;line-height:1.5;color:var(--ink);margin-top:auto;padding-top:4px}
.sx-el-v{color:var(--muted);font-size:14.5px}
/* Each card's own thread switch (9 Nov 2026). */
.sx-et{display:flex;flex-wrap:wrap;gap:4px 6px;padding:0 20px;margin:2px 0 0}
.sx-et button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:6px 2px;margin-right:8px;font-size:13.5px;font-weight:600;min-height:36px;cursor:pointer}
.sx-et button:hover{color:var(--ink)}
.sx-et button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.sx-et button:disabled{cursor:default}
.sx-et button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sx-eb{padding:10px 20px 14px}
.sx-eb .sx-el{margin-top:0;padding-top:0}
.sx-ef{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 20px 14px;min-height:44px}
.sx-elt{font-size:14.5px;font-weight:600;color:var(--accent)!important;text-underline-offset:3px}
.sx-mine{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:8px 0;color:var(--muted);font:500 14.5px/1 var(--f-body);cursor:pointer;min-height:40px}
.sx-mine:hover{color:var(--ink)}
.sx-mine-box{width:14px;height:14px;box-shadow:inset 0 0 0 1.5px currentColor;flex:none;transition:background .15s ease}
.sx-mine[aria-pressed="true"]{color:var(--ink)}
.sx-mine[aria-pressed="true"] .sx-mine-box{background:var(--accent);box-shadow:none}
.sx-mine:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sx-folders .sx-tl,.sx-folders .sx-el{animation:none}
@media (prefers-reduced-motion:no-preference){.sx-folders .sx-el{animation:sxin .28s ease-out}}

/* the pages at the front and back of the guide */
.sx-sec2{margin-top:140px;scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 16px)}
.sx-lede{margin:14px 0 0;font-size:18px;line-height:1.5;max-width:52ch}
.sx-read{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 56px;align-items:start}
.sx-read-l{min-width:0}
.sx-read-l p{font-size:17px;line-height:1.6;margin:16px 0 0;max-width:52ch}
.sx-plate{margin:0;background:var(--sx-paper);padding:clamp(20px,3vw,36px);min-width:0}
:root[data-theme="dark"] .sx-plate{background:var(--surface)}
.sx-plate-n{margin:0;font:500 clamp(30px,3vw,40px)/1.1 var(--f-display);letter-spacing:-.02em}
.sx-plate-n a{text-decoration-thickness:1px;text-underline-offset:5px}
.sx-plate-g{margin:8px 0 0;font-size:17px;color:var(--muted)}
.sx-plate-s{margin:12px 0 0;display:grid;gap:4px}
.sx-plate-s span{font:400 clamp(21px,2vw,25px)/1.25 var(--f-display)}
.sx-plate-s span + span{color:var(--muted);font-size:18px}
.sx-plate-s span::before{content:"\201C"}.sx-plate-s span::after{content:"\201D"}
.sx-strands{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px 18px;align-items:stretch;margin-top:28px}
.sx-strands dl{margin:0;display:grid;grid-auto-rows:1fr;gap:0}
.sx-strands dl > div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0}
.sx-strands dt{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
.sx-strands dt::before{content:"";width:8px;height:8px;background:var(--accent);flex:none}
.sx-strands dd{margin:0;font-size:15.5px;line-height:1.45}
.sx-strands-svg{width:100%;height:100%;overflow:visible}
.sx-strands-svg path{fill:none;stroke:var(--accent);stroke-width:1.8}
.sx-strands-k{align-self:center;width:14px;height:14px;background:var(--accent);transform:rotate(45deg)}
.sx-plate figcaption{margin:22px 0 0;font-size:15px;line-height:1.5;color:var(--muted);max-width:56ch}
.sx-keep{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 56px;align-items:center}
.sx-keep-l,.sx-keep-r{min-width:0}
.sx-ways{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:4px}
.sx-ways li{background:var(--sx-f0);padding:20px 22px}
.sx-ways h3{margin:0 0 6px;font:400 23px/1.2 var(--f-display);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.sx-ways h3 small{font:500 14px/1.3 var(--f-body);color:var(--muted)}
.sx-ways p{margin:0;font-size:16.5px;line-height:1.5}
.sx-ways .sx-ways-eg{margin-top:8px;font-size:15px;color:var(--muted)}
.sx-ways-eg span{font-weight:600;color:var(--ink)}
.sx-keep-n{margin:20px 0 0;font-size:17px;line-height:1.55;max-width:56ch}
.sx-parts{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px 56px;align-items:start}
.sx-parts-l{min-width:0}
.sx-pl{margin:28px 0 0;display:grid;gap:22px}
.sx-pl div{display:grid;gap:4px}
.sx-pl dt{font:400 22px/1.2 var(--f-display)}
.sx-pl dd{margin:0;font-size:16.5px;line-height:1.5;max-width:52ch}
.sx-book{margin:36px 0 0;display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;align-items:start;background:var(--sx-f0);padding:20px 22px}
.sx-book-c{display:block}
.sx-book-c img{display:block;width:100%;height:auto;box-shadow:0 14px 28px -18px rgba(0,0,0,.5)}
.sx-book figcaption{display:grid;gap:4px;min-width:0}
.sx-book b{font:400 22px/1.2 var(--f-display);color:var(--ink)}
.sx-book-by{font-size:14.5px;line-height:1.45;color:var(--muted)}
.sx-book-l{font-size:16px;line-height:1.5;margin-top:6px;max-width:48ch}
.sx-book-a{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px}
.sx-book-a a{font-size:15.5px;font-weight:500;color:var(--accent);text-underline-offset:3px}
@media (max-width:560px){.sx-book{grid-template-columns:84px minmax(0,1fr);gap:16px;padding:18px}}
.sx-voice{background:var(--accent-soft);padding:clamp(20px,3vw,32px);min-width:0}
.sx-voice h3{margin:0;font:400 24px/1.2 var(--f-display);letter-spacing:-.01em}
.sx-voice > p{margin:10px 0 0;font-size:15.5px;line-height:1.5}
.sx-voice ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:18px}
.sx-voice li{display:grid;gap:8px}
.sx-voice-n{display:flex;flex-wrap:wrap;gap:4px 14px}
.sx-voice-n a{font-size:15.5px;color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.sx-voice-n a:hover{text-decoration-color:currentColor}
.sx-years{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.sx-years li{display:grid;gap:8px;align-content:start;min-width:0}
.sx-years b{font:400 clamp(40px,4.4vw,60px)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.sx-years span{font-size:15.5px;line-height:1.5}
.sx-rs-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px;margin-top:28px;align-items:start}
.sx-rs .sx-cards{grid-template-columns:minmax(0,1fr);gap:10px}
.sx-rs .sx-card{background:var(--sx-f0)}
.sx-shelf{background:var(--sx-paper);padding:22px 22px 10px;min-width:0}
:root[data-theme="dark"] .sx-shelf{background:var(--raised)}
.sx-shelf h3{margin:0;font:400 24px/1.2 var(--f-display)}
.sx-shelf > p{margin:6px 0 10px;font-size:14.5px;color:var(--muted)}
.sx-shelf ul{list-style:none;margin:0;padding:0}
.sx-shelf li a{display:grid;gap:2px;padding:12px 0;color:var(--ink);text-decoration:none}
.sx-shelf li + li a{box-shadow:0 -1px 0 var(--line)}
.sx-shelf-k{font-size:14px;font-weight:600;color:var(--accent)}
.sx-shelf li b{font:500 18px/1.3 var(--f-display)}
.sx-shelf li a:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sx-shelf li span:last-child{font-size:14px;color:var(--muted)}

/* the reply card: the self-check as a card lying on a dark field, cut by its lower edge */
.sx-reply{margin-top:140px;background:var(--band);color:var(--on-band);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 56px;align-items:end;padding:48px clamp(20px,4vw,56px) 0;overflow:hidden}
:root[data-theme="dark"] .sx-reply{background:var(--raised)}
.sx-reply-l{margin:0 0 72px;font:400 clamp(21px,2vw,25px)/1.35 var(--f-display);color:var(--on-band);max-width:28ch}
.sx-reply-c{background:#F4EFE6;color:#1B2420;padding:40px clamp(22px,3.4vw,44px) 76px;transform:rotate(-1.6deg) translateY(30px);transform-origin:50% 100%;text-align:center;display:grid;justify-items:center;gap:14px}
.sx-reply-c h2{color:#1B2420}
.sx-reply-c p{margin:0;font-size:17px;line-height:1.5;max-width:42ch}
.sx-reply-c .btn{margin-top:8px}
.sx-reply-alt{color:#1B2420!important;font-size:15.5px;font-weight:600;text-underline-offset:3px}
.sx-fg .sx-note{margin-top:72px}

@media (max-width:1100px){
  .sx-fg-top{grid-template-columns:minmax(0,1fr)}
  .sx-fx{max-width:none}
}
@media (max-width:900px){
  .sx-guide-h,.sx-folder-h,.sx-read,.sx-keep,.sx-parts,.sx-rs-g,.sx-reply{grid-template-columns:minmax(0,1fr)}
  .sx-entries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-entries > li{grid-column:auto!important}
  .sx-entries > li:last-child:nth-child(odd){grid-column:1/-1!important}
  .sx-keep-l{order:2}
  .sx-years{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-reply-l{margin:0}
  .sx-reply-c{transform:rotate(-1deg) translateY(30px)}
  .sx-guide,.sx-sec2,.sx-reply{margin-top:96px}
}
@media (max-width:560px){
  .sx-fx-tab{left:calc((100% - 15.5rem) * var(--i) / 4);width:15.5rem;font-size:12.5px}
  .sx-tab{margin-left:calc((100% - 16.5rem) * var(--i) / 4)!important;width:16.5rem;font-size:13.5px;height:36px}
  .sx-entries{grid-template-columns:minmax(0,1fr)}
  .sx-entries > li{grid-column:auto!important}
  .sx-folder{margin-top:14px}
  .sx-strands{grid-template-columns:minmax(0,1fr)}
  .sx-strands dl{grid-auto-rows:auto}
  .sx-strands-svg,.sx-strands-k{display:none}
  .sx-strands dl > div{grid-template-columns:minmax(0,1fr);gap:4px;box-shadow:inset 2px 0 0 var(--accent);padding:8px 0 8px 14px;margin:6px 0}
  .sx-strands dt::before{display:none}
  .sx-years{grid-template-columns:minmax(0,1fr);gap:22px}
  .sx-reply{padding-top:48px}
  .sx-reply-c{padding-bottom:64px}
}

/* motion: the folders and plates rise into place as they scroll in (where the
   browser can tie an animation to scrolling), the strands draw into their knot */
@media (prefers-reduced-motion:no-preference){
  .sx-fx-f{animation:sxrise .5s cubic-bezier(.2,.7,.2,1) calc(.08s + var(--i) * .07s) backwards}
  @keyframes sxrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @supports (animation-timeline: view()){
    .sx-plate,.sx-voice,.sx-shelf,.sx-years,.sx-reply-c{animation:sxslide linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .sx-folder-b{animation:sxslide2 linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
    @keyframes sxslide{from{transform:translateY(28px)}to{transform:none}}
    @keyframes sxslide2{from{transform:translateY(10px)}to{transform:none}}
    .sx-reply-c{animation-name:sxcard}
    .sx-strands-svg path{stroke-dasharray:1;animation:sxdraw linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
    @keyframes sxdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
    @keyframes sxcard{from{transform:rotate(0deg) translateY(90px)}to{opacity:1;transform:rotate(-1.6deg) translateY(30px)}}
  }
}

/* ---------- The schemas field guide as the one schemas page (8 Nov 2026) ----------
   The model's own term page and the lifetraps were folded in: how to say it
   and the care note under the title, the three coworkers, how schemas show,
   how they differ, the research study by study, the try-it and the questions
   people ask. */
.sx-say{margin:14px 0 0;font-size:15.5px;color:var(--muted)}
.sx-say span{color:var(--ink);font-weight:600}
.sx-care{margin:22px 0 0;max-width:60ch;font-size:14.5px;line-height:1.55;color:var(--muted)}
.sx-care b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.sx-elt{font-size:14px;font-weight:500;color:var(--muted)!important}
.sx-eg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 56px;align-items:start}
.sx-eg-l,.sx-eg-r{min-width:0}
.sx-eg > h2{grid-column:1/-1;max-width:24ch}
.sx-eg-l .sx-eg-why{margin-top:0!important}
.sx-eg-l p,.sx-eg-r > p{font-size:16.5px;line-height:1.6;margin:14px 0 0;max-width:56ch}
.sx-eg-l .sx-eg-why{font-size:18px;color:var(--ink)}
.sx-voices{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sx-voices li{background:var(--sx-f0);padding:18px 22px}
.sx-voices b{font:600 15px/1.3 var(--f-body)}
.sx-voices p{margin:6px 0 0;font:400 19px/1.45 var(--f-display)}
.sx-voices p::before{content:"\201C"}.sx-voices p::after{content:"\201D"}
.sx-eg-r .sx-eg-key{font-weight:600}
.sx-shows-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;margin-top:28px}
.sx-shows-g h3{margin:0 0 8px;font:400 22px/1.2 var(--f-display)}
.sx-shows-g p{margin:0;font-size:16px;line-height:1.6}
.sx-differ{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 56px;align-items:start}
.sx-differ > div{min-width:0}
.sx-differ h2{font-size:clamp(26px,2.6vw,34px)!important}
.sx-differ dt a{color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1px}
.sx-isnt{background:var(--sx-f0);padding:clamp(20px,3vw,32px)}
.sx-isnt h3{margin:22px 0 6px;font:400 20px/1.25 var(--f-display)}
.sx-isnt h2 + h3{margin-top:20px}
.sx-isnt p{margin:0;font-size:16px;line-height:1.55}
.sx-rs-r{margin:14px 0 0}
.sx-studies{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sx-study{background:var(--sx-paper);padding:clamp(18px,2.4vw,28px);min-width:0}
:root[data-theme="dark"] .sx-study{background:var(--surface)}
.sx-study h3{margin:0 0 10px;font:400 21px/1.25 var(--f-display)}
.sx-study p{margin:10px 0 0;font-size:15.5px;line-height:1.55}
.sx-study .tv-bars{margin-top:14px}
.sx-study-not{color:var(--ink)}
.sx-study-not b{font-weight:600}
.sx-study .sx-study-src{font-size:14px;color:var(--muted)}
.sx-rs-sum{margin:22px 0 0;font-size:17px;line-height:1.55;max-width:70ch}
.sx-rs-sum b{font-weight:600}
.sx-try{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;align-items:stretch}
.sx-adds{background:var(--accent-soft);padding:clamp(22px,3vw,36px);min-width:0}
.sx-adds h2,.sx-try-b h2{font-size:clamp(26px,2.6vw,34px)!important}
.sx-adds p{margin:14px 0 0;font-size:16.5px;line-height:1.55}
.sx-adds .sx-adds-q{font:400 clamp(23px,2.4vw,30px)/1.25 var(--f-display);margin-top:22px}
.sx-try-b{background:var(--sx-f0);padding:clamp(22px,3vw,36px);min-width:0}
.sx-try-b p{margin:14px 0 0;font-size:16.5px;line-height:1.55}
.sx-try-b ol{margin:16px 0 0;padding-left:22px;display:grid;gap:8px;font-size:16.5px;line-height:1.5}
.sx-try-b .sx-try-after{color:var(--muted);font-size:15px}
.sx-faq-l{margin-top:24px;max-width:860px}
.sx-faq details{background:var(--sx-f0);margin-top:4px}
.sx-faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;position:relative;font:400 20px/1.3 var(--f-display)}
.sx-faq summary::-webkit-details-marker{display:none}
.sx-faq summary::after{content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.sx-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.sx-faq summary:hover{background:color-mix(in oklab, var(--accent) 8%, var(--sx-f0))}
.sx-faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.sx-faq details p{margin:0;padding:0 22px 20px;font-size:16.5px;line-height:1.6;max-width:70ch}
@media (max-width:900px){
  .sx-eg,.sx-differ,.sx-try{grid-template-columns:minmax(0,1fr)}
  .sx-shows-g,.sx-studies{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.sx-faq summary::after{transition:none}}

/* The Plus mark, as on the main site (theme.css, Andrew, 9 Nov 2026): the
   clay rose dot before the word and a clay rose line under it. */
.plusmark,.pm-link{white-space:nowrap;text-decoration-line:underline;text-decoration-color:var(--dot)!important;text-decoration-thickness:max(1.5px,.07em);text-underline-offset:.22em}
.plusmark{font-weight:500}
.plusmark::before,.pm-link::before{content:"";display:inline-block;width:.42em;height:.42em;min-width:6px;min-height:6px;border-radius:50%;background:var(--dot);margin-right:.34em;vertical-align:.1em}
.sr-plus,.sp-plus,.guidecard.pm-box{border-left:2px solid var(--dot)!important}

/* A signed-in Plus member: no Plus link in the menu (as site-chrome.css) */
:root[data-plus="1"] .sc-nav a.sc-plus,:root[data-plus="1"] .sc-mnav a[href="/plus"]{display:none!important}

/* The folded sections under the eighteen (9 Nov 2026). */
.sx-bookrow{margin-top:56px}
.sx-accs{margin-top:72px;border-bottom:1px solid var(--line)}
.sx-acc{border-top:1px solid var(--line);scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 16px)}
.sx-acc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0}
.sx-acc > summary::-webkit-details-marker{display:none}
.sx-acc > summary h2{margin:0;font:400 clamp(24px,2.6vw,30px)/1.2 var(--f-display);letter-spacing:-.01em}
.sx-acc > summary:hover h2{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sx-acc > summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sx-acc-i{flex:none;width:11px;height:11px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-3px) rotate(45deg);transition:transform .15s ease}
.sx-acc[open] .sx-acc-i{transform:translateY(3px) rotate(-135deg)}
.sx-acc-b > .sx-sec2{margin-top:4px;margin-bottom:44px}
.sx-isnt-h{font:400 24px/1.2 var(--f-display);margin:0 0 10px}
.sx-accs + .sx-try{margin-top:88px}
@media (prefers-reduced-motion:reduce){.sx-acc-i{transition:none}}

/* Each schema's icon beside its name on the field guide's cards and the self-check result (9 Nov 2026). */
.sx-enr{display:flex;align-items:center;gap:10px}
.sx-enr .ic{flex:none;width:26px;height:26px;margin:0}
.sx-rk-n .ic{width:22px;height:22px;vertical-align:-4px;margin-right:9px}
.sx-rk li.on .sx-rk-n .ic{width:26px;height:26px;vertical-align:-5px}
.sx-book-k{display:block;font:600 13px/1.4 var(--f-body);color:var(--muted);margin-bottom:4px}

/* Conscious Living AI is writing (9 Nov 2026). Same look as .clw in
   src/styles.css for the main site; change both together. */
.clw{display:flex;align-items:center;gap:14px;padding:14px 3px;margin:4px 0}
.clw-m{display:inline-flex;gap:5px;flex:none}
.clw-m i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:clwb 1.5s ease-in-out infinite}
.clw-m i:nth-child(2){animation-delay:.18s}.clw-m i:nth-child(3){animation-delay:.36s}
.clw-b{display:grid;gap:2px;min-width:0}
.clw-k{font:600 12.5px/1.3 var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.clw-t{font:400 19px/1.35 var(--f-display);color:var(--ink)}
.clw-in{animation:clwt .45s ease-out}
@keyframes clwb{0%,100%{transform:translateY(0) scale(.8);opacity:.45}45%{transform:translateY(-5px) scale(1);opacity:1}}
@keyframes clwt{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.clw-m i,.clw-in{animation:none}.clw-m i{opacity:.8}}

/* "Try it" that writes back (9 Nov 2026). */
.try-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:6px}
.try-act .meta{margin:0;max-width:52ch}
.try-r:empty{display:none}
.try-r{margin-top:14px}
.try-out{border-top:1px solid var(--accent-line);padding-top:14px}
.sx-try-b .tv-three{margin:14px 0}
.sx-try-b .tv-three label{color:var(--ink)}

/* The library's section icons (Andrew, 9 Nov 2026): the section you're in
   stands out, bright icon and label with a sage bar beside it (above it on
   the phone's tab bar); the others are dimmer. Clay rose stays Plus's. */
.nav button svg,.nav a svg{color:var(--faint)}
.nav button:hover svg,.nav a:hover svg{color:var(--ink)}
.nav button[aria-current="page"],.nav button[aria-current="page"]:hover,.nav a[aria-current="page"]{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.nav button[aria-current="page"] svg,.nav a[aria-current="page"] svg{color:var(--ink)}
.tabbar button{position:relative;color:var(--faint)}
.tabbar button[aria-current="page"],.tabbar button[aria-current="page"] span{color:var(--ink)}
.tabbar button[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:2px;background:var(--accent)}

/* Two ways into the schemas check (10 Nov 2026): the button carries its length. */
.tk-bmeta{display:block;font-size:12.5px;font-weight:400;opacity:.8;margin-top:3px}
.acts .btn:has(.tk-bmeta){flex-direction:column;align-items:flex-start;line-height:1.25;padding-top:10px;padding-bottom:10px;height:auto}

/* The field guide's two sets (10 Nov 2026): the 11 lifetraps first, all 18 a tap away. */
.sx-viewsw{display:inline-flex;border:1px solid var(--line-strong);margin:18px 0 10px}
.sx-viewsw button{border:0;background:none;color:var(--ink);font:600 14.5px/1 var(--f-body);padding:12px 18px;min-height:44px;cursor:pointer}
.sx-viewsw button + button{border-left:1px solid var(--line-strong)}
.sx-viewsw button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.sx-viewsw button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sx-viewsw button:disabled{cursor:default}
.sx-cap{color:var(--muted);max-width:62ch;margin:0 0 22px}
.sx-guide[data-view="lifetraps"] .sx-folders,.sx-guide[data-view="lifetraps"] .sx-cap-sx{display:none}
.sx-guide[data-view="schemas"] .sx-ltview,.sx-guide[data-view="schemas"] .sx-cap-lt{display:none}
.sx-guide[data-view="lifetraps"] .sx-fm-v-sx,.sx-guide[data-view="schemas"] .sx-fm-v-lt{display:none}
/* "You ticked" and "From your check" (15 Nov 2026, fieldmap.ts). Two shapes, not two colors: a filled chip with a tick, and an outlined chip with a ring; a tile from the check also gets a dashed edge, a tick-marked tile the bar on top. */
.sx-fm{margin:18px 0 0;padding:28px 24px 24px;border:1px solid var(--line);background:var(--sx-paper);font-size:15px;line-height:1.55;color:var(--muted);scroll-margin-top:calc(var(--sc-stick,0px) + var(--bar) + 16px)}
.sx-fm p{margin:0}.sx-fm p + p{margin-top:8px}
.sx-fm b{color:var(--ink)}
.sx-fm a{color:var(--ink);text-underline-offset:3px}
.sx-fm-acts{white-space:nowrap}
.sx-fm-cmp{color:var(--ink);font-size:16px}
.sx-fm-note{font-size:14px}
.sx-fm-row{display:block}.sx-fm-row + .sx-fm-row{margin-top:2px}
/* the chips open the tile, above its name (15 Nov 2026 review) */
.sx-sigs{display:flex;flex-wrap:wrap;gap:6px;padding:20px 20px 0}
.sx-sigs + .sx-ea{padding-top:12px}
.sx-sigs-hold{display:none}
@media (min-width:600px){.sx-sigs-hold{display:block;height:44px;padding:0}}
.sx-sig{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;font:600 13px/1.1 var(--f-body);color:var(--ink);white-space:nowrap}
.sx-sig i{flex:none;display:block;width:10px;height:10px;position:relative}
.sx-sig-tick{background:var(--accent);color:var(--accent-ink)}
.sx-sig-tick i::before{content:"";position:absolute;left:0;top:1px;width:10px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.sx-sig-chk{box-shadow:inset 0 0 0 1.5px var(--accent);background:transparent}
.sx-sig-chk i{border:2px solid var(--accent);border-radius:50%}
.sx-entry.is-check{outline:1.5px dashed var(--accent);outline-offset:-1.5px}
@media (max-width:480px){.sx-fm{padding:28px 18px 22px}.sx-sigs{padding:18px 16px 0}}
.sx-ltview{background:var(--sx-f);padding:22px}
.sx-ltnote{font-size:13.5px;color:var(--muted);padding:0 20px;margin:-4px 0 10px}
.sx-ltmore{margin:20px 0 0;color:var(--muted)}
.sx-ltmore-b{border:0;background:none;padding:0;margin-left:4px;color:var(--ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:560px){.sx-ltview{padding:14px}.sx-viewsw{display:flex}.sx-viewsw button{flex:1;padding:12px 10px}}

/* Follow-ups and signing in (10 Nov 2026). */
.fu-open{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:16px 0 4px}
.fu-open .meta{margin:0;max-width:46ch}
.fu-turn{margin-top:16px}
.fu-box{margin-top:16px}
.plus-signin{display:inline-block;margin:10px 0 0;font-size:14.5px}
.sp-plus-wrap{margin:12px 0 0}
.sp-plus + .plus-signin{margin-left:2px}

/* Self-checks for two people (11 Nov 2026): the compare block, the invitation and the side-by-side page.
   The second person is a diamond and a hatched bar, so the two differ by shape and pattern, not by color alone. */
.tg-block{border-top:1px solid var(--line);padding-top:22px}
.tg-lab{display:block;font-weight:600;font-size:15px;margin:14px 0 6px}
.tg-in{display:block;width:100%;max-width:340px;min-height:44px;padding:10px 12px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-s);font-size:16px}
.tg-in:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tg-row{display:grid;grid-template-columns:minmax(64px,110px) minmax(0,1fr) auto;gap:10px;align-items:center;margin:6px 0}
.tg-row .trm-bar{margin:0}
.tg-row .trm-v{font-size:20px;min-width:72px;text-align:right}
.tg-who{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.tg-sw{flex:none;width:12px;height:12px;background:var(--accent);display:inline-block}
.tg-sw.dot{border-radius:50%}
.tg-sw.dia{transform:rotate(45deg) scale(.8);background:none;border:2px solid var(--accent)}
.tg-b2 .trm-bar i{background:repeating-linear-gradient(135deg,var(--accent) 0 4px,transparent 4px 8px);outline:1px solid var(--accent);outline-offset:-1px}
.tg-m p{margin-top:6px}
.mf-pt2{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.mf-pt2-ring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.45}
.tg-legend,.tg-leads{list-style:none;margin:10px 0 6px;padding:0;display:grid;gap:8px}
.tg-legend li{display:flex;align-items:center;gap:10px;min-width:0}
.tg-legend svg{flex:none}
.tg-legend span{min-width:0;overflow-wrap:anywhere}
.tg-qtext{font:400 clamp(21px,4.6vw,26px)/1.35 var(--f-display);margin:6px 0 0;max-width:34ch}
.tg-rate{margin-top:16px}
.tg-compare .acts .btn,.tg-block .acts .btn{min-height:44px}
@media (max-width:480px){.tg-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}.tg-row .tg-who{grid-column:1 / -1}.tg-row .trm-v{grid-column:2;grid-row:2}.tg-row .trm-bar{grid-column:1;grid-row:2}}
@media (prefers-reduced-motion: reduce){.tg-compare *,.tg-block *{transition:none!important;animation:none!important}}
.ai-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}.ai-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* "Put this self-check on your website" (12 Nov 2026): a closed disclosure with the code to paste. */
.em-get-d,.em-get-d2{border-top:1px solid var(--line)}
.em-get-d>summary,.em-get-d2>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:var(--ink)}
.em-get-d2{margin-top:12px}
.em-get-d2>summary{font-weight:500;font-size:15px}
.em-get-l{display:block;margin:12px 0 6px;font-weight:600;font-size:14px}
.em-get-t{display:block;width:100%;min-height:120px;padding:10px 12px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:var(--sunk);border:1px solid var(--line);border-radius:0;resize:vertical}
.em-get-s{min-height:1.5em}
/* Two-person checks: the line and the invite button at the start (14 Nov 2026). */
.tg-up{margin:14px 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.tg-up p{margin:0;flex:1 1 230px;font-size:14.5px;line-height:1.45}
.tg-invite{min-height:40px;padding:8px 14px;font-size:14.5px}
.tg-up-take{margin:12px 0 0;display:block}
.tg-asked{margin:0 0 14px}
.tg-next{margin:14px 0 0}
.tg-more{margin:18px 0 0}
.tg-more summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:14.5px;padding:6px 0}
.tg-more p{margin:6px 0 0}

/* The end row under a finished reflection: Save, Email, Erase (14 Nov 2026) */
.act-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.act-row .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.act-row .btn svg{width:14px;height:14px;flex:none}
.act-line{margin:12px 0 0;max-width:46ch;overflow-wrap:anywhere}
.act-again{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;max-width:46ch;min-height:44px;font-size:14.5px;line-height:1.45;cursor:pointer}
.act-again input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--deep, currentColor)}
.act-again input:disabled+span{opacity:.6}
.act-confirm .act-row{margin-top:10px}

/* The site's menu bar and footer (src/lib/site-chrome.ts), the same on every
   page (Andrew, 6 Nov 2026). Colors and fonts come from theme.css. Every
   class starts with sc- so no page stylesheet reaches them by accident. */

.sc-nav {
  --sc-m: 5vw;
  position: relative;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px var(--sc-m);
  background: var(--cl-bg);
  color: var(--cl-ink);
  font: 400 15px/1.3 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .sc-nav { font-weight: 440; }
.sc-nav a { color: inherit; text-decoration: none; }
.sc-nav .sc-brand { display: inline-flex; flex-direction: column; font: 500 18px/1.1 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; color: var(--cl-ink); }
/* The line under the logo (Andrew, 6 Nov 2026, "for now") */
.sc-brand .brand-line {
  display: block;
  margin-top: 3px;
  font: 400 12.5px/1.1 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cl-muted);
  white-space: nowrap;
}

/* The light and dark switch in the menu bar */
.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--cl-ink) 22%, transparent);
  background: transparent;
  color: var(--cl-ink);
  cursor: pointer;
  flex: none;
}
.theme-switch svg { width: 17px; height: 17px; }
.theme-switch .ts-sun { display: none; }
:root[data-theme="dark"] .theme-switch .ts-sun { display: block; }
:root[data-theme="dark"] .theme-switch .ts-moon { display: none; }
.sc-mid { display: flex; gap: 28px; align-items: center; }
.sc-mid a { padding-bottom: 2px; border-bottom: 2px solid transparent; }
.sc-mid a:hover { border-bottom-color: color-mix(in srgb, var(--cl-ink) 30%, transparent); }
.sc-mid a.on { font-weight: 500; border-bottom-color: var(--cl-ink); }
.sc-end { display: flex; gap: 18px; align-items: center; }
.sc-nav .sc-plus { display: inline-flex; align-items: center; font-weight: 500; color: var(--cl-ink); }
.sc-nav .sc-plus::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--cl-dot);
}
.sc-menu {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--cl-ink) 22%, transparent);
  background: transparent;
  color: var(--cl-ink);
  font: 400 14px/1 var(--font-sans);
  cursor: pointer;
}
.sc-menu svg { width: 16px; height: 16px; }
.sc-mnav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  padding: 6px var(--sc-m) 18px;
  background: var(--cl-bg);
  border-bottom: 1px solid var(--cl-line);
}
.sc-mnav[hidden] { display: none; }
.sc-mnav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--cl-line);
  font: 400 24px/1.1 var(--font-serif);
  letter-spacing: -0.01em;
}
@media (max-width: 1000px) {
  .sc-mid { display: none; }
  .sc-menu { display: inline-flex; }
  /* touch sizes: every control in the bar at least 44px tall (7 Nov 2026);
     the bar's padding gives back the difference so it keeps its height */
  .sc-nav { padding-block: 18px; }
  .theme-switch { width: 44px; height: 44px; }
  .sc-menu { min-height: 44px; padding: 0 14px; }
  .sc-end > a, .sc-me > a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 760px) {
  .sc-nav { --sc-m: 20px; gap: 12px; }
  .sc-end { gap: 10px; }
  .sc-me { display: none; }
}
/* the smallest phones: the bar keeps its 20px right margin at 360 wide */
@media (max-width: 400px) {
  .sc-nav { gap: 8px; }
  .sc-end { gap: 6px; }
  .sc-menu { padding: 0 10px; }
}

/* footer */
.sc-ft {
  --sc-m: clamp(20px, 5vw, 72px);
  background: var(--cl-band);
  color: var(--cl-on-band);
  --cl-accent: var(--cl-accent-band);
  padding: 64px var(--sc-m) 32px;
  font: 400 15px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .sc-ft { font-weight: 440; }
.sc-ft a { color: inherit; text-decoration: none; }
.sc-ft p { margin: 0; }
.sc-ft-in {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.sc-ft-name { font: 500 20px/1.2 var(--font-sans); letter-spacing: -0.01em; }
.sc-ft-tag { margin: 8px 0 18px !important; font: 400 24px/1.2 var(--font-serif); color: var(--cl-accent); }
.sc-ft-contact { font-size: 14px; color: color-mix(in srgb, var(--cl-on-band) 78%, transparent); }
.sc-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.sc-h { margin-bottom: 4px !important; font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--cl-on-band) 62%, transparent); }
.sc-col a { font-size: 15px; line-height: 1.35; color: color-mix(in srgb, var(--cl-on-band) 88%, transparent); }
.sc-col a.all { margin-top: 4px; color: var(--cl-accent); }
.sc-ft a:hover { color: var(--cl-on-band); text-decoration: underline; text-underline-offset: 3px; }
.sc-ft-note {
  max-width: 1440px;
  margin: 48px auto 0 !important;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--cl-on-band) 16%, transparent);
  font-size: 13.5px;
  color: color-mix(in srgb, var(--cl-on-band) 70%, transparent);
}
.sc-ft-bottom { max-width: 1440px; margin: 12px auto 0 !important; font-size: 13px; color: color-mix(in srgb, var(--cl-on-band) 56%, transparent); }
/* tablets: the name across the top, the four lists in one row under it
   (two rows of two left half of each row empty on an iPad, 7 Nov 2026) */
@media (max-width: 1100px) {
  .sc-ft-in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
  .sc-ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .sc-ft-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 560px) {
  .sc-ft { padding-top: 48px; }
  .sc-ft-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}

/* A signed-in Plus member: no Plus link in the menu bar or the folded menu
   (Andrew, 7 Nov 2026). data-plus is set before the page paints from the
   note the site leaves (use-account-links.ts), so it holds on every page. */
:root[data-plus="1"] .sc-nav a.sc-plus,
:root[data-plus="1"] .sc-mnav a[href="/plus"],
:root[data-plus="1"] .plus-pill,
:root[data-plus="1"] .cl-plus { display: none !important; }

/* The menu bar stays at the top while scrolling (Andrew, 9 Nov 2026). Once
   the page has moved (data-scrolled, set by the boot script in __root.tsx
   and the library's page.server.ts) it slims to one line, 52px, in the page's own color with no line under it (Andrew, 9 Nov 2026); the margin
   under it keeps its place in the page the same, so nothing below jumps.
   Sticky things inside pages sit under it through --sc-stick. */
:root { --sc-stick: 52px; }
/* No transition on the bar's size or the margin under it (14 Nov 2026).
   The bar drops to 52px at once and the margin used to ease in over .18s,
   so for that moment the page sat 28px higher, then slid back down: on a
   phone the first swipe down from the top stuck and jerked, and Chrome's
   scroll anchoring moved the page back above 8px, which took the slim bar
   off again (Andrew's iPhone, 14 Nov 2026). Bar and margin now change in
   the same frame and add up to the same height. */
.sc-nav { position: sticky; top: 0; transition: none; }
.sc-wrap:has(> .sc-nav) { display: contents; }
:root[data-scrolled] .sc-nav { height: 52px; padding-top: 0; padding-bottom: 0; margin-bottom: 28px; }
:root[data-scrolled] .sc-nav .brand-line { display: none; }
.sc-mnav { max-height: calc(100vh - 52px); overflow-y: auto; }
@media (prefers-reduced-motion: reduce) { .sc-nav { transition: none; } }

/* The consent line's two answers look alike (10 Nov 2026): "No, count me
 * anonymously" is a button the same size as OK, not a text link, so saying
 * no is as easy as saying yes. Wins over the per-page copies of .c-no. */
.consent .consent-btns{flex-wrap:wrap}
.consent .consent-btns .c-no{border:1.5px solid currentColor;padding:10px 18px;text-decoration:none;line-height:normal}

/* The consent line on phones (Andrew, 14 Nov 2026): a slim bar pinned to the
 * bottom instead of a tall box over the page. One short line (.txt-s, put in
 * by wireConsentLine in src/lib/consent-line.ts) and the same two buttons on
 * one row; no label above it. Wider screens keep the box. On the home page it
 * sits above the sticky Start bar once that is showing; the library's copy
 * sits above its tab bar (its style.css). */
.consent .txt-s{display:none}
@media (max-width:640px){
  #consent.consent{left:0;right:0;bottom:0;width:auto;padding:7px 16px calc(7px + env(safe-area-inset-bottom,0px));border:0;border-top:1px solid var(--cl-line);box-shadow:0 -10px 28px color-mix(in srgb,var(--cl-ink) 14%,transparent)}
  #consent.consent .lab,#consent.consent .txt{display:none}
  #consent.consent .txt-s{display:block;margin:0;font-size:13px;line-height:1.38;color:var(--cl-ink)}
  #consent.consent .txt-s a{color:inherit;text-decoration:underline;text-underline-offset:3px}
  #consent.consent .consent-btns{flex-wrap:nowrap;gap:8px;margin-top:6px}
  #consent.consent .consent-btns button{min-height:36px;padding:0 14px;font-size:13px;line-height:1;white-space:nowrap}
  #consent.consent .consent-btns .c-no{padding:0 14px}
  :root:has(.hm-bar.show) #consent.consent{bottom:calc(58px + max(26px, env(safe-area-inset-bottom,0px) + 14px));padding-bottom:7px}
}

/* The care notice (Andrew, 11 Nov 2026; link-only since 12 Nov 2026). One small
   calm notice wherever a crisis, danger or care message used to be: a line, a
   drawing, one sentence about emergencies and one link to findahelpline.com.
   A library page's own lines sit in a closed disclosure under it. Colors come
   from the site's names (theme.css); the fallbacks are the Psychology
   Library's own names, which share this file. Square corners, no color alone:
   the link is a word in a box. */
.cn {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 4px 14px;
  margin: 20px 0;
  padding: 12px 16px;
  max-width: 720px;
  border: 1px solid var(--cl-line, var(--line));
  border-left: 3px solid var(--cl-accent, var(--accent));
  background: var(--cl-panel, var(--sunk, transparent));
  color: var(--cl-ink, var(--ink));
  font: 400 16px/1.45 var(--font-sans, var(--f-body, system-ui));
  text-align: left;
  white-space: normal;
}
:root[data-theme="dark"] .cn { font-weight: 440; }
.cn .cn-art { width: 36px; height: 36px; display: block; color: var(--cl-accent, var(--accent)); }
.cn .cn-ring { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transform-origin: 24px 24px; animation: cn-breathe 7s ease-in-out infinite; }
.cn .cn-core { fill: currentColor; opacity: .55; transform-origin: 24px 24px; animation: cn-glow 7s ease-in-out infinite; }
@keyframes cn-breathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.05); } }
@keyframes cn-glow { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .7; transform: scale(1.08); } }
.cn .cn-text { min-width: 0; }
.cn .cn-text p.cn-line { margin: 0; color: var(--cl-ink, var(--ink)); font-size: 16px; line-height: 1.45; max-width: none; }
.cn .cn-text p.cn-emerg { margin: 2px 0 0; color: var(--cl-muted, var(--muted)); font-size: 15px; line-height: 1.45; max-width: none; }
.cn a.cn-btn {
  text-decoration: none !important;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; padding: 6px 20px; box-sizing: border-box;
  border: 1px solid var(--cl-ink, var(--ink)); background: transparent;
  color: var(--cl-ink, var(--ink)); white-space: nowrap; cursor: pointer;
}
.cn .cn-btn-t { font: 500 15px/1.1 var(--font-sans, var(--f-body, system-ui)); }
.cn .cn-hint { font: 400 12.5px/1.1 var(--font-sans, var(--f-body, system-ui)); opacity: .75; }
.cn a.cn-btn:hover { background: var(--cl-ink, var(--ink)); color: var(--cl-bg, var(--bg)); }
.cn a.cn-btn:hover .cn-hint { opacity: .9; }
.cn .cn-btn:focus-visible, .cn .cn-more summary:focus-visible, .cn .cn-more a:focus-visible { outline: 2px solid var(--cl-accent, var(--accent)); outline-offset: 3px; }
/* A library page's own lines: a closed disclosure, plain text with tappable links. */
.cn .cn-more { grid-column: 1 / -1; margin-top: 6px; border-top: 1px solid var(--cl-line, var(--line)); }
.cn .cn-more summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  color: var(--cl-ink, var(--ink)); font-size: 15px; font-weight: 500;
}
.cn .cn-more summary::-webkit-details-marker { display: none; }
.cn .cn-more summary::before {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 0 2px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease;
}
.cn .cn-more[open] summary::before { transform: rotate(45deg); }
.cn details.cn-more p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--cl-ink-soft, var(--cl-ink, var(--ink))); max-width: 62ch; }
.cn .cn-more a { color: var(--cl-accent, var(--accent)); text-decoration: underline; }
@media (max-width: 560px) {
  .cn { grid-template-columns: 32px 1fr; padding: 12px 14px; }
  .cn .cn-art { width: 32px; height: 32px; }
  .cn .cn-btn { grid-column: 1 / -1; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn .cn-ring, .cn .cn-core { animation: none; }
  .cn .cn-more summary::before { transition: none; }
}
/* On the approved pages (page-layout.css) paragraphs carry !important sizes, colors and margins: the notice keeps its own. */
.cl .cn .cn-text p.cn-line { margin: 0 !important; color: var(--cl-ink, var(--ink)) !important; font-size: 16px !important; line-height: 1.45 !important; max-width: none !important; }
.cl .cn .cn-text p.cn-emerg { margin: 2px 0 0 !important; color: var(--cl-muted, var(--muted)) !important; font-size: 15px !important; line-height: 1.45 !important; max-width: none !important; }
.cl .cn details.cn-more p { margin: 0 0 10px !important; color: var(--cl-ink-soft, var(--cl-ink, var(--ink))) !important; font-size: 15px !important; line-height: 1.55 !important; max-width: 62ch !important; }
.cl .cn a.cn-btn { color: var(--cl-ink, var(--ink)) !important; }
.cl .cn a.cn-btn:hover { color: var(--cl-bg, var(--bg)) !important; }

/* The abuse block of a danger reply (14 Nov 2026): above the notice, same
   frame and width, plain text with tap-to-call numbers. */
.cn-danger {
  margin: 20px 0 0; padding: 12px 16px; max-width: 720px; box-sizing: border-box;
  border: 1px solid var(--cl-line, var(--line)); border-left: 3px solid var(--cl-accent, var(--accent));
  background: var(--cl-panel, var(--sunk, transparent)); color: var(--cl-ink, var(--ink));
  font: 400 16px/1.5 var(--font-sans, var(--f-body, system-ui)); text-align: left; white-space: normal;
}
:root[data-theme="dark"] .cn-danger { font-weight: 440; }
.cn-danger p.cn-dsent { margin: 0 0 8px; font-size: 16px; line-height: 1.5; max-width: none; }
.cn-danger ul.cn-dlist { margin: 0; padding: 0; list-style: none; }
.cn-danger ul.cn-dlist li { margin: 0; padding: 7px 0; border-top: 1px solid var(--cl-line, var(--line)); font-size: 16px; line-height: 1.5; }
.cn-danger .cn-ctry { font-weight: 600; margin-right: 4px; }
.cn-danger .cn-who { color: var(--cl-muted, var(--muted)); }
.cn-danger a { color: var(--cl-ink, var(--ink)); text-decoration: underline; text-underline-offset: 2px; padding: 8px 2px; }
.cn-danger a:focus-visible { outline: 2px solid var(--cl-accent, var(--accent)); outline-offset: 2px; }
/* the notice that follows sits close under the block */
.cn-danger + .cn, .cn-wrap + .cn-wrap > .cn { margin-top: 10px; }
.cl .cn-danger p.cn-dsent { margin: 0 0 8px !important; font-size: 16px !important; line-height: 1.5 !important; max-width: none !important; color: var(--cl-ink, var(--ink)) !important; }
.cl .cn-danger ul.cn-dlist { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cl .cn-danger ul.cn-dlist li { margin: 0 !important; font-size: 16px !important; line-height: 1.5 !important; }