/* ASCEND staff PWA - first-slice styles. Visual direction taken from the
   client mockups in /interface (navy sidebar, green accent, rounded white
   cards on a soft gray background). Kept dependency-free; no webfonts. */

:root {
    /* Brand spine: navy = trust + ground; green = growth + hope.
       2026 polish pass added the deeper navy-100, brighter green, and a warm
       coral accent (informed by trauma-informed design research that calls for
       warmth without alarm — coral reads as energy, not danger like red). */
    --brand-navy:       #1a3a5e;
    --brand-navy-700:   #2a4d75;
    --brand-navy-100:   #d6e0ee;     /* new: deeper than -50 for subtle backgrounds */
    --brand-navy-50:    #eaf0f7;
    --brand-green:      #16a34a;     /* punchier than the previous #2da471 */
    --brand-green-600:  #15803d;     /* deeper hover/active */
    --brand-green-50:   #dcfce7;     /* brighter wash */

    /* New warm accent — coral. Used sparingly for energy/highlight chips and
       focus glow. Not used for danger (--color-danger stays red). */
    --accent-coral:     #f97316;
    --accent-coral-50:  #fff7ed;
    --accent-coral-100: #ffedd5;
    --accent-coral-600: #ea580c;

    --bg-app:           #f4f6fa;
    --bg-card:          #ffffff;
    --text-primary:     #1d2433;
    --text-secondary:   #5a6478;
    --text-muted:       #8993a4;
    --border-subtle:    #e3e7ee;
    --shadow-card:      0 1px 2px rgba(20, 35, 60, .06), 0 4px 16px rgba(20, 35, 60, .05);
    --shadow-card-hover:0 6px 22px rgba(20, 35, 60, .14), 0 2px 6px rgba(20, 35, 60, .08);
    --radius-card:      12px;
    --radius-pill:      999px;

    /* Amber/danger/violet — punchier saturations for chip vibrance. */
    --color-amber:      #d97706;
    --color-amber-50:   #fef3c7;
    --color-amber-100:  #fde68a;
    --color-danger:     #b91c1c;
    --color-danger-50:  #fee2e2;
    --color-violet:     #7c3aed;     /* slightly more electric */
    --color-violet-50:  #ede9fe;
    --color-violet-100: #ddd6fe;

    /* Aurora gradient — used on the dashboard hero greeting + branded surfaces
       like the section-card top accent line + button focus rings. Reads as
       "alive" without dominating the palette. */
    --aurora: linear-gradient(135deg, #1a3a5e 0%, #2563eb 35%, #16a34a 70%, #f97316 100%);
}

html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-primary);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
}
/* When a plan card is the scroll-into-view target (anchor navigation from a
   Need's expanded drawer), highlight it briefly so the operator's eye lands. */
