/* fr-report.css — canonical stylesheet for the "fr-*" report/page family.
 * THE shared component library for financial/lease report pages (per epic #99).
 * Reconciled 2026-09-05 from 14 pages that previously inlined this family
 * separately (financial-reports, lease-engine, cash-forecast,
 * reps-qualification, lease-template, member-basis, insurance-adequacy,
 * schedule-e-report, member-comp, depreciation-modeler,
 * deferred-rent-schedule, lease-calendar, lease-amendments, lease-abstracts).
 * Variant conflicts were resolved in favor of the majority; ties favored
 * financial-reports.html (the primary-tier page). See
 * docs/ui-refresh/06-decisions-log.md for the reconciliation record.
 * New report/page-shaped features should link this file, not copy it. */

:root {
  --fr-bg: #f7f8fb;
  --fr-paper: var(--surface, #fff);
  --fr-line: #e3e7ed;
  --fr-line-soft: #eef1f4;
  --fr-ink: #171b24;
  --fr-muted: #687180;
  --fr-blue: var(--accent);
  --fr-blue-soft: var(--accent-soft);
  --fr-green: var(--good);
  --fr-green-soft: var(--good-soft);
  --fr-red: var(--bad);
  --fr-red-soft: var(--bad-soft);
  --fr-warn: var(--warn);
  --fr-warn-soft: var(--warn-soft);
  --fr-radius: 12px;
}

.fr-page { min-height: calc(100vh - 57px); background: var(--fr-bg); color: var(--fr-ink); }
.fr-shell { max-width: 1360px; margin: 0 auto; padding: 30px 28px 72px; }
/* Wide workbench variant — same masthead/spacing tokens as the narrow report
 * shell, sized for multi-column tool pages (cam, plaid, books-home, ledger,
 * ap-bills, money-in) instead of a single centered report column. */
.fr-page--wide .fr-shell { max-width: 1440px; }
.fr-masthead { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--fr-line); }
.fr-kicker { margin: 0 0 7px; color: var(--fr-blue); font: 700 10px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.fr-masthead h1 { margin: 0 0 7px; color: var(--fr-ink); font: 800 30px/1.15 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.04em; }
.fr-lede { max-width: 720px; margin: 0; color: var(--fr-muted); font-size: 13px; line-height: 1.6; }
.fr-mast-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; justify-content: flex-end; }
.fr-masthead.plain { border-bottom: 0; padding-bottom: 0; }
.fr-readonly { display: inline-flex; align-items: center; gap: 7px; color: var(--fr-muted); font-size: 11px; white-space: nowrap; }
.fr-readonly i { width: 7px; height: 7px; border-radius: 50%; background: var(--fr-green); }
.fr-route { display: none; margin-top: 20px; padding: 18px 20px; color: #1854a8; background: var(--fr-blue-soft); border: 1px solid #cfe0ff; border-radius: var(--fr-radius); font-size: 13px; }
.fr-route.visible { display: flex; align-items: center; gap: 12px; }
.fr-route strong { color: var(--fr-ink); }
.fr-route .fr-icon { color: var(--fr-blue); font-size: 21px; }
.fr-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 20px 0 16px; }
.fr-field { display: grid; gap: 6px; min-width: 150px; }
/* .fr-field's own display:grid otherwise beats the UA [hidden] rule at equal
 * specificity, so a conditionally-shown field (transactions.html's tenant
 * filter) stays visible even with the hidden attribute set. #103. */
