/* NIHOA Theme — token-driven (issue #303).
   ---------------------------------------------------------------------------
   TWO LAYERS of custom properties:

     Brand tokens   (--nihoa-*)  — stable identity colours. Never themed.
     Semantic tokens (--surface*, --text*, --border) — what components consume.

   The DARK values here are the defaults; the light theme overrides ONLY the
   semantic layer via html[data-theme="light"] near the end of this file. New
   CSS must consume SEMANTIC tokens, never raw hex, or it will not theme.
   --------------------------------------------------------------------------- */
:root {
    /* Brand — identity, not theme */
    --nihoa-primary: #0B1426;
    --nihoa-secondary: #1E3A5F;
    --nihoa-accent: #FFD700;
    --nihoa-danger: #DC3545;
    --nihoa-success: #28A745;
    --nihoa-warning: #FFC107;
    --nihoa-light: #F8F9FA;
    --nihoa-dark: #121212;

    /* Semantic — THEMED. Dark defaults. */
    --page-bg-a: #0B1426;          /* body gradient start */
    --page-bg-b: #1A1A1A;          /* body gradient end   */
    --surface-card: #1A1A1A;       /* cards, modals, offcanvas */
    --surface-2: #16233D;          /* headers, tiles, table heads */
    --surface-3: #1B2331;          /* callouts, footers, page-link */
    --surface-input: #222C3D;      /* form controls */
    --text: #FFFFFF;               /* headings / primary text */
    --text-soft: #E4E9F1;          /* body copy on surfaces */
    --text-mid: #C8CFDC;           /* secondary copy */
    --text-muted-2: #A0A0A0;       /* de-emphasised */
    --border: #2A3441;
    --accent-on-dark: var(--nihoa-accent);  /* gold; navy in light theme for a11y */
    --on-accent: #0B1426;          /* text sat on a gold fill */

    /* Back-compat aliases — older rules reference these names */
    --nihoa-border: var(--border);
    --nihoa-card-bg: var(--surface-card);
    --nihoa-text-muted: var(--text-muted-2);
}

* {
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, var(--page-bg-a) 0%, var(--page-bg-b) 100%);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #ffffff;
    min-height: 100vh;
}

/* Navigation Styling */
.navbar {
    background: linear-gradient(90deg, var(--nihoa-primary) 0%, var(--nihoa-secondary) 100%) !important;
    border-bottom: 2px solid var(--nihoa-accent);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);

    /* Issue #236 — do NOT reintroduce backdrop-filter here.
       A non-none backdrop-filter creates a stacking context on .navbar, which
       traps the child .dropdown-menu (z-index 1000) inside it. The member nav
       carries no sticky-top, so the navbar sits at z-index auto and .hero-content
       (z-index 2) painted straight over the open Admin dropdown. The blur was
       invisible anyway — the gradient above is opaque. The explicit z-index below
       keeps the nav and its dropdowns above page content regardless. */
    position: relative;
    z-index: 1030;
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--nihoa-accent) !important;
}

.navbar-nav .nav-link {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--nihoa-accent) !important;
    transform: translateY(-1px);
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--nihoa-accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* Hero Section */
.nihoa-hero {
    background: linear-gradient(135deg, rgba(11,20,38,0.95) 0%, rgba(30,58,95,0.95) 100%), 
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%23ffffff" fill-opacity="0.05" points="0,1000 1000,0 1000,1000"/></svg>');
    color: white;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.nihoa-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,215,0,0.1) 0%, transparent 70%);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    /* NO text-shadow here: with background-clip:text + transparent fill the
       shadow renders THROUGH the letters and muddies the gradient. */
    background: linear-gradient(45deg, #ffffff, var(--nihoa-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Cards */
.card {
    background: var(--nihoa-card-bg);
    border: 1px solid var(--nihoa-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--nihoa-accent) 0%, var(--nihoa-secondary) 100%);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(255,215,0,0.2);
    border-color: var(--nihoa-accent);
}

.card-header {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%);
    color: white;
    font-weight: 600;
    border-bottom: 2px solid var(--nihoa-accent);
    padding: 1.25rem;
}

.card-body {
    padding: 1.5rem;
    color: #ffffff;
}

/* Registration Period Card */
.registration-card {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, #2E5D31 100%);
    border: 2px solid var(--nihoa-accent);
    position: relative;
    overflow: hidden;
}

.registration-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,215,0,0.1), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(300%) rotate(45deg); }
}

