/* Worry Off-Ramp — digital workbook prototype
   Chapter 1 · visual design revision                     */

:root, [data-theme="light"] {
  --text-xs: clamp(.75rem, .72rem + .12vw, .8125rem);
  --text-sm: clamp(.875rem, .85rem + .15vw, .9375rem);
  --text-base: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.35rem + 1vw, 2.2rem);
  --text-2xl: clamp(2.1rem, 1.6rem + 2vw, 3.1rem);
  --text-3xl: clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem);

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem;
  --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; --s20:5rem;

  --paper:#f8f5ef;
  --paper-tint:#f2ede4;
  --surface:#fffdf9;
  --surface-2:#faf7f1;
  --border:#ddd6c8;
  --rule:#e7e1d5;

  --ink:#20201d;
  --ink-soft:#57544c;
  --ink-faint:#8b877d;
  --ink-invert:#fbf9f4;

  --pine:#28564b;
  --pine-deep:#1c3f37;
  --pine-wash:#e2ebe6;
  --clay:#9a4a26;
  --clay-wash:#f3e5db;
  --gold:#b0801f;

  --r-sm:.375rem; --r-md:.625rem; --r-lg:1rem; --r-xl:1.5rem; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(32,32,29,.05);
  --shadow-md:0 10px 30px -12px rgba(32,32,29,.16);

  --font-display:'Boska','Iowan Old Style',Georgia,serif;
  --font-body:'Switzer','Inter',system-ui,sans-serif;

  --measure:66ch;
  --wide:1180px;
}

[data-theme="dark"] {
  --paper:#16181a;
  --paper-tint:#1b1e20;
  --surface:#1d2022;
  --surface-2:#212528;
  --border:#343a3d;
  --rule:#2c3134;
  --ink:#e6e3dc;
  --ink-soft:#b0aca3;
  --ink-faint:#867f75;
  --ink-invert:#16181a;
  --pine:#79b6a3;
  --pine-deep:#a3cfc0;
  --pine-wash:#233530;
  --clay:#d3906c;
  --clay-wash:#33261f;
  --gold:#d8b25f;
  --shadow-md:0 10px 30px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.72;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--pine);text-underline-offset:3px;text-decoration-thickness:1px}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{margin:0;line-height:1.14;font-weight:500}
h1,h2{font-family:var(--font-display);letter-spacing:-.015em}
h1{font-size:var(--text-3xl)}
h2{font-size:var(--text-xl)}
h3{font-family:var(--font-body);font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em;line-height:1.28}
h4{font-family:var(--font-body);font-size:var(--text-base);font-weight:600}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.prose > p, .prose > ul, .prose > ol{max-width:var(--measure)}
.prose p + p{margin-top:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pine);
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55}
.eyebrow.plain::before{display:none}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:var(--s4);top:var(--s4);z-index:200;background:var(--surface);
  padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:var(--r-md)
}

/* ─── header ─────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rule);
}
.header-inner{
  max-width:var(--wide);margin:0 auto;padding:var(--s3) var(--s6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:inherit}
.brand svg{width:34px;height:34px;color:var(--pine);flex:none}
.brand-text small{
  display:block;font-size:var(--text-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)
}
.brand-text strong{display:block;font-size:var(--text-sm);font-weight:600;letter-spacing:-.01em}
.header-actions{display:flex;align-items:center;gap:var(--s2)}
.progress-track{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.progress-bar{height:100%;width:0;background:var(--pine);transition:width .12s linear}

.chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:.5rem .85rem;border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--surface);font-size:var(--text-sm);font-weight:500;
  text-decoration:none;cursor:pointer;transition:.18s ease;
}
.chip:hover{border-color:var(--pine);color:var(--pine)}
.chip.icon-only{padding:.5rem;width:38px;height:38px;justify-content:center}
.chip svg{width:16px;height:16px}

/* ─── hero ───────────────────────────────────────────── */
/* the book's own title, set before Chapter 1 */
.masthead{
  max-width:var(--wide);margin:0 auto;
  padding:clamp(var(--s8),5vw,var(--s12)) var(--s6) 0;
}
.masthead-title{
  margin:0;max-width:32ch;
  font-family:var(--font-display);font-weight:500;
  font-size:var(--text-xl);line-height:1.18;letter-spacing:-.02em;
  color:var(--ink-soft);text-wrap:balance;
}
.masthead-title b{
  display:block;font-weight:500;color:var(--pine);
  font-size:1.24em;line-height:1.1;margin-bottom:.12em;
}
.hero{
  max-width:var(--wide);margin:0 auto;
  padding:clamp(var(--s10),7vw,var(--s20)) var(--s6) var(--s12);
}
.masthead + .hero{padding-top:clamp(var(--s6),3.5vw,var(--s10))}
.part-rail{
  display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  padding-bottom:var(--s5);border-bottom:1px solid var(--rule);margin-bottom:var(--s8);
}
.part-rail .part-no{
  font-family:var(--font-display);font-size:var(--text-lg);color:var(--pine)
}
.part-rail .part-name{
  font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  max-width:46ch;line-height:1.6
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(var(--s8),5vw,var(--s16));align-items:end}
.chapter-mark{
  display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5);
  font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)
}
.chapter-mark b{
  font-family:var(--font-display);font-size:var(--text-2xl);font-weight:500;
  letter-spacing:-.02em;color:var(--pine);line-height:1
}
h1 .soft{display:block;color:var(--ink-soft);font-size:.62em;margin-top:.25em;letter-spacing:-.01em}
.hero-lede{
  margin-top:var(--s6);font-size:var(--text-lg);line-height:1.55;
  color:var(--ink-soft);max-width:42ch
}
/* public edition: hero without the "In this edition" panel */
.hero-grid.solo{grid-template-columns:minmax(0,1fr);align-items:start}
.hero-grid.solo .hero-lede{max-width:52ch}
.hero-lede.book-subtitle{
  font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.3;
  color:var(--ink-soft);max-width:34ch;margin-top:var(--s5)
}
.hero-side{align-self:end}
.hero-meta-head{margin:0 0 var(--s5);color:var(--ink-faint)}
.hero-meta{display:grid;gap:var(--s5);margin:0}
.meta-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--rule)
}
.meta-row:last-child{border-bottom:0}
.meta-row dt{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.meta-row dd{margin:0;font-size:var(--text-base);font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:.8rem 1.35rem;border-radius:var(--r-full);border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:var(--text-sm);font-weight:600;
  text-decoration:none;cursor:pointer;transition:.18s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn-primary{background:var(--pine);color:var(--ink-invert);border-color:transparent}
.btn-primary:hover{background:var(--pine-deep)}
.btn svg{width:16px;height:16px}

/* ─── layout ─────────────────────────────────────────── */
.shell{
  max-width:var(--wide);margin:0 auto;padding:0 var(--s6) var(--s20);
  display:grid;grid-template-columns:212px minmax(0,1fr);gap:clamp(var(--s8),4vw,var(--s12));
  align-items:start;
}
.rail{position:sticky;top:88px;display:grid;gap:var(--s8)}
.rail h4{
  font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:var(--s4)
}
.rail nav{display:grid;gap:2px;border-left:1px solid var(--rule)}
.rail nav a{
  display:block;padding:.4rem var(--s4);margin-left:-1px;
  border-left:2px solid transparent;color:var(--ink-soft);
  font-size:var(--text-sm);line-height:1.45;text-decoration:none;transition:.18s ease
}
.rail nav a:hover{color:var(--ink)}
.rail nav a.active{border-left-color:var(--pine);color:var(--pine);font-weight:600}
.rail-note{
  font-size:var(--text-xs);line-height:1.6;color:var(--ink-faint);
  padding-top:var(--s5);border-top:1px solid var(--rule)
}

.chapter{display:grid;gap:clamp(var(--s12),6vw,var(--s20))}
section[id]{scroll-margin-top:96px}
/* Chapter 5 carries manuscript sub-subheadings inside a section, so an h3 that
   is a direct child of a section needs its own rhythm */
.chapter section>h3{margin:0 0 var(--s5);max-width:var(--measure)}
.chapter section>*+h3{margin-top:var(--s10)}

.sec-head{margin-bottom:var(--s8)}
.sec-head .eyebrow{margin-bottom:var(--s4)}
.sec-head h2{max-width:26ch}
.sec-head .kicker{margin-top:var(--s5);color:var(--ink-soft);max-width:var(--measure)}
.rule-heavy{height:1px;background:var(--ink);opacity:.12;margin-bottom:var(--s6)}

/* ─── glossary ───────────────────────────────────────── */
.glossary-tools{
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  margin-bottom:var(--s8);padding:var(--s3);border:1px solid var(--border);
  border-radius:var(--r-full);background:var(--surface)
}
.search-wrap{display:flex;align-items:center;gap:var(--s3);flex:1 1 240px;padding-left:var(--s4)}
.search-wrap svg{width:16px;height:16px;color:var(--ink-faint);flex:none}
#termSearch{border:0;background:transparent;width:100%;padding:.35rem 0}
#termSearch:focus{outline:none}
.term-count{font-size:var(--text-xs);color:var(--ink-faint);padding-right:var(--s4);white-space:nowrap}
.glossary{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden
}
.term{background:var(--surface);padding:var(--s6);display:grid;gap:var(--s3);align-content:start}
.term dt{
  font-family:var(--font-body);font-weight:600;font-size:var(--text-base);
  letter-spacing:-.01em;color:var(--pine);line-height:1.35
}
.term dt .abbr{
  display:inline-block;margin-left:.4em;padding:.1em .5em;border-radius:var(--r-sm);
  background:var(--pine-wash);color:var(--pine);font-size:var(--text-xs);
  font-weight:600;letter-spacing:.04em;vertical-align:.12em
}
.term dd{margin:0;font-size:var(--text-sm);line-height:1.68;color:var(--ink-soft)}
.term em{font-style:italic;color:var(--ink)}
.empty-state{
  grid-column:1/-1;background:var(--surface);padding:var(--s10);text-align:center;
  color:var(--ink-faint);font-size:var(--text-sm)
}

/* ─── figures ────────────────────────────────────────── */
figure{margin:var(--s10) 0}
.figure-frame{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(var(--s5),3vw,var(--s8));box-shadow:var(--shadow-sm)
}
figcaption{
  margin-top:var(--s4);font-size:var(--text-xs);line-height:1.65;color:var(--ink-faint);
  max-width:78ch
}
figcaption b{color:var(--ink-soft);font-weight:600}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0
}

.placeholder-tag{
  display:inline-flex;align-items:center;gap:var(--s2);margin-bottom:var(--s5);
  padding:.3rem .7rem;border:1px dashed var(--border);border-radius:var(--r-full);
  font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)
}

