@charset "UTF-8";
/* ====================================================================
   PsychologyOrbit — Sukoon
   Implements DESIGN.md. If this file and DESIGN.md disagree, DESIGN.md wins.

   1. Fonts          5. Layout          9. Feed
   2. Tokens         6. Buttons        10. Profile
   3. Reset          7. Forms          11. Paper (reading surface)
   4. Typography     8. Cards          12. Motion / utilities
   ==================================================================== */

/* ==================================================================
   1. FONTS  — self-hosted, no third-party request

   Generated by database/fetch-fonts.php. Do not hand-edit; re-run it.
   unicode-range means a browser only downloads the subset it needs.
   ================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-300-800-latin-ext.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-300-800-latin.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-400-700-latin-ext.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-400-700-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plex-mono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================================
   2. TOKENS
   ================================================================== */

:root {
  /* Sukoon: a consulting room in the late afternoon. Cream sheets on an oat
     desk; the plants are the only strong colour. These values mirror the app
     (D:/Dev/psychologyorbit/DESIGN.md, lib/core/theme/tokens.dart), so the
     site and the app are one brand. Change both or neither.

     Four colour jobs and nothing else:
       sage    = action: the primary button, links, the current position
       apricot = attention: unread counts and "new", never an action
       lapis   = verification badges ONLY, so a blue check always means checked
       brick   = destructive and errors */

  /* --- Paper: the reading surface --- */
  --paper:      #FFFEFA;
  --paper-warm: #FAF5EA;
  --paper-edge: #E3DACA;
  --paper-ink:  #1E2622;
  --paper-mute: #5E645F;

  /* --- Signal: sage --- */
  --signal-700: #24523F;   /* links on the paper sheet, cream in both themes */
  --signal-600: #24523F;
  --signal-500: #2F6650;
  --signal-400: #2F6650;   /* links and eyebrows on the desk and cards */
  --signal-300: #24523F;   /* link hover */
  --signal-glow: rgba(47, 102, 80, .12);
  /* The primary button carries its own pair, so the accent can change
     lightness per theme for text without breaking the button. */
  --btn-fill:       #2F6650;
  --btn-fill-hover: #24523F;
  --btn-ink:        #FBF8F2;

  /* --- Apricot: attention only --- */
  --warm:     #A65623;
  --warm-ink: #FFFDF8;

  /* Avatar fallback tint. The hue is set per user inline (--av-h); only the
     lightness follows the theme, so initials stay readable in both. */
  --av-l: 80%;
  --av-s: 22%;

  /* --- Semantic: reserved, never decorative --- */
  --verify:    #2F64A0;
  --verify-bg: rgba(47, 100, 160, .10);
  --danger:    #B03A2E;
  --danger-bg: rgba(176, 58, 46, .10);
  --warn:      #8A580C;
  --info:      #4F6577;

  /* --- Role aliases: what components actually reference --- */
  --bg:          #F4EFE6;   /* oat */
  --bg-deep:     #EAE3D6;
  --bg-band:     #EFE9DE;
  --surface:     #FBF8F2;   /* cream */
  --surface-up:  #FFFDF8;
  /* --field is the sunken surface: inputs, chips, inline code. */
  --field:       #F0EADF;
  --code-bg:     #EAE3D6;
  --text:        #1C2621;   /* moss */
  --text-2:      #33403A;
  --text-3:      #56615B;
  --text-mute:   #5F6A64;
  /* Placeholders and decorative rules only, never body copy. */
  --haze-500:    #8A928C;
  --line:        #E4DDCF;
  --line-strong: #D5CDBD;
  --line-bright: #B9B09E;

  /* --- Depth: hairlines, plus one faint warm shadow on light cards.
     Nothing floats. --soft-2 is the hover step for linked cards only. --- */
  --soft-1: 0 1px 2px rgba(58,48,32,.05), 0 10px 24px -8px rgba(58,48,32,.06);
  --soft-2: 0 1px 2px rgba(58,48,32,.06), 0 14px 30px -10px rgba(58,48,32,.11);
  --sheet-shadow: 0 1px 2px rgba(58,48,32,.06), 0 18px 40px -18px rgba(58,48,32,.16);
  --modal-shadow: 0 24px 64px -16px rgba(58,48,32,.28);

  /* --- Type --- */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-ui: 'Instrument Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --f-mono: 'Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  --t-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  --t-h1: clamp(2.05rem, 1.4rem + 2.4vw, 3.05rem);
  --t-h2: clamp(1.6rem, 1.25rem + 1.3vw, 2.15rem);
  --t-h3: 1.375rem;
  --t-h4: 1.125rem;
  --t-body: 1rem;
  --t-read: 1.125rem;
  --t-sm: .9375rem;
  --t-xs: .8125rem;
  --t-meta: .75rem;

  /* --- Space (4px base; these are the only permitted values) --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

  /* --- Radius: hierarchical, never uniform. sm chips and inputs, md cards
     and buttons (never a pill), lg sheets and paper, full avatars only. --- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px;

  /* --- Motion: unhurried and never bouncy; things settle, not spring --- */
  --ease: cubic-bezier(.16,1,.30,1);
  --ease-out: cubic-bezier(.16,1,.30,1);
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 420ms;
  --d-theme: 600ms;

  /* --- Layout --- */
  --w-page: 1240px;
  --w-read: 720px;
  --w-nav: 232px;
  --w-rail: 300px;
  --h-header: 60px;
}

/* After sunset. data-theme is "auto" until someone uses the toggle, and
   auto follows the device. The two blocks below MUST stay identical;
   tests/theme-tokens.php fails if they drift. */
:root[data-theme="dark"] {
  --bg:          #111916;   /* pine, never navy or black */
  --bg-deep:     #0C1210;
  --bg-band:     #141D19;
  --surface:     #18221E;
  --surface-up:  #1E2924;
  --field:       #0F1613;
  --code-bg:     #0C1210;
  --text:        #EFEADF;   /* moon */
  --text-2:      #CED4CC;
  --text-3:      #A3ADA6;
  --text-mute:   #8C978F;
  --haze-500:    #6E7972;
  --line:        #25312C;
  --line-strong: #303E38;
  --line-bright: #44544C;
  --paper:       #F5F0E6;   /* the sheet stays cream at night */
  --paper-warm:  #EDE6D8;
  /* Sage lightens on the pine desk. 700 stays dark: it is only used for
     links on the paper sheet, which is cream in both themes. */
  --signal-700:  #24523F;
  --signal-600:  #6FAA8C;
  --signal-500:  #8CC7A9;
  --signal-400:  #8CC7A9;
  --signal-300:  #B3DCC6;
  --signal-glow: rgba(140, 199, 169, .14);
  --btn-fill:       #8CC7A9;
  --btn-fill-hover: #A3D3BA;
  --btn-ink:        #0C1A14;
  --warm:        #E99D6E;
  --warm-ink:    #0C1210;
  --av-l:        24%;
  --av-s:        20%;
  --verify:      #8DB3E2;
  --verify-bg:   rgba(141, 179, 226, .12);
  --danger:      #E8877A;
  --danger-bg:   rgba(232, 135, 122, .12);
  --warn:        #DDA65E;
  --info:        #9DB0C0;
  /* The warm card shadow is light-theme only; at night hairlines do it. */
  --soft-1: none;
  --soft-2: none;
  --sheet-shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 36px -14px rgba(0,0,0,.55);
  --modal-shadow: 0 24px 64px -16px rgba(0,0,0,.7);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:          #111916;   /* pine, never navy or black */
    --bg-deep:     #0C1210;
    --bg-band:     #141D19;
    --surface:     #18221E;
    --surface-up:  #1E2924;
    --field:       #0F1613;
    --code-bg:     #0C1210;
    --text:        #EFEADF;   /* moon */
    --text-2:      #CED4CC;
    --text-3:      #A3ADA6;
    --text-mute:   #8C978F;
    --haze-500:    #6E7972;
    --line:        #25312C;
    --line-strong: #303E38;
    --line-bright: #44544C;
    --paper:       #F5F0E6;   /* the sheet stays cream at night */
    --paper-warm:  #EDE6D8;
    /* Sage lightens on the pine desk. 700 stays dark: it is only used for
       links on the paper sheet, which is cream in both themes. */
    --signal-700:  #24523F;
    --signal-600:  #6FAA8C;
    --signal-500:  #8CC7A9;
    --signal-400:  #8CC7A9;
    --signal-300:  #B3DCC6;
    --signal-glow: rgba(140, 199, 169, .14);
    --btn-fill:       #8CC7A9;
    --btn-fill-hover: #A3D3BA;
    --btn-ink:        #0C1A14;
    --warm:        #E99D6E;
    --warm-ink:    #0C1210;
    --av-l:        24%;
    --av-s:        20%;
    --verify:      #8DB3E2;
    --verify-bg:   rgba(141, 179, 226, .12);
    --danger:      #E8877A;
    --danger-bg:   rgba(232, 135, 122, .12);
    --warn:        #DDA65E;
    --info:        #9DB0C0;
    /* The warm card shadow is light-theme only; at night hairlines do it. */
    --soft-1: none;
    --soft-2: none;
    --sheet-shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 36px -14px rgba(0,0,0,.55);
    --modal-shadow: 0 24px 64px -16px rgba(0,0,0,.7);
  }
}

/* The browser's own controls (radio dots, autofill, scrollbars) follow the
   SITE's theme, not the device's. Without this a dark-mode phone viewing the
   light theme drew dark radio dots and a dark autofill box on cream. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { color-scheme: dark; }
}

/* ==================================================================
   3. RESET
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + var(--s-5));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color var(--d-theme) var(--ease), color var(--d-theme) var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
svg { flex: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--signal-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--signal-glow); color: var(--text); }

/* Scrollbars: part of the instrument, not an afterthought */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--line-bright); }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--btn-fill); color: var(--btn-ink);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  font-weight: 600; text-decoration: none;
  transition: top var(--d-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==================================================================
   4. TYPOGRAPHY
   ================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 60;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.3; }
h4 { font-size: var(--t-h4); line-height: 1.4; letter-spacing: -.01em; }

.display {
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 144;
}

p { margin: 0 0 var(--s-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--signal-400); text-decoration: none; transition: color var(--d-fast) var(--ease); }
a:hover { color: var(--signal-300); }

.lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
}

.meta {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.meta--plain { text-transform: none; letter-spacing: .02em; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal-500);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

code, kbd, samp { font-family: var(--f-mono); font-size: .9em; }
code {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .1em .38em;
}
pre.code {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  overflow-x: auto;
  margin: 0 0 var(--s-4);
}
pre.code code { background: none; border: 0; padding: 0; }

blockquote {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-4);
  border-left: 2px solid var(--signal-600);
  color: var(--text-2);
}

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); }

/* ==================================================================
   5. LAYOUT
   ================================================================== */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.wrap--narrow { max-width: 880px; }
.wrap--read { max-width: var(--w-read); }

.band { padding-block: var(--s-9); }
.band--tight { padding-block: var(--s-7); }
.band--alt { background: var(--bg-band); border-block: 1px solid var(--line); }

/* --- Header --- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  height: var(--h-header);
  /* No bottom rule: the bar and the page read as one surface. */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.hdr__in {
  height: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
  min-width: 0;
}

.brand { flex: none; }
.brand {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--text); font-family: var(--f-display);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em;
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 40;
  white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand__mark { color: var(--signal-500); }
.brand__mark .ic { width: 26px; height: 26px; }

.hdr__nav { display: flex; align-items: center; gap: var(--s-1); margin-left: var(--s-2); flex: none; }
.hdr__link {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: var(--t-sm); font-weight: 500;
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.hdr__link:hover { color: var(--text); background: var(--surface); }
.hdr__link[aria-current="page"] { color: var(--text); }
.hdr__link[aria-current="page"]::after {
  content: ''; position: absolute; inset-inline: var(--s-3); bottom: -1px;
  height: 1px; background: var(--signal-500);
}
.hdr__link { position: relative; }

.hdr__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }

