/* ==========================================================================
   THE RED ROAD — css/base.css (loaded by every page: public, portal, admin)
   The murram road of Iten/Eldoret threads each narrative page from a painted
   start line to a finish line that is always the donation.

   ROUTE-LINE DISCIPLINE RULES (enforced, not advisory):
   1. The route rail appears only on pages with 3+ narrative sections.
   2. Never on the donate form itself, contact, or utility pages.
   3. Rail-only: the line never crosses a photograph or a text column.
   4. At most one line per viewport.
   5. Posts carry real ordinals and labels only — never invented distances.
   6. Each segment animates once, ever. No-JS and reduced-motion users get
      the road fully drawn (the covered state is only ever added by JS).

   RAIL-CONTINUITY CONTRACT:
   - All vertical rhythm inside .rr-route comes from PADDING. Any margin on
     .rr-seg or its rail children breaks the road at the seam. margin: 0.
   - Every road segment SVG enters and exits at x=32 of a 64-unit viewBox,
     so segments join seamlessly at 50% rail width at every breakpoint.

   TWO-REGISTER LAW: on hospital / health-village / cancer / burns content
   (body.rr-clinical) race semantics drop — plain numbered markers, no
   splits styling, display slab restricted to the page H1.

   MARIGOLD LAW: --marigold appears ONLY on donate actions. Nowhere else.

   SCOPE OF THIS FILE: base.css owns what every register shares — the tokens,
   the two fonts, the reset, the accessibility plumbing, the type voices and
   the component kit (buttons, forms, chips, tables, pagination, empty state,
   alerts, modal, KPI tiles, plate, avatar, progress). Never a page-specific
   rule: those live in site.css (public + portal), portal.css and admin.css.
   --marigold appears here only in the :root declaration and the .btn-donate
   rules; the design-laws test enforces it.
   ========================================================================== */

/* ---- fonts (latin subsets). /fonts/* is cached immutable for a year, so a
   font file is never overwritten: a re-subset ships under a new filename. */
/* Alfa Slab One 400 latin */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/alfa-slab-one-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo variable [wght 100-900, wdth 62-125] latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-100_900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens: the 17 Red Road tokens verbatim, then the additions for the
   shared kit — the only new tokens in the system. site.css keeps its literals.
   The @media (max-width: 767px) override of --rail-w/--rail-gap lives in
   site.css §31 with the rest of the responsive rules. */
:root {
  --murram: #9B3D20;
  --ink: #2B1D16;
  --chalk: #FAF5EE;
  --marigold: #F2A93B;
  --marigold-deep: #E0931F;
  --rift: #2F5233;
  --dusk: #3B1D12;
  --dust: #6B5546;
  --dust-on-dark: #D9C7B5;
  --hairline: rgba(43, 29, 22, 0.16);
  --hairline-dark: rgba(250, 245, 238, 0.22);
  --font-display: 'Alfa Slab One', 'Rockwell Extra Bold', Rockwell, 'Roboto Slab', serif;
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --rail-w: 64px;
  --rail-gap: 32px;
  --content-max: 1120px;
  --pad-x: 24px;
  /* — additions — */
  --paper: #FFFFFF;                        /* the white print plate behind photos, cards, inputs */
  --surface-sunken: #F3ECE2;               /* table heads, zebra rows, sidebar hover on chalk — reserved for admin.css (RR-13); no rule consumes it before then */
  --ok: var(--rift);          --ok-bg: rgba(47, 82, 51, 0.10);
  --warn: #8A5B0A;            --warn-bg: rgba(138, 91, 10, 0.10);    /* 5.3:1 on chalk — pending/paused, never marigold */
  --danger: #7C2D12;          --danger-bg: #FBEDE8;                  /* the .donate-error pair, 8.4:1 */
  --info: var(--dust);        --info-bg: rgba(107, 85, 70, 0.10);
  --radius-ctl: 6px;          --radius-chip: 3px;                    /* controls 6px, chips 3px, plates 0 */
  --content-narrow: 760px;                 /* .container-narrow: articles, documents, utility cards */
  --sidebar-w: 240px;                      /* admin sidebar (admin.css) */
}

