/* Ayatinstitute design kit — reproduces round3/final.html + screens/*.html exactly.
   Generated from _gen/kit.src.css by _gen/build_css.py (data URIs are filled in there). Edit the .src.css, not this file. */

/* ---------- tokens ---------- */
:root{
  --primary:#075E54; --primary-2:#008069; --primary-deep:#053F39; --primary-ink:#00695A;
  --accent:#FF873B; --accent-text:#B04810;           /* orange: hairlines + badges only; text-safe variant for words */
  --ivory:#FBF8F2; --sand:#F9E2C6;
  --page:#fff; --sheet:#fff; --card:#fff;
  --text:#2A2E31; --text-2:#5C6165; --text-3:#6B7176; --hint:#6B7074;
  --line:#ECEAE4; --line-2:#E3DED4; --line-3:#E6E3DC;
  --field:#FBF8F2; --fill:#F3F1EC;                    /* text field fill / search + segmented fill */
  --tile:#E6F2EF; --tile-ink:#075E54; --tonal:#E8F2EF; /* tonal icon tile / call button */
  --danger:#B3261E; --danger-tile:#FBEAE8;
  --online:#2FB35F; --live:#1FA05A; --sk:#EEF3F1;
  --switch:#008069; --switch-off:#C4C9C7;
  --upd:#B04810; --miss:#B04810; --live-text:#00695A;
  --bar:#075E54; --bar-ink:#F9E2C6; --pill:#FBF8F2; --pill-ink:#075E54; --bar-ring:#075E54;
  --hg-edge:#053F39; --hg-mid:#075E54;               /* header gradient */
  --hi:#2A2E31; --scrim:rgba(10,20,18,.48);
  --shadow-sheet:rgba(2,35,31,.28);
  /* room bubbles (design/2026-10-09-room/NOTES.md, ADR 0003 section 0 item 25 (8)): incoming fill, outgoing fill + border, outgoing meta; the incoming border is line-3 */
  --bubble-in:#FFFFFF; --bubble-out:#DCEFE9; --bubble-out-bd:#C7E2D9; --meta-out:#2F6B61;
  /* product tour (design/2026-10-09-tour/SPEC.md section 9) */
  --tour-ring:#FBF8F2; --tour-halo:#FF873B; --tour-card-edge:rgba(249,226,198,.34);
  --tour-mk-done:#075E54; --tour-mk-now:#FF873B; --tour-mk-now-edge:#B04810; --tour-mk-todo:#6B7074;
  --tour-shadow:rgba(2,35,31,.35);
  --motion-glide:280ms cubic-bezier(.4,0,.2,1); --motion-swell:200ms cubic-bezier(.4,0,.2,1); --motion-fade:140ms ease; --motion-pulse:2400ms ease-out;
}
.dark{
  --page:#0F1715; --sheet:#16201E; --card:#16201E;
  --text:#EDE7DC; --text-2:#A9B8B3; --text-3:#9FB0AA; --hint:#8D9C97;
  --line:#2A3A36; --line-2:#2A3A36; --line-3:#2A3A36;
  --field:#1B2927; --fill:#1F2E2B;
  --tile:#1F2E2B; --tile-ink:#8FD3C4; --tonal:#1F2E2B;
  --danger:#FF8A80; --danger-tile:#3A1F1D; --sk:#22302D;
  --switch:#2E9C86; --switch-off:#3A4A46;
  --upd:#FFA566; --miss:#FFA566; --live-text:#6FD3B5;
  --bar:#1B2927; --bar-ink:#B5C7C2; --pill:#D9EEE8; --pill-ink:#06433B; --bar-ring:#1B2927;
  --hg-edge:#042F2B; --hg-mid:#053F39;
  --hi:#EDE7DC; --scrim:rgba(0,0,0,.6); --shadow-sheet:rgba(0,0,0,.55);
  --bubble-in:#1F2E2B; --bubble-out:#053F39; --bubble-out-bd:#075E54; --meta-out:#B5C7C2;
  --tour-mk-done:#8FD3C4; --tour-mk-now-edge:#FF873B; --tour-mk-todo:#8D9C97;
  --tour-shadow:rgba(0,0,0,.55);
}

/* ---------- phone frame ---------- */
/* Mockup frame. The headless-Chrome viewport is wider than 402px, so the frame must sit at the physical left edge: html is forced LTR
   (that is what makes inset-inline-start the left edge) and body gives the page its real direction back. */
