/* CM001 kit — currency.css  ·  the Saudi Riyal mark, platform-wide
 * ---------------------------------------------------------------------------
 * Every amount on the platform is in Saudi riyals and shows the riyal MARK —
 * never the letters "SAR", never a generic currency sign. The Unicode point
 * U+20C1 is too new to exist in most system fonts (it renders as a missing-
 * glyph box), so the mark is drawn from --sar-glyph as a CSS mask filled with
 * currentColor: it inherits the text colour, scales with font-size, needs no
 * webfont, and mirrors correctly in RTL. Replace the path inside --sar-glyph
 * with the official SAMA artwork before release — it is one token, nothing
 * else changes. Lives in cm.components so a page can never accidentally
 * out-rank it with an unlayered rule, and the Design Studio can still tune it.
 * -------------------------------------------------------------------------- */
@layer cm.components {
  :root {
    --sar-glyph: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTI0LjE0IDEyNTYuMzkiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik02OTkuNjIsMTExMy4wMmgwYy0yMC4wNiw0NC40OC0zMy4zMiw5Mi43NS0zOC40LDE0My4zN2w0MjQuNTEtOTAuMjRjMjAuMDYtNDQuNDcsMzMuMzEtOTIuNzUsMzguNC0xNDMuMzdsLTQyNC41MSw5MC4yNFoiLz48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTA4NS43Myw4OTUuOGMyMC4wNi00NC40NywzMy4zMi05Mi43NSwzOC40LTE0My4zN2wtMzMwLjY4LDcwLjMzdi0xMzUuMmwyOTIuMjctNjIuMTFjMjAuMDYtNDQuNDcsMzMuMzItOTIuNzUsMzguNC0xNDMuMzdsLTMzMC42OCw3MC4yN1Y2Ni4xM2MtNTAuNjcsMjguNDUtOTUuNjcsNjYuMzItMTMyLjI1LDExMC45OXY0MDMuMzVsLTEzMi4yNSwyOC4xMVYwYy01MC42NywyOC40NC05NS42Nyw2Ni4zMi0xMzIuMjUsMTEwLjk5djUyNS42OWwtMjk1LjkxLDYyLjg4Yy0yMC4wNiw0NC40Ny0zMy4zMyw5Mi43NS0zOC40MiwxNDMuMzdsMzM0LjMzLTcxLjA1djE3MC4yNmwtMzU4LjMsNzYuMTRjLTIwLjA2LDQ0LjQ3LTMzLjMyLDkyLjc1LTM4LjQsMTQzLjM3bDM3NS4wNC03OS43YzMwLjUzLTYuMzUsNTYuNzctMjQuNCw3My44My00OS4yNGw2OC43OC0xMDEuOTd2LS4wMmM3LjE0LTEwLjU1LDExLjMtMjMuMjcsMTEuMy0zNi45N3YtMTQ5Ljk4bDEzMi4yNS0yOC4xMXYyNzAuNGw0MjQuNTMtOTAuMjhaIi8+PC9zdmc+");
  }

  /* The mark itself — an inline box masked to the glyph, painted in currentColor. */
  .cm-sar {
    display: inline-block;
    inline-size: .86em;
    block-size: .96em;
    background: currentColor;
    -webkit-mask: var(--sar-glyph) no-repeat center / contain;
    mask: var(--sar-glyph) no-repeat center / contain;
    vertical-align: -0.1em;
    flex: none;
  }

  /* An amount: the mark leads the number as one unit, so in RTL the whole run
     reverses together and the mark still sits at the START of the amount. */
  .cm-money {
    display: inline-flex;
    align-items: baseline;
    gap: .28em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .cm-money .cm-sar { align-self: center; }

  /* In a table column: end-aligned, fixed-width mark, so digits AND marks line up. */
  .cm-money--col { justify-content: flex-end; text-align: end; }
  td > .cm-money, th > .cm-money { display: inline-flex; }

  /* Muted / large / small conveniences. */
  .cm-money--muted { color: var(--text-2); }
  .cm-money--lg { font-size: var(--fs-lg, 16px); font-weight: 700; }
  .cm-money--sm { font-size: var(--fs-sm, 13px); }
}