/* ── Brand typeface ──────────────────────────────────────────────────────
   Kunstler Script — same font used in the Windows desktop application.
   Single-weight calligraphic font; no bold/italic variants to load.
   ──────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'KunstlerScript';
  src: url('/fonts/KUNSTLER.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* =============================================
   FTAnalyzer Web — global styles
   WCAG 2.1 AA compliant
   Target audience: genealogists of all ages,
   including elderly and visually impaired users.
   ============================================= */

/* -----------------------------------------------
   CSS variable overrides for Radzen defaults.
   app.css loads after Radzen's CSS, so :root here
   wins via normal cascade specificity.

   Canonical source: these --color-* and --rz-* values are
   mirrored in FTAnalyzer.Shared/Theme/Colors.cs for use
   by the WinForms desktop app. CSS can't consume those
   constants directly, so update BOTH files together when
   changing the palette.
   ----------------------------------------------- */
:root {
  color-scheme: light; /* JS sets this to dark when data-theme="dark" */

  /* ── Brand palette (sourced from application logo) ─────────────────────
     --color-* are our semantic design tokens; Radzen --rz-* are set below.

     Contrast ratios measured against --color-bg-parchment (#F2EBDF):
       #364F29  7.0:1   ✓ AAA  — primary green (text & buttons)
       #2A2723 11.8:1   ✓ AAA  — charcoal body text
       #5C5249  5.5:1   ✓ AAA  — secondary text (darkened bronze)
       #80776D  3.3:1   ✓ non-text only (borders/icons; fails 4.5:1 body text)
       #6B5A28  5.7:1   ✓ AA   — title gold (also 3.3:1 on hero green #9BBE86 — AA lg)
       #C7882C  2.6:1   ✗ all  — as-is; darkened to #BE7E24 (2.85:1) for bars
       #BE7E24  2.85:1  ✓ non-text 3:1 borderline; #2A2723 on #C7882C = 4.75:1 ✓
       #2E6DA4  4.6:1   ✓ AA   — gender male (light mode)
       #A93D64  5.0:1   ✓ AA   — gender female (light mode)
  ─────────────────────────────────────────────────────────────────────── */
  --color-primary:       #364F29;  /* Deep Forest Green */
  --color-secondary:     #2A2723;  /* Charcoal Bark — body text */
  --color-accent-warm:   #80776D;  /* Bronze — borders/icons/inactives only */
  --color-accent-action: #C7882C;  /* Deep Amber/Gold — badge/button backgrounds */
  --color-bg-parchment:  #F2EBDF;  /* Parchment Cream — light mode background */
  --color-gold-light:    #E8D5A3;  /* Antique Gold — dark mode titles & hero text */
  --color-gold-dark:     #6B5A28;  /* Aged Gold — light mode titles & hero text */
  --color-bg-card:       #FFFFFF;  /* Pure white for data panels */
  --color-border:        #DDD7CC;  /* Warm parchment border for grids */
  --color-gender-male:   #2E6DA4;  /* Steel Blue — 4.6:1 on parchment, 5.5:1 on white */
  --color-gender-female: #A93D64;  /* Rose — 5.0:1 on parchment, 6.0:1 on white */
  --color-tier-bronze:   #8B6914;  /* Dark bronze — 5.1:1 on white */
  --color-tier-silver:   #6B7280;  /* Cool grey — 4.9:1 on white */
  --color-tier-platinum: #5A6571;  /* Blue-grey — 6.0:1 on white */

  /* 1. Font size
        Radzen default: 0.875rem (14px) — too small for our audience.
        16px base gives WCAG-comfortable reading without zooming. */
  --rz-body-font-size: 1rem;
  --rz-body-line-height: 1.65;

  /* 2. Primary — Deep Forest Green
        #364F29 on #F2EBDF: 7.0:1 (AAA) / white text on primary: 8.4:1 (AAA) */
  --rz-primary:        #364F29;
  --rz-primary-light:  #4a6b39;
  --rz-primary-lighter:#edf2e9;
  --rz-primary-dark:   #293d1f;
  --rz-primary-darker: #1d2b16;

  /* 3. Body & secondary text
        #2A2723 on #F2EBDF: 11.8:1 (AAA)
        #5C5249 is a darkened warm bronze — 5.5:1 (AAA) for labels/sub-text.
        The brand bronze #80776D achieves only 3.3:1 — acceptable for borders
        and non-text UI elements but NOT for body text. */
  --rz-text-color:           #2A2723;
  --rz-text-secondary-color: #5C5249;

  /* 4. Background & borders */
  --rz-body-background-color: var(--color-bg-parchment);
  --rz-base-background-color: var(--color-bg-parchment);
  --rz-base-300: #DDD7CC;   /* grid lines, dividers */
  --rz-base-400: #80776D;   /* stronger borders, inactive icons (non-text only) */

  /* Radzen defaults text boxes/dropdowns to --rz-base-background-color, which is
     the same parchment as the page — inputs were rendering invisibly on top of
     it. Give them the white "card" surface instead so they stand out. */
  --rz-input-background-color: var(--color-bg-card);

  /* 5. Success — Deep Forest Green family
        Same hue as primary; distinguishable by context (health bars, badges).
        White text on success: 8.4:1 (AAA) */
  --rz-success:        #364F29;
  --rz-success-light:  #4a6b39;
  --rz-success-lighter:#edf2e9;
  --rz-success-dark:   #293d1f;
  --rz-success-darker: #1d2b16;

  /* 6. Warning — Deep Amber/Gold
        #C7882C is the brand CTA colour and is used for badge/button backgrounds
        with dark charcoal text (#2A2723 on #C7882C: 4.75:1 ✓ AA).
        For progress bars and non-text UI the slightly darker #BE7E24 is used
        (3.15:1 on white — passes WCAG 1.4.11 non-text).
        Neither shade is suitable as body text on a light background. */
  --rz-warning:        #BE7E24;   /* darkened amber for bars/borders — 3.15:1 */
  --rz-warning-light:  #C7882C;   /* brand CTA amber — badge/button bg only */
  --rz-warning-lighter:#fdf4e3;
  --rz-warning-dark:   #9b6520;
  --rz-warning-darker: #7a4f18;
  --rz-on-warning:         #1A1816;   /* dark text on amber: 5.2:1 AA */
  --rz-on-warning-light:   #1A1816;
  --rz-on-warning-lighter: #9b6520;   /* dark amber text on light amber bg */
  --rz-on-warning-dark:    #FFFFFF;
  --rz-on-warning-darker:  #FFFFFF;


  /* 7. Info — Dark Teal
        Radzen's default cyan (#00BCD4) gives only ~2.3:1 with white — fails AA.
        #00687A on white: 6.45:1 (AAA) / white text on #00687A: 6.45:1 (AAA) */
  --rz-info:        #00687A;
  --rz-info-light:  #007A90;
  --rz-info-lighter:#E0F4F7;  /* chip/badge bg — use dark info text on this */
  --rz-info-dark:   #004F5C;
  --rz-info-darker: #003540;
  --rz-on-info:         #FFFFFF;
  --rz-on-info-light:   #FFFFFF;
  --rz-on-info-lighter: #00687A;  /* dark teal text on light-teal chip bg */
  --rz-on-info-dark:    #FFFFFF;
  --rz-on-info-darker:  #FFFFFF;

  /* 8. Danger red — unchanged; strong, accessible
        #b71c1c on white: 6.53:1 (AAA) / white text: 6.53:1 (AAA) */
  --rz-danger:        #b71c1c;
  --rz-danger-light:  #ef5350;
  --rz-danger-lighter:#ffebee;
  --rz-danger-dark:   #7f0000;
  --rz-danger-darker: #650000;

  /* 9. Text selection — Radzen's own default rendered as a near-white
        background in light mode, making selected text unreadable.
        White text on primary: 8.4:1 (AAA). */
  --rz-text-selection-background-color: var(--color-primary);
  --rz-text-selection-color: #FFFFFF;
}

