/*
 * Bank Alkair — central design tokens (rules 6.2 / 13.8).
 * Every color, font, size, spacing, radius and shadow used by the control panel comes from here.
 */
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/tajawal/tajawal-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/tajawal/tajawal-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/tajawal/tajawal-500-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/tajawal/tajawal-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/tajawal/tajawal-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/tajawal/tajawal-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand */
  --ba-primary: #0E5A4B;
  --ba-primary-dark: #083B31;
  --ba-primary-soft: #E3F0EC;
  --ba-gold: #B8892E;
  --ba-gold-dark: #8F6A20;
  --ba-gold-light: #E3C77E;
  --ba-gold-soft: #F7EFDC;

  /* Surfaces & text */
  --ba-bg: #F3F5F2;
  --ba-card: #FFFFFF;
  --ba-card-alt: #F9FAF8;
  --ba-text: #1C2B27;
  --ba-text-muted: #5E6E69;
  --ba-border: #DCE3DF;
  --ba-border-strong: #C4CFCA;
  --ba-overlay: rgba(8, 25, 21, 0.62);
  --ba-sidebar-bg: #0B3F35;
  --ba-sidebar-text: #D5E6E0;
  --ba-sidebar-muted: #8FB0A6;
  --ba-sidebar-active: rgba(227, 199, 126, 0.16);

  /* States */
  --ba-success: #2E7D5B;
  --ba-success-soft: #E4F3EC;
  --ba-warning: #B7791F;
  --ba-warning-soft: #FBF1DF;
  --ba-danger: #B33A3A;
  --ba-danger-soft: #F9E6E6;
  --ba-info: #2F6690;
  --ba-info-soft: #E6EFF6;
  --ba-neutral: #6B7A75;
  --ba-neutral-soft: #EEF1EF;

  /* Audit sensitivity */
  --ba-sens-normal: #8A8178;
  --ba-sens-sensitive: #B88A3B;
  --ba-sens-critical: #B33A3A;

  /* Typography */
  --ba-font: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  --ba-weight-regular: 400;
  --ba-weight-medium: 500;
  --ba-weight-bold: 700;
  /* Tajawal draws small for its size, so the panel scale starts at 16px */
  --ba-text-xs: 14px;
  --ba-text-sm: 15px;
  --ba-text-base: 16px;
  --ba-text-md: 19px;
  --ba-text-lg: 22px;
  --ba-text-xl: 28px;
  --ba-text-2xl: 34px;
  --ba-line: 1.7;

  /* Spacing scale: 4 · 8 · 12 · 16 · 24 · 32 */
  --ba-space-1: 4px;
  --ba-space-2: 8px;
  --ba-space-3: 12px;
  --ba-space-4: 16px;
  --ba-space-5: 24px;
  --ba-space-6: 32px;
  --ba-card-padding: 24px;
  --ba-field-gap: 16px;
  --ba-section-gap: 32px;

  /* Radius */
  --ba-radius-card: 12px;
  --ba-radius-control: 8px;
  --ba-radius-modal: 16px;
  --ba-radius-pill: 999px;
  /* Width of every hairline border in the control panel. */
  --ba-hairline: 1px;

  /* Shadow */
  --ba-shadow: 0 1px 2px rgba(16, 40, 34, 0.06), 0 4px 14px rgba(16, 40, 34, 0.05);
  --ba-shadow-lg: 0 18px 50px rgba(8, 25, 21, 0.22);

  /* Sizes */
  --ba-control-height: 48px;
  --ba-sidebar-width: 280px;
  --ba-header-height: 68px;
  --ba-modal-width: 520px;
  --ba-icon: 18px;
  --ba-logo-header-w: 220px;
  --ba-logo-header-h: 70px;
  --ba-logo-login-w: 360px;
  --ba-logo-login-h: 120px;

  --ba-transition: 160ms ease;

  /* Typography — extended */
  --ba-font-mono: Consolas, "Courier New", monospace;
  --ba-text-2xs: 12px;
  --ba-text-3xl: 46px;
  --ba-text-4xl: 64px;
  --ba-line-none: 1;
  --ba-line-tight: 1.2;
  --ba-line-heading: 1.4;
  --ba-tracking-wide: 0.02em;

  /* Fine spacing (half-steps between the 4px scale) */
  --ba-space-0-5: 2px;
  --ba-space-0-75: 3px;
  --ba-space-1-5: 6px;
  --ba-space-2-5: 10px;

  /* Radius — extended */
  --ba-radius-tile: 14px;
  --ba-radius-mark: 20px;

  /* Borders, focus & indicators */
  --ba-border-thick: 2px;
  --ba-focus-ring-width: 3px;
  --ba-focus-ring-offset: 2px;
  --ba-indicator-width: 3px;
  /* Unitless stroke-width of the layout schematics (.mock SVGs in admin-site.css) */
  --ba-mock-stroke: 1;
  --ba-mock-stroke-bold: 2;

  /* Shadow — extended */
  --ba-shadow-focus: 0 0 0 var(--ba-focus-ring-width) var(--ba-primary-soft);
  --ba-shadow-nav-active: inset calc(-1 * var(--ba-indicator-width)) 0 0 var(--ba-gold);
  --ba-shadow-live-halo: 0 0 0 4px var(--ba-success-soft);

  /* Overlay & translucency */
  --ba-sidebar-divider: rgba(255, 255, 255, 0.08);
  --ba-sidebar-hover: rgba(255, 255, 255, 0.06);
  --ba-gold-glow: rgba(184, 137, 46, 0.18);
  --ba-primary-glow: rgba(14, 90, 75, 0.22);
  --ba-opacity-deco: 0.7;
  --ba-opacity-disabled: 0.5;
  --ba-opacity-muted: 0.85;
  --ba-filter-hover-darken: brightness(0.92);
  --ba-filter-disabled: grayscale(0.4);

  /* Gradients */
  --ba-gradient-brand: linear-gradient(135deg, var(--ba-primary), var(--ba-primary-dark));
  --ba-gradient-progress: linear-gradient(90deg, var(--ba-primary), var(--ba-gold));
  --ba-gradient-auth-base: linear-gradient(160deg, var(--ba-primary-dark), var(--ba-sidebar-bg));

  /* Icon sizes (--ba-icon above is the 18px default) */
  --ba-icon-xs: 13px;
  --ba-icon-sm: 14px;
  --ba-icon-md: 20px;
  --ba-icon-lg: 24px;
  --ba-icon-xl: 26px;
  --ba-icon-2xl: 28px;
  --ba-icon-3xl: 36px;
  --ba-icon-4xl: 40px;
  --ba-icon-5xl: 48px;
  --ba-icon-align: -0.2em;

  /* Component sizes */
  --ba-content-max-width: 1400px;
  --ba-topbar-logo-gap: 20px;
  --ba-avatar-size: 30px;
  --ba-icon-btn-size: 42px;
  --ba-badge-dot-size: 18px;
  --ba-badge-dot-pad-x: 5px;
  --ba-control-height-sm: 36px;
  --ba-search-select-serial: 88px;
  --ba-search-select-max-h: 320px;
  --ba-check-min-height: 32px;
  --ba-checkbox-size: 18px;
  --ba-spinner-size: 18px;
  --ba-spinner-stroke: 2px;
  --ba-switch-width: 46px;
  --ba-switch-height: 26px;
  --ba-switch-knob: 20px;
  --ba-switch-inset: 3px;
  --ba-switch-knob-on: 23px;
  --ba-textarea-min-height: 120px;
  --ba-stat-icon-size: 56px;
  --ba-stat-deco-size: 110px;
  --ba-stat-deco-offset: -30px;
  /* Narrowest figure of a summary row above a list (p06): the row fits as many as the width allows. */
  --ba-summary-min: 200px;
  /* Width of a number card in a row that carries a long figure, so a total in the billions fits. */
  --ba-summary-min-wide: 380px;
  /* A menu placement row keeps this much for its name and address; its choices wrap below it. */
  --ba-menu-row-body-min: 260px;
  --ba-filter-field-min: 180px;
  --ba-filter-field-wide: 260px;
  --ba-table-min-width: 720px;
  --ba-kv-label-min: 120px;
  --ba-diff-max-width: 380px;
  --ba-diff-min-width: 220px;
  --ba-diff-phone-max: 240px;
  --ba-diff-phone-height: 92px;
  --ba-audit-device-min: 150px;
  --ba-audit-cell-min: 90px;
  --ba-values-min: 84px;
  --ba-diff-max-height: 160px;
  --ba-state-icon-size: 64px;
  --ba-modal-close-clearance: 40px;
  --ba-dropdown-width: 360px;
  --ba-dropdown-viewport-max: 92vw;
  --ba-notif-max-height: 380px;
  --ba-checker-size: 20px;
  --ba-media-preview-w: 120px;
  --ba-media-preview-h: 80px;
  --ba-media-field-min: 220px;
  --ba-progress-height: 10px;
  --ba-perm-col-min: 260px;
  --ba-auth-card-width: 440px;
  --ba-auth-mark-size: 72px;
  --ba-qr-size: 200px;
  --ba-live-dot-size: 10px;
  --ba-sidebar-rail-width: 76px;
  --ba-nav-flyout-width: 272px;
  --ba-nav-group-icon: 34px;
  /* The account password asked before a copy is downloaded or restored (p17 item 72-1). */
  --ba-password-inline-w: 9em;
  --ba-password-confirm-w: 12em;

  /* Z-index scale */
  --ba-z-raised: 1;
  --ba-z-topbar: 30;
  --ba-z-backdrop: 35;
  --ba-z-sidebar: 40;
  --ba-z-dropdown: 60;
  --ba-z-modal: 100;

  /* Motion */
  --ba-duration-pop: 180ms;
  --ba-duration-progress: 120ms;
  --ba-duration-spin: 0.8s;
  --ba-motion-pop-shift: 8px;
  --ba-motion-pop-scale: 0.98;
  --ba-duration-nav: 220ms;

  /*
   * Breakpoints — reference only. var() is not allowed inside @media conditions,
   * so these values are written literally in admin*.css (and admin.js) and must stay in sync:
   *   1280px  site-shell editor and its live preview stack (admin-site.css)
   *   1100px  wide grids (grid-3/grid-4, media-grid) collapse
   *   1023px  sidebar becomes an off-canvas drawer; 1024px and up allows the icon rail (admin.js too)
   *    900px  accounting charts stack (admin-accounting.css)
   *    760px  multi-column form grids stack
   *    640px  all grids collapse to one/two columns
   *    480px  top bar keeps the logo inside the phone width
   */
}