.hdr__search {
  position: relative;
  /* The nav keeps its size and the search field gives way: at 1280px a
     signed-in header (five links) used to run "Knowledge" under the box. */
  flex: 0 1 300px;
  min-width: 150px;
}
.hdr__search input {
  width: 100%;
  height: 36px;
  padding: 0 var(--s-3) 0 36px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--t-sm);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.hdr__search input::placeholder { color: var(--haze-500); }
.hdr__search input:focus { border-color: var(--line-bright); background: var(--surface); }
.hdr__search .ic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-mute); pointer-events: none;
}

/* Account menu in the header */
.acct { position: relative; }
.acct__btn {
  list-style: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  transition: box-shadow var(--d-fast) var(--ease);
}
.acct__btn::-webkit-details-marker { display: none; }
.acct__btn:hover, .acct[open] .acct__btn { box-shadow: 0 0 0 3px var(--signal-glow); }
.acct__menu {
  position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 90;
  width: 15rem;
  padding: var(--s-2);
  background: var(--surface-up);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--modal-shadow);
  transform-origin: top right;
  animation: menuIn var(--d-fast) var(--ease-out) both;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.acct__who {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-2) var(--s-3) var(--s-3);
  margin-bottom: var(--s-1);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.acct__who strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__i {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--t-sm); text-align: left;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.acct__i:hover { background: var(--field); color: var(--text); }
.acct__i .ic { color: var(--text-mute); }
.acct__out { margin: var(--s-1) 0 0; padding-top: var(--s-1); border-top: 1px solid var(--line); }

.icon-btn {
  position: relative;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  color: var(--text-3);
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.icon-btn:hover { color: var(--text); background: var(--surface); }
.icon-btn__dot {
  position: absolute; top: 6px; right: 6px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center;
  /* Apricot: an unread count is attention, not an action. */
  background: var(--warm); color: var(--warm-ink);
  font-family: var(--f-mono); font-size: 9px; font-weight: 500;
  border-radius: var(--r-full);
  border: 2px solid var(--bg);
}

/* --- App shell: nav / main / rail --- */
.shell {
  display: grid;
  grid-template-columns: var(--w-nav) minmax(0, 1fr) var(--w-rail);
  gap: var(--s-6);
  max-width: var(--w-page);
  margin-inline: auto;
  padding: var(--s-6) var(--s-5) var(--s-9);
  align-items: start;
}
.shell--no-rail { grid-template-columns: var(--w-nav) minmax(0, 1fr); }
.shell--wide { grid-template-columns: minmax(0, 1fr); max-width: var(--w-page); }

.shell__nav, .shell__rail {
  position: sticky;
  top: calc(var(--h-header) + var(--s-5));
  max-height: calc(100vh - var(--h-header) - var(--s-8));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: var(--t-sm); font-weight: 500;
  border: 1px solid transparent;
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}
.sidenav__item:hover { color: var(--text); background: var(--surface); }
.sidenav__item.is-active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}
.sidenav__item.is-active .ic { color: var(--signal-500); }
.sidenav__item .ic { color: var(--text-mute); transition: color var(--d-fast) var(--ease); }
.sidenav__count { margin-left: auto; font-family: var(--f-mono); font-size: var(--t-meta); color: var(--text-mute); }
.sidenav__sep { height: 1px; background: var(--line); margin: var(--s-3) var(--s-3); }
.sidenav__label {
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute);
  padding: var(--s-3) var(--s-3) var(--s-2);
}

/* --- Grids --- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.row--top { align-items: flex-start; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--tight { gap: var(--s-2); }
.stack--loose { gap: var(--s-6); }
.spacer { flex: 1; }

/* ==================================================================
   6. BUTTONS
   ================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease),
              box-shadow var(--d-base) var(--ease),
              transform var(--d-fast) var(--ease);
}
.btn:active { transform: scale(.985); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn .ic { margin-inline: -2px; }

.btn--primary {
  background: var(--btn-fill); color: var(--btn-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--soft-1);
}
.btn--primary:hover {
  background: var(--btn-fill-hover); color: var(--btn-ink);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--soft-2);
}
.btn--primary:active { transform: scale(.985); }

.btn--secondary { border-color: var(--line-strong); color: var(--text); }
.btn--secondary:hover { border-color: var(--line-bright); background: var(--surface); color: var(--text); }

.btn--ghost { color: var(--text-3); }
.btn--ghost:hover { color: var(--text); background: var(--surface); }

.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg); color: var(--danger); }

.btn--sm { height: 34px; padding: 0 var(--s-3); font-size: var(--t-xs); }
.btn--lg { height: 48px; padding: 0 var(--s-6); font-size: 1rem; }
.btn--block { width: 100%; }

/* Toggle actions on posts and research */
.act {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 32px; padding: 0 var(--s-2);
  border-radius: var(--r-md);
  color: var(--text-mute);
  font-size: var(--t-xs); font-weight: 500;
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.act:hover { color: var(--text-2); background: var(--surface-up); }
.act.is-on { color: var(--signal-500); }
.act.is-on .ic { fill: var(--signal-glow); }
.act__n { font-family: var(--f-mono); font-size: var(--t-meta); }

/* ==================================================================
   7. FORMS
   ================================================================== */

.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.field__label { font-size: var(--t-sm); font-weight: 600; color: var(--text-2); }
.field__label .req { color: var(--signal-500); margin-left: 2px; }
.field__hint { font-size: var(--t-xs); color: var(--text-mute); line-height: 1.5; }
.field__err {
  font-size: var(--t-xs); color: var(--danger);
  display: flex; align-items: flex-start; gap: var(--s-2); line-height: 1.5;
}
.field__err .ic { margin-top: 1px; }

.input, .select, .textarea {
  width: 100%;
  min-height: 42px;
  padding: var(--s-2) var(--s-3);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--t-sm);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--haze-500); }
/* Autofill paints its own colours over ours; keep the field on-theme. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--field) inset;
  transition: background-color 600000s 0s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--signal-600);
  background: var(--surface);
  outline: none;
}
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--danger); }

.textarea { min-height: 110px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  padding-right: var(--s-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C7793' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}

.check {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--text-2); cursor: pointer;
  line-height: 1.5;
}
.check input[type="checkbox"], .check input[type="radio"] {
  appearance: none;
  width: 18px; height: 18px; flex: none; margin-top: 2px;
  border: 1px solid var(--line-bright);
  border-radius: var(--r-sm);
  background: var(--field);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.check input[type="radio"] { border-radius: var(--r-full); }
.check input:checked {
  background: var(--signal-500);
  border-color: var(--signal-500);
}
.check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23070911' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.check input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--field); }

/* Card-shaped radio, used for account type and visibility pickers */
.pick { display: grid; gap: var(--s-2); }
.pick__opt {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.pick__opt:hover { border-color: var(--line-bright); background: var(--surface); }
.pick__opt:has(input:checked) {
  border-color: var(--signal-600);
  background: color-mix(in srgb, var(--signal-500) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--signal-600);
}
/* Our own radio: an empty ring until chosen, then a filled dot. The native
   one read as a dark filled dot on every unchosen row. */
.pick__opt input[type="radio"],
.pick__opt input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 20px; height: 20px; margin: 1px 0 0;
  border: 2px solid var(--line-bright);
  border-radius: var(--r-full);
  background: var(--surface);
  cursor: pointer;
  display: grid; place-content: center;
  transition: border-color var(--d-fast) var(--ease);
}
.pick__opt input[type="checkbox"] { border-radius: var(--r-sm); }
.pick__opt input:hover { border-color: var(--signal-600); }
.pick__opt input:checked { border-color: var(--signal-600); }
.pick__opt input[type="radio"]::before {
  content: ""; width: 10px; height: 10px; border-radius: var(--r-full);
  background: var(--signal-600); transform: scale(0);
  transition: transform var(--d-fast) var(--ease);
}
.pick__opt input[type="radio"]:checked::before { transform: scale(1); }
.pick__opt input[type="checkbox"]:checked {
  background: var(--signal-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E") center no-repeat;
}
.pick__opt input:focus-visible { outline: 2px solid var(--signal-500); outline-offset: 2px; }
/* A group heading inside a picker (Practitioners, Academics, Students). */
.pick__group {
  font-size: var(--t-sm); font-weight: 650; color: var(--text);
  margin: var(--s-5) 0 2px; letter-spacing: 0; text-transform: none;
}
.pick__t { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.pick__d { font-size: var(--t-xs); color: var(--text-mute); line-height: 1.5; }

.form-note {
  font-size: var(--t-xs); color: var(--text-mute);
  padding-top: var(--s-3); border-top: 1px solid var(--line);
  line-height: 1.6;
}

/* ==================================================================
   8. CARDS, BADGES, AVATARS
   ================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--soft-1);
  padding: var(--s-5);
}
.card--flush { padding: 0; overflow: hidden; }
.card--band { background: var(--bg-band); }

.card--link {
  display: block; color: inherit;
  transition: box-shadow var(--d-base) var(--ease),
              background var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease),
              transform var(--d-base) var(--ease);
}
.card--link:hover {
  background: var(--surface-up);
  border-color: var(--line-strong);
  box-shadow: var(--soft-2);
  transform: translateY(-2px);
  color: inherit;
}

.card__hd {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.card__hd h3, .card__hd h2 { margin: 0; font-size: var(--t-h4); }
.card__bd { padding: var(--s-5); }
.card__ft {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--bg-band);
}

/* --- Avatars --- */
.av {
  --sz: 40px;
  width: var(--sz); height: var(--sz);
  flex: none;
  border-radius: var(--r-full);
  overflow: hidden;
  background: hsl(var(--av-h, 220) var(--av-s) var(--av-l));
  box-shadow: inset 0 0 0 1px var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: calc(var(--sz) * .38);
  color: var(--text-2);
  letter-spacing: -.02em;
  user-select: none;
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av--24 { --sz: 24px; }
.av--32 { --sz: 32px; }
.av--40 { --sz: 40px; }
.av--56 { --sz: 56px; }
.av--96 { --sz: 96px; }
.av--144 { --sz: 144px; }

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px;
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Teal appears nowhere else on this site. That is what makes it mean
   something (DESIGN.md 3.5). */
.badge--verified {
  background: var(--verify-bg);
  border-color: color-mix(in srgb, var(--verify) 40%, transparent);
  color: var(--verify);
}
.badge--signal {
  background: var(--signal-glow);
  border-color: color-mix(in srgb, var(--signal-500) 40%, transparent);
  color: var(--signal-400);
}
.badge--quiet { border-color: var(--line-strong); color: var(--text-mute); }
.badge--danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.badge .ic { width: 11px; height: 11px; stroke-width: 2.5; }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 28px; padding: 0 var(--s-3);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  color: var(--text-3);
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease);
}
a.chip:hover { border-color: var(--line-bright); color: var(--text); }
.chip.is-on { border-color: var(--signal-600); color: var(--signal-400); background: var(--signal-glow); }

/* --- Stats --- */
.stats { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.stat__n {
  font-family: var(--f-display);
  font-size: 1.75rem; font-weight: 600;
  line-height: 1.1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat__l {
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); margin-top: 2px;
}

/* --- Notices --- */
.notice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line-strong);
  border-left-width: 2px;
  border-radius: var(--r-md);
  background: var(--bg-band);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text-2);
}
.notice .ic { flex: none; margin-top: 2px; }
.notice__t { font-weight: 600; color: var(--text); display: block; margin-bottom: 2px; }
.notice--info { border-left-color: var(--info); }
.notice--info .ic { color: var(--info); }
.notice--warn { border-left-color: var(--warn); }
.notice--warn .ic { color: var(--warn); }
.notice--verify { border-left-color: var(--verify); }
.notice--verify .ic { color: var(--verify); }
/* Crisis panels never animate and are never dismissible (DESIGN.md 11). */
.notice--crisis {
  border-color: var(--danger);
  border-left-color: var(--danger);
  background: var(--bg-band);
}
.notice--crisis .ic { color: var(--danger); }

