/* ============================================
   SMART STUDY — Library Redesign
   style.css
   ============================================ */

/* ── Design Tokens ── */
:root {
  /* Warm library neutrals */
  --bg:            #FAF5EB;
  --bg-sunken:     #F3ECDC;
  --bg-card:       #FFFDF7;
  --bg-tab:        #EDE3CF;
  --bg-tab-hover:  #F2EAD8;

  --border:        #E4D9C2;
  --border-strong: #D5C7A9;

  --text-1:        #33302A;
  --text-2:        #6F6756;
  --text-3:        #A79D8B;

  /* Pastel families */
  --green-bg:      #E9E2BE;
  --green-soft:    #F2EDD6;
  --green-border:  #D8CE9F;
  --green-deep:    #5F5628;
  --green-pill:    #DFD7AB;

  --yellow-bg:     #F7ECB4;
  --yellow-soft:   #FAF3D3;
  --yellow-border: #E9D88E;
  --yellow-deep:   #7A631C;
  --yellow-pill:   #EFDF97;

  --lavender-bg:   #E6DCF6;
  --lavender-soft: #F1EBFA;
  --lavender-border:#D3C4EC;
  --lavender-deep: #5A4791;
  --lavender-pill: #D9CBF0;

  --pink-bg:       #F7D9E7;
  --tan-bg:        #EADCC4;
  --blue-bg:       #D6E6F5;

  /* Page paper colors — each drives both the inline tab SVG and the
     page body below it, so edit the pair here in one place */
  /* Paper slips laid on the folders. The folder colours themselves
     come from the drawn SVGs and live on .spread[data-page]. */
  --slip-white:  #FBF6E8;
  --slip-cream:  #F0E4C8;
  --slip-blue:   #CBDAE3;
  /* the Youth tab's green as it reads on the page — its fill (#afb586)
     under the 40% paper texture — so a green card on any folder, and the
     Structure tag, is the same green as the Youth tab */
  --slip-mint:   #BCBB99;
  /* Red and yellow are knocked back from #B8402F / #F2D64B — desaturated
     and slightly darkened so they sit with the folder colours instead of
     jumping off the page. */
  --slip-yellow: #E0C86A;
  --slip-red:    #A9523F;
  --ink:         #33302A;
  --ink-soft:    #6B6455;
  /* deliberately outside the muted palette — it should read as "link" */
  --link:        #1B6FE0;

  /* Defaults for the pastel theme vars, so anything outside a
     .page (the fixed footer, the carousel) still resolves. */
  --pg-bg:     #E9E2BE;
  --pg-soft:   #F2EDD6;
  --pg-border: #D8CE9F;
  --pg-deep:   #5F5628;
  --pg-pill:   #DFD7AB;

  /* breathing room after the end-of-page bar */
  --scroll-pad-b: 3rem;

  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;

  --shadow-sm:    0 1px 3px rgba(51,48,42,.05), 0 1px 2px rgba(51,48,42,.04);
  --shadow-md:    0 5px 16px rgba(51,48,42,.08), 0 2px 5px rgba(51,48,42,.04);
  --shadow-hover: 0 10px 26px rgba(51,48,42,.10), 0 3px 8px rgba(51,48,42,.05);

  /* Narrow on purpose: long names wrap onto a second line rather than
     widening the column ("Supplemental / materials"). */
  --sidebar-w: 11.25rem;
  --ease: 0.22s ease;
}

/* Per-page pastel themes */
.page[data-theme="green"] {
  --pg-bg:     var(--green-bg);
  --pg-soft:   var(--green-soft);
  --pg-border: var(--green-border);
  --pg-deep:   var(--green-deep);
  --pg-pill:   var(--green-pill);
}
.page[data-theme="yellow"] {
  --pg-bg:     var(--yellow-bg);
  --pg-soft:   var(--yellow-soft);
  --pg-border: var(--yellow-border);
  --pg-deep:   var(--yellow-deep);
  --pg-pill:   var(--yellow-pill);
}
.page[data-theme="lavender"] {
  --pg-bg:     var(--lavender-bg);
  --pg-soft:   var(--lavender-soft);
  --pg-border: var(--lavender-border);
  --pg-deep:   var(--lavender-deep);
  --pg-pill:   var(--lavender-pill);
}
.page[data-theme="neutral"] {
  --pg-bg:     var(--bg-sunken);
  --pg-soft:   var(--bg-card);
  --pg-border: var(--border);
  --pg-deep:   var(--text-2);
  --pg-pill:   var(--bg-tab);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Held back only while a Spanish page is swapping its text in — see the
   head script in index.html, which also times this out. */
.i18n-pending body { visibility: hidden; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; color: inherit; }
a { color: inherit; }

.mono-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* Colored dots (explorer + breadcrumb) */
.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  background: var(--text-3);
}
/* The three folder dots are the literal fills of the redrawn artwork,
   so the sidebar reads as the same object as the folder it opens. The
   remaining four are pushed well clear of those three hues — the old
   blue, green and yellow all collided with them and are gone. */
.dot--home         { background: #edd893; }  /* folder yellow */
.dot--children     { background: #afb586; }  /* folder green  */
.dot--parents      { background: #839ab7; }  /* folder blue   */
/* not the folder's off-white, which would vanish on the page: a muted
   orange of its own */
.dot--providers    { background: #DD9A5E; }
.dot--sequence     { background: #C4502E; }  /* orange-red */
/* The Pages group is one neutral family, so it's separated by lightness
   rather than hue — an L* ladder of 22 / 43 / 61. */
.dot--supplemental { background: #3F3128; }  /* espresso  */
.dot--articles     { background: #7C6242; }  /* mid brown */
.dot--resources    { background: #A98F6B; }  /* tan       */


/* ══════════════════════════════════════════
   APP LAYOUT
   ══════════════════════════════════════════ */
.app {
  display: flex;
  min-height: 100vh;
}
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* The folder's side tab and the slips that hang off its edges sit
     outside the layout box on purpose. `clip` contains them without
     creating a scroll container, so they never open a horizontal
     scrollbar — and it clips on this axis only, so the folder's
     shadow still spills top and bottom. */
  overflow-x: clip;
}
.view { display: none; flex: 1; min-height: 100vh; }
.view.active { display: block; }


/* ══════════════════════════════════════════
   NAVIGATION SIDEBAR
   Deliberately unruled — no dividers, no right border.
   ══════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg);
  overflow: hidden;
  transition: width 0.35s cubic-bezier(.4,0,.2,1);
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-inner {
  width: var(--sidebar-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  /* no top padding — .sidebar-head sets its own band, see below */
  padding: 0 0.9rem 1rem;
}
.app.sb-collapsed .sidebar { width: 0; }

/* Same 46px band as .crumb-bar, starting at the same top edge, so
   "navigation" and the breadcrumb sit on one line across the page
   rather than eighteen pixels apart. */
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  flex-shrink: 0;
  padding: 0 0.5rem;
  margin-bottom: 0;   /* the light switch sits right under it */
}
/* not meant to draw the eye — it's a label, not a masthead */
.sidebar-brand {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--text-3);
  white-space: nowrap;
}
/* both are bare chevrons — no ring, no fill */
.sidebar-collapse,
.sidebar-open {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 1.05rem;
  line-height: 1;
  transition: color var(--ease), transform var(--ease);
}
.sidebar-open:hover  { color: var(--text-1); transform: translateX(2px); }
.sidebar-collapse:hover { color: var(--text-1); transform: translateX(-2px); }

/* Floating reopen handle (visible when collapsed) */
.sidebar-open {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 300;
  width: 30px; height: 30px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.app.sb-collapsed .sidebar-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Naming one axis auto promotes the other from visible to auto, so the
   2px hover nudge below was enough to make the list slide sideways.
   Clipping x settles it, and the matching right allowance means the
   nudge has somewhere to go instead of being cut off.

   y stays scrollable so a short window can still reach Supplemental
   materials, but the bar itself is never drawn — it was the one piece
   of browser chrome sitting inside the artwork. */
.side-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: clip;
  padding-right: 3px;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge */
}
.side-nav::-webkit-scrollbar { width: 0; height: 0; }
.side-section { margin-bottom: 1.4rem; }
/* subtle group heading; the items sit indented beneath it */
.side-label {
  display: block;
  padding: 0 0.5rem 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0.75;
}
/* A name too long for the column wraps rather than being cut off, so
   the dot sits against the first line instead of centring on the pair. */
.side-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  /* the tighter line-height suits a wrapped name; the extra padding gives
     a one-line item back exactly the height it had at the old 1.65 */
  padding: 0.525rem 0.55rem 0.525rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: 0.84rem;
  font-weight: 450;
  line-height: 1.4;
  color: var(--text-2);
  text-align: left;
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
.side-item .dot { margin-top: calc((1.4em - 9px) / 2); }
.side-item:hover {
  background: var(--bg-sunken);
  color: var(--text-1);
  transform: translateX(2px);
}
.side-item.active {
  background: var(--bg-sunken);
  color: var(--text-1);
  font-weight: 550;
}
.side-name { flex: 1; min-width: 0; }
.side-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-3);
}
.sidebar-foot {
  padding: 0.9rem 0.5rem 0;
  /* the one rule left in the sidebar — just enough to sit the meta apart */
  border-top: 1px solid var(--border);
  white-space: nowrap;
}

/* Mobile sidebar backdrop */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(51,48,42,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}


/* ══════════════════════════════════════════
   BREADCRUMB BAR
   ══════════════════════════════════════════ */
.crumb-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 46px;
  padding: 0 2rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8rem;
  color: var(--text-3);
  transition: padding 0.35s ease;
}
.app.sb-collapsed .crumb-bar { padding-left: 3.4rem; }
/* the Sequence reuses the crumb inside its own top bar */
.crumb-bar--inline {
  position: static;
  height: auto;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.crumb-sep { color: var(--border-strong); }
.crumb-current {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-1);
  font-weight: 500;
}

.library-scroll {
  /* Sidebar closed: centered reading column (the size container for
     cqw units). Sidebar open: overridden below to run wall-to-wall. */
  container-type: inline-size;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 2.25rem;
}


/* ══════════════════════════════════════════
   PAGE HEAD (title + blurb)
   ══════════════════════════════════════════ */
.page-head {
  padding: 3rem 0 1.75rem;
  /* the jump tabs live in the empty space to the right of the blurb */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
.page-head-text { min-width: 0; }
.site-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
}
.site-blurb {
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-2);
}