/* =====================================================================
 * Public site tokens (--s-*). Colour roles below are the default theme;
 * the selected theme overrides only these colour roles inline (p02 part 03).
 * Sizes, spacing, radii and shadows never change between themes.
 * ===================================================================== */
:root {
  /* Colour roles (15 + status) — default theme "khair" */
  --s-page-bg: #F4F7F5;
  --s-card-bg: #FFFFFF;
  --s-border: #DDE6E1;
  --s-text: #13241F;
  --s-muted: #56665F;
  --s-primary: #0E5A4B;
  --s-primary-dark: #083B31;
  --s-primary-light: #E3F0EC;
  --s-on-primary: #FFFFFF;
  --s-accent: #C9A24A;
  --s-on-accent: #13241F;
  --s-header-bg: #FFFFFF;
  --s-header-text: #13241F;
  --s-footer-bg: #0B2F28;
  --s-footer-text: #D6E6E0;
  /* Worked out per theme by ThemeCatalog::derive(): text in the brand colour, and a highlight on it,
     each kept at 4.5:1 (p16 item 25). The default theme's values. */
  --s-primary-text: #0E5A4B;
  --s-accent-on-primary: #FFFFFF;
  --s-success: #15803D;
  --s-warning: #B45309;
  --s-error: #DC2626;
  --s-on-status: #FFFFFF;
  --s-overlay: rgba(6, 20, 16, 0.55);
  --s-overlay-strong: rgba(6, 20, 16, 0.78);
  --s-glass: rgba(255, 255, 255, 0.14);
  --s-glass-border: rgba(255, 255, 255, 0.28);
  --s-footer-divider: rgba(255, 255, 255, 0.12);
  --s-pattern-opacity: 0.10;

  /* System pages (404, 403, 500, maintenance) follow the public theme (rules 13.5) */
  --s-system-mark: 44px;
  --s-system-card-w: 560px;
  --s-system-icon: 88px;

  /* Typography */
  --s-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --s-font-num: "Inter", "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  --s-weight-body: 400;
  --s-weight-label: 500;
  --s-weight-title: 600;
  --s-weight-strong: 700;
  --s-text-xs: 12px;
  --s-text-sm: 14px;
  --s-text-base: 16px;
  --s-text-md: 18px;
  --s-text-card-title: 20px;
  --s-text-section: 24px;
  --s-text-page: 32px;
  --s-text-hero: 48px;
  --s-text-stat: 40px;
  --s-line: 1.8;
  --s-line-tight: 1.35;
  --s-line-heading: 1.4;

  /* Spacing (4px unit) */
  --s-space-1: 4px;
  --s-space-2: 8px;
  --s-space-3: 12px;
  --s-space-4: 16px;
  --s-space-5: 20px;
  --s-space-6: 24px;
  --s-space-7: 32px;
  --s-space-8: 40px;
  --s-space-9: 56px;
  --s-space-10: 80px;

  /* Radii */
  --s-radius-sm: 8px;
  --s-radius: 12px;
  --s-radius-lg: 16px;
  --s-radius-xl: 24px;
  --s-radius-pill: 999px;

  /* Shadows */
  --s-shadow-sm: 0 2px 8px rgba(16, 24, 20, 0.06);
  --s-shadow: 0 8px 24px rgba(16, 24, 20, 0.10);
  --s-shadow-lg: 0 16px 40px rgba(16, 24, 20, 0.14);
  --s-ring: 0 0 0 3px var(--s-primary);

  /* Component sizes */
  --s-control: 48px;
  --s-control-lg: 56px;
  --s-touch: 48px;
  --s-container: 1240px;
  --s-container-narrow: 820px;
  --s-header-h: 76px;
  --s-header-h-compact: 60px;
  --s-logo-w: 220px;
  --s-logo-h: 70px;
  --s-footer-logo-w: 260px;
  --s-footer-logo-h: 90px;
  --s-drawer-w: 320px;
  /* The drawer never covers the whole phone screen. */
  --s-drawer-max: 88vw;
  --s-dropdown-min: 180px;
  /* The phone country list shows about six countries before it scrolls. */
  --s-picker-max-h: 264px;
  --s-icon: 18px;
  --s-icon-md: 22px;
  --s-icon-lg: 28px;
  --s-icon-xl: 40px;
  --s-card-media-ratio: 1 / 1;
  --s-wide-ratio: 16 / 9;
  --s-progress-h: 10px;
  --s-avatar: 96px;
  --s-avatar-lg: 140px;
  --s-cart-badge: 22px;
  --s-toc-w: 260px;
  --s-donate-box-w: 380px;
  --s-hairline: 1px;
  --s-border-w: 2px;
  --s-focus-w: 3px;
  --s-focus-offset: 2px;

  /* Motion */
  --s-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --s-fast: 150ms;
  --s-normal: 250ms;
  --s-slow: 400ms;
  --s-spin: 0.8s;
  --s-lift: -4px;

  --s-press: 1px;
  --s-zoom-media: 1.04;
  --s-zoom-float: 1.06;
  --s-zoom-cover: 1.02;
  --s-zoom-thumb: 1.05;
  --s-hover-darken: brightness(0.95);
  --s-filter-glint: brightness(1.6);

  /* Details */
  --s-opacity-strong: 0.92;
  --s-opacity-soft: 0.9;
  --s-opacity-muted: 0.85;
  --s-opacity-dim: 0.35;
  --s-opacity-disabled: 0.5;
  --s-glow-stop: 70%;
  /* Room kept inside an input for a short unit such as the dinar sign. */
  --s-affix-space: 4.5em;
  --s-icon-align: -0.2em;
  --s-underline-offset: 3px;
  --s-underline-offset-lg: 4px;
  /* Default pattern tile; the selected pattern overrides it in the theme block. */
  --s-pattern-size: 64px;
  /*
   * Breakpoints — reference only (var() is not allowed in @media), written literally in site*.css:
   *   1279px compact header hides secondary items · 1100px grid-4 → 3, desktop menu from here
   *   (1099px drawer below it; site-shell.js uses the same 1100px) · 1023px page drawer
   *    960px project page single column · 900px grids/aside/footer → 2 or 1
   *    760px mobile type scale and spacing · 681px project grid single column below it
   *    600px single column · 480px header logo shrinks beside the tools
   *
   * Container widths (@container, same rule: no var() in the condition):
   *    820px zakat calculator goes to one column (site-zakat.css)
   *    600px/601px zakat compact phone spacing below · tabs wrap and the bento tile spans above (site-zakat.css)
   *    520px donor fields side by side · 300px donor fields stack (site-checkout.css)
   */

  /* Layers */
  --s-z-pattern: 0;
  --s-z-content: 1;
  --s-z-sticky: 50;
  --s-z-header: 60;
  --s-z-dropdown: 70;
  --s-z-drawer: 90;
  --s-z-modal: 100;
  --s-z-toast: 110;
}

