/* Shared style for the app (/app, /checkout) and the website (site/). ONE source: this file.
   The website build copies it to site/styles/ui.css (site/scripts/sync-ui.mjs) and `npm run check` fails if the copies differ.
   Load it first; page stylesheets only add layout (width, margins), never new colours or button looks.
   Design laws (docs/uplo/BRIEF-V7.md section B): 8 px controls, 16 px frames, pills only for the main button and status tags,
   borders over shadows, terracotta only for the one main action per screen. */
:root{
  /* colour: the Zelly brand palette (BRAND.md "Colour", 14 Nov 2026): sand page, white surfaces, zellige green for
     links and selected states, terracotta for the one main action, saffron for tiny accents. Every colour in the app
     goes through these names. Contrast: muted text 6.3:1 on sand, white on terracotta 5.4:1. */
  --bg:#F7F3EA;--card:#FFFFFF;--ink:#10241D;--mute:#4F6058;--sep:#E5DFD3;--line-2:#A9B4AC;--fill:rgba(16,36,29,.05);
  --green:#0F5A46;--saffron:#E2A93B;--tint:#E2EDE6;
  --cta:#0F5A46;--cta-h:#0B4A3A;--on-cta:#FFFFFF;      /* main action: deep zellige green (palette A), white text 8.2:1 */
  --on-solid:#FFFFFF;                                  /* text on a solid green / amber / red fill */
  --on-saffron:#10241D;
  --ok:#0F5A46;--ok-bg:#E2EDE6;--warn:#7A4E00;--warn-bg:#FBEBCB;--bad:#A8261C;--bad-bg:#F9E1DC;--info-bg:#E2EDE6;--sw:#0F5A46;
  --video:#000000;--knob:#FFFFFF;
  --glass:rgba(247,243,234,.84);
  --shadow:none;                                       /* law 2: borders over shadows */
  --shadow-knob:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);
  --shadow-raise:0 3px 8px rgba(0,0,0,.10);
  /* type */
  --f-display:"Alexandria","Readex Pro",system-ui,sans-serif;
  --f-ui:"Readex Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --h1:30px;--h2:20px;--h3:17px;--body:16px;--small:13.5px;--tiny:13px; /* nothing smaller than --tiny */
  /* spacing scale: use only these steps */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  /* radius scale */
  --r-ctl:8px;--r:16px;--r-pill:999px;
  /* tap targets */
  --tap:44px;--tap-main:56px;
  /* motion (emil-design-eng skill): a strong ease-out for anything that answers a finger; presses take 140 ms */
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);
  --dur:200ms;--dur-press:140ms;--dur-slow:250ms; /* one speed: 200 ms for UI, 140 ms presses and colour changes, 250 ms for panels that open (rule 8: about 0.25 s) */
  --zelly:#0F5A46;--zelly-line:#F7F3EA;--zelly-glint:#E2A93B;--zelly-pupil:#10241D; /* the mascot keeps its colours in both themes (MASCOT.md) */
}
/* One light look everywhere, whatever the phone's mode (owner, 14 Nov 2026: "everything dark is not helpful for the client"). No dark theme. */
:root{color-scheme:light}


/* numbers keep the same width when they change (counters, prices, stats): rule 9 */
*,::before,::after{font-variant-numeric:tabular-nums!important} /* !important: the font: shorthand used on many elements resets it otherwise */
/* rule 3: a word too long for the screen (big heading at twice the text size, a long e-mail) breaks instead of running off; words that fit never break */
body{overflow-wrap:break-word}h1,h2,h3{overflow-wrap:anywhere}

/* ---------- buttons: one set for app and site ----------
   primary   = the one main action on a screen (terracotta pill).   Old names kept as aliases: .cta (app), .btn-x (site)
   secondary = other actions (outline, 8 px).                       Aliases: .btn-o (site), .cta.b2 (app)
   text      = quiet actions and links.                             Alias: .tlink (app)
   danger    = destructive actions (delete).                        Alias: .danger-cta (app)
   Sizes: default 56 px (primary) / 52 px (secondary) tall; .b-sm 44 px. Every button is at least 44 px. */
/* Main button, glass look (owner, 14 Nov: "glassy, gets attention like other SaaS"): a lit top edge, a soft inner shade at
   the bottom, a thin light rim and one soft shadow in the button's own colour (the only coloured shadow allowed). */
.b-primary,.cta,.btn-x{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap-main);padding:12px 28px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);background:linear-gradient(180deg,color-mix(in srgb,var(--cta) 76%,#fff) 0%,var(--cta) 58%);color:var(--on-cta)!important;font:700 17px/1.25 var(--f-ui);text-align:center;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -10px 18px rgba(0,0,0,.12),0 10px 24px -12px color-mix(in srgb,var(--cta) 85%,transparent);transition:background-color var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.b-primary:hover,.cta:hover,.btn-x:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--cta-h) 72%,#fff) 0%,var(--cta-h) 58%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -10px 18px rgba(0,0,0,.12),0 14px 28px -12px color-mix(in srgb,var(--cta) 90%,transparent)}
.b-primary:disabled,.cta:disabled{background:var(--fill);color:var(--mute)!important;cursor:default;transform:none;box-shadow:none;border-color:transparent}
/* the glass shine: a soft band of light crosses the button on hover (real mouse only) */
.b-primary::after,.cta::after,.btn-x::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.3) 48%,transparent 66%);transform:translateX(-130%)}
@media (hover:hover) and (pointer:fine){.b-primary:hover::after,.cta:hover::after,.btn-x:hover::after{transform:translateX(130%);transition:transform .7s var(--ease-out)}}
.cta.b2::after,.danger-cta::after,.b-primary:disabled::after,.cta:disabled::after{display:none}

