/* Mufid UI kit — FOUNDATIONS. Global by necessity: custom properties must inherit into scoped
   components and into MarkupString icons, neither of which a .razor.css can reach.
   Primitives do NOT live here — each owns its CSS in its own .razor.css.

   ⚠ @import MUST BE FIRST. Anything before it — including a stray line left by a bad edit — makes the
   browser drop it silently, and the whole product falls back to Segoe with no error anywhere. That is
   exactly what happened here: the split that created this file cut the opening `/*` off the comment
   below, leaving prose above the @import. Third time this comment-delimiter fault has appeared in this
   work; it is the one tokens.css records at --shadow-pop and PLAN.md records at .sinl-search.

   Production self-hosts the woff2 — a back office on a shop LAN is offline as often as not, and a UI
   that falls back to Segoe on those mornings is a UI whose type scale was never tested. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    --side-sheet-size: 27.5rem;
    --side-sheet-medium-size: 38rem;
    --side-sheet-wide-size: 48rem;
    --n-0:#FFFFFF; --n-50:#F5F7FA; --n-100:#F0F4F8; --n-200:#EAEFF5; --n-300:#E3E8EF;
    --n-400:#CFD6E0; --n-500:#AFB8C5; --n-600:#9CA3AF; --n-700:#6B7280; --n-800:#4A5464;
    --n-900:#374151; --n-950:#111827;

    --brand-50:#F3F7FC; --brand-100:#DEEBF7; --brand-200:#C2D9F0; --brand-300:#98BEE2;
    --brand-400:#649BCE; --brand-500:#337DC1; --brand-600:#226EB4; --brand-700:#185FA5;
    --brand-800:#124D87; --brand-900:#0D3C6D;
    /* Fixed identity inks across themes. */
    --brand-mark-light:#69BBF1; --brand-mark-blue:#2178BF; --brand-mark-navy:#133D73; --brand-mark-deep:#0B264A;
    --tooltip-surface:var(--brand-mark-deep); --tooltip-ink:#FFFFFF; --tooltip-key-surface:#254365;

    /* Membership is a portable identity object: preserve its ink and scan plate across themes. */
    --membership-surface:#19343B; --membership-surface-deep:#101F27;
    --membership-ink:#F7F4EB; --membership-muted:#C4D0D0; --membership-accent:#D6BD8B;
    --membership-scan-surface:#FFFFFF; --membership-scan-ink:#101F27;

    /* Module identity: decorative pairs, independent of posting and validation states. */
    --module-today-pair:#2EAFA8;
    --module-sales-pair:#F0BD64; --module-purchases-pair:#5AAAB4;
    --module-stock-pair:#63A4D3; --module-cash-pair:#79C6AB;
    --module-ledger-pair:#59B5AF; --module-people-pair:#75A9D0;
    --module-crm-pair:#E8A58D; --module-pos-pair:#A68AC5;
    --module-sales-ink:#914671; --module-sales-fill:#F8EAF2; --module-sales-accent:#D896B8;
    --module-purchases-ink:#9A5B24; --module-purchases-fill:#FCF0E2; --module-purchases-accent:#E4AE65;
    --module-stock-ink:#31756C; --module-stock-fill:#E5F3EF; --module-stock-accent:#79B5A3;
    --module-cash-ink:#246D83; --module-cash-fill:#E5F2F8; --module-cash-accent:#74B5CD;
    --module-ledger-ink:#6051A0; --module-ledger-fill:#EEEAF9; --module-ledger-accent:#AD9CDE;
    --module-people-ink:#9A5547; --module-people-fill:#FAECE7; --module-people-accent:#DBA28D;
    --module-crm-ink:#556CA5; --module-crm-fill:#EBEFFB; --module-crm-accent:#91A6DB;
    --module-pos-ink:var(--brand-700); --module-pos-fill:var(--brand-100); --module-pos-accent:var(--brand-300);

    /* Intelligence accent shared by entry-point borders and processing indicators. */
    --ai-violet:#8573D6; --ai-rose:#BD75AD;
    --ai-violet-hover:#7865CB; --ai-rose-hover:#B066A0;

    --success-50:#F0FDF4; --success-100:#DCFCE7; --success-500:#16A34A; --success-700:#15803D;
    --warning-50:#FFFBEB; --warning-100:#FEF3C7; --warning-500:#D97706; --warning-700:#854F0B;
    --danger-50:#FEF2F2;  --danger-100:#FEE2E2;  --danger-500:#DC2626;  --danger-700:#B91C1C;

    /* ⚠ KEYS, NOT STATUSES. These two carry no meaning — they exist so the grouping palette has hues
       to offer that do not already mean «passed» or «failed». Never use them for state. Both are the
       700 weight for the same reason the others are: white text has to sit on them legibly, because
       the grouping level's badge puts a number there. */
    --key-teal-700:#0F766E; --key-violet-700:#6D28D9;

    --text-primary:var(--n-950); --text-secondary:var(--n-900); --text-muted:#5F6775;
    --text-faint:var(--n-600); --text-on-brand:var(--n-0);

    /* ⚠ FAINT IS READABLE; DISABLED IS NOT MEANT TO BE. Two different jobs that shared one token
       until the dark theme forced them apart: --n-300 on white is a control saying «not now», and the
       same value on a dark page is nearly white — the most prominent thing on screen. */
    --text-disabled:var(--n-300);

    --surface-page:var(--n-50); --surface-panel:var(--n-0); --surface-sunken:var(--n-200);
    --surface-hover:var(--n-100); --surface-active:var(--n-200);

    /* Structural edges share one neutral colour and weight. Controls retain a stronger
       edge, while focus and semantic markers keep their visible accent. */
    --rule:var(--border-subtle);
    --border-subtle:var(--n-300); --border-default:var(--n-400); --border-strong:var(--n-600);

    /* Company profile is the surface standard (20 September 2026): soft hairline,
       rounded corners, no resting shadow. Controls and focus retain their own weight. */
    --stroke-hairline:.5px;
    --stroke-control:1px;

    --space-micro:2px; --space-2xs:4px; --space-xs:6px; --space-sm:8px; --space-md:12px;
    --space-lg:16px; --space-xl:24px; --space-2xl:32px; --space-3xl:48px; --space-4xl:64px;

    /* Arabic and Latin from ONE superfamily, so INV-2026-0842 inside an Arabic row is the same
       typeface rather than a guest. Plex Arabic is also what the till already ships. */
    --font-sans:'IBM Plex Sans Arabic','IBM Plex Sans','Segoe UI',-apple-system,sans-serif;
    --font-mono:'IBM Plex Mono',Consolas,monospace;
    --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-md:14px; --text-lg:16px;
    --text-xl:18px; --text-2xl:24px; --text-3xl:32px;
    --weight-normal:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
    --leading-tight:1.25; --leading-snug:1.45; --leading-normal:1.6; --leading-relaxed:1.75;

