/*
 * E-Sadaqah donor site — full-screen application shell.
 *
 * Hand-written CSS, no build step. This Django project has no Node toolchain
 * and adding one to ship a donation form would be cost without benefit — the
 * Zakat al-Fitr page in particular must stay statically cacheable and
 * dependency-light, because it carries the heaviest load of the year
 * (architecture §5.7).
 *
 * Layout: the document is exactly one viewport. A collapsible sidebar sits on
 * the left and the workspace fills the rest; only the workspace canvas scrolls,
 * never the page. Inside it, a 12-column board of cards, each holding one
 * logical group.
 *
 * Accessibility is specification §6, WCAG 2.1 AA: visible focus, 44px targets,
 * no meaning carried by colour alone, and a large-text mode for elderly donors.
 * The palette tokens below are read by apps/core/tests/test_contrast.py — keep
 * them as six-digit hex in the first :root block.
 */

/* --------------------------------------------------------------- palette

   Emerald, deep forest and muted gold on warm ivory. Emerald carries the
   primary actions, deep forest the strong grounds, ivory the warmth, and gold
   is used the way it is used in a manuscript — for the ornament and the accent
   rule, never for a large field or for text that has to be read.

   These tokens are read by apps/core/tests/test_contrast.py, which fails the
   build if any pair drops below WCAG 2.1 AA. Keep them six-digit hex and keep
   them in this first :root block.

   Two values differ from the brand sheet, and both differences are contrast:

   --muted is #646B74 rather than #6B7280. The specified grey is AA on white
   (4.83) but only 4.32 on the ivory ground this design actually uses, which is
   a fail. Darkening it by roughly five percent holds 4.8 or better on every
   surface here, at no visible cost to the colour.

   --gold-deep is #806018, not the brand's #C6A45C. Muted gold on white is
   2.37:1 — it cannot carry text at any size. The brand gold survives as --gold
   for ornament, which is decorative and exempt; wherever gold has to be *read*,
   --gold-deep is the token.
   --------------------------------------------------------------------- */

:root {
  --green: #087F5B;           /* primary emerald — actions, links, headings */
  --green-dark: #06694B;      /* pressed and hover states */
  --green-deep: #064E3B;      /* deep forest — strong grounds, hero, footer */
  --green-light: #E4F0EA;     /* progress track, soft emerald fills */
  --green-bright: #2FA275;    /* the light end of the slider gradient */

  --gold: #C6A45C;            /* muted gold — ornament only, never text */
  --gold-deep: #806018;       /* gold that has to carry text at AA */
  --accent: #C6A45C;
  --accent-soft: #FBF1D8;

  --ink: #1F2937;             /* primary text */
  --muted: #646B74;           /* secondary text */
  --line: #E7E5DF;            /* subtle borders */
  --line-strong: #D8D2C4;
  --tint: #FAF8F2;            /* warm ivory — the parchment inset surface */
  --canvas: #FAF8F2;          /* warm ivory — the page ground behind the cards */
  --soft: #F2F7F5;            /* faint emerald wash for inset fields */
  --track: #E7E5DF;           /* slider track */
  --white: #ffffff;
  --danger: #B91C1C;
  --warn: #8A5300;
  --success: #15803D;
}