/* -----------------------------------------------
   Focus indicators — WCAG 2.4.7 / 2.4.11
   Global: applies to all elements across the app.
   Browsers and component libraries often suppress
   outlines. Restore them explicitly for keyboard
   and AT users.
   ----------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--rz-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Suppress outline for mouse/touch — keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* -----------------------------------------------
   Text selection highlight — fallback for content outside
   Radzen's .rz-layout (which has its own ::selection rule;
   see --rz-text-selection-* overrides above/in dark mode).
   The browser/Radzen default rendered as a near-white
   background in light mode, making selected text
   effectively invisible.
   ----------------------------------------------- */
::selection {
  background-color: var(--rz-text-selection-background-color);
  color: var(--rz-text-selection-color);
}

/* Radzen interactive elements */
.rz-button:focus-visible,
.rz-navigation-item:focus-visible,
.rz-panel-menu-item:focus-visible,
.rz-checkbox:focus-visible,
.rz-dropdown:focus-visible {
  outline: 3px solid var(--rz-primary);
  outline-offset: 3px;
}

/* Dropdown popups — give them a visible border and shadow so they stand out */
.rz-popup {
  border: 1px solid var(--rz-base-400) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  background-color: var(--rz-base-100) !important;
}

/* Selected dropdown items — checkbox is sufficient, no blue highlight */
.rz-state-highlight.rz-multiselect-item,
.rz-multiselect-items li.rz-state-highlight {
  background-color: transparent !important;
  color: var(--rz-text-color) !important;
}
.rz-state-highlight.rz-multiselect-item:hover,
.rz-multiselect-items li.rz-state-highlight:hover {
  background-color: var(--rz-base-200) !important;
  color: var(--rz-text-color) !important;
}