/* ── PAPER ────────────────────────────────────────────────────────────────────────────────────
       ⚠ A FILED DOCUMENT IS NOT A LIT PANEL. These are the only inks in the system that must NOT
       follow the theme: a report printed this year and reprinted next year has to come out the same,
       and the screen ramps are tuned for a backlit surface and free to drift. They live here because
       a literal colour belongs in a token file — but they are a SEPARATE set, not aliases of the
       screen ones, and nothing on screen should read them.

       ⚠ THE 12mm IS THE PAGE MARGIN TOO. `MufidPaper` pads by it on screen and drops the padding in
       the print frame, where the page box supplies the same inset — so the content width and the
       wrapping are identical in both. When the two disagreed the page re-wrapped taller under the
       printer and the last rows fell onto a sheet of their own. 12mm also clears the unprintable edge
       every physical printer has. */
    --paper-ink:#111827; --paper-muted:#4B5563; --paper-hint:#6B7280;
    --paper-rule:#E5E7EB; --paper-rule-firm:#D1D5DB; --paper-edge:#9CA3AF;
    --paper-sheet:#FFFFFF; --paper-margin:12mm;

    /* The viewer AROUND the sheet. Not paper — it never prints — but it is tuned against paper and
       belongs beside it.

       ⚠ THE WASH IS DARKER THAN ANY SCREEN SURFACE ON PURPOSE. A white page on a near-white panel has
       no edge, and the edge is the only thing telling the reader where the margin ends — which is
       exactly what a print preview is being consulted about. */
    --paper-wash:#D8DEE8;

    /* ⚠ AN ELEVATION, AND NAMED AS ONE — tighter and darker than `--elevation-2`, because it lifts a
       sheet off the wash rather than a panel off the page and has a much smaller contrast difference
       to work with. It belongs to the scale even though only one thing spends it. */
    --elevation-paper:0 2px 10px rgb(17 24 39/22%);

    /* «مسوّدة». ⚠ IT PRINTS, so it is ink and not chrome: a watermark that shows on screen and
       vanishes on paper is the opposite of the point. */
    --paper-stamp:rgb(17 24 39/8%);

    /* Search hits. ⚠ These do NOT print — the reader prints what they previewed, and a yellow smear
       is not in it. */
    --paper-find:#FDE68A; --paper-find-on:#FACC15; --paper-find-edge:#854F0B;

    /* Age buckets — one sequential ramp, calm to hot.
       ⚠ NOT THE STATUS SCALE. «31–60» is a rung on a ladder, not a warning; painting it
       --warning-500 makes every aged balance on the screen read as an alert, and spends the alarm
       the one genuinely late bucket needs. */
    --age-1:#93B5D6; --age-2:#E9C46A; --age-3:#D99A2B; --age-4:#C86E2E; --age-5:#B4402F;

    --radius-xs:3px; --radius-sm:4px; --radius-md:6px; --radius-lg:12px; --radius-pill:999px;

    --elevation-1:0 1px 2px rgb(17 24 39/6%),0 1px 3px rgb(17 24 39/4%);
    --elevation-2:0 4px 12px rgb(17 24 39/10%),0 1px 3px rgb(17 24 39/6%);
    --elevation-3:0 12px 28px rgb(17 24 39/14%),0 2px 6px rgb(17 24 39/8%);
    --elevation-4:0 20px 48px rgb(17 24 39/22%),0 4px 10px rgb(17 24 39/10%);

    /* Document-local layers: content pinning, then the editor status/comments, then cell surfaces.
       MufidDoc's container establishes the local context; native popovers/modal dialogs are top-layer. */
    --layer-doc-sheet-column:2; --layer-doc-sheet-row:3; --layer-doc-sheet-cross:4;
    --layer-doc-sheet-header:5; --layer-doc-sheet-toolbar:6;
    --layer-doc-page-head:9; --layer-doc-footer:7; --layer-doc-comments:8; --layer-doc-popup:60;

    /* The dim behind a modal. Tinted with --n-950, which is --text-primary, so it reads as the page
       darkening rather than as a grey sheet laid over it — the only dim that looks like the same
       product at both ends of the ramp. */
    --scrim:rgb(17 24 39 / 32%);

    --motion-fast:120ms; --ease:cubic-bezier(.2,0,.13,1);

    /* ── The focus mark — SETTLED, owner report 2026-09-04 (PLAN.md §«One edge, one focus mark, one
       trigger»). Two tokens, and the names are that section's. Do not re-derive this.
       The outline sits one pixel inside the border and the border goes brand with it: a single ~3px
       edge, and the control keeps its size. A grid cell is the one exception — an editor in a td has
       no border to colour and no room for a 6px radius. */
    --focus-ring:2px solid var(--brand-700);
    --focus-inset:-1px;

    /* Three field states, one grammar, every field — same section. */
    --line-rest:var(--border-default);      /* #CFD6E0 */
    --line-hover:var(--n-600);              /* #9CA3AF */

    /* ── The trigger — SETTLED, owner report 2026-09-04 (PLAN.md §«The focus mark, product-wide — and
       the trigger's position»). One affordance had stood in three places — 12px from a field's edge,
       15 at a resting cell, 7 once its lookup opened, so the glyph jumped 8px while someone watched.
       All three land on 12; a dense grid puts all three on its own 10.
       --trigger-pad is the 3px inside the 20px hit target around a 14px glyph: without it a box placed
       flush puts the GLYPH three pixels late. */
    --trigger-glyph:14px;
    --trigger-hit:20px;
    --sheet-row-action-size:20px;
    --trigger-pad:3px;
    --trigger-x:12px;

    /* ── The document's one gutter, and the header's derived geometry (erp/tokens.css, carried
       verbatim). Everything spanning a document's width reads --doc-x, so the notes, the extra fields
       and the header's first caption all start in one column — owner report 2026-09-04, «i would not
       have this misalignments». --mdh-x is the gutter LESS a cell's own padding, because at the first
       column that padding is on the outside. */
    --doc-x:12px;
    --mdh-f-x:10px;
    --mdh-x:calc(var(--doc-x) - var(--mdh-f-x));
    --mdh-track:320px;
    --mdh-cap-w:72px;
    --mdh-cap-gap:7px;

    --control-h:32px; --control-h-sm:28px; --row-h:34px; --body-text:var(--text-sm); --caption-text:var(--text-2xs);
    --gutter:var(--space-md); --cell-pad-y:var(--space-2xs); --group-h:30px;
}
[data-density="comfortable"] {
    --control-h:40px; --control-h-sm:32px; --row-h:44px; --body-text:var(--text-md);
    --gutter:var(--space-lg); --cell-pad-y:7px; --group-h:38px;
}
/* A finger, not a pointer: every control and row is at least the 44pt a touch target needs. The phone
   and tablet heads set it on <html>. */