/* --- Empty states: always name the next action --- */
.empty {
  padding: var(--s-8) var(--s-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}
.empty .ic { color: var(--haze-500); margin-inline: auto; margin-bottom: var(--s-4); }
.empty h2, .empty h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.empty p { color: var(--text-mute); font-size: var(--t-sm); margin-inline: auto; max-width: 44ch; }
.empty .btn { margin-top: var(--s-5); }

/* --- Tabs --- */
.tabs {
  display: flex; gap: var(--s-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__t {
  position: relative;
  padding: var(--s-3) var(--s-4);
  color: var(--text-3);
  font-size: var(--t-sm); font-weight: 500;
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease);
}
.tabs__t:hover { color: var(--text); }
.tabs__t.is-on { color: var(--text); }
.tabs__t.is-on::after {
  content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px;
  height: 2px; background: var(--signal-500); border-radius: 2px 2px 0 0;
}

/* --- Pagination --- */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-7); }
.pager__l {
  min-width: 36px; height: 36px; padding: 0 var(--s-3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-family: var(--f-mono); font-size: var(--t-xs);
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.pager__l:hover { border-color: var(--line-bright); color: var(--text); }
.pager__l.is-on { border-color: var(--signal-600); color: var(--signal-400); background: var(--signal-glow); }
.pager__gap { color: var(--haze-500); padding-inline: var(--s-1); }

/* --- Breadcrumbs --- */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--text-mute);
  margin-bottom: var(--s-5);
}
.crumbs a { color: var(--text-mute); }
.crumbs a:hover { color: var(--text-2); }
.crumbs .ic { width: 13px; height: 13px; color: var(--haze-500); }

/* --- Flash messages --- */
.flashes { position: fixed; bottom: var(--s-5); left: 50%; transform: translateX(-50%); z-index: 120; width: min(440px, calc(100vw - var(--s-8))); display: flex; flex-direction: column; gap: var(--s-2); }
.flash {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--signal-500);
  border-radius: var(--r-md);
  box-shadow: var(--modal-shadow);
  font-size: var(--t-sm);
  animation: riseIn var(--d-base) var(--ease-out) both;
}
.flash--error { border-left-color: var(--danger); }
.flash--success { border-left-color: var(--signal-500); }
.flash__x { margin-left: auto; color: var(--text-mute); }
.flash__x:hover { color: var(--text); }

/* ==================================================================
   9. FEED
   ================================================================== */

.composer { padding: var(--s-4); }
.composer__row { display: flex; gap: var(--s-3); align-items: flex-start; }
.composer__in {
  flex: 1;
  display: block;
  width: 100%;   /* it sits in a block wrapper, where flex: 1 does nothing */
  min-height: 44px;
  padding: var(--s-3);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--t-sm);
  resize: none;
  line-height: 1.6;
  transition: border-color var(--d-fast) var(--ease), min-height var(--d-base) var(--ease);
}
.composer__in:focus { border-color: var(--line-bright); min-height: 110px; }
.composer__bar {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;   /* on a phone the Post button was pushed off-screen */
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
/* A select sizes itself to its longest option (a long community slug), so it
   must be allowed to shrink or it widens the whole row. */
.composer__bar .select { min-width: 0; max-width: 100%; flex: 0 1 auto; }
/* Phone: folded to one line until tapped (orbit.js adds .is-folded only on
   narrow screens, so without JavaScript the whole form shows). */
.composer.is-folded { padding: var(--s-3); }
.composer.is-folded .composer__row { align-items: center; }
.composer.is-folded #composer-title,
.composer.is-folded details,
.composer.is-folded .composer__bar,
.composer.is-folded .composer__note { display: none; }
.composer.is-folded .composer__in { min-height: 44px; height: 44px !important;   /* beats data-grow's inline height */
   padding: 10px var(--s-4); border-radius: var(--r-full); overflow: hidden; white-space: nowrap; cursor: text; }

.post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--soft-1);
  padding: var(--s-5);
  transition: border-color var(--d-base) var(--ease);
}
.post:hover { border-color: var(--line-strong); }
.post__hd { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3); }
.post__who { min-width: 0; }
.post__name {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--text);
}
.post__name a { color: var(--text); }
.post__name a:hover { color: var(--signal-400); }
.post__sub {
  font-size: var(--t-xs); color: var(--text-mute);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  margin-top: 1px;
}
.post__sub .sep { color: var(--haze-500); }
.post__title {
  font-family: var(--f-display);
  font-size: var(--t-h3); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.25;
  margin: 0 0 var(--s-2); color: var(--text);
}
.post__title a { color: inherit; }
.post__title a:hover { color: var(--signal-300); }
.post__body { font-size: var(--t-sm); line-height: 1.7; color: var(--text-2); overflow-wrap: anywhere; }
.post__body p { max-width: none; }
.post__body a { color: var(--signal-400); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--signal-400) 40%, transparent); }
.post__body a:hover { text-decoration-color: var(--signal-300); }
.post__acts {
  display: flex; align-items: center; gap: var(--s-1);
  flex-wrap: wrap;   /* the last action ran off a 375px screen */
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

/* Phone: the five labelled actions wrapped onto two lines and made every
   post taller. Show icons and counts in one row; the words stay for screen
   readers (clipped, not display:none, so each button keeps its name), and
   the targets grow to 40px for thumbs. */
@media (max-width: 480px) {
  .post__acts { flex-wrap: nowrap; gap: 0; justify-content: space-between; }
  .post__acts .spacer { display: none; }
  .post__acts .act { height: 40px; padding: 0 var(--s-3); }
  .post__acts .act > span:not(.act__n) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* What a post can carry: the post it reposts, images, links, a poll. */
.post__quote {
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--text-2);
}
.post__quote-hd { font-size: var(--t-xs); color: var(--text-mute); margin-bottom: var(--s-1); display: flex; align-items: center; gap: var(--s-1); }
.post__media { display: grid; gap: var(--s-2); margin-top: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.post__media img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.post__media img:only-child { grid-column: 1 / -1; }   /* one image uses the full width; several share a grid */
.post__links { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--t-sm); }
.post__links li { display: flex; align-items: center; gap: var(--s-2); min-width: 0; overflow-wrap: anywhere; }
/* Polls: see "Poll" below. */

/* Research post cards carry a hairline accent edge to read as "paper" */
.post--research { border-left: 2px solid var(--signal-600); }


/* --- Comments --- */
.cmt { display: flex; gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.cmt__bd { min-width: 0; flex: 1; }
.cmt__hd { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); margin-bottom: var(--s-1); }
.cmt__name { font-weight: 600; color: var(--text); font-size: var(--t-sm); }
.cmt__text { font-size: var(--t-sm); line-height: 1.65; color: var(--text-2); overflow-wrap: anywhere; }
.cmt__acts { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
.cmt--reply { margin-left: var(--s-7); border-left: 1px solid var(--line); border-top: 0; padding-left: var(--s-4); }

/* --- Poll --- */
.poll { list-style: none; padding: 0; display: grid; gap: var(--s-2); margin: var(--s-4) 0 0; }
.poll__opt {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  overflow: hidden;
  transition: border-color var(--d-fast) var(--ease);
}
.poll__opt:hover { border-color: var(--line-bright); }
.poll__opt > * { position: relative; }
/* After the rule above and as specific, or the fill becomes a flex item and
   hides the label. Neutral, because the accent marks only the reader's own vote. */
.poll__opt > .poll__fill {
  position: absolute; inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--text-mute) 16%, transparent);
  transition: width var(--d-slow) var(--ease-out);
}
.poll__opt.is-mine { border-color: color-mix(in srgb, var(--signal-500) 50%, transparent); }
.poll__opt.is-mine > .poll__fill { background: var(--signal-glow); }
.poll__pct { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-mute); }
.poll__btn { justify-content: flex-start; text-align: left; }
.poll__meta { font-size: var(--t-xs); color: var(--text-mute); margin: var(--s-2) 0 0; }

/* ==================================================================
   10. PROFILE, DIRECTORY, RESEARCH LISTS
   ================================================================== */

.phead { border-bottom: 1px solid var(--line); }
.phead__cover {
  height: clamp(120px, 22vw, 200px);
  background: var(--bg-band);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.phead__cover img { width: 100%; height: 100%; object-fit: cover; }
.phead__in {
  max-width: var(--w-page); margin-inline: auto;
  padding: 0 var(--s-5) var(--s-5);
  display: flex; gap: var(--s-5); align-items: flex-end;
}
.phead__cover--plain {
  background: hsl(var(--av-h, 150) 22% 88%);
  color: hsl(var(--av-h, 150) 24% 52%);
  border-bottom: 0;
}
.phead__orb {
  position: absolute; right: 6%; top: 50%;
  width: clamp(220px, 34vw, 420px); height: auto;
  transform: translateY(-50%);
  opacity: .55;
}
:root[data-theme="dark"] .phead__cover--plain {
  background: hsl(var(--av-h, 150) 18% 16%);
  color: hsl(var(--av-h, 150) 22% 46%);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .phead__cover--plain {
    background: hsl(var(--av-h, 150) 18% 16%);
    color: hsl(var(--av-h, 150) 22% 46%);
  }
}
.phead__av {
  align-self: flex-start;   /* .phead__in aligns to the bottom; the avatar must hang off the cover */
  margin-top: -56px;
  position: relative; z-index: 1;   /* the cover is positioned, so it would paint over a static avatar */
  box-shadow: 0 0 0 5px var(--bg), var(--soft-2);
  border-radius: var(--r-full);
}
.phead__main { flex: 1; min-width: 0; padding-top: var(--s-4); }
.phead__name {
  font-family: var(--f-display); font-size: var(--t-h2); font-weight: 600;
  letter-spacing: -.025em; margin: 0; line-height: 1.15;
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.phead__title { color: var(--text-2); font-size: 1.0625rem; margin-top: var(--s-1); }
.phead__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); font-size: var(--t-xs); color: var(--text-mute); }
.phead__meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.phead__acts { display: flex; gap: var(--s-2); padding-bottom: var(--s-1); }