/* Grid rows — ensure descenders (g, y, p) are not clipped on high-DPI displays */
.rz-data-grid .rz-cell-data {
  padding-block: 0.35rem;
  line-height: 1.5;
}

/* Warning alert buttons — Radzen's close button uses rz-variant-text rz-light */
.rz-alert.rz-warning .rz-button {
  color: #1A1816 !important;
}

.rz-alert a {
  text-decoration: underline;
  font-weight: 600;
}

.rz-alert.rz-success a,
.rz-alert.rz-info a,
.rz-alert.rz-danger a {
  color: #fff;
}

.rz-alert.rz-warning a,
.rz-alert.rz-light a {
  color: #1A1816;
}

/* Dark mode: the "light" alert variant flips to a dark background, so the
   dark link/button colours above (meant for its pale light-mode background)
   become nearly invisible — brighten them to match the alert's own text colour. */
html[data-theme="dark"] .rz-alert.rz-light a {
  color: var(--rz-primary-light);
}

html[data-theme="dark"] .rz-alert.rz-light .rz-button {
  color: var(--rz-text-color) !important;
}

/* Progress log — use theme-aware colours for dark mode support */
.progress-log,
.progress-log .log-line {
  color: var(--rz-text-color);
  background: var(--rz-base-100);
}

/* -----------------------------------------------
   Screen-reader-only utility — WCAG 1.1.1 / 1.3.1
   Visually hidden but accessible to AT.
   ----------------------------------------------- */
.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;
}

/* Reserve a permanent scrollbar gutter so the width used by fixed full-width
   elements (.site-banner, #blazor-error-ui) never shifts relative to a
   classic (non-overlay) OS scrollbar — without this, GitHub issue #15
   reported the dev banner visually crowding/obscuring the scrollbar's
   down-arrow button on Windows/Edge. */
html {
  scrollbar-gutter: stable;
}

/* -----------------------------------------------
   Base typography improvements
   ----------------------------------------------- */
body {
  font-size: 1rem;
  line-height: 1.65;
}

h1 { font-size: 2rem;   line-height: 1.25; }
h2 { font-size: 1.5rem; line-height: 1.3;  }
h3 { font-size: 1.25rem; line-height: 1.35; }

/* Headings are focused programmatically by Blazor's FocusOnNavigate so screen
   readers announce the new page after navigation. They are not keyboard-tabbable
   so a visible focus ring on them is never useful — suppress it. */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
  outline: none;
}