/* Stats Cards */
.stat-card {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, var(--nihoa-accent), transparent, var(--nihoa-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover::before {
    opacity: 0.1;
}

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--nihoa-accent);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Buttons */
.btn-nihoa-primary {
    background: linear-gradient(135deg, var(--nihoa-accent) 0%, #FFB000 100%);
    border: none;
    color: var(--nihoa-primary);
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255,215,0,0.3);
}

.btn-nihoa-primary:hover {
    background: linear-gradient(135deg, #FFB000 0%, var(--nihoa-accent) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,215,0,0.4);
    color: var(--nihoa-primary);
}

.btn-nihoa-outline {
    border: 2px solid var(--nihoa-accent);
    color: var(--nihoa-accent);
    background: transparent;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-nihoa-outline:hover {
    background: var(--nihoa-accent);
    color: var(--nihoa-primary);
    transform: translateY(-2px);
}

/* Feature Cards */
.feature-card {
    text-align: center;
    padding: 2rem;
    height: 100%;
}

.feature-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: var(--nihoa-accent);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--nihoa-accent);
}

/* Status Badges */
.badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-open {
    background: linear-gradient(135deg, var(--nihoa-success) 0%, #20C997 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(40,167,69,0.3);
}

/* Container Adjustments */
.container-fluid {
    max-width: 1400px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .nihoa-hero {
        padding: 2rem 0;
    }
}

/* Loading Animation */
.fade-in {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--nihoa-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--nihoa-accent);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #FFB000;
}

/* ---------------------------------------------------------------------------
   Issue #233 — dark-theme text contrast.

   The :root block at the top of this file declares --nihoa-text-muted but
   nothing ever consumed it, so Bootstrap's own .text-muted / .text-secondary
   kept winning. Those resolve against Bootstrap's LIGHT-theme body colour
   (near-black), and this theme paints a near-black background — so every
   "muted" string on the site rendered dark-on-dark and was only legible once
   you text-selected it. "text-muted" appears in ~90 view files, so overriding
   the class here is what actually fixes them all rather than patching views.

   #A0A0A0 on the darkest surface (#121212) is ~7.4:1 — clears WCAG AA (4.5:1)
   and AAA (7:1) for body text.
   --------------------------------------------------------------------------- */
.text-muted,
.text-secondary,
small.text-muted,
.card .text-muted,
.card-body .text-muted,
.list-group-item .text-muted,
.dropdown-item .text-muted {
    color: var(--nihoa-text-muted) !important;
}

/* Bootstrap utility opacity classes stack on top of an already-dim colour and
   push it back under the contrast floor. Raise the floor for the two we use. */
.opacity-75 { opacity: 0.9 !important; }
.opacity-50 { opacity: 0.75 !important; }

/* .text-light at reduced opacity inside the hero was the other offender
   (hero subtitle, "NIHOA Member"). Keep it genuinely light. */
.nihoa-hero .text-light,
.nihoa-hero .lead {
    color: #E8E8E8 !important;
}

/* Empty-state blocks (no claims / no notifications) lean on .text-muted for
   both the headline and the sub-line; give the headline a bit more presence
   so the two are distinguishable. */
.empty-state h5,
.empty-state h6,
.text-center > .text-muted + .text-muted {
    color: var(--text-mid) !important;
}

/* Definition lists on the dashboard Account Information card. */
dl dt { color: #FFFFFF; }
dl dd { color: #E0E0E0; }

/* ---------------------------------------------------------------------------
   Issue #304 — site-wide feedback bubble.

   Bottom-LEFT on purpose. The audit already recorded that a bottom-right
   launcher eats the controls sites habitually put there, and this site has a
   floating widget in that corner already (visible in Weldon's screenshots).
   --------------------------------------------------------------------------- */
.nihoa-fb-bubble {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1040; /* above content, below the navbar's 1030 dropdowns + modals */
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .95rem;
    border: 1px solid rgba(255, 215, 0, .5);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%);
    color: var(--nihoa-accent);
    font-weight: 600;
    font-size: .85rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.nihoa-fb-bubble:hover {
    background: linear-gradient(135deg, #24466f 0%, var(--surface-2) 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}

.nihoa-fb-bubble:focus-visible {
    outline: 3px solid var(--nihoa-accent);
    outline-offset: 3px;
}

/* Collapse to a circular icon on small screens so it never covers content. */
@media (max-width: 575.98px) {
    .nihoa-fb-bubble { padding: .7rem; border-radius: 50%; }
    .nihoa-fb-bubble-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nihoa-fb-bubble, .nihoa-fb-bubble:hover { transition: none; transform: none; }
}

/* Never let it appear on a printed page (e.g. the membership card). */
@media print { .nihoa-fb-bubble { display: none !important; } }

/* ---------------------------------------------------------------------------
   Issue #301 — portal switcher tiles on the member dashboard.
   --------------------------------------------------------------------------- */
.portal-tile {
    background: var(--surface-2);
    border: 1px solid var(--nihoa-border);
    border-radius: 10px;
    color: var(--text-soft);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.portal-tile i { color: var(--nihoa-accent); width: 1.1rem; text-align: center; }
.portal-tile:hover {
    background: #1B2B49;
    border-color: var(--nihoa-accent);
    color: #FFFFFF;
    transform: translateY(-2px);
}
.portal-tile:focus-visible {
    outline: 3px solid var(--nihoa-accent);
    outline-offset: 2px;
}
/* The user's primary destination reads louder than the shortcuts. */
.portal-tile--accent { border-color: rgba(255, 215, 0, .45); background: #1A2B4A; }

@media (prefers-reduced-motion: reduce) {
    .portal-tile, .portal-tile:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   Issue #302 — Registration Status card readability.

   The pale-amber alert-warning block was a large light slab dropped into a
   dark card, with a gold button sitting on gold-tinted background. Recoloured
   as a dark callout with an amber left rule: same semantic weight, far less
   visual shouting, and the PAY NOW button regains its contrast.
   --------------------------------------------------------------------------- */
.card .alert-warning,
.card .alert-info,
.card .alert-success,
.card .alert-danger {
    background-color: var(--surface-3);
    border: 1px solid var(--nihoa-border);
    border-left: 4px solid var(--nihoa-accent);
    color: var(--text-soft);
}
.card .alert-warning { border-left-color: var(--nihoa-warning); }
.card .alert-info    { border-left-color: #4FC3F7; }
.card .alert-success { border-left-color: var(--nihoa-success); }
.card .alert-danger  { border-left-color: var(--nihoa-danger); }

.card .alert-warning strong, .card .alert-warning i { color: var(--nihoa-warning); }
.card .alert-info strong,    .card .alert-info i    { color: #4FC3F7; }
.card .alert-success strong, .card .alert-success i { color: #5CD97B; }
.card .alert-danger strong,  .card .alert-danger i  { color: #FF6B7A; }

/* ---------------------------------------------------------------------------
   Issue #300 — dark theme for the remaining Bootstrap components.

   The theme was only ever half-applied: custom.css styled cards, buttons and
   the navbar, so anything else rendered stock LIGHT on a near-black page. An
   audit of what the views actually use found modals (3 files), close buttons
   (20), tables (67), breadcrumbs (38), plus accordion / offcanvas / nav-tabs /
   progress — none of them styled. That is why fixing colours kept feeling like
   whack-a-mole: each report was a different unstyled component, not a new bug.

   This covers every component the codebase actually uses. Alerts are left
   ALONE deliberately — their semantic tints (pale amber/blue with dark text)
   are readable and intentional; recolouring 104 files' worth of alerts is an
   aesthetic decision, not a legibility fix.

   The systemic end-state is `data-bs-theme="dark"` on <html>, which makes
   Bootstrap 5.3 do all of this natively. Not flipped here: it changes every
   component at once and there was a demo the same evening. See the issue.
   --------------------------------------------------------------------------- */

/* MODALS — the white box reported on the simulated-payment dialog. */
.modal-content {
    background-color: var(--nihoa-card-bg);
    border: 1px solid var(--nihoa-border);
    color: #FFFFFF;
}

.modal-header {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%);
    border-bottom: 2px solid var(--nihoa-accent);
    color: #FFFFFF;
}

.modal-title { color: #FFFFFF; }

.modal-body { color: var(--text-soft); }

.modal-footer {
    background-color: #161E2B;
    border-top: 1px solid var(--nihoa-border);
}

/* CLOSE BUTTONS — the default glyph is near-black, so it vanishes on every
   dark surface. Invert it globally rather than relying on each view
   remembering to add .btn-close-white. */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .8;
}
.btn-close:hover { opacity: 1; }
.btn-close:focus-visible {
    outline: 2px solid var(--nihoa-accent);
    outline-offset: 2px;
    box-shadow: none;
}
/* Alerts keep their light tint, so a close button inside one must stay dark. */
.alert .btn-close { filter: none; }

/* TABLES — used in 67 view files; the single biggest source of white blocks. */
.table {
    --bs-table-color: var(--text-soft);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--nihoa-border);
    --bs-table-striped-color: var(--text-soft);
    --bs-table-striped-bg: rgba(255, 255, 255, .035);
    --bs-table-hover-color: #FFFFFF;
    --bs-table-hover-bg: rgba(255, 215, 0, .07);
    --bs-table-active-color: #FFFFFF;
    --bs-table-active-bg: rgba(255, 215, 0, .10);
    color: var(--text-soft);
    border-color: var(--nihoa-border);
}

.table > thead {
    color: var(--nihoa-accent);
    border-bottom: 2px solid var(--nihoa-border);
}

.table > thead th {
    background-color: var(--surface-2);
    color: var(--nihoa-accent);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .04em;
}

.table > tbody td, .table > tbody th { border-color: var(--nihoa-border); }

/* .table-light headers appear in several admin views — repaint rather than
   leave a white band mid-page. */
.table-light, .table-light > th, .table-light > td {
    --bs-table-bg: var(--surface-2);
    --bs-table-color: var(--nihoa-accent);
    background-color: var(--surface-2) !important;
    color: var(--nihoa-accent) !important;
    border-color: var(--nihoa-border) !important;
}

/* DataTables chrome (admin lists). */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--text-mid); }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-mid) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--nihoa-accent) !important;
    border-color: var(--nihoa-accent) !important;
    color: var(--nihoa-primary) !important;
}

/* BREADCRUMBS — 38 view files. */
.breadcrumb { background-color: transparent; padding-left: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: #6C7A91; }
.breadcrumb-item.active { color: var(--nihoa-text-muted); }

/* PAGINATION */
.page-link {
    background-color: var(--surface-3);
    border-color: var(--nihoa-border);
    color: #D6DDE9;
}
.page-link:hover { background-color: #24304a; color: var(--nihoa-accent); }
.page-item.active .page-link {
    background-color: var(--nihoa-accent);
    border-color: var(--nihoa-accent);
    color: var(--nihoa-primary);
}
.page-item.disabled .page-link { background-color: #151C27; color: #6C7A91; }

/* ACCORDION */
.accordion { --bs-accordion-bg: var(--nihoa-card-bg); }
.accordion-item {
    background-color: var(--nihoa-card-bg);
    border-color: var(--nihoa-border);
    color: var(--text-soft);
}
.accordion-button {
    background-color: var(--surface-2);
    color: #FFFFFF;
}
.accordion-button:not(.collapsed) {
    background-color: var(--nihoa-secondary);
    color: var(--nihoa-accent);
    box-shadow: none;
}
.accordion-button::after { filter: invert(1) grayscale(100%) brightness(180%); }
.accordion-body { background-color: var(--nihoa-card-bg); color: var(--text-soft); }

/* OFFCANVAS */
.offcanvas {
    background-color: var(--nihoa-card-bg);
    color: var(--text-soft);
}
.offcanvas-header { border-bottom: 1px solid var(--nihoa-border); }

/* TABS */
.nav-tabs { border-bottom-color: var(--nihoa-border); }
.nav-tabs .nav-link { color: var(--text-mid); }
.nav-tabs .nav-link:hover { border-color: transparent transparent var(--nihoa-accent); color: var(--nihoa-accent); }
.nav-tabs .nav-link.active {
    background-color: var(--nihoa-card-bg);
    border-color: var(--nihoa-border) var(--nihoa-border) var(--nihoa-card-bg);
    color: var(--nihoa-accent);
}

/* PROGRESS */
.progress { background-color: var(--surface-3); }

/* Generic light-surface utilities that a few views lean on. */
.bg-white, .bg-light {
    background-color: var(--nihoa-card-bg) !important;
    color: var(--text-soft) !important;
}
.text-dark { color: var(--text-soft) !important; }
/* ...but never inside an alert or a badge, where dark-on-light is correct. */
.alert .text-dark, .badge.text-dark { color: #212529 !important; }
.alert.bg-light, .alert.bg-white { background-color: inherit !important; }

/* ---------------------------------------------------------------------------
   Issue #262 — form controls on the dark theme.

   custom.css previously styled NO form controls, so every input site-wide was
   stock Bootstrap: white box, dark text. layouts/auth.php carried its own
   private copy of dark input styles, which is why login looked half-right and
   everywhere else (registration, profile, admin forms) did not.

   Two things defeated even the auth page's own styling:
     1. `.form-floating > label::after` is a chip Bootstrap paints in
        --bs-body-bg (white) to cut the input border. The auth input background
        is SEMI-TRANSPARENT, so that white chip showed straight through — the
        white block reported on /auth/two-factor.
     2. Chrome stamps `background-color: rgb(232,240,254)` on autofilled inputs
        with internal !important that author rules cannot beat. The only lever
        is an inset box-shadow plus -webkit-text-fill-color.
   --------------------------------------------------------------------------- */
.form-control,
.form-select,
textarea.form-control {
    background-color: var(--surface-input);
    border: 1px solid var(--nihoa-border);
    color: #FFFFFF;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    background-color: #27334799;
    border-color: var(--nihoa-accent);
    color: #FFFFFF;
    box-shadow: 0 0 0 .2rem rgba(255, 215, 0, .25);
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: #93A1B8;
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--surface-3);
    color: #A9B4C6;
}

/* Bootstrap renders select option lists with the OS palette; force dark so the
   open list isn't white-on-white. */
.form-select option { background-color: var(--surface-input); color: #FFFFFF; }

.input-group-text {
    background-color: #2A3441;
    border-color: var(--nihoa-border);
    color: var(--text-soft);
}

.form-check-input {
    background-color: var(--surface-input);
    border-color: #46536A;
}
.form-check-input:checked {
    background-color: var(--nihoa-accent);
    border-color: var(--nihoa-accent);
}
.form-check-input:focus {
    border-color: var(--nihoa-accent);
    box-shadow: 0 0 0 .2rem rgba(255, 215, 0, .25);
}

.form-label,
.col-form-label,
.form-check-label { color: var(--text-soft); }

.form-text { color: var(--nihoa-text-muted); }

/* THE WHITE BLOCK — kill the label's backing chip and make the floated label
   legible against the dark input. */
.form-floating > label::after {
    background-color: transparent !important;
}
.form-floating > label { color: #A9B4C6; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--nihoa-accent);
}

/* CHROME AUTOFILL — the inset shadow is the only way to repaint the box. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-input) inset !important;
    box-shadow: 0 0 0 1000px var(--surface-input) inset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    caret-color: #FFFFFF;
    transition: background-color 9999s ease-in-out 0s;
}

/* Firefox equivalent. */
input:autofill, textarea:autofill {
    background-color: var(--surface-input) !important;
    color: #FFFFFF !important;
}

/* ---------------------------------------------------------------------------
   Issue #261 — NAV EXPERIMENT v2 (opt-in preview, ?nav=v2).
   Tier 1 main bar · tier 2 member strip · tier 3 admin sidebar.
   All scoped to .navv2-* so removing the experiment is a clean delete.
   --------------------------------------------------------------------------- */

/* Tier 2 — member strip. Deliberately quieter than the main bar: shorter,
   smaller type, no gradient. It must read as subordinate, otherwise you just
   have two competing site navs stacked on top of each other. */
.navv2-member {
    background: var(--surface-2);
    border-bottom: 1px solid rgba(255, 215, 0, .28);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.navv2-member-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem;
    margin: 0;
    padding: 0;
}

.navv2-member-nav .nav-link {
    color: rgba(255,255,255,.82) !important;
    font-size: .875rem;
    font-weight: 500;
    padding: .45rem .7rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.navv2-member-nav .nav-link:hover {
    color: var(--nihoa-accent) !important;
}

.navv2-member-nav .nav-link.active {
    color: var(--nihoa-accent) !important;
    border-bottom-color: var(--nihoa-accent);
}

.navv2-member-nav .nav-link:focus-visible {
    outline: 2px solid var(--nihoa-accent);
    outline-offset: -2px;
}

/* Preview banner — unmissable on purpose, so an experiment can never be
   mistaken for the shipped nav. */
.navv2-flag {
    background: var(--nihoa-warning);
    color: #212529;
    font-size: .8rem;
    padding: .3rem 0;
}
.navv2-flag a { color: #212529; font-weight: 700; }

/* Tier 3 — admin sidebar. */
.navv2-sidebar {
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--nihoa-primary) 100%);
    border-right: 1px solid rgba(255,215,0,.22);
    width: 232px;
    flex: 0 0 232px;
    padding: .75rem 0 2rem;
    align-self: stretch;
}

.navv2-sidebar-head {
    color: var(--nihoa-accent);
    font-weight: 700;
    letter-spacing: .04em;
    padding: .5rem 1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: .5rem;
}

.navv2-sidebar-nav { list-style: none; margin: 0; padding: 0; }

.navv2-sidebar-group {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: #8FA0BC;
    padding: .95rem 1rem .3rem;
    font-weight: 700;
}

.navv2-side-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .9rem;
    border-left: 3px solid transparent;
}

.navv2-side-link i { width: 1.05rem; text-align: center; opacity: .85; }

.navv2-side-link:hover {
    background: rgba(255,255,255,.06);
    color: var(--nihoa-accent);
}

.navv2-side-link.active {
    background: rgba(255,215,0,.10);
    color: var(--nihoa-accent);
    border-left-color: var(--nihoa-accent);
    font-weight: 600;
}

.navv2-side-link:focus-visible {
    outline: 2px solid var(--nihoa-accent);
    outline-offset: -2px;
}

/* Two-column admin shell. */
.navv2-admin-shell { display: flex; align-items: stretch; min-height: 60vh; }
.navv2-admin-main  { flex: 1 1 auto; min-width: 0; }

/* Under lg the sidebar would eat a phone screen — turn it into a horizontal
   scroller above the content instead of a fixed column. */
@media (max-width: 991.98px) {
    .navv2-admin-shell { display: block; }
    .navv2-sidebar {
        width: 100%;
        flex: none;
        border-right: none;
        border-bottom: 1px solid rgba(255,215,0,.22);
        padding-bottom: .5rem;
    }
    .navv2-sidebar-nav {
        display: flex;
        overflow-x: auto;
        gap: .2rem;
        -webkit-overflow-scrolling: touch;
    }
    .navv2-sidebar-group { display: none; }
    .navv2-side-link {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: .5rem .8rem;
    }
    .navv2-side-link.active { border-left: none; border-bottom-color: var(--nihoa-accent); }
}

/* ---------------------------------------------------------------------------
   Issue #259 — clickable admin dashboard stat cards.

   These were <div>s; they are now <a>s, which needs three things a div never
   did: an explicit text colour (an <a> would otherwise inherit link blue over
   the gradients), a pointer + hover affordance so it reads as clickable, and a
   real keyboard focus ring — the audit flagged that no custom control on this
   site has one.
   --------------------------------------------------------------------------- */
.stat-card-link {
    display: block;
    color: #FFFFFF !important;
    cursor: pointer;
}

.stat-card-link:hover,
.stat-card-link:focus {
    color: #FFFFFF !important;
    text-decoration: none;
}

/* The base .card already lifts on hover; deepen it slightly so the difference
   between "decorative panel" and "this goes somewhere" is legible. */
.stat-card-link:hover {
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.45);
}

/* Keyboard users get a visible target. Gold reads against every one of the
   four card gradients. */
.stat-card-link:focus-visible {
    outline: 3px solid var(--nihoa-accent);
    outline-offset: 3px;
}

/* Arrow cue — parked and faded until hover/focus so it doesn't add noise. */
.stat-card-link .stat-go {
    position: absolute;
    right: .9rem;
    bottom: .75rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .2s ease;
    font-size: .85rem;
}

.stat-card-link:hover .stat-go,
.stat-card-link:focus-visible .stat-go {
    opacity: .85;
    transform: translateX(0);
}

/* Respect users who have asked the OS to stop moving things. */
@media (prefers-reduced-motion: reduce) {
    .stat-card-link .stat-go { transition: none; transform: none; }
    .stat-card-link:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Issue #253 — printable NIHOA membership card.

   Sized to CR80 (the real ID-card standard, 3.375in x 2.125in) so a printed
   sheet can be trimmed to something that fits a wallet or a referee's kit bag.
   Uses `in` units on purpose: at print time physical units are exact, whereas
   px depends on the browser's DPI assumption.
   --------------------------------------------------------------------------- */
.nihoa-idcard {
    width: 3.375in;
    height: 2.125in;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.16in 0.18in;
    border-radius: 12px;
    /* LIGHT on purpose (toner-friendly, and it mirrors the PDF exactly so the
       on-screen preview is WYSIWYG). A real credential looks like this. */
    background: #FFFFFF;
    border: 1.5px solid var(--nihoa-secondary);
    border-top: 5px solid #C8A200;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color: #10182B;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    overflow: hidden;
}

.nihoa-idcard-top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem;
}
.nihoa-idcard-brand { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.nihoa-idcard-brand > i { color: var(--nihoa-secondary); font-size: 1.35rem; flex: 0 0 auto; }
.nihoa-idcard-wordmark {
    color: var(--nihoa-secondary); font-weight: 800; font-size: 1.15rem;
    letter-spacing: .06em; line-height: 1;
}
.nihoa-idcard-org {
    font-size: .44rem; text-transform: uppercase; letter-spacing: .07em;
    color: #4A5568; line-height: 1.25; margin-top: .1rem;
}

.nihoa-idcard-status {
    flex: 0 0 auto;
    font-size: .46rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: .18rem .42rem; border-radius: 999px; white-space: nowrap;
}
.nihoa-idcard.is-active  .nihoa-idcard-status { background: #fff; color: #12551F; border: 1px solid #12551F; }
.nihoa-idcard.is-pending .nihoa-idcard-status { background: var(--nihoa-warning); color: #212529; }
.nihoa-idcard.is-void    .nihoa-idcard-status { background: #333; color: #fff; }
/* A card that isn't currently valid should read that way at a glance. */
.nihoa-idcard.is-void { border-color: rgba(220, 53, 69, .8); filter: grayscale(.35); }

.nihoa-idcard-body { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.nihoa-idcard-photo {
    width: .82in; height: .82in; flex: 0 0 auto;
    border-radius: 8px; object-fit: cover;
    border: 2px solid var(--nihoa-secondary); background: #EEF1F6;
}
.nihoa-idcard-photo--empty {
    display: flex; align-items: center; justify-content: center;
    color: #9AA5B8; font-size: 1.5rem;
}
.nihoa-idcard-details { min-width: 0; }
.nihoa-idcard-name {
    font-size: .95rem; font-weight: 700; line-height: 1.1; margin-bottom: .18rem;
    color: #10182B;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nihoa-idcard-meta {
    display: grid; grid-template-columns: auto 1fr; gap: 0 .4rem; margin: 0;
}
.nihoa-idcard-meta dt {
    font-size: .42rem; text-transform: uppercase; letter-spacing: .08em;
    color: #5A6478; font-weight: 600; align-self: center;
}
.nihoa-idcard-meta dd {
    font-size: .58rem; margin: 0; color: #10182B; align-self: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nihoa-idcard-meta dd.mono {
    font-family: 'Courier New', monospace; font-weight: 700;
    color: var(--nihoa-secondary); letter-spacing: .06em;
}

.nihoa-idcard-foot {
    display: flex; justify-content: space-between; gap: .4rem;
    font-size: .4rem; letter-spacing: .05em; color: #5A6478;
    border-top: 1px solid #C9CFDC; padding-top: .12rem;
}

/* Narrow phones: let the card shrink proportionally on screen. Print sizing
   below is unaffected — a printed card must stay physically correct. */
@media (max-width: 420px) {
    .nihoa-idcard { transform: scale(.86); transform-origin: top left; margin-bottom: -.3in; }
}

/* Printing is handled by the real PDF at /member/card.pdf (issue #253), so
   the browser-print stylesheet that used to live here has been removed — two
   print paths that could drift apart is one too many. */

/* ---------------------------------------------------------------------------
   Issue #257 — card headers carrying a Bootstrap bg-* utility.

   .card-header above sets a dark navy gradient. A view that writes
   `card-header bg-warning text-dark` loses the BACKGROUND fight (same
   specificity, this file loads after Bootstrap) but KEEPS text-dark — so the
   heading rendered near-black on the dark gradient and was invisible until
   you selected it (reported on /member/profile "Security").

   Two intents, two treatments — deliberately NOT one blanket rule:

   * bg-warning — the author meant "look here" (the 2FA policy notice, the API
     token warning). Honour it: real amber panel, dark text. Reads as intended
     emphasis rather than a styling accident.

   * bg-light — 11 section headers inside the admin chapter forms/views,
     written against the old light theme. Letting those win would drop eleven
     white bars into dark cards. Keep the dark gradient and just correct the
     foreground, so they match every other card header on the site.
   --------------------------------------------------------------------------- */
.card-header.bg-warning {
    background: var(--nihoa-warning) !important;
    border-bottom-color: var(--nihoa-accent);
}
.card-header.bg-warning,
.card-header.bg-warning h1, .card-header.bg-warning h2, .card-header.bg-warning h3,
.card-header.bg-warning h4, .card-header.bg-warning h5, .card-header.bg-warning h6,
.card-header.bg-warning strong, .card-header.bg-warning i {
    color: #212529 !important;
}

/* bg-light headers: neutralise back into the dark theme. */
.card-header.bg-light {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%) !important;
}
.card-header.bg-light,
.card-header.bg-light strong,
.card-header.bg-light h1, .card-header.bg-light h2, .card-header.bg-light h3,
.card-header.bg-light h4, .card-header.bg-light h5, .card-header.bg-light h6 {
    color: #FFFFFF !important;
}

/* `bg-nihoa-primary` (public/vendors.php) was never defined anywhere — the
   header fell back to the default gradient, which happens to look right, but
   define it so the intent is real rather than accidental. */
.bg-nihoa-primary {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%) !important;
}

/* ---------------------------------------------------------------------------
   Issue #238 — admin top bar. The items were wrapping onto a second line and
   "Claims Queue" broke across two lines around its count badge. body carries
   .admin-layout (app/Views/layouts/admin.php), so scope tightly to admin.
   --------------------------------------------------------------------------- */
.admin-layout .navbar .navbar-nav .nav-link {
    white-space: nowrap;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.admin-layout .navbar .navbar-nav .nav-link .badge {
    vertical-align: middle;
    font-size: 0.7em;
}

/* Issue #246 — REGRESSION FIX. This block previously forced
   `flex-wrap: nowrap` on .navbar-collapse and .navbar-nav at >=992px. That did
   stop the two-line wrap, but it converted the overflow into a horizontal one:
   with 12 top-level items the bar ran clean off the right edge of the page and
   put a scrollbar on the document. The real cure was reducing the item count
   (Governance / Finance / Setup dropdowns in admin/partials/nav.php) plus
   navbar-expand-xl, NOT forbidding the wrap. Wrapping is left as the safe
   last-resort behaviour — a second line beats content you cannot reach.
   Keep `white-space: nowrap` on the links above: that is what stops an
   individual label like "Claims Queue" breaking around its count badge. */
.admin-layout .navbar-collapse,
.admin-layout .navbar .navbar-nav {
    flex-wrap: wrap;
}

/* Absolute backstop: the admin bar must never make the page scroll sideways. */
.admin-layout .navbar > .container-fluid {
    max-width: 100%;
    overflow-x: clip;
}

/* Dropdown panels sit on the dark theme — make sure their own text is legible
   and not inheriting the muted override above as a hover colour. */
.dropdown-menu-dark .dropdown-item { color: #E9ECEF; }

/* Issue #262 — section headers inside dark dropdowns. Bootstrap's default
   .dropdown-header is a low-contrast grey that vanishes on this palette. */
.dropdown-menu-dark .dropdown-header {
    color: var(--nihoa-accent);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    padding-top: .6rem;
}
.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
    background-color: var(--nihoa-secondary);
    color: var(--nihoa-accent);
}
/* ===========================================================================
   Issue #303 — LIGHT THEME.
   Activated by html[data-theme="light"] (set in the layouts from the session;
   toggle lives in the account dropdown). data-bs-theme is set to the same
   value, so Bootstrap 5.3 recolours its own internals natively.

   Strategy: retheme the SEMANTIC tokens, then counter the handful of base
   rules that carry raw dark values or !important. Brand stays brand: navy
   navbar, gold primary buttons — a theme changes the paper, not the identity.
   =========================================================================== */
html[data-theme="light"] {
    --page-bg-a: #F2F4F8;
    --page-bg-b: #E9EDF3;
    --surface-card: #FFFFFF;
    --surface-2: #EDF1F7;
    --surface-3: #F5F7FA;
    --surface-input: #FFFFFF;
    --text: #16202E;
    --text-soft: #253044;
    --text-mid: #46536A;
    --text-muted-2: #5A6478;
    --border: #D4DAE4;
    --on-accent: #0B1426;
}

/* Base text colours that were raw white in the dark rules. */
html[data-theme="light"] body { color: var(--text) !important; }
html[data-theme="light"] .card-body { color: var(--text-soft); }
html[data-theme="light"] .card-header,
html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-title { color: #FFFFFF; } /* navy gradient headers keep white text */
html[data-theme="light"] .modal-body { color: var(--text-soft); }
html[data-theme="light"] .card { box-shadow: 0 4px 18px rgba(16, 32, 46, .10); }

/* Muted/contrast overrides that used !important in the dark base. */
html[data-theme="light"] .text-muted,
html[data-theme="light"] .text-secondary,
html[data-theme="light"] .card .text-muted,
html[data-theme="light"] .card-body .text-muted {
    color: var(--text-muted-2) !important;
}
html[data-theme="light"] .text-dark { color: var(--text-soft) !important; }
html[data-theme="light"] .bg-white,
html[data-theme="light"] .bg-light {
    background-color: var(--surface-card) !important;
    color: var(--text-soft) !important;
}

/* Headings inside dark-rule blocks (empty states etc.) */
html[data-theme="light"] .empty-state h5,
html[data-theme="light"] .empty-state h6,
html[data-theme="light"] dl dt { color: var(--text); }
html[data-theme="light"] dl dd { color: var(--text-soft); }
html[data-theme="light"] .nihoa-hero .text-light,
html[data-theme="light"] .nihoa-hero .lead { color: #E8E8E8 !important; } /* hero stays navy */

/* Forms — the dark base hardcoded its surfaces before tokens existed. */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] textarea.form-control {
    background-color: var(--surface-input);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus {
    background-color: #FFFFFF;
    color: var(--text);
}
html[data-theme="light"] .form-control::placeholder { color: #8A94A6; }
html[data-theme="light"] .form-select option { background-color: #FFFFFF; color: var(--text); }
html[data-theme="light"] .form-check-input { background-color: #FFFFFF; border-color: #A9B4C6; }
html[data-theme="light"] .form-label,
html[data-theme="light"] .col-form-label,
html[data-theme="light"] .form-check-label { color: var(--text-soft); }
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] textarea:-webkit-autofill,
html[data-theme="light"] select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
}

/* Tables */
html[data-theme="light"] .table {
    --bs-table-color: var(--text-soft);
    --bs-table-striped-color: var(--text-soft);
    --bs-table-striped-bg: rgba(16, 32, 46, .03);
    --bs-table-hover-color: var(--text);
    --bs-table-hover-bg: rgba(30, 58, 95, .08);
    color: var(--text-soft);
}
html[data-theme="light"] .table > thead th {
    background-color: var(--surface-2);
    color: var(--nihoa-secondary);
}

/* Dropdowns: keep the DARK panel deliberately — they hang from the navy
   navbar in both themes, and a light panel on a navy bar looks detached. */

/* Close button: back to Bootstrap's dark glyph on light surfaces. */
html[data-theme="light"] .btn-close { filter: none; opacity: .6; }
html[data-theme="light"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Breadcrumbs / pagination */
html[data-theme="light"] .breadcrumb-item.active { color: var(--text-muted-2); }
html[data-theme="light"] .page-link { background-color: #FFFFFF; border-color: var(--border); color: var(--text-soft); }
html[data-theme="light"] .page-link:hover { background-color: var(--surface-2); color: var(--nihoa-secondary); }

/* In-card callouts (issue #302 restyle) get light surfaces. */
html[data-theme="light"] .card .alert-warning,
html[data-theme="light"] .card .alert-info,
html[data-theme="light"] .card .alert-success,
html[data-theme="light"] .card .alert-danger {
    background-color: var(--surface-3);
    color: var(--text-soft);
}

/* Gold on white fails contrast — accent TEXT flips to brand navy in light
   mode. Gold FILLS (buttons, badges) keep navy text and stay as they are. */
html[data-theme="light"] .text-nihoa-accent { color: var(--nihoa-secondary) !important; }
html[data-theme="light"] .feature-icon,
html[data-theme="light"] .feature-title { color: var(--nihoa-secondary); }

/* Surfaces that KEEP their dark brand gradient in light mode (stat tiles, the
   registration-period card, the hero) must keep LIGHT text — the earlier
   override here painted the stat numbers navy-on-navy. */
html[data-theme="light"] .stat-card,
html[data-theme="light"] .stat-card .card-body,
html[data-theme="light"] .stat-label { color: #FFFFFF; }
html[data-theme="light"] .stat-number { color: var(--nihoa-accent); }
html[data-theme="light"] .registration-card,
html[data-theme="light"] .registration-card .card-body,
html[data-theme="light"] .registration-card strong,
html[data-theme="light"] .registration-card p { color: #FFFFFF; }
html[data-theme="light"] .nihoa-hero,
html[data-theme="light"] .nihoa-hero p { color: #FFFFFF; }
html[data-theme="light"] a { color: #17497A; }
html[data-theme="light"] a:hover { color: #B22234; }
html[data-theme="light"] .navbar a,
html[data-theme="light"] .dropdown-menu a { color: inherit; }
html[data-theme="light"] .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-info, .btn-warning) { color: var(--bs-btn-color); }
.btn-nihoa-primary { color: var(--on-accent) !important; }
html[data-theme="light"] .btn-nihoa-outline { color: var(--text); }
html[data-theme="light"] .nihoa-hero .btn-nihoa-outline,
html[data-theme="light"] .card-header .btn-nihoa-outline,
html[data-theme="light"] .registration-card .btn-nihoa-outline { color: var(--nihoa-light); }
html[data-theme="light"] .btn-nihoa-outline:hover { color: var(--on-accent); }

/* Member strip + sidebar (nav v2) on light paper. */
html[data-theme="light"] .navv2-member { background: var(--surface-2); }
html[data-theme="light"] .navv2-member-nav .nav-link { color: var(--text-soft) !important; }
html[data-theme="light"] .navv2-member-nav .nav-link.active,
html[data-theme="light"] .navv2-member-nav .nav-link:hover { color: var(--nihoa-secondary) !important; }
html[data-theme="light"] .navv2-sidebar { background: var(--surface-2); border-right-color: var(--border); }
html[data-theme="light"] .navv2-sidebar-head { color: var(--nihoa-secondary); border-bottom-color: var(--border); }
html[data-theme="light"] .navv2-side-link { color: var(--text-soft); }
html[data-theme="light"] .navv2-side-link:hover { background: rgba(30,58,95,.08); color: var(--nihoa-secondary); }
html[data-theme="light"] .navv2-side-link.active {
    background: rgba(30,58,95,.10);
    color: var(--nihoa-secondary);
    border-left-color: var(--nihoa-secondary);
}
html[data-theme="light"] .navv2-sidebar-group { color: var(--text-muted-2); }

/* Portal tiles / idcard already light-safe (card is white by design). */
html[data-theme="light"] .portal-tile { background: var(--surface-3); color: var(--text-soft); }
html[data-theme="light"] .portal-tile i { color: var(--nihoa-secondary); }
html[data-theme="light"] .portal-tile:hover { background: var(--surface-2); color: var(--text); border-color: var(--nihoa-secondary); }
html[data-theme="light"] .portal-tile--accent { background: var(--surface-2); border-color: rgba(30,58,95,.4); }

/* Scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--surface-2); }
/* Content-level phone layouts; table overflow stays inside the table region. */
.table-responsive { max-width: 100%; }
.table-responsive:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.membership-page { max-width: 960px; }
.membership-steps li { margin-bottom: 1.5rem; }
@media (max-width: 767.98px) {
    main .d-flex.justify-content-between { flex-wrap: wrap; gap: .75rem; }
    main .d-flex.justify-content-between > * { min-width: 0; max-width: 100%; }
    main .d-flex.gap-2, main .btn-group { flex-wrap: wrap; }
    main .btn, main .page-link { min-height: 44px; min-width: 44px; white-space: normal; }
    main .btn-group { gap: .25rem; }
    main h1, main h2, main h3, main h4, main h5, main .card-header { overflow-wrap: anywhere; }
    main h1, main h2 { font-size: 1.5rem; }
    main .hero-title { font-size: 2rem; }
    main .hero-content .btn { margin-bottom: .75rem; }
    main .table-responsive .table { min-width: 40rem; width: max-content; }
    main .table-responsive th { white-space: nowrap; }
    main .table-responsive td { min-width: 5rem; max-width: 24rem; overflow-wrap: break-word; word-break: normal; }
    main .dataTables_wrapper .pagination { flex-wrap: wrap; }
    .navv2-admin-main > .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    .nihoa-fb-bubble { position: static !important; display: block; margin: 1rem; width: 44px; height: 44px; }
}

/* ===========================================================================
   Ticket #2195 — SMS / text delivery (partials/sms_status, admin settings
   card, admin/settings/sms_log, admin/users/view consent note).
   Semantic tokens only; Bootstrap bg-* badges carry their own colours.
   =========================================================================== */
.sms-status { color: var(--text-mid); }
.sms-status--live { color: var(--text-soft); }
.sms-muted { color: var(--text-muted-2); }
.sms-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .6rem .85rem;
    height: 100%;
}
.sms-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted-2); }
.sms-stat-value { font-size: 1.25rem; font-weight: 600; color: var(--text); }
.sms-stat-cap { font-size: .8rem; font-weight: 400; color: var(--text-muted-2); }
.sms-summary { color: var(--text-soft); }
.sms-chip-count {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 .35em;
    margin-left: .25em;
    border-radius: 1em;
    font-size: .75em;
    line-height: 1.5;
    background: var(--surface-3);
    color: var(--text-mid);
    border: 1px solid var(--border);
}
.sms-log-filters .btn.active .sms-chip-count { background: var(--surface-card); color: var(--text); }
.sms-log-when, .sms-log-number { white-space: nowrap; }
.sms-log-user { color: var(--text); }
.sms-log-body { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.sms-log-sid { font-family: var(--bs-font-monospace, monospace); font-size: .85em; color: var(--text-mid); cursor: help; }
.sms-log-error { max-width: 16rem; overflow-wrap: anywhere; }
.sms-empty-icon { color: var(--text-muted-2); }
.sms-empty-title { color: var(--text-mid); }
.sms-consent { display: inline-block; margin-top: .25rem; }
.sms-consent--ok { color: var(--text-mid); }
/* Neutral badge for inbound rows. Bootstrap's bg-light/text-dark is remapped
   by the dark theme and becomes invisible, so build it from tokens. */
.sms-badge-neutral { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); }

/* === t2192: checked checkboxes / switches in the light theme ===
   The light override `html[data-theme="light"] .form-check-input` (white
   background) out-specifies `.form-check-input:checked`, so every ticked
   checkbox and every ON switch rendered as unticked / OFF in light mode. */
html[data-theme="light"] .form-check-input:checked {
    background-color: var(--nihoa-accent);
    border-color: var(--nihoa-accent);
}

/* === t2189 Payments setup (/admin/payments) — semantic tokens only === */
.pay-muted { color: var(--text-muted-2); }
.pay-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem 1rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: .5rem; }
.pay-summary-text { color: var(--text-soft); }
.pay-badge { display: inline-flex; align-items: center; padding: .3em .65em; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.2; border: 1px solid var(--border); background: var(--surface-3); color: var(--text); white-space: normal; }
.pay-badge-neutral { background: var(--surface-3); color: var(--text-mid); }
.pay-badge-ok { background: var(--nihoa-success); border-color: var(--nihoa-success); color: var(--nihoa-primary); } /* dark text on green: 5.9:1 (white was 2.97:1) */
.pay-badge-warn { background: var(--nihoa-warning); border-color: var(--nihoa-warning); color: var(--nihoa-primary); }
.pay-badge-bad { background: var(--surface-3); border: 2px solid var(--nihoa-danger); color: var(--text); } /* surface tokens: readable in both themes (white on red was 4.3:1) */
.pay-methods { display: grid; gap: .5rem; }
.pay-method { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .65rem .75rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: .5rem; }
.pay-method .pay-pos { width: 4.25rem; flex: 0 0 auto; }
.pay-method-name { flex: 1 1 12rem; min-width: 0; color: var(--text); }
.pay-method-name a { color: var(--text); font-weight: 600; text-decoration: none; }
.pay-method-name a:hover { text-decoration: underline; }
.pay-switch { flex: 0 0 auto; color: var(--text-soft); }
.pay-subhead { color: var(--text); text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.pay-checklist li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.pay-checklist li:last-child { border-bottom: 0; }
.pay-checklist li > i { margin-top: .2rem; }
.pay-checklist li strong { color: var(--text); }
.pay-checklist li small { display: block; color: var(--text-muted-2); overflow-wrap: anywhere; }
.pay-checklist li.is-ok > i { color: var(--nihoa-success); }
.pay-checklist li.is-bad > i { color: var(--nihoa-danger); }
.pay-checklist li.is-warn > i { color: var(--nihoa-warning); }
.pay-checklist li.is-off > i { color: var(--text-muted-2); }
.pay-events { display: flex; flex-wrap: wrap; gap: .35rem; }
.pay-events code { background: var(--surface-3); color: var(--text-soft); border: 1px solid var(--border); border-radius: .25rem; padding: .1rem .4rem; font-size: .78rem; overflow-wrap: anywhere; }
.pay-url { min-width: 0; font-size: .85rem; }
.pay-advanced summary { cursor: pointer; color: var(--text-mid); }
.pay-example { color: var(--text-soft); background: var(--surface-3); border: 1px dashed var(--border); border-radius: .375rem; padding: .5rem .75rem; }
.pay-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; padding: .75rem 0; background: var(--surface-card); border-top: 1px solid var(--border); }
@media (max-width: 575.98px) {
    .pay-savebar .btn { width: 100%; }
}
/* Light theme :checked fix — identical rule already applied by the t2192
   block above (integration: de-duplicated; both tickets found the same bug). */
html[data-theme="light"] .pay-page .input-group-text { background-color: var(--surface-2); border-color: var(--border); color: var(--text); }
/* === end t2189 === */

/* === t2184 A Mass email (/admin/mass-email, /email/unsubscribe) — semantic tokens only === */
.mm-page { min-width: 0; }
.mm-minw0 { min-width: 0; }
.mm-break { overflow-wrap: anywhere; word-break: break-word; }
.mm-muted { color: var(--text-muted-2); }
.mm-ok { color: var(--nihoa-success); }
.mm-warn { color: var(--nihoa-warning); }
.mm-bad { color: var(--nihoa-danger); }
.mm-legend { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: .35rem; }
.mm-badge { display: inline-flex; align-items: center; padding: .25em .6em; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.2; border: 1px solid var(--border); background: var(--surface-3); color: var(--text-mid); white-space: nowrap; }
.mm-badge-ok { background: var(--nihoa-success); border-color: var(--nihoa-success); color: var(--nihoa-primary); }
.mm-badge-warn { background: var(--nihoa-warning); border-color: var(--nihoa-warning); color: var(--nihoa-primary); }
.mm-badge-bad { background: var(--surface-3); border: 2px solid var(--nihoa-danger); color: var(--text); }
.mm-checks { display: grid; gap: .75rem; }
.mm-check { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-3); color: var(--text-soft); }
.mm-check > i { margin-top: .2rem; font-size: 1.05rem; }
.mm-check-ok > i { color: var(--nihoa-success); }
.mm-check-warn > i { color: var(--nihoa-warning); }
.mm-check-bad > i { color: var(--nihoa-danger); }
.mm-check-bad { border-color: var(--nihoa-danger); }
.mm-channels { display: grid; gap: .6rem; }
.mm-channel { padding: .55rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-3); color: var(--text-soft); }
.mm-stats { display: flex; flex-wrap: wrap; gap: .75rem; }
.mm-stat { flex: 1 1 7rem; display: flex; flex-direction: column; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-3); }
.mm-stat-num { font-size: 1.35rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.mm-stat-lbl { font-size: .8rem; color: var(--text-muted-2); }
.mm-table { color: var(--text-soft); }
.mm-table td, .mm-table th { vertical-align: middle; }
.mm-subject a { font-weight: 600; }
.mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .15rem 1rem; }
.mm-grid-2 { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.mm-channel-pick { display: grid; gap: .5rem; }
.mm-channel-opt { padding: .5rem .75rem .5rem 2.2rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-3); color: var(--text-soft); }
.mm-channel-opt.is-disabled { opacity: .75; }
.mm-ph { display: flex; flex-wrap: wrap; gap: .35rem; }
.mm-ph-btn { font-family: SFMono-Regular, Consolas, monospace; font-size: .75rem; padding: .15rem .45rem; text-transform: none; letter-spacing: normal; }
.mm-body { font-family: inherit; min-height: 14rem; }
.mm-count { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.mm-count .mm-muted { font-size: 1rem; font-weight: 400; }
.mm-inline-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.mm-inline-form > .form-control { flex: 1 1 12rem; min-width: 0; }
.mm-inline-form > .btn { flex: 0 0 auto; }
.mm-send-card { border-color: var(--nihoa-danger); }
.mm-preview { display: block; width: 100%; height: 34rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-card); }
.mm-preview-wide { height: 40rem; }
.mm-progress { height: .9rem; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); overflow: hidden; }
.mm-progress-bar { height: 100%; background: var(--nihoa-success); }
.mm-dl dt { color: var(--text-muted-2); font-weight: 600; }
.mm-dl dd { color: var(--text-soft); }
.mm-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.mm-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-3); color: var(--text-soft); font-size: .85rem; text-decoration: none; }
.mm-tab:hover { color: var(--text); border-color: var(--text-muted-2); }
.mm-tab.is-active { background: var(--nihoa-accent); border-color: var(--nihoa-accent); color: var(--on-accent); }
.mm-tab-n { font-weight: 700; }
.mm-unsub-text { color: var(--text); }
.mm-unsub-muted { color: var(--text-muted-2); font-size: .92rem; }
/* === end t2184 A === */

/* === t2184 B Email Marketing (/admin/email-marketing) — semantic tokens only.
   Reuses the t2189 .pay-* badge / checklist / savebar classes. === */
.em-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.em-pick-item { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem .9rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: .5rem; cursor: pointer; color: var(--text); }
.em-pick-item .form-check-input { margin-top: .25rem; flex: 0 0 auto; }
.em-pick-item.is-selected { border: 2px solid var(--nihoa-accent); padding: calc(.75rem - 1px) calc(.9rem - 1px); }
.em-pick-title { font-weight: 600; color: var(--text); }
.em-pick-body { min-width: 0; }
.em-connect { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .65rem .75rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: .5rem; color: var(--text-soft); }
.em-note { color: var(--text); background: var(--surface-3); border-left: 3px solid var(--nihoa-warning); padding: .35rem .6rem; border-radius: .25rem; }
.em-howto { border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-2); padding: .6rem .9rem; color: var(--text-soft); }
.em-howto summary { cursor: pointer; font-weight: 600; color: var(--text); }
.em-steps { margin: .75rem 0 .5rem; padding-left: 1.25rem; }
.em-steps li { margin-bottom: .55rem; overflow-wrap: anywhere; }
.em-steps strong { color: var(--text); }
.em-steps code, .em-code { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: .25rem; padding: .05rem .35rem; font-size: .82rem; overflow-wrap: anywhere; }
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .15rem .75rem; }
.em-count { color: var(--text); font-size: 1.1rem; }
.em-narrow { max-width: 8rem; }
.em-syncbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--text-soft); }
.em-runs { color: var(--text); }
.em-runs th { color: var(--text-mid); font-weight: 600; white-space: nowrap; }
.em-runs td, .em-runs th { background: transparent; border-color: var(--border); }
.em-runs .em-bad { color: var(--text); font-weight: 700; text-decoration: underline wavy var(--nihoa-danger); }
.em-note-cell { color: var(--text-soft); min-width: 12rem; overflow-wrap: anywhere; font-size: .85rem; }
.em-page .input-group > .form-select { min-width: 0; }
@media (max-width: 575.98px) {
    .em-page .input-group { flex-wrap: wrap; }
    .em-page .input-group > .form-select, .em-page .input-group > .form-control { width: 100%; flex: 1 1 100%; border-radius: .375rem !important; }
    .em-page .input-group > .btn { width: 100%; margin-top: .35rem; margin-left: 0 !important; border-radius: .375rem !important; }
}
/* === end t2184 B === */

/* === t2183 Exams & Approval (/admin/exam-gate, exam badges, member exam card) — semantic tokens only === */
.xg-page { min-width: 0; }
.xg-muted { color: var(--text-muted-2); }
.xg-soft { color: var(--text-soft); }
.xg-break { overflow-wrap: anywhere; word-break: break-word; }
.xg-badge { display: inline-flex; align-items: center; padding: .25em .6em; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.25; border: 1px solid var(--border); background: var(--surface-3); color: var(--text-mid); white-space: nowrap; }
.xg-badge-ok { background: var(--nihoa-success); border-color: var(--nihoa-success); color: var(--nihoa-primary); }
.xg-badge-warn { background: var(--nihoa-warning); border-color: var(--nihoa-warning); color: var(--nihoa-primary); }
.xg-badge-bad { background: var(--surface-3); border: 2px solid var(--nihoa-danger); color: var(--text); }
.xg-badge-info { background: var(--surface-2); border: 2px solid var(--accent-on-dark); color: var(--text); }
.xg-badge-neutral { background: var(--surface-3); color: var(--text-mid); }
.xg-summary { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-3); color: var(--text-soft); }
.xg-checks { display: grid; gap: .6rem; }
.xg-check { display: flex; gap: .75rem; align-items: flex-start; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-3); color: var(--text-soft); }
.xg-check > i { margin-top: .2rem; font-size: 1.05rem; }
.xg-check strong { color: var(--text); }
.xg-check-ok > i { color: var(--nihoa-success); }
.xg-check-warn { border-color: var(--nihoa-warning); }
.xg-check-warn > i { color: var(--nihoa-warning); }
.xg-check-bad { border-color: var(--nihoa-danger); }
.xg-check-bad > i { color: var(--nihoa-danger); }
.xg-check-info > i { color: var(--text-mid); }
.xg-mode { display: block; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-3); color: var(--text-soft); cursor: pointer; height: 100%; }
.xg-mode:has(input:checked) { border: 2px solid var(--accent-on-dark); }
.xg-mode .form-check-input { margin-right: .4rem; }
.xg-mode strong { color: var(--text); }
.xg-legend { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: .35rem; }
.xg-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .25rem .75rem; }
.xg-filter .btn { margin: 0 .25rem .25rem 0; }
.xg-exam-card { border: 1px solid var(--border); border-left: 4px solid var(--accent-on-dark); border-radius: .5rem; background: var(--surface-3); color: var(--text-soft); padding: .9rem 1rem; }
.xg-exam-card h2, .xg-exam-card h3 { color: var(--text); }
.xg-exam-card dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: 0; }
.xg-exam-card dt { color: var(--text-mid); font-weight: 600; }
.xg-exam-card dd { margin: 0; color: var(--text-soft); min-width: 0; overflow-wrap: anywhere; }
.xg-note { color: var(--text-mid); font-size: .875rem; }
.xg-blocked { color: var(--text); border-left: 3px solid var(--nihoa-danger); padding: .35rem .6rem; background: var(--surface-2); border-radius: .25rem; font-size: .9rem; }
@media (max-width: 575.98px) { .xg-exam-card dl { grid-template-columns: 1fr; } }
/* Gold accents are too faint on white paper — navy brand token in the light theme. */
html[data-theme="light"] .xg-badge-info,
html[data-theme="light"] .xg-mode:has(input:checked) { border-color: var(--nihoa-secondary); }
html[data-theme="light"] .xg-exam-card { border-left-color: var(--nihoa-secondary); }
/* === end t2183 === */
/* === t2183 === blocked approve in the users list: looks disabled, still opens the exam status */
.btn.disabled-look { opacity: .55; }

/* === t2182 A Public content (/page/*, /pages, /admin/pages, /admin/faq) — semantic tokens only === */
.pc-minw0 { min-width: 0; }
.pc-break { overflow-wrap: anywhere; word-break: break-word; }
.pc-muted { color: var(--text-muted-2); }
.card-header .pc-muted { color: var(--nihoa-light); opacity: .85; } /* t2182 fix: hints on the navy card header stay readable */
.pc-page { color: var(--text-soft); }
.pc-title { color: var(--text); overflow-wrap: anywhere; }
.pc-summary { color: var(--text-mid); }
.pc-breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted-2); --bs-breadcrumb-item-active-color: var(--text-muted-2); flex-wrap: wrap; }
.pc-breadcrumb .breadcrumb-item.active { overflow-wrap: anywhere; }
.pc-preview-banner { padding: .75rem 1rem; border: 2px dashed var(--nihoa-warning); border-radius: .5rem; background: var(--surface-3); color: var(--text); }
.pc-hero { margin: 0; }
.pc-hero img { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: cover; border-radius: .75rem; border: 1px solid var(--border); }
.pc-body { color: var(--text-soft); line-height: 1.7; overflow-wrap: break-word; }
.pc-body h2, .pc-body h3, .pc-body h4 { color: var(--text); margin-top: 1.75rem; margin-bottom: .75rem; line-height: 1.3; }
.pc-body > :first-child { margin-top: 0; }
.pc-body h2 { font-size: 1.5rem; }
.pc-body h3 { font-size: 1.25rem; }
.pc-body h4 { font-size: 1.1rem; }
.pc-body p { margin-bottom: 1rem; }
.pc-body ul, .pc-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.pc-body li { margin-bottom: .25rem; }
.pc-body li > p { margin-bottom: .35rem; }
.pc-body a { color: var(--nihoa-accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
html[data-theme="light"] .pc-body a { color: var(--text); }
.pc-body blockquote { margin: 1rem 0; padding: .5rem 1rem; border-left: 4px solid var(--nihoa-accent); background: var(--surface-3); color: var(--text-soft); }
.pc-body hr { border-color: var(--border); opacity: 1; }
.pc-body img { max-width: 100%; height: auto; border-radius: .5rem; }
.pc-body figure { margin: 1rem 0; }
.pc-body figcaption { color: var(--text-muted-2); font-size: .9rem; margin-top: .35rem; }
.pc-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1rem 0; color: var(--text-soft); }
.pc-body th, .pc-body td { padding: .5rem .75rem; border: 1px solid var(--border); vertical-align: top; }
.pc-body th, .pc-body thead td { background: var(--surface-2); color: var(--text); }
.pc-body caption { caption-side: top; color: var(--text-muted-2); }
.pc-meta { color: var(--text-muted-2); font-size: .9rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.pc-side { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-card); color: var(--text-soft); }
.pc-side-title { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-2); margin-bottom: .75rem; }
.pc-side li { margin-bottom: .4rem; }
.pc-start { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
.pc-start-link { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-card); color: var(--text); text-decoration: none; font-weight: 600; min-width: 0; }
.pc-start-link i { color: var(--nihoa-accent); }
html[data-theme="light"] .pc-start-link i { color: var(--text-mid); }
.pc-start-link:hover, .pc-start-link:focus-visible { border-color: var(--nihoa-accent); color: var(--text); }
.pc-cat { color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
.pc-card { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-card); color: var(--text-soft); text-decoration: none; }
.pc-card:hover, .pc-card:focus-visible { border-color: var(--nihoa-accent); }
.pc-card-title { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.pc-card-text { color: var(--text-muted-2); font-size: .9rem; overflow-wrap: anywhere; }
/* admin */
.pc-admin { min-width: 0; }
.pc-badge { display: inline-flex; align-items: center; padding: .2em .55em; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.25; border: 1px solid var(--border); background: var(--surface-3); color: var(--text-mid); white-space: nowrap; }
.pc-badge-ok { background: var(--nihoa-success); border-color: var(--nihoa-success); color: var(--nihoa-primary); }
.pc-badge-warn { background: var(--nihoa-warning); border-color: var(--nihoa-warning); color: var(--nihoa-primary); }
.pc-badge-draft { background: var(--surface-3); border: 1px dashed var(--text-muted-2); color: var(--text); }
.pc-stats { display: flex; flex-wrap: wrap; gap: .75rem; }
.pc-stat { flex: 1 1 8rem; display: flex; flex-direction: column; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-3); }
.pc-stat-num { font-size: 1.35rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.pc-stat-lbl { font-size: .8rem; color: var(--text-muted-2); }
.pc-table { color: var(--text-soft); }
.pc-table td, .pc-table th { vertical-align: middle; }
.pc-row-title { font-weight: 600; }
.pc-note { padding: .6rem .85rem; border: 1px solid var(--border); border-left: 4px solid var(--nihoa-accent); border-radius: .5rem; background: var(--surface-3); color: var(--text-soft); }
.pc-warn-text { color: var(--text); }
.pc-warn-text i { color: var(--nihoa-warning); }
.pc-hero-current img { display: block; max-width: 100%; max-height: 12rem; border-radius: .5rem; border: 1px solid var(--border); }
.pc-revs { max-height: 28rem; overflow-y: auto; }
.pc-rev { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.pc-rev:last-child { border-bottom: 0; }
.pc-danger { border-color: var(--nihoa-danger); }
.pc-body-admin { max-height: 40rem; overflow-y: auto; }
.pc-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.pc-media { border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-card); overflow: hidden; min-width: 0; }
.pc-media img { display: block; width: 100%; height: 10rem; object-fit: cover; background: var(--surface-3); }
.pc-media-body { padding: .75rem; color: var(--text-soft); }
.pc-faq-list { margin: 0; }
.pc-faq-item { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.pc-faq-item:last-child { border-bottom: 0; }
.pc-faq-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-end; }
@media (max-width: 767.98px) {
  .pc-faq-item { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .pc-faq-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
/* editor: Quill snow theme on the semantic tokens (both themes) */
.pc-editor .ql-toolbar.ql-snow { background: var(--surface-2); border-color: var(--border); border-radius: .5rem .5rem 0 0; }
.pc-editor .ql-container.ql-snow { background: var(--surface-input); border-color: var(--border); border-radius: 0 0 .5rem .5rem; color: var(--text); font-family: inherit; font-size: 1rem; }
.pc-editor .ql-editor { min-height: 18rem; max-height: 70vh; overflow-y: auto; line-height: 1.6; }
.pc-editor .ql-editor p, .pc-editor .ql-editor ul, .pc-editor .ql-editor ol, .pc-editor .ql-editor blockquote { margin-bottom: .75rem; }
.pc-editor .ql-editor h2, .pc-editor .ql-editor h3, .pc-editor .ql-editor h4 { margin: 1rem 0 .5rem; color: var(--text); }
.pc-admin .input-group-text { background: var(--surface-2); color: var(--text-mid); border-color: var(--border); }
.pc-editor .ql-editor.ql-blank::before { color: var(--text-muted-2); }
.pc-editor .ql-editor a { color: var(--nihoa-accent); }
html[data-theme="light"] .pc-editor .ql-editor a { color: var(--text); text-decoration: underline; }
.pc-editor .ql-snow .ql-stroke { stroke: var(--text-soft); }
.pc-editor .ql-snow .ql-fill { fill: var(--text-soft); }
.pc-editor .ql-snow .ql-picker { color: var(--text-soft); }
.pc-editor .ql-snow .ql-picker-options { background: var(--surface-card); border-color: var(--border); }
.pc-editor .ql-snow button:hover .ql-stroke, .pc-editor .ql-snow button:focus .ql-stroke, .pc-editor .ql-snow button.ql-active .ql-stroke,
.pc-editor .ql-snow .ql-picker-label:hover .ql-stroke, .pc-editor .ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--nihoa-accent); }
.pc-editor .ql-snow button:hover .ql-fill, .pc-editor .ql-snow button.ql-active .ql-fill { fill: var(--nihoa-accent); }
.pc-editor .ql-snow button:hover, .pc-editor .ql-snow .ql-picker-label:hover, .pc-editor .ql-snow .ql-picker-item:hover,
.pc-editor .ql-snow .ql-picker-label.ql-active, .pc-editor .ql-snow .ql-picker-item.ql-selected { color: var(--nihoa-accent); }
html[data-theme="light"] .pc-editor .ql-snow button:hover .ql-stroke, html[data-theme="light"] .pc-editor .ql-snow button.ql-active .ql-stroke,
html[data-theme="light"] .pc-editor .ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--text); }
html[data-theme="light"] .pc-editor .ql-snow button:hover .ql-fill, html[data-theme="light"] .pc-editor .ql-snow button.ql-active .ql-fill { fill: var(--text); }
html[data-theme="light"] .pc-editor .ql-snow button:hover, html[data-theme="light"] .pc-editor .ql-snow .ql-picker-label.ql-active,
html[data-theme="light"] .pc-editor .ql-snow .ql-picker-item.ql-selected { color: var(--text); }
.pc-editor .ql-snow .ql-tooltip { background: var(--surface-card); border-color: var(--border); color: var(--text-soft); box-shadow: none; z-index: 5; }
.pc-editor .ql-snow .ql-tooltip input[type=text] { background: var(--surface-input); color: var(--text); border-color: var(--border); }
.pc-editor .ql-snow .ql-editor blockquote { border-left-color: var(--nihoa-accent); }
.pc-html { font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .85rem; }
/* === end t2182 A === */