html{direction:ltr;position:absolute;inset-inline-start:0;top:0;width:402px;height:874px;overflow:hidden}
body:dir(rtl){direction:rtl}
*{box-sizing:border-box;margin:0}
body{width:402px;height:874px;position:relative;overflow:hidden;background:var(--page);color:var(--text);font-family:"IBM Plex Sans Arabic","IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px}
body,.stage{--hh:210px;--se:166px;--bt:70px}
/* layouts: set ONE on <body>.  tall = list screens; profile = settings/profile; hero = login/splash; compact = pushed pages */
.l-profile{--hh:256px;--se:220px;--bt:61px}
.l-hero{--hh:342px;--se:342px}
.l-compact{--hh:112px;--se:90px}
/* specimen / free-flow pages: <html class="free"> removes the fixed phone box */
html.free{height:auto;overflow:visible}
html.free body{height:auto;overflow:visible;min-height:0}
.ic{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* Direction-bearing icons are drawn LTR (back points left, chev right, send right ...) and mirrored when the page is RTL.
   The selector list below is generated from names.json "mirror" (build_css.py). .mir is the opt-in for an icon that is not in that list (the logout arrow). */
svg:has(> use[href="#i-back"]):dir(rtl),
svg:has(> use[href="#i-chev"]):dir(rtl),
svg:has(> use[href="#i-reply"]):dir(rtl),
svg:has(> use[href="#i-forward"]):dir(rtl),
svg:has(> use[href="#i-send"]):dir(rtl){transform:scaleX(-1)}
.mir:dir(rtl){transform:scaleX(-1)}

/* status bar + island + home indicator (always on top of green) */
.sb{position:absolute;top:0;inset-inline:0;height:54px;direction:ltr;display:flex;justify-content:space-between;align-items:center;padding:6px 0 0;padding-inline:40px 38px;font-weight:600;font-size:16px;z-index:6;color:#fff}
.sb .r{display:flex;gap:6px;align-items:center}
.sb i{display:block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.sb .sig{width:18px;height:12px;--m:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2212%22 viewBox=%220 0 18 12%22%3E%3Cg fill=%22%23000%22%3E%3Crect x=%220%22 y=%228%22 width=%223%22 height=%224%22 rx=%22.8%22/%3E%3Crect x=%225%22 y=%225.5%22 width=%223%22 height=%226.5%22 rx=%22.8%22/%3E%3Crect x=%2210%22 y=%223%22 width=%223%22 height=%229%22 rx=%22.8%22/%3E%3Crect x=%2215%22 y=%220%22 width=%223%22 height=%2212%22 rx=%22.8%22/%3E%3C/g%3E%3C/svg%3E")}
.sb .wifi{width:17px;height:12px;--m:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2217%22 height=%2212%22 viewBox=%220 0 17 12%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M1.5 4.2a10 10 0 0 1 14 0M4 7a6.4 6.4 0 0 1 9 0%22/%3E%3Ccircle cx=%228.5%22 cy=%2210%22 r=%221.1%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E")}
.sb .bat{width:27px;height:13px;--m:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2227%22 height=%2213%22 viewBox=%220 0 27 13%22 fill=%22none%22%3E%3Crect x=%22.5%22 y=%22.5%22 width=%2222%22 height=%2212%22 rx=%223.5%22 stroke=%22%23000%22 stroke-opacity=%22.5%22/%3E%3Crect x=%222%22 y=%222%22 width=%2219%22 height=%229%22 rx=%222.2%22 fill=%22%23000%22/%3E%3Cpath d=%22M24.5 4.5v4%22 stroke=%22%23000%22 stroke-opacity=%22.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E")}
.isl{position:absolute;top:11px;inset-inline-start:141px;width:120px;height:34px;border-radius:17px;background:#000;z-index:30}
.hi{position:absolute;bottom:7px;inset-inline-start:131px;width:140px;height:5px;border-radius:3px;background:var(--hi);z-index:5}

/* ---------- header (green pattern) ---------- */
.hdr{position:absolute;top:0;inset-inline:0;height:var(--hh);
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.105%22 stroke-width=%22.7%22 stroke-linejoin=%22miter%22%3E%3Cpolygon points=%225.86,5.86 34.14,5.86 34.14,34.14 5.86,34.14%22/%3E%3Cpolygon points=%2220.00,0.00 40.00,20.00 20.00,40.00 0.00,20.00%22/%3E%3Cg stroke-opacity=%22.08%22%3E%3Cpolygon points=%2213.49,13.49 26.51,13.49 26.51,26.51 13.49,26.51%22/%3E%3Cpolygon points=%2220.00,10.80 29.20,20.00 20.00,29.20 10.80,20.00%22/%3E%3C/g%3E%3Cg transform=%22rotate(45 0 0)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 0) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(0 40) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 40) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 1px 0,linear-gradient(90deg,var(--hg-edge),var(--hg-mid) 34%,var(--hg-mid) 66%,var(--hg-edge))}
/* product tour card band (design/2026-10-09-tour/SPEC.md section 2): the header pattern over a 160deg gradient */
.hdr.tour-band{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.105%22 stroke-width=%22.7%22 stroke-linejoin=%22miter%22%3E%3Cpolygon points=%225.86,5.86 34.14,5.86 34.14,34.14 5.86,34.14%22/%3E%3Cpolygon points=%2220.00,0.00 40.00,20.00 20.00,40.00 0.00,20.00%22/%3E%3Cg stroke-opacity=%22.08%22%3E%3Cpolygon points=%2213.49,13.49 26.51,13.49 26.51,26.51 13.49,26.51%22/%3E%3Cpolygon points=%2220.00,10.80 29.20,20.00 20.00,29.20 10.80,20.00%22/%3E%3C/g%3E%3Cg transform=%22rotate(45 0 0)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 0) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(0 40) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 40) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0,linear-gradient(160deg,var(--hg-mid),var(--hg-edge))}
.l-compact .hdr:after{content:"";position:absolute;inset-inline:0;top:110px;height:2px;background:var(--accent);box-shadow:0 2px 6px rgba(2,35,31,.12);z-index:3}
/* white sheet with mihrab notch + orange hairline. Shadow lives ONLY on the top strip (::before) — a drop-shadow filter on the
   full-height sheet painted white blocks in headless Chrome. */
.sheet{position:absolute;inset-inline:0;top:calc(var(--se) + 28px);bottom:0;background:var(--sheet)}
.sheet:before{content:"";position:absolute;inset-inline:0;top:-50px;height:52px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22402%22 height=%2252%22 viewBox=%220 -4 402 52%22%3E%3Cpath d=%22M0,48 V46 A28,28 0 0 1 28,18 H169 Q190,18 201,0 Q212,18 233,18 H374 A28,28 0 0 1 402,46 V48 Z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M0.6,46 A27.4,27.4 0 0 1 28,18.6 H169 Q190,18.6 201,0 Q212,18.6 233,18.6 H374 A27.4,27.4 0 0 1 401.4,46%22 fill=%22none%22 stroke=%22%23FF873B%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") no-repeat;filter:drop-shadow(0 -3px 7px var(--shadow-sheet));clip-path:inset(-30px -30px 2px -30px)}
.dark .sheet:before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22402%22 height=%2252%22 viewBox=%220 -4 402 52%22%3E%3Cpath d=%22M0,48 V46 A28,28 0 0 1 28,18 H169 Q190,18 201,0 Q212,18 233,18 H374 A28,28 0 0 1 402,46 V48 Z%22 fill=%22%2316201E%22/%3E%3Cpath d=%22M0.6,46 A27.4,27.4 0 0 1 28,18.6 H169 Q190,18.6 201,0 Q212,18.6 233,18.6 H374 A27.4,27.4 0 0 1 401.4,46%22 fill=%22none%22 stroke=%22%23FF873B%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.l-compact .sheet{top:112px}.l-compact .sheet:before{display:none}   /* pushed page: no notch (the hairline is on the header) */
.wall{background:var(--ivory)}                                           /* chat wallpaper: ivory + faint green tile at .5 */
.wall:after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%23075E54%22 stroke-opacity=%22.105%22 stroke-width=%22.7%22 stroke-linejoin=%22miter%22%3E%3Cpolygon points=%225.86,5.86 34.14,5.86 34.14,34.14 5.86,34.14%22/%3E%3Cpolygon points=%2220.00,0.00 40.00,20.00 20.00,40.00 0.00,20.00%22/%3E%3Cg stroke-opacity=%22.08%22%3E%3Cpolygon points=%2213.49,13.49 26.51,13.49 26.51,26.51 13.49,26.51%22/%3E%3Cpolygon points=%2220.00,10.80 29.20,20.00 20.00,29.20 10.80,20.00%22/%3E%3C/g%3E%3Cg transform=%22rotate(45 0 0)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 0) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(0 40) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 40) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 1px 0;opacity:.5;pointer-events:none}

/* medallion: white disc, orange ring, logo.png (kit/logo.png, resolved relative to kit.css) */
.med{position:absolute;top:50px;inset-inline-start:20px;width:var(--md,84px);height:var(--md,84px);border-radius:50%;background:#fff;box-shadow:0 6px 14px rgba(2,35,31,.38),0 0 0 3px var(--primary-deep);display:grid;place-items:center;z-index:2}
.med:before{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid var(--accent)}
.med:after{content:"";width:calc(var(--md,84px)*.74);height:calc(var(--md,84px)*.74);background:url("logo.png") center/contain no-repeat;clip-path:inset(3%)}
.l-profile .med{--md:60px;top:54px;box-shadow:0 5px 12px rgba(2,35,31,.38),0 0 0 2.5px var(--primary-deep)}
.l-profile .med:after{width:44px;height:44px}
.l-hero .med{--md:120px;top:102px;inset-inline-start:50%;margin-inline-start:-60px}.l-hero .med:before{inset:4px}
/* page title + header buttons */
.pt{position:absolute;top:70px;inset-inline:0;text-align:center;font-family:Amiri,"Amiri Quran","IBM Plex Sans",serif;font-weight:700;font-size:32px;line-height:44px;color:#fff;text-shadow:0 2px 6px rgba(2,35,31,.45)}
.sbtn{position:absolute;top:var(--bt);inset-inline-end:22px;width:46px;height:46px;border-radius:50%;background:rgba(251,248,242,.16);border:1px solid rgba(249,226,198,.42);display:grid;place-items:center;color:#FBF8F2;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);z-index:2}
.sbtn .ic{width:23px;height:23px}
.hpill{position:absolute;top:71px;inset-inline-end:20px;height:44px;padding:0 16px;border-radius:22px;border:1px solid rgba(249,226,198,.6);background:rgba(251,248,242,.06);color:#FBF8F2;font-size:15px;font-weight:600;line-height:42px;white-space:nowrap;z-index:2}
.pt.conn{display:flex;align-items:center;justify-content:center;gap:10px;font-size:28px}
/* profile block in the tall-profile header */
.pf{position:absolute;top:122px;inset-inline:20px;height:80px;display:flex;align-items:center;gap:16px}
.pa{flex:none;width:80px;height:80px;border-radius:50%;border:3px solid #fff;overflow:hidden;box-shadow:0 5px 12px rgba(2,35,31,.38);background:#fff}.pa svg{width:74px;height:74px;display:block}
.pn{font-family:Amiri,"Amiri Quran","IBM Plex Sans",serif;font-weight:700;font-size:28px;line-height:40px;color:#fff;margin-bottom:6px;text-shadow:0 2px 6px rgba(2,35,31,.45)}
.pbio{font-size:15.5px;line-height:24px;color:var(--sand)}
/* compact top row (56px, under the status bar): back arrow on the RIGHT pointing right */
.top{position:absolute;top:54px;inset-inline:0;height:56px;display:flex;align-items:center;padding:0;padding-inline:4px 6px;gap:6px;color:#fff;z-index:5}
.ib{flex:none;width:44px;height:44px;display:grid;place-items:center;color:inherit}
.ttl{flex:1;min-width:0;padding-inline-start:12px}
.ttl b{display:block;font-size:16.5px;font-weight:600;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl span{display:block;font-size:14px;line-height:18px;color:#CFE8E1}
.top h2{flex:1;min-width:0;font-size:18px;font-weight:600;line-height:24px;padding-inline-start:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* content areas */
.list{position:absolute;top:calc(var(--se) + 30px);inset-inline:0}
.page{position:absolute;top:calc(var(--se) + 22px);inset-inline:0;bottom:0;padding:0 20px;overflow:hidden}
.l-hero .page{padding:0 28px}

/* ---------- avatars ---------- */
.av{position:relative;flex:none;width:52px;height:52px}
.av .ph{width:52px;height:52px;border-radius:50%;overflow:hidden;display:block}
.av .ph svg{width:52px;height:52px;display:block}
.vb{position:absolute;bottom:-2px;inset-inline-end:-3px;width:20px;height:20px;border-radius:50%;background:var(--primary);border:2px solid var(--sheet);display:grid;place-items:center}
.vb svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.od{position:absolute;bottom:0;inset-inline-start:-1px;width:15px;height:15px;border-radius:50%;background:var(--online);border:2.5px solid var(--sheet)}
.av.sm,.av.sm .ph,.av.sm .ph svg{width:36px;height:36px}
.av.sm .ph{box-shadow:0 0 0 1.5px rgba(249,226,198,.55)}
.av.sm .vb{bottom:-3px;inset-inline-end:-4px;width:16px;height:16px;border-color:#fff}.av.sm .vb svg{width:9px;height:9px;stroke-width:2.8}

/* ---------- rows ---------- */
.row{position:relative;height:76px;display:flex;align-items:center;gap:14px;padding:0 20px}
.row:after{content:"";position:absolute;bottom:0;inset-inline-start:86px;inset-inline-end:20px;height:1px;background:var(--line)}
.row:last-child:after{display:none}
.tx{flex:1;min-width:0}
.tt{display:flex;align-items:center;gap:5px;font-size:16.5px;font-weight:500;line-height:24px;min-width:0;flex:1}.tt b{font-weight:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt.u{font-weight:600}
.tl,.pl{display:flex;align-items:center;gap:10px;justify-content:space-between}.pl{margin-top:3px}
.pv{display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:15px;line-height:24px;min-width:0;flex:1}
.pv span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv .ic{flex:none;width:18px;height:18px}
.pv.miss{color:var(--miss)}.pv.typing{color:var(--live-text);font-weight:500}.pv.tick .ic{color:var(--primary-2)}.pv.live{color:var(--live-text);font-weight:600}
.tm{flex:none;font-size:14px;color:var(--text-2);line-height:22px;white-space:nowrap}.tm.u{color:var(--primary);font-weight:600}
.dark .tm.u{color:var(--tile-ink)}
.pill{flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--primary);color:#fff;font-size:14px;font-weight:600;line-height:24px;text-align:center}
.at{flex:none;width:19px;height:19px;color:var(--primary)}
.mute{flex:none;width:20px;height:20px;color:var(--text-2)}
.cb{flex:none;width:44px;height:44px;border-radius:50%;background:var(--tonal);color:var(--primary);display:grid;place-items:center}.cb .ic{width:22px;height:22px}
.dark .cb{color:var(--tile-ink)}
.lv{flex:none;position:relative;width:18px;height:18px;display:grid;place-items:center}
.lv i{width:9px;height:9px;border-radius:50%;background:var(--live);display:block}
.lv:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--live);opacity:.35;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.45}100%{transform:scale(2.3);opacity:0}}
/* row trailing chevron (points LEFT) */
.row .ch{flex:none;width:20px;height:20px;color:var(--text-3)}

/* section group card + settings rows */
.sect{font-size:14px;font-weight:600;line-height:20px;color:var(--text-2);margin:0 6px 8px}
.grp{border:1px solid var(--line);border-radius:18px;margin-bottom:16px;background:var(--card);overflow:hidden}
.rw{position:relative;height:60px;display:flex;align-items:center;gap:14px;padding:0 14px}
.rw+.rw:before{content:"";position:absolute;top:0;inset-inline-start:60px;inset-inline-end:14px;height:1px;background:var(--line)}
.tile{flex:none;width:32px;height:32px;border-radius:9px;background:var(--tile);color:var(--tile-ink);display:grid;place-items:center}.tile .ic{width:20px;height:20px}
.lbl{flex:1;font-size:16px;line-height:24px;font-weight:500;color:var(--text)}
.rw .ch{flex:none;width:20px;height:20px;color:var(--text-3)}
.val{flex:none;font-size:15px;line-height:24px;color:var(--text-2)}
.upd{flex:none;display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--upd)}.ud{width:9px;height:9px;border-radius:50%;background:var(--accent)}
/* destructive row (own card) */
.out{height:60px;border-radius:18px;border:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--card)}
.out .tile{background:var(--danger-tile);color:var(--danger)}.out .lbl{color:var(--danger);font-weight:600}
/* iOS switch: OFF = knob at the start edge, ON = knob at the end edge (RTL: ON = knob on the left, as on a mirrored UISwitch) */
.sw{flex:none;width:51px;height:31px;border-radius:16px;background:var(--switch-off);position:relative;transition:background .2s}
.sw i{position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.sw.on{background:var(--switch)}.sw.on i{inset-inline-start:22px}

/* ---------- chips / segmented / search ---------- */
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--line-2);background:var(--card);color:var(--text);font-size:15px;font-weight:500}
.chip.on{background:var(--tile);border-color:var(--primary);color:var(--primary);font-weight:600}
.dark .chip.on{color:var(--tile-ink);border-color:var(--tile-ink)}
.chip.date{min-height:0;align-self:center;background:var(--card);border-color:var(--line-3);color:var(--text-2);font-size:14px;font-weight:400;line-height:20px;padding:3px 14px;border-radius:14px}
.seg{display:flex;height:44px;padding:3px;border-radius:14px;background:var(--fill)}
.seg a{flex:1;display:grid;place-items:center;border-radius:11px;font-size:15px;font-weight:500;color:var(--text-2)}
.seg a.on{background:var(--card);color:var(--primary);font-weight:600;box-shadow:0 1px 3px rgba(2,35,31,.14)}
.dark .seg a.on{color:var(--tile-ink);background:#2A3A36}
.search{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:22px;background:var(--fill);color:var(--text-2);font-size:15.5px}
.search .ic{width:20px;height:20px}

/* ---------- buttons (ONE .btn primary per screen) ---------- */
.btn{display:grid;place-items:center;height:52px;border-radius:14px;background:var(--primary);color:#fff;font-size:17px;font-weight:600;box-shadow:0 4px 10px rgba(2,35,31,.2)}
.btn.sec{background:var(--tile);color:var(--primary);box-shadow:none}
.btn.text{background:transparent;color:var(--primary);box-shadow:none;height:44px;padding:0 14px;display:inline-grid}
.btn.danger{background:var(--danger);color:#fff;box-shadow:none}
.btn.dis{background:#B9C3C0;color:#fff;box-shadow:none}
.dark .btn.sec,.dark .btn.text{color:var(--tile-ink)}
.dark .btn.danger{color:#2A0F0D}
.or{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:14px;color:var(--text-2);line-height:24px}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line-2)}
.lnk{min-height:44px;display:flex;align-items:center;font-size:15px;font-weight:600;color:var(--primary)}
.dark .lnk{color:var(--tile-ink)}
.reg{align-self:center;justify-content:center;min-height:44px;display:flex;align-items:center;gap:6px;font-size:15px;color:var(--text-2)}.reg b{color:var(--primary);font-weight:600}

/* ---------- text fields ---------- */
.h2{font-family:Amiri,"IBM Plex Sans",serif;font-weight:700;font-size:30px;line-height:40px;color:var(--primary);text-align:center}
.sub{font-size:15px;line-height:24px;color:var(--text-2);text-align:center;margin-top:2px}
.fl{margin-top:22px}.fl+.fl{margin-top:16px}
.fl label{display:block;font-size:15px;font-weight:500;line-height:22px;color:var(--text);margin-bottom:6px}
.in{position:relative;height:52px;border-radius:14px;background:var(--field);border:1px solid var(--line-2);display:flex;align-items:center;padding:0 16px;font-size:16px;color:var(--text);gap:8px}
.in .v,.in input{flex:1;min-width:0;white-space:nowrap;overflow:hidden;unicode-bidi:plaintext;border:0;background:transparent;font:inherit;color:inherit;outline:0}
.in.ltr .v,.in.ltr input{direction:ltr;text-align:start}            /* email / URL: Latin text, start edge in an LTR page ... */
.in.ltr:where(:dir(rtl)) .v,.in.ltr:where(:dir(rtl)) input{text-align:end;unicode-bidi:isolate}           /* ... and the right edge in an RTL page, like the approved login (the box itself is LTR, so end = right; isolate instead of plaintext so that Arabic hint text goes to the same edge as Latin text). :where keeps the specificity of the rule above, so a screen that overrides it still wins */
.in .hint,.in input::placeholder{color:var(--hint)}
.in .ic{width:22px;height:22px;color:var(--text-2)}
.in.focus{border:1.5px solid var(--primary);box-shadow:0 0 0 3px rgba(7,94,84,.14)}
.in.err{border:1.5px solid var(--danger)}
.msg{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;line-height:20px;color:var(--danger)}.msg .ic{width:18px;height:18px}

/* ---------- floating bottom bar ---------- */
.bar{position:absolute;inset-inline:16px;bottom:26px;height:68px;border-radius:28px;background:var(--bar);box-shadow:0 10px 24px rgba(2,35,31,.30),0 2px 6px rgba(2,35,31,.18);z-index:4;display:flex;align-items:center;padding:0 10px;gap:4px}
.bar:before{content:"";position:absolute;inset:0;border-radius:28px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.105%22 stroke-width=%22.7%22 stroke-linejoin=%22miter%22%3E%3Cpolygon points=%225.86,5.86 34.14,5.86 34.14,34.14 5.86,34.14%22/%3E%3Cpolygon points=%2220.00,0.00 40.00,20.00 20.00,40.00 0.00,20.00%22/%3E%3Cg stroke-opacity=%22.08%22%3E%3Cpolygon points=%2213.49,13.49 26.51,13.49 26.51,26.51 13.49,26.51%22/%3E%3Cpolygon points=%2220.00,10.80 29.20,20.00 20.00,29.20 10.80,20.00%22/%3E%3C/g%3E%3Cg transform=%22rotate(45 0 0)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 0) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(0 40) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 40) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 1px 0;opacity:.6}
.dark .bar{box-shadow:0 10px 26px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07)}.dark .bar:before{display:none}
.tab{flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--bar-ink);position:relative}
.tab .ti{position:relative;display:block;width:24px;height:24px}
.tab .lb{font-size:12.5px;line-height:16px;font-weight:500}
.tab.on{--cut:var(--pill);flex:none;width:150px;flex-direction:row;gap:8px;background:var(--pill);border-radius:24px;color:var(--pill-ink)}
.tab.on .lb{font-size:15px;font-weight:600;line-height:20px}
.bar.n4 .tab.on{width:126px}.bar.n4 .tab.on .lb{font-size:14px}
.bd{position:absolute;top:-9px;inset-inline-end:-11px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:#2A2E31;font-size:11.5px;font-weight:700;line-height:18px;text-align:center;font-style:normal;box-shadow:0 0 0 2px var(--pill)}
.tab:not(.on) .bd{box-shadow:0 0 0 2px var(--bar-ring)}
.dot{position:absolute;top:-3px;inset-inline-end:-4px;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--pill)}

/* ---------- empty state / skeleton / spinner ---------- */
.emp{position:absolute;inset-inline:0;top:calc(var(--se) + 24px);height:450px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.emp.flow{position:relative;top:auto;height:auto;padding:24px}
.emp .mh{position:relative;width:132px;height:156px;margin-bottom:26px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22132%22 height=%22156%22 viewBox=%220 0 132 156%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 148V74C10 46 40 30 66 6C92 30 122 46 122 74V148%22 stroke=%22%23075E54%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M22 148V76C22 53 46 40 66 22C86 40 110 53 110 76V148%22 stroke=%22%238DB5AC%22 stroke-width=%221%22/%3E%3Cpath d=%22M2 148H130%22 stroke=%22%23075E54%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M54 148H78%22 stroke=%22%23FF873B%22 stroke-width=%221.6%22/%3E%3C/svg%3E") no-repeat}
.dark .emp .mh{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22132%22 height=%22156%22 viewBox=%220 0 132 156%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 148V74C10 46 40 30 66 6C92 30 122 46 122 74V148%22 stroke=%22%238FD3C4%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M22 148V76C22 53 46 40 66 22C86 40 110 53 110 76V148%22 stroke=%22%233F6B62%22 stroke-width=%221%22/%3E%3Cpath d=%22M2 148H130%22 stroke=%22%238FD3C4%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M54 148H78%22 stroke=%22%23FF873B%22 stroke-width=%221.6%22/%3E%3C/svg%3E")}
.emp .mh .ic{position:absolute;inset-inline-start:42px;top:68px;width:48px;height:48px;stroke-width:1.5;color:var(--primary)}
.dark .emp .mh .ic{color:var(--tile-ink)}
.emp .e1{font-size:19px;font-weight:600;line-height:28px;color:var(--text)}
.emp .e2{margin-top:8px;font-size:15.5px;line-height:25px;color:var(--text-2);max-width:340px;text-wrap:balance}
.emp .btn{margin-top:22px;padding:0 28px;height:48px;font-size:16px}
.sk{position:relative;overflow:hidden;background:var(--sk);display:block}
/* the sweep runs toward the inline-start edge in both directions (in the approved RTL screens that is left to right, unchanged) */
.sk:after{content:"";position:absolute;inset-block:0;inset-inline-start:100%;width:100%;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);animation:shim 1.5s ease-in-out infinite}
.dark .sk:after{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.07) 50%,transparent 80%)}
@keyframes shim{to{inset-inline-start:-100%}}
.sk.c{width:52px;height:52px;border-radius:50%}.sk.b{height:12px;border-radius:6px}.sk.p{height:11px;border-radius:6px}.sk.t{height:10px;width:40px;border-radius:5px}
.spin{display:inline-block;flex:none;width:20.4px;height:20.4px;margin:1.8px;border-radius:50%;border:2.4px solid color-mix(in srgb,currentColor 40%,transparent);border-top-color:currentColor;animation:rot 1s linear infinite}
.spin.lg{width:36px;height:36px;margin:0;border-width:3.5px}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- overlays (position:absolute inside the 402x874 body; centre inside any relative box) ---------- */
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:8}
.dlg{position:absolute;inset-inline:0;margin-inline:auto;top:50%;transform:translateY(-50%);width:312px;border-radius:22px;background:var(--card);padding:24px 20px 18px;text-align:center;box-shadow:0 18px 48px rgba(2,35,31,.35);z-index:9}
.dlg h3{font-size:18px;font-weight:600;line-height:26px;color:var(--text)}
.dlg p{margin-top:6px;font-size:15.5px;line-height:25px;color:var(--text-2);text-wrap:balance}
.dlg .in{margin-top:16px;height:48px;text-align:start}
.dlg .acts{display:flex;gap:10px;margin-top:20px}
.dlg .acts .btn{flex:1;height:48px;font-size:16px;box-shadow:none}
.dlg .acts .btn:not(.sec):not(.danger):not(.text){box-shadow:0 4px 10px rgba(2,35,31,.2)}
.dlg.col .acts{flex-direction:column}
.dlg.load{width:200px;padding:26px 20px 22px;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--primary)}
.dark .dlg.load{color:var(--tile-ink)}
.dlg.load .lt{font-size:15.5px;font-weight:500;color:var(--text)}
.as{position:absolute;inset-inline:8px;bottom:26px;z-index:9;display:flex;flex-direction:column;gap:8px}
.as .g{background:var(--card);border-radius:18px;overflow:hidden}
.as .g a{position:relative;height:56px;display:grid;place-items:center;font-size:17px;font-weight:500;color:var(--text)}
.as .g a+a:before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--line)}
.as .g a.d{color:var(--danger)}
.as .g.cancel a{font-weight:600;color:var(--primary)}
.dark .as .g.cancel a{color:var(--tile-ink)}
.as .hd{height:auto;padding:12px 16px;font-size:14px;font-weight:400;color:var(--text-2);line-height:20px;text-align:center}
.bs{position:absolute;inset-inline:0;bottom:0;z-index:9;background:var(--card);border-radius:28px 28px 0 0;padding:8px 20px 36px;box-shadow:0 -10px 30px rgba(2,35,31,.22)}
.bs .grab{width:36px;height:5px;border-radius:3px;background:var(--line-2);margin:0 auto 14px}
.dark .bs .grab{background:#3A4A46}
.bs h3{font-size:18px;font-weight:600;line-height:26px;text-align:center;color:var(--text);margin-bottom:6px}
.toast{position:absolute;top:62px;inset-inline:16px;min-height:52px;padding:10px 16px;border-radius:16px;display:flex;align-items:center;gap:10px;color:#fff;font-size:15.5px;font-weight:500;line-height:24px;background:var(--primary);box-shadow:0 8px 22px rgba(2,35,31,.3);z-index:31}
.toast.ok{background:#075E54}.toast.err{background:#B3261E}
.toast .ic{width:22px;height:22px}
.snack{position:absolute;inset-inline:16px;bottom:106px;min-height:48px;padding:6px 16px;border-radius:14px;display:flex;align-items:center;gap:12px;background:#2A2E31;color:#fff;font-size:15px;line-height:22px;box-shadow:0 8px 22px rgba(2,35,31,.3);z-index:9}
.snack span{flex:1}
.snack a{flex:none;min-height:44px;display:flex;align-items:center;padding:0 4px;font-weight:600;color:var(--sand)}
.dark .snack{background:#2E3E3A}

/* specimen helper: a phone-sized box (position:relative) so overlays/headers can be shown several per page */
.stage{position:relative;width:402px;overflow:hidden;background:var(--page);color:var(--text)}
.stage .toast{top:62px}.stage.mini .toast{top:12px}.stage.mini .snack{bottom:12px}.stage.mini .as{bottom:12px}