/* pathery.css — single shared stylesheet for all Pathery pages. Full note in the session log, 15 Aug 2026. */

/* ---- 1. Fonts --------------------------------------------------- */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;
  font-display:swap;src:url('/brand/fonts/instrument-serif-v5-latin-regular.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;
  font-display:swap;src:url('/brand/fonts/dm-sans-v17-latin-regular.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;
  font-display:swap;src:url('/brand/fonts/dm-sans-v17-latin-italic.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;
  font-display:swap;src:url('/brand/fonts/dm-sans-v17-latin-500.woff2') format('woff2')}

/* FONT-FALLBACK-V1: the stand-in faces. Same width and same line box as the real
   thing, so the swap changes the letters and nothing else. */
@font-face{font-family:'Instrument Serif fallback';src:local('Georgia');
  size-adjust:72.87%;ascent-override:135.86%;descent-override:42.54%;line-gap-override:0%}
@font-face{font-family:'DM Sans fallback';src:local('Arial'),local('Helvetica');
  size-adjust:102.36%;ascent-override:96.72%;descent-override:30.28%;line-gap-override:0%}

/* ---- 2. Core design tokens ------------------------------------ */
:root{
  /* neutrals */
  --bg:#F7F6F4; --surface:#FFFFFF; --surface-2:#FBFAF8; --surface-offset:#EFEDE8;
  --text:#2A2721; --muted:#514B43; --faint:#787065;
  --divider:#E6E3DD; --border:#DCD8D0;
  /* typography */
  --font-display:'Instrument Serif','Instrument Serif fallback',Georgia,serif;/* FONT-FALLBACK-V1 */
  --font-body:'DM Sans','DM Sans fallback','Helvetica Neue',sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.25rem; --text-xl:1.65rem; --text-2xl:1.95rem;
  /* spacing scale */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  /* shape + depth */
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(42,39,33,.06);
  --shadow-md:0 4px 14px rgba(42,39,33,.09);
  --shadow-lg:0 12px 30px rgba(42,39,33,.14);
  /* motion */
  --ease:180ms cubic-bezier(.16,1,.3,1);
  /* fixed cross-module domain hues. Work is BA's primary, Play is
     VC's primary-text; Love and Health are their own. The same four
     colours anywhere domains co-occur, in any module. */
  --dom-work:#3a6ea8; --dom-play:#bd8d00; --dom-love:#A8365C; --dom-health:#3F7D3F;
  /* card */
  --card-h:200px;
}

/* ---- 3. Full note in the session log, 15 Aug 2026. */

/* Theme: Blue (Behavioural Activation) */
body[data-theme="blue"]{
  --primary:#3a6ea8; --primary-soft:#cfe0f2;
  /* CORE-NAMES-V1 */ --primary-dark:#204a73; --primary-press:#204a73; --primary-tint:#EAF1FB;
  --on-primary:#FFFFFF; --on-tint:#1D2B45; --on-tint-muted:#4E5D78; --on-tint-faint:#5E6C86;
  --accent:#4f9dd9; --accent-ink:#2f7fc4;
  --scrim:rgba(42,39,33,.42);
  --brand-mark:var(--primary);
}

/* Theme: Orange (Managing Worries) */
body[data-theme="orange"]{
  --primary:#e0782f; --primary-dark:#a85518; --primary-press:#a85518; --primary-soft:#f6d3b4; --primary-tint:#fdf1e6;
  --on-primary:#FFFFFF;
  --on-tint:#452B18;
  --scrim:rgba(42,39,33,.35);
  --brand-mark:var(--primary);
}

/* Theme: Yellow (Values Card Sort — Inside Out: Joy). Full note in the session log, 15 Aug 2026. */
body[data-theme="yellow"]{
  --primary:#e8b016; --primary-dark:#bd8d00; --primary-darker:#8a6a0e; --primary-press:#edc44e; /* PRESS-GOLD-V1, 27 Aug 2026. The gold under a pointer or a finger. Yellow lifts, because dark ink cannot survive a darker gold; blue and orange keep the darker step they already had. */ --primary-soft:#f7e5a4; --primary-tint:#fdf6e0;
  --on-primary:#3e2f08;
  --on-tint:#3e2f08;
  --primary-text:#bd8d00; /* accent gold. 3.01:1 on white - below AA 4.5:1 for small text.
     A deliberate, documented exception (V15): use it only for low-stakes
     labels, never as the only cue, never on --surface-offset (2.57:1). */
  --scrim:rgba(42,39,33,.35);
  --brand-mark:var(--primary);
}

/* ---- 4. Universal reset ------------------------------------------ */

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

/* SHELL-TOOL-V1 — SHELL-TOOL-V1:start Amended 14 Aug 2026, SHELL-MERGE-V2-NOTE: carries the uncontested part of the tool shell,… Full note in the session log, 15 Aug 2026. */
[data-shell="tool"] main{touch-action:pan-y pinch-zoom;overflow-x:hidden;overscroll-behavior-x:contain}

/* CHROMESMALL-MERGE-V2 — CHROMESMALL-MERGE-V2 — chrome-small hoist, step 4 deploy one, 14 Aug 2026. Full note in the session log, 15 Aug 2026. */
[data-shell="tool"] .brandrow{display:flex;align-items:center;gap:var(--space-2)}
[data-shell="tool"] .lockup{display:block;height:22px;width:auto}
[data-shell="tool"] .module{font-size:var(--text-xs);text-transform:uppercase;margin-left:auto;cursor:pointer;transition:color var(--ease)}
[data-shell="tool"] .track{margin-top:var(--space-3);height:5px;border-radius:var(--radius-full);overflow:hidden}
[data-shell="tool"] .fill{height:100%;border-radius:inherit;transition:width var(--ease)}
[data-shell="tool"] .steplabel{display:none}
@media (min-width:521px){
  [data-shell="tool"] .brandrow{position:relative;max-width:1080px;margin:0 auto;padding:0 40px}
  [data-shell="tool"] .module{position:absolute;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
  [data-shell="tool"] .steplabel{display:block;font-size:var(--text-xs);font-variant-numeric:tabular-nums}
  [data-shell="tool"] .track{max-width:1000px;margin:var(--space-3) auto 0}
}

@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes vcnudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-16px) rotate(-1.5deg)}
 55%{transform:translateX(6px) rotate(.5deg)}80%{transform:translateX(-3px)}}
/* VC-STATE-V9:end */

/* VC-RESULT-V12:start */
/* VC-RESULT-V12 — Pathery - Values Card Sort, result V12: the living pyramid. Full note in the session log, 15 Aug 2026. */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/brand/fonts/instrument-serif-v5-latin-italic.woff2') format('woff2')}
@keyframes vcShake{
  0%,100%{transform:translateX(0) rotate(0)}
  12%{transform:translateX(-1.6px) rotate(-3.5deg)}
  28%{transform:translateX(1.6px) rotate(3.5deg)}
  44%{transform:translateX(-1.2px) rotate(-2.5deg)}
  60%{transform:translateX(1.2px) rotate(2.5deg)}
  76%{transform:translateX(-.6px) rotate(-1.2deg)}
  88%{transform:translateX(.6px) rotate(1.2deg)}
}


/* TYPO-MERGE-V5 — TYPO-MERGE-V5 — typography hoist, step 4 deploy two, 14 Aug 2026. Full note in the session log, 15 Aug 2026. */
[data-shell="tool"] h1{line-height:1.18;text-wrap:balance;font-variant-ligatures:common-ligatures contextual;font-feature-settings:"liga" 1,"clig" 1;font-kerning:normal}
[data-shell="tool"] h2{line-height:1.18;text-wrap:balance;font-variant-ligatures:common-ligatures contextual;font-feature-settings:"liga" 1,"clig" 1;font-kerning:normal}
[data-shell="tool"] h3{line-height:1.18;text-wrap:balance;font-variant-ligatures:common-ligatures contextual;font-feature-settings:"liga" 1,"clig" 1;font-kerning:normal}
[data-shell="tool"] p{text-wrap:pretty}
[data-shell="tool"] .title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;line-height:1.25;font-variant-ligatures:common-ligatures contextual;font-feature-settings:"liga" 1,"clig" 1;font-kerning:normal}
[data-shell="tool"] .kicker{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:500}
[data-shell="tool"] .title+.body{font-size:var(--text-sm);line-height:1.5}
[data-shell="tool"] .kicker+.body{font-size:var(--text-sm);line-height:1.5}
[data-shell="tool"] .body{font-size:var(--text-sm)}
[data-shell="tool"] .flinks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
[data-shell="tool"] .flinks a{text-decoration:none;border-bottom:1px solid transparent;transition:all var(--ease)}
[data-shell="tool"] .fine{font-size:var(--text-xs);line-height:1.5;max-width:70ch}
@media (min-width:521px){
  [data-shell="tool"] .title{font-size:2rem;line-height:1.2}
}