/* === t2182 B Public front door (/about /join /how-to-join /faq /history /leadership
   /chapters, homepage trust strip / who-we-are / CTA row, admin chapter notice).
   Semantic + brand tokens only; the hero and CTA band keep the navy brand in both
   themes, everything else themes through --surface-* / --text-* / --border. === */
.fd, .fd-trust, .fd-home-who, .fd-cta-row, .fd-admin-notice { --fd-accent: var(--nihoa-accent); --fd-accent-soft: rgba(255, 215, 0, .14); --fd-on-hero: var(--nihoa-light); }
/* Gold is too faint on white paper: the accent becomes brand navy in the light theme. */
html[data-theme="light"] :is(.fd, .fd-trust, .fd-home-who, .fd-cta-row, .fd-admin-notice) { --fd-accent: var(--nihoa-secondary); --fd-accent-soft: rgba(30, 58, 95, .09); }

/* Hero */
.fd-hero { background: linear-gradient(135deg, var(--nihoa-primary) 0%, var(--nihoa-secondary) 100%); color: var(--fd-on-hero); padding: 2.25rem 0 2.5rem; border-bottom: 3px solid var(--nihoa-accent); }
.fd-hero-grid { display: grid; gap: 2rem; align-items: center; }
.fd-hero-grid.has-figure { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .fd-hero-grid.has-figure { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.fd-hero-copy { max-width: 46rem; min-width: 0; }
.fd-hero-figure { margin: 0; }
.fd-hero-figure img { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); display: block; }
.fd-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: 0 0 1.1rem; font-size: .85rem; }
.fd-crumbs li { color: rgba(248, 249, 250, .78); }
.fd-crumbs li + li::before { content: '/'; margin-right: .35rem; opacity: .6; }
.fd-hero .fd-crumbs a, html[data-theme="light"] .fd-hero .fd-crumbs a { color: var(--fd-on-hero); text-decoration: underline; text-underline-offset: 3px; }
.fd-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; margin: 0 0 .5rem; color: var(--fd-accent); }
.fd-hero .fd-eyebrow { color: var(--nihoa-accent); }
.fd-title { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; line-height: 1.1; margin: 0 0 .85rem; color: var(--fd-on-hero); letter-spacing: -.01em; }
.fd-lead, html[data-theme="light"] .fd-hero .fd-lead { font-size: 1.15rem; line-height: 1.55; color: rgba(248, 249, 250, .9); margin: 0 0 1.4rem; max-width: 40rem; }
.fd-hero-meta { margin: 0; color: rgba(248, 249, 250, .85); font-weight: 600; }
.fd-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.fd .btn-nihoa-primary, .fd .fd-btn-ghost, .fd .fd-btn-outline, .fd-home-who .btn { padding: .7rem 1.35rem; text-transform: none; letter-spacing: 0; font-size: 1rem; }
.fd-btn-ghost { border: 2px solid rgba(248, 249, 250, .75); color: var(--fd-on-hero); background: transparent; font-weight: 600; border-radius: 8px; }
.fd-btn-ghost:hover, .fd-btn-ghost:focus-visible { background: var(--fd-on-hero); color: var(--nihoa-primary); border-color: var(--fd-on-hero); }
html[data-theme="light"] .fd .fd-btn-ghost { color: var(--fd-on-hero); }
html[data-theme="light"] .fd .fd-btn-ghost:hover, html[data-theme="light"] .fd .fd-btn-ghost:focus-visible { color: var(--nihoa-primary); } /* t2182 fix: keyboard focus keeps the label readable */
.fd-btn-outline { border: 2px solid var(--fd-accent); color: var(--text); background: transparent; font-weight: 600; border-radius: 8px; }
.fd-btn-outline:hover, .fd-btn-outline:focus-visible { background: var(--fd-accent); color: var(--on-accent); }
html[data-theme="light"] .fd-btn-outline:hover, html[data-theme="light"] .fd-btn-outline:focus-visible { color: var(--nihoa-light); } /* t2182 fix */

