html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ===================== Responder HQ brand ===================== */

/* Self-hosted condensed brand face. Bahnschrift only exists on Windows (and 'Arial
   Narrow' only on some desktops), so without this the brand typography silently
   degrades to a generic sans on iOS/Android — including the Capacitor app. */
@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/barlow-semicondensed-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/barlow-semicondensed-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/barlow-semicondensed-700.woff2') format('woff2');
}

:root {
    --ffhq-ink: #20242A;
    --ffhq-muted: #67635A;
    --ffhq-paper: #F4F3EE;
    --ffhq-line: #E3E1D8;
    --ffhq-navy: #274060;
    --ffhq-navy-deep: #1B2C42;
    --ffhq-red: #B7202A;
    --ffhq-ok: #2F7D51;
    --ffhq-crit: #C23B2B;
    /* Status palette (chips, alerts, severity rails) */
    --ffhq-ok-bg: #E7F2EB;
    --ffhq-warn: #B97A0F;
    --ffhq-warn-bg: #F9EFDC;
    --ffhq-crit-bg: #F9E7E4;
    --ffhq-info: #3B6EA5;
    --ffhq-info-bg: #E8F0F9;
    /* Condensed brand face — one var so every module renders the same on every OS. */
    --ffhq-cond: 'Barlow Semi Condensed', Bahnschrift, 'Franklin Gothic Medium', 'Arial Narrow', sans-serif;
}

