/* ============================================================================
   OCHA App Kit  —  ocha-app-kit.css
   SINGLE SOURCE OF TRUTH for the look & feel of OCHA BDU web apps.

   Edit HERE, never in an app. Changes propagate to every registered app via
   app-kit/sync.py (see app-kit/README.md). This kit is the practical, app-facing
   layer of the OCHA Common Design System — values are the CDS ramp; the short
   token names are the app-building convention. It grows from real apps: if a
   component needs to change or a new one is needed, it happens in this file.

   Flat by design — no drop shadows.
   ============================================================================ */

/* @tokens-start  (sync.py can inline just this block into self-contained apps) */
:root {
  /* ==== LAYER 1 — the OCHA Common Design System ===========================
     GENERATED by sync.py from ../tokens/brand.css. DO NOT EDIT BY HAND: the
     next sync overwrites it. To change a value, change tokens/brand.css.
     It is embedded rather than @import-ed because the kit has to stay ONE
     self-contained file — sync.py copies it wholesale into apps, where a
     relative import would resolve to nothing.
     Apps get the full CDS vocabulary this way: the type scale
     (--cd-font-size--*), breakpoints (--cd-bp--*), container paddings and
     max-widths, not just colours. */
  /* @cds-start */
  /* =========================================================================
   * 1. UN Blue ramp (7 steps) — brand primary
   * Source: Colours PDF p.5
   * ========================================================================= */
  --cd-blue--darkest: #002E6E;  /* ramp 1 */
  --cd-blue--dark: #004987;     /* ramp 2 */
  --cd-blue--darker: #0074B7;   /* ramp 3 */
  --cd-ocha-blue: #009EDB;      /* ramp 4 — UN Blue Primary (PMS 2925) */
  --cd-blue--bright: #64BDEA;   /* ramp 5 */
  --cd-blue--brighter: #C5DFEF; /* ramp 6 */
  --cd-blue--lightest: #E3EDF6; /* ramp 7 */

  /* Accessible text variants — for text on white backgrounds */
  --cd-ocha-blue--aa: #0077B8;  /* WCAG AA ~4.6:1 */
  --cd-ocha-blue--aaa: #005392; /* WCAG AAA ~8.9:1 */

  /* RGB triplets for rgba() usage */
  --cd-rgb-ocha-blue: 0, 158, 219;
  --cd-rgb-red: 237, 24, 71;     /* #ED1847 — for translucent error states */


  /* =========================================================================
   * 2. Accent colours
   * Source: Colours PDF p.3
   * ========================================================================= */

  /* Red */
  --cd-red: #ED1847;
  --cd-red--light: #F9C0C5;     /* ramp step 6 */
  --cd-red--aa: #EB0045;        /* WCAG AA */
  --cd-red--aaa: #AB1D37;       /* WCAG AAA */

  /* Orange */
  --cd-orange: #F58220;
  --cd-orange--light: #FEDCBD;  /* ramp step 6 */
  --cd-orange--aa: #CF3F0B;     /* WCAG AA */

  /* Yellow */
  --cd-yellow: #FFC800;
  --cd-yellow--light: #F8E66B;  /* ramp step 6 */

  /* Green */
  --cd-green: #72BF44;
  --cd-green--light: #CEE3A0;   /* ramp step 6 */
  --cd-green--aa: #27833A;      /* WCAG AA */

  /* Purple (new in updated brand) */
  --cd-purple: #A05FB4;
  --cd-purple--light: #D5B4D6;  /* ramp step 6 */
  --cd-purple--aa: #9A58AF;     /* WCAG AA */
  --cd-purple--aaa: #733D96;    /* WCAG AAA */

  /* Highlight — remapped from legacy #e56a54 to brand Red */
  --cd-highlight-red: #ED1847;


  /* =========================================================================
   * 3. Greys — Neutral Grey ramp (7 steps)
   * Source: Colours PDF p.12
   * ========================================================================= */
  --cd-grey--900: #262626;
  --cd-grey--800: #4D4D4D;
  --cd-grey--700: #737373;
  --cd-grey--600: #999999;
  --cd-grey--500: #BFBFBF;
  --cd-grey--400: #E6E6E6;
  --cd-grey--300: #F2F2F2;

  /* Legacy aliases (pointing to ramp steps) */
  --cd-grey--dark: var(--cd-grey--800);
  --cd-grey--mid: var(--cd-grey--700);
  --cd-grey--light: var(--cd-grey--300);
  --cd-grey--aa: #7C7067;       /* WCAG AA warm grey */

  /* Warm grey accent */
  --cd-grey--warm: #AEA29A;
  --cd-grey--warm-light: #DDDAD7;

  /* Neutral grey accent */
  --cd-grey--neutral: #999999;

  --cd-white: #FFFFFF;
  --cd-black: #000000;


  /* =========================================================================
   * 4. Fonts
   * Source: Fonts PDF pp.1-9
   * ========================================================================= */

  /* Fallback */
  --cd-font: helvetica, arial, sans-serif;

  /* Primary — Roboto family */
  --cd-font--roboto: "Roboto", helvetica, arial, sans-serif;
  --cd-font--roboto-condensed: "Roboto Condensed", helvetica, arial, sans-serif;
  --cd-font--roboto-slab: "Roboto Slab", helvetica, arial, sans-serif;
  --cd-font--roboto-mono: "Roboto Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Secondary — Crimson Pro (print long-form body) */
  --cd-font--crimson-pro: "Crimson Pro", Georgia, "Times New Roman", serif;

  /* Social media */
  --cd-font--montserrat: "Montserrat", helvetica, arial, sans-serif;
  --cd-font--raleway: "Raleway", helvetica, arial, sans-serif;

  /* Multilingual */
  --cd-font--noto-sans: "Noto Sans", sans-serif;
  --cd-font--noto-kufi-arabic: "Noto Kufi Arabic", sans-serif;
  --cd-font--noto-sans-sc: "Noto Sans SC", sans-serif;
  --cd-font--dubai: "Dubai", "Noto Sans Arabic", sans-serif;
  --cd-font--almarai: "Almarai", "Noto Sans Arabic", sans-serif;


  /* =========================================================================
   * 5. Type scale (unchanged from CD — brand portal doesn't specify sizes)
   * ========================================================================= */
  --cd-font-size--tiny: 0.75rem;      /* 12px */
  --cd-font-size--small: 0.875rem;    /* 14px */
  --cd-font-size--ref: 1rem;          /* 16px */
  --cd-font-size--base: 1.125rem;     /* 18px */
  --cd-font-size--medium: 1.375rem;   /* 22px */
  --cd-font-size--large: 1.625rem;    /* 26px */
  --cd-font-size--2xbase: 1.875rem;   /* 30px */
  --cd-font-size--2xmedium: 2.375rem; /* 38px */
  --cd-font-size--2xlarge: 2.875rem;  /* 46px */


  /* =========================================================================
   * 6. Layout (unchanged from CD — brand portal doesn't specify)
   * ========================================================================= */
  --cd-max-content-width: 820px;
  --cd-max-body-width: 1400px;
  --cd-max-width: 1220px;
  --cd-global-header-height: 35px;
  --cd-site-header-height: 60px;
  --cd-container-padding: 0.75rem;        /* 12px */
  --cd-container-padding-tablet: 1.5rem;  /* 24px */
  --cd-container-padding-xlarge: 2.5rem;  /* 40px */

  /* Radius — corner-rounding scale (adopted from the App Kit; OCHA apps/tools
     use soft corners on cards, buttons and panels) */
  --cd-radius:       10px;  /* cards, panels, modals */
  --cd-radius--sm:   7px;   /* buttons, inputs */
  --cd-radius--pill: 16px;  /* chips, progress track */


  /* =========================================================================
   * 7. Breakpoints (unchanged — documented as tokens, used directly in MQs)
   * ========================================================================= */
  --cd-bp--sm: 576px;
  --cd-bp--md: 768px;
  --cd-bp--lg: 1024px;
  --cd-bp--xl: 1200px;
  --cd-bp--xxl: 1400px;


  /* =========================================================================
   * 8. Vertical rhythm (unchanged)
   * ========================================================================= */
  --cd-flow-space: 1rem;
  --cd-bumper-space: 1rem;
  --cd-footer-row-number: 5;


  /* =========================================================================
   * 9. Z-index scale (unchanged)
   * ========================================================================= */
  --cd-z-default: 1;
  --cd-z-hidden: -1;
  --cd-z-sidebar-underlay: 100;
  --cd-z-sidebar: 110;
  --cd-z-main-menu: 199;
  --cd-z-search: 200;
  --cd-z-dropdown: 201;
  --cd-z-skip-link: 1000;


  /* =========================================================================
   * 10. Accessibility (unchanged)
   * ========================================================================= */
  --cd-outline-size: 3px;


  /* =========================================================================
   * 11. Logo constants
   * ========================================================================= */
  --cd-logo-min-width-horizontal: 57px;   /* brand minimum */
  --cd-logo-min-width-vertical: 28px;     /* brand minimum */
  --cd-logo-clear-space-ratio: 0.5;       /* clear space = 0.5 x globe diameter */
  --brand-logo-mobile-width: 57px;        /* floor = brand minimum (was 52px) */
  --brand-logo-desktop-width: 186px;


  /* =========================================================================
   * 12. SEMANTIC ALIASES — components use ONLY these
   *
   * This layer provides:
   *   - Accessibility by default (--brand-primary--text uses AA variant)
   *   - Migration in one file (swap this section to retheme)
   *   - Future-proofing (palette changes don't touch component CSS)
   * ========================================================================= */

  /* Primary */
  --brand-primary: var(--cd-ocha-blue);             /* #009EDB — fills, brand moments */
  --brand-primary--text: var(--cd-ocha-blue--aa);    /* #0077B8 — text/UI on white (AA) */
  --brand-primary--text-strong: var(--cd-ocha-blue--aaa); /* #005392 — critical text (AAA) */
  --brand-primary--dark: var(--cd-blue--dark);       /* #004987 — hover/active */
  --brand-primary--light: var(--cd-blue--bright);    /* #64BDEA — light fills */
  --brand-primary--lighter: var(--cd-blue--brighter); /* #C5DFEF — surface tints */
  --brand-primary--lightest: var(--cd-blue--lightest); /* #E3EDF6 — subtle backgrounds */

  /* Highlight / CTA */
  --brand-highlight: var(--cd-red);                  /* #ED1847 */
  --brand-highlight--text: var(--cd-red--aa);        /* #EB0045 (AA) */

  /* Neutrals */
  --brand-grey: var(--cd-grey--300);                 /* #F2F2F2 — surfaces */
  --brand-grey--border: var(--cd-grey--500);         /* #BFBFBF */
  --brand-grey--text: var(--cd-grey--700);           /* #737373 — muted text */
  --brand-default-text-color: var(--cd-grey--800);   /* #4D4D4D — body text */

  /* Semantic states */
  --brand-success: var(--cd-green--aa);              /* #27833A */
  --brand-warning: var(--cd-orange--aa);             /* #CF3F0B */
  --brand-error: var(--cd-red--aa);                  /* #EB0045 */
  --brand-info: var(--cd-ocha-blue--aa);             /* #0077B8 */

  /* Radius */
  --brand-radius:       var(--cd-radius);       /* cards, panels, modals */
  --brand-radius--sm:   var(--cd-radius--sm);   /* buttons, inputs */
  --brand-radius--pill: var(--cd-radius--pill); /* chips, progress */

  /* =========================================================================
   * 13. FONT FAMILIES
   * Source: brand.unocha.org — Fonts (Open-source, Google Fonts)
   * Loaded via .storybook/preview-head.html
   * ========================================================================= */
  --cd-font--roboto:           "Roboto", Arial, sans-serif;
  --cd-font--roboto-condensed: "Roboto Condensed", "Roboto", Arial, sans-serif;
  --cd-font--roboto-slab:      "Roboto Slab", "Roboto", Georgia, serif;
  --cd-font--roboto-mono:      "Roboto Mono", "Courier New", monospace;
  --cd-font--crimson-pro:      "Crimson Pro", Georgia, "Times New Roman", serif;
  --cd-font--montserrat:       "Montserrat", "Roboto", Arial, sans-serif;
  --cd-font--raleway:          "Raleway", "Roboto", Arial, sans-serif;

  /* Semantic aliases */
  --brand-font:            var(--cd-font--roboto);            /* body, UI */
  --brand-font-heading:    var(--cd-font--roboto);            /* default heading */
  --brand-font-display:    var(--cd-font--roboto-slab);       /* optional display */
  --brand-font-condensed:  var(--cd-font--roboto-condensed);  /* infographics */
  --brand-font-mono:       var(--cd-font--roboto-mono);       /* code, credits */
  --brand-font-serif:      var(--cd-font--crimson-pro);       /* long-form print */
  /* @cds-end */

  /* ==== LAYER 2 — short app-facing names =================================
     ALIASES onto layer 1 — never raw values. This is what makes the kit "the
     app-facing layer of the CDS" true mechanically and not just in the README:
     a CDS change reaches every app, and the two cannot drift. Short names stay
     the app-building convention; apps may also use the CDS names (the
     `--cd-` and `--brand-` families above) directly where no short name
     exists. NOTE: never write those families with a star-slash in a comment;
     it closes the comment early and the parser then eats the next
     declaration. That is exactly how --ocha-cyan went missing once. */
  --ocha-cyan:        var(--brand-primary);            /* signature UN Blue — accents, borders, primary buttons, logo */
  --ocha-blue:        var(--brand-primary--text);      /* AA text blue — links / blue text on white */
  --ocha-blue-dark:   var(--brand-primary--dark);      /* headings, hover */
  --ink:              var(--brand-default-text-color); /* body text */
  --muted:            var(--brand-grey--text);         /* secondary text */
  --input-border:     var(--brand-grey--border);       /* form field borders */
  --bg:               var(--brand-grey);               /* app surface */
  --card:             var(--cd-white);                 /* card / panel */
  --ok:               var(--brand-success);            /* success (AA) */
  --warn:             var(--brand-warning);            /* warning (AA) */
  --err:              var(--brand-error);              /* error (AA) */
  --radius:           var(--brand-radius);             /* cards */
  --radius-sm:        var(--brand-radius--sm);         /* buttons, inputs */
  --radius-pill:      var(--brand-radius--pill);       /* chips */
  --app-font:         var(--brand-font);               /* body, UI */
  --mono-font:        var(--brand-font-mono);          /* code, credits */

  /* ==== LAYER 3 — kit-owned ==============================================
     Values the CDS does not define yet. Every one of these is a CANDIDATES.md
     entry: promote it into tokens/brand.css and this section shrinks. Keeping
     them here, named and explained, is the point — a raw hex buried in layer 2
     is how the kit drifted from the ramp in the first place. */
  --ocha-blue-footer: #1f69b3;   /* footer band — dark enough for AA white text, cyan sits on top as the 8px bar (brand.unocha.org). Not in the CDS ramp. */
  --line:             #E2E5E8;   /* hairline borders / dividers — sits between --cd-grey--300 and --cd-grey--500, slightly cooler. Not in the CDS ramp. */

  /* Spacing — 4pt scale, kit-owned. The CDS has no space tokens at all, so
     every app was typing its own numbers by eye. Use these for margins, padding
     and gap; if a value here doesn't fit, the layout probably wants rethinking
     rather than a 13px. */
  --sp-4:  0.25rem;   /*  4px */
  --sp-8:  0.5rem;    /*  8px */
  --sp-12: 0.75rem;   /* 12px */
  --sp-16: 1rem;      /* 16px */
  --sp-24: 1.5rem;    /* 24px */
  --sp-32: 2rem;      /* 32px */
  --sp-48: 3rem;      /* 48px */
}
/* @tokens-end */

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