/* ─── reproduced manuscript figures ──────────────────── */
/* Line art scanned from the book. It is black on white, so it sits on its own
   white plate in both themes rather than being inverted or tinted. The images
   are only about 600px wide, so max-width is pinned to their native size —
   never upscaled. */
.plate{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s5);display:flex;justify-content:center
}
.plate img{display:block;width:100%;max-width:598px;height:auto}
#fig-stress-log .plate img{max-width:595px}
/* the GOFAR form came from the author as vector art, so unlike the screenshots
   it can scale to the column and stay sharp on a retina screen and in print */
#fig-gofar-form .plate img{max-width:720px}
/* Below about 640px the art would shrink to roughly half size and its
   typography stops being legible, so the plate pans sideways at native size
   instead. The text transcription beneath it is the reflowing version. */
@media (max-width:640px){
  .plate{padding:var(--s3);overflow-x:auto;justify-content:flex-start}
  .plate img{width:auto;max-width:none}
  #fig-stress-log .plate img{max-width:none}
  /* pan at a legible width rather than at the file's own 1800px */
  #fig-gofar-form .plate img{width:700px;max-width:none}
}
.plate:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
@media print{
  .plate{border:1px solid #999;padding:6pt;break-inside:avoid}
  .plate img{max-width:100%}
}

/* ─── avoidance examples grid (Ch. 2) ────────────────── */
.avoid-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden;margin:var(--s8) 0 0
}
.avoid{
  background:var(--surface);padding:var(--s6);display:grid;gap:var(--s2);align-content:start;
  border-left:2px solid transparent;transition:border-color .18s ease
}
.avoid:hover{border-left-color:var(--clay)}
.avoid dt{
  font-weight:600;font-size:var(--text-sm);letter-spacing:-.005em;color:var(--ink);
  text-wrap:balance
}
.avoid dd{margin:0;font-size:var(--text-sm);line-height:1.62;color:var(--ink-soft)}

/* ─── chapter-to-chapter navigation ──────────────────── */
.chapter-jump{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s5);
  margin-top:var(--s16);padding-top:var(--s10);border-top:1px solid var(--rule)
}
.jump{
  display:grid;gap:var(--s2);align-content:start;padding:var(--s6);
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);
  text-decoration:none;color:inherit;transition:border-color .18s ease,background .18s ease
}
a.jump:hover{border-color:var(--pine);background:var(--pine-wash)}
.jump.next{text-align:right}
.jump-dir{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)
}
.jump.next .jump-dir{justify-content:flex-end}
.jump-dir svg{width:14px;height:14px}
.jump-no{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--pine)}
.jump-title{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.2;text-wrap:balance}
.jump.is-pending{opacity:.62;background:transparent;border-style:dashed}
.jump-flag{
  justify-self:end;margin-top:var(--s2);padding:.2rem .55rem;
  border:1px dashed var(--border);border-radius:var(--r-full);
  font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)
}

.pullquote{
  margin:var(--s12) 0;padding-left:clamp(var(--s5),3vw,var(--s8));
  border-left:2px solid var(--pine);
}
.pullquote p{
  font-family:var(--font-display);font-size:var(--text-lg);line-height:1.45;
  color:var(--ink);max-width:34ch
}
.pullquote cite{
  display:block;margin-top:var(--s4);font-style:normal;font-family:var(--font-body);
  font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)
}