/* Mobile type scale (p02 part 03): card 18, section 22, page 28, hero 34. Breakpoint 760px. */
@media (max-width: 760px) {
  :root {
    --s-text-card-title: 18px;
    --s-text-section: 22px;
    --s-text-page: 28px;
    --s-text-hero: 34px;
    --s-text-stat: 32px;
    --s-header-h: 64px;
  }
}

/* Control panel — editor & preview sizes (p02 modules) */
:root {
  --ba-editor-max-height: 520px;
  --ba-preview-height: 720px;
  --ba-preview-mobile-width: 390px;
  --ba-preview-desktop-width: 1280px;
  /* The media picker opens in its own window of this size. */
  --ba-picker-width: 1100px;
  --ba-picker-height: 800px;
}

/* =====================================================================
 * Site shell tokens (p02 parts 03, 10–13) — appended by the site-shell module.
 * --s-link is a theme role (overridden per theme); the rest never change between themes.
 * ===================================================================== */
:root {
  --s-link: #0E5A4B;
  /* The keyboard focus outline takes the theme's link colour, which every theme already keeps at 4.5:1
     on the page, the cards and the header (Contrast::CHECKS): the gold accent read at 2.2:1 (p16 item 22). */
  --s-focus: var(--s-link);

  /* Tint strengths for color-mix() with theme colours */
  --s-tint-strong: 88%;
  --s-tint: 62%;
  --s-tint-mid: 35%;
  --s-tint-soft: 16%;
  --s-tint-faint: 8%;

  /* Header & menus */
  --s-topbar-h: 44px;
  --s-touch-sm: 40px;
  --s-dropdown-max: 320px;
  --s-nav-card-h: 60px;
  --s-nav-card-min: 128px;
  --s-nav-icon-card-h: 88px;
  --s-nav-icon: 40px;
  --s-caret: 12px;
  --s-search-w: 760px;
  --s-suggest-max-h: 420px;
  --s-shadow-header: 0 10px 30px rgba(16, 24, 20, 0.08);
  --s-backdrop-blur: blur(14px) saturate(1.4);

  /* Footer */
  --s-footer-col-min: 180px;
  --s-footer-brand-min: 260px;
  --s-footer-small-logo-h: 40px;
  --s-donate-mark: 64px;

  /* Home blocks */
  --s-page-card-icon: 56px;
  --s-intro-max: 880px;
  --s-quote-mark: 72px;
  --s-welcome-min-h: 360px;

  /* Statistics */
  --s-stat-icon: 64px;
  --s-stats-bg-min-h: 320px;
  --s-stats-side-w: 320px;

  /* Gallery (fixed timings of part 13.8 — read by site-gallery.js too) */
  --g-fade: 400ms;
  --g-flip: 400ms;
  --g-flip-stagger: 120ms;
  --g-rise: 16px;
  --g-zoom: 1.06;
  --g-turn: 90deg;
  --g-hero-min-h: 440px;
  --g-hero-h: 74vh;
  --g-hero-max-h: 760px;
  --g-split-h: 520px;
  --g-caption-w: 760px;
  --g-arrow: 52px;
  --g-dot: 10px;
  --g-dot-active: 32px;
  --g-thumb-w: 120px;
  --g-thumb-h: 68px;
  --g-orbit: clamp(240px, 34vw, 440px);
  --g-orbit-gap: 18px;
  --g-orbit-stroke: 4px;
  --g-orbit-dot: 16px;
  --g-card-h: 480px;
  --g-overlay-top: rgba(4, 14, 11, 0.10);
  --g-overlay-bottom: rgba(4, 14, 11, 0.82);
  --g-overlay-side: rgba(4, 14, 11, 0.62);
  --g-on-image: #FFFFFF;
  --g-glass: rgba(255, 255, 255, 0.16);
  --g-glass-strong: rgba(255, 255, 255, 0.26);
  --g-glass-border: rgba(255, 255, 255, 0.34);
  --g-text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

@media (max-width: 760px) {
  :root {
    --s-nav-card-h: 52px;
    --g-hero-min-h: 420px;
    --g-hero-h: 78vh;
    --g-split-h: 300px;
    --g-arrow: 48px;
    --g-card-h: 380px;
    --g-orbit: min(72vw, 300px);
    --s-stat-icon: 52px;
  }
}

/* Content module — public sizes (p02 parts 05–07) */
:root {
  --s-portrait-ratio: 4 / 5;
  --s-news-row-media: 280px;
  --s-doc-thumb: 72px;
  --s-chairman-avatar: 200px;
}

/* Site shell tokens (continued) — card and figure minimum widths, thumbnail dimming. */
:root {
  --s-card-min: 300px;
  --s-stat-min: 160px;
  --g-thumb-dim: 0.6;
}

/* p02 projects */
:root {
  --s-pc-thumb: 112px;
  --s-pc-thumb-mini: 72px;
  --s-pc-ring: 84px;
  --s-pc-ring-stroke: 9px;
  --s-pc-mark: 14px;
  --s-pc-bubble: 64px;
  --s-pc-frame: 10px;
  --s-pc-overlay: linear-gradient(180deg, transparent 0%, var(--s-overlay) 45%, var(--s-overlay-strong) 100%);
  --s-pj-gallery-min: 150px;
  --s-pj-dot: 26px;
  --s-pj-rail: 2px;
  --s-pj-stage-thumb: 220px;
  --s-lightbox-max-w: 92vw;
  --s-lightbox-max-h: 84vh;
  --s-toast-max: 520px;
  /* control panel */
  --ba-pf-side: 320px;
  --ba-pf-checks-max-height: 260px;
  --ba-pf-check-col: 200px;
  --ba-pf-gallery-tile: 120px;
  --ba-pf-status-select: 150px;
  --ba-pf-name-col: 240px;
  --ba-pf-actions-col: 236px;
  --ba-pf-mini-progress: 6px;
  --ba-pf-form-col: 380px;
}

/* p02 marketing */
:root {
  /* control panel: link cells (copyable URL, note editor, project search box) */
  --ba-mkt-copy-min: 230px;
  --ba-mkt-note-min: 200px;
  --ba-mkt-find-max: 560px;
}

/* p02 accounting */
:root {
  --ba-acc-chart-height: 220px;
  --ba-acc-bar-height: 10px;
  --ba-acc-serial-width: 88px;
  --ba-acc-loading-min: 72px;
  --ba-acc-box-min: 260px;
  --ba-acc-save-width: 320px;
  --ba-acc-wrap-max: 320px;
  --ba-acc-column-group-min: 200px;
}

/* p02 tracking */
:root {
  /* control panel: minimum width of one block inside a platform card */
  --ba-trk-block-min: 300px;
}

/* p02 marketing (link table) */
:root {
  /* control panel: project names keep a readable width next to the wide link cell */
  --ba-mkt-project-min: 150px;
}

/* p03 monitoring (visitors screen) */
:root {
  /* control panel: height of the requests-per-minute chart, and the widest browser signature cell */
  --ba-vis-chart-height: 120px;
  --ba-vis-agent-max: 28ch;
}

/* =====================================================================
 * p04 impact map (--im-*). Every colour of the five map themes is drawn from the site theme
 * roles (--s-*) with the mix strengths below, so the map follows whichever site theme is chosen.
 * The dark themes stand on the footer pair (--s-footer-bg / --s-footer-text), which every site
 * theme already proves readable (App\Appearance\Contrast).
 * ===================================================================== */
:root {
  /* The deepest shade mixed into the dark themes */
  --im-shade: #000000;

  /* Mix strengths with the site colours */
  --im-deep: 45%;
  --im-deeper: 62%;
  --im-lift: 28%;
  --im-land-dots: 42%;
  --im-land-soft: 34%;
  --im-land-fill: 22%;
  --im-arc-base: 22%;
  --im-glow-mix: 62%;
  --im-day-glow: 45%;
  --im-muted-mix: 74%;
  --im-grid-mix: 14%;
  --im-sweep-mix: 30%;
  --im-star-mix: 80%;
  --im-glass: 10%;
  --im-glass-border: 22%;
  --im-glass-fact: 8%;
  --im-glass-line: 16%;

  /* Markers */
  --im-point: 10px;
  --im-point-2: 14px;
  --im-point-3: 18px;
  --im-hit: 32px;
  --im-home: 20px;
  --im-glow-blur: 10px;
  --im-pulse-scale: 3.2;
  --im-hover-scale: 1.45;
  --im-active-ring: 3px;

  /* Drawing widths in map units (1px = one map unit inside the SVG) */
  --im-coast-w: 5px;
  --im-arc-w: 4px;
  --im-grid-w: 2px;
  --im-arc-dash: 16;
  --im-arc-gap: 84;

  /* Stars of the night theme and the radar sweep */
  --im-star: 1.6px;
  --im-sweep-size: 190%;
  --im-sweep-arc: 22%;

  /* Motion */
  --im-pulse: 2.6s;
  --im-stagger: 0.23s;
  --im-arc-flow: 3.4s;
  --im-sweep: 7s;
  --im-twinkle: 4s;
  --im-blink: 1.8s;

  /* The country panel beside the map, the country chips and the totals */
  --im-panel-w: 340px;
  --im-panel-image-h: 140px;
  --im-fact-min: 110px;
  --im-total-min: 150px;
  --im-preview-min: 260px;
}

/* p04 impact map on a phone: the world is small there, so the markers shrink with it. */
@media (max-width: 760px) {
  :root {
    --im-point: 6px;
    --im-point-2: 8px;
    --im-point-3: 11px;
    --im-hit: 26px;
    --im-home: 12px;
    --im-glow-blur: 6px;
    --im-pulse-scale: 2.6;
  }
}

/* p04 impact map — control panel: the position picker and the theme previews */
:root {
  --ba-impact-pin: 18px;
  --ba-impact-picker-max: 760px;
  --ba-impact-land-opacity: 0.45;
}

/* =====================================================================
 * p05 zakat calculator (--zk-*). Its five looks take every colour from the site theme roles
 * (--s-*) with the tint strengths already listed above (--s-tint-*); the dark side list stands on
 * the footer pair, which every site theme proves readable. Only sizes live here.
 * ===================================================================== */
:root {
  /* The deepest shade mixed into the steps header */
  --zk-shade: #000000;
  --zk-deep: 35%;

  /* Layout */
  --zk-nav-w: 250px;
  --zk-aside-w: 320px;
  --zk-field-min: 210px;
  --zk-card-min: 300px;
  --zk-result-min: 250px;
  --zk-compact-max: 760px;

  /* Parts */
  --zk-step: 34px;
  --zk-legend-icon: 44px;
  --zk-progress-h: 6px;
  --zk-unit-min: 48px;
  --zk-total-min: 220px;

  /* Motion */
  --zk-busy-opacity: 0.6;
  --zk-star-opacity: 0.8;
  --zk-frost-saturate: saturate(1.3);

  /* The showpiece looks (6–10): glass, glow, stars, aurora, pattern, tiles, journey */
  --zk-glass: 10%;
  --zk-glass-line: 22%;
  --zk-frost: 58%;
  --zk-glow-mix: 55%;
  --zk-pattern-mix: 16%;
  --zk-glass-blur: 14px;
  --zk-glow: 22px;
  --zk-glow-wide: 48px;
  --zk-star: 1.4px;
  --zk-pattern: 44px;
  --zk-arch: 40px;
  --zk-orb: 46px;
  --zk-tile-min: 110px;
  --zk-tile-min-phone: 96px;
  --zk-tile-h: 112px;
  --zk-ring: 84px;
  --zk-ring-w: 9px;
  --zk-perforation: 7px;
  /* Soft edges: a star dot, the ticket perforation and the ring mask fade over this much. */
  --zk-star-edge: 0.6px;
  --zk-mask-edge: 0.5px;
  --zk-ring-edge: 1px;
  /* Star tiles of prime-ish sizes, so the layered field never repeats visibly. */
  --zk-star-tile-1: 97px 89px;
  --zk-star-tile-2: 131px 113px;
  --zk-star-tile-3: 211px 197px;
  --zk-star-tile-4: 173px 157px;
  --zk-star-tile-5: 263px 241px;
  /* Optical alignment of an icon with the first line of its text. */
  --zk-icon-nudge-sm: 0.2em;
  --zk-icon-nudge: 0.3em;
  --zk-receipt-w: 760px;
  --zk-aurora-blur: 40px;
  --zk-surface-pad: 28px;
  --zk-twinkle: 5s;
  --zk-aurora: 16s;
  --zk-shimmer: 4.5s;
  --zk-lift: -3px;
}

/* p05 zakat calculator — control panel: the theme previews and the current prices */
:root {
  --ba-zakat-preview-min: 360px;
  --ba-zakat-preview-max-h: 560px;
  --ba-zakat-price-min: 240px;
}