/* ══════════════════════════════════════════
   FOLDER SPREADS
   Each page is one folder: the drawn SVG shape
   (fill + clipped paper texture) with its
   content laid on top as overlapping slips of
   paper. Unopened folders stack behind, hump
   and a little peeking content showing.
   ══════════════════════════════════════════ */
.page-stack {
  /* vertical offset between stacked folders — the peek band. Never under
     3cqw: Providers and Youth share the centre tab two steps apart, and
     a tab is 6cqw tall, so less would let the nearer one cover the other
     (only on very wide windows, where the 42px cap would otherwise bite) */
  --step: max(min(3.1cqw, 42px), 3cqw);
  position: relative;
  z-index: 2;
  padding-top: calc(var(--step) * 3);
}
.page-stack[hidden] { display: none; }

/* Per-folder paper colour, texture strength, and the ink that
   reads directly on the paperboard (labels, section heads) */
/* The folder fill lives inline on the path in index.html so it can be
   changed next to the shape. There is deliberately NO `fill` rule here
   — a CSS rule beats a presentation attribute and would silently
   override that edit. Only the texture strength and the ink printed
   onto the board are variables. */
.spread[data-page="home"] {
  --tex-op: .7; --on-folder: #4A4224;
}
/* --on-folder is ink printed straight onto the board, so it has to be
   measured against the board AFTER the texture washes over it, not
   against the raw fill. Both of these boards land far lighter than
   their fill suggests, so light ink fails: parents reads 1.95:1 with
   cream and 4.63:1 with dark. */
.spread[data-page="parents"] {
  --tex-op: .4; --on-folder: #2A3242;
}
.spread[data-page="providers"] {
  /* an off-white just under the page: a near-white fill with lighter
     grain, a warm cream that renders about #F1E6D3 against the page's
     #FAF5EB */
  --tex-op: .25; --on-folder: #2E1C12;
}
.spread[data-page="children"] {
  --tex-op: .4; --on-folder: #333A22;
}

.spread {
  position: relative;
  container-type: inline-size;
  --slip-fs: clamp(13px, 1.72cqw, 24px);
  /* Nothing about the container itself is clickable — only the drawn
     artwork is (see .shape-fill). Otherwise each folder's rectangle
     swallows clicks meant for the folder stacked behind it. */
  pointer-events: none;
}
/* The folder box is the folder BODY, so content percentages and the
   flush-to-the-window alignment both stay honest. The right-hand side
   tab lives outside that box and hangs over the edge — see
   --tab-overhang below.
   All four land on 1.30:1 — the shortened artwork — which also
   means the stack bottoms align exactly. Parents now carries the
   right-hand tab drawing; Youth and Providers both carry the centre one. */
.spread[data-page="home"]      { aspect-ratio: 857.5 / 659.6; --tab-overhang: 102.880%; --tab-crop: 2.800%; }
.spread[data-page="parents"]   { aspect-ratio: 857.5 / 659.4; --tab-overhang: 102.880%; --tab-crop: 2.800%; }
.spread[data-page="children"]  { aspect-ratio: 856.9 / 659.3; --tab-overhang: 102.929%; --tab-crop: 2.846%; }
.spread[data-page="providers"] { aspect-ratio: 856.9 / 659.3; --tab-overhang: 102.929%; --tab-crop: 2.846%; }

/* the three closed folders sit behind, offset up by one step each */
.spread:not(.active) {
  position: absolute;
  left: 0; right: 0;
}
.spread.slot-0 { top: 0;            z-index: 1; }
.spread.slot-1 { top: var(--step);  z-index: 2; }
.spread.slot-2 { top: calc(var(--step) * 2); z-index: 3; }
.spread.active { z-index: 4; }
.spread:focus-visible { outline: none; }
.spread:focus-visible .shape-fill { stroke: var(--text-1); stroke-width: 3; }

/* ── the drawn folder itself ── */
.spread-shape {
  position: absolute;
  left: 0; top: 0;
  /* wider than the folder body, so the side tab overhangs to the right */
  width: var(--tab-overhang);
  height: 100%;
  display: block;
  /* No shadow. The folders read as flat drawn shapes lying on the page,
     the same way the papers on them carry no shadow either — the drawn
     silhouettes do the separating. */
  /* the svg box is a rectangle; only the paths inside should hit-test */
  pointer-events: none;
}
/* Sidebar open the folder runs wall-to-wall, so the side tab is cropped
   to keep that flush edge. Sidebar closed there's margin to spare and
   the tab crops back in. */
/* The tab is cropped by swapping the svg's viewBox (JS, syncTabCrop) —
   NOT by clip-path, which would cut the drawn edge dead straight at the
   body line instead of letting the silhouette end where it was drawn. */
.app:not(.sb-collapsed) .spread-shape { width: 100%; }

.shape-tex-group { opacity: var(--tex-op); }
/* The artwork is the click target — on every folder. The open one needs
   it too, or clicks on its blank board fall through and open whichever
   folder happens to sit underneath. */
.shape-fill { pointer-events: auto; }
.spread:not(.active) .shape-fill { cursor: pointer; }
/* Hover feedback is a transform lift, which the compositor handles for
   free — no repaint of the textured folder on the element people hover
   most. */
.spread:not(.active) { transition: top 0.34s ease, transform 0.26s ease; }
.spread:not(.active):hover { transform: translateY(-4px); }

/* ── sticker nestled in the hump ── */
.spread-sticker {
  position: absolute; z-index: 14;
  height: auto;
  transform-origin: 50% 60%;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none; -webkit-user-drag: none;
  /* a touch brighter than the photographed tape, in both modes */
  filter: brightness(1.08);
}
.spread-sticker { pointer-events: auto; }
.spread:not(.active) .spread-sticker { cursor: pointer; }
/* Centred on the flat top of each redrawn hump, measured from the new
   paths: home 2.4-21.4%, Providers 26.5-38.8% and Youth 46.4-58.6% (the
   centre tab, drawn 110 left and 60 right of where it began), right
   (Parents) 77.1-88.3%. The
   sticker images are trimmed to the tape (about 3.4:1), so each is also
   centred down its hump: the tab band is 6cqw deep, and top is half of
   what the sticker leaves of it. */
.spread[data-page="home"]      .spread-sticker { left: 5.9%;   width: 12%;   top: 1.23cqw; }
.spread[data-page="parents"]   .spread-sticker { left: 77.45%; width: 10.5%; top: 1.45cqw; }
.spread[data-page="children"]  .spread-sticker { left: 47.2%;  width: 10.5%; top: 1.45cqw; }
.spread[data-page="providers"] .spread-sticker { left: 27.4%;  width: 10.5%; top: 1.45cqw; }
/* "Profesionales" is a long word on a slim tape, so the Spanish sticker
   runs a fifth larger, still centred on its tab (and down it: 6cqw of
   tab less its 3.8cqw height, halved) */
:root[lang="es"] .spread[data-page="providers"] .spread-sticker { left: 26.35%; width: 12.6%; top: 1.11cqw; }
.spread[data-page="home"]     .spread-sticker:hover { transform: rotate(-1deg) scale(1.06); }
.spread[data-page="parents"]  .spread-sticker:hover { transform: rotate(1deg)  scale(1.06); }
.spread[data-page="children"] .spread-sticker:hover { transform: rotate(-1deg) scale(1.06); }
.spread[data-page="providers"] .spread-sticker:hover { transform: rotate(1deg)  scale(1.06); }

/* ══════════════════════════════════════════
   THE DESK — content laid on the folder
   ══════════════════════════════════════════ */