/* ---- Auth screens (login / 2FA / register / join) ---- */
.auth-stage {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 20px;
    background: radial-gradient(1100px 500px at 50% -10%, #24385A 0%, transparent 60%), var(--ffhq-navy-deep);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.auth-panel { width: 100%; max-width: 430px; }
.auth-card-wide + .auth-under, .auth-panel:has(.auth-card-wide) { max-width: 560px; }
.auth-panel:has(.auth-card-legal) { max-width: 860px; }

/* Legal documents (Terms, Privacy, DPA) — long-form readable content in the auth card. */
.auth-card-legal { padding: 40px 46px 36px; text-align: left; }
.legal-title { font-family: var(--ffhq-cond); font-size: 26px; font-weight: 600; letter-spacing: .02em; color: var(--ffhq-ink); margin: 6px 0 4px; }
.legal-meta { color: var(--ffhq-muted); font-size: 12.5px; margin: 0 0 6px; }
.legal-meta span { margin-right: 14px; }
.legal-lead { color: var(--ffhq-ink); font-size: 14px; line-height: 1.65; margin: 14px 0 8px; }
.legal-body { color: var(--ffhq-ink); font-size: 14px; line-height: 1.7; }
.legal-body h2 { font-family: var(--ffhq-cond); font-size: 17px; font-weight: 600; letter-spacing: .02em; color: var(--ffhq-navy); margin: 28px 0 8px; padding-top: 14px; border-top: 1px solid var(--ffhq-line); }
.legal-body h3 { font-size: 14.5px; font-weight: 700; color: var(--ffhq-ink); margin: 16px 0 6px; }
.legal-body p { margin: 0 0 10px; }
.legal-body ul { margin: 0 0 12px; padding-left: 22px; }
.legal-body li { margin: 0 0 6px; }
.legal-body a { color: var(--ffhq-navy); font-weight: 600; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13px; }
.legal-body th, .legal-body td { border: 1px solid var(--ffhq-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-body th { background: var(--ffhq-wash, #F4F2EC); font-weight: 600; }
.legal-back { display: block; text-align: center; margin-top: 26px; font-size: 13px; }

.auth-card {
    background: #fff;
    border-radius: 16px;
    border-top: 5px solid var(--ffhq-red);
    box-shadow: 0 24px 60px rgba(10, 16, 26, .45);
    padding: 34px 36px 30px;
    color: var(--ffhq-ink);
}

.auth-logo { display: block; width: 100%; max-width: 340px; margin: 0 auto 6px; }
.auth-welcome { text-align: center; color: var(--ffhq-muted); font-size: 14px; margin: 2px 0 22px; font-weight: 600; }
.auth-note { color: var(--ffhq-muted); font-size: 13.5px; margin-bottom: 18px; }

.auth-label {
    display: block;
    font-family: var(--ffhq-cond);
    font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ffhq-muted); margin: 14px 0 6px;
}

.auth-input {
    width: 100%; border: 1.5px solid var(--ffhq-line); border-radius: 10px;
    padding: 11px 14px; font-size: 14.5px; font-family: inherit;
    color: var(--ffhq-ink); background: #FDFDFB;
}
.auth-input:focus { outline: 2px solid var(--ffhq-navy); border-color: var(--ffhq-navy); }
.auth-code { font-size: 20px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

.auth-row { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 18px; font-size: 13px; }
.auth-row a { color: var(--ffhq-navy); text-decoration: none; font-weight: 600; }
.auth-row a:hover { text-decoration: underline; }
.auth-check { display: flex; align-items: center; gap: 7px; margin: 0; }
.auth-check input { width: 15px; height: 15px; accent-color: var(--ffhq-navy); }

.auth-btn {
    display: block; width: 100%; background: var(--ffhq-navy); color: #fff;
    border: none; border-radius: 10px; padding: 13px;
    font-family: var(--ffhq-cond);
    font-size: 15px; font-weight: 600; letter-spacing: .06em; cursor: pointer;
}
.auth-btn:hover { background: #1E3450; }
.auth-btn:focus-visible { outline: 2px solid var(--ffhq-red); outline-offset: 2px; }

.auth-divide {
    display: flex; align-items: center; gap: 12px; color: #A6A296;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
    margin: 22px 0 12px; font-family: var(--ffhq-cond);
}
.auth-divide::before, .auth-divide::after { content: ""; flex: 1; height: 1px; background: var(--ffhq-line); }

.auth-invite { text-align: center; font-size: 13px; color: var(--ffhq-muted); }
.auth-invite a { color: var(--ffhq-red); font-weight: 600; text-decoration: none; }
.auth-invite a:hover { text-decoration: underline; }

.auth-under { color: #7E8BA0; text-align: center; font-size: 12px; margin-top: 18px; line-height: 1.7; }
.auth-under a { color: #9AA6B8; text-decoration: none; }
.auth-under a:hover { color: #C7D0DE; text-decoration: underline; }
.auth-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.auth-mfahead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.auth-mfahead img { width: 44px; height: 44px; }
.auth-mfahead .t { font-family: var(--ffhq-cond); font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.auth-mfahead .s { font-size: 12.5px; color: var(--ffhq-muted); }

/* ---- App shell ---- */
.ffhq-shell { display: flex; min-height: 100vh; background: var(--ffhq-paper); font-family: 'Segoe UI', system-ui, sans-serif; color: var(--ffhq-ink); }

.ffhq-sidebar { width: 216px; background: var(--ffhq-navy-deep); color: #B9C2CE; flex-shrink: 0; display: flex; flex-direction: column; }
.ffhq-logo { padding: 16px 14px 14px; border-bottom: 1px solid #2B3E58; }
.ffhq-logo img { width: 100%; border-radius: 8px; background: #fff; display: block; padding: 4px; }
.ffhq-dept { font-size: 11.5px; color: #7E8BA0; margin-top: 7px; }

.ffhq-nav { padding: 12px 0; flex: 1; display: flex; flex-direction: column; }
.ffhq-nav a {
    display: flex; align-items: center; gap: 11px; padding: 9px 18px; color: #B9C2CE; text-decoration: none;
    font-family: var(--ffhq-cond); font-size: 14px; letter-spacing: .04em;
    border-left: 3px solid transparent;
    transition: background-color .12s ease, color .12s ease;
}
.ffhq-nav a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .7; }
.ffhq-nav a:hover { background: #22344E; color: #fff; }
.ffhq-nav a.active { background: #22344E; color: #fff; border-left-color: var(--ffhq-red); }
.ffhq-nav a:hover svg, .ffhq-nav a.active svg { opacity: 1; }

.ffhq-userchip { padding: 14px 18px; border-bottom: 1px solid #2B3E58; font-size: 12.5px; color: #8E99A8; }
.ffhq-userchip b { display: block; color: #DDE3EA; }
.ffhq-userlinks { display: flex; gap: 12px; margin-top: 4px; align-items: center; }
.ffhq-userlinks a { color: #8E99A8; }
.ffhq-linkbtn { background: none; border: none; padding: 0; color: #8E99A8; cursor: pointer; font-size: 12.5px; text-decoration: underline; }

.ffhq-main { flex: 1; padding: 26px 32px 60px; max-width: 1400px; margin-inline: auto; }

.ffhq-pager { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; }
.ffhq-pager-info { font-size: 12.5px; color: var(--ffhq-muted); }

.ffhq-seclinks { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.ffhq-seclinks a { color: var(--ffhq-navy); font-size: 14px; text-decoration: none; }
.ffhq-seclinks a:hover { text-decoration: underline; }

.ffhq-h1 { font-family: var(--ffhq-cond); font-size: 24px; font-weight: 600; letter-spacing: .02em; }
.ffhq-sub { color: var(--ffhq-muted); font-size: 13px; margin: 3px 0 22px; }
.ffhq-muted { color: var(--ffhq-muted); }

.ffhq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.ffhq-kpi { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 10px; padding: 14px 18px; border-top: 4px solid var(--ffhq-navy); }
.ffhq-kpi .n { font-family: var(--ffhq-cond); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ffhq-kpi .l { font-size: 12px; color: var(--ffhq-muted); text-transform: uppercase; letter-spacing: .07em; font-family: var(--ffhq-cond); }
.ffhq-kpi .d { font-size: 12px; color: var(--ffhq-muted); margin-top: 2px; }

.ffhq-card { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 10px; }
.ffhq-card h2 {
    font-family: var(--ffhq-cond); font-size: 15px; font-weight: 600;
    letter-spacing: .05em; padding: 14px 18px; border-bottom: 1px solid var(--ffhq-line); margin: 0;
}
.ffhq-card-body { padding: 16px 18px; }
/* Card heading that carries a real action rather than a secondary link (see .ffhq-card h2 .ffhq-linklike
   below, which floats). Flex so a full button sits centered against the title instead of hanging out of
   the heading's line box, and less vertical padding so the button does not deepen the header. */
.ffhq-card h2.ffhq-h2-action {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 9px; padding-bottom: 9px;
}

.auth-panel { color: #E6E9EE; }
.auth-panel > h1, .auth-panel > h2 { font-family: var(--ffhq-cond); letter-spacing: .03em; }
.auth-panel a { color: #E8C6C9; }
.auth-card a { color: var(--ffhq-navy); }

.ffhq-powered {
    font-size: 9.5px; color: #5F6B7E; text-transform: uppercase; letter-spacing: .09em;
    margin-top: 6px; font-family: var(--ffhq-cond);
}

/* Personnel module */
.ffhq-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ffhq-pagehead .ffhq-sub { margin-bottom: 0; }
.ffhq-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.ffhq-btn {
    display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 8px;
    padding: 10px 18px; font-family: var(--ffhq-cond); font-size: 14px;
    letter-spacing: .04em; cursor: pointer; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.ffhq-btn.primary { background: var(--ffhq-navy); color: #fff; }
.ffhq-btn.primary:hover { background: #1E3450; box-shadow: 0 2px 8px rgba(27, 44, 66, .25); }
.ffhq-btn.ghost { background: #fff; color: var(--ffhq-navy); border: 1px solid var(--ffhq-line); }
.ffhq-btn.ghost:hover { border-color: var(--ffhq-navy); }
.ffhq-btn.danger { background: #fff; color: var(--ffhq-crit); border: 1px solid var(--ffhq-crit); }
.ffhq-btn.danger:hover { background: var(--ffhq-crit-bg); }
.ffhq-btn.tiny { padding: 4px 10px; font-size: 12px; background: #fff; color: var(--ffhq-navy); border: 1px solid var(--ffhq-line); border-radius: 7px; }
.ffhq-btn.tiny:hover { border-color: var(--ffhq-navy); }
.ffhq-btn.sm { padding: 7px 14px; font-size: 13px; }
.ffhq-btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.ffhq-btn:focus-visible { outline: 2px solid var(--ffhq-red); outline-offset: 2px; }

.ffhq-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--ffhq-line); }
.ffhq-tabs button {
    background: none; border: none; cursor: pointer; padding: 9px 16px; color: var(--ffhq-muted);
    font-family: var(--ffhq-cond); font-size: 13.5px; letter-spacing: .04em;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.ffhq-tabs button.active { color: var(--ffhq-navy); border-bottom-color: var(--ffhq-red); font-weight: 600; }

.ffhq-cols { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
@media (max-width: 1050px) { .ffhq-cols { grid-template-columns: 1fr; } }

.ffhq-tblwrap { overflow-x: auto; }
.ffhq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ffhq-table th {
    font-family: var(--ffhq-cond); font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .07em; color: var(--ffhq-muted); text-align: left; padding: 11px 14px;
    border-bottom: 1px solid var(--ffhq-line); font-weight: 600; white-space: nowrap;
}
.ffhq-table td { padding: 10px 14px; border-bottom: 1px solid var(--ffhq-line); vertical-align: middle; white-space: nowrap; }
.ffhq-table tr:last-child td { border-bottom: none; }
.ffhq-table td.num { font-variant-numeric: tabular-nums; }
.ffhq-table tbody tr:hover td { background: #FAFAF7; }
.ffhq-table tr.sel td { background: var(--ffhq-info-bg); }
.ffhq-table td .ffhq-linklike { font-weight: 600; }
.ffhq-empty { color: var(--ffhq-muted); text-align: center; padding: 22px 14px !important; white-space: normal !important; }

/* Long tables keep their column labels while scrolling (desktop only — on phones the
   tables either card-ify or scroll sideways in place, where sticky can't apply). */
@media (min-width: 821px) {
    .ffhq-table th, .ffhq-tbl th { position: sticky; top: 0; background: #fff; z-index: 2; }
}

.ffhq-chip {
    display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
    font-family: var(--ffhq-cond); letter-spacing: .05em; text-transform: uppercase;
    margin-right: 6px;
}
.ffhq-chip.ok { background: var(--ffhq-ok-bg); color: var(--ffhq-ok); }
.ffhq-chip.warn { background: var(--ffhq-warn-bg); color: var(--ffhq-warn); }
.ffhq-chip.crit { background: var(--ffhq-crit-bg); color: var(--ffhq-crit); }
.ffhq-chip.info { background: var(--ffhq-info-bg); color: var(--ffhq-info); }
.ffhq-chip.neutral { background: #EFEEE8; color: var(--ffhq-muted); }

.ffhq-linklike {
    background: none; border: none; padding: 0; cursor: pointer; color: var(--ffhq-navy);
    font: inherit; text-decoration: none;
}
.ffhq-linklike:hover { text-decoration: underline; }
.ffhq-card h2 .ffhq-linklike { float: right; font-size: 13px; font-weight: 600; letter-spacing: 0; }

/* Member drawer */
/* Sticky, and DELIBERATELY WITHOUT a max-height or its own overflow.

   Capping this to the viewport and giving it overflow-y:auto also makes the panel reachable, and was
   tried — but it costs a second scrollbar beside the page's, which is the exact confusion this app
   has already been bitten by on phones. Left to grow, the panel is simply part of the page: one
   scrollbar, everything reachable, and sticky still holds it beside the list for as long as its
   column lasts. The panel running off the bottom was never this rule's doing — it was .ffhq-sheet
   turning the box FIXED on desktop (see .ffhq-modalsheet below). */
.ffhq-drawer { position: sticky; top: 16px; }

/* ---- PROTOTYPE: editing panel as a centred dialog on desktop -----------------
   Opt-in with .ffhq-dialog alongside .ffhq-drawer; only the apparatus page uses it so far.

   This is the deliberate version of what a bug produced by accident last week, when .ffhq-sheet
   leaked its fixed positioning onto desktop. That accident was liked for a real reason — a focused
   panel with the page receding behind it is easier to work in than a 360px rail — but it had no
   backdrop, no close, no Escape, and could not scroll. This has all four.

   min-width:821px, the exact complement of the 820px phone block, so phones are untouched: there
   the panel is already a bottom sheet and this must not reach it.

   inset:0 + margin:auto + height:max-content is the centring trick — it centres on both axes
   without transforms, so no blurred text from half-pixel translation. */
/* The dialog backdrop is desktop-only. On a phone the panel is already a bottom sheet that owns the
   screen with the page locked behind it, so a dim would be a second layer doing nothing. */
.ffhq-dialog-dim { display: none; }

@media (min-width: 821px) {
    .ffhq-dialog-dim { display: block; }

    .ffhq-dialog {
        position: fixed; inset: 0; margin: auto;
        width: min(680px, calc(100vw - 48px));
        height: max-content;
        max-height: min(84vh, 84dvh);
        overflow-y: auto;
        z-index: 41;
        /* Its OWN background. The old .ffhq-sheet rule supplied one and that moved to
           .ffhq-modalsheet, leaving this transparent — the page showed through the gaps between the
           header and the cards inside, so a strip of the roster appeared to float inside the dialog.
           Only visible once a real panel was open on a real list. */
        background: var(--ffhq-paper);
        border-radius: 14px;
        box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
    }

    /* The close button earns its keep here. SheetHeader hides above 820px because a column is
       visible without being opened and needs no dismissal — but a dialog covers the list, so the
       way out has to be on screen. Same component, shown again for the same reason it exists. */
    .ffhq-dialog .ffhq-sheet-head {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 1;
        margin: 0 0 10px; padding: 13px 18px;
        background: var(--ffhq-paper); border-bottom: 1px solid var(--ffhq-line);
        border-radius: 14px 14px 0 0;
    }
    .ffhq-dialog .ffhq-sheet-head .t {
        font-family: var(--ffhq-cond); font-size: 15px; letter-spacing: .04em;
        text-transform: uppercase; color: var(--ffhq-navy);
    }
    .ffhq-dialog .ffhq-sheet-close {
        background: none; border: 0; font-size: 19px; line-height: 1; cursor: pointer;
        color: var(--ffhq-muted); padding: 4px 8px; border-radius: 6px;
    }
    .ffhq-dialog .ffhq-sheet-close:hover { background: var(--ffhq-line); color: var(--ffhq-ink); }

    /* ONE TITLE, NOT TWO. The panels carry their own navy header (.ffhq-dhead) because as a column
       they had no other chrome. In a dialog the sticky bar above already names what you opened and
       holds the close, so the second heading just repeated it — "ENGINE 1 CHECKLIST" sitting on top
       of "MANAGE CHECKLIST · Engine 1 · Weekly". The sticky bar wins: it survives scrolling, which
       is what keeps the close reachable in a long checklist. */
    .ffhq-dialog .ffhq-dhead { display: none; }

    /* Same duplication, different page. EventDetail carries its own title line (.ffhq-evcard .t)
       above the date and location; in a dialog that repeated the sticky header word for word —
       "MONTHLY BUSINESS MEETING" twice, one above the other. Only the title goes: the kicker
       ("MEETING · TUESDAY · REPEATS") and the meta line say things the header does not. */
    .ffhq-dialog .ffhq-evcard > .t { display: none; }
    .ffhq-dialog .ffhq-sheet-close:focus-visible { outline: 2px solid var(--ffhq-navy); outline-offset: 1px; }

    /* The page behind must not scroll under the dialog — the same rule, and the same reasoning, as
       the phone sheet: two scrollbars, and the gesture moves the wrong one. html AND body because
       document.scrollingElement here is HTML. */
    html:has(.ffhq-dialog),
    body:has(.ffhq-dialog) { overflow: hidden; }
}
/* An editing panel opted into phone-sheet behaviour. Inert on desktop, where the panel is a
   column beside the list; see the 820px block for what it becomes. */
.ffhq-sheet-head { display: none; }
.ffhq-drawer-card { overflow: hidden; }
.ffhq-drawer-empty { padding: 26px 20px; color: var(--ffhq-muted); font-size: 13px; }
.ffhq-dhead { background: var(--ffhq-navy-deep); color: #fff; padding: 18px; }
.ffhq-dhead .nm { font-family: var(--ffhq-cond); font-size: 19px; font-weight: 600; letter-spacing: .03em; }
.ffhq-dhead .rk { color: #AEB6C2; font-size: 12.5px; margin-top: 2px; }
.ffhq-dhead .quick { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; color: #AEB6C2; }
.ffhq-dhead .quick b { display: block; color: #fff; font-family: var(--ffhq-cond); font-size: 17px; font-variant-numeric: tabular-nums; }
.ffhq-dsec { padding: 13px 18px; border-bottom: 1px solid var(--ffhq-line); }
.ffhq-dsec:last-child { border-bottom: none; }
.ffhq-dsec h3 {
    font-family: var(--ffhq-cond); font-size: 12px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ffhq-muted); margin: 0 0 8px;
    display: flex; justify-content: space-between; align-items: baseline;
}
.ffhq-dsec h3 .ffhq-linklike { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.ffhq-certrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed #EEEDE6; }
.ffhq-certrow:last-of-type { border-bottom: none; }
.ffhq-certrow .c { font-weight: 600; flex: 1; }
.ffhq-certrow .d { color: var(--ffhq-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ffhq-certrow .ffhq-chip { margin-right: 0; }
.ffhq-xbtn { background: none; border: none; cursor: pointer; color: var(--ffhq-muted); font-size: 15px; line-height: 1; padding: 0 2px; }
.ffhq-xbtn:hover { color: var(--ffhq-crit); }
.ffhq-trow { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--ffhq-muted); }
.ffhq-trow b { color: var(--ffhq-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Forms */
.ffhq-field { display: block; font-size: 12.5px; }
.ffhq-field > span {
    display: block; font-family: var(--ffhq-cond); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ffhq-muted); margin-bottom: 4px;
}
.ffhq-field > span .ffhq-linklike { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.ffhq-input {
    width: 100%; border: 1.5px solid var(--ffhq-line); border-radius: 8px; padding: 8px 10px;
    font: inherit; font-size: 13.5px; color: var(--ffhq-ink); background: #FDFDFB;
}
.ffhq-input:focus { outline: 2px solid var(--ffhq-navy); border-color: var(--ffhq-navy); }
.ffhq-form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .ffhq-form-grid2 { grid-template-columns: 1fr; } }
.ffhq-inline-form { display: grid; gap: 10px; padding: 12px 0 2px; border-top: 1px dashed var(--ffhq-line); margin-top: 10px; }
.ffhq-alert { border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.ffhq-alert.err { background: var(--ffhq-crit-bg); color: var(--ffhq-crit); }
.ffhq-alert.ok { background: var(--ffhq-ok-bg); color: var(--ffhq-ok); }
.ffhq-alert.warn { background: var(--ffhq-warn-bg); color: var(--ffhq-warn); }
.ffhq-alert.info { background: var(--ffhq-info-bg); color: var(--ffhq-info); }
.ffhq-alert.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ffhq-alert.banner a, .ffhq-alert.banner .capacitor-only { font-weight: 700; white-space: nowrap; }

/* CSV import panel */
.ffhq-import { margin-bottom: 18px; }
.ffhq-import code { background: #EFEEE8; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.ffhq-import-inputs { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0; font-size: 13px; }
.ffhq-import-paste { font-family: Consolas, monospace; font-size: 12.5px; margin-bottom: 10px; resize: vertical; }
.ffhq-import-errors { display: grid; gap: 6px; margin-bottom: 12px; }

/* Training tab */
.ffhq-training-form { margin-bottom: 18px; }
.ffhq-picklist {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px;
    border: 1.5px solid var(--ffhq-line); border-radius: 8px; padding: 10px 12px;
    max-height: 240px; overflow-y: auto; background: #FDFDFB;
}
.ffhq-pick { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ffhq-pick input { width: 15px; height: 15px; accent-color: var(--ffhq-navy); }

/* Expirations tab */
.ffhq-expgrid { display: grid; gap: 18px; }
@media (min-width: 1050px) { .ffhq-expgrid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Apparatus module */
.ffhq-pagehead-actions { display: flex; gap: 10px; }
.ffhq-h2 { font-family: var(--ffhq-cond); font-size: 15px; font-weight: 600; letter-spacing: .05em; margin: 22px 0 12px; }

/* ---- Apparatus registry cards ---- */
.ffhq-rigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.ffhq-rig { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 10px; padding: 16px 18px; border-top: 4px solid var(--ffhq-navy); }
.ffhq-rig.oos { border-top-color: var(--ffhq-crit); }
.ffhq-rig .d { font-family: var(--ffhq-cond); font-size: 18px; font-weight: 600; letter-spacing: .03em; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ffhq-rig .t { color: var(--ffhq-muted); font-size: 12.5px; margin-bottom: 10px; }
/* "specrow" (not "row") — Bootstrap's grid .row > * { width: 100% } is loaded globally
   for the Identity pages and would stack these label→value pairs vertically. */
.ffhq-rig .specrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; padding: 3px 0; color: var(--ffhq-muted); }
.ffhq-rig .specrow b { color: var(--ffhq-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.ffhq-rig .specrow b:has(select) { flex: 1; max-width: 180px; }
.ffhq-rig .specrow select.ffhq-input { padding: 5px 8px; font-size: 12.5px; }
.ffhq-rig .nocheck { font-size: 12px; color: var(--ffhq-muted); }
.ffhq-rig-check { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--ffhq-navy); font-weight: 600; text-decoration: none; }
.ffhq-rig-check:hover { text-decoration: underline; }

/* ---- Equipment filters + table ---- */
.ffhq-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ffhq-filters span { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 99px; padding: 5px 13px; font-size: 12.5px; color: var(--ffhq-muted); cursor: pointer; user-select: none; }
.ffhq-filters span.on { background: var(--ffhq-navy); border-color: var(--ffhq-navy); color: #fff; font-weight: 600; }
.ffhq-card-h3 { font-family: var(--ffhq-cond); font-size: 14px; font-weight: 600; letter-spacing: .05em; padding: 13px 16px; border-bottom: 1px solid var(--ffhq-line); margin: 0; }
.ffhq-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ffhq-tbl th { font-family: var(--ffhq-cond); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ffhq-muted); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ffhq-line); font-weight: 600; white-space: nowrap; }
.ffhq-tbl td { padding: 9px 14px; border-bottom: 1px solid var(--ffhq-line); vertical-align: middle; white-space: nowrap; }
.ffhq-tbl tr:last-child td { border-bottom: none; }
.ffhq-tbl td.num { font-variant-numeric: tabular-nums; }
.ffhq-tbl tbody tr:hover td { background: #FAFAF7; }

/* ---- Admin CRUD: layout, rig/equipment actions, checklist editor, account page ---- */
.ffhq-apparatus-cols { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.ffhq-apparatus-cols:has(.ffhq-drawer) { grid-template-columns: 1fr 360px; }
@media (max-width: 1050px) { .ffhq-apparatus-cols:has(.ffhq-drawer) { grid-template-columns: 1fr; } }
.ffhq-apparatus-main { min-width: 0; }
.ffhq-rig-actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ffhq-eqactions { white-space: nowrap; }
.ffhq-eqactions .ffhq-linklike { margin-right: 10px; font-size: 12.5px; }
.ffhq-checkedit-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--ffhq-line); }
.ffhq-checkedit-fields { display: grid; gap: 6px; flex: 1; min-width: 0; }
.ffhq-checkedit-btns { display: flex; flex-direction: column; gap: 2px; }
.ffhq-checkedit-btns .ffhq-xbtn { font-size: 14px; }
.ffhq-checkedit-btns .ffhq-xbtn:disabled { opacity: .3; cursor: default; }
.ffhq-account-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 1050px) { .ffhq-account-grid { grid-template-columns: 1fr; } }
.ffhq-account-grid h3, .ffhq-cardsec { font-family: var(--ffhq-cond); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ffhq-muted); margin: 18px 0 10px; }
.ffhq-account-grid .ffhq-card-body h3:first-child, h3.ffhq-cardsec:first-child { margin-top: 0; }
.ffhq-cardnote { font-size: 13px; color: var(--ffhq-muted); margin: 0 0 12px; }

/* ---- Maintenance queue ---- */
.ffhq-maint { list-style: none; margin: 0; padding: 0; }
.ffhq-maint li { display: flex; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--ffhq-line); font-size: 13px; align-items: flex-start; }
.ffhq-maint li:last-child { border-bottom: none; }
.ffhq-maint .sev { width: 4px; border-radius: 2px; align-self: stretch; flex-shrink: 0; }
.ffhq-maint .sev.crit { background: var(--ffhq-crit); }
.ffhq-maint .sev.warn { background: var(--ffhq-warn); }
.ffhq-maint .sev.info { background: var(--ffhq-info); }
.ffhq-maint .body { flex: 1; min-width: 0; }
.ffhq-maint .t { font-weight: 600; }
.ffhq-maint .s { color: var(--ffhq-muted); font-size: 12px; }

/* The standard template rule went missing during branding — without it the error bar
   renders permanently at the end of short pages (visible on the FocusLayout runner). */
#blazor-error-ui {
    color-scheme: light only; background: lightyellow; bottom: 0; display: none;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); left: 0; padding: .6rem 1.25rem .7rem;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---- Truck check runner (phone-first) ---- */
.ffhq-focus .ffhq-main { max-width: 560px; margin: 0 auto; padding: 16px 14px 60px; }
/* Documents (invoices) share FocusLayout's chrome-free shell but not its phone-column cap. */
.ffhq-doc .ffhq-main { margin: 0 auto; padding: 20px 20px 60px; }
.ffhq-check { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.ffhq-check-head { display: flex; align-items: center; gap: 10px; padding: 2px 0 4px; }
.ffhq-check-head .back { font-size: 22px; color: var(--ffhq-navy); line-height: 1; text-decoration: none; padding: 0 4px; }
.ffhq-check-head .ttl { font-family: var(--ffhq-cond); font-size: 16px; font-weight: 600; letter-spacing: .03em; }
.ffhq-check-head .num { margin-left: auto; font-size: 12px; color: var(--ffhq-muted); font-variant-numeric: tabular-nums; }
.ffhq-prog { height: 6px; border-radius: 99px; background: #DDDBD1; overflow: hidden; }
.ffhq-prog i { display: block; height: 100%; background: var(--ffhq-navy); border-radius: 99px; transition: width .15s ease; }
.ffhq-proglbl { font-size: 11px; color: var(--ffhq-muted); text-transform: uppercase; letter-spacing: .08em; font-family: var(--ffhq-cond); display: flex; justify-content: space-between; margin-bottom: 4px; }
.ffhq-check-grp { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ffhq-muted); font-family: var(--ffhq-cond); padding: 6px 2px 0; }
.ffhq-check-item { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.ffhq-check-item .t { font-size: 14px; font-weight: 600; flex: 1; }
.ffhq-check-item .t small { display: block; font-weight: 400; color: var(--ffhq-muted); font-size: 11.5px; }
.ffhq-check-item.failed { border-color: var(--ffhq-crit); background: #FFFBFA; }
.ffhq-check-item.failed .t small { color: var(--ffhq-crit); }
.ffhq-pf { display: flex; gap: 6px; }
.ffhq-pf span { width: 44px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--ffhq-line); font-weight: 800; font-size: 15px; color: #A6A296; cursor: pointer; user-select: none; background: #fff; }
.ffhq-pf .p.on { background: var(--ffhq-ok); border-color: var(--ffhq-ok); color: #fff; }
.ffhq-pf .f.on { background: var(--ffhq-crit); border-color: var(--ffhq-crit); color: #fff; }
.ffhq-actionbar { position: sticky; bottom: 0; padding: 12px 0 18px; background: linear-gradient(to top, var(--ffhq-paper) 75%, transparent); }
.ffhq-cta { display: block; width: 100%; background: var(--ffhq-navy); color: #fff; text-align: center; border: none; border-radius: 12px; padding: 14px; font-family: var(--ffhq-cond); font-size: 15px; font-weight: 600; letter-spacing: .05em; cursor: pointer; text-decoration: none; }
.ffhq-cta:hover { background: #1E3450; }
.ffhq-cta:disabled { background: #9AA7B8; cursor: default; }
.ffhq-cta.ok { background: var(--ffhq-ok); }
.ffhq-cta.ok:hover { background: #286844; }
.ffhq-check-error { color: var(--ffhq-crit); font-size: 13px; margin: 0; }
.ffhq-check-empty { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 12px; padding: 18px; font-size: 14px; color: var(--ffhq-muted); }

/* Failure sheet */
.ffhq-dim { position: fixed; inset: 0; background: rgba(27, 44, 66, .35); z-index: 40; }
/* .ffhq-modalsheet, NOT .ffhq-sheet, AND THAT DISTINCTION IS THE BUG FIX.

   Two different things wanted the same class name. A MODAL sheet — the apparatus-check failure
   sheet and the incident type picker — is a fixed bottom sheet at EVERY width, which is what this
   rule describes. An EDITING PANEL (personnel, apparatus, equipment, calendar) carries .ffhq-sheet
   only to opt into phone behaviour; on desktop it is meant to be a sticky column beside its list.

   Unscoped, this rule applied to both. On desktop the editing panels therefore became fixed,
   centred, 480px overlays sitting ON TOP of the roster they were meant to sit beside — and because
   .ffhq-drawer contributes top:16px while this contributes bottom:0, they were pinned to a fixed
   height with overflow visible: content taller than the window spilled off the bottom with nothing
   to scroll, and the page scroll could not help because the box was fixed. Measured on Personnel at
   1440x560: a 544px box holding 668px of content, 124px permanently unreachable. Customer-reported
   as "the checklist will not scroll, same on personnel"; live since 2026-08-24 (f8d14c2), whose own
   title says "on phones" — the desktop leak was never intended, and the comment below this block
   has been claiming the class is "inert on desktop" the whole time.

   Modals keep BOTH classes so every phone rule below (which targets .ffhq-sheet) still reaches
   them unchanged. */
.ffhq-modalsheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(32, 36, 42, .22); padding-bottom: 18px; z-index: 41; }
.ffhq-modalsheet .grab { width: 38px; height: 4px; border-radius: 99px; background: #D8D6CC; margin: 9px auto 8px; }
/* Corner close for the MODAL sheets — the apparatus-check failure sheet and the incident-type
   picker. Both are bottom sheets at every width, so they cannot use SheetHeader, which is
   display:none above 820px and carries negative margins tuned to the drawer panels' padding.
   Both shipped with the backdrop tap as their only exit, and the type picker with no visible exit
   at all: a member who opened it to browse codes and did not want one was stuck on the step. */
.ffhq-sheet-x {
    position: absolute; top: 8px; right: 10px;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 8px;
    font-size: 17px; line-height: 1; color: var(--ffhq-muted); cursor: pointer;
}
.ffhq-sheet-x:hover { background: var(--ffhq-paper); color: var(--ffhq-ink); }
.ffhq-sheet-x:focus-visible { outline: 2px solid var(--ffhq-navy); outline-offset: 1px; }
.ffhq-sheet h4 { font-family: var(--ffhq-cond); font-size: 14px; font-weight: 600; letter-spacing: .04em; padding: 0 16px 2px; color: var(--ffhq-crit); margin: 0; }
.ffhq-sheet .sub { padding: 0 16px 10px; font-size: 12.5px; color: var(--ffhq-muted); }
.ffhq-sheet textarea { display: block; width: calc(100% - 28px); margin: 0 14px 9px; background: var(--ffhq-paper); border: 1px solid var(--ffhq-line); border-radius: 12px; padding: 10px 13px; font-size: 14px; font-family: inherit; color: var(--ffhq-ink); min-height: 74px; resize: vertical; }
.ffhq-sheet textarea:focus { outline: 2px solid var(--ffhq-navy); border-color: var(--ffhq-navy); }
.ffhq-sheet .hint { padding: 0 16px 10px; font-size: 12px; color: var(--ffhq-muted); }
.ffhq-sheet .ffhq-cta { width: calc(100% - 28px); margin: 0 14px; }
.ffhq-sevrow { display: flex; gap: 7px; margin: 0 14px 12px; }
.ffhq-sevrow span { flex: 1; text-align: center; border: 1px solid var(--ffhq-line); border-radius: 10px; padding: 9px 4px; font-size: 12.5px; background: var(--ffhq-paper); cursor: pointer; user-select: none; }
.ffhq-sevrow span.on { background: var(--ffhq-warn-bg); border-color: var(--ffhq-warn); color: var(--ffhq-warn); font-weight: 700; }
.ffhq-sevrow span.on.note { background: var(--ffhq-info-bg); border-color: var(--ffhq-info); color: var(--ffhq-info); }
.ffhq-sevrow span.on.oos { background: var(--ffhq-crit-bg); border-color: var(--ffhq-crit); color: var(--ffhq-crit); }

/* Completion summary */
.ffhq-sumrow { display: flex; gap: 10px; }
.ffhq-sum { flex: 1; background: #fff; border: 1px solid var(--ffhq-line); border-radius: 14px; padding: 16px; text-align: center; }
.ffhq-sum .big { font-family: var(--ffhq-cond); font-size: 38px; font-weight: 600; color: var(--ffhq-ok); }
.ffhq-sum .big.warn { color: var(--ffhq-crit); }
.ffhq-sum .l { font-size: 12px; color: var(--ffhq-muted); text-transform: uppercase; letter-spacing: .07em; font-family: var(--ffhq-cond); }
.ffhq-mrec { background: var(--ffhq-crit-bg); border: 1px solid #EAC4BD; border-radius: 12px; padding: 10px 13px; font-size: 12.5px; color: #7C2418; }
.ffhq-mrec b { display: block; }
.ffhq-check-byline { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 12px; padding: 10px 13px; font-size: 12.5px; color: var(--ffhq-muted); }
.ffhq-check-byline b { color: var(--ffhq-ink); }

/* Incidents module */

/* ---- Wizard shell (phone-first, rides FocusLayout like the check runner) ---- */
.ffhq-wiz { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 9px; }
.ffhq-wiz-steps { display: flex; gap: 5px; }
.ffhq-wiz-steps span { flex: 1; height: 4px; border-radius: 99px; background: #DDDBD1; }
.ffhq-wiz-steps span.done { background: var(--ffhq-navy); }
.ffhq-wiz-steps span.cur { background: var(--ffhq-red); }
.ffhq-wiz-steplbl { font-size: 11px; color: var(--ffhq-muted); text-transform: uppercase; letter-spacing: .08em; font-family: var(--ffhq-cond); margin-bottom: 2px; }

/* ---- Field cards ---- */
.ffhq-fld { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 12px; padding: 10px 13px; position: relative; }
.ffhq-fld.tappable { cursor: pointer; }
.ffhq-fld .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ffhq-muted); font-family: var(--ffhq-cond); margin-bottom: 2px; }
.ffhq-fld .v { font-size: 14.5px; font-weight: 600; }
.ffhq-fld .v.ph { color: #A6A296; font-weight: 400; }
.ffhq-fld .chev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #A6A296; }
.ffhq-fld input, .ffhq-fld textarea, .ffhq-fld select {
    width: 100%; border: none; background: transparent; font: inherit; font-size: 14.5px;
    font-weight: 600; color: var(--ffhq-ink); padding: 0;
}
.ffhq-fld input:focus, .ffhq-fld textarea:focus, .ffhq-fld select:focus { outline: none; }
/* Placeholders must never read as entered text.
   This rule is deliberately UNSCOPED. The only placeholder styling used to be the .ffhq-fld one
   below, but the app puts placeholders on four different input classes (.ffhq-input 37 times,
   .form-control 18, .auth-input 9, plus the search boxes) — so 66 of 87 placeholders fell back to
   the browser default, which in Chrome is dark enough that a hint like "09-114" or "1500" is
   indistinguishable from a value the user typed. A chief cannot tell whether their NERIS entity id
   is saved or the field is empty.
   Italic carries the signal, not colour alone: colour is the thing a photocopy, a bright screen, or
   a colour-vision difference takes away first. opacity:1 is for Firefox, which otherwise applies its
   own fade on top. Example-value placeholders are additionally prefixed "e.g." in the markup, so the
   meaning survives even where no styling reaches. */
/* The class selectors are NOT redundant with the element ones. Bootstrap ships
   `.form-control::placeholder{color:var(--bs-secondary-color);opacity:1}`, which is class
   specificity (0,1,1) and beats a bare `input::placeholder` (0,0,2) no matter that app.css loads
   after bootstrap.min.css — specificity is decided before order. Measured before this fix, a
   .form-control placeholder rendered rgba(33,37,41,0.75): the same ink as typed text, merely faded.
   That is the NERIS entity-id field the problem was reported against, so an element-only rule would
   have looked like a fix everywhere except the one place it was asked for. */
input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.ffhq-input::placeholder,
.auth-input::placeholder,
.searchbox::placeholder,
.search::placeholder,
.rmv-search::placeholder {
    color: #8A857A;
    font-style: italic;
    font-weight: 400;
    opacity: 1;
}

.ffhq-fld input::placeholder, .ffhq-fld textarea::placeholder { color: #A6A296; font-weight: 400; font-style: italic; }
.ffhq-fld textarea { resize: vertical; min-height: 64px; font-weight: 400; }
.ffhq-fld .hint { font-size: 11.5px; color: var(--ffhq-muted); margin-top: 6px; }
.ffhq-fld .ffhq-picklist { border: none; background: transparent; padding: 6px 0 0; max-height: 230px; }
/* Checkboxes must escape the `width:100%` above, which is meant for text/select fields.
   `.ffhq-pick input` (line 413) already sets 15px, but it ties on specificity (0,1,1) with
   `.ffhq-fld input` and loses on source order — so a checkbox inside a wizard field stretched to
   the full grid column and pushed its own label out of view. Measured on the incident wizard's crew
   step: three apparatus and three responders rendered as bare checkboxes with no names beside them.
   The attribute selector wins on specificity (0,2,1) rather than order, so it holds wherever the two
   contexts nest. flex:none keeps it from being shrunk by the flex row in .ffhq-pick. */
.ffhq-fld input[type="checkbox"] { width: 15px; height: 15px; flex: none; }
.ffhq-timegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ffhq-timegrid .ffhq-fld input { font-variant-numeric: tabular-nums; padding-right: 48px; }
.ffhq-fld input[type="datetime-local"], .ffhq-fld input[type="date"], .ffhq-fld input[type="time"] { font-variant-numeric: tabular-nums; }
/* Dispatched anchors the report and carries a second shortcut, so it spans the grid. */
.ffhq-timegrid .ffhq-fld.wide { grid-column: 1 / -1; }
.ffhq-timegrid .ffhq-fld.wide input { padding-right: 122px; }
.ffhq-nowbtn {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    background: var(--ffhq-info-bg); color: var(--ffhq-info); border-radius: 8px; font-size: 11px;
    font-weight: 700; padding: 4px 9px; font-family: var(--ffhq-cond);
    letter-spacing: .04em; cursor: pointer; user-select: none;
}
/* Sits left of NOW, quieter than it: the point is that a past date is equally allowed, not that
   it is the usual choice. */
.ffhq-nowbtn.alt {
    right: 56px; background: transparent; color: var(--ffhq-muted);
    border: 1px solid var(--ffhq-line);
}
.ffhq-nowbtn.alt:hover { color: var(--ffhq-info); border-color: var(--ffhq-info); }
.ffhq-timenote { font-size: 11.5px; color: var(--ffhq-muted); line-height: 1.45; }
.ffhq-timenote b { color: var(--ffhq-ink); font-weight: 600; }
.ffhq-chipsrow { display: flex; gap: 6px; flex-wrap: wrap; }
.ffhq-chipsrow .ffhq-chip .x { background: none; border: none; color: inherit; cursor: pointer; font-size: 10px; margin-left: 5px; padding: 0; }
.ffhq-wiz-addlink { font-size: 13px; text-align: left; padding: 0 2px; }

/* ---- Conditional module ---- */
.ffhq-modbanner { background: var(--ffhq-warn-bg); border: 1px solid #EAD9B0; border-radius: 12px; padding: 9px 13px; font-size: 12.5px; color: #7A5408; }
.ffhq-modbanner b { font-family: var(--ffhq-cond); letter-spacing: .03em; }
.ffhq-seg { display: flex; gap: 6px; margin-top: 6px; }
.ffhq-seg span { flex: 1; text-align: center; border: 1px solid var(--ffhq-line); background: #fff; border-radius: 10px; padding: 9px 4px; font-size: 12px; cursor: pointer; user-select: none; }
.ffhq-seg span.on { background: var(--ffhq-navy); border-color: var(--ffhq-navy); color: #fff; font-weight: 600; }

/* ---- Review ---- */
.ffhq-rvsec { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 12px; padding: 10px 13px; }
.ffhq-rvsec .h { display: flex; justify-content: space-between; font-family: var(--ffhq-cond); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ffhq-muted); margin-bottom: 4px; }
.ffhq-rvsec .rowline { font-size: 13px; display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.ffhq-rvsec .rowline span:first-child { color: var(--ffhq-muted); flex-shrink: 0; }
.ffhq-rvsec .rowline span:last-child { font-weight: 600; text-align: right; }
.ffhq-valbox { border-radius: 12px; padding: 10px 13px; font-size: 12.5px; display: flex; gap: 9px; align-items: flex-start; }
.ffhq-valbox.crit { background: var(--ffhq-crit-bg); border: 1px solid #EAC4BD; color: #7C2418; }
.ffhq-valbox.warn { background: var(--ffhq-warn-bg); border: 1px solid #EAD9B0; color: #7A5408; }
/* Confirmation, not a problem: a backdated report is being accepted, and it should not wear the
   same colour as something that needs fixing. */
.ffhq-valbox.info { background: var(--ffhq-info-bg); border: 1px solid #C3D4E6; color: #1B4A75; }
.ffhq-valbox b { display: block; }
.ffhq-valbox .ic { font-weight: 800; font-family: var(--ffhq-cond); }

/* ---- Type picker bottom sheet ---- */
/* dvh for the same reason as .ffhq-sheet: vh measures the URL-bar-retracted viewport, so the
   bottom of this picker could sit under the browser chrome. vh line first as the fallback. */
.ffhq-typesheet { display: flex; flex-direction: column; max-height: 76vh; max-height: 76dvh; }
.ffhq-typesheet h4 { color: var(--ffhq-ink); }
.ffhq-typesheet .searchbox { margin: 4px 14px 10px; background: var(--ffhq-paper); border: 1px solid var(--ffhq-line); border-radius: 10px; padding: 9px 13px; font-size: 13.5px; color: var(--ffhq-ink); width: calc(100% - 28px); font-family: inherit; }
.ffhq-typesheet .searchbox:focus { outline: 2px solid var(--ffhq-navy); border-color: var(--ffhq-navy); }
.ffhq-typesheet .opts { overflow-y: auto; }
.ffhq-typesheet .grp { padding: 6px 16px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ffhq-muted); font-family: var(--ffhq-cond); }
.ffhq-typesheet .opt { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid #F0EFE9; font-size: 14px; cursor: pointer; }
.ffhq-typesheet .opt:hover { background: #FAFAF7; }
.ffhq-typesheet .opt.sel { background: var(--ffhq-info-bg); font-weight: 600; }
.ffhq-typesheet .opt .code { margin-left: auto; font-size: 10.5px; color: #A6A296; }
.ffhq-typesheet .opt .dot { width: 8px; height: 8px; border-radius: 50%; background: #C9C6BA; flex-shrink: 0; }
.ffhq-typesheet .opt .dot.t-fire { background: var(--ffhq-crit); }
.ffhq-typesheet .opt .dot.t-medical { background: var(--ffhq-info); }
.ffhq-typesheet .opt .dot.t-hazsit { background: var(--ffhq-warn); }
.ffhq-typesheet .opt .dot.t-rescue { background: var(--ffhq-navy); }

/* ---- Incident list ---- */
.ffhq-tabs .cnt { background: #EFEEE8; border-radius: 99px; padding: 1px 8px; font-size: 11.5px; margin-left: 5px; font-variant-numeric: tabular-nums; }
.ffhq-tabs button.active .cnt { background: var(--ffhq-navy); color: #fff; }
.ffhq-tabs .cnt.err { background: var(--ffhq-crit-bg); color: var(--ffhq-crit); }
.ffhq-listnote { margin-top: 16px; background: #fff; border: 1px solid var(--ffhq-line); border-left: 4px solid var(--ffhq-red); border-radius: 10px; padding: 14px 18px; font-size: 13px; color: var(--ffhq-muted); max-width: 75ch; }
.ffhq-listnote b { color: var(--ffhq-ink); }

/* Expanded submission detail: the raw NERIS response and, behind a toggle, the exact payload we
   sent. Both are unbounded machine text, so they scroll inside the panel rather than stretching
   the table and pushing the page sideways. */
.ffhq-detail { padding: 4px 0 10px; font-size: 13px; }
.ffhq-detail > b { display: block; margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ffhq-muted); }
.ffhq-detail details { margin-top: 10px; }
.ffhq-detail summary { cursor: pointer; color: var(--ffhq-navy); font-size: 12.5px; }
.ffhq-pre {
    background: #FAF9F5; border: 1px solid var(--ffhq-line); border-radius: 8px;
    padding: 10px 12px; margin: 6px 0 0; max-height: 320px; overflow: auto;
    font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.ffhq-detailrow:hover td { background: none; }

/* ---- Dashboard ---- */
.ffhq-dashcols { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .ffhq-dashcols { grid-template-columns: 1fr; } }
.ffhq-stack { margin-bottom: 18px; }
.ffhq-kpi .d.crit { color: var(--ffhq-crit); }
.ffhq-attn { list-style: none; margin: 0; padding: 0; }
.ffhq-attn li { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ffhq-line); align-items: flex-start; }
.ffhq-attn li:last-child { border-bottom: none; }
.ffhq-attn .sev { width: 4px; border-radius: 2px; align-self: stretch; flex-shrink: 0; }
.ffhq-attn .sev.crit { background: var(--ffhq-crit); }
.ffhq-attn .sev.warn { background: var(--ffhq-warn); }
.ffhq-attn .sev.info { background: var(--ffhq-info); }
.ffhq-attn .body { flex: 1; min-width: 0; }
.ffhq-attn .t { font-weight: 600; font-size: 13.5px; }
.ffhq-attn .s { color: var(--ffhq-muted); font-size: 12.5px; }
.ffhq-attn .act { margin-left: auto; align-self: center; flex-shrink: 0; }
.ffhq-attn .act a { font-size: 12.5px; color: var(--ffhq-navy); text-decoration: none; font-weight: 600; white-space: nowrap; }
.ffhq-attn .act a:hover { text-decoration: underline; }

/* Calendar module */
:root {
    --ffhq-ev-drill: var(--ffhq-navy);
    --ffhq-ev-meet: #3B6EA5;
    --ffhq-ev-duty: #8A6D1C;
    --ffhq-ev-work: #67635A;
    --ffhq-ev-pub: #2F7D51;
}

.ffhq-cal-cols { display: grid; grid-template-columns: 1fr 372px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .ffhq-cal-cols { grid-template-columns: 1fr; } }

.ffhq-calhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ffhq-line); }
.ffhq-calhead .m { font-family: var(--ffhq-cond); font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.ffhq-calnav { display: flex; gap: 6px; }
.ffhq-calnav button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ffhq-line); border-radius: 8px; color: var(--ffhq-navy); background: #fff; cursor: pointer; font-size: 15px; }
.ffhq-calnav button:hover { border-color: var(--ffhq-navy); }

.ffhq-legend { display: flex; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--ffhq-line); font-size: 12px; color: var(--ffhq-muted); flex-wrap: wrap; }
.ffhq-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.ffhq-legend i.drill { background: var(--ffhq-ev-drill); }
.ffhq-legend i.meet { background: var(--ffhq-ev-meet); }
.ffhq-legend i.duty { background: var(--ffhq-ev-duty); }
.ffhq-legend i.work { background: var(--ffhq-ev-work); }
.ffhq-legend i.pub { background: var(--ffhq-ev-pub); }

.ffhq-cal { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 560px; }
.ffhq-cal th { font-family: var(--ffhq-cond); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ffhq-muted); padding: 8px 6px; border-bottom: 1px solid var(--ffhq-line); font-weight: 600; }
.ffhq-cal td { border: 1px solid #EFEEE8; vertical-align: top; height: 88px; padding: 5px 6px; font-size: 12px; }
.ffhq-cal td .dn { font-variant-numeric: tabular-nums; color: var(--ffhq-muted); font-size: 11.5px; margin-bottom: 3px; }
.ffhq-cal td.out { background: #FAFAF7; }
.ffhq-cal td.out .dn { color: #C6C3B8; }
.ffhq-cal td.today { background: var(--ffhq-info-bg); }
.ffhq-cal td.today .dn { color: var(--ffhq-navy); font-weight: 700; }

.ffhq-ev { display: block; width: 100%; text-align: left; border: none; border-radius: 6px; padding: 2px 7px; margin-bottom: 3px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; font-family: inherit; }
.ffhq-ev.drill { background: var(--ffhq-ev-drill); }
.ffhq-ev.meet { background: var(--ffhq-ev-meet); }
.ffhq-ev.duty { background: var(--ffhq-ev-duty); }
.ffhq-ev.work { background: var(--ffhq-ev-work); }
.ffhq-ev.pub { background: var(--ffhq-ev-pub); }
.ffhq-ev.sel { outline: 2px solid var(--ffhq-red); outline-offset: 1px; }

/* List view (phone-friendly alternative to the grid) */
.ffhq-evlist { list-style: none; margin: 0; padding: 0; }
.ffhq-evlist li { display: flex; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--ffhq-line); align-items: center; cursor: pointer; }
.ffhq-evlist li:last-child { border-bottom: none; }
.ffhq-evlist li:hover, .ffhq-evlist li.sel { background: #FAFAF7; }
.ffhq-evlist .t { font-weight: 600; font-size: 13.5px; }
.ffhq-evlist .s { color: var(--ffhq-muted); font-size: 12.5px; }
.ffhq-evlist .mark { width: 9px; height: 9px; border-radius: 3px; margin-left: auto; flex-shrink: 0; }
.ffhq-evlist .mark.drill { background: var(--ffhq-ev-drill); }
.ffhq-evlist .mark.meet { background: var(--ffhq-ev-meet); }
.ffhq-evlist .mark.duty { background: var(--ffhq-ev-duty); }
.ffhq-evlist .mark.work { background: var(--ffhq-ev-work); }
.ffhq-evlist .mark.pub { background: var(--ffhq-ev-pub); }

/* Datebox (list view + dashboard UPCOMING panel) */
.ffhq-datebox { width: 44px; text-align: center; background: var(--ffhq-paper); border: 1px solid var(--ffhq-line); border-radius: 8px; padding: 4px 0; flex-shrink: 0; }
.ffhq-datebox .m { font-size: 10px; text-transform: uppercase; color: var(--ffhq-crit); font-weight: 700; letter-spacing: .08em; }
.ffhq-datebox .d { font-family: var(--ffhq-cond); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ffhq-events { list-style: none; margin: 0; padding: 0; }
.ffhq-events li { display: flex; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--ffhq-line); }
.ffhq-events li:last-child { border-bottom: none; }
.ffhq-events .t { font-weight: 600; font-size: 13.5px; }
.ffhq-events .s { color: var(--ffhq-muted); font-size: 12.5px; }

/* Event detail panel */
.ffhq-evcard { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 14px; padding: 14px; }
.ffhq-evcard .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ffhq-navy); font-family: var(--ffhq-cond); font-weight: 700; }
.ffhq-evcard .t { font-family: var(--ffhq-cond); font-size: 18px; font-weight: 600; margin: 3px 0 6px; letter-spacing: .02em; text-transform: uppercase; }
.ffhq-evcard .meta { font-size: 13px; color: var(--ffhq-muted); }
.ffhq-evcard .desc { font-size: 13px; color: var(--ffhq-ink); margin-top: 8px; }

.ffhq-rsvp { display: flex; gap: 8px; margin-top: 10px; }
.ffhq-rsvp button { flex: 1; text-align: center; border: 1.5px solid var(--ffhq-line); border-radius: 12px; padding: 11px 4px; font-weight: 700; font-size: 13.5px; background: #fff; cursor: pointer; color: var(--ffhq-ink); font-family: inherit; }
.ffhq-rsvp button.going.on { background: var(--ffhq-ok); border-color: var(--ffhq-ok); color: #fff; }
.ffhq-rsvp button.declined.on { background: var(--ffhq-crit); border-color: var(--ffhq-crit); color: #fff; }
.ffhq-rsvp button:disabled { opacity: .55; cursor: default; }

.ffhq-who { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 14px; padding: 12px 14px; margin-top: 10px; }
.ffhq-who h5 { font-family: var(--ffhq-cond); font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ffhq-muted); margin: 0 0 8px; }
.ffhq-who .r { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.ffhq-who .r span:last-child { color: var(--ffhq-ok); font-weight: 700; font-size: 12px; }
.ffhq-who .r.no span:last-child { color: #A6A296; }
.ffhq-who .r.att span:last-child { color: var(--ffhq-navy); }

.ffhq-cap { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--ffhq-muted); }
.ffhq-cap .bar { flex: 1; height: 7px; border-radius: 99px; background: #EFEEE8; overflow: hidden; }
.ffhq-cap .bar i { display: block; height: 100%; background: var(--ffhq-ev-duty); border-radius: 99px; }
.ffhq-cap.full .bar i { background: var(--ffhq-crit); }

.ffhq-evdetail-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ffhq-feed { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 14px; padding: 12px 14px; margin-top: 14px; }
.ffhq-feed h5 { font-family: var(--ffhq-cond); font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ffhq-muted); margin: 0 0 6px; }
.ffhq-feed p { font-size: 12.5px; color: var(--ffhq-muted); margin: 0 0 8px; }
.ffhq-feed input { width: 100%; border: 1.5px solid var(--ffhq-line); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-family: Consolas, monospace; color: var(--ffhq-ink); background: #FDFDFB; }

/* Points module */
.ffhq-yearsel { width: auto; padding: 8px 12px; font-family: var(--ffhq-cond); font-size: 14px; letter-spacing: .04em; cursor: pointer; }
.ffhq-pts-flash { margin-bottom: 14px; }
.ffhq-pts-cols { grid-template-columns: 1fr 320px; }
@media (max-width: 1050px) { .ffhq-pts-cols { grid-template-columns: 1fr; } }
.ffhq-pts-side { margin-bottom: 18px; }
.ffhq-table th.r, .ffhq-table td.r { text-align: right; }

/* Point rules side card (view + inline edit) */
.ffhq-rules { padding: 6px 16px 12px; font-size: 13px; }
.ffhq-rules .r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #EEEDE6; }
.ffhq-rules .r:last-of-type { border-bottom: none; }
.ffhq-rules .r span:first-child { color: var(--ffhq-muted); }
.ffhq-rules .r span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ffhq-pts-ruleinput { width: 76px; padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.ffhq-pts-rulenote { font-size: 12px; color: var(--ffhq-muted); padding: 8px 0 2px; line-height: 1.5; }
.ffhq-pts-rulebtns { display: flex; gap: 8px; padding-top: 10px; }

/* Manual entry + blurb cards */
.ffhq-pts-manual { display: grid; gap: 10px; }
.ffhq-pts-blurb { font-size: 12.5px; color: var(--ffhq-muted); line-height: 1.7; }
.ffhq-pts-blurb b { color: var(--ffhq-ink); }

/* LOSAP statement (screen) */
.ffhq-pts-stmtbar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.ffhq-stmt { max-width: 820px; padding: 28px 34px; }
.ffhq-stmt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; border-bottom: 3px solid var(--ffhq-navy); padding-bottom: 14px; }
.ffhq-stmt-head .dept { font-family: var(--ffhq-cond); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ffhq-muted); }
.ffhq-stmt-head h1 { font-family: var(--ffhq-cond); font-size: 22px; font-weight: 600; letter-spacing: .02em; margin: 2px 0; }
.ffhq-stmt-head .sub { font-size: 12.5px; color: var(--ffhq-muted); }
.ffhq-stmt-head .who { text-align: right; }
.ffhq-stmt-head .nm { font-family: var(--ffhq-cond); font-size: 18px; font-weight: 600; }
.ffhq-stmt-head .rk { font-size: 12.5px; color: var(--ffhq-muted); }

.ffhq-stmt-verdict { display: flex; gap: 26px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--ffhq-line); flex-wrap: wrap; }
.ffhq-stmt-verdict .l { display: block; font-family: var(--ffhq-cond); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ffhq-muted); }
.ffhq-stmt-verdict .n { font-family: var(--ffhq-cond); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ffhq-stmt-verdict .v { margin-left: auto; font-family: var(--ffhq-cond); font-size: 15px; font-weight: 700; letter-spacing: .08em; padding: 8px 18px; border-radius: 8px; }
.ffhq-stmt-verdict .v.ok { background: var(--ffhq-ok-bg); color: var(--ffhq-ok); border: 1.5px solid var(--ffhq-ok); }
.ffhq-stmt-verdict .v.no { background: var(--ffhq-crit-bg); color: var(--ffhq-crit); border: 1.5px solid var(--ffhq-crit); }

.ffhq-stmt-cat { margin-top: 16px; }
.ffhq-stmt-cat h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--ffhq-cond); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: none; padding: 0 0 6px; margin: 0; border-bottom: 2px solid var(--ffhq-line); }
.ffhq-stmt-cat h2 .sum { color: var(--ffhq-muted); font-size: 12px; letter-spacing: .03em; text-transform: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.ffhq-stmt-cat table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ffhq-stmt-cat td { padding: 5px 0; border-bottom: 1px dashed #EEEDE6; }
.ffhq-stmt-cat tr:last-child td { border-bottom: none; }
.ffhq-stmt-cat td.d { width: 120px; color: var(--ffhq-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ffhq-stmt-cat td.p { width: 60px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.ffhq-stmt-total { display: flex; justify-content: space-between; margin-top: 18px; padding: 12px 0; border-top: 3px solid var(--ffhq-navy); font-family: var(--ffhq-cond); font-size: 15px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ffhq-stmt-empty { padding: 26px 0; color: var(--ffhq-muted); font-size: 13px; }
.ffhq-stmt-foot { margin-top: 14px; font-size: 11.5px; color: var(--ffhq-muted); line-height: 1.6; }

/* Printed page geometry for the invoice document (browser print-to-PDF, no PDF library). */
@page { size: letter; margin: 0.6in; }

/* Print: statement pages print clean — chrome hidden, white paper, no borders. */
@media print {
    .ffhq-sidebar, .ffhq-noprint, #blazor-error-ui { display: none !important; }
    body, .ffhq-shell, .ffhq-main { background: #fff !important; }
    .ffhq-main { padding: 0 !important; max-width: none !important; }
    .ffhq-stmt { border: none; border-radius: 0; max-width: none; padding: 0; }
    .ffhq-stmt-cat { break-inside: avoid; }
    .ffhq-inv { border: none; border-radius: 0; max-width: none; padding: 0; }

    /* Reports print for a board packet, a commission or a grant application. The chart is inline
       SVG, so it prints as vector rather than as the fuzzy bitmap a canvas library would give. */
    .ffhq-rpt { border: none; border-radius: 0; max-width: none; padding: 0; }
    .ffhq-rpt-chart, .ffhq-rpt-summary > div { break-inside: avoid; }
    .ffhq-rpt-table thead { display: table-header-group; }
    .ffhq-rpt-table tr { break-inside: avoid; }

    /* The batch incident-detail document: a cover, then EVERY incident in the range, each starting
       on a fresh sheet. break-before on the section rather than break-after on the previous one, so
       the document ends with the last incident instead of a blank sheet. The legacy page-break-*
       properties ride alongside the modern ones — Chrome honours both, older print engines only the
       legacy pair, and a break that silently does not apply prints two incidents on one page. */
    .ffhq-idb-page { break-before: page; page-break-before: always; margin-top: 0; }

    /* The on-screen card chrome comes off on paper, like the invoice's and the report's. It is not
       cosmetic here: the border, the radius and 24px/30px of padding push a section that fits a
       Letter column over the edge, and a section that spills by 40px costs a whole extra sheet —
       over a 400-call year that is a couple of hundred sheets of a printed annual report. */
    .ffhq-idb-inc { border: none; border-radius: 0; padding: 0; }

    /* The shell is a flex container, and a page break inside one is ignored by print engines that
       do not fragment flex. Chrome does honour it here (verified: 13 sheets with the rule, 10
       without), but block layout is what the fragmentation rules are actually specified over, so
       the document does not depend on that. */
    .ffhq-shell.ffhq-doc, .ffhq-doc .ffhq-main { display: block !important; }
    .ffhq-idb-head, .ffhq-idb-field, .ffhq-idb-tbl tr { break-inside: avoid; }
    .ffhq-idb-tbl thead { display: table-header-group; }
    .ffhq-idb-sub { break-after: avoid; page-break-after: avoid; }
    .ffhq-idb-end { break-before: avoid; page-break-before: avoid; }
}

/* ---------- Printable invoice document ---------- */

.ffhq-inv-bar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.ffhq-inv { max-width: none; padding: 28px 34px; }
.ffhq-inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; border-bottom: 3px solid var(--ffhq-navy); padding-bottom: 14px; }
.ffhq-inv-logo { width: 160px; border-radius: 8px; }
.ffhq-inv-biller { text-align: right; font-size: 12.5px; color: var(--ffhq-muted); line-height: 1.5; }
.ffhq-inv-biller-name { font-family: var(--ffhq-cond); font-size: 15px; font-weight: 700; color: var(--ffhq-ink); }
.ffhq-inv-meta { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--ffhq-line); }
.ffhq-inv-num { text-align: right; }
.ffhq-inv-label { font-family: var(--ffhq-cond); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ffhq-muted); }
.ffhq-inv-deptname { font-family: var(--ffhq-cond); font-size: 16px; font-weight: 600; }
.ffhq-inv-dates { display: flex; gap: 26px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--ffhq-line); font-size: 13px; }
.ffhq-inv-dates span { display: block; color: var(--ffhq-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.ffhq-inv-lines { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }
.ffhq-inv-lines th { text-align: left; padding: 8px 0; border-bottom: 2px solid var(--ffhq-line); font-family: var(--ffhq-cond); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ffhq-muted); }
.ffhq-inv-lines td { padding: 8px 0; border-bottom: 1px dashed #EEEDE6; }
.ffhq-inv-lines th.num.r, .ffhq-inv-lines td.num.r { text-align: right; }
.ffhq-inv-total td { border-top: 3px solid var(--ffhq-navy); border-bottom: none; font-weight: 700; font-size: 15px; padding-top: 12px; font-variant-numeric: tabular-nums; }
.ffhq-inv-status { margin-top: 18px; }
.ffhq-inv-status .ffhq-muted { margin-top: 4px; font-size: 12.5px; }
.ffhq-inv-foot { margin-top: 22px; font-size: 11.5px; color: var(--ffhq-muted); line-height: 1.6; }

/* ---------- Reports (index + printable report document) ---------- */

.ffhq-rpt-cat { font-family: var(--ffhq-cond); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ffhq-muted); margin: 22px 0 10px; }
.ffhq-rpt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ffhq-rpt-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; text-decoration: none; color: inherit; }
.ffhq-rpt-card:hover { border-color: var(--ffhq-navy); }
.ffhq-rpt-card .t { font-family: var(--ffhq-cond); font-size: 16px; font-weight: 600; color: var(--ffhq-ink); }
.ffhq-rpt-card .d { font-size: 13px; color: var(--ffhq-muted); line-height: 1.5; }
.ffhq-rpt-card .go { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ffhq-navy); }

.ffhq-rpt-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.ffhq-rpt-range { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ffhq-rpt-range .f { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 8px; padding: 6px 12px; font-size: 13px; color: var(--ffhq-muted); display: flex; align-items: center; gap: 7px; }
.ffhq-rpt-range .f b { color: var(--ffhq-ink); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.ffhq-rpt-range .f input { border: none; background: transparent; font-size: 13px; color: var(--ffhq-ink); outline: none; padding: 0; }
.ffhq-rpt-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ffhq-rpt { max-width: none; padding: 28px 34px; }
.ffhq-rpt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; border-bottom: 3px solid var(--ffhq-navy); padding-bottom: 14px; }
.ffhq-rpt-head .dept { font-family: var(--ffhq-cond); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ffhq-muted); }
.ffhq-rpt-head h1 { font-family: var(--ffhq-cond); font-size: 24px; font-weight: 700; letter-spacing: .03em; color: var(--ffhq-ink); margin: 2px 0 0; }
.ffhq-rpt-head .meta { text-align: right; font-size: 13px; }
.ffhq-rpt-head .meta span { display: block; color: var(--ffhq-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.ffhq-rpt-head .meta > div { margin-bottom: 6px; }

.ffhq-rpt-notes { margin: 14px 0 0; font-size: 12.5px; color: var(--ffhq-muted); line-height: 1.6; }
.ffhq-rpt-notes p { margin: 0 0 5px; }
.ffhq-rpt-empty { margin: 28px 0; padding: 22px; border: 1px dashed var(--ffhq-line); border-radius: 8px; text-align: center; font-size: 14px; color: var(--ffhq-muted); }

.ffhq-rpt-summary { display: flex; flex-wrap: wrap; gap: 26px; padding: 16px 0; margin-top: 12px; border-bottom: 1px solid var(--ffhq-line); }
.ffhq-rpt-summary .l { display: block; font-family: var(--ffhq-cond); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ffhq-muted); }
.ffhq-rpt-summary .n { display: block; font-size: 22px; font-weight: 700; color: var(--ffhq-ink); font-variant-numeric: tabular-nums; }
.ffhq-rpt-summary .d { display: block; font-size: 11.5px; color: var(--ffhq-muted); }

.ffhq-rpt-chart { margin: 22px 0; }
.ffhq-rpt-chart .ffhq-chart { width: 100%; height: auto; max-width: 720px; display: block; }
.ffhq-rpt-chartnote { font-size: 11.5px; color: var(--ffhq-muted); margin: 4px 0 0; }

.ffhq-rpt-detail { margin-top: 22px; }
.ffhq-rpt-detail h2 { font-family: var(--ffhq-cond); font-size: 15px; font-weight: 700; letter-spacing: .03em; color: var(--ffhq-ink); margin: 0 0 8px; }
.ffhq-rpt-tableempty { font-size: 13px; color: var(--ffhq-muted); margin: 0; }
.ffhq-rpt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ffhq-rpt-table.compact { max-width: 720px; margin-top: 8px; font-size: 12.5px; }
.ffhq-rpt-table th { text-align: left; padding: 7px 8px 7px 0; border-bottom: 2px solid var(--ffhq-line); font-family: var(--ffhq-cond); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ffhq-muted); }
.ffhq-rpt-table td { padding: 7px 8px 7px 0; border-bottom: 1px dashed #EEEDE6; vertical-align: top; }
/* Right-aligned cells keep their right gap and gain a left one: a right-aligned figure sits hard
   against the cell's right edge, so without the left gap it crowds the column BEFORE it too.
   Zeroing padding-right here (which this rule used to do unconditionally) fused every right-aligned
   column into its neighbour — "879:009:00" for four separate response-time figures, "0Draft" for
   responders + sign-off. Each cell was individually correct, so only rendering caught it. */
.ffhq-rpt-table th.r, .ffhq-rpt-table td.r { text-align: right; padding-left: 16px; font-variant-numeric: tabular-nums; }

/* Only a TRAILING numeric column goes flush to the table edge — the original intent of the rule. */
.ffhq-rpt-table th.r:last-child, .ffhq-rpt-table td.r:last-child { padding-right: 0; }
.ffhq-rpt-foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--ffhq-line); font-size: 11.5px; color: var(--ffhq-muted); line-height: 1.6; }

/* ---------- Batch incident detail document (cover + one incident per page) ---------- */

.ffhq-idb-page { margin-top: 18px; }
.ffhq-idb-inc { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 12px; padding: 24px 30px; }
.ffhq-idb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; border-bottom: 2px solid var(--ffhq-navy); padding-bottom: 12px; }
.ffhq-idb-head .n { font-family: var(--ffhq-cond); font-size: 19px; font-weight: 700; letter-spacing: .03em; color: var(--ffhq-ink); }
.ffhq-idb-head .t { font-size: 14px; color: var(--ffhq-ink); margin-top: 2px; }
.ffhq-idb-head .s { font-size: 12px; color: var(--ffhq-muted); margin-top: 2px; }
.ffhq-idb-head .meta { text-align: right; font-size: 13px; }
.ffhq-idb-head .meta > div { margin-bottom: 5px; }
.ffhq-idb-head .meta span { display: block; color: var(--ffhq-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }

.ffhq-idb-correction { margin: 12px 0 0; font-size: 12.5px; color: var(--ffhq-muted); font-style: italic; }

.ffhq-idb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 22px; margin-top: 14px; }
.ffhq-idb-field.wide { grid-column: 1 / -1; }
.ffhq-idb-field span { display: block; font-family: var(--ffhq-cond); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ffhq-muted); }
.ffhq-idb-field b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ffhq-ink); }

.ffhq-idb-sub { font-family: var(--ffhq-cond); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ffhq-muted); margin: 20px 0 6px; }
/* pre-wrap: a narrative typed with line breaks prints as it was written. */
.ffhq-idb-narrative { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ffhq-ink); white-space: pre-wrap; }
.ffhq-idb-narrative.none, .ffhq-idb-none { margin: 0; font-size: 13px; color: var(--ffhq-muted); font-style: italic; }

.ffhq-idb-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ffhq-idb-tbl th { text-align: left; padding: 6px 8px 6px 0; border-bottom: 2px solid var(--ffhq-line); font-family: var(--ffhq-cond); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ffhq-muted); }
.ffhq-idb-tbl td { padding: 6px 8px 6px 0; border-bottom: 1px dashed #EEEDE6; vertical-align: top; }
/* Right-aligned but NOT flush: the staffing column sits in the MIDDLE of the units table, and
   zeroing its right padding ran "STAFFING" straight into "EN ROUTE" and the figure into the next
   cell's em dash — two columns that read as one. Only a genuinely last column goes flush. */
.ffhq-idb-tbl th.r, .ffhq-idb-tbl td.r { text-align: right; font-variant-numeric: tabular-nums; }
.ffhq-idb-tbl th.r:last-child, .ffhq-idb-tbl td.r:last-child { padding-right: 0; }

.ffhq-idb-end { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--ffhq-line); font-size: 11.5px; color: var(--ffhq-muted); }

/* ---------- Incident list filter bar (mockup 2's .filters row) ---------- */

.ffhq-filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.ffhq-filterbar .f { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 8px; padding: 6px 12px; font-size: 13px; color: var(--ffhq-muted); display: flex; align-items: center; gap: 7px; }
.ffhq-filterbar .f b { color: var(--ffhq-ink); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.ffhq-filterbar .f input, .ffhq-filterbar .f select { border: none; background: transparent; font-size: 13px; color: var(--ffhq-ink); outline: none; padding: 0; max-width: 170px; }
.ffhq-filterbar .search { flex: 1; min-width: 200px; background: #fff; border: 1px solid var(--ffhq-line); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--ffhq-ink); }
.ffhq-filterbar .search:focus { outline: 2px solid var(--ffhq-navy); border-color: var(--ffhq-navy); }
.ffhq-filterbar .clear { background: none; border: none; color: var(--ffhq-navy); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 4px 2px; }

/* Platform console */
/* RM Ventures back-office. Deliberately distinct from the department app: a slate top-bar
   instead of the navy department sidebar, an amber accent, and no ffhq department chrome —
   so it is unmistakably the operator console. Reuses ffhq-* primitives (chips, tables). */
:root {
    --rmv-ink: #E8EBF0;
    --rmv-slate: #10151E;
    --rmv-slate-2: #1A222F;
    --rmv-slate-3: #232E3E;
    --rmv-line: #2C3849;
    --rmv-amber: #E0A83B;
    --rmv-accent: #4C8DD6;
}

.rmv-shell { min-height: 100vh; background: #EEF0F4; font-family: 'Segoe UI', system-ui, sans-serif; color: var(--ffhq-ink); }

.rmv-topbar {
    display: flex; align-items: center; gap: 26px; background: var(--rmv-slate);
    color: var(--rmv-ink); padding: 0 26px; height: 60px; border-bottom: 3px solid var(--rmv-amber);
}
.rmv-brand { display: flex; align-items: center; gap: 11px; }
.rmv-mark {
    width: 38px; height: 38px; border-radius: 9px; background: var(--rmv-amber); color: var(--rmv-slate);
    display: grid; place-items: center; font-family: var(--ffhq-cond);
    font-weight: 700; font-size: 16px; letter-spacing: .02em;
}
.rmv-title { font-family: var(--ffhq-cond); font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.rmv-sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--rmv-amber); }

.rmv-nav { display: flex; gap: 4px; flex: 1; }
.rmv-nav a {
    color: #9AA6B6; text-decoration: none; padding: 8px 15px; border-radius: 8px;
    font-family: var(--ffhq-cond); font-size: 14px; letter-spacing: .03em;
}
.rmv-nav a:hover { background: var(--rmv-slate-2); color: #fff; }
.rmv-nav a.active { background: var(--rmv-slate-3); color: #fff; box-shadow: inset 0 -2px 0 var(--rmv-amber); }

.rmv-user { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.rmv-username { color: #DDE3EA; font-weight: 600; }
.rmv-role { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--rmv-slate); background: var(--rmv-amber); border-radius: 5px; padding: 2px 7px; font-family: var(--ffhq-cond); }
.rmv-signout { background: none; border: 1px solid var(--rmv-line); color: #9AA6B6; border-radius: 7px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.rmv-signout:hover { border-color: var(--rmv-amber); color: #fff; }

.rmv-main { max-width: 1180px; margin: 0 auto; padding: 26px 26px 60px; }

.rmv-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rmv-h1 { font-family: var(--ffhq-cond); font-size: 24px; font-weight: 600; letter-spacing: .02em; }
.rmv-crumb { color: var(--ffhq-muted); font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rmv-muted { color: var(--ffhq-muted); }
.rmv-back { font-size: 12.5px; color: var(--rmv-accent); text-decoration: none; font-weight: 600; }
.rmv-back:hover { text-decoration: underline; }
.rmv-headactions { display: flex; gap: 10px; }

.rmv-btn {
    display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 8px;
    padding: 9px 17px; font-family: var(--ffhq-cond); font-size: 14px;
    letter-spacing: .04em; cursor: pointer; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.rmv-btn.primary { background: var(--ffhq-navy); color: #fff; }
.rmv-btn.primary:hover { background: #1E3450; box-shadow: 0 2px 8px rgba(27, 44, 66, .25); }
.rmv-btn.ghost { background: #fff; color: var(--ffhq-navy); border: 1px solid var(--ffhq-line); }
.rmv-btn.ghost:hover { border-color: var(--ffhq-navy); }
.rmv-btn.danger { background: #fff; color: var(--ffhq-crit); border: 1px solid var(--ffhq-crit); }
.rmv-btn.danger:hover { background: var(--ffhq-crit-bg); }
.rmv-btn:disabled { opacity: .55; cursor: default; box-shadow: none; }

.rmv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.rmv-kpi { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 10px; padding: 15px 18px; border-top: 4px solid var(--ffhq-navy); }
.rmv-kpi.attn { border-top-color: var(--ffhq-warn); }
.rmv-kpi .n { font-family: var(--ffhq-cond); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rmv-kpi .l { font-size: 12px; color: var(--ffhq-muted); text-transform: uppercase; letter-spacing: .07em; font-family: var(--ffhq-cond); }
.rmv-kpi .d { font-size: 12px; color: var(--ffhq-muted); margin-top: 3px; }

.rmv-card { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 10px; margin-bottom: 18px; }
.rmv-card h2 { font-family: var(--ffhq-cond); font-size: 14px; font-weight: 600; letter-spacing: .06em; padding: 13px 18px; border-bottom: 1px solid var(--ffhq-line); margin: 0; }
.rmv-empty { padding: 26px 18px; text-align: center; color: var(--ffhq-muted); font-size: 13.5px; }
.rmv-flash { margin-bottom: 16px; }

.rmv-statusbars { padding: 16px 18px; display: grid; gap: 12px; }
.rmv-statusbar { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.rmv-statusbar .ffhq-chip { width: 92px; text-align: center; margin: 0; }
.rmv-statusbar .bar { flex: 1; height: 10px; background: #EFEEE8; border-radius: 99px; overflow: hidden; }
.rmv-statusbar .bar i { display: block; height: 100%; border-radius: 99px; }
.rmv-statusbar b { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* Approvals queue */
.rmv-appcard { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 10px; border-left: 4px solid var(--ffhq-warn); padding: 16px 18px; margin-bottom: 14px; }
.rmv-appcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rmv-appcard-name { font-family: var(--ffhq-cond); font-size: 18px; font-weight: 600; letter-spacing: .02em; }
.rmv-appcard-meta { color: var(--ffhq-muted); font-size: 12.5px; margin-top: 2px; }
.rmv-appcard-chief { margin: 12px 0; padding: 10px 0; border-top: 1px dashed var(--ffhq-line); border-bottom: 1px dashed var(--ffhq-line); }
.rmv-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ffhq-muted); font-family: var(--ffhq-cond); margin-bottom: 3px; }
.rmv-chief { font-size: 13.5px; font-weight: 600; }
.rmv-chief .rmv-muted { font-weight: 400; margin-left: 6px; }
.rmv-appcard-actions { display: flex; gap: 10px; margin-top: 4px; }

/* Directory + tables */
.rmv-filterbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.rmv-search { flex: 1; min-width: 220px; background: #fff; border: 1px solid var(--ffhq-line); border-radius: 8px; padding: 9px 13px; font-size: 13.5px; color: var(--ffhq-ink); }
.rmv-search:focus { outline: 2px solid var(--ffhq-navy); border-color: var(--ffhq-navy); }
.rmv-statusfilter { display: flex; gap: 6px; }
.rmv-statusfilter span { background: #fff; border: 1px solid var(--ffhq-line); border-radius: 99px; padding: 6px 14px; font-size: 12.5px; color: var(--ffhq-muted); cursor: pointer; user-select: none; }
.rmv-statusfilter span.on { background: var(--ffhq-navy); border-color: var(--ffhq-navy); color: #fff; font-weight: 600; }
.rmv-tbl td { white-space: nowrap; }
.rmv-rowlink { cursor: pointer; }
.rmv-rowlink:hover td { background: #F5F7FA !important; }
.rmv-supportcell { white-space: nowrap; }
.rmv-supportcell .ffhq-linklike { margin-right: 12px; font-size: 12.5px; }
.rmv-inlineform { display: inline; }
.rmv-loginas { font-weight: 600; color: var(--rmv-accent) !important; }

/* Department detail */
.rmv-detailcols { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .rmv-detailcols { grid-template-columns: 1fr; } }
/* The two NERIS cards ride side by side across the FULL page width, below .rmv-detailcols rather than
   inside its 340px rail — at rail width, 50/50 gave each about 160px and wrapped the note text to two
   or three words a line. minmax(0,1fr) rather than 1fr so the failures table shrinks its column
   instead of forcing the pair wider than the page.

   Stacks at 1000px, the same breakpoint .rmv-detailcols uses. Matching it means the page has one
   layout change rather than two, instead of the NERIS row collapsing on its own while the columns
   above it are still side by side. */
.rmv-nerispair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .rmv-nerispair { grid-template-columns: minmax(0, 1fr); } }
/* The failures table is the one thing here that can outgrow a half-width card. */
.rmv-nerispair .rmv-table { display: block; overflow-x: auto; }

.rmv-settings { padding: 14px 18px; display: grid; gap: 12px; }
/* CORE SETTINGS is a full-width card now, so its four fields sit in a ROW. Left as the single stacked
   column it inherited from the 340px rail, the card would be a page-wide box with a ribbon of inputs
   down its left edge and nothing beside them.

   WEIGHTED, not equal. auto-fit with a uniform floor gave all four the same width, which truncated
   "Pine Valley Volunteer Fire Department" to "Pine Valley Volunteer Fire Depa" while STATE — two
   characters, always — sat in an equally wide box. The name is the longest value on the page and the
   state is the shortest, so the tracks say so. Time zone gets room for the longest label on the list
   ("Hawaii-Aleutian — Adak") plus the select's own chevron.

   minmax(0, …) on every track: without the 0 floor, a long department name sets the track's minimum
   to its own content width and pushes the row wider than the card. The save button takes a full-width
   row of its own (grid-column: 1/-1) so it never lands mid-row looking like a fifth field. */
.rmv-settings-wide { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 1.35fr); gap: 12px 18px; align-items: end; }
.rmv-settings-wide .rmv-settings-save { grid-column: 1 / -1; }
/* Two up, then stacked. Below ~900px four tracks put the name back to a truncating width. */
@media (max-width: 900px) { .rmv-settings-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .rmv-settings-wide { grid-template-columns: minmax(0, 1fr); } }
/* Buttons inside the settings grid keep their natural width instead of stretching. */
.rmv-settings .rmv-btn, .rmv-settings .ffhq-btn { justify-self: start; }
.rmv-detailcol { white-space: normal; max-width: 40ch; color: var(--ffhq-muted); font-size: 12.5px; }
/* One-line explanation under a card heading. */
.rmv-cardnote { padding: 0 18px 10px; font-size: 12.5px; }
/* Billing actions: the current-state line above a control, and its submit under the inputs. */
.rmv-actnow { font-size: 13px; margin-bottom: 8px; }
.rmv-actbtn { margin-top: 10px; }
/* Adjustment reasons answer "why is this department paying less than list?", so they wrap in full
   instead of running off the side. The element qualifier is needed: .rmv-tbl td's nowrap outranks
   a bare single-class selector. */
.rmv-tbl td.rmv-wrapcell { white-space: normal; min-width: 24ch; }
/* Code rows carry several actions (edit / deactivate / delete), so they need breathing room. */
.rmv-tbl td.rmv-rowacts .ffhq-linklike { margin-right: 12px; font-size: 12.5px; }
/* The inline code editor spans a whole row, so its cell behaves as a panel, not a table cell
   (.rmv-tbl td's nowrap would otherwise run the form off the side). */
.rmv-tbl td.rmv-editcell { white-space: normal; padding: 0; }
.rmv-editbtns { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Label/value pairs (billing summary). */
.rmv-kv { padding: 14px 18px; display: grid; gap: 9px; }
.rmv-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rmv-kv span { color: var(--ffhq-muted); font-size: 12.5px; }
.rmv-kv b { font-size: 13px; text-align: right; }

/* Impersonation banner (app-wide while a support session is active) */
.ffhq-imp-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
    display: flex; align-items: center; gap: 12px;
    background: repeating-linear-gradient(45deg, #7A1E12, #7A1E12 12px, #8C2417 12px, #8C2417 24px);
    color: #fff; padding: 9px 18px; font-size: 13.5px; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.ffhq-imp-warn { font-size: 17px; }
.ffhq-imp-text { flex: 1; }
.ffhq-imp-text b { font-weight: 700; }
.ffhq-imp-exit button {
    background: #fff; color: #7A1E12; border: none; border-radius: 7px; padding: 6px 16px;
    font-family: var(--ffhq-cond); font-weight: 700; font-size: 13px;
    letter-spacing: .04em; cursor: pointer;
}
.ffhq-imp-exit button:hover { background: #FFE8E3; }
/* Push the department shell down so the fixed banner never covers content. */
.ffhq-shell:has(.ffhq-imp-banner) { padding-top: 40px; }

/* ---- Mobile app shell: hamburger drawer (CSS-only via #ffhq-navtoggle) ---- */
.ffhq-topbar { display: none; }
.ffhq-nav-backdrop { display: none; }

@media (max-width: 820px) {
    .ffhq-shell { flex-direction: column; }

    .ffhq-topbar {
        display: flex; align-items: center; gap: 12px; flex-shrink: 0;
        position: sticky; top: 0; z-index: 45; height: 52px; padding: 0 14px;
        background: var(--ffhq-navy-deep); color: #fff;
    }
    .ffhq-burger { font-size: 26px; line-height: 1; color: #fff; cursor: pointer; padding: 2px 8px; user-select: none; }

    /* ---- Editing panels become bottom sheets ---------------------------
       In the two-column layouts the editing panel is a sibling column. Collapsing to one column
       on a phone dropped it BELOW the list, so tapping "Add" produced no visible change and the
       form sat several screens down — it read as a dead button.

       Pages opt in with .ffhq-sheet, and only while a panel is actually open: on Personnel the
       drawer is always in the markup (it holds the empty "select a member" state), so styling
       .ffhq-drawer itself would cover the roster permanently. */
    /* THE PAGE BEHIND AN OPEN SHEET MUST NOT SCROLL. The sheet is a fixed overlay that scrolls
       internally, and the document behind it stayed scrollable — so there were two scrollbars and
       the gesture moved the wrong one. On a short screen the sheet's action row (Save / Cancel /
       Retire) sits below the fold: you would scroll to reach it, the page behind would move instead,
       the sheet would not, and the button was simply unreachable-looking. Measured on the apparatus
       edit sheet at 390x420: 809px of the sheet hidden, Save among it.

       :has() rather than a body class because a sheet is opened by Blazor state, not by JS that
       could toggle a class — and .ffhq-sheet is applied ONLY while a panel is open (see above), so
       its presence in the DOM is exactly the condition. Already used elsewhere in this file.

       BOTH html AND body, and that is not belt-and-braces. document.scrollingElement here is HTML,
       so `body { overflow: hidden }` alone clips the body box while the document keeps scrolling
       underneath — measured: body overflow hidden, html still scrolling, two scrollbars unchanged.
       The html selector is the one doing the work; body is kept so the fix survives the scroller
       moving. */
    html:has(.ffhq-sheet),
    body:has(.ffhq-sheet) { overflow: hidden; }

    .ffhq-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        /* dvh, NOT vh. On iOS Safari and Chrome Android vh resolves against the LARGEST viewport —
           the one with the URL bar retracted — so a sheet pinned to bottom:0 can extend underneath
           the browser chrome and put its action row off-screen with no way to scroll to it. That is
           why the symptom was intermittent: it depends on whether the URL bar is expanded, which
           changes as you scroll. dvh tracks the viewport actually visible right now.
           The vh line stays first as the fallback for browsers without dvh. */
        max-height: 88vh;
        max-height: 88dvh;
        overflow-y: auto;
        background: var(--ffhq-paper);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -14px 40px rgba(0, 0, 0, .34);
        padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px));
        animation: ffhq-sheet-up .2s ease-out;

        /* THESE THREE RESETS ARE THE FIX, NOT TIDYING. An older, unrelated component — the
           apparatus-check severity sheet — already owns the class name `.ffhq-sheet` further up this
           file, where it is a narrow CENTRED panel: `left: 50%`, `transform: translateX(-50%)`,
           `max-width: 480px`.
           This rule wins `left` because it comes later, but it never touched `transform` or
           `max-width`, so both survived the cascade. The result on a phone was a full-width sheet
           still shifted half its own width to the left — hanging off the screen edge and
           unreachable, exactly as reported.
           Long term the two components should not share a class name at all; until then these must
           stay, and anything added to the rule above must be neutralised here. */
        transform: none;
        max-width: none;
        width: auto;
    }
    /* Above the tab bar (50) and the nav drawer (60): an open editor is the top layer. */
    @keyframes ffhq-sheet-up { from { transform: translateY(14px); opacity: .4; } to { transform: none; opacity: 1; } }

    .ffhq-sheet .ffhq-sheet-head {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: sticky; top: 0; z-index: 1;
        margin: 0 -12px 10px; padding: 12px 14px;
        background: var(--ffhq-paper); border-bottom: 1px solid var(--ffhq-line);
    }
    .ffhq-sheet .ffhq-sheet-head .t {
        font-family: var(--ffhq-cond); font-size: 15px; letter-spacing: .04em;
        text-transform: uppercase; color: var(--ffhq-navy);
    }
    .ffhq-sheet-close {
        background: none; border: 0; font-size: 19px; line-height: 1; cursor: pointer;
        color: var(--ffhq-muted); padding: 4px 8px; border-radius: 6px;
    }
    .ffhq-sheet-close:focus-visible { outline: 2px solid var(--ffhq-navy); outline-offset: 1px; }

    @media (prefers-reduced-motion: reduce) { .ffhq-sheet { animation: none; } }

    .ffhq-topbar-title { font-family: var(--ffhq-cond); font-weight: 600; letter-spacing: .04em; font-size: 16px; }

    /* Sidebar becomes an off-canvas drawer. */
    .ffhq-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 264px; max-width: 82vw;
        transform: translateX(-100%); transition: transform .22s ease;
        z-index: 60; overflow-y: auto;
    }
    .ffhq-navtoggle:checked ~ .ffhq-sidebar { transform: translateX(0); box-shadow: 0 0 44px rgba(0, 0, 0, .5); }
    .ffhq-navtoggle:checked ~ .ffhq-nav-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 55;
    }

    /* Bottom padding was 74px to clear the fixed tab bar. The bar is gone (to be reinstated later),
       and 74px of it would now be a band of nothing under every phone page. The safe-area inset
       stays: it clears the home indicator, which has not gone anywhere. Restore the 74px in the same
       change that brings the bar back, or the last control on every page ends up behind it. */
    .ffhq-main {
        max-width: none; width: 100%; min-width: 0;
        padding: 16px 14px calc(24px + env(safe-area-inset-bottom, 0px));
    }
    /* Flex/grid children default to min-width:auto and stretch to their widest content
       (e.g. a wide table), overflowing the viewport. Let the chain shrink instead. */
    .ffhq-card, .ffhq-dashcols, .ffhq-cols, .ffhq-cal-cols, .ffhq-pts-cols,
    .ffhq-apparatus-cols, .ffhq-account-grid, .ffhq-expgrid, .ffhq-apparatus-main { min-width: 0; }
    .ffhq-dashcols, .ffhq-cols, .ffhq-cal-cols, .ffhq-pts-cols { grid-template-columns: minmax(0, 1fr); }
    /* Wide data tables scroll in place instead of stretching the page. */
    .ffhq-main table { display: block; width: 100%; overflow-x: auto; }

    /* KPI tiles ride 2-up on phones — four full-width tiles ate the whole first screen. */
    .ffhq-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ffhq-kpi { padding: 12px 14px; }
    .ffhq-kpi .n { font-size: 24px; }

    /* Stacked, single-column time fields (Dispatched / Answered / On scene / Cleared). */
    .ffhq-timegrid { grid-template-columns: 1fr; }

    /* Tables opted into cards render each row as a labelled stacked card — no side-scroll. */
    .ffhq-tbl-cards, .ffhq-tbl-cards tbody { display: block; overflow: visible; }
    .ffhq-tbl-cards thead { display: none; }
    .ffhq-tbl-cards tr {
        display: block; background: #fff; border: 1px solid var(--ffhq-line);
        border-radius: 10px; padding: 2px 13px; margin-bottom: 10px;
    }
    .ffhq-tbl-cards tbody tr:hover td { background: none; }
    .ffhq-tbl-cards td {
        display: flex; justify-content: space-between; align-items: center; gap: 14px;
        white-space: normal; text-align: right; padding: 7px 0; border: none;
    }
    .ffhq-tbl-cards td:not(:first-child) { border-top: 1px dashed #EEEDE6; }
    .ffhq-tbl-cards td::before {
        content: attr(data-label); flex-shrink: 0; text-align: left;
        font-family: var(--ffhq-cond); font-size: 10.5px; font-weight: 600;
        text-transform: uppercase; letter-spacing: .07em; color: var(--ffhq-muted);
    }
    .ffhq-tbl-cards td.ffhq-noaction { display: none; }
    .ffhq-tbl-cards td.ffhq-tbl-action { justify-content: flex-end; }
    .ffhq-tbl-cards td.ffhq-tbl-action::before { content: none; }
    .ffhq-tbl-cards td.ffhq-tbl-action .ffhq-btn { width: 100%; }
    .ffhq-tbl-cards td.ffhq-empty { display: block; text-align: center; }
    .ffhq-tbl-cards td.ffhq-empty::before { content: none; }
    /* The expanded detail panel is a full-width block inside the card, not a labelled field. */
    .ffhq-tbl-cards tr.ffhq-detailrow td { display: block; text-align: left; }
    .ffhq-tbl-cards tr.ffhq-detailrow td::before { content: none; }
}

/* ---- Native-app affordances (capacitor-bridge.js adds .capacitor on the native shell) ---- */
.capacitor-only { display: none; }
.capacitor .capacitor-only { display: block; }
.capacitor .auth-webonly { display: none; }
/* Inline variants for use inside a label, where display:block would break the row. */
.capacitor-only-inline { display: none; }
.capacitor .capacitor-only-inline { display: inline; }
.capacitor .auth-webonly-inline { display: none; }

/* Biometric lock. The overlay is painted from the initial HTML by the head script in App.razor,
   not injected after load - with Blazor Server streaming the page in, anything added by a script
   at the end of body flashes the app contents first. */
.rhq-lock { display: none; position: fixed; inset: 0; z-index: 2147483647;
  background: var(--ffhq-navy-deep, #16232F);
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  color: #fff; text-align: center; padding: 32px; }
html.rhq-locked .rhq-lock { display: flex; }
/* Cover the app itself rather than trusting the overlay to sit on top of every stacking context a
   page might create. visibility, not display, so Blazor's DOM is untouched while it is hidden. */
html.rhq-locked body > *:not(.rhq-lock) { visibility: hidden; }
.rhq-lock img { width: 132px; height: auto; margin-bottom: 4px; }
.rhq-lock p { color: #B9C2CE; font-size: 14.5px; margin: 0; max-width: 22em; }
.rhq-lock button { font: inherit; font-weight: 600; padding: 12px 22px; border-radius: 8px; border: 0;
  background: var(--ffhq-gold, #E8C63D); color: #16232F; cursor: pointer; }
.rhq-lock .rhq-lock-alt { background: none; color: #B9C2CE; text-decoration: underline; padding: 6px; }
html.rhq-locked, html.rhq-locked body { overflow: hidden; }

.ffhq-faceid { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; margin: 0; }
.ffhq-faceid .hint { display: block; color: var(--ffhq-muted); font-size: 12.5px; margin-top: 3px; font-weight: 400; }
.ffhq-faceid input { width: 20px; height: 20px; accent-color: var(--ffhq-navy); flex-shrink: 0; }

/* ---- Billing: Square Web Payments SDK card entry iframe host ---- */
/* The card form is capped even though its card is now full width. Stripe's Payment Element lays its
   fields out to whatever room it is given, and a card number stretched across a 1600px monitor reads
   as a bug, not as generosity. 560px is about a comfortable form column. */
.ffhq-sq-card { min-height: 90px; margin: 10px 0; padding: 10px; border: 1px solid var(--ffhq-border, #d8d5cc); border-radius: 8px; max-width: 560px; }
#sq-email { max-width: 560px; }

/* Billing actions tab strip in the platform console. Reuses .ffhq-tabs wholesale — the console had
   no tab pattern of its own, and inventing a second one so the two could drift apart is exactly the
   sprawl this grouping exists to undo. Only the spacing is adjusted: this strip sits INSIDE a card
   under its explanatory note, not at the top of a page. */
.rmv-billtabs { margin-top: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.rmv-billtabs button { font-size: 13px; }