/* DECK-MERGE-V1 — DECK-MERGE-V1-BLOCK — deck hoist, step 4 deploy three, 14 Aug 2026. Full note in the session log, 15 Aug 2026. */
[data-shell="tool"] .card{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4)}
[data-shell="tool"] .tray{border-top:1px solid var(--divider)}
[data-shell="tool"] .traylabel{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:500}
[data-shell="tool"] .trayhelp{font-size:var(--text-xs);margin-top:var(--space-1);font-style:italic}
[data-shell="tool"] .traylist{display:flex;flex-direction:column;gap:var(--space-2)}
[data-shell="tool"] .trayitem{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--primary-soft);border-radius:var(--radius-md);font-size:var(--text-sm);overflow-wrap:anywhere;min-width:0}
[data-shell="tool"] .trayitem button{margin-left:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;padding:0;line-height:1}
[data-shell="tool"] .deckwrap{position:relative;min-height:var(--card-h);margin-top:var(--space-3)}
/* STAMP-OUT-V1: the swipe stamps are gone from all three decks; the chevron aim replaced them. */
[data-shell="tool"] .fcard{position:absolute;inset:0;cursor:grab;z-index:1;text-align:center;align-items:center;border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-2);touch-action:pinch-zoom;-webkit-user-select:none;user-select:none}
[data-shell="tool"] .fcard .txt{font-family:var(--font-display);line-height:1.3;font-variant-ligatures:common-ligatures contextual;font-feature-settings:"liga" 1,"clig" 1;font-kerning:normal}
[data-shell="tool"] .swiparrow{position:absolute;top:50%;transform:translateY(-50%);font-size:1.5rem;line-height:1;pointer-events:none;z-index:2;color:var(--divider);transition:color 120ms linear}
[data-shell="tool"] .swiparrow.left{left:var(--space-3)}
[data-shell="tool"] .swiparrow.right{right:var(--space-3)}
/* CHEVRON-AIM-V1: both chevrons rest on --divider. The destination one
   alone moves; the other holds its rest. The aim class is set on .fcard
   by the module script, 12px into the gesture. */
[data-shell="tool"] .fcard.aim-l .swiparrow.left{color:var(--faint)}
[data-shell="tool"] .fcard.aim-r .swiparrow.right{color:var(--primary)}
/* EXIT-CURVE-V1: the mirror of the vcnudge keyframes declared above in this
   file, for a refusal on the right. Every translate and rotate is the
   negation of that set, generated rather than transcribed. VC picks the
   class by direction in refuseCard. */
@keyframes vcnudge-r{0%,100%{transform:translateX(0)}25%{transform:translateX(16px) rotate(1.5deg)}55%{transform:translateX(-6px) rotate(-0.5deg)}80%{transform:translateX(3px)}}
[data-shell="tool"] .fcard.nudge-r{animation:vcnudge-r 420ms cubic-bezier(.36,.07,.19,.97)}
@media (prefers-reduced-motion:reduce){[data-shell="tool"] .fcard.nudge-r{animation:none}}
[data-shell="tool"] .tapzone{position:absolute;top:0;bottom:0;width:34%;border:0;z-index:1;cursor:pointer}
[data-shell="tool"] .tapzone.left{left:0}
[data-shell="tool"] .tapzone.right{right:0}
[data-shell="tool"] .stackcard{z-index:0;pointer-events:none}
[data-shell="tool"] .stackcard.s1{transform:translateY(8px) scale(.97);opacity:.7}
[data-shell="tool"] .stackcard.s2{transform:translateY(16px) scale(.94);opacity:.45}
[data-shell="tool"] .deckbtns{display:flex;gap:var(--space-3);margin-top:var(--space-3)}
[data-shell="tool"] .deckbtns button{flex:1;min-height:48px;border-radius:var(--radius-full);font-size:var(--text-sm);transition:all var(--ease)}
[data-shell="tool"] .empty{text-align:center;font-size:var(--text-sm);font-style:italic}


/* WELCOME-MERGE-V1 — WELCOME-MERGE-V1-BLOCK — welcome hoist, step 4 deploy four, 14 Aug 2026. Full note in the session log, 15 Aug 2026. */
[data-shell="tool"] main[data-screen=welcome]{--gap:40px;--meta-reserve:76px}
[data-shell="tool"] main[data-screen=welcome] .title{font-size:var(--text-2xl);line-height:1.14}
[data-shell="tool"] .wlead{font-size:var(--text-base);line-height:1.5;text-wrap:balance}
[data-shell="tool"] .wrule{height:1px}
[data-shell="tool"] .waction{font-size:var(--text-sm);line-height:1.55;text-wrap:balance}
[data-shell="tool"] main[data-screen=welcome]>.wcol{flex:1;display:flex;flex-direction:column;min-width:0}
[data-shell="tool"] .wcol>.topspace{display:none}
[data-shell="tool"] .wcol>.copy{display:flex;flex-direction:column;gap:var(--space-4)}
[data-shell="tool"] .wcol>.metaslot{margin-top:auto;padding-top:var(--space-5)}
[data-shell="tool"] .metaline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:var(--text-xs)}
[data-shell="tool"] .metaline .mitem{display:inline-flex;align-items:center;gap:5px;line-height:1}
[data-shell="tool"] .metaline .mitem svg{width:12px;height:12px;flex:none}
[data-shell="tool"] .cbt{position:relative;display:inline-flex;align-items:center;gap:5px;padding:0;font:inherit;font-size:var(--text-xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1;border:none;cursor:pointer;transition:color var(--ease)}
[data-shell="tool"] .cbt::before{content:'';position:absolute;inset:-11px -6px}
[data-shell="tool"] .cbt .badge{width:12px;height:12px;flex:none} /* PARITY-COPY-V1 */
/* PARITY-DL-V2: the save button lays out symbol beside word. Sizes copied
   from pathery-ca.css, which shipped this first. A module rule that sets
   its own display still wins, because the module file loads after this one. */
[data-shell="tool"] .dlbtn{flex:1;min-height:48px;border:1px solid var(--primary);border-radius:var(--radius-full);background:var(--surface);font-family:inherit;font-size:var(--text-sm);line-height:normal;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px} /* PARITY-DL-ONE-V1: the whole save button is defined here. A module states only its label colour, its row margin and its wide-screen row. Copies removed from pathery-ba.css, pathery-vc.css and pathery-ca.css in the same pass. */
[data-shell="tool"] .dlbtn svg{width:15px;height:15px;flex:none}
[data-shell="tool"] .dlbtn.busy svg{display:none}
[data-shell="tool"] .cbt .chev{width:11px;height:11px;flex:none;transition:transform var(--ease)}
[data-shell="tool"] .cbt[aria-expanded=true] .chev{transform:rotate(180deg)}
[data-shell="tool"] .whywrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows 220ms cubic-bezier(.16,1,.3,1)}
[data-shell="tool"] .whywrap.open{grid-template-rows:1fr}
[data-shell="tool"] .whywrap>div{overflow:hidden}
[data-shell="tool"] .whybody{max-width:48ch;padding-top:10px;font-size:var(--text-xs);line-height:1.6;opacity:0;transition:opacity 180ms ease 60ms}
[data-shell="tool"] .whywrap.open .whybody{opacity:1}
[data-shell="tool"] .dbr{display:none}
@media (prefers-reduced-motion:reduce){
  [data-shell="tool"] .whywrap{transition:none}
  [data-shell="tool"] .whybody{transition:none}
  [data-shell="tool"] .cbt .chev{transition:none}
}
@media (min-width:521px){
  [data-shell="tool"] .dbr{display:inline}
  [data-shell="tool"] main[data-screen=welcome] .wrule{width:64px}
}
@media (min-width:960px){
  [data-shell="tool"] main[data-screen=welcome]{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:64px;row-gap:0;align-items:stretch;align-content:stretch}
  [data-shell="tool"] main[data-screen=welcome]>.title{grid-column:1;grid-row:1;font-size:2.6rem;text-align:left;max-width:none}
  [data-shell="tool"] main[data-screen=welcome]>.wcol{grid-column:2;grid-row:1;display:grid;grid-template-rows:1fr auto var(--meta-reserve);min-height:0}
  [data-shell="tool"] .wcol>.topspace{display:block;grid-row:1;min-height:24px}
  [data-shell="tool"] .wcol>.copy{grid-row:2;margin-bottom:var(--gap)}
  [data-shell="tool"] .wcol>.metaslot{grid-row:3;margin-top:0;padding-top:0;display:flex;flex-direction:column;justify-content:flex-end}
}


/* SHELL-MERGE-V2 — SHELL-MERGE-V2-BLOCK — shell hoist, second attempt, 14 Aug 2026. Full note in the session log, 15 Aug 2026. */
body[data-shell="tool"]{-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;font-synthesis:none;min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;justify-content:center;touch-action:manipulation}
[data-shell="tool"] :focus-visible{outline:2px solid var(--primary);outline-offset:3px}
/* SHEET-RING-V1: the sheet is given focus when it opens, so the keyboard trap and
   Escape work, and Safari draws the ring around the box itself for that
   programmatic focus. A ring belongs on the controls a keyboard user moves
   between, not on the container, so the container alone is exempt. Every button,
   chip and field inside keeps its ring. Shared, so both sheets are covered. */