[data-density="touch"] {
    --control-h:44px; --control-h-sm:44px; --row-h:48px; --body-text:var(--text-md); --caption-text:var(--text-xs);
    --trigger-hit:44px; --gutter:var(--space-lg); --cell-pad-y:var(--space-sm); --group-h:44px;
}

/* ══ DARK ═══════════════════════════════════════════════════════════════════════════════════════
   Owner, 2026-09-17: navy, not black — and the ramp above already agreed. `--n-950` is #111827, a
   desaturated navy, and every neutral step is blue-biased the same way (#F5F7FA is B250 > G247 >
   R245). Black would be the one colour in the product with no hue relationship to the other eleven.

   ⚠⚠ THE `--n-*` RAMP DOES NOT FLIP, and that was measured before this was written: ten of the
   eleven direct uses of `--n-0` are white INK on a brand fill — `.day.on`, `.chip.on`, `.period.on`,
   the toast, the query bar. Reversing the ramp would make every one of them near-black text on blue.
   The ramp is a contrast scale, not a lightness scale, so the SEMANTIC tokens move and it does not.

   ⚠ AND THE PAPER DOES NOT FOLLOW EITHER — already decided above, in its own words: «A FILED
   DOCUMENT IS NOT A LIT PANEL». A dark theme that darkened MufidPaper, MufidZoneStage or
   MufidStickerSheet would show a reader a document that is not the one that prints. Only the wash
   AROUND the sheet moves, because that is screen furniture and not the artefact.

   ⚠ ELEVATION STOPS BEING A SHADOW. On white, a navy shadow separates a panel from the page; on a
   dark page it is invisible, and a dialog would float against nothing. Here the primary cue is
   LIGHTNESS — panel is lighter than page, and the shadow only deepens it. That is why
   `--surface-panel` rises above `--surface-page` in this block rather than staying pinned to `--n-0`.

   ⚠ AND `-700` GETS LIGHTER, WHICH READS AS BACKWARDS UNTIL YOU SEE WHY. Every call site uses these
   by ROLE, not by weight: `-700` is the INK that sits on a `-100` FILL (MufidBadge measures 4.57–6.49
   that way). Inverting the surface has to invert the pair, so the ink lightens and the fill darkens.
   Rename nothing — the roles are what the components read. */