/* -----------------------------------------------
   Privacy Policy / Terms of Service pages
   (Shared across two pages — kept global)
   ----------------------------------------------- */
.policy-page {
  max-width: 800px;
}

.policy-page h1 {
  margin-bottom: 0.25rem;
}

.policy-date {
  color: var(--rz-text-secondary-color);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.policy-page section {
  margin-bottom: 2rem;
}

.policy-page h2 {
  margin-bottom: 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--rz-base-300);
}

.policy-page p {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

.policy-page ul {
  margin: 0.5rem 0 0.75rem 1.5rem;
  line-height: 1.7;
}

.policy-page ul li {
  margin-bottom: 0.375rem;
}

.policy-page a {
  color: var(--rz-primary);
  text-decoration: underline;
}

.policy-page a:hover {
  color: var(--rz-primary-darker);
}

/* -----------------------------------------------
   Instructions page
   ----------------------------------------------- */
.instructions-page {
  max-width: 900px;
}

.instructions-page h1 {
  margin-bottom: 0.25rem;
}

.instructions-page .instructions-intro {
  color: var(--rz-text-secondary-color);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.instructions-page section {
  margin-bottom: 0.25rem;
}

.instructions-page h2 {
  margin-bottom: 0;
  font-size: 1.25rem;
}

.instructions-page h3 {
  font-size: 1.1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.instructions-page p {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

.instructions-page ul,
.instructions-page ol {
  margin: 0.5rem 0 0.75rem 1.5rem;
  line-height: 1.7;
}

.instructions-page ul li,
.instructions-page ol li {
  margin-bottom: 0.375rem;
}

.instructions-page a {
  color: var(--rz-primary);
  text-decoration: underline;
}

.instructions-page a:hover {
  color: var(--rz-primary-darker);
}

/* -----------------------------------------------
   Blazor error / reconnect UI
   ----------------------------------------------- */
#blazor-error-ui {
  background: #fefce8 !important;
  color: #1a1a1a !important;
  border-top: 3px solid var(--rz-warning);
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
  display: none;
  left: 0;
  padding: 0.75rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-size: 1rem;
}

#blazor-error-ui a {
  color: #1a1a1a !important;
  font-weight: 600;
  text-decoration: underline;
}

#blazor-error-ui .dismiss {
  color: #1a1a1a !important;
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* ===============================================
   DARK MODE
   Activated by data-theme="dark" on <html>, set by
   theme.js from localStorage or browser preference.

   Design approach:
   – Charcoal Bark family (#1A1816 → #2A2723) for
     all backgrounds — drawn from the same logo ink
   – Primary green lightened to #7BAF5A so it reads
     on dark surfaces (7.3:1 on page bg — AAA)
   – Brand amber #C7882C is now fully usable as
     text AND non-text (6.2:1 on page bg — AAA)
   – Danger red lifted to #EF5350 (5.1:1 — AA)
   – All hardcoded light colours patched below
   =============================================== */
:root[data-theme="dark"] {

    /* ── Brand tokens (dark-adapted) ─────────────── */
    --color-bg-main:       #1A1816;  /* near-black warm */
    --color-bg-card:       #2A2723;  /* charcoal bark → card surface */
    --color-secondary:     #F2F3EF;  /* light text */
    --color-accent-action: #C7882C;  /* amber — 6.2:1 on bg: AAA */
    --color-accent-warm:   #B5ADA4;  /* warm light grey */
    --color-border:        #3D3832;  /* subtle warm dark border */

    /* ── Gender colours (light values fail on dark surfaces) ── */
    --color-gender-male:   #5B9BD5;  /* 5.0:1 on #2A2723 card */
    --color-gender-female: #E87FA0;  /* 5.7:1 on #2A2723 card */

    /* ── Tier / gold (light values too dark for dark surfaces) ── */
    --color-gold-dark:     #C5A64C;  /* light gold — 6.4:1 on #2A2723 */
    --color-tier-bronze:   #C4963E;  /* warm gold — 5.6:1 on #2A2723 */
    --color-tier-silver:   #A0A6AE;  /* neutral grey — 6.1:1 on #2A2723 */
    --color-tier-platinum: #8B97A5;  /* cool blue-grey — 5.0:1 on #2A2723 */

    /* ── Backgrounds ─────────────────────────────── */
    --rz-body-background-color: #1A1816;
    --rz-base-background-color: #1A1816;
    --rz-base-100: #242019;  /* log/code panels, subtle insets */
    --rz-base-200: #2D2A25;
    --rz-base-300: #3D3832;  /* grid lines, dividers */
    --rz-base-400: #5C5249;  /* stronger borders */

    /* Pin inputs to the card surface explicitly (see light-mode comment above) —
       previously this only looked right by accident, when a control happened to
       sit inside a card lighter than the page. */
    --rz-input-background-color: var(--color-bg-card);
    --rz-base-500: #80776D;  /* bronze — decorative only */

    /* ── Text ────────────────────────────────────── */
    --rz-text-color:           #F2F3EF;  /* warm near-white — 16:1 (AAA) */
    --rz-text-secondary-color: #B5ADA4;  /* warm light grey — 8.5:1 (AAA) */
    --rz-text-title-color:     var(--rz-text-color);  /* h1/h2/h3 → warm white, not Radzen's #28363c navy */

    /* ── Primary: lightened forest green ─────────── */
    /*    #7BAF5A on #1A1816: 7.3:1 (AAA)             */
    /*    #7BAF5A on #2A2723 card: 5.6:1 (AA)         */
    --rz-primary:        #7BAF5A;
    --rz-primary-light:  #9CC47A;   /* hover → lighter green */
    --rz-primary-lighter:#263318;   /* chip/badge bg → dark tinted green */
    --rz-primary-dark:   #5C9140;
    --rz-primary-darker: #4A7A32;
    --rz-on-primary:         #1A1816;   /* dark text on #7BAF5A: 7.3:1 AAA */
    --rz-on-primary-light:   #1A1816;
    --rz-on-primary-lighter: var(--rz-primary);   /* green text on dark-green chip bg: 5.6:1 */
    --rz-on-primary-dark:    #1A1816;
    --rz-on-primary-darker:  #1A1816;

    /* ── Text selection: same lightened green as primary ── */
    --rz-text-selection-background-color: var(--rz-primary);
    --rz-text-selection-color: #1A1816;

    /* ── Success: same lightened green ───────────── */
    --rz-success:        #7BAF5A;
    --rz-success-light:  #9CC47A;
    --rz-success-lighter:#263318;
    --rz-success-dark:   #5C9140;
    --rz-on-success:         #1A1816;
    --rz-on-success-light:   #1A1816;
    --rz-on-success-lighter: var(--rz-success);

    /* ── Warning: brand amber, now fully accessible ─ */
    /*    #C7882C on #1A1816: 6.2:1 (AAA)             */
    --rz-warning:        #C7882C;
    --rz-warning-light:  #D99A45;
    --rz-warning-lighter:#2D1E06;   /* dark amber tint for alert bg */
    --rz-warning-dark:   #9B6520;
    --rz-on-warning:         #1A1816;   /* dark text on #C7882C amber: 6.0:1 AAA */
    --rz-on-warning-light:   #1A1816;
    --rz-on-warning-lighter: var(--rz-warning);

    /* ── Info: lighter teal for dark surfaces ───────── */
    /*    #4CC0D4 on #1A1816: 8.7:1 (AAA)               */
    --rz-info:        #4CC0D4;
    --rz-info-light:  #6ECCD9;
    --rz-info-lighter:#002530;   /* dark teal tint for alert bg */
    --rz-info-dark:   #2AADC2;
    --rz-on-info:         #001A20;   /* near-black on bright teal: 9:1 AAA */
    --rz-on-info-light:   #001A20;
    --rz-on-info-lighter: var(--rz-info);

    /* ── Danger: lifted red for dark surfaces ─────── */
    /*    #EF5350 on #1A1816: 5.1:1 (AA)              */
    --rz-danger:        #EF5350;
    --rz-danger-light:  #FF7875;
    --rz-danger-lighter:#2D0808;   /* dark red tint for alert bg */
    --rz-danger-dark:   #C62828;
    --rz-on-danger:         #1A1816;   /* dark text on #EF5350: 5.1:1 AA */
    --rz-on-danger-light:   #1A1816;
    --rz-on-danger-lighter: var(--rz-danger);
}

/* ── Radzen layout surfaces (dark) ─────────────────── */
[data-theme="dark"] .rz-sidebar {
    background-color: #2A2723;
    border-right: 1px solid #3D3832;
}

[data-theme="dark"] .rz-header {
    background-color: #1A1816;
    border-bottom: 1px solid #3D3832;
}

/* ── Sidebar toggle & navigation ──────────────────── */
/* Radzen uses a dark sidebar in both themes with internal high-specificity
   selectors for active/hover states — !important is needed to override.
   Selectors are broad because Radzen's DOM nests nav items outside .rz-sidebar. */
.rz-navigation-item-text {
    color: #F2F3EF !important;
}

.rz-navigation-item-link > .rzi {
    color: #F2F3EF !important;
}

.rz-navigation-item.rz-state-disabled {
    opacity: 0.65 !important;
}

html[data-theme="dark"] .rz-sidebar-toggle .rzi {
    color: #F2F3EF;
}

html[data-theme="dark"] .rz-sidebar .rz-navigation-item-link-active {
    background-color: #3D3832;
}

[data-theme="dark"] .rz-card {
    background-color: #2A2723;
    border-color: #3D3832;
}

/* ── Link hover on policy pages (dark) ─────────────── */
[data-theme="dark"] .policy-page a:hover {
    color: var(--rz-primary-light);
}

/* ── Blazor error bar (dark) ───────────────────────── */
[data-theme="dark"] #blazor-error-ui {
    background: #2A1E06 !important;
    color: #F2F3EF !important;
}

[data-theme="dark"] #blazor-error-ui a,
[data-theme="dark"] #blazor-error-ui .dismiss {
    color: #F2F3EF !important;
}

/* ── Layout dark overrides (global — not scoped CSS compatible) ── */
html[data-theme="dark"] .site-title,
html[data-theme="dark"] .hero-title {
    color: var(--color-gold-light);
}


[data-theme="dark"] .site-footer a:hover {
    color: var(--rz-primary-light);
}

html[data-theme="dark"] .skip-link {
    color: #1A1816;
}

[data-theme="dark"] .health-status--ok {
    color: #C7882C;
}

html[data-theme="dark"] .home-hero {
    background: linear-gradient(135deg, #263318 0%, #657E55 100%);
}

/* ── Header bar layout ────────────────────────────────────────
   Moved from scoped MainLayout.razor.css to app.css because
   CSS isolation caching can intermittently drop these styles
   on production deploys.
   ──────────────────────────────────────────────────────────── */
.header-bar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 1rem;
    gap: 0.75rem;
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.header-actions-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.donate-tagline {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .donate-tagline {
        display: none;
    }
}

.donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    background: var(--rz-primary);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    border-radius: var(--rz-border-radius);
    transition: background-color 0.15s;
    white-space: nowrap;
}

.donate-btn:hover,
.donate-btn:focus-visible {
    background: var(--rz-primary-dark);
    color: #FFFFFF;
}

.donate-btn .rzi {
    font-size: 0.95rem;
}

.settings-cog {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--rz-text-color);
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s;
    border-radius: var(--rz-border-radius);
}