/* Reputation dial: a real number with a shown formula, never a like count */
.rep {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-band);
}
.rep__n {
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 600;
  color: var(--signal-500); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.rep__l { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }

/* Person row, used in directory and search */
.prow {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.prow:hover { border-color: var(--line-bright); background: var(--surface-up); transform: translateY(-1px); }
.prow__bd { flex: 1; min-width: 0; }
.prow__name { font-size: 1rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.prow__title { font-size: var(--t-sm); color: var(--text-2); margin-top: 1px; }
.prow__meta { font-size: var(--t-xs); color: var(--text-mute); margin-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.prow__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* Research row */
.rrow { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.rrow:first-child { padding-top: 0; }
.rrow:last-child { padding-bottom: 0; border-bottom: 0; }
.rrow__kind {
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: .08em; text-transform: uppercase; color: var(--signal-500);
}
.rrow__t {
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.3; margin: var(--s-2) 0;
}
.rrow__t a { color: var(--text); }
.rrow__t a:hover { color: var(--signal-300); }
.rrow__au { font-size: var(--t-sm); color: var(--text-2); }
.rrow__ab { font-size: var(--t-sm); color: var(--text-mute); line-height: 1.65; margin-top: var(--s-2); }
.rrow__m { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .05em; color: var(--text-mute); }

/* --- Answer block (AEO/GEO): a short sourced statement crawlers can quote */
.answer-block {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--signal-600);
  border-radius: var(--r-md);
  background: var(--bg-band);
  margin-bottom: var(--s-6);
}
.answer-block__q {
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); margin: 0 0 var(--s-2);
}
.answer-block__a { font-size: 1.0625rem; line-height: 1.6; color: var(--text); margin: 0; max-width: 70ch; }
.answer-block__src { font-size: var(--t-xs); color: var(--text-mute); margin: var(--s-3) 0 0; }

/* ==================================================================
   11. PAPER — the reading surface
   The signature move: a cream sheet resting on the oat desk.
   ================================================================== */

.paper {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sheet-shadow);
  padding: var(--s-8) var(--s-7);
  max-width: calc(var(--w-read) + var(--s-7) * 2);
  margin-inline: auto;
  animation: sheetIn var(--d-slow) var(--ease-out) both;
}

.paper h1, .paper h2, .paper h3, .paper h4 {
  color: var(--paper-ink);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 40;
}
.paper h2 { margin-top: var(--s-7); }
.paper h3 { margin-top: var(--s-6); }

.paper__body {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 12;
  font-size: var(--t-read);
  line-height: 1.75;
  color: var(--paper-ink);
}
.paper__body p { max-width: 74ch; margin-bottom: var(--s-5); }
/* Scoped to the whole sheet, not just .paper__body: the footer and meta
   rows also sit on paper, and inheriting the dark-theme accent there put a
   1.70:1 link on a cream background. */
.paper a {
  color: var(--signal-700);
  text-decoration: underline;
  text-underline-offset: .12em;
  text-decoration-thickness: 1px;
}
.paper a:hover { color: var(--paper-ink); }
.paper__body ul, .paper__body ol { max-width: 70ch; padding-left: var(--s-5); margin-bottom: var(--s-5); }
.paper__body li { margin-bottom: var(--s-2); }
/* Ruled space to write in by hand on a printed template (/templates). */
.paper__write {
  height: calc(2em * var(--lines, 3));
  margin-bottom: var(--s-5);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(2em - 1px),
    color-mix(in srgb, var(--paper-ink) 30%, transparent) calc(2em - 1px) 2em);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.paper__body blockquote {
  border-left-color: var(--signal-600);
  background: var(--paper-warm);
  color: var(--paper-mute);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.paper__body code {
  background: var(--paper-warm);
  border-color: var(--paper-edge);
  color: var(--paper-ink);
}
.paper__body hr { border-top-color: var(--paper-edge); }

.paper__meta {
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper-mute);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--paper-edge);
  margin-bottom: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
}
.paper__title {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.15; letter-spacing: -.025em;
  margin-bottom: var(--s-4);
}
.paper__authors { font-size: var(--t-sm); color: var(--paper-mute); margin-bottom: var(--s-6); }
.paper__authors a { color: var(--signal-700); }
.paper__foot {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--paper-edge);
  font-size: var(--t-xs); color: var(--paper-mute);
}

/* Outline rail beside a paper sheet */
.outline { font-size: var(--t-xs); }
.outline__l {
  display: block; padding: var(--s-2) var(--s-3);
  border-left: 1px solid var(--line);
  color: var(--text-mute);
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.outline__l:hover { color: var(--text-2); border-left-color: var(--line-bright); }
.outline__l.is-on { color: var(--signal-400); border-left-color: var(--signal-500); }

/* ==================================================================
   12. MOTION AND UTILITIES
   ================================================================== */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(10px); box-shadow: var(--soft-1); }
  to   { opacity: 1; transform: none; box-shadow: var(--sheet-shadow); }
}
@keyframes sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* Staggered page entrance: max 6 items, then everything else appears at once */
.rise { animation: riseIn var(--d-base) var(--ease-out) both; }
.rise:nth-child(1) { animation-delay: 0ms; }
.rise:nth-child(2) { animation-delay: 40ms; }
.rise:nth-child(3) { animation-delay: 80ms; }
.rise:nth-child(4) { animation-delay: 120ms; }
.rise:nth-child(5) { animation-delay: 160ms; }
.rise:nth-child(6) { animation-delay: 200ms; }
.rise:nth-child(n+7) { animation-delay: 200ms; }

/* Skeleton: an accent hairline sweeps across. Never a grey pulse. */
.skel {
  position: relative;
  background: var(--field);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.skel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--signal-glow), transparent);
  animation: sweep 1.4s var(--ease) infinite;
}

/* The orbit mark: four hairline arcs at different periods.
   The only piece of pure atmosphere on the site, and it is line art. */
.orbit-mark { display: block; color: var(--signal-500); }
.orbit-mark .ring {
  /* view-box so 50% 50% is the centre of the viewBox, not of the ellipse's
     own tight bounding box. Each ring's static angle lives on a wrapper <g>
     because a CSS transform replaces the element's transform attribute
     outright, which silently collapsed all four rings onto one angle. */
  transform-box: view-box;
  transform-origin: 50% 50%;
  opacity: .55;
}
.orbit-mark .ring--1 { animation: orbitSpin 120s linear infinite; opacity: .8; }
.orbit-mark .ring--2 { animation: orbitSpin 190s linear infinite reverse; }
.orbit-mark .ring--3 { animation: orbitSpin 260s linear infinite; opacity: .4; }
.orbit-mark .ring--4 { animation: orbitSpin 340s linear infinite reverse; opacity: .28; }

/* Utilities */
.tc { text-align: center; }
.tr { text-align: right; }
.muted { color: var(--text-mute); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hide { display: none !important; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); } .mb-7 { margin-bottom: var(--s-7); } .mb-8 { margin-bottom: var(--s-8); }
.scroll-x { overflow-x: auto; }

/* Search suggestions panel (built by orbit.js) */
.suggest {
  position: absolute; z-index: 80;
  top: calc(100% + var(--s-2)); left: 0; right: 0;
  padding: var(--s-1);
  box-shadow: var(--modal-shadow);
  animation: riseIn var(--d-fast) var(--ease-out) both;
}
.suggest__i {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--t-sm);
}
.suggest__i:hover { background: var(--surface-up); color: var(--text); }

/* ==================================================================
   12b. FOOTER AND ERROR PAGES
   ================================================================== */

.ft {
  border-top: 1px solid var(--line);
  /* bg-band, not bg-deep: the footer's muted text needs 4.5:1. */
  background: var(--bg-band);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-9);
}
.ft__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr);
  gap: var(--s-8);
  padding-bottom: var(--s-7);
}
.ft__brand .brand { margin-bottom: var(--s-4); }
.ft__blurb { font-size: var(--t-sm); color: var(--text-mute); max-width: 42ch; line-height: 1.7; }

.ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.ft__col { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ft__col a { color: var(--text-3); font-size: var(--t-sm); line-height: 1.45; }
.ft__col a:hover { color: var(--text); }
.ft__h {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 var(--s-2);
}

.ft__crisis { margin-bottom: var(--s-6); }
.ft__crisis a { color: var(--signal-400); text-decoration: underline; text-underline-offset: .15em; }

.ft__bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.ft__bottom a { color: var(--text-mute); }
.ft__bottom a:hover { color: var(--text-2); }
.ft__bottom .sep { color: var(--haze-500); margin-inline: var(--s-2); }

.err { max-width: 60ch; }
.err__links {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.err__links .ft__h { width: 100%; margin: 0; }
.err__links a { font-size: var(--t-sm); color: var(--text-3); }
.err__links a:hover { color: var(--text); }

@media (max-width: 860px) {
  .ft__top { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft { margin-top: var(--s-7); }
}
@media (max-width: 520px) {
  .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
}

/* ==================================================================
   12c. HOME HERO AND FAQ
   ================================================================== */

.hero { position: relative; overflow: hidden; padding-block: var(--s-11) var(--s-9); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--s-8);
  align-items: center;
}
.hero__orb { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin-inline: auto; }
.hero__orb svg { width: 100%; height: 100%; }
.hero__rule {
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
  margin: var(--s-6) 0;
}

/* Accordion. <details> so it works with JavaScript disabled. */
.qa {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: background var(--d-fast) var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { background: var(--surface-up); }
.qa__i { color: var(--text-mute); transition: transform var(--d-base) var(--ease); flex: none; }
.qa[open] .qa__i { transform: rotate(180deg); }
.qa__a { padding: 0 var(--s-5) var(--s-5); }
.qa__a p { color: var(--text-2); font-size: var(--t-sm); margin: 0; }

@media (max-width: 900px) {
  .hero { padding-block: var(--s-8) var(--s-7); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .hero__orb { max-width: 280px; }
}

/* ==================================================================
   12d. CONTENT PAGE HELPERS
   ================================================================== */

/* Main column + sidebar, used by contact, help and policy pages. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

.linklist { margin: 0; padding-left: var(--s-4); }
.linklist li { color: var(--text-mute); font-size: var(--t-sm); line-height: 1.9; }

/* Off-screen rather than display:none, so a bot's form parser still sees it. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.toc { position: sticky; top: calc(var(--h-header) + var(--s-5)); font-size: var(--t-xs); }
.toc a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-left: 1px solid var(--line);
  color: var(--text-mute);
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.toc a:hover { color: var(--text-2); border-left-color: var(--line-bright); }

.deftable { font-size: var(--t-sm); }
.deftable th, .deftable td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.deftable th {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
  white-space: nowrap;
}
.deftable td { color: var(--text-2); }
/* Row headers in label/value tables: real <th> for screen readers, same look
   as the plain cells they replaced. */
.deftable th[scope="row"] {
  font-family: inherit; font-size: inherit; letter-spacing: normal;
  text-transform: none; font-weight: 400; color: var(--text-2); white-space: normal;
}
.table-scroll { overflow-x: auto; }
/* A label/value table inside a card, holding text copied from other sites
   ("Morning/Evening/Replica"): fixed columns, and long words break, so a
   phone never scrolls sideways (/programmes was 548px wide at 375). */
.deftable--fit { width: 100%; table-layout: fixed; }
.deftable--fit th[scope="row"] { width: 34%; }
.deftable--fit td { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .toc { position: static; }
}

/* --- Point blocks and numbered steps --- */
.pt { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.pt__h { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.pt__b { color: var(--text-2); font-size: var(--t-sm); line-height: 1.7; margin: 0; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-6); counter-reset: none; }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.step__n {
  font-family: var(--f-mono);
  font-size: var(--t-h4);
  color: var(--signal-500);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.step__bd { border-left: 1px solid var(--line); padding-left: var(--s-5); }
.step__h { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.step__b { color: var(--text-2); font-size: var(--t-sm); line-height: 1.7; margin-bottom: var(--s-3); }

@media (max-width: 520px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .step__bd { border-left: 0; padding-left: 0; }
  .pt { padding-left: var(--s-4); }
}

/* ==================================================================
   12e. AUTH SCREENS
   ================================================================== */

.authgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.authgrid__main { min-width: 0; }
.authgrid__side { position: sticky; top: calc(var(--h-header) + var(--s-5)); }

.authcard { max-width: 30rem; margin-inline: auto; }

/* Sign-in: a quiet brand panel beside the form on wide screens. */
.authsplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: var(--s-8);
  align-items: center;
  max-width: 64rem; margin-inline: auto;
}
.authsplit .authcard { width: 100%; margin: 0; }
.authsplit__side {
  position: relative;
  padding: var(--s-7) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--bg-band);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 26rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.authsplit__orb {
  position: absolute; top: -12%; right: -18%;
  width: 78%; height: auto;
  opacity: .5;
}
.authsplit__quote {
  position: relative;
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 60;
  font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.015em;
  color: var(--text); max-width: 20ch;
  margin-bottom: var(--s-5);
}
.authsplit__facts { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.authsplit__facts li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); color: var(--text-2); }
.authsplit__facts .ic { flex: none; color: var(--signal-500); margin-top: 2px; }

.form-alert {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  border-radius: var(--r-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--t-sm); font-weight: 500;
  animation: riseIn var(--d-base) var(--ease-out) both;
}
.form-alert .ic { flex: none; margin-top: 2px; }

/* Password show/hide, added by orbit.js */
.pw { position: relative; display: block; }
.pw .input { padding-right: 4.25rem; }
.pw__t {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 30px; padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-xs); font-weight: 600;
  color: var(--signal-400);
  transition: background var(--d-fast) var(--ease);
}
.pw__t:hover { background: var(--signal-glow); }

/* Profile completion meter */
.meter__bar {
  height: 4px;
  background: var(--field);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--s-2);
}
.meter__bar span {
  display: block;
  height: 100%;
  background: var(--signal-500);
  border-radius: var(--r-full);
  transition: width var(--d-slow) var(--ease-out);
}

/* An input with a fixed, non-editable prefix (the profile URL) */
.prefixed { display: flex; align-items: stretch; }
.prefixed__p {
  display: flex; align-items: center;
  padding: 0 var(--s-3);
  background: var(--bg-band);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--text-mute);
  white-space: nowrap;
}
.prefixed .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* A chip that is really a checkbox */
.chip--check { cursor: pointer; user-select: none; }
.chip--check input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chip--check:has(input:checked) {
  border-color: var(--signal-600);
  color: var(--signal-400);
  background: var(--signal-glow);
}
.chip--check:has(input:focus-visible) {
  outline: 2px solid var(--signal-500);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .authgrid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .authsplit { grid-template-columns: minmax(0, 1fr); }
  .authsplit__side { display: none; }
  .authgrid__side { position: static; }
  .prefixed { flex-direction: column; }
  .prefixed__p {
    border-right: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    padding: var(--s-2) var(--s-3);
  }
  .prefixed .input { border-radius: 0 0 var(--r-sm) var(--r-sm); }
}

/* Inline reply box under a comment thread */
.reply-box { margin: var(--s-3) 0 var(--s-4) var(--s-7); }
.reply-box > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
}
.reply-box > summary::-webkit-details-marker { display: none; }
.reply-box[open] > summary { color: var(--text); }

@media (max-width: 520px) { .reply-box { margin-left: var(--s-4); } }

/* Notification rows */
.notif {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  transition: background var(--d-fast) var(--ease);
}
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--surface-up); color: var(--text); }
.notif__i { color: var(--text-mute); flex: none; padding-top: 1px; }
.notif__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Unread carries an accent edge rather than a background wash, so the row
   still reads as a row rather than as a highlighted block. */