:root { color-scheme: light; }                       /* OCHA apps are light-themed —
                                                        opt out of browser auto-dark */
body {
  margin: 0; font-family: var(--app-font);
  font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--bg);
  border-top: 8px solid var(--ocha-cyan);          /* OCHA signature bar */
  /* Sticky footer: body is at least one viewport tall and a flex column, so
     .app-main (flex: 1, below) absorbs the leftover space and cd-footer stays
     pinned to the bottom on SHORT pages (e.g. a sparse tab) instead of riding
     up under the content. Taller pages still grow/scroll normally. dvh fixes
     mobile browser chrome jitter; the vh line is the pre-dvh fallback. */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
:focus-visible { outline: 2px solid var(--ocha-cyan); outline-offset: 2px; }

.cd-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 0.5rem 1rem; border-radius: 0 0 3px 0;
  background: var(--ocha-blue-dark); color: #fff; text-decoration: none;
}
.cd-skip-link:focus { left: 0; }

/* Vertical rhythm utility */
.cd-flow > * + * { margin-top: var(--cd-flow-space, 1rem); }
/* A component's own `margin: 0` reset (e.g. .cd-block-title) otherwise wins this tie by
   source order, silently cancelling flow spacing wherever that component follows a
   sibling — the exact bug that put a heading flush against an alert above it. Two
   classes beats one, so this always wins regardless of where either rule is defined. */