.desk {
  position: absolute;
  /* Tucked inside the folder edges, below the tab strip. Its top and
     height are pinned to the folder's WIDTH rather than its height:
     when a folder grows taller so its words fit (see layoutDesk), the
     tab strip, the cards' designed positions and their text all stay
     exactly where they were, and only the paper below gets longer.
     8.08 / 64.61 are the old 10.5% / 84% of the 1.30:1 folder's height,
     re-expressed; the sides are unchanged. */
  top: 8.08cqw;
  height: 64.61cqw;
  left: 3.4%;
  right: 3.2%;
  z-index: 6;
  /* the desk is an invisible rectangle — the slips inside are the
     click targets, not this */
  pointer-events: none;
}

/* Closed folders keep their full layout: each .spread is its own
   stacking context, so their content paints beneath the open folder's
   opaque artwork and only what escapes its silhouette — the overhangs —
   shows. JS clips the top edge so nothing pokes out above it, and marks
   the content inert so it can be seen but never touched. */
/* .slip re-enables pointer-events, and pointer-events:none on an
   ancestor doesn't stop a descendant that sets auto — so switch it off
   on the slips themselves too, rather than leaning on [inert] alone. */
.spread:not(.active) .desk,
.spread:not(.active) .slip { pointer-events: none; }
.spread:not(.active) .slip { cursor: default; }

/* What escapes a closed folder's silhouette is meant to read as a sheet
   of paper poking out from behind the open one — the overhang is a sheet
   of paper, not a paragraph to be half-read. So the printing waits: the
   card keeps its colour and its edge, and the words only arrive when
   that folder is the one on top. Hidden rather than removed, so nothing
   reflows when the folder opens. */
.spread:not(.active) .slip-head,
.spread:not(.active) .slip-title,
.spread:not(.active) .slip-body,
.spread:not(.active) .slip-hint,
.spread:not(.active) .stack-flag,
.spread:not(.active) .strip-label,
.spread:not(.active) .stat {
  visibility: hidden;
}

/* Sidebar closed, the folder keeps the same composition it has open —
   it simply sits in a centred column with open page either side of it.
   No card is pushed out over its edges any more. */

.slip {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
  /* NB: percentage padding resolves against the desk's width, not the
     slip's — so these, and the per-slot padding-right overrides that
     absorb the overlaps, are all in desk-percent. */
  padding: 2.6% 3%;
  font-size: var(--slip-fs);
  line-height: 1.5;
  color: var(--ink);
  background: var(--slip-white);
  /* No shadows on any content — the drawn torn/deckled edges are what
     will separate one sheet from the next. Until that artwork lands,
     overlapping papers of the same tone read soft on purpose. */
  /* dx/dy = scroll reveal · ox/oy = spread-out · hx/hy/sc = hover */
  --rot: 0deg;
  --dx: 0px; --dy: 0px;
  --ox: 0px; --oy: 0px;
  --hx: 0px; --hy: 0px;
  --sc: 1;
  transform: translate(var(--dx), var(--dy))
             translate(var(--ox), var(--oy))
             rotate(var(--rot))
             translate(var(--hx), var(--hy))
             scale(var(--sc));
  /* --ry is layoutDesk's downward nudge — how far this card has to move
     so it never sits on another card's words. It's the separate
     `translate` property, applied in the desk's own upright frame, and
     deliberately not transitioned: it tracks a resizing window exactly. */
  translate: 0 var(--ry, 0px);
  transition: transform 0.42s cubic-bezier(0.22, .85, .35, 1),
              opacity 0.5s ease;
}
.slip[data-slide] { opacity: 0; }
.slip[data-slide="left"]  { --dx: -8%; }
.slip[data-slide="right"] { --dx:  8%; }
.slip[data-slide="up"]    { --dy:  7%; }
.slip[data-slide="down"]  { --dy: -7%; }
.slip.in { opacity: 1; --dx: 0px; --dy: 0px; }

/* ── paper varieties ── */
/* The clip is drawn straight onto the folder — no paper, no padding, so
   the keyed line art lies on the card stock like the drawn stickers do. */
.slip--clip { padding: 0; background: none; }
.clip-video,
.clip-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2368 / 1644;
}
/* Once the canvas is carrying the picture the video is just a decoder.
   Kept rendered rather than display:none — browsers are entitled to stop
   decoding a video that isn't being laid out at all. */