[data-shell="tool"] .sheet:focus,[data-shell="tool"] .sheet:focus-visible{outline:none}
[data-shell="tool"] main{display:flex;flex-direction:column}
[data-shell="tool"] nav{display:flex;gap:var(--space-3);-webkit-touch-callout:none}
[data-shell="tool"] nav button{min-height:48px;border-radius:var(--radius-full);font-size:var(--text-sm);transition:background var(--ease),color var(--ease),border-color var(--ease)}
[data-shell="tool"] footer{font-size:var(--text-xs);line-height:1.5}
[data-shell="tool"] .homelink{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
[data-shell="tool"] .homelink:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
@media (max-width:520px){
  [data-shell="tool"] header{flex:0 0 auto}
  [data-shell="tool"] nav{position:static;bottom:auto;z-index:20;flex:0 0 auto}
  [data-shell="tool"] main{min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
@media (min-width:521px){
  [data-shell="tool"] main{max-width:none;width:100%;margin:0;align-content:start}
  [data-shell="tool"] main>.body{max-width:66ch;text-wrap:balance}
  [data-shell="tool"] nav{max-width:none;width:100%;margin:0;justify-content:flex-end}
  [data-shell="tool"] .back{margin-right:auto}
  [data-shell="tool"] .next{min-width:210px}
  [data-shell="tool"] footer{max-width:none;width:100%;margin:0}
}
/* BA-LOOP-V2:start */
/* Pathery — the loop panel. Phone: a bottom sheet, answers in one reading area of
   fixed depth. From 768px: centred, each answer under the name it arrives at. One
   set of words serves both; only the geometry changes. Everything is scoped through
   .loopwrap, because the module's own button reset outranks unscoped rules. */
[data-shell="tool"] button.wlead{display:block;width:100%;text-align:left;padding:0}
[data-shell="tool"] .wlead .chev{display:inline-block;width:11px;height:11px;margin-left:6px;
 vertical-align:-1px;color:inherit;transition:transform var(--ease),color var(--ease)}
[data-shell="tool"] .wlead[aria-expanded="true"] .chev{transform:rotate(180deg)}

.loopwrap[hidden]{display:none}
.loopwrap{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.loopwrap .loopscrim{position:absolute;inset:0;background:var(--scrim)}
.loopwrap .looppanel{position:relative;width:100%;background:var(--surface);
 border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -12px 40px rgba(42,39,33,.18);
 padding:14px 20px 20px;max-height:86dvh;overflow-y:auto;
 transform:translateY(14px);transition:transform var(--ease)}
.loopwrap.open .looppanel{transform:none}
.loopwrap .loopgrip{position:relative;width:38px;height:4px;border-radius:var(--radius-full);
 background:var(--surface-offset);margin:0 auto 12px;flex:none;touch-action:none;cursor:grab}
.loopwrap .loopgrip::before{content:"";position:absolute;left:50%;top:50%;
 transform:translate(-50%,-50%);width:120px;height:44px}
.loopwrap .loopgrip.grabbing{background:var(--faint);cursor:grabbing}
.loopwrap .loopx{display:none;position:absolute;right:14px;top:12px;font:inherit;font-size:1.05rem;
 line-height:1;color:var(--faint);background:none;border:0;padding:8px;cursor:pointer;
 transition:color var(--ease)}
.loopwrap .loopx:hover{color:var(--text)}
.loopwrap .loopkick{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;
 font-weight:500;color:var(--primary);text-align:center}

.loopwrap .loopstage{--sw:300px;--sh:200px;
 --bx:150px;--by:4px;--ex:150px;--ey:86px;--tx:46px;--ty:156px;--hx:254px;--hy:156px;
 --a1x:98px;--a1y:91px;--a1r:-55.6deg;--a2x:202px;--a2y:91px;--a2r:55.6deg;
 --a3x:150px;--a3y:167px;--a3r:0deg;--alen:44px;
 position:relative;width:var(--sw);height:var(--sh);
 margin:var(--space-4) auto calc(44px + 2 * 1.55 * var(--text-xs))} /* BA-LOOP-V3 */
.loopwrap .loopnode{position:absolute;transform:translateX(-50%);text-align:center;
 white-space:nowrap;transition:opacity var(--ease)}
.loopwrap .loopnode[data-node="body"]{left:var(--bx);top:var(--by)}
.loopwrap .loopnode[data-node="emotion"]{left:var(--ex);top:var(--ey)}
.loopwrap .loopnode[data-node="thought"]{left:var(--tx);top:var(--ty)}
.loopwrap .loopnode[data-node="behaviour"]{left:var(--hx);top:var(--hy)}
.loopwrap .loopname{display:block;font-family:var(--font-display);font-weight:400;
 font-size:var(--text-lg);line-height:1.1;color:var(--text);
 font-variant-ligatures:common-ligatures contextual;font-feature-settings:"liga" 1,"clig" 1;
 transition:color var(--ease)}
.loopwrap .loophint{display:block;font-family:var(--font-body);font-size:var(--text-xs);
 line-height:1.3;color:var(--faint);margin-top:3px}
.loopwrap .loophint>span:not(.w){display:none}
.loopwrap .loopmid{display:inline-block;min-height:44px;padding:0 10px;font:inherit;
 color:inherit;background:none;border:0;cursor:pointer}
.loopwrap .loopmid:hover .loopname,.loopwrap .loopmid:active .loopname{color:var(--muted)}
.loopwrap .looparrow{position:absolute;padding:12px;background:none;border:0;cursor:pointer;
 color:var(--divider);line-height:0;transform:translate(-50%,-50%) rotate(var(--r));
 transition:color var(--ease),opacity var(--ease)}
.loopwrap .looparrow svg{display:block;width:var(--alen);height:auto}
.loopwrap .looparrow[data-link="tb"]{left:var(--a1x);top:var(--a1y);--r:var(--a1r)}
.loopwrap .looparrow[data-link="bb"]{left:var(--a2x);top:var(--a2y);--r:var(--a2r)}
.loopwrap .looparrow[data-link="bt"]{left:var(--a3x);top:var(--a3y);--r:var(--a3r)}
@media (hover:hover){.loopwrap .looparrow:hover{color:var(--primary-soft)}}

.loopwrap .loopslot{position:absolute;left:0;right:0;top:100%;margin-top:var(--space-3);
 padding-top:12px;border-top:1px solid var(--divider);
 height:calc(12px + 2 * 1.55 * var(--text-xs));overflow:hidden}
.loopwrap .loopline{display:none;margin:0;font-family:var(--font-body);font-size:var(--text-xs);
 line-height:1.55;color:var(--primary);text-align:center;text-wrap:pretty}
.loopwrap .loopline.rest{font-style:italic;color:var(--border)}

.loopwrap[data-st="less"] .loophint[data-st="some"],
.loopwrap[data-st="some"] .loophint[data-st="less"],
.loopwrap[data-st="less"] .loopcap span[data-st="some"],
.loopwrap[data-st="some"] .loopcap span[data-st="less"]{display:none}
.loopwrap:not([data-open]) .loopline.rest{display:block}
.loopwrap[data-open="emo"] .loopline[data-link="emo"],
.loopwrap[data-st="less"][data-open="tb"] .loopline[data-link="tb"][data-st="less"],
.loopwrap[data-st="some"][data-open="tb"] .loopline[data-link="tb"][data-st="some"],
.loopwrap[data-st="less"][data-open="bb"] .loopline[data-link="bb"][data-st="less"],
.loopwrap[data-st="some"][data-open="bb"] .loopline[data-link="bb"][data-st="some"],
.loopwrap[data-st="less"][data-open="bt"] .loopline[data-link="bt"][data-st="less"],
.loopwrap[data-st="some"][data-open="bt"] .loopline[data-link="bt"][data-st="some"]{display:block}

.loopwrap[data-open] .loopnode,.loopwrap[data-open] .looparrow{opacity:.4}
.loopwrap[data-open="emo"] .loopnode[data-node="emotion"],
.loopwrap[data-open="tb"] .loopnode[data-node="body"],
.loopwrap[data-open="tb"] .loopnode[data-node="thought"],
.loopwrap[data-open="bb"] .loopnode[data-node="body"],
.loopwrap[data-open="bb"] .loopnode[data-node="behaviour"],
.loopwrap[data-open="bt"] .loopnode[data-node="thought"],
.loopwrap[data-open="bt"] .loopnode[data-node="behaviour"]{opacity:1}
.loopwrap[data-open="tb"] .looparrow[data-link="tb"],
.loopwrap[data-open="bb"] .looparrow[data-link="bb"],
.loopwrap[data-open="bt"] .looparrow[data-link="bt"]{opacity:1;color:var(--primary)}

.loopwrap .looptoggle{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-4)}
.loopwrap .looptoggle button{font-family:var(--font-body);font-size:var(--text-xs);
 color:var(--muted);background:var(--surface);border:1px solid var(--primary-soft);
 border-radius:var(--radius-full);padding:8px 15px;min-height:36px;cursor:pointer;
 transition:background var(--ease),border-color var(--ease),color var(--ease)}
.loopwrap .looptoggle button[aria-pressed="true"]{background:var(--primary);
 border-color:var(--primary);color:var(--on-primary)}
.loopwrap .loopcap{font-family:var(--font-body);font-style:italic;font-size:var(--text-xs);
 line-height:1.55;color:var(--faint);text-align:center;margin:var(--space-3) auto 0;
 max-width:34ch;height:calc(2 * 1.55 * var(--text-xs));text-wrap:balance}

@media (min-width:768px){
 .loopwrap{align-items:center}
 .loopwrap .looppanel{max-width:800px;border-radius:var(--radius-lg);padding:22px 20px 26px;
  transform:translateY(10px) scale(.99)}
 .loopwrap.open .looppanel{transform:none}
 .loopwrap .loopgrip{display:none}
 .loopwrap .loopx{display:block}
 .loopwrap .loopstage{--sw:720px;--sh:430px;
  --bx:360px;--by:20px;--ex:360px;--ey:168px;--tx:150px;--ty:296px;--hx:570px;--hy:296px;
  --a1x:255px;--a1y:172px;--a1r:-52.1deg;--a2x:465px;--a2y:172px;--a2r:52.1deg;
  --a3x:360px;--a3y:310px;--a3r:0deg;--alen:64px;
  margin:var(--space-5) auto 0}
 .loopwrap .loopname{font-size:var(--text-xl)}
 .loopwrap .loophint{margin-top:6px;line-height:1.5}
 .loopwrap .loophint>span:not(.w){display:inline}
 .loopwrap .looparrow{padding:10px}
 .loopwrap .loopslot{position:static;border-top:0;margin:0;padding:0;height:auto;overflow:visible}
 .loopwrap .loopline{position:absolute;width:260px;transform:translateX(-50%)}
 .loopwrap .loopline[data-node="body"]{left:var(--bx);top:calc(var(--by) + 63px)}
 .loopwrap .loopline[data-node="emotion"]{left:var(--ex);top:calc(var(--ey) + 63px);width:340px}
 .loopwrap .loopline[data-node="thought"]{left:var(--tx);top:calc(var(--ty) + 63px)}
 .loopwrap .loopline[data-node="behaviour"]{left:var(--hx);top:calc(var(--hy) + 63px)}
 .loopwrap:not([data-open]) .loopline.rest{display:none}
 .loopwrap .loopcap{max-width:none;height:calc(1.55 * var(--text-xs))}
}
@media (prefers-reduced-motion:reduce){
 .loopwrap .looppanel,.loopwrap .loopnode,.loopwrap .looparrow,.loopwrap .loopname,
 .loopwrap .looptoggle button,[data-shell="tool"] .wlead .chev{transition:none}
}
/* BA-LOOP-V2:end */

/* HEXAFLEX-SHARED-V1, 23 Aug 2026. The ACT hexaflex panel, moved here from
   pathery-vc.css so Values Card Sort and Committed Actions read one copy, the
   way the loop panel above serves BA and MW. Phone: a bottom sheet, six names
   on a hexagon in a 300 box, one reading area of fixed depth beneath it, the
   switch below, the closing line last. From 768px: centred, the box is 720 by
   430, every example stands open and the switch is the only control.
   The shape of this block is load-bearing. The shared part holds what is true
   at every width; each width block adds only its own. A rule that undoes an
   earlier rule at the same width is a defect, not a fix.
   Never write a page-level .lab rule: the switch below contains span.lab, and
   such a rule reaches inside it and uppercases the toggle. */
.hexwrap[hidden]{display:none}
.hexwrap{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.hexwrap .hexscrim{position:absolute;inset:0;background:var(--scrim)}
.hexwrap .hexpanel{position:relative;width:100%;background:var(--surface);
 border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -12px 40px rgba(42,39,33,.18);
 padding:14px 20px 20px;max-height:86dvh;overflow-y:auto;
 transform:translateY(14px);transition:transform var(--ease)}
.hexwrap.open .hexpanel{transform:none}
.hexwrap .hexgrip{position:relative;width:38px;height:4px;border-radius:var(--radius-full);
 background:var(--surface-offset);margin:0 auto 12px;flex:none;touch-action:none;cursor:grab}
.hexwrap .hexgrip::before{content:"";position:absolute;left:50%;top:50%;
 transform:translate(-50%,-50%);width:120px;height:44px}
.hexwrap .hexgrip.grabbing{background:var(--faint);cursor:grabbing}
.hexwrap .hexx{display:none;position:absolute;right:14px;top:12px;font:inherit;font-size:1.05rem;
 line-height:1;color:var(--faint);background:none;border:0;padding:8px;cursor:pointer;
 transition:color var(--ease)}
.hexwrap .hexx:hover{color:var(--text)}
.hexwrap .hexkick{font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;
 letter-spacing:.1em;font-weight:500;color:var(--primary-text);text-align:center}
.hexwrap .hexstage{position:relative;width:300px;height:276px;
 margin:var(--space-2) auto calc(44px + 2 * 1.55 * var(--text-xs))}
.hexwrap .hexnode{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;
 justify-content:center;text-align:center;background:none;border:0;padding:0 2px;
 font:inherit;height:44px;transition:opacity var(--ease)}
.hexwrap .hexnode[data-pos="top"]{left:150px;top:26px;width:200px}
.hexwrap .hexnode[data-pos="ur"]{left:256px;top:100px;width:126px}
.hexwrap .hexnode[data-pos="lr"]{left:256px;top:176px;width:126px}
.hexwrap .hexnode[data-pos="bot"]{left:150px;top:250px;width:200px}
.hexwrap .hexnode[data-pos="ll"]{left:44px;top:176px;width:126px}
.hexwrap .hexnode[data-pos="ul"]{left:44px;top:100px;width:126px}
.hexwrap .hexname{display:block;font-family:var(--font-display);font-weight:400;
 font-size:var(--text-base);line-height:1.14;color:var(--text);
 font-variant-ligatures:common-ligatures contextual;font-feature-settings:"liga" 1,"clig" 1;
 transition:color var(--ease)}
.hexwrap .hexname .wb{display:block}
.hexwrap .hexname.vkey{color:var(--primary-text)}
.hexwrap .hexslot{position:absolute;left:0;right:0;top:100%;margin-top:var(--space-3);
 padding-top:12px;border-top:1px solid var(--divider);
 height:calc(12px + 2 * 1.55 * var(--text-xs));overflow:hidden}
.hexwrap .hexline{display:none;margin:0;font-family:var(--font-body);font-size:var(--text-xs);
 line-height:1.55;color:var(--faint);text-align:center;text-wrap:pretty}
.hexwrap .hexline.rest{font-style:italic;color:var(--border)}
.hexwrap .hexline.vkey{color:var(--primary-text)}
.hexwrap[data-st="off"] [data-st="on"],.hexwrap[data-st="on"] [data-st="off"]{display:none}
/* the switch. Both wordings share one grid cell, so the button is as wide as
   "Psychological inflexibility" and cannot resize when tapped. */
.hexwrap .hexsw{position:relative;overflow:hidden;border:1px solid var(--primary-soft);
 background:var(--surface);border-radius:var(--radius-full);padding:8px 15px;min-height:36px;
 cursor:pointer;font:inherit;font-family:var(--font-body);font-size:var(--text-xs);
 font-weight:400;color:var(--muted);transition:color var(--ease),border-color var(--ease)}
/* CORE-SWEEP-V1, 27 Aug 2026. The parked sweep used to show as a hairline of
   module colour at the left of an untoggled switch: the pill clips with
   overflow:hidden, and iOS Safari does not clip a moved layer cleanly against a
   rounded edge. The layer now takes the pill's own rounded shape and parks a
   whisker further out, so an untoggled switch is white all the way across. The
   sweep itself is unchanged, in both directions. */
.hexwrap .hexsw::before{content:"";position:absolute;inset:0;background:var(--primary);border-radius:inherit;
 transform:translateX(-101%);transition:transform 260ms cubic-bezier(.16,1,.3,1)}
.hexwrap .hexsw .lab{position:relative;display:grid}
.hexwrap .hexsw .lab>span{grid-area:1/1;white-space:nowrap;text-align:center}
.hexwrap[data-st="off"] .hexsw .lab>[data-sl="on"]{visibility:hidden}
.hexwrap[data-st="on"] .hexsw .lab>[data-sl="off"]{visibility:hidden}
.hexwrap .hexsw[aria-pressed="true"]{border-color:var(--primary);color:var(--on-primary)}
.hexwrap .hexsw[aria-pressed="true"]::before{transform:none}
/* two switches, one per width: CSS shows exactly one, the script keeps both in
   step so neither can read as stale. */
.hexwrap .hexswitch{display:flex;justify-content:center;margin-top:var(--space-4)}
.hexwrap .hexswitch.mid{display:none}
.hexwrap .hexrule{display:none}
.hexwrap .hexcap{font-family:var(--font-body);font-style:italic;font-size:var(--text-xs);
 line-height:1.55;color:var(--faint);text-align:center;margin:var(--space-3) auto 0;
 max-width:34ch;height:calc(2 * 1.55 * var(--text-xs));text-wrap:balance}

/* Phone only: one example at a time, revealed by tapping a name. */
@media (max-width:767px){
 .hexwrap .hexnode{cursor:pointer}
 .hexwrap:not([data-open]) .hexline.rest{display:block}
 .hexwrap[data-st="off"] .hexline.shown[data-st="off"],
 .hexwrap[data-st="on"] .hexline.shown[data-st="on"]{display:block}
 .hexwrap[data-open] .hexnode:not(.open){opacity:.4}
 .hexwrap .hexnode:active .hexname{color:var(--muted)}
 .hexwrap .hexnode:active .hexname.vkey{color:var(--primary-darker)}
 @media (hover:hover){
  .hexwrap .hexnode:hover .hexname{color:var(--muted)}
  .hexwrap .hexnode:hover .hexname.vkey{color:var(--primary-darker)}
 }
}

/* From 768px: all six examples stand open, so the switch is the only control.
   The names are switched off from script here, in pathery-app.js. */
@media (min-width:768px){
 .hexwrap{align-items:center}
 .hexwrap .hexpanel{max-width:800px;border-radius:var(--radius-lg);padding:22px 20px 26px;
  transform:translateY(10px) scale(.99)}
 .hexwrap.open .hexpanel{transform:none}
 .hexwrap .hexgrip{display:none}
 .hexwrap .hexx{display:block}
 .hexwrap .hexstage{width:720px;height:430px;margin:var(--space-5) auto 0}
 .hexwrap .hexname{font-size:var(--text-lg)}
 .hexwrap .hexname .wb{display:inline}
 .hexwrap .hexnode{height:36px;width:auto;white-space:nowrap;cursor:default}
 .hexwrap .hexnode[data-pos="top"]{left:360px;top:30px}
 .hexwrap .hexnode[data-pos="ur"]{left:590px;top:140px}
 .hexwrap .hexnode[data-pos="lr"]{left:590px;top:260px}
 .hexwrap .hexnode[data-pos="bot"]{left:360px;top:370px}
 .hexwrap .hexnode[data-pos="ll"]{left:130px;top:260px}
 .hexwrap .hexnode[data-pos="ul"]{left:130px;top:140px}
 .hexwrap .hexslot{position:static;border-top:0;margin:0;padding:0;height:auto;overflow:visible}
 .hexwrap .hexline{position:absolute;width:200px;transform:translateX(-50%)}
 .hexwrap .hexline[data-pos="top"]{left:360px;top:54px}
 .hexwrap .hexline[data-pos="ur"]{left:590px;top:164px}
 .hexwrap .hexline[data-pos="lr"]{left:590px;top:284px}
 .hexwrap .hexline[data-pos="bot"]{left:360px;top:394px}
 .hexwrap .hexline[data-pos="ul"]{left:130px;top:164px}
 .hexwrap .hexline[data-pos="ll"]{left:130px;top:284px}
 /* State-aware, deliberately: a plain .hexline[data-pos] rule outranks the
    two-state filter in the shared part and shows both wordings at once. */
 .hexwrap[data-st="off"] .hexline[data-pos][data-st="off"],
 .hexwrap[data-st="on"] .hexline[data-pos][data-st="on"]{display:block}
 .hexwrap .hexswitch{display:none}
 .hexwrap .hexswitch.mid{display:flex;position:absolute;left:50%;top:200px;
  transform:translate(-50%,-50%);margin:0}
 .hexwrap .hexrule{display:block;width:64px;height:1px;background:var(--divider);margin:32px auto 0}
 .hexwrap .hexcap{max-width:none;margin:31px auto 0;height:calc(1.55 * var(--text-xs))}
}
@media (prefers-reduced-motion:reduce){
 .hexwrap .hexpanel,.hexwrap .hexnode,.hexwrap .hexname,.hexwrap .hexsw,
 .hexwrap .hexsw::before{transition:none}
}


/* CLEARED-NOTE-V1, 25 Aug 2026. The quiet note on a welcome screen telling a
   visitor their entries were cleared. Neutral grey, never the module tint, so
   it reads as information rather than as part of the tool, with the same
   12-pixel clock the welcome meta line uses.
   Placement is option A of mockup v1, chosen by the owner: above 960px the
   note takes the top of the right column and the title keeps the full height
   of the left one, so the heading never moves when a note appears. Below that
   width the welcome screen is one column and the note simply comes first.
   The wide-screen rules ask for a note before they apply, so a welcome screen
   without one lays out exactly as it did before this block existed. */
[data-shell="tool"] .cnote{display:flex;align-items:flex-start;gap:8px;margin-bottom:var(--space-4);padding:var(--space-3);background:var(--surface-offset);border-radius:var(--radius-md);font-size:var(--text-xs);line-height:1.5;color:var(--muted);max-width:70ch;text-wrap:pretty}
[data-shell="tool"] .cnote svg{width:12px;height:12px;flex:none;margin-top:3px;color:var(--faint)}
@media (min-width:960px){
  [data-shell="tool"] main[data-screen=welcome]:has(>.cnote){grid-template-rows:auto minmax(0,1fr)}
  [data-shell="tool"] main[data-screen=welcome]>.cnote{grid-column:2;grid-row:1;margin-bottom:var(--space-5)}
  [data-shell="tool"] main[data-screen=welcome]:has(>.cnote)>.title{grid-row:1 / span 2}
  [data-shell="tool"] main[data-screen=welcome]:has(>.cnote)>.wcol{grid-row:2}
}

/* CORE-STATES-V2, 26 Aug 2026. The panel toggles now follow the pill ladder. The cross
   on a sorted item carries a 24-pixel tap area, invisible at every width, and deliberately
   has no pointer colour: a cross explains itself. Every rule below sits behind a check for
   a pointer, so a phone sees none of it. */
@media (hover:hover){
/* unchosen: the tint. chosen: --primary-press, which darkens for blue and orange and lifts for yellow. */
.loopwrap .looptoggle button:not([aria-pressed="true"]):hover{background:var(--primary-tint)}
.loopwrap .looptoggle button[aria-pressed="true"]:hover{background:var(--primary-press);border-color:var(--primary-press)}
.hexwrap .hexsw:not([aria-pressed="true"]):hover{background:var(--primary-tint)}
.hexwrap .hexsw[aria-pressed="true"]:hover{border-color:var(--primary-press)}
.hexwrap .hexsw[aria-pressed="true"]:hover::before{background:var(--primary-press)}
}

/* CORE-RETIRE-V1, 26 Aug 2026. Eight names retired from the shared file, each one either a
   second name for a colour that already had one or a duplicate value: --primary-hover, the three
   --ink-cool variants, --state-fill, --state-wash, --accent-bg and --radius-xl. The patcher read
   every page, stylesheet and script under pathery/ first and refused if any of them still asked
   for one, so no colour a visitor sees changed. Use --primary-dark, --on-tint and its two
   variants, --primary-tint, --surface-2 and --radius-lg instead. */

/* SHELL-STEADY-V1: a tool page always keeps room for the scrollbar, so a long screen
   or an opening card cannot narrow the window and nudge the centred column
   sideways. One rule for every module page; site pages carry no module name and
   are untouched. Replaces the CA-only copy added earlier the same day. */
html:has(body[data-module]){scrollbar-gutter:stable}

/* HOMEWORK-SHEET-V1, 11 Sep 2026, revised the same day by HOMEWORK-V2. The sheet
   and every refusal share one panel: bottom of the screen on a phone, a 560-pixel
   centred card from 768px, no grip and no cross, because the one button is the only
   way past it. Two things learned on the first build: the gap above the points sits
   on the points, so a link sent without a note cannot take it away; and focus goes
   to the panel, which is exempt from the ring, exactly as the explainer panels do. */
body.hwopen{overflow:hidden}
.hwwrap{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.hwscrim{position:absolute;inset:0;background:var(--scrim)}
.hwpanel{position:relative;width:100%;background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -12px 40px rgba(42,39,33,.18);padding:var(--space-6) var(--space-5) var(--space-5);max-height:92dvh;overflow-y:auto;transform:translateY(14px);transition:transform var(--ease)}
.hwpanel:focus,.hwpanel:focus-visible{outline:none}
.hwwrap.open .hwpanel{transform:none}
.hwkick{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:500;color:var(--primary-text)}
.hwsaid{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);line-height:1.2;text-wrap:balance;margin:var(--space-2) 0 0}
.hwpts{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5)}
.hwpt{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-sm);line-height:1.55;color:var(--muted)}
.hwpt .hwi{width:15px;height:15px;flex:none;margin-top:3px;color:var(--primary-dark)}
.hwpt b{font-weight:500;color:var(--text)}
.hwhow{display:block;margin-top:4px;font-size:var(--text-xs);color:var(--faint)}
.hwmark{width:24px;height:24px;color:var(--primary-dark);flex:none}
.hwhead{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1.14;text-wrap:balance;margin:var(--space-3) 0}
.hwbody{font-size:var(--text-sm);line-height:1.55;color:var(--muted)}
.hwbody+.hwbody{margin-top:var(--space-3)}
.hwthen{font-size:var(--text-xs);line-height:1.55;color:var(--faint);margin-top:var(--space-4)}
.hwurl{font-size:var(--text-xs);color:var(--faint);overflow-wrap:anywhere;padding:var(--space-3);background:var(--surface-offset);border-radius:var(--radius-md);margin-top:var(--space-4);text-align:left}
.hwcta{margin-top:var(--space-5)}
.hwcta button,.hwbtn{width:100%;min-height:48px;border-radius:var(--radius-full);border:1px solid var(--primary);background:var(--primary);color:var(--on-primary);font-family:inherit;font-size:var(--text-sm);cursor:pointer}
.hwbtn{margin-top:var(--space-5)}
@media (hover:hover){.hwcta button:hover,.hwbtn:hover{background:var(--primary-press);border-color:var(--primary-press)}}
[data-module] .hwquiet{display:block;background:none;border:0;font:inherit;font-size:var(--text-xs);color:var(--faint);text-decoration:underline;cursor:pointer;padding:0;margin-top:var(--space-4)}
.hwpaste{margin-top:var(--space-4)}
.hwpaste input{width:100%;font-family:inherit;font-size:var(--text-sm);line-height:1.4;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;text-align:left;transition:border-color var(--ease)}
.hwpaste input::placeholder{color:var(--faint)}
.hwpaste input:focus{outline:none;box-shadow:none;border-color:var(--primary)}
.hwpaste .hwbtn{margin-top:var(--space-3)}
@media (min-width:768px){
 .hwwrap{align-items:center}
 .hwpanel{max-width:560px;border-radius:var(--radius-lg);padding:var(--space-8) var(--space-8) var(--space-6);text-align:center;transform:translateY(10px) scale(.99)}
 .hwwrap.open .hwpanel{transform:none}
 .hwsaid{font-size:var(--text-2xl)}
 .hwpts{text-align:left;max-width:420px;margin-left:auto;margin-right:auto}
 .hwmark{margin-left:auto;margin-right:auto}
 .hwcta button,.hwbtn{max-width:280px;margin-left:auto;margin-right:auto;display:block}
 .hwquiet{margin-left:auto;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){.hwpanel{transition:none}}

/* HOMEWORK-COLOUR-V1, 12 September 2026. Behavioural Activation and Managing Worries
   only. Three marks, three separate causes. The kicker asked for --primary-text, a name
   only the yellow theme defines, so on blue and orange it fell back to the inherited ink.
   The symbols asked for --primary-dark, the pressed shade, rather than the module colour.
   And the start button lost its fill on Behavioural Activation alone, because that module
   clears the background and border of every button on its page and that rule outranked the
   panel; the rule below outranks the reset in turn. Managing Worries has no such reset and
   needs no button rule. Values Card Sort is left exactly as it is: --primary-text is its
   own gold and the panel already reads correctly there. */
body[data-module="ba"] .hwkick,body[data-module="mw"] .hwkick{color:var(--primary)}
body[data-module="ba"] .hwpt .hwi,body[data-module="mw"] .hwpt .hwi,body[data-module="ba"] .hwmark,body[data-module="mw"] .hwmark{color:var(--primary)}
body[data-module="ba"] .hwcta button,body[data-module="ba"] .hwbtn{background:var(--primary);border:1px solid var(--primary);color:var(--on-primary);font-size:var(--text-sm)}
/* HOMEWORK-COLOUR-V2, 12 September 2026. Two faults in the line above, both caused by
   that line. Its fill outranked the shared pointer rule, so the button stopped changing
   colour under a pointer; the rule below is stated the same way and outranks it in turn.
   And the module clears every button back to the page text size, so the label stood at 16
   pixels where Managing Worries shows 14; the size is now restated where the fill is. */
@media (hover:hover){
body[data-module="ba"] .hwcta button:hover,body[data-module="ba"] .hwbtn:hover{background:var(--primary-press);border-color:var(--primary-press)}
}




/* ==================================================================
   HOMEWORK-CORE-V1, 16 Sep 2026. Returned homework, moved here from the Managing
   Worries stylesheet so that one copy serves both the client, who sees this as
   their last screen, and the therapist, who opens the same homework on the reading
   page. Drawing it is already one routine for both audiences; these are its rules.

   This is the DIARY shape: a calendar, counts, a day view and answer rows. It is
   what Managing Worries and Behavioural Activation both wear, because both spread
   work across dates. Values Card Sort is NOT this shape - one sort per area, a
   pyramid, no calendar and no counts - and gets rules of its own. Nothing below
   reaches an element a page does not draw, so a Values page uses none of it.

   Every rule asks for a page that says which exercise it is showing, which is the
   same weight the module scoping had, so no colour or size a client sees changed
   in the move. The colours come from whichever theme the page declares.

   The block comments below were written while these rules lived in the module
   file, and are kept as they were except where one sentence described a plan that
   this move replaced.
   ================================================================== */

/* ==================================================================
   HOMEWORK-DRAW-V1, 15 Sep 2026. The returned-homework screen in its diary
   shape, as Managing Worries and Behavioural Activation both wear it.
   Every class is prefixed rh-, so nothing here can collide
   with a class the module or the core already uses. Colours, spaces, radii and
   sizes are the theme's own tokens, so the orange theme dresses it without a
   single figure being invented. The therapist's reading page reads these
   very rules, so there is one copy of them and it cannot drift.
   ================================================================== */
[data-module] .rh{display:flex;flex-direction:column;gap:var(--space-4)}
[data-module] .rh-kicker{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:500;color:var(--primary);margin-bottom:-8px}
[data-module] .rh-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;line-height:1.25;text-wrap:balance}
[data-module] .rh-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--text-xs);color:var(--faint)}
[data-module] .rh-quote{padding:var(--space-3);background:var(--surface-offset);border-radius:var(--radius-md);font-size:var(--text-xs);line-height:1.5;color:var(--muted)}
[data-module] .rh-signin{padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-xs);line-height:1.5;color:var(--muted)}
[data-module] .rh-cut{padding:var(--space-3);border:1px solid var(--primary-soft);background:var(--primary-tint);border-radius:var(--radius-md);font-size:var(--text-xs);line-height:1.5;color:var(--on-tint)}
[data-module] .rh-counts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--text-xs);color:var(--muted)}
[data-module] .rh-ci{display:inline-flex;align-items:center;gap:5px}
[data-module] .rh-counts b{font-weight:500;font-size:var(--text-sm);color:var(--text);font-variant-numeric:tabular-nums}
[data-module] .rh-sw{width:11px;height:11px;border-radius:3px;flex:none;display:inline-block}
[data-module] .rh-solve{background:var(--primary)}
[data-module] .rh-hold{background:var(--primary-soft)}
[data-module] .rh-wtsym{flex:none;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary)}
[data-module] .rh-wtsym.rh-set{background:transparent;border:1px solid var(--primary)}
[data-module] .rh-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
[data-module] .rh-dow{font-size:var(--text-xs);color:var(--faint);text-align:center;font-weight:500}
[data-module] .rh-cell{position:relative;border:1px solid var(--divider);border-radius:var(--radius-sm);background:var(--surface);min-height:52px;padding:4px;cursor:pointer;font-family:inherit;text-align:left;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;transition:border-color var(--ease),background var(--ease)}
[data-module] .rh-cell.rh-void{background:transparent;border-color:transparent;cursor:default}
[data-module] .rh-cell.rh-sel{border-color:var(--primary);background:var(--primary-tint)}
[data-module] .rh-cell.rh-sel .rh-date{color:var(--on-tint)}
[data-module] .rh-date{display:block;font-size:var(--text-xs);color:var(--faint);font-variant-numeric:tabular-nums;line-height:1.2}
[data-module] .rh-dot{position:absolute;right:4px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--primary)}
[data-module] .rh-dot.rh-set{background:transparent;border:1px solid var(--primary)}
[data-module] .rh-bars{display:flex;flex-direction:column;gap:2px;margin-top:3px}
[data-module] .rh-bar{height:5px;border-radius:2px;background:var(--primary);display:block}
[data-module] .rh-bar.rh-hold{background:var(--primary-soft)}
[data-module] .rh-none{font-size:10px;color:var(--border);line-height:1}
@media (hover:hover){[data-module] .rh-cell:not(.rh-void):hover{border-color:var(--primary-soft)}}
[data-module] .rh-day{border-top:1px solid var(--divider);padding-top:var(--space-3)}
[data-module] .rh-dayhead{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.2}
[data-module] .rh-wt{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-2)}
[data-module] .rh-empty{font-size:var(--text-xs);color:var(--faint);font-style:italic;margin-top:var(--space-2)}
[data-module] .rh-open{font-size:var(--text-xs);color:var(--faint);font-style:italic;margin-top:2px}
[data-module] .rh-item{position:relative;padding:var(--space-3) 0;border-top:1px solid var(--divider)}
[data-module] .rh-item.rh-first{border-top:0;padding-top:var(--space-2)}
[data-module] .rh-top{display:flex;gap:8px;align-items:flex-start}
[data-module] .rh-name{flex:1;min-width:0;font-size:var(--text-sm);line-height:1.35;overflow-wrap:anywhere}
[data-module] .rh-state{flex:none;font-size:var(--text-xs);font-weight:500;padding-top:2px;text-align:right;white-space:nowrap}
[data-module] .rh-state.rh-solve{background:none;color:var(--primary-dark)}
[data-module] .rh-state.rh-hold{background:none;color:var(--muted)}
[data-module] .rh-row{position:relative;display:flex;gap:6px;margin-top:2px;align-items:baseline}
[data-module] .rh-val{flex:1;min-width:0;font-size:var(--text-xs);color:var(--muted);line-height:1.45}
[data-module] .rh-val.rh-na{font-style:italic;color:var(--faint)}
[data-module] .rh-em{white-space:nowrap}
[data-module] .rh-lab{flex:none;width:86px;font-family:inherit;font-size:var(--text-xs);color:var(--faint);background:none;border:0;padding:0;text-align:left;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:var(--primary-soft);transition:color var(--ease),text-decoration-color var(--ease)}
[data-module] .rh-lab:hover,[data-module] .rh-lab[aria-expanded="true"]{color:var(--primary-dark);text-decoration-color:var(--primary)}
[data-module] .rh-lab:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px}
[data-module] .rh-tip{position:absolute;left:0;top:calc(100% + 6px);z-index:5;max-width:270px;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);font-size:var(--text-xs);color:var(--muted);line-height:1.4}
[data-module] .hwpanel .rh-row-send{display:flex;gap:var(--space-2);align-items:center;margin-top:var(--space-4);text-align:left}
[data-module] .hwpanel .rh-row-send .u{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;font-size:var(--text-sm);line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-module] .hwpanel .rh-row-send button{flex:none;width:auto;margin-top:0;min-height:48px;padding:0 var(--space-5);border-radius:var(--radius-full);border:1px solid var(--primary);background:var(--primary);color:var(--on-primary);font-family:inherit;font-size:var(--text-sm);line-height:normal;cursor:pointer}
@media (hover:hover){[data-module] .hwpanel .rh-row-send button:hover{background:var(--primary-press);border-color:var(--primary-press)}}
[data-module] .rh-nav{display:flex;gap:var(--space-3)}
[data-module] .rh-btn{flex:1;min-height:48px;border-radius:var(--radius-full);border:1px solid var(--primary);background:var(--surface);color:var(--primary);font-family:inherit;font-size:var(--text-sm);cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
[data-module] .rh-btn.rh-send{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
/* MW-MARKCOL-V1, 17 Sep 2026. A marked button takes the same treatment as an unmarked
   one: the surface behind it, the module colour on its edge and in its words, and the
   tint under a pointer. The words and the tick are what say it is marked. The two rules
   that dressed the marked state differently are deleted rather than rewritten, because
   the button's own rest and pointer states already say exactly this. The rh-on class
   stays, because the script and the tick both read it. */
@media (hover:hover){
[data-module] .rh-btn:hover{background:var(--primary-tint)}
[data-module] .rh-btn.rh-send:hover{background:var(--primary-press);border-color:var(--primary-press);color:var(--on-primary)}
}
@media (min-width:521px){
[data-module] .rh-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;align-items:start}
[data-module] .rh-sticky{position:sticky;top:var(--space-4)}
[data-module] .rh-cell{min-height:62px}
[data-module] .rh-day{border-top:0;padding-top:0}
[data-module] .rh-kicker{margin-bottom:-14px;text-align:center}
[data-module] .rh-title{font-size:2rem;line-height:1.2;text-align:center}
[data-module] .rh-meta{justify-content:center}
[data-module] .rh-quote,[data-module] .rh-signin,[data-module] .rh-cut{max-width:66ch;margin-left:auto;margin-right:auto}
[data-module] .rh-counts{max-width:640px;margin-left:auto;margin-right:auto;justify-content:center}
[data-module] .rh-nav{justify-content:flex-end}
[data-module] .rh-btn{flex:0 0 auto;min-width:210px}
}


[data-module] .rh-hint{font-size:var(--text-sm);color:var(--faint);font-style:italic;line-height:1.5}
/* ==================================================================
   MW-SEND-V2, 16 Sep 2026. The forward mark on the send button takes its own size.
   Without one it inherited the button's line box and filled it, which is what a
   drawn mark does when nothing constrains it. The button also states here that it
   lays its label and its mark out in one centred row with an 8-pixel gap, so the
   two cannot drift apart on any width.
   ================================================================== */
[data-module] .rh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
[data-module] .rh-btn svg{width:14px;height:14px;flex:none}


/* ==================================================================
   MW-TIPHOVER-V1, 16 Sep 2026. The bubble that carries a label’s own question.
   It sits in every row now and this decides when it is seen: on a desktop while
   the pointer rests on the label, and at any width while the label is open by a
   tap. The pointer state lives here rather than in the script, because a script
   that redrew the row lost the moment the pointer left it. The bubble stays
   below the row, as the approved design requires at every width.
   ================================================================== */
[data-module] .rh-tip{display:none}
[data-module] .rh-lab[aria-expanded="true"] ~ .rh-tip{display:block}
@media (hover:hover){
[data-module] .rh-lab:hover ~ .rh-tip{display:block}
}



/* ==================================================================
   MW-DAYGAP-V1, 16 Sep 2026. The calendar and the day view sit inside one
   wrapper. That wrapper had no rules of its own below 521 pixels, so on a phone
   the hairline above the day view landed directly under the last row of day
   cards, with nothing between them. The wrapper now stacks its two children
   with the same 16-pixel gap the screen gives every other block, which is the
   figure the approved design gives them. Phone only: above 520 pixels the
   wrapper becomes two columns by a rule declared earlier in this file, and that
   rule is untouched.
   ================================================================== */
@media (max-width:520px){
[data-module] .rh-two{display:flex;flex-direction:column;gap:var(--space-4)}
}

/* ==================================================================
   HW-STATES-V1, 18 Sep 2026. Two more outcome states, and the days figure.

   Managing Worries shows two states, solvable and unsolvable, and the swatch,
   the bar and the pinned wording above already carry both. Behavioural
   Activation shows four: done, partly done, not done, and not reviewed. The two
   it adds are the white box with a border and the offset grey, exactly as the
   approved design draws them, from tokens that already exist.

   The days figure sits at the right of the counts row on a phone. From 521px up
   the whole row is centred by a rule declared earlier in this file, so the figure
   comes back in line rather than being pushed away from the group.
   ================================================================== */
[data-module] .rh-sw.rh-not{background:var(--surface);border:1px solid var(--border)}
[data-module] .rh-sw.rh-unrev{background:var(--surface-offset)}
[data-module] .rh-bar.rh-not{background:var(--surface);border:1px solid var(--border)}
[data-module] .rh-bar.rh-unrev{background:var(--surface-offset)}
[data-module] .rh-state.rh-not{background:none;color:var(--faint)}
[data-module] .rh-state.rh-unrev{background:none;color:var(--faint);font-style:italic}
[data-module] .rh-counts .rh-days{margin-left:auto;color:var(--faint)}
@media (min-width:521px){
[data-module] .rh-counts .rh-days{margin-left:0}
}

/* ==================================================================
   HW-PLANROW-V1, 18 Sep 2026. The plain fixed column of the plan shape.

   Managing Worries' 86-pixel column is a button carrying a dotted underline,
   because tapping a label there opens the question behind it. Behavioural
   Activation's block time is not a control at all, and its three labels are
   contractions of questions the client already read, so they open nothing. This
   is the same column with none of that: plain, faint, figures lining up.

   62 px is MEASURED, not chosen: the widest of Mood after, Help, Obstacle and a
   block time, in DM Sans at 12 px, judged against the 44-character worst case on
   a 390-pixel phone on 18 Sep 2026. Do not tidy it to 86 to match the other
   shape; that column holds longer words and carries an underline.

   Nothing about spacing is stated here. The 6 pixels beside a label and the 8
   beside a block time are already what the rules above give these rows, which is
   the same treatment Managing Worries wears.
   ================================================================== */
[data-module] .rh-fix{flex:none;width:62px;font-size:var(--text-xs);color:var(--faint);font-variant-numeric:tabular-nums;line-height:1.45}
[data-module] .rh-top .rh-fix{padding-top:2px}

/* ==================================================================
   HW-STRIP-V1, 18 Sep 2026. The standing strip, moved here from the Managing Worries
   stylesheet, and the form it takes on an ending screen.

   Moved because Behavioural Activation shows the same strip, and two copies of one
   component in two module files is the drift this shared block exists to prevent. The
   declarations are unchanged in the move, so nothing a client sees changed with it.

   The strip sits under the header on every screen of the exercise, for a client who
   arrived through a therapist link and for nobody else. The whole strip is the target,
   so its words carry no underline of their own. It never appears on the screen it
   leads to.

   THE LOUD FORM, chosen 18 Sep 2026 against four alternatives. On the closing screen
   the quiet grey bar reads as a status line and gets skipped, so there it takes the
   module tint, a bold lead over a small grey line, and a chevron. It states only its
   two vertical paddings, never the shorthand, so the desktop band edge above still
   holds. Its pointer state deepens to the soft shade rather than going grey, because a
   tinted thing cannot darken towards white.

   Rejected: a solid module-colour bar, which competes with the closing words; and
   opening the strip out into a block in the body, which was stronger than the closing
   verse it sits beside. The footer button was deliberately left alone in every option:
   it is the action that closes the 24-hour loop.
   ================================================================== */
[data-module] .rh-strip{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;padding:9px var(--space-5);background:var(--surface-2);border:0;border-bottom:1px solid var(--divider);font-family:inherit;font-size:var(--text-xs);line-height:1.45;color:var(--muted);cursor:pointer;transition:background var(--ease),color var(--ease)}
[data-module] .rh-strip svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--primary)}
[data-module] .rh-strip:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
@media (hover:hover){[data-module] .rh-strip:hover{background:var(--surface-offset);color:var(--text)}}
@media (min-width:521px){
[data-module] .rh-strip{padding-left:max(40px,calc((100% - 1000px) / 2));padding-right:max(40px,calc((100% - 1000px) / 2))}
}
[data-module] .rh-strip.rh-loud{padding-top:12px;padding-bottom:12px;background:var(--primary-tint);color:var(--on-tint);border-bottom-color:var(--primary-soft)}
[data-module] .rh-strip.rh-loud .rh-lines{display:flex;flex-direction:column;gap:2px}
[data-module] .rh-strip.rh-loud .rh-lead{font-size:var(--text-sm);font-weight:500;color:var(--on-tint);line-height:1.35}
[data-module] .rh-strip.rh-loud .rh-sub{font-size:var(--text-xs);color:var(--muted);line-height:1.45}
[data-module] .rh-strip.rh-loud .rh-chev{margin-left:auto;margin-top:2px;flex:none;color:var(--primary-dark)}
@media (hover:hover){[data-module] .rh-strip.rh-loud:hover{background:var(--primary-soft);color:var(--on-tint)}}