[data-theme="dark"] {
    /* Tells the browser to draw its own furniture dark too: scrollbars, form controls, the caret. */
    color-scheme: dark;

    --text-primary:#E8EDF5; --text-secondary:#C7D2E0; --text-muted:#9BA7B8;
    --text-faint:#8494AE;

    /* ⚠⚠ DARK INK ON A BRAND FILL, AND IT IS NOT A TYPO. In light the fills are dark blues and white
       sits on them; here they are LIGHT blues, because the same token is also the INK on a dark brand
       tint. Keeping white gave 2.80 on «فاتورة جديدة» and 3.34 on a danger button — measured, not
       guessed. The token means «whatever reads on a brand fill», and at this end that is the page. */
    --text-on-brand:#0B1220;
    --text-disabled:#3E4A60;

    /* Page is the floor and panel rises off it — the inverse of the light theme's relationship, and
       the whole of how depth is read here. */
    --surface-page:#0B1220; --surface-panel:#131C2B; --surface-sunken:#080E19;
    --surface-hover:#1B2637; --surface-active:#233044;

    --rule:var(--border-subtle);
    --border-subtle:#243044; --border-default:#33415B; --border-strong:#5A6A85;
    --line-rest:var(--border-default); --line-hover:#7C8BA5;

    /* ⚠ THE FOCUS RING LIGHTENS. `--brand-700` on a dark panel is a ring nobody can see, and the
       focus mark is the one affordance that may never be subtle. */
    --focus-ring:2px solid var(--brand-400);

    /* Brand: the fills stay recognisably the product's blue but lift off the dark page, and the tints
       become dark blues rather than near-white blocks. */
    --brand-50:#0F1B2B; --brand-100:#152740; --brand-200:#1D3653; --brand-300:#2A4C74;
    --brand-400:#6FA8DC; --brand-500:#4A90D0; --brand-600:#3B82C4; --brand-700:#5AA0DC;
    --brand-800:#8CC0EA; --brand-900:#B6D9F4;
    --ai-violet:#B1A1F2; --ai-rose:#D79AC9;
    --ai-violet-hover:#C4B5FD; --ai-rose-hover:#E5B0D9;

    --success-50:#0C2318; --success-100:#123320; --success-500:#3FBF6C; --success-700:#6EE7A0;
    --warning-50:#2A1E06; --warning-100:#3B2B08; --warning-500:#E0A02A; --warning-700:#F5C563;
    --danger-50:#2B1113;  --danger-100:#3D171A;  --danger-500:#EF5A5A;  --danger-700:#FCA5A5;

    --key-teal-700:#5EEAD4; --key-violet-700:#C4B5FD;

    --module-today-pair:#3B9B98;
    --module-sales-pair:#CBA25F; --module-purchases-pair:#569CA5;
    --module-stock-pair:#568DB5; --module-cash-pair:#5EA38F;
    --module-ledger-pair:#4A9C98; --module-people-pair:#628FB1;
    --module-crm-pair:#BE8A79; --module-pos-pair:#8C76AA;
    --module-sales-ink:#EAB3D3; --module-sales-fill:#392639; --module-sales-accent:#BD79A2;
    --module-purchases-ink:#EBC296; --module-purchases-fill:#362C22; --module-purchases-accent:#C49560;
    --module-stock-ink:#9FD8C7; --module-stock-fill:#1B3332; --module-stock-accent:#66AC98;
    --module-cash-ink:#A1D5EA; --module-cash-fill:#1B303E; --module-cash-accent:#649FB9;
    --module-ledger-ink:#C6BAF0; --module-ledger-fill:#2C2943; --module-ledger-accent:#9C8ACD;
    --module-people-ink:#EDBDAE; --module-people-fill:#392A2A; --module-people-accent:#C58E7D;
    --module-crm-ink:#B7C9F3; --module-crm-fill:#232E47; --module-crm-accent:#819BC9;
    --module-pos-ink:var(--brand-400); --module-pos-fill:var(--brand-100); --module-pos-accent:var(--brand-600);

    /* Deeper and blacker: on a dark surface a navy shadow reads as nothing, so the drop carries real
       black and the lightness above does the separating. */
    --elevation-1:0 1px 2px rgb(0 0 0/40%),0 1px 3px rgb(0 0 0/28%);
    --elevation-2:0 4px 12px rgb(0 0 0/48%),0 1px 3px rgb(0 0 0/32%);
    --elevation-3:0 12px 28px rgb(0 0 0/56%),0 2px 6px rgb(0 0 0/36%);
    --elevation-4:0 20px 48px rgb(0 0 0/64%),0 4px 10px rgb(0 0 0/40%);

    /* ⚠ HEAVIER THAN THE LIGHT ONE. A 32% dim over a dark page is barely a change; the scrim has to
       still read as «the page went away» at this end of the ramp. */
    --scrim:rgb(0 0 0 / 62%);

    /* ⚠ THE WASH AROUND THE PAPER, AND NOTHING ELSE OF THE PAPER FAMILY. The sheet stays white
       because it is a sheet; the desk it lies on is screen furniture and goes dark with the rest. */
    --paper-wash:#070C15;

    /* The ladder's age scale is a ladder, not a status — it only needs to stay legible on dark. */
    --age-1:#7FA8CE; --age-2:#E3C572; --age-3:#DDA23C; --age-4:#D4813F; --age-5:#D4564A;

    /* ⚠ THE THUMB LIGHTENS TOO. `--n-500` is a mid-grey chosen against white; on #0B1220 it is a
       bright bar, and at 8px wide the whole point was that it be findable and quiet. */
    scrollbar-color:#3A475E transparent;
}

