/* ── Reset + base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --navy: #1a365d;
    --navy-light: #2a4a7f;
    --navy-dark: #0f2440;
    --red: #c53030;
    --green: #276749;
    --amber: #c27803;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: var(--gray-800);
    background: var(--gray-50);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

/* Suppress auto-focus outline that Blazor adds to h1 on navigation */
h1:focus, h2:focus, h3:focus { outline: none !important; }
[tabindex="-1"]:focus { outline: none !important; }

/* ── Shell ── */
.shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    height: 100vh;
    overflow: hidden;
}

/* Hidden-by-default mobile-only affordances (shown via media query). */
.nav-toggle-input { display: none; }
.nav-toggle { display: none; }
.nav-backdrop { display: none; }
.mobile-topbar { display: none; }

/* ── Sidebar ── */
.sidebar {
    background: var(--navy);
    color: white;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
}

.sidebar-brand {
    padding: 20px 20px 16px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-brand span {
    opacity: 0.5;
    font-weight: 400;
    font-size: 12px;
    display: block;
    margin-top: 2px;
}

.sidebar nav {
    padding: 12px 0;
    flex: 1;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}

.sidebar nav a:hover {
    color: white;
    background: rgba(255,255,255,0.08);
}

.sidebar nav a.active {
    color: white;
    background: rgba(255,255,255,0.12);
}

.sidebar nav a svg {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

/* ── Main content ── */
.main {
    padding: 32px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Horizontal-scroll wrapper for dense tables on narrow screens. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.main > * {
    max-width: 1200px;
}

.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}

.page-header p {
    color: var(--gray-500);
    font-size: 13px;
    margin-top: 4px;
}

/* ── Cards ── */
.card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card-body {
    padding: 20px;
}

/* Collapsable card via native <details>. Summary stays visible; body reveals on click.
   The default disclosure triangle is kept as the user-facing affordance. */
details.card > summary {
    cursor: pointer;
    list-style-position: outside;
}
details.card > summary:hover {
    background: var(--gray-50);
}
details.card[open] > summary {
    border-bottom: 1px solid var(--gray-200);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.stat-card .label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-card .value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.02em;
    margin-top: 4px;
}

.stat-card .sub {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 4px;
}

/* ── Tables ── */
.table-wrap {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

thead {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: var(--gray-50);
}

/* Compact variant for dense preview tables (e.g. auto-send upcoming) */
table.table-compact th,
table.table-compact td {
    padding: 8px 12px;
}

/* Subdued link styling inside tables — no default-browser blue underline. */
table tbody a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-200);
}
table tbody a:hover {
    border-bottom-color: var(--navy);
}

/* Fixed-slot action row so adjacent buttons don't shift when some are optional.
   Two 72px columns means Unmark always sits in the same position whether or not
   Replied is rendered next to it. */
.action-buttons {
    display: grid;
    grid-template-columns: 72px 72px;
    gap: 6px;
    justify-content: start;
}
.action-buttons > .btn {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* ── Badges ── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-green { background: #dcfce7; color: var(--green); }
.badge-red { background: #fee2e2; color: var(--red); }
.badge-amber { background: #fef3c7; color: var(--amber); }
.badge-gray { background: var(--gray-100); color: var(--gray-500); }
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.badge-purple { background: #f3e8ff; color: #7e22ce; }

/* Compact badge for in-cell labels (e.g. dashboard report-type pill leading
   the reference). Standard .badge is sized for status columns; .badge-sm
   sits inline with the cell text without dominating it. */
.badge-sm {
    padding: 1px 6px;
    font-size: 10px;
    letter-spacing: 0.02em;
}

/* ── Stage chooser panels (Submit "What stage are you at?" + screening sub-choice) ── */
.stage-head {
    text-align: center;
    margin-bottom: 28px;
}
.stage-head h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-900);
    margin: 0 0 6px;
}
.stage-head p {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0;
}
.stage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.stage-grid.two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 660px;
    margin: 0 auto;
}
/* The whole panel is the click target - a big <button> styled as a card. */
.stage-panel {
    text-align: left;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 24px 20px 20px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
    position: relative;
}
.stage-panel:hover {
    border-color: var(--navy-light);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.stage-panel:focus-visible {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(26,54,93,0.14);
}
.stage-art {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #eef2f9;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.stage-art svg { width: 30px; height: 30px; }
.stage-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    margin: 0 0 8px;
}
.stage-desc {
    font-size: 13.5px;
    color: var(--gray-600);
    margin: 0 0 18px;
    flex: 1;
}
.stage-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.stage-cost {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-500);
}
.stage-go {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}
.stage-go svg { width: 15px; height: 15px; transition: transform 0.12s; }
.stage-panel:hover .stage-go svg { transform: translateX(3px); }
.stage-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 9999px;
    color: #7e22ce;
    background: #f3e8ff;
}
.stage-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    padding: 0;
    margin-bottom: 16px;
}
.stage-back:hover { color: var(--navy); }
.stage-back svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
    .stage-grid, .stage-grid.two { grid-template-columns: 1fr; }
}