/* SITE-SIGNIN-V1, 22 Sep 2026. The sign-in panel’s appearance, moved here from portal.html.
   It was written there last night while the panel was only used by the portal. The therapist
   page of 1 October opens the same panel, and a page without these rules drops it unstyled at
   the foot of the document, which is what Will saw on the preview this afternoon. The rules are
   unchanged by the move; only the first comment is rewritten, because it said they were
   temporary. They are not copied: portal.html loses them in the same push. */
/* PORTAL-SIGNIN-V1, 21 Sep 2026. The sign-in panel, drawn by pathery-signin.js. Its
   geometry is the QR panel above, which took it from the module sheets: a sheet at the
   foot of a phone, centred and 420 wide from 768px, one cross at the top right. These
   rules live here, in the shared stylesheet, because three pages draw this panel: the portal,
   the therapist page and, in a later round, the returned-homework screens. */
[data-module] .sg-pop[hidden]{display:none}
[data-module] .sg-pop{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
[data-module] .sg-scrim{position:absolute;inset:0;background:rgba(42,39,33,.42)}
[data-module] .sg-panel{position:relative;width:100%;background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -12px 40px rgba(42,39,33,.18);padding:var(--space-6) var(--space-5) var(--space-5);max-height:86dvh;overflow-y:auto;display:grid;gap:12px;transform:translateY(14px);transition:transform var(--ease)}
[data-module] .sg-pop.open .sg-panel{transform:none}
[data-module] .sg-x{position:absolute;right:14px;top:12px;font:inherit;font-size:1.05rem;line-height:1;color:var(--faint);background:none;border:0;padding:8px;cursor:pointer;transition:color var(--ease)}
@media (hover:hover){
[data-module] .sg-x:hover{color:var(--text)}
}
/* PORTAL-SIGNIN-V3s, 22 Sep 2026. Three pieces of the homework panel, and no more: its
   heading, its padding, and its alignment left on a phone and centred from 768px. The kicker,
   the field, the button, the fine lines, the code box, the cross, the scrim and the sheet
   geometry stay exactly as they were. Chosen by Will from the final mockup of 22 Sep. */
[data-module] .sg-panel h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1.14;text-wrap:balance;margin:0}
[data-module] .sg-panel .eyebrow{margin:0 0 2px}
[data-module] .sg-panel p{margin:0}
[data-module] .sg-code{font-variant-numeric:tabular-nums;letter-spacing:.35em;text-align:center}
/* PORTAL-SIGNIN-V2, 21 Sep 2026. Three corrections Will asked for after seeing V1, and one
   trap caught while making them. The links inside the panel take the treatment the thank-you
   line on the therapist page uses: page ink, a divider-coloured underline, and the underline
   going to the ink on hover. The panel is appended to the body, so it sits outside the .doc
   rule that styles the LinkedIn link, and without this it fell back to the browser blue.
   The form inside the panel is one column, so the field is full width and the button sits
   under it whatever the button says; the shared row wrapped only when the label was long,
   which is why Start free and Sign in did not match. Its bottom margin goes, so the line
   under the form sits the same distance away as the line above it. The trap: that shared row
   is laid out, and a laid-out box ignores being put away, exactly as the Manage subscription
   row did this afternoon. */