.clip-video.is-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.slip--paper { background: var(--slip-white); }
.slip--index {
  background: var(--slip-blue);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 1.55em, rgba(51, 48, 42, .10) 1.55em calc(1.55em + 1px));
}
.slip--memo  { background: var(--slip-yellow); }
.slip--mint  { background: var(--slip-mint); }
.slip--stamp { background: var(--slip-red); color: #FCF3E6; }
.slip--stamp .slip-cat,
.slip--stamp .slip-hint { color: rgba(252, 243, 230, .74); }
.slip--stamp .slip-pill { background: rgba(252, 243, 230, .22); color: #FCF3E6; }
.slip--stamp .slip-body strong { color: #fff; }

/* ── slip internals ── */
.slip-head {
  display: flex; align-items: center; gap: 0.6em;
  margin-bottom: 0.5em;
}
.slip-pill {
  font-family: var(--font-mono);
  font-size: 0.76em; font-weight: 500;
  padding: 0.2em 0.5em;
  border-radius: 2px;
  background: rgba(51, 48, 42, .1);
  white-space: nowrap;
  transition: transform var(--ease);
}
.slip:hover .slip-pill { transform: scale(1.06); }
.slip-cat {
  font-family: var(--font-mono);
  font-size: 0.7em; letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.slip-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3em; line-height: 1.16;
  letter-spacing: -0.008em;
  margin-bottom: 0.4em;
}
.slip-body { font-size: 0.96em; line-height: 1.52; }
.slip-body + .slip-body { margin-top: 0.7em; }

/* ── links inside the paper copy ── */
.ext-link,
.acronym {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(51, 48, 42, .32);
  transition: border-color var(--ease), color var(--ease);
}
.ext-link:hover,
.acronym:hover,
.ext-link:focus-visible,
.acronym:focus-visible {
  color: var(--link);
  border-bottom-color: var(--link);
}

/* The acronym expands to its full name above the word rather than
   inline, so the paragraph never reflows on hover. */
.acronym { position: relative; }
.acronym-full {
  position: absolute;
  bottom: 125%;
  left: 50%;
  z-index: 50;
  width: max-content;
  max-width: 14em;
  padding: 0.42em 0.62em;
  background: var(--ink);
  color: var(--slip-white);
  font-family: var(--font-sans);
  font-size: 0.74em;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  border-radius: 3px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.acronym:hover .acronym-full,
.acronym:focus-visible .acronym-full {
  opacity: 1;
  transform: translate(-50%, 0);
}
.slip-hint {
  display: block;
  /* only as wide as its words, so a card resting on the blank end of
     this row isn't mistaken for covering them */
  width: fit-content;
  margin-top: 0.55em;
  font-size: 0.68em;
  opacity: 0.6;
}

/* ── the stat strip sits on the board itself ── */
.slip--strip {
  background: none;
  box-shadow: none;
  padding: 0;
  color: var(--on-folder);
}
/* Always one line. When the chips outrun the folder's width, fitStatStrip
   hides the most redundant ones — those repeated on a card just below —
   rather than letting the row wrap into the cards' space. */
.slip--strip {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 0.45em 0.5em;
}
.slip--strip > * { flex-shrink: 0; white-space: nowrap; }
.stat[hidden] { display: none; }
.strip-label {
  /* .mono-tag also sets a colour, and its muted grey is meant for the
     page background, not for the board — so state the board ink here
     or the label washes out on the darker two folders. */
  color: var(--on-folder);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.1em;
  opacity: 0.9;
}
.stat {
  background: var(--slip-cream);
  color: var(--ink);
  padding: 0.32em 0.66em;
  border-radius: 2px;
  font-size: 0.86em;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat:hover { transform: translateY(-3px) rotate(-1.4deg); }
.stat b { font-weight: 600; }

/* ── the Structure deck: four cards in one spot, one read at a time ──
   All four share a single grid cell, so the deck is as tall as its
   tallest card and every card covers the same ground. data-pos (set by
   initDeck) says where each sits in the deck, 0 on top; turning the
   deck only changes those, and the cards ease to their new places. */
.slip--stack { background: none; box-shadow: none; padding: 0; cursor: pointer; display: grid; }
.stack-card {
  grid-area: 1 / 1;
  position: relative;
  padding: 5% 5.4%;
  box-sizing: border-box;
  background: var(--slip-white);
  transition: transform 0.34s cubic-bezier(0.22, .85, .35, 1);
}
/* the sheets fan down and to the left — the deck sits against the
   folder's right edge, so fanning right would widen the document */
.stack-card[data-pos="0"] { z-index: 4; }
.stack-card[data-pos="1"] { z-index: 3; transform: rotate(2.2deg)  translate(-1.8%, 1.8%); }
.stack-card[data-pos="2"] { z-index: 2; transform: rotate(-1.7deg) translate(-3.2%, 3.6%); }
.stack-card[data-pos="3"] { z-index: 1; transform: rotate(3.6deg)  translate(-4.6%, 5.4%); }
/* only the top card and the one under it are printed; the rest read as
   blank paper. The second shows when the top one slides aside. */
.stack-card > * { transition: opacity 0.2s ease; }
.stack-card[data-pos="2"] > *,
.stack-card[data-pos="3"] > * { opacity: 0; }
.slip--stack:hover .stack-card[data-pos="0"],
.slip--stack:focus-visible .stack-card[data-pos="0"] {
  transform: translate(-1.6%, -2.2%);
}
.slip--stack:hover .stack-card[data-pos="1"] { transform: rotate(3.8deg)  translate(-4.2%, 3.2%); }
.slip--stack:hover .stack-card[data-pos="2"] { transform: rotate(-3.6deg) translate(-6.8%, 6.4%); }
.slip--stack:hover .stack-card[data-pos="3"] { transform: rotate(6deg)    translate(-9.2%, 9%); }
/* turning: the card is drawn out to the left, above everything, then
   drops to its new place in the deck */
.stack-card.is-pulled,
.slip--stack:hover .stack-card.is-pulled {
  z-index: 6;
  transform: translate(-58%, -3%) rotate(-6deg);
}
/* the nudge: until the deck is first turned, the top card now and then
   dips down and aside to uncover the top of the card under it — its
   label and title, the clearest sign there is a next card */
.slip--stack.is-nudging .stack-card[data-pos="0"] {
  animation: deck-nudge 3.6s ease-in-out 1.4s infinite;
}
@keyframes deck-nudge {
  0%, 60%, 100% { transform: none; }
  72%           { transform: translate(-7%, 36%) rotate(-3deg); }
  82%           { transform: translate(-6%, 30%) rotate(-2.6deg); }
}
/* the tag is pinned on top of the deck; it steps out of the way while the
   card dips past it, in time with the nudge */
.slip--stack.is-nudging .stack-flag {
  animation: deck-nudge-flag 3.6s ease-in-out 1.4s infinite;
}
@keyframes deck-nudge-flag {
  0%, 60%, 96%, 100% { opacity: 1; }
  66%, 90%           { opacity: 0; }
}
.stack-flag {
  position: absolute; z-index: 5;
  left: 7%; bottom: -1.05em;
  padding: 0.24em 0.62em;
  font-size: 0.68em;
  background: var(--slip-mint);
  color: var(--ink);
  transition: transform 0.26s ease;
}
.slip--stack:hover .stack-flag { transform: translateY(0.35em) rotate(-2.2deg); }

/* ── hover + lift-to-front ── */
.slip:hover,
.slip:focus-visible {
  --hy: -1.5%;
  --sc: 1.022;
  z-index: 30;
}
.slip--strip:hover,
.slip--stack:hover { --hy: 0px; --sc: 1; }
/* A flipped card stays put and stays the same size — it only raises a
   little so the one you're reading is unambiguously on top. */
/* A flipped card no longer rises to the top: layoutDesk already keeps
   every card clear of the flip window's full height, so the paragraph
   it turns to is visible where it lies — and raising it would have laid
   its bottom edge over the card beneath instead. */


/* ══════════════════════════════════════════
   SLOT LAYOUT
   Three cards plus the stat strip per folder, and a deliberately
   different composition on each page. Overlaps still only ever land
   on the blank margin of the paper underneath — the padding-right
   values are what absorb them.
   ══════════════════════════════════════════ */

/* The stat strip is the one element treated identically everywhere: a
   single line across the whole folder. */
.slip[data-slot="chips"] { left: 0; top: 0; width: 100%; z-index: 9; }

/* These tops are where each card would like to sit. Where the words
   won't allow it — a narrow window, the minimum type size, longer
   Spanish — layoutDesk moves a card down just far enough, and grows the
   folder if the lowest one runs off the paper. */

/* ── HOME · a broad lead sheet with the design card riding its
      shoulder, and the structure pile dropped in the bottom-right ── */
/* up from 14/20/68 now the stat tags keep to one line */
.spread[data-page="home"] .slip[data-slot="lead"] {
  left: -2%; top: 11%; width: 52%; --rot: -1.3deg; z-index: 11;
  padding-right: 7%;
}
.spread[data-page="home"] .slip[data-slot="aside"] {
  left: 47%; top: 17%; width: 38%; --rot: 2.4deg; z-index: 13;
}
.spread[data-page="home"] .slip[data-slot="stack"] {
  left: 62%; top: 65%; width: 36%; --rot: -3.2deg; z-index: 15;
}

/* ── CHILDREN · looser and more scattered, the way a kid's folder
      would actually look. Nothing hides behind a click here. ── */
.spread[data-page="children"] { --slip-fs: clamp(13.5px, 1.86cqw, 26px); }
.spread[data-page="children"] .slip[data-slot="lead"] {
  left: 0; top: 11%; width: 56%; --rot: -1deg; z-index: 11;
  padding-right: 6%;
}
.spread[data-page="children"] .slip[data-slot="aside"] {
  left: 58%; top: 15%; width: 40%; --rot: 3.4deg; z-index: 13;
}
/* out from the left edge into the open middle of the folder, under the
   gap between the lead card and the yellow one */
.spread[data-page="children"] .slip[data-slot="fact"] {
  left: 31%; top: 62%; width: 46%; --rot: -2.6deg; z-index: 14;
}
/* the open corner under the yellow card, clear of the red one */
.spread[data-page="children"] .slip[data-slot="clip"] {
  left: 53%; top: 55%; width: 44%; --rot: 2deg; z-index: 12;
}

/* ── PARENTS · the most orderly of the three: a wide lead across the
      top, two cards squared up beneath it ── */
/* up from 14/51/57 now the stat tags keep to one line */
.spread[data-page="parents"] .slip[data-slot="lead"] {
  left: 1%; top: 11%; width: 64%; --rot: -0.7deg; z-index: 11;
  padding-right: 6%;
}
.spread[data-page="parents"] .slip[data-slot="aside"] {
  left: 0; top: 48%; width: 44%; --rot: 1.8deg; z-index: 13;
  padding-right: 5%;
}
.spread[data-page="parents"] .slip[data-slot="fact"] {
  left: 46%; top: 54%; width: 52%; --rot: -1.9deg; z-index: 14;
}

/* ── PROVIDERS · a clinician's desk: the overview laid wide on the
      left, the week-12 card propped against it, the timing note dropped
      across the bottom ── */
.spread[data-page="providers"] .slip[data-slot="lead"] {
  left: -1%; top: 11%; width: 57%; --rot: -1deg; z-index: 11;
  padding-right: 6%;
}
.spread[data-page="providers"] .slip[data-slot="aside"] {
  left: 56%; top: 15%; width: 42%; --rot: 2.2deg; z-index: 13;
}
.spread[data-page="providers"] .slip[data-slot="fact"] {
  left: 38%; top: 60%; width: 50%; --rot: -1.7deg; z-index: 14;
}

/* ══════════════════════════════════════════
   THE FLIP — how extra detail is revealed
   Instead of the card growing (which used to push its own text under
   whatever was layered on top of it), the paragraph slides out to the
   left and the second one arrives from the right. Nothing changes
   size, so nothing can end up hidden beneath a neighbour.
   Used on the folder and in the blocks below it alike.
   ══════════════════════════════════════════ */
.flip { cursor: pointer; }
.flip-window { overflow: hidden; }
.flip-track {
  display: flex;
  /* stretch means the track — and so the card — is always as tall as
     the LONGER paragraph, which is what keeps the height locked */
  align-items: stretch;
  transition: transform 0.44s cubic-bezier(0.4, 0, 0.15, 1);
}
.flip-track > * { flex: 0 0 100%; margin: 0; }
.flip.flipped .flip-track { transform: translateX(-100%); }
/* The window already clips whichever paragraph is off to the side, so
   don't hide it with visibility — that would kill half the slide.
   JS marks the inactive one aria-hidden instead. */


/* ══════════════════════════════════════════
   JUMP TABS — hover above the stack, then
   stick to the edge of the window
   ══════════════════════════════════════════ */
/* The column beside the site header: language switch on top, the jump
   tabs one row down. It stays put — no pinning, no floating. */
.page-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.9rem;
}
.jump-tags {
  display: flex;
  gap: 0.4rem;
}
/* The footer CTA's button on a pale paper fill at rest — the ink sits in
   the letters and moves to the fill on hover, so the two read as the same
   control with these a rank quieter. */
.jump-tag {
  font-size: 0.84rem;
  font-weight: 500;
  color: #4B473E;
  padding: 0.6rem 1.3rem;
  border: none;
  border-radius: var(--r-sm);
  background: #F8F0E3;
  transition: background var(--ease), color var(--ease),
              transform var(--ease), box-shadow var(--ease);
}
.jump-tag:hover {
  background: #4B473E;
  color: var(--bg-card);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ══════════════════════════════════════════
   LANGUAGE SWITCH
   A rounded track with a rounded-square knob that carries the current
   language. Three cues move together so the change can't be missed:
   the knob slides, its code changes, and the track changes colour.
   Everything visual keys off <html lang>, which the head script sets
   before first paint — so the switch is already in the right place
   when the page appears. No shadow in or behind it anywhere.
   ══════════════════════════════════════════ */
.lang-toggle {
  --track-w: 5.1rem;
  --knob-w: 2.1rem;
  --inset: 4px;
  position: relative;
  flex-shrink: 0;
  width: var(--track-w);
  height: 2.2rem;               /* the jump tabs' height, so the column lines up */
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #C4502E;          /* English: the Sequence dot */
  transition: background-color 0.32s ease, transform var(--ease);
}
.lang-knob {
  position: absolute;
  top: var(--inset);
  bottom: var(--inset);
  left: var(--inset);
  width: var(--knob-w);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--bg-card);
  /* English sits at the right-hand end */
  transform: translateX(calc(var(--track-w) - var(--knob-w) - 2 * var(--inset)));
  transition: transform 0.32s cubic-bezier(.4, 0, .2, 1);
}
.lang-code {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
}
/* Spanish: the knob crosses to the left and the track turns slip yellow */
:root[lang="es"] .lang-toggle { background: var(--slip-yellow); }
:root[lang="es"] .lang-knob   { transform: translateX(0); }

.lang-toggle:hover { transform: translateY(-2px); }
.lang-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }


/* ══════════════════════════════════════════
   LIGHT / DARK SWITCH
   The language switch's shape, smaller, on its own row under the
   navigation label: a track and a square knob. The knob carries a
   lightbulb built from flat shapes — lit, with rays, for light mode;
   out, with no rays, for dark. The knob slides and the track changes
   colour with it, as the language switch's does. Flat throughout.
   ══════════════════════════════════════════ */
.theme-toggle {
  --track-w: 2.5rem;
  --knob-w: 1.12rem;
  --inset: 3px;
  position: relative;
  flex-shrink: 0;
  width: var(--track-w);
  height: 1.55rem;
  /* its own row, just under the "navigation" label and lined up with it;
     the head above gives up its bottom margin to make room */
  align-self: flex-start;
  margin: -0.45rem 0 1.05rem 0.5rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #839ab7;          /* light: the Parents folder blue */
  transition: background-color 0.32s ease, transform var(--ease);
}
.theme-knob {
  position: absolute;
  top: var(--inset);
  bottom: var(--inset);
  left: var(--inset);
  width: var(--knob-w);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #FFFDF7;
  transition: transform 0.32s cubic-bezier(.4, 0, .2, 1);
}
.bulb { width: 0.92rem; height: 0.92rem; display: block; }
.bulb-glass { fill: #E0C86A; transition: fill 0.32s ease; }
.bulb-base  { fill: #6B6455; }
.bulb-ray   { fill: #E0C86A; transition: opacity 0.32s ease; }

/* dark: the knob crosses right, the bulb goes out, the track darkens */
.theme-dark .theme-toggle { background: #6B6250; }
.theme-dark .theme-knob {
  transform: translateX(calc(var(--track-w) - var(--knob-w) - 2 * var(--inset)));
}
.theme-dark .bulb-glass { fill: #A79D8B; }
.theme-dark .bulb-ray   { opacity: 0; }

.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }


/* ══════════════════════════════════════════
   DARK MODE
   A deep olive-brown desk instead of cream paper. Everything built on
   the page tokens follows; the folders, the paper cards on them and the
   colour blocks below keep their own colours, as objects lying on the
   darker desk. Treatment pathways keeps its own palette, so these
   overrides stop at .in-sequence; it gets dimmed paintings instead (below).
   ══════════════════════════════════════════ */
.theme-dark .app:not(.in-sequence) {
  --bg:            #2F2B22;
  --bg-sunken:     #28241C;
  --bg-card:       #3A352B;
  --bg-tab:        #403A2F;
  --bg-tab-hover:  #473F33;
  --border:        #4A4336;
  --border-strong: #5A5243;
  --text-1:        #EDE6D6;
  --text-2:        #CFC6B2;
  --text-3:        #A99F8A;
  background: var(--bg);
  /* body sets the base ink, and body sits outside .app — restate it here
     so anything that simply inherits (the site title) turns light too */
  color: var(--text-1);
}
.theme-dark body:not(:has(.app.in-sequence)) { background: #2F2B22; }
.theme-dark .app:not(.in-sequence) .sidebar { background: #2A261E; }
/* the Pages dots run dark to light, and the darkest vanish on the desk */
.theme-dark .app:not(.in-sequence) .dot--supplemental { background: #8C7A68; }
.theme-dark .app:not(.in-sequence) .dot--articles     { background: #A88A63; }
/* the jump tabs were cream pills on cream; here they're a shade lifted
   off the desk, and still fill with ink-light on hover */
.theme-dark .app:not(.in-sequence) .jump-tag {
  background: var(--bg-tab);
  color: var(--text-1);
}
.theme-dark .app:not(.in-sequence) .jump-tag:hover {
  background: var(--text-1);
  color: var(--bg);
}
.theme-dark .app:not(.in-sequence) .lang-toggle:focus-visible { outline-color: var(--text-1); }
/* the knob is paper-white in both modes, as the lightbulb knob is; on the
   dark card colour its dark EN / ES lettering disappeared */
.theme-dark .lang-knob { background: #FFFDF7; }

/* Dimmed, not recoloured: the folders and everything lying on them keep
   their own colours, just turned down so they sit in the darker room
   instead of glowing off it. The board most, the stickers a little less,
   the paper and the colour blocks only gently, so their words stay crisp. */
.theme-dark .app:not(.in-sequence) .spread-shape   { filter: brightness(0.78); }
.theme-dark .app:not(.in-sequence) .spread-sticker { filter: brightness(0.85); }
.theme-dark .app:not(.in-sequence) .slip:not(.slip--strip),
.theme-dark .app:not(.in-sequence) .stat,
.theme-dark .app:not(.in-sequence) .ocard          { filter: brightness(0.9); }
/* the blocks below keep their slight muting in the dark too */
.theme-dark .app:not(.in-sequence) .ocard.ocard    { filter: saturate(0.86) brightness(0.9); }

/* Treatment pathways keeps its paintings and its cream cards, but in dark
   mode the paintings are dimmed by half — so the words that sit straight
   on them turn cream, while the cards and buttons keep their dark ink. */
.theme-dark .seq-backdrop { filter: brightness(0.5); }
.theme-dark .app.in-sequence {
  --text-1: #EDE6D6;
  --text-2: #DDD5C2;
  --text-3: #B9AF9A;
  color: var(--text-1);
}
.theme-dark .app.in-sequence :is(.seq-card, .choice-card, .seq-inline-note,
                                 .btn-prev, .btn-next, .btn-restart, .btn-solid) {
  --text-1: #33302A;
  --text-2: #6F6756;
  --text-3: #A79D8B;
}
/* the ink the cards inherit was settled at .app, in cream; reset it (the
   buttons set their own colours, so they're left out) */
.theme-dark .app.in-sequence :is(.seq-card, .choice-card, .seq-inline-note) {
  color: var(--text-1);
}
.theme-dark .app.in-sequence .side-item:hover,
.theme-dark .app.in-sequence .side-item.active { background: rgba(20, 18, 14, 0.38); }
.theme-dark .app.in-sequence .sidebar-foot { border-top-color: rgba(237, 230, 214, 0.18); }
.theme-dark .app.in-sequence .progress-bar { background: rgba(237, 230, 214, 0.2); }


/* ── Sidebar open (docked): the folders run wall-to-wall ── */
@media (min-width: 861px) {
  .app:not(.sb-collapsed) .library-scroll {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .app:not(.sb-collapsed) .page-head { padding: 3rem 2.25rem 1.75rem; }
  .app:not(.sb-collapsed) .library-scroll > .tab-panel { margin: 0 2.25rem; }
  /* the contact block deliberately keeps its narrower column in both
     sidebar states — not running full width is the point of it */
}


/* ══════════════════════════════════════════
   BELOW THE FOLDER
   The content that came off the folders: full-bleed blocks of cards
   that touch each other and the block's outer edge. Borderless,
   shadowless, no gutters — one solid field of colour.
   ══════════════════════════════════════════ */
.below-fold { margin-top: 2.6rem; }
.below-fold[hidden] { display: none; }
.out-block[hidden] { display: none; }

.out-head {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0 2.25rem 0.9rem;
}
.out-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.015em;
}
.out-count { color: var(--text-3); }

.out-grid { display: grid; gap: 0; }
.out-grid--4 { grid-template-columns: 1fr 1fr; }
.out-grid--2 { grid-template-columns: 1fr 1fr; }

.ocard {
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 2.6rem);
  color: var(--ink);
  cursor: pointer;
  /* borderless and flush: the cards butt straight up against each
     other and the edge of the page */
  border: none;
  outline-offset: -4px;
  transition: opacity 0.55s ease, transform 0.55s ease;
  /* a shade softer than the same papers on the folders, so the blocks
     below don't outshout the folder above them */
  filter: saturate(0.86);
}
.ocard--red    { background: var(--slip-red);    color: #FCF3E6; }
.ocard--cream  { background: var(--slip-white); }
.ocard--yellow { background: var(--slip-yellow); }
.ocard--ruled  {
  background: var(--slip-blue);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 1.6em, rgba(51, 48, 42, .1) 1.6em calc(1.6em + 1px));
}

.ocard-head { display: flex; align-items: center; gap: 0.7em; margin-bottom: 0.7em; }
.ocard-pill {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  padding: 0.24em 0.6em; border-radius: 2px;
  background: rgba(51, 48, 42, .1);
  white-space: nowrap;
}
.ocard--red .ocard-pill { background: rgba(252, 243, 230, .22); color: #FCF3E6; }
.ocard-cat {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ocard--red .ocard-cat,
.ocard--red .ocard-hint { color: rgba(252, 243, 230, .74); }
.ocard-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  line-height: 1.14;
  letter-spacing: -0.008em;
  margin-bottom: 0.5em;
}
.ocard-body {
  font-size: clamp(0.9rem, 1.05vw, 1.02rem);
  line-height: 1.6;
}
.ocard-hint {
  display: block;
  margin-top: 1em;
  font-size: 0.7rem;
  opacity: 0.62;
  transition: opacity var(--ease);
}
.ocard:hover .ocard-hint { opacity: 0.95; }

/* Scroll reveal. The findings are asked for in the order 03, 02, 01,
   04, which is not DOM order — hence the per-card delays. */
.ocard { opacity: 0; transform: translateY(18px); }
.ocard.in { opacity: 1; transform: none; }
.out-grid--4 .ocard:nth-child(1) { transition-delay: 180ms; }
.out-grid--4 .ocard:nth-child(2) { transition-delay:  90ms; }
.out-grid--4 .ocard:nth-child(3) { transition-delay:   0ms; }
.out-grid--4 .ocard:nth-child(4) { transition-delay: 270ms; }
.out-grid--2 .ocard:nth-child(2) { transition-delay:  90ms; }


/* the end-of-page bar keeps its own narrower column */
.library-tail {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 2.25rem var(--scroll-pad-b);
}

/* ── Entrance: the folders drop into place, one at a time ── */
@keyframes card-rise {
  from { translate: 0 56px; opacity: 0; }
  55%  { opacity: 1; }
  to   { translate: 0 0; opacity: 1; }
}
.spread { animation: card-rise 0.55s cubic-bezier(0.22, 0.85, 0.35, 1) both; }
#spread-home      { animation-delay: 0.08s; }
#spread-children  { animation-delay: 0.26s; }
#spread-parents   { animation-delay: 0.44s; }
#spread-providers { animation-delay: 0.62s; }
/* set by JS once the entrance has played, so it never replays */
.page-stack.settled .spread { animation: none; }


/* ══════════════════════════════════════════
   TAB PANELS
   ══════════════════════════════════════════ */
.tab-panel {
  position: relative;
  z-index: 1;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.75rem 2.2rem;
}
.tab-panel[hidden] { display: none; }


/* ══════════════════════════════════════════
   SOLID BUTTON (footer + sequence)
   ══════════════════════════════════════════ */
.btn-solid {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.6rem 1.3rem;
  background: var(--text-1);
  color: var(--bg-card);
  font-size: 0.84rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn-solid:hover {
  background: var(--pg-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}


/* ══════════════════════════════════════════
   DOCUMENT PAGES
   Articles / Supplemental. Not one border anywhere: the
   button row is defined only by the buttons in it, and the PDFs are
   painted to canvas so there's no viewer chrome or page gutters.
   ══════════════════════════════════════════ */
.doc-page {
  background: none;
  border: none;
  border-radius: 0;
  padding: 1.6rem 0 4rem;
}
/* The reader stands alone — no site title, blurb or jump tabs above it.
   The language switch is the exception: it keeps the same spot it has on
   every other page, so it never moves as you navigate, and Resources —
   the page it most affects — can still reach it. */
.app.in-docs .page-head { padding-bottom: 0; }
.app.in-docs .page-head-text,
.app.in-docs .jump-tags { display: none; }
.app.in-docs .page-head-aside { margin-left: auto; }

/* Resources: nothing but the documents, each shown as its own first page
   and opening whole. One even-height row, so the set reads as a shelf
   however different the pages' proportions are. */
.resource-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.75rem;
}
.resource-item {
  display: block;
  height: clamp(15rem, 44vh, 27rem);
  transition: transform var(--ease);
}
.resource-item canvas {
  display: block;
  height: 100%;
  width: auto;
}
.resource-item:hover { transform: translateY(-3px); }
.resource-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.doc-placeholder {
  padding: 5rem 0;
  text-align: center;
  color: var(--text-3);
  font-size: 0.94rem;
}

/* the row exists only as the buttons themselves */
.doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 2rem;
}
/* plain typed text until hovered, when a rounded panel a touch darker
   than the page appears behind it. The open document holds that state. */
.doc-btn {
  font-size: 0.86rem;
  font-weight: 450;
  color: var(--text-2);
  padding: 0.46rem 0.85rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  transition: background var(--ease), color var(--ease);
}
.doc-btn:hover,
.doc-btn:focus-visible,
.doc-btn.on {
  background: color-mix(in srgb, var(--bg) 88%, #6b6455);
  color: var(--text-1);
}
.doc-btn--cite { font-family: var(--font-mono); font-size: 0.78rem; }
.doc-btn:disabled { opacity: 0.4; cursor: default; }

.doc-intro-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--text-1);
  margin-bottom: 0.7rem;
}

/* pages butt straight together — no gap, no shadow, no page frame */
.doc-view { display: block; }
/* each slot reserves its page's exact height before that page is painted,
   so the scrollbar is right from the start and nothing shifts */
.doc-slot { display: block; width: 100%; }
.doc-canvas { display: block; width: 100%; height: auto; }
.doc-msg {
  padding: 3rem 0;
  text-align: center;
  color: var(--text-3);
  font-size: 0.9rem;
}


.cite-text { font-size: 0.95rem; line-height: 1.62; color: var(--text-2); }
.cite-status { color: var(--text-3); }


/* ══════════════════════════════════════════

/* ══════════════════════════════════════════
   FIXED DESK FOOTER
   The Sequence prompt + study contact. Not fixed —
   it sits at the end of the page, so the reader only
   meets it once they've reached the bottom.
   ══════════════════════════════════════════ */
.desk-footer {
  position: relative;
  z-index: 4;
  margin-top: 2.4rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border-strong);
}
.desk-footer[hidden] { display: none; }

.footer-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
  padding: 1.4rem 2.25rem;
}
.footer-cta {
  display: flex; align-items: center; gap: 0.9rem;
  min-width: 0;
}
.footer-cta[hidden] { display: none; }
.footer-eyebrow { flex-shrink: 0; color: var(--text-3); }
.footer-line {
  font-size: 0.88rem; line-height: 1.4;
  color: var(--text-2);
}
.footer-line strong { color: var(--text-1); font-weight: 600; }
.footer-cta .btn-solid { margin-top: 0; flex-shrink: 0; }

.footer-contact {
  display: flex; align-items: center;
  gap: 0.5rem 1rem; flex-wrap: wrap;
  flex-shrink: 0;
}
.footer-link {
  font-size: 0.85rem;
  color: var(--text-1);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--ease), color var(--ease);
}
.footer-link:hover { color: var(--pg-deep); border-color: var(--pg-deep); }
.footer-reg { color: var(--text-3); }

/* the Contact jump tab scrolls here and briefly marks the block */
.footer-contact { border-radius: var(--r-sm); padding: 0.3rem 0.55rem; }
.footer-contact.flash { animation: contact-flash 1.5s ease; }
@keyframes contact-flash {
  0%, 100% { background: transparent; }
  18%, 62% { background: var(--pg-pill); }
}

@media (max-width: 900px) {
  .footer-inner { padding: 1.1rem 1.1rem; gap: 0.7rem 1rem; }
  .footer-contact .footer-reg { display: none; }
}


/* ══════════════════════════════════════════
   MODAL (the "Cite this article" box)
   ══════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 1.2rem;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(40, 36, 28, .58);
  animation: modal-fade 0.25s ease;
}
.modal-panel {
  position: relative; z-index: 1;
  width: min(94vw, 600px);
  background: var(--bg-card);
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  padding: 0.9rem 1.2rem 1.1rem;
  animation: modal-pop 0.32s cubic-bezier(0.22, 0.9, 0.35, 1);
}
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
}
.modal-bar {
  display: flex; align-items: center; gap: 0.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.modal-heading {
  font-family: var(--font-serif);
  font-weight: 600; font-size: 1.1rem;
  flex: 1;
}
.modal-close {
  font-size: 1.5rem; line-height: 1;
  color: var(--text-3);
  padding: 0 0.2rem;
  transition: color var(--ease);
}
.modal-close:hover { color: var(--text-1); }

.modal-stage {
  position: relative;
  min-height: 12.5rem;
  padding: 1.1rem 0.2rem 0.4rem;
}

.modal-nav {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.modal-arrow {
  font-size: 1rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-2);
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.modal-arrow:hover:not(:disabled) {
  color: var(--text-1);
  background: var(--bg-sunken);
}
.modal-arrow:disabled { opacity: 0.35; cursor: default; }


/* ══════════════════════════════════════════
   TYPING ANIMATION
   ══════════════════════════════════════════ */
.type-wrap { display: grid; }
.type-ghost, .type-live { grid-area: 1 / 1; }
.type-ghost { visibility: hidden; }
.type-wrap.typing .type-live::after {
  content: '▍';
  margin-left: 1px;
  color: var(--pg-deep, var(--text-2));
  animation: caret-blink 0.85s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }


/* ══════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease,
              box-shadow 0.25s ease, background 0.25s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════
   SEQUENCE BACKDROP
   Full-bleed painted artwork behind the whole app — sidebar and top
   bar included — for the stages that call for it.
   ══════════════════════════════════════════ */

/* Only inside the Sequence does .app become a stacking context, so the
   backdrop's negative z-index sits above the page canvas but below every
   scrap of content. The library view is left exactly as it was. */
.app.in-sequence { position: relative; z-index: 0; }

.seq-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.app.in-sequence .seq-backdrop { display: block; }

/* Fixed to the viewport, so the artwork holds still while the stage
   scrolls over it. Nothing here animates unless the image actually
   changes — a layer that keeps its picture is simply never touched. */
.seq-bg-layer {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.85s ease;
}
.seq-bg-layer.is-on { opacity: 1; }
/* Used for the first paint on entering the Sequence, where the artwork
   should already be there rather than arriving. */
.seq-bg-layer.is-instant { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .seq-bg-layer { transition: none; }
}

/* ── Chrome steps aside so the artwork is genuinely full-bleed ── */
.app.in-sequence .sidebar { background: transparent; }
/* The lettering sits straight on painted artwork here, so the two greys
   step down a shade to carry themselves against it. Darker ink rather
   than a halo — the paintings stay clean behind the letters. */
.app.in-sequence {
  --text-2: #5E5749;
  --text-3: #897F6D;
}
/* Transparent, so the painting carries straight through the header —
   which also means it can't stay pinned: a see-through bar with the
   stage sliding behind it is just two layers of text on top of each
   other. It scrolls away instead, and every stage opens at the top,
   so the progress read is there each time you arrive at one. */
.app.in-sequence .seq-topbar {
  position: static;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}
/* Opaque beige chips would read as holes punched in the painting */
.app.in-sequence .side-item:hover,
.app.in-sequence .side-item.active {
  background: rgba(255, 253, 247, 0.55);
}
.app.in-sequence .sidebar-foot { border-top-color: rgba(51, 48, 42, 0.14); }
.app.in-sequence .progress-bar { background: rgba(51, 48, 42, 0.14); }

/* ══════════════════════════════════════════
   SEQUENCE VIEW
   ══════════════════════════════════════════ */
.seq-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem 2rem;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: padding 0.35s ease;
}
.app.sb-collapsed .seq-topbar { padding-left: 3.4rem; }
.seq-progress {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.progress-bar {
  width: 150px;
  height: 5px;
  border-radius: 999px;
  background: var(--bg-tab);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #C9BC7F;
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
}

.sequence-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 4rem;
}

/* Stage entrance animation */
.stage-container > * {
  animation: stage-up 0.5s ease both;
}
.stage-container > *:nth-child(2) { animation-delay: 0.06s; }
.stage-container > *:nth-child(3) { animation-delay: 0.12s; }
.stage-container > *:nth-child(4) { animation-delay: 0.18s; }
.stage-container > *:nth-child(5) { animation-delay: 0.24s; }
.stage-container > *:nth-child(6) { animation-delay: 0.30s; }
.stage-container > *:nth-child(7) { animation-delay: 0.36s; }
/* Rebuilt in place for a language switch — the words change, nothing
   moves. is-still stays for the life of that render: taking animation
   away later would start the entrance it's suppressing. is-settling is
   lifted after two frames, so hovers animate again from then on. */
.stage-container.is-still > * { animation: none; }
.stage-container.is-settling,
.stage-container.is-settling * { transition: none !important; }
@keyframes stage-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stage-eyebrow { margin-bottom: 0.7rem; }
.stage-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.stage-subtitle {
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 58ch;
  margin-bottom: 1.75rem;
}
.seq-note {
  display: block;
  margin: -1rem 0 1.75rem;
}

/* Sequence cards — flat blocks like the rest of the site: square corners,
   no outline, no shadow. The header band keeps its own tone, so it still
   reads as the card's tab. */
.seq-card {
  background: var(--bg-card);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.seq-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1.1rem;
  background: var(--bg-sunken);
}
.seq-card-head .seq-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.seq-card-head .seq-title {
  font-family: var(--font-serif);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-2);
}
.seq-card-body { padding: 1.1rem 1.25rem; }
.seq-card-body p {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 0.6rem;
}
.seq-card-body p:last-child { margin-bottom: 0; }
.seq-card-body strong { color: var(--text-1); font-weight: 600; }

.seq-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.seq-cols .seq-card { margin-bottom: 1.1rem; }

/* Choice cards */
.choice-prompt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 1.4rem 0 0.7rem;
}
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.choice-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  padding: 1.2rem 1.25rem;
  /* flat like the info cards; the fill alone carries hover and the pick */
  background: var(--bg-card);
  border: none;
  border-radius: 0;
  transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.choice-card:hover {
  transform: translateY(-4px);
  background: var(--green-soft);
}
.choice-card.selected {
  background: var(--green-bg);
}
.choice-card.dimmed { opacity: 0.55; }
.choice-card.dimmed:hover { opacity: 0.85; }
.choice-label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
}
.choice-desc {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--text-2);
}
.choice-meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: auto;
  padding-top: 0.4rem;
}

/* The arrival of whatever a pick reveals: it rises into place under the
   cards, and the rest of the stage stays exactly where it was. */
.choice-result.is-in > * { animation: stage-up 0.45s ease both; }

/* Stage 5: the study's four sequences, the reader's own marked */
.path-rows { margin-bottom: 0.9rem; }
.path-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.42rem 0.6rem;
  border-bottom: 1px dashed var(--border);
  font-size: 0.84rem;
  color: var(--text-2);
}
.path-row:last-child { border-bottom: none; }
.path-row.is-mine {
  background: var(--green-bg);
  border-radius: 0;
  border-bottom-color: transparent;
  color: var(--text-1);
  font-weight: 600;
}
.path-n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
}
.checkpoint-row + p { margin-top: 0.85rem; }
.path-aside {
  font-size: 0.82rem;
  color: var(--text-3);
}