.notif.is-new { border-left: 2px solid var(--warm); padding-left: calc(var(--s-5) - 2px); }
.notif.is-new .notif__i { color: var(--warm); }

/* ==================================================================
   12f. MESSAGES
   ================================================================== */

.msg {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 60vh;
  background: var(--surface);
}

.msg__list { border-right: 1px solid var(--line); overflow-y: auto; max-height: 72vh; }
.msg__head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--bg-band);
}

.msg__row {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  transition: background var(--d-fast) var(--ease);
}
.msg__row:hover { background: var(--surface-up); color: var(--text); }
.msg__row.is-on { background: var(--surface-up); border-left: 2px solid var(--signal-500); }

.msg__thread { display: flex; flex-direction: column; max-height: 72vh; }
.msg__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
}

.bubble { max-width: 72%; align-self: flex-start; }
.bubble--mine { align-self: flex-end; text-align: right; }
.bubble__b {
  display: inline-block;
  text-align: left;
  padding: var(--s-3) var(--s-4);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
/* The sender's own messages carry an accent edge rather than an accent fill:
   a solid accent block on every message makes the thread unreadable. */
.bubble--mine .bubble__b { border-color: var(--signal-600); }
.bubble .meta { display: block; margin-top: var(--s-1); }

.msg__form {
  display: flex; align-items: flex-end; gap: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-top: 1px solid var(--line);
}
.msg__form .composer__in { flex: 1; }

@media (max-width: 860px) {
  .msg { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .msg__list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 34vh; }
  .bubble { max-width: 88%; }
}

/* ==================================================================
   13. RESPONSIVE
   ================================================================== */

/* Between the full header and the sidebar layout, the nav drops its icons
   before anything overlaps. */
@media (max-width: 1320px) {
  .hdr__link .ic { display: none; }
  .hdr__link { padding-inline: var(--s-2); }
}

@media (max-width: 1100px) {
  .shell { grid-template-columns: var(--w-nav) minmax(0, 1fr); }
  .shell__rail { display: none; }
  /* Below this the brand, primary nav, search and account controls no
     longer fit on one row; the nav moves into the sidebar/bottom bar. */
  .hdr__nav { display: none; }
}

@media (max-width: 860px) {
  :root { --h-header: 56px; }
  .shell { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--s-9) + 56px); }
  .shell__nav { display: none; }
  .hdr__nav { display: none; }
  .hdr__search { width: auto; flex: 1; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .paper { padding: var(--s-6) var(--s-5); border-radius: var(--r-md); }
  .phead__in { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .phead__av.av--144 { --sz: 104px; margin-top: -52px; }
  .phead__acts { width: 100%; }
  .phead__acts .btn { flex: 1; }
  .band { padding-block: var(--s-7); }

  /* Bottom bar takes over navigation below 768/860 (DESIGN.md 5.2) */
  .botbar {
    display: flex;
    position: fixed; inset: auto 0 0 0; z-index: 70;
    height: 56px;
    background: color-mix(in srgb, var(--bg-band) 94%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .botbar a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    color: var(--text-mute);
    font-size: 12px; letter-spacing: .01em;   /* 10px was below the 12px floor for labels */
  }
  .botbar a.is-on { color: var(--signal-500); }
}

/* Hidden only where the header nav takes over. This used to be a bare
   `.botbar { display: none; }` AFTER the 860px block above, so it won the
   cascade and phones had no bottom navigation at all (2026-10-24 review). */
@media (min-width: 861px) { .botbar { display: none; } }

/* A button that reads as a text link (the footer theme switch). */
.linklike {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover { color: var(--text); }
.linklike:focus-visible { outline: 2px solid var(--signal-500); outline-offset: 2px; }

/* The search icon exists only for phones; see header.php. */
@media (max-width: 360px) {
  /* Below 360px even that row does not fit; the orbit mark alone is the brand. */
  .hdr .brand > span:last-child { display: none; }
}
.hdr__searchlink { display: none; }

/* Header controls never shrink. When they did, the flex row squeezed the
   search and theme buttons to 1px wide on a 375px phone and they vanished. */
.hdr__right .icon-btn, .hdr__right .btn { flex: none; }

@media (max-width: 520px) {
  /* A 375px phone has 327px for the whole row. Brand, search, Sign in and
     Join fit; everything else that has another home is dropped here:
     messages and profile are in the bottom bar, the theme switch is in the
     footer. Notifications stay, because they have nowhere else. */
  .hdr__in { padding-inline: var(--s-4); }
  .hdr__right { gap: 4px; }
  .hdr__right [data-theme-toggle],
  .hdr__right a[aria-label="Messages"] { display: none; }
  .hdr__search { display: none; }
  .hdr__searchlink { display: grid; }
  .wrap { padding-inline: var(--s-4); }
  .card, .post { padding: var(--s-4); }
  .stats { gap: var(--s-5); }
  .cmt--reply { margin-left: var(--s-4); }
}

/* ==================================================================
   14. REDUCED MOTION — not optional on a mental-health platform
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .orbit-mark .ring { animation: none !important; }
  .skel::after { animation: none !important; opacity: .3; }
  .card--link:hover, .prow:hover, .btn:active, .btn--primary:hover { transform: none !important; }
}

/* ==================================================================
   14b. TRUST AND SHARING (2026-10-18)
   Founding badge, endorsements, hover cards, quick search, the share
   page, the verification record and the printable card.
   ================================================================== */

/* Tools index by branch, and tables in tool results */
.tool-branch { font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-4); }
.tool-hero { margin-bottom: var(--s-2); border-color: color-mix(in srgb, var(--signal-500) 35%, var(--line)); }
.deftable--grid th { text-align: left; white-space: nowrap; }
.deftable--grid td.mono { white-space: nowrap; }

/* SPSS data preparation */
.sp__h { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-h3); margin: 0 0 var(--s-4); }
.sp__n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full);
  background: var(--signal-glow); color: var(--signal-500); font-family: var(--f-mono); font-size: var(--t-sm);
}
.sp__drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center;
  padding: var(--s-7) var(--s-5); border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--field); cursor: pointer; color: var(--text-2);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.sp__drop:hover, .sp__drop.is-over { border-color: var(--signal-500); background: var(--signal-glow); }