:root {
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --tap: 2.75rem;             /* 44px — the minimum comfortable target */
  --gap: 1.5rem;              /* "comfortable" board spacing */
  --pad: 1.5rem;              /* card padding */
  --sidebar: 16.5rem;
  --rail: 4.75rem;
  --topbar: 4rem;

  --shadow: 0 4px 20px rgba(20, 33, 28, .05);
  --shadow-hover: 0 12px 32px rgba(20, 33, 28, .10);
  --shadow-sm: 0 1px 3px rgba(20, 33, 28, .06);
  --ease: .2s ease-in-out;
  --scale: 1;

  /* Inter for text and every figure, Plus Jakarta Sans for display. Both are
     self-hosted variable subsets — no page on this site contacts a third party
     to render. Amiri is kept for the brand and the Arabic names, where a naskh
     face is the point.

     Inter is named as Jakarta's first fallback deliberately: Jakarta has no
     Hausa ɓ ɗ ƙ, so without this a Hausa heading falls back mid-word to
     whatever the operating system offers. See static/fonts/README.md. */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-naskh: "Amiri", "Iowan Old Style", Georgia, serif;

  /* Aliases kept so the receipt templates keep working. */
  --navy: var(--green);
  --navy-dark: var(--green-dark);
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.80fa4841ba8a.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/jakarta-var.6ec8bbebaf29.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-Regular.256cb938ac4f.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-Bold.c2de9a79a808.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

html.large-text { --scale: 1.22; }

/* ================================================================ base */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: calc(100% * var(--scale));
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-feature-settings: "cv11", "ss01";
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The back office is one viewport: the canvas scrolls inside it, the page never
   does. That is right for an instrument a member of staff works in all day, and
   wrong for a public portal, where a visitor expects the page itself to scroll,
   the browser chrome to collapse on a phone, and deep links to anchor. Public
   pages therefore use body.site and portal.css, and scroll normally. */
body.bo {
  height: 100vh; height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

/* Keyboard users must be able to see where they are. Never outline: none. */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

a { color: var(--green); text-underline-offset: .18em; }
a:hover { color: var(--green-dark); }

h1, h2, h3, legend { font-family: var(--font-display); color: var(--ink); }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 .4rem; }
h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin: 0 0 .75rem; }
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; }
p { margin: 0 0 1rem; }
.lede { color: var(--muted); margin: 0 0 1.5rem; font-size: 1.02rem; max-width: 62ch; }