/* Checkpoint rows */
.checkpoint-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--border);
}
.checkpoint-row:last-child { border-bottom: none; }
.checkpoint-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C9BC7F;
  flex-shrink: 0;
}
.checkpoint-label {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-2);
}
.checkpoint-value {
  font-size: 0.82rem;
  font-weight: 550;
  color: var(--text-1);
  text-align: right;
}

/* Inline info note (trimmed replacement for info popups) */
.seq-inline-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--text-3);
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--green-border);
  background: var(--green-soft);
  border-radius: 0;
  margin-bottom: 1.25rem;
}

/* Stage nav */
.stage-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
.btn-prev {
  font-size: 0.84rem;
  color: var(--text-2);
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: color var(--ease), border-color var(--ease), transform var(--ease);
}
.btn-prev:hover { color: var(--text-1); border-color: var(--border-strong); transform: translateX(-2px); }
.btn-next {
  font-size: 0.88rem;
  font-weight: 550;
  padding: 0.65rem 1.7rem;
  border-radius: var(--r-sm);
  background: var(--text-1);
  color: var(--bg-card);
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease), opacity var(--ease);
}
.btn-next:hover:not(:disabled) {
  background: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-next:disabled { opacity: 0.35; cursor: not-allowed; }

/* Completion */
.completion-wrap { text-align: center; }
.completion-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0.7rem 0 0.8rem;
  letter-spacing: -0.01em;
}
.completion-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 54ch;
  margin: 0 auto 2rem;
}
.completion-wrap .seq-card { text-align: left; }
.completion-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.btn-restart {
  font-size: 0.86rem;
  color: var(--text-2);
  padding: 0.62rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  transition: color var(--ease), border-color var(--ease);
}
.btn-restart:hover { color: var(--text-1); border-color: var(--border-strong); }
.completion-actions .btn-solid { margin-top: 0; align-self: auto; }
.completion-wrap .btn-solid:hover { background: var(--green-deep); }