.sp__drop .ic { color: var(--signal-500); }
.sp__table td { vertical-align: top; }
.sp__q { display: block; max-width: 28ch; font-size: var(--t-xs); color: var(--text-2); }
.sp__name { min-width: 9rem; font-family: var(--f-mono); font-size: var(--t-xs); height: 34px; }
.sp__table .select { min-width: 11rem; height: 34px; font-size: var(--t-xs); }
.sp__hint { display: block; margin-top: 4px; }
.sp__map { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.sp__code { width: 4rem; height: 30px; font-family: var(--f-mono); font-size: var(--t-xs); }
.sp__preview td, .sp__preview th { font-family: var(--f-mono); font-size: var(--t-xs); white-space: nowrap; }

.sp__syntax { max-height: 26rem; overflow: auto; padding: var(--s-4);
  background: var(--code-bg); border-radius: var(--r-sm); font-size: var(--t-xs); white-space: pre; }
.sp__how li { margin-bottom: var(--s-2); }

/* SPSS tool step 5: analysis */
.sa__form { display: grid; gap: var(--s-4); max-width: 46rem; }
.sa__form > .btn { justify-self: start; }
.sa__fields { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.sa__fields .field { margin: 0; }
.sa__pick { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3); margin: 0;
  max-height: 15rem; overflow: auto; background: var(--field); }
.sa__pick legend { padding: 0 var(--s-1); }
.sa__opt { display: flex; align-items: baseline; gap: var(--s-2); padding: 4px 0; font-size: var(--t-sm); cursor: pointer; }
.sa__opt input { flex: none; accent-color: var(--signal-500); }
.sa__opt .xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa__apa { padding: var(--s-4); background: var(--surface-up); border: 1px solid var(--line); border-left: 3px solid var(--signal-500);
  border-radius: var(--r-sm); line-height: 1.7; overflow-wrap: anywhere; }
.sa__table { margin-top: var(--s-5); }
.sa__table caption { caption-side: top; text-align: left; font-style: italic; font-size: var(--t-sm); color: var(--text-2); padding-bottom: var(--s-2); }
.sa__table td, .sa__table th { font-variant-numeric: tabular-nums; }
.sa__table th { text-transform: none; letter-spacing: 0; }   /* t, df, p keep their case */
.sa__table tfoot td { font-size: var(--t-xs); color: var(--text-2); white-space: normal; }

/* Thesis helper (2026-10-18): /tools/thesis-helper. Power form, analysis guide, checklist. */
.th__nav { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.th__sec { scroll-margin-top: var(--s-8); }
.th__form { display: grid; gap: var(--s-4); }
.th__form > .btn { justify-self: start; }
.th__grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.th__grid .field { margin: 0; }
.th__grid .field[hidden] { display: none; }
.th__mode { border: 0; padding: 0; min-width: 0; }
.th__mode legend { padding: 0; margin-bottom: var(--s-2); }
.th__mode .check + .check { margin-top: var(--s-2); }
.th__conv { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); }
.th__stats .stat__n { font-variant-numeric: tabular-nums; }
.th__stats .stat__l { text-transform: none; letter-spacing: .02em; }   /* f, d and r keep their case */
.th__convert summary { cursor: pointer; }
.th__cv-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); margin-bottom: var(--s-3); }
.th__cv-grid .field { margin: 0; }
.th__trail { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }
.th__trail:empty { display: none; }
.th__step { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border-left: 2px solid var(--line-strong); }
.th__step-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.th__q { border: 0; padding: 0; margin: 0; min-width: 0; }
.th__q-t { font-family: var(--f-display); font-size: var(--t-h4); color: var(--text); padding: 0; margin-bottom: var(--s-3); }
.th__opts { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.th__opt { display: grid; gap: 2px; text-align: left; padding: var(--s-3) var(--s-4); font: inherit; color: inherit; cursor: pointer;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.th__opt:hover { border-color: var(--line-bright); background: var(--surface-up); }
.th__opt:focus-visible { outline: 2px solid var(--signal-500); outline-offset: 2px; }
.th__opt-t { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.th__opt-d { font-size: var(--t-xs); color: var(--text-mute); line-height: 1.5; }
.th__rec { padding: var(--s-5); background: var(--surface-up); border: 1px solid var(--line); border-left: 3px solid var(--signal-500); border-radius: var(--r-sm); }
.th__rec-t { font-size: var(--t-h3); margin: 0 0 var(--s-3); }
.th__rec-t:focus { outline: none; }
.th__menus { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-4); margin: 0; font-size: var(--t-sm); }
.th__menus dt { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .06em; color: var(--text-3); padding-top: 3px; }
.th__menus dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.th__groups { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: var(--s-5); }
.th__group-t { font-size: var(--t-h4); margin: 0 0 var(--s-3); }
.th__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.th__links { margin: var(--s-1) 0 0 calc(18px + var(--s-3)); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); color: var(--text-mute); }
.th__item .check:has(input:checked) span { color: var(--text-mute); text-decoration: line-through; text-decoration-color: var(--line-bright); }

/* Exam prep (2026-10-18) */
.ex__dom-t { font-size: var(--t-h4); margin: 0; }
.ex__bar { height: 8px; border-radius: var(--r-full); background: var(--line); overflow: hidden; margin-top: var(--s-4); }
.ex__bar span { display: block; height: 100%; background: var(--signal-500); border-radius: inherit; }
.ex__bar--sm { margin-top: 0; min-width: 8rem; }
.ex__stem { font-size: var(--t-read); line-height: 1.6; margin: 0 0 var(--s-5); }
.ex__opts { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; list-style: none; }
.ex__opt { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-up); cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.ex__opt:hover { border-color: var(--line-strong); }
.ex__opt input { position: absolute; opacity: 0; pointer-events: none; }
.ex__opt:has(input:checked) { border-color: var(--signal-500); background: var(--signal-glow); }
.ex__opt:has(input:focus-visible) { outline: 2px solid var(--signal-500); outline-offset: 2px; }
.ex__letter { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-2); }
.ex__opt:has(input:checked) .ex__letter { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--btn-ink); }
.ex__opts--done .ex__opt { cursor: default; }
.ex__opt.is-right { border-color: var(--signal-500); background: var(--signal-glow); }
.ex__opt.is-wrong { border-color: var(--danger); background: var(--danger-bg); }
.ex__mark { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); white-space: nowrap; }
.ex__opt.is-right .ex__mark { color: var(--signal-500); }
.ex__opt.is-wrong .ex__mark { color: var(--danger); }
.ex__verdict { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-sm); border-left: 3px solid; background: var(--surface-up); line-height: 1.65; }
.ex__verdict.is-right { border-color: var(--signal-500); }
.ex__verdict.is-wrong { border-color: var(--danger); }
.ex__clock { position: sticky; top: var(--s-3); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--soft-1); font-family: var(--f-mono); }
.ex__clock > span:first-child { display: inline-flex; align-items: center; gap: var(--s-2); }
.is-low .ex__clock { border-color: var(--danger); color: var(--danger); }
.ex__mq { margin: 0 0 var(--s-4); min-width: 0; }
.ex__mq-n { padding: 0; margin-bottom: var(--s-2); }
.ex__sum { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; font-size: var(--t-sm); }
.ex__sum-stem { color: var(--text-2); }
.ex__res { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-full); flex: none; }
.ex__res.is-right { background: var(--signal-glow); color: var(--signal-500); }
.ex__res.is-wrong { background: var(--danger-bg); color: var(--danger); }

