/* ============================================================
   RIAT — Rapid Initial Assessment Tool
   Visual system harmonized with the NSF SECURE Center brand:
     - Public Sans (US federal-standard font, used on secure-center.org)
     - IBM Plex Sans for body fallback (matches reflibrary)
     - Navy (#163060) primary, deep navy (#0F2044) for hero/banner emphasis
     - Light blue-tinted background (#F5F8FD) matches reflibrary
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    /* Brand palette */
    --navy: #163060;          /* Primary navy — matches reflibrary header */
    --navy-deep: #0F2044;     /* Deeper navy for hero/banner emphasis */
    --blue: #2D5F9A;          /* Secondary action blue */
    --blue-bright: #116DFF;   /* Marketing-site primary blue */
    --light-blue: #4A90D9;    /* Hover/secondary accent */
    --accent: #E8913A;        /* Warm accent (used sparingly) */
    --green: #1F7A47;         /* Slightly darkened from #2E7D4F for AA contrast */
    --red: #B91C1C;           /* Standardized to match sticky-RSO red */
    --yellow: #B45309;        /* Darker yellow for AA contrast on white */

    /* Surfaces */
    --bg: #F5F8FD;            /* Page background — matches reflibrary */
    --bg-alt: #EEF2F8;        /* Subtle surface alt */
    --card: #FFFFFF;
    --text: #111827;          /* Body text — matches reflibrary */
    --muted: #4B5563;         /* Darkened from #566573 to pass AA on bg (5.05:1) */
    --muted-strong: #374151;  /* For labels and emphasis on muted */
    --border: #E5E9F2;
    --border-strong: #D1D9E6;

    /* Effects */
    --shadow: 0 2px 8px rgba(15,32,68,0.08);
    --shadow-lg: 0 4px 20px rgba(15,32,68,0.14);
    --shadow-focus: 0 0 0 3px rgba(45,95,154,0.35);
    --radius: 8px;
    --radius-sm: 4px;
    --radius-pill: 999px;

    /* Type scale */
    --font-display: 'Public Sans', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Public Sans', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
html { font-size: 16px; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }

/* Typography rhythm — clear hierarchy with Public Sans across the scale. */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; color: var(--navy); letter-spacing: -0.01em; }
h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
h4 { font-weight: 600; }

/* Skip-to-content link — required for keyboard / screen-reader users to
   bypass the page chrome. Hidden until focused. */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--navy); color: #fff;
    padding: 0.7rem 1rem; border-radius: 0 0 var(--radius) 0;
    z-index: 9999; font-weight: 600;
}
.skip-link:focus {
    left: 0; outline: 3px solid var(--blue-bright); outline-offset: 2px;
    color: #fff; text-decoration: none;
}

/* Shared keyboard focus treatment for interactive controls. */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--blue-bright);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.checkbox-card:focus-visible,
.checkbox-option:focus-visible,
.likert-option:focus-visible {
    outline: 2px solid var(--blue-bright);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}