/* Section sub-navigation */
.fd-subnav { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.fd-subnav ul { list-style: none; display: flex; gap: .35rem; margin: 0; padding: .6rem 0; overflow-x: auto; scrollbar-width: thin; }
.fd-subnav a { display: inline-block; white-space: nowrap; padding: .4rem .85rem; border-radius: 999px; color: var(--text-soft); text-decoration: none; font-weight: 600; font-size: .92rem; border: 1px solid transparent; }
.fd-subnav a:hover { color: var(--text); border-color: var(--border); background: var(--surface-3); }
.fd-subnav a[aria-current="page"] { color: var(--text); background: var(--fd-accent-soft); border-color: var(--fd-accent); }
html[data-theme="light"] .fd-subnav a { color: var(--text-soft); }

/* Layout */
.fd-main { padding-top: 2rem; padding-bottom: 2.5rem; }
.fd-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) { .fd-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; } }
.fd-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem 2rem; color: var(--text-soft); min-width: 0; }
@media (max-width: 575.98px) { .fd-card { padding: 1.25rem 1.1rem; border-radius: 12px; } }
.fd-demo { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--nihoa-warning); border-radius: 8px; padding: .65rem .9rem; margin: 0 0 1.5rem; }
.fd-empty { background: var(--surface-3); color: var(--text-soft); border: 1px dashed var(--border); border-radius: 10px; padding: 1rem 1.1rem; }
.fd-muted { color: var(--text-muted-2); }