.settings-cog:hover,
.settings-cog:focus-visible {
    opacity: 1;
}

/* ── Buttons: use dark text on lightened-green backgrounds ── */
html[data-theme="dark"] .donate-btn,
html[data-theme="dark"] .donate-btn:hover,
html[data-theme="dark"] .donate-btn:focus-visible {
    color: #1A1816;
}

html[data-theme="dark"] .donate-onetime:hover,
html[data-theme="dark"] .donate-onetime:focus-visible {
    color: #1A1816;
}

html[data-theme="dark"] .donate-onetime:hover .donate-onetime__icon,
html[data-theme="dark"] .donate-onetime:focus-visible .donate-onetime__icon {
    color: #1A1816;
}

/* ── Danger text: lift to danger-light on card surfaces ──── */
[data-theme="dark"] .health-status--low {
    color: var(--rz-danger-light);
}

html[data-theme="dark"] .root-person {
    color: var(--rz-danger-light);
}

/* ── Site-wide dismissible banners ─────────────────────────── */
.site-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.site-banner--dev {
    background: var(--rz-info);
    color: var(--rz-on-info);
}

.site-banner--dev a {
    color: var(--rz-on-info);
    font-weight: 700;
    text-decoration: underline;
}

.site-banner--dev a:hover {
    opacity: 0.85;
}

