/* ═══════════════════════════════════════════════════════════════════════════
   كراده 52 — typeface

   HAND-MAINTAINED. Not regenerated by the build.

   Montserrat Arabic by Gaber Diab / KiefType, SIL Open Font License 1.1.
   Source: https://github.com/typeagm/Montserrat-Arabic  ·  licence: fonts/OFL.txt

   Self-hosted rather than loaded from a CDN: this is an offline-first PWA, and a
   webfont it cannot fetch is a webfont it cannot use. Everything now ships in the
   service worker's precache, so the app has no external request at all.

   One family covers the whole interface — Arabic, Latin, Western and Arabic-Indic
   digits, and the true minus (U+2212) that amounts are formatted with.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Montserrat Arabic";
  src: url("fonts/Montserrat-Arabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Arabic";
  src: url("fonts/Montserrat-Arabic-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Arabic";
  src: url("fonts/Montserrat-Arabic-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Arabic";
  src: url("fonts/Montserrat-Arabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Arabic";
  src: url("fonts/Montserrat-Arabic-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Montserrat Arabic's digits are proportional by default — its advance widths
   run from 375 to 707 units, so a column of amounts would visibly ragged without
   this. The old typeface was a monospace and aligned for free; this one needs the
   OpenType `tnum` feature asked for explicitly.

   Set globally rather than per cell: most numeric styles in the template request
   it themselves, but nineteen do not — among them the day-rail day numbers and
   the payroll row numbers, both of which sit in columns. Inheriting it from the
   root covers every one of them, and there is nowhere in this interface where
   proportional digits would be preferable. */
html {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Icons replace single-character glyphs inside buttons that were sized for text,
   so they size from the font (1em) and sit on the text baseline rather than
   forcing their own box. */
.dc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.dc-icon > svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

/* ── brand mark ────────────────────────────────────────────────────────────
   The header badge is authored as a dark 36px square holding the text "52".
   The logo that replaces it is a wide wordmark carrying its own colours, so the
   square and the dark fill both have to go.

   `!important` is necessary rather than lazy: the canvas writes width, height
   and background inline on that element, and an inline style outranks any rule
   here without it.

   `:has()` keys off the logo actually being present. With no logo built in, the
   key is never registered, the badge still holds plain text, this rule does not
   match, and the original "52" styling stands. */
.dc-icon:has(> svg[aria-label="Next Level"]) {
  height: 100%;
  width: auto;
}

:is(div, span):has(> .dc-icon > svg[aria-label="Next Level"]) {
  width: auto !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  height: 42px !important;
  overflow: visible;
}