.plan-card:target { animation: pulse-highlight 1.6s ease-out; }
.referral-card:target { animation: pulse-highlight 1.6s ease-out; }
.event-card:target { animation: pulse-highlight 1.6s ease-out; }
@keyframes pulse-highlight {
    0%   { box-shadow: 0 0 0 4px rgba(249, 115, 22, .55); }
    40%  { box-shadow: 0 0 0 6px rgba(249, 115, 22, .35); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

h1 { font-size: 1.625rem; font-weight: 600; margin: 0 0 .25rem 0; }
h2 { font-size: 1.125rem; font-weight: 600; margin: 0; }
code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; background: var(--brand-navy-50); padding: 1px 6px; border-radius: 4px; color: var(--brand-navy); }

/* ---------- shell ---------- */
.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.app-nav {
    /* Navy gradient promoted from the person-detail POC so the rail reads as a
       branded surface (matches --aui-navy-gradient, oriented vertically for the
       tall sidebar) instead of a flat block. */
    background: linear-gradient(180deg, #234b78 0%, #1a3a5e 55%, #14304f 100%);
    color: #fff;
    display: flex; flex-direction: column;
    padding: 1.25rem 0;
}
/* May 13 2026: .nav-brand / .nav-logo no longer rendered (logo moved to
   the white topbar in MainLayout.razor). Selectors kept here as no-ops in
   case any third-party stylesheet inspector references them. */
.nav-brand { display: none; }
.nav-logo  { display: none; }
.nav-items { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: .75rem .75rem 0; }

/* Subtle uppercase section header inside the sidebar - groups the items into
   "Workspace / Insights / Settings" without adding visual weight. First-of-type
   suppresses the top margin so the first label hugs the brand area. */
.nav-section-label {
    font-size: .65rem; text-transform: uppercase; letter-spacing: .09em;
    color: rgba(255,255,255,.82); font-weight: 600;
    padding: .85rem .85rem .35rem;
}
.nav-section-label:first-of-type { padding-top: .25rem; }

/* The collapsible category header that replaced the static label above. A <button>
   rather than a <div> because it is operated, so it has to be reachable and
   announceable; these rules strip the button chrome back to the label's appearance.
   Declared here rather than inline on each of the seven headers, which is where they
   started and meant seven copies to keep in step. */
.nav-group-header {
    display: flex; align-items: center; gap: .45rem;
    width: 100%; box-sizing: border-box;
    background: none; border: 0; cursor: pointer; text-align: left;
    padding: .5rem .75rem .35rem;
    color: rgba(255,255,255,.66);
    font: inherit; font-size: .68rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
}

/* Only the size and the easing live here. The rotation is per-header state, so it stays
   an inline transform on the element that knows whether its group is open. */
.nav-chevron {
    width: .7rem; height: .7rem; flex: 0 0 auto;
    transition: transform .15s ease;
}

.nav-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .85rem;
    color: rgba(255,255,255,.78);
    text-decoration: none; border-radius: 8px;
    font-size: .92rem;
    transition: background-color .12s, color .12s;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active {
    background: var(--brand-green-600);
    color: #fff; font-weight: 500;
    box-shadow: 0 4px 14px rgba(45, 164, 113, .35);
}

/* SVG icon slot - sized to 18px so it pairs with the 14.7px (=.92rem) label
   without dominating it. opacity slightly lifts on hover/active for a subtle
   "icon comes alive" feel that pairs with the green active pill. */
.nav-icon { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { opacity: 1; }

/* Quick-find over people, at the top of the sidebar on every page. The results panel is
   positioned against this box, which is what the relative is for. */
.nav-search { padding: .5rem .75rem; position: relative; }
.nav-search-input {
    width: 100%; box-sizing: border-box;
    padding: .4rem .6rem;
    border: 1px solid rgba(255,255,255,.15); border-radius: .4rem;
    /* Translucent rather than a solid fill, so the field reads as part of the navy panel. */
    background: rgba(255,255,255,.08); color: #fff;
}
/* Overlays the nav items rather than pushing them down, so the sidebar does not jump on each
   keystroke. Inset to the search box's own padding; scrolls past ~5 hits. */
.nav-search-results {
    position: absolute; left: .75rem; right: .75rem; z-index: 30;
    max-height: 16rem; overflow: auto;
    background: #fff; color: #12203a;
    border-radius: .4rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.nav-search-hit { padding: .45rem .6rem; cursor: pointer; border-bottom: 1px solid #eef; }
.nav-search-hit-meta { display: block; font-size: .72rem; }
.nav-search-empty { padding: .45rem .6rem; font-size: .8rem; }

.nav-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }
/* The tenant id is long and arbitrary, so it is the one thing in the sidebar allowed to be
   clipped rather than wrapped - the full value is in the title attribute. */
.nav-tenant { min-width: 0; }
.nav-tenant-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.5); }
.nav-tenant-value { font-size: .9rem; font-weight: 500; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-main    { display: flex; flex-direction: column; min-width: 0; }
.app-topbar  { display: flex; align-items: center; gap: 1.25rem; padding: .75rem 1.5rem .75rem 1.25rem; background: #fff; border-bottom: 1px solid var(--border-subtle); min-height: 96px; }
/* May 13 2026: ASCEND wordmark on the white topbar, leading edge. Bumped
   from 40px -> 72px (May 13 PM) so the brand actually announces itself at
   demo distance — was reading as a tiny header doodle. Topbar min-height
   grows in lockstep so the wordmark has air around it instead of crowding
   the border. Subtle hover lift announces the "home" link affordance. */
.topbar-brand    { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; padding: .25rem .4rem; border-radius: 10px; transition: background-color 140ms ease; }
.topbar-brand:hover { background-color: var(--brand-navy-50); }
.topbar-logo     { height: 72px; width: auto; display: block; }
.topbar-title    { display: flex; align-items: baseline; padding-left: 1rem; border-left: 1px solid var(--border-subtle); margin-left: .5rem; }
.topbar-greeting { color: var(--text-secondary); font-size: .9rem; }
.topbar-name     { font-weight: 600; margin-left: .35rem; }
@media (max-width: 900px) {
    .app-topbar  { min-height: 80px; }
    .topbar-logo { height: 56px; }
}
@media (max-width: 640px) {
    .topbar-title { display: none; } /* on phone widths, logo + sign-out only */
    .app-topbar   { min-height: 68px; }
    .topbar-logo  { height: 48px; }
}
.topbar-spacer   { flex: 1; }
.topbar-avatar   { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-navy); color: #fff; display: grid; place-items: center; font-weight: 600; }
.topbar-account-link { color: var(--text-secondary); text-decoration: none; font-size: .85rem; padding: .35rem .75rem; border-radius: 6px; }
.topbar-account-link:hover { background: var(--brand-navy-50); color: var(--brand-navy); }

.app-content { padding: 2rem; max-width: 1280px; width: 100%; margin: 0 auto; box-sizing: border-box; }
@media (max-width: 800px) {
    .app-shell:has(> .security-shell-nav) { grid-template-columns: 1fr; }
    .security-shell-nav { padding: .5rem 0; }
    .security-shell-nav .nav-items {
        flex-direction: row;
        flex-wrap: wrap;
        padding: .25rem .75rem;
    }
    .security-shell-nav .nav-section-label {
        flex-basis: 100%;
        padding: .35rem .85rem;
    }
    .security-shell-nav .nav-membership-block { padding: .5rem 1.25rem; }
    .security-shell-nav .nav-footer { padding: .5rem 1.25rem; }
    .app-shell:has(> .security-shell-nav) .app-content { padding: 1rem; }
}
.page-header { margin-bottom: 1.5rem; }
/* Header consistency: legacy .page-header titles inherited the body font (Segoe UI),
   while the design-system BrandedPageHeader (.aui-page-header-title) uses Inter. Mirror
   the exact aui tokens here so EVERY admin page header reads identically — same font,
   size, weight, colour and tracking — regardless of which header markup the page uses. */
.page-header h1 {
    font-family: var(--aui-font);
    font-size: var(--aui-fs-display);
    font-weight: 800;
    color: var(--aui-navy);
    margin: 0;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.page-subtitle { color: var(--aui-text-secondary); font-size: var(--aui-fs-body); margin: .15rem 0 0 0; }

/* ---------- cards / kpis ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card  { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.25rem; box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle); }
/* PDF May 14 demo polish: skeleton-style placeholder for KPI cards while data loads */
.kpi-card-skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #ebedf0 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: kpi-shimmer 1.4s linear infinite;
    color: transparent;
    border-color: transparent;
    pointer-events: none;
}
.kpi-card-skeleton .kpi-icon,
.kpi-card-skeleton .kpi-value,
.kpi-card-skeleton .kpi-detail { color: transparent; opacity: 0; }
.kpi-card-skeleton .kpi-label { color: rgba(0,0,0,.25); font-size: .75rem; }
@keyframes kpi-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* PDF May 14 demo polish: generic skeleton blocks (header / line / row).
   Reused across pages so loading states have a consistent visual language
   instead of scattered "Loading..." text. */
.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #ebedf0 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
    border-radius: 6px;
    color: transparent;
    display: inline-block;
}
.skeleton-line { height: 1rem; margin-bottom: .5rem; width: 100%; }
.skeleton-line-narrow { width: 60%; }
.skeleton-line-medium { width: 80%; }
.skeleton-h1 { height: 1.5rem; width: 50%; margin-bottom: .85rem; border-radius: 8px; }
.skeleton-card-block { padding: 1.1rem; }
@keyframes skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Friendlier error card for page-load failures */
.error-card {
    border-left: 4px solid #d63b3b;
    padding: 1.1rem 1.4rem;
}
.error-card-head {
    margin: 0 0 .35rem;
    color: #b51919;
    font-size: 1.05rem;
}
.error-card p { margin: 0 0 .85rem; color: var(--text-secondary); }

/* PDF May 14 demo polish: top-right toast notification stack */
.toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}
.toast {
    display: grid;
    grid-template-columns: 1.5rem 1fr 1.5rem;
    gap: .55rem;
    align-items: center;
    padding: .65rem .85rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(20, 35, 60, .14), 0 1px 4px rgba(20, 35, 60, .06);
    border-left: 4px solid #6b7280;
    color: var(--text-primary);
    font-size: .9rem;
    pointer-events: auto;
    animation: toast-in 180ms ease-out;
}
@keyframes toast-in {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.toast-success { border-left-color: #2c7d3a; }
.toast-info    { border-left-color: var(--brand-navy); }
.toast-warning { border-left-color: #d18a18; }
.toast-error   { border-left-color: #d63b3b; }
.toast-icon {
    text-align: center;
    font-weight: 700;
    color: #6b7280;
}
.toast-success .toast-icon { color: #2c7d3a; }
.toast-info .toast-icon    { color: var(--brand-navy); }
.toast-warning .toast-icon { color: #d18a18; }
.toast-error .toast-icon   { color: #d63b3b; }
.toast-body {
    line-height: 1.4;
}
.toast-dismiss {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.toast-dismiss:hover { color: var(--text-primary); }
@media (max-width: 540px) {
    .toast-stack { top: .5rem; right: .5rem; left: .5rem; max-width: none; }
}

/* PDF May 14 demo polish: first-load branded splash. Hides as soon as the
   Blazor circuit is established; falls back to a 1.8s timeout. */
.ascend-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    background: linear-gradient(160deg, #ffffff 0%, #f4f7fb 60%, #e7eef7 100%);
    transition: opacity 280ms ease-out;
    opacity: 1;
}
.ascend-splash.is-hidden { opacity: 0; pointer-events: none; }
.ascend-splash-logo {
    height: 96px;
    width: auto;
    animation: ascend-splash-logo-in 320ms ease-out;
}
.ascend-splash-tagline {
    color: var(--brand-navy, #1a3a5e);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .02em;
    opacity: .82;
    animation: ascend-splash-fade-up 480ms ease-out;
}
.ascend-splash-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(26, 58, 94, .12);
    border-top-color: var(--brand-navy, #1a3a5e);
    animation: ascend-splash-spin .9s linear infinite;
    margin-top: .35rem;
}
@keyframes ascend-splash-logo-in {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
@keyframes ascend-splash-fade-up {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: .82; }
}
@keyframes ascend-splash-spin {
    to { transform: rotate(360deg); }
}

/* Top-of-page navigation progress bar. Mounted via App.razor's inline JS on
   enhanced-navigation events so in-app route transitions get visible
   feedback — the splash itself only fires on cold first-load. */
.ascend-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--brand-navy, #1a3a5e), var(--accent-coral, #d63b3b));
    z-index: 1500;
    transition: width 240ms ease-out, opacity 280ms ease-out;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(20, 35, 60, .15);
}
.ascend-nav-progress.is-active { width: 78%; }
.ascend-nav-progress.is-done   { width: 100%; opacity: 0; }
.kpi-card-green { background: linear-gradient(135deg, var(--brand-green-50), #fff); border-color: var(--brand-green-50); }
.kpi-card-navy  { background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-700)); color: #fff; border-color: var(--brand-navy); }
.kpi-card-navy .kpi-label, .kpi-card-navy .kpi-detail { color: rgba(255,255,255,.78); }
.kpi-value  { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.kpi-label  { font-size: .85rem; color: var(--text-secondary); margin-top: .25rem; }
.kpi-detail { font-size: .75rem; color: var(--text-muted); margin-top: .5rem; }

.section-card  {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-subtle);
    margin-bottom: 1.5rem;
    /* 2026 design-system pass: the previous `border-image: var(--aurora) 1`
       wrapped ALL FOUR edges with the multi-colour gradient, which read as a
       debug outline. Replaced with a clean white card + a single subtle green
       top accent (the POC's clean-card treatment, now applied app-wide) so the
       rounded corners + soft shadow come through. */
    border-top: 3px solid var(--brand-green);
    transition: box-shadow .15s ease;
}
.section-card:hover { box-shadow: var(--shadow-card-hover); }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
/* Small inline heading glyph for richer section scannability (design-system pass). */
.section-ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: .45rem; color: var(--brand-green-600); flex: none; }
.section-tag    { background: var(--brand-green-50); color: var(--brand-green-600); font-size: .7rem; font-weight: 600; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: .04em; }
.section-actions { display: flex; align-items: center; gap: .75rem; }
.btn-sm         { padding: .35rem .75rem; font-size: .85rem; }

/* ---------- inline form panel ---------- */
.add-form        { background: linear-gradient(180deg, var(--brand-navy-50), #fff); border: 1px solid #cdd9eb; border-radius: 10px; padding: 1.25rem; margin-bottom: 1.25rem; }
.add-form-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.form-field      { display: flex; flex-direction: column; gap: .35rem; }
.form-field-wide { grid-column: span 2; }
.form-field label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.form-input      { padding: .55rem .75rem; border: 1px solid var(--border-subtle); border-radius: 8px; font-size: .9rem; background: #fff; font-family: inherit; }
.form-input:focus { outline: 2px solid var(--brand-green-50); border-color: var(--brand-green); }
.form-field-checkbox label { display: flex; align-items: center; gap: .5rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-primary); font-size: .9rem; padding-top: 1.4rem; }
.add-form-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1rem; }

/* CountyCitySelector's root. The component promises to "inherit the host form grid", and every
   caller drops it into an .add-form-grid - but a plain wrapper is one grid cell, so county and
   city stacked inside a single column while the fields either side of them sat in their own.
   display:contents removes the wrapper from the layout so its two .form-field children become
   grid items of the host grid, which is what the component said it did. */
.county-city-selector { display: contents; }

/* Filter/compact variant of .form-input, for the select-in-a-toolbar case (a status filter
   above a table) where the full-size control dominates the row it sits in. Mirrors .btn-sm. */
.form-input-sm   { padding: .35rem .5rem; font-size: .85rem; }

/* A label that IS the field, with its control nested inside rather than beside it:
   <label class="form-label">Key <input /></label>. Same stacked shape and same uppercase
   caption as .form-field, without needing the extra wrapper element. */
.form-label      { display: flex; flex-direction: column; gap: .35rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.form-label .form-input, .form-label input, .form-label select, .form-label textarea { text-transform: none; letter-spacing: 0; color: var(--text-primary); font-weight: 400; }

/* Controls laid out along a line and allowed to wrap, for the short "type + name + button"
   forms that do not warrant the auto-fit columns of .add-form-grid. */
.form-row        { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.form-row .form-input { min-width: 12rem; }

/* Explanatory line under a control, and the same voice reused for a section's
   loading/empty sentence. Muted so it never competes with the field's own label. */
.form-hint       { color: var(--text-secondary); font-size: .85rem; line-height: 1.45; margin: 0; }

/* Search-as-you-type result list (used by the Events page Add-event form's
   participant picker; reusable for any future picker). */
.picker-results { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: 8px; margin-top: .35rem; max-height: 240px; overflow-y: auto; background: #fff; }
.picker-result  { background: none; border: 0; text-align: left; padding: .55rem .8rem; cursor: pointer; border-bottom: 1px solid var(--border-subtle); font-family: inherit; font-size: .9rem; color: var(--text-primary); display: flex; gap: .35rem; align-items: center; }
.picker-result:last-child { border-bottom: 0; }
.picker-result:hover { background: #eef4ff; }
.picker-selected { margin-top: .5rem; padding: .35rem .6rem; background: var(--brand-navy-50); border-radius: 6px; font-size: .9rem; display: inline-flex; align-items: center; gap: .5rem; }

/* Modality radio row (Virtual / In-person on the Add-event form). */
.modality-row    { display: flex; gap: 1.25rem; padding-top: .35rem; }
.modality-option { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; cursor: pointer; }

/* ---------- Volunteer mini-profile (expand-in-place under a row) ---------- */
.row-disclosure  { color: var(--text-muted); margin-right: .35rem; font-size: .85rem; display: inline-block; width: 1em; }
.data-table tbody tr.row-expanded { background: #eef4ff; }
.data-table tbody tr.row-expanded-content { background: var(--brand-navy-50); }
.data-table tbody tr.row-expanded-content:hover { background: var(--brand-navy-50); cursor: default; }
.data-table tbody tr.row-expanded-content td { padding: 0; border-bottom: 1px solid var(--border-subtle); }

.vol-mini             { padding: 1.25rem 1.4rem; border-left: 3px solid var(--brand-green); background: #fff; margin: .5rem 1rem 1rem 1rem; border-radius: 8px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.vol-mini-head        { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; }
.vol-mini-title       { display: flex; align-items: center; }
.vol-mini-hours       { text-align: right; }
.vol-mini-hours-num   { font-size: 1.8rem; font-weight: 600; line-height: 1; color: var(--brand-navy); }
.vol-mini-hours-lbl   { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem; }
.vol-mini-grid        { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem 1.5rem; margin-bottom: 1rem; }
.vol-mini-field       { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.vol-mini-field .profile-value { overflow-wrap: anywhere; word-break: break-word; }
.vol-mini-actions     { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding-top: .8rem; border-top: 1px solid var(--border-subtle); }
.vol-mini-action-row  { display: inline-flex; gap: .5rem; align-items: center; }
.vol-mini-action-label{ font-size: .85rem; color: var(--text-secondary); }
.vol-mini-roadmap     { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--border-subtle); font-size: .82rem; }

/* Cross-org enrollments rollup (PDF #12). Sub-line under the lifetime hours
   shows the contribution from THIS org alone when cross-org > single-org. */
.vol-mini-hours-sub { font-size: .65rem; margin-top: .15rem; }
.vol-mini-multiorg  { margin-top: .9rem; padding: .7rem .9rem; background: var(--accent-coral-50); border-left: 3px solid var(--accent-coral); border-radius: 6px; }
.vol-mini-multiorg-list { list-style: none; padding: 0; margin: .35rem 0 0 0; display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; }
.alert-inline-error   { color: var(--danger, #b91c1c); font-size: .85rem; }

/* ---------- click-to-expand on Need + Referral cards (PDF #2) ---------- */
.need-disclosure, .referral-disclosure {
    color: var(--text-muted);
    font-size: .75rem;
    margin-right: .35rem;
    display: inline-block;
    width: 1em;
    transition: color .12s;
}
.need-body-clickable {
    cursor: pointer;
    border-radius: 8px;
    padding: .25rem;
    margin: -.25rem;
    transition: background-color .12s;
}
.need-body-clickable:hover {
    background: var(--brand-navy-50);
}
.need-body-clickable:hover .need-disclosure { color: var(--brand-navy); }
.need-card.need-expanded .need-body-clickable { background: var(--brand-navy-50); }

.referral-card {
    cursor: pointer;
    transition: background-color .12s, box-shadow .15s;
    scroll-margin-top: 1rem;
}
.referral-card:hover {
    background: var(--brand-navy-50);
}
.referral-card:hover .referral-disclosure { color: var(--brand-navy); }
.referral-card.referral-expanded { background: var(--brand-navy-50); box-shadow: 0 2px 8px rgba(20, 35, 60, .08); }

/* The expand drawer under each Need card. Lists linked plans + referrals so
   the operator can see "what are we doing about this need?" without
   scrolling around the profile. */
.need-drawer {
    margin-top: .8rem;
    padding: .8rem 1rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--brand-green);
    border-radius: 6px;
}
.need-drawer-section + .need-drawer-section { margin-top: .65rem; padding-top: .65rem; border-top: 1px dashed var(--border-subtle); }
.need-drawer-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; margin-bottom: .35rem; }
.need-drawer-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.need-drawer-link  {
    display: flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    color: var(--text-primary);
    padding: .45rem .6rem;
    border-radius: 6px;
    transition: background-color .12s;
    font-size: .9rem;
}
.need-drawer-link:hover { background: var(--brand-navy-50); text-decoration: none; }
.need-drawer-link strong { color: var(--brand-navy); }

/* Click-driven referral history block (replaces the previous <details>). */
.referral-history-block {
    margin-top: .8rem;
    padding: .7rem .9rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--brand-navy);
    border-radius: 6px;
}
.referral-history-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; margin-bottom: .45rem; }
.referral-history-block ul { list-style: none; padding: 0; margin: 0; }
.referral-history-block li { padding: .35rem 0; font-size: .85rem; }
.referral-history-block li + li { border-top: 1px dashed var(--border-subtle); }

/* Smooth scroll-into-view margin so when a target plan/referral card lands
   under the page header it doesn't get hidden behind any sticky elements. */
.plan-card { scroll-margin-top: 1rem; }

/* ---------- view toggle (List vs Calendar on /events) ---------- */
.view-toggle {
    display: inline-flex;
    gap: 0;
    background: var(--brand-navy-50);
    border-radius: 8px;
    padding: 3px;
    align-self: center;
}
.view-toggle-btn {
    padding: .35rem .9rem;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.view-toggle-btn:hover:not(.is-active) { color: var(--brand-navy); }
.view-toggle-btn.is-active {
    background: #fff;
    color: var(--brand-navy);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(20, 35, 60, .10);
}

/* ---------- month-grid calendar (PDF #5b + #7) ---------- */
.calendar-month     { margin-top: .25rem; }
.calendar-month-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .85rem; }
/* "Click any event to open its participant." - an instruction, on the far end of the month
   heading. Small so it does not read as a second heading; always carries .muted for colour. */
.calendar-legend    { font-size: .8rem; }
.calendar-month-head h2 { color: var(--brand-navy); }

/* 7-col grid: day-name header row + N week rows. min-height keeps cells
   visually consistent even on weeks with zero events. gap: 1px gives the
   classic "calendar gridline" feel without explicit borders on cells. */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
}
.calendar-day-name {
    background: var(--brand-navy-50);
    color: var(--brand-navy);
    text-align: center;
    padding: .55rem 0;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.calendar-cell {
    background: #fff;
    min-height: 110px;
    padding: .5rem .55rem .55rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    position: relative;
}
.calendar-cell-other { background: #fafbfd; }
.calendar-cell-other .calendar-cell-num { color: var(--text-muted); }
.calendar-cell-today {
    background: linear-gradient(180deg, var(--accent-coral-50), #fff 60%);
    box-shadow: inset 0 0 0 2px var(--accent-coral);
    border-radius: 4px;
}
.calendar-cell-today .calendar-cell-num {
    color: var(--accent-coral-600);
    font-weight: 700;
}
.calendar-cell-num {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: .15rem;
}

/* Event chip inside a calendar cell. Color-coded by category; the time
   prefix is shown in monospace so vertically-aligned events read like an
   agenda even when titles wrap. */
.calendar-event {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    padding: .25rem .45rem;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: .72rem;
    line-height: 1.2;
    color: #fff;
    transition: filter .12s, transform .12s;
    overflow: hidden;
}
.calendar-event:hover { filter: brightness(1.08); transform: translateY(-1px); }
.calendar-event-time  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .65rem; opacity: .85; }
.calendar-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Category color palette for the calendar event chips. Mostly mid-saturation
   so light text reads cleanly + category recognition stays consistent. */
.calendar-event-general    { background: #475569; }
.calendar-event-court      { background: var(--color-amber); }
.calendar-event-health     { background: var(--color-violet); }
.calendar-event-recovery   { background: var(--brand-green-600); }
.calendar-event-employment { background: var(--brand-navy); }
.calendar-event-education  { background: #2563eb; }
.calendar-event-housing    { background: var(--accent-coral-600); }

.calendar-event-more       { font-size: .7rem; padding: 0 .45rem; }

/* PDF #13: clickable empty cell + shift event chips. The cell's hover state
   subtly hints "click here to post a shift" without dominating the existing
   today / off-month treatments. */
.calendar-cell-clickable             { cursor: pointer; transition: background-color .12s; }
.calendar-cell-clickable:hover       { background: var(--accent-coral-50); }
.calendar-cell-clickable.calendar-cell-other:hover { background: #f5e9d8; }

.calendar-event-shift                { background: var(--accent-coral-600); }
.calendar-event-shift:hover          { filter: brightness(1.1); }
.calendar-event-claimed              { font-size: .65rem; opacity: .85; font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- Assignment board (PDF #8 — Axiom/Aspire-parity kanban) ----------
   Mirrors Aspire's AssignmentBoard MudPaper pattern: an elevated white section
   wrapping horizontal flex lanes with a gray wash. Lanes hold elevation-1
   cards (bold title row + caption meta). The task kanban (.task-*) drags cards
   between status lanes; the at-a-glance strip below it keeps click-to-navigate. */
.board-section {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    padding: 16px;
    margin-bottom: 1.5rem;
}
.board-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 16px;
}
.board-section-title {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1.1rem; font-weight: 700; color: var(--brand-navy);
}
.board-section-title svg { color: var(--brand-navy); flex: none; }
.board-section-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.board-lanes {
    display: flex; flex-direction: row;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 960px) { .board-lanes { flex-direction: column; } }

.board-column {
    flex: 1 1 0;
    min-width: 0;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px;
    min-height: 180px;
    display: flex; flex-direction: column;
    gap: .5rem;
}

.board-column-head {
    display: flex; align-items: center; gap: .4rem;
    margin-bottom: .25rem;
}
.board-column-head svg { color: var(--text-secondary); flex: none; }
.board-column-title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .01em;
}
.board-column-empty { padding: 1.25rem .5rem; text-align: center; font-size: .82rem; }
.board-column-more  { padding: .4rem; text-align: center; font-size: .74rem; }

.board-card {
    text-align: left;
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    display: flex; flex-direction: column;
    gap: .2rem;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    transition: transform .12s, box-shadow .12s;
    font-family: inherit;
    color: inherit;
}
.board-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12);
}
.board-card-title-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .4rem;
}
.board-card-title {
    font-weight: 700; font-size: .88rem; color: var(--text-primary);
    line-height: 1.3;
}
.board-card-chips { display: flex; align-items: center; gap: .25rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.board-card-caption { font-size: .76rem; color: var(--text-secondary); }
.board-section-heading { margin: 0; font: inherit; color: inherit; }
h3.board-column-title { margin: 0; }
a.board-column-more { color: var(--brand-navy); text-decoration: none; }
a.board-column-more:hover { text-decoration: underline; }

.board-lanes-compact .board-column { min-height: 0; padding: 8px; gap: .35rem; }
.board-lanes-compact .board-column-empty { padding: .5rem; }
.board-glance .board-section-head { margin-bottom: 10px; }
.board-glance .board-section-title { font-size: .95rem; }

.task-board-hint { margin: -8px 0 4px; }
.task-board-notice { min-height: 1.2em; margin: 0 0 8px; font-size: .82rem; color: var(--text-secondary); }
.task-scope { display: inline-flex; gap: 0; }
.task-scope .btn { border-radius: 0; }
.task-scope .btn:first-child { border-radius: 6px 0 0 6px; }
.task-scope .btn:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.task-scope .btn:focus-visible { position: relative; z-index: 1; }

.task-lanes .task-column { min-height: 260px; border: 2px dashed transparent; transition: background-color .12s, border-color .12s; }
.task-column-drop { border-color: #cbd5e1; }
.task-column-drop.task-column-over { background: var(--brand-navy-50); border-color: var(--brand-navy); }
.task-column-refuse { opacity: .6; }
.task-column-refuse.task-column-over { border-color: var(--color-danger); }
.task-column-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #94a3b8; }
.task-column-dot-inprogress { background: var(--brand-navy); }
.task-column-dot-blocked { background: var(--color-amber); }
.task-column-dot-done { background: var(--brand-green); }

.task-card { cursor: grab; }
.task-card:active { cursor: grabbing; }
.task-card-dragging { opacity: .5; }
.task-card-pending { opacity: .7; cursor: progress; }
.task-card-pending:hover { transform: none; }
.task-card-person { color: var(--brand-navy); font-weight: 600; text-decoration: none; }
.task-card-person:hover { text-decoration: underline; }
.task-card-person:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; border-radius: 2px; }
.task-card-meta { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.task-card-due { white-space: nowrap; }
.task-card-overdue { color: var(--color-danger); font-weight: 600; }
.task-card-assignee { color: var(--text-muted); }
.task-card-move { margin-top: .25rem; width: 100%; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
    .task-lanes .task-column { transition: none; }
}

/* ---------- Grant Writing AI tab ---------- */
.grants-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1.25rem;
}
@media (max-width: 1100px) { .grants-layout { grid-template-columns: 1fr; } }

.grants-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .85rem 1rem;
}
.grants-form-row .form-field-wide { grid-column: 1 / -1; }

/* The two columns of .grants-layout. A .section-card carries a 1.5rem bottom margin for the
   usual case of cards stacked down a page; inside a grid that is dead space under the row, and
   it also stops the taller column from setting the row height cleanly. The grid's own gap is
   the spacing here. */
.grants-form,
.grants-output       { margin-bottom: 0; }
.grants-output       { min-height: 60vh; }
.grants-section      { margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--border-subtle); }
.grants-section:last-child { border-bottom: 0; }
.grants-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.grants-section-head h3 { font-size: .92rem; color: var(--brand-navy); margin: 0; font-weight: 700; }
.grants-section-body { white-space: pre-wrap; line-height: 1.55; font-size: .92rem; color: var(--text-primary); }

.grants-spinner {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: .75rem;
    color: var(--accent-coral);
    animation: grants-spin 1s linear infinite;
}
@keyframes grants-spin {
    0%   { content: '⠋'; }
    25%  { content: '⠙'; }
    50%  { content: '⠹'; }
    75%  { content: '⠸'; }
    100% { content: '⠴'; }
}

/* PDF #9 (May 9 2026): saved grants library */
.grants-saved-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.grants-saved-table th,
.grants-saved-table td {
    text-align: left;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border-subtle);
}
.grants-saved-table th {
    font-weight: 600;
    color: var(--brand-navy);
    background: var(--surface-soft);
}
.grants-saved-table tr:hover td { background: var(--surface-soft); }
.grants-saved-table .row-just-saved td { background: rgba(76, 175, 80, 0.08); }
.grants-saved-table .btn-link { padding: 0; }
/* May 13 2026: titles in the first column were centering because <button>
   inherits text-align:center from the .btn base. Force left-align + block
   layout so multi-line titles flow left like normal table copy. Also pin
   the title column to ~38% so the right-side metadata columns line up. */
.grants-saved-table th:first-child,
.grants-saved-table td:first-child { width: 38%; }
.grants-saved-table td:first-child .btn-link {
    display: block;
    width: 100%;
    text-align: left;
    white-space: normal;
    line-height: 1.35;
}

/* ---------- Org-to-org messaging (PDF: "messaging between orgs, like Axiom") ---------- */
.msg-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}
@media (max-width: 900px) { .msg-layout { grid-template-columns: 1fr; } }

.msg-list {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 75vh;
    overflow-y: auto;
}
.msg-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border-subtle); }

.msg-list-item {
    display: block;
    text-align: left;
    background: transparent;
    border: 0;
    padding: .65rem .75rem;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background-color .12s;
    font-family: inherit;
    color: inherit;
}
.msg-list-item:hover { background: var(--brand-navy-50); }
.msg-list-item.is-active { background: var(--brand-navy-50); box-shadow: inset 3px 0 0 var(--brand-green); }

.msg-list-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .15rem; }
.msg-list-org       { font-weight: 700; color: var(--brand-navy); font-size: .9rem; }
.msg-list-preview   { font-size: .8rem; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.msg-list-time      { font-size: .7rem; margin-top: .15rem; }

.msg-unread-pip {
    background: var(--accent-coral);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(249, 115, 22, .4);
}

.msg-thread {
    display: flex;
    flex-direction: column;
    max-height: 75vh;
    padding: 1rem;
}
.msg-thread-head { padding-bottom: .65rem; margin-bottom: .65rem; border-bottom: 1px solid var(--border-subtle); }
.msg-thread-scroll {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .25rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: .65rem;
}

.msg-bubble {
    max-width: 75%;
    padding: .55rem .8rem;
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.4;
}
.msg-bubble-them { background: #f1f5f9; color: var(--text-primary); align-self: flex-start; border-bottom-left-radius: 3px; }
.msg-bubble-me   { background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-700)); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.msg-bubble-from { font-size: .7rem; font-weight: 700; color: var(--brand-navy); margin-bottom: .15rem; }
/* The message text. Honours the newlines the sender typed - a partner org pasting an address or a
   numbered list had it collapsed to one paragraph - and breaks a long unspaced run (a URL, a case
   number) instead of letting it push the bubble past its 75% ceiling. */
.msg-bubble-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-bubble-time { font-size: .65rem; margin-top: .25rem; }
.msg-bubble-me .msg-bubble-time { color: rgba(255,255,255,.75); }

.msg-composer {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    padding-top: .5rem;
    border-top: 1px solid var(--border-subtle);
}
.msg-composer textarea { flex: 1; min-height: 2.5rem; resize: vertical; }

.check { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--brand-green-50); color: var(--brand-green-600); border-radius: 50%; font-size: .75rem; font-weight: 700; }

/* ---------- toolbar / table ---------- */
.toolbar { display: flex; gap: .75rem; margin-bottom: 1rem; }
.toolbar-search {
    flex: 1; padding: .65rem .85rem; border: 1px solid var(--border-subtle); border-radius: 8px;
    font-size: .95rem; background: #fff;
}
.toolbar-search:focus { outline: 2px solid var(--brand-green-50); border-color: var(--brand-green); }

.btn { border: 0; border-radius: 8px; padding: .55rem 1rem; font-size: .9rem; font-weight: 500; cursor: pointer; transition: filter .15s; }
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand-navy); color: #fff; }
.btn-link    { background: transparent; color: var(--brand-navy); padding: 0; font-weight: 600; }
.btn-link:hover { color: var(--brand-green-600); filter: none; text-decoration: underline; }
/* Zero padding means two of these in the same cell touch, and read as one control: the expenses
   table offered "Attach image" and "Edit" and rendered "Attach imageEdit". Every table with more
   than one link action in a cell had it. */
.btn-link + .btn-link { margin-left: .85rem; }
.btn-danger  { background: var(--color-danger); color: #fff; }
/* The quieter of the two solid buttons — Refresh, Apply, Cancel, Add tag — sitting beside a
   .btn-primary without competing with it. Twelve pages asked for this and got the browser's
   default grey button instead, because the only .btn-secondary in the codebase was inside
   AuthLayout's <style> block and so reached the three sign-in pages and nowhere else. */
.btn-secondary { background: #fff; color: var(--brand-navy); border: 1px solid #cdd6e4; }
.btn-secondary:hover { background: var(--brand-navy-50); filter: none; }

.alert { border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.alert-error { background: var(--color-danger-50); color: var(--color-danger); border: 1px solid #fecaca; }
.alert-info  { background: var(--brand-navy-50); color: var(--brand-navy); border: 1px solid #cdd9eb; }
.alert-success { background: var(--brand-green-50); color: var(--brand-green-600); border: 1px solid #bbf7d0; }

.empty-state { color: var(--text-muted); padding: 1.5rem 0; text-align: center; }
.table-meta  { color: var(--text-muted); font-size: .85rem; margin-bottom: .75rem; }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.data-table thead th { text-align: left; padding: .5rem .85rem; color: var(--text-muted); font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border-subtle); }
.data-table tbody td { padding: .8rem .85rem; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.data-table tbody tr:hover { background: #fafbfd; }
.data-table tbody tr.row-clickable { cursor: pointer; }
.data-table tbody tr.row-clickable:hover { background: #eef4ff; }
/* Numeric column: right-aligned and tabular so digits line up down the column and a total
   can be read against the rows above it. Applied to both the th and the td. */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table thead th.num { text-align: right; }

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

/* ---------- chips / status ---------- */
.chip {
    display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
    font-size: .7rem; font-weight: 600; margin-left: .35rem; line-height: 1.4;
}
.chip-navy   { background: var(--brand-navy-50);  color: var(--brand-navy); }
.chip-green  { background: var(--brand-green-50); color: var(--brand-green-600); }
.chip-amber  { background: var(--color-amber-50); color: var(--color-amber); }
.chip-violet { background: var(--color-violet-50); color: var(--color-violet); }
/* New coral chip — energy without alarm. Used on featured/hot/urgent labels
   the operator should notice, but not for failure (red stays for failure). */
.chip-coral  { background: var(--accent-coral-50); color: var(--accent-coral-600); }
/* Red, for a chip that reports failure — an expired document, a rejected award. The rest of
   the family had a top-level rule and this one only existed as .chip-category.chip-danger. */
.chip-danger { background: var(--color-danger-50); color: var(--color-danger); }
/* A line of chips as its own block, rather than chips trailing a sentence. The left margin
   .chip carries for the inline case would otherwise indent the first one. */
.chip-row    { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip-row .chip { margin-left: 0; }

.chip-category { text-transform: uppercase; letter-spacing: .04em; font-size: .65rem; }
.chip-category.chip-danger { background: var(--color-danger-50); color: var(--color-danger); }
.chip-category.chip-violet { background: var(--color-violet-50); color: var(--color-violet); }
.chip-category.chip-navy   { background: var(--brand-navy-50); color: var(--brand-navy); }
.chip-category.chip-green  { background: var(--brand-green-50); color: var(--brand-green-600); }
.chip-category.chip-gray   { background: #eef1f5; color: #475569; }

.status-pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 600; }
.status-active   { background: var(--brand-green-50); color: var(--brand-green-600); }
.status-inactive { background: #eef1f5; color: #64748b; }
.status-archived { background: var(--color-amber-50); color: var(--color-amber); }
.status-deceased { background: var(--color-danger-50); color: var(--color-danger); }
.status-pending   { background: var(--color-amber-50);  color: var(--color-amber); }
.status-cancelled { background: var(--color-danger-50); color: var(--color-danger); }
.status-closed    { background: #eef1f5;                color: #64748b; }

.redacted { color: var(--text-muted); font-style: italic; }

/* ---------- profile ---------- */
.profile-card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.5rem; box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle); margin-bottom: 1.5rem; }
.profile-head { display: flex; gap: 1.25rem; align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.25rem; }
.profile-avatar { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--brand-navy), var(--brand-green-600)); color: #fff; font-weight: 600; font-size: 1.5rem; display: grid; place-items: center; }
.profile-id     { flex: 1; }
.profile-id h1  { margin: 0; }
.profile-code   { color: var(--text-muted); font-size: .9rem; }
.profile-meta   { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.profile-body   { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 2rem; }
.profile-field  { }
.profile-label  { color: var(--text-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.profile-value  { font-size: .95rem; }
.profile-disclosure { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* A <ul> of plain facts - "Target release: Sep 3 2026", "Status: Active" - rather than a list of
   records. The generic form of the eight .*-list rules that all open by turning the bullets and
   the browser's 40px indent off; nothing else in this app has bullets, so a bare <ul> inside a
   .section-card is immediately the odd one out. Used by the release-plan summary on the
   participant portal and the graph edge list on Coordination. */
.plain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }

/* ---------- timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.timeline-row { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; align-items: start; }
.timeline-when { text-align: right; padding-top: .25rem; }
.timeline-date { font-weight: 600; color: var(--text-primary); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.timeline-time { color: var(--text-muted); font-size: .75rem; }
.timeline-card { background: #fafbfd; border-left: 3px solid var(--brand-green); border-radius: 6px; padding: .85rem 1rem; }
.timeline-title-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.timeline-title { font-weight: 600; color: var(--text-primary); }
.timeline-body  { color: var(--text-secondary); font-size: .9rem; line-height: 1.45; }
.timeline-meta  { font-size: .75rem; margin-top: .35rem; }

/* ---------- plans ---------- */
.plan-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; }
.plan-head { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1rem; }
.plan-progress {
    position: relative;
    width: 78px; height: 78px;
    flex-shrink: 0;
    display: grid; place-items: center;
    /* per-tier gradient stops + a tinted glow; defaults to the green (high) tier */
    --pie-light: #34d399;
    --pie-deep:  var(--brand-green-600);
    --pie-track: var(--brand-navy-50);
    --pie-glow:  rgba(16, 185, 129, .35);
}
/* inline SVG ring: neutral track + gradient progress arc with rounded caps */
.plan-ring {
    grid-area: 1 / 1;
    width: 100%; height: 100%;
    overflow: visible; /* let the soft glow breathe past the viewBox */
}
.plan-ring-track {
    fill: none;
    stroke: var(--pie-track);
    stroke-width: 4.5;
}
.plan-ring-fill {
    fill: none;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-dasharray: 100;
    /* start the arc at 12 o'clock and sweep clockwise */
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 1px 2px var(--pie-glow));
    transition: stroke-dashoffset .6s cubic-bezier(.22, 1, .36, 1);
    animation: plan-ring-draw .9s cubic-bezier(.22, 1, .36, 1);
}
@keyframes plan-ring-draw { from { stroke-dashoffset: 100; } }
@media (prefers-reduced-motion: reduce) {
    .plan-ring-fill { animation: none; transition: none; }
}
.plan-ring-stop-light { stop-color: var(--pie-light); }
.plan-ring-stop-deep  { stop-color: var(--pie-deep); }
/* centered text layer, kept crisp on top of the ring */
.plan-progress-text {
    grid-area: 1 / 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: none;
}
/* per-tier gradients + tinted glow: low = red, mid = amber, high = green (always matches fill) */
.plan-progress.pie-low  { --pie-light: #fb7185; --pie-deep: var(--color-danger); --pie-glow: rgba(239, 68, 68, .35); }
.plan-progress.pie-mid  { --pie-light: #fbbf24; --pie-deep: var(--color-amber);  --pie-glow: rgba(245, 158, 11, .35); }
.plan-progress.pie-high { --pie-light: #34d399; --pie-deep: var(--brand-green-600); --pie-glow: rgba(16, 185, 129, .35); }
.plan-progress-num   { font-size: 1.4rem; font-weight: 800; color: var(--brand-navy); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-progress-pct   { font-size: .72rem; font-weight: 700; margin-left: 1px; color: var(--text-muted); }
.plan-progress-label { font-size: .6rem; font-weight: 600; color: var(--text-muted); margin-top: 3px; letter-spacing: .02em; }
.plan-id             { flex: 1; }
.plan-id h3          { margin: 0 0 .25rem; font-size: 1.05rem; }
.plan-meta           { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; }
.plan-status-draft     { background: #eef1f5;            color: #64748b; }
.plan-status-active    { background: var(--brand-navy-50); color: var(--brand-navy); }
.plan-status-complete  { background: var(--brand-green-50); color: var(--brand-green-600); }
.plan-status-cancelled { background: var(--color-amber-50); color: var(--color-amber); }
.plan-status-finalized { background: var(--color-violet-50); color: var(--color-violet); }

.plan-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.plan-item  { display: grid; grid-template-columns: 110px 1fr 160px; gap: .75rem; align-items: center; padding: .65rem .85rem; background: #fafbfd; border-radius: 8px; border: 1px solid var(--border-subtle); }
.plan-item-body  { min-width: 0; }
.plan-item-title { font-weight: 500; color: var(--text-primary); }
.plan-item-desc  { font-size: .8rem; margin-top: 2px; }

.plan-item-complete .plan-item-title { text-decoration: line-through; color: var(--text-muted); }
.plan-item-complete  { background: linear-gradient(180deg, var(--brand-green-50), #fff); border-color: #c6e9d4; }
.plan-item-inprogress { background: linear-gradient(180deg, var(--color-amber-50), #fff); border-color: #f5d99c; }
.plan-item-blocked    { background: linear-gradient(180deg, var(--color-danger-50), #fff); border-color: #fca5a5; }
.plan-item-notapplicable { opacity: .6; }

.plan-status-select {
    padding: .35rem .55rem; border: 1px solid var(--border-subtle); border-radius: 6px;
    background: #fff; font-size: .85rem; font-family: inherit; cursor: pointer;
}
.plan-status-select:disabled { opacity: .5; cursor: wait; }

/* ---------- consent: per-person grants list + grant + revoke ---------- */
.consent-grant-list { display: flex; flex-direction: column; gap: .65rem; }
.consent-grant-card {
    background: #fff; border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: .85rem 1rem; border-left-width: 4px;
}
.consent-grant-active  { border-left-color: var(--brand-green); }
.consent-grant-revoked { border-left-color: #94a3b8; background: #fafbfd; }   /* dimmed */
.consent-grant-head {
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
    margin-bottom: .45rem;
}
.consent-grant-meta { flex: 1; display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; min-width: 0; }
.consent-grant-body { display: flex; flex-direction: column; gap: .35rem; }
.consent-grant-categories { display: flex; flex-wrap: wrap; gap: .25rem; }
.consent-pill-active  { background: var(--brand-green-50); color: var(--brand-green-600); }
.consent-pill-revoked { background: #f1f5f9; color: #64748b; }
.consent-revoke-btn   { color: var(--color-danger); }
.consent-revoke-btn:hover { color: var(--color-danger); text-decoration: underline; }
.consent-revoke-form {
    display: flex; flex-direction: column; gap: .55rem;
    margin-top: .65rem; padding: .75rem;
    background: var(--color-danger-50); border: 1px solid #fecaca; border-radius: 6px;
}
.consent-category-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .35rem .65rem;
}
.consent-category-check {
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
    padding: .25rem .35rem; border-radius: 4px;
}
.consent-category-check input { cursor: pointer; }

/* ---------- plans phase 4: cancel button accent ---------- */
.plan-cancel-btn { color: var(--color-danger); }
.plan-cancel-btn:hover { color: var(--color-danger); text-decoration: underline; }

/* ---------- plans phase 5: reactivate (un-cancel) button accent ---------- */
.plan-reactivate-btn { color: var(--brand-green-600); }
.plan-reactivate-btn:hover { color: var(--brand-green-600); text-decoration: underline; }

/* ---------- plans phase 2: finalize + ledger versions ---------- */
.plan-finalize-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    margin-top: .85rem; padding-top: .65rem;
    border-top: 1px dashed var(--border-subtle);
}
.finalize-form {
    display: flex; flex-direction: column; gap: .55rem;
    width: 100%; padding: .75rem; background: #fafbfd;
    border: 1px solid var(--border-subtle); border-radius: 8px;
}
.finalize-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.plan-versions {
    margin-top: .65rem; padding: .75rem .9rem;
    background: #f7f9ff; border: 1px solid var(--border-subtle); border-radius: 8px;
}
.versions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.version-row {
    display: grid; grid-template-columns: 60px 1fr; gap: .75rem; align-items: start;
    padding: .55rem .75rem; background: #fff; border: 1px solid var(--border-subtle); border-radius: 6px;
}
.version-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.version-download { font-size: .8rem; padding: 0 .35rem; margin-left: .35rem; }

/* ---------- reports phase 2: filter card ---------- */
.report-filter-card { background: #f7f9ff; }
.filter-grid {
    display: grid; grid-template-columns: 200px 200px 1fr auto;
    gap: 1rem; align-items: end;
}
.filter-grid .form-field-wide { min-width: 240px; }
.filter-actions { display: flex; gap: .5rem; align-self: end; padding-bottom: 1px; }
.filter-status { margin-top: .85rem; padding: .55rem .75rem;
    background: #fff; border: 1px solid var(--border-subtle); border-radius: 6px;
    font-size: .85rem; }

/* ---------- reports phase 3: plans-by-status breakdown tiles ---------- */
.status-breakdown {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: .75rem;
}
.status-tile {
    background: #fff; border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 1rem; text-align: center;
    border-left-width: 4px;
}
.status-tile-label { font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted); margin-bottom: .35rem; }
.status-tile-num { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); }
.status-tile-draft     { border-left-color: #94a3b8; }   /* slate */
.status-tile-active    { border-left-color: var(--brand-navy); }
.status-tile-complete  { border-left-color: var(--brand-green); }
.status-tile-cancelled { border-left-color: var(--color-danger); }
.status-tile-finalized { border-left-color: var(--color-violet); }

/* Phase-5 additions: Needs (Open/Resolved/Deferred/Closed) + Referrals (Pending/Accepted) */
.status-tile-open      { border-left-color: #94a3b8; }   /* slate - same as Draft (start states) */
.status-tile-resolved  { border-left-color: var(--brand-green); }
.status-tile-deferred  { border-left-color: var(--color-amber); }
.status-tile-closed    { border-left-color: #6b7280; }   /* dimmer slate - terminal */
.status-tile-pending   { border-left-color: var(--color-amber); }
.status-tile-accepted  { border-left-color: var(--brand-navy); }

/* Reports tiles that open the list of the rows they count. */
.status-tile-link {
    display: block; color: inherit; text-decoration: none; cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.status-tile-link:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12); transform: translateY(-1px);
    border-top-color: var(--brand-navy); border-right-color: var(--brand-navy); border-bottom-color: var(--brand-navy);
}
.status-tile-link:hover .status-tile-label { color: var(--brand-navy); }
.status-tile-link:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .status-tile-link { transition: none; }
    .status-tile-link:hover { transform: none; }
}

/* The filtered lists those tiles open (/needs?status=, /goals?status=, /outcomes). */
.drilldown-chips { margin-bottom: .75rem; }
.drilldown-chip {
    padding: 4px 12px; font-size: .8rem; text-decoration: none;
    background: #eef1f5; color: #334155; border: 1px solid transparent;
    transition: background-color .15s, border-color .15s;
}
.drilldown-chip:hover { background: var(--brand-navy-50); color: var(--brand-navy); border-color: var(--brand-navy); }
.drilldown-chip:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 2px; }
.drilldown-chip-current,
.drilldown-chip-current:hover { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
.drilldown-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.drilldown-meta .chip { margin-left: 0; }
.drilldown-count { margin: 0 0 .5rem; font-size: .9rem; }

/* Different grid widths for 4-, 5- and 6-bucket breakdowns. The default
   .status-breakdown is 5-col (matches Plans + Needs); .status-breakdown-6
   pivots to 6-col for Referrals. .status-breakdown-5 is an explicit alias
   for documentation clarity at the markup site. -4 is used by the recidivism,
   foresight and report-schedule panels, which had been getting the 5-col
   default and so left an empty sixth of the row on the right. */
.status-breakdown-4    { grid-template-columns: repeat(4, 1fr); }
.status-breakdown-5    { grid-template-columns: repeat(5, 1fr); }
.status-breakdown-6    { grid-template-columns: repeat(6, 1fr); }

/* ---------- referrals ---------- */
.referral-card {
    background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px;
    padding: 1rem 1.25rem; margin-bottom: .85rem; border-left: 4px solid var(--brand-navy-50);
}
.referral-status-pending    { border-left-color: var(--color-amber); }
.referral-status-accepted   { border-left-color: var(--brand-navy); }
.referral-status-inprogress { border-left-color: var(--brand-green); }
.referral-status-completed  { border-left-color: var(--brand-green-600); background: linear-gradient(180deg, var(--brand-green-50), #fff); }
.referral-status-declined   { border-left-color: var(--color-danger); opacity: .85; }
.referral-status-cancelled  { border-left-color: #94a3b8; opacity: .7; }

.referral-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .5rem; flex-wrap: wrap; }
.referral-flow { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text-primary); }
.referral-org   { background: var(--brand-navy-50); color: var(--brand-navy); padding: 3px 10px; border-radius: var(--radius-pill); font-size: .85rem; }
.referral-arrow { color: var(--text-muted); font-weight: 700; }
.referral-meta  { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

.referral-status-pill-pending    { background: var(--color-amber-50);  color: var(--color-amber); }
.referral-status-pill-accepted   { background: var(--brand-navy-50);   color: var(--brand-navy); }
.referral-status-pill-inprogress { background: var(--brand-green-50);  color: var(--brand-green-600); }
.referral-status-pill-completed  { background: var(--brand-green-600); color: #fff; }
.referral-status-pill-declined   { background: var(--color-danger-50); color: var(--color-danger); }
.referral-status-pill-cancelled  { background: #eef1f5;                color: #64748b; }

.referral-urgency-routine { background: #eef1f5; color: #475569; }
.referral-urgency-urgent  { background: var(--color-amber-50); color: var(--color-amber); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.referral-urgency-crisis  { background: var(--color-danger-50); color: var(--color-danger); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.referral-reason { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; margin-bottom: .5rem; }
.referral-times  { font-size: .75rem; }
.referral-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--border-subtle); }

.referral-history { margin-top: .75rem; }
.referral-history summary { cursor: pointer; font-size: .8rem; color: var(--text-muted); padding: .25rem 0; }
.referral-history summary:hover { color: var(--brand-navy); }
.referral-history ul { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--border-subtle); display: flex; flex-direction: column; gap: .35rem; }
.referral-history li { font-size: .8rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.referral-history-arrow { font-weight: 600; color: var(--brand-navy); }
.referral-history-notes { color: var(--text-secondary); }

/* The panel inside the expanded row. .row-expanded-content strips the cell's padding so the
   panel can own its own inset; this is that inset, plus the left edge that ties the detail to
   the referral above it rather than letting it read as another record in the table. */
.referral-detail {
    padding: .85rem 1rem 1rem;
    border-left: 3px solid var(--brand-navy-50);
}

/* "Advance lifecycle": the one action in the expanded panel. Fenced off from the history above
   it so a status change never looks like part of the record of past ones. */
.referral-transition {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--border-subtle);
}
.referral-transition > label {
    display: block;
    margin-bottom: .35rem;
    font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted);
}

/* ---------- resources ---------- */
.toolbar-archived {
    display: flex; align-items: center; gap: .5rem; padding: 0 .85rem;
    color: var(--text-secondary); font-size: .9rem; cursor: pointer;
}
.resource-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem;
}
.resource-card {
    background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px;
    padding: 1rem 1.25rem; border-top: 4px solid var(--brand-green);
    display: flex; flex-direction: column; gap: .35rem;
}
.resource-status-archived { opacity: .6; border-top-color: var(--color-amber); }
.resource-head  { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin-bottom: .35rem; }
.resource-title { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--text-primary); }
.resource-line  { font-size: .85rem; }
/* PDF #6 (May 9 2026 Part-2): clickable address + phone in resource cards.
   Match the resource-link a hover affordance to the rest of the app. */
.resource-line a { color: var(--accent-coral); text-decoration: none; }
.resource-line a:hover { text-decoration: underline; }
.resource-link-address, .resource-link-phone { font-weight: 500; }

/* PDF #7 (May 9 2026 Part-2): partner organizations directory */
.partners-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}
.partner-card {
    /* May 13 2026: was var(--surface-default) which resolved to transparent
       so cards blended into the gray app background. Switched to the solid
       white --bg-card token (same as KPI / profile / grants cards) and bumped
       the shadow from 0.04 -> 0.08 so the cards lift off the page edges. */
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.partner-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
.partner-card:hover { border-color: var(--accent-coral); }
.partner-card-mine { border-left: 4px solid var(--brand-navy); }
.partner-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .5rem;
}
.partner-name { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--brand-navy); }
.partner-desc {
    margin: .35rem 0 .65rem;
    font-size: .87rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.partner-contact { display: flex; flex-direction: column; gap: .25rem; }
.partner-line { font-size: .85rem; }
.partner-line a { color: var(--accent-coral); text-decoration: none; }
.partner-line a:hover { text-decoration: underline; }
.partner-edit { display: grid; gap: .55rem; margin-top: .25rem; }

/* PDF May 14 demo polish: volunteer-roster table column sizing.
   Default <table> auto-layout was making the Display Name column too narrow
   (wrapped "Brian Tate" -> two lines). Explicit colgroup widths + nowrap on
   single-token cells gives the names + dates room to breathe. */
.vol-roster        { table-layout: auto; }
.vol-col-name      { width: 14%; min-width: 9rem; }
.vol-col-email     { width: 22%; min-width: 12rem; }
.vol-col-phone     { width: 9rem; }
.vol-col-skills    { width: auto; min-width: 10rem; }
.vol-col-status    { width: 9rem; }
.vol-col-hrs       { width: 4.5rem; }
.vol-col-last      { width: 8rem; }
.vol-col-bg        { width: 8rem; }
.vol-roster .vol-cell-name      { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vol-roster .vol-cell-email     { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; } /* max-width:0 + width-from-col makes the ellipsis kick in inside a fixed-width cell */
.vol-roster .vol-cell-nowrap    { white-space: nowrap; }
.vol-roster .status-pill        { white-space: nowrap; }
.vol-roster .vol-bg-chip        { white-space: nowrap; }
.vol-roster tbody td            { padding: .65rem .65rem; }   /* slightly tighter than default */

/* PDF May 14 demo polish: phone-width responsiveness on the 4 newest pages */
@media (max-width: 720px) {
    .partners-grid { grid-template-columns: 1fr; }
    .partners-toolbar { flex-direction: column; align-items: stretch; }
    .partners-toolbar > * { max-width: none !important; }
    .partner-card { padding: .85rem 1rem; }
    .partner-name { font-size: 1rem; }
    .partner-head { flex-wrap: wrap; }

    .referral-recipient-preview { padding: .55rem .65rem; }
    .referral-recipient-contact { flex-direction: column; gap: .35rem; }
}

/* PDF #10 (May 9 2026 Part-2): pending hours history in the volunteer
   mini-profile */
.vol-mini-hours-history {
    margin-top: .85rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--border-subtle);
}
.vol-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}
.vol-hours-table td {
    padding: .35rem .55rem;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.alert-inline-success {
    display: inline-block;
    padding: .15rem .55rem;
    color: #147a3d;
    font-size: .78rem;
    background: rgba(20, 122, 61, 0.08);
    border-radius: 4px;
}

/* PDF #8 (May 9 2026 Part-2): staff-PWA inbox layout */
.inbox-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    height: calc(100vh - 220px);
    min-height: 540px;
}
.inbox-thread-list {
    overflow-y: auto;
    border-right: 1px solid var(--border-subtle);
    padding-right: .25rem;
    height: 100%;
}
.inbox-thread-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    padding: .65rem .75rem;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: .25rem;
}
.inbox-thread-item:hover { background: var(--surface-soft); }
.inbox-thread-item-active { background: var(--surface-soft); border-color: var(--brand-navy); }
.inbox-thread-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .15rem;
}
.inbox-unread {
    background: var(--accent-coral);
    color: #fff;
    border-radius: 10px;
    padding: 0 .5rem;
    font-size: .75rem;
    font-weight: 600;
}
.inbox-thread-recipient { font-weight: 500; font-size: .9rem; margin-bottom: .15rem; }
.inbox-thread-subj { font-size: .82rem; color: var(--text-secondary); }
.inbox-thread-time { font-size: .72rem; margin-top: .15rem; }

.inbox-thread-pane {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.inbox-thread-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}
.inbox-thread-header h3 { margin: 0 0 .15rem; }
.inbox-thread-body {
    padding: .75rem 1rem;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.inbox-bubble {
    padding: .55rem .8rem;
    border-radius: 12px;
    max-width: 75%;
    font-size: .92rem;
}
.inbox-bubble-org {
    background: var(--brand-navy);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 3px;
}
.inbox-bubble-recipient {
    background: var(--surface-soft);
    color: var(--text-primary);
    align-self: flex-start;
    border-bottom-left-radius: 3px;
}
.inbox-bubble-meta { font-size: .7rem; margin-top: .25rem; opacity: .8; }
.inbox-bubble-org .inbox-bubble-meta { color: rgba(255,255,255,.85); }
.inbox-compose {
    padding: .75rem 1rem;
    border-top: 1px solid var(--border-subtle);
    display: grid;
    gap: .55rem;
}
.inbox-compose .btn { justify-self: flex-end; }
@media (max-width: 900px) {
    .inbox-layout { grid-template-columns: 1fr; height: auto; }
    .inbox-thread-list { border-right: 0; max-height: 280px; }
    .inbox-thread-pane { min-height: 480px; }
}

/* PDF #7 (May 9 2026 Part-2): inline recipient contact preview on the
   Send-referral form */
.referral-recipient-preview {
    margin-top: .5rem;
    padding: .65rem .85rem;
    background: var(--surface-soft);
    border-left: 3px solid var(--brand-navy);
    border-radius: 6px;
}
.referral-recipient-contact {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    font-size: .85rem;
    margin-top: .1rem;
}
.referral-recipient-contact a { color: var(--accent-coral); text-decoration: none; }
.referral-recipient-contact a:hover { text-decoration: underline; }
.resource-tags  { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.resource-tag   { background: #eef1f5; color: #475569; }

/* ---------- needs ---------- */
.need-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.need-card {
    display: grid; grid-template-columns: 36px 1fr 160px; gap: .85rem; align-items: start;
    background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px;
    padding: .85rem 1rem; border-left: 4px solid #94a3b8;
}
.need-priority-critical { border-left-color: var(--color-danger); background: linear-gradient(180deg, var(--color-danger-50), #fff); }
.need-priority-high     { border-left-color: var(--color-amber); }
.need-priority-medium   { border-left-color: var(--brand-navy); }
.need-priority-low      { border-left-color: #94a3b8; opacity: .9; }
.need-status-resolved, .need-status-closed { opacity: .65; }
.need-status-resolved .need-title, .need-status-closed .need-title { text-decoration: line-through; color: var(--text-muted); }

.need-priority-flag { font-size: 1.4rem; font-weight: 700; color: var(--text-muted); text-align: center; }
.need-priority-critical .need-priority-flag { color: var(--color-danger); }
.need-priority-high     .need-priority-flag { color: var(--color-amber); }
.need-priority-medium   .need-priority-flag { color: var(--brand-navy); }

.need-body { min-width: 0; }
.need-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.need-title { font-weight: 600; color: var(--text-primary); }
.need-desc { color: var(--text-secondary); font-size: .9rem; line-height: 1.45; margin-bottom: .25rem; }
.need-meta { font-size: .75rem; }
.need-resolution { color: var(--brand-green-600); font-size: .8rem; margin-top: .25rem; font-style: italic; }

.need-status-pill-open     { background: var(--color-amber-50);  color: var(--color-amber); }
.need-status-pill-active   { background: var(--brand-navy-50);   color: var(--brand-navy); }
.need-status-pill-deferred { background: #eef1f5;                color: #64748b; }
.need-status-pill-resolved { background: var(--brand-green-50);  color: var(--brand-green-600); }
.need-status-pill-closed   { background: #eef1f5;                color: #64748b; }

/* ---------- cross-module linkage chip ---------- */
.addresses-need {
    margin-top: .35rem;
    font-size: .8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.link-arrow { color: var(--brand-navy); font-weight: 700; }

/* ---------- portfolio ---------- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .85rem;
}
.portfolio-card {
    display: grid;
    grid-template-columns: 48px 1fr 90px;
    gap: .85rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: .85rem 1rem;
    border-left: 4px solid var(--brand-navy);
}
.portfolio-icon { font-size: 1.8rem; text-align: center; }
.portfolio-body { min-width: 0; }
.portfolio-title { font-weight: 600; color: var(--text-primary); margin-bottom: .25rem; }
.portfolio-meta { font-size: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.portfolio-expiry { font-size: .75rem; margin-top: .25rem; }
.portfolio-expiring { color: var(--color-amber); }
.portfolio-expired  { color: var(--color-danger); }

.portfolio-kind-stateid, .portfolio-kind-driverslicense, .portfolio-kind-passportorpermit {
    border-left-color: var(--brand-navy);
}
.portfolio-kind-medicaldocument { border-left-color: var(--color-violet); }
.portfolio-kind-dischargepaper, .portfolio-kind-signedconsentform { border-left-color: var(--brand-navy); }
.portfolio-kind-recoverycertificate, .portfolio-kind-trainingcredential { border-left-color: var(--brand-green); }
.portfolio-redacted { border-left-color: #94a3b8 !important; background: linear-gradient(180deg, #f4f6fa, #fff); opacity: .8; }
.portfolio-redacted .portfolio-title.redacted { color: var(--text-muted); font-style: italic; font-weight: 500; }

/* ---------- events / attendance ---------- */
.event-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.event-card {
    display: grid;
    grid-template-columns: 70px 1fr 200px;
    gap: .85rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: .85rem 1rem;
    border-left: 4px solid var(--brand-navy);
}
.event-court-ordered { border-left-color: var(--color-amber); background: linear-gradient(180deg, var(--color-amber-50), #fff); }
.event-status-completed { opacity: .85; }
.event-status-cancelled { opacity: .55; }
.event-status-cancelled .event-title { text-decoration: line-through; }

.event-when {
    text-align: center;
    border-right: 1px solid var(--border-subtle);
    padding-right: .65rem;
}
.event-when-month { font-size: .65rem; font-weight: 700; letter-spacing: .08em; color: var(--brand-navy); }
.event-when-day   { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--text-primary); }
.event-when-time  { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }

.event-body { min-width: 0; }
.event-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .35rem; }
.event-title { font-weight: 600; color: var(--text-primary); }
.event-desc  { color: var(--text-secondary); font-size: .9rem; line-height: 1.45; margin-bottom: .25rem; }
.event-meta  { font-size: .8rem; margin-top: .15rem; }

.event-attendance { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border-subtle); }
.event-attendance-note { font-size: .8rem; width: 100%; font-style: italic; }

.attendance-attended { background: var(--brand-green-50); color: var(--brand-green-600); }
.attendance-partiallyattended { background: var(--color-amber-50); color: var(--color-amber); }
.attendance-noshow { background: var(--color-danger-50); color: var(--color-danger); font-weight: 700; }
.attendance-excused { background: #eef1f5; color: #64748b; }

.event-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-self: center; justify-content: flex-end; }

.event-status-pill-scheduled  { background: var(--color-amber-50);  color: var(--color-amber); }
.event-status-pill-inprogress { background: var(--brand-navy-50);   color: var(--brand-navy); }
.event-status-pill-completed  { background: var(--brand-green-50);  color: var(--brand-green-600); }
.event-status-pill-cancelled  { background: #eef1f5;                color: #64748b; }

/* ---------- notifications ---------- */
.notification-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.notification-card {
    display: grid; grid-template-columns: 36px 1fr 80px; gap: .85rem; align-items: start;
    background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px;
    padding: .85rem 1rem; border-left: 4px solid #94a3b8;
}
.notif-channel-sms   { border-left-color: var(--brand-green); }
.notif-channel-email { border-left-color: var(--brand-navy); }
.notif-channel-inapp { border-left-color: var(--color-violet); }

.notif-status-sent      { background: linear-gradient(180deg, var(--brand-green-50), #fff); }
.notif-status-failed    { background: linear-gradient(180deg, var(--color-danger-50), #fff); border-left-color: var(--color-danger); }
.notif-status-cancelled { opacity: .65; }

.notification-icon { font-size: 1.4rem; text-align: center; padding-top: .15rem; }
.notification-body { min-width: 0; }
.notification-head {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem;
}
.notification-recipient { font-weight: 600; color: var(--text-primary); font-family: 'Consolas', 'Monaco', monospace; font-size: .85rem; }
.notification-subject { font-weight: 500; color: var(--text-secondary); margin-bottom: .25rem; font-size: .9rem; }
.notification-body-text { color: var(--text-secondary); font-size: .9rem; line-height: 1.45; margin-bottom: .35rem; white-space: pre-wrap; }
.notification-meta { font-size: .75rem; }
.notification-meta code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-size: .7rem; }
.notif-failure { color: var(--color-danger); margin-top: .25rem; font-style: italic; font-size: .8rem; }

.notif-status-pill-pending   { background: var(--color-amber-50);  color: var(--color-amber); }
.notif-status-pill-sent      { background: var(--brand-green-600); color: #fff; }
.notif-status-pill-failed    { background: var(--color-danger-50); color: var(--color-danger); font-weight: 700; }
.notif-status-pill-cancelled { background: #eef1f5;                color: #64748b; }

/* ---------- admin page ---------- */
/* FND-007 admin console tab strip - ties the /admin/* pages into one console. */
.admin-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.admin-tab {
    padding: .55rem .95rem; font-size: .88rem; font-weight: 600; color: #64748b;
    text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tab:hover { color: var(--brand-navy); }
.admin-tab.active { color: var(--brand-navy); border-bottom-color: var(--brand-navy); }
.admin-self { background: linear-gradient(180deg, var(--brand-green-50), #fff); }
.admin-self-head code { font-size: .85rem; padding: 2px 6px; background: #fff; border-radius: 4px; border: 1px solid var(--border-subtle); }
.admin-org-card { padding: 1.25rem 1.5rem; }
.admin-org-title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.05rem; }
.admin-org-toggle {
    background: transparent; border: 0; cursor: pointer;
    color: var(--brand-navy); font-size: 1rem; font-weight: 700;
    padding: 0 .25rem;
}
.admin-org-slug { font-weight: 400; font-size: .85rem; }
.admin-row-self { background: var(--brand-green-50); }
.admin-row-self code { background: rgba(255,255,255,.6); padding: 1px 6px; border-radius: 4px; }
.admin-volunteers-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--border-subtle); }
.admin-subblock-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }

.volunteer-status-pill-pendingbackgroundcheck { background: var(--color-amber-50);  color: var(--color-amber); }
.volunteer-status-pill-active                  { background: var(--brand-green-50); color: var(--brand-green-600); }
.volunteer-status-pill-inactive                { background: #eef1f5;               color: #64748b; }
.volunteer-status-pill-removed                 { background: var(--color-danger-50); color: var(--color-danger); font-weight: 700; }

/* ---------- training ---------- */
.training-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.training-card {
    display: grid; grid-template-columns: 36px 1fr 160px; gap: .85rem; align-items: start;
    background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px;
    padding: .85rem 1rem; border-left: 4px solid var(--brand-navy);
}
.training-status-completed  { border-left-color: var(--brand-green-600); background: linear-gradient(180deg, var(--brand-green-50), #fff); }
.training-status-inprogress { border-left-color: var(--color-amber); }
.training-status-failed     { border-left-color: var(--color-danger); background: linear-gradient(180deg, var(--color-danger-50), #fff); }
.training-status-dropped    { opacity: .65; }
.training-status-cancelled  { opacity: .55; }

.training-icon { font-size: 1.4rem; text-align: center; padding-top: .15rem; }
.training-body { min-width: 0; }
.training-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.training-title { font-weight: 600; color: var(--text-primary); }
/* PDF #6 (May 9 2026 Part-2): link variant of training title with hover affordance */
.training-title-link {
    text-decoration: none;
    transition: color 120ms ease;
}
.training-title-link:hover { color: var(--accent-coral); text-decoration: underline; }
.training-desc  { color: var(--text-secondary); font-size: .9rem; line-height: 1.45; margin-bottom: .25rem; }
.training-meta  { font-size: .75rem; }
.training-completion { color: var(--brand-green-600); font-size: .8rem; margin-top: .25rem; font-style: italic; }
/* "▶ Watch program video", last thing in the body cell. .btn-link has no margin of its own, so
   without this the link sits directly on the enrolled/started/completed line above it. */
.training-video { margin-top: .35rem; }

.training-status-pill-enrolled   { background: var(--color-amber-50);  color: var(--color-amber); }
.training-status-pill-inprogress { background: var(--brand-navy-50);   color: var(--brand-navy); }
.training-status-pill-completed  { background: var(--brand-green-600); color: #fff; }
.training-status-pill-dropped    { background: #eef1f5;                color: #64748b; }
.training-status-pill-failed     { background: var(--color-danger-50); color: var(--color-danger); font-weight: 700; }
.training-status-pill-cancelled  { background: #eef1f5;                color: #64748b; }

/* ---------- dashboard hero + polished KPI cards ---------- */
/* Dashboard hero: gradient text on the welcome H1, subtle background glow
   below it. Reads as "this is YOUR workspace" with a touch of life rather
   than a flat label. The gradient text uses background-clip: text so it
   degrades gracefully on browsers that don't support it (falls back to the
   solid --brand-navy color set on the parent). */
.dashboard-hero h1 {
    background: linear-gradient(120deg, var(--brand-navy) 0%, #2563eb 70%, var(--brand-green) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Fallback color in case background-clip is unsupported. */
    text-shadow: none;
}
.dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.dashboard-hero h1 { margin: 0; }
.dashboard-hero-actions { display: flex; align-items: center; gap: .75rem; }

/* Hero KPI grid uses larger min-width so the four cards form a tight 4-up
   row on a typical desktop and gracefully wrap to 2x2 on tablets. */
/* KPI hero row sits in plain document flow. A real bottom margin (not a
   stacking hack) guarantees a clean vertical gap before the dashboard grid
   below it — the previous `position: relative; z-index: 0/1` pairing on this
   row and `.dashboard-grid` made the lower section paint OVER the bottom of
   these cards, which read as an overlap. Removed entirely. */
.card-grid-hero { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 2rem; align-items: stretch; }

/* THE actual cause of the long-standing "section overlaps the KPI row" bug:
   the cards render as <a class="aui-stat-link"> wrapping the design-system
   .aui-stat tile, and the shared Ascend.UI rule `a.aui-stat-link .aui-stat
   { height: 100% }` combined with this grid's align-items:stretch UNDER-SIZES
   the auto row track. Each tile's content then overflows the .card-grid-hero
   box (offsetHeight 178 vs scrollHeight 220 — ~42px spill), so the 2rem
   margin-bottom is measured from a container that ends ABOVE the visible card
   bottoms and the dashboard section paints over them. Ascend.UI is owned by
   another agent, so neutralise the percentage height here in admin scope:
   make the link a flex box and let .aui-stat flex to the true row height. This
   makes offsetHeight == scrollHeight (verified), so the row contains its cards
   and the 2rem gap below is real at every breakpoint (4-up / 2x2 / 1-up). */
.card-grid-hero .aui-stat-link { display: flex; }
.card-grid-hero .aui-stat-link > .aui-stat { height: auto; flex: 1 1 auto; }

.card-grid-hero .kpi-card { position: relative; padding: 1.4rem 1.25rem 1.25rem 1.25rem; min-height: 7.5rem; }
.card-grid-hero .kpi-value { font-size: 2.4rem; font-weight: 700; letter-spacing: -.01em; }
.card-grid-hero .kpi-label { font-size: .9rem; font-weight: 600; color: var(--text-primary); margin-top: .35rem; }
.card-grid-hero .kpi-detail { font-size: .78rem; margin-top: .55rem; }

.kpi-icon {
    position: absolute; top: 1rem; right: 1rem;
    font-size: 1.5rem; opacity: .42; line-height: 1;
}
.card-grid-hero .kpi-card-navy .kpi-label { color: rgba(255,255,255,.92); }
.card-grid-hero .kpi-card-navy .kpi-detail { color: rgba(255,255,255,.78); }
.kpi-detail-strong { color: var(--brand-navy); font-weight: 700; }
.kpi-card-navy .kpi-detail-strong { color: #ffd28a; }

.kpi-card-amber  { background: linear-gradient(135deg, var(--color-amber-50), #fff); border-color: var(--color-amber-50); }
.kpi-card-amber  .kpi-icon { color: var(--color-amber); opacity: .65; }
.kpi-card-violet { background: linear-gradient(135deg, var(--color-violet-50), #fff); border-color: var(--color-violet-50); }
.kpi-card-violet .kpi-icon { color: var(--color-violet); opacity: .65; }
.kpi-card-green  .kpi-icon { color: var(--brand-green-600); opacity: .55; }
.kpi-card-navy   .kpi-icon { color: #fff; opacity: .35; }

.dashboard-footer {
    text-align: right;
    font-size: .75rem;
    margin-top: 1rem;
}

/* ---------- dashboard 2-column layout (main + sidebar) ---------- */
/* The main column is the primary work surface (pipelines + signals); the
   aside is the at-a-glance "what next" surface (quick actions + recent
   people). Collapses to a single column under 1100px so tablets don't get
   a cramped sidebar. */
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.dashboard-grid-main, .dashboard-grid-aside { min-width: 0; }
.dashboard-grid-aside .section-card { margin-bottom: 1.5rem; }
@media (max-width: 1100px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* Click-through KPI cards. The same .kpi-card visual treatment but with a
   pointer cursor + hover lift + remove the underline that <a> would inherit
   from the global styles. */
.kpi-card-link {
    display: block; text-decoration: none; color: inherit;
    transition: transform .12s, box-shadow .12s;
}
.kpi-card-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
}
.kpi-card-link:hover .kpi-icon { opacity: .85; transform: scale(1.08); }
.kpi-card-link .kpi-icon { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), opacity .18s; }
.kpi-card-navy.kpi-card-link { color: #fff; }

/* Section-tag-link: same visual as .section-tag but anchor-shaped + arrow
   hint on hover. Used for "filter & export →" / "all →" links in section
   headers. */
.section-tag-link {
    background: var(--brand-green-50); color: var(--brand-green-600);
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .12s;
}
.section-tag-link:hover { background: var(--brand-green-600); color: #fff; }

/* Click-through pipeline blocks. The whole stacked bar is now the click
   target so the operator can drill from "Plans pipeline" to /reports without
   first hunting for a link. Anchor reset + subtle hover affordance on the
   bar itself (saturation pop, not a border). */
.pipeline-block-link {
    display: block; text-decoration: none; color: inherit;
    border-radius: 8px; padding: .35rem;
    margin: .9rem -.35rem 0;
    transition: background-color .12s;
}
.pipeline-block-link:first-of-type { margin-top: 0; }
.pipeline-block-link:hover { background: rgba(45, 164, 113, .04); text-decoration: none; }
.pipeline-block-link:hover .pipeline-bar { filter: saturate(1.15); }

/* Click-through signal tiles. Same visual + a hover lift identical to the
   KPI cards so clickable surfaces feel consistent. */
.signal-tile-link {
    display: block; text-decoration: none; color: inherit;
    transition: transform .12s, box-shadow .12s;
}
.signal-tile-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26, 58, 94, .08);
    text-decoration: none;
}

/* Quick-actions list - hub of jump-off links to the operator's most-common
   next steps. Each row is a flex row with an icon glyph + label + sub-label. */
.quick-action-list { display: flex; flex-direction: column; gap: .35rem; }
.quick-action {
    display: flex; align-items: center; gap: .85rem;
    padding: .65rem .85rem;
    border-radius: 10px; text-decoration: none;
    color: var(--text-primary);
    border: 1px solid transparent;
    transition: background-color .12s, border-color .12s;
}
.quick-action:hover {
    background: var(--brand-navy-50);
    border-color: #cdd9eb;
    text-decoration: none;
    color: var(--brand-navy);
}
.quick-action-icon {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    background: var(--brand-green-50); color: var(--brand-green-600);
    border-radius: 8px; font-size: 1rem; font-weight: 600;
}
.quick-action:hover .quick-action-icon { background: var(--brand-navy); color: #fff; }

/* Recent-people list in the dashboard sidebar. Avatar + alias + sub-line
   with person code + relative time. Click-through to the person profile. */
.recent-list { display: flex; flex-direction: column; gap: .25rem; }
.recent-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem .65rem;
    border-radius: 8px; text-decoration: none;
    color: var(--text-primary);
    transition: background-color .12s;
}
.recent-item:hover { background: var(--brand-green-50); text-decoration: none; }
.recent-avatar {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    background: var(--brand-navy); color: #fff;
    border-radius: 50%; font-size: .85rem; font-weight: 600;
}
.recent-meta { min-width: 0; flex: 1; }
.recent-name {
    font-size: .9rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-sub { font-size: .7rem; color: var(--text-muted); margin-top: 1px; }

/* ---------- pipeline stacked-bar visualization ---------- */
.pipeline-block { margin-top: 1.25rem; }
.pipeline-block:first-of-type { margin-top: .25rem; }
.pipeline-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: .35rem;
}
.pipeline-head h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); }

.pipeline-bar {
    display: flex; width: 100%; height: 28px;
    background: #f3f4f6; border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.pipeline-seg {
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .8rem; font-weight: 600;
    transition: filter .15s;
    min-width: 4px;
}
.pipeline-seg:hover { filter: brightness(1.1); }
.pipeline-seg-num { padding: 0 .35rem; }

/* Per-status segment colors. The same swatch is reused in the legend
   below so the eye can connect bar segment -> legend chip without effort. */
.pipeline-seg-draft      { background: #94a3b8; }   /* slate */
.pipeline-seg-active     { background: var(--brand-navy); }
.pipeline-seg-inprogress { background: #2a4d75; }   /* navy-700-ish, between active and finalized */
.pipeline-seg-complete   { background: var(--brand-green); }
.pipeline-seg-finalized  { background: var(--brand-green-600); }
.pipeline-seg-cancelled  { background: var(--color-danger); }
.pipeline-seg-deferred   { background: var(--color-amber); }
.pipeline-seg-closed     { background: #64748b; }   /* slate-700 */
.pipeline-seg-pending    { background: var(--color-violet); }

.pipeline-legend {
    display: flex; flex-wrap: wrap; gap: .35rem .9rem;
    margin-top: .55rem; font-size: .78rem; color: var(--text-secondary);
}
.pipeline-leg { display: inline-flex; align-items: center; gap: .25rem; }
.pipeline-leg.pipeline-seg-draft      { color: #475569; background: transparent; }
.pipeline-leg.pipeline-seg-active     { color: var(--brand-navy); background: transparent; }
.pipeline-leg.pipeline-seg-inprogress { color: #2a4d75; background: transparent; }
.pipeline-leg.pipeline-seg-complete   { color: var(--brand-green-600); background: transparent; }
.pipeline-leg.pipeline-seg-finalized  { color: var(--brand-green-600); background: transparent; }
.pipeline-leg.pipeline-seg-cancelled  { color: var(--color-danger); background: transparent; }
.pipeline-leg.pipeline-seg-deferred   { color: var(--color-amber); background: transparent; }
.pipeline-leg.pipeline-seg-closed     { color: #475569; background: transparent; }
.pipeline-leg.pipeline-seg-pending    { color: var(--color-violet); background: transparent; }
.pipeline-leg strong { color: var(--text-primary); margin-left: .15rem; font-weight: 700; }

/* ---------- dashboard coordination signals ---------- */
.signal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .85rem;
}
.signal-tile {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--brand-navy-50);
    border-radius: 10px;
    padding: .85rem 1rem;
}
.signal-value  { font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--text-primary); }
.signal-label  { font-size: .85rem; color: var(--text-secondary); margin-top: .15rem; font-weight: 500; }
.signal-detail { font-size: .72rem; color: var(--text-muted); margin-top: .35rem; }
.signal-tile-warn   { border-left-color: var(--color-amber);   background: linear-gradient(180deg, var(--color-amber-50), #fff); }
.signal-tile-danger { border-left-color: var(--color-danger);  background: linear-gradient(180deg, var(--color-danger-50), #fff); }

/* ---------- reports table ---------- */
.reports-table { width: 100%; border-collapse: collapse; }
.reports-table th, .reports-table td {
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    font-size: .9rem;
}
.reports-table th {
    background: var(--brand-navy-50);
    color: var(--brand-navy);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.reports-table tr:hover td { background: #fafbfd; }
.reports-table .reports-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--brand-navy);
    width: 120px;
}

/* ---------- events calendar (top-level /events page) ---------- */
.events-day-header {
    display: flex; align-items: center; gap: .65rem;
    margin: 1.25rem 0 .35rem;
    font-size: .9rem; font-weight: 600; color: var(--brand-navy);
    text-transform: uppercase; letter-spacing: .04em;
    padding-bottom: .35rem; border-bottom: 2px solid var(--brand-navy-50);
}
.events-day-header:first-of-type { margin-top: 0; }
.events-row-past td { opacity: .55; }
.events-row-past td:first-child { border-left: 3px solid var(--border-subtle); padding-left: calc(.85rem - 3px); }
/* May 13 2026: whole row is now the click target (the per-row "→" hash button
   was removed for visual clutter). Title bolds + underlines on hover so the
   navigation affordance is unambiguous; cursor:pointer on the row signals it. */
.events-row-clickable { cursor: pointer; transition: background-color 120ms ease; }
.events-row-clickable:hover { background-color: var(--brand-navy-50); }
.events-row-clickable:hover .events-row-title { text-decoration: underline; text-decoration-color: var(--brand-navy); }
.events-row-clickable:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: -2px; }

/* ---------- nav-membership list (signed-in operator's org memberships) ---------- */
.nav-membership-block { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }
.nav-membership-label {
    font-size: .65rem; text-transform: uppercase; letter-spacing: .07em;
    color: rgba(255,255,255,.82); margin-bottom: .35rem;
}
.nav-membership-list { display: flex; flex-direction: column; gap: .25rem; }
.nav-membership-item {
    display: flex; align-items: center; gap: .4rem;
    font-size: .8rem; color: rgba(255,255,255,.78);
    line-height: 1.3;
}
.nav-membership-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-membership-role {
    font-size: .58rem; padding: 1px 5px; border-radius: 4px;
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
    text-transform: uppercase; letter-spacing: .04em;
}
.nav-membership-role-admin { background: var(--brand-green-600); color: #fff; }
/* The way out for a multi-org operator, under the read-only membership list. Underlined and
   in the pale blue the rest of the sidebar's secondary text uses, because on the navy it has
   to look like a link without being loud enough to compete with the nav items above it. */
.nav-membership-switch {
    display: inline-block; margin-top: .5rem;
    font-size: .78rem; color: #9db8e0; text-decoration: underline;
}

/* ---------- Power BI / Fabric Embedded host (Reports page) ---------- */
.pbi-embed-host {
    width: 100%;
    height: 70vh;
    min-height: 480px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--brand-navy-50);
    border: 1px solid var(--border-subtle);
}
.pbi-embed-host iframe { border: 0; width: 100%; height: 100%; }

/* ---------- Blazor error UI ---------- */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
/* The one action in the circuit-failure banner. On lightyellow the default link blue is the
   weakest thing in the bar, which is backwards: reloading is the only way out of this state. */
#blazor-error-ui .reload { color: var(--brand-navy); font-weight: 600; margin-left: .5rem; }

/* ---------- Plan templates page ---------- */
.page-actions { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.filter-toggle { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .92rem; }

.template-card { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1rem 1.1rem; background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.template-card.is-archived { opacity: .65; }
.template-card .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.template-card .card-head h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.template-card .card-body { margin: 0; color: var(--text-secondary); font-size: .92rem; }
.template-card .card-note { margin: 0; padding: .45rem .6rem; background: var(--brand-navy-50); border-radius: 6px; font-size: .85rem; color: var(--text-secondary); }
.template-card .card-meta { display: flex; gap: .35rem; color: var(--text-muted); font-size: .8rem; margin-top: auto; }
.template-card .card-actions { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .35rem; border-top: 1px solid var(--border-subtle); }

.btn-text { background: none; border: 0; color: var(--brand-navy-600, #1e3a8a); padding: .25rem .5rem; cursor: pointer; font-weight: 600; font-size: .88rem; border-radius: 4px; }
.btn-text:hover { background: var(--brand-navy-50); }
.btn-text.btn-danger { color: var(--color-danger); }
.btn-text.btn-danger:hover { background: rgba(220, 38, 38, .08); }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 50; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(720px, 92vw); max-height: 86vh; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(15,23,42,.25); z-index: 51; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.modal-head h2 { margin: 0; font-size: 1.1rem; }
.btn-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0 .25rem; }
.btn-close:hover { color: var(--text-primary); }
.modal-body { padding: 1.1rem 1.25rem; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .85rem 1.25rem; border-top: 1px solid var(--border-subtle); background: #fafbfc; }

.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .85rem; }
.field > span { font-size: .82rem; color: var(--text-secondary); font-weight: 600; }
.field input, .field textarea, .field select { padding: .5rem .65rem; border: 1px solid var(--border-subtle); border-radius: 6px; font: inherit; }
.required { color: var(--color-danger); }

.items-block { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--border-subtle); }
.items-block .items-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.items-block .items-head h3 { margin: 0; font-size: 1rem; }
.items-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.items-table th, .items-table td { text-align: left; padding: .35rem .45rem; vertical-align: top; }
.items-table th { color: var(--text-muted); font-weight: 600; font-size: .78rem; }
.items-table input, .items-table select { width: 100%; padding: .35rem .45rem; border: 1px solid var(--border-subtle); border-radius: 4px; font: inherit; }

.items-readonly { padding-left: 1.2rem; }
.items-readonly li { margin-bottom: .65rem; }
.items-readonly p { margin: .15rem 0 0; font-size: .85rem; }
.cat-chip { display: inline-block; padding: .12rem .45rem; background: var(--brand-navy-50); border-radius: 4px; font-size: .72rem; color: var(--text-secondary); margin-right: .45rem; text-transform: uppercase; letter-spacing: .03em; }

.status-pill.status-active { background: #dcfce7; color: #166534; }
.status-pill.status-archived { background: #f1f5f9; color: var(--text-muted); }

/* ---------- Bulk attendance bar ---------- */
.bulk-attendance-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .85rem;
    margin-bottom: .65rem;
    background: var(--brand-navy-50);
    border: 1px solid #cdd9eb;
    border-radius: 8px;
    font-size: .9rem;
    flex-wrap: wrap;
}
.bulk-attendance-info { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bulk-attendance-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.bulk-summary { margin-bottom: .65rem; }

/* Insert a checkbox column at the start of every event-card. The original
   grid is `70px 1fr 200px`; the checkbox column is fixed-width and the
   placeholder reserves the same space when the row isn't bulk-eligible
   (keeps the columns aligned across the list). */
.event-card { grid-template-columns: 28px 70px 1fr 200px; }
.event-bulk-check, .event-bulk-check-placeholder {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
}
.event-bulk-check input { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.event-card.is-bulk-selected {
    background: linear-gradient(180deg, #eef4ff, #fff);
    border-color: #93b5e1;
}

/* ---------- Event series detail page ---------- */
.page-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.page-header-actions { display: flex; gap: .5rem; align-items: center; }

.kpi-card-danger { background: #fef2f2; border-color: #fecaca; }
.kpi-card-danger .kpi-value { color: #b91c1c; }

.series-status-active { background: #dcfce7; color: #166534; }
.series-status-cancelled { background: #fee2e2; color: #991b1b; }

.chip-link { background: #e0ecff; color: var(--brand-navy); text-decoration: none; transition: background-color .15s; }
.chip-link:hover { background: #c8dcff; }

/* ---------- Cohorts mini-block on PersonProfilePage ---------- */
.cohort-list { display: flex; flex-direction: column; gap: .5rem; }
.cohort-card {
    display: grid;
    grid-template-columns: 60px 1fr 28px;
    gap: .85rem;
    align-items: center;
    padding: .65rem .85rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background-color .12s, border-color .12s;
}
.cohort-card:hover { background: var(--brand-navy-50); border-color: #93b5e1; }
.cohort-progress { text-align: center; padding: .35rem 0; background: var(--brand-navy-50); border-radius: 6px; }
.cohort-progress-num { font-weight: 700; color: var(--brand-navy); font-size: 1.05rem; }
.cohort-progress-label { font-size: .7rem; color: var(--text-muted); }
/* Middle cell of the .cohort-card grid, holding the title and the meta line. Same min-width:0
   as .impact-recent-body: without it a long session title widens the 1fr column and squeezes
   the progress square and the arrow either side of it. */
.cohort-body  { min-width: 0; }
.cohort-title { font-weight: 600; margin-bottom: .15rem; }
.cohort-meta { font-size: .82rem; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.cohort-arrow { color: var(--text-muted); font-size: 1.2rem; text-align: center; }

/* Soft-delete button uses btn-link-danger for visual distinction from Cancel. */
.btn-link-danger { color: var(--color-danger); }
.btn-link-danger:hover { background: rgba(220, 38, 38, .08); }

/* ---------- Session roster page ---------- */
.roster-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.roster-row {
    display: grid;
    grid-template-columns: 28px 1fr 220px 80px;
    gap: .85rem;
    align-items: center;
    padding: .55rem .85rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    border-left: 3px solid var(--brand-navy);
}
.roster-row.is-bulk-selected {
    background: linear-gradient(180deg, #eef4ff, #fff);
    border-color: #93b5e1;
    border-left-color: var(--brand-navy);
}
.roster-person { font-weight: 500; }
.roster-person a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border-subtle); }
.roster-person a:hover { color: var(--brand-navy); border-bottom-style: solid; }
.roster-status { display: flex; gap: .35rem; flex-wrap: wrap; }
.roster-actions { text-align: right; }

/* ---------- Outcomes (PersonProfilePage) ---------- */
.outcome-list      { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.outcome-card      { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; align-items: start; padding: .9rem 1rem; background: #fff; border: 1px solid var(--border-subtle); border-left: 4px solid var(--brand-navy); border-radius: 10px; transition: box-shadow .12s, transform .12s; }
.outcome-card:hover{ box-shadow: 0 4px 14px rgba(20, 35, 60, .08); transform: translateY(-1px); }
.outcome-icon      { font-size: 2rem; line-height: 1; text-align: center; }
/* Second cell of the .outcome-card grid - everything except the icon. */
.outcome-body      { min-width: 0; }
.outcome-head      { display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap; margin-bottom: .25rem; }
.outcome-type      { font-weight: 700; color: var(--brand-navy); text-transform: uppercase; letter-spacing: .03em; font-size: .8rem; }
.outcome-date      { font-size: .85rem; }
.outcome-desc      { color: var(--text-primary); line-height: 1.45; margin-bottom: .25rem; }
.outcome-meta      { font-size: .75rem; }
/* Category accent colors */
.outcome-employment           { border-left-color: #16a34a; }
.outcome-housing              { border-left-color: #2563eb; }
.outcome-education            { border-left-color: #7c3aed; }
.outcome-certification        { border-left-color: #db2777; }
.outcome-reunification        { border-left-color: #ea580c; }
.outcome-sobriety             { border-left-color: #059669; }
.outcome-financialmilestone   { border-left-color: #ca8a04; }
.outcome-healthcareenrollment { border-left-color: #0891b2; }
.outcome-benefitsapproval     { border-left-color: #4f46e5; }
.outcome-other                { border-left-color: var(--brand-navy); }
@media (max-width: 540px) { .outcome-card { grid-template-columns: 44px 1fr; padding: .75rem; } .outcome-icon { font-size: 1.5rem; } }


/* ---------- Dashboard impact panel (Outcomes) ---------- */
.impact-stats         { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.impact-stat          { background: linear-gradient(135deg, var(--brand-navy-50, #f0f4ff), #fff); border: 1px solid var(--border-subtle); border-radius: 10px; padding: .9rem 1rem; text-align: center; }
.impact-stat-hero     { background: linear-gradient(135deg, var(--brand-green-50, #dcfce7), #fff); border-left: 4px solid var(--brand-green, #16a34a); }
.impact-stat-value    { font-size: 2.25rem; font-weight: 800; color: var(--brand-navy); line-height: 1; }
.impact-stat-hero .impact-stat-value { color: var(--brand-green-700, #15803d); }
.impact-stat-label    { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-top: .35rem; }
.impact-chip-row      { display: flex; flex-wrap: wrap; gap: .4rem; }
.impact-chip          { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem .25rem .25rem; background: #f8fafc; border: 1px solid var(--border-subtle); border-radius: 999px; font-size: .8rem; }
.impact-chip-count    { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--brand-navy); color: #fff; font-weight: 700; font-size: .75rem; padding: 0 .35rem; }
/* The outcome type beside the count. Kept off one word per line: "Financial milestone" in a
   wrapping chip row would otherwise break and make the chip twice as tall as its neighbours. */
.impact-chip-label    { white-space: nowrap; }
.impact-chip-employment .impact-chip-count           { background: #16a34a; }
.impact-chip-housing .impact-chip-count              { background: #2563eb; }
.impact-chip-education .impact-chip-count            { background: #7c3aed; }
.impact-chip-certification .impact-chip-count        { background: #db2777; }
.impact-chip-reunification .impact-chip-count        { background: #ea580c; }
.impact-chip-sobriety .impact-chip-count             { background: #059669; }
.impact-chip-financialmilestone .impact-chip-count   { background: #ca8a04; }
.impact-chip-healthcareenrollment .impact-chip-count { background: #0891b2; }
.impact-chip-benefitsapproval .impact-chip-count     { background: #4f46e5; }
.impact-recent-list   { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.impact-recent        { display: grid; grid-template-columns: 24px 1fr auto; gap: .5rem; align-items: center; padding: .35rem 0; border-bottom: 1px dashed var(--border-subtle); font-size: .85rem; }
.impact-recent:last-child { border-bottom: none; }
.impact-recent-icon   { font-size: 1rem; text-align: center; }
/* The growing middle cell of the .impact-recent grid: the link plus the description, or on the
   person page the alert title plus its detail. min-width:0 is the load-bearing part - a grid
   1fr will not shrink below its content, so a long description pushed the date out of the row
   rather than wrapping. The person alert list is where that shows, because a detail sentence is
   longer than a dashboard outcome label. */
.impact-recent-body   { min-width: 0; }
.impact-recent-link   { font-weight: 600; color: var(--brand-navy); text-decoration: none; }
.impact-recent-link:hover { text-decoration: underline; }
.impact-recent-date   { font-size: .75rem; white-space: nowrap; }
/* The 24px first column is sized for a single-glyph icon. Rows that lead with a
   severity pill instead need it to size to the label, or "Critical" runs under
   the title. */
.impact-recent-pill   { grid-template-columns: auto 1fr auto; }
.impact-recent-pill .status-pill { white-space: nowrap; }


/* ---------- Cohort tags (Phase-3) ---------- */
.tag-filter-bar    { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding: .5rem .75rem; margin: .5rem 0 1rem; background: #f8fafc; border: 1px solid var(--border-subtle); border-radius: 8px; }
.tag-filter-label  { font-size: .8rem; margin-right: .35rem; }
.tag-chip          { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem .25rem .35rem; background: #fff; border: 1px solid var(--border-subtle); border-radius: 999px; font-size: .8rem; cursor: pointer; transition: background .12s, border-color .12s; color: var(--text-primary); }
.tag-chip:hover    { background: var(--brand-navy-50, #f0f4ff); border-color: var(--brand-navy); }
.tag-chip-active   { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
.tag-chip-active .tag-chip-count { background: rgba(255,255,255,.25); color: #fff; }
.tag-chip-count    { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--brand-navy-50, #f0f4ff); color: var(--brand-navy); font-size: .7rem; font-weight: 700; }
.row-tag-list      { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.tag-chip-row      { display: inline-block; padding: .1rem .55rem; background: #f1f5f9; color: var(--brand-navy); font-size: .7rem; font-weight: 600; border-radius: 999px; text-transform: lowercase; letter-spacing: .02em; }
/* PersonProfilePage tag editor */
.tag-editor        { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem 0; min-height: 2rem; align-items: center; }
.tag-chip-editable { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .35rem .25rem .65rem; background: var(--brand-navy-50, #f0f4ff); color: var(--brand-navy); border-radius: 999px; font-size: .85rem; font-weight: 600; }
.tag-chip-remove   { background: transparent; border: none; color: var(--brand-navy); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .25rem; opacity: .7; }
.tag-chip-remove:hover { opacity: 1; color: #dc2626; }
.tag-chip-remove:disabled { opacity: .35; cursor: not-allowed; }
.tag-add-row       { display: flex; gap: .5rem; margin-top: .65rem; }
.tag-input         { flex: 1; max-width: 360px; }

/* ===================== Reporting Dashboard (visual redesign) =====================
   Self-contained .rpt-* block. Reuses existing tokens / .section-card / .kpi-card-*.
   All charts are hand-rolled inline SVG + CSS gradients (no chart libs / CDNs). */

/* app-bar */
.rpt-appbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; flex-wrap: wrap; }
.rpt-appbar-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.rpt-logo { flex: none; }
.rpt-brand-word { font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; color: var(--brand-navy); }
.rpt-appbar-divider { width: 1px; height: 28px; background: var(--border-subtle); }
.rpt-appbar-title { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); }
.rpt-appbar-actions { display: flex; align-items: center; gap: 1rem; color: var(--text-secondary); }
.rpt-appbar-settings { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; }
.rpt-appbar-gear { color: var(--text-muted); }

/* filter bar */
.rpt-filterbar { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; background: #f7f9ff; }
.rpt-filter-field { display: flex; flex-direction: column; gap: .35rem; }
.rpt-filter-field label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.rpt-apply-btn { background: var(--brand-green); color: #fff; font-weight: 700; letter-spacing: .04em; padding: .6rem 1.25rem; align-self: flex-end; }
.rpt-apply-btn:hover { background: var(--brand-green-600); }
.rpt-apply-btn:disabled { opacity: .65; }

/* KPI row tweaks (cards themselves reuse .card-grid-hero + .kpi-card-*) */
.rpt-kpi-row { margin-bottom: .5rem; }
.rpt-kpi-ring-card { display: flex; align-items: center; gap: 1rem; }
.rpt-ring { flex: none; }
.rpt-ring-text { font-size: 11px; font-weight: 800; fill: var(--brand-green-600); }
.rpt-ring-meta .kpi-value { font-size: 1.6rem; }

.rpt-substat { margin: 0 0 1.5rem; padding: .75rem 1rem; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); font-size: .9rem; color: var(--text-secondary); display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.rpt-substat strong { color: var(--brand-navy); }
.rpt-substat-sep { color: var(--border-subtle); font-weight: 700; }

.rpt-card-title { margin: 0; font-size: 1.05rem; color: var(--brand-navy); font-weight: 700; }

/* recent-activity feed (real cross-aggregate feed) */
.rpt-feed { display: flex; flex-direction: column; gap: .15rem; }
.rpt-feed-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .25rem; border-bottom: 1px dashed var(--border-subtle); }
.rpt-feed-row:last-child { border-bottom: none; }
.rpt-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-navy), var(--brand-green-600)); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.rpt-feed-main { display: flex; flex-direction: column; min-width: 0; }
.rpt-feed-name { font-weight: 600; font-size: .85rem; color: var(--text-primary); }
.rpt-feed-action { font-size: .78rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-feed-time { margin-left: auto; font-size: .7rem; color: var(--text-muted); white-space: nowrap; }

/* live-data divider */
.rpt-live-divider { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 1.5rem; }
.rpt-live-divider::before, .rpt-live-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.rpt-live-divider-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* ===== Client-mockup parity: bigger app-bar title, county filter ===== */
.rpt-appbar-title { font-size: 1.5rem; letter-spacing: -.01em; }
.rpt-filter-county { min-width: 240px; }
.rpt-filter-county .form-input { font-weight: 600; }

/* ===== KPI row (white cards, colored icons, donut) ===== */
.rpt-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: .75rem; align-items: stretch; }
.rpt-kpi {
    display: flex; align-items: center; gap: .9rem;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--brand-green);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.1rem 1.2rem;
}
.rpt-kpi-icon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.rpt-kpi-icon svg { width: 26px; height: 26px; }
.rpt-kpi-icon-blue { background: #e8f0fb; color: #2f6fb3; }
.rpt-kpi-icon-green { background: var(--brand-green-50); color: var(--brand-green-600); }
.rpt-kpi-body { min-width: 0; }
.rpt-kpi-value { font-size: 2rem; font-weight: 800; line-height: 1.05; color: var(--brand-navy); letter-spacing: -.01em; }
.rpt-kpi-value-sub { font-size: .85rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0; }
.rpt-kpi-label { font-size: .82rem; font-weight: 600; color: var(--text-secondary); margin-top: .15rem; }
.rpt-kpi-ringcard { gap: 1rem; }
.rpt-kpi-ring { flex: none; }
/* Topic accent: this card's icon is the blue tone, so its top edge matches rather than
   staying the family's default green. Same idea as .rpt-kpi-icon-blue, one level out. */
.rpt-kpi-people { border-top-color: #2f6fb3; }
.rpt-ring-pct { font-size: 9px; font-weight: 800; fill: var(--brand-navy); }
.rpt-ring-cap { font-size: 4.6px; font-weight: 700; letter-spacing: .04em; fill: var(--text-muted); text-transform: uppercase; }

/* ===== Two-column data-viz grid ===== */
.rpt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; align-items: start; }
.rpt-grid-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.rpt-viz-card { margin-bottom: 0; }
.rpt-card-title-sm { font-size: .95rem; }
.rpt-scope { color: var(--brand-green-600); }
/* Heading for one block WITHIN a report card, below .rpt-card-title: "Overall retention",
   "Risk band distribution". Always carries .muted too, so this sets only the scale and the
   spacing that separates it from the figures underneath. */
.rpt-subhead { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 1.25rem 0 .6rem; }
.rpt-subhead:first-child { margin-top: 0; }
/* When it is the heading of a .section-header rather than a run of blocks, the header owns the
   spacing below it and the subhead must not add its own. */
.section-header .rpt-subhead { margin: 0; }
@media (max-width: 980px) { .rpt-grid { grid-template-columns: 1fr; } }

/* ===== AI reporting assistant (ReportAiAssistant) =====
   The panel's own two blocks. Everything else in it is .toolbar / .form-row / .form-field. */

/* The translate action is secondary to the two report buttons above it, so it is folded into a
   <details>. The summary is the only clickable text in the card that is not a button. */
.rpt-ai-translate { margin: .5rem 0; }
.rpt-ai-translate > summary { cursor: pointer; font-size: .85rem; color: var(--text-muted); padding: .25rem 0; }
.rpt-ai-translate > summary:hover { color: var(--brand-navy); }
.rpt-ai-translate[open] > summary { margin-bottom: .5rem; }

/* The result: a labelled, editable draft. Separated from the controls that produced it, because
   the whole contract of this panel is that the draft is a draft until a human saves it. */
.rpt-ai-draft { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.rpt-ai-draft .form-hint { margin-top: .35rem; }

/* ===== Facility completion bar chart ===== */
.rpt-barchart { display: grid; grid-template-columns: 34px 1fr; gap: .5rem; margin-top: 1rem; padding-bottom: 38px; }
.rpt-bar-axis { display: flex; flex-direction: column; justify-content: space-between; height: 210px; font-size: .68rem; color: var(--text-muted); text-align: right; }
.rpt-bar-plot { position: relative; height: 210px; }
.rpt-bar-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.rpt-bar-grid span { height: 1px; background: var(--border-subtle); opacity: .7; }
.rpt-bar-avg { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--brand-green-600); }
.rpt-bar-avg-label { position: absolute; right: 0; top: -9px; background: var(--brand-green-50); color: var(--brand-green-600); font-size: .64rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.rpt-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; gap: .4rem; padding: 0 .25rem; }
.rpt-bar-col { position: relative; flex: 1; max-width: 84px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.rpt-bar-val { font-size: .78rem; font-weight: 800; color: var(--brand-navy); margin-bottom: 5px; }
.rpt-bar { width: 66%; max-width: 54px; min-height: 3px; border-radius: 7px 7px 2px 2px; transition: height .5s cubic-bezier(.22,1,.36,1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.rpt-bar-0 { background: linear-gradient(180deg, #2c5d92, var(--brand-navy)); }
.rpt-bar-1 { background: linear-gradient(180deg, #4f86bf, #356193); }
.rpt-bar-2 { background: linear-gradient(180deg, #2f9f93, #1f7d72); }
.rpt-bar-3 { background: linear-gradient(180deg, var(--brand-green), var(--brand-green-600)); }
.rpt-bar-name { position: absolute; top: 100%; left: -8px; right: -8px; padding-top: 7px; text-align: center; font-size: .66rem; line-height: 1.15; color: var(--text-secondary); }
.rpt-axis-title { font-size: .7rem; color: var(--text-muted); text-align: center; margin-top: .25rem; }
.rpt-chart-empty { margin-top: 1rem; }

/* ===== Post-release mini-stats ===== */
.rpt-ministats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1rem 0; }
.rpt-ministat { background: #f7f9ff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: .85rem .75rem; text-align: center; }
.rpt-ministat-val { font-size: 1.5rem; font-weight: 800; color: var(--brand-navy); line-height: 1; }
.rpt-ministat-lbl { font-size: .72rem; color: var(--text-secondary); margin-top: .35rem; line-height: 1.2; }

/* ===== CSV buttons ===== */
.rpt-csv-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--brand-green); color: #fff; font-weight: 700; letter-spacing: .03em; font-size: .8rem; padding: .55rem 1.1rem; border-radius: 8px; text-decoration: none; }
.rpt-csv-btn:hover { background: var(--brand-green-600); color: #fff; text-decoration: none; }
.rpt-csv-btn-inline { margin-left: auto; padding: .4rem .85rem; font-size: .72rem; }

/* ===== Participant milestones funnel ===== */
.rpt-milestones { display: flex; align-items: stretch; gap: .35rem; margin: 1rem 0 .5rem; }
.rpt-ms { flex: 1; min-width: 0; background: #f7f9ff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: .85rem .5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.rpt-ms-icon { width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid var(--border-subtle); display: grid; place-items: center; color: var(--brand-navy); margin-bottom: .1rem; }
.rpt-ms-icon svg { width: 19px; height: 19px; }
.rpt-ms-title { font-size: .76rem; font-weight: 700; color: var(--text-primary); }
.rpt-ms-pct { font-size: 1.15rem; font-weight: 800; color: var(--brand-green-600); line-height: 1.1; }
.rpt-ms-sub { font-size: .66rem; color: var(--text-muted); line-height: 1.15; }
.rpt-ms-arrow { flex: none; display: flex; align-items: center; color: var(--brand-green); align-self: center; }
.rpt-ms-arrow svg { width: 18px; height: 18px; }
.rpt-milestone-foot { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; font-size: .85rem; color: var(--text-secondary); padding-top: .75rem; border-top: 1px solid var(--border-subtle); }
.rpt-milestone-foot strong { color: var(--brand-navy); }

/* ===== Engagement: activity trend + recent participants ===== */
.rpt-engage { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-top: .75rem; }
.rpt-trend { min-width: 0; }
.rpt-trend-cap { font-size: .76rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .35rem; }
.rpt-trend-svg { width: 100%; height: 96px; display: block; overflow: visible; }
.rpt-trend-area { fill: var(--brand-green-50); opacity: .7; }
.rpt-trend-line { fill: none; stroke: var(--brand-green); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rpt-trend-dot { fill: var(--brand-green-600); }
.rpt-trend-axis { display: flex; justify-content: space-between; font-size: .62rem; color: var(--text-muted); margin-top: .25rem; }
.rpt-people { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.rpt-person { display: flex; align-items: center; gap: .5rem; }
.rpt-person-name { font-size: .8rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-person-time { margin-left: auto; font-size: .66rem; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 560px) { .rpt-engage { grid-template-columns: 1fr; } .rpt-ministats { grid-template-columns: 1fr; } }

/* --- ASCEND-GEO-006 referral routing suggestions + GEO-007 county-scope admin --- */
.routing-suggest { margin: .5rem 0 .75rem; display: flex; flex-direction: column; gap: .4rem; }
.routing-list { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.routing-item { border: 1px solid var(--border, #e2e8f0); border-radius: .5rem; padding: .5rem .65rem; }
.routing-item-chosen { border-color: var(--brand-green, #2f855a); box-shadow: 0 0 0 1px var(--brand-green, #2f855a); }
.routing-item-main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.routing-score { margin-left: auto; font-weight: 700; font-size: .78rem; color: var(--brand-green-600, #276749); }
.routing-reasons { font-size: .74rem; margin: .2rem 0; }
.county-scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .35rem .75rem; margin: .5rem 0 .75rem; }
.county-checkbox { display: flex; align-items: center; gap: .45rem; font-size: .82rem; }

/* ===================== ASCEND-CORE-002: person-workspace tab shell ===================== */
/* Hidden pane: a section assigned to an inactive tab. Kept in the DOM but removed
   from layout + the accessibility tree (display:none) so tab switching is instant
   and no cross-tab content leaks to screen readers. */
.ps-hidden { display: none !important; }

.ps-workspace-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 1.25rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--border-subtle, #e2e8f0);
}
.ps-workspace-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: .6rem .6rem 0 0;
    background: transparent;
    color: var(--text-muted, #4a5568);
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ps-workspace-tab:hover { background: var(--bg-subtle, #f1f5f9); color: var(--brand-navy, #1a365d); }
.ps-workspace-tab:focus-visible { outline: 2px solid var(--brand-green, #2f855a); outline-offset: 2px; }
.ps-workspace-tab-active {
    background: var(--bg-card, #fff);
    color: var(--brand-green-600, #276749);
    border-color: var(--border-subtle, #e2e8f0);
    box-shadow: 0 -2px 0 var(--brand-green, #2f855a) inset;
}
.ps-workspace-tab-icon { font-size: 1rem; line-height: 1; }

/* ASCEND-CORE-003: aggregated-timeline source filter chips */
.ps-agg-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .75rem; }
.ps-agg-filter { cursor: pointer; border: 1px solid var(--border-subtle, #e2e8f0); background: transparent; }
.ps-agg-filter:focus-visible { outline: 2px solid var(--brand-green, #2f855a); outline-offset: 2px; }
.ps-agg-filter-active {
    background: var(--brand-green, #2f855a);
    color: #fff;
    border-color: var(--brand-green, #2f855a);
}

/* South Street Target-B list resilience. */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}
.toolbar {
    flex-wrap: wrap;
}
.toolbar > .form-input {
    min-width: 10rem;
    flex: 1 1 10rem;
}
@media (max-width: 48rem) {
    .toolbar {
        align-items: stretch;
    }
    .toolbar > * {
        width: 100%;
    }
}


/* ------------------------------------------------------------------------------------------------
   Summary figures

   Eleven pages open with a row of these - gifts received this year, unread replies, hours logged this
   month - and none of the four class names had a rule anywhere, so every one of them rendered as
   plain stacked text above the page's first card. Loading the app in a browser is what found it;
   nothing about the markup looks wrong when you read it.

   Deliberately quiet. A figure is context for the work below it, not the point of the page, so this
   borrows the card's surface and restraint rather than competing with it.
   ------------------------------------------------------------------------------------------------ */

.stat-grid {
    display: grid;
    /* Wraps on its own down to a phone. The counts are short, so a narrow floor is honest. */
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: .85rem 1rem;
    box-shadow: var(--shadow-card);
}

.stat-label {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.stat-value {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.15;
    /* Figures that change - a running total, a count that ticks up - should not shift the ones
       beside them as digits come and go. */
    font-variant-numeric: tabular-nums;
}

/* A figure that is a caveat rather than a result: refunded gifts, messages already read. */
.stat-card.stat-muted .stat-value { color: var(--text-secondary); font-weight: 600; }

/* A figure that is bad news while it is non-zero - a person's open barriers. Colour only; the
   card keeps the family's restraint, because the alarm is the number, not the box round it. */
.stat-card.stat-alarm .stat-value { color: var(--color-danger); }

/* ------------------------------------------------------------------------------------------------
   Records

   The list-of-things vocabulary: eight person-workspace sections, the transitional-housing page and
   five finance pages all build their lists out of these names, and not one of them had a rule. With
   an empty list the pages looked finished, which is why it survived - a bulleted <ul> with nothing
   in it is indistinguishable from a styled one. With records in it the damage is plain: browser
   bullets, an indent, and metadata spans butted together so "5:30 PM" and "Quantity: 2" read as one
   word.

   .record-card is a wrapping flex row, because the markup uses it two ways: a .record-main group
   with action buttons beside it, and a stack of .record-row / .record-meta / .record-actions. The
   full-width basis on the block children is what lets both shapes come out of one rule.
   ------------------------------------------------------------------------------------------------ */

.record-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.record-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem .75rem;
    padding: .7rem .9rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    /* Same left-edge marker as .timeline-card and .referral-history-block, so a record reads as
       one of the app's list items rather than a new kind of object. */
    border-left: 3px solid var(--brand-green);
    border-radius: 8px;
}

/* The identifying group - title, subtitle, chips, state pill - laid out along one line and allowed
   to wrap. Grows so any actions beside it are pushed to the far edge. */
.record-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Children that are their own row rather than part of the identifying line. Without this they
   would try to share the line with .record-main. `p` covers the loose prose some cards carry. */
.record-row,
.record-meta,
.record-actions,
.record-card > p {
    flex: 1 1 100%;
}

/* Title left, status marker right. */
.record-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.record-title { font-weight: 600; color: var(--text-primary); }

/* The qualifying second phrase: a job title under an employer, an address under a housing type, a
   funder's reference number under the funder. Sixteen files lean on this and it is the single
   difference between "Columbus Foundation CF-2026-THS-882" and the two running together. */
.record-sub { color: var(--text-secondary); font-size: .85rem; }

/* When it is on its own line rather than trailing the title, it should not sit tight under it. */
.record-card > .record-sub { margin-top: .1rem; }

/* In a table cell it follows the cell's own text - a payer name, a vendor - and the markup puts no
   separator between them, because it was written expecting the sub to be its own line. Inline, it
   ran straight on: the board report a treasurer hands to a board read "Marta Reyesno. 1042".
   Scoped to the span, because two pages put this class on the td itself and turning a cell into a
   block takes the row apart. */
td > span.record-sub { display: block; }

/* Small facts about the record - when, how many, by whom - as separated items rather than one run
   of text. The gap is the whole point. */
.record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    color: var(--text-muted);
    font-size: .8rem;
}

.record-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    /* Reads as a footer to the record above it once there is more than the identifying line. */
    padding-top: .15rem;
}

/* A labelled block inside a section card, for a section that holds several lists (Employment,
   Housing and Education in one card) and needs them told apart. */
.records-subsection { margin-bottom: 1.25rem; }
.records-subsection:last-child { margin-bottom: 0; }

.records-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--border-subtle);
}
.records-subhead h3 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--brand-navy); }

/* ------------------------------------------------------------------------------------------------
   Readiness score

   The release-readiness block on the reentry and release-plan sections, and the bed-map totals on
   the transitional-housing page. A score, the band it falls in, and the components it was computed
   from. Sits inside a section card, so it is a recessed panel rather than another card.
   ------------------------------------------------------------------------------------------------ */

.readiness-card {
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, var(--brand-navy-50), #fff);
    border: 1px solid #cdd9eb;
    border-radius: 10px;
}

.readiness-gauge {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
}

/* The score itself. Tabular so a two-digit score and a three-digit one occupy the same width and
   the band chip beside it does not jump. */
.readiness-overall {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-navy);
    font-variant-numeric: tabular-nums;
}

/* Already a .chip; this only stops the chip's inline left margin from opening a gap after the
   score and lifts it onto the number's baseline. */
.readiness-band { margin-left: .25rem; align-self: center; }

.readiness-components {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .6rem;
    margin-top: .9rem;
}

.readiness-component {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    padding: .55rem .7rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}
/* The component's detail sentence takes the whole second line rather than trailing the chip. */
.readiness-component .record-sub { flex: 1 1 100%; }

/* "Computed 5 Aug 2026, 14:02" - provenance, not a result. Carries .record-sub for its colour. */
.readiness-meta {
    margin-top: .8rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--border-subtle);
}