/* ==========================================================================
   زوّادة — design tokens
   Riso-storybook palette: ink blue-black, warm red, school-bus yellow, ink blue
   on warm paper. Every colour pair used for text is AA (checked in qa.mjs).
   ========================================================================== */
:root {
  --paper: #f7f0e3;
  --paper-card: #fffaf0;
  --paper-deep: #efe4cf;
  --ink: #1d2748;          /* text / outlines   — 13.6:1 on paper */
  --ink-soft: #46507a;     /* secondary text    —  7.4:1 on card  */
  --ink-mute: #5d6688;     /* hints             —  5.6:1 on card  */
  --red: #d8432f;          /* illustration red */
  --red-ink: #b5321f;      /* button red — white text 5.6:1 */
  --red-press: #9c2a19;
  --yellow: #f2b228;
  --yellow-soft: #fbe7b0;
  --blue: #2f56a6;         /* focus ring / links — 6.4:1 on paper */
  --sky: #a8cbee;
  --line: #1d2748;

  --font-display: 'Baloo Bhaijaan 2', 'Readex Pro', system-ui, sans-serif;
  --font-ui: 'Readex Pro', 'Segoe UI', Tahoma, system-ui, sans-serif;

  /* 4-pt spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --border: 2.5px solid var(--line);
  --shadow-print: -6px 6px 0 var(--line);      /* hard, offset "printed" shadow (RTL: falls to the left) */
  --shadow-btn: -3px 3px 0 var(--line);

  /* UI motion tokens (character choreography tokens live in app.js → MOTION / motion-spec.json) */
  --dur-fast: 140ms;
  --dur-ui: 220ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.skip-link {
  position: absolute; inset-inline-start: var(--s4); top: -60px; z-index: 50;
  background: var(--ink); color: #fff; padding: var(--s2) var(--s4); border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--s3); }

/* ---------- top bar ---------- */
.topbar {
  position: absolute; inset-inline: 0; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--s10);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: var(--s3); }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; }
.brand-tag {
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  border-inline-start: 2px solid var(--line); padding-inline-start: var(--s3); line-height: 1.2;
}

.motion-toggle {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: var(--s2) var(--s4);
  background: var(--paper-card); border: var(--border); border-radius: var(--r-pill);
  box-shadow: var(--shadow-btn); font-weight: 600; font-size: 15px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.motion-toggle:active { transform: translate(-2px, 2px); box-shadow: -1px 1px 0 var(--line); }
.switch {
  position: relative; width: 40px; height: 24px; border-radius: var(--r-pill);
  background: var(--paper-deep); border: 2px solid var(--line); flex: none;
}
.knob {
  position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ink);
  transition: transform var(--dur-ui) var(--ease-out);
}
.motion-toggle[aria-checked="true"] .switch { background: var(--yellow); }
/* RTL: "on" moves the knob towards the inline-end (left) */
.motion-toggle[aria-checked="true"] .knob { transform: translateX(-16px); }

/* ---------- layout ---------- */
.layout { position: relative; }

.stage {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}
#scene { display: block; width: 100%; height: 100%; }
/* riso paper grain — a static texture, multiplied over the art */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .15 0 0 0 0 .28 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: multiply;
}

.amount-tag {
  position: absolute; z-index: 2;
  display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s2) var(--s5) var(--s2) var(--s5);
  background: var(--yellow); border: var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-btn);
  font-family: var(--font-display); color: var(--ink);
  transform: rotate(-3deg);
}
.tag-num { font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; min-width: 1.4ch; text-align: center; }
.tag-unit { font-size: 20px; font-weight: 700; }
.amount-tag.bump { animation: tag-bump 320ms var(--ease-out); }
@keyframes tag-bump { 0% { transform: rotate(-3deg) scale(1); } 35% { transform: rotate(-5deg) scale(1.08); } 100% { transform: rotate(-3deg) scale(1); } }

/* ---------- panel ---------- */
.panel {
  background: var(--paper-card);
  border: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-print);
  padding: var(--s8);
  position: relative; z-index: 5;
}
.eyebrow {
  margin: 0 0 var(--s1); font-size: 14px; font-weight: 600; color: var(--red-ink);
}
h1 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 31px; line-height: 1.22; letter-spacing: 0;
}
.lede { margin: var(--s2) 0 var(--s4); color: var(--ink-soft); font-size: 15px; line-height: 1.7; }