/* ── Feasibility site rows (What can I build? wizard step - issue #310) ── */
.feasibility-site {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 10px;
    background: white;
}
.feasibility-site-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.feasibility-site-num {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--gray-400);
}
.feasibility-site-remove {
    border: none;
    background: transparent;
    color: var(--gray-400);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.feasibility-site-remove:hover { color: var(--red); }

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;  /* .btn is used on <a> too — kill anchor underline */
}

.btn-primary {
    background: var(--navy);
    color: white;
    border-color: var(--navy);
}

.btn-primary:hover { background: var(--navy-light); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-danger {
    background: var(--red);
    color: white;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-ghost {
    background: transparent;
    color: var(--gray-600);
    border-color: var(--gray-300);
}

.btn-ghost:hover { background: var(--gray-50); }

/* ── Forms ── */
select, input[type="text"], input[type="search"] {
    padding: 7px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--gray-700);
    background: white;
}

select:focus, input:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(26,54,93,0.1);
}

/* ── Utility ── */
.text-muted { color: var(--gray-400); }
.text-sm { font-size: 12px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.gap-2 { gap: 8px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }

/* ── Not-found page (issue #163) ── */
.notfound-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecf2 100%);
}

.notfound-card {
    max-width: 440px;
    width: 100%;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(15, 36, 64, 0.06);
}

.notfound-logo {
    height: 40px;
    margin: 0 auto 32px auto;
    display: block;
}

.notfound-code {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 12px;
}

.notfound-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-900);
    margin: 0 0 12px 0;
}

.notfound-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-600);
    margin: 0 0 28px 0;
}

.notfound-cta {
    display: inline-block;
    background: #1a365d;
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s;
}

.notfound-cta:hover {
    background: #0f2440;
}

/* ── Login page ── */
.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.login-hero {
    background: linear-gradient(135deg, #1a365d 0%, #0f2440 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    overflow: hidden;
}

.login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 50%);
    pointer-events: none;
}

.login-hero-inner {
    max-width: 420px;
    color: white;
    position: relative;
}

.login-logo {
    height: 56px;
    filter: brightness(0) invert(1);
    margin-bottom: 48px;
    display: block;
}

.login-hero-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 20px 0;
    color: white;
}

.login-hero-subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 0 0 48px 0;
}

.login-hero-meta {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.4);
}

.login-form-side {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.login-form-wrap {
    width: 100%;
    max-width: 380px;
}

.login-form-header h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-900);
    margin: 0 0 6px 0;
}

.login-form-header p {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0 0 32px 0;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    letter-spacing: 0.01em;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--gray-900);
    background: white;
    transition: all 0.15s;
}

.field textarea {
    height: auto;
    padding: 10px 14px;
    resize: vertical;
    min-height: 80px;
}