.cd-flow > * + .cd-block-title { margin-top: var(--cd-flow-space, 1rem); }

/* ===== App shell ===== */
/* Standard OCHA app header — the shared standard for OCHA web apps & tools (NOT websites),
   established from the Photo Metadata tool: a full-width white bar under the cyan signature
   rule, with logo · divider · title/subtitle. The tool title is --ink (black), NOT blue —
   that is the one deliberate change from the source design. */
.app-header {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px; background: var(--card); border-bottom: 1px solid var(--line);
}
.app-header__logo { height: 38px; width: auto; display: block; }
.app-header__titles { border-inline-start: 1px solid var(--line); padding-inline-start: 16px; }
.app-header__title { margin: 0; font-size: 18px; font-weight: 500; color: var(--ink); }
.app-header__subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

.app-main { max-width: 820px; margin: 0 auto; padding: 1.5rem; flex: 1 0 auto; width: 100%; }
.app-lede { font-size: 1rem; color: var(--ink); max-width: 64ch; }
.app-hint { font-size: 0.8rem; color: var(--muted); }
.app-footer { max-width: 820px; margin: 1.5rem auto 3rem; padding: 0 1.5rem; color: var(--muted); font-size: 0.8rem; }
.app-footer a { color: var(--ocha-blue); }
code, .mono { font-family: var(--mono-font); font-size: 0.9em; }