.icon {
  width: 1.25rem; height: 1.25rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.skip-link {
  position: absolute; left: -9999px; top: .5rem;
  background: var(--green); color: #fff; padding: .75rem 1rem; z-index: 100;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: .5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================================================================ shell */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  height: 100%;
  transition: grid-template-columns var(--ease);
}
html.sidebar-collapsed .shell { grid-template-columns: var(--rail) minmax(0, 1fr); }

/* ---- sidebar ---------------------------------------------------------- */

.sidebar {
  display: flex; flex-direction: column; gap: .35rem;
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 1.1rem .85rem;
  background-color: var(--green-deep);
  background-image: url("../img/khatim-light.d0eb7d5ed4f4.svg"),
    linear-gradient(180deg, var(--green-dark) 0%, var(--green-deep) 100%);
  background-size: 96px 96px, auto;
  color: rgba(255, 255, 255, .86);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}

.sidebar-head { display: flex; align-items: center; gap: .5rem; padding: .1rem .35rem .9rem; }
.brand {
  display: flex; align-items: center; gap: .7rem; min-width: 0;
  color: #fff; text-decoration: none;
}
.brand:hover { color: #fff; }
.brand-mark {
  width: 2.25rem; height: 2.25rem; flex: none;
  fill: none; stroke: var(--gold); stroke-width: 1.4;
  transition: transform .6s ease-in-out;
}
.brand:hover .brand-mark { transform: rotate(45deg); }
.brand-text {
  font-family: var(--font-naskh); font-weight: 700; font-size: 1.4rem;
  line-height: 1.05; white-space: nowrap;
}
.brand-text small {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: .7rem; letter-spacing: .02em; color: rgba(255,255,255,.62);
  margin-top: .15rem;
}

.nav { display: flex; flex-direction: column; gap: .15rem; }
.nav-group {
  margin: 1rem 0 .3rem; padding: 0 .9rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255, 255, 255, .45); white-space: nowrap;
}

.nav-link {
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  min-height: var(--tap); padding: 0 .9rem;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, .82); text-decoration: none;
  font-weight: 500; font-size: .94rem; white-space: nowrap;
  transition: background-color var(--ease), color var(--ease), transform var(--ease);
}
.nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-link:active { transform: scale(.98); }
.nav-link:focus-visible { outline-color: var(--gold); }
.nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, .13); color: #fff; font-weight: 650;
}
/* Not colour alone: the current page also carries a brass bar. */
.nav-link[aria-current="page"]::before {
  content: ""; position: absolute; left: -.85rem; top: .6rem; bottom: .6rem;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--gold);
}
.nav-button { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.nav-button[aria-pressed="true"] { background: rgba(255,255,255,.13); color: #fff; }
.nav-button[aria-pressed="true"]::after {
  content: "On"; margin-left: auto; font-size: .7rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 999px; background: var(--gold); color: var(--green-deep);
}

.sidebar-foot {
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-direction: column; gap: .15rem;
}
.sidebar-collapse { display: none; }
html.js .sidebar-collapse { display: flex; }
.sidebar-collapse .icon { transition: transform var(--ease); }
.sidebar .sidebar-close { display: none; }
/* Out of the shell grid at every size; only shown as a backdrop on a phone. */
.scrim { display: none; }

/* ---- collapsed rail (desktop) ----------------------------------------- */

.nav-label, .brand-text, .nav-group { transition: opacity .15s ease-in-out; }
html.sidebar-collapsed .sidebar { padding-left: .7rem; padding-right: .7rem; }
html.sidebar-collapsed .nav-label,
html.sidebar-collapsed .brand-text,
html.sidebar-collapsed .nav-button[aria-pressed="true"]::after {
  opacity: 0; width: 0; overflow: hidden; pointer-events: none;
}
html.sidebar-collapsed .nav-group { opacity: 0; height: .5rem; margin: .5rem 0; overflow: hidden; }
html.sidebar-collapsed .nav-link,
html.sidebar-collapsed .sidebar-head { justify-content: center; padding-left: 0; padding-right: 0; }
html.sidebar-collapsed .nav-link[aria-current="page"]::before { left: -.7rem; }
html.sidebar-collapsed .sidebar-collapse .icon { transform: scaleX(-1); }

/* ---- workspace -------------------------------------------------------- */

.workspace {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%;
}

.topbar {
  flex: none; display: flex; align-items: center; gap: 1rem;
  height: var(--topbar); padding: 0 var(--gap);
  background: rgba(243, 245, 242, .85);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(20, 33, 28, .06);
  z-index: 5;
}
.topbar-brand { display: none; font-family: var(--font-naskh); font-weight: 700; font-size: 1.25rem; color: var(--green); }
.topbar-trail { margin: 0; color: var(--muted); font-size: .9rem; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-trail a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.topbar-trail a:hover { color: var(--green); }
.topbar-trail .icon { width: 1rem; height: 1rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: none;
  border-radius: var(--radius-md); border: 0; background: transparent;
  color: inherit; cursor: pointer; text-decoration: none;
  transition: background-color var(--ease);
}
.icon-btn:hover { background: rgba(20, 33, 28, .06); }
.menu-btn { display: none; color: var(--ink); }

/* The scrolling region. Only this scrolls. Positioned so that absolutely
   placed descendants (visually-hidden headings) are clipped by it rather than
   stretching the document past the viewport. */
.canvas {
  position: relative;
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: var(--gap);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.canvas:focus { outline: none; }

/* ================================================================ board */

.board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
  max-width: 96rem;
  margin: 0 auto;
}
.board > * { grid-column: span 12; min-width: 0; }
.span-3 { grid-column: span 3 !important; }
.span-4 { grid-column: span 4 !important; }
.span-5 { grid-column: span 5 !important; }
.span-6 { grid-column: span 6 !important; }
.span-7 { grid-column: span 7 !important; }
.span-8 { grid-column: span 8 !important; }
.span-12 { grid-column: span 12 !important; }
.stretch { align-self: stretch; }

/* Inner grids for groups of tiles inside one card or across the board. */
.tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ================================================================ cards */

.card, .campaign-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow);
  border: 1px solid transparent;   /* shows in forced-colours mode */
  transition: transform var(--ease), box-shadow var(--ease);
}
.card:hover { box-shadow: var(--shadow-hover); }
/* Cards that are themselves a destination lift as well. */
.card-link:hover, .campaign-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* A sticky companion card: stays in view beside a long form. */
.sticky { position: sticky; top: 0; }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-head h2 { margin: 0; }
.card-head p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gold-deep); margin: 0 0 .5rem;
}
.eyebrow .icon { width: 1rem; height: 1rem; }

.crumb { margin: 0 0 .75rem; font-size: .875rem; }
.crumb a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; font-weight: 600; }
.crumb a::before { content: "←"; transition: transform var(--ease); }
.crumb a:hover::before { transform: translateX(-3px); }

/* ---- welcome card (was the hero) -------------------------------------- */


/* ---- stat tiles -------------------------------------------------------- */