[data-module] .sg-panel a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--divider);transition:border-color var(--ease)}
[data-module] .sg-panel .sub{display:grid;gap:10px;margin-bottom:0}
[data-module] .sg-panel .sub[hidden]{display:none}
@media (hover:hover){
[data-module] .sg-panel a:hover{border-bottom-color:var(--text)}
}
@media (min-width:768px){
[data-module] .sg-pop{align-items:center}
[data-module] .sg-panel{max-width:420px;border-radius:var(--radius-lg);padding:var(--space-8) var(--space-8) var(--space-6);text-align:center;transform:translateY(10px) scale(.99)}
[data-module] .sg-pop.open .sg-panel{transform:none}
}
@media (prefers-reduced-motion:reduce){
[data-module] .sg-panel{transition:none}
}

/* SIGNIN-LINK-V1, 22 Sep 2026. The words Sign in inside the signed-out box, dressed like the
   welcome screen's meta link: weight 500, module colour, no underline. Managing Worries
   and Behavioural Activation take --primary and darken to --primary-dark; Values Card
   Sort takes --primary-dark and darkens to --primary-darker, the third step only its own
   theme defines. The invisible padding mirrors .cbt::before, so the tap area is larger
   than the two words. Chosen by Will, 22 Sep 2026. */
[data-module] .rh-signin .rh-in{position:relative;font:inherit;font-weight:500;color:var(--primary);background:none;border:0;padding:0;cursor:pointer;text-decoration:none;transition:color var(--ease)}
[data-module] .rh-signin .rh-in::before{content:"";position:absolute;inset:-11px -6px}
body[data-module="vc"] .rh-signin .rh-in{color:var(--primary-dark)}
[data-module] .rh-signin .rh-in:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:3px}
@media (hover:hover){
[data-module] .rh-signin .rh-in:hover{color:var(--primary-dark)}
body[data-module="vc"] .rh-signin .rh-in:hover{color:var(--primary-darker)}
}