/* SUD scale */
.sud{display:grid;gap:var(--s4)}
.sud-track{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;align-items:end}
.sud-step{
  border:0;padding:0;cursor:pointer;border-radius:var(--r-sm);
  height:56px;display:flex;align-items:flex-end;justify-content:center;
  font-size:var(--text-xs);font-weight:600;padding-bottom:6px;
  background:var(--pine-wash);color:var(--pine-deep);transition:.18s ease;
}
.sud-step:hover{transform:translateY(-2px)}
.sud-step[aria-pressed="true"]{background:var(--pine);color:var(--ink-invert)}
.sud-labels{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--ink-faint)}
.sud-readout{
  font-size:var(--text-sm);color:var(--ink-soft);min-height:1.7em;
  padding:var(--s3) var(--s4);background:var(--surface-2);border-radius:var(--r-md);
  border:1px solid var(--rule)
}

/* evidence strip */
.evidence{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden
}
.ev{background:var(--surface);padding:var(--s5);display:grid;gap:var(--s2);align-content:start}
.ev b{
  font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em;
  color:var(--pine);line-height:1.1;font-variant-numeric:tabular-nums
}
.ev span{font-size:var(--text-xs);line-height:1.6;color:var(--ink-soft)}

/* benefits list */
.benefits{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:b}
.benefits li{
  counter-increment:b;display:grid;grid-template-columns:auto 1fr;gap:var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--rule);max-width:var(--measure)
}
.benefits li:first-child{border-top:1px solid var(--rule)}
.benefits li::before{
  content:counter(b,decimal-leading-zero);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;color:var(--pine);
  padding-top:.55em;font-variant-numeric:tabular-nums
}
.benefits li span{color:var(--ink-soft)}

.callout{
  margin:var(--s10) 0;padding:clamp(var(--s5),3vw,var(--s8));
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);border-left:3px solid var(--clay)
}
.callout .eyebrow{color:var(--clay);margin-bottom:var(--s4)}
.callout p{color:var(--ink-soft);max-width:var(--measure)}
/* Part 4: the reference list and the closing signature. */
.ref-list{
  margin:var(--s8) 0 0;padding:0 0 0 2.75rem;max-width:74ch;
  display:grid;gap:var(--s5)
}
.ref-list li{
  font-size:var(--text-sm);line-height:1.75;color:var(--ink-soft);
  padding-left:var(--s2)
}
.ref-list li::marker{color:var(--pine);font-weight:700}
.ref-list a{word-break:break-word}
/* the eight entries added for this edition sit in the one numbered list with
   1–27, so each carries a quiet tag and a rule down its left edge */
.ref-list li.ref-new{
  border-left:2px solid var(--pine-wash);margin-left:calc(var(--s2) * -1);
  padding-left:var(--s4)
}
.ref-new .ref-tag{
  display:block;font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pine);font-weight:600;margin-bottom:var(--s1)
}
.added-index{
  margin:var(--s6) 0 0;padding:0;list-style:none;display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));max-width:74ch
}
.added-index a{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);
  align-items:baseline;font-size:var(--text-sm);color:var(--ink-soft);
  text-decoration:none;padding:var(--s2) var(--s3);
  border:1px solid var(--border);border-radius:var(--r-sm);
  transition:border-color .18s ease,color .18s ease
}
.added-index a:hover{border-color:var(--pine);color:var(--pine)}
.added-index b{color:var(--pine);font-variant-numeric:tabular-nums}
@media print{
  .added-index{display:none}
  .ref-list li.ref-new{border-left:1px solid #999}
  .ref-new .ref-tag{font-size:7pt;color:#444}
}
/* held-for-later note and any prose citation carry bare DOI URLs long enough to
   push past a phone viewport, so let them break mid-string */
.prose a[href^="http"]{word-break:break-word}
.signature{
  margin:var(--s8) 0 0;padding-top:var(--s5);border-top:1px solid var(--rule);
  max-width:var(--measure);font-family:var(--font-display);font-weight:500;
  font-size:var(--text-lg);color:var(--ink)
}

/* front matter: the copyright page's fine print, and the dedication */
.colophon{max-width:58ch;margin:0}
.colophon > * + *{margin-top:var(--s4)}
.colophon p{font-size:var(--text-sm);line-height:1.75;color:var(--ink-soft)}
.colophon .rights-line{
  font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;
  color:var(--ink)
}
.credits-lead{
  margin:0;max-width:58ch;font-size:var(--text-sm);line-height:1.75;
  color:var(--ink-soft)
}
.credits-first{
  margin:var(--s4) 0 var(--s3);font-family:var(--font-display);
  font-size:var(--text-lg);font-weight:500;color:var(--ink)
}
.credits-first b{font-weight:500}
.credits{margin:0;padding:0;list-style:none;max-width:52ch}
.credits li{
  padding:var(--s2) 0;border-top:1px solid var(--rule);
  font-size:var(--text-sm);line-height:1.5;color:var(--ink-soft)
}
.credits li:last-child{border-bottom:1px solid var(--rule)}
.credits-now{margin-top:var(--s3)}
.credits-prev{margin-top:var(--s8)}
.dedication{
  margin:0;max-width:52ch;padding-left:var(--s5);
  border-left:2px solid var(--pine-wash);
  font-family:var(--font-display);font-size:var(--text-lg);line-height:1.5;
  color:var(--ink)
}
@media (max-width:640px){
  .dedication{padding-left:var(--s4)}
}

.refs{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:var(--text-xs);line-height:1.7;color:var(--ink-faint)
}

/* ─── exercise ───────────────────────────────────────── */
.exercise{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);overflow:hidden
}
.exercise-head{
  padding:clamp(var(--s6),4vw,var(--s10));border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,var(--pine-wash),transparent)
}
.exercise-head h2{margin-top:var(--s4);max-width:24ch}
.exercise-head p{margin-top:var(--s5);color:var(--ink-soft);max-width:var(--measure)}
.step{padding:clamp(var(--s6),4vw,var(--s10));border-bottom:1px solid var(--rule)}
.step:last-child{border-bottom:0}
.step-label{
  display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);
  font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)
}
.step-label b{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--pine);color:var(--ink-invert);
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;letter-spacing:0
}
.step h3{margin-bottom:var(--s4)}
.step .prose{color:var(--ink-soft)}
.step .prose em{color:var(--ink)}

.options{display:grid;gap:var(--s3);margin:var(--s6) 0}
.option{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface-2);cursor:pointer;transition:.18s ease
}
.option:hover{border-color:var(--pine)}
.option input{margin:.4rem 0 0;accent-color:var(--pine)}
.option:has(input:checked){border-color:var(--pine);background:var(--pine-wash)}
.option b{display:block;font-size:var(--text-sm);font-weight:600}
.option small{display:block;margin-top:2px;font-size:var(--text-sm);color:var(--ink-soft)}

.field{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.step .prose + .field{margin-top:var(--s6)}
.field:last-child{margin-bottom:0}
.field label{font-size:var(--text-sm);font-weight:600}
.field .hint{font-size:var(--text-xs);color:var(--ink-faint);line-height:1.6}
input[type="text"],textarea{
  width:100%;padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--paper-tint);font-size:var(--text-base);line-height:1.6;transition:.18s ease
}
input[type="text"]{padding:var(--s3) var(--s4)}
textarea{min-height:130px;resize:vertical}
textarea.tall{min-height:240px}
input[type="text"]:focus,textarea:focus{background:var(--surface);border-color:var(--pine);outline:none}
::placeholder{color:var(--ink-faint);opacity:.8}