.stat { display: flex; flex-direction: column; gap: .2rem; }
.stat-label { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-sub { font-size: .85rem; color: var(--muted); }
.stat-icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-light); color: var(--green); margin-bottom: .75rem;
}
.stat-icon .icon { width: 1.35rem; height: 1.35rem; }

/* ================================================================ notices */

.notice {
  padding: 1rem 1.15rem; border-radius: var(--radius-md);
  background: var(--green-light); margin: 0 0 1.25rem; font-size: .95rem;
  border-left: 4px solid var(--green);
}
.notice.warn   { background: #FFF6E6; border-left-color: #C27A00; }
.notice.danger { background: #FDEFEE; border-left-color: var(--danger); }
.notice strong { display: block; margin-bottom: .15rem; }
.notice p:last-child { margin-bottom: 0; }
.card > .notice:last-child { margin-bottom: 0; }

/* ================================================================ forms */

fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; min-width: 0; }
legend { font-weight: 700; font-size: 1rem; padding: 0; margin-bottom: .5rem; }
label { display: block; font-weight: 600; margin-bottom: .35rem; }
.hint { font-weight: 400; color: var(--muted); font-size: .875rem; display: block; margin-bottom: .6rem; }

input[type="number"], input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%; padding: .75rem .95rem; font: inherit; color: inherit;
  border: 1.5px solid transparent; border-radius: var(--radius-md);
  background: var(--soft); min-height: var(--tap);
  transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease);
}
input:hover, textarea:hover { background: #EEF2EF; }
input:focus-visible, textarea:focus-visible {
  outline: none; background: #fff; border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(15, 110, 79, .14);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); background: #FFF8F7; }
textarea { resize: vertical; }

.errors { color: var(--danger); font-size: .9rem; margin: .45rem 0 0; padding-left: 1.1rem; }

/* Radio and checkbox rows: soft tiles, no hard borders. */
.choice {
  display: flex; gap: .8rem; align-items: flex-start; font-weight: 400;
  padding: .85rem 1rem; border-radius: var(--radius-md);
  margin-bottom: .5rem; background: var(--soft); cursor: pointer; min-height: var(--tap);
  border: 1.5px solid transparent;
  transition: background-color var(--ease), border-color var(--ease), transform var(--ease);
}
.choice:hover { background: #EEF2EF; }
.choice:active { transform: scale(.995); }
.choice input { margin-top: .2rem; width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--green); }
.choice:has(input:checked) { background: var(--green-light); border-color: var(--green); }
.choice:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
.choice em { display: block; font-style: normal; font-size: .85rem; color: var(--muted); margin-top: .1rem; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.choice-grid .choice { margin: 0; }

/* Preset counts. Radio inputs styled as chips, so keyboard and screen reader
   behaviour stays native. */
.presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.preset { margin: 0; }
.preset input { position: absolute; opacity: 0; width: 0; height: 0; }
.preset span {
  display: flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); padding: 0 1.1rem;
  border-radius: 999px; background: var(--soft); border: 1.5px solid transparent;
  font-weight: 650; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.preset span:hover { background: #E8EEEA; transform: translateY(-1px); }
.preset input:checked + span {
  /* Not colour alone: the checked state also gains a mark. */
  background: var(--green); color: #fff; box-shadow: 0 4px 12px rgba(15,110,79,.25);
}
.preset input:checked + span::before { content: "✓\00a0"; }
.preset input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }

/* ---- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .75rem 1.5rem; font: inherit; font-weight: 700;
  border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none;
  transition: background-color var(--ease), transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.btn .icon { width: 1.1rem; height: 1.1rem; transition: transform var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-primary {
  background: var(--green); color: #fff; width: 100%; font-size: 1.05rem; min-height: 3.25rem;
  box-shadow: 0 6px 18px rgba(15, 110, 79, .25);
}
.btn-primary:hover { background: var(--green-dark); color: #fff; box-shadow: 0 10px 26px rgba(15, 110, 79, .32); transform: translateY(-1px); }
.btn-primary[disabled] { background: var(--muted); cursor: not-allowed; box-shadow: none; }
.btn-quiet { background: var(--soft); color: var(--green); font-size: .9rem; padding: .5rem 1.1rem; }
.btn-quiet:hover { background: var(--green-light); }
.btn-on-dark { background: #fff; color: var(--green-dark); padding: .85rem 1.6rem; }
.btn-on-dark:hover { background: var(--accent-soft); color: var(--green-dark); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); padding: .85rem 1.6rem; }
.btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }

/* ================================================================ sliders

   The number input stays the field that is submitted — precise, typeable and
   working with JavaScript blocked. site.js adds a range slider beside it and,
   once it has, the input is restyled as the value badge (`.has-slider`).
   ===================================================================== */

.slider-field { margin-bottom: 1.4rem; }
.slider-field .slider-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.slider-field .slider-top label { margin: 0; }

.slider-top > input, .slider-top > .field-input { flex: 1 1 100%; }
.has-slider .slider-top input,
.has-slider .slider-top .field-input {
  width: auto; flex: none;
}
html.js .has-slider .slider-top input {
  width: 9.5rem; min-height: 2.5rem; padding: .4rem .85rem;
  text-align: right; font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  border-radius: 999px; background: var(--green-light); color: var(--green-dark);
}
html.js .has-slider .slider-top input:focus-visible { background: #fff; }
/* Once enhanced, label and badge share one row; a long label wraps in place. */
html.js .has-slider .slider-top { flex-wrap: nowrap; }
html.js .has-slider .slider-top label { flex: 1 1 auto; min-width: 0; }
html.js .tiles .has-slider .slider-top input { width: 8rem; }
html.js .has-slider .slider-top input.is-count { width: 6rem; -moz-appearance: textfield; appearance: textfield; }
html.js .has-slider input.is-count::-webkit-inner-spin-button,
html.js .has-slider input.is-count::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.impact { margin: -.25rem 0 1.5rem; }
.impact .meter { margin-bottom: .4rem; }

.slider { position: relative; padding: 1.1rem 0 0; }
.slider[hidden] { display: none; }
.slider-scale {
  display: flex; justify-content: space-between; margin-top: .1rem;
  font-size: .75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
}

.range {
  --p: 0%;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 2rem; margin: 0;
  background: transparent; cursor: pointer;
  touch-action: pan-y;
}
.range, .range:hover, .range:focus-visible { background: transparent; border: 0; box-shadow: none; }
.range:focus { outline: none; }

/* Track: a thin neutral line, filled with the gradient up to the thumb. */
.range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background:
    linear-gradient(90deg, var(--green-deep), var(--green) 55%, var(--green-bright)) 0 0 / var(--p) 100% no-repeat,
    var(--track);
}
.range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--track); }
.range::-moz-range-progress {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--green-deep), var(--green) 55%, var(--green-bright));
}

