/* ============================================================
   Omani rial symbol
   The symbol is new, so no text font carries it yet. It is built
   here as a one-glyph font at U+E900 in two weights, which means
   it behaves like any other character: it takes the text colour,
   scales with font-size, and switches to bold with its neighbours.
   ============================================================ */

@font-face {
  font-family: 'Rial Mark';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(data:font/woff2;base64,d09GMk9UVE8AAAJwAAkAAAAAA+gAAAIqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYJ7BmAANAE2AiQDBgQGBYEuByAbQgMAHoVxm5M0KTTb224/evDfd6/37Ux6sz2hZgGqlYLaCMPQhP5Peu99eVKZPyyd5Q2aJSX3Limpud26aRYSYKp66qY2JnUv8Nd5ioGNDbSWx69hHNrGsdUilvRWTdlbbigP7zshPCCpFhAXlugdlp5g9XuRUnjf+zDnf1gIPgxCKP9a+rQWPVbgQ1N/qSGTUm0qfc4OMMc4TBtNcQlC6I5CQKTV+LoDnTqZmavQQnN3byvVN/9eTPgTC+UNopDp4K3EtfJ2w7cqPU4nhFCkubu117JvTnSfXpkhYEaYBrrRMvui7nb8XNrfMnPCmhGOYwkGjKkaune4pXVwcKR9pqGbG4XOmrnyhYzF8Pai0QSumjBhrjQGqKqvbJTm9cdPFbUGzoW3B1XH1kTnZ2dVVmGGLq1MpGO5FDa/Mbkhtz6/M6G5oLHY8L4vfrfD72aATaEsL6eUyooSfbPib4tv4Qszi1HtJdTF7TTxvEzKNHfBldnKLAZcll+STWVF/9hh0XfhdwAQ6kP/8aAlLGExAcAMQ9NVLHD1UjXmK14dSuFQqIKwzcMTob/LsvhvAyBCdwAMaGIod71qOzCVf8k/JXohAXwleOeOcSEah1ep2Q/gc+YAziTvHvmDCIwAgNiG95U4cAskElfVsg/XzaI05z4gcq7eMJAh56WpxtyQq1GdaDBQZlKliUyPzjzCumueDxAnTCIjJ2HSJaiIKDGyJNLsMdlkhfYCAgAA) format('woff2');
}
@font-face {
  font-family: 'Rial Mark';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(data:font/woff2;base64,d09GMk9UVE8AAAIsAAkAAAAAA4AAAAHlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYImBmAANAE2AiQDBgQGBYEcByAb2wIAHgfVzR6zcqmK+sDJm2XHIijXcC+5T4FAdipJWCJFzqMWVY7Gk/vh92dvczoA0XnpAKRJeP9gNjNeKFAoUC/gfMKbuulvT38P/t/gFAMfm9fkNcRD2yBd4BlFLOkNm5p7Qcqxl0MWETF+w6UKyqkyflqOWMAAqIil/9XyFVu/QhLafq6/7R784ed20POUGtHNrMq4VMGhlkCQIE8uARBPoES0959hmF/xI7phD4WDc0uj8SsXX7wZB3DKSdGmfsbTHvHb2mkzRJCh2ZGl+JXzMwR3NoFf6VwZWIwb27r7aGx9/XpgT0ccd8zop5UjhjnhsArxum3CJiJPY5D6oqGtu9caT93hznIHmEMUD12jtvigV+vVIJw2XbuiW9ovI/bJP899uE/S3/qrD+rFWn48t+qvFnbbccfN57xT85A74r09tUOPL97nrU512tyuiL/D9qv/rYZIvB+o+YjeBZ0kaNLM0W1eKQDfFFU3e8GbrBdUzKqi5qdNZDf4Bn2fgvAAAV8Fl3f/xWR/0s9grV8AH/eKKdzp//KgTAOqAsI3MB/JTmYLWfTY8re5AgppLqAKQ/S0SENOM6ZpFTkNpi0HLQbtls2yPZdIlpFd9xzU4KISSHCOSoYvh5jAVk47DcsxBAAAAA==) format('woff2');
}

/* ============================================================
   Hasadak (حصادك) — mobile-first styles
   ============================================================ */

/* ---------- Tokens ---------------------------------------------------- */

:root {
  --green: #2C6B4A;          /* palm green — brand, buttons, largest slice */
  --green-deep: #21523A;
  --amber: #B8742A;          /* harvest amber — purification & attention only */
  --amber-soft: #F4E7D6;
  --limestone: #E4E2DA;      /* background */
  --ink: #1D2420;            /* text */
  --sage: #A8CDB4;           /* lighter ring slices */
  --brick: #9A4B3B;          /* negative days — never confused with a gain */
  --brick-soft: #F2DED9;

  --surface: #FFFFFF;
  --surface-2: #F4F3EE;
  --bg: var(--limestone);
  --text: var(--ink);
  --text-muted: #5D6A62;
  --line: #D2CFC5;
  --line-soft: #E9E7E0;

  /* ring: largest slice is brand green, the rest step down into sage */
  --ring-1: #2C6B4A;
  --ring-2: #3F8460;
  --ring-3: #63A181;
  --ring-4: #8AC0A0;
  --ring-5: #A8CDB4;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(29, 36, 32, .06), 0 6px 20px rgba(29, 36, 32, .05);
  --maxw: 460px;
  --banner-h: 0px;   /* the prototype strip is gone; kept so the admin page can set its own */

  /* Tell the browser this page handles its own light and dark. "only" is
     what stops a browser that darkens pages by itself (Chrome's auto dark
     theme, Samsung Internet's dark mode) from darkening the light design:
     plain "light" does not, and the light logo then sits dark-on-dark.
     The page's own dark theme below takes over whenever the device asks
     for dark. It also keeps scrollbars and form controls in step. */
  color-scheme: only light;
}

/* Dark mode: follows the device unless the user has chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: only dark;
    --bg: #11150F;
    --surface: #1A201A;
    --surface-2: #212a21;
    --text: #E7EBE1;
    --text-muted: #9BA79D;
    --green: #8CC9A3;
    --green-deep: #A5D8B8;
    --amber: #D99A3F;
    --amber-soft: #33281A;
    --brick: #D08375;
    --brick-soft: #3A211C;
    --line: #2E3A2E;
    --line-soft: #242D24;
    --ring-1: #8CC9A3;
    --ring-2: #74B48D;
    --ring-3: #5D9C77;
    --ring-4: #4A8562;
    --ring-5: #3A6C4E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .25);
  }
}

:root[data-theme="dark"] {
  /* "only" here too: Samsung Internet otherwise darkens the dark theme
     again, and inverts the white-lettered logo to black. */
  color-scheme: only dark;
  --bg: #11150F;
  --surface: #1A201A;
  --surface-2: #212a21;
  --text: #E7EBE1;
  --text-muted: #9BA79D;
  --green: #8CC9A3;
  --green-deep: #A5D8B8;
  --amber: #D99A3F;
  --amber-soft: #33281A;
  --brick: #D08375;
  --brick-soft: #3A211C;
  --line: #2E3A2E;
  --line-soft: #242D24;
  --ring-1: #8CC9A3;
  --ring-2: #74B48D;
  --ring-3: #5D9C77;
  --ring-4: #4A8562;
  --ring-5: #3A6C4E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .25);
}