/* ===== Titles ===== */
.cd-page-title { font-size: 1.25rem; font-weight: 500; color: var(--ocha-blue-dark); margin: 0; }
.cd-block-title {
  display: flex; align-items: center; gap: 0.55rem; margin: 0;
  font-size: 0.875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--ocha-blue-dark);
}
.step-num {
  display: inline-grid; place-items: center; flex: none;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--ocha-cyan); color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0;
}

/* ===== Card ===== */
.cd-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.cd-card__content { padding: 1.1rem 1.25rem; }

/* ===== Buttons ===== */
.cd-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: var(--ocha-cyan); color: #fff; border: 1px solid var(--ocha-cyan);
  border-radius: var(--radius-sm); padding: 0.65rem 1.4rem;
  font: inherit; font-weight: 700; font-size: 0.95rem; line-height: 1.2; cursor: pointer; text-decoration: none;
}
.cd-button:hover { background: var(--ocha-blue-dark); border-color: var(--ocha-blue-dark); }
.cd-button--outline { background: var(--card); color: var(--ocha-blue); border-color: var(--input-border); }
.cd-button--outline:hover { background: var(--card); color: var(--ocha-blue-dark); border-color: var(--ocha-cyan); }
.cd-button--small { padding: 0.38rem 0.85rem; font-size: 0.85rem; }
.cd-button--export { background: var(--ok); border-color: var(--ok); }
.cd-button--export:hover { background: #1f6b2f; border-color: #1f6b2f; }
.cd-button[disabled] { opacity: 0.55; cursor: default; }

/* ===== Forms ===== */
.field-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.field-row .cd-form__input { flex: 1 1 18rem; }
.cd-form__label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35rem; }
.cd-form__input, select.cd-form__input {
  width: 100%; padding: 0.55rem 0.75rem; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--input-border); border-radius: var(--radius-sm);
}
.cd-form__input:focus { border-color: var(--ocha-cyan); outline: none; }
textarea.cd-form__input { resize: vertical; }