/* Thumb: a large, tactile circular target — 26px, inside a 32px hit area. */
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: #fff; border: 3px solid var(--green);
  box-shadow: 0 2px 8px rgba(20, 33, 28, .22), 0 0 0 0 rgba(15, 110, 79, .18);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--green);
  box-shadow: 0 2px 8px rgba(20, 33, 28, .22), 0 0 0 0 rgba(15, 110, 79, .18);
  transition: transform var(--ease), box-shadow var(--ease);
}
.range:hover::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(20,33,28,.22), 0 0 0 8px rgba(15,110,79,.10); }
.range:hover::-moz-range-thumb { box-shadow: 0 2px 8px rgba(20,33,28,.22), 0 0 0 8px rgba(15,110,79,.10); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); border-color: var(--green-dark); box-shadow: 0 4px 12px rgba(20,33,28,.25), 0 0 0 12px rgba(15,110,79,.14); }
.range:active::-moz-range-thumb { transform: scale(1.15); box-shadow: 0 4px 12px rgba(20,33,28,.25), 0 0 0 12px rgba(15,110,79,.14); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--green); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--green); }

/* The value bubble that rides above the thumb while it is being dragged. */
.slider-bubble {
  position: absolute; top: -.85rem; left: var(--p, 0%);
  transform: translate(-50%, 4px) scale(.85); opacity: 0;
  padding: .25rem .6rem; border-radius: 8px;
  background: var(--ink); color: #fff;
  font-size: .8rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
}
.slider-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px;
  border: 4px solid transparent; border-bottom: 0; border-top-color: var(--ink);
}
.slider.is-active .slider-bubble { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* A figure that just changed because a control moved. */
@keyframes tick { 0% { transform: scale(1); } 40% { transform: scale(1.04); color: var(--green); } 100% { transform: scale(1); } }
.is-ticking { animation: tick .3s ease-in-out; display: inline-block; }

/* ================================================================ totals */

.total {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 0 1.75rem; padding: 1.25rem 1.4rem;
  border-radius: var(--radius-md); color: #fff;
  background-color: var(--green-dark);
  background-image: url("../img/khatim-light.d0eb7d5ed4f4.svg"),
    linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  background-size: 96px 96px, auto;
  box-shadow: 0 10px 28px rgba(6, 55, 42, .22);
}
.total .label { font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.88); }
.total .amount { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.total .working { display: block; font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.78); }