/* A native file input doesn't fill a fixed 44px line-box like a text field - the
   Choose-files button top-aligns and leaves an empty gap. Let it size to its content
   with symmetric padding so it sits like the other controls (issue #316). */
.field input[type="file"] {
    height: auto;
    padding: 9px 12px;
    cursor: pointer;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--gray-400);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(26,54,93,0.12);
}

.login-error {
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--red);
    border-radius: 8px;
    font-size: 13px;
}

.accept-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.4;
    margin-top: 4px;
}

.accept-terms input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--navy);
    cursor: pointer;
}

.accept-terms a {
    color: var(--navy);
    text-decoration: underline;
}

.accept-terms a:hover { color: var(--navy-dark); }

.login-submit {
    width: 100%;
    height: 46px;
    background: var(--navy);
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 8px;
}

.login-submit:hover { background: var(--navy-light); }
.login-submit:active { background: var(--navy-dark); }

.login-footer {
    margin-top: 48px;
    font-size: 12px;
    color: var(--gray-400);
    text-align: center;
}

.login-success {
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: var(--green);
    border-radius: 8px;
    font-size: 13px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-size: 12px;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

.login-oauth {
    width: 100%;
    height: 46px;
    background: white;
    color: var(--gray-800);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.login-oauth:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.login-oauth svg {
    width: 18px;
    height: 18px;
}

.login-notice {
    margin-top: 18px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.login-links {
    margin-top: 16px;
    font-size: 13px;
    text-align: center;
}

.login-links a {
    color: var(--navy);
    text-decoration: none;
}

.login-links a:hover { text-decoration: underline; }

/* ── Planner shell (used by /planner/**) ── */
.planner-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--gray-50);
}

.planner-topbar {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 14px 32px;
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.planner-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--navy);
    text-decoration: none;
}

.planner-nav {
    display: flex;
    gap: 24px;
    flex: 1;
}

.planner-nav a {
    color: var(--gray-700);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.planner-nav a:hover {
    color: var(--navy);
}

.planner-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.credit-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}

.credit-chip-amber {
    background: #fef3c7;
    color: var(--amber);
}

.credit-chip-red {
    background: #fee2e2;
    color: var(--red);
}

.planner-org {
    color: var(--gray-500);
    font-size: 13px;
}

.planner-signout {
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.planner-signout:hover {
    color: var(--gray-700);
}

.planner-main {
    flex: 1;
    padding: 32px 32px 64px;  /* extra bottom padding so content clears the fixed support bar */
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

/* Persistent feedback bar pinned to the bottom of every planner page.
   Quiet — gray-500 on white, single line, mailto. The 32px bottom padding
   on .planner-main keeps the last card off the bar's top border. */
.planner-support-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    background: white;
    border-top: 1px solid var(--gray-200);
    padding: 10px 32px;
    text-align: center;
    font-size: 12px;
    color: var(--gray-500);
}
.planner-support-bar a {
    color: var(--navy);
    text-decoration: none;
    font-weight: 500;
    margin-left: 4px;
}
.planner-support-bar a:hover { text-decoration: underline; }

.planner-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.planner-page-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.planner-sub {
    color: var(--gray-500);
    font-size: 14px;
    margin-top: 4px;
}

.btn-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Two-column wizard grid (Step 2 details). Collapses to one column on
   phones via the 640px media block below. */
.step2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Issue #340: draw-a-site screening map. Fixed height so Leaflet has a box to render into. */
.screening-map {
    height: 360px;
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100);
}
.screening-map .leaflet-container {
    height: 100%;
    width: 100%;
    border-radius: 8px;
    font: inherit;
}
/* Issue #340: "which location are we screening?" banner under the map. Muted when no
   boundary is drawn (the searched point is used); accented once a boundary supersedes it. */