.timer-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  margin:var(--s6) 0;padding:var(--s5);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface-2)
}
.clock{
  font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--pine);min-width:4.2ch
}
.clock.done{color:var(--clay)}
.timer-msg{flex:1 1 200px;font-size:var(--text-sm);color:var(--ink-soft)}
.timer-ring{--pct:0;flex:none;width:52px;height:52px;position:relative}
.timer-ring svg{transform:rotate(-90deg)}
.timer-ring circle{fill:none;stroke-width:4}
.timer-ring .bg{stroke:var(--rule)}
.timer-ring .fg{stroke:var(--pine);stroke-linecap:round;transition:stroke-dashoffset .3s linear}

/* block, not flex: a flex container would make every inline element inside the
   sentence its own column, so any emphasis in a notice broke the layout */
.notice{
  display:block;position:relative;
  font-size:var(--text-xs);line-height:1.65;color:var(--ink-faint);
  padding:var(--s4);padding-left:calc(var(--s4) + 15px + var(--s3));
  background:var(--surface-2);border-radius:var(--r-md);border:1px solid var(--rule)
}
.notice svg{
  position:absolute;left:var(--s4);top:calc(var(--s4) + 2px);
  width:15px;height:15px;color:var(--ink-faint)
}

.bring-list{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s4)}
.bring-list li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  font-size:var(--text-base);color:var(--ink-soft);max-width:var(--measure)
}
.bring-list svg{width:18px;height:18px;color:var(--pine);flex:none;margin-top:.3em}

.closing{
  margin-top:var(--s12);padding:clamp(var(--s6),4vw,var(--s10));
  background:var(--pine);color:var(--ink-invert);border-radius:var(--r-xl)
}
.closing p{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-xl);line-height:1.4;max-width:38ch;
  color:var(--ink-invert)
}
.closing .eyebrow{color:color-mix(in srgb,var(--ink-invert) 78%,transparent);margin-bottom:var(--s4)}
.closing .eyebrow::before{background:currentColor}

/* ─── footer ─────────────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--rule);background:var(--paper-tint);
  padding:var(--s12) var(--s6)
}
.footer-inner{
  max-width:var(--wide);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s10)
}
.footer-inner h4{margin-bottom:var(--s4)}
.footer-inner p,.footer-inner li{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.7}
.footer-inner ul{margin:0;padding-left:1.1em}
.legal{
  max-width:var(--wide);margin:var(--s10) auto 0;padding-top:var(--s6);
  border-top:1px solid var(--rule);font-size:var(--text-xs);color:var(--ink-faint);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between
}

/* ─── responsive ─────────────────────────────────────── */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .hero-lede{max-width:none}
  .shell{grid-template-columns:1fr}
  .rail{position:relative;top:auto;padding-bottom:var(--s6);border-bottom:1px solid var(--rule)}
  .rail nav{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid;border-left:0}
  .rail nav a{border-left:0;border-bottom:2px solid transparent;padding:.4rem 0;margin-left:0}
  .rail nav a.active{border-left:0;border-bottom-color:var(--pine)}
  .rail-note{display:none}
  .footer-inner{grid-template-columns:1fr}
}
@media (max-width:640px){
  .header-inner,.hero,.shell,.site-footer{padding-left:var(--s5);padding-right:var(--s5)}
  .hide-sm{display:none}
  .glossary{grid-template-columns:1fr}
  .avoid-grid{grid-template-columns:1fr}
  /* diagrams keep legible label sizes and scroll sideways instead of shrinking */
  .shell,.rail,.chapter,.chapter section,.prose,figure{min-width:0}
  .figure-frame{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .figure-frame svg{min-width:520px}
  figure:has(.figure-frame svg) figcaption::before{
    content:"Swipe the diagram sideways to see all of it";display:block;
    margin-bottom:var(--s3);font-size:var(--text-xs);letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-faint)
  }
  .chapter-jump{grid-template-columns:1fr}
  .jump.next{text-align:left}
  .jump.next .jump-dir{justify-content:flex-start}
  .jump-flag{justify-self:start}
  .sud-track{grid-template-columns:repeat(5,1fr)}
  .evidence{grid-template-columns:repeat(2,1fr)}
  .hero-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* worksheet print controls */
.exercise-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  margin-top:var(--s5)
}
.exercise-actions .btn{padding:.62rem 1.05rem}
.btn-quiet{background:var(--pine-wash);border-color:transparent;color:var(--pine-deep)}
.btn-quiet:hover{background:var(--pine);color:var(--ink-invert)}
.exercise-actions .btn svg{width:16px;height:16px}
.exercise-actions-note{
  flex-basis:100%;font-size:var(--text-xs);color:var(--ink-faint);
  max-width:68ch;margin-top:calc(-1 * var(--s2))
}
.worksheet-slug{display:none}
.ws-lines{display:none}

/* ─── glossary cross-link ────────────────────────────── */
.gloss{
  color:inherit;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--pine);text-underline-offset:4px
}
.gloss:hover,.gloss:focus-visible{color:var(--pine);text-decoration-style:solid}

/* ─── case scenario block ────────────────────────────── */
.scenario{
  margin:var(--s10) 0;padding:clamp(var(--s5),3vw,var(--s8));
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);border-left:3px solid var(--clay);
  max-width:var(--measure)
}
.scenario .core{color:var(--ink);font-size:var(--text-base);margin-bottom:var(--s5)}
.scenario .core b{color:var(--clay);letter-spacing:.01em}
.scenario .scen-lead{font-size:var(--text-sm);color:var(--ink-soft);margin-bottom:var(--s4)}
.scenario ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s3)}
.scenario li{
  position:relative;padding-left:var(--s6);
  font-size:var(--text-sm);line-height:1.7;color:var(--ink-soft)
}
.scenario li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:1.5px;background:var(--clay);opacity:.75
}

/* ─── hierarchy ladder ──────────────────────────────── */
.ladder{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s3);counter-reset:none
}
.rung{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--s4);align-items:center;
  padding:var(--s4) var(--s5);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--rule)
}
.rung:nth-child(1){margin-right:0}
.rung:nth-child(2){background:color-mix(in srgb,var(--pine-wash) 34%,var(--surface))}
.rung:nth-child(3){background:color-mix(in srgb,var(--pine-wash) 62%,var(--surface))}
.rung:nth-child(4){background:var(--pine-wash);border-color:var(--pine)}
.rung-no{
  display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:var(--r-full);border:1px solid var(--pine);
  font-size:var(--text-xs);font-weight:700;color:var(--pine)
}
.rung:nth-child(4) .rung-no{background:var(--pine);color:var(--ink-invert);border-color:var(--pine)}
.rung-text{font-size:var(--text-sm);line-height:1.6;color:var(--ink)}
.rung-meter{display:flex;gap:3px;flex:none}
.rung-meter i{
  display:block;width:5px;height:16px;border-radius:1px;
  background:var(--rule)
}
.rung-meter i.on{background:var(--pine)}
.ladder-base{
  margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px dashed var(--rule);
  font-size:var(--text-xs);line-height:1.7;color:var(--ink-faint);max-width:60ch
}
@media (max-width:520px){
  .rung{grid-template-columns:auto minmax(0,1fr);row-gap:var(--s3)}
  .rung-meter{grid-column:2}
}

