/* redesign.css — design-spec-v1 (pastel · Karantina + Heebo · restrained broken grid). Loaded last. */
:root {
  /* spec tokens */
  --bg: #EEF1F7;
  --fg: #0F172A;
  --a1: #C7D2FE;
  --a2: #FBCFE8;
  --a3: #BAE6FD;
  --accent: #3B82F6;
  --accent-ink: #1D4ED8;          /* AA text-safe shade of the accent */
  --ch-font: "Karantina", "Heebo", system-ui, sans-serif;
  --ch-body: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* page's own colour variables, re-pointed to the palette */
  --ink: var(--fg);
  --muted: #475569;
  --grid: #E2E7F0;
  --hairline: #D6DCE8;
  --row-hover: #E6EBF4;
  --secondary-line: #94A3B8;
  --accent-text: var(--accent-ink);
  --accent-tint: rgb(59 130 246 / 0.14);
  --cream: var(--bg);
  --cream-2: var(--bg);
  --card: var(--bg);
  --line: var(--hairline);
  --shadow: none;
  --pop: 0 6px 24px rgb(15 23 42 / 0.08);

  /* type: body and UI in Heebo; display faces set per heading below */
  --body: var(--ch-body);
  --display: var(--ch-body);
  --sans: var(--ch-body);
  --serif: var(--ch-font);

  /* Hark tokens, in case any library part is used */
  --text-primary: var(--fg);
  --text-secondary: #475569;
  --fill-primary: var(--fg);
  --fill-primary-on: var(--bg);
  --fill-tertiary: #E2E7F0;
  --stroke-primary: #CBD3E1;
  --stroke-secondary: #DDE3EE;
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--fg); font-family: var(--ch-body); }
a { text-decoration-color: var(--accent); }
.x-hl, .x-ast, .badge--gold { color: var(--accent-ink); }

/* ---------- headings: Karantina, big and playful ---------- */
h1, h2, h3,
body .x-hero h1, body .sec h2, body .x-part h2, body .sec h3, body .card h3,
body .sheet h3, body .toc h2 {
  font-family: var(--ch-font);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--fg);
}
body .x-hero h1 { font-size: clamp(60px, 13vw, 132px); line-height: .92; max-width: 13ch; }
body .x-part h2 { font-size: clamp(60px, 12vw, 116px); line-height: .95; }
body .sec h2 { font-size: clamp(48px, 9.5vw, 84px); line-height: .98; margin-bottom: var(--sp-3); }
body .sec h3, body .card h3, body .sheet h3 { font-size: clamp(28px, 4vw, 34px); line-height: 1.05; }
body .toc h2 { font-size: 40px; line-height: 1; }
body .x-end { font-family: var(--ch-font); font-size: clamp(44px, 8vw, 72px); line-height: 1; }

/* ---------- calm, airy ---------- */
.topbar { background: rgb(238 241 247 / 0.9); border-bottom: 1px solid var(--hairline); box-shadow: none; }
.sec { padding: var(--sp-6) 0; }
.x-part { border-top: 0; margin-top: 0; padding-top: var(--sp-6); }
.x-hero { padding: var(--sp-6) 0 var(--sp-5); }
.sec p, .sec li, .x-part p, .x-hero p, .lead, .tldr { max-width: 60ch; }
.sec td p, .sec th p, .sec td li { max-width: none; }

/* ---------- chapter openers ---------- */
.chapter-open {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-6) 20px;
  background: var(--a1);
  color: var(--fg);
  overflow: hidden;
}
.chapter-open[data-ch="2"] { background: var(--a2); }
.chapter-open[data-ch="3"] { background: var(--a3); }
.chapter-open__in { width: 100%; max-width: 1120px; margin: 0 auto; }
.chapter-open__num {
  display: block;
  font: 700 clamp(180px, 52vw, 480px)/.78 var(--ch-font);
  color: var(--fg);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.chapter-open__title {
  display: block;
  font: 700 clamp(64px, 15vw, 160px)/.9 var(--ch-font);
  color: var(--fg);
  margin: var(--sp-2) 0 0;
}

/* ---------- chapter progress (sticky, inside the top bar) ---------- */
.ch-progress {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  height: 26px;
  padding: 0 20px;
  font: 500 13px/1 var(--ch-body);
  color: var(--fg);
  background: transparent;
  border-top: 1px solid var(--hairline);
}
.ch-progress[hidden] { display: none; }
.ch-progress__num { font: 700 18px/1 var(--ch-font); }
.ch-progress__bar {
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--accent);
}
.ch-progress[data-ch="1"] { background: color-mix(in srgb, var(--a1) 55%, transparent); }
.ch-progress[data-ch="2"] { background: color-mix(in srgb, var(--a2) 55%, transparent); }
.ch-progress[data-ch="3"] { background: color-mix(in srgb, var(--a3) 55%, transparent); }