/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
/* Narrow: the collage can't hold — the folder stops being a fixed
   spread and the cards unstack into normal flow. The blocks below it
   drop to a single column. */
@media (max-width: 860px) {
  .page-head { flex-direction: column; gap: 0.9rem; }
  .page-head-aside { margin-top: 0; gap: 0.9rem; }
  /* the jump tabs shrink here, so the switch comes down to their height */
  .lang-toggle { --track-w: 4.4rem; --knob-w: 1.85rem; height: 1.9rem; }
  /* up in the top bar, at its right-hand end (moved there by JS) */
  .crumb-bar { padding-right: 1.1rem; }
  .crumb-bar .lang-toggle { margin-left: auto; }
  .site-title { font-size: 2.05rem; margin-bottom: 0.65rem; }
  .site-blurb { font-size: 0.93rem; line-height: 1.62; }
  .resource-grid { flex-direction: column; align-items: stretch; }
  .resource-item { height: auto; }
  .resource-item canvas { width: 100%; height: auto; }
  /* two across: the colour blocks tile as a grid rather than a tower */
  .out-grid--4, .out-grid--2 { grid-template-columns: 1fr 1fr; }
  .out-grid--4 .ocard, .out-grid--2 .ocard { transition-delay: 0ms !important; }
  .ocard { padding: 1.05rem 0.9rem 1.15rem; }
  .ocard-head { flex-wrap: wrap; gap: 0.35em 0.6em; margin-bottom: 0.6em; }
  .ocard-pill { font-size: 0.7rem; }
  .ocard-cat { font-size: 0.62rem; }
  .ocard-title { font-size: 1.06rem; }
  .ocard-body { font-size: 0.84rem; line-height: 1.5; }
  .out-head { padding: 0 1.1rem 0.7rem; }
  .library-tail { padding: 0 1.1rem var(--scroll-pad-b); }

  /* ── the folders: edge to edge, no side tab, big humps ──
     layoutPile / setPhoneShape redraw each folder for this width and
     size it to its pile; the aspect-ratio comes from there. */
  .page-stack {
    /* the closed folders stand clear of the open one, each showing a band
       of its colour above it; the whole stack scales with the width */
    --step: clamp(33px, 7.4cqw, 45px);
    margin: 0 -1.1rem;
  }
  .spread { --slip-fs: 13.5px; }
  .spread[data-page="parents"],
  .spread[data-page="providers"],
  .spread[data-page="children"] { --slip-fs: 13.5px; }
  .spread-shape,
  .app:not(.sb-collapsed) .spread-shape { width: 100%; }

  /* The stickers scale with their humps, by the same factor (--tab-k,
     set by setPhoneShape) and about the same anchors, so each stays
     where it sits on the desktop tab: home from the left edge, parents
     from the top-right corner, youth and providers from their own
     centre. top is in cqw — the folder's width — because its height
     changes with the pile. */
  .spread[data-page] .spread-sticker { top: calc(1.45cqw * var(--tab-k, 1.5)); }
  .spread[data-page="home"] .spread-sticker { top: calc(1.23cqw * var(--tab-k, 1.5)); }
  .spread[data-page="home"]     .spread-sticker { width: calc(12% * var(--tab-k, 1.5)); left: calc(5.9% * var(--tab-k, 1.5)); }
  .spread[data-page="children"]  .spread-sticker { width: calc(10.5% * var(--tab-k, 1.5)); left: calc(52.36% - 5.25% * var(--tab-k, 1.5)); }
  .spread[data-page="providers"] .spread-sticker { width: calc(10.5% * var(--tab-k, 1.5)); left: calc(32.54% - 5.25% * var(--tab-k, 1.5)); }
  :root[lang="es"] .spread[data-page="providers"] .spread-sticker { width: calc(12.6% * var(--tab-k, 1.5)); left: calc(32.54% - 6.3% * var(--tab-k, 1.5)); top: calc(1.11cqw * var(--tab-k, 1.5)); }
  .spread[data-page="parents"]   .spread-sticker { width: calc(10.5% * var(--tab-k, 1.5)); left: calc(97.67% - 20.24% * var(--tab-k, 1.5)); }

  /* the stat strip's facts all repeat on the cards, bar the age range,
     which a phone does without */
  .spread[data-page] .desk > .slip--strip { display: none; }

  .desk,
  .app.sb-collapsed .desk {
    /* just under the taller tab band */
    top: calc((var(--tab-band, 8.99) + 3.3) * 1cqw);
    left: 3.5%;
    right: 3.5%;
    height: auto;
  }
  /* Outweighs the per-slot placements (they're one step lighter). Each
     card's top is dealt by layoutPile; its sideways offset and tilt are
     set by hand just below. */
  .spread[data-page] .desk > .slip[data-slot] {
    top: var(--pile-top, 0px);
    width: 88%;
    z-index: var(--pile-z, 10);
    --ox: 0px; --oy: 0px;
    --hy: 0px; --sc: 1;
  }
  .spread[data-page] .desk > .slip[data-slot]:not(.slip--stack, .slip--strip, .slip--clip) {
    padding: 0.95rem 1.05rem 1.05rem;
  }
  .spread[data-page] .desk > .slip[data-slot].slip--stack { width: 84%; }
  .spread[data-page] .desk > .slip[data-slot].slip--clip  { width: 58%; }
  /* the card brought forward: on top of everything, lifted a touch */
  .spread[data-page] .desk > .slip[data-slot].raised {
    z-index: 40;
    --hy: -5px;
  }
  .slip[data-slide] { --dx: 0px; --dy: 4%; }
  .slip--stack { min-height: 10rem; }

  /* hand-set: each page leans its own way */
  .spread[data-page="home"] .slip[data-slot="lead"]  { left: 0.5%; --rot: -1.2deg; }
  .spread[data-page="home"] .slip[data-slot="aside"] { left: 11%;  --rot: 1.7deg; }
  .spread[data-page="home"] .slip[data-slot="stack"] { left: 7%;   --rot: -1.5deg; }

  .spread[data-page="children"] .slip[data-slot="lead"]  { left: 1.5%; --rot: -0.8deg; }
  .spread[data-page="children"] .slip[data-slot="aside"] { left: 10%;  --rot: 1.9deg; }
  .spread[data-page="children"] .slip[data-slot="fact"]  { left: 3%;   --rot: -1.4deg; }
  .spread[data-page="children"] .slip[data-slot="clip"]  { left: 30%;  --rot: 2.4deg; }

  .spread[data-page="parents"] .slip[data-slot="lead"]  { left: 2%;  --rot: -0.6deg; }
  .spread[data-page="parents"] .slip[data-slot="aside"] { left: 10.5%; --rot: 1.4deg; }
  .spread[data-page="parents"] .slip[data-slot="fact"]  { left: 1%;  --rot: -1.3deg; }

  .spread[data-page="providers"] .slip[data-slot="lead"]  { left: 1%;  --rot: -0.9deg; }
  .spread[data-page="providers"] .slip[data-slot="aside"] { left: 11%; --rot: 1.5deg; }
  .spread[data-page="providers"] .slip[data-slot="fact"]  { left: 2.5%; --rot: -1.2deg; }

  /* A closed folder shows only its tabs above the open one, so it keeps
     its drawn size and none of its cards. */
  .spread:not(.active) .desk { display: none; }
  .jump-tag { padding: 0.5rem 0.8rem; font-size: 0.66rem; }
}

