/* Clarté — "plein jour". The agent app, the activation page and the client's page share this sheet.
   Daylight: a near-white page warmed by morning light at the top, Clarté's night ink for words and the main buttons, apricot for
   the sun and for money on its way, sea green for money already wired. The CLARTÉ wordmark keeps its own letters. Headlines and
   figures are set wide (Archivo stretched like a horizon), everything read in Geist, codes in Geist Mono, Arabic in Noto Kufi.
   Speed is part of the look: nothing blurs, nothing repaints in a loop; every movement is a transform or an opacity. */
:root {
  --day: #fbfaf7; --card: #ffffff; --sand: #f4f1eb; --sand2: #ece7de; --line: #e9e4db; --line2: #d8d0c3;
  --ink: #131722; --body: #3b3936; --mute: #6f6a63; --faint: #9c958b;
  --sun: #f59a45; --sun2: #e4812c; --sun-ink: #7f3f0f; --sun-soft: #ffe8d2; --sun-pale: #fff4e8;
  --sea: #13786a; --sea-soft: #dcf1eb; --wa: #1c6a42; --wa-ink: #155f37; --wa-soft: #e5f2ea;
  --err: #be3a26; --err-soft: #fbe8e3;
  --disp: 'Archivo', 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --wide: 116%;
  --ease: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.45, .5, 1);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: only light;
}
html[lang=ar] { --disp: 'Noto Kufi Arabic', 'Archivo', sans-serif; --sans: 'Noto Kufi Arabic', 'Geist', sans-serif; --wide: 100%; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* morning light from the top of the page: painted once, scrolls with the page */
body { margin: 0; min-height: 100vh; min-height: 100svh; color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: radial-gradient(130% 46% at 50% -12%, #fff0de 0%, rgba(255, 240, 222, 0) 70%) no-repeat, var(--day); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; }
.num { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .center { text-align: center; }
/* a field only robots fill: present, invisible, and never wider than a pixel (a field pushed far to one side would widen a right-to-left page) */
.hp { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* ── the page ── */
/* light may spread to the edge of the page, never past it (anything wider makes a phone zoom the page out) */
.stage { position: relative; overflow-x: clip; max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100svh; padding: var(--safe-t) 20px calc(36px + var(--safe-b)); display: flex; flex-direction: column; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; flex: none; }
#view { flex: 1; display: flex; flex-direction: column; }
.scene { flex: 1; display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }

/* the Clarté wordmark: its own letters, its accent on the E */
.wordmark { display: inline-flex; gap: 5px; direction: ltr; text-decoration: none; color: var(--ink); font: 500 21px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .02em; }
.wordmark .e { position: relative; }
.wordmark .e i { position: absolute; left: .17em; top: .1em; width: .26em; height: .05em; border-radius: .03em; background: var(--sun2); transform: rotate(-28deg); transform-origin: 0 50%; }

.lang { display: flex; padding: 3px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.lang button { min-width: 36px; height: 30px; padding: 0 9px; border: 0; border-radius: 999px; background: none; color: var(--mute); font: 500 12px var(--sans); letter-spacing: .04em; transition: background-color .2s, color .2s; }
.lang button[data-lang=ar] { font: 600 14px 'Noto Kufi Arabic', sans-serif; letter-spacing: 0; }
.lang button[aria-pressed=true] { background: var(--ink); color: var(--day); }

/* a greeting standing on the horizon: a line of light under the words, the sun rising at its far end */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 78px; padding-bottom: 14px; }
.hero > .greet { position: relative; z-index: 1; min-width: 0; padding-inline-end: 84px; }
.hero > .sunbox { position: absolute; inset: 0; height: auto !important; place-items: end end; padding-inline-end: 4px; }

/* ── words ── */
.cap { font-size: 13.5px; font-weight: 500; color: var(--mute); }
.date::first-letter { text-transform: uppercase; }
.h1 { margin: 0; font: 760 clamp(32px, 9.4vw, 42px)/1.02 var(--disp); font-stretch: var(--wide); letter-spacing: -.025em; text-wrap: balance; }
.h2 { margin: 0; font: 720 26px/1.1 var(--disp); font-stretch: var(--wide); letter-spacing: -.02em; text-wrap: balance; }
html[lang=ar] .h1, html[lang=ar] .h2 { line-height: 1.35; letter-spacing: 0; font-weight: 700; }
/* a word in the light: the horizon drawn under it in sunlight */
.h1 em, .h2 em, .lead em { font-style: normal; background: linear-gradient(transparent 70%, var(--sun-soft) 70%, var(--sun-soft) 94%, transparent 94%); }
.lead { margin: 0; font-size: 17.5px; line-height: 1.5; color: var(--body); text-wrap: pretty; }
.p { margin: 0; color: var(--body); text-wrap: pretty; }
.note { margin: 0; font-size: 14.5px; color: var(--mute); text-wrap: pretty; }
.k, .fieldk { font-size: 14px; font-weight: 600; color: var(--body); }
.msg { min-height: 20px; font-size: 14.5px; font-weight: 500; text-align: center; color: var(--mute); }
.msg.err { color: var(--err); } .msg:empty { min-height: 0; }
.mono, .code { font-family: var(--mono); letter-spacing: .05em; }
.money { font-family: var(--disp); font-stretch: var(--wide); font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }

/* ── buttons ── */
.cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: var(--day); font-size: 16.5px; font-weight: 600; text-decoration: none; transition: transform .3s var(--spring), background-color .2s, color .2s, box-shadow .3s; }
.cta:active { transform: scale(.97); }
.cta[disabled] { background: var(--sand2); color: var(--faint); cursor: default; }
.cta.ready { box-shadow: 0 0 0 4px var(--sun-soft); }
.cta.sun { background: var(--sun); color: #2a1404; } .cta.sun:active { background: var(--sun2); }
.cta.wa { background: var(--wa-soft); color: var(--wa-ink); } .cta.wa:active { background: #d4e9dc; }
.cta svg, .ghost svg { width: 21px; height: 21px; flex: none; }
.cta.wa svg { fill: var(--wa); } .ghost.wa svg { fill: currentColor; }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border: 1.5px solid var(--line2); border-radius: 999px; background: var(--card); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .2s, transform .3s var(--spring); }
.ghost:active { transform: scale(.97); border-color: var(--ink); }
.ghost svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.link { border: 0; background: none; padding: 10px 4px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: var(--line2); }
.back { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1.5px solid var(--line); border-radius: 50%; background: var(--card); }
.back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir=rtl] .back svg, html[dir=rtl] .flip { transform: scaleX(-1); }
.caprow { display: flex; align-items: center; gap: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── fields: the label floats above what is typed ── */
.f { position: relative; display: block; }
.f input, .f textarea, .f select { width: 100%; min-height: 58px; padding: 24px 16px 8px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); font-size: 16px; outline: none; transition: border-color .2s; resize: none; appearance: none; }
.f textarea { min-height: 112px; line-height: 1.45; }
.f span { position: absolute; inset-inline-start: 17px; top: 18px; font-size: 16px; color: var(--faint); pointer-events: none; transition: top .2s var(--ease), font-size .2s var(--ease), color .2s; }
.f input:focus, .f textarea:focus { border-color: var(--ink); }
.f input:focus + span, .f input:not(:placeholder-shown) + span, .f textarea:focus + span, .f textarea:not(:placeholder-shown) + span { top: 8px; font-size: 12px; font-weight: 600; color: var(--mute); }
.hint { padding: 6px 4px 0; font-size: 13.5px; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14.5px; font-weight: 600; transition: background-color .15s, border-color .15s, color .15s; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--day); }
.seg { display: inline-flex; align-self: flex-start; padding: 4px; border-radius: 999px; background: var(--sand); }
.seg button { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font-size: 14.5px; font-weight: 600; color: var(--mute); transition: background-color .15s, color .15s; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(19, 23, 34, .12); }

/* ── the keypad: big keys, the phone's own keyboard never opens on code screens ── */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; direction: ltr; touch-action: manipulation; }
.keypad button { height: 60px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--card); font: 600 26px var(--disp); font-stretch: var(--wide); transition: background-color .1s, transform .1s, border-color .1s; }
.keypad button.pressed { background: var(--sun-soft); border-color: var(--sun); transform: scale(.95); }
.keypad button.empty { visibility: hidden; }
.keypad button.del svg { display: block; margin: auto; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.keypad button.plus { font-size: 24px; color: var(--mute); }
.padfield { display: flex; align-items: center; min-height: 64px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--card); direction: ltr; }
.padfield .v { font: 680 26px var(--disp); font-stretch: var(--wide); letter-spacing: .01em; }
.padfield .ph { font: 500 18px var(--sans); color: var(--faint); }
.padfield .caret { width: 2px; height: 28px; margin: 0 2px; background: var(--sun2); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* six cells for a code; each filled cell is a small sun */
.cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; direction: ltr; }
.cells i { display: grid; place-items: center; height: 58px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); transition: border-color .15s, background-color .15s; }
.cells i.cur { border-color: var(--ink); }
.cells i::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd9b0, var(--sun) 70%); transform: scale(0); transition: transform .25s var(--spring); }
.cells i.full::after { transform: scale(1); }
.cells i.full { border-color: var(--sun-soft); background: var(--sun-pale); }
.shake { animation: shake .42s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ── surfaces ── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 20px; }
.tile { background: var(--sand); border-radius: 20px; padding: 16px; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv > span:first-child { color: var(--mute); font-size: 14.5px; }
.kv > span:nth-child(2) { font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.toast { position: fixed; left: 50%; bottom: calc(100px + var(--safe-b)); z-index: 90; max-width: calc(100% - 40px); padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--day); font-size: 14.5px; font-weight: 600; text-align: center; opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s, transform .3s var(--spring); pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.ft { padding: 28px 0 0; text-align: center; font-size: 13px; color: var(--faint); }

/* ── the sun: Clarté's character. A disc of light on a horizon line; it rises, glows, sinks, bursts (sun.js).
   Only transforms and opacities move, so the phone's graphics chip does all of it. ── */
/* the horizon hides what is below it, and only that: the glow spreads freely above and to the sides */
.sunbox { position: relative; display: grid; place-items: end center; clip-path: inset(-200% -200% 0 -200%); }
.sunbox.free { clip-path: none; }
.sunbox .hz { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: linear-gradient(90deg, transparent, var(--sun2) 20%, var(--sun2) 80%, transparent); }
.sunbox .sun { position: relative; width: var(--d, 64px); height: var(--d, 64px); transform: translateY(calc((1 - var(--rise, 1)) * 100% + var(--sink, 0px))); transition: transform .6s var(--spring); will-change: transform; }
.sunbox .sun .disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 36%, #fff3e2 0%, #ffd7aa 34%, var(--sun) 72%, var(--sun2) 100%); box-shadow: inset 0 -6px 14px rgba(196, 98, 26, .25); }
.sunbox .sun .glow { position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 140, .55) 0%, rgba(255, 210, 160, .22) 38%, rgba(255, 220, 180, 0) 68%); opacity: .7; animation: breathe 5.5s ease-in-out infinite; will-change: opacity; pointer-events: none; }
@keyframes breathe { 50% { opacity: 1; } }
.sunbox .sun .rays { position: absolute; inset: -38%; border-radius: 50%; background: repeating-conic-gradient(rgba(245, 154, 69, .5) 0deg 5deg, transparent 5deg 22.5deg); -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%, #000 52%, transparent 72%); mask: radial-gradient(circle, transparent 34%, #000 36%, #000 52%, transparent 72%); opacity: 0; transform: scale(.6) rotate(0deg); pointer-events: none; }
.sunbox .sun.burst .rays { animation: rays 1.4s var(--ease) both; }
@keyframes rays { 0% { opacity: 0; transform: scale(.6) rotate(0deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35) rotate(40deg); } }
.sunbox .sun.oops { animation: oops .5s; }
@keyframes oops { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
.sunbox .sun.think .glow { animation-duration: 1.4s; }
/* sparks of light that fly up from the sun on good news */
.spark { position: fixed; z-index: 85; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd9ad 0%, var(--sun) 55%, var(--sun2) 100%); pointer-events: none; will-change: transform, opacity; }

/* ── screen changes (ui.js): quick crossfades; parts rise into place once ── */
.t-fade > * { animation: rise .32s var(--ease) backwards; }
.t-fade > *:nth-child(2) { animation-delay: .02s; } .t-fade > *:nth-child(3) { animation-delay: .04s; } .t-fade > *:nth-child(4) { animation-delay: .06s; } .t-fade > *:nth-child(5) { animation-delay: .08s; } .t-fade > *:nth-child(n+6) { animation-delay: .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.swap-out, .swap-out * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .spark { display: none; } }