.field-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: var(--s2); }
.stepper { display: flex; align-items: stretch; gap: var(--s3); }
.step-btn {
  flex: none; width: 60px; min-height: 64px; display: grid; place-items: center;
  background: var(--paper-card); border: var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.step-btn svg { width: 26px; height: 26px; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.step-btn:hover { background: var(--yellow-soft); }
.step-btn:active { transform: translate(-2px, 2px); box-shadow: -1px 1px 0 var(--line); }
.step-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.step-btn[aria-disabled="true"]:hover { background: var(--paper-card); }

.input-wrap {
  flex: 1; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s2);
  background: #fff; border: var(--border); border-radius: var(--r-md);
  padding-inline: var(--s3);
}
.input-wrap:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
#amount {
  width: 3.4ch; min-width: 0; border: 0; background: transparent; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1;
  padding: var(--s2) 0 0; direction: ltr; font-variant-numeric: tabular-nums;
}
#amount:focus { outline: none; }
.unit { font-weight: 600; color: var(--ink-soft); font-size: 17px; }
.hint { margin: var(--s2) 0 0; font-size: 13px; color: var(--ink-mute); }

.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s4); }
.chip {
  min-height: 44px; padding: var(--s2) var(--s1);
  background: var(--paper-card); border: 2px solid var(--line); border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.chip b { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.chip:hover { background: var(--yellow-soft); }
@media (hover: none) { .step-btn:hover, .chip:hover { background: var(--paper-card); } }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }

.impact {
  margin-top: var(--s5);
  background: var(--paper); border: 2px dashed rgba(29, 39, 72, .35); border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
}
.impact-now { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.6; min-height: 4.8em; } /* 3 lines reserved: the panel never changes height */
.levels { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); }
.levels li {
  display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "i n" "i a"; align-items: center; column-gap: var(--s2);
  font-size: 14px; line-height: 1.35; color: var(--ink-mute);
  transition: color var(--dur-ui);
}
.lv-icon { grid-area: i; } .lv-name { grid-area: n; } .lv-at { grid-area: a; }
.lv-icon {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  border: 2px solid rgba(29, 39, 72, .3); background: var(--paper-card);
  transition: border-color var(--dur-ui), background var(--dur-ui);
}
.lv-icon svg { width: 24px; height: 24px; opacity: .35; filter: grayscale(1); transition: opacity var(--dur-ui), filter var(--dur-ui); }
.lv-icon svg * { stroke: var(--line); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.lv-at { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.levels li.on { color: var(--ink); font-weight: 600; }
.levels li.on .lv-icon { border-color: var(--line); background: var(--yellow-soft); }
.levels li.on .lv-icon svg { opacity: 1; filter: none; }
.impact-next { margin: var(--s3) 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); min-height: 1.6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.impact-next b { color: var(--ink); }

.donate {
  width: 100%; margin-top: var(--s5); min-height: 60px;
  background: var(--red-ink); color: #fff; border: var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-btn);
  font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; padding: var(--s3) var(--s4) var(--s2);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.donate:hover { background: var(--red-press); }
.donate:active { transform: translate(-2px, 2px); box-shadow: -1px 1px 0 var(--line); }
.donate[aria-disabled="true"] { background: var(--paper-deep); color: var(--ink-soft); cursor: default; }
.fineprint { margin: var(--s3) 0 0; font-size: 13px; color: var(--ink-mute); text-align: center; }

/* ---------- dialog ---------- */
dialog {
  width: min(420px, calc(100vw - 32px)); padding: var(--s8) var(--s8) var(--s6);
  border: var(--border); border-radius: var(--r-lg); background: var(--paper-card); color: var(--ink);
  box-shadow: var(--shadow-print); text-align: center;
}
dialog::backdrop { background: rgba(29, 39, 72, .45); }
dialog[open] { animation: dlg-in 260ms var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.thanks-art { width: 96px; height: 72px; }
dialog h2 { font-family: var(--font-display); font-weight: 800; font-size: 30px; margin: var(--s2) 0 var(--s1); }
dialog p { margin: 0 0 var(--s5); color: var(--ink-soft); }
dialog p b { color: var(--ink); }
.dialog-btn {
  min-height: 48px; min-width: 140px; padding: var(--s2) var(--s6);
  background: var(--ink); color: #fff; border: var(--border); border-radius: var(--r-md);
  font-weight: 600; font-size: 17px;
}

/* ==========================================================================
   Desktop ≥ 1024px — scene-first: full-bleed stage, floating panel on the
   inline-start (right) side, the child composed in the free space on the left.
   ========================================================================== */
@media (min-width: 1024px) and (min-aspect-ratio: 4/5) {
  .stage { height: 100vh; min-height: 680px; }
  .panel {
    position: absolute; top: 88px; inset-inline-start: 48px;
    width: clamp(380px, 31vw, 448px);
    max-height: calc(100% - 116px); overflow-y: auto;
    padding: var(--s6) var(--s8) var(--s6);
  }
  .layout { min-height: 680px; }
  .amount-tag { top: 96px; inset-inline-end: 40px; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 4/5) and (max-height: 820px) {
  .panel { top: 76px; max-height: calc(100% - 96px); padding-block: var(--s5); }
  h1 { font-size: 26px; }
  .lede { font-size: 14px; margin: var(--s1) 0 var(--s3); line-height: 1.6; }
  .field-label { margin-bottom: var(--s1); }
  .step-btn { min-height: 54px; }
  #amount { font-size: 34px; }
  .chips { margin-top: var(--s3); }
  .impact { margin-top: var(--s3); padding-block: var(--s3); }
  .impact-now { font-size: 15px; }
  .levels { margin-top: var(--s2); }
  .donate { margin-top: var(--s3); min-height: 54px; }
  .hint, .fineprint { display: none; }
}

@media (min-width: 1024px) and (min-aspect-ratio: 4/5) and (max-width: 1279.98px) {
  .levels li { font-size: 13px; column-gap: 6px; }
  .lv-name { white-space: nowrap; }
}

/* ==========================================================================
   Tablet < 1024px — stacked: stage on top, the panel overlaps its bottom edge.
   ========================================================================== */
@media not all and (min-width: 1024px) and (min-aspect-ratio: 4/5) {
  .topbar { padding: var(--s4) var(--s6); }
  .stage { height: clamp(380px, 55vh, 780px); }
  .panel {
    margin: -56px var(--s6) var(--s4);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6);
    padding: var(--s6);
  }
  h1 { font-size: 28px; }
  .lede { font-size: 15px; margin-bottom: var(--s4); }
  .impact { margin-top: 0; }
  .chips { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: var(--s4); }
  .chip { font-size: 13px; padding-inline: 2px; }
  .chip b { font-size: 16px; }
  .levels { grid-template-columns: 1fr; gap: var(--s1); }
  .levels li { grid-template-columns: 34px 1fr auto; grid-template-areas: "i n a"; }
  .amount-tag { display: none; } /* the amount field sits right below the scene on tablet */
}
@media (max-width: 639.98px) {
  .topbar { padding: var(--s3) var(--s4); }
  .brand-tag { display: none; }
  .panel { grid-template-columns: 1fr; margin-inline: var(--s4); gap: var(--s4); padding: var(--s5); }
  .stage { height: 62vh; min-height: 360px; }
}

/* ==========================================================================
   Character idle motion (CSS). Pivots are at each group's local (0,0).
   Turned off by .no-motion (toggle) or prefers-reduced-motion (JS sets the class).
   ========================================================================== */
/* Only three cheap idle loops (transform-only): sway, breathing, blink. */
#sway       { animation: idle-sway 6.4s ease-in-out infinite alternate; }
#breathe    { animation: idle-breathe 3.6s ease-in-out infinite alternate; }
#eyes       { animation: idle-blink 5.2s linear infinite; }

@keyframes idle-sway    { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }
@keyframes idle-breathe { from { transform: scaleY(1); } to { transform: scaleY(1.009); } }
@keyframes idle-blink   { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } 96% { transform: scaleY(1); } }

/* paused while the tab is hidden or the stage is scrolled off-screen */
.idle-paused #sway, .idle-paused #breathe, .idle-paused #eyes { animation-play-state: paused; }

.no-motion #sway, .no-motion #breathe, .no-motion #eyes { animation: none; }
.no-motion .amount-tag.bump { animation: none; }
.no-motion dialog[open] { animation: none; }
.no-motion *, .no-motion *::before, .no-motion *::after { transition-duration: 0ms !important; }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-forced) #sway, html:not(.motion-forced) #breathe, html:not(.motion-forced) #eyes { animation: none; }
}