.boundary-status {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--gray-600);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
}
.boundary-status.is-active {
    color: var(--navy);
    background: rgba(26, 54, 93, 0.06);
    border-color: rgba(26, 54, 93, 0.25);
    font-weight: 500;
}

/* Report viewer affordance — desktop renders the iframe; phones swap to
   a 'View full report' link that opens the print-shaped HTML in a new tab.
   Toggling lives in the 640px media block. */
.report-mobile-link { display: none; }

/* ── Loading state · close inspection (planner application detail, while running) ── */
.loading-empty {
    text-align: center;
    padding: 40px 20px 48px;
    color: var(--gray-500);
}
.loading-stage {
    width: 100%;
    max-width: 480px;
    margin: 0 auto 26px;
    aspect-ratio: 16 / 10;
}
.loading-stage svg { width: 100%; height: 100%; display: block; }
.loading-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-500);
    font-size: 13px;
    font-style: italic;
    max-width: 100%;
    min-height: 20px;
}
.loading-live-dot {
    flex: 0 0 auto;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--navy);
    animation: loading-live-pulse 1.6s ease-in-out infinite;
}
.loading-live-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 440px;
    /* Element is remounted by Blazor's @key on each new summary, so this
       runs fresh on every event for a soft fade-in. */
    animation: loading-live-text-in 0.32s ease-out;
}
@keyframes loading-live-pulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.35); }
}
@keyframes loading-live-text-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Magnifier drift — both the clip circle and the visible body share this so
   the lens reveals exactly what it's hovering over. */
@keyframes loading-mag-drift {
    0%, 100% { transform: translate(112px, 132px); }
    20%      { transform: translate(178px, 100px); }
    40%      { transform: translate(228px, 132px); }
    60%      { transform: translate(134px, 150px); }
    80%      { transform: translate(196px, 116px); }
}
.loading-mag-pos, .loading-mag-clip {
    animation: loading-mag-drift 18s cubic-bezier(.4,.1,.5,.95) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .loading-mag-pos, .loading-mag-clip { animation: none; transform: translate(196px, 116px); }
    .loading-live-dot { animation: none; opacity: 0.8; }
    .loading-live-text { animation: none; }
}

@media (max-width: 640px) {
    /* Phone layout: row 1 = brand left, credit chip + sign-out right.
       Row 2 = nav as a single underline-tab strip. Org name is hidden as
       it's redundant when there's only one org per logged-in user. */
    .planner-topbar {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 16px;
        gap: 8px;
        row-gap: 0;
    }
    .planner-brand {
        flex: 1;
        min-width: 0;
    }
    .planner-meta {
        margin-left: auto;
        gap: 12px;
    }
    .planner-org {
        display: none;
    }
    .planner-nav {
        order: 3;
        flex-basis: 100%;
        gap: 20px;
        border-top: 1px solid var(--gray-100);
        margin: 0 -16px;
        padding: 0 16px;
    }
    .planner-main {
        padding: 20px 16px;
    }

    /* Sticky support bar steals real-estate on a 390x844 viewport — let it
       scroll away with the page. The bar still anchors the bottom of the
       document, just not glued there. */
    .planner-support-bar {
        position: static;
    }

    /* Tap-target floor — desktop's compact 22px / 18px buttons are below the
       40px minimum on a touchscreen. Bump padding inside the media query so
       desktop chrome stays tight. */
    .btn {
        min-height: 40px;
        padding: 10px 16px;
        font-size: 14px;
    }
    .btn-sm {
        min-height: 36px;
        padding: 8px 14px;
    }

    /* iOS Safari zooms inputs whose font-size is below 16px on focus.
       Match the form inputs' rendered size to the threshold to suppress it. */
    .field input,
    .field select,
    .field textarea {
        font-size: 16px;
    }

    /* Step 2 wizard grid collapses to a single column. */
    .step2-grid {
        grid-template-columns: 1fr;
    }

    /* Application-detail header: stack title and action buttons. */
    .planner-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    /* Iframe → mobile-link swap on the report viewer. */
    .report-iframe-card { display: none; }
    .report-mobile-link {
        display: inline-flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 16px;
    }

    /* Anchor + button tap-target bumps for chrome elements. The links here
       are primary-nav affordances (brand, nav, sign-out, mailto support,
       'forgot password', back-links) — desktop renders them at the text
       baseline; on a phone they need the WCAG AAA 40px+ hit area. */
    .planner-brand,
    .planner-nav a,
    .planner-signout,
    .planner-support-bar a,
    .login-links a,
    .back-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
    .planner-signout,
    .planner-support-bar a,
    .login-links a {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Inline back-link used at the top of /planner/applications/{id} and
   /planner/submit. Replaces a duplicated inline style="…" — same look,
   reusable + lets the mobile tap-target rule above hit it. */
.back-link {
    color: var(--gray-500);
    text-decoration: none;
    font-size: 13px;
}

/* ── Signup page (Variation C: value-led split) ── */
.signup-page {
    min-height: 100vh;
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
}

.signup-topbar {
    padding: 20px 32px;
    font-weight: 700;
    color: var(--navy);
    font-size: 18px;
    letter-spacing: -0.01em;
}

.signup-shell {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 64px;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 32px 64px;
    align-items: start;
    flex: 1;
}

.signup-value h1 {
    margin: 0 0 12px 0;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--gray-900);
}

.signup-value .signup-lead {
    color: var(--gray-500);
    margin: 0 0 28px 0;
    font-size: 15px;
    max-width: 440px;
    line-height: 1.5;
}

.signup-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.signup-benefits li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.5;
}