/* ─── negative-reinforcement beats (Fig 4.2) ─────────── */
.credit{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.credit li{
  position:relative;padding:var(--s5);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--rule)
}
.credit li:nth-child(2){background:color-mix(in srgb,var(--pine-wash) 45%,var(--surface))}
.credit li:nth-child(3){background:var(--pine-wash);border-color:var(--pine)}
.credit li::after{
  content:"";position:absolute;top:50%;right:calc(var(--s4) * -1);
  width:var(--s4);height:1px;background:var(--rule)
}
.credit li:last-child::after{display:none}
.credit .cf-no{
  display:grid;place-items:center;width:22px;height:22px;
  margin-bottom:var(--s3);border-radius:var(--r-full);
  border:1px solid var(--pine);font-size:var(--text-xs);
  font-weight:700;color:var(--pine)
}
.credit li:nth-child(3) .cf-no{background:var(--pine);color:var(--ink-invert)}
.credit b{display:block;font-size:var(--text-sm);line-height:1.45;color:var(--ink)}
.credit small{
  display:block;margin-top:var(--s2);
  font-size:var(--text-xs);line-height:1.7;color:var(--ink-soft)
}
.credit-base{
  margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px dashed var(--rule);
  font-size:var(--text-xs);line-height:1.7;color:var(--ink-faint);max-width:64ch
}
@media (max-width:760px){
  .credit{grid-template-columns:minmax(0,1fr)}
  .credit li::after{
    top:auto;right:auto;bottom:calc(var(--s4) * -1);left:var(--s5);
    width:1px;height:var(--s4)
  }
}

/* ─── numbered instructions and review list ──────────── */
.numbered,.look-for{
  margin:var(--s6) 0;padding:0;list-style:none;
  display:grid;gap:var(--s3);max-width:var(--measure);counter-reset:n
}
.numbered li,.look-for li{
  position:relative;padding-left:2.25rem;
  font-size:var(--text-sm);line-height:1.75;color:var(--ink-soft)
}
.numbered li{counter-increment:n}
.numbered li::before{
  content:counter(n);position:absolute;left:0;top:.06em;
  display:grid;place-items:center;width:22px;height:22px;
  border-radius:var(--r-full);border:1px solid var(--pine);
  font-size:var(--text-xs);font-weight:700;color:var(--pine)
}
.look-for li{padding-left:var(--s6)}
.look-for li::before{
  content:"";position:absolute;left:2px;top:.72em;
  width:10px;height:1.5px;background:var(--pine);opacity:.8
}
.look-for li b,.numbered li b{color:var(--ink)}

/* ─── worry log table ───────────────────────────────── */
.log-wrap{
  margin:var(--s6) 0 var(--s3);border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--surface);overflow:hidden
}
.log{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.log th{
  text-align:left;padding:var(--s4) var(--s5);
  background:var(--surface-2);border-bottom:1px solid var(--border);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap
}
.log th:nth-child(2),.log td:nth-child(2){width:8.5rem}
.log th:nth-child(3),.log td:nth-child(3){width:7.5rem}
.log td{
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule);
  line-height:1.6;color:var(--ink-soft);vertical-align:top
}
.log tbody tr:last-child td{border-bottom:0}
.log tr.blank td{height:2.9rem;padding-top:var(--s2);padding-bottom:var(--s2)}

/* typable cells — front-end only, nothing is stored or sent */
.log input.cell{
  width:100%;min-width:0;box-sizing:border-box;
  font:inherit;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);border-radius:0;
  padding:var(--s2) var(--s1);transition:border-color .15s,background-color .15s
}
.log input.cell:hover{border-bottom-color:var(--ink-faint)}
.log input.cell:focus{
  outline:none;border-bottom:2px solid var(--pine);
  background:var(--pine-wash);padding-bottom:calc(var(--s2) - 1px)
}
.log input.cell-num{max-width:4.5rem}
.log-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  margin:0 0 var(--s4)
}
.log-actions-note{font-size:var(--text-xs);color:var(--ink-faint)}
.btn-sm{padding:var(--s2) var(--s4);font-size:var(--text-xs)}
.log-note{margin:0 0 var(--s5);max-width:var(--measure)}
@media (max-width:620px){
  .log-wrap{border-radius:var(--r-md)}
  .log thead{display:none}
  .log,.log tbody,.log tr,.log td{display:block;width:auto}
  .log tr{padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule)}
  .log tbody tr:last-child{border-bottom:0}
  .log td{padding:0;border:0}
  .log td::before{
    content:attr(data-label);display:block;
    font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-faint);margin-top:var(--s3)
  }
  .log tr td:first-child::before{margin-top:0}
  .log tr.blank td{height:auto;padding:0}
  .log td:nth-child(2),.log td:nth-child(3){width:auto}
  .log input.cell,.log input.cell-num{max-width:none;padding:var(--s2) 0}
  .compare{min-width:0;font-size:var(--text-sm)}
  .compare thead{display:none}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare tbody tr{padding:var(--s5);border-bottom:1px solid var(--rule)}
  .compare tbody tr:last-child{border-bottom:0}
  .compare tbody th{width:auto;padding:0 0 var(--s2);border:0;font-size:var(--text-base)}
  .compare tbody td{padding:0 0 var(--s2);border:0}
  .compare tbody td::before{
    content:attr(data-label);display:block;
    font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:var(--s1)
  }
  .log.cols-4 th:nth-child(2),.log.cols-4 td:nth-child(2),
  .log.cols-4 th:nth-child(4),.log.cols-4 td:nth-child(4){width:auto}
  .log-actions{gap:var(--s2)}
}

/* ─── end-of-part panel ─────────────────────────────── */
.part-close{
  margin:var(--s16) 0 var(--s10);padding:clamp(var(--s6),3vw,var(--s10));
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface-2)
}
.part-close .pc-head{max-width:58ch;margin-bottom:var(--s8)}
.part-close h2{
  margin:var(--s3) 0 var(--s3);font-size:var(--text-xl);
  line-height:1.25;letter-spacing:-.01em
}
.part-close .pc-head p{
  margin:0;font-size:var(--text-sm);line-height:1.7;color:var(--ink-soft)
}
.pc-list{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)
}
.pc-list a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--s4);align-items:baseline;
  padding:var(--s4) var(--s5);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--rule);
  text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease
}
.pc-list a:hover,.pc-list a:focus-visible{
  border-color:var(--pine);transform:translateX(2px)
}
.pc-list b{
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:500;color:var(--pine);line-height:1
}
.pc-list span{font-size:var(--text-base);line-height:1.4;color:var(--ink)}
.pc-list em{
  font-style:normal;font-size:var(--text-xs);letter-spacing:.04em;
  color:var(--ink-faint);text-align:right;white-space:nowrap
}
.pc-list li[aria-current] a{
  background:var(--pine-wash);border-color:var(--pine)
}
.pc-list li.pc-next{margin-top:var(--s4)}
.pc-list li.pc-next a{
  background:transparent;border-style:dashed
}
.pc-list li.pc-next b{font-family:var(--font-body);font-size:var(--text-base)}
@media (max-width:620px){
  .pc-list a{grid-template-columns:auto minmax(0,1fr);row-gap:var(--s1)}
  .pc-list em{grid-column:2;text-align:left;white-space:normal}
}