/* ---------- restrained broken grid ---------- */
/* phones: one column, a small nudge on alternate headings */
.sec--alt > .wrap > :is(.eyebrow, h2, .tldr) { margin-inline-start: 12px; }

@media (min-width: 768px) {
  .sec--alt > .wrap > :is(.eyebrow, h2, .tldr) { margin-inline-start: 9vw; }
  .sec:not(.sec--alt) > .wrap > .tldr { margin-inline-start: 3vw; }
  .x-part .wrap > :is(h2, .x-part__sub) { margin-inline-start: 5vw; }
  .x-hero h1 { margin-inline-start: -0.04em; }
  .chapter-open__title { margin-inline-start: 12vw; }
  .chapter-open[data-ch="2"] .chapter-open__in { padding-inline-start: 18vw; }
  .chapter-open[data-ch="3"] .chapter-open__in { padding-inline-start: 6vw; }
}

/* the hero curve breaks past the column edge only where the margin can hold it */
@media (min-width: 1240px) {
  .x-hero__plot { position: relative; z-index: 2; margin-inline-end: -4vw; }
}

/* ================= motion layer (stage 2) — states set by motion.js only ================= */

/* hero: soft pastel blobs behind the copy */
.x-hero { position: relative; isolation: isolate; overflow: clip; }
.x-hero > .wrap { position: relative; z-index: 1; }
.m-blob {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%;
  will-change: transform;
}
.m-blob--1 { width: min(64vw, 520px); aspect-ratio: 1.1; top: -6%; inset-inline-end: -16%;
  background: radial-gradient(closest-side, var(--a1) 62%, rgb(199 210 254 / 0)); }
.m-blob--2 { width: min(50vw, 380px); aspect-ratio: 1; bottom: 4%; inset-inline-start: -14%;
  background: radial-gradient(closest-side, var(--a2) 60%, rgb(251 207 232 / 0)); }
.m-blob--3 { width: min(30vw, 220px); aspect-ratio: 1.2; top: 42%; inset-inline-end: 34%;
  background: radial-gradient(closest-side, var(--a3) 60%, rgb(186 230 253 / 0)); opacity: .85; }
.m-w { display: inline-block; }

/* "5 דקות" chip: fills as you read, turns to a check at the end */
.m-five {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 var(--sp-2); padding: 7px 12px 8px;
  font: 500 14px/1 var(--ch-body); color: var(--fg);
  background: color-mix(in srgb, var(--a3) 70%, var(--bg));
  border: 1px solid var(--hairline); border-radius: 999px;
  transition: background 250ms var(--ease);
}
.m-five__ico { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.m-five__ico svg { position: absolute; inset: 0; width: 16px; height: 16px; transition: transform 250ms var(--ease), opacity 250ms var(--ease); }
.m-five__check { opacity: 0; transform: scale(.4) rotate(-20deg); }
.m-five__bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: right center; }
.m-five.is-done { background: color-mix(in srgb, var(--a1) 75%, var(--bg)); }
.m-five.is-done .m-five__clock { opacity: 0; transform: scale(.4) rotate(20deg); }
.m-five.is-done .m-five__check { opacity: 1; transform: none; }
.m-five.is-done .m-five__bar { transform: scaleX(1); }