/* Second button, frosted glass: see-through white, a fine rim, a lit top edge, blur of what is behind it. */
.b-secondary,.btn-o,.cta.b2{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;padding:12px 24px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:var(--r-ctl);background:color-mix(in srgb,var(--card) 60%,transparent);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);color:var(--ink)!important;font:600 16px/1.25 var(--f-ui);text-align:center;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 60%,transparent);transition:background-color var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.b-secondary:hover,.btn-o:hover,.cta.b2:hover{background:color-mix(in srgb,var(--card) 92%,transparent)}
.b-secondary:disabled,.cta.b2:disabled{border-color:var(--sep);color:var(--mute)!important;background:transparent}

/* solid = a strong action that must stand out next to the main one without taking its colour (the other plan cards).
   Dark glass: ink fill lit from the top, 8 px corners. */
.b-solid{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap-main);padding:12px 24px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-ctl);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 82%,var(--bg)) 0%,var(--ink) 60%);color:var(--bg)!important;font:700 17px/1.25 var(--f-ui);text-align:center;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -12px color-mix(in srgb,var(--ink) 70%,transparent);transition:background-color var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.b-solid:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 72%,var(--bg)) 0%,color-mix(in srgb,var(--ink) 90%,var(--bg)) 60%)}
.b-solid:disabled{background:var(--fill);color:var(--mute)!important;cursor:default}

/* A forward arrow inside a button (<svg class=ar>). It points right and is flipped in Arabic. It moves forward on hover,
   only with a real mouse: on a phone a tap would leave it stuck. */
.ar{width:20px;height:20px;flex:none;transition:transform var(--dur) var(--ease-out)}
[dir=rtl] .ar{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){
  a:hover>.ar,button:hover>.ar{transform:translateX(4px)}
  [dir=rtl] a:hover>.ar,[dir=rtl] button:hover>.ar{transform:scaleX(-1) translateX(4px)}
}

.b-text,.tlink{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 12px;border:0;border-radius:var(--r-ctl);background:none;color:var(--ink);font:500 15px/1.3 var(--f-ui);text-decoration:none;cursor:pointer;transition:background-color var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.b-text:hover,.tlink:hover{background:var(--fill)}
.tlink.quiet,.b-text.quiet{color:var(--mute)}
.tlink.danger,.b-text.danger{color:var(--bad)}

.b-danger,.danger-cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;padding:12px 24px;border:0;border-radius:var(--r-ctl);background:var(--bad);color:var(--on-solid)!important;font:600 16px/1.25 var(--f-ui);cursor:pointer;box-shadow:none}
.b-danger:hover,.danger-cta:hover{background:color-mix(in srgb,var(--bad) 86%,var(--ink))}

.b-sm,.cta.small{min-height:var(--tap);padding:8px 20px;font-size:15px}
.b-full{display:flex;width:100%}

/* press effect: everything tappable reacts the moment a finger lands (law: Doherty) */
.b-primary:not(:disabled):active,.cta:not(:disabled):active,.btn-x:active,.b-secondary:not(:disabled):active,.btn-o:active,
.b-text:not(:disabled):active,.tlink:not(:disabled):active,.b-danger:active,.danger-cta:not(:disabled):active,.b-solid:not(:disabled):active{transform:scale(.97)}

/* press effect for every other tappable thing (rows, chips, tabs, menus, links): dims the moment a finger lands */
:is(button,a[href],summary,label.ax-check,label.co-toggle,.co-method):not(:disabled):not(.b-primary,.cta,.btn-x,.b-secondary,.btn-o,.b-text,.tlink,.b-danger,.danger-cta,.co-pay,.co-ghost):active{opacity:.72}

/* ---------- card: one frame for app and site ---------- */
.card,.group{background:var(--card);border:1px solid var(--sep);border-radius:var(--r);box-shadow:none}

/* ---------- placeholder shapes (instead of spinners while data loads) ---------- */
.ph{display:block;border-radius:var(--r-ctl);background:linear-gradient(90deg,var(--fill) 0 40%,color-mix(in srgb,var(--fill) 40%,transparent) 50%,var(--fill) 60% 100%);background-size:300% 100%;animation:ph-move 1.4s ease-in-out infinite}
@keyframes ph-move{from{background-position:100% 0}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.ph{animation:none}}

:focus-visible{outline:3px solid color-mix(in srgb,var(--cta) 55%,transparent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.b-primary,.cta,.btn-x,.b-secondary,.btn-o,.b-text,.tlink,.b-danger,.danger-cta,.b-solid,.ar{transition:none}a:hover>.ar,button:hover>.ar{transform:none}[dir=rtl] a:hover>.ar,[dir=rtl] button:hover>.ar{transform:scaleX(-1)}}
@media(prefers-reduced-motion:reduce){.b-primary::after,.cta::after,.btn-x::after{display:none}}