/* ============================================================
   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. Without it,
     a browser that darkens pages by itself (Chrome's auto dark theme, some
     Android browsers, a forced-dark setting) will darken a page we have
     deliberately made light, and no stylesheet of ours can stop it. It also
     fixes scrollbars and form controls rendering in the wrong scheme. */
  color-scheme: light;
}

/* Dark mode: follows the device unless the user has chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: 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"] {
  color-scheme: 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: 14px 0 26px; }

.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--green); }

/* The wordmark is artwork rather than type, so it is a background image on a
   labelled box: that lets the dark version swap in on the same rules as
   every other colour in the app, which a <picture> element cannot do for a
   theme the reader chose by hand. */
.logo__img {
  display: block;
  width: min(238px, 62vw);
  aspect-ratio: 560 / 215;
  background: url(hasadak-logo.png) no-repeat center / contain;
  margin-inline-start: -10px;   /* the artwork carries its own left margin */
}
:root[data-theme="dark"] .logo__img { background-image: url(hasadak-logo-dark.png); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo__img { background-image: url(hasadak-logo-dark.png); }
}

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

.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; }

.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; }

.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 { 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); }

/* 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); }

.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; }
.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; }
  #screen-welcome > .promises {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: center;
    margin: 0;
  }
  .welcome__hook { font-size: 40px; }
  .logo__img { width: 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 > .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; }
}