/* In a narrow companion card the figure goes under its label. */
.sticky .total { flex-direction: column; align-items: flex-start; gap: .35rem; }

/* Summary rows: whitespace and a faint zebra, never ruled lines. */
.summary { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 1rem; }
.summary th, .summary td { text-align: left; padding: .65rem .8rem; font-size: .95rem; vertical-align: top; }
.summary thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.summary tbody tr:nth-child(odd) th, .summary tbody tr:nth-child(odd) td,
.summary > tr:nth-child(odd) th, .summary > tr:nth-child(odd) td { background: var(--soft); }
.summary tr th:first-child, .summary tr td:first-child { border-radius: 10px 0 0 10px; }
.summary tr th:last-child, .summary tr td:last-child { border-radius: 0 10px 10px 0; }
.summary td:last-child, .summary th:last-child { text-align: right; }
.summary th[scope="row"] { color: var(--muted); font-weight: 600; }

/* Live summary list in a companion card. */
.facts { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .35rem; }
.facts li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .65rem .85rem; border-radius: 10px; background: var(--soft); font-size: .92rem;
}
.facts li > span:first-child { color: var(--muted); flex: none; }
.facts li > strong, .facts li > span:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.facts .big { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--green-dark); }
.meter { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; margin: .25rem 0 1rem; }
.meter > span {
  display: block; height: 100%; width: var(--p, 0%); border-radius: inherit;
  background: linear-gradient(90deg, var(--green-deep), var(--green) 55%, var(--green-bright));
  transition: width .3s ease-in-out;
}

/* ================================================================ countdown */