/* chapter openers: pastel blobs behind the big number */
.chapter-open__num { position: relative; z-index: 0; width: fit-content; }
.chapter-open__num::before,
.chapter-open__num::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.chapter-open__num::before {
  width: .95em; height: .66em; top: .02em; inset-inline-start: -.16em;
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  background: color-mix(in srgb, var(--a2) 85%, #fff);
}
.chapter-open__num::after {
  width: .36em; height: .36em; bottom: -.06em; inset-inline-end: -.2em;
  border-radius: 50% 45% 55% 50%;
  background: color-mix(in srgb, var(--a3) 80%, #fff);
}
.chapter-open[data-ch="2"] .chapter-open__num::before { background: color-mix(in srgb, var(--a1) 85%, #fff); }
.chapter-open[data-ch="3"] .chapter-open__num::before { background: color-mix(in srgb, var(--a2) 85%, #fff); }
.chapter-open[data-ch="3"] .chapter-open__num::after { background: color-mix(in srgb, var(--a1) 85%, #fff); }

/* steps rail: a small pinned pill that advances 1/4 … 4/4 */
.m-rail {
  position: fixed; z-index: 55;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 14px;
  pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 0s 250ms;
}
.m-rail.is-in { opacity: 1; visibility: visible; transform: none; transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
.m-rail__in {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 10px;
  background: rgb(238 241 247 / 0.96); color: var(--fg);
  border: 1px solid var(--hairline); border-radius: 999px; box-shadow: var(--pop);
}
.m-rail__count { font: 700 22px/1 var(--ch-font); white-space: nowrap; overflow: hidden; }
.m-rail__count b { display: inline-block; font-weight: 700; }
.m-rail__count span { color: var(--muted); }
.m-rail__win { display: grid; overflow: hidden; font: 500 14px/1.3 var(--ch-body); }
.m-rail__t {
  grid-area: 1 / 1; white-space: nowrap;
  opacity: 0; transform: translateY(100%);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.m-rail__t.is-past { transform: translateY(-100%); }
.m-rail__t.is-on { opacity: 1; transform: none; }
.m-rail__dots { display: flex; gap: 4px; }
.m-rail__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline); transform: scale(.75); transition: transform 200ms var(--ease), background 200ms var(--ease); }
.m-rail__dots i.is-done { background: var(--a1); transform: scale(.85); }
.m-rail__dots i.is-on { background: var(--accent); transform: scale(1.15); }
.m-rail__fill { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right center; }

/* finale confetti */
#s4 > .wrap { position: relative; }
.m-confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.m-confetti i { position: absolute; width: 9px; height: 9px; border-radius: 50%; }

/* ---------- lively hover / tap (150–250ms) ---------- */
.btn, .tocbtn { transition: background 200ms var(--ease), transform 180ms var(--ease); }
.btn:hover, .tocbtn:hover { transform: translateY(-2px); }
.btn:active, .tocbtn:active { transform: scale(.96); }
.chip { transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease); }
.chip:hover { border-color: var(--fg); transform: translateY(-2px); }
.chip:active { transform: scale(.95); }
.steps3 a { transition: color 180ms var(--ease), transform 200ms var(--ease); }
.steps3 a:hover { transform: translateX(-6px); }
.steps3 a:active { transform: translateX(-6px) scale(.98); }
.x-opt { transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.x-opt:hover { transform: translateY(-3px); box-shadow: var(--pop); }
.x-opt:active { transform: scale(.98); }
main a:not([class]) { transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease); }
main a:not([class]):hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
tbody tr { transition: background 180ms var(--ease); }
tbody tr > th { transition: color 180ms var(--ease); }
tbody tr:hover > th { color: var(--accent-ink); }
tbody tr:active { background: color-mix(in srgb, var(--a1) 45%, var(--bg)); }
.g { border-radius: 4px; transition: background 180ms var(--ease), text-decoration-color 180ms var(--ease), transform 150ms var(--ease); }
.g:hover { background: color-mix(in srgb, var(--a2) 55%, transparent); }
.g:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .tocbtn:hover, .chip:hover, .steps3 a:hover, .x-opt:hover,
  .btn:active, .tocbtn:active, .chip:active, .steps3 a:active, .x-opt:active, .g:active { transform: none; }
  .m-blob { will-change: auto; }
  .m-rail { display: none; }
}