/* Prose — styles the (class-less, sanitised) CMS body */
.fd-prose { font-size: 1.05rem; line-height: 1.7; }
.fd-prose > :first-child { margin-top: 0; }
.fd-prose > :last-child { margin-bottom: 0; }
.fd-prose p { margin: 0 0 1rem; color: var(--text-soft); }
.fd-prose h2 { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 2.1rem 0 .8rem; padding-left: .8rem; border-left: 4px solid var(--fd-accent); line-height: 1.25; }
.fd-prose > h2:first-child { margin-top: 0; }
.fd-prose h3 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 1.5rem 0 .5rem; }
.fd-prose h4 { font-size: 1rem; font-weight: 700; color: var(--text-mid); margin: 1.25rem 0 .4rem; text-transform: uppercase; letter-spacing: .05em; }
.fd-prose strong, .fd-prose b { color: var(--text); }
.fd-prose a { text-underline-offset: 3px; }
.fd-prose ul { padding-left: 1.2rem; margin: 0 0 1.1rem; }
.fd-prose ul > li { margin-bottom: .55rem; padding-left: .25rem; }
.fd-prose ul > li::marker { color: var(--fd-accent); }
.fd-prose blockquote { margin: 1.25rem 0; padding: .75rem 1rem; border-left: 4px solid var(--border); background: var(--surface-3); color: var(--text-soft); border-radius: 0 8px 8px 0; }
.fd-prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.75rem 0; opacity: 1; }
.fd-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.fd-prose figure { margin: 1.25rem 0; }
.fd-prose figcaption { font-size: .88rem; color: var(--text-muted-2); margin-top: .4rem; }
/* Numbered steps: every <ol> in the prose becomes a step list */
.fd-prose ol { list-style: none; counter-reset: fd-step; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .75rem; }
.fd-prose ol > li { counter-increment: fd-step; position: relative; padding: .9rem 1rem .9rem 3.6rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: 12px; color: var(--text-soft); line-height: 1.6; }
.fd-prose ol > li::before { content: counter(fd-step); position: absolute; left: .9rem; top: .85rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .95rem; background: var(--nihoa-accent); color: var(--nihoa-primary); }
.fd-prose ol > li > strong:first-child { display: block; font-size: 1.05rem; margin-bottom: .15rem; }
/* Tables (generic): scroll inside themselves */
.fd-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .97rem; display: block; overflow-x: auto; }
.fd-prose thead, .fd-prose tbody, .fd-prose tr { width: 100%; }
.fd-prose th { text-align: left; color: var(--text-mid); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: .55rem .75rem; border-bottom: 2px solid var(--border); white-space: nowrap; }
.fd-prose td { padding: .7rem .75rem; border-bottom: 1px solid var(--border); color: var(--text-soft); vertical-align: top; }
.fd-prose caption { caption-side: top; color: var(--text-mid); padding-bottom: .4rem; }
/* Leadership: the people tables read as a roster, and as cards on phones */
.fd-people table { display: table; overflow: visible; }
.fd-people td:first-child { color: var(--text-mid); font-weight: 600; font-size: .92rem; }
.fd-people td:nth-child(2) strong { font-size: 1.02rem; }
.fd-people td a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .fd-people table, .fd-people tbody { display: block; }
    .fd-people thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .fd-people tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; padding: .85rem 1rem; margin-bottom: .75rem; background: var(--surface-3); border: 1px solid var(--border); border-left: 4px solid var(--fd-accent); border-radius: 10px; }
    .fd-people td { border: 0; padding: 0; }
    .fd-people td:first-child { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--fd-accent); }
    html[data-theme="light"] .fd-people td:first-child { color: var(--nihoa-secondary); }
    .fd-people td:nth-child(3) { color: var(--text-mid); font-size: .95rem; }
}

