/* Intro, sign in, share studio, report export and the printable report. */
/* =====================================================================
   ENTRY AND SHARING: the intro story, sign in, the share studio,
   report export and the printable report (paper, always light)
   ===================================================================== */

/* ---------- the intro story ---------- */
/* the intro and sign-in palette: a calm sky in light, the navy night in dark */
:root{--xi-top:#E6EDFD;--xi-mid:#F0F4FC;--xi-base:#F7F9FC;--xi-ink:#0E1424;--xi-ink-2:rgba(14,20,36,.6);--xi-mut:rgba(14,20,36,.64);
  --xi-fill:rgba(14,20,36,.06);--xi-fill-2:rgba(14,20,36,.1);--xi-track:rgba(14,20,36,.12);--xi-on:#0E1424;--xi-chip:#FFFFFF;--xi-chip-sh:0 1px 2px rgba(14,20,36,.06),0 12px 28px -12px rgba(14,20,36,.22);
  --xi-ci:rgba(14,20,36,.06);--xi-ok:#06744C;--xi-ok-bg:#E8F6EF;--xi-warn:#9A5800;--xi-warn-bg:#FFF4E2;--xi-av:var(--blue-100);--xi-av-ink:var(--blue-800);--xi-focus:var(--blue-500)}
:root[data-theme="dark"]{--xi-top:#0A1633;--xi-mid:#060D20;--xi-base:#050A18;--xi-ink:#FFFFFF;--xi-ink-2:rgba(255,255,255,.6);--xi-mut:rgba(255,255,255,.7);
  --xi-fill:rgba(255,255,255,.1);--xi-fill-2:rgba(255,255,255,.16);--xi-track:rgba(255,255,255,.22);--xi-on:#FFFFFF;--xi-chip:#13224A;--xi-chip-sh:0 18px 40px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(184,196,224,.16);
  --xi-ci:rgba(255,255,255,.1);--xi-ok:#5FE0AE;--xi-ok-bg:rgba(63,209,154,.16);--xi-warn:#F7BC5C;--xi-warn-bg:rgba(245,165,36,.16);--xi-av:var(--blue-300);--xi-av-ink:#0A1633;--xi-focus:var(--blue-300)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--xi-top:#0A1633;--xi-mid:#060D20;--xi-base:#050A18;--xi-ink:#FFFFFF;--xi-ink-2:rgba(255,255,255,.6);--xi-mut:rgba(255,255,255,.7);
  --xi-fill:rgba(255,255,255,.1);--xi-fill-2:rgba(255,255,255,.16);--xi-track:rgba(255,255,255,.22);--xi-on:#FFFFFF;--xi-chip:#13224A;--xi-chip-sh:0 18px 40px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(184,196,224,.16);
  --xi-ci:rgba(255,255,255,.1);--xi-ok:#5FE0AE;--xi-ok-bg:rgba(63,209,154,.16);--xi-warn:#F7BC5C;--xi-warn-bg:rgba(245,165,36,.16);--xi-av:var(--blue-300);--xi-av-ink:#0A1633;--xi-focus:var(--blue-300)}}
html.xi-on,html.xi-on body,html.xi-on .app{background:var(--xi-base)}
/* --xi-pad: the page gutter; from 1024 px the content sits in a centred 1280 px column */
.xi{--xi-pad:var(--s-5);position:relative;height:100vh;height:100dvh;min-height:560px;overflow:hidden;isolation:isolate;outline:none;background:linear-gradient(180deg,var(--xi-top) 0%,var(--xi-mid) 55%,var(--xi-base) 100%);color:var(--xi-ink);font-family:var(--font);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.xi-bg,.xi-bg i,.xi-cv,.xi-shade,.xi-grain{position:absolute;inset:0;pointer-events:none}
.xi-bg i{opacity:0;transition:opacity var(--t-3) var(--ease-out)}
.xi-bg i.on{opacity:1}
.xi-cv{width:100%;height:100%;opacity:0;transition:opacity var(--t-3) var(--ease-out) .1s}
.xi-cv.on{opacity:1}
/* the scrim: clean background behind the copy on phones, so text never sits on the figure */
.xi-shade{background:linear-gradient(180deg,color-mix(in srgb,var(--xi-base) 72%,transparent) 0%,transparent 16%,transparent 40%,color-mix(in srgb,var(--xi-base) 88%,transparent) 56%,var(--xi-base) 66%)}
.xi-grain{display:none}
.xi-top{position:absolute;top:0;left:0;right:0;z-index:3;padding:calc(var(--safe-t) + var(--s-3)) var(--xi-pad) 0}
.xi-bars{display:flex;gap:var(--s-1)}
.xi-bars span{flex:1;height:3px;border-radius:2px;background:var(--xi-track);overflow:hidden}
.xi-bars i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--xi-on);transform:scaleX(0);transform-origin:left center}
[dir=rtl] .xi-bars i{transform-origin:right center}
.xi-bars i.xi-f{transform:none}
.xi-bars i.xi-r{animation:xiBar linear forwards}
.xi.hold .xi-bars i.xi-r{animation-play-state:paused}
.xi.rm .xi-bars i.xi-r{animation:none;transform:none}
@keyframes xiBar{to{transform:none}}
.xi-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);min-height:var(--tap);margin-top:var(--s-3)}
.xi-tools{display:flex;align-items:center;gap:var(--s-2)}
.xi-mark,.si-top .xi-mark{display:flex;align-items:center;gap:var(--s-2)}
.xi-mark i{width:11px;height:11px;border-radius:2px;background:var(--blue-400);transform:skewX(-14deg)}
.xi-mark b{font-family:'Archivo',var(--font-d);font-variation-settings:'wdth' 62;font-stretch:62%;font-weight:var(--fw-3);font-size:var(--fs-5);letter-spacing:.07em;line-height:1;color:var(--xi-ink)}
.xi-lang,.xi-tool{display:flex;align-items:center;justify-content:center;min-width:var(--tap);height:var(--tap);padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:var(--xi-fill);color:var(--xi-ink);font-size:var(--fs-2);font-weight:var(--fw-2);cursor:pointer;transition:background-color var(--t-1),transform var(--t-1) var(--ease-out)}
.xi-tool{padding:0}
.xi-lang:active,.xi-tool:active{transform:scale(.95)}
.xi-lang[lang=ar]{font-family:'IBM Plex Sans Arabic',var(--font);font-size:var(--fs-3)}
/* floating stat chips: one component, one size, placed in balance around the figure */
.xi-chips{position:absolute;inset:0;z-index:2;pointer-events:none}
.xi-cw{position:absolute;width:184px}
@media (max-width:599px){.xi-cw{width:auto;max-width:min(176px,46vw)}.xi-cw.r{top:18%}.xi-cw.l{top:57%}.xi-ct :is(small,b){white-space:normal;overflow:visible;text-overflow:clip}} /* phones: smaller chips at the edges, clear of the face and the waist band */
.xi-cw.r{top:26%;inset-inline-end:var(--s-4)}
.xi-cw.l{top:44%;inset-inline-start:var(--s-4)}
.xi-chip{display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-3);border-radius:var(--r-3);background:var(--xi-chip);box-shadow:var(--xi-chip-sh);animation:xiIn var(--t-3) var(--ease-out) both;animation-delay:calc(400ms + var(--d) * 140ms)}
@keyframes xiIn{from{opacity:0;transform:translateY(12px)}}
.xi-ci{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:var(--r-2);background:var(--xi-ci);color:var(--xi-ink)}
.xi-ci.t-gold{background:var(--blue-500);color:#FFFFFF}
.xi-ci.t-ok{background:var(--xi-ok-bg);color:var(--xi-ok)}
.xi-ci.t-warn{background:var(--xi-warn-bg);color:var(--xi-warn)}
.xi-ci.t-av{background:none}
.xi-av{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--xi-av);color:var(--xi-av-ink);font-size:var(--fs-1);font-weight:var(--fw-2)}
.xi-ct{display:flex;flex-direction:column;gap:2px;min-width:0}
.xi-ct small{font-size:var(--fs-1);color:var(--xi-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xi-ct b{font-size:var(--fs-3);font-weight:var(--fw-2);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.xi-ct b em{font-size:var(--fs-1);font-style:normal;font-weight:var(--fw-1);color:var(--xi-mut)}
.xi-sets{display:flex;gap:var(--s-1);padding-block:6px}
.xi-sets i{width:22px;height:6px;border-radius:3px;background:var(--xi-track)}
.xi-sets i.on{background:var(--xi-on)}
.xi-sets i.cur{background:var(--blue-400)}
.xi-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;gap:var(--s-6);padding:0 var(--xi-pad) calc(var(--safe-b) + var(--s-6))}
.xi-copy{display:flex;flex-direction:column;gap:var(--s-4)}
.xi-tag{display:inline-flex;align-items:center;gap:var(--s-3);font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.18em;text-transform:uppercase;color:var(--xi-mut);animation:xiRise var(--t-3) var(--ease-out) both}
.xi-tag b{color:var(--xi-ink);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.xi-tag i{width:24px;height:1px;background:var(--xi-track)}
.xi-h,.si-h{margin:0;font-family:var(--font);font-size:var(--fs-5);font-weight:var(--fw-3);line-height:1.1;letter-spacing:-.03em;color:var(--xi-ink);text-wrap:balance;animation:xiRise var(--t-3) var(--ease-out) both 40ms}
.xi-h .g,.si-h .g{color:var(--xi-ink-2)}
@keyframes xiRise{from{opacity:0;transform:translateY(8px)}}
.xi-cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.xi-btn{display:flex;align-items:center;justify-content:center;height:56px;padding:0 var(--s-5);border:0;border-radius:var(--r-pill);background:var(--xi-fill);color:var(--xi-ink);font-size:var(--fs-3);font-weight:var(--fw-2);text-align:center;white-space:nowrap;cursor:pointer;transition:transform var(--t-1) var(--ease-out),background-color var(--t-1)}
.xi-btn.pri{background:var(--accent);color:var(--on-accent)}
.xi-btn:active{transform:scale(.97)}
.xi-btn:disabled{opacity:.4;cursor:default;transform:none}
.xi-btn:focus-visible,.xi-lang:focus-visible,.xi-tool:focus-visible,.si-back:focus-visible{outline:2px solid var(--xi-focus);outline-offset:3px}
[dir=rtl] .xi-h,[dir=rtl] .si-h{font-family:'IBM Plex Sans Arabic',var(--font);font-size:var(--fs-5);line-height:1.35;letter-spacing:0}
[dir=rtl] .xi-tag{letter-spacing:0;text-transform:none}
[dir=rtl] .xi-btn,[dir=rtl] .xi-ct{font-family:'IBM Plex Sans Arabic',var(--font);letter-spacing:0}
@media (min-width:600px) and (max-width:1023px){.xi-h{font-size:var(--fs-6);line-height:1.04}.xi-foot{max-width:560px;margin:0 auto;left:0;right:0}.xi-cw.r{inset-inline-end:var(--s-5)}.xi-cw.l{inset-inline-start:var(--s-5)}}
@media (max-height:700px) and (max-width:1023px){.xi-foot{gap:var(--s-5);padding-bottom:calc(var(--safe-b) + var(--s-5))}.xi-copy{gap:var(--s-3)}.xi-cw.r{top:22%}.xi-cw.l{top:38%}}
/* desktop: a text column at the start, the figure at the end, both inside one centred column */
@media (min-width:1024px){
  .xi{--xi-pad:max(var(--s-7),calc((100% - 1280px) / 2));--xi-split:44%}
  .xi-cv,.xi-bg,.xi-chips{inset-inline-start:var(--xi-split);width:auto}
  .xi-cv{inset:0 0 0 var(--xi-split);width:calc(100% - var(--xi-split))}
  [dir=rtl] .xi-cv{inset:0 var(--xi-split) 0 0}
  .xi-shade{background:linear-gradient(180deg,color-mix(in srgb,var(--xi-base) 60%,transparent) 0%,transparent 14%,transparent 80%,color-mix(in srgb,var(--xi-base) 70%,transparent) 100%)}
  /* the buttons keep one place on every step: the copy grows upward from them */
  .xi-foot{top:0;bottom:0;right:auto;inset-inline-start:var(--xi-pad);inset-inline-end:auto;width:min(520px,calc(var(--xi-split) - var(--xi-pad) - var(--s-6)));justify-content:flex-end;gap:var(--s-6);padding:96px 0 max(var(--s-7),30vh)}
  /* the headline fills the column so its first line ends with the buttons; the stage fades in at its start edge, no seam */
  .xi-h{font-size:var(--fs-6);line-height:1.04;text-wrap:wrap}
  [dir=rtl] .xi-h{font-size:var(--fs-6);line-height:1.3}
  .xi-cv,.xi-bg{-webkit-mask-image:linear-gradient(to right,transparent,#000 18%);mask-image:linear-gradient(to right,transparent,#000 18%)}
  [dir=rtl] :is(.xi-cv,.xi-bg){-webkit-mask-image:linear-gradient(to left,transparent,#000 18%);mask-image:linear-gradient(to left,transparent,#000 18%)}
  .xi-cw{width:208px}
  /* chips on the page grid: the outer one ends on the content edge (window units: the chip layer is narrower than the window) */
  .xi-cw.r{top:30%;inset-inline-end:max(var(--s-7),calc((100vw - 1280px) / 2))}
  .xi-cw.l{top:56%;inset-inline-start:max(var(--s-5),calc(50% - 400px))}
}
@media (hover:hover) and (pointer:fine){.xi-btn:hover{background:var(--xi-fill-2)}.xi-btn.pri:hover{background:var(--blue-600)}.xi-lang:hover,.xi-tool:hover{background:var(--xi-fill-2)}}

/* ---------- sign in: the same navy night as the intro ---------- */
/* ---------- sign in: the intro's sky in light, its navy night in dark ---------- */
.scr.signin.dk{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;gap:var(--s-4);padding:calc(var(--safe-t) + var(--s-3)) var(--s-5) var(--s-7);background:var(--xi-base);color:var(--ink)}
:root[data-theme="dark"] .scr.signin.dk{--bg:#050A18;--surface:#0E1A38;--surface-2:#12204A;--fill:rgba(255,255,255,.08);--fill-2:rgba(255,255,255,.14);--line:rgba(184,196,224,.14);--line-2:rgba(184,196,224,.26);
  --ink:#F2F5FC;--ink-2:#C9D3EA;--ink-3:#9AA9CB;--ink-4:#7083AD;--accent-ink:#9DB6FF;--accent-soft:rgba(92,132,255,.16);--accent-line:rgba(92,132,255,.4);
  --warn:#F7BC5C;--warn-soft:rgba(245,165,36,.14);--bad:#FF8A84;--bad-soft:rgba(242,85,90,.14);--ok:#5FE0AE;--ok-soft:rgba(63,209,154,.14);--edge:rgba(184,196,224,.14);--elev-1:none;--elev-2:none;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .scr.signin.dk{--bg:#050A18;--surface:#0E1A38;--surface-2:#12204A;--fill:rgba(255,255,255,.08);--fill-2:rgba(255,255,255,.14);--line:rgba(184,196,224,.14);--line-2:rgba(184,196,224,.26);
  --ink:#F2F5FC;--ink-2:#C9D3EA;--ink-3:#9AA9CB;--ink-4:#7083AD;--accent-ink:#9DB6FF;--accent-soft:rgba(92,132,255,.16);--accent-line:rgba(92,132,255,.4);
  --warn:#F7BC5C;--warn-soft:rgba(245,165,36,.14);--bad:#FF8A84;--bad-soft:rgba(242,85,90,.14);--ok:#5FE0AE;--ok-soft:rgba(63,209,154,.14);--edge:rgba(184,196,224,.14);--elev-1:none;--elev-2:none;color-scheme:dark}}
.scr.signin.dk::before{content:'';position:absolute;inset:0 0 auto 0;z-index:-1;height:520px;pointer-events:none;background:radial-gradient(70% 55% at 85% -8%,color-mix(in srgb,var(--blue-500) 22%,transparent),transparent 70%)}
:root[data-theme="dark"] .scr.signin.dk::before{background:radial-gradient(70% 55% at 85% -8%,rgba(42,91,255,.4),transparent 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .scr.signin.dk::before{background:radial-gradient(70% 55% at 85% -8%,rgba(42,91,255,.4),transparent 70%)}}
[dir=rtl] .scr.signin.dk::before{transform:scaleX(-1)}
.app:has(>.signin.dk){background:var(--xi-base)}
.si-top{display:flex;align-items:center;gap:var(--s-3);min-height:52px}
.si-top>.xi-tools{margin-inline-start:auto}
.pre-th{display:contents}
.pre-th.narrow{display:none}
@media (max-width:599px){.pre-th.wide{display:none}.pre-th.narrow{display:contents}}
.si-back{display:flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:50%;background:var(--fill);color:var(--ink);cursor:pointer;transition:transform var(--t-1) var(--ease-out)}
.si-back:active{transform:scale(.94)}
.si-h{margin:var(--s-5) 0 var(--s-2);font-size:var(--fs-5)}
.si-ph{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3) var(--s-4);border-radius:var(--r-2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);cursor:text;transition:box-shadow var(--t-1)}
.si-ph:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.si-l{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3)}
.si-r{display:flex;align-items:center;gap:var(--s-3);direction:ltr}
.si-cc{position:relative;display:flex;align-items:center;gap:var(--s-1);padding-right:var(--s-3);border-right:1px solid var(--line-2);color:var(--ink)}
.si-cc b{font-size:var(--fs-3);font-weight:var(--fw-2);line-height:28px;white-space:nowrap}
.si-cc svg{color:var(--ink-3);transform:rotate(90deg)}
.si-cc select{position:absolute;inset:-8px 0 -8px -8px;width:auto;height:auto;min-height:0;opacity:0;cursor:pointer;font-size:16px}
.si-cc:focus-within b{color:var(--accent)}
.si-r input{flex:1;min-width:0;height:30px;padding:0;border:0;outline:none;background:transparent;color:var(--ink);font-size:var(--fs-4);font-weight:var(--fw-2);letter-spacing:.01em}

.si-sw{margin:var(--s-2) 0 0;color:var(--ink-3);font-size:var(--fs-2);text-align:center}
.si-hint{text-align:center}
.si-sw .link{display:inline;min-height:0;font-size:var(--fs-2);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.checkline .link{display:inline;min-height:0}
.demo[hidden]{display:none}
.signin.dk .field{background:var(--surface)}
.signin.dk .otp{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.signin.dk .otp:focus{border-color:var(--accent);outline:3px solid var(--accent-soft);outline-offset:0}
.signin.dk .btn:disabled{background:var(--fill);color:var(--ink-4)}
.signin.dk .btn.sec{background:var(--fill);color:var(--ink)}
.signin.dk .radio{background:var(--surface)}
.signin.dk .radio.on{background:var(--surface)}
.signin.dk .card,.signin.dk .list{background:var(--surface)}
.signin.dk .checkline{color:var(--ink-3)}
.signin.dk>.link{align-self:center;min-height:var(--tap)}
.demo{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-3)}
.signin.dk .demo{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.btn.bio-btn{background:var(--accent);color:var(--on-accent)}
.dark-app{background:var(--navy)}

/* ---------- share studio: dark, full screen on phones, a centred panel on desktop ---------- */
.shx-ov{position:fixed;inset:0;z-index:var(--z-over);display:flex;align-items:stretch;justify-content:center;background:rgba(3,6,16,.8);animation:xb-fade var(--t-2) var(--ease-out)}
.shx-ov.is-out{animation:xb-fade-out var(--t-x2) var(--ease-in) both}
.shx{
  --bg:#050A18;--surface:#0E1A38;--surface-2:#12204A;--fill:rgba(255,255,255,.08);--fill-2:rgba(255,255,255,.14);--line:rgba(184,196,224,.14);--line-2:rgba(184,196,224,.26);
  --ink:#F2F5FC;--ink-2:#C9D3EA;--ink-3:#9AA9CB;--ink-4:#7083AD;--accent-ink:#9DB6FF;--accent-soft:rgba(92,132,255,.16);--warn:#F7BC5C;--warn-soft:rgba(245,165,36,.14);--edge:rgba(184,196,224,.14);--elev-1:none;
  color-scheme:dark;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;max-width:1000px;height:100%;background:#050A18;color:var(--ink);overflow:hidden;animation:xb-sheet-in var(--t-3) var(--ease-out) both}
.shx-ov.is-out .shx{animation:xb-sheet-out var(--t-x3) var(--ease-in) both}
.shx-glow{position:absolute;left:50%;top:-18%;z-index:-1;width:130%;height:62%;background:radial-gradient(closest-side,var(--a),transparent);opacity:.18;transform:translateX(-50%);pointer-events:none}
.shx-top{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--safe-t) + var(--s-2)) var(--s-3) var(--s-1)}
.shx-top b{font-size:var(--fs-3);font-weight:var(--fw-2)}
.shx-ic{display:flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:50%;background:var(--fill);color:#FFFFFF;cursor:pointer;transition:transform var(--t-1) var(--ease-out)}
.shx-ic:active{transform:scale(.94)}
.shx-sp{width:var(--tap)}
.shx-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.shx-stage{display:flex;align-items:center;justify-content:center;padding:var(--s-2) var(--s-5) var(--s-5)}
.shx-frame{position:relative;max-width:calc(100vw - 40px);border-radius:var(--r-3);overflow:hidden;background:#0A1124;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.09)}
.shx-frame.story{height:min(50vh,600px);aspect-ratio:9/16}
.shx-frame.post{height:min(46vh,500px);aspect-ratio:4/5}
.shx-frame.square{height:min(42vh,440px);aspect-ratio:1}
.shx-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity var(--t-2)}
.shx-frame.busy img{opacity:.5}
.shx-load{position:absolute;inset:0;background:rgba(255,255,255,.04);animation:xb-pulse 1.4s ease-in-out infinite}
.shx-panel{display:flex;flex-direction:column;gap:var(--s-4);width:100%;max-width:560px;margin:0 auto;padding:var(--s-1) var(--s-5) calc(var(--safe-b) + var(--s-4))}
.shx-fmt{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;border-radius:var(--r-2);background:var(--fill)}
.shx-fmt button{display:flex;align-items:center;justify-content:center;gap:var(--s-2);height:40px;border:0;border-radius:10px;background:transparent;color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2);cursor:pointer;transition:background-color var(--t-2),color var(--t-2)}
.shx-fmt button.on{background:#FFFFFF;color:#050A18}
.shx-fi{display:inline-block;border:1.6px solid currentColor;border-radius:3px}
.shx-fi.story{width:9px;height:15px}.shx-fi.post{width:11px;height:14px}.shx-fi.square{width:13px;height:13px}
.shx-sw{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:2px}
.shx-s{width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #050A18,0 0 0 3.5px rgba(255,255,255,.14);cursor:pointer;transition:box-shadow var(--t-1),transform var(--t-1) var(--ease-out)}
.shx-s.on{box-shadow:0 0 0 2.5px #050A18,0 0 0 4.5px #FFFFFF;transform:scale(1.05)}
.shx-s.auto{background:radial-gradient(circle at 50% 50%,var(--c) 0 38%,transparent 40%),conic-gradient(#8FAAFF,#2A5BFF,#0F2261,#5C84FF,#8FAAFF)}
.shx-tabs{display:flex;gap:var(--s-5);border-bottom:1px solid var(--line)}
.shx-tabs button{min-height:var(--tap);margin-bottom:-1px;padding:0;border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2);cursor:pointer;transition:color var(--t-1),border-color var(--t-2)}
.shx-tabs button.on{border-color:#FFFFFF;color:#FFFFFF}
.shx-tiles{display:flex;gap:var(--s-2);margin:0 calc(-1 * var(--s-5));padding:2px var(--s-5) var(--s-2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--s-5)}
.shx-tiles::-webkit-scrollbar{display:none}
.shx-t{position:relative;display:flex;flex-direction:column;gap:var(--s-2);flex:0 0 148px;min-height:136px;padding:var(--s-3);border:0;border-radius:var(--r-3);background:var(--surface);color:#FFFFFF;text-align:start;scroll-snap-align:start;cursor:pointer;overflow:hidden;transition:box-shadow var(--t-1),transform var(--t-1) var(--ease-out)}
.shx-t:active{transform:scale(.97)}
.shx-t.on{box-shadow:inset 0 0 0 2px var(--c)}
.shx-tc{display:flex;align-items:center;gap:var(--s-1);color:var(--c);font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:var(--tr-l);text-transform:uppercase;line-height:1.3}
[dir=rtl] .shx-tc{text-transform:none}
.shx-tc em{padding:1px 6px;border-radius:var(--r-1);background:rgba(255,255,255,.12);color:#FFFFFF;font-style:normal;letter-spacing:0;text-transform:none}
.shx-t b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-5);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shx-t small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--ink-3);font-size:var(--fs-1);line-height:var(--lh-t)}
.shx-empty{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4);border-radius:var(--r-3);background:var(--surface);color:var(--ink-3);font-size:var(--fs-2)}
.shx-empty b{color:#FFFFFF;font-size:var(--fs-3)}
.shx-own .field{background:var(--surface)}
.shx-own select{background-color:transparent;color:#FFFFFF}
.shx-own select option{color:#050A18}
.shx-own .chip.on{background:#FFFFFF;color:#050A18}
.shx-note{color:var(--ink-3);font-size:var(--fs-1);line-height:var(--lh-b)}
.shx-cta{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);padding:var(--s-3) 0 2px;background:#050A18}
.shx-cta .wide{grid-column:1/-1}
@media (min-width:820px){
  .shx-ov{align-items:center}
  .shx{height:auto;max-height:92vh;margin:0 var(--s-4);border-radius:var(--r-3);box-shadow:inset 0 0 0 1px var(--line);animation-name:xb-pop-in}
  .shx-ov.is-out .shx{animation-name:xb-pop-out}
  .shx-body{flex-direction:row;align-items:stretch}
  .shx-stage{flex:1.15;padding:var(--s-2) var(--s-2) var(--s-6) var(--s-6)}
  .shx-panel{flex:1;max-height:calc(92vh - 64px);padding-top:var(--s-2);overflow-y:auto}
  .shx-frame.story{height:min(76vh,700px)}.shx-frame.post{height:min(62vh,560px)}.shx-frame.square{height:min(52vh,480px)}
}

/* ---------- report export ---------- */
.exp{gap:var(--s-4)}
.exp-opts,.exp-f{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.exp-o,.exp-o2{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--s-4);border:0;border-radius:var(--r-3);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-align:start;transition:box-shadow var(--t-1),transform var(--t-1) var(--ease-out)}
.exp-o:active,.exp-o2:active{transform:scale(.98)}
.exp-o b,.exp-o2 b{font-size:var(--fs-3);font-weight:var(--fw-2)}
.exp-o small,.exp-o2 small{font-size:var(--fs-2);line-height:var(--lh-t);color:var(--ink-3)}
.exp-o2.on{box-shadow:inset 0 0 0 2px var(--accent)}
.exp-ic{display:flex;align-items:center;width:24px;height:24px;margin-bottom:var(--s-1);color:var(--ink-3);transition:color var(--t-2)}
.exp-o2.on .exp-ic{color:var(--accent-ink)}

.exp-c{color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2);font-variant-numeric:tabular-nums}
.exp-prev{flex-direction:row;align-items:center;gap:var(--s-4);text-align:start}
.exp-prev .grow{display:flex;flex-direction:column;gap:2px}
.exp-thumb{position:relative;flex-shrink:0;width:82px;height:116px;border-radius:var(--r-1);background:#FFFFFF;box-shadow:var(--elev-1),inset 0 0 0 1px var(--line);overflow:hidden}
/* a true miniature: scaled after layout, so the text keeps its real line breaks */
.exp-scale{position:absolute;top:0;left:0;width:794px;transform:scale(.1033);transform-origin:0 0}
[dir=rtl] .exp-scale{left:auto;right:0;transform-origin:100% 0}
@media (max-width:600px){.exp-opts{grid-template-columns:minmax(0,1fr)}}
@media (hover:hover) and (pointer:fine){.exp-o:hover,.exp-o2:hover:not(.on){box-shadow:inset 0 0 0 1px var(--accent-line)}}
/* full screen viewer for a finished report */
.rp-view{position:fixed;inset:0;z-index:var(--z-over);display:flex;flex-direction:column;background:#1B2333;animation:xb-fade var(--t-2) var(--ease-out)}
.rp-view-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:calc(var(--safe-t) + var(--s-2)) var(--s-3) var(--s-2);background:var(--navy);color:var(--on-navy)}
.rp-view-h .icon-btn{background:rgba(255,255,255,.1);color:#FFFFFF}
.rp-view-b{flex:1;padding:var(--s-3);overflow:auto;overscroll-behavior:contain}
.rp-view.is-out{animation:xb-fade-out var(--t-x3) var(--ease-in) both;pointer-events:none}
.rp-fitw{margin:0 auto;overflow:hidden}
.rp-fit{width:794px;transform-origin:0 0}
[dir=rtl] .rp-fit{transform-origin:100% 0}
.rp-fit .rp-page{margin-bottom:var(--s-3);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.rp-cap{position:fixed;left:-12000px;top:0;z-index:-1;width:794px}
.rp-cap .rp-page{margin:0}

/* ---------- the printable report: A4 paper, fixed light palette ---------- */
/* the report sets its own base type so it lays out the same wherever it is drawn (thumbnail, preview, capture) */
.rp-doc{width:794px;color:#0F172A;font-family:'Inter','IBM Plex Sans Arabic',system-ui,sans-serif;font-size:16px;font-weight:400;line-height:1.45;letter-spacing:0;text-align:start;text-transform:none;white-space:normal;overflow-wrap:break-word;font-feature-settings:'cv11','ss01';font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.rp-page{position:relative;display:flex;flex-direction:column;width:794px;height:1123px;background:#FFFFFF;color:#0F172A;overflow:hidden;color-scheme:light}
.rp-page[dir=rtl]{font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;line-height:1.6}
/* Arabic in the PDF: no tracking (the page capture draws spaced letters one by one, which breaks the joins) and the Arabic face for display text */
.rp-page[dir=rtl] *{letter-spacing:0!important}
.rp-page[dir=rtl] svg{direction:ltr}
.rp-page[dir=rtl] :is(h1,h2,.rp-n,.rp-kpi b){font-family:'IBM Plex Sans Arabic','Archivo','Inter',sans-serif}
.rp-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:26px 44px 14px;border-bottom:1px solid #E2E8F0;color:#5C6577;font-size:11px;font-weight:600}
.rp-mark{display:inline-flex;align-items:center;gap:7px;color:#0A1633;font-size:12px;font-weight:800;letter-spacing:.16em}
.rp-mark i{width:10px;height:10px;border-radius:3px;background:#2A5BFF;transform:skewX(-12deg)}
.rp-mark.light{color:#FFFFFF}.rp-mark.light i{background:#8FAAFF}
.rp-body{flex:1;display:flex;flex-direction:column;gap:18px;min-height:0;padding:22px 44px 10px}
.rp-page.cover .rp-body{padding:0 0 10px}
.rp-page.cover .rp-body>.rp-sec{margin:0 44px}
.rp-foot{display:flex;justify-content:space-between;padding:12px 44px 22px;border-top:1px solid #F1F5F9;color:#5C6577;font-size:10px}
.rp-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:34px 44px 70px;background:radial-gradient(80% 90% at 90% 0%,rgba(42,91,255,.42),transparent 62%),#0A1633;color:#FFFFFF}
.rp-hero-t{display:flex;flex-direction:column;gap:6px}
.rp-kicker{margin-top:22px;color:#9DB4FF;font-size:11px;font-weight:800;letter-spacing:.22em}
.rp-hero h1{margin:0;font-family:'Archivo','Inter',sans-serif;font-size:40px;font-weight:800;line-height:1.02;letter-spacing:-.01em;color:#FFFFFF;text-transform:none}
.rp-per{color:rgba(255,255,255,.78);font-size:13px;font-weight:500}
.rp-hero-m{display:flex;flex-direction:column;gap:10px;min-width:190px}
.rp-hero-m div{display:flex;flex-direction:column;padding-inline-start:10px;border-inline-start:2px solid rgba(157,180,255,.5)}
.rp-hero-m small{color:#9DB4FF;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.rp-hero-m b{font-size:13px}
.rp-kpis{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:-46px 44px 4px}
.rp-kpi{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px;border-radius:14px;background:#FFFFFF;box-shadow:0 6px 24px rgba(10,22,51,.12)}
.rp-kpi small{color:#5C6577;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.rp-kpi b{font-family:'Archivo','Inter',sans-serif;font-size:28px;font-weight:800;line-height:1.1;color:#0A1633;white-space:nowrap}
.rp-kpi span{overflow:hidden;color:#3B4354;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.rp-sec{display:flex;flex-direction:column;gap:10px;min-width:0}
.rp-h2{display:flex;align-items:baseline;gap:8px;color:#2A5BFF;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.rp-h2 small{color:#5C6577;font-weight:600;letter-spacing:.04em;text-transform:none}
.rp-h3{margin-bottom:4px;color:#334155;font-size:12px;font-weight:700}
.rp-h{display:flex;align-items:center;gap:14px;padding-bottom:4px}
.rp-n{padding:6px 9px;border-radius:10px;background:#2A5BFF;color:#FFFFFF;font-family:'Archivo','Inter',sans-serif;font-size:15px;font-weight:800}
.rp-h h2{margin:0;font-family:'Archivo','Inter',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.01em;color:#0A1633;text-transform:none}
.rp-h p{margin:2px 0 0;color:#5C6577;font-size:12.5px}
.rp-cont{display:flex;align-items:center;gap:10px;color:#5C6577;font-size:12px;font-weight:600}
.rp-cont .rp-n{padding:3px 7px;border-radius:8px;font-size:12px}
.rp-cont b{color:#0A1633;font-size:13px;font-weight:800}
.rp-ins{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rp-in{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:12px;background:#F6F8FC;color:#1E293B;font-size:12.5px;line-height:1.45}
.rp-in-ic{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:26px;height:26px;border-radius:8px;background:#DCE5FF;color:#2A5BFF}
.rp-in.good .rp-in-ic{background:#D7F3E6;color:#06744C}
.rp-in.warn .rp-in-ic{background:#FFF0D6;color:#9A5800}
.rp-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px}
.rp-kv>div{display:flex;flex-direction:column;gap:1px;min-width:0;padding-bottom:6px;border-bottom:1px solid #F1F5F9}
.rp-kv>div.wide{grid-column:span 2}
.rp-kv small{color:#5C6577;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.rp-kv b{color:#0F172A;font-size:13px;font-weight:700;overflow-wrap:anywhere}
.rp-chips{display:flex;flex-wrap:wrap;gap:6px}
.rp-chips span{padding:5px 11px;border-radius:999px;background:#EEF2FF;color:#1C40B8;font-size:11.5px;font-weight:700}

.rp-goals{display:flex;flex-direction:column;gap:10px}
.rp-g{display:flex;flex-direction:column;gap:5px}
.rp-g-t{display:flex;align-items:baseline;gap:12px;font-size:12.5px}
.rp-g-t b{width:70px}
.rp-g-t span{flex:1;font-variant-numeric:tabular-nums}
.rp-g-t em{font-size:11px;font-style:normal;font-weight:800}
.rp-g-t em.good{color:#06744C}.rp-g-t em.warn{color:#9A5800}
.rp-g-bar{height:8px;border-radius:4px;background:#EEF2FF;overflow:hidden}
.rp-g-bar i{display:block;height:100%;border-radius:4px;background:#2A5BFF}
.rp-note{color:#5C6577;font-size:11px}
.rp-p{margin:0;color:#334155;font-size:12.5px}
.rp-card{padding:14px;border:1px solid #E2E8F0;border-radius:14px;background:#FFFFFF}
.rp-t{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.rp-t th{padding:6px 8px;border-bottom:1.5px solid #0A1633;color:#5C6577;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-align:start;text-transform:uppercase}
.rp-t td{padding:6px 8px;border-bottom:1px solid #EEF2F7;color:#1E293B}
.rp-t td small{color:#5C6577}
.rp-t tr:nth-child(even) td{background:#FAFBFD}
.rp-dl{color:#5C6577;font-weight:800;white-space:nowrap}
.rp-dl.good{color:#06744C}.rp-dl.bad{color:#C8262C}
.rp-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.rp-hb{display:grid;grid-template-columns:70px 1fr 70px;align-items:center;gap:8px;font-size:12px}
.rp-hb i{display:block;height:10px;border-radius:5px;background:#EEF2FF;overflow:hidden}
.rp-hb i b{display:block;height:100%;border-radius:5px;background:#2A5BFF}
.rp-hb em{color:#5C6577;font-size:11px;font-style:normal;text-align:end}
.rp-pr{display:grid;grid-template-columns:62px 1fr auto;gap:8px;padding:5px 0;border-bottom:1px solid #F1F5F9;font-size:12px}
.rp-pr span{color:#5C6577}
.rp-pr em{color:#0A1633;font-style:normal;font-weight:800}
.rp-rad{align-items:center}
.rp-prog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rp-day{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:#F6F8FC;font-size:11.5px}
.rp-day>b{margin-bottom:3px;color:#0A1633;font-size:12.5px}
.rp-day div{display:flex;justify-content:space-between;gap:6px}
.rp-day em{color:#5C6577;font-style:normal;white-space:nowrap}
.rp-ph{display:flex;flex-direction:column;gap:16px}
.rp-ph-r{display:flex;flex-direction:column;gap:8px}
.rp-ph-r>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rp-ph-r figure{display:flex;flex-direction:column;gap:4px;margin:0}
.rp-ph-r img{width:100%;height:250px;border-radius:12px;background:#F1F5F9;object-fit:cover}
.rp-ph-r figcaption{color:#5C6577;font-size:11px;font-weight:600}
/* desktop: the sign-in glow belongs to the window, not the centred column */
@media (min-width:900px){
  .scr.signin.dk::before{display:none}
  /* the column has no fill of its own, so the glow runs behind it with no edge */
  .app>.scr.signin.dk,.app>.stk>.scr.signin.dk{background:transparent}
  .app:has(>.signin.dk){background:radial-gradient(60% 50% at 80% -10%,color-mix(in srgb,var(--blue-500) 18%,transparent),transparent 70%) no-repeat,var(--xi-base)}
  :root[data-theme="dark"] .app:has(>.signin.dk){background:radial-gradient(60% 50% at 80% -10%,rgba(42,91,255,.32),transparent 70%) no-repeat,var(--xi-base)}
  [dir=rtl] .app:has(>.signin.dk){background-position:0 0}
}
@media (min-width:900px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .app:has(>.signin.dk){background:radial-gradient(60% 50% at 80% -10%,rgba(42,91,255,.32),transparent 70%) no-repeat,var(--xi-base)}}

/* the four periods share the width on a phone, none cut at the edge */
.exp .seg>button{min-width:0;padding-inline:var(--s-2)}
/* two options never scroll; the fill here is translucent, so the scroll-edge covers would show their shadow */
.scr.signin.dk .seg{background:var(--fill)}
/* dark sign-in: the selected segment stands out from its track */
:root[data-theme="dark"] .scr.signin.dk :is(.seg-th,.seg>button.on:not(.seg.has-th>button)){background:rgba(255,255,255,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .scr.signin.dk :is(.seg-th,.seg>button.on:not(.seg.has-th>button)){background:rgba(255,255,255,.18)}}
/* the consent box sits on the first line of its text; the code reads left to right, centred, in both languages */
.scr.signin.dk .checkline{align-items:flex-start}.scr.signin.dk .checkline input{margin-top:2px}
html .otp,[dir=rtl] input.otp{direction:ltr;text-align:center}