/* ==== reset-lite =========================================================
   Merged from css/reset.css and the preview foundation. Deliberately NOT
   carried over: a{text-decoration:none;color:inherit} (body links are
   underlined murram — site.css §1), ul,ol{list-style:none} (only classed
   lists lose their bullets, so .article-body ul keeps them) and
   html{height:100dvh}. The classed-list reset is wrapped in :where() so it has
   zero specificity: a single-class rule such as site.css's .rr-benefits
   { padding-left: 20px; list-style: disc } restores bullets without needing an
   element qualifier (a bare ul[class] at (0,1,1) would beat it). */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; }

/* ==== body (unscoped: one definition for every register; admin.css may
   tighten size/leading on body.rr-admin) ==== */
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--chalk);
}

/* ==== layout primitives ==== */
.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--pad-x); }
.container-narrow { max-width: var(--content-narrow); }

/* ==== accessibility plumbing ==== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--ink); color: var(--chalk); padding: 10px 18px; font-weight: 600;
}
.skip-link:focus { left: 0; }
/* Two colours keep one global ring visible on light and dark surfaces.
   Keep it outside the box so unpadded text links remain readable. */
:focus-visible {
  --focus-ring-shadow: 0 0 0 3px var(--chalk);
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: var(--focus-ring-shadow);
}
:focus:not(:focus-visible) { outline: none; }

/* ==== type voices (unscoped: admin money columns use .rr-num too) ==== */
/* display voice: ≥32px floor, never tracked, never decorated */
.rr-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.08;
}

.rr-eyebrow {
  font-family: var(--font-sans);
  font-weight: 640;
  font-stretch: 90%;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--murram);
  display: block;
  margin-bottom: 10px;
}

/* data voice: condensed bib numerals */
.rr-num {
  font-weight: 750;
  font-stretch: 72%;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* ==== buttons ============================================================
   The Red Road .btn family, unscoped so admin gets it too, plus the kit
   variants. Variants are written as compound selectors (.btn.btn-ink): the
   base class is required in the markup ("btn btn-ink"), and the two-class
   specificity is what lifts a variant above site.css's `.rr a` colour rules,
   exactly as `.rr .btn-ink` did in the candidate stylesheet.
   Aliases keep the portal/admin markup and the "uses portal-btn classes" test
   alive: .portal-btn = .btn · .portal-btn-primary = .btn-ink ·
   .portal-btn-outline = .btn-ghost-ink (= .btn-ghost-chalk inside .rr-dusk — written with
   three classes, .rr-dusk .portal-btn.portal-btn-outline, so it outranks the two-class ink
   alias that follows it in source order) ·
   .portal-btn-small = .btn-sm · .portal-btn-large = .btn-lg ·
   .auth-btn = .btn-ink.btn-block.
   MARIGOLD LAW: .btn-donate is the only button that may use --marigold. */
.btn, .portal-btn, .auth-btn {
  display: inline-block;
  padding: 13px 28px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-ctl);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.btn.btn-donate { background: var(--marigold); color: var(--ink); }
.btn.btn-donate:hover, .btn.btn-donate:focus-visible { background: var(--marigold-deep); color: var(--ink); }
.btn.btn-donate:focus-visible { outline-color: var(--ink); }
.btn.btn-ghost-chalk, .rr-dusk .portal-btn.portal-btn-outline { border-color: var(--chalk); color: var(--chalk); background: transparent; }
.btn.btn-ghost-chalk:hover, .btn.btn-ghost-chalk:focus-visible,
.rr-dusk .portal-btn.portal-btn-outline:hover, .rr-dusk .portal-btn.portal-btn-outline:focus-visible { background: rgba(250, 245, 238, 0.16); color: var(--chalk); }
.btn.btn-ghost-ink, .portal-btn.portal-btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn.btn-ghost-ink:hover, .btn.btn-ghost-ink:focus-visible,
.portal-btn.portal-btn-outline:hover, .portal-btn.portal-btn-outline:focus-visible { background: rgba(43, 29, 22, 0.08); color: var(--ink); }
.btn.btn-ink, .portal-btn.portal-btn-primary, .auth-btn { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.btn.btn-ink:hover, .btn.btn-ink:focus-visible,
.portal-btn.portal-btn-primary:hover, .portal-btn.portal-btn-primary:focus-visible,
.auth-btn:hover, .auth-btn:focus-visible { background: var(--dusk); color: var(--chalk); }
.btn.btn-chalk { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.btn.btn-chalk:hover, .btn.btn-chalk:focus-visible { background: var(--paper); color: var(--ink); }
.btn.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.btn-danger:hover, .btn.btn-danger:focus-visible { background: var(--danger); color: var(--chalk); }
.btn-sm, .portal-btn-small { padding: 7px 14px; font-size: 0.88rem; min-height: 36px; }
.btn-lg, .portal-btn-large { padding: 16px 40px; font-size: 1.1rem; }
.btn-block, .auth-btn { display: block; width: 100%; }
.btn[disabled], .btn:disabled, .portal-btn[disabled], .portal-btn:disabled,
.auth-btn[disabled], .auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ==== form kit ===========================================================
   <form class="rr-form"> with .form-group fields. The control rules also
   reach bare .form-group markup, so the admin/portal IIFEs need no wrapper
   class. <select> keeps its native chevron: the CSP img-src has no data:
   source, so a background-image arrow would be silently blocked.
   Status regions: .rr-form-status (role=status) and .rr-form-status.is-error
   (role=alert), toggled with the hidden attribute. Aliases: .auth-error and
   .donate-error = is-error, .auth-success = success. */
.form-group, .rr-field { margin-bottom: 18px; }
.rr-form label, .form-group label, .rr-field label {
  display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: var(--ink);
}
.rr-form .required, .form-group .required { color: var(--murram); margin-left: 2px; }
.rr-form :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea),
.form-group :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
  width: 100%; padding: 11px 14px; font: inherit; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--hairline); border-radius: var(--radius-ctl);
  transition: border-color 150ms ease;
}
/* min-height belongs to single-line controls only. :is()/:not() take the specificity of their
   most specific argument, so this selector is (0,2,1); had it named textarea too it would beat
   the (0,1,1) `.rr-form textarea { min-height: 120px }` rule below and every textarea would be
   a 44px single line. */