/* Aside cards */
.fd-aside { display: grid; gap: 1rem; min-width: 0; }
@media (min-width: 992px) { .fd-aside { position: sticky; top: 1rem; } }
.fd-side { background: var(--surface-card); border: 1px solid var(--border); border-top: 3px solid var(--fd-accent); border-radius: 12px; padding: 1.1rem 1.2rem; color: var(--text-soft); }
.fd-side-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0 0 .7rem; }
.fd-side-title i { color: var(--fd-accent); }
.fd-links { list-style: none; padding: 0; margin: 0; }
.fd-links li + li { border-top: 1px solid var(--border); }
.fd-links a { display: block; padding: .5rem 0; text-decoration: none; font-weight: 600; }
.fd-links a:hover { text-decoration: underline; }
.fd-chapter-list { list-style: none; padding: 0; margin: 0 0 .75rem; }
.fd-chapter-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .95rem; }
.fd-chapter-list li span { color: var(--text-muted-2); font-size: .88rem; text-align: right; }
.fd-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; color: var(--text-soft); }
.fd-pill { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--border); }
.fd-pill.is-open { background: var(--nihoa-success); border-color: var(--nihoa-success); color: var(--nihoa-primary); }
.fd-pill.is-closed { background: var(--surface-3); color: var(--text); }