/* ===== Tabs ===== */
.mode-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); }
.mode-tab {
  appearance: none; background: none; border: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; font-size: 0.95rem; color: var(--muted);
  padding: 0.55rem 1rem; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.mode-tab.is-active { color: var(--ocha-blue); border-bottom-color: var(--ocha-cyan); }
.mode-tab:hover { color: var(--ocha-blue-dark); }
/* UI-chrome icons = Font Awesome (solid), inlined as SVG with fill:currentColor so
   they follow the tab's text colour. See DS Foundations → Iconography. */
.mode-tab__icon { width: 0.95em; height: 0.95em; flex: none; }

/* ===== Video player ===== */
.app-player { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; border-radius: var(--radius-sm); }
.app-player--fit { width: auto; max-width: 100%; max-height: 72vh; aspect-ratio: auto; margin-inline: auto; }

/* ===== Status / alert =====
   Matches the canonical DS component (components/cd-alert) — a plain 1px border
   all around, no left accent bar (the DS dropped its box-shadow accent; the old
   border-left + near-white wash read as generic "AI-template" chrome regardless).
   Tint backgrounds use the same colour ramp step (ramp step 6) the DS uses.
   Bakes in its own vertical margin (the DS component does too) so an alert never
   sits flush against a neighbour — override locally (e.g. `.status-slot .cd-alert
   { margin: ... }`) for a tighter spot, same as QuickVid already does under its
   render button. */
.status-slot { margin-top: 0.25rem; }
.status-slot:empty { display: none; }
.cd-alert {
  margin: 1rem 0; padding: 0.85rem 1rem;
  border: 1px solid var(--_ac, var(--ocha-blue));
  border-radius: var(--radius-sm);
  background: var(--_ab, #E3EDF6);
  font-size: 0.9rem; color: var(--ink);
}
.cd-alert:first-child { margin-top: 0; }
.cd-alert:last-child  { margin-bottom: 0; }
.cd-alert__message p { margin: 0; }
.cd-alert--status  { --_ac: var(--ok);   --_ab: #CEE3A0; }
.cd-alert--warning { --_ac: var(--warn); --_ab: #FEDCBD; }
.cd-alert--error   { --_ac: var(--err);  --_ab: #F9C0C5; }

/* ===== Modal ===== */
/* Markup: <div class="cd-modal" hidden> <div class="cd-modal__panel cd-flow"> …
     <button class="cd-modal__close" aria-label="Close">&times;</button> </div> </div>
   Show/hide by toggling [hidden]. The app wires close/overlay clicks (3 lines). */
.cd-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 1rem;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.cd-modal[hidden] { display: none; }
.cd-modal__panel {
  position: relative; background: var(--card); border-radius: var(--radius);
  border-top: 6px solid var(--ocha-cyan);
  max-width: 44rem; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 1.25rem 1.4rem 1.4rem;
}
.cd-modal__close {
  position: absolute; top: 0.55rem; right: 0.7rem; border: none; background: none;
  font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0.2rem;
}
.cd-modal__close:hover { color: var(--ink); }

/* ===== Progress bar ===== */
/* Markup: <div class="cd-progress"><div class="cd-progress__fill" style="width:42%"></div></div>
     <div class="cd-progress__pct">42%</div>   (the % label is optional). */
.cd-progress { height: 0.5rem; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; margin-top: 0.5rem; }
.cd-progress__fill { height: 100%; width: 0; background: var(--ocha-cyan); border-radius: inherit; transition: width 0.3s ease; }
.cd-progress__pct { font-size: 0.78rem; font-weight: 700; color: var(--ocha-blue-dark); margin-top: 0.25rem; }

/* ===== Step help (?) ===== */
/* A round ? button in a step title that toggles a plain-language explainer panel.
   Markup: <button class="cd-help__btn" aria-expanded="false" aria-controls="help-x"
             aria-label="Help for this step"><i class="fa-regular fa-question"></i></button>
           <div class="cd-help__panel" id="help-x" hidden>…</div>
   Toggle JS lives in each app (3 lines, delegated click). */
.cd-help__btn {
  inline-size: 1.3rem; block-size: 1.3rem; padding: 0; margin-inline-start: 0.45rem;
  border: 1.5px solid var(--ocha-cyan); border-radius: 50%;
  background: var(--card); color: var(--ocha-blue-dark);
  font-size: 0.68rem; line-height: 1; cursor: pointer;
  display: inline-grid; place-items: center; vertical-align: text-bottom;
}
.cd-help__btn:hover, .cd-help__btn[aria-expanded="true"] { background: var(--ocha-cyan); color: #fff; }
.cd-help__btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ocha-cyan) 45%, transparent); outline-offset: 1px; }
.cd-help__panel {
  padding: 0.75rem 0.95rem;
  background: color-mix(in srgb, var(--ocha-cyan) 7%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ocha-cyan) 35%, var(--line));
  border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 400; color: var(--ink); line-height: 1.55;
  text-transform: none; letter-spacing: normal;   /* survives inside uppercase block titles' flow */
}
.cd-help__panel p, .cd-help__panel ul { margin: 0 0 0.5rem; }
.cd-help__panel p:last-child, .cd-help__panel ul:last-child { margin-bottom: 0; }
.cd-help__panel ul { padding-inline-start: 1.15rem; }
.cd-help__panel li { margin-bottom: 0.3rem; }
.cd-help__panel strong { color: var(--ocha-blue-dark); }

@media (min-width: 768px) { .app-main { padding: 2rem 1.5rem; } }

/* ===== Footer (cd-footer) ===== */
/* The OCHA institutional footer: a UN-blue band with the "Service provided by"
   OCHA lockup, the mandate tagline, and the Creative Commons licence — the
   brand.unocha.org / 2026 BDU-tools standard. An OPTIONAL utility row
   (.cd-footer__utility) sits above the band for app links + a status chip
   (About / What's new / Help / donate / engine status …), divided by the same
   hairline. Reproduces the wordmark-generator footer.
   Markup:
     <footer class="cd-footer">
       <div class="cd-footer__utility">                         (optional)
         <div class="cd-footer__status"><span class="dot"></span>…</div>
         <nav class="cd-footer__links"> <button>…</button> <a>…</a> </nav>
       </div>
       <div class="cd-footer__inner">
         <div class="cd-footer__col--ocha">
           <span class="cd-footer__mandate-heading">Service provided by</span>
           <img class="cd-footer__logo" src="…OCHA logo (any colour)…" alt="OCHA">
         </div>
         <div class="cd-footer__col--tagline"><p>…mandate…</p></div>
         <div class="cd-footer__col--cc">…CC BY 4.0…</div>
       </div>
     </footer> */
.cd-footer {
  background: var(--ocha-blue-footer); color: #fff;   /* dark blue band for readable white text… */
  border-top: 8px solid var(--ocha-cyan);             /* …with the signature cyan bar on top (the DS standard) */
  font-weight: 300; font-size: 0.75rem; line-height: 1.5;
  padding: 2.5rem 1.5rem; margin-top: 2rem;
}
.cd-footer a { color: #fff; text-decoration: none; }
.cd-footer a:hover, .cd-footer a:focus-visible { text-decoration: underline; }
/* optional utility row — app links + a status chip, above the institutional band */
.cd-footer__utility {
  max-width: 68rem; margin: 0 auto 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.cd-footer__links { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cd-footer__links button, .cd-footer__links a {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #fff; font: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;
}
.cd-footer__links button:hover, .cd-footer__links a:hover { text-decoration: underline; }
.cd-footer__links button:focus-visible, .cd-footer__links a:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px;
}
.cd-footer__status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.65rem; border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill); font-size: 0.7rem; white-space: nowrap;
}
.cd-footer__status .dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: #fff; flex: none; }
.cd-footer__status.is-down { opacity: 0.85; }
.cd-footer__status.is-down .dot { background: #FFC800; }
/* institutional band (the DS standard) */
.cd-footer__inner { max-width: 68rem; margin: 0 auto; display: flex; align-items: center; gap: 0; }
.cd-footer__col--ocha {
  flex-shrink: 0; padding-inline-end: 1.5rem;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.35);
}
.cd-footer__mandate-heading { display: block; font-size: 0.6875rem; font-weight: 300; margin-bottom: 0.375rem; }
.cd-footer__logo { width: 149px; height: 37px; filter: brightness(0) invert(1); }  /* any-colour logo → white */
.cd-footer__col--tagline { flex: 1; padding-inline: 1.5rem; }
.cd-footer__col--tagline p { margin: 0; }
.cd-footer__col--cc {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding-inline-start: 1.5rem; border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
  text-align: end; max-width: 340px;
}
.cd-footer__col--cc svg { flex: 0 0 38px; width: 38px; height: 38px; fill: #fff; }
/* keep "CC BY 4.0" from splitting after "BY" and leaving a lone "4.0." orphan
   on the last line — the phrase wraps as ONE unit instead. */
.cd-footer__col--cc span a { white-space: nowrap; }
.cd-footer__cc-link { line-height: 0; }
.cd-footer__cc-link:hover { opacity: 0.8; text-decoration: none; }
@media (max-width: 767px) {
  .cd-footer__inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .cd-footer__col--ocha {
    border-inline-end: none; padding-inline-end: 0;
    padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.35); width: 100%;
  }
  .cd-footer__col--tagline { padding-inline: 0; }
  .cd-footer__col--cc {
    border-inline-start: none; padding-inline-start: 0;
    padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.35);
    max-width: 100%; width: 100%; text-align: start;
  }
}