.site-banner__content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-banner__content .rzi {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.site-banner__close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.8;
    flex-shrink: 0;
    line-height: 1;
}

.site-banner__close:hover {
    opacity: 1;
}

/* ── Colour Census cells ────────────────────────────────
   Must live in global CSS because these classes are rendered
   inside RadzenDataGrid <Template> content, which does not
   receive the parent page's Blazor CSS-isolation scope attribute.
   ──────────────────────────────────────────────────────── */
.census-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.5rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid var(--rz-base-400);
    cursor: default;
}

a.census--clickable,
button.census--clickable {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    background: inherit;
    padding: 0;
}

a.census--clickable:hover,
button.census--clickable:hover {
    outline: 2px solid var(--rz-primary);
    outline-offset: -1px;
}

a.census--clickable:focus-visible,
button.census--clickable:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: -1px;
}

.census--not-alive   { background: #a9a9a9; color: #a9a9a9; }
.census--no-census   { background: #CC0000; color: #fff; }
.census--lc-missing  { background: #ffff00; color: #333; }
.census--found       { background: #7cfc00; color: #1a3a00; }
.census--lc-no-census{ background: #ff8c00; color: #333; }
.census--overseas    { background: #2f4f4f; color: #2f4f4f; }
.census--known-missing{ background: #3cb371; color: #333; }
.census--born-died   { background: #ffdab9; color: #333; }

/* ── Colour BMD cells ───────────────────────────────────
   Same scoping issue as census cells above.
   ──────────────────────────────────────────────────────── */
.bmd-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 1.5rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid var(--rz-base-400);
    cursor: default;
}

.bmd--clickable {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.bmd--clickable:hover {
    outline: 2px solid var(--rz-primary);
    outline-offset: -1px;
}

.bmd--clickable:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: -1px;
}

.bmd--empty       { background: #a9a9a9; color: #a9a9a9; }
.bmd--unknown     { background: #CC0000; color: #fff; }
.bmd--open-ended  { background: #CC3700; color: #fff; }
.bmd--very-wide   { background: #C04B35; color: #fff; }
.bmd--wide        { background: #ffa500; color: #333; }
.bmd--just-year   { background: #9acd32; color: #333; }
.bmd--narrow      { background: #ffff00; color: #333; }
.bmd--approx      { background: #98fb98; color: #1a3a00; }
.bmd--exact       { background: #7cfc00; color: #1a3a00; }
.bmd--no-spouse   { background: #ffb6c1; color: #333; }
.bmd--no-partner  { background: #f08080; color: #333; }
.bmd--no-marriage { background: #b22222; color: #fff; }
.bmd--living      { background: #f5f5f5; color: #f5f5f5; }

/* ── Log viewer level colours ───────────────────────── */
.log-level-information .log-level-badge { color: #2196f3; }
.log-level-warning .log-level-badge     { color: #ff9800; }
.log-level-error .log-level-badge       { color: #f44336; }
.log-level-critical .log-level-badge    { color: #fff; background: #f44336; border-radius: 2px; }
.log-level-error,
.log-level-critical { background: rgba(244, 67, 54, 0.06); }
.log-level-warning  { background: rgba(255, 152, 0, 0.06); }
.log-exception      { background: rgba(244, 67, 54, 0.08); color: #c62828; }