/* Custom properties resolve their references where they are declared. A theme on a nested preview or
   panel must recompute these recipes locally, rather than inherit already-resolved light borders. */
:root, [data-theme] {
    --control-border:var(--stroke-control) solid var(--border-default);
    --surface-border:var(--stroke-hairline) solid var(--border-subtle);
    --divider-border:var(--stroke-hairline) solid var(--rule);
    --pane-border:var(--stroke-control) solid var(--border-subtle);
    --edge-card:inset 0 0 0 var(--stroke-hairline) var(--border-subtle);
}

/* ⚠ NO GLOBAL RESET HERE. This sheet is linked into Admin beside 68 legacy sheets built without one,
   and a `*` reset there changes the box model of 76 screens that never asked for it — the reasoning
   kit.css states where it scopes box-sizing to a named list, and PLAN.md records as the second half of
   the horizontal-scrollbar bug. Each kit component declares border-box in its OWN .razor.css, where
   the selector carries a scope attribute and reaches nothing else. */

/* ═══ SCROLL ════════════════════════════════════════════════════
   Always visible, never loud. In a data app the bar is information: it says how much more there is.
   Standard properties only — setting scrollbar-width makes Chromium ignore ::-webkit-scrollbar
   entirely, so the two cannot be mixed.

   ⚠⚠ `scrollbar-width` IS NOT INHERITED, AND THAT IS THE WHOLE REASON FOR THE `*`. Only
   `scrollbar-color` inherits; `scrollbar-width` computes to `auto` on every element that does not
   declare it. So `:root { scrollbar-width: thin }` — which is what this said for months — thinned
   the DOCUMENT bar and nothing else, and every inner scroller in the product kept the 15px classic
   one. Measured on the time field's hour column: a 15px bar inside a 72px column, 21% of it spent on
   chrome, while the computed value on that element read `auto`.

   ⚠ AND THIS IS NOT THE GLOBAL RESET THE NOTE ABOVE REFUSES. That one is about `box-sizing`, which
   silently re-measures 76 legacy screens. This sets one non-layout property whose only effect is a
   narrower gutter — it gives content back 7px and can break nothing that was correct before. The two
   deliberate `scrollbar-width: none` strips (act-tabs, the je bar) keep winning on specificity: a
   class is 0,1,0 and `*` is 0,0,0.

   The thumb is --n-500, not --n-400: at 8px wide the lighter step is nearly invisible on a white
   panel, and a bar you cannot see is not carrying the information it exists to carry. */