.rr-form :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select),
.form-group :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select) { min-height: 44px; }
.rr-form :is(input, select, textarea):focus-visible,
.form-group :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--murram); outline-offset: 1px; border-color: var(--murram);
}
.rr-form :is(input, select, textarea)[aria-invalid="true"],
.form-group :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
.rr-form textarea, .form-group textarea { resize: vertical; min-height: 120px; }
.rr-form input[type="file"], .form-group input[type="file"] { padding: 8px 0; border: 0; background: none; }
.form-hint { font-size: 0.8rem; color: var(--dust); margin-top: 5px; }
.form-hint.slug-available { color: var(--ok); }
.form-hint.slug-taken { color: var(--danger); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rr-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.95rem; line-height: 1.5; cursor: pointer; margin-bottom: 14px;
}
.rr-check input { min-width: 18px; min-height: 18px; margin-top: 3px; accent-color: var(--murram); }
.rr-hp { position: absolute; left: -9999px; }
.rr-turnstile { margin-block: 14px; min-height: 65px; }
.rr-form-status, .auth-success, .auth-error, .donate-error {
  padding: 12px 16px; border-radius: var(--radius-ctl); border: 1px solid rgba(47, 82, 51, 0.35);
  font-size: 0.92rem; margin-bottom: 16px;
  background: var(--ok-bg); color: var(--ok);
}
.rr-form-status.is-error, .auth-error, .donate-error {
  background: var(--danger-bg); color: var(--danger); border-color: rgba(155, 61, 32, 0.4);
}
.rr-form-status[hidden], .auth-success[hidden], .auth-error[hidden] { display: none; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.input-with-prefix {
  display: flex; align-items: stretch; overflow: hidden;
  border: 1.5px solid var(--hairline); border-radius: var(--radius-ctl); background: var(--paper);
}
.input-with-prefix:focus-within { border-color: var(--murram); }
.input-with-prefix .input-prefix {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--chalk); color: var(--murram); font-weight: 750; font-stretch: 85%;
  border-right: 1.5px solid var(--hairline); white-space: nowrap;
}
.input-with-prefix .slug-prefix { font-weight: 500; font-stretch: 100%; color: var(--dust); font-size: 0.88rem; }
.rr-form .input-with-prefix input, .form-group .input-with-prefix input { border: 0; border-radius: 0; min-height: 42px; }
.rr-form .input-with-prefix input:focus-visible, .form-group .input-with-prefix input:focus-visible { outline: none; }
@media (max-width: 479px) {
  .form-row { grid-template-columns: 1fr; }
  .form-actions .btn, .form-actions .portal-btn { width: 100%; }
}