/* SIGNIN-DRESS-V1, 22 Sep 2026. The four generic site classes the sign-in panel leans on, given
   rules on an exercise page: the hidden label, the kicker, the quiet lines with their
   links, and the form with its field and button. Sizes are the deployed site ones; only
   the colours are the page theme. A press goes to --primary-press, which lifts on Values.
   Values links take --primary-dark, because its gold is reserved for low-stakes labels.
   Site pages are excluded throughout, so the portal and the therapist page are untouched. */
[data-module]:not([data-module="site"]) .sg-panel .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-module]:not([data-module="site"]) .sg-panel .eyebrow{font-family:var(--font-body);font-size:.6875rem;text-transform:uppercase;letter-spacing:.11em;font-weight:500;color:var(--primary)}
[data-module]:not([data-module="site"]) .sg-panel .fine{font-family:var(--font-body);font-size:var(--text-xs);line-height:1.5;color:var(--faint)}
[data-module]:not([data-module="site"]) .sg-panel a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--primary-soft);transition:color var(--ease),border-color var(--ease)}
[data-module]:not([data-module="site"]) .sg-panel .sub input{width:100%;min-width:0;font-family:inherit;font-size:.9375rem;color:var(--text);background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius-md);padding:12px 14px;transition:border-color var(--ease)}
[data-module]:not([data-module="site"]) .sg-panel .sub input::placeholder{color:var(--faint)}
[data-module]:not([data-module="site"]) .sg-panel .sub input:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-sm)}
[data-module]:not([data-module="site"]) .sg-panel .sub input:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--shadow-sm)}
[data-module]:not([data-module="site"]) .sg-panel .sub button{font-family:inherit;font-size:.9375rem;font-weight:500;color:var(--on-primary);background:var(--primary);border:1px solid var(--primary);border-radius:var(--radius-md);padding:12px 20px;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
[data-module]:not([data-module="site"]) .sg-panel .sub button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* SIGNIN-VCWIN-V1: a :not() carries the weight of its argument, so these three need body and the
   same exclusion to outrank the shared rules above. */
body[data-module="vc"]:not([data-module="site"]) .sg-panel .eyebrow{color:var(--primary-text)}
body[data-module="vc"]:not([data-module="site"]) .sg-panel a{color:var(--primary-text)}
@media (hover:hover){
[data-module]:not([data-module="site"]) .sg-panel .sub button:hover{background:var(--primary-press);border-color:var(--primary-press)}
[data-module]:not([data-module="site"]) .sg-panel a:hover{color:var(--primary-dark);border-bottom-color:var(--primary-dark)}
/* SIGNIN-VCHOVER-V1: --primary-dark equals --primary-text in this theme, so the hover moves to
   the one token that differs. Chosen by Will, 22 Sep 2026. */
body[data-module="vc"]:not([data-module="site"]) .sg-panel a:hover{color:var(--primary-darker);border-bottom-color:var(--primary-darker)}
}

/* SIGNIN-EDGE-V1, 22 Sep 2026. A focused field in the sign-in panel marks itself with its edge,
   so the ring the site stylesheet draws is switched off inside the panel and nowhere else.
   Chosen by Will, 22 Sep, for every sign-in panel. The button keeps its ring, because a
   filled button has no edge of its own to change. */
[data-module="site"] .sg-panel .sub input:focus-visible{outline:none;border-color:var(--muted);box-shadow:var(--shadow-sm)}

/* SIGNIN-MOBILE-V1, 23 Sep 2026. An autofilled field in the sign-in panel fills with the neutral
   grey --surface-offset rather than the browser’s blue, with the page ink and caret kept.
   SIGNIN-TIDY-V1, 23 Sep 2026: this works in Safari and in desktop Chrome. Chrome on iPhone runs
   WebKit with Google’s own autofill above it, so its tint never comes from this state and
   no stylesheet reaches it. Will accepted that on 23 Sep rather than give up autofill.
   The long transition is the trick the site stylesheet already uses to hold the fill.
   Every panel, on an exercise page and on a site page alike. Chosen by Will, 23 Sep 2026. */
/* SIGNIN-FILL2-V1, 23 Sep 2026: stated stronger, because Chrome on iOS overrode the first form.
   !important, the :active state, and background-clip on the text so a tint has nowhere to
   sit. The long transition stays as the older fallback. Grey, ink and caret unchanged. */
[data-module] .sg-panel .sub input:-webkit-autofill,
[data-module] .sg-panel .sub input:-webkit-autofill:hover,
[data-module] .sg-panel .sub input:-webkit-autofill:focus,
[data-module] .sg-panel .sub input:-webkit-autofill:active{-webkit-text-fill-color:var(--text)!important;caret-color:var(--text)!important;-webkit-box-shadow:0 0 0 100px var(--surface-offset) inset!important;box-shadow:0 0 0 100px var(--surface-offset) inset!important;transition:background-color 9999s ease-out 0s}
[data-module] .sg-panel .sub input:autofill{-webkit-text-fill-color:var(--text)!important;caret-color:var(--text)!important;box-shadow:0 0 0 100px var(--surface-offset) inset!important}