* { scrollbar-width:thin; }
:root { scrollbar-color:var(--n-500) transparent; }
.scroll-x-shadow { background:
    linear-gradient(to left, var(--surface-panel) 30%, transparent) right/40px 100% no-repeat,
    linear-gradient(to left, rgb(17 24 39/8%), transparent) right/12px 100% no-repeat; }

/* ── the currency mark ──────────────────────────────────────────────────────────────────────────
   ⚠ THE RIYAL CANNOT BE A CHARACTER. U+20C0 has no coverage in the fonts Windows ships, so a figure
   that draws it as text draws tofu — the rule `grid.css` states as «.mgrid-riyal» and `base.css` as
   «.mfd-riyal», and `MufidCurrencyMark` is the one component that decides which of the two a symbol
   gets. Any OTHER currency renders as its own text symbol: inventing a fallback glyph would put a
   riyal beside a figure in dollars.

   These rules live here rather than being borrowed from base.css because the kit stands on its own
   ramp — base.css is the till's, links nothing here, and reaches for `--muted-3`, which the kit does
   not declare. Anything a kit component renders has to be dressed by foundations or it arrives naked
   in the gallery and wrong in Admin.

   In RTL displays the owner's SAR convention places the mark physically to the left of the whole
   signed number. The unit stays isolated LTR so the minus sign and digits remain together.
   Cap-height sizing follows the figure's font, with one-third-height clear space.
   The original SVG viewBox and paths retain their geometry. */
.mfd-money {
    display: inline-flex;
    align-items: baseline;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    gap: calc(1em / 3);
    gap: calc(1cap / 3);
    font-variant-numeric: tabular-nums;
}

.mfd-sym {
    margin-inline-end: var(--space-micro);
    color: var(--text-faint);
    font-weight: var(--weight-semibold);
    font-size: .72em;
}

.mfd-money .mfd-sym { margin-inline-end: 0; }

.mfd-riyal { display: inline-flex; flex: none; color: inherit; }
.mfd-riyal svg { display: block; width: auto; height: 1em; height: 1cap; }