/* ==== status chips =======================================================
   Generalises .rr-status-chip (site.css). Colour is never the only signal:
   the text is the status word. The admin-status-* suffixes are runtime API
   values written by the admin IIFEs ("admin-status admin-status-<value>"),
   keep them exact. Pending/paused use --murram/--warn, never marigold. */
.rr-chip, .admin-status {
  display: inline-block; border: 1.5px solid currentColor; border-radius: var(--radius-chip);
  padding: 3px 10px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.3; color: var(--rift); background: transparent; vertical-align: middle; white-space: nowrap;
}
.rr-chip--ok, .admin-status-active { color: var(--ok); }
.rr-chip--accent, .admin-status-pending { color: var(--murram); }
.rr-chip--warn, .admin-status-paused { color: var(--warn); }
.rr-chip--info, .admin-status-disabled, .admin-status-declined { color: var(--dust); }
.rr-chip--danger, .admin-status-flagged, .admin-status-suspended { color: var(--danger); }
.rr-chip--filled { background: currentColor; }
.rr-chip--filled > span { color: var(--chalk); }

/* ==== tables ==== */
.rr-table, .admin-table, .donors-table {
  width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--paper);
}
.rr-table th, .admin-table th, .donors-table th {
  text-align: left; padding: 10px 12px;
  font-weight: 640; font-stretch: 90%; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dust); border-bottom: 2px solid var(--ink);
}
.rr-table td, .admin-table td, .donors-table td {
  padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.rr-table tbody tr:hover, .admin-table tbody tr:hover, .donors-table tbody tr:hover { background: var(--chalk); }
.rr-table td a, .admin-table td a, .donors-table td a { color: var(--murram); font-weight: 600; }
.rr-table td.num, .admin-table td.num, .donors-table td.num { text-align: right; font-weight: 750; font-stretch: 80%; }
.rr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .rr-table, .admin-table, .donors-table { font-size: 0.85rem; }
  .rr-table th, .rr-table td, .admin-table th, .admin-table td, .donors-table th, .donors-table td { padding: 8px 10px; }
}

/* ==== pagination (buttons inside are .btn.btn-ghost-ink.btn-sm) ==== */
.rr-pagination, .admin-pagination, .pagination, .campaigns-pagination, .error-pagination {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding-block: 18px; border-top: 1px solid var(--hairline);
}
.rr-pagination-info, .pagination-info { font-size: 0.88rem; color: var(--dust); font-variant-numeric: tabular-nums; }

/* ==== empty state ==== */
.rr-empty, .admin-empty, .empty-state, .empty-state-text, .campaigns-status {
  text-align: center; color: var(--dust); padding: 40px 20px; font-size: 1rem;
  border: 1px dashed var(--hairline); border-radius: var(--radius-ctl);
}
.rr-empty .btn, .empty-state .btn { margin-top: 16px; }

/* ==== alerts (role=status on info/ok, role=alert on danger) ==== */
.rr-alert, .admin-alert {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px; font-size: 0.92rem;
  background: var(--paper); border: 1px solid var(--hairline); border-left: 4px solid var(--info);
  border-radius: var(--radius-ctl);
}
.rr-alert a, .admin-alert a { color: var(--murram); font-weight: 600; margin-left: 4px; }
.rr-alert--info, .admin-alert-info { border-left-color: var(--info); }
.rr-alert--warning, .admin-alert-warning { border-left-color: var(--warn); }
.rr-alert--danger, .admin-alert-danger { border-left-color: var(--danger); }
.rr-alert--ok, .admin-alert-ok { border-left-color: var(--ok); }