/* ─── chapter 5: cluster navigation ─────────────────── */
.cluster-nav{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.cluster-nav a,.cluster-nav span.here{
  display:inline-flex;align-items:baseline;gap:var(--s2);
  padding:var(--s2) var(--s4);border-radius:var(--r-full);
  border:1px solid var(--rule);background:var(--surface);
  font-size:var(--text-xs);letter-spacing:.03em;line-height:1.4;
  text-decoration:none;color:var(--ink-soft);
  transition:border-color .18s ease,color .18s ease
}
.cluster-nav a:hover,.cluster-nav a:focus-visible{border-color:var(--pine);color:var(--pine)}
.cluster-nav span.here{background:var(--pine-wash);border-color:var(--pine);color:var(--pine-deep);font-weight:600}
.cluster-nav b{font-family:var(--font-display);font-weight:500;color:var(--pine)}

/* ─── chapter 5: comparison table (manuscript content) ─ */
.compare-wrap{
  margin:var(--s6) 0;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);overflow-x:auto
}
.compare{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:42rem}
.compare th,.compare td{
  padding:var(--s4);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);line-height:1.65;color:var(--ink-soft)
}
.compare thead th{
  background:var(--pine-wash);color:var(--pine-deep);font-size:var(--text-xs);
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;white-space:nowrap
}
.compare tbody th{width:10.5rem;color:var(--ink);font-weight:700}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}

/* wider worksheet tables keep their text columns flexible */
.log.cols-2 th:nth-child(2),.log.cols-2 td:nth-child(2){width:auto}
.log.cols-4 th:nth-child(2),.log.cols-4 td:nth-child(2){width:11rem}
.log.cols-4 th:nth-child(3),.log.cols-4 td:nth-child(3){width:auto}
.log.cols-4 th:nth-child(4),.log.cols-4 td:nth-child(4){width:6.5rem}

/* a two-column log whose second column holds only a rating: the long header
   would otherwise run under its neighbour, because .log th is nowrap */
.log.cols-2.rating th,.log.cols-2.rating td{white-space:normal}
.log.cols-2.rating th:nth-child(1),.log.cols-2.rating td:nth-child(1){width:auto}
.log.cols-2.rating th:nth-child(2),.log.cols-2.rating td:nth-child(2){width:9.5rem}

/* ─── chapter 5: sleep rules ────────────────────────── */
.rules li{padding-bottom:var(--s2)}
.rules li b:first-child{display:inline}

/* ─── chapter 5: nested steps and worked examples ───── */
.substep{padding:var(--s5) 0;border-top:1px solid var(--rule)}
.substep h4{margin-bottom:var(--s3)}
.example{margin:var(--s4) 0 var(--s5);padding-left:var(--s5);border-left:2px solid var(--rule);max-width:var(--measure)}
.example .eyebrow{margin-bottom:var(--s2)}
.example p{font-size:var(--text-sm);line-height:1.7;color:var(--ink-soft)}