/* ---------- Base ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

/* Screens and panels are shown and hidden with the hidden attribute, which
   works by setting display:none. Any later display rule would beat it, so
   say once that hidden wins. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Rial Mark', 'Alexandria', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
[lang="ar"] { font-weight: 400; }

.accent-green { color: var(--green); }

/* ---------- Prototype banner ----------------------------------------- */

.banner {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  min-height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--green);
  color: #F3F7F1;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  text-align: center;
}
:root[data-theme="dark"] .banner { background: #1F3A2B; color: #DCEBE0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .banner { background: #1F3A2B; color: #DCEBE0; }
}
.banner__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .7; flex: none;
}

/* ---------- Shell ----------------------------------------------------- */

.shell { max-width: var(--maxw); margin: 0 auto; }

.screen { padding: 20px 16px 36px; }
.screen--app { padding: 0 0 92px; }

.screen__title { font-size: 22px; margin-bottom: 6px; }
.screen__lede { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; }

/* ---------- Welcome --------------------------------------------------- */

.welcome__head { margin: 6px 0 26px; }

/* The language buttons sit in their own row at the top, pinned to the same
   side in both languages, so switching moves nothing under the finger. */
.welcome__top { display: flex; justify-content: flex-end; direction: ltr; }

/* Centred, so it sits in the same place in English and Arabic: a mirrored
   layout would otherwise move it from one side to the other. */