/* ==== modal ==============================================================
   New markup opens with .open; the admin IIFEs keep toggling the inline
   style ("display:flex" / "display:none") and the attribute selectors keep
   that working. Roots should carry role=dialog aria-modal=true. */
.rr-modal, .admin-modal, .confirm-modal, .create-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(43, 29, 22, 0.6);
}
.rr-modal.open, .admin-modal.open, .confirm-modal.open, .create-modal.open,
.admin-modal[style*="display: flex"], .admin-modal[style*="display:flex"] { display: flex; }
.rr-modal-content, .admin-modal-content, .confirm-modal-content, .create-modal-content {
  width: min(480px, 100%); padding: 28px;
  background: var(--paper); border: 1px solid var(--hairline); border-top: 4px solid var(--murram);
  border-radius: var(--radius-ctl);
}
.rr-modal-content h3, .admin-modal-content h3, .confirm-modal-content h3, .create-modal-content h3 {
  font-size: 1.15rem; font-weight: 800; margin-bottom: 8px;
}
.rr-modal-content p, .admin-modal-content p, .confirm-modal-content p, .create-modal-content p {
  color: var(--dust); margin-bottom: 16px;
}
.admin-modal-textarea {
  width: 100%; min-height: 120px; padding: 11px 14px; font: inherit; color: var(--ink); resize: vertical;
  background: var(--paper); border: 1.5px solid var(--hairline); border-radius: var(--radius-ctl);
}
.admin-modal-textarea:focus-visible { outline: 2px solid var(--murram); outline-offset: 1px; border-color: var(--murram); }
.rr-modal-actions, .admin-modal-actions, .confirm-modal-actions, .create-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px;
}

/* ==== KPI tiles (the gap draws the rules, like .rr-stats-plain) ==== */
.rr-kpis, .admin-stats, .dash-stats, .report-kpis-grid, .admin-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-bottom: 24px;
}
.rr-kpi, .admin-stat-card, .dash-stat-card, .report-kpi, .admin-metric { background: var(--paper); padding: 20px 18px; }
.rr-kpi-value, .admin-stat-number, .dash-stat-number, .report-kpi-value, .admin-metric-value {
  font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.05; color: var(--murram);
  font-weight: 750; font-stretch: 72%; font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums;
}
.rr-kpi-label, .admin-stat-label, .dash-stat-label, .report-kpi-label, .admin-metric-label {
  font-size: 0.78rem; color: var(--dust); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 640; font-stretch: 90%;
}

/* ==== plate (the white print-mount behind every photo) ==== */
.rr-plate { display: block; position: relative; background: var(--paper); border: 1px solid var(--hairline); padding: 6px; }
.rr-plate > img {
  display: block; width: 100%; height: auto; object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
}
.rr-plate--3x2 > img { aspect-ratio: 3 / 2; }
.rr-plate--4x3 > img { aspect-ratio: 4 / 3; }
.rr-plate--3x4 > img { aspect-ratio: 3 / 4; }
.rr-plate--16x9 > img { aspect-ratio: 16 / 9; }
.rr-plate--1x1 > img { aspect-ratio: 1; }
.rr-plate--tab::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 18px; height: 18px; background: var(--murram); z-index: 1;
}

/* ==== avatar (initials are aria-hidden; the name sits alongside) ==== */
.rr-avatar, .donor-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--chalk);
  font-weight: 750; font-stretch: 80%; font-size: 0.9rem; letter-spacing: 0.02em;
}
.rr-avatar--anon, .donor-avatar-anon { background: var(--dust); }
.rr-avatar--lg { width: 80px; height: 80px; font-size: 1.5rem; }
.rr-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ==== progress (the bar carries role=progressbar + aria-valuenow from JS) ==== */
.rr-progress, .campaign-progress-bar { position: relative; height: 8px; background: var(--hairline); border-radius: 4px; overflow: hidden; }
.rr-progress-fill, .campaign-progress-fill { height: 100%; background: var(--murram); border-radius: 4px; transition: width 400ms ease; }
.rr-progress--lg, .campaign-progress-bar-large { height: 12px; }
.rr-progress-amounts { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }

/* ==== motion discipline floor: reduced motion wins everywhere ==== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}