/* ─── print ──────────────────────────────────────────── */
@media print{
  .ref-list{padding-left:2.2rem;gap:.5rem;max-width:none}
  .ref-list li{font-size:9.5pt;line-height:1.5;color:#1d1d1d;break-inside:avoid}
  .ref-list a{color:#1d1d1d;text-decoration:none}
  .signature{font-size:13pt;border-top:.75pt solid #999;margin-top:1rem;padding-top:.5rem}
  .look-for li{font-size:10pt;line-height:1.55}
}
@media print{
  .exercise-actions{display:none!important}
  .substep{border-top:.75pt solid #999;padding:.5rem 0}
  .example{border-left:1pt solid #999;padding-left:.6rem;margin:.4rem 0 .7rem}
  .example p{color:#333}
  .worksheet-slug{display:block;margin-bottom:1.4rem;border-bottom:1.5pt solid #000;padding-bottom:.5rem}
  .worksheet-slug .ws-title{font-family:var(--font-display);font-size:15pt;margin:0;padding-left:1.5pt}
  .worksheet-slug .ws-book{font-size:9pt;letter-spacing:.1em;text-transform:uppercase;color:#444;margin:.15rem 0 .8rem}
  .worksheet-slug .ws-fields{display:flex;gap:2rem;margin:0;font-size:9.5pt;color:#333}
  .worksheet-slug .ws-fields span{flex:1 1 0;border-bottom:.75pt solid #666;padding-bottom:.15rem}

  /* blank-worksheet mode: exercise only, generous ruled lines */
  html.worksheet-only body>*{display:none!important}
  html.worksheet-only body>.shell{display:block!important}
  html.worksheet-only .shell>*{display:none!important}
  html.worksheet-only .shell>.chapter{display:block!important}
  html.worksheet-only .chapter>*{display:none!important}
  html.worksheet-only .chapter>#exercise{display:block!important}
  html.worksheet-only .chapter>#session{display:block!important}
  html.worksheet-only .exercise{border:0;padding:0}
  /* a multi-step worksheet is taller than one sheet: the screen rule that keeps
     .exercise unbroken would push the whole block to a fresh page and leave the
     first one blank, so let it flow and protect the smaller units instead */
  html.worksheet-only .exercise{break-inside:auto}
  html.worksheet-only .field{break-inside:avoid}
  /* keep a manuscript paragraph whole rather than splitting it across sheets */
  html.worksheet-only .step .prose{break-inside:avoid}
  html.worksheet-only .exercise-head,
  html.worksheet-only .closing,
  html.worksheet-only #exercise textarea,
  html.worksheet-only #exercise input[type="text"]{display:none!important}
  html.worksheet-only .ws-lines{display:block;margin-top:.35rem}
  html.worksheet-only .ws-line{
    display:block;height:30pt;border-bottom:.75pt solid #8f8f8f;break-inside:avoid
  }
  html.worksheet-only .step{break-inside:auto}
  /* the relapse plan's three conditions each fit a sheet on their own, so
     keep a condition's heading, its metrics and its writing lines together
     rather than letting the lines fall to the next page without them */
  html.worksheet-only .ws-keep-steps .step{break-inside:avoid}
  html.worksheet-only .step-label{break-inside:avoid;break-after:avoid}
  html.worksheet-only .field label,
  html.worksheet-only .field .hint{break-after:avoid}
  html.worksheet-only .step-label b{border:.75pt solid #333;color:#000;background:transparent}
  html.worksheet-only .option{border-radius:0;border:0;border-bottom:.5pt solid #ccc;padding:.3rem 0}
  html.worksheet-only .option input[type="radio"]{
    appearance:none;-webkit-appearance:none;width:11pt;height:11pt;
    border:.75pt solid #333;border-radius:0;background:#fff
  }
  html.worksheet-only .log-note{display:none!important}
  html.worksheet-only #session{break-before:page}
  html.worksheet-only #session .sec-head h2{font-size:15pt}
  :root{
    --ink:#000;--ink-soft:#1d1d1d;--ink-faint:#555;--ink-invert:#000;
    --paper:#fff;--surface:#fff;--surface-2:#fff;
    --border:#8a8a8a;--rule:#bbb;--pine:#1d4b40;--pine-deep:#123029;--pine-wash:#fff
  }
  .site-header,.rail,.hero-actions,.glossary-tools,.theme-toggle,
  .timer-bar,.notice,.chip,.chapter-jump,.part-close,
  .contents-wrap{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  .shell{display:block;padding:0;max-width:none}
  .exercise,.figure-frame,.term,.ev{box-shadow:none;break-inside:avoid}
  .chapter{gap:2rem}
  textarea,input[type="text"]{border:0;border-bottom:1px solid #999;border-radius:0;background:#fff;min-height:0}
  textarea{height:6rem}
  .closing{background:#fff;color:#000;border:1px solid #000}
  .closing p{color:#000}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .glossary{display:block}
  .term{padding:.35rem 0;border:0}
  .gloss{text-decoration:none;color:#000}
  .gloss::after{content:""}
  .scenario{border:1px solid #000;border-left:2.5pt solid #000;background:#fff}
  .rung{border:.75pt solid #666;background:#fff!important}
  .rung-no{border:.75pt solid #333;color:#000!important;background:#fff!important}
  .rung-meter i{background:#ddd}
  .rung-meter i.on{background:#333}
  .credit{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .credit li,.credit li:nth-child(2),.credit li:nth-child(3){
    background:#fff!important;border:.75pt solid #666
  }
  .credit li::after{display:none}
  .credit .cf-no{border:.75pt solid #333;color:#000!important;background:#fff!important}
  .numbered li::before{border:.75pt solid #333;color:#000}
  .log-wrap{border:.75pt solid #333;border-radius:0;overflow:visible}
  .log{font-size:10pt;table-layout:fixed}
  .log thead{display:table-header-group}
  .log th{
    background:#fff;border-bottom:.75pt solid #333;color:#000;
    padding:.3rem .4rem;font-size:8.5pt
  }
  .log td{
    padding:.3rem .4rem;border-bottom:.5pt solid #999;color:#000;
    overflow-wrap:anywhere
  }
  .log th{letter-spacing:.02em}
  .log th:nth-child(2),.log td:nth-child(2){width:1.15in}
  .log th:nth-child(3),.log td:nth-child(3){width:1.25in}
  /* dashes drawn with a background colour vanish when backgrounds are off */
  .look-for li::before{
    content:"\2014";position:absolute;left:0;top:0;
    width:auto;height:auto;background:none;color:#333;font-size:9.5pt
  }
  .look-for li{padding-left:1.15rem}
  html.worksheet-only .worksheet-slug h1{line-height:1.3}
  .log tr{break-inside:avoid}
  .log tr.blank td{height:30pt}
  .log tbody tr:last-child td{border-bottom:.5pt solid #999}
  .log-actions{display:none!important}
  /* the typed cell prints as plain text on the row's own rule */
  .log input.cell{
    border:0;background:transparent;padding:0;width:100%;
    font-size:10pt;color:#000
  }
  .log input.cell-num{max-width:none}

  /* blank-worksheet print: leave the rows empty for handwriting */
  html.worksheet-only:not(.with-entries) .log input.cell{color:transparent!important}

  /* “print what I typed”: keep every typed value, drop the ruled writing lines */
  html.with-entries #exercise input.cell{display:block!important;color:#000!important}
  html.with-entries #exercise textarea,
  html.with-entries #exercise input[type="text"]{display:block!important;color:#000!important}
  html.with-entries .ws-lines{display:none!important}
  html.with-entries .log tr.blank td{height:auto;padding:.3rem .4rem}
  html.with-entries .log tr.is-empty{display:none!important}
  /* an empty field should print as a blank rule, not as its grey prompt */
  html.with-entries #exercise input::placeholder,
  html.with-entries #exercise textarea::placeholder{color:transparent!important}
  /* show which version was chosen — a checked radio has no fill on paper */
  html.with-entries .option input[type="radio"]:checked+span b::before{
    content:"\2713\00a0"
  }

  /* ── cluster pages: print one exercise out of several ──────────────
     Chapters 1–4 print the single #exercise section. A Chapter 5 cluster
     page can hold three, so the one being printed is marked .printing and
     the rules below mirror the #exercise rules for it. */
  html.worksheet-only .chapter>.printing{display:block!important}
  /* the cluster pages wrap the worksheet in a full reading section, so the
     section heading, its lead paragraph and the privacy notice are edition
     furniture on paper and come off the printed sheet */
  html.worksheet-only .printing>.sec-head,
  html.worksheet-only .printing>.prose,
  html.worksheet-only .printing>.notice,
  html.worksheet-only .printing>.cluster-nav,
  html.worksheet-only .printing .field .hint{display:none!important}
  /* the worksheet slug already prints the exercise title, so the manuscript
     heading immediately under it would set the same words twice */
  html.worksheet-only .printing .worksheet-slug+.step>h3:first-child{display:none!important}
  /* the manuscript subheading above each box already names the field, so the
     screen-reader-only label stays hidden on paper too */
  html.worksheet-only .printing textarea,
  html.worksheet-only .printing input[type="text"]{display:none!important}
  html.with-entries .printing input.cell{display:block!important;color:#000!important}
  html.with-entries .printing textarea,
  html.with-entries .printing input[type="text"]{display:block!important;color:#000!important}
  html.with-entries .printing input::placeholder,
  html.with-entries .printing textarea::placeholder{color:transparent!important}

  /* cluster pages */
  .cluster-nav{display:none!important}
  .compare-wrap{border:.75pt solid #333;border-radius:0;overflow:visible}
  .compare{min-width:0;font-size:9.5pt}
  .compare thead{display:table-header-group}
  .compare thead th{background:#fff;border-bottom:.75pt solid #333;color:#000;padding:.3rem .4rem;font-size:8.5pt}
  .compare th,.compare td{padding:.35rem .4rem;color:#000;border-bottom:.5pt solid #999}
  .compare tbody th{width:1.35in}
  .compare tr{break-inside:avoid}
  .log.cols-2 th:nth-child(2),.log.cols-2 td:nth-child(2){width:auto}
  .log.cols-2.rating th{white-space:normal}
  .log.cols-2.rating th:nth-child(1),.log.cols-2.rating td:nth-child(1){width:auto}
  .log.cols-2.rating th:nth-child(2),.log.cols-2.rating td:nth-child(2){width:1.2in}
  .log.cols-4 th:nth-child(2),.log.cols-4 td:nth-child(2){width:1.4in}
  .log.cols-4 th:nth-child(3),.log.cols-4 td:nth-child(3){width:auto}
  .log.cols-4 th:nth-child(4),.log.cols-4 td:nth-child(4){width:.8in}
  /* the Chapter 5 logs are handwritten across three and four columns, so the
     column divisions are drawn on paper; Chapter 4's two-column log does not
     need them and is left as published */
  .log.cols-2 th+th,.log.cols-2 td+td,
  .log.cols-4 th+th,.log.cols-4 td+td{border-left:.5pt solid #999}
  .log.cols-2 th,.log.cols-4 th{font-size:8pt}
}

/* ─── contents drawer ────────────────────────────────────
   Injected by app.js on every page. The header chips are hidden below the
   small breakpoint, so this is the only cross-page navigation a phone reader
   gets; it therefore stays visible at every width. */
.contents-btn{gap:var(--s2)}
.contents-wrap{position:fixed;inset:0;z-index:300}
.contents-wrap[hidden]{display:none}
.contents-scrim{
  position:absolute;inset:0;background:rgba(32,32,29,.42);
  opacity:0;transition:opacity .2s ease
}
.contents-wrap.is-open .contents-scrim{opacity:1}
[data-theme="dark"] .contents-scrim{background:rgba(0,0,0,.6)}
.contents-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(26rem,100%);
  background:var(--surface);border-left:1px solid var(--rule);
  display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);transition:transform .22s ease;
  box-shadow:-1px 0 40px rgba(32,32,29,.14)
}
.contents-wrap.is-open .contents-panel{transform:translateX(0)}
.contents-panel:focus{outline:none}
.contents-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:var(--s5) var(--s6);
  border-bottom:1px solid var(--rule);position:sticky;top:0;
  background:var(--surface);z-index:1
}
.contents-body{padding:var(--s6) var(--s6) var(--s4)}
.contents-group + .contents-group{margin-top:var(--s8)}
.contents-group h3{
  margin:0 0 var(--s3);font-family:var(--font-body);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint)
}
.contents-group ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.contents-group li>a,.contents-group li>span{
  display:grid;gap:.15rem;padding:var(--s3) var(--s4);
  border:1px solid transparent;border-radius:var(--r-md);
  text-decoration:none;color:inherit
}
.contents-group li>a:hover,.contents-group li>a:focus-visible{
  border-color:var(--rule);background:var(--paper)
}
.contents-group li.current>span{
  background:var(--pine-wash);border-color:var(--pine)
}
.c-no{
  font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint)
}
.contents-group li.current .c-no{color:var(--pine-deep);text-transform:none;letter-spacing:.02em}
.c-title{font-size:var(--text-sm);line-height:1.45}
.contents-group li.current .c-title{font-weight:600;color:var(--pine-deep)}
.contents-group.is-pending li,.contents-group li.pending{opacity:.62}
.contents-group li.pending .c-title{font-style:italic}
.contents-sections .c-title{color:var(--ink-soft)}
.contents-foot{
  margin:auto 0 0;padding:var(--s5) var(--s6);border-top:1px solid var(--rule);
  font-size:var(--text-xs);line-height:1.6;color:var(--ink-faint)
}
@media (max-width:34rem){
  .contents-panel{width:100%;border-left:0}
  .contents-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .contents-btn{padding:.5rem;width:38px;height:38px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .contents-scrim,.contents-panel{transition:none}
}

/* ─────────────────────────────────────────────────────────────────────────
   Part 3 — client narratives, worked example tables, and content notes
   ───────────────────────────────────────────────────────────────────────── */
.narrative{
  margin:var(--s8) 0;padding:var(--s6) var(--s8);
  max-width:var(--measure);
  background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--pine);border-radius:0 var(--r-md) var(--r-md) 0
}
.narrative .eyebrow{margin:0 0 var(--s4)}
.narrative p:last-child{
  margin:0;line-height:1.75;color:var(--ink-soft);
  font-size:var(--text-base)
}
@media (max-width:620px){
  .narrative{padding:var(--s5);margin:var(--s6) 0}
}
.log-static td:first-child{color:var(--ink)}
.log-static td.cell-num{font-variant-numeric:tabular-nums;color:var(--ink)}
.notice.cw{
  border-left:3px solid var(--clay);
  padding-left:calc(var(--s4) + 15px + var(--s3));
  color:var(--ink-soft);margin:0 0 var(--s8);max-width:var(--measure)
}
.notice.cw svg{color:var(--clay)}
.notice.cw b{color:var(--ink)}
.log-form td.opt{text-align:center;width:5.5rem;color:var(--ink-faint)}
.log-form th:nth-child(2),.log-form td:nth-child(2),
.log-form th:nth-child(3),.log-form td:nth-child(3),
.log-form th:nth-child(4),.log-form td:nth-child(4){width:5.5rem}
.log-form td:first-child{width:auto}
.log-form .tick{width:17px;height:17px;color:var(--pine);vertical-align:-3px}
@media (max-width:620px){
  .log-form td.opt{text-align:left;width:auto;display:none}
  .log-form td.opt:has(.tick){display:block}
  .log-form td:nth-child(2),.log-form td:nth-child(3),
  .log-form td:nth-child(4){width:auto}
}
.step-lead{
  margin:var(--s8) 0 var(--s4);max-width:var(--measure);
  color:var(--ink);font-weight:600;line-height:1.6
}
.log-check td.opt{padding:var(--s3) var(--s2)}
.tickbox{display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer}
.tickbox input{
  appearance:none;-webkit-appearance:none;margin:0;
  width:1.05rem;height:1.05rem;flex:0 0 auto;
  border:1.5px solid var(--ink-faint);border-radius:var(--r-sm);
  background:var(--surface);transition:background-color .15s,border-color .15s
}
.tickbox input:hover{border-color:var(--pine)}
.tickbox input:checked{
  border-color:var(--pine);background:var(--pine);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffdf9' stroke-width='3.2'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:82%;background-position:center;background-repeat:no-repeat
}
.tickbox input:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.tickbox span{display:none}
@media (max-width:620px){
  .log-check td.opt{display:inline-flex;width:auto;padding:0 var(--s5) 0 0}
  .log-check td.opt::before{display:none}
  .log-check tbody tr{display:block}
  .tickbox span{display:inline;font-size:var(--text-xs);color:var(--ink-soft)}
}

/* metaphor cards, acrostics, and the self-talk list */
.example-card{
  margin:var(--s5) 0;padding:var(--s5) var(--s6);
  max-width:var(--measure);
  background:var(--surface-2);border:1px solid var(--rule);
  border-radius:var(--r-md)
}
.example-card p{margin:0;line-height:1.7;color:var(--ink-soft)}
.example-card b{color:var(--ink)}
.acrostic{
  margin:var(--s8) 0;padding:var(--s6) var(--s8);
  display:inline-block;min-width:min(100%,20rem);
  background:var(--pine-wash);border-radius:var(--r-md)
}
.acrostic-word{
  margin:0 0 var(--s4);font-family:var(--font-display);
  font-size:var(--text-xl);letter-spacing:.04em;color:var(--pine-deep)
}
.acrostic-word b{font-weight:500}
.acrostic ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.acrostic li{line-height:1.5;color:var(--ink-soft);font-size:var(--text-sm)}
.acrostic li b{color:var(--pine-deep);font-weight:700}
.self-talk{
  list-style:none;margin:var(--s6) 0 0;padding:0;
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))
}
.self-talk li{
  padding:var(--s4) var(--s5);line-height:1.55;
  font-size:var(--text-sm);color:var(--ink-soft);
  background:var(--surface-2);border:1px solid var(--rule);
  border-radius:var(--r-md)
}