.countdown { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 700; color: var(--warn); margin: 0 0 1rem; }
.countdown.urgent { color: var(--danger); }
.countdown .dot { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ================================================================ home tiles */

.give-card a {
  display: flex; flex-direction: column; gap: .45rem; height: 100%;
  padding: 1.15rem 1.2rem; text-decoration: none; color: inherit;
  background: var(--soft); border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease), border-color var(--ease);
}
.give-card a:hover { background: #fff; transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--green-light); color: inherit; }
.give-card .names { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.give-card strong { color: var(--ink); font-size: 1.02rem; font-weight: 750; }
.give-card span { color: var(--muted); font-size: .87rem; line-height: 1.5; }
.give-card .go { margin-top: auto; padding-top: .35rem; color: var(--green); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: .3rem; }
.give-card .go .icon { width: 1rem; height: 1rem; transition: transform var(--ease); }
.give-card a:hover .go .icon { transform: translateX(4px); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.step { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: start; }
.step .num {
  grid-row: span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: var(--green); color: #fff; font-weight: 800;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}
.step h3 { margin: .3rem 0 0; }
.step p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ================================================================ funnel */

.fund-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.fund-option a {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
  border-radius: var(--radius-md); background: var(--soft); min-height: var(--tap);
  border: 1.5px solid transparent;
  transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease), border-color var(--ease);
}
.fund-option a:hover { background: #fff; transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--green-light); color: inherit; }
.fund-option strong { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; color: var(--ink); font-size: 1.05rem; font-weight: 750; }
.fund-option .blurb { display: block; color: var(--muted); font-size: .9rem; margin-top: .25rem; }
.fund-option .tag {
  align-self: flex-start; margin-top: auto; padding: .15rem .6rem; transform: translateY(.5rem);
  background: var(--accent-soft); color: var(--gold-deep);
  border-radius: 999px; font-size: .75rem; font-weight: 700;
}
.fund-option .ar { font-size: 1.15em; }

/* ================================================================ campaigns */

.campaign-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.campaign-card .thumb {
  aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: center; justify-content: center;
  margin: .6rem .6rem 0; border-radius: 46% 46% var(--radius-md) var(--radius-md) / 22% 22% var(--radius-md) var(--radius-md);
  background-color: var(--green-light);
  background-image: url("../img/khatim-gold.04688deecb42.svg"); background-size: 96px 96px;
}
.campaign-card .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .4s ease-in-out; }
.campaign-card:hover .thumb img { transform: scale(1.04); }
.campaign-card .thumb .placeholder { color: var(--green); font-size: 2rem; opacity: .35; }
.campaign-card .body { padding: 1.15rem 1.35rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.campaign-card h2 { font-size: 1.1rem; margin: 0 0 .35rem; }
.campaign-card h2 a { color: var(--ink); text-decoration: none; }
.campaign-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.campaign-card h2 a:hover { color: var(--green); }
.campaign-card .summary { margin: 0 0 .75rem; color: var(--muted); font-size: .93rem; }
.funds-accepted { font-size: .82rem; color: var(--muted); margin: auto 0 0; padding-top: .6rem; }

/* Progress. The bar is decoration; the figures beside it carry the meaning.
   Green, not gold: gold on a pale track tops out near 2.4:1, below the 3:1
   WCAG 1.4.11 wants for an informative graphic. */
.progress { margin: .9rem 0; }
.progress-track { height: .55rem; background: var(--green-light); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--green); border-radius: 999px; }
.progress-figures { margin: .5rem 0 0; font-size: .93rem; font-variant-numeric: tabular-nums; }
.progress-figures strong { color: var(--green); }
.progress-figures .percent { color: var(--muted); }
.progress-figures .badge {
  display: inline-block; margin-left: .4rem; padding: .1rem .55rem;
  background: var(--green-light); color: var(--green); border-radius: 999px;
  font-size: .76rem; font-weight: 700;
}

.campaign-image { width: 100%; height: auto; border-radius: var(--radius-md); margin: 1rem 0; }
.story { line-height: 1.7; }
.report { padding: 1rem; border-radius: var(--radius-md); background: var(--soft); margin-top: .75rem; }
.report h3 { margin: 0 0 .2rem; }
.report .meta { margin: 0 0 .6rem; font-size: .82rem; color: var(--muted); }

/* ================================================================ calculator */

.field-row { margin-bottom: 1rem; }
.field-row label { margin-bottom: .3rem; }
.field-input { display: flex; align-items: stretch; gap: .5rem; }
.field-input input { flex: 1; min-width: 0; }
.field-input .unit {
  display: flex; align-items: center; padding: 0 .8rem; font-weight: 700;
  color: var(--muted); background: var(--soft); border-radius: var(--radius-md); white-space: nowrap;
}
html.js .has-slider .field-input .unit { background: transparent; padding: 0 .1rem; }
html.js .has-slider .field-input input { flex: none; }

.result {
  margin: 1.5rem 0 0; padding: 1.4rem;
  background: var(--tint); border-radius: var(--radius-md);
  border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: 3px;
}
.result h2 { margin-top: 0; }
.result .reason { display: block; font-size: .8rem; color: var(--muted); }
.result .excluded td { color: var(--muted); }
.result .explanation { margin: .9rem 0 0; font-size: .92rem; }
.result .summary tbody tr:nth-child(odd) td { background: rgba(255,255,255,.7); }

.totals-table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-variant-numeric: tabular-nums; }
.totals-table th, .totals-table td { text-align: left; padding: .6rem .3rem; }
.totals-table td { text-align: right; }
.totals-table tr.grand th, .totals-table tr.grand td {
  font-size: 1.3rem; font-weight: 800; color: var(--green-dark); padding-top: .9rem;
  border-top: 2px solid var(--green);
}

/* ================================================================ Arabic, ornament */

/* The Arabic name of an obligation, beside its English name. Supplementary:
   nothing here is the only carrier of its meaning. */
.ar { font-family: var(--font-naskh); direction: rtl; font-size: 1.45em; line-height: 1; color: var(--gold-deep); font-weight: 400; }

.ornament { display: flex; align-items: center; gap: 1rem; color: var(--gold); }
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.ornament::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.ornament svg { flex: none; display: block; }
.ornament svg path { stroke: var(--gold); }

/* ================================================================ responsive */

@media (max-width: 80rem) {
  .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet: the sidebar becomes the rail by default. */
@media (max-width: 64rem) {
  :root { --gap: 1.15rem; --pad: 1.3rem; }
  .shell, html.sidebar-collapsed .shell { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .sidebar { padding-left: .7rem; padding-right: .7rem; }
  .nav-label, .brand-text { opacity: 0; width: 0; overflow: hidden; }
  .nav-button[aria-pressed="true"]::after { display: none; }
  .nav-group { opacity: 0; height: .5rem; margin: .5rem 0; overflow: hidden; }
  .nav-link { justify-content: center; padding: 0; gap: 0; }
  .sidebar-head { justify-content: center; padding-left: 0; padding-right: 0; }
  .nav-link[aria-current="page"]::before { left: -.7rem; }
  html.js .sidebar-collapse { display: none; }

  .span-3, .span-4, .span-5, .span-7, .span-8 { grid-column: span 12 !important; }
  .span-6 { grid-column: span 6 !important; }
  .sticky { position: static; }
  .tiles-3 { grid-template-columns: 1fr; }
  .topbar-trail { margin-right: auto; }
}

/* Phone: the sidebar leaves the layout and opens as a drawer. */
@media (max-width: 40rem) {
  :root { --gap: 1rem; --pad: 1.15rem; --topbar: 3.5rem; }
  .shell, html.sidebar-collapsed .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 30;
    width: min(18rem, 86vw); padding: 1rem .85rem;
    transform: translateX(-102%);
    transition: transform .25s ease-in-out, box-shadow .25s ease-in-out;
  }
  .sidebar:target, html.nav-open .sidebar { transform: none; box-shadow: 12px 0 40px rgba(0,0,0,.3); }
  .nav-label, .brand-text { opacity: 1; width: auto; }
  .nav-group { opacity: 1; height: auto; margin: 1rem 0 .3rem; }
  .nav-link { justify-content: flex-start; padding: 0 .9rem; gap: .85rem; }
  .sidebar-head { justify-content: space-between; padding: .1rem .35rem .9rem; }
  .nav-link[aria-current="page"]::before { left: -.85rem; }
  .sidebar .sidebar-close { display: inline-flex; color: #fff; }
  .sidebar .sidebar-close:hover { background: rgba(255,255,255,.1); }
  .scrim {
    display: block; position: fixed; inset: 0; z-index: 25; background: rgba(6, 25, 18, .45);
    opacity: 0; pointer-events: none; transition: opacity .25s ease-in-out;
  }
  .sidebar:target ~ .scrim, html.nav-open .scrim { opacity: 1; pointer-events: auto; }

  .menu-btn { display: inline-flex; margin-left: -.5rem; }
  .topbar { gap: .5rem; padding: 0 var(--gap); }
  .topbar-brand { display: block; }
  .topbar-trail { display: none; }

  .span-6 { grid-column: span 12 !important; }
  .tiles-2, .tiles-4 { grid-template-columns: 1fr; }
  h1 { font-size: 1.45rem; }
  .total .amount { font-size: 1.6rem; }
  html.js .has-slider .slider-top input { width: 8rem; }
}

/* ================================================================ preferences */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .card-link:hover, .campaign-card:hover, .give-card a:hover, .fund-option a:hover { transform: none; }
}

/* The pattern is a texture, not information. */
@media (prefers-contrast: more) {
  .total, .sidebar, .campaign-card .thumb { background-image: none; }
  .card, .campaign-card { border-color: var(--line-strong); }
}

/* Paper is not a viewport: give the document back its normal flow. */
@media print {
  body.app, body.bo { height: auto; width: auto; overflow: visible; background: #fff; }
  .shell { display: block; }
  .sidebar, .topbar, .scrim, .slider { display: none !important; }
  .canvas { overflow: visible; padding: 0; }
  .board { display: block; }
  .card, .campaign-card { box-shadow: none; border: 1px solid #ccc; margin-bottom: 1rem; break-inside: avoid; }
  .total { background-image: none; }
}