/* Join: the two ways in */
.fd-ways { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1.75rem; }
@media (min-width: 768px) { .fd-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fd-way { display: flex; flex-direction: column; align-items: flex-start; background: var(--surface-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; color: var(--text-soft); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.fd-way:first-child { border-top: 4px solid var(--nihoa-accent); }
.fd-way:last-child { border-top: 4px solid var(--nihoa-secondary); }
.fd-way h2 { font-size: 1.35rem; font-weight: 800; color: var(--text); margin: .75rem 0 .5rem; }
.fd-way p { margin-bottom: .9rem; }
.fd-way .btn { margin-top: auto; }
.fd-way-icon { width: 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: var(--fd-accent-soft); color: var(--fd-accent); }

/* FAQ accordion (native <details>: keyboard + screen-reader accessible) */
.fd-faq-tools { margin: 1.5rem 0 1.25rem; }
.fd-faq-tools .form-label { font-weight: 600; color: var(--text); }
.fd-faq-count { min-height: 1.25rem; margin: .35rem 0 0; font-size: .9rem; color: var(--text-mid); }
.fd-faq-group + .fd-faq-group { margin-top: 1.75rem; }
.fd-faq-group h2 { margin-top: 0; }
.fd-faq-item { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-3); margin-bottom: .6rem; overflow: hidden; }
.fd-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem; font-weight: 700; color: var(--text); font-size: 1.02rem; line-height: 1.4; }
.fd-faq-item summary::-webkit-details-marker { display: none; }
.fd-faq-item summary:hover { background: var(--fd-accent-soft); }
.fd-faq-item summary:focus-visible { outline: 3px solid var(--fd-accent); outline-offset: -3px; border-radius: 12px; }
.fd-faq-chev { flex: 0 0 auto; color: var(--fd-accent); transition: transform .2s ease; }
.fd-faq-item[open] > summary { border-bottom: 1px solid var(--border); }
.fd-faq-item[open] .fd-faq-chev { transform: rotate(180deg); }
.fd-faq-a { padding: .9rem 1.1rem .2rem; background: var(--surface-card); }
.fd-faq-a p { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .fd-faq-chev { transition: none; } }

/* CTA band */
.fd-band { background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%); color: var(--fd-on-hero); border-top: 3px solid var(--nihoa-accent); padding: 2rem 0; }
.fd-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.fd-band h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .35rem; color: var(--fd-on-hero); }
.fd-band p, html[data-theme="light"] .fd-band p { margin: 0; color: rgba(248, 249, 250, .88); max-width: 38rem; }
.fd + footer { margin-top: 0 !important; }