@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: auto;
    z-index: 200;
    box-shadow: var(--shadow-hover);
    border-right: 1px solid var(--border);
  }
  .app.sb-collapsed .sidebar { box-shadow: none; }
  /* Here the sidebar floats over dimmed content rather than sitting
     beside it, so it keeps its panel even inside the Sequence. */
  .app.in-sequence .sidebar { background: var(--bg); }
  .app:not(.sb-collapsed) .sidebar-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .sidebar-backdrop { display: block; }
  .crumb-bar,
  .seq-topbar { padding-left: 3.4rem; }
  .library-scroll { padding: 0 1.1rem var(--scroll-pad-b); }
  .page-head { padding: 1.5rem 0 1.2rem; }
  .tab-panel { padding: 1.2rem 1rem 1.6rem; }
  .choice-grid,
  .seq-cols { grid-template-columns: 1fr; }
  .seq-cols .seq-card { margin-bottom: 0; }
  .seq-cols { margin-bottom: 1.1rem; }
  /* the progress readout gives way before it can push off the screen */
  .seq-topbar { gap: 0.8rem; padding-right: 1.1rem; }
  .crumb-bar--inline { min-width: 0; white-space: nowrap; }
  .seq-progress { min-width: 0; gap: 0.6rem; }
  .seq-progress .mono-tag { white-space: nowrap; }
  .progress-bar { width: auto; flex: 1 1 90px; min-width: 36px; max-width: 110px; }
}

/* Tablet: the same pile, but the folder is wide enough that full-width
   cards would run to long thin lines — narrower cards, larger type. */
@media (min-width: 561px) and (max-width: 860px) {
  .spread,
  .spread[data-page="parents"],
  .spread[data-page="providers"],
  .spread[data-page="children"] { --slip-fs: 15.5px; }
  .spread[data-page] .desk > .slip[data-slot] { width: 76%; }
  .spread[data-page] .desk > .slip[data-slot].slip--stack { width: 70%; }
  .spread[data-page] .desk > .slip[data-slot].slip--clip  { width: 46%; }
  .spread[data-page] .desk > .slip[data-slot]:not(.slip--stack, .slip--strip, .slip--clip) {
    padding: 1.2rem 1.4rem 1.3rem;
  }
}

@media (max-width: 520px) {
  /* the group name gives way to the progress readout; the dot and
     "Sequence" still say where you are */
  .seq-topbar .crumb-root,
  .seq-topbar .crumb-sep { display: none; }
}


/* ══════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* cards hold content — never leave them faded out */
  .slip[data-slide] { opacity: 1; --dx: 0px; --dy: 0px; }
  .ocard { opacity: 1; transform: none; }
}