/* Supervision groups (2026-10-18) */
.sg__h { font-size: var(--t-h3); margin: 0 0 var(--s-3); }
.sg__title { font-size: var(--t-h4); margin: 0 0 var(--s-2); }
.sg__list { display: grid; gap: var(--s-3); }
.sg__invite { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.sg__hours td { vertical-align: middle; }
.sg__share { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.sg__shared { list-style: none; margin: 0; padding: var(--s-2) var(--s-5); }
.sg__shared > li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.sg__shared > li:last-child { border-bottom: 0; }
.sg__thread-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.sg__note { padding: var(--s-4); margin-bottom: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); scroll-margin-top: 5rem; }
.sg__note--sup { border-left: 3px solid var(--signal-500); }
.sg__note-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.sg__goal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sg__goal { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-sm); }
.sg__goal.is-done .sg__goal-t { color: var(--text-mute); text-decoration: line-through; }
.sg__sessions { list-style: none; margin: 0; padding: var(--s-2) var(--s-5); }
.sg__session { display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto; gap: var(--s-4); align-items: center;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.sg__session:last-child { border-bottom: 0; }
.sg__when { font-size: var(--t-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.sg__session-acts { gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.sg__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sg__links > li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
@media (max-width: 860px) {
  .sg__thread-grid { grid-template-columns: minmax(0, 1fr); }
  .sg__session { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .sg__session-acts { justify-content: flex-start; }
}

/* Journal club (2026-10-18) */
.jc__feature { border-left: 3px solid var(--signal-500); }
.jc__title { font-size: var(--t-h3); margin: 0 0 var(--s-2); }
.jc__h1 { font-size: var(--t-h2); margin: 0 0 var(--s-2); }
.jc__sub { font-size: var(--t-h4); margin: 0 0 var(--s-3); }
.jc__list { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.jc__row { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.jc__row:last-child { border-bottom: 0; }
.jc__vote { flex: none; }
.jc__vote-btn { display: grid; justify-items: center; gap: 0; min-width: 48px; padding: var(--s-2) var(--s-2); border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface-up); color: var(--text-2); font-family: var(--f-mono); font-size: var(--t-sm); cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.jc__vote-btn:hover { border-color: var(--signal-500); }
.jc__vote-btn.is-on { border-color: var(--signal-500); background: var(--signal-glow); color: var(--signal-500); }
.jc__past { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
.jc__past .mono { display: inline-block; min-width: 7rem; }
.jc__prompts { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.jc__thread { border-bottom: 1px solid var(--line); padding-bottom: var(--s-3); margin-bottom: var(--s-4); }
.jc__c { padding: var(--s-3) 0; scroll-margin-top: 5rem; }
.jc__c--reply { margin-left: var(--s-6); padding-left: var(--s-4); border-left: 2px solid var(--line); }
.jc__c-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.jc__reply summary { cursor: pointer; color: var(--text-mute); }

/* Peer review exchange and live Q&A (2026-10-18) */
.pr__h1, .qa__h1 { font-size: var(--t-h2); margin: 0 0 var(--s-2); }
.pr__sub, .qa__sub { font-size: var(--t-h4); margin: 0 0 var(--s-3); }
.pr__how { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pr__credits { font-size: var(--t-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pr__list, .qa__list { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.pr__row, .qa__row { display: flex; gap: var(--s-4); align-items: flex-start; justify-content: space-between; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.pr__row:last-child, .qa__row:last-child { border-bottom: 0; }
.pr__file { display: flex; gap: var(--s-3); align-items: flex-start; }
.pr__file > .ic { color: var(--text-mute); flex: none; margin-top: 2px; }
.pr__verdicts { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pr__verdicts legend { margin-bottom: var(--s-2); }
.pr__review { scroll-margin-top: 5rem; }
.pr__review.is-helpful { border-color: var(--signal-500); }
.pr__review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.pr__sec { font-size: var(--t-sm); font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: var(--s-4) 0 var(--s-1); }
article.qa__q { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 5rem; }
article.qa__q.is-hidden { opacity: .6; }
.qa__votes { flex: none; }
.qa__text { margin: 0; overflow-wrap: anywhere; }
.qa__answer { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--field); border-radius: var(--r-sm); border-left: 2px solid var(--signal-500); }
.qa__anon { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); flex-wrap: wrap; }
.qa__anon input { accent-color: var(--signal-500); }
@media (max-width: 560px) {
  .pr__row, .qa__row { flex-direction: column; gap: var(--s-2); }
}

/* Supervisor matching (2026-10-18) */
.mt__form { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: end; }
.mt__form .field { margin: 0; }
.mt__check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); min-height: 44px; }
.mt__check input { accent-color: var(--signal-500); }
.mt__form > .btn { justify-self: start; }
.mt__fit { flex: none; font-family: var(--f-mono); font-size: var(--t-sm); padding: 2px var(--s-2); border-radius: var(--r-full);
  background: var(--signal-glow); color: var(--signal-500); }
.mt__why { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: 6px; font-size: var(--t-sm); }
.mt__why li { display: flex; align-items: center; gap: var(--s-2); }
.mt__why li .ic { color: var(--signal-500); flex: none; }
.mt__why li.is-gap { color: var(--text-mute); }
.mt__why li.is-gap .ic { color: var(--text-mute); }

/* Case-study practice (2026-10-18) */
.cp__filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cp__branch { font-size: var(--t-h3); margin-bottom: 0; }
.cp__case { display: grid; gap: var(--s-2); align-content: start; }
.cp__case-t { font-size: var(--t-h4); margin: 0; color: var(--text); }
.cp__meta, .cp__label { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.cp__label { margin: 0 0 var(--s-2); }
.cp__last { margin: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cp__h1 { font-size: var(--t-h2); margin: 0 0 var(--s-2); }
.cp__sub { font-size: var(--t-h4); margin-bottom: var(--s-3); }
.cp__vignette p:not(.cp__label) { font-size: var(--t-read); line-height: 1.7; max-width: 68ch; }
.cp__vignette p:last-child { margin-bottom: 0; }
.cp__task { padding: var(--s-4) var(--s-5); border: 1px solid var(--line-strong); border-left: 3px solid var(--signal-500);
  border-radius: var(--r-md); background: var(--surface-up); }
.cp__big { min-height: 22rem; }
.cp__cmp-head { display: none; }
.cp__cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0;
  border-top: 1px solid var(--line); }
.cp__col { min-width: 0; padding: var(--s-4); border-radius: var(--r-sm); border: 1px solid var(--line); }
.cp__col--mine { background: var(--field); }
.cp__col--model { background: var(--surface); }
.cp__col-t { font-size: var(--t-h4); margin: 0 0 var(--s-2); display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.cp__col-t + .cp__text, .cp__text + .cp__col-t { margin-top: var(--s-2); }
.cp__who { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); font-weight: 400; }
.cp__text { line-height: 1.65; overflow-wrap: anywhere; color: var(--text-2); margin: 0 0 var(--s-3); }
.cp__text:last-child { margin-bottom: 0; }
.cp__checks { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: var(--s-4) 0 0; }
.cp__check { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-up);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.cp__check:hover { border-color: var(--line-strong); }
.cp__check input { flex: none; margin-top: 4px; width: 18px; height: 18px; accent-color: var(--signal-500); }
.cp__check:has(input:checked) { border-color: var(--signal-500); background: var(--signal-glow); }
.cp__score { font-size: var(--t-h4); margin: 0 0 var(--s-2); font-variant-numeric: tabular-nums; }
.cp__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.cp__list li { display: flex; align-items: flex-start; gap: var(--s-2); line-height: 1.6; }
.cp__list li .ic { flex: none; margin-top: 4px; color: var(--signal-500); }
.cp__list--plain li { padding-left: var(--s-4); border-left: 2px solid var(--line-strong); }
.cp__list--rubric li.is-miss .ic { color: var(--text-mute); }
.cp__sum { cursor: pointer; font-weight: 600; }
@media (min-width: 900px) {
  .cp__cmp-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding-bottom: var(--s-2); }
  .cp__cmp-head span { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
}
@media (max-width: 899px) {
  .cp__cmp { grid-template-columns: minmax(0, 1fr); }
}

.apa-out { padding: var(--s-4); background: var(--surface-up); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding-left: calc(var(--s-4) + 2em); text-indent: -2em; line-height: 1.7; overflow-wrap: anywhere; }
.study__t { font-size: var(--t-h4); margin: 0 0 var(--s-2); color: var(--text); }

/* Session and book request lists */
.sreq__list { list-style: none; margin: 0; padding: 0; }
.sreq { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.sreq:last-child { border-bottom: 0; }
.sreq__who { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.book__t { font-size: var(--t-h4); margin: 0 0 var(--s-1); }
.book__t a { color: var(--text); }
.book__lic { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; }
.book__reply { padding: var(--s-3) var(--s-4); background: var(--field); border-radius: var(--r-sm); overflow-wrap: anywhere; }

/* Share menu on posts and research */
.share { position: relative; }
.share > summary { list-style: none; cursor: pointer; }
.share > summary::-webkit-details-marker { display: none; }
.share__menu {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 40;
  width: 15rem; padding: var(--s-2);
  background: var(--surface-up); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--modal-shadow);
  animation: menuIn var(--d-fast) var(--ease-out) both;
}
.share__i {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--t-sm); text-align: left;
}
.share__i:hover { background: var(--field); color: var(--text); }
.share__i .ic { color: var(--text-mute); }
.share__rp { margin: var(--s-1) 0 0; padding-top: var(--s-1); border-top: 1px solid var(--line); }
.share--block .share > summary {
  display: flex; justify-content: center; height: 40px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--text);
  font-size: var(--t-sm); font-weight: 600;
}
.share--block .share__menu { bottom: auto; top: calc(100% + 6px); width: 100%; }

/* A name as every list shows it: name, lapis tick, role (name_tag()).
   Students and licensed psychologists must be told apart at a glance. */
.ntag { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.ntag__n { font-weight: 600; color: var(--text); }
a.ntag__n:hover { color: var(--signal-300); }
.paper .ntag__n { color: var(--paper-ink); }
.ntag__tick {
  display: inline-grid; place-items: center; flex: none;
  width: 15px; height: 15px; border-radius: var(--r-full);
  background: var(--verify); color: var(--surface-up);
}
.ntag__tick .ic { stroke-width: 3; }
.ntag__role {
  font-size: var(--t-xs); font-weight: 500; color: var(--text-mute);
  padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm);
  line-height: 18px; white-space: nowrap;
}
.paper .ntag__role { color: var(--paper-mute); border-color: var(--paper-edge); }

/* Founding member: sage, not lapis. Lapis is reserved for "a person
   checked this"; founding is about when, not what. */
.badge--founding {
  background: var(--signal-glow);
  border-color: color-mix(in srgb, var(--signal-500) 45%, transparent);
  color: var(--signal-500);
  text-decoration: none;
}
a.badge--founding:hover { color: var(--signal-300); border-color: var(--signal-500); }

/* Endorsements on profile specialisations */
.endo__i { display: inline-flex; align-items: stretch; }
.endo__i .chip { gap: 6px; }
.endo__n {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--signal-glow); color: var(--signal-500);
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
}
/* An endorser sees the count on their own button instead. */
.endo__i:has(.endo__f) .endo__n { display: none; }
.endo__i:has(.endo__f) .chip { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.endo__f { display: contents; }
.endo__b {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 var(--s-2);
  border: 1px solid var(--line); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--field);
  color: var(--text-mute); font-family: var(--f-mono); font-size: 11px;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.endo__b:hover { color: var(--signal-500); background: var(--signal-glow); }
.endo__b.is-on { color: var(--btn-ink); background: var(--btn-fill); border-color: var(--btn-fill); }

/* Profile counts, shown to the member only */
.pstat__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.pstat__n {
  font-family: var(--f-display); font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 60;
  font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--text);
}
.pstat__l { font-size: var(--t-xs); color: var(--text-mute); margin-top: var(--s-1); line-height: 1.4; }

/* Hover card */
.hcard {
  position: absolute; z-index: 95;
  width: 20rem; max-width: calc(100vw - 16px);
  padding: var(--s-4);
  background: var(--surface-up);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--modal-shadow);
  animation: cardIn var(--d-fast) var(--ease-out) both;
}
.hcard.is-above { transform-origin: bottom left; }
@keyframes cardIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hcard__top { display: flex; gap: var(--s-3); align-items: center; }
.hcard__who { display: flex; flex-direction: column; min-width: 0; }
.hcard__name {
  font-family: var(--f-display); font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 40;
  font-size: 1.125rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hcard__name:hover { color: var(--signal-300); }
.hcard__head { font-size: var(--t-sm); color: var(--text-2); margin: var(--s-3) 0 0; line-height: 1.5; }
.hcard__badges { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }
.hcard__specs { font-size: var(--t-xs); color: var(--text-mute); margin: var(--s-3) 0 0; }
.hcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line);
}

/* Quick search (Ctrl+K) */
.hdr__kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 5px;
  font-family: var(--f-mono); font-size: 10px; color: var(--text-mute);
  pointer-events: none; background: var(--surface);
}
.hdr__search input:focus ~ .hdr__kbd, .hdr__search input:not(:placeholder-shown) ~ .hdr__kbd { display: none; }
@media (min-width: 1181px) { .hdr__search input { padding-right: 52px; } }
@media (max-width: 1180px) { .hdr__kbd { display: none; } }
.cmdk {
  position: fixed; inset: 0; z-index: 150;
  display: grid; align-items: start; justify-items: center;
  padding: 12vh var(--s-4) var(--s-4);
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn var(--d-fast) var(--ease-out) both;
}
.cmdk__box {
  width: min(36rem, 100%);
  background: var(--surface-up);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
  animation: menuIn var(--d-base) var(--ease-out) both;
}
.cmdk__bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.cmdk__in { flex: 1; height: 40px; border: 0; background: none; font-size: 1.0625rem; color: var(--text); outline: none; }
.cmdk__in::placeholder { color: var(--haze-500); }
.cmdk__esc { padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 5px; font-family: var(--f-mono); font-size: 10px; color: var(--text-mute); }
.cmdk__list { list-style: none; margin: 0; padding: var(--s-2); max-height: 52vh; overflow-y: auto; }
.cmdk__i {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--t-sm);
  cursor: pointer;
}
.cmdk__i.is-on { background: var(--signal-glow); color: var(--text); }
.cmdk__note { font-size: var(--t-xs); color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }

/* Settings > Share your profile */
.share__h { font-size: var(--t-h4); margin: 0 0 var(--s-2); }
.share__link {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-top: 1px solid var(--line);
}
.share__link:first-of-type { border-top: 0; }
.share__k { font-size: var(--t-xs); color: var(--text-mute); }
.share__v {
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: 0; padding: 0;
}
.share__preview {
  display: flex; align-items: center; min-height: 72px;
  padding: var(--s-4); margin: var(--s-3) 0;
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface);
}
.share__code { font-family: var(--f-mono); font-size: var(--t-xs); min-height: 0; resize: none; }
.share__qr { display: flex; gap: var(--s-5); align-items: center; }
.share__qrimg {
  flex: none; padding: var(--s-2);
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-md);
}
.share__qrimg img { display: block; }
@media (max-width: 640px) {
  .share__link { grid-template-columns: minmax(0, 1fr) auto; }
  .share__k { grid-column: 1 / -1; }
  .share__qr { flex-direction: column; align-items: flex-start; }
}

/* Verification record (/@username/verified) */
.vpage { padding: var(--s-7) var(--s-6); }
.vpage__who { display: flex; gap: var(--s-5); align-items: center; margin-bottom: var(--s-6); }
.vpage__name { font-size: var(--t-h2); margin: 0 0 var(--s-1); }
.vlist { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.vlist__i { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.vlist__t { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--text-2); }
.vpage__found { display: flex; gap: var(--s-2); align-items: center; color: var(--signal-500); font-size: var(--t-sm); font-weight: 500; }
.vpage__note { font-size: var(--t-xs); color: var(--text-mute); margin: var(--s-5) 0; max-width: 60ch; }
@media (max-width: 640px) {
  .vpage { padding: var(--s-5) var(--s-4); }
  .vpage__who { flex-direction: column; align-items: flex-start; }
}

/* The printable card */
.pcard {
  max-width: 30rem; margin-inline: auto;
  padding: var(--s-6);
  background: #FFFEFA; color: #1C2621;
  border: 1px solid #E3DACA; border-radius: var(--r-lg);
  box-shadow: var(--sheet-shadow);
}
.pcard__brand { display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-display); font-weight: 600; color: #1C2621; }
.pcard__brand .brand__mark { color: #2F6650; }
.pcard__name { font-size: 2rem; margin: var(--s-5) 0 var(--s-1); color: #1C2621; }
.pcard__head { margin: 0; color: #33403A; }
.pcard__badges { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.pcard__badges li { display: flex; gap: var(--s-2); align-items: flex-start; color: #1C2621; }
.pcard__badges .ic { flex: none; color: #2F64A0; margin-top: 2px; }
.pcard__body { color: #56615B; }
.pcard__qr { display: flex; gap: var(--s-4); align-items: center; padding-top: var(--s-5); border-top: 1px solid #E3DACA; }
.pcard__code { flex: none; width: 132px; }
.pcard__code svg { display: block; width: 100%; height: auto; }
.pcard__qr p { margin: 0; font-size: var(--t-xs); color: #56615B; }
.pcard__qr .mono { color: #1C2621; word-break: break-all; }

.digest-opt { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); }

/* Smooth page changes in browsers that support cross-document view
   transitions (Chrome and Edge today; others just navigate normally).
   The header keeps still while the page under it cross-fades. */
@view-transition { navigation: auto; }
.hdr { view-transition-name: site-header; }
.botbar { view-transition-name: site-botbar; }
::view-transition-old(root) { animation: vtOut 180ms var(--ease) both; }
::view-transition-new(root) { animation: vtIn 260ms var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==================================================================
   15. PRINT — research pages must print like a paper
   ================================================================== */

@media print {
  .hdr, .shell__nav, .shell__rail, .botbar, .flashes, .post__acts, .composer, .no-print, .ft, .skip-link { display: none !important; }
  .is-print-card .band { padding: 0; }
  .pcard { box-shadow: none; break-inside: avoid; }
  body { background: #fff; color: #000; }
  .paper { box-shadow: none; padding: 0; max-width: none; animation: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* First-day setup card on the feed (2026-10-24) */
.setup { padding: var(--s-5); }
.setup__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.setup__t { font-size: var(--t-h4); margin: 0 0 var(--s-1); }
.setup__hide { font-size: var(--t-xs); color: var(--text-mute); padding: var(--s-2); min-height: 40px; cursor: pointer; white-space: nowrap; }
.setup__hide:hover { color: var(--text-2); }
.setup__bar { height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; margin: var(--s-4) 0; }
.setup__bar span { display: block; height: 100%; background: var(--signal-500); border-radius: inherit; transition: width var(--d-base) var(--ease); }
.setup__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }   /* a bare grid track grew to the nowrap headlines */
.setup__step { display: flex; gap: var(--s-3); align-items: flex-start; }
.setup__tick { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 1px;
  border-radius: var(--r-full); border: 1.5px solid var(--line-strong); color: var(--btn-ink); }
.setup__step.is-done .setup__tick { background: var(--signal-500); border-color: var(--signal-500); }
.setup__step.is-done .setup__label { color: var(--text-mute); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.setup__body { flex: 1; min-width: 0; }
.setup__label { margin: 0; font-size: var(--t-sm); font-weight: 600; display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.setup__list { list-style: none; padding: 0; margin: var(--s-3) 0 var(--s-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.setup__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.setup__who { display: flex; align-items: center; gap: var(--s-3); flex: 1 1 auto; min-width: 0; overflow: hidden; color: inherit; }
.setup__who > span:last-child { flex: 1; min-width: 0; overflow: hidden; }   /* long headlines pushed the Follow button off a phone */
.setup__btn { flex: none; min-height: 36px; }
.setup__btn.is-on { background: var(--signal-glow); border-color: var(--signal-500); color: var(--signal-500); }

/* Homepage while the network is small: the founding places left, instead of
   near-zero counters (2026-10-24 design review). */
.founding-offer { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; max-width: 60ch; }
.founding-offer__n { font-family: var(--f-display); font-size: var(--t-h1); line-height: 1; margin: 0; color: var(--text); white-space: nowrap; }
.founding-offer__n span { font-size: var(--t-h4); color: var(--text-mute); }
.founding-offer__t { flex: 1 1 22rem; margin: 0; font-size: var(--t-sm); color: var(--text-2); }

/* CPD certificate (2026-10-18): one page that prints cleanly, and the public check */
.cpd__auto { border-left: 3px solid var(--signal-500); }
.cpd__issued { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.cpd__issued li { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.cert { max-width: 860px; margin: 0 auto; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--soft-1); padding: var(--s-4); }
.cert__frame { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--s-8) var(--s-7); text-align: center; outline: 1px solid var(--line); outline-offset: 6px; }
.cert__brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--f-display); font-size: var(--t-h4); color: var(--signal-500); margin: 0 0 var(--s-5); }
.cert .eyebrow { justify-content: center; max-width: none; }
.cert .eyebrow::after { display: none; }
.cert__name { font-size: var(--t-display); line-height: 1.1; margin: var(--s-3) 0 var(--s-4); }
.cert__lead { font-size: var(--t-read); max-width: 46ch; margin: 0 auto var(--s-6); }
.cert__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); text-align: left; margin: 0 auto var(--s-6); max-width: 620px; }
.cert__k { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 var(--s-1); }
.cert__v { font-family: var(--f-display); font-size: var(--t-h2); margin: 0; }
.cert__table { margin: 0 auto var(--s-6); border-collapse: collapse; min-width: 320px; font-size: var(--t-sm); }
.cert__table th, .cert__table td { padding: 6px var(--s-4); border-bottom: 1px solid var(--line); text-align: left; }
.cert__table td:last-child, .cert__table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cert__foot { display: flex; justify-content: space-between; gap: var(--s-5); text-align: left; border-top: 1px solid var(--line); padding-top: var(--s-4); }
.cert__foot p { margin: 0; }
.cert__code { font-family: var(--f-mono); font-size: var(--t-h4); letter-spacing: .08em; }
.cert__note { font-size: var(--t-xs); color: var(--text-mute); margin: var(--s-5) auto 0; max-width: 60ch; }
.cert__list { margin-top: var(--s-6); }
.cert__dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); margin: 0; }
.cert__dl dt { color: var(--text-mute); font-size: var(--t-sm); }
.cert__dl dd { margin: 0; }
@media (max-width: 640px) {
  .cert__frame { padding: var(--s-6) var(--s-4); }
  .cert__split { grid-template-columns: 1fr; }
  .cert__foot { flex-direction: column; }
}
@media print {
  .cert { box-shadow: none; padding: 0; max-width: none; }
  .cert__frame { break-after: page; }
  .cert__brand { color: #000; }
}

/* Publications from OpenAlex on a profile */
.oaw { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.oaw:first-child { padding-top: 0; }
.oaw:last-child { padding-bottom: 0; border-bottom: 0; }
.oaw__t { font-weight: 600; }

/* A group of radios that is one form field (account deletion): no browser box */
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.field .check { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-2); }

/* ==================================================================
   POST MEDIA (2026-10-18) — composer attachments, image lightbox,
   uploaded video, PDF chip, click-to-load video players, link cards,
   content warnings and inline comment editing. Role tokens only, so
   both themes work; sage for actions, nothing apricot or lapis.
   (views/partials/post-media.php, assets/js/post-media.js)
   ================================================================== */

/* Composer: the attachment slots */
.composer__attach > summary,
.composer__cw > summary { display: inline-flex; align-items: center; gap: var(--s-1); cursor: pointer; }
.attach-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: var(--s-3); }
.attach {
  display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
  padding: var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--field);
}
.attach.is-filled { border-style: solid; border-color: var(--signal-500); }
.attach__file { font-size: var(--t-xs); color: var(--text-3); max-width: 100%; }
.attach__file:focus-visible { outline: 2px solid var(--signal-500); outline-offset: 2px; }
.attach__preview { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.attach__info { overflow-wrap: anywhere; }
.attach__rm { align-self: flex-start; }
.attach__err { margin: var(--s-3) 0 0; color: var(--danger); }

/* Images in a card are links (they open without JS); the lightbox enlarges them */
.post__img { display: block; border-radius: var(--r-sm); }
.post__img:focus-visible { outline: 2px solid var(--signal-500); outline-offset: 2px; }
.post__img:only-child { grid-column: 1 / -1; }
.post__img img { cursor: zoom-in; }
.lightbox {
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: var(--s-6) var(--s-4);
  border: 0; background: transparent; color: var(--text);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: color-mix(in srgb, var(--bg-deep) 94%, transparent); }
.lightbox__fig { margin: 0; display: grid; gap: var(--s-3); justify-items: center; max-width: 100%; }
.lightbox__img { max-width: min(1100px, 92vw); max-height: 80vh; width: auto; height: auto; border-radius: var(--r-sm); background: var(--surface); }
.lightbox__cap { font-size: var(--t-sm); color: var(--text-2); max-width: 68ch; text-align: center; }
.lightbox__btn {
  position: fixed; display: grid; place-items: center; width: 44px; height: 44px;
  font-size: 28px; line-height: 1; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer;
}
.lightbox__btn:hover { background: var(--surface-up); }
.lightbox__btn:focus-visible { outline: 2px solid var(--signal-500); outline-offset: 2px; }
.lightbox__x { top: var(--s-4); right: var(--s-4); }
.lightbox__prev { left: var(--s-4); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--s-4); top: 50%; transform: translateY(-50%); }

/* An uploaded video and a PDF */
.post__video { display: block; width: 100%; max-height: 70vh; margin-top: var(--s-4); border-radius: var(--r-sm); background: var(--bg-deep); }
.filechip {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); color: var(--text); text-decoration: none;
}
.filechip:hover { border-color: var(--line-bright); background: var(--surface-up); }
.filechip .ic:first-child { color: var(--signal-500); flex: none; }
.filechip__name { font-weight: 600; font-size: var(--t-sm); min-width: 0; overflow-wrap: anywhere; flex: 1; }
.filechip__meta { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; }

/* Click-to-load video player: a 16:9 box that requests nothing until played */
.embed {
  position: relative; margin-top: var(--s-4); aspect-ratio: 16 / 9; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); overflow: hidden;
}
.embed__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-4); text-align: center; }
.embed__ic { color: var(--signal-500); }
.embed__t { font-weight: 600; }
.embed__note { font-size: var(--t-xs); color: var(--text-mute); max-width: 46ch; line-height: 1.5; }
.embed__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-1); }
.embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Link card: stored at publish time, title + description + domain, no remote image */
.linkcard {
  display: grid; gap: var(--s-1); margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); color: var(--text); text-decoration: none;
}
.linkcard:hover { border-color: var(--line-bright); background: var(--surface-up); }
.linkcard__dom { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.linkcard__t { font-weight: 600; color: var(--signal-500); overflow-wrap: anywhere; }
.linkcard__d { font-size: var(--t-sm); color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Content warning: a <details>, so it folds with JS off */
.cw { margin-top: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--field); }
.cw__sum { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); cursor: pointer; list-style: none; font-size: var(--t-sm); }
.cw__sum::-webkit-details-marker { display: none; }
.cw__sum .ic { color: var(--warn); flex: none; }
.cw__sum:focus-visible { outline: 2px solid var(--signal-500); outline-offset: 2px; border-radius: var(--r-sm); }
.cw__t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cw__label { font-weight: 600; }
.cw__btn { flex: none; font-weight: 600; color: var(--signal-500); }
.cw__hide { display: none; }
.cw[open] .cw__show { display: none; }
.cw[open] .cw__hide { display: inline; }
.cw__body { padding: 0 var(--s-3) var(--s-3); }

/* Inline comment edit */
.cmt__edit > summary { list-style: none; }
.cmt__edit > summary::-webkit-details-marker { display: none; }
.cmt__edit[open] { flex-basis: 100%; order: 10; }
.cmt__editform { margin-top: var(--s-2); }
.cmt__acts:has(.cmt__edit[open]) { flex-wrap: wrap; }


/* ==================================================================
   SAFETY AND MESSAGING (2026-10-18): the "More" menu (report, mute,
   block), who recommended a post, files and "Seen" in messages, the
   cover field, the report page and Settings, Privacy lists.
   Role colours only: sage for actions, brick for block, nothing new.
   ================================================================== */

/* "More" menu: reuses .share (outside-click closing in orbit.js). */
/* Opens downwards: upwards, a card near the top slid under the sticky header. */
.more__menu { left: auto; right: 0; width: 16.5rem; bottom: auto; top: calc(100% + 6px); }
.more--down > summary {
  height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--text);
}
.more__menu form { margin: 0; }
.more__menu .share__i span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more__sep { height: 1px; margin: var(--s-1) 0; background: var(--line); }
.more__danger, .more__danger .ic { color: var(--danger); }
.more__danger:hover { background: var(--danger-bg); color: var(--danger); }
.more__note { margin: var(--s-1) var(--s-3) 0; font-size: var(--t-xs); color: var(--text-mute); }

/* Recommend button plus its count, which links to who recommended it. */
.act-who { display: inline-flex; align-items: center; }
.act__who {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-2);
  border-radius: var(--r-sm); color: var(--text-mute);
}
.act__who:hover { color: var(--signal-500); background: var(--surface-up); text-decoration: underline; text-underline-offset: .15em; }

/* Quote repost: the optional note inside the share menu. */
.share__note { width: 100%; min-height: 0; margin: var(--s-1) 0; font-size: var(--t-sm); resize: vertical; }

/* Who recommended a post */
.recs { list-style: none; margin: 0; padding: 0; }
.recs__i { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.recs__i:last-child { border-bottom: 0; }
.recs__bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.recs__h { display: block; }

/* Messages: files, "Seen", report, attach button */
.bubble__files { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bubble--mine .bubble__files { justify-content: flex-end; }
.bubble__img img {
  display: block; max-width: 220px; max-height: 220px; width: auto; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field);
}
.bubble__file {
  display: inline-flex; align-items: center; gap: var(--s-2); max-width: 260px;
  padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); font-size: var(--t-sm);
}
.bubble__file:hover { border-color: var(--line-strong); color: var(--text); }
.bubble__meta { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-1); }
.bubble--mine .bubble__meta { justify-content: flex-end; }
.bubble .bubble__meta .meta { display: inline-flex; align-items: center; gap: 3px; margin-top: 0; }
.bubble__seen { color: var(--signal-500); }
.bubble__report { color: var(--text-mute); }
.bubble__report:hover { color: var(--danger); }
.msg__attach { position: relative; flex: none; cursor: pointer; }
.msg__attach:focus-within { outline: 2px solid var(--signal-500); outline-offset: 2px; }
.msg__count { font-size: var(--t-xs); color: var(--text-3); }

/* Settings: cover preview, blocked and muted rows */
.cover-prev { margin-bottom: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--field); }
.cover-prev img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 1; object-fit: cover; }
.safety-row { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.safety-row:last-child { border-bottom: 0; }
.safety-row form { margin: 0; }

/* The report page and the muted-comments note */
.report-what__q {
  margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-4);
  border-left: 2px solid var(--line-strong); color: var(--text-2); font-size: var(--t-sm);
}
.muted-note { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }