/* 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)}}
.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}}