/* Chapter directory */
.fd-filter { display: grid; gap: .75rem 1rem; grid-template-columns: minmax(0, 1fr); align-items: end; background: var(--surface-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .fd-filter { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto; } }
.fd-filter .form-label { font-weight: 600; color: var(--text); }
.fd-filter-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.fd-chapters { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .fd-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fd-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fd-chapter { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.25rem; color: var(--text-soft); }
.fd-chapter-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.fd-chapter-name { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0; }
.fd-code { flex: 0 0 auto; font-size: .75rem; font-weight: 700; letter-spacing: .06em; padding: .2rem .55rem; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-mid); }
.fd-chapter-state { margin: .4rem 0 .75rem; color: var(--text-mid); }
.fd-chapter-state i, .fd-chapter-contact i { color: var(--fd-accent); }
.fd-chapter-contact { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .95rem; }
.fd-chapter-contact li { margin-bottom: .35rem; overflow-wrap: anywhere; }
.fd-chapter-go { margin-top: auto; font-weight: 700; text-decoration: none; padding-top: .75rem; border-top: 1px solid var(--border); }
.fd-chapter-go:hover { text-decoration: underline; }
.fd .pagination { flex-wrap: wrap; }

/* Homepage: trust strip, who we are, CTA row */
.fd-trust { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.fd-trust-list { list-style: none; margin: 0; padding: 1.25rem 0; display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.fd-trust-list li { display: flex; gap: .8rem; align-items: flex-start; min-width: 0; }
.fd-trust-icon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 10px; display: grid; place-items: center; background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 1.05rem; }
.fd-trust-text { display: flex; flex-direction: column; min-width: 0; }
.fd-trust-text strong { font-size: 1.15rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.fd-trust-text span { font-size: .9rem; color: var(--text-mid); line-height: 1.4; }
@media (max-width: 575.98px) { .fd-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .fd-trust-icon { width: 2.1rem; height: 2.1rem; font-size: .9rem; } .fd-trust-list li { flex-direction: column; gap: .45rem; } }
.fd-home-who { margin-bottom: 2rem; }
.fd-home-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) { .fd-home-grid { grid-template-columns: minmax(0, 1fr) 21rem; } .fd-home-grid.is-single { grid-template-columns: minmax(0, 32rem); } }
.fd-home-h2 { font-size: 1.75rem; font-weight: 800; color: var(--text); margin: 0 0 1rem; border: 0; padding: 0; }
.fd-home-who .fd-prose h2.fd-home-h2 { border: 0; padding: 0; }
.fd-more { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.25rem 0 0 !important; font-weight: 700; }
.fd-more a { text-decoration: none; }
.fd-more a:hover { text-decoration: underline; }
.fd-leader p { margin-bottom: 1rem; }
.fd-person { display: flex; align-items: center; gap: .85rem; padding: .85rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1rem; }
.fd-person > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.fd-person strong { color: var(--text); font-size: 1.02rem; }
.fd-person > span:last-child > span { color: var(--text-mid); font-size: .9rem; }
.fd-avatar { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; letter-spacing: .03em; background: linear-gradient(135deg, var(--nihoa-secondary), var(--nihoa-primary)); color: var(--nihoa-accent); border: 2px solid var(--nihoa-accent); }
.fd-side-link { font-weight: 700; text-decoration: none; }
.fd-side-link:hover { text-decoration: underline; }
.fd-cta-row { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 3rem; }
@media (min-width: 768px) { .fd-cta-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fd-cta { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.2rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--text-soft) !important; transition: border-color .2s ease, transform .2s ease; }
.fd-cta:hover, .fd-cta:focus-visible { border-color: var(--fd-accent); transform: translateY(-2px); }
.fd-cta:focus-visible { outline: 3px solid var(--fd-accent); outline-offset: 2px; }
.fd-cta-icon { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 12px; display: grid; place-items: center; background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 1.15rem; }
.fd-cta-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.fd-cta-body strong { color: var(--text); font-size: 1.08rem; }
.fd-cta-body span { font-size: .92rem; color: var(--text-mid); line-height: 1.4; }
.fd-cta-go { color: var(--fd-accent); }
@media (prefers-reduced-motion: reduce) { .fd-cta { transition: none; } .fd-cta:hover { transform: none; } }

/* Admin → Chapters: contact addresses the directory will not show */
.fd-admin-notice { background: var(--surface-3); color: var(--text-soft); border: 1px solid var(--border); border-left: 4px solid var(--nihoa-warning); border-radius: 10px; padding: .9rem 1.1rem; }
.fd-admin-notice-head { color: var(--text); margin-bottom: .4rem; }
.fd-admin-notice-head i { color: var(--nihoa-warning); }
.fd-admin-notice code { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: .02rem .3rem; overflow-wrap: anywhere; }
.fd-admin-notice-foot { font-size: .85rem; color: var(--text-mid); margin-top: .6rem; }

/* Public nav: the hover-underline rule on .nav-link::after also hit Bootstrap's dropdown
   caret (same pseudo-element) and drew a stray gold bar under "Join"/"Resources". */
.fd-nav .nav-link.dropdown-toggle::after,
.fd-nav .nav-link.dropdown-toggle:hover::after {
    position: static; transform: none; width: 0; height: 0; background: none;
    display: inline-block; margin-left: .3em; vertical-align: .2em;
    border-top: .32em solid; border-right: .32em solid transparent; border-bottom: 0; border-left: .32em solid transparent;
}
.fd-nav .nav-link.active, .fd-nav .nav-link[aria-current="page"] { color: var(--nihoa-accent) !important; }
/* Full-width CTA band sits directly on the footer. */
body:has(.fd-band) > footer { margin-top: 0 !important; }
.fd-prose h2.fd-home-h2 { margin-top: 0; }
.fd .btn-nihoa-primary { border: 2px solid transparent; }
.fd-way:last-child { border-top-color: var(--fd-accent); }
.fd-chapter-list a, .fd-side > a { text-decoration: none; font-weight: 600; }
.fd-chapter-list a:hover, .fd-side > a:hover { text-decoration: underline; }
@media (min-width: 768px) {
    .fd-people table { table-layout: fixed; }
    .fd-people th:nth-child(1), .fd-people td:nth-child(1) { width: 29%; }
    .fd-people th:nth-child(2), .fd-people td:nth-child(2) { width: 27%; }
    .fd-people th:nth-child(3), .fd-people td:nth-child(3) { width: 20%; }
    .fd-people th:nth-child(4), .fd-people td:nth-child(4) { width: 24%; }
}
@media (max-width: 767.98px) {
    .fd-subnav ul { flex-wrap: wrap; overflow: visible; }
    .fd-prose ol > li { padding: .8rem .85rem .8rem 3rem; }
    .fd-prose ol > li::before { left: .7rem; width: 1.7rem; height: 1.7rem; font-size: .85rem; }
    .fd-hero { padding: 1.75rem 0 2rem; }
}
/* === end t2182 B === */

/* === t2444: admin page headers + neutral badges, both themes ===
   Admin page-title h1/h2 sat on the plain page background with Bootstrap
   .text-white (!important) and a .text-light subtitle, so both vanished in the
   light theme. Dark-branded surfaces (.nihoa-hero, stat and gradient cards,
   bg-success/bg-danger/bg-primary cards) keep .text-white on purpose. */
.page-title { color: var(--text); }
.page-subtitle { color: var(--text-mid); }
/* Neutral badge built from tokens. Bootstrap bg-light + text-dark is remapped
   by the dark theme to dark text on a dark surface (1.13:1). */
.badge-neutral { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); }
/* Member registration status "Total due": the inline fallback navy (#1E3A8A;
   --brand-primary is never defined) was 1.6:1 on the dark card. */
.reg-total-due { color: var(--text); }
/* === end t2444 === */