.signup-benefits svg {
    flex: 0 0 auto;
    color: var(--green);
    margin-top: 3px;
}

.signup-benefits b {
    color: var(--gray-900);
    font-weight: 600;
}

.signup-promo-strip {
    padding: 14px 16px;
    background: #ecfdf5;
    border-left: 3px solid var(--green);
    border-radius: 6px;
    font-size: 13px;
    color: #065f46;
    max-width: 440px;
    line-height: 1.5;
}

.signup-promo-strip b { color: #064e3b; font-weight: 600; }

.signup-promo-strip.is-warn {
    background: #fffbeb;
    border-left-color: var(--amber);
    color: #92400e;
}

.signup-promo-strip.is-warn b { color: #78350f; }

.signup-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-sm);
}

.signup-card h2 {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gray-900);
}

.signup-card .signup-sub {
    margin: 0 0 20px 0;
    color: var(--gray-500);
    font-size: 13px;
}

.signup-card .login-form { gap: 14px; }

.signup-promo-feedback {
    font-size: 12px;
    margin-top: 6px;
    min-height: 14px;
    color: var(--gray-500);
}

.signup-promo-feedback.is-ok { color: var(--green); }
.signup-promo-feedback.is-warn { color: #92400e; }

.signup-alt {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--gray-500);
}

.signup-alt a { color: var(--navy); text-decoration: none; }
.signup-alt a:hover { text-decoration: underline; }

@media (max-width: 880px) {
    .signup-shell {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 16px 16px 48px;
    }
    .signup-value h1 { font-size: 24px; }
    .signup-topbar { padding: 16px 20px; }
}