.logo { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--green); }

/* The logo in two layers. The palms, trunks and river are a picture; the
   letters of "hasadak" are text, in a one-letter font traced from the
   logo (hasadak-wordmark.woff2). That matters on phones whose browser
   darkens pages itself (Samsung Internet): it turns text white, as it
   does every heading, but leaves pictures alone, so letters inside the
   picture stayed dark. The bottom of each trunk fades into its letter, so
   the join is smooth whether the letters are black or white. */
@font-face {
  font-family: "Hasadak Wordmark";
  src: url(hasadak-wordmark.woff2?v=1) format("woff2");
  font-display: block;
}
.logo__img {
  --logo-w: min(238px, 62vw);
  position: relative;
  display: block;
  width: var(--logo-w);
  aspect-ratio: 560 / 215;
  color: #131312;
}
/* The picture sits above the letters, so each trunk can fade out over the
   top of its letter's stem. */
.logo__img::after {
  content: "";
  position: absolute; inset: 0;
  background: url(hasadak-logo-art.png?v=4) no-repeat center / contain;
  pointer-events: none;
}
.logo__word {
  position: absolute; inset: 0;
  font: calc(var(--logo-w) * 215 / 560) / 1 "Hasadak Wordmark";
  white-space: nowrap;
  direction: ltr;
  -webkit-user-select: none; user-select: none;
}
:root[data-theme="dark"] .logo__img { color: #FFFFFF; }
:root[data-theme="dark"] .logo__img::after { background-image: url(hasadak-logo-art-dark.png?v=4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo__img { color: #FFFFFF; }
  :root:not([data-theme="light"]) .logo__img::after { background-image: url(hasadak-logo-art-dark.png?v=4); }
}

.logo__ar { font-size: 17px; font-weight: 500; opacity: .9; }
.logo__meaning { margin-top: 10px; font-size: 13px; color: var(--text-muted); text-align: center; }

.welcome__hook { font-size: 30px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.025em; }
.welcome__sub { font-size: 15px; color: var(--text-muted); margin-bottom: 26px; }

.promises { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.promise {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.promise__icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.promise__icon svg { width: 19px; height: 19px; fill: currentColor; }
.promise__title { font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.promise__body { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ---------- Buttons -------------------------------------------------- */

.stack-actions { display: grid; gap: 10px; margin-top: 22px; }
.stack-actions--row { grid-template-columns: auto 1fr; }

/* Charts keep time running left to right in both directions. */
[dir="rtl"] .chart svg { direction: ltr; }

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, background .16s ease, opacity .16s ease;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--green); color: #F6FAF6; }
:root[data-theme="dark"] .btn--primary { color: #10170F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary { color: #10170F; }
}
.btn--ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn--attention { background: var(--amber); color: #FFF8EF; }
:root[data-theme="dark"] .btn--attention { color: #1A1206; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--attention { color: #1A1206; }
}
.btn--block { width: 100%; margin-top: 12px; }
.btn--small { padding: 9px 14px; font-size: 13.5px; border-radius: 10px; }

.fineprint { margin-top: 16px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }

/* ---------- Progress -------------------------------------------------- */

.progress { margin-bottom: 22px; }
.progress__bar { height: 5px; background: var(--line-soft); border-radius: 99px; overflow: hidden; }
.progress__fill {
  height: 100%; width: 25%;
  background: var(--green);
  border-radius: 99px;
  transition: width .32s cubic-bezier(.3, .8, .3, 1);
}
.progress__label {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 12px; color: var(--text-muted); font-weight: 500;
}

/* ---------- Steps, options, fields ----------------------------------- */

.step__title { font-size: 21px; margin-bottom: 6px; }
.step__lede { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; }

.options { display: grid; gap: 9px; }
.option {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.option:hover { border-color: var(--line); }
.option[aria-checked="true"], .option.is-selected {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}
.option__emoji { font-size: 19px; line-height: 1; flex: none; }
.option__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.option__label { font-size: 14.5px; font-weight: 500; }
.option__sub { font-size: 12px; color: var(--text-muted); }
.option__ar { font-size: 12.5px; color: var(--text-muted); }
.option__tick {
  margin-inline-start: auto; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
}
.option[aria-checked="true"] .option__tick { border-color: var(--green); background: var(--green); }
.option[aria-checked="true"] .option__tick::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--surface);
}

.question { margin-bottom: 26px; }
.question__text { font-size: 15.5px; font-weight: 600; margin-bottom: 4px; }
.question__ar { font-size: 12.5px; color: var(--text-muted); margin-bottom: 11px; }

.field { display: block; margin-bottom: 22px; }
.field__label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.field__optional { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.field__out { font-variant-numeric: tabular-nums; color: var(--green); font-weight: 600; }
.field__wrap {
  display: flex; align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.field__wrap:focus-within { border-color: var(--green); }
.field__wrap.is-error { border-color: var(--amber); }
.field__prefix { padding-inline: 13px 4px; font-size: 17px; font-weight: 600; color: var(--text-muted); line-height: 1; }
.field__input {
  flex: 1; min-width: 0;
  appearance: none; border: 0; outline: 0; background: transparent;
  padding-block: 13px;
  padding-inline: 4px 13px;
  font: inherit; font-size: 17px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.field__help { display: block; margin-top: 7px; font-size: 12px; color: var(--text-muted); }
.field__help.is-error { color: var(--amber); font-weight: 500; }
.code-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer;
}
.slider::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: var(--line); }
.slider::-moz-range-track { height: 5px; border-radius: 99px; background: var(--line); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9.5px;
  border-radius: 50%; background: var(--green);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); border: 3px solid var(--surface);
}
.slider__scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); }

/* ---------- Cards ----------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card__title { font-size: 15px; margin-bottom: 8px; }
.card__note { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.card--attention { border-inline-start: 3px solid var(--amber); }
.card--ring { padding-top: 22px; }

.chip {
  flex: none;
  font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 99px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.chip--down { background: color-mix(in srgb, var(--brick) 14%, transparent); color: var(--brick); }
.chip--attention { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.chip--neutral { background: var(--surface-2); color: var(--text-muted); }

.disclaimer {
  margin-top: 12px;
  font-size: 12px; line-height: 1.55;
  color: var(--amber);
  background: var(--amber-soft);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
}

.flagcard {
  border-inline-start: 3px solid var(--amber);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 10px;
  border-top: 1px solid var(--line-soft);
  border-inline-end: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.flagcard__title { font-size: 14px; font-weight: 600; color: var(--amber); margin-bottom: 3px; }
.flagcard__body { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

.check { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green); flex: none; }

/* ---------- Ring ------------------------------------------------------ */

.ring { position: relative; width: 100%; max-width: 250px; margin: 0 auto 18px; aspect-ratio: 1; }
.ring--small { max-width: 190px; margin-bottom: 20px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__slice {
  fill: none;
  stroke-linecap: butt;
  transition: stroke-dasharray .9s cubic-bezier(.25, .8, .3, 1);
}
.ring__center {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center; gap: 2px;
}
.ring__label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.ring__value { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legend__item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.legend__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legend__name { flex: 1; min-width: 0; }
.legend__pct { font-weight: 600; font-variant-numeric: tabular-nums; }

.glide { list-style: none; margin: 12px 0 0; padding: 0; }
.glide__step {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.glide__step:first-child { border-top: 0; padding-top: 4px; }
.glide__when { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.glide__step.is-current .glide__when { color: var(--green); font-weight: 600; }
.glide__name { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; font-size: 14.5px; font-weight: 600; }
.glide__risk { font-size: 12.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.glide__bar { display: flex; gap: 2px; height: 6px; margin-top: 7px; border-radius: 99px; overflow: hidden; }
.glide__bar i { display: block; height: 100%; }
.glide__mix { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.glide__step--end .glide__name { color: var(--text-muted); font-weight: 600; }
@media (max-width: 359px) {
  .glide__step { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
}

.sleeve-why { display: grid; gap: 12px; }
.sleeve-why__item { display: grid; gap: 3px; }
.sleeve-why__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sleeve-why__body { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

/* ---------- Charts ---------------------------------------------------- */

.chart { width: 100%; margin: 6px 0 4px; }
.chart svg { width: 100%; display: block; overflow: visible; }
.chart__axis { font-size: 10px; fill: var(--text-muted); }
.chart__grid { stroke: var(--line-soft); stroke-width: 1; }
.chart__line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--up { stroke: var(--green); }
.chart__line--down { stroke: var(--brick); }
.chart__line--contrib { stroke: var(--text-muted); stroke-width: 1.6; stroke-dasharray: 4 3; }
.chart__area--up { fill: color-mix(in srgb, var(--green) 14%, transparent); }
.chart__area--down { fill: color-mix(in srgb, var(--brick) 12%, transparent); }
.chart__bar--up { fill: var(--green); }
.chart__bar--down { fill: var(--brick); }
.chart__dot--up { fill: var(--green); }
.chart__dot--down { fill: var(--brick); }

.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }
.chart-legend__key { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__line { width: 14px; height: 2px; border-radius: 2px; background: var(--green); }
.chart-legend__line--contrib { background: var(--text-muted); height: 0; border-top: 2px dashed var(--text-muted); }

.projection-figures { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.projection-figures li { display: flex; justify-content: space-between; font-size: 13px; gap: 12px; }
.projection-figures span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.projection-figures li.is-total { border-top: 1px solid var(--line-soft); padding-top: 8px; font-size: 14px; }

/* ---------- App header ------------------------------------------------ */

.apphead { padding: 26px 16px 16px; }
.apphead__label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.apphead__value { font-size: 33px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.apphead__delta { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.apphead__delta.is-up { color: var(--green); }
.apphead__delta.is-down { color: var(--brick); }
.apphead__delta span { color: var(--text-muted); font-weight: 400; }

.tabpanel { padding: 0 16px 10px; }
.tabpanel[data-tab="home"] { padding-top: 0; }
.tabpanel[data-tab="portfolio"], .tabpanel[data-tab="purification"], .tabpanel[data-tab="account"] { padding-top: 24px; }

/* ---------- Holdings -------------------------------------------------- */

.sleeve { margin-bottom: 18px; }
.sleeve__head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.sleeve__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.sleeve__name { font-size: 15px; font-weight: 600; flex: 1; }
.sleeve__weight { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.sleeve__bar { height: 4px; border-radius: 99px; background: var(--line-soft); overflow: hidden; margin-bottom: 11px; }
.sleeve__bar i { display: block; height: 100%; border-radius: 99px; }

.holding {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}
.holding__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.holding__name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.holding__ticker { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; }
.holding__value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.holding__meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 7px; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.holding__note { margin-top: 7px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.kv { display: grid; gap: 9px; margin: 0; }
.kv__row { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.kv__row dt { color: var(--text-muted); }
.kv__row dd { margin: 0; font-weight: 600; text-align: right; }

.mandate { margin: 0; display: grid; gap: 13px; }
.mandate__item { display: grid; gap: 2px; }
.mandate__term { font-size: 14px; font-weight: 600; }
.mandate__desc { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

.log { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.log__item { display: grid; gap: 2px; padding-inline-start: 13px; position: relative; }
.log__item::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
}
.log__date { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.log__text { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* ---------- Purification --------------------------------------------- */

.purify-total__amount { font-size: 28px; font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.purify-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; margin-top: 7px; font-variant-numeric: tabular-nums; }
.purify-row dt { color: var(--text-muted); }
.purify-row dd { margin: 0; font-weight: 600; }
.purify-math {
  margin-top: 10px; padding: 10px 11px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1.6;
}
.purify-math b { color: var(--text); font-weight: 600; }
.is-donated { opacity: .62; }

/* ---------- Segmented control ---------------------------------------- */

.segmented--two { grid-template-columns: repeat(2, 1fr) !important; }
.withdraw-summary { margin-top: 12px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--surface-2); border-radius: 11px; padding: 4px; margin-top: 12px; }
.segmented__btn {
  appearance: none; border: 0; background: transparent;
  padding: 9px 4px; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.segmented__btn[aria-checked="true"] { background: var(--surface); font-weight: 600; box-shadow: var(--shadow); }

/* ---------- Tab bar --------------------------------------------------- */

.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
  padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
}
.tabbar__btn {
  appearance: none; border: 0; background: transparent;
  display: grid; justify-items: center; gap: 3px;
  padding: 5px 2px; cursor: pointer;
  color: var(--text-muted); font-size: 10.5px; font-weight: 500;
}
.tabbar__btn svg { width: 22px; height: 22px; fill: currentColor; }
.tabbar__btn.is-active { color: var(--green); font-weight: 600; }

/* ---------- Motion & focus ------------------------------------------- */

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (min-width: 520px) {
  .screen { padding: 26px 22px 40px; }
  .tabpanel { padding-left: 22px; padding-right: 22px; }
  .apphead { padding-left: 22px; padding-right: 22px; }
}

/* ---------- Exchange links -------------------------------------------- */

.holding__ticker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.msxlink {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--green);
  text-decoration: none;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  border-radius: 99px;
  white-space: nowrap;
}
.msxlink:hover { background: color-mix(in srgb, var(--green) 10%, transparent); }

.question__help {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 11px;
  padding-inline-start: 11px;
  border-inline-start: 2px solid var(--sage);
}

/* Screen-reader-only text: carries "OMR" alongside the symbol glyph. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- The MSX Shariah-compliant list ---------------------------- */

.shariah {
  list-style: none;
  margin: 12px 0 14px;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.shariah__item {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 9px 11px;
  background: var(--surface);
  font-size: 13px;
}
.shariah__item.is-held { background: color-mix(in srgb, var(--green) 9%, var(--surface)); }

.shariah__name { flex: 1; min-width: 0; }
.shariah__item.is-held .shariah__name { font-weight: 600; }

.shariah__code {
  flex: none;
  width: 48px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--green);
  text-decoration: none;
}
.shariah__code:hover { text-decoration: underline; }

.shariah__ratio {
  flex: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  font-weight: 600;
}
.shariah__ratio.is-clean { color: var(--text-muted); font-weight: 400; }

.shariah__cite {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

.shariah__held {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 15%, transparent);
  padding: 2px 7px;
  border-radius: 99px;
}



/* ---------- Language switch ------------------------------------------- */

/* The language control keeps its order in both directions. Everything else
   mirrors, but the button you just pressed must not move out from under
   your finger — it is the way back if you switch by mistake. */
.lang-switch {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  direction: ltr;
}

#lang-toggle { direction: ltr; }

.lang-switch__btn {
  appearance: none;
  flex: 1;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.lang-switch__btn:hover { border-color: var(--green); color: var(--green); }
.lang-switch--top { margin-top: 0; gap: 6px; }
.lang-switch--top .lang-switch__btn {
  flex: none; width: 76px; height: 32px; padding: 0; line-height: 30px;
  font-size: 12.5px; text-align: center;   /* fixed size: Arabic letters would make it taller */
}
.lang-switch__btn[aria-pressed="true"] {
  border-color: var(--green); color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

/* Arabic runs a touch larger for the same optical size, and its lines
   need a little more room. */
[dir="rtl"] body { line-height: 1.7; }
[dir="rtl"] .welcome__hook { font-size: 27px; line-height: 1.35; }
[dir="rtl"] .holding__ticker,
[dir="rtl"] .shariah__code { direction: ltr; text-align: start; }
[dir="rtl"] .apphead__value,
[dir="rtl"] .purify-total__amount,
[dir="rtl"] .purify-math,
[dir="rtl"] .shariah__ratio { direction: ltr; text-align: start; unicode-bidi: isolate; }

/* ---------- Monthly collection ---------------------------------------- */

.field__select {
  width: 100%;
  appearance: none;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 13px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.field__select:focus { outline: 0; border-color: var(--green); }

.daypick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }

.daypick__btn {
  appearance: none;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 10px 4px;
  cursor: pointer;
  display: grid;
  gap: 1px;
  justify-items: center;
}
.daypick__btn.is-on { border-color: var(--green); background: color-mix(in srgb, var(--green) 9%, var(--surface)); }
.daypick__num { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.daypick__label { font-size: 10px; color: var(--text-muted); }
.daypick__tag { font-size: 10px; font-weight: 700; color: var(--green); line-height: 1.2; }

.note-strip {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-inline-start: 3px solid var(--green);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.collections { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.collections__item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.collections__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.collections__dot.is-collected { background: var(--green); }
.collections__dot.is-retried { background: var(--sage); }
.collections__dot.is-failed { background: var(--brick); }
.collections__text { flex: 1; display: grid; gap: 1px; min-width: 0; }
.collections__date { font-weight: 600; }
.collections__status { color: var(--text-muted); font-size: 11.5px; }
.collections__amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.check--inline { margin-top: 0; }

/* ---- What we charge ---- */
.card__subtitle {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.fee-never { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fee-never li {
  position: relative;
  padding-inline-start: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.fee-never li::before {
  content: "\00d7";
  position: absolute;
  inset-inline-start: 0;
  color: var(--text-muted);
  font-weight: 700;
}
.fee-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.fee-line__amount { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kv__row.is-current dt, .kv__row.is-current dd { color: var(--green); font-weight: 700; }

/* ---- Registration and KYC ---- */
.note-strip--warn { border-inline-start-color: var(--amber); }
.field__prefix {
  padding-inline: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  border-inline-end: 1px solid var(--line);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.filepick { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.filepick__name { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; display: flex; align-items: center; gap: 10px; }
.filepick__thumb { width: 64px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line-soft); flex: none; }
.idcheck { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.idcheck__row { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.idcheck__row dt { color: var(--text-muted); }

/* ---------- Desktop --------------------------------------------------- *
   The app is built for a phone and stays that way; on a wider screen the
   column simply stops being a strip. Forms keep a readable measure rather
   than stretching, cards pair up, and the tab bar leaves the bottom edge
   because nothing on a laptop has a thumb near it.                       */

@media (min-width: 900px) {
  :root { --maxw: 1000px; }

  /* A form line that runs the full width of a laptop is hard to read and
     hard to fill in, so these screens stay narrow inside the wider shell. */
  #screen-onboarding, #screen-register, #screen-kyc, #screen-funding {
    max-width: 640px;
    margin-inline: auto;
  }

  /* Welcome: the pitch on one side, the three promises on the other. */
  #screen-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px;
    align-content: start;
    padding-top: 52px;
  }
  #screen-welcome > * { grid-column: 1; }
  /* The two columns stay where they are in Arabic too, so the logo does not
     swap sides; the text inside each column still reads right to left. */
  [dir="rtl"] #screen-welcome { direction: ltr; }
  [dir="rtl"] #screen-welcome > :not(.welcome__top) { direction: rtl; }
  #screen-welcome > .promises {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: center;
    margin: 0;
  }
  .welcome__hook { font-size: 40px; }
  .logo__img { --logo-w: 286px; }

  /* Proposal: the ring beside the reasons, the bad year beside the growth. */
  #screen-proposal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  #screen-proposal > .screen__title,
  #screen-proposal > .screen__lede,
  #screen-proposal > #proposal-fees,
  #screen-proposal > #glide-card,
  #screen-proposal > .stack-actions,
  #screen-proposal > .fineprint { grid-column: 1 / -1; }
  #screen-proposal > .card { margin-top: 0; margin-bottom: 18px; }
  #screen-proposal > #proposal-fees { margin-bottom: 18px; }

  /* The four tabs: cards in two columns, tallest kept whole rather than
     split across them. */
  .tabpanel[data-tab] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    align-items: start;
  }
  .tabpanel > .apphead,
  .tabpanel > .screen__title,
  .tabpanel > .screen__lede,
  .tabpanel > .fineprint { grid-column: 1 / -1; }
  .tabpanel > .card,
  .tabpanel > .sleeve-groups { margin-top: 0; margin-bottom: 20px; }
  .apphead { padding-top: 34px; }
  .apphead__value { font-size: 40px; }

  /* Portfolio and Purification are long lists, and a list split into two
     ragged columns reads worse than one. The allocation ring sticks beside
     them instead, so it stays in view while the holdings scroll past. */
  .tabpanel[data-tab="portfolio"] { grid-template-columns: 300px minmax(0, 1fr); column-gap: 32px; }
  /* Title and lede take rows 1 and 2 across both columns, so the ring
     starts at row 3 beside the holdings rather than under the lede. */
  .tabpanel[data-tab="portfolio"] > .ring {
    position: sticky;
    top: 24px;
    grid-column: 1;
    grid-row: 3;
    max-width: 260px;
    margin: 6px 0 0;
  }
  .tabpanel[data-tab="portfolio"] > #sleeve-groups { grid-column: 2; grid-row: 3; }

  .tabpanel[data-tab="purification"] { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .tabpanel[data-tab="purification"] > #purification-list { grid-column: 1; }

  /* The mandate is the thing being signed, so it gets the full width and
     its points pair up rather than running down one side. */
  #screen-proposal > .card:has(#mandate-points) { grid-column: 1 / -1; }
  #mandate-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }

  /* A wide card should not stretch a two-column row to the far edges. */
  #proposal-fees .kv, #proposal-fees .fee-never, #proposal-fees .card__note { max-width: 620px; }
  #proposal-fees .fee-line { justify-content: flex-start; gap: 12px; }

  /* Off the bottom edge and onto the top, as a row of pills. */
  .screen--app { display: flex; flex-direction: column; padding-bottom: 40px; }
  .tabbar {
    position: static;
    order: -1;
    max-width: none;
    width: 100%;
    grid-template-columns: repeat(4, max-content);
    justify-content: center;
    gap: 6px;
    background: transparent;
    backdrop-filter: none;
    border-top: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 18px 0 14px;
  }
  .tabbar__btn {
    grid-auto-flow: column;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: 999px;
  }
  .tabbar__btn svg { width: 18px; height: 18px; }
  .tabbar__btn.is-active { background: color-mix(in srgb, var(--green) 11%, transparent); }
}

@media (min-width: 1280px) {
  :root { --maxw: 1120px; }
  #screen-welcome { column-gap: 72px; padding-top: 68px; }
  .welcome__hook { font-size: 46px; }
}