/* Honor user preference for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Buttons ---
   Pill-radius buttons matching the SECURE Center marketing site's style.
   Public Sans 600 weight reads well at this size. Subtle shadow on hover
   instead of translate (keeps the layout still for users with motion
   sensitivity). */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.7rem 1.4rem; border: 1px solid transparent; border-radius: var(--radius-pill);
    font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
    text-decoration: none; line-height: 1.2;
}
.btn:hover { box-shadow: var(--shadow); text-decoration: none; }
.btn:active { box-shadow: none; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); color: #fff; }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-alt); border-color: var(--blue); color: var(--navy); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #991B1B; }
.btn-outline { background: transparent; border: 2px solid rgba(255,255,255,0.55); color: #fff; }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }
.btn-sm { padding: 0.4rem 0.95rem; font-size: 0.85rem; }
.btn-success { background: var(--green); color: #fff; }
.btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- Badges --- */
.badge {
    display: inline-block; padding: 0.15rem 0.5rem; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.badge-primary { background: #D6E4F0; color: var(--blue); }
.badge-success { background: #D4EDDA; color: var(--green); }
.badge-warning { background: #FFF3CD; color: #856404; }
.badge-danger { background: #F8D7DA; color: var(--red); }
.badge-info { background: #D1ECF1; color: #0C5460; }
.badge-secondary { background: #E9ECEF; color: var(--muted); }

/* --- Alerts --- */
.alert {
    padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin: 0.75rem 0;
    font-size: 0.95rem; border-left: 4px solid;
}
.alert-success { background: #D4EDDA; border-color: var(--green); color: #155724; }
.alert-warning { background: #FFF3CD; border-color: var(--yellow); color: #856404; }
.alert-danger { background: #F8D7DA; border-color: var(--red); color: #721C24; }
.alert-info { background: #D1ECF1; border-color: var(--light-blue); color: #0C5460; }
.step-notice {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid #F3B7BD;
    border-left: 4px solid var(--red);
    background: #FFF1F2;
    color: #7F1D1D;
    font-size: 0.94rem;
    line-height: 1.45;
}
.step-notice[hidden] { display: none; }
.step-notice strong { display: block; color: #7F1D1D; margin-bottom: 0.1rem; }

/* --- Forms --- */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.92rem; color: var(--muted-strong); }
.form-group.has-error .form-control,
.form-group.has-error .country-filter-input {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.14);
}
.choice-group.has-error {
    padding: 0.75rem;
    border: 1px solid #F3B7BD;
    border-radius: var(--radius);
    background: #FFF8F8;
}
.choice-group.has-error .activity-card {
    border-color: #F3B7BD;
}
.choice-group.has-error .activity-card:hover {
    border-color: var(--red);
}
.field-error {
    margin-top: 0.35rem;
    color: #B91C1C;
    font-size: 0.82rem;
    font-weight: 600;
}
.field-error[hidden] { display: none; }
.other-detail-field { margin-top: 0.75rem; padding-left: 0.85rem; border-left: 3px solid var(--light-blue); }
.other-detail-field[hidden] { display: none; }
.form-control {
    width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit;
    color: var(--text); background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:hover { border-color: var(--blue); }
.form-control:focus,
.form-control:focus-visible {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(45,95,154,0.20);
}
textarea.form-control { min-height: 80px; resize: vertical; line-height: 1.5; }
select.form-control { cursor: pointer; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.form-inline { display: flex; gap: 0.5rem; align-items: flex-end; }
.form-check { display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0; }
.form-check input[type="checkbox"] { width: 1.1rem; height: 1.1rem; cursor: pointer; }

/* --- Cards --- */
.card {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.5rem; margin-bottom: 1rem;
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.card-header h3 { margin: 0; }

/* --- Tables --- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th {
    background: var(--navy); color: #fff; padding: 0.7rem 0.8rem;
    text-align: left; font-weight: 600; white-space: nowrap;
}
.data-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.data-table th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
.data-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tr:hover td { background: #F8F9FA; }
.data-table .text-right { text-align: right; }
.data-table .text-center { text-align: center; }

/* --- Stat Cards --- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card {
    background: var(--card); border-radius: var(--radius); padding: 1.2rem;
    box-shadow: var(--shadow); border-top: 3px solid var(--blue); text-align: center;
}
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--navy); }
.stat-card .stat-label { font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; }

/* --- Details/Summary (expandable) --- */
details { margin-bottom: 0.5rem; }
details summary {
    cursor: pointer; padding: 0.5rem; border-radius: var(--radius-sm);
    font-weight: 600; transition: background 0.2s;
}
details summary:hover { background: #F0F2F5; }
details[open] summary { margin-bottom: 0.5rem; }
details .detail-content { padding: 1rem; background: #FAFBFC; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* --- Spinner --- */
.spinner {
    width: 40px; height: 40px; border: 4px solid var(--border);
    border-top-color: var(--blue); border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Text utilities --- */
.text-muted { color: var(--muted); }
.text-success { color: var(--green); }
.text-danger { color: var(--red); }
.text-warning { color: var(--yellow); }
.text-center { text-align: center; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1rem; }

/* ============================================================
   NAVIGATOR (Public-facing Assessment Wizard)
   ============================================================ */
/* Navigator header — matches the reflibrary navy treatment.
   Overrides the global h1 navy color (which would be invisible here) with
   white. Gradient uses navy → navy-deep for subtle depth. */
.navigator .nav-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    padding: 1.5rem 2rem; color: #fff;
}
.nav-header-inner { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav-brand { display: flex; align-items: center; gap: 1rem; }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.prototype-logout-form { display: inline-flex; margin: 0; }
.prototype-logout-form .btn { white-space: nowrap; }
.nav-logo { font-size: 2rem; background: rgba(255,255,255,0.15); width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
/* NSF SECURE Center logo lockup — official SVG from secure-center.org.
   The logo's "NSF SECURE Center" text is white, so it lives on the navy
   header gradient as designed. */
.brand-logo {
    height: 44px; width: auto; max-width: 220px;
    display: block; flex-shrink: 0;
}
.brand-divider {
    width: 1px; height: 38px; background: rgba(255,255,255,0.32);
    margin: 0 0.4rem;
}
.nav-brand h1 { font-size: 1.25rem; margin: 0; color: #fff; letter-spacing: -0.01em; font-weight: 700; }
.nav-subtitle { font-size: 0.85rem; opacity: 0.85; margin: 0.1rem 0 0; color: #fff; }

.wizard-container { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; }

/* Progress bar */
.progress-bar {
    display: flex; align-items: center; justify-content: center; gap: 0;
    margin-bottom: 2rem; padding: 1rem 0;
}
.progress-step {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem; position: relative; min-width: 80px;
}
.step-num {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.92rem; background: var(--border); color: var(--muted);
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.progress-step.active .step-num { background: var(--navy); color: #fff; box-shadow: 0 0 0 4px rgba(22,48,96,0.18); }
.progress-step.completed .step-num { background: var(--green); color: #fff; }
.progress-step span { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.progress-step.active span { color: var(--navy); font-weight: 600; }
.progress-step.completed span { color: var(--green); }
.progress-line { flex: 1; height: 2px; background: var(--border); max-width: 80px; }
.progress-step.completed + .progress-line { background: var(--green); }

/* Step panels */
.step-panel { display: none; animation: fadeIn 0.3s; }
.step-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.step-panel h2 { font-size: 1.5rem; color: var(--navy); margin-bottom: 0.3rem; }
.step-desc { color: var(--muted); margin-bottom: 1.5rem; }
.step-actions { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* Checkbox grid (multi-select agencies, tech areas) */
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; margin-top: 0.3rem; }
.checkbox-card {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 0.8rem; border: 2px solid var(--border); border-radius: var(--radius);
    cursor: pointer; transition: all 0.2s; background: #fff; font-size: 0.9rem;
}
.checkbox-card:hover { border-color: var(--light-blue); background: #F8FBFF; }
.checkbox-card.selected { border-color: var(--blue); background: #EBF2FC; }
.checkbox-card input[type=checkbox] { flex-shrink: 0; }
.checkbox-content { display: flex; flex-direction: column; line-height: 1.3; }
.checkbox-content strong { font-size: 0.85rem; }
.checkbox-content span { font-size: 0.75rem; color: var(--muted); }

/* Compact checkbox option used in admin trigger-conditions forms.
   Smaller and inline-friendly than .checkbox-card. */
.checkbox-option {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 4px;
    background: #fff; font-size: 0.85rem; cursor: pointer; user-select: none;
}
.checkbox-option:hover { border-color: var(--light-blue); background: #F8FBFF; }
.checkbox-option:has(input:checked),
.checkbox-option.is-selected { border-color: var(--blue); background: #EBF2FC; color: var(--navy); font-weight: 600; }
.checkbox-option input[type=checkbox] { margin: 0; }
.form-label { display: block; font-weight: 600; margin-bottom: 0.3rem; color: var(--navy); }

/* Country picker — filter input stacked above the native select. The filter
   narrows visible options as the user types; the select itself stays the
   source of truth so all existing change handlers continue to work. */
.country-picker { display: flex; flex-direction: column; gap: 0.4rem; }
.country-autocomplete { position: relative; }
.country-filter-input { font-size: 0.92rem; }
.country-filter-input::placeholder { color: var(--muted); font-style: italic; }
.country-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.country-suggestions {
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
}
.country-suggestion {
    width: 100%;
    border: 0;
    background: var(--white);
    color: var(--ink);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
}
.country-suggestion:last-child { border-bottom: 0; }
.country-suggestion:hover,
.country-suggestion.is-active { background: #F4F8FB; }
.country-suggestion-main {
    font-weight: 700;
    color: var(--navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.country-suggestion-meta {
    color: var(--muted);
    font-size: 0.82rem;
    white-space: nowrap;
}
.country-suggestion-flag {
    background: #FFF3CD;
    color: #7A5A00;
    border: 1px solid #E5C766;
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.country-suggestion-empty {
    padding: 0.75rem 0.85rem;
    color: var(--muted);
}
@media (max-width: 560px) {
    .country-suggestion {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.2rem;
    }
    .country-suggestion-meta,
    .country-suggestion-flag { justify-self: start; }
}

/* ===================================================================
   CSA modals (intake + feedback)
   Single dialog pattern shared between the two modals. The intake modal
   is non-dismissable (no close button, escape ignored, backdrop click
   ignored). The feedback modal is dismissable (close button, escape,
   backdrop click all close it).
   =================================================================== */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 23, 42, 0.78);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
body.modal-open { overflow: hidden; }
body.csa-intake-active .progress-bar,
body.csa-intake-active .step-panel,
body.csa-intake-active .step-notice {
    display: none;
}

.csa-welcome {
    margin: 0 auto 1.5rem;
}
.csa-welcome[hidden] { display: none; }
.csa-welcome-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 1.75rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.75rem;
}
.csa-welcome-copy {
    background: #F4F7FB;
    border: 1px solid #DCE5F1;
    border-radius: var(--radius);
    padding: 1.4rem;
}
.csa-eyebrow {
    color: var(--muted-strong);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}
.csa-welcome-copy h2 {
    margin: 0 0 0.7rem;
    font-size: 1.45rem;
}
.csa-welcome-copy p {
    color: var(--muted-strong);
    line-height: 1.55;
    margin: 0 0 1rem;
}
.csa-welcome-list {
    display: grid;
    gap: 0.75rem;
}
.csa-welcome-list div {
    border-top: 1px solid #DCE5F1;
    padding-top: 0.75rem;
}
.csa-welcome-list strong {
    display: block;
    color: var(--navy);
    margin-bottom: 0.15rem;
}
.csa-welcome-list span {
    display: block;
    color: var(--muted-strong);
    font-size: 0.9rem;
    line-height: 1.45;
}
.csa-intake-form h3 {
    margin: 0 0 0.25rem;
    color: var(--navy);
    font-size: 1.1rem;
}
.csa-form-hint {
    margin-bottom: 1.1rem;
}

.modal-card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    max-width: 600px; width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.8rem 2rem 1.5rem;
}
/* Make the modal title pin to the top while the form body scrolls. Keeps
   the participant oriented on long forms (e.g. intake on phone). */
.modal-title {
    color: var(--navy); margin: 0 0 0.4rem; font-size: 1.4rem; line-height: 1.25;
    position: sticky; top: -1.8rem;
    background: #fff; padding: 1.8rem 0 0.4rem;
    margin-top: -1.8rem; z-index: 2;
}
.modal-consent {
    color: var(--muted-strong); font-size: 0.92rem; margin: 0 0 1.4rem; line-height: 1.5;
}
.modal-actions { margin-top: 1.4rem; display: flex; gap: 1rem; align-items: center; }
.modal-actions.modal-actions-split { justify-content: flex-end; }
.confirm-modal-card { max-width: 460px; }
.confirm-modal-copy {
    color: var(--muted-strong);
    line-height: 1.5;
    margin: 0.35rem 0 0;
}
.confirm-modal-meta {
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: #F4F7FB;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted-strong);
    font-size: 0.86rem;
}
.idle-modal-card { max-width: 480px; }
.idle-modal-status {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.55rem;
    border-radius: var(--radius-pill);
    background: #D6E4F0;
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.55rem;
}
.idle-countdown {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    background: #F4F7FB;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.idle-countdown[hidden] { display: none; }
.idle-countdown-label {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.idle-countdown strong {
    display: block;
    margin-top: 0.15rem;
    color: var(--navy);
    font-size: 2rem;
    line-height: 1.1;
}
body.riat-idle-locked .idle-modal-status {
    background: #FFF3CD;
    color: var(--yellow);
}
.modal-close {
    position: absolute; top: 0.8rem; right: 0.9rem;
    background: transparent; border: 0; font-size: 1.5rem; line-height: 1;
    color: var(--muted); cursor: pointer; padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.modal-close:hover { background: #F0F4FA; color: var(--navy); }

.required { color: #B91C1C; font-weight: 600; }
.btn-link {
    background: none; border: 0; color: var(--blue); cursor: pointer;
    font-size: 0.9rem; padding: 0; text-decoration: underline;
}
.btn-link:hover { color: var(--navy); }
.btn-link:disabled,
.btn-link[aria-disabled="true"] {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.6;
}
.form-hint { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.78rem; }

.intake-checkbox-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

.participant-window-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: #EEF6FF;
    border: 1px solid #CFE1F6;
    border-left: 4px solid var(--blue);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.participant-window-banner h2 {
    margin: 0.12rem 0 0.16rem;
    font-size: 1rem;
    color: var(--navy);
}
.participant-window-banner p {
    margin: 0;
    color: var(--muted-strong);
    font-size: 0.9rem;
    line-height: 1.45;
}
.participant-window-status {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-pill);
    background: #D6E4F0;
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.participant-window-banner strong { color: var(--navy); }
.participant-window-close {
    color: var(--muted);
    margin-left: 0.45rem;
}
.participant-window-banner.is-expired {
    background: #FFF1F2;
    border-color: #F3B7BD;
    border-left-color: var(--red);
}
.participant-window-banner.is-expired .participant-window-status {
    background: #F8D7DA;
    color: var(--red);
}
body.participant-window-expired .btn[disabled],
body.participant-window-expired .btn-link[disabled] {
    box-shadow: none;
}

/* Likert scale — equally spaced radios with numeric label and small hint. */
.likert-scale {
    display: flex; gap: 0.5rem; justify-content: space-between;
    margin-top: 0.4rem;
}
.likert-option {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 0.55rem 0.4rem; border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; background: #fff; transition: all 0.15s;
    text-align: center;
}
.likert-option:hover { border-color: var(--light-blue); background: #F8FBFF; }
.likert-option:has(input:checked),
.likert-option.is-selected { border-color: var(--blue); background: #EBF2FC; }
.likert-option input { margin: 0 0 0.3rem; }
.likert-num { font-weight: 700; color: var(--navy); font-size: 1rem; }
.likert-hint { font-size: 0.7rem; color: var(--muted); line-height: 1.1; margin-top: 0.15rem; min-height: 1.6em; }

/* Feedback modal radio stack (for matched_expectations) */
.radio-stack { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.3rem; }
.radio-stack label {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; font-size: 0.9rem;
}
.radio-stack label:hover { border-color: var(--light-blue); background: #F8FBFF; }
.radio-stack label:has(input:checked),
.radio-stack label.is-selected { border-color: var(--blue); background: #EBF2FC; }

.feedback-thanks {
    text-align: center; padding: 2rem 1rem;
    color: var(--muted);
}
.feedback-thanks .modal-title { color: var(--green); }

.feedback-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 0;
    padding: 1rem 1.1rem;
    background: #F4F7FB;
    border: 1px solid #DCE5F1;
    border-left: 4px solid var(--blue);
    border-radius: var(--radius);
}
.feedback-prompt[hidden] { display: none; }
.feedback-prompt h3 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    color: var(--navy);
}
.feedback-prompt p {
    margin: 0;
    color: var(--muted-strong);
    font-size: 0.9rem;
    line-height: 1.45;
}
.feedback-prompt-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-shrink: 0;
}

/* Mobile — modals fill the screen on small displays. */
@media (max-width: 640px) {
    .csa-welcome-layout {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;
    }
    .csa-welcome-copy {
        padding: 1rem;
    }
    .feedback-prompt {
        align-items: flex-start;
        flex-direction: column;
    }
    .feedback-prompt-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .participant-window-banner {
        align-items: flex-start;
        flex-direction: column;
    }
    .participant-window-close {
        display: block;
        margin-left: 0;
        margin-top: 0.15rem;
    }
    .modal-backdrop { padding: 0; align-items: flex-start; }
    .modal-card {
        max-height: 100vh; height: 100vh;
        border-radius: 0; padding: 1.2rem 1rem;
    }
    .likert-scale { flex-wrap: wrap; gap: 0.3rem; }
    .likert-option { flex: 1 1 18%; padding: 0.4rem 0.2rem; }
}

/* CSA admin dashboard */
.csa-window-card .card-header { margin-bottom: 0.5rem; }
.csa-window-form { padding: 0 1rem 1rem; }
.csa-window-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr);
    gap: 1rem 1.25rem;
    align-items: start;
}
.csa-window-toggle {
    min-height: 46px;
    align-items: center;
}
.csa-window-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding-top: 0.2rem;
}
@media (max-width: 900px) {
    .csa-window-grid { grid-template-columns: 1fr; }
}

.csa-summary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem; padding: 1rem;
}
.csa-summary-cell {
    background: #F8F9FA; border: 1px solid var(--border); border-radius: 6px;
    padding: 0.9rem 1rem;
}
.csa-summary-num { font-size: 1.8rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.csa-summary-lbl { color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }

.csa-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.25rem 0 0.9rem;
}
.csa-insight-grid > div {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 0.85rem;
    background: #F8FAFC;
}
.csa-insight-value {
    display: block;
    color: var(--navy);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.1;
}
.csa-insight-label {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.8rem;
}
.csa-insight-notes {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    display: grid;
    gap: 0.45rem;
    color: var(--muted-strong);
    font-size: 0.88rem;
}
.csa-insight-notes div {
    padding-left: 0.8rem;
    border-left: 3px solid var(--blue);
}
.csa-theme-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.csa-theme-columns h4 {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    color: var(--muted-strong);
}
.csa-theme-row { margin-bottom: 0.7rem; }
.csa-theme-label {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.84rem;
    margin-bottom: 0.2rem;
}
.csa-theme-label strong { color: var(--navy); }
.csa-theme-bar {
    height: 10px;
    background: #E8EDF5;
    border-radius: 999px;
    overflow: hidden;
}
.csa-theme-bar span {
    display: block;
    height: 100%;
    min-width: 4px;
    background: var(--yellow);
    border-radius: inherit;
}
.csa-theme-bar-positive span { background: var(--green); }
.csa-table-note {
    display: block;
    margin-top: 0.15rem;
    line-height: 1.35;
}
.csa-gap-list {
    display: grid;
    gap: 0.65rem;
}

/* CSA participant rows — collapsed summary + expanded detail panel.
   Click a row to open and see every assessment + every feedback they
   submitted with all free-text fields shown verbatim. */
.csa-row {
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 0.5rem; background: #fff;
}
.csa-row[open] { box-shadow: var(--shadow); border-color: var(--border-strong); }
.csa-row-summary {
    padding: 0.85rem 1rem; cursor: pointer; list-style: none;
    user-select: none; transition: background 0.15s;
}
.csa-row-summary:hover { background: var(--bg-alt); }
.csa-row-summary::-webkit-details-marker { display: none; }
.csa-row-summary::before {
    content: '▸'; display: inline-block; margin-right: 0.5rem;
    color: var(--muted); transition: transform 0.15s; font-size: 0.85rem;
}
.csa-row[open] > .csa-row-summary::before { transform: rotate(90deg); }
.csa-row-grid {
    display: inline-grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.6fr) auto auto auto;
    gap: 1rem; align-items: center;
    width: calc(100% - 1.4rem); font-size: 0.9rem;
}
.csa-row-body {
    padding: 0.5rem 1.25rem 1.25rem; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 1.25rem;
}
.csa-detail-block { }
.csa-detail-label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted); font-weight: 700; margin: 0.4rem 0 0.6rem;
}
.csa-dl {
    display: grid; grid-template-columns: 150px 1fr; gap: 0.3rem 1rem;
    margin: 0; font-size: 0.88rem;
}
.csa-dl dt { color: var(--muted); }
.csa-dl dd { margin: 0; color: var(--text); }

.csa-feedback-card {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.9rem 1rem; margin-bottom: 0.7rem; background: #FAFBFD;
}
.csa-feedback-meta { margin-bottom: 0.5rem; }
.csa-feedback-row {
    display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 0.6rem;
    font-size: 0.9rem;
}
.csa-feedback-row strong { color: var(--muted-strong); margin-right: 0.4rem; }
.csa-feedback-quote {
    background: #fff; border-left: 3px solid var(--blue);
    padding: 0.55rem 0.75rem; margin-top: 0.5rem; border-radius: 0 4px 4px 0;
}
.csa-feedback-q-label {
    display: block; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin-bottom: 0.2rem;
}
.csa-feedback-quote p { margin: 0; font-size: 0.9rem; color: var(--text); white-space: pre-wrap; }

/* Inline action drawer for the Users admin page. */
.user-actions { display: inline-block; }
.user-actions > summary { list-style: none; cursor: pointer; }
.user-actions > summary::-webkit-details-marker { display: none; }
.user-actions-panel {
    position: absolute; right: 1.25rem; margin-top: 0.4rem;
    background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 0.85rem 1rem; min-width: 280px;
    z-index: 5;
}
.user-actions-panel .form-label { font-size: 0.8rem; }
.user-actions-panel input.form-control { font-size: 0.88rem; padding: 0.45rem 0.65rem; }

/* Audit log — collapsible rows with field-level before/after diffs. */
.audit-row {
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 0.45rem; background: #fff;
}
.audit-row[open] { box-shadow: var(--shadow); border-color: var(--border-strong); }
.audit-row-summary {
    padding: 0.7rem 1rem; cursor: pointer; list-style: none;
    user-select: none; transition: background 0.15s;
}
.audit-row-summary:hover { background: var(--bg-alt); }
.audit-row-summary::-webkit-details-marker { display: none; }
.audit-row-summary::before {
    content: '▸'; display: inline-block; margin-right: 0.5rem;
    color: var(--muted); transition: transform 0.15s; font-size: 0.85rem;
}
.audit-row[open] > .audit-row-summary::before { transform: rotate(90deg); }
.audit-row-grid {
    display: inline-grid; gap: 1rem; align-items: center; width: calc(100% - 1.4rem);
    grid-template-columns: 170px 110px 130px 1fr auto;
    font-size: 0.88rem;
}
.audit-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.audit-row-body {
    padding: 0.5rem 1rem 1rem; border-top: 1px solid var(--border);
    background: #FAFBFD;
}
.audit-event-note { color: var(--muted); margin: 0.4rem 0 0.6rem; font-size: 0.9rem; }
.audit-diff-table { width: 100%; font-size: 0.88rem; border-collapse: collapse; }
.audit-diff-table th {
    text-align: left; padding: 0.4rem 0.6rem; color: var(--muted);
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
}
.audit-diff-table td {
    padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border);
    vertical-align: top; word-break: break-word;
}
.audit-diff-table tr:last-child td { border-bottom: none; }
.audit-diff-from {
    color: #991B1B; background: #FEF2F2; font-family: ui-monospace, monospace; font-size: 0.83rem;
}
.audit-diff-to {
    color: #166534; background: #F0FDF4; font-family: ui-monospace, monospace; font-size: 0.83rem;
}

@media (max-width: 768px) {
    .audit-row-grid { grid-template-columns: 1fr; gap: 0.25rem; }
    .audit-diff-table th, .audit-diff-table td { padding: 0.3rem; font-size: 0.82rem; }
}

@media (max-width: 768px) {
    .csa-row-grid { grid-template-columns: 1fr; gap: 0.25rem; width: 100%; }
    .csa-dl { grid-template-columns: 1fr; }
    .csa-dl dt { font-weight: 600; }
    .csa-insight-grid,
    .csa-theme-columns { grid-template-columns: 1fr; }
}

.info-note { background: #FFF8E1; border: 1px solid #FFE082; border-radius: var(--radius-sm); padding: 0.5rem 0.8rem; margin-top: 0.4rem; }
.info-note small { color: #795548; }

/* Map tooltips and popups */
.screening-map-block { margin-top: 1.2rem; }
.screening-map-shell {
    position: relative; overflow: hidden; border-radius: var(--radius);
    border: 1px solid var(--border); background: #E8F4FD;
}
#screening-map { height: min(58vh, 560px); min-height: 440px; width: 100%; }
.screening-map-status {
    position: absolute; top: 0.75rem; right: 0.75rem; z-index: 700;
    background: rgba(255,255,255,0.94); color: var(--muted);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 0.35rem 0.65rem; font-size: 0.78rem; box-shadow: var(--shadow-sm);
    pointer-events: none;
}
.screening-map-status.is-hidden { display: none; }
.map-reset-control .map-reset-button {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border: 0; background: #fff; color: #111827; cursor: pointer; padding: 0;
}
.map-reset-control .map-reset-button:hover,
.map-reset-control .map-reset-button:focus { background: #F4F7FB; outline: none; }
.map-reset-control .map-reset-button svg { width: 17px; height: 17px; }
.map-rich-tooltip { font-family: 'Segoe UI', system-ui, sans-serif !important; }
.entity-popup .leaflet-popup-content-wrapper {
    border-radius: 8px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}
.entity-popup .leaflet-popup-content { margin: 0.8rem !important; font-family: 'Segoe UI', system-ui, sans-serif !important; }
.popup-content h3 { font-size: 1rem; }

/* Map legend */
.map-legend { display: flex; align-items: center; gap: 1rem; padding: 0.4rem 0; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.legend-swatch { width: 18px; height: 10px; border-radius: 2px; display: inline-block; border: 1px solid rgba(0,0,0,0.16); }
.map-source-note { margin-left: auto; font-size: 0.75rem; color: var(--muted); }
.map-attribution-note { flex-basis: 100%; justify-content: flex-end; font-size: 0.68rem; color: #697386; }
.map-attribution-note a {
    color: inherit;
    text-decoration: none;
    cursor: default;
}
.map-attribution-note a:hover,
.map-attribution-note a:focus {
    color: inherit;
    text-decoration: none;
}
.map-attribution-note a:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    #screening-map { height: 380px; min-height: 360px; }
    .screening-map-status { left: 0.75rem; right: auto; }
    .map-source-note { margin-left: 0; }
    .map-attribution-note { justify-content: flex-start; }
}

/* Screening search results */
.screening-results { margin-top: 0.5rem; border-radius: var(--radius); overflow: hidden; }
.screening-has-matches { border: 2px solid #FFCDD2; background: #FFF5F5; }
.screening-no-matches { border: 2px solid #C8E6C9; background: #F1F8E9; }
.screening-match-header { padding: 0.6rem 1rem; background: #FFEBEE; color: #B71C1C; font-size: 0.9rem; }
.screening-match-list { max-height: 300px; overflow-y: auto; }
.screening-match-item { padding: 0.5rem 1rem; border-top: 1px solid #FFCDD2; font-size: 0.85rem; }
.screening-match-item:hover { background: #FFF0F0; }
.screening-match-item.is-hidden { display: none; }
.match-name { font-weight: 600; color: var(--navy); }
.match-meta { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.2rem; font-size: 0.8rem; }
.match-addr { font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; }
.match-more {
    width: 100%; border: 0; border-top: 1px solid #FFCDD2; background: #FFF9F9;
    padding: 0.55rem 1rem; color: var(--navy); font-size: 0.82rem;
    font-weight: 600; text-align: left; cursor: pointer;
}
.match-more:hover, .match-more:focus { background: #FFEFF1; outline: none; text-decoration: underline; }
.screening-clear { padding: 0.8rem 1rem; color: #2E7D32; font-size: 0.9rem; }

/* Recruitment program check */
.recruitment-check { display: flex; flex-direction: column; gap: 0.5rem; }
.recruitment-check .checkbox-card { align-items: flex-start; }
.recruitment-check .checkbox-content span { font-size: 0.8rem; line-height: 1.4; }

/* Activity grid */
.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.8rem; }
.activity-card {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.8rem; border: 2px solid var(--border); border-radius: var(--radius);
    cursor: pointer; transition: all 0.2s; background: #fff;
}
.activity-card:hover { border-color: var(--light-blue); background: #F8FBFF; }
.activity-card.selected { border-color: var(--blue); background: #EBF2FC; }
.activity-card input[type=checkbox] { margin-top: 0.3rem; flex-shrink: 0; }
.activity-content strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
.activity-content p { font-size: 0.8rem; color: var(--muted); margin: 0; }

/* Results */
.risk-banner {
    border-radius: var(--radius); padding: 1.5rem 2rem; color: #fff; margin-bottom: 1.5rem;
}
.risk-banner-inner { display: flex; align-items: center; gap: 1.5rem; }
/* Results */
.result-section { margin-bottom: 2rem; }
.result-section h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--border); }

.finding-item {
    padding: 0.8rem 1rem; margin-bottom: 0.5rem;
    background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: var(--radius); font-size: 0.95rem; line-height: 1.5;
}
.next-step-item {
    display: flex; gap: 0.8rem; align-items: flex-start;
    padding: 0.6rem 0; font-size: 0.95rem; line-height: 1.5;
}
.step-number {
    width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}

.findings-list { padding-left: 1.5rem; }
.findings-list li { margin-bottom: 0.4rem; font-size: 0.95rem; }

.guidance-card {
    padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border);
    background: #fff; margin-bottom: 0.8rem;
}
.guidance-card h4 { font-size: 1rem; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; }
.guidance-card p { font-size: 0.9rem; color: var(--muted); margin: 0; }

.resources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.8rem; }
.resource-card {
    display: block; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff; transition: all 0.2s; text-decoration: none; color: var(--text);
}
.resource-card:hover { box-shadow: var(--shadow); border-color: var(--light-blue); transform: translateY(-2px); text-decoration: none; }
.resource-card strong { display: block; margin-bottom: 0.3rem; color: var(--navy); }
.resource-card p { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.5rem; }

/* Placeholder resources (no hosted content yet) — non-clickable, visually muted. */
.resource-card-pending {
    cursor: not-allowed; opacity: 0.78; background: #FAFBFC;
    border-style: dashed; position: relative;
}
.resource-card-pending:hover { box-shadow: none; transform: none; border-color: var(--border); }
.resource-card-pending strong { color: var(--muted); }
.resource-coming-soon-badge {
    display: inline-block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
    background: #FFF3E0; color: #B45309; margin-bottom: 0.5rem;
}

/* Results-page jump navigation. The assessment output runs ~4500px tall;
   this gives researchers a one-line index after the banner. */
.results-toc {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
    padding: 0.65rem 1rem; margin: 0 0 1.2rem; border-radius: var(--radius);
    background: #F0F4FA; border: 1px solid var(--border);
    font-size: 0.85rem;
}
.results-toc-label { color: var(--muted); font-weight: 600; margin-right: 0.5rem; }
.results-toc a {
    color: var(--navy); text-decoration: none; padding: 2px 4px;
    border-bottom: 1px dotted transparent;
}
.results-toc a:hover { border-bottom-color: var(--blue); color: var(--blue); }

/* Sticky "Contact your RSO" banner shown only on escalate (RED) results.
   Fixed bottom-center so it stays visible during the long results scroll
   without dominating the page like a modal would. */
.sticky-rso-cta {
    position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
    z-index: 50; max-width: 92%;
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 1rem 0.6rem 0.9rem;
    border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    background: #B91C1C; color: #fff; font-size: 0.92rem;
}
.sticky-rso-icon { font-size: 1.05rem; line-height: 1; }
.sticky-rso-text { font-weight: 600; }
.sticky-rso-link {
    color: #fff; text-decoration: underline; text-underline-offset: 2px;
    white-space: nowrap;
}
.sticky-rso-link:hover { color: #FEF3C7; }
.sticky-rso-dismiss {
    background: transparent; color: #fff; border: 0; cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 2px 6px; opacity: 0.85;
}
.sticky-rso-dismiss:hover { opacity: 1; }
@media (max-width: 768px) {
    .sticky-rso-cta { font-size: 0.82rem; padding: 0.55rem 0.85rem; }
    .sticky-rso-text { display: none; }  /* keep just the icon + link on narrow screens */
}

.result-actions { display: flex; gap: 1rem; justify-content: center; padding: 1.5rem 0; }
.result-actions .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.rso-handoff-panel {
    background: #FFF7F7;
    border: 1px solid #F3B8B8;
    border-left: 4px solid var(--red);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}
.rso-handoff-panel h3 {
    border-bottom: 0;
    margin-bottom: 0.35rem;
    padding-bottom: 0;
    color: var(--red);
}
.rso-handoff-copy p {
    color: var(--muted-strong);
    margin: 0 0 0.85rem;
    font-size: 0.94rem;
}
.rso-ack-option {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    background: #fff;
    border: 1px solid #F3B8B8;
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.85rem;
    color: var(--text);
    font-weight: 600;
}
.rso-ack-option input {
    margin-top: 0.25rem;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.rso-handoff-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
}
.rso-action-status {
    color: var(--muted-strong);
    font-size: 0.84rem;
}
@media (max-width: 640px) {
    .rso-handoff-actions { align-items: flex-start; flex-direction: column; }
}

/* Assessment Disclosure Box */
.assessment-disclosure {
    margin-top: 2rem;
    border: 1px solid #CBD5E0;
    border-radius: var(--radius);
    background: #F7FAFC;
    overflow: hidden;
}
.disclosure-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.2rem;
    background: #EDF2F7;
    border-bottom: 1px solid #CBD5E0;
    font-size: 0.9rem;
    color: var(--navy);
}
.disclosure-icon {
    font-size: 1.1rem;
    color: var(--blue);
}
.disclosure-body {
    padding: 1rem 1.2rem;
    font-size: 0.85rem;
    color: #4A5568;
    line-height: 1.6;
}
.disclosure-body p { margin-bottom: 0.8rem; }
.disclosure-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin: 1rem 0;
}
.disclosure-col {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
}
.disclosure-col-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.disclosure-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.disclosure-col ul li {
    padding: 0.2rem 0 0.2rem 1rem;
    position: relative;
    font-size: 0.82rem;
}
.disclosure-col ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.disclosure-col:first-child ul li::before { background: var(--green); }
.disclosure-col:last-child ul li::before { background: #A0AEC0; }
.disclosure-footer {
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px solid #E2E8F0;
    font-size: 0.82rem;
    color: #718096;
}
@media (max-width: 768px) {
    .disclosure-columns { grid-template-columns: 1fr; }
}

/* Navigator footer */
.nav-footer { text-align: center; padding: 2rem; color: var(--muted); font-size: 0.875rem; border-top: 1px solid var(--border); margin-top: 3rem; }
.nav-footer p { margin: 0; }
.nav-footer a { color: var(--blue); }
.nav-footer a:hover { color: var(--navy); }

/* ============================================================
   ADMIN (CMS Dashboard)
   ============================================================ */
.admin-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.admin-sidebar {
    width: 240px; background: var(--navy); color: #fff; flex-shrink: 0;
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
    overflow-y: auto; z-index: 100;
}
.sidebar-brand {
    display: flex; align-items: center; gap: 0.7rem; padding: 1.2rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-direction: column; align-items: flex-start;
}
.sidebar-logo { font-size: 1.5rem; }
.sidebar-logo-img {
    height: 32px; width: auto; max-width: 100%;
    margin-bottom: 0.5rem;
}
.sidebar-brand-text strong { display: block; font-size: 0.95rem; color: #fff; }
.sidebar-brand-text small { font-size: 0.75rem; opacity: 0.7; color: #fff; }
.sidebar-brand strong { display: block; font-size: 0.95rem; }
.sidebar-brand small { font-size: 0.75rem; opacity: 0.6; }
.sidebar-nav { padding: 0.5rem 0; flex: 1; }
.nav-item {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1.2rem;
    color: rgba(255,255,255,0.7); font-size: 0.9rem; transition: all 0.2s; text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.nav-item.active { background: rgba(255,255,255,0.12); color: #fff; border-left: 3px solid var(--accent); }
.nav-icon { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.sidebar-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 0.5rem 0; }
.nav-item-external { opacity: 0.8; }

/* Main content */
.admin-main { flex: 1; margin-left: 240px; min-height: 100vh; }
.admin-header {
    background: #fff; padding: 1.2rem 2rem; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 50;
}
.admin-header h1 { font-size: 1.4rem; color: var(--navy); margin: 0; }
.admin-content { padding: 1.5rem 2rem; }
.flash-messages { padding: 0 2rem; }

/* Admin specific cards */
.section-title { font-size: 1.1rem; color: var(--navy); margin: 1.5rem 0 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--border); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* Risk distribution bars */
.risk-bar-container { margin: 0.4rem 0; }
.risk-bar-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.2rem; }
.risk-bar { height: 24px; border-radius: 4px; background: #E9ECEF; overflow: hidden; }
.risk-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.75rem; font-weight: 600; }

/* Pagination */
.pagination { display: flex; gap: 0.3rem; justify-content: center; margin: 1.5rem 0; }
.pagination a, .pagination span {
    padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.9rem; text-decoration: none;
}
.pagination a:hover { background: var(--bg); }
.pagination .active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .admin-sidebar { width: 60px; }
    .admin-sidebar .sidebar-brand strong,
    .admin-sidebar .sidebar-brand small,
    .admin-sidebar .nav-item span:not(.nav-icon) { display: none; }
    .admin-main { margin-left: 60px; }
    .admin-content { padding: 1rem; }
    .wizard-container { padding: 0 1rem; }
    .activity-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .nav-header { padding: 1rem 1.25rem; }
    .nav-brand h1 { font-size: 1.2rem; }
    .nav-subtitle { font-size: 0.8rem; }
    .progress-step span { font-size: 0.72rem; }
    .progress-step { min-width: 60px; }
    .progress-line { max-width: 30px; }
    .step-panel h2 { font-size: 1.25rem; }
}

/* Phone-sized — collapse the 4-column agency / activity / tech grids
   gracefully and tighten step-panel padding so labels still fit. */
@media (max-width: 480px) {
    .checkbox-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .progress-bar { padding: 0.6rem 0; gap: 0; }
    .progress-line { max-width: 16px; }
    .step-num { width: 30px; height: 30px; font-size: 0.85rem; }
    .progress-step { min-width: 48px; gap: 0.2rem; }
    .progress-step span { font-size: 0.68rem; }
    .btn { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
    .btn-sm { padding: 0.35rem 0.85rem; }
    .nav-header-inner { gap: 0.5rem; }
    .nav-logo { width: 40px; height: 40px; font-size: 1.5rem; }
    .nav-brand h1 { font-size: 1.05rem; }
    .nav-subtitle { font-size: 0.72rem; }
}

/* ============================================================
   SCREENING PANEL — Slide-out entity explorer
   ============================================================ */
.screening-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3);
    z-index: 1099; transition: opacity 0.3s;
}
.screening-overlay.open { display: block; }

.screening-panel {
    position: fixed; top: 0; right: -440px; width: 420px; height: 100vh;
    background: #fff; z-index: 1100; display: flex; flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15); transition: right 0.3s ease;
}
.screening-panel.open { right: 0; }

.sp-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.8rem 1rem; background: var(--navy); color: #fff;
    flex-shrink: 0;
}
.sp-back {
    background: none; border: none; color: #fff; font-size: 1.3rem;
    cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 4px;
    line-height: 1; transition: background 0.2s;
}
.sp-back:hover { background: rgba(255,255,255,0.15); }
.sp-title { flex: 1; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-close {
    background: none; border: none; color: rgba(255,255,255,0.7);
    font-size: 1.5rem; cursor: pointer; padding: 0.1rem 0.4rem;
    line-height: 1; transition: color 0.2s;
}
.sp-close:hover { color: #fff; }

.sp-stats {
    padding: 0.8rem 1rem; background: #F8F9FA; border-bottom: 1px solid var(--border);
    font-size: 0.85rem; flex-shrink: 0;
}
.sp-stats-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.2rem 0; font-size: 0.8rem;
}
.sp-stats-bar .sp-bar-label { color: var(--text); }
.sp-stats-bar .sp-bar-count { font-weight: 700; color: var(--navy); }

.sp-filters {
    padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sp-search {
    width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit;
    transition: border-color 0.2s;
}
.sp-search:focus { outline: none; border-color: var(--light-blue); box-shadow: 0 0 0 3px rgba(74,144,217,0.12); }
.sp-source-pills {
    display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem;
}
.sp-pill {
    padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.72rem;
    font-weight: 600; border: 1px solid var(--border); background: #fff;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.sp-pill:hover { border-color: var(--blue); color: var(--blue); }
.sp-pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Country-view and entity-view must participate in the flex chain
   so that .sp-list can calculate its available height and scroll. */
#sp-country-view {
    flex: 1; display: flex; flex-direction: column;
    min-height: 0;  /* critical: allows flex child to shrink below content size */
    overflow: hidden;
}
#sp-entity-view {
    flex: 1; display: flex; flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.sp-list {
    flex: 1; overflow-y: auto; padding: 0;
    min-height: 0;  /* allows proper shrinking inside nested flex */
    overscroll-behavior: contain;  /* prevent scroll from leaking to page body */
}
.sp-entity {
    display: block; padding: 0.7rem 1rem; border-bottom: 1px solid #F0F2F5;
    cursor: pointer; transition: background 0.15s; text-decoration: none; color: var(--text);
}
.sp-entity:hover { background: #F4F8FE; text-decoration: none; }
.sp-entity-name { font-weight: 600; font-size: 0.85rem; color: var(--navy); margin-bottom: 0.15rem; }
.sp-entity-meta { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.sp-entity-meta .badge { font-size: 0.65rem; padding: 0.1rem 0.4rem; }
.sp-entity-type { font-size: 0.75rem; color: var(--muted); }

.sp-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 0.6rem 1rem; border-top: 1px solid var(--border);
    background: #FAFBFC; flex-shrink: 0; font-size: 0.8rem;
}
.sp-page-btn {
    padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: #fff; cursor: pointer; font-size: 0.8rem; transition: all 0.15s;
}
.sp-page-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.sp-page-btn:disabled { opacity: 0.4; cursor: default; }
.sp-page-info { color: var(--muted); }
.sp-loading { text-align: center; padding: 2rem; color: var(--muted); }

/* Level 2: Entity detail */
.sp-entity-detail { padding: 1.2rem; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.sp-detail-name { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: 0.8rem; line-height: 1.3; }
.sp-detail-section { margin-bottom: 1rem; }
.sp-detail-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.25rem; }
.sp-detail-value { font-size: 0.9rem; color: var(--text); line-height: 1.5; }
.sp-detail-value a { color: var(--blue); }
.sp-detail-badge {
    display: inline-block; padding: 0.3rem 0.8rem; border-radius: var(--radius-sm);
    font-size: 0.8rem; font-weight: 600; margin-bottom: 0.8rem;
}
.sp-alias-list { list-style: none; padding: 0; margin: 0; }
.sp-alias-list li {
    padding: 0.25rem 0; font-size: 0.85rem; color: var(--text);
    border-bottom: 1px solid #F5F5F5;
}
.sp-detail-actions {
    display: flex; flex-direction: column; gap: 0.55rem;
    border-top: 1px solid var(--border); padding-top: 1rem;
}
.sp-detail-use {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; padding: 0.65rem 1rem; background: var(--navy); color: #fff;
    border: 1px solid var(--navy); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.sp-detail-use:hover { background: var(--navy-deep); border-color: var(--navy-deep); box-shadow: var(--shadow-sm); }
.sp-detail-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    justify-content: center; width: 100%;
    padding: 0.5rem 1rem; background: #fff; color: var(--blue);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600;
    text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sp-detail-link:hover { background: var(--bg-alt); border-color: var(--blue); color: var(--blue); text-decoration: none; }
.sp-detail-action-note { font-size: 0.75rem; color: var(--muted); line-height: 1.4; }

/* ============================================================
   Responsive — Panel
   ============================================================ */
@media (max-width: 768px) {
    .screening-panel { width: 100%; right: -100%; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
    .nav-header, .admin-sidebar, .step-actions, .result-actions,
    .btn, .progress-bar, .screening-panel, .screening-overlay { display: none !important; }
    .admin-main { margin-left: 0; }
    .risk-banner { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body { background: #fff; }
}

/* ============================================================
   Login page
   ============================================================ */
body.login-page { background: #0f172a; }
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.login-card {
    background: #fff;
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 2.25rem;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.login-brand { text-align: center; margin-bottom: 1.75rem; }
.login-logo { font-size: 2.5rem; line-height: 1; }
/* Logo banner — sits in a navy strip inside the white login card so the
   white-on-transparent SECURE Center logo remains visible. */
.login-logo-img {
    display: block; height: 40px; width: auto; max-width: 100%;
    margin: -2.5rem -2.25rem 1.4rem;
    padding: 1.4rem 2.25rem; box-sizing: content-box;
    background: var(--navy); border-radius: 12px 12px 0 0;
    object-fit: contain; object-position: left center;
}
.login-brand h1 { margin: 0.5rem 0 0.25rem; font-size: 1.4rem; color: var(--navy); }
.login-brand p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.login-form { display: flex; flex-direction: column; gap: 0.5rem; }
.login-form label { font-weight: 600; font-size: 0.85rem; color: #334155; margin-top: 0.5rem; }
.login-form input {
    padding: 0.65rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
}
.login-form input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.login-form button { margin-top: 1rem; padding: 0.7rem; }
.login-back { text-align: center; margin-top: 1.25rem; font-size: 0.85rem; }
.login-back a { color: #64748b; text-decoration: none; }
.login-back a:hover { color: #2563eb; }

/* Admin user chip in header */
.admin-user-chip { display: inline-flex; align-items: center; gap: 0.5rem; color: #475569; font-size: 0.9rem; }
.admin-user-chip strong { color: #0f172a; }
.admin-logout-form { display: inline; }
.admin-logout-form button {
    background: transparent; border: 1px solid #cbd5e1; color: #475569;
    padding: 0.35rem 0.75rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
}
.admin-logout-form button:hover { background: #f1f5f9; }