.fr-field[hidden] { display: none; }
.fr-field span { color: var(--fr-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fr-field input { box-sizing: border-box; height: 38px; width: 100%; padding: 0 11px; color: var(--fr-ink); background: var(--fr-paper); border: 1px solid var(--fr-line); border-radius: 7px; font: 500 12px 'Geist Mono', ui-monospace, monospace; }
.fr-field input:focus-visible, .fr-button:focus-visible, .fr-tab:focus-visible, .fr-link:focus-visible { outline: 2px solid var(--fr-blue); outline-offset: 2px; }
.fr-button { height: 38px; padding: 0 17px; color: #fff; background: var(--fr-blue); border: 1px solid var(--fr-blue); border-radius: 7px; cursor: pointer; font: 800 12px 'Plus Jakarta Sans', system-ui, sans-serif; }
.fr-button .fr-icon, .fr-btn .fr-icon { font-size: 16px; }
.fr-button:hover { filter: brightness(.95); }
.fr-button:disabled { cursor: wait; opacity: .6; }
.fr-range-note { margin: 0 0 0 auto; color: var(--fr-muted); font-size: 11px; }
.fr-tabs { display: flex; gap: 4px; padding: 0 0 17px; border-bottom: 1px solid var(--fr-line); overflow-x: auto; }
.fr-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; color: var(--fr-muted); background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; font: 700 12px 'Plus Jakarta Sans', system-ui, sans-serif; white-space: nowrap; }
.fr-tab:hover { color: var(--fr-ink); background: #fff; }
.fr-tab.active { color: var(--fr-blue); background: var(--fr-blue-soft); border-color: #d4e2ff; }
.fr-tab .expert { color: inherit; font: 500 10px 'Geist Mono', ui-monospace, monospace; opacity: .72; }
.fr-status { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 35px; color: var(--fr-muted); font-size: 11px; }
.fr-status strong { color: var(--fr-ink); }
.fr-fresh { text-align: right; }
.fr-report { background: var(--fr-paper); border: 1px solid var(--fr-line); border-radius: 9px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 25, 35, .025); }
.fr-report-head { padding: 27px 32px 21px; text-align: center; border-bottom: 1px solid var(--fr-line-soft); }
.fr-report-head h2 { margin: 0 0 6px; color: var(--fr-ink); font: 800 21px/1.25 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.025em; }
.fr-report-head p { margin: 0; color: var(--fr-muted); font-size: 11px; }
.fr-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--fr-line); }
.fr-stat { min-width: 0; padding: 17px 20px; border-right: 1px solid var(--fr-line); }
.fr-stat:last-child { border-right: 0; }
.fr-stat-label { color: var(--fr-muted); font-size: 10px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.fr-stat-value { margin-top: 7px; color: var(--fr-ink); font: 700 21px/1.2 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-stat-note { margin-top: 5px; color: var(--fr-muted); font-size: 10px; line-height: 1.4; }
.fr-stat-value.positive { color: var(--fr-green); }
.fr-stat-value.negative { color: var(--fr-red); }
.fr-report-body { padding: 25px 28px 30px; }
.fr-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 24px; align-items: start; }
.fr-section { min-width: 0; }
.fr-section + .fr-section { margin-top: 22px; }
.fr-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin-bottom: 10px; }
.fr-section-head h3 { margin: 0; color: var(--fr-ink); font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.fr-section-head p { margin: 0; color: var(--fr-muted); font-size: 10px; text-align: right; }
.fr-table-wrap { overflow-x: auto; border: 1px solid var(--fr-line); border-radius: 8px; }
.fr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fr-table th { padding: 9px 12px; color: var(--fr-muted); background: #fafbfc; border-bottom: 1px solid var(--fr-line); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.fr-table td { padding: 9px 12px; color: #3f4754; border-bottom: 1px solid var(--fr-line-soft); vertical-align: middle; }
.fr-table tbody tr:last-child td { border-bottom: 0; }
.fr-table tbody tr:hover td { background: #fbfdff; }
.fr-table .num { color: var(--fr-ink); font: 500 11px 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fr-table .code { width: 70px; color: var(--fr-muted); font: 500 10px 'Geist Mono', ui-monospace, monospace; white-space: nowrap; }
.fr-table .account { color: var(--fr-ink); font-weight: 600; }
.fr-table .type { color: var(--fr-muted); font-size: 10px; text-transform: capitalize; }
.fr-table .subtotal td { color: var(--fr-ink); background: #fafbfc; border-top: 1px solid #cfd5dc; border-bottom-color: #cfd5dc; font-weight: 800; }
.fr-table .total-row td { color: var(--fr-ink); border-top: 1px solid #b7c0cc; border-bottom: 0; font-weight: 800; }
.fr-table .negative { color: var(--fr-red); }
.fr-table .positive { color: var(--fr-green); }
.fr-table .indent { padding-left: 25px; }
.fr-balance-note { display: inline-flex; align-items: center; gap: 6px; color: var(--fr-green); font-size: 10px; font-weight: 700; }
.fr-balance-note.warn { color: var(--fr-warn); }
.fr-balance-note i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.fr-guidance { margin-top: 21px; padding: 14px 16px; color: #4f5867; background: #fafbfc; border-left: 3px solid var(--fr-blue); font-size: 11px; line-height: 1.55; }
.fr-guidance strong { color: var(--fr-ink); }
.fr-report-foot { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 12px 16px; color: var(--fr-muted); border-top: 1px solid var(--fr-line); font-size: 10px; }
.fr-report-foot a { color: var(--fr-blue); font-weight: 700; text-decoration: none; }
.fr-state { display: grid; place-items: center; min-height: 390px; padding: 35px; color: var(--fr-muted); text-align: center; font-size: 12px; line-height: 1.55; }
.fr-state strong { display: block; margin-bottom: 5px; color: var(--fr-ink); font-size: 14px; }
.fr-state.error { color: var(--fr-red); background: var(--fr-red-soft); }
.fr-state.error strong { color: var(--fr-red); }
.fr-state.empty { min-height: 190px; }
.fr-skeleton { width: min(550px, 90%); }
.fr-skeleton span { display: block; height: 12px; margin: 10px auto; background: #edf0f4; border-radius: 5px; animation: fr-pulse 1.2s ease-in-out infinite alternate; }
.fr-skeleton span:nth-child(2) { width: 75%; }
.fr-skeleton span:nth-child(3) { width: 55%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fr-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; color: var(--fr-ink); background: #fff; border: 1px solid var(--fr-line); border-radius: 7px; cursor: pointer; font: 700 11.5px 'Plus Jakarta Sans', system-ui, sans-serif; text-decoration: none; }
.fr-btn:hover { background: #fafbfc; }
.fr-btn.primary { color: #fff; background: var(--fr-blue); border-color: var(--fr-blue); }
.fr-btn.primary:hover { filter: brightness(1.06); }
.fr-btn.danger { color: var(--fr-red); border-color: #f0c7ca; }
.fr-btn:disabled { opacity: .5; cursor: not-allowed; }
.fr-btn.small { height: 27px; padding: 0 10px; font-size: 10.5px; }
.fr-table tbody tr.record-row { cursor: pointer; }
.fr-table tbody tr.record-row:hover td { background: #fbfdff; }
.fr-table tbody tr.record-row.open td { background: var(--fr-blue-soft); }
.fr-field input:focus-visible, .fr-button:focus-visible { outline: 2px solid var(--fr-blue); outline-offset: 2px; }
.fr-table .date { color: var(--fr-muted); font: 500 11px 'Geist Mono', ui-monospace, monospace; white-space: nowrap; }
.fr-table .source { color: var(--fr-muted); font-size: 10px; text-transform: capitalize; }
.fr-table .desc { color: var(--fr-ink); }
.fr-field input, .fr-field select { box-sizing: border-box; height: 38px; width: 100%; padding: 0 11px; color: var(--fr-ink); background: var(--fr-paper); border: 1px solid var(--fr-line); border-radius: 7px; font: 500 12px 'Geist Mono', ui-monospace, monospace; }
.fr-field input:focus-visible, .fr-field select:focus-visible, .fr-button:focus-visible { outline: 2px solid var(--fr-blue); outline-offset: 2px; }
.fr-table .label { color: var(--fr-ink); font-weight: 600; }
.fr-table .result-pass { color: var(--fr-green); font-weight: 700; }
.fr-table .result-fail { color: var(--fr-red); font-weight: 700; }
.fr-balance-note.fail { color: var(--fr-red); }
.fr-guidance.warn { background: var(--fr-warn-soft); border-left-color: var(--fr-warn); color: var(--fr-warn); }
.fr-guidance.warn strong { color: var(--fr-warn); }
.fr-alert { padding: 13px 16px; margin-bottom: 16px; background: var(--fr-red-soft); border: 1px solid #f5d5d9; border-radius: 8px; color: var(--fr-red); font-size: 11px; line-height: 1.55; }
.fr-alert strong { color: var(--fr-red); }
.fr-alert ul { margin: 6px 0 0 18px; padding: 0; }
.fr-alert li { margin: 4px 0; }
.fr-button.secondary { background: transparent; color: var(--fr-blue); border-color: var(--fr-line); }
.fr-button.secondary:hover { background: var(--fr-blue-soft); }
.fr-button.danger { background: var(--fr-red); border-color: var(--fr-red); }
.fr-button.ghost { background: transparent; color: var(--fr-blue); border: 1px dashed var(--fr-blue); }
.fr-button.ghost:hover { background: var(--fr-blue-soft); }
.fr-table .member { color: var(--fr-ink); font-weight: 600; }
.fr-table .tenant { color: var(--fr-ink); font-weight: 600; }
.fr-table .status { font-size: 10px; text-align: center; }
.fr-table .status-ok { color: var(--fr-green); font-weight: 700; }
.fr-table .status-warn { color: var(--fr-warn); font-weight: 700; }
.fr-table .status-error { color: var(--fr-red); font-weight: 700; }
.fr-table .issues { color: var(--fr-muted); font-size: 11px; line-height: 1.35; }
.fr-balance-note.error { color: var(--fr-red); }
.fr-field select { box-sizing: border-box; height: 38px; width: 100%; padding: 0 11px; color: var(--fr-ink); background: var(--fr-paper); border: 1px solid var(--fr-line); border-radius: 7px; font: 500 12px 'Geist Mono', ui-monospace, monospace; }
.fr-field select:focus-visible, .fr-button:focus-visible { outline: 2px solid var(--fr-blue); outline-offset: 2px; }
/* fr-field had input/select but no textarea variant — added for #106
 * (tasks.html's New Task modal notes field). Same box/border/font as
 * input/select, just auto height with a sane minimum instead of a fixed
 * 38px line. */
.fr-field textarea { box-sizing: border-box; width: 100%; padding: 9px 11px; color: var(--fr-ink); background: var(--fr-paper); border: 1px solid var(--fr-line); border-radius: 7px; font: 500 12px 'Geist Mono', ui-monospace, monospace; resize: vertical; min-height: 70px; }
.fr-field textarea:focus-visible { outline: 2px solid var(--fr-blue); outline-offset: 2px; }
.fr-alert.warn { background: var(--fr-warn-soft); border-color: var(--fr-warn); color: #3f3c1a; }
.fr-guidance ul { margin: 8px 0 0; padding-left: 18px; }
.fr-guidance li { margin-bottom: 5px; }
.fr-form { background: var(--fr-paper); border: 1px solid var(--fr-line); border-radius: var(--fr-radius); padding: 24px 28px; margin: 24px 0; }
.fr-form-group { display: grid; gap: 8px; margin-bottom: 16px; }
.fr-form-group:last-child { margin-bottom: 0; }
.fr-form-group label { display: block; color: var(--fr-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fr-form-group input,
    .fr-form-group select { box-sizing: border-box; height: 38px; width: 100%; padding: 0 11px; color: var(--fr-ink); background: var(--fr-paper); border: 1px solid var(--fr-line); border-radius: 7px; font: 500 12px 'Geist Mono', ui-monospace, monospace; }
.fr-form-group select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687180' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 20px; padding-right: 32px; }
.fr-form-group input:focus-visible,
    .fr-form-group select:focus-visible { outline: 2px solid var(--fr-blue); outline-offset: 2px; }
.fr-form-group input::placeholder { color: var(--fr-muted); opacity: .6; }
.fr-form-group.optional label::after { content: ' (optional)'; font-weight: 400; opacity: .7; }
.fr-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.fr-form-row .fr-form-group { margin-bottom: 0; }
.fr-form-actions { display: flex; gap: 12px; margin-top: 22px; }
.fr-section:last-child { margin-bottom: 0; }
.fr-guidance li:last-child { margin-bottom: 0; }
.fr-table .month { color: var(--fr-muted); font-size: 11px; white-space: nowrap; }
.fr-lease-group { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--fr-line); }
.fr-lease-group:last-child { border-bottom: 0; }
/* Independent bordered stat-tile grid — originally the lease-summary pattern
 * (still used under that name by the lease pages), generalized here as
 * .fr-tiles/.fr-tile for any page-level KPI row (books-home, cam, ledger,
 * ap-bills, briefing, money-in) that shows a few numbers as standalone cards
 * rather than the connected .fr-summary strip used inside a .fr-report. */
.fr-lease-summary, .fr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.fr-lease-stat, .fr-tile { min-width: 0; padding: 12px 14px; background: #fafbfc; border-radius: 7px; border: 1px solid var(--fr-line-soft); }
.fr-lease-stat-label, .fr-tile-label { color: var(--fr-muted); font-size: 9px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.fr-lease-stat-value, .fr-tile-value { margin-top: 5px; color: var(--fr-ink); font: 600 16px/1.2 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.fr-lease-stat-value.negative, .fr-tile-value.negative { color: var(--fr-red); }
.fr-lease-stat-value.positive, .fr-tile-value.positive { color: var(--fr-green); }
.fr-tile-note { margin-top: 4px; color: var(--fr-muted); font-size: 11px; line-height: 1.4; }
.fr-tab:focus-visible { outline: 2px solid var(--fr-blue); outline-offset: 2px; }

@media (max-width: 900px) {
  .fr-shell { padding: 22px 16px 55px; }
  .fr-masthead { display: block; }
  .fr-mast-actions { justify-content: flex-start; margin-top: 17px; }
  .fr-range-note { width: 100%; margin-left: 0; }
  .fr-columns { grid-template-columns: 1fr; }
  .fr-summary { grid-template-columns: 1fr 1fr; }
  .fr-stat { border-bottom: 1px solid var(--fr-line); }
  .fr-stat:nth-child(2) { border-right: 0; }
  .fr-stat:nth-child(3), .fr-stat:nth-child(4) { border-bottom: 0; }
  .fr-form-row { grid-template-columns: 1fr; }
  .fr-lease-summary, .fr-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .fr-masthead h1 { font-size: 25px; }
  .fr-toolbar { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .fr-field { min-width: 0; }
  .fr-button { width: 100%; }
  .fr-status { display: block; padding: 9px 0; }
  .fr-fresh { margin-top: 4px; text-align: left; }
  .fr-summary { grid-template-columns: 1fr 1fr; }
  .fr-stat { border-bottom: 1px solid var(--fr-line); }
  .fr-stat:nth-child(2) { border-right: 0; }
  .fr-stat:nth-child(3), .fr-stat:nth-child(4) { border-bottom: 0; }
  .fr-report-head { padding: 22px 17px 18px; }
  .fr-report-body { padding: 20px 14px 23px; }
  .fr-table { min-width: 560px; }
  .fr-stat:last-child { border-bottom: 0; }
  .fr-form-row { grid-template-columns: 1fr; }
  .fr-lease-summary { grid-template-columns: 1fr; }
}

/* Bordered header/body/foot card — added for the Phase 4b money-workflow
 * batch (money-out, ap-payments, workflow-studio, month-end-review,
 * sales-receipts all had a near-identical page-local "panel" class with this
 * exact head/body/foot shape). Generic, tokens only. */
.fr-panel { min-width: 0; overflow: hidden; border: 1px solid var(--fr-line); border-radius: var(--fr-radius); background: var(--fr-paper); }
.fr-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--fr-line-soft); }
.fr-panel-head h2 { margin: 0; color: var(--fr-ink); font: 700 15px/1.3 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.2px; }
.fr-panel-head p { margin: 3px 0 0; color: var(--fr-muted); font-size: 11px; line-height: 1.45; }
.fr-panel-body { padding: 18px 20px; }
.fr-panel-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--fr-line-soft); background: #fafbfc; color: var(--fr-muted); font-size: 11px; line-height: 1.5; }
.fr-panel + .fr-panel { margin-top: 20px; }
/* Inline text link — the `fr-link:focus-visible` selector above already
 * existed, but the base style never did (every caller re-declared color:
 * accent, font-weight: 700 locally). Added for the Phase 4b batch. */
.fr-link { color: var(--fr-blue); font-weight: 700; white-space: nowrap; text-decoration: none; }
.fr-link:hover { text-decoration: underline; }

/* Modal — added for cam.html's notice preview (2026-09 Phase 3). Generic
 * overlay/card/head/foot shape; any page needing a modal should reuse this
 * rather than inventing a page-local one. */
.fr-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .6); z-index: 100; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.fr-modal-overlay.open { display: flex; }
.fr-modal-card { background: var(--fr-paper); max-width: 760px; width: 100%; border-radius: var(--fr-radius); overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.fr-modal-head, .fr-modal-foot { padding: 16px 22px; background: var(--fr-bg); display: flex; justify-content: space-between; align-items: center; }
.fr-modal-foot { padding: 12px 22px; gap: 8px; justify-content: flex-end; }
.fr-modal-title { font-size: 12px; color: var(--fr-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.fr-modal-close { background: none; border: none; font-size: 26px; cursor: pointer; color: var(--fr-muted); }

@keyframes fr-pulse {
  from { opacity: .48; } to { opacity: 1; }
}

/* Filled status pill — a small labeled chip ("Draft", "Live", "Posted"),
 * distinct from the colored-text-only `.fr-table .status-*` helpers above.
 * Added for #111 so pages stop inventing their own (cam.html's status-pill,
 * books.html's bespoke Live indicator). Tokens only. */
.fr-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 100px;
  font: 700 10px/1.3 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.fr-pill.posted, .fr-pill.neutral { color: var(--fr-green); background: var(--fr-green-soft); }
.fr-pill.draft, .fr-pill.warning { color: var(--fr-warn); background: var(--fr-warn-soft); }
.fr-pill.critical { color: var(--fr-red); background: var(--fr-red-soft); }
.fr-pill.muted { color: var(--fr-muted); background: var(--fr-line-soft); }
/* Superseded record — still a pill, but struck through rather than colored,
 * since it isn't a status so much as "this used to be the answer". */
.fr-pill.struck { color: var(--fr-muted); background: var(--fr-line-soft); text-decoration: line-through; }

/* Toast — a transient confirmation ("Posted · JE 702"). Shown via the
 * showToast(text) helper in fr-ui.js, which lazily creates the host and
 * removes each toast after it fades. #111. */
.fr-toast-host {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 6000; display: flex; flex-direction: column; align-items: center;
  gap: 8px; pointer-events: none;
}
.fr-toast {
  padding: 10px 18px; color: #fff; background: var(--fr-ink);
  border-radius: 8px; box-shadow: 0 10px 30px rgba(20, 25, 35, .22);
  font: 600 12px 'Plus Jakarta Sans', system-ui, sans-serif;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.fr-toast.visible { opacity: 1; transform: translateY(0); }

/* Two-pane list/detail split — the shape inbox.html's Threads tab, messages.html,
 * review.html, and inspections.html each built page-locally as a fixed-width
 * sidebar + flexible detail grid. List-pane width is a CSS var so a caller can
 * override it without a new selector (`style="--fr-split-list-w: 280px"` or a
 * page-local rule); collapses to a stacked single column at <=720px. #113. */
.fr-split { display: grid; grid-template-columns: var(--fr-split-list-w, 320px) 1fr; height: var(--fr-split-h, calc(100vh - 240px)); min-height: 420px; background: var(--fr-paper); border: 1px solid var(--fr-line); border-radius: 10px; overflow: hidden; }
.fr-split-list { border-right: 1px solid var(--fr-line); overflow-y: auto; }
.fr-split-list-head { padding: 12px 14px; border-bottom: 1px solid var(--fr-line); background: #fafbfc; }
.fr-split-detail { overflow-y: auto; padding: 24px; }
.fr-split-empty { display: grid; place-items: center; height: 100%; padding: 30px; color: var(--fr-muted); text-align: center; font-size: 12px; line-height: 1.5; }
@media (max-width: 720px) {
  .fr-split { grid-template-columns: 1fr; height: auto; }
  .fr-split-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--fr-line); }
}