@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-hero { padding: 32px 24px; min-height: 240px; }
    .login-hero-title { font-size: 28px; }
    .login-hero-subtitle { margin-bottom: 16px; }
    .login-logo { height: 40px; margin-bottom: 24px; }
    .login-form-side { padding: 32px 24px; }

    /* Shell collapses to single column; sidebar becomes off-canvas. */
    .shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        /* Above the mobile topbar (1002) so the sidebar's own brand panel
           isn't clipped by the topbar when the nav is open. */
        z-index: 1003;
    }
    .nav-toggle-input:checked ~ .sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow);
    }
    .nav-toggle-input:checked ~ .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1000;
    }
    /* Fixed top bar — logo left, hamburger right. Replaces the earlier
       floating-hamburger pattern with a proper app chrome header. */
    .mobile-topbar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        background: var(--navy);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        z-index: 1002;
    }
    .mobile-topbar-brand {
        display: flex;
        align-items: center;
        text-decoration: none;
        min-width: 0;
    }
    .mobile-topbar-logo {
        height: 50px;
        width: auto;
        display: block;
        object-fit: contain;
    }
    .nav-toggle {
        display: flex;
        position: static;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    }
    .nav-toggle:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.22);
    }
    .nav-toggle:active {
        transform: scale(0.96);
    }
    .nav-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: white;
        border-radius: 2px;
    }
    /* Sidebar slides over the topbar when open; topbar stays at z-index 1002
       and sidebar at 1001, so the hamburger stays tappable — but the checked
       state hides it anyway to keep the header uncluttered. */
    .nav-toggle-input:checked ~ .mobile-topbar .nav-toggle {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .main {
        padding: 16px;
        padding-top: 72px;
        overflow-x: hidden;
        height: auto;
    }
    .page-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    .page-header h1 { font-size: 20px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-card { padding: 14px; }
    .stat-card .value { font-size: 22px; }
    /* Stack the inline two-column details grid on mobile. */
    .details-grid { grid-template-columns: 1fr !important; }
    .detail-actions { flex-wrap: wrap; }
    .applications-filters { flex-wrap: wrap; }
    .applications-filters input[type="search"] { width: 100% !important; }
    .applications-filters select { flex: 1 1 auto; min-width: 0; }
    .report-frame { height: 500px !important; }
}

/* ── Contacted row fade ── */
tr.row-contacted td, tr.row-contacted td .text-muted { color: var(--gray-400); }
tr.row-contacted td .badge { opacity: 0.6; }

/* ── Modal ── */
.modal-backdrop {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    max-width: none !important;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.modal {
    background: white; border-radius: var(--radius); width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25); display: flex; flex-direction: column;
    max-height: 90vh; overflow: hidden;
}
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--gray-200); }

.form-input {
    padding: 7px 12px; border: 1px solid var(--gray-300); border-radius: 6px;
    font-size: 13px; font-family: inherit; color: var(--gray-700); background: white;
}
.form-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,54,93,0.1); }

/* ── Bulk appeal sender: sticky bottom action bar ──
   Slides in once anything is selected. Pinned beneath the 220px sidebar so
   it tracks the .main content column. On the mobile shell (where .sidebar
   becomes off-canvas via the 900px media block above) it spans the full
   width instead. */
.action-bar {
    position: fixed;
    left: 220px; right: 0; bottom: 0;
    background: white;
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
    padding: 14px 32px;
    display: flex; align-items: center; gap: 16px;
    z-index: 50;
    transition: transform 0.18s ease;
}
.action-bar.empty { transform: translateY(110%); }
.action-bar .count { font-size: 14px; font-weight: 500; color: var(--gray-700); }
.action-bar .count strong { color: var(--navy); font-weight: 700; }
.action-bar .meta { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.action-bar .est { font-size: 12px; color: var(--gray-500); }
.action-bar .clear {
    font-size: 12px; color: var(--gray-500);
    background: none; border: none; cursor: pointer;
    padding: 4px 8px; text-decoration: underline; font-family: inherit;
}
.action-bar .clear:hover { color: var(--gray-700); }
@media (max-width: 900px) {
    .action-bar { left: 0; padding: 12px 16px; }
}

/* ── Blazor ── */
.blazor-error-boundary { background: var(--red); padding: 1rem; color: white; border-radius: var(--radius); }
.blazor-error-boundary::after { content: "An error has occurred." }
#blazor-error-ui { display: none; background: var(--red); color: white; padding: 8px 16px; position: fixed; bottom: 0; width: 100%; z-index: 9999; text-align: center; font-size: 13px; }