:root {
  /* Audubon Care Homes brand palette */
  --navy: #286e75;       /* brand teal — primary */
  --navy-dark: #1c4f54;  /* darker teal for hover/emphasis */
  --accent: #58c5a8;     /* brand mint */
  --gold: #f3b929;       /* brand gold — sparing accents only */
  --yellow: #f6dd00;     /* brand yellow — sparing accents only */
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #63737a;
  --warn-bg: #fff6e6;
  --warn-text: #8a5a00;
  --warn-border: #f3d38a;
  --danger: #c0392b;
  --danger-bg: #fce9e7;
  --ok: #1f8a4c;
  --ok-bg: #e5f6ec;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Top bar ---------- */

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0.85rem 1.75rem;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand-group { display: flex; align-items: center; gap: 0.7rem; }

.brand-logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.brand-text { line-height: 1.15; }
.brand-title { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.brand-subtitle { font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.topbar nav { display: flex; gap: 0.3rem; flex: 1; }

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 0.32rem 0.7rem;
  border-radius: var(--r-sm);
  line-height: 1.25;
  align-self: center;
}

.topbar nav a.active {
  color: #1d5c55;
  background: #e2f0ee;
  box-shadow: inset 0 0 0 1px #c3ddd7;
}
.topbar nav a:hover { color: var(--navy); background: #f0f5f4; }

.user-area { font-size: var(--fs-md); display: flex; align-items: center; gap: 0.75rem; }
.user-area a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-pill);
}
.user-area a:hover { background: var(--bg); color: var(--text); }
.who { color: var(--text); font-weight: 600; }


/* ---------- Layout ---------- */

/* Round UU: EMR-style fluid layout — the page uses the full browser width
   (capped at 1920px on very large monitors) with padding that scales with
   the screen. Tables get the whole width; on smaller screens the existing
   responsive rules stack everything into cards. */
.container { max-width: 1920px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 2.25rem clamp(1rem, 2.5vw, 2.75rem) 4rem; }

h1 { margin: 0 0 0.35rem; font-size: var(--fs-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-base); margin: 0 0 0.9rem; }
/* For section headers that should read at the same visual weight as the
   page's <h1> (e.g. "Add staff account") without actually being one. */
h2.section-heading { font-size: var(--fs-3xl); letter-spacing: -0.01em; margin: 0 0 0.9rem; }
.page-subtitle { color: var(--muted); margin: 0 0 1.75rem; font-size: var(--fs-base); }

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}


/* ---------- Stat tiles ---------- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.4rem;
}
.stat-card.warn .stat-num { color: var(--warn-text); }
.stat-num { font-size: var(--fs-3xl); font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.stat-label { color: var(--muted); font-size: var(--fs-sm); margin-top: 0.15rem; }
a.stat-card { display: block; text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; }
a.stat-card:hover { border-color: var(--accent); transform: translateY(-1px); }
a.stat-card.active-filter { border-color: var(--navy); border-width: 2px; background: #e7f4f1; }

/* Smaller secondary filter row (e.g. per-house filters below the main
   status tabs) — same idea as .stat-row but compact, pill-shaped. */
.house-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.75rem 0 1.5rem; }
.house-filter-chip {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.house-filter-chip:hover { border-color: var(--accent); }
.house-filter-chip.active-filter { border-color: var(--navy); background: #e7f4f1; }

/* Click-to-call / click-to-email — used wherever a phone number or email
   shows up as contact info, so a manager can tap it on a phone. */
.contact-link { color: var(--navy); font-weight: 600; text-decoration: none; }
.contact-link:hover { text-decoration: underline; color: var(--navy-dark); }

/* ---------- Action cards (icon-chip tiles) ---------- */

.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* four cards span the full page width */
  gap: 1rem;
  margin-bottom: 2rem;
  width: 100%;
}
@media (max-width: 1100px) and (min-width: 761px) { .action-grid { grid-template-columns: 1fr 1fr; } }

a.action-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.action-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }

.action-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  flex-shrink: 0;
}
.action-icon.blue { background: #e7f4f1; }
.action-icon.green { background: #e5f6ec; }
.action-icon.purple { background: #f1eafb; }


.action-icon.teal { background: #e2f6f4; }

.action-title { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.action-subtitle { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.1rem; }

/* ---------- Tables ---------- */

table.data-table { width: 100%; border-collapse: collapse; margin-top: 0.25rem; }
table.data-table th, table.data-table td {
  text-align: left;
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
}
table.data-table th { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; }
table.data-table tbody tr:hover { background: #fafbfc; }
table.data-table a { color: var(--navy); font-weight: 600; text-decoration: none; }
table.data-table a:hover { text-decoration: underline; }
/* Buttons rendered as <a class="button"> inside a data-table would otherwise
   inherit the navy text color above (higher specificity than .button alone),
   making the text invisible against the button's navy background. */
table.data-table a.button { color: white; }
table.data-table a.button:hover { color: white; text-decoration: none; }
table.data-table a.button.ghost { color: var(--navy); }
table.data-table a.button.ghost:hover { color: var(--navy-dark); text-decoration: none; }

table.kv th { text-align: left; color: var(--muted); padding: 0.4rem 0.9rem 0.4rem 0; vertical-align: top; font-weight: 600; width: 140px; font-size: var(--fs-md); }
table.kv td { padding: 0.4rem 0; font-size: var(--fs-md); }

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.22rem 0.6rem;
  border-radius: var(--r-pill);
  background: #e7f4f1;
  color: var(--navy);
  vertical-align: middle;
}
.badge.active { background: var(--ok-bg); color: var(--ok); }
.badge.moved_out { background: var(--danger-bg); color: var(--danger); }
.badge.pending { background: var(--warn-bg); color: var(--warn-text); }
.badge.primary { background: var(--navy); color: white; }

.badge.gold { background: var(--gold); color: #4a3300; }

/* ---------- Resident profile header ---------- */


.meta-bubble {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  background: #eef3f2;
  color: var(--navy);
  font-weight: 600;
  font-size: var(--fs-md);
  white-space: nowrap;
}


/* ---------- Buttons & forms ---------- */

.button {
  display: inline-block;
  background: var(--navy);
  color: white;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.button:hover { background: var(--navy-dark); }
.button.small { padding: 0.4rem 0.85rem; font-size: var(--fs-sm); }
.button.ghost {
  background: #eaf4f2;
  color: var(--navy);
  border: 1px solid #b9d6d1;
}
.button.ghost:hover { background: #d9ece7; color: var(--navy-dark); }

/* Round UU: form action rows (Save + Cancel) — flex, so buttons keep their
   natural width instead of stretching across the grid column. */
/* Round UU: type-or-pick date fields */
.date-combo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  max-width: 100%;
}
input.date-combo-text { width: 130px; max-width: 130px; }
.date-combo-btn {
  border: 1px solid var(--border);
  background: white;
  border-radius: var(--r-sm);
  padding: 0.3rem 0.45rem;
  cursor: pointer;
  line-height: 1;
}
.date-combo-btn:hover { background: #f2f6f5; }
input.date-combo-native {
  position: absolute !important;
  left: 0; bottom: 0;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  opacity: 0.01;
  pointer-events: none;
  border: 0 !important;
  padding: 0 !important;
}
input.date-bad { border-color: #c0392b !important; background: #fdf1ef !important; }

/* Round VV: identical column widths on every house table so the dashboard
   lines up house-to-house (fixed layout = widths don't drift with content).

   ⚠️ Round .62 (BACKLOG 115 + 116). These widths are POSITIONAL, and three
   different tables carry `house-table`: the owner Dashboard's house tables,
   the owner Dashboard's planned move-ins panel, and Dashboard (A)'s house
   tables. Until now all three happened to start with the same columns, so one
   nth-child list served them all. They no longer do -- the owner house tables
   gained ONE Hospice column after Move-in and Dashboard (A) gained TWO -- so a
   single list would now hand the Hospice column the Primary contact width on
   one page and the Contact phone width on another. Each table names itself and
   gets its own list. Adding a column to any of them means editing THAT list;
   a shared one would silently mis-size the other two. */
@media (min-width: 761px) {
  table.house-table { table-layout: fixed; width: 100%; }
  table.house-table td { overflow-wrap: anywhere; }

  /* Owner Dashboard house tables -- 11 columns (sums to 92%, the same total
     these columns had at 10, so the table renders at the same overall scale).

     ⚠️ NOTHING IN THESE TABLES WRAPS. `.house-panel table.data-table td, ... th
     { white-space: nowrap }` further down this file beats the `overflow-wrap:
     anywhere` above, so a column that is too narrow does not wrap -- it prints
     over its neighbour, silently, with no scrollbar anywhere. The first cut of
     this round gave Hospice 4.5% and the header HOSPICE ran straight through
     PRIMARY CONTACT. These eleven numbers are MEASURED: every header and every
     cell fits its own column at 1440, 1250, 1100, 900 and 800px -- which is
     only possible because of the `min-width` floor at the end of this block.
     See tests/_hospice_width_probe.py, which prints the per-column figures. */
  table.owner-house-table th:nth-child(1) { width: 5%; }     /* Room */
  table.owner-house-table th:nth-child(2) { width: 10.1%; }  /* Resident */
  table.owner-house-table th:nth-child(3) { width: 6.6%; }   /* Move-in */
  table.owner-house-table th:nth-child(4) { width: 7%; }     /* Hospice (icon) */
  table.owner-house-table th:nth-child(5) { width: 12.4%; }  /* Primary contact */
  table.owner-house-table th:nth-child(6) { width: 11.5%; }  /* Contact phone */
  table.owner-house-table th:nth-child(7) { width: 17.1%; }  /* Contact email */
  table.owner-house-table th:nth-child(8) { width: 7.3%; }   /* Rate */
  /* ⚠️ THESE THREE ARE NOT EQUAL, ON PURPOSE. TPAF-K has the longest HEADER of
     the three and RRF has the widest CHIP (a green "Yes" against TPAF's "No"),
     and between them they set the FLOOR below. At equal widths the floor has to
     be 1050px instead of 950px, and the owner Dashboard then starts scrolling
     sideways at about 1394px of browser width instead of about 1294px -- the
     difference between a 1366-wide laptop scrolling and not. Every number in
     this block is measured; see tests/_hospice_width_probe.py. */
  table.owner-house-table th:nth-child(9) { width: 5.3%; }   /* TPAF-K */
  table.owner-house-table th:nth-child(10) { width: 4.7%; }  /* TPAF */
  table.owner-house-table th:nth-child(11) { width: 5.0%; }  /* RRF -- its Yes chip is wider than TPAF's No */

  /* Owner Dashboard planned move-ins panel -- 9 columns, and it does NOT get
     a Hospice column (it is not a house table). These are the numbers the
     shared list used to hand it, restated so this panel renders exactly as it
     did before .62. */
  table.planned-house-table th:nth-child(1) { width: 4.5%; }  /* House */
  table.planned-house-table th:nth-child(2) { width: 14%; }   /* Room */
  table.planned-house-table th:nth-child(3) { width: 8%; }    /* Resident */
  table.planned-house-table th:nth-child(4) { width: 12%; }   /* Move-in */
  table.planned-house-table th:nth-child(5) { width: 11.5%; } /* Primary contact */
  table.planned-house-table th:nth-child(6) { width: 19%; }   /* Contact phone */
  table.planned-house-table th:nth-child(7) { width: 13%; }   /* Contact email */
  table.planned-house-table th:nth-child(8),
  table.planned-house-table th:nth-child(9) { width: 5%; }    /* Rate / Notes */

  /* Dashboard (A) house tables -- 8 columns, no rate and no fees (sums to 88%).
     Measured the same way as the owner block above: HOSPICE NURSE is the
     longest header in either table and it is what sets this column's width. */
  table.admin-house-table th:nth-child(1) { width: 5%; }     /* Room */
  table.admin-house-table th:nth-child(2) { width: 10%; }    /* Resident */
  table.admin-house-table th:nth-child(3) { width: 6.3%; }   /* Move-in */
  table.admin-house-table th:nth-child(4) { width: 11.5%; }  /* Hospice */
  table.admin-house-table th:nth-child(5) { width: 12.3%; }  /* Hospice nurse */
  table.admin-house-table th:nth-child(6) { width: 12.6%; }  /* Primary contact */
  table.admin-house-table th:nth-child(7) { width: 11.5%; }  /* Contact phone */
  table.admin-house-table th:nth-child(8) { width: 18.7%; }  /* Contact email */

  /* ⚠️ Round .62b — Scott, 12/08/2026, asked for "whatever we did before",
     meaning the Annual Figures table in `.58`: below its own comfortable width
     it stops shrinking and scrolls sideways inside its frame instead of
     squashing. `.proj-table-wrap table.proj-table { min-width: 520px }` is that
     mechanism, and the house panels ALREADY have the other half of it —
     `.house-panel { overflow-x: auto }`, written in Round G. It has never once
     fired, because `table-layout: fixed; width: 100%` pins these tables to the
     panel exactly, so they can never be wider than the thing that would scroll
     them. They just squeeze until the nowrap text overprints.

     A floor is the whole fix. These two numbers are MEASURED, not chosen: they
     are the narrowest width at which EVERY header and EVERY cell still fits its
     own column, on each table, checked in a real browser at 1440, 1100, 900 and
     800px. Below the floor the panel scrolls; at 1440px the tables are 1094px
     wide and neither floor is reached, so nothing about Scott's normal window
     changes at all.

     ⚠️ These MUST stay inside `@media (min-width: 761px)`. Below 761px the
     tables become one card per row and `.house-panel` goes back to
     `overflow-x: visible`; a min-width there would push the whole PAGE sideways
     into `html, body { overflow-x: hidden }` and be clipped, not scrolled. */
  table.owner-house-table { min-width: 950px; }
  table.admin-house-table { min-width: 950px; }
}

/* Round .62 (BACKLOG 115): the hospice mark on the owner Dashboard house
   tables. Same heart and same purple as the hospice band pill on a resident
   profile, so the two read as one thing. The cell is centred on the owner
   Dashboard because it holds a single mark; Dashboard (A)'s hospice columns
   hold names and stay left-aligned like every other text column. */
/* ⚠️ `.house-panel` is in BOTH selectors on purpose, and it is load-bearing.
   `.house-panel table.data-table td, ... th { white-space: nowrap }` further
   down this file is (0,2,2). `table.admin-house-table td.hospice-col` is ALSO
   (0,2,2) -- a TIE, which the later rule wins, so the wrap rule below did
   nothing at all when it was first written. This is DESIGN-NOTES 13c's lesson
   with a `td` in place of a button: write the scoped rule at a specificity that
   BEATS the rule it has to overrule, never one that ties with it. Both blocks
   here are (0,3,2). The browser check strips them out in flight and requires
   the rendering to come back wrong. */
.house-panel table.owner-house-table th.hospice-col,
.house-panel table.owner-house-table td.hospice-col { text-align: center; }

/* ⚠️ Dashboard (A)'s two hospice columns are the only cells in a house table
   allowed to WRAP, and they need to be. `.house-panel table.data-table td, ...
   th { white-space: nowrap }` applies to every cell in these tables, so a value
   longer than its column does not wrap and does not scroll -- it prints over
   the column beside it. Every other column here holds something bounded: a room
   number, a date, a name, a phone number. The hospice COMPANY does not: the
   profile's dropdown has an "Other…" box and Scott can type anything into it,
   and a 30-character company name printed straight through the nurse column
   before this rule existed. Scoped to these two columns so no existing column's
   rendering changes. */
.house-panel table.admin-house-table th.hospice-col,
.house-panel table.admin-house-table td.hospice-col {
  white-space: normal;
  overflow-wrap: anywhere;
}
.hospice-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6d4fa3;
}
.hospice-mark .ico { width: 17px; height: 17px; vertical-align: 0; }

/* Round VV-2: documents tab layout. Section bands, tables, and actions all
   share the same full panel width: the table uses a fixed layout so it can
   never grow wider than its band, columns line up section-to-section, and
   the Edit/trash column hugs the same right edge as the band. The upload
   form is a compact left-aligned row instead of stretching across the page. */
.docs-section { max-width: none; }
table.docs-table { width: 100%; table-layout: fixed; }
/* Keyed on the cell's NAME, never on its position — DESIGN-NOTES #3. These
   were :nth-child rules, and adding the date column (BACKLOG 23) silently
   handed the badge's width to the date and the meta's 44px to the badge. */
table.docs-table td.docs-name { width: 34%; overflow-wrap: anywhere; }
table.docs-table td.docs-date { width: 10%; }
table.docs-table td.docs-type { width: 14%; }
table.docs-table td.docs-meta { width: 28%; overflow-wrap: anywhere; }
table.docs-table td.doc-actions-cell { width: 14%; }
.docs-upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.docs-upload-form input[type="file"] { max-width: 320px; }
.docs-upload-form select { width: auto; max-width: 260px; }
.docs-upload-form button { flex: 0 0 auto; }
@media (max-width: 720px) {
  .docs-upload-form { flex-direction: column; align-items: stretch; }
  .docs-upload-form input[type="file"], .docs-upload-form select { max-width: none; }
}

/* Round VV: waitlist page dress-up */
.wl-stat-row .stat-card {
  border-radius: var(--r-lg);
  padding: 1rem 1.25rem;
  border: 1px solid transparent;
}
.wl-stat-row .stat-icon { font-size: var(--fs-xl); margin-bottom: 0.15rem; }
.wl-stat-row .stat-num { font-size: var(--fs-3xl); font-weight: 800; color: var(--navy-dark, #1d5c55); }
/* BACKLOG 123, 2026.07.22.69 — THIS RULE IS GONE ON PURPOSE. It read
       .wl-card-waiting { background: linear-gradient(135deg,#fdf6e3,#fbeec9);
                          border-color: #ecdfb0 !important; }
   and it was the whole of item 123. MEASURED 14/08/2026: `.stat-row
   .stat-card` (0,2,0, added LATER at the Residents-filter block below) had
   already repainted the background white, so the cream never rendered — but
   `border-color: #ecdfb0 !important` survived the shorthand, leaving the
   Waitlist card wearing a gold rgb(236,223,176) edge NO OTHER CARD ON THE
   SITE WEARS. Every other stat card measured rgb(227,235,232).
   Deleting the declarations here, rather than out-!important-ing them from
   style-v2.css, is the point: the accident is removed at its source.
   The replacement is the mock-up C block in style-v2.css. */


/* Round UU: FP / TPAF / RRF chips on the dashboard house tables */
th.fee-col, td.fee-col { text-align: center; width: 52px; }
.yn-yes {
  display: inline-block;
  background: #e2f0ee;
  color: #1d5c55;
  border: 1px solid #b9d6d1;
  border-radius: var(--r-pill);
  padding: 0.1rem 0.55rem;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.yn-no { color: var(--muted); font-size: var(--fs-sm); }

.form-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.form-actions .button, .form-actions a.button { width: auto; flex: 0 0 auto; }
@media (max-width: 720px) {
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .button, .form-actions a.button { text-align: center; margin-left: 0 !important; }
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}
.profile-actions form { display: inline-flex; align-items: center; }
.profile-actions p.muted { margin: 0; }


form.stack-form { display: flex; flex-direction: column; gap: 0.4rem; max-width: 480px; }
form.stack-form label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin-top: 0.5rem; }
/* The child combinator is the whole fix for BACKLOG 9. This rule means "the
   form's own action button", but it was also catching the calendar picker that
   date-combo.js injects INSIDE every date field, pushing it 20px down and
   leaving the icon 10px below the middle of its own text box on seven date
   fields across four pages. Specificity is unchanged (a combinator adds none),
   so nothing else moves. */
form.stack-form > button { margin-top: 1.25rem; }

input, select, textarea {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  background: #fbfdfc;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: white;
}

button {
  background: var(--navy);
  color: white;
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 600;
}
button:hover { background: var(--navy-dark); }

.inline-form { display: flex; gap: 0.6rem; margin-top: 0.9rem; align-items: flex-start; }
.inline-form textarea { flex: 1; }

.inline-form-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  margin-top: 1rem;
  align-items: center;
}
.inline-form-grid > input:not([type="checkbox"]):not([type="date"]),
.inline-form-grid > select { flex: 1 1 0; min-width: 0; }
.inline-form-grid > input[type="date"] { flex: 0 1 170px; min-width: 130px; }
.inline-form-grid > input[type="file"] { flex: 1 1 0; min-width: 0; }
.inline-form-grid > button { flex: 0 0 auto; white-space: nowrap; }
.inline-form-grid .checkbox-label { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 980px) {
  .inline-form-grid { flex-wrap: wrap; }
  .inline-form-grid > input:not([type="checkbox"]), .inline-form-grid > select { min-width: 160px; }
}

.checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-md); color: var(--muted); }

/* ---------- Cards for contacts/notes ---------- */


.note-card {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.65rem;
  font-size: var(--fs-md);
}
.note-card:last-child { margin-bottom: 0; }


.note-byline {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.note-byline .edit-hint { opacity: 0; transition: opacity 0.15s; font-style: normal; }


.note-delete-form { flex-shrink: 0; margin: 0; }

/* ---------- Documents panel ---------- */

table.docs-table td { vertical-align: middle; }
table.docs-table td.doc-actions-cell { width: 14%; white-space: nowrap; }
table.docs-table td.doc-actions-cell > * { vertical-align: middle; }

/* ---------- Family contact edit ---------- */

td.contact-actions-cell { white-space: nowrap; text-align: right; }
td.contact-actions-cell form { display: inline-block; margin: 0; }


.flash { padding: 0.7rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: var(--fs-md); font-weight: 600; }
.flash.error { background: var(--danger-bg); color: var(--danger); }
.flash.info { background: #e7f4f1; color: var(--navy); }

.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

/* ---------- Login / auth pages ---------- */

.login-box {
  max-width: 380px;
  margin: 4.5rem auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.25rem 2rem;
}
.login-box h1 { text-align: center; margin-bottom: 1.5rem; }
.login-box form { display: flex; flex-direction: column; gap: 0.5rem; }
.login-box label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin-top: 0.5rem; }
.login-box button { margin-top: 1.35rem; width: 100%; padding: 0.7rem; }
.login-box .hint { font-size: var(--fs-sm); color: var(--muted); margin-top: 1.4rem; text-align: center; }
.login-box .hint a { color: var(--accent); font-weight: 600; text-decoration: none; }
.login-box .hint a:hover { text-decoration: underline; }

.foot {
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-xs);
  padding: 1.5rem;
}

/* ---------- Sidebar / hamburger menu ---------- */

.menu-toggle-checkbox { display: none; }

.hamburger-btn {
  cursor: pointer;
  font-size: var(--fs-xl);
  color: var(--navy);
  padding: 0.4rem 0.55rem;
  border-radius: var(--r-sm);
  line-height: 1;
}
.hamburger-btn:hover { background: var(--bg); }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--card);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  z-index: 40;
  padding: 1.1rem 0.9rem;
  overflow-y: auto;
}
.menu-toggle-checkbox:checked ~ .sidebar { transform: translateX(0); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 50, 0.35);
  z-index: 35;
  cursor: pointer;
}
.menu-toggle-checkbox:checked ~ .sidebar-backdrop { display: block; }

.sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding: 0 0.3rem; }
.sidebar-close { cursor: pointer; font-size: var(--fs-base); color: var(--muted); padding: 0.3rem; }

.sidebar-section-label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 0.7rem 0.7rem 0.3rem;
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.7rem;
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.sidebar a:hover { background: var(--bg); }
.sidebar a.active { background: #e7f4f1; color: var(--navy); }
.side-icon { font-style: normal; }

/* ---------- Census ---------- */

.total-banner-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.total-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #23445c 0%, #286e75 60%, #3f8f8a 100%);
  border-radius: var(--radius);
  padding: 1.15rem 1.5rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 220px;
  box-shadow: 0 4px 14px rgba(35, 68, 92, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.total-banner::after {
  content: "";
  position: absolute;
  top: -45%;
  right: -12%;
  width: 60%;
  height: 190%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.09), transparent 65%);
  pointer-events: none;
}
.total-banner .total-icon {
  position: absolute;
  top: 0.75rem;
  right: 0.95rem;
  font-size: var(--fs-2xl);
  opacity: 0.55;
}
.total-banner .total-value {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: white;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.total-banner .total-label {
  font-size: var(--fs-xs);
  color: #cfe3e0;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}


.house-panel { margin-bottom: 1.25rem; }
.house-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.house-panel-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: var(--fs-lg); }
.house-panel-stats { display: flex; align-items: center; gap: 0.5rem; }
.house-panel-stats .stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  background: linear-gradient(135deg, #286e75, #3f8f8a);
  color: #fff;
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(40, 110, 117, 0.28);
}
.house-panel-stats .stat-chip strong { font-size: var(--fs-lg); font-weight: 800; color: #ffe9a8; }

/* Planned move-ins panel gets a subtly different look so it reads as
   distinct from the actual houses it sits above. */
.planned-panel {
  background: #fdfaf2;
  border: 1px solid #ecdfb0;
}
.planned-panel .house-panel-stats .stat-chip { background: #f7edcf; color: #8a6d1a; }

.inline-edit summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.inline-edit summary::-webkit-details-marker { display: none; }
.inline-edit summary .edit-hint { font-style: normal; font-size: var(--fs-xs); color: var(--muted); opacity: 0.7; }
.inline-edit summary:hover .edit-hint { color: var(--accent); opacity: 1; }
.inline-edit form {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
  align-items: center;
}
.inline-edit input {
  padding: 0.3rem 0.5rem;
  font-size: var(--fs-sm);
  width: 90px;
}
.inline-edit button {
  padding: 0.3rem 0.6rem;
  font-size: var(--fs-xs);
}

/* ---------- Room column highlight ---------- */

.room-col-header { color: var(--navy) !important; width: 58px; }
td.room-cell {
  font-weight: 700;
  color: var(--navy-dark);
  background: #f2f8f6;
  border-left: 3px solid var(--accent);
  width: 58px;
  text-align: center;
  white-space: nowrap;
}
td.room-cell .inline-edit summary { color: var(--navy-dark); font-weight: 700; }

/* ---------- Document popup viewer (contracts / assessments) ---------- */

.doc-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.doc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fafbfc;
}


.button.ghost.danger { color: var(--danger); border-color: var(--danger-bg); }
.button.ghost.danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ---------- Family contacts table ---------- */

table.contacts-table td.center { text-align: center; }
/* sizing now comes from the shared control rule so nothing sits a few
   pixels off its neighbour */
.inline-checkbox-form, .inline-select-form { display: inline-block; margin: 0; }
.readonly-block {
  background: #f6f8f8;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-size: var(--fs-md);
}

/* CSS-only modal: the wrapper is off-screen by default and is pulled into
   view via the :target pseudo-class when its #anchor is the current URL
   fragment, so no JavaScript is required to open/close it. */


/* ---------- Pre-residency assessment form ---------- */

.panel-subheading {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 1rem 0 0.5rem;
  font-weight: 700;
}
.panel-subheading:first-of-type { margin-top: 0; }

.assessment-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1.25rem;
}
.assessment-section legend {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--navy);
  padding: 0 0.4rem;
}
.a-row {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
.a-row label { font-size: var(--fs-md); color: var(--muted); font-weight: 600; }
.a-row select, .a-row input, .a-row textarea { width: 100%; max-width: 360px; }
.a-row.adl-row { grid-template-columns: minmax(220px, 300px) 180px 1fr; }
.a-row.provider-row { grid-template-columns: 1fr 1fr 1fr; }
.a-row.provider-row input { max-width: none; }
@media (max-width: 720px) {
  .a-row, .a-row.adl-row, .a-row.provider-row { grid-template-columns: 1fr; }
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem 2.25rem;
  margin-bottom: 0.6rem;
}
.checkbox-grid > .checkbox-label { flex: 0 1 auto; max-width: 100%; }
.checkbox-grid .checkbox-label { font-size: var(--fs-md); display: flex; align-items: center; gap: 0.4rem; }
.checkbox-label input[type="checkbox"] { width: auto; padding: 0; }

/* Assessment form on phones: fields go full width, stack cleanly, and use a
   16px+ font so iOS Safari doesn't auto-zoom when a field gets focus. Tap
   targets are taller too, since this is meant to be filled out on an iPhone. */
@media (max-width: 640px) {
  .assessment-form { font-size: var(--fs-base); }
  .assessment-section { padding: 0.85rem 0.9rem 1rem; }
  .a-row label { margin-bottom: 0.15rem; }
  .a-row select, .a-row input, .a-row textarea,
  .a-row.adl-row select, .a-row.adl-row input,
  .a-row.provider-row input {
    max-width: none;
    font-size: var(--fs-base);
    padding: 0.7rem 0.75rem;
  }
  .checkbox-grid { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .checkbox-grid .checkbox-label { font-size: var(--fs-base); padding: 0.3rem 0; }
  .checkbox-label input[type="checkbox"] { width: 20px; height: 20px; }
}

/* ================= Round F: Waitlist hub, census chart, house colors ===== */

/* Gold action icon (Add to Waitlist card on the dashboard) */
.action-icon.gold { background: #fdf3d7; }

/* Warning flash (e.g. possible duplicate waitlist entry) */
.flash.warn { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); }

/* Subtle background tints so the attention panels stand out on the dashboard */


/* Waitlist panel on the dashboard — its own gentle tint, distinct from the
   planned move-ins panel above it */
.waitlist-panel { background: #f4f9fb; border: 1px solid #cfe3ec; }
.waitlist-panel .house-panel-stats .stat-chip { background: #e0eef5; color: #2a6076; }

/* Archived/removed section at the bottom of the waitlist page */


/* Waitlist row actions: keep the two actions on one tidy line */
.waitlist-actions { white-space: nowrap; }
.waitlist-actions .inline-edit { margin-left: 0.5rem; }


/* ---------- Per-house location colors ----------
   Each house gets a stable signature color used in the Residents table
   Location column and the census bar chart. Order follows HOUSES:
   1 = Dreyfous House, 2 = Phosphor House, 3 = Seminole House I. */
.badge.house-1 { background: #e3effa; color: #1d5b8f; }
.badge.house-2 { background: #f1eafb; color: #6b3fa0; }
.badge.house-3 { background: #fdf1e3; color: #a05c12; }
.badge.house-none { background: #eef1f0; color: var(--muted); }

/* ---------- Census Tracking bar chart ---------- */
.census-chart-panel { overflow: hidden; }


.bar {
  width: 70%;
  max-width: 52px;
  max-height: calc(100% - 3.4rem);
  border-radius: 8px 8px 3px 3px;
  transition: height 0.2s ease;
}

.house-bar-1 { background: linear-gradient(180deg, #7db8e8, #1d5b8f); }
.house-bar-2 { background: linear-gradient(180deg, #c3a6ec, #6b3fa0); }
.house-bar-3 { background: linear-gradient(180deg, #f2c185, #a05c12); }


/* Round G: keep dashboard panel tables on one clean line per person */
.house-panel { overflow-x: auto; }
.house-panel table.data-table td, .house-panel table.data-table th { white-space: nowrap; }
.house-panel table.data-table td .inline-edit form { white-space: normal; }

/* Round H: resident header — status gets its own bubble, and the Age/Rate/
   House/Room bubbles stretch to the same height as the name bubble. */

.meta-bubble {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.3rem;
  font-size: var(--fs-lg);
  font-weight: 700;
}
.meta-bubble.status-bubble.status-active { background: linear-gradient(135deg, #2aa869, var(--ok)); color: white; }
.meta-bubble.status-bubble.status-pending { background: linear-gradient(135deg, #f5c94a, var(--gold)); color: #4a3300; }
.meta-bubble.status-bubble.status-moved_out { background: linear-gradient(135deg, #cf5245, var(--danger)); color: white; }

/* Keep all profile action buttons on one straight line — the grey
   "Last sent ..." note hangs below the welcome button without pushing
   its neighbors out of alignment. */
.profile-actions { align-items: flex-start; }


.profile-actions { padding-bottom: 1.4rem; }

/* Round J: house title bubbles on the dashboard (match residents-page
   Location colors) + vacant room rows */
.house-title-bubble { font-size: var(--fs-base); padding: 0.45rem 1rem; font-weight: 700; }
.vacant-row td { background: #fbfdfc; }

/* Round J: two-column Plan Move-In form */
.move-in-form .mi-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.move-in-form .mi-field { display: flex; flex-direction: column; margin-bottom: 0.7rem; }
.move-in-form .mi-field label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; }
.move-in-form .mi-full { margin-top: 0.6rem; }
.move-in-form .mi-full textarea { width: 100%; }
.move-in-form .mi-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.2rem; }
@media (max-width: 760px) {
  .move-in-form .mi-two-col, .move-in-form .mi-contact-grid { grid-template-columns: 1fr; }
}

/* Round J: move-in checklist */
.checklist-panel .checklist-list { list-style: none; margin: 0; padding: 0; }
.checklist-panel .checklist-list li { padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.checklist-panel .checklist-list li:last-child { border-bottom: none; }
.checklist-todo { background: #fdf5f4; margin: 0 -0.5rem; padding-left: 0.5rem !important; padding-right: 0.5rem; border-radius: var(--r-xs); }

/* ================= Round K ================= */

/* Colorful (but soft) meta bubbles on the resident header */
.meta-bubble.meta-house-1 { background: #e3effa; color: #1d5b8f; }
.meta-bubble.meta-house-2 { background: #f1eafb; color: #6b3fa0; }
.meta-bubble.meta-house-3 { background: #fdf1e3; color: #a05c12; }
.meta-bubble.meta-room { background: #e2f6f4; color: #17635c; }
.meta-bubble.meta-rate { background: #e5f6ec; color: #1f8a4c; }
.meta-bubble.meta-age { background: #eef1f0; color: #4a5a60; }
.meta-bubble.meta-hospice { background: #fbe9f0; color: #a34367; border: 1px solid #f0cbd9; }

/* Never Moved In status colors */
.badge.never_moved_in { background: #eef1f0; color: var(--muted); }

.meta-bubble.status-bubble.status-never { background: linear-gradient(135deg, #9aa7ab, #63737a); color: white; }

/* Panel heading rows: heading pill + action on the right */
.panel-heading-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.panel-heading-row h2 { margin: 0; }

/* Colored bubble behind every panel heading on the resident page (and
   everywhere else panels use a plain h2) */
.panel > h2, .panel-heading-row h2 {
  display: inline-block;
  background: #e7f4f1;
  color: var(--navy-dark);
  font-size: var(--fs-base);
  padding: 0.4rem 1rem;
  border-radius: var(--r-pill);
  margin: 0 0 0.75rem;
}

/* Profile panel gets a soft tint + the pencil edit link */
.profile-panel { background: #f4faf8; border: 1px solid #d9ece7; }
.profile-panel table.kv th { color: var(--navy-dark); }


/* ================= Round L: HR-style resident profile ================= */

.rp-shell { max-width: none; }

/* Teal header band — photo top-left, name + status, tabs along the bottom */
.rp-band {
  display: flex;
  gap: 1.4rem;
  background: linear-gradient(135deg, #2f7d85, var(--navy-dark));
  border-radius: 12px 14px 0 0;
  padding: 1.4rem 1.4rem 0;
  align-items: flex-start;
}
.rp-band.status-pending { background: linear-gradient(135deg, #b8933a, #8a6d1a); }
.rp-band.status-moved_out { background: linear-gradient(135deg, #b05248, #8f3d34); }
.rp-band.status-never { background: linear-gradient(135deg, #7d898e, #5a686e); }

.rp-photo {
  width: 148px;
  height: 148px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255,255,255,0.15);
  border: 3px solid rgba(255,255,255,0.55);
  box-shadow: var(--shadow);
  margin-bottom: -56px;   /* hangs below the band, like the HR site */
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-photo img { width: 100%; height: 100%; object-fit: cover; }
.rp-initials { font-size: 3rem; font-weight: 800; color: rgba(255,255,255,0.9); letter-spacing: 0.04em; }

.rp-band-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rp-name-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; flex-wrap: wrap; }
.rp-name { margin: 0; color: white; font-size: var(--fs-3xl); letter-spacing: -0.01em; }

.rp-band-actions { display: flex; align-items: center; gap: 0.6rem; }

.rp-tabs { display: flex; gap: 0.15rem; margin-top: 1.1rem; flex-wrap: wrap; }
.rp-tab {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-md);
  padding: 0.55rem 1.05rem;
  border-radius: 8px 9px 0 0;
}
.rp-tab:hover { background: rgba(255,255,255,0.14); }
.rp-tab.active { background: var(--bg); color: var(--navy-dark); }

/* Body: sidebar under the photo + tab content on the right */
.rp-body { display: grid; grid-template-columns: 232px 1fr; gap: 1.4rem; padding-top: 0.4rem; }
.rp-side-col { padding-top: 64px; }  /* clears the overhanging photo */


.rp-side {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
}
.rp-side-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 1rem 0 0.45rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.rp-side .rp-side-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.rp-vital { display: flex; gap: 0.55rem; align-items: baseline; font-size: var(--fs-md); padding: 0.22rem 0; color: var(--text); }
.rp-vital-icon { flex-shrink: 0; }

.rp-content { min-width: 0; }

@media (max-width: 860px) {
  .rp-band { flex-direction: column; padding-bottom: 0; }
  .rp-photo { width: 110px; height: 110px; margin-bottom: 0; }
  .rp-body { grid-template-columns: 1fr; }
  .rp-side-col { padding-top: 0; }
}

/* ================= Round M: mobile-first pass ================= */

/* Labeled add-entry form (used on the waitlist; label sits above each field
   so it's always clear what goes where) */
.labeled-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem 1rem;
  margin-top: 1rem;
  align-items: end;
}
.lf-field { display: flex; flex-direction: column; min-width: 0; }
.lf-field label { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; margin-bottom: 0.25rem; }
.lf-field input, .lf-field select { width: 100%; }
.lf-submit button { width: 100%; }
@media (max-width: 980px) { .labeled-form-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  /* The top ribbon is hamburger-only on phones — no sideways scrolling.
     Every ribbon tab already lives in the hamburger menu under "Navigate". */
  .topbar { padding: 0.7rem 0.9rem; gap: 0.75rem; }
  .topbar nav { display: none; }
  .user-area .who { display: none; }
  .brand-subtitle { font-size: var(--fs-xs); }
  .container { padding: 1.1rem 0.8rem 3rem; }

  /* Tables become stacked cards: one card per row, each value labeled with
     its column name (labels are filled in by the little script in the page
     footer). No horizontal scrolling needed anywhere. */
  table.data-table thead { display: none; }
  table.data-table, table.data-table tbody, table.data-table tr { display: block; width: 100%; }
  table.data-table tr {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card);
    margin-bottom: 0.7rem;
    padding: 0.45rem 0.8rem;
    box-shadow: var(--shadow);
  }
  table.data-table td {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    border-bottom: none;
    padding: 0.28rem 0;
    font-size: var(--fs-md);
    white-space: normal !important;
    min-width: 0;
  }
  table.data-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 40%;
    max-width: 40%;
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  table.data-table td[data-label=""]::before { content: none; }
  table.data-table td:empty { display: none; }
  .house-panel table.data-table td, .house-panel table.data-table th { white-space: normal; }
  .house-panel { overflow-x: visible; }
  /* Vacant room rows collapse to a slim line */
  .vacant-row { padding: 0.2rem 0.8rem; }
  .vacant-row td { font-size: var(--fs-sm); }

  /* Add-entry forms stack full-width, one field per line, 16px so iOS
     doesn't zoom in when tapping a field. */
  .inline-form-grid { flex-direction: column; align-items: stretch; }
  .inline-form-grid > input, .inline-form-grid > select, .inline-form-grid > button {
    width: 100%;
    min-width: 0;
    font-size: var(--fs-base);
    padding: 0.65rem 0.75rem;
  }
  .inline-form-grid > input[type="date"] { flex: none; }
  .labeled-form-grid { grid-template-columns: 1fr; }
  .lf-field input, .lf-field select { font-size: var(--fs-base); padding: 0.65rem 0.75rem; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form textarea { font-size: var(--fs-base); }

  /* Stat bubbles + banners wrap into a tidy 2-up grid */
  .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .stat-row .stat-card { min-width: 0; }
  .total-banner-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .action-grid { grid-template-columns: 1fr; }

  /* Panels + headings a touch tighter */
  .panel { padding: 0.9rem 0.9rem; }
  h1 { font-size: var(--fs-xl); }
  .rp-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .rp-tab { flex: 0 0 auto; }
  .profile-actions .button, .profile-actions form, .profile-actions form button { width: 100%; }
  .profile-actions { flex-direction: column; align-items: stretch; }
  .panel-heading-row .button { width: auto; }

  /* Filter chips can wrap freely */
  .house-filter-row { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 0.3rem; }
  .house-filter-chip { flex: 0 0 auto; }
}

/* ================= Round N: mobile profile + assessment polish ========= */


@media (max-width: 860px) {
  /* Compact header band: photo and name side by side, nothing hanging */
  .rp-band { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.85rem; padding: 0.9rem 0.9rem; border-radius: 12px 12px 0 0; }
  .rp-photo { width: 78px; height: 78px; margin-bottom: 0; border-width: 2px; border-radius: var(--r-md); }
  .rp-initials { font-size: var(--fs-3xl); }
  .rp-band-main { min-width: 0; }
  .rp-name { font-size: var(--fs-xl); }
  
  .rp-band-actions .meta-bubble { display: none; } /* status already shows under the name */

  /* Tabs WRAP into tidy rows of pills — no sideways scrolling */
  .rp-tabs {
    flex-wrap: wrap;
    overflow: visible;
    width: 100%;
    gap: 0.35rem;
    margin: 0.7rem 0 0.8rem;
  }
  .rp-tab {
    flex: 1 1 30%;
    min-width: 96px;
    text-align: center;
    background: rgba(255,255,255,0.14);
    border-radius: var(--r-sm);
    padding: 0.55rem 0.4rem;
    font-size: var(--fs-sm);
  }
  .rp-tab.active { border-radius: var(--r-sm); }

  .rp-side-col { padding-top: 0; }
  .rp-side { padding: 0.85rem 0.95rem; }
  
}

@media (max-width: 760px) {
  /* Assessment on a phone: template picker + save button are full-width,
     easy tap targets */
  
  .assessment-form button[type="submit"] { width: 100%; padding: 0.9rem; font-size: var(--fs-base); }
  .assessment-form .a-row .button.ghost { width: 100%; margin: 0.5rem 0 0 !important; text-align: center; }
  .assessment-section legend { font-size: var(--fs-base); }
}

/* Projections grid — compact enough that even Seminole's 11 occupancy
   columns fit on screen with no horizontal scrollbar. */
.proj-table { font-size: var(--fs-xs); table-layout: auto; }
.proj-table td, .proj-table th { white-space: nowrap; padding: 0.32rem 0.3rem; }
/* Round RR: every projections row is the same height, whether it holds an
   input, a locked value, or a computed total. */
.proj-table tbody td { height: 44px; vertical-align: middle; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.proj-name-edit summary { font-weight: 600; color: var(--text); }
.proj-name-edit[open] { position: relative; }
.proj-name-edit form { flex-wrap: wrap; }
.proj-name-edit form button { font-size: var(--fs-xs); padding: 0.25rem 0.55rem; }
.proj-table th { font-size: var(--fs-2xs); }
.proj-table td:first-child { white-space: normal; min-width: 110px; max-width: 170px; font-size: var(--fs-xs); }
.proj-table .inline-edit summary { font-size: var(--fs-xs); }
.proj-table .edit-hint { font-size: var(--fs-2xs); }
tr.proj-driven td { color: var(--muted); }
.proj-table tr.proj-revenue td { background: #e7f4f1; font-weight: 600; }  /* re-coloured in Round .15 — see the tail of this file */
.proj-table tr.proj-total td { background: #f5f7f6; border-top: 2px solid var(--navy); }
.proj-table tr.proj-profit td { background: #fdfaf2; border-bottom: 2px solid var(--navy); }
.house-panel .proj-table { min-width: 0; }

/* Round Q: live-edit fields (no more pencils) + docs table alignment */
.live-edit { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
.live-edit input, .live-edit select, .live-edit textarea {
  background: #fbfdfc;
  border: 1px solid #dbe5e1;
}
.live-edit input:hover, .live-edit select:hover, .live-edit textarea:hover { border-color: var(--accent); }
.live-edit input:focus, .live-edit select:focus, .live-edit textarea:focus { background: white; }
.profile-panel .live-edit input, .profile-panel .live-edit select { min-width: 200px; }
.profile-panel .live-edit textarea { min-width: 260px; }
.proj-input { width: 78px; font-size: var(--fs-xs); padding: 0.22rem 0.3rem; }
.note-live-textarea { width: 100%; border: 1px solid transparent; background: transparent; font: inherit; resize: vertical; }
.note-live-textarea:hover { border-color: #dbe5e1; background: #fbfdfc; }
.note-live-textarea:focus { border-color: var(--accent); background: white; }

/* Documents tables: shared fixed column widths so the badges and metadata
   line up across every section (Contract / Assessment / EMS / Move-In / Other) */
table.docs-table { table-layout: fixed; width: 100%; }
table.docs-table td.docs-name { overflow: hidden; text-overflow: ellipsis; }
table.docs-table td.docs-meta { overflow: hidden; text-overflow: ellipsis; }

/* Round S: clickable photo, allergy highlight, two-column HM tasks */
.rp-photo-clickable { cursor: pointer; position: relative; display: flex; }
.rp-photo-clickable .rp-photo-hint {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md);
  opacity: 0;
  transition: opacity 0.15s;
}
.rp-photo-clickable:hover .rp-photo-hint { opacity: 1; }

.rp-vital-allergy {
  background: #fdf1ef;
  border: 1px solid #f0cfc9;
  border-radius: var(--r-sm);
  padding: 0.4rem 0.55rem !important;
  margin: 0.3rem 0;
  color: #8f2f24;
}
.rp-vital-allergy strong { color: #8f2f24; }

.hm-task-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 1.5rem; }
.hm-task-grid li { border-bottom: none !important; padding: 0.3rem 0 !important; }
@media (max-width: 700px) { .hm-task-grid { grid-template-columns: 1fr; } }

/* Round Y: allergy checkboxes — two clean columns, checkbox immediately
   beside its label, checked rows highlighted. */
.allergy-form { display: block !important; max-width: 560px; }
.allergy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.4rem;
  justify-items: start;
}
.allergy-pick {
  display: inline-grid;
  grid-template-columns: 16px auto;
  align-items: start;
  column-gap: 0.5rem;
  font-size: var(--fs-md);
  color: var(--text);
  cursor: pointer;
  line-height: 1.3;
  padding: 0.18rem 0.3rem;
  border-radius: var(--r-xs);
  width: auto;
  max-width: 100%;
  text-align: left;
}
.allergy-pick:hover { background: #f2f8f6; }
.allergy-pick:has(input:checked) { background: #e2f0ee; font-weight: 600; }
.allergy-pick input[type="checkbox"] {
  /* min-width beats width in CSS, and the profile panel gives every
     live-edit input a 200px min-width — which was stretching these
     checkboxes across their labels. Pin every size property. */
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px;
  min-height: 15px;
  flex: 0 0 15px;
  margin: 0.12rem 0 0;
  padding: 0;
  accent-color: var(--accent);
}
.allergy-pick span { white-space: normal; }
.allergy-other { margin-top: 0.55rem; width: 100%; }

/* Round 2026.07.23.12 -- THE CARE PLAN TAB'S DEVICE CHECKBOXES.
   Scott, 08/27/2026, on the .11 build: the Personal Aids boxes did not
   highlight green the way Medical Hx / Dx does, and the spacing was wrong.
   Both had the same cause -- .11 used `.checkbox-label`, so the box inherited
   `.profile-panel .live-edit input { min-width: 200px }` and rendered TWO
   HUNDRED PIXELS WIDE. `.allergy-pick` above already pins that with
   !important, for exactly these checkboxes, so the fix is to reuse it.
   These three rules only carry the pill inside a live-edit form. */
.cl-pick-grid .cl-pick-cell { min-width: 0; max-width: 100%; }
.cl-pick-grid .cl-pick-cell form { margin: 0; display: block; }
/* The pill is the whole hit area, so it fills the cell rather than leaving a
   dead strip beside it that looks clickable and is not. */
.cl-pick-grid .cl-pick-cell .allergy-pick { width: 100%; }
@media (max-width: 640px) { .allergy-grid { grid-template-columns: 1fr; } }

/* Round SS: long allergy names (Codeine/Hydrocodone/Oxycodone/Opiates) were
   spilling into the next column / off the sidebar — let them wrap instead. */
.allergy-pick { width: 100%; min-width: 0; max-width: 100%; }
.allergy-pick span { overflow-wrap: anywhere; min-width: 0; }

/* Round TT: the profile Allergies row spans the full Profile panel width.
   The profile tbody is a 2-column grid, so the row must claim both columns
   and drop the 150px label column so the checkboxes get the full width. */
.profile-panel table.kv tr.allergy-span-row {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
}
/* Full-width rows: the cell and any form inside must stretch, not
   shrink-wrap (live-edit forms are inline by default). */
.profile-panel table.kv tr.allergy-span-row td { width: 100%; }
.profile-panel table.kv tr.allergy-span-row form { display: block; width: 100%; max-width: none; }
.profile-panel table.kv tr.allergy-span-row textarea { width: 100%; box-sizing: border-box; }
.allergy-span-row td { padding: 0.85rem 0.6rem !important; }

.allergy-form-wide { max-width: none !important; }
.allergy-grid-wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 640px) { .allergy-grid-wide { grid-template-columns: 1fr; } }
.rp-vital-allergy { overflow-wrap: anywhere; min-width: 0; }
.rp-vital-allergy div { min-width: 0; overflow-wrap: anywhere; }

/* Round SS: care plan option checkmarks (replaces the phrase dropdowns) */
.cp-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
  gap: 0.25rem 3rem;
  margin-bottom: 0.45rem;
}
.cp-opt {
  display: grid;
  grid-template-columns: 16px auto;
  column-gap: 0.5rem;
  align-items: start;
  font-size: var(--fs-md);
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-sm);
  min-width: 0;
  max-width: 100%;
}
.cp-opt span { white-space: normal; overflow-wrap: anywhere; }
.cp-opt input[type="checkbox"] {
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px;
  min-height: 15px;
  margin-top: 2px;
}
.cp-opt:hover { background: #f2f8f6; }
.cp-opt:has(input:checked) { background: #e2f0ee; font-weight: 600; }
.cp-opt-wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .cp-opts { grid-template-columns: 1fr; } }

/* Round SS-2: clear separators between each care plan section so it's
   obvious which options belong to which row. */
.cp-row {
  border-bottom: 2px solid #d9e2e0;
  padding: 1.1rem 0 1.25rem;
  margin: 0 !important;
}
.cp-row:first-child { padding-top: 0.3rem; }
.cp-row:last-child { border-bottom: none; padding-bottom: 0.3rem; }
.cp-row > label { font-weight: 700; color: var(--deep, #286e75); }

/* Round Y: forever pricing bubble + communications timeline cards */
.meta-bubble.meta-forever { background: #f7edcf; color: #8a6d1a; }
.comm-card-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.comm-when {
  display: inline-block;
  background: #eef3f2;
  color: var(--navy-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 0.14rem 0.6rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.comm-when-sm { font-size: var(--fs-xs); padding: 0.08rem 0.5rem; background: rgba(255,255,255,0.65); }

/* ================= Round NN: site-wide mobile hardening ==================
   Guarantees: no left-right page scrolling, no fixed-width element wider
   than the screen, buttons and bubbles wrap their wording, forms stack. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  img, svg, audio, iframe { max-width: 100%; }
  /* Any input/select/textarea with a hard-coded inline width gets capped at
     the screen — inline styles can't exceed this. */
  input[style], select[style], textarea[style], span[style] { max-width: 100% !important; box-sizing: border-box; }
  input, select, textarea { max-width: 100%; box-sizing: border-box; }

  /* Buttons: wording wraps instead of clipping; profile action buttons
     stack full-width so long labels fit cleanly. */
  .button, button { white-space: normal; line-height: 1.3; }
  .profile-actions { flex-direction: column; align-items: stretch; }
  .profile-actions .button, .profile-actions form { width: 100%; box-sizing: border-box; }
  .profile-actions form { display: flex; }
  .profile-actions form button { width: 100%; box-sizing: border-box; }
  .profile-actions .button { text-align: center; }

  /* Bubbles and chips wrap their wording. */
  .meta-bubble, .badge, .stat-chip, .comm-when { white-space: normal; }
  .house-panel-stats { flex-wrap: wrap; }
  .house-panel-stats .stat-chip { flex: 1 1 45%; justify-content: center; text-align: center; }

  /* Stacked-table tweaks: undo desktop column widths that don't make sense
     once rows become cards. */
  td.room-cell { width: auto; text-align: left; }
  table.docs-table { table-layout: auto !important; }
  table.docs-table td.docs-name, table.docs-table td.docs-date,
  table.docs-table td.docs-type, table.docs-table td.docs-meta { width: auto; }
  table.docs-table td.doc-actions-cell { width: auto; text-align: left; }
  .proj-table td:first-child { max-width: none; }
  .proj-table td, .proj-table th { white-space: normal; }

  /* Key-value tables (view popups, misc panels) stack label over value. */
  table.kv, table.kv tbody, table.kv tr, table.kv th, table.kv td { display: block; width: 100%; box-sizing: border-box; }
  table.kv th { padding-bottom: 0; }
  .profile-panel table.kv tr { grid-template-columns: 1fr; }

  /* Page headings with buttons stack cleanly. */
  .page-heading-row { flex-direction: column; align-items: stretch; }
  .page-heading-row > div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .page-heading-row .button, .page-heading-row form button { width: auto; }

  /* Timeline rails tuck in a bit so cards get the width. */
  .tl-group { padding-left: 1.35rem; }
  .tl-group-label { margin-left: -1.35rem; }
  .tl-item::before { left: -1.15rem; }
  .conv-msg { max-width: 100%; }

  /* Forms that sit in a row become a clean column. */
  .inline-form-grid { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .inline-form-grid > input, .inline-form-grid > select, .inline-form-grid > button,
  .inline-form-grid > input[type="date"] { width: 100%; flex: 0 0 auto; min-width: 0; box-sizing: border-box; }
  .inline-form { flex-direction: column; align-items: stretch; }

  /* Panels breathe on narrow screens. */
  .panel { padding-left: 0.85rem; padding-right: 0.85rem; }
  .docs-section-head { flex-wrap: wrap; font-size: var(--fs-md); }
  .rp-vital { flex-wrap: wrap; word-break: break-word; }
  .seo-card-value { font-size: var(--fs-2xl); }
  .seo-range-row { gap: 0.35rem; }
  .nav-search-panel { width: min(320px, 92vw); }
  .email-composer .panel { padding: 0.85rem; }
  
  .allergy-pick span { white-space: normal; }
}

/* Round OO: logo links home */
a.brand-group { text-decoration: none; color: inherit; }
a.brand-group:hover .brand-subtitle { color: var(--accent); }

/* Round LL: ribbon resident search */
.nav-search { position: relative; margin-left: 0.15rem; }
.nav-search-btn {
  background: none;
  border: 1px solid transparent;
  font-size: var(--fs-base);
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: var(--r-sm);
  line-height: 1;
}
.nav-search-btn:hover { background: #eef3f2; border-color: var(--border); }
.nav-search-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 28px rgba(20, 40, 40, 0.18);
  padding: 0.6rem;
  width: 320px;
  z-index: 60;
}
.nav-search-panel.open { display: block; }
.nav-search-panel input { width: 100%; box-sizing: border-box; font-size: var(--fs-base); }
.nav-search-results { margin-top: 0.35rem; max-height: 330px; overflow-y: auto; }
.nav-search-hit {
  display: block;
  padding: 0.45rem 0.55rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text);
}
.nav-search-hit:hover { background: #e2f0ee; }
.nav-search-name { display: block; font-weight: 700; color: var(--navy-dark); }
.nav-search-meta { display: block; font-size: var(--fs-xs); color: var(--muted); }
.nav-search-empty { padding: 0.5rem; color: var(--muted); font-size: var(--fs-md); }
.side-search { padding: 0.4rem 0.9rem 0.6rem; }
.side-search input { width: 100%; box-sizing: border-box; font-size: var(--fs-base); }
@media (max-width: 760px) { .nav-search { display: none; } }

/* Round JJ: RingCentral conversation cards + AI summaries */
.conv-summary {
  background: #eef4ff;
  border-left: 3px solid #4a6fb5;
  color: #2c3f66;
  font-size: var(--fs-md);
  line-height: 1.4;
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-xs);
  margin: 0.45rem 0;
}
.conv-msg { margin: 0.4rem 0; padding: 0.45rem 0.7rem; border-radius: var(--r-md); max-width: 92%; }
.conv-msg-in { background: #f1f3f4; margin-right: auto; }
.conv-msg-out { background: #e2f0ee; margin-left: auto; }
.conv-msg-meta { font-size: var(--fs-xs); margin-bottom: 0.15rem; }
.conv-msg-text { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-md); }
.conv-older { margin: 0.3rem 0; }
.conv-older summary { cursor: pointer; }
.conv-card { border-left: 3px solid var(--accent); }
/* BACKLOG 102. A conversation is a run of messages with no long silence in it,
   so it is usually one day -- but one that carries past midnight stays whole,
   and then the reader needs to be told the day changed. Centred hairline rule
   with the date sitting in the gap; it is a separator, not a message, so it
   takes no bubble and no side. */
.conv-day {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.7rem 0 0.45rem;
  font-size: var(--fs-xs);
  color: var(--text-muted, #6b7280);
}
.conv-day::before, .conv-day::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}
.conv-day > span { flex: 0 0 auto; white-space: nowrap; }
.rc-transcript {
  background: #fbfdfc;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.8rem;
  margin-top: 0.45rem;
  font-size: var(--fs-md);
  font-style: italic;
  color: #3a4a48;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Round BB: SEO dashboard */
.page-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.seo-cards { display: grid;  gap: 0.8rem; margin: 0.8rem 0 1rem; }
.seo-card {
  background: linear-gradient(135deg, #286e75, #3f8f8a);
  color: #fff;
  border-radius: var(--radius-sm, 10px);
  padding: 0.9rem 1.1rem;
  box-shadow: 0 2px 6px rgba(40, 110, 117, 0.25);
}
.seo-card-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; font-weight: 700; }
.seo-card-value { font-size: var(--fs-3xl); font-weight: 800; margin: 0.15rem 0 0.25rem; }
.seo-card .muted { color: rgba(255, 255, 255, 0.75); }
.seo-card span[style] { color: #ffe9a8 !important; }
.seo-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.seo-two-col .panel { margin-bottom: 0.9rem; }
.seo-section-head { margin: 1.4rem 0 0.3rem; font-size: var(--fs-lg); color: var(--navy-dark); border-bottom: 2px solid #e2f0ee; padding-bottom: 0.3rem; }
.seo-range-row { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-md); color: var(--muted); margin: 0.2rem 0 0.9rem; flex-wrap: wrap; }
.seo-range { border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.25rem 0.8rem; text-decoration: none; color: var(--navy); font-weight: 600; }
.seo-range.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.seo-cards { grid-template-columns: repeat(4, 1fr); }
.seo-stat-big { font-size: var(--fs-2xl); font-weight: 800; color: var(--navy-dark); margin: 0.4rem 0 0.2rem; }
.seo-chart-wrap { position: relative; }
.seo-chart-wrap svg { cursor: crosshair; }
.seo-tip {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  background: #12333a;
  color: #fff;
  font-size: var(--fs-xs);
  line-height: 1.3;
  padding: 0.3rem 0.55rem;
  border-radius: var(--r-xs);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.08s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 3;
}
.seo-tip strong { font-size: var(--fs-md); }
.seo-split { margin-top: 0.5rem; }
.seo-split-bar { background: #e6edeb; border-radius: var(--r-pill); height: 26px; overflow: hidden; }
.seo-split-bar span { display: block; height: 100%; background: linear-gradient(90deg, #286e75, #3f8f8a); color: #fff; font-size: var(--fs-sm); font-weight: 700; text-align: right; padding: 0 0.6rem; line-height: 26px; box-sizing: border-box; min-width: 2.5rem; }
.seo-split-legend { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 0.4rem; font-size: var(--fs-md); flex-wrap: wrap; }
.data-table td a { color: var(--accent); text-decoration: none; font-weight: 600; }
.data-table td a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .seo-cards, .seo-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .seo-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Round AA: forever pill in the dashboard rate column */
.forever-pill {
  display: inline-block;
  background: #f7edcf;
  color: #8a6d1a;
  border-radius: var(--r-pill);
  padding: 0.08rem 0.55rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  vertical-align: 1px;
}

/* Round Z: profile tab fields flow in two columns on desktop so the list
   isn't one long strip; collapses to a single column on phones. */
.profile-panel table.kv { width: 100%; }
.profile-panel table.kv tbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.2rem;
  align-items: start;
}
.profile-panel table.kv tr {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  border-bottom: 1px solid var(--border);
  padding: 0.35rem 0;
}
.profile-panel table.kv th,
.profile-panel table.kv td {
  display: block;
  border: none;
  padding: 0.15rem 0.3rem;
  text-align: left;
}
.profile-panel table.kv input[type="text"],
.profile-panel table.kv input[type="date"],
.profile-panel table.kv select,
.profile-panel table.kv textarea {
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .profile-panel table.kv tbody { grid-template-columns: 1fr; }
  .profile-panel table.kv tr { grid-template-columns: 130px minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .profile-panel table.kv tr { grid-template-columns: 1fr; }
  .profile-panel table.kv th { padding-bottom: 0; }
}

/* Round W: documents tab — bold teal section bands so each document group
   stands out. */
.docs-section { margin-bottom: 1.15rem; }
.docs-section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(90deg, #286e75, #3f8f8a);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-base);
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-sm);
  margin-bottom: 0.5rem;
}
.docs-section-icon { font-size: var(--fs-base); }
.docs-count {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  padding: 0.05rem 0.6rem;
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* Round W: notes timeline — vertical rail with recency dots and grouped
   labels (This Week / This Month / Last Month / years). */
.notes-timeline { margin-bottom: 1rem; }
.tl-group { position: relative; padding-left: 1.85rem; }
.tl-group::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dbe5e1;
}
.tl-group-label {
  display: inline-block;
  position: relative;
  margin: 0.85rem 0 0.5rem -1.85rem;
  background: #e2f0ee;
  color: #1d5c55;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--r-pill);
  padding: 0.22rem 0.8rem;
}
.tl-group:first-child .tl-group-label { margin-top: 0; }
.tl-item { position: relative; margin-bottom: 0.65rem; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -1.62rem;
  top: 0.95rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #b9c7c3;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #dbe5e1;
}
.tl-item.tl-now::before { background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.tl-item.tl-recent::before { background: #7fb3ac; box-shadow: 0 0 0 2px #7fb3ac; }

/* Round W: note cards span the full panel width; author/date + delete sit
   underneath the note text. */
.note-card-full { display: block; }
.note-card-full .live-edit { display: block; }
.note-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.note-meta-row .note-byline { margin-top: 0; }

/* Round X: assessment tap-to-answer buttons — on phones every dropdown gets
   a row of buttons so answering is a single tap. Hidden on desktop where the
   dropdowns are easy enough. */
.opt-chips { display: none; }
@media (max-width: 760px) {
  .opt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
  }
}
.opt-chip {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: var(--r-pill);
  padding: 0.42rem 0.85rem;
  font-size: var(--fs-md);
  cursor: pointer;
}
.opt-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* Round X: move-in checklist — badge showing HOW an item got completed. */
.src-badge {
  display: inline-block;
  border-radius: var(--r-pill);
  padding: 0.12rem 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-left: 0.35rem;
  vertical-align: 1px;
}
.src-badge.src-auto { background: #dff0ea; color: #1d5c55; }
.src-badge.src-manual { background: #f7edcf; color: #8a6d1a; }

/* Round W: contacts table — call link is mobile-only (phone numbers stay
   clickable on phones); email gets a mail icon beside the field. */

.email-cell { display: inline-flex; align-items: center; gap: 0.45rem; }
.mail-icon-link { font-size: var(--fs-base); text-decoration: none; line-height: 1; }
.mail-icon-link:hover { transform: scale(1.15); }

/* ═══════════════════════════════════════════════════════════════════════
   ROUND WW — 2026 REDESIGN LAYER ("Audubon Slate")
   Everything below this marker restyles the site: same brand palette,
   sharper execution. TO REVERT THE REDESIGN: restore style-classic.css
   over style.css (the pre-redesign snapshot kept in static/css/).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #12292c;                 /* near-black teal ink for headings */
  --mint: #58c5a8;
  --teal-600: #2b7880;
  --teal-700: #286e75;
  --teal-800: #1c4f54;
  --teal-900: #14383c;
  --bg: #f2f5f4;
  --border: #e3eae7;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(18, 41, 44, 0.05), 0 6px 20px rgba(18, 41, 44, 0.05);
  --shadow-hover: 0 3px 8px rgba(18, 41, 44, 0.08), 0 14px 30px rgba(18, 41, 44, 0.10);
  --ring: 0 0 0 3px rgba(88, 197, 168, 0.28);
}

/* ---- Canvas: layered, not flat ---- */
body {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(88, 197, 168, 0.07), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(40, 110, 117, 0.06), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: rgba(88, 197, 168, 0.35); }

/* ---- Top ribbon: glassy, with a brand gradient hairline ---- */
.topbar {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(18, 41, 44, 0.06), 0 6px 18px rgba(18, 41, 44, 0.05);
  position: sticky;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-800), var(--teal-600) 30%, var(--mint) 70%, var(--gold));
  opacity: 0.85;
}
.topbar nav a {
  position: relative;
  border-radius: var(--r-sm);
  padding: 0.42rem 0.8rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.topbar nav a:hover { background: rgba(40, 110, 117, 0.08); color: var(--teal-800); }
.topbar nav a.active {
  background: linear-gradient(140deg, var(--teal-600), var(--teal-800));
  color: #fff;
  box-shadow: 0 2px 8px rgba(28, 79, 84, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.brand-title { color: var(--ink); letter-spacing: -0.01em; }
.brand-subtitle { color: var(--teal-700); letter-spacing: 0.14em; font-size: var(--fs-xs); }

/* ---- Typography: confident hierarchy ---- */
h1, h2.section-heading {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-3xl); position: relative; padding-bottom: 0.55rem; margin-bottom: 0.55rem; }
h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--mint), var(--teal-600));
}
.login-box h1::after { left: 50%; transform: translateX(-50%); }
h2 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.page-subtitle { font-size: var(--fs-md); }

/* ---- Panels: hairline borders, layered depth, soft top sheen ---- */
.panel {
  border: 1px solid rgba(18, 41, 44, 0.07);
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 45px),
    var(--card);
}

/* ---- Tables: quiet headers, warm row hover ---- */
table.data-table thead th {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #7b8a90;
  font-weight: 700;
  border-bottom: 2px solid #e6edeb;
  padding-bottom: 0.55rem;
}
table.data-table tbody tr { transition: background 0.12s ease; }
table.data-table tbody tr:hover { background: #f2f8f6; }
table.data-table td { border-bottom: 1px solid #eef3f2; }
tr.vacant-row:hover { background: transparent !important; }

/* ---- Buttons: gradient primaries with real presence ---- */
.button, button[type="submit"], .cp-toolbar button {
  border-radius: var(--r-md);
}
.button:not(.ghost), form button[type="submit"]:not(.ghost) {
  background: linear-gradient(140deg, var(--teal-600), var(--teal-800));
  box-shadow: 0 2px 6px rgba(28, 79, 84, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.button:not(.ghost):hover, form button[type="submit"]:not(.ghost):hover {
  background: linear-gradient(140deg, var(--teal-600), var(--teal-800));
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(28, 79, 84, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.button:not(.ghost):active, form button[type="submit"]:not(.ghost):active {
  transform: translateY(0);
  filter: brightness(0.97);
}
.button.ghost {
  background: rgba(88, 197, 168, 0.10);
  border: 1px solid rgba(40, 110, 117, 0.25);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.button.ghost:hover { background: rgba(88, 197, 168, 0.2); border-color: rgba(40, 110, 117, 0.4); }

/* ---- Inputs: soft fill + mint focus ring ---- */
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="date"], select, textarea {
  background: #fbfdfc;
  border: 1px solid #d9e4e0;
  border-radius: var(--r-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="password"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--mint);
  box-shadow: var(--ring);
}

/* ---- Badges & chips: duotone with hairline ---- */
.badge { box-shadow: inset 0 0 0 1px rgba(18, 41, 44, 0.06); }
.stat-chip {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(18, 41, 44, 0.08);
  box-shadow: 0 1px 3px rgba(18, 41, 44, 0.05);
  border-radius: var(--r-pill);
}

/* ---- Dashboard action cards: lift + icon glow ---- */
a.action-card {
  border: 1px solid rgba(18, 41, 44, 0.07);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
a.action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(88, 197, 168, 0.5);
  box-shadow: var(--shadow-hover);
}
.action-icon {
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(18, 41, 44, 0.05), 0 2px 6px rgba(18, 41, 44, 0.07);
}

/* ---- Stat tiles: numbers that pop ---- */
.stat-card { transition: transform 0.14s ease, box-shadow 0.14s ease; }
a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.stat-num { font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.stat-card.active-filter {
  background: linear-gradient(160deg, #eafaf4, #dff2ec);
  border-color: rgba(88, 197, 168, 0.55);
  box-shadow: inset 0 0 0 1px rgba(88, 197, 168, 0.35), var(--shadow);
}

/* ---- Census banner cards / house header chips ---- */
.total-banner { border: 1px solid rgba(18, 41, 44, 0.07); }
.house-panel-header { align-items: center; }
.house-title-bubble { box-shadow: 0 1px 4px rgba(18, 41, 44, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.4); }

/* ---- Documents section bands: deeper, with a sheen ---- */
.docs-section-head {
  background: linear-gradient(100deg, var(--teal-800), var(--teal-600) 75%, #35958f);
  box-shadow: 0 2px 8px rgba(28, 79, 84, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
}

/* ---- Resident profile band + tabs ---- */
.rp-band { box-shadow: 0 4px 18px rgba(28, 79, 84, 0.22); }
.rp-tabs a { border-radius: 8px 9px 0 0; transition: background 0.12s ease; }

/* ---- Nav search panel ---- */
.nav-search-panel, #nav-search-panel {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hover);
}

/* ---- Details/summary + misc polish ---- */
details.inline-edit summary:hover .edit-hint { color: var(--teal-600); }


/* ---- Scrollbar (WebKit): slim and quiet ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c5d4cf; border-radius: var(--r-pill); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #a9beb8; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Reduce motion for users who prefer it ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Round XX: profile section bands, zebra house tables, sidebar color ---- */

/* Profile section headers: full-width bands inside the 2-col grid, each
   with its own accent color. */
.profile-panel table.kv tr.kv-section-row {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  border-bottom: none;
  padding: 1.05rem 0 0.3rem;
}
.kv-section-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink, #12292c);
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-sm);
  border-left: 4px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(18, 41, 44, 0.05);
}
.kv-section-icon { font-size: var(--fs-base); }
.kv-tone-demo     { background: linear-gradient(90deg, #e2f0ee, #eef7f3 70%, transparent); border-left-color: #2b7880; }
.kv-tone-res      { background: linear-gradient(90deg, #f1eafb, #f7f2fc 70%, transparent); border-left-color: #8e6cc8; }
.kv-tone-care     { background: linear-gradient(90deg, #e3effa, #eef5fb 70%, transparent); border-left-color: #4a7fb5; }
.kv-tone-clinical { background: linear-gradient(90deg, #fdf1ef, #fdf5f4 70%, transparent); border-left-color: #c0392b; }
.kv-tone-pricing  { background: linear-gradient(90deg, #fdf6e3, #fdfaf2 70%, transparent); border-left-color: #d99e14; }
.kv-tone-notes    { background: linear-gradient(90deg, #eef1f4, #f6f8f8 70%, transparent); border-left-color: #7b8a90; }

/* Banded (zebra) rows on the dashboard house tables. */
table.house-table tbody tr:nth-child(even) { background: #f4faf8; }
table.house-table tbody tr:hover { background: #ecf6f1; }
table.house-table tbody tr.vacant-row,
table.house-table tbody tr.vacant-row:hover { background: repeating-linear-gradient(45deg, #fbfdfc, #fbfdfc 8px, #f2f8f6 8px, #f2f8f6 16px); }

/* Resident profile sidebar: soft card with colored section labels. */
.rp-side-col {
  background: linear-gradient(180deg, #f7fbfa, #f2f8f6);
  border: 1px solid rgba(18, 41, 44, 0.06);
  border-radius: var(--r-lg);
  /* Top padding must clear the photo that overhangs the header band —
     the blanket padding here was covering the "Vitals" label. */
  padding: 72px 1.1rem 1rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
@media (max-width: 860px) { .rp-side-col { padding-top: 1rem !important; } }
@media (max-width: 760px) { .rp-side-col { padding-top: 1rem !important; } }
.rp-side-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #2b7880;
  margin-top: 0.85rem;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid rgba(88, 197, 168, 0.45);
}
.rp-side-label:first-child { margin-top: 0.1rem; }
.rp-vital { padding: 0.28rem 0; }
.rp-vital-allergy {
  box-shadow: 0 1px 4px rgba(192, 57, 43, 0.08);
}

/* ---- Round XX-2: documents Edit + trash aligned on one line, with
   breathing room from the panel edge ---- */
table.docs-table td.doc-actions-cell {
  text-align: right;
  padding-right: 0.9rem !important;
  vertical-align: middle;
}
table.docs-table td.doc-actions-cell form,
table.docs-table td.doc-actions-cell a.button {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 !important;
}
table.docs-table td.doc-actions-cell a.button { margin-right: 0.35rem !important; }


/* ---- Round XX-3: Move-In screen dress-up ---- */
.mi-section-head { margin-bottom: 0.9rem; }
.move-in-form { padding-top: 1.6rem; }
.move-in-form .mi-full { margin-top: 1.4rem; }
.move-in-form .mi-field label:empty { display: none; }

/* ---- Round XX-4: Cancel buttons match the size of their primary button
   wherever they sit in an action row. ---- */
.form-actions .button.small {
  padding: 0.6rem 1.1rem;
  font-size: var(--fs-md);
}

/* ---- Round YY: assessment form facelift — each section is a card with a
   color-coded pill legend, so sections are unmistakable at a glance and the
   form reads like the rest of the redesigned site. Mobile tap-chips keep
   working as before. ---- */
.assessment-form .assessment-section {
  border: 1px solid rgba(18, 41, 44, 0.07);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 45px),
    #fff;
  box-shadow: var(--shadow);
  padding: 1.15rem 1.4rem 1.3rem;
  margin: 0 0 1.35rem;
}
.assessment-form .assessment-section legend {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #fff;
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--teal-600, #2b7880), var(--teal-800, #1c4f54));
  box-shadow: 0 2px 6px rgba(28, 79, 84, 0.28);
}
/* Rotate legend accent colors so neighboring sections never match. */
.assessment-form .assessment-section:nth-of-type(5n+2) legend { background: linear-gradient(135deg, #8e6cc8, #6d4fa3); box-shadow: 0 2px 6px rgba(109, 79, 163, 0.3); }
.assessment-form .assessment-section:nth-of-type(5n+3) legend { background: linear-gradient(135deg, #4a7fb5, #35618f); box-shadow: 0 2px 6px rgba(53, 97, 143, 0.3); }
.assessment-form .assessment-section:nth-of-type(5n+4) legend { background: linear-gradient(135deg, #d99e14, #b07f0a); box-shadow: 0 2px 6px rgba(176, 127, 10, 0.3); }
.assessment-form .assessment-section:nth-of-type(5n)   legend { background: linear-gradient(135deg, #c96b5d, #a84c3f); box-shadow: 0 2px 6px rgba(168, 76, 63, 0.3); }

/* ---- Round YY-2: checkbox-grid "Other" rows — label hugs its text box ---- */


/* ---- Round ZZ: docs empty states, Rates tab, Notes polish, manual-entry
   callout in Communication history ---- */

/* Empty state rows in the document sections */
.docs-empty {
  margin: 0.35rem 0 0.9rem;
  padding: 0.75rem 1rem;
  border: 1.5px dashed #d3ddd9;
  border-radius: var(--r-md);
  background: #fbfdfc;
  color: var(--muted);
  font-size: var(--fs-md);
  font-style: italic;
}

/* Rates tab: current rate banner */
.rate-current-banner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #e2f0ee, #d5ebe5);
  border: 1px solid #b9d6d1;
  border-radius: var(--r-lg);
  padding: 0.8rem 1.1rem;
  margin-bottom: 1rem;
}
.rate-current-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #2b7880;
}
.rate-current-value {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink, #12292c);
}
.rate-current-since { color: var(--muted); font-size: var(--fs-md); }

/* Notes timeline polish — same structure, slicker cards */
.note-card {
  border: 1px solid rgba(18, 41, 44, 0.08);
  border-left: 4px solid var(--mint, #58c5a8);
  border-radius: var(--r-md);
  box-shadow: 0 1px 3px rgba(18, 41, 44, 0.05);
  background: #fff;
  transition: box-shadow 0.12s ease;
}
.note-card:hover { box-shadow: 0 2px 8px rgba(18, 41, 44, 0.09); }
.tl-group-label {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #2b7880;
  background: #e2f0ee;
  border: 1px solid #c3ddd7;
  border-radius: var(--r-pill);
  padding: 0.25rem 0.75rem;
}

/* Manual (staff-logged) entries stand apart from calls/texts/voicemails */
.note-card.comm-manual {
  border-left-color: var(--gold, #f3b929);
  background: linear-gradient(180deg, #fffdf5, #fff 60%);
}
.manual-badge {
  display: inline-block;
  background: #fdf6e3;
  color: #8a5a00;
  border: 1px solid #ecdfb0;
  border-radius: var(--r-pill);
  padding: 0.1rem 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-left: 0.35rem;
  vertical-align: 1px;
}

/* ---- Round ZZ-2: profile tab headings share the gold band treatment ---- */
.tab-heading { margin-bottom: 1rem; }
.panel-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }

/* ---- Round ZZ-3: tab headings get their own identity — an icon tile, a
   large confident title, and a signature gradient underline. Clearly a
   level above the uppercase section bands beneath them. ---- */
.tab-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0 0 0.8rem;
  border-bottom: 1px solid #e6edeb;
  position: relative;
}
.tab-heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 68px; height: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--teal-600, #2b7880), var(--mint, #58c5a8) 60%, var(--gold, #f3b929));
}
.tab-heading-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  background: linear-gradient(140deg, #e7f4f1, #d2eae3);
  box-shadow: inset 0 0 0 1px rgba(43, 120, 128, 0.18), 0 2px 5px rgba(18, 41, 44, 0.06);
  flex-shrink: 0;
}
.tab-heading-text {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink, #12292c);
  line-height: 1.2;
}
.panel-heading-row .tab-heading { flex: 1 1 auto; margin-bottom: 0; }
@media (max-width: 640px) {
  .tab-heading-icon { width: 34px; height: 34px; font-size: var(--fs-base); }
  .tab-heading-text { font-size: var(--fs-lg); }
}

/* ---- Round ZZ-4: long emails/phones in the profile sidebar wrap instead of
   spilling past the bubble ---- */
.rp-side-col .rp-vital,
.rp-side-col .rp-vital a {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- Round AAA: banded tables everywhere + page polish (Census, Facility,
   ToDo, Projections, SEO) ---- */

/* Zebra banding for every data table — the EMR look, consistent site-wide.
   (Census history, facility tasks, projections, SEO tables, call-offs…) */
table.data-table tbody tr:nth-child(even) { background: #f6faf8; }
table.data-table tbody tr:hover { background: #eef7f3; }

/* Panel headings get a miniature version of the tab-heading underline so
   every page reads as designed, not default. */
.panel > h2 {
  position: relative;
  padding-bottom: 0.55rem;
  margin-bottom: 1rem;
}
.panel > h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 40px; height: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--teal-600, #2b7880), var(--mint, #58c5a8));
}

/* ToDo page: cards lift on hover, task rows become soft tappable pills,
   and the progress badge reads like a proper counter. */
.todo-card { transition: box-shadow 0.14s ease, transform 0.14s ease; }
.todo-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.todo-card .checklist-list li { margin: 0.15rem 0; }
.todo-card .checkbox-label {
  padding: 0.35rem 0.6rem;
  border-radius: var(--r-sm);
  transition: background 0.12s ease;
  width: 100%;
}
.todo-card .checkbox-label:hover { background: #eef7f3; }
.todo-card .badge {
  font-size: var(--fs-sm);
  padding: 0.35rem 0.85rem;
  box-shadow: inset 0 0 0 1px rgba(18, 41, 44, 0.06);
}

/* Facility Management: the add-task form sits in its own quiet strip, and
   the Recently completed list steps back visually. */
.house-panel .inline-form-grid {
  background: #f7fbfa;
  border: 1px solid #e4edea;
  border-radius: var(--r-md);
  padding: 0.7rem 0.8rem;
  margin-top: 1rem !important;
}
.house-panel tr.muted td { background: #fbfdfc !important; }
.panel-subheading {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

/* Projections: sturdier header row + clean money columns. */
.proj-table thead th { border-bottom: 2px solid #dbe7e2; }
.proj-table tbody tr:hover { background: #eef7f3; }

/* SEO page: charts and tables sit in the same refined cards; number-heavy
   tables align right where it matters via existing markup, this just keeps
   the panels breathing. */
.seo-range-row { flex-wrap: wrap; gap: 0.5rem; }
.seo-range-row .button.small, .seo-range-row a.button { box-shadow: none; }

/* ---- Round BBB: projections hero + annual figure chips ---- */
.proj-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background:
    radial-gradient(500px 160px at 90% -20%, rgba(243, 185, 41, 0.12), transparent 60%),
    linear-gradient(135deg, #eaf6f2, #dcefe8);
  border: 1px solid #bcdcd4;
  border-radius: var(--r-xl);
  padding: 1.15rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.proj-hero-icon {
  width: 54px; height: 54px;
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xl);
  background: linear-gradient(140deg, #fdf6e3, #fbeec9);
  box-shadow: inset 0 0 0 1px rgba(217, 158, 20, 0.25), 0 2px 6px rgba(18, 41, 44, 0.08);
  flex-shrink: 0;
}
.proj-hero-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #2b7880;
}
.proj-hero-value { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.proj-hero-per { font-size: var(--fs-base); font-weight: 700; color: var(--muted); margin-left: 0.2rem; }


/* Annual Figures: yearly input + monthly chip on one tidy line */
.annual-cell-wrap { display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.mo-chip {
  display: inline-block;
  background: #eef7f3;
  border: 1px solid #cfe6dd;
  border-radius: var(--r-pill);
  padding: 0.18rem 0.65rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #2b7880;
  white-space: nowrap;
}

/* ---- Round BBB-2: projections hero — divided stat sections ---- */
.proj-hero { flex-wrap: wrap; row-gap: 0.8rem; }
.proj-hero-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, #b9d6d1, transparent);
  margin: 0 0.4rem;
}
.proj-hero-stat-value { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink, #12292c); }
@media (max-width: 720px) {
  .proj-hero-divider { display: none; }
  .proj-hero { flex-direction: column; align-items: flex-start; }
}

/* ---- Round BBB-3: annual-driven projection rows (Property Taxes, Insurance,
   Flood, PL/GL, WC) read at full strength like every other row — the muted
   gray was washing out the bold names. ---- */
tr.proj-driven td { color: var(--text) !important; }
tr.proj-driven td:first-child strong { color: var(--ink, #12292c); font-weight: 700; }

/* ---- Round BBB-4: readable money on the dark chips + hero stats sized to
   match the main figure ---- */
.stat-chip .chip-ok { color: #ffd66b; }   /* gold — pops on the dark teal pill */
.stat-chip .chip-bad { color: #ffb3a8; }
.proj-hero-stat-value { font-size: var(--fs-3xl); }

/* ---- Round CCC: emergency contact blocks on the assessment ---- */
.ec-block { border-top: 1px dashed #dbe7e2; padding-top: 0.7rem; margin-top: 0.7rem; }
.ec-block:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.ec-block-label {
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #4a7fb5;
  margin-bottom: 0.4rem;
}
#ec-add-btn { margin-top: 0.6rem; }

/* ---- Round DDD: taller free-text box for the assessment's Notes section ---- */
.assessment-form textarea[name="assessment_notes"] { min-height: 120px; max-width: none; width: 100%; }

/* ---- Round EEE: Clinical tab — assistive devices in two columns ---- */
.cl-device-grid {
  display: grid;
  /* Columns only as wide as their content, so the right pair sits right
     next to the left pair instead of stretching across the panel. */
  grid-template-columns: max-content max-content;
  justify-content: start;
  gap: 0.55rem 2.5rem;
}
.cl-field { display: flex; align-items: center; gap: 0.75rem; justify-content: flex-start; }
.cl-field label {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  min-width: 0;       /* label only as wide as its text — dropdown hugs it */
}
.cl-field form { margin: 0; }
/* Beat the profile panel's 200px min-width on live-edit selects. */
.cl-field select,
.profile-panel .cl-field .live-edit select {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
}
/* Each pair sits as a compact unit, then the two columns space out. */
.cl-device-grid { gap: 0.55rem 2.5rem; }
@media (max-width: 640px) { .cl-device-grid { grid-template-columns: 1fr; } }

/* ---- Round FFF: resident header pills — refined, layered, legible on the
   dark teal band. Frosted glass base + soft ring + status dot. ---- */
.rp-band-actions { gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.meta-bubble.band-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.15;
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(10, 30, 32, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.28);
  backdrop-filter: saturate(1.15);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.meta-bubble.band-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 3px 8px rgba(10, 30, 32, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.42);
}
.pill-ico { font-size: 0.9em; line-height: 1; filter: saturate(1.05); }

/* Status pill: a small live dot instead of shouting color */
.band-pill .pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}
.band-pill.status-active { background: #eafaf1; color: #14663c; }
.band-pill.status-moved_out { background: #f1f4f6; color: #4d5a61; }
.band-pill.status-never { background: #f6f1f4; color: #6b4f5d; }

/* Meta pills elsewhere on the page (sidebar chips) get the icon spacing */
.meta-bubble .pill-ico { margin-right: 0.05rem; }
.meta-bubble { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---- Round GGG: care plan — one titled section per care area, legend
   colors rotate so neighbors never match. ---- */
.cp-area-section .cp-row { border-bottom: none; padding-top: 0; }
.cp-area-section .a-row { grid-template-columns: 1fr; }
.assessment-form .cp-area-section:nth-of-type(6n+1) legend { background: linear-gradient(135deg, #2b7880, #1c4f54); box-shadow: 0 2px 6px rgba(28, 79, 84, 0.28); }
.assessment-form .cp-area-section:nth-of-type(6n+2) legend { background: linear-gradient(135deg, #8e6cc8, #6d4fa3); box-shadow: 0 2px 6px rgba(109, 79, 163, 0.3); }
.assessment-form .cp-area-section:nth-of-type(6n+3) legend { background: linear-gradient(135deg, #4a7fb5, #35618f); box-shadow: 0 2px 6px rgba(53, 97, 143, 0.3); }
.assessment-form .cp-area-section:nth-of-type(6n+4) legend { background: linear-gradient(135deg, #d99e14, #b07f0a); box-shadow: 0 2px 6px rgba(176, 127, 10, 0.3); }
.assessment-form .cp-area-section:nth-of-type(6n+5) legend { background: linear-gradient(135deg, #c96b5d, #a84c3f); box-shadow: 0 2px 6px rgba(168, 76, 63, 0.3); }
.assessment-form .cp-area-section:nth-of-type(6n)   legend { background: linear-gradient(135deg, #3f8f8a, #2a6b66); box-shadow: 0 2px 6px rgba(42, 107, 102, 0.3); }

/* ---- Round HHH: Quick Actions band on the Profile tab + Clinical vitals ---- */
.kv-tone-actions {
  background: linear-gradient(90deg, #e6f0fb, #f1f7fd 70%, transparent);
  border-left-color: #4a7fb5;
}
.profile-actions.profile-actions-banded {
  margin: 0 0 1.1rem !important;
  padding: 0 0 0.2rem;
  gap: 0.5rem;
}
/* The kv table's own top padding was creating the white gap. */
.profile-panel table.kv tbody > tr.kv-section-row:first-child { padding-top: 0; }
.cl-field input[type="text"] { width: 110px; min-width: 110px !important; max-width: 110px; }

/* ---- Round III: subtle POA / evacuation tags on sidebar contacts ---- */
.side-tags { display: inline-flex; gap: 0.3rem; margin-left: 0.4rem; vertical-align: middle; }
.side-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.08rem 0.42rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  line-height: 1.4;
}
.side-tag-poa { background: #eef1fb; color: #3b4d8f; border: 1px solid #ccd6f0; }
.side-tag-evac { background: #e6f2f8; color: #1f6a86; border: 1px solid #c3dfeb; }

/* ---- Round JJJ: Code Status gets its own section pill (deep red — it's the
   most safety-critical field on the plan). ---- */
.assessment-form .cp-code-section legend {
  background: linear-gradient(135deg, #c0392b, #8f2f24) !important;
  box-shadow: 0 2px 6px rgba(143, 47, 36, 0.32) !important;
}
.cp-code-section .a-row { grid-template-columns: 1fr; }
.cp-code-section select { max-width: 220px; }

/* ---- Round KKK: single-field sections (e.g. Additional Notes) shouldn't
   reserve the wide label column — the label hugs its input. The legend is
   child 1, so a lone field row is :nth-child(2):last-child. ---- */
.assessment-form .assessment-section > .a-row:nth-child(2):last-child {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
/* Full-width free-text rows (Notes) — label left, box fills the rest. */
.assessment-form .a-row:has(> textarea[name="assessment_notes"]) {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 1rem;
}
.assessment-form textarea[name="assessment_notes"] {
  min-height: 120px;
  max-width: none;
  width: 100%;
}

/* ---- Round LLL: POA / Hurricane Evac flags under each assessment contact ---- */
.ec-flags { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.ec-flags .checkbox-label { font-size: var(--fs-md); font-weight: 600; }

/* ---- Round TTT: remove-an-accidental-extra controls ---- */
.row-with-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}
.row-with-remove > input { flex: 1 1 auto; min-width: 0; }
.remove-link {
  flex: 0 0 auto;
  background: #fdf1ef;
  color: #a83232;
  border: 1px solid #eccccc;
  border-radius: var(--r-pill);
  padding: 0.28rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.remove-link:hover {
  background: #f7dede;
  border-color: #d9a9a9;
  color: #8d2020;
}
.ec-block-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* ---- Round UUU: short option lists sit together instead of being
   stretched across a half-page grid column ---- */
.cp-opts.cp-opts-tight {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
}
.cp-opts.cp-opts-tight .cp-opt { max-width: none; }
@media (max-width: 700px) {
  .cp-opts.cp-opts-tight { display: flex; }
}

/* ---- Round VVV: Fall Risk callout — a compact amber mini section ---- */


.cp-mini-section .cp-opt:has(input:checked) {
  background: #fdf0d6;
  border-color: #dcb86b;
  color: #6f4a08;
}


/* Round VVV cont. — make the tight variant win over every earlier .cp-opts
   grid rule regardless of source order. */
.assessment-form .cp-opts.cp-opts-tight,
.cp-row .cp-opts.cp-opts-tight,
.cp-opts.cp-opts-tight {
  display: flex !important;
  flex-wrap: wrap;
  grid-template-columns: none !important;
  gap: 0.25rem 0.5rem;
  justify-content: flex-start;
}
.cp-opts.cp-opts-tight .cp-opt { max-width: none; width: auto; }
.cp-opts.cp-opts-tight .cp-opt-wide { grid-column: auto; }

/* ---- Round WWW: Fall Risk as a compact inline strip under Mobility ---- */


.cp-mini-strip .cp-opt:has(input:checked) { background: none; color: #6f4a08; }

/* ---- Round XXX: mobility options grouped into labelled columns ---- */
.cp-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
  gap: 0.35rem 3rem;
  margin-bottom: 0.5rem;
}
.cp-group { min-width: 0; padding: 0.15rem 0 0.35rem; }
.cp-group + .cp-group { position: relative; }
.cp-group + .cp-group::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.3rem;
  bottom: 0.3rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, #e3ebe8 18%, #e3ebe8 82%, transparent);
}
.cp-group-title {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7b9a92;
  padding: 0 0 0.3rem 0.45rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid #eaf1ee;
  white-space: nowrap;
}
.cp-group-items { display: flex; flex-direction: column; gap: 0.1rem; }
.cp-group-items .cp-opt { max-width: none; grid-column: auto; }
@media (max-width: 780px) {
  .cp-groups { grid-template-columns: 1fr; gap: 0.2rem; }
  .cp-group + .cp-group::before { display: none; }
  .cp-group + .cp-group { border-top: 1px solid #eef3f2; margin-top: 0.25rem; }
}

/* ---- Round YYY: mobility groups in two columns + matching section color ---- */
.cp-groups {
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
  column-gap: 3rem;
}
/* A care-area row with no label should use the section's full width. */
.assessment-form .a-row.cp-row {
  display: block !important;
  grid-template-columns: none !important;
}
.assessment-form .a-row.cp-row > div { width: 100%; }
/* Mobility takes the same blue as Mobility Aids. */
.assessment-form .sec-mobility legend,
.assessment-form .cp-area-section.sec-mobility legend {
  background: linear-gradient(135deg, #4a7fb5, #35618f) !important;
  box-shadow: 0 2px 6px rgba(53, 97, 143, 0.3) !important;
}
@media (max-width: 780px) { .cp-groups { grid-template-columns: 1fr; } }

/* ---- Round ZZZ: uniform control sizing across the contacts table + add row ---- */
table.contacts-table input[type="text"],
table.contacts-table input[type="email"],
table.contacts-table select,
.contacts-add-form input[type="text"],
.contacts-add-form input[type="email"],
.contacts-add-form select,
.contacts-add-form button[type="submit"] {
  height: 36px;
  min-height: 36px;
  padding: 0 0.6rem;
  font-size: var(--fs-md);
  line-height: 1.2;
  border-radius: var(--r-sm);
  box-sizing: border-box;
  vertical-align: middle;
}
table.contacts-table select,
.contacts-add-form select {
  padding-right: 1.7rem;
  appearance: auto;
}
.contacts-add-form button[type="submit"] { padding: 0 1.1rem; }
/* Match the add row's column widths to the table above it. */
.contacts-add-form { align-items: center; row-gap: 0.5rem; }
.contacts-add-form .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 36px;
  font-size: var(--fs-md);
  margin: 0;
  white-space: nowrap;
}
.inline-select-form, .inline-checkbox-form { display: inline-flex; align-items: center; margin: 0; }
.inline-select-form select { margin: 0; }
.panel-heading-actions { display: inline-flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.button.disabled, span.button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Round AAAA: care plan Mobility renders byte-identically to the
   assessment. Both pages emit the same markup; these rules pin the layout so
   no earlier .cp-opts / .cp-area-section rule can win in either context. ---- */
.assessment-form .cp-groups,
.cp-area-section .cp-groups,
.cp-groups {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, max-content)) !important;
  justify-content: start;
  column-gap: 2rem;
  row-gap: 0.35rem;
  align-items: start;
}
/* The care plan's .cp-area-section was zeroing the row's top padding; the
   assessment keeps it. Match the assessment. */
.assessment-form .cp-area-section .cp-row { padding-top: 1.1rem; }
.assessment-form .cp-area-section.sec-mobility .cp-row,
.assessment-form .sec-mobility .cp-row {
  padding: 1.1rem 0 1.25rem;
  border-bottom: none;
}
.assessment-form .sec-mobility .cp-group-items { display: flex; flex-direction: column; gap: 0.1rem; }
@media (max-width: 780px) {
  .assessment-form .cp-groups,
  .cp-area-section .cp-groups,
  .cp-groups { grid-template-columns: 1fr !important; }
}

/* ---- Round BBBB: Fall Risk as a subtly highlighted mobility group ---- */
.cp-group.cp-group-fall-risk {
  background: linear-gradient(180deg, #fffaf0 0%, rgba(255, 250, 240, 0) 100%);
  border-left: 3px solid #d59a2c;
  border-radius: var(--r-sm);
  padding: 0.15rem 0.5rem 0.4rem 0.6rem;
  margin-left: -0.15rem;
}
.cp-group.cp-group-fall-risk .cp-group-title {
  color: #9a6a10;
  border-bottom-color: #f0e0bd;
}
.cp-group.cp-group-fall-risk .cp-opt { font-weight: 600; color: #5c4410; }
.cp-group.cp-group-fall-risk .cp-opt:hover { background: rgba(255, 255, 255, 0.8); }
.cp-group.cp-group-fall-risk .cp-opt:has(input:checked) { background: #fdf2da; color: #6f4a08; }
.cp-group.cp-group-fall-risk + .cp-group::before { display: none; }

/* ---- Round CCCC ----
   1. Option grids size to their content and pack left. A fixed 1fr column was
      leaving a page-wide white gap between the two columns (Scott, 07/30/26).
      RULE FOR FUTURE SECTIONS: never give an option grid stretch columns. */
.assessment-form .cp-groups,
.cp-area-section .cp-groups,
.cp-groups {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, max-content)) !important;
  justify-content: start;
  column-gap: 3rem;
  row-gap: 0.35rem;
  align-items: start;
}
.cp-groups .cp-group { max-width: 46vw; }
/* 2. Legend colours now come from an inline style keyed on the section name,
      so the assessment and care plan always match. Kill the old position-based
      rotations and the !important overrides that would beat the inline style. */
.assessment-form .assessment-section:nth-of-type(5n+2) legend,
.assessment-form .assessment-section:nth-of-type(5n+3) legend,
.assessment-form .assessment-section:nth-of-type(5n+4) legend,
.assessment-form .assessment-section:nth-of-type(5n)   legend,
.assessment-form .cp-area-section:nth-of-type(6n+1) legend,
.assessment-form .cp-area-section:nth-of-type(6n+2) legend,
.assessment-form .cp-area-section:nth-of-type(6n+3) legend,
.assessment-form .cp-area-section:nth-of-type(6n+4) legend,
.assessment-form .cp-area-section:nth-of-type(6n+5) legend,
.assessment-form .cp-area-section:nth-of-type(6n)   legend,
.assessment-form .sec-mobility legend,
.assessment-form .cp-area-section.sec-mobility legend {
  background: none;
  box-shadow: none;
}
@media (max-width: 980px) {
  .assessment-form .cp-groups,
  .cp-area-section .cp-groups,
  .cp-groups { grid-template-columns: minmax(0, 1fr) !important; }
  .cp-groups .cp-group { max-width: none; }
}

/* ---- Round DDDD: apply design rule #1 (no stranded options / white gaps) to
   EVERY option grid on both forms, not just the grouped ones.
   Stretch columns (1fr / auto-fill minmax) put column 2 at the 50% mark of a
   full-width panel, stranding options far to the right. Columns must size to
   their content and pack left. ---- */
.cp-opts,
.assessment-form .cp-opts,
.cp-area-section .cp-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
  column-gap: 3rem;
  row-gap: 0.2rem;
  align-items: start;
}
.cp-opts .cp-opt { max-width: 46vw; }
.cp-opts .cp-opt-wide { grid-column: 1 / -1; max-width: 94vw; }

/* Assessment checkbox grids (Allergies, Medical Hx/Dx, Mental Health) — same
   rule: pack left instead of stretching across the panel. */
.checkbox-grid,
.assessment-form .checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  column-gap: 2.25rem;
  row-gap: 0.35rem;
}
.checkbox-grid > .checkbox-label,
.assessment-form .checkbox-grid > .checkbox-label {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;      /* long diagnoses wrap rather than overflow */
}
.checkbox-grid > .checkbox-label > input[type="checkbox"] { flex: 0 0 auto; }

/* The tight variant (short chips) stays a left-packed flowing row. */
.assessment-form .cp-opts.cp-opts-tight,
.cp-row .cp-opts.cp-opts-tight,
.cp-opts.cp-opts-tight {
  display: flex !important;
  flex-wrap: wrap;
  grid-template-columns: none !important;
  gap: 0.25rem 0.5rem;
  justify-content: flex-start;
}

@media (max-width: 980px) {
  .cp-opts,
  .assessment-form .cp-opts,
  .cp-area-section .cp-opts,
  .checkbox-grid,
  .assessment-form .checkbox-grid { flex-direction: column; align-items: stretch; }
  .cp-opts .cp-opt, .cp-opts .cp-opt-wide { max-width: none; }
}

/* ---- Round EEEE: belt-and-braces for the checkbox grids ----
   Allergies, Medical Hx/Dx and Mental Health all share .checkbox-grid. The
   overlap was a degenerate `repeat(auto-fill, minmax(0, max-content))` grid;
   these rules make sure nothing can re-impose a zero-width column track. */
.checkbox-grid,
.assessment-form .checkbox-grid,
.profile-panel .checkbox-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  justify-content: flex-start;
  align-items: center;
  column-gap: 2.25rem;
  row-gap: 0.35rem;
}
.checkbox-grid > .checkbox-label {
  flex: 0 1 auto !important;
  min-width: max-content;
  max-width: 100%;
  white-space: normal;
}
@media (max-width: 700px) {
  .checkbox-grid,
  .assessment-form .checkbox-grid,
  .profile-panel .checkbox-grid { flex-direction: column; align-items: stretch; }
  .checkbox-grid > .checkbox-label { min-width: 0; }
}

/* ---- Round FFFF: checked options get the care plan's green bubble on the
   assessment too (Allergies, Medical Hx/Dx, Mental Health, Clinical tab). ---- */
.checkbox-grid > .checkbox-label {
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.checkbox-grid > .checkbox-label:has(input:checked) {
  background: #e2f0ee;
  color: var(--text, #223);
  font-weight: 600;
}
/* Fallback for browsers without :has() — the app adds this class on change. */
.checkbox-grid > .checkbox-label.is-checked {
  background: #e2f0ee;
  color: var(--text, #223);
  font-weight: 600;
}

/* ---- Round GGGG: assessment checkbox options adopt the care plan's exact
   typography (.cp-opt) — darker text, same size/leading, same chip padding,
   checkbox aligned to the first line. ---- */
.checkbox-grid > .checkbox-label {
  display: grid !important;
  grid-template-columns: 16px auto;
  column-gap: 0.5rem;
  align-items: start;
  font-size: var(--fs-md)!important;
  line-height: 1.35;
  color: var(--text) !important;
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-sm);
  min-width: max-content;
  max-width: 100%;
}
.checkbox-grid > .checkbox-label > input[type="checkbox"] {
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px;
  min-height: 15px;
  margin-top: 2px;
}
.checkbox-grid > .checkbox-label:hover { background: #f2f8f6; }
.checkbox-grid > .checkbox-label:has(input:checked),
.checkbox-grid > .checkbox-label.is-checked {
  background: #e2f0ee;
  color: var(--text) !important;
  font-weight: 600;
}
@media (max-width: 700px) {
  .checkbox-grid > .checkbox-label { min-width: 0; font-size: var(--fs-base)!important; }
}

/* ---- Round HHHH: long option lists line up in even columns ----
   Ragged flex-wrap left Medical Hx/Dx offset row to row. An auto-fill grid
   with a REAL minimum (not 0) gives evenly aligned, fully packed columns —
   which still satisfies design rule #1, since there is no stranded half-page
   gap. Never use a 0 minimum here (that collapses to zero-width tracks). */
.sec-medical-history-diagnosis .checkbox-grid,
.sec-medical-hx-dx .cp-opts,
.sec-allergies .checkbox-grid,
.sec-mental-health .checkbox-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  justify-content: start;
  align-items: start;
  column-gap: 1.25rem;
  row-gap: 0.3rem;
}
.sec-medical-history-diagnosis .checkbox-grid > .checkbox-label,
.sec-allergies .checkbox-grid > .checkbox-label,
.sec-mental-health .checkbox-grid > .checkbox-label,
.sec-medical-hx-dx .cp-opts > .cp-opt {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 780px) {
  .sec-medical-history-diagnosis .checkbox-grid,
  .sec-medical-hx-dx .cp-opts,
  .sec-allergies .checkbox-grid,
  .sec-mental-health .checkbox-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }
}

/* ---- Round IIII (revised): grouped Allergies / Medical Hx-Dx ----
   Both forms now emit identical .cp-opt markup, so one rule styles both.
   Groups sit side by side; options stack in a single column inside a group. */
.sec-allergies .cp-groups,
.sec-medical-history-diagnosis .cp-groups,
.sec-medical-hx-dx .cp-groups {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(215px, max-content)) !important;
  justify-content: start;
  align-items: start;
  column-gap: 2.25rem;
  row-gap: 0.9rem;
}
.sec-allergies .cp-group-items,
.sec-medical-history-diagnosis .cp-group-items,
.sec-medical-hx-dx .cp-group-items {
  display: flex !important;
  flex-direction: column;
  gap: 0.1rem;
  grid-template-columns: none !important;
}
@media (max-width: 780px) {
  .sec-allergies .cp-groups,
  .sec-medical-history-diagnosis .cp-groups,
  .sec-medical-hx-dx .cp-groups { grid-template-columns: 1fr !important; }
}

/* ---- Round JJJJ (revised): grouped lists pack into balanced columns ----
   The columns are built server-side (see _grouped_opts_html), so short groups
   genuinely stack under taller ones instead of each claiming its own column
   and pushing the rest off to the right — design rule #1. */
.cp-groups.cp-groups-cols {
  display: grid !important;
  grid-template-columns: repeat(var(--cp-cols, 4), minmax(0, max-content)) !important;
  justify-content: start;
  align-items: start;
  column-gap: 2.75rem;
  row-gap: 0;
}
.cp-groups.cp-groups-cols > .cp-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.cp-groups.cp-groups-cols .cp-group { margin: 0; padding: 0; }
.cp-groups.cp-groups-cols .cp-group + .cp-group::before { display: none; }
.cp-groups.cp-groups-cols .cp-group-items {
  display: flex !important;
  flex-direction: column;
  gap: 0.1rem;
  grid-template-columns: none !important;
}
@media (max-width: 1400px) {
  .cp-groups.cp-groups-cols { grid-template-columns: repeat(2, minmax(0, max-content)) !important; }
}
@media (max-width: 780px) {
  .cp-groups.cp-groups-cols { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---- Round KKKK: eligibility screening as Yes/No checkmark rows ----
   Two balanced columns of rows; the question sits left, the Yes/No chips
   right, using the same .cp-opt styling as every other option section. */
.yn-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  row-gap: 0.15rem;
  align-items: start;
}
.yn-row {
  /* Reverted to the aligned layout: the Yes/No chips line up in a column so
     the answers scan vertically. Scott preferred this to the hugging version. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid #f0f5f4;
  min-width: 0;
}
.yn-row:last-child { border-bottom: none; }
.yn-label {
  font-size: var(--fs-md);
  line-height: 1.35;
  color: var(--text);
}
.yn-row .cp-opts { margin-bottom: 0; flex-wrap: nowrap; }
.yn-row .cp-opt { padding: 0.15rem 0.5rem; }
/* A "Yes" on this screening is the exception worth noticing. */
.yn-row .cp-opt:has(input[value="Yes"]:checked),
.yn-row .cp-opt.is-checked-yes {
  background: #fdecec;
  color: #8d2020;
  font-weight: 600;
}
@media (max-width: 1100px) {
  .yn-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Financials page (QuickBooks live cash dashboard, admin only) ---- */
.fin-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; }
.fin-asof { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.fin-picker { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fin-presets { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.fin-presets button {
  border: 1px solid var(--border, #d9e2e0);
  background: #fff; color: var(--text);
  border-radius: var(--r-pill); padding: 0.34rem 0.85rem;
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.fin-presets button:hover { background: #f2f8f6; }
.fin-presets button.on { background: linear-gradient(135deg, #2b7880, #1c4f54); border-color: #1c4f54; color: #fff; }
.fin-custom { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: var(--fs-sm); }
.fin-custom label { display: inline-flex; align-items: center; gap: 0.35rem; }
.fin-picker #finRefresh { margin-left: auto; }
.fin-foot { font-size: var(--fs-2xs); color: var(--muted); line-height: 1.6; margin-top: 20px; }

/* The reference dashboard's own scale, scoped so it can't leak into the app. */
.viz-root {
  color-scheme: light;
  --page: #f9f9f7; --surface-1: #fbfdfc;
  --ink-1: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --baseline: #c3c2b7; --ring: rgba(11,11,11,0.10); --ring-soft: rgba(11,11,11,0.06);
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --pos: #2a78d6; --neg: #e34948;
  max-width: none; margin: 0; color: var(--ink-1);
}
.viz-root * { box-sizing: border-box; }
.viz-root .hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .viz-root .hero { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .viz-root .hero { grid-template-columns: 1fr; } }
.viz-root .hcard { background: var(--surface-1); border: 1px solid var(--ring-soft); border-radius: var(--r-xl);  box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.viz-root .hcard .k { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.viz-root .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.viz-root .hcard .v {  font-weight: 650; letter-spacing: -0.02em; line-height: 1; }
.viz-root .hcard .sub { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 10px; }
.viz-root .hcard details.info { margin-top: 14px; border-top: 1px solid var(--ring-soft); }
.viz-root .hcard details.info > summary { font-size: var(--fs-2xs); font-weight: 500; color: var(--muted); cursor: pointer; padding: 8px 0 2px; list-style: none; display: flex; align-items: center; gap: 6px; }
.viz-root .hcard details.info > summary::before { content: "▸"; font-size: 9px; transition: transform 0.15s; }
.viz-root .hcard details.info[open] > summary::before { transform: rotate(90deg); }
.viz-root .info .expl { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.55; padding-top: 6px; }
.viz-root .info .frm { font-size: var(--fs-2xs); color: var(--ink-2); font-variant-numeric: tabular-nums; border-left: 2px solid var(--grid); padding: 2px 0 2px 9px; margin: 8px 0; line-height: 1.65; }
.viz-root .info .tip { font-size: var(--fs-2xs); color: var(--muted); line-height: 1.5; padding-bottom: 4px; }
.viz-root .spark { display: flex; align-items: flex-end; gap: 5px; height: 30px; margin-top: 16px; }
.viz-root .spark .bar { flex: 1; border-radius: 4px 3px 2px 2px; min-height: 2px; opacity: 0.85; }
.viz-root .spark .bar.cur { opacity: 1; }
.viz-root .spark .bar.dim { opacity: 0.35; }
.viz-root .spark .neg { align-self: flex-start; border-radius: 4px 2px 3px 3px; }
.viz-root .sparklbl { display: flex; gap: 5px; margin-top: 5px; }
.viz-root .sparklbl span { flex: 1; text-align: center; font-size: 10px; color: var(--muted); }
.viz-root .card { background: var(--surface-1); border: 1px solid var(--ring-soft); border-radius: var(--r-xl);  margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.viz-root h2 { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.005em; }
.viz-root .h2sub { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 3px; margin-bottom: 16px; }
.viz-root .cardhead { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
.viz-root .legend { display: flex; gap: 16px; font-size: var(--fs-xs); color: var(--ink-2); padding-top: 2px; }
.viz-root .legend span { display: inline-flex; align-items: center; gap: 6px; }
.viz-root .sw { width: 9px; height: 9px; border-radius: var(--r-xs); display: inline-block; }
.viz-root .chartwrap { position: relative; }
.viz-root svg text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.viz-root .tooltip { position: absolute; pointer-events: none; display: none; z-index: 5; background: var(--surface-1); border: 1px solid var(--ring); border-radius: var(--r-md); padding: 9px 11px; font-size: var(--fs-xs); box-shadow: 0 6px 20px rgba(0,0,0,0.13); white-space: nowrap; }
.viz-root .tooltip b { font-weight: 650; }
.viz-root .tooltip .row { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--ink-2); }
.viz-root .tooltip .row .val { color: var(--ink-1); font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 14px; }
.viz-root .bridge { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.viz-root .bridge td { padding: 9px 8px; border-bottom: 1px solid var(--ring-soft); vertical-align: middle; }
.viz-root .bridge tr.total td { border-bottom: none; border-top: 1.5px solid var(--baseline); }
.viz-root .bridge .amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 108px; font-weight: 500; }
.viz-root .bridge .barcell { width: 30%; }
.viz-root .bwrap { position: relative; height: 12px; }
.viz-root .bwrap .zero { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: var(--grid); }
.viz-root .bbar { position: absolute; top: 2px; height: 8px; border-radius: var(--r-xs); }
.viz-root .bbar.pos { background: var(--pos); }
.viz-root .bbar.neg { background: var(--neg); }
.viz-root .bridge .anchor td, .viz-root .bridge .total td { font-weight: 650; }
.viz-root .why { font-size: var(--fs-2xs); color: var(--muted); margin-top: 1px; font-weight: 400; }
.viz-root .detail { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.viz-root .detail th { font-size: var(--fs-2xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: right; padding: 7px; border-bottom: 1px solid var(--baseline); white-space: nowrap; }
.viz-root .detail th:first-child, .viz-root .detail td:first-child { text-align: left; }
.viz-root .detail td { padding: 8px 7px; border-bottom: 1px solid var(--ring-soft); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.viz-root .detail tr:last-child td { border-bottom: none; }
.viz-root .detail .cash { font-weight: 650; }
.viz-root details { margin-bottom: 16px; }
.viz-root > details > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); padding: 10px 4px; list-style: none; display: flex; align-items: center; gap: 8px; }
.viz-root > details > summary::before { content: "▸"; font-size: var(--fs-2xs); transition: transform 0.15s; }
.viz-root > details[open] > summary::before { transform: rotate(90deg); }

/* [hidden] must win over .fin-custom's display rule. */
.fin-custom[hidden] { display: none !important; }

/* Connected banner — green, and fades out once the first pull lands. */
.fin-banner {
  background: #eef7f3;
  border-color: #bcdcd0;
  margin-bottom: 1rem;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.fin-banner.gone { opacity: 0; transform: translateY(-6px); }

/* ---- Financials header + range picker: full width, segmented control ---- */
.fin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid #e8efed;
  position: relative;
}
.fin-head::after {              /* the brand gold underline used on tab headings */
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 72px; height: 3px;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, #2b7880, #d99e14);
}
.fin-head h1 { display: flex; align-items: center; gap: 0.55rem; letter-spacing: -0.01em; }
.fin-asof {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.15rem;
  letter-spacing: 0.01em;
}

.fin-picker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
  padding: 0.55rem 0.7rem;
  background: linear-gradient(180deg, #fff, #fbfdfc);
  border: 1px solid #e4edea;
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(16, 40, 38, 0.04);
}
/* One connected segmented control rather than loose pills. */
.fin-presets {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  background: #f2f8f6;
  border: 1px solid #e0eae7;
  border-radius: var(--r-pill);
  padding: 3px;
}
.fin-presets button {
  border: 0;
  background: transparent;
  color: #46605d;
  border-radius: var(--r-pill);
  padding: 0.42rem 1.05rem;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.fin-presets button:hover { color: #1c4f54; background: rgba(255,255,255,0.75); }
.fin-presets button.on {
  background: linear-gradient(135deg, #2b7880, #1c4f54);
  color: #fff;
  box-shadow: 0 1px 3px rgba(28, 79, 84, 0.32);
}
.fin-presets button:focus-visible { outline: 2px solid #2b7880; outline-offset: 2px; }

.fin-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--muted);
  padding-left: 0.15rem;
  border-left: 1px solid #e8efed;
  margin-left: 0.1rem;
  padding-left: 0.9rem;
}
.fin-custom label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.fin-custom input[type="date"] {
  height: 32px; padding: 0 0.5rem; font-size: var(--fs-sm);
  border: 1px solid #dde7e4; border-radius: var(--r-sm); background: #fff;
}
.fin-picker #finRefresh {
  margin-left: auto;
  height: 32px;
  border-radius: var(--r-pill);
  padding: 0 0.95rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* More width means the tiles and chart can breathe. */
.viz-root .hero { gap: 18px; }
.viz-root .hcard { padding: 24px 26px 20px; }
.viz-root .hcard .v { font-size: 32px; }
.viz-root .card { padding: 24px 28px; }
.viz-root #chart { min-height: 320px; }

@media (max-width: 900px) {
  .fin-picker { padding: 0.5rem; gap: 0.6rem; }
  .fin-presets button { padding: 0.4rem 0.75rem; font-size: var(--fs-sm); }
  .fin-custom { border-left: 0; padding-left: 0; margin-left: 0; }
  .fin-picker #finRefresh { margin-left: 0; }
}

/* ---- Financials: executive presentation pass ----
   One type scale across the page: 11px uppercase eyebrow labels, 34px figures,
   13px supporting copy, 14.5px section headings. Tabular numerals everywhere a
   figure appears so columns align. ---- */

.viz-root { font-feature-settings: "tnum" 1, "kern" 1; }

/* Hero tiles ------------------------------------------------------------- */
.viz-root .hcard {
  border-radius: var(--r-lg);
  border: 1px solid #e6edeb;
  padding: 22px 24px 18px;
  box-shadow: 0 1px 2px rgba(16, 40, 38, 0.04);
}
.viz-root .hcard .k {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7d8f8c;
  margin-bottom: 14px;
  white-space: nowrap;            /* labels are short now — never wrap mid-title */
}
.viz-root .hcard .v {
  font-size: 34px;
  font-weight: 620;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.viz-root .hcard .sub {
  font-size: var(--fs-xs);
  color: #62726f;
  margin-top: 9px;
  line-height: 1.45;
  min-height: 2.6em;              /* keeps the four sparklines on one baseline */
}
.viz-root .spark { margin-top: 14px; }
.viz-root .sparklbl span { font-size: 10px; letter-spacing: 0.02em; }
.viz-root .hcard details.info > summary {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #93a3a0;
  padding: 10px 0 2px;
}
.viz-root .info .expl { font-size: var(--fs-xs); line-height: 1.6; color: #62726f; }
.viz-root .info .frm  { font-size: var(--fs-xs); line-height: 1.7; }
.viz-root .info .tip  { font-size: var(--fs-2xs); line-height: 1.55; }

/* Section cards ---------------------------------------------------------- */
.viz-root .card { border: 1px solid #e6edeb; border-radius: var(--r-lg); }
.viz-root h2 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.008em;
  color: #16302f;
}
.viz-root .h2sub { font-size: var(--fs-xs); color: #62726f; margin-top: 4px; margin-bottom: 18px; }
.viz-root .legend { gap: 20px; font-size: var(--fs-xs); color: #52625f; }
.viz-root .legend span { white-space: nowrap; }
.viz-root .sw { width: 10px; height: 10px; border-radius: var(--r-xs); }

/* Bridge ----------------------------------------------------------------- */
.viz-root .bridge { font-size: var(--fs-sm); }
.viz-root .bridge td { padding: 11px 8px; }
.viz-root .bridge .amt { font-variant-numeric: tabular-nums; font-weight: 550; width: 130px; }
.viz-root .bridge .anchor td, .viz-root .bridge .total td { font-weight: 650; }
.viz-root .bridge tr.total td { padding-top: 14px; }

/* Item 147 -- "From Profit to Cash" on a phone.
   MEASURED 20/08/2026 at 390px on the LIVE .81 build: the bar column takes 30%
   and the amount column 130px, which leaves the label column 87px, so every
   label wraps to three lines and its explanation to six, and the tallest row
   runs to 196px. Below 640px the bar column is dropped and the label takes the
   width. The bars are decoration; the label and the amount are the content.
   The bars stay on tablet and desktop -- this is a phone-only rule. */
@media (max-width: 640px) {
  .viz-root .bridge .barcell { display: none; }
}
.viz-root .why { font-size: var(--fs-2xs); color: #8a9997; margin-top: 3px; line-height: 1.45; }

/* Monthly detail --------------------------------------------------------- */
.viz-root .detail { font-size: var(--fs-xs); }
.viz-root .detail th {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7d8f8c;
  font-weight: 700;
  padding: 9px 10px;
  border-bottom: 1.5px solid #d5e0dd;
}
.viz-root .detail td { padding: 10px; font-variant-numeric: tabular-nums; }
.viz-root .detail tbody tr:nth-child(even) td { background: #fbfdfc; }

/* Disclosure summaries + footer ------------------------------------------ */
.viz-root > details > summary {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7d8f8c;
}
.fin-foot { font-size: var(--fs-2xs); line-height: 1.7; color: #8a9997; max-width: 1100px; }
.fin-foot a { color: #2b7880; }

/* ================= Financial Dashboard (admin only) =================
   Ported from static/financial-dashboard.html. EVERY selector is scoped to
   .fd-root — the reference used bare `table`, `td`, `h1`, `summary` rules that
   would otherwise redefine the whole app. Variables are prefixed --fd-* so
   they cannot collide with the cash dashboard's .viz-root palette. */
.fd-root {
  --fd-surface: #fbfdfc; --fd-plane: #f9f9f7;
  --fd-ink: #0b0b0b; --fd-ink2: #52514e; --fd-muted: #898781;
  --fd-grid: #e1e0d9; --fd-axis: #c3c2b7; --fd-border: rgba(11,11,11,0.10);
  --fd-s1: #2a78d6; --fd-s2: #eb6834; --fd-s3: #1baf7a;
  --fd-good: #0ca30c; --fd-warning: #fab219; --fd-serious: #ec835a; --fd-critical: #d03b3b;
  --fd-success: #006300;
  color: var(--fd-ink);
}
.fd-root * { box-sizing: border-box; }
.fd-root .card {
  background: var(--fd-surface); border: 1px solid var(--fd-border);
  border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 16px;
}
.fd-root h2 { font-size: 15px; margin: 0 0 2px; letter-spacing: -.005em; font-weight: 650; }
.fd-root .note { color: var(--fd-muted); font-size: var(--fs-xs); margin: 0 0 14px; line-height: 1.5; }
.fd-root .tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.fd-root .tile {
  background: var(--fd-surface); border: 1px solid var(--fd-border);
  border-radius: var(--r-lg); padding: 15px 17px;
}
.fd-root .tile .lab {
  font-size: var(--fs-2xs); color: var(--fd-muted); text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 7px; font-weight: 700;
}
.fd-root .tile .val {
  font-size: 27px; font-weight: 620; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fd-root .tile .cap { font-size: var(--fs-xs); color: var(--fd-ink2); margin-top: 6px; line-height: 1.45; }
.fd-root .legend {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-xs);
  color: var(--fd-ink2); margin-bottom: 10px;
}
.fd-root .legend span { display: flex; align-items: center; gap: 6px; }
.fd-root .sw { width: 10px; height: 10px; border-radius: var(--r-xs); display: inline-block; }
.fd-root svg { display: block; width: 100%; overflow: visible; }
.fd-root .gl { stroke: var(--fd-grid); stroke-width: 1; }
.fd-root .ax { stroke: var(--fd-axis); stroke-width: 1; }
.fd-root .tk { fill: var(--fd-muted); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.fd-root .dl { fill: var(--fd-ink); font-size: var(--fs-2xs); font-weight: 600; }
.fd-root table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.fd-root th {
  text-align: right; padding: 8px; color: var(--fd-muted); font-weight: 700;
  border-bottom: 1px solid var(--fd-grid); font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em;
}
.fd-root th:first-child, .fd-root td:first-child { text-align: left; }
.fd-root td { padding: 8px; border-bottom: 1px solid var(--fd-grid); color: var(--fd-ink2); }  /* alignment corrected in Round .17 — see the tail of this file */
.fd-root td.n { color: var(--fd-ink); font-weight: 500; }
.fd-root tr.tot td { font-weight: 650; color: var(--fd-ink); border-top: 1.5px solid var(--fd-axis); }
.fd-root .flag {
  display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--fd-grid);
  font-size: var(--fs-sm); line-height: 1.55;
}
.fd-root .flag:last-child { border-bottom: none; }
.fd-root .ic {
  flex: 0 0 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-2xs); font-weight: 700; color: #fff; margin-top: 1px;
}
.fd-root .flag b { color: var(--fd-ink); font-weight: 650; }
.fd-root .flag div:last-child { color: var(--fd-ink2); }
.fd-root .ctl {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end;
  padding: 14px; background: var(--fd-plane); border-radius: var(--r-md); margin-bottom: 16px;
}
.fd-root .ctl label {
  font-size: var(--fs-2xs); color: var(--fd-muted); display: block;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; font-weight: 700;
}
.fd-root .ctl input[type=number] {
  width: 76px; padding: 6px 8px; font-size: var(--fs-md); border: 1px solid var(--fd-axis);
  border-radius: var(--r-xs); background: var(--fd-surface); color: var(--fd-ink);
  font-variant-numeric: tabular-nums;
}
.fd-root .ctl input[type=range] { width: 160px; accent-color: var(--fd-s1); }
.fd-root .est {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 7px; border-radius: var(--r-xs); background: var(--fd-warning); color: #0b0b0b;
  vertical-align: middle; margin-left: 8px;
}
.fd-root .meas { background: var(--fd-good); color: #fff; }
.fd-root .bar-row {
  display: grid; grid-template-columns: 210px 1fr 92px; align-items: center;
  gap: 12px; margin-bottom: 7px; font-size: var(--fs-xs);
}
.fd-root .bar-row .nm {
  color: var(--fd-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-root .bar-track { height: 19px; position: relative; }
.fd-root .bar-fill { height: 19px; border-radius: 0 4px 4px 0; position: relative; }
.fd-root .bar-row .vv {
  text-align: right; font-variant-numeric: tabular-nums; color: var(--fd-ink); font-weight: 500;
}
.fd-root details { margin-top: 12px; }
.fd-root summary {
  cursor: pointer; font-size: var(--fs-2xs); color: var(--fd-muted); padding: 6px 0;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.fd-root .foot { font-size: var(--fs-2xs); color: var(--fd-muted); line-height: 1.7; margin-top: 10px; }
.fd-tt {
  position: fixed; pointer-events: none; background: #fbfdfc;
  border: 1px solid rgba(11,11,11,0.12); border-radius: var(--r-sm); padding: 9px 12px;
  font-size: var(--fs-xs); box-shadow: 0 3px 14px rgba(0,0,0,.14); opacity: 0;
  transition: opacity .1s; z-index: 99; color: #0b0b0b; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 780px) {
  .fd-root .bar-row { grid-template-columns: 130px 1fr 70px; }
  .fd-root .ctl { gap: 12px; }
}

/* ---- Financials: the two dashboards share one page behind this switcher ----
   Two equal-width tabs, so there is no stranded gap at any width; below the
   phone breakpoint they stack rather than squeeze the subtitles out. */
.fin-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0 0 1.15rem;
}
.fin-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon sub";
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.1rem;
  text-align: left;
  padding: 0.7rem 1rem;
  border: 1px solid #e4edea;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff, #fbfdfc);
  color: #46605d;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 1px 2px rgba(16, 44, 42, 0.04);
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s, color 0.14s;
}
.fin-tab:hover { border-color: #cfe0db; box-shadow: 0 2px 8px rgba(16, 44, 42, 0.07); }
.fin-tab:focus-visible { outline: 2px solid #2b7880; outline-offset: 2px; }
.fin-tab-i  { grid-area: icon; font-size: var(--fs-2xl); line-height: 1; opacity: 0.9; }
.fin-tab-t  { grid-area: title; font-size: var(--fs-base); font-weight: 700; letter-spacing: -0.005em; }
.fin-tab-s  { grid-area: sub; font-size: var(--fs-xs); opacity: 0.72; }
.fin-tab.on {
  background: linear-gradient(135deg, #2b7880, #1c4f54);
  border-color: #1c4f54;
  color: #fff;
  box-shadow: 0 3px 12px rgba(28, 79, 84, 0.24);
}
.fin-tab.on .fin-tab-i { opacity: 1; }
.fin-tab.on .fin-tab-s { opacity: 0.82; }
.fin-tab.on .fin-tab-t { position: relative; }
.fin-tab.on .fin-tab-t::after {   /* the brand gold underline, as on tab headings */
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 26px; height: 2px;
  border-radius: var(--r-xs);
  background: #d99e14;
}
.fin-view[hidden] { display: none !important; }

@media (max-width: 640px) {
  .fin-switch { grid-template-columns: minmax(0, 1fr); }
  .fin-tab-s  { display: none; }
  .fin-tab    { grid-template-areas: "icon title"; padding: 0.6rem 0.85rem; }
}

/* ---- Call-offs: employee roster + per-person drill-down ----
   Cards wrap on a flex row with a fixed basis rather than a stretch grid, so a
   short last row ends naturally instead of leaving a stranded gap or blowing
   one card up to double width. */


/* Employee names in the table read as links without shouting. */
.co-name {
  font-weight: 700;
  color: var(--navy-dark);
  text-decoration: none;
  border-bottom: 1px dotted #9ec9c4;
}
.co-name:hover { color: var(--navy); border-bottom-style: solid; }
.co-bar-link:hover rect[fill="#286e75"] { fill: #1c4f54; }
.co-bar-link:hover rect[fill="#c0392b"] { fill: #96261a; }

/* One employee in focus. */
.co-focus { border-left: 3px solid var(--navy); }
.co-focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.co-focus-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.co-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.co-stat {
  flex: 0 1 auto;
  min-width: 96px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #f7fbfa;
  text-align: center;
}
.co-stat.bad { background: var(--danger-bg); border-color: #f0c5bf; }
.co-stat-v { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--navy-dark); line-height: 1.1; }
.co-stat.bad .co-stat-v { color: var(--danger); }
.co-stat-l { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

@media (max-width: 640px) {
  
  .co-stat { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
}

/* ---- Call-off employee bubbles (reuse the site's filter-chip shape) ---- */
.co-chips { margin: -0.35rem 0 1.1rem; }
.co-chips .house-filter-chip { display: inline-flex; align-items: center; gap: 0.3rem; }
.co-chip-un {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: var(--r-pill);
  padding: 0.05rem 0.4rem;
  line-height: 1.5;
}
.house-filter-chip.active-filter .co-chip-un { background: #fff; }

/* Custom date range on the call-offs filter row — hugs its dropdown. */
.co-custom { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.co-custom[hidden] { display: none !important; }
.co-custom label { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Labelled bubble rows on the call-offs page — the label hugs its chips. */
.co-chip-row { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.55rem; flex-wrap: wrap; }
.co-chip-lbl {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  min-width: 76px;
}
.co-chip-row .co-chips { margin: 0; flex: 1 1 auto; }
@media (max-width: 640px) {
  .co-chip-row { gap: 0.25rem; }
  .co-chip-lbl { min-width: 0; width: 100%; }
}

/* ---- Recurring maintenance: schedule chips, calendar, due highlighting ---- */
.repeat-chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: var(--r-pill);
  background: #eaf4f2;
  color: var(--navy-dark);
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}
tr.due-over  td { background: #fdf1ef; }
tr.due-today td { background: #fff8e8; }
tr.due-soon  td { background: #f7fbfa; }
tr.due-over  td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
tr.due-today td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

/* Two months side by side, each sized to its content so there is no gap. */
.cal-wrap { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.cal-month { flex: 0 1 auto; }
.cal-title {
  font-size: var(--fs-sm); font-weight: 700; color: var(--navy-dark);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 38px); gap: 3px; }
.cal-head {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--muted);
  text-align: center; padding-bottom: 2px;
}
.cal-cell {
  min-height: 38px; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 2px 3px; background: #fff; display: flex; flex-direction: column;
  justify-content: space-between;
}
.cal-blank { border: 0; background: none; }
.cal-n { font-size: var(--fs-2xs); color: var(--muted); line-height: 1; }
.cal-cell.cal-has { border-color: #b9d8d3; background: #f7fbfa; }
.cal-cell.cal-today { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.cal-cell.cal-today .cal-n { color: var(--navy-dark); font-weight: 800; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
.cal-dot.cal-h1 { background: #2b7880; }
.cal-dot.cal-h2 { background: #d99e14; }
.cal-dot.cal-h3 { background: #7a5ea8; }
.cal-more { font-size: var(--fs-2xs); color: var(--muted); font-weight: 700; }

/* The custom-repeat controls hug their dropdown. */
.fx-custom { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: var(--fs-md); }
.fx-custom[hidden] { display: none !important; }

@media (max-width: 640px) {
  .cal-grid { grid-template-columns: repeat(7, 1fr); }
  .cal-wrap { flex-direction: column; }
}

/* Completed occurrences stay visible on the calendar, but read as history. */
.cal-dot.cal-did { background: #cfd8d6; }
.cal-cell.cal-done { background: #fafbfc; }
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.7rem;
  font-size: var(--fs-xs); color: var(--muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.cal-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---- Dashboard: fold long lists so the page fits a screen ---- */
.row-more > summary {
  cursor: pointer;
  padding: 0.55rem 0.7rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
  background: #f6faf8;
  border-top: 1px solid var(--border);
  list-style: none;
}
.row-more > summary::-webkit-details-marker { display: none; }
.row-more > summary::before { content: "▸ "; display: inline-block; transition: transform 0.12s; }
.row-more[open] > summary::before { content: "▾ "; }
.row-more > summary:hover { background: #eef7f3; }
.data-table .more-row td { padding: 0 !important; border-top: 0; }
.data-table .inner-more { margin: 0; }
.data-table .inner-more td { border-top: 1px solid var(--border); }

/* ---- Community Playbook: vendor directory, asset register, warranties ---- */
.pb-vendors tr.pb-group td {
  background: #f2f8f6; font-weight: 800; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy-dark);
  padding: 0.35rem 0.6rem;
}  /* re-coloured in Round .16 — see the tail of this file */
.pb-vendors select.tier-primary { font-weight: 700; color: var(--navy-dark); }
.pb-vendors select.tier-backup  { color: var(--muted); }
.pb-all {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--r-pill);
  background: #eaf4f2; color: var(--navy-dark); font-size: var(--fs-xs); font-weight: 700;
}
.pb-chks { display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.pb-chk { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--fs-sm); color: var(--muted); }
.pb-gap {
  margin: 0 0 0.7rem; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-sm); font-weight: 600;
}
.pb-ok { margin: 0 0 0.7rem; font-size: var(--fs-sm); color: var(--ok); font-weight: 600; }

.war-chip {
  display: inline-block; padding: 0.08rem 0.5rem; border-radius: var(--r-pill);
  background: #eaf4f2; color: var(--navy-dark); font-size: var(--fs-xs); font-weight: 700;
  white-space: nowrap;
}
.war-chip.war-soon { background: var(--warn-bg); color: var(--warn-text); }
.war-chip.war-exp  { background: var(--danger-bg); color: var(--danger); }


/* ---- Attendance scores ---- */
.score-pill { display:inline-block; min-width:2.4rem; text-align:center; padding:0.12rem 0.5rem;
  border-radius: var(--r-pill); font-weight:800; font-size: var(--fs-sm); }
.score-pill.band-good    { background: var(--ok-bg);     color: var(--ok); }
.score-pill.band-watch   { background: var(--warn-bg);   color: var(--warn-text); }
.score-pill.band-concern { background: #fdeadf;          color: #a04a12; }
.score-pill.band-action  { background: var(--danger-bg); color: var(--danger); }

/* ---- Call-off rows: read-only, with an edit drawer underneath ---- */
.row-edit-btn {
  background: none; border: 1px solid var(--border); border-radius: var(--r-xs);
  color: var(--navy); cursor: pointer; padding: 0.1rem 0.4rem; font-size: var(--fs-md);
}
.row-edit-btn:hover { border-color: var(--accent); background: #f2f8f6; }
.data-table tr.edit-row[hidden] { display: none !important; }
.data-table tr.edit-row > td { background: #f7fbfa; box-shadow: inset 0 2px 0 var(--border); }
.co-stat-score { background: #fff; border-style: dashed; }
.co-stat-score .score-pill { font-size: var(--fs-lg); padding: 0.18rem 0.7rem; }

/* ==== Call-Offs page: a calmer, more colourful layout ==================== */

/* Headline numbers, so the shape of the window reads at a glance. */
.co-hero { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 1.1rem; }
.co-tile {
  flex: 1 1 150px; min-width: 130px;
  padding: 0.75rem 1rem; border-radius: var(--r-lg); color: #fff;
  box-shadow: 0 2px 10px rgba(16, 44, 42, 0.10);
}
.co-tile-n { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.co-tile-l { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.9; margin-top: 0.15rem; }
.co-tile-a { background: linear-gradient(135deg, #2b7880, #1c4f54); }
.co-tile-b { background: linear-gradient(135deg, #3f9b86, #256f60); }
.co-tile-c { background: linear-gradient(135deg, #c0392b, #8e2a20); }
.co-tile-d { background: linear-gradient(135deg, #7a5ea8, #4f3d75); }

/* One toolbar holding both dropdowns and both chip rows. */
.co-toolbar {
  background: linear-gradient(180deg, #fff, #fbfdfc);
  border: 1px solid #e4edea; border-radius: var(--r-lg);
  padding: 0.7rem 0.9rem 0.55rem; margin-bottom: 1.1rem;
  box-shadow: 0 1px 2px rgba(16, 44, 42, 0.04);
}
.co-toolbar .seo-range-row { margin-bottom: 0.6rem; }
.co-toolbar .co-chip-row:last-child { margin-bottom: 0; }

/* The log form folds away until wanted. */
.co-log { padding: 0; }


.co-log > form { padding: 0.9rem 1.1rem 1.1rem; }

/* Scoreboard: colour the score, keep the rest quiet. */
.co-board td { vertical-align: middle; }
.co-board tr:hover td { background: #f7fbfa; }
.co-clean { margin: 0.7rem 0 0; font-size: var(--fs-sm); color: var(--ok); font-weight: 600; }

/* Call-off rows tinted by status, so the eye finds the unexcused ones. */
.co-row-unexcused td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.co-row-excused  td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.co-row-unset    td:first-child { box-shadow: inset 3px 0 0 #d9e2e0; }

@media (max-width: 640px) {
  .co-tile { flex: 1 1 calc(50% - 0.35rem); }
  .co-tile-n { font-size: var(--fs-2xl); }
}

/* Focus card: stats clustered so related numbers read together. */
.co-groups { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.co-group { flex: 0 1 auto; padding: 0.55rem 0.75rem 0.6rem; border-radius: var(--r-lg); border: 1px solid var(--border); }
.co-group-h { font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); margin-bottom: 0.4rem; }
.co-group .co-stats { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.co-group-score  { background: #f4faf8; border-color: #cfe3e0; }
.co-group-vol    { background: #f7f9fb; border-color: #dde5ea; }
.co-group-status { background: #faf7f5; border-color: #e8ded1; }

/* The scoring explainer — readable, not fine print. */
.co-help { padding: 0; }
.co-help > summary.co-help-summary {
  cursor: pointer; list-style: none; padding: 0.85rem 1.1rem;
  font-weight: 700; font-size: var(--fs-base); color: var(--navy-dark); border-radius: var(--radius);
}
.co-help > summary.co-help-summary::-webkit-details-marker { display: none; }
.co-help > summary.co-help-summary:hover { background: #f4faf8; }
.co-help[open] > summary.co-help-summary { border-bottom: 1px solid var(--border); }
.co-help-body { padding: 0.9rem 1.3rem 1.2rem; font-size: var(--fs-base); line-height: 1.65; color: var(--text); }
.co-help-body h3 { font-size: var(--fs-base); margin: 1.1rem 0 0.35rem; color: var(--navy-dark); }
.co-help-body ul { margin: 0.2rem 0 0; padding-left: 1.3rem; }
.co-help-body li { margin-bottom: 0.3rem; }
.co-help-body p { margin: 0.35rem 0 0; }
.co-help-body .score-pill { margin-right: 0.35rem; }

/* The log form is always open — no disclosure, just a titled panel. */
.co-log { padding: 0.9rem 1.1rem 1.1rem; }
.co-log > .co-log-h { margin: 0 0 0.75rem; font-size: var(--fs-base); color: var(--navy-dark); }
.co-log > form { padding: 0; }

/* ---- Community Playbook polish ---- */
.pb-hero { margin-bottom: 1.2rem; }
.co-tile-ok { background: linear-gradient(135deg, #1f8a4c, #146637); }
.pb-sub {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-md); font-weight: 800; color: var(--navy-dark);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: 1.2rem 0 0.5rem; padding-bottom: 0.35rem;
  border-bottom: 2px solid #eef3f2;
}
.pb-sub:first-of-type { margin-top: 0.2rem; }
.pb-count {
  background: #eaf4f2; color: var(--navy-dark); border-radius: var(--r-pill);
  padding: 0.05rem 0.5rem; font-size: var(--fs-xs); letter-spacing: 0;
}
.pb-doc {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--r-pill);
  background: #eef4ff; color: #2f4f8f; font-size: var(--fs-xs); font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.pb-doc:hover { background: #e0eaff; }
td.war-soon { color: var(--warn-text); font-weight: 700; }
td.war-exp  { color: var(--danger);   font-weight: 700; }
.house-panel .data-table { margin-bottom: 0.2rem; }

/* ---- In-app confirmation dialog (replaces the browser's confirm box) ---- */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(12, 30, 30, 0.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  animation: confirmFade 0.14s ease-out;
}
.confirm-overlay[hidden] { display: none !important; }
@keyframes confirmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirmRise { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.confirm-box {
  background: #fff; border-radius: var(--r-xl); max-width: 430px; width: 100%;
  padding: 1.6rem 1.6rem 1.3rem; text-align: center;
  box-shadow: 0 18px 50px rgba(10, 30, 30, 0.28);
  animation: confirmRise 0.16s ease-out;
}
.confirm-icon {
  width: 48px; height: 48px; margin: 0 auto 0.8rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xl); background: #eaf4f2; color: var(--navy-dark);
}
.confirm-box.confirm-danger .confirm-icon { background: var(--danger-bg); color: var(--danger); }
.confirm-title { margin: 0 0 0.4rem; font-size: var(--fs-lg); color: var(--text); }
.confirm-msg { margin: 0 0 1.3rem; color: var(--muted); line-height: 1.6; font-size: var(--fs-base); }
.confirm-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.confirm-actions button {
  border: 0; border-radius: var(--r-md); padding: 0.6rem 1.25rem;
  font-size: var(--fs-md); font-weight: 700; cursor: pointer; font-family: inherit;
}
.confirm-cancel { background: #eef1f0; color: var(--text); }
.confirm-cancel:hover { background: #e2e8e6; }
.confirm-ok { background: linear-gradient(135deg, #2b7880, #1c4f54); color: #fff; }
.confirm-box.confirm-danger .confirm-ok { background: linear-gradient(135deg, #c0392b, #8e2a20); }
.confirm-ok:hover { filter: brightness(1.07); }
.confirm-cancel:focus-visible, .confirm-ok:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 480px) { .confirm-actions button { flex: 1 1 100%; } }

/* Equipment and Warranties read as two distinct cards inside a house. */
.pb-block { border-radius: var(--r-lg); padding: 0.85rem 1rem 1rem; margin-top: 1rem; border: 1px solid; }
.pb-block:first-of-type { margin-top: 0.4rem; }
.pb-block-equip { background: #f7f9fb; border-color: #dee7ec; }
.pb-block-war   { background: #fbf9f4; border-color: #e9dfce; }
.pb-block .pb-sub { margin-top: 0; border-bottom-color: rgba(0,0,0,0.07); }
.pb-block .data-table { background: #fff; border-radius: var(--r-md); }
.pb-add {
  border-top: 1px dashed rgba(0,0,0,0.14); padding-top: 0.7rem; align-items: center;
}
.pb-file {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-sm); color: var(--navy-dark); font-weight: 600;
  background: #fff; border: 1px dashed #b9cfca; border-radius: var(--r-sm); padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.pb-file input[type="file"] { font-size: var(--fs-xs); max-width: 172px; }

/* ---- BACKLOG 120 (.65): one panel per service type, each ending in an
   owner-editable guidance box. The directory used to be ONE table whose service
   types were `tr.pb-group` header rows inside it.
   ⚠️ NOTHING EMITS A `pb-group` ROW ANY MORE — app.py was its only source and
   it now builds a panel per type, so every `tr.pb-group` rule in this file is
   unreachable as of `.65`. They are LEFT IN PLACE deliberately: deleting a
   block that sits inside a @media rule is how trap 43 happened, and dead CSS
   costs nothing. Do not reinstate a pb-group row to make them fire. ---- */
.pb-type-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem;
}
.pb-type-title { margin: 0; }
/* `.79`: the guidance box moved ABOVE the provider table, so it needs a bottom
   margin it never had. The table carries no margin of its own -- there is no
   `.data-table { margin }` rule anywhere -- so without this the table butts
   straight against the cream box. MEASURED, not assumed. */
.pb-guide {
  margin: 0.9rem 0; border-radius: var(--r-lg); padding: 0.7rem 0.9rem 0.8rem;
  background: #fbf9f4; border: 1px solid #e9dfce;
}
.pb-guide-head {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--navy-dark); margin-bottom: 0.4rem;
}
/* pre-wrap so the line breaks Scott types are the line breaks staff read. */
.pb-guide-body { white-space: pre-wrap; font-size: var(--fs-sm); color: var(--navy-dark); }
.pb-guide-empty { color: var(--muted); font-style: italic; }
.pb-guide-form { display: block; margin-top: 0.6rem; }
.pb-guide-input {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  font-family: inherit; font-size: var(--fs-sm); margin-bottom: 0.5rem;
}
/* BACKLOG 119. Three tickboxes in one cell of a four-column grid is a squeeze;
   give them two columns where there are four to give. Inside the media query
   per DESIGN-NOTES 13f — below 761px the grid is a single column anyway. */
@media (min-width: 761px) {
  .labeled-form-grid .lf-houses { grid-column: span 2; }
}

/* ---- Dashboard: give the waitlist and maintenance panels their own colour ---- */
.waitlist-panel, .maint-panel {
  border: 0;
  position: relative;
  overflow: hidden;
  padding-top: 0.9rem;
}
.waitlist-panel::before, .maint-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
}
/* Waitlist — violet: people waiting on us. */
.waitlist-panel { background: linear-gradient(180deg, #faf8fd, #fff 42%); box-shadow: 0 1px 2px rgba(20,40,40,.05), 0 6px 18px rgba(90,70,150,.10); }
.waitlist-panel::before { background: linear-gradient(90deg, #9b86c9, #6a52a3); }
.waitlist-panel .house-panel-title { color: #4f3d75; }
.waitlist-panel thead th { background: #f4f0fb; color: #4f3d75; border-bottom-color: #ddd3ee; }
.waitlist-panel tbody tr:hover td { background: #faf8fd; }
.waitlist-panel .stat-chip { background: #efe9f9; color: #4f3d75; }

/* Maintenance — teal: work we owe the buildings. */
.maint-panel { background: linear-gradient(180deg, #f5fbfa, #fff 42%); box-shadow: 0 1px 2px rgba(20,40,40,.05), 0 6px 18px rgba(20,90,90,.09); }
.maint-panel::before { background: linear-gradient(90deg, #58c5a8, #2b7880); }
.maint-panel .house-panel-title { color: #1c4f54; }
.maint-panel thead th { background: #eef7f3; color: #1c4f54; border-bottom-color: #cde5df; }
.maint-panel tbody tr:hover td { background: #f5fbfa; }
.maint-panel .stat-chip { background: #e3f2ee; color: #1c4f54; }
/* the overdue / today tints still win over the hover tint */
.maint-panel tr.due-over td  { background: #fdf1ef; }
.maint-panel tr.due-today td { background: #fff8e8; }
.maint-panel tr.due-soon td  { background: #f4faf8; }

.waitlist-panel .house-panel-header, .maint-panel .house-panel-header {
  border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 0.6rem; margin-bottom: 0.7rem;
}

/* Rate Review — steel blue. Distinct from the violet waitlist and the teal
   maintenance panel, and no longer the yellow Scott disliked. */
.rate-panel {
  border: 0; position: relative; overflow: hidden; padding-top: 0.9rem;
  background: linear-gradient(180deg, #f7f9fb, #fff 42%);
  box-shadow: 0 1px 2px rgba(20,40,40,.05), 0 6px 18px rgba(50,80,130,.10);
}
.rate-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, #7fa3d0, #3f6392);
}
.rate-panel .house-panel-title { color: #33507a; }
.rate-panel thead th { background: #eef3fa; color: #33507a; border-bottom-color: #d3deee; }
.rate-panel tbody tr:hover td { background: #f7fafd; }
.rate-panel .stat-chip { background: #e8eff9; color: #33507a; }
.rate-panel .house-panel-header {
  border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 0.6rem; margin-bottom: 0.7rem;
}

/* ---- RingCentral page: a proper header, and a readable full-width explainer ---- */
.rc-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem; margin: 0 0 1.3rem; padding: 1.1rem 1.3rem;
  border-radius: var(--r-xl); color: #fff;
  background: linear-gradient(135deg, #2b7880 0%, #1c4f54 60%, #163c40 100%);
  box-shadow: 0 6px 22px rgba(20, 70, 75, 0.20);
}
.rc-hero-text { flex: 1 1 340px; }


.rc-sync { margin: 0.45rem 0 0; font-size: var(--fs-sm); color: rgba(255,255,255,0.72); }
.rc-sync a { color: #bfe6dd; }
.rc-hero-tiles { display: flex; gap: 0.7rem; flex: 0 0 auto; }
.rc-tile {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-lg); padding: 0.6rem 1rem; min-width: 104px; text-align: center;
}
.rc-tile-n { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.1; }
.rc-tile-l { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.8; }

.rc-how { max-width: none; }
.rc-how h2 { font-size: var(--fs-lg); margin-bottom: 0.6rem; }
.rc-how p { font-size: var(--fs-base); line-height: 1.72; color: var(--text); margin: 0 0 0.7rem; max-width: 105ch; }
.rc-how p.muted, .rc-how .small { font-size: var(--fs-base); color: var(--text); }
.rc-how code { font-size: var(--fs-md); }
@media (max-width: 700px) { .rc-hero-tiles { width: 100%; } .rc-tile { flex: 1 1 0; } }

/* Pencil action button — matched to the trash can beside it. */


.contact-actions-cell { white-space: nowrap; }
.data-table tr.edit-row[hidden] { display: none !important; }
.data-table tr.edit-row > td { background: #f7fbfa; box-shadow: inset 0 2px 0 var(--border); }

/* Nothing in a table should be clipped: let selects size to their content
   and stop fixed pixel widths cutting off longer options like
   "Daughter-in-law". Applies to every data table on the site. */
.data-table select,
.inline-form-grid select,
select.auto-w {
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  padding-right: 1.6rem;
  text-overflow: ellipsis;
}
.data-table td, .data-table th { overflow: visible; }

/* ---- Residents page: the location filters span the width, sized between a
   plain chip and the stat cards above them. Scoped with res-house-filters so
   the call-off bubbles, which share .house-filter-row, are untouched. ---- */
.res-house-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: -0.6rem 0 1.4rem;
}
.res-house-filters .house-filter-chip {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.85rem 0.9rem;
  font-size: var(--fs-base);
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow: 0 1px 2px rgba(20, 40, 40, 0.04);
  transition: border-color 0.13s, background 0.13s, box-shadow 0.13s, transform 0.13s;
}
.res-house-filters .house-filter-chip:hover {
  border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-1px);
}
.res-house-filters .house-filter-chip.active-filter {
  border-color: var(--navy); border-width: 2px; background: #e7f4f1;
}
.res-house-filters .house-filter-chip .muted { font-size: var(--fs-md); font-weight: 700; opacity: 0.75; }

@media (max-width: 760px) {
  .res-house-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-house-filters .house-filter-chip { padding: 0.7rem 0.6rem; font-size: var(--fs-md); }
}

/* ---- Shared icon buttons: a soft bubble each, in colours you can actually
   read. The old wastebasket emoji rendered as a dark glyph that was hard to
   recognise at this size, so both icons are now inline SVG that inherit their
   colour from the button. ---- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin: 0;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: #f6f8f8; color: var(--muted);
  cursor: pointer; vertical-align: middle;
  transition: background 0.13s, border-color 0.13s, color 0.13s, transform 0.13s;
}
.icon-btn + .icon-btn, .icon-btn + form, form + .icon-btn { margin-left: 0.35rem; }
.icon-btn .ic { width: 16px; height: 16px; fill: currentColor; display: block; }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Delete — neutral by default so a table isn't a wall of red, and clearly a
   bin because the icon is a stroked outline rather than a solid blob. It
   turns red only when you're actually pointing at it. */
.icon-btn-danger { background: #fff; border-color: #dfe6e5; color: #7b8a88; }
.icon-btn-danger:focus-visible { color: #c0392b; }

/* Edit — brand teal, same size and weight as its neighbour. */
.icon-btn-edit { background: #eaf4f2; border-color: #cbe3dd; color: #1c4f54; }
.icon-btn-edit:hover { background: #d9ece7; border-color: #aed4cb; color: #14383c; }

/* Actions cells keep their buttons on one line and centred together. */
.contact-actions-cell, td.doc-actions-cell {
  white-space: nowrap;
}
.contact-actions-cell form, td.doc-actions-cell form { display: inline-block; margin: 0; }

/* Stroked icons read better than filled ones at 16px. */
.icon-btn .ic { fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }

/* Residents table: columns hug the left, the last column soaks up the slack
   so there is room on the right for whatever Scott adds later. */
.residents-table th, .residents-table td { padding-right: 1.1rem; }
.residents-table th.res-spacer, .residents-table td.res-spacer { width: 100%; padding: 0; }
.residents-table th:not(.res-spacer), .residents-table td:not(.res-spacer) { white-space: nowrap; width: 1%; }

/* ---- Residents page: give the filter cards real colour ---- */
.stat-row .stat-card {
  border-radius: var(--r-lg); border: 1px solid #e3ebe8;
  background: linear-gradient(180deg, #fff, #fbfdfc);
  transition: transform .13s, box-shadow .13s, border-color .13s;
}
.stat-row .stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.stat-row .stat-card .stat-num { color: var(--navy-dark); }
/* Current = teal, Past = slate, All = violet — each active state fills in. */
.stat-row .stat-card:nth-child(1).active-filter {
  background: linear-gradient(135deg, #2b7880, #1c4f54); border-color: #1c4f54;
  box-shadow: 0 4px 16px rgba(28,79,84,.22);
}
.stat-row .stat-card:nth-child(2).active-filter {
  background: linear-gradient(135deg, #6d8199, #47586d); border-color: #47586d;
  box-shadow: 0 4px 16px rgba(71,88,109,.22);
}
.stat-row .stat-card:nth-child(3).active-filter {
  background: linear-gradient(135deg, #9b86c9, #6a52a3); border-color: #6a52a3;
  box-shadow: 0 4px 16px rgba(106,82,163,.22);
}
.stat-row .stat-card.active-filter .stat-num,
.stat-row .stat-card.active-filter .stat-label { color: #fff; }
.stat-row .stat-card.active-filter .stat-label { opacity: .88; }

/* Location filters: a house colour each, filled when selected. */
.res-house-filters .house-filter-chip { background: #fff; color: var(--navy-dark); font-weight: 700; }
.res-house-filters .house-filter-chip:nth-child(1) { border-color: #cbe3dd; }
.res-house-filters .house-filter-chip:nth-child(2) { border-color: #cfe1e3; color: #245f66; }
.res-house-filters .house-filter-chip:nth-child(4) {   }
.res-house-filters .house-filter-chip:nth-child(1).active-filter {
  background: linear-gradient(135deg, #2b7880, #1c4f54); border-color: #1c4f54; color: #fff;
}
.res-house-filters .house-filter-chip:nth-child(3).active-filter {
    
}
.res-house-filters .house-filter-chip.active-filter .muted { color: rgba(255,255,255,.82); }

/* Contract fee flags in the resident header band. */


/* ---- Delete button: the emoji bin, on a light background so its own dark
   colours actually contrast. The earlier versions failed for opposite reasons
   — the emoji on a tinted chip disappeared into it, and a stroked outline was
   too thin to read as a bin at 16px. White plus a red ring gives the glyph
   maximum contrast while the ring still says "destructive". ---- */
.icon-btn-danger { background: #fff; border-color: #edc7c0; color: #c0392b; }


/* ---- Form control alignment, site-wide ----
   Selects, text inputs and date inputs were each picking up their own padding
   and line-height, so two controls sitting side by side in a row could differ
   by a few pixels — the "Other" dropdown and the "Hospital name" box being the
   visible case. Pin them all to one box model and one height. */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="password"], input[type="search"], select {
  box-sizing: border-box;
  height: 40px;                 /* exact, not a floor — a min-height still let
                                   a select and a text input settle at slightly
                                   different heights and look misaligned */
  line-height: 1.35;
  vertical-align: middle;
  font-family: inherit;
  font-size: var(--fs-md);
}
/* Rows that place a label beside its controls line up on the middle, not the
   baseline, so a taller control can't drag its neighbours out of true. */
 .inline-form-grid, .labeled-form-grid .lf-field,
.seo-range-row, .co-custom, .fx-custom {
  align-items: center;
}
/* A control paired with a free-text "other" box sits flush with it. */


/* ---- Delete button, take four.  (2026.07.21.17)
   The three previous attempts all kept the 🗑️ emoji and changed what sat
   behind it. That was the wrong variable: macOS draws that emoji as a thin
   grey wire-mesh basket, so at 17px it is a fuzzy blob no matter what the
   background is. Replaced with a drawn bin — solid body, a lid and handle
   separated by a real gap, and two cut-out slots so it never reads as a
   featureless block. Kept on white with a red ring so a table of rows isn't
   a wall of red, and it deepens on hover. ---- */
.icon-btn { width: 32px; height: 32px; }

.icon-btn-danger { background: #fff; border-color: #e8bdb5; color: #c0392b; }
.icon-btn-danger:hover {
  background: #fdf1ef; border-color: #cf7d6d; color: #a5301c;
}


/* The pencil is its neighbour, so it grows to match. */
.icon-btn-edit .ic { width: 17px; height: 17px; }

/* Textareas are excluded from the fixed height above — they must be able to
   grow — but they still share the box model so they line up on their top edge. */
textarea { box-sizing: border-box; line-height: 1.35; font-family: inherit; }

/* ==========================================================================
   Round .18 — ONE house palette.
   Until now four independent colour sets keyed off the same house index all
   disagreed: the table pill said Phosphor was purple, the filter button said
   gold, the calendar dot said orange. Every one of them now reads from the
   custom properties below, so a house colour is changed in exactly one place.
   Index order follows HOUSES in app.py: 1 Dreyfous, 2 Phosphor, 3 Seminole.
   The bar gradients are duplicated inline in view_census_tracking on purpose
   (that chart must survive a stale stylesheet) — keep the two in step.
   ========================================================================== */
:root {
  /* 1 — Dreyfous House, brand teal */
  --h1-bg: #e4f0ee;  --h1-fg: #1c4f54;  --h1-dot: #2b7880;
  --h1-line: #cbe3dd; --h1-solid-a: #2b7880; --h1-solid-b: #1c4f54; --h1-bar-a: #7fbdc2;
  /* 2 — Phosphor House, gold */
  /* 3 — Seminole House I, deep rose (replaced purple, 08/04/2026) */
}

/* Table / panel pills */
.badge.house-1 { background: var(--h1-bg); color: var(--h1-fg); }
.badge.house-2 { background: var(--h2-bg); color: var(--h2-fg); }
.badge.house-3 { background: var(--h3-bg); color: var(--h3-fg); }

/* Resident header meta bubbles */
.meta-bubble.meta-house-1 { background: var(--h1-bg); color: var(--h1-fg); }
.meta-bubble.meta-house-2 { background: var(--h2-bg); color: var(--h2-fg); }
.meta-bubble.meta-house-3 { background: var(--h3-bg); color: var(--h3-fg); }

/* Census chart bars */
.house-bar-1 { background: linear-gradient(180deg, var(--h1-bar-a), var(--h1-solid-b)); }
.house-bar-2 { background: linear-gradient(180deg, var(--h2-bar-a), var(--h2-solid-b)); }
.house-bar-3 { background: linear-gradient(180deg, var(--h3-bar-a), var(--h3-solid-b)); }

/* Facility calendar dots */
.cal-dot.cal-h1 { background: var(--h1-dot); }
.cal-dot.cal-h2 { background: var(--h2-dot); }
.cal-dot.cal-h3 { background: var(--h3-dot); }

/* Residents page location buttons. nth-child(1) is "All locations", so the
   houses start at 2 — that offset is why these drifted out of step before. */
.res-house-filters .house-filter-chip:nth-child(2) { border-color: var(--h1-line); color: var(--h1-fg); }
.res-house-filters .house-filter-chip:nth-child(3) { border-color: var(--h2-line); color: var(--h2-fg); }
.res-house-filters .house-filter-chip:nth-child(4) { border-color: var(--h3-line); color: var(--h3-fg); }
.res-house-filters .house-filter-chip:nth-child(2).active-filter {
  background: linear-gradient(135deg, var(--h1-solid-a), var(--h1-solid-b));
  border-color: var(--h1-solid-b); color: #fff;
}
.res-house-filters .house-filter-chip:nth-child(3).active-filter {
  background: linear-gradient(135deg, var(--h2-solid-a), var(--h2-solid-b));
  border-color: var(--h2-solid-b); color: #fff;
}
.res-house-filters .house-filter-chip:nth-child(4).active-filter {
  background: linear-gradient(135deg, var(--h3-solid-a), var(--h3-solid-b));
  border-color: var(--h3-solid-b); color: #fff;
}

/* ---- Facility Management: the calendar key was set in small muted type,
   which made the three house colours hard to tell apart at a glance. ---- */
.cal-legend {
  gap: 1.1rem 1.6rem;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--navy-dark);
  margin-top: 1rem;
}
.cal-legend span { gap: 0.5rem; }
.cal-legend i {
  width: 15px; height: 15px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(20, 40, 40, 0.22);
}

/* ---- Dashboard census banners: the emoji sat at 1.5rem and 55% opacity in
   the corner of a dark teal card, which is close to invisible. Bigger, fully
   opaque, and on a translucent white disc so it reads against the gradient. */
.total-banner .total-icon {
  top: 0.7rem; right: 0.8rem;
  font-size: var(--fs-2xl);
  opacity: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
@media (max-width: 760px) {
  .total-banner .total-icon { width: 36px; height: 36px; font-size: var(--fs-xl); }
}

/* ---- Projections hero: emoji sits with its label, not above it. ---- */
.proj-hero-emoji { font-size: var(--fs-base); margin-right: 0.35rem; vertical-align: -0.08em; }
.proj-hero-label { display: flex; align-items: center; }

/* A month before a house opened: an empty cell, not a zero. */
.cens-closed { color: #b3bfbc; text-align: center; }

/* ==========================================================================
   Round .19
   ========================================================================== */

/* An .ic with no explicit size expands to fill its container. That is what put
   a page-high pencil in the middle of the Call-Offs page: the rule that sized
   these was scoped to `.icon-btn .ic`, so any .ic used anywhere else — in a
   link, a <summary>, a paragraph — had no size at all. Eight places were one
   stylesheet edit away from the same bug. Baseline size for every .ic, with
   the button rules free to override it. */
svg.ic { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -0.18em; }

/* ---- Delete button, take five. Scott: keep the emoji, lighten the bubble.
   Back to 🗑️ with a soft neutral chip behind it — the earlier white-on-red-ring
   read as an alert, and the drawn bins were rejected. ---- */

.icon-btn-danger { background: #f7f4f3; border-color: #e6dedb; color: #8a6f68; }
.icon-btn-danger:hover { background: #fdf3f1; border-color: #e2b9ae; }


/* ---- Seminole House I: rose out, clean blue in. Blue is unambiguously
   distinct from the teal (green-cyan) and the gold. ---- */
:root {
  --h3-bg: #e6eefa;  --h3-fg: #1f4e8f;  --h3-dot: #3d78c4;
  --h3-line: #cadcf2; --h3-solid-a: #5b90d6; --h3-solid-b: #1f4e8f; --h3-bar-a: #8fb6e6;
}

/* ---- Rate banner pills: four chips in near-identical blue ran together.
   One colour each, a little more weight, so they read as four facts. ---- */
.rate-current-banner .meta-bubble {
  font-weight: 700;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 1px 2px rgba(20, 40, 40, 0.06);
}
.meta-bubble.meta-forever { background: #fbf1d6; color: #7d6112; border-color: #ecd79a; }
.meta-bubble.meta-fee-tpaf-k { background: #e8f1ea; color: #2b6b45; border-color: #c3ddcc; }
.meta-bubble.meta-fee-tpaf   { background: #eaeffb; color: #2f4f8f; border-color: #ccd9f2; }
.meta-bubble.meta-fee-rrf    { background: #f6ebf6; color: #7a3f78; border-color: #e3cbe2; }

/* ---- Hospital of Choice sits on one line with its Other box, both centred.
   The Other field used to be an inline <span> wrapping a block label and
   input, so it never lined up with the select beside it. ---- */
.hosp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.hosp-row > select { flex: 0 1 260px; }
.hosp-other { display: inline-flex; align-items: center; gap: 0.5rem; }
.hosp-other > label { margin: 0; white-space: nowrap; }
.hosp-other > input { flex: 1 1 220px; min-width: 160px; }

/* ---- Move-In checklist: done and not-done rows were different sizes and
   weights, so the list read as two lists. Same size, same weight, larger. ---- */
.checklist-list li { font-size: var(--fs-base); line-height: 1.5; padding: 0.5rem 0; }
.checklist-list .ck-label { font-weight: 700; color: var(--navy-dark); font-size: var(--fs-base); }
.checklist-list .checklist-todo .ck-label { color: var(--navy-dark); }
.checklist-list .ck-note { color: var(--muted); font-size: var(--fs-base); font-weight: 500; }
.checklist-list .src-badge { font-size: var(--fs-md); }

/* ---- Read-only until you press the pencil.
   Same pattern as the resident contacts table: the value is plain text, the
   form is hidden until the pencil is pressed. Applied to the Playbook, the
   Dashboard house tables, Census Tracking and Projections. ---- */
.ro-cell { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 32px; }
.ro-value { color: var(--navy-dark); }
.ro-value.ro-empty { color: #9aa8a5; font-style: italic; }
.ro-edit { display: none; }
.ro-cell.editing .ro-value, .ro-cell.editing .ro-pencil { display: none; }
.ro-cell.editing .ro-edit { display: inline-flex; align-items: center; gap: 0.35rem; }
.ro-pencil {
  width: 26px; height: 26px; border-radius: var(--r-sm); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #cbe3dd; background: #eaf4f2; color: #1c4f54;
  cursor: pointer; opacity: 0; transition: opacity 0.12s, background 0.12s;
}
.ro-pencil svg.ic { width: 14px; height: 14px; }
tr:hover .ro-pencil, .ro-cell:focus-within .ro-pencil, .pb-row:hover .ro-pencil { opacity: 1; }
@media (hover: none) { .ro-pencil { opacity: 1; } }
.ro-pencil:hover { background: #d9ece7; }

/* Vendor tier as a read-only pill (the row is no longer a live <select>). */
.tier-pill {
  display: inline-block; padding: 0.16rem 0.6rem; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.01em;
}
.tier-pill.tier-primary { background: #e4f0ee; color: #1c4f54; }
.tier-pill.tier-backup  { background: #f1f3f4; color: #6b7a77; }

/* The Playbook edit row matches the resident-contacts one. */
tr.edit-row > td { background: #f7fbfa; padding: 0.9rem 1rem; }
.lf-actions { display: flex; align-items: flex-end; }

/* ==========================================================================
   Round .20
   ========================================================================== */

/* Dashboard census banners: bigger glyph, and centred in its disc rather than
   sitting high in it (the emoji's own line box was taller than the glyph). */
.total-banner .total-icon {
  top: 50%; right: 1rem; transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: var(--fs-3xl);
  line-height: 1;
  padding: 0;
}
@media (max-width: 760px) {
  .total-banner .total-icon { width: 42px; height: 42px; font-size: var(--fs-2xl); }
}

/* ==========================================================================
   Round .20 — mobile pass.
   Scott uses the phone for all three things: looking a resident up, logging
   something while standing in a house, and checking the numbers. So no page
   is "desktop only" — the rules below apply everywhere rather than to a
   chosen few pages.
   ========================================================================== */
@media (max-width: 760px) {

  /* --- Touch targets. Apple's floor is 44px; anything smaller gets mis-hit
     when you are holding a phone one-handed in a hallway. --- */
  .icon-btn, .ro-pencil { width: 44px; height: 44px; border-radius: var(--r-md); }
  
  .ro-pencil svg.ic { width: 18px; height: 18px; }
  button, .button, a.button, input[type="submit"] { min-height: 44px; }
  .button.small, button.small { min-height: 38px; padding: 0.45rem 0.85rem; }

  /* Pencils can't rely on hover on a touch screen — Scott chose to keep the
     pencil rather than make the phone read-only, so it must always be there. */
  .ro-pencil { opacity: 1; }
  .ro-cell { min-height: 44px; }
  /* Once you tap it, the field gets the full width rather than sharing a line. */
  .ro-cell.editing { display: flex; width: 100%; }
  .ro-cell.editing .ro-edit { flex: 1 1 auto; }
  .ro-cell.editing input, .ro-cell.editing select { width: 100%; }

  /* --- Cards: give the row's own identity some weight, and let an action
     cell sit as a row of buttons rather than a labelled value. --- */
  table.data-table tr { padding: 0.7rem 0.9rem; }
  table.data-table td:first-child { font-weight: 700; font-size: var(--fs-base); }
  table.data-table td:not([data-label]) {
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
  }
  /* Group headings inside the Playbook stay full-width banners, not cards. */
  table.data-table tr.pb-group { padding: 0.35rem 0.6rem; background: #eef3f2; }
  table.data-table tr.pb-group td { font-weight: 700; }  /* re-coloured in Round .16 */
  /* The hidden edit row must not become a card of its own. */
  table.data-table tr.edit-row { padding: 0; border: none; box-shadow: none; background: none; }
  table.data-table tr.edit-row > td { display: block; padding: 0.6rem 0.2rem; }

  /* --- Never scroll sideways. --- */
  html, body { overflow-x: hidden; }
  .panel, .house-panel, table, .data-table { max-width: 100%; }
  .house-panel { overflow-x: visible; }
  img, svg, iframe, video { max-width: 100%; }

  /* --- Text floor. 16px on inputs also stops iOS zooming the page when a
     field is focused, which is what makes forms feel broken on a phone. --- */
  input, select, textarea { font-size: var(--fs-base); }
  .muted.small, .small, .src-badge { font-size: var(--fs-md); }

  /* --- Numbers stay readable: the census/projection grids are the one place
     cards do not help, so those two keep a table and scroll inside a frame. --- */
  .census-table-wrap, .proj-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border); border-radius: var(--r-md);
  }
  .census-table-wrap table.data-table, .proj-table-wrap table.proj-table { min-width: 520px; }
  .census-table-wrap table.data-table thead,
  .proj-table-wrap table.proj-table thead { display: table-header-group; }
  .census-table-wrap table.data-table,
  .census-table-wrap table.data-table tbody,
  .census-table-wrap table.data-table tr { display: table; width: 100%; }
  .census-table-wrap table.data-table tr { display: table-row; border: none;
    border-radius: 0; box-shadow: none; margin: 0; padding: 0; }
  .census-table-wrap table.data-table td { display: table-cell; padding: 0.4rem 0.5rem; }
  .census-table-wrap table.data-table td[data-label]::before { content: none; }

  /* --- Dashboard banners stack two-up and stay legible. --- */
  .total-banner { min-width: 0; padding: 0.9rem 1rem 0.85rem; }
  .total-banner .total-value { font-size: var(--fs-2xl); }
  .total-banner .total-label { font-size: var(--fs-2xs); }

  /* --- The rate banner wraps instead of squashing its pills. --- */
  .rate-current-banner { flex-wrap: wrap; gap: 0.45rem; }
  .rate-current-banner .meta-bubble { font-size: var(--fs-sm); }
}

/* ==========================================================================
   Round .21 — the hospital row, fixed at the source.
   Three rounds were spent on this because each fix targeted one copy. The
   shape repeats six times in the resident profile alone: a .live-edit row
   holding a <select>, then a <span> that is revealed when "Other" is picked
   and holds the free-text box. The span defaulted to display:inline, so as a
   flex child it did not centre, and the input inside carried a hard-coded
   margin-top that pushed it below the select regardless.
   This rule covers every one of them, including any added later.
   ========================================================================== */
.live-edit > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.live-edit > span > label { margin: 0; white-space: nowrap; }
/* Nothing inside a live-edit row may set its own vertical offset — that is
   what breaks the shared baseline. */
.live-edit > span > input,
.live-edit > span > select,
.live-edit > input,
.live-edit > select { margin-top: 0; margin-bottom: 0; }

/* The profile's key/value rows centre their control against the label. */
table.kv > tbody > tr > th, table.kv > tbody > tr > td { vertical-align: middle; }

/* ---- Delete button: lighter still. Scott, 08/04/2026 — the chip needs to
   recede far enough that the bin's own dark outline is what you see. ---- */
.icon-btn-danger { background: #fcfbfb; border-color: #ece6e4; }
.icon-btn-danger:hover { background: #fdf3f1; border-color: #e6c3ba; }

/* macOS draws 🗑️ as a thin grey wire basket, so at 17px the mesh collapses
   into a blur. On the lighter chip the limiting factor is the glyph, not the
   background — 20px with a small contrast lift is where it reads as a
   wastebasket. Checked at 4x against the real stylesheet. */


/* ==========================================================================
   Round .22
   ========================================================================== */

/* ---- Phosphor House: the gold read as yellow. Copper instead — warm, and
   unmistakably distinct from Dreyfous teal and Seminole blue without being
   the purple or the rose that were already rejected. ---- */
:root {
  --h2-bg: #f9ece3;  --h2-fg: #8f5228;  --h2-dot: #b9702f;
  --h2-line: #e8cfb8; --h2-solid-a: #cf8c4a; --h2-solid-b: #8f5228; --h2-bar-a: #e0ab74;
}

/* ---- Icon chips: nothing green.
   The shared .icon-btn base was #f6f8f8 and the edit chip #eaf4f2 — both sit
   on the green side, which is what showed through behind the bin. Both are now
   neutral-warm / slate, so neither reads as green next to the other. ---- */
.icon-btn { background: #f7f6f5; border-color: #e6e2e0; color: #7a7370; }
.icon-btn-danger { background: #faf7f5; border-color: #e8ddd8; }
.icon-btn-danger:hover { background: #fdf1ef; border-color: #dfb9a9; }
.icon-btn-edit { background: #eef2f7; border-color: #d3ddea; color: #2f4a6b; }
.icon-btn-edit:hover { background: #e2eaf3; border-color: #b9cadf;  }
.icon-btn-edit:hover { color: #243952; }
.ro-pencil { background: #eef2f7; border-color: #d3ddea; color: #2f4a6b; }
.ro-pencil:hover { background: #e2eaf3; }

/* ==========================================================================
   DESIGN TOKENS  (round 1 of the optimisation programme, 08/04/2026)

   The stylesheet had grown to 45 distinct font sizes, 15 corner radii and 106
   shadow declarations across ~40 appended rounds. Everything has been snapped
   to the scales below; use these from here on rather than a new literal.

   Reference points: Linear / Notion / Stripe — a small type scale, generous
   and CONSISTENT spacing, restrained colour, hairline borders, soft shadows.
   ========================================================================== */
:root {
  /* Type — 1.125-ish ratio, values chosen to land on whole pixels at 16px */
  --fs-2xs: 0.6875rem;  /* 11px — table micro-labels, uppercase eyebrows */
  --fs-xs:  0.75rem;    /* 12px — captions, chips */
  --fs-sm:  0.8125rem;  /* 13px — secondary text */
  --fs-md:  0.875rem;   /* 14px — dense table text */
  --fs-base:1rem;       /* 16px — body */
  --fs-lg:  1.125rem;   /* 18px — panel titles */
  --fs-xl:  1.25rem;    /* 20px — section headings */
  --fs-2xl: 1.5rem;     /* 24px — page headings */
  --fs-3xl: 1.875rem;   /* 30px — hero numbers */
  --fs-4xl: 2.25rem;    /* 36px */

  /* Spacing — a 4px base. Every margin/padding should be one of these. */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Radii */
  --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* Elevation — three levels, not 106 */
  --elev-1: 0 1px 2px rgba(20, 40, 40, 0.04);
  --elev-2: 0 1px 2px rgba(20, 40, 40, 0.04), 0 4px 14px rgba(20, 40, 40, 0.06);
  --elev-3: 0 2px 4px rgba(20, 40, 40, 0.06), 0 10px 24px rgba(20, 40, 40, 0.10);

  /* Line heights */
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5;
}

/* Headings sit on the scale rather than each carrying their own size. */
h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-xl);  line-height: var(--lh-tight); }
h3 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
body { font-size: var(--fs-base); line-height: var(--lh-normal); }

/* ==========================================================================
   VISUAL PASS — Dashboard + Resident profile  (round 2, 08/04/2026)
   Reference: Linear / Notion / Stripe. Restrained colour, hairline borders,
   one type scale, generous consistent spacing, soft depth. Everything below
   uses the tokens; no new literals.
   ========================================================================== */

/* ---- Icons. One family, stroked, coloured by the container. ---- */
.ico {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  display: block;
}


/* ---- Panels: hairline border, soft lift, consistent inner rhythm. ---- */
.panel {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.panel:hover { box-shadow: var(--elev-2); }

/* ---- Panel headings: icon in a soft square, title on the scale. ---- */
.tab-heading {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.tab-heading-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef3f2; color: var(--navy-dark);
  flex: 0 0 auto;
}
.tab-heading-text {
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em;
  color: var(--navy-dark); line-height: var(--lh-tight);
}
/* The old decorative underline bar competed with the new rule. */
.tab-heading::after { display: none; }

/* ---- Dashboard census banners ---- */
.total-banner {
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--elev-2);
}
.total-banner .total-icon {
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
}
.total-banner .total-icon .ico { width: 20px; height: 20px; stroke-width: 1.7; }
.total-banner .total-value { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
.total-banner .total-label { font-size: var(--fs-2xs); letter-spacing: 0.08em; }

/* ---- House panel header ---- */
.house-panel-header {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.house-title-bubble { display: inline-flex; align-items: center; gap: var(--sp-2); }
.house-title-bubble .ico { width: 16px; height: 16px; }

/* ---- Action cards ---- */
.action-card {
  border-radius: var(--r-lg); border: 1px solid var(--border);
  padding: var(--sp-4); gap: var(--sp-4);
  box-shadow: var(--elev-1);
  transition: transform 0.13s ease, box-shadow 0.13s ease, border-color 0.13s ease;
}
.action-card:hover { transform: translateY(-2px); box-shadow: var(--elev-3); border-color: #cbe3dd; }
.action-icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; flex: 0 0 auto;
}
.action-icon .ico { width: 20px; height: 20px; }
.action-icon.green  { background: #e8f2ec; color: #2b6b45; }
.action-icon.gold   { background: #f9ece3; color: #8f5228; }
.action-icon.blue   { background: #e9eef7; color: #2f4a6b; }
.action-icon.purple { background: #eef2f7; color: #3f5666; }
.action-title    { font-size: var(--fs-base); font-weight: 700; color: var(--navy-dark); }
.action-subtitle { font-size: var(--fs-sm); color: var(--muted); }

/* ---- Tables: quieter chrome, more air, one weight of rule. ---- */
table.data-table th {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--border); padding: var(--sp-2) var(--sp-3);
}
table.data-table td {
  font-size: var(--fs-md); padding: var(--sp-3);
  border-bottom: 1px solid #f0f3f2;
}
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr { transition: background 0.1s ease; }
table.data-table tbody tr:hover { background: #fbfdfc; }

/* ---- Buttons ---- */
button, .button, a.button, input[type="submit"] {
  border-radius: var(--r-sm);
  font-size: var(--fs-md); font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  transition: background 0.13s ease, border-color 0.13s ease, box-shadow 0.13s ease;
}
.button.small, button.small { font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-3); }
button:focus-visible, .button:focus-visible, a.button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---- Badges / pills ---- */
.badge {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.01em;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
}

/* ---- Page heading ---- */
h1 { letter-spacing: -0.02em; color: var(--navy-dark); margin-bottom: var(--sp-5); }

@media (max-width: 760px) {
  .panel { padding: var(--sp-4); }
  .tab-heading-icon { width: 28px; height: 28px; }
  .tab-heading-icon .ico { width: 16px; height: 16px; }
}

/* ==========================================================================
   Round .19 — the icon set replaces the emoji  (08/05/2026)

   The emoji that used to sit in headings, labels, buttons, list items and
   badges are now `.ico` SVGs. Two things had to change for that swap to be
   invisible:

   1. `.ico` was `display: block`. That was correct while every icon lived in
      a flex container, but an emoji in an <h1> or a <label> is INLINE — a
      block icon drops onto its own line and pushes the text down. A flex item
      is blockified regardless of its `display`, so `inline-block` leaves every
      pre-existing icon exactly where it was and fixes the inline ones.

   2. The emoji scaled with the surrounding font-size; a fixed 18px did not.
      `1.15em` restores that behaviour, so an icon in a page heading is big and
      the same icon in a `.muted.small` badge is small, with no extra classes.
      Every explicit width/height already in this file still wins over it.

   Per DESIGN-NOTES #6: nothing below leaves an icon without a size.
   ========================================================================== */

.ico {
  display: inline-block;
  vertical-align: -0.18em;
  width: 1.15em; height: 1.15em;
}

/* ---- Containers that sized their glyph with font-size ---- */
.pill-ico { font-size: inherit; line-height: 1; filter: none; }
.pill-ico .ico { width: 14px; height: 14px; vertical-align: -0.2em; }
.kv-section-icon .ico,
.docs-section-icon .ico { width: 16px; height: 16px; }
.rp-vital-icon .ico { width: 16px; height: 16px; color: var(--muted); }
.side-icon .ico { width: 17px; height: 17px; }
.wl-stat-row .stat-icon .ico { width: 22px; height: 22px; margin: 0 auto 0.15rem; display: block; }
.proj-hero-icon .ico { width: 26px; height: 26px; }
.proj-hero-emoji .ico { width: 16px; height: 16px; margin-right: 0.35rem; vertical-align: -0.2em; }
.rp-photo-clickable .rp-photo-hint .ico { width: 15px; height: 15px; color: #fff; }
.icon-btn .ico { width: 16px; height: 16px; }
.mail-icon-link .ico { width: 16px; height: 16px; vertical-align: -0.22em; }
.date-combo-btn .ico { width: 15px; height: 15px; }
.hamburger-btn .ico, .sidebar-close .ico, .nav-search-btn .ico { width: 18px; height: 18px; }
.remove-link .ico { width: 13px; height: 13px; }
.todo-empty-icon .ico { width: 40px; height: 40px; margin: 0 auto; color: var(--accent); display: block; }

/* ---- Headings: one step up from the text, never larger ---- */
h1 .ico { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.15rem; }
h2 .ico, h3 .ico { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.12rem; }

/* ---- Colour the icons that used to BE the status ---- */
/* ✅ / ❌ carried their meaning in colour; a stroked icon has to be told. */
.checklist-done > .ico { color: #1d7a5f; }
.checklist-todo > .ico { color: #b3261e; }
.sync-ok { color: #1d7a5f; }
.sync-bad { color: #b3261e; }
.src-badge .ico, .manual-badge .ico, .side-tag .ico { width: 13px; height: 13px; vertical-align: -0.18em; }
.conv-summary .ico { width: 15px; height: 15px; vertical-align: -0.2em; margin-right: 0.2rem; }
.rc-transcript-details summary .ico { width: 14px; height: 14px; vertical-align: -0.2em; }

/* ---- The old emoji hooks are dead markup now ---- */
/* `.ic-emoji` wrapped the wastebasket glyph in the twelve delete buttons and
   existed only to shrink it. The buttons hold an `.ico` now; the rules are
   left in place because removing them from six appended rounds is churn with
   no visible effect, but nothing renders that class any more. */

@media (max-width: 760px) {
  .wl-stat-row .stat-icon .ico { width: 20px; height: 20px; }
  .todo-empty-icon .ico { width: 34px; height: 34px; }
}

/* ---- Icons inherit `color`; three buttons never set one  (08/05/2026) ----

   The base `button` rule sets `color: white`. An emoji ignored that — it
   carries its own colours — so three buttons had been sitting on white
   backgrounds with white text nobody could see, because there was no text.
   A stroked icon is drawn in currentColor, so it vanished. Give them a colour. */
.nav-search-btn, .date-combo-btn { color: var(--navy); }
.nav-search-btn:hover, .date-combo-btn:hover { color: var(--navy-dark); }

/* ---- The delete buttons were being painted as pill buttons  (08/05/2026) ----

   Found while checking icon contrast, and NOT caused by the icon swap:
   `form button[type="submit"]:not(.ghost)` (0-2-2) outranks `.icon-btn-danger`
   (0-1-0), so every delete button in a form — which is all twelve of them —
   was rendering as a teal gradient pill instead of the white chip with a red
   ring that six rounds of this stylesheet were trying to produce. The emoji
   hid it: a full-colour wastebasket is legible on teal. The icon is not.
   Match the specificity instead of raising it further. */
.icon-btn,
form button.icon-btn[type="submit"]:not(.ghost) {
  background: #f7f6f5;
  border: 1px solid #e6e2e0;
  color: #7a7370;
  box-shadow: none;
  padding: 0;
  border-radius: var(--r-sm);
  width: 32px; height: 32px;
}
.icon-btn-danger,
form button.icon-btn-danger[type="submit"]:not(.ghost) {
  background: #faf7f5; border-color: #e8ddd8; color: #8a6f68;
}
.icon-btn-danger:hover,
form button.icon-btn-danger[type="submit"]:not(.ghost):hover {
  background: #fdf1ef; border-color: #cf7d6d; color: #a5301c;
}
.icon-btn-edit,
form button.icon-btn-edit[type="submit"]:not(.ghost) {
  background: #eaf4f2; border-color: #cbe3dd; color: #1c4f54;
}

/* ---- An icon must not wrap away from its label  (08/05/2026) ----
   Found by running the icon measurement at a 390px viewport: the Projections
   "Delete" button is 61px wide on a phone, so the bin sat on its own line
   above the word. `:has()` covers every button of this shape; the explicit
   class covers browsers that do not support it. */
.btn-inline-danger { white-space: nowrap; }
button:has(> .ico), .button:has(> .ico), a.button:has(> .ico),
summary:has(> .ico), label:has(> .ico) { white-space: nowrap; }

/* ---- The date picker button must not be squeezed  (08/05/2026) ----
   `.date-combo` is a flex row and the button was allowed to shrink. The emoji
   inside it had text metrics that pushed back; a 15px SVG does not, so on a
   phone the button collapsed to 3px wide. Pin it, and give it the 44px touch
   target DESIGN-NOTES #9 asks for. */
.date-combo-btn { flex: 0 0 auto; }
@media (max-width: 760px) {
  .date-combo-btn { min-width: 44px; min-height: 44px; }
  .date-combo-btn .ico { width: 18px; height: 18px; }
}

/* ==========================================================================
   Round .20 — Compact density  (Scott, 08/06/2026)

   Scott picked Compact from a three-way switcher after seeing the measured
   numbers. Desktop rows go from ~44px to ~30px, about 8% off the height of
   every resident page.

   The thing that actually sets row height here is NOT padding — it is the
   fixed `height: 40px` on inputs and selects from the form-alignment round.
   That rule is deliberate (a min-height let a select and a text input settle
   at different heights and look misaligned), so it is overridden with another
   exact height rather than removed.

   MOBILE IS DELIBERATELY NOT COMPACT. DESIGN-NOTES #9 asks for 44px touch
   targets and 16px inputs so iOS does not zoom on focus. Neither was ever
   actually implemented for text inputs and selects — they were 40px at the
   browser's default font size. This round implements both, so a phone gets
   slightly TALLER rows than before, on purpose.
   ========================================================================== */

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="password"], input[type="search"], select {
  height: 32px;
  /* The vertical padding has to come down with the height or the text is
     clipped — a <select> at 14px/1.35 needs ~19px for its line box, and the
     inherited padding pushed it past 32px. Caught in a screenshot; the
     computed height was correct and the text still vanished. */
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal;
}
textarea { padding: 4px 8px; }

table.kv th { padding: 2px 0.9rem 2px 0; }
table.kv td { padding: 2px 0; }

.kv-section-head { padding: 5px 0.7rem; }
.kv-section-row td { padding-top: var(--sp-3); padding-bottom: var(--sp-1); }

.rp-vital { padding: 1px 0; }

.button, a.button, form button[type="submit"]:not(.ghost), button {
  padding: var(--sp-1) var(--sp-3);
}
/* The rule above is 0-2-2, which outranks `.button.small` (0-2-0), so a small
   button inside a form silently takes the generic padding. Both values happen
   to be identical today, so nothing renders differently - but the component
   would stop owning its own padding the moment either one changed. Matched,
   not raised, exactly as Round .19 did for `.icon-btn-danger`. */
.button.small, button.small, form button.small[type="submit"]:not(.ghost) {
  padding: var(--sp-1) var(--sp-3);
}
.icon-btn, form button.icon-btn[type="submit"]:not(.ghost) { padding: 0; }

.panel { padding: var(--sp-4) var(--sp-5); }

/* ---- BACKLOG 145, 2026.07.22.73: the Call-Offs guidance box ---------------
   The same cream box as the Community Playbook's guidance boxes, so the two
   read as the same thing on two pages -- but written out SEPARATELY and NOT
   grouped onto the .pb-guide selectors. Grouping was the first cut and the
   full sweep caught it: playbook_houses_and_guidance_test.py pins
   `\.pb-guide-body\s*\{`, and a grouped `.pb-guide-body, .co-guide-body {`
   no longer matches that. Trap 55's cousin -- a check pinned to a selector
   standing ALONE stops matching the moment the selector gains a neighbour.
   Six duplicated declarations is the cheaper answer, and it also means a
   change to the Playbook box can never silently restyle this one.

   ⚠️ `.co-guide` MUST STAY BELOW EVERY `.panel` RULE IN THIS FILE. Both are a
   single class, so the LATER rule wins, and `.panel` is re-opened three more
   times further down -- the last of them re-declaring `border`. Written up
   beside .pb-guide this kept its cream background and LOST its border. The
   suite pins the order. style-v2.css does not restyle `.panel`. */
.co-guide { background: #fbf9f4; border: 1px solid #e9dfce; }
.co-guide-head {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--navy-dark); margin-bottom: 0.4rem;
}
/* pre-wrap so the line breaks Scott types are the line breaks staff read. */
.co-guide-body { white-space: pre-wrap; font-size: var(--fs-sm); color: var(--navy-dark); }
.co-guide-empty { color: var(--muted); font-style: italic; }
.co-guide-form { display: block; margin-top: 0.6rem; }
/* ⚠️ AND THIS LINE IS THE WHOLE REASON THE PENCIL WORKS. `display: block` on a
   form that carries the `hidden` ATTRIBUTE BEATS the browser's built-in
   `[hidden] { display: none }` -- same specificity, and the stylesheet's rule
   comes later. Without this the textarea and the Save button are painted for
   the owner from the moment the page loads and the pencil toggles an attribute
   nothing looks at. MEASURED in a real browser, not reasoned: the box was
   280px tall with the form "hidden" and 154px with it truly closed.
   ⛔ THE PLAYBOOK'S BOXES HAVE HAD EXACTLY THIS BUG SINCE `.65` AND IT IS LIVE.
   See the .pb-guide-form fix a few lines down. */
.co-guide-form[hidden] { display: none; }
.co-guide-input {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  font-family: inherit; font-size: var(--fs-sm); margin-bottom: 0.5rem;
}

/* ---- A BUG `.65` SHIPPED, FOUND BY 145 AND FIXED HERE -------------------
   `.pb-guide-form { display: block; }` above has been defeating the `hidden`
   attribute on all twenty Community Playbook guidance forms since `.65` went
   live, so the owner has been looking at twenty permanently-open textareas and
   a pencil that toggles nothing he can see. It was invisible to `.65`'s own
   browser check because that check selects `form.pb-guide-form:not([hidden])`
   -- a DOM ATTRIBUTE selector, which is true of an element CSS is painting
   anyway. `.46`'s lesson exactly: a declaration is not a rendering.
   ⚠️ Written as an ADDITION so every line `.65` wrote is untouched. */
.pb-guide-form[hidden] { display: none; }

/* ---- the floor: a phone keeps tappable rows ---------------------------- */
@media (max-width: 760px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="date"], input[type="password"], input[type="search"], select {
    height: 44px;
    font-size: 16px;          /* stops iOS zooming the page on focus */
    padding-top: 0;
    padding-bottom: 0;
  }
  table.kv th { padding: 4px 0 0; }
  table.kv td { padding: 0 0 8px; }
  .button, a.button, form button[type="submit"]:not(.ghost), button { min-height: 44px; }
  .icon-btn, form button.icon-btn[type="submit"]:not(.ghost) { min-height: 0; }
}

/* ---- Round .20b — the resident sidebar folds on a phone  (08/06/2026) ----

   Scott's choice. House, room and allergies stay visible; everything else is
   behind one tap, so the profile tabs are reachable without scrolling past the
   whole sidebar. Allergies are OUTSIDE the fold by construction, not by
   ordering — on a care system the allergy callout must never be one tap away.

   No JavaScript: it reuses the checkbox-and-label pattern the main menu
   already uses. Above 860px nothing folds and the desktop layout is untouched.
   ------------------------------------------------------------------------ */
.rp-side-checkbox { position: absolute; opacity: 0; pointer-events: none; }
.rp-side-summary, .rp-side-strip { display: none; }

@media (max-width: 860px) {
  .rp-side {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: var(--sp-3); background: #fbfdfc;
  }
  .rp-side-summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2); cursor: pointer; min-height: 44px;
    font-weight: 800; font-size: var(--fs-2xs); text-transform: uppercase;
    letter-spacing: 0.09em; color: #2b7880;
  }
  .rp-side-summary .ico { transition: transform 0.15s ease; }
  .rp-side-checkbox:checked ~ .rp-side-summary .ico { transform: rotate(180deg); }
  .rp-side-strip { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: var(--sp-2); }
  .rp-side-rest { display: none; }
  .rp-side-checkbox:checked ~ .rp-side-rest {
    display: block; border-top: 1px solid var(--border);
    margin-top: var(--sp-2); padding-top: var(--sp-2);
  }
}

/* On a phone the allergy callout has to sit outside the fold so it can never
   hide, which puts it above the vitals in source order. On a desktop nothing
   folds, so put it back where it has always been — under the vitals. */
@media (min-width: 861px) {
  .rp-side { display: flex; flex-direction: column; }
  .rp-side-rest { order: 1; }
  .rp-side > .rp-vital-allergy, .rp-side > .rp-vital { order: 2; }
}


/* ==========================================================================
   Round .20c — small UI items from Scott's list  (08/05/2026)
   ========================================================================== */

/* BACKLOG 18. The single waitlist bubble stacked icon / number / label down
   the card, which looked like a column with one thing in it. On one line it
   reads as a sentence: [icon] 4 On the Waitlist.
   Scoped to .wl-stat-row so the multi-card stat rows elsewhere are untouched. */
.wl-stat-row .stat-card {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  text-align: left;
}
.wl-stat-row .stat-icon { margin-bottom: 0; align-self: center; }
.wl-stat-row .stat-icon .ico { margin: 0; display: block; }
.wl-stat-row .stat-num { line-height: 1; }
.wl-stat-row .stat-label { margin: 0; }

/* ...and the row itself. `.stat-row` is repeat(auto-fit, minmax(170px, 1fr)),
   which on a 390px phone makes TWO 170px tracks and leaves this single card
   sitting in the first one at half width, with its label wrapping to "On the /
   Waitlist". That is DESIGN-NOTES #1 — a stretch grid stranding its content.
   minmax(min(100%, 320px), 1fr) keeps a REAL minimum (never minmax(0, ...),
   which collapses under auto-fit) while never exceeding the container, so one
   card fills the row and two would still sit side by side on a wide screen. */
.wl-stat-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }


/* BACKLOG 26 — the RingCentral page  (08/05/2026)
   -------------------------------------------------------------------------
   The lede paragraph is gone, so the sync line is now the only thing in the
   hero bubble and has to carry it. Bigger, and full-strength white rather than
   the 72% it used as a subordinate line. */
.rc-sync-lead {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.5;
}

/* Four counts, each its own colour. Keyed on the card's NAME, never on
   :nth-child — DESIGN-NOTES #3. Add a fifth count and it keeps the base teal
   until somebody gives it a colour, which is the safe failure. */
.rc-stat-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.rc-card-total      { background: linear-gradient(135deg, #286e75, #3f8f8a); }
.rc-card-texts      { background: linear-gradient(135deg, #2f7d5b, #4aa77c); }
.rc-card-calls      { background: linear-gradient(135deg, #5a4696, #7a63bd); }
.rc-card-voicemails { background: linear-gradient(135deg, #b07d16, #d99e14); }


/* BACKLOG 22, 23, 24 — Documents tab and Census Tracking  (08/05/2026)
   -------------------------------------------------------------------------
   23. The date is its own column now, immediately after the document name.
   It must not wrap or be squeezed out by a long filename. */
.docs-table .docs-date {
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--muted);
  width: 1%;
}

/* 24. Census Tracking keeps the last 12 months open and folds the rest.
   Checkbox-and-label, the same no-JavaScript mechanism as the menu and the
   profile sidebar.

   The specificity here is deliberate, not decoration: the phone media query
   sets `.census-table-wrap table.data-table tr { display: table-row; }`, which
   is 0-2-2 and would beat a plain `.cens-old { display: none; }`. These two
   rules are 0-3-2 and 0-4-2, so the fold survives on a phone. */
.cens-older-check {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.census-table-wrap table.data-table tr.cens-old { display: none; }
.cens-older-check:checked ~ .census-table-wrap table.data-table tr.cens-old { display: table-row; }

.cens-older-label {
  display: inline-block; margin-top: 0.7rem; cursor: pointer;
  padding: 0.4rem 0.9rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--navy);
  background: #f6faf8; border: 1px solid var(--border); border-radius: var(--r-sm);
}
.cens-older-label:hover { background: #eef7f3; }
.cens-older-label::before { content: "\25B8  "; }
.cens-older-check:checked ~ .cens-older-label::before { content: "\25BE  "; }
.cens-older-check:focus-visible ~ .cens-older-label { outline: 2px solid var(--navy); outline-offset: 2px; }
.cens-lbl-hide { display: none; }
.cens-older-check:checked ~ .cens-older-label .cens-lbl-show { display: none; }
.cens-older-check:checked ~ .cens-older-label .cens-lbl-hide { display: inline; }


/* ==========================================================================
   Round .15 — BACKLOG 9, 11, 12  (Scott's list, 08/05/2026)
   ==========================================================================

   9  The calendar button on a date field sat 10px below the middle of its own
      text box. Fixed above, at the `form.stack-form > button` rule, by scoping
      that rule to the form's own button. The guard below is the belt: two
      classes (0-2-0) outrank any future `form … button` rule, which can only
      ever reach (0-1-n). `tests/date_combo_align_test.py` measures all seven
      date fields at 1440px and 390px.

   11 The pencil is one icon now, not ten pasted copies — see app.py.

   12 The "Projected Draft" row was #e7f4f1, a pale green sitting inside a table
      whose header rule, hover state and Revenue tone are all green. Scott:
      "needs a colour that is not so close to the green already in the table."
      It is the one figure on the page he types himself, so it gets its own hue
      rather than a lighter green — DESIGN-NOTES #14, colour is functional.
      Blue, from the same family as `.side-tag-poa` (#3b4d8f), which keeps it
      inside the existing palette instead of adding a tenth one. #dde6f9 is
      the palest blue that still clears every other tone on the page by
      dE 12 in CIELAB — dE 8 is roughly where two table rows stop reading as
      different colours. tests/proj_row_colour_test.py measures it.
   -------------------------------------------------------------------------- */

.date-combo .date-combo-btn { margin: 0; }

/* The Projections row-name pencil was a FILLED black path, so `color` never
   reached it and 70% opacity on a muted label still read as near-black. The
   family pencil draws in currentColor, which made the same rule render it
   almost invisible — DESIGN-NOTES #13, "check the container has a colour".
   Same specificity as the rule it corrects (0-2-1), not higher. */
.inline-edit summary .edit-hint { color: #55666b; opacity: 1; }

.proj-table tr.proj-revenue td {
  background: #dde6f9;
  color: #24356f;
  border-top: 1px solid #c6d2ee;
  border-bottom: 1px solid #c6d2ee;
}
.proj-table tbody tr.proj-revenue:hover td { background: #cfdcf5; }


/* ==========================================================================
   Round .16 — BACKLOG 10, the Playbook category bands  (Scott, 08/05/2026)
   ==========================================================================

   "The category header bands (Air Conditioning, Electrical…) must not be the
   same colour as the rows beneath."

   They were #f2f8f6. The rows they head are white and #f6faf8, and the hover
   tint is #eef7f3 — so the band was 2.6 ΔE from a striped row and 1.8 from the
   hover state. Measured, not eyeballed: a band and the row under it were, to
   the eye, the same colour, and the directory read as one 30-row list instead
   of fourteen labelled groups.

   #cfe3dd is at least 8.8 ΔE from every row state including hover, and still
   carries the navy-dark label at 6.8:1 — comfortably AA. It is the brand teal
   family, not a new hue (DESIGN-NOTES #14: change the colour, keep the job it
   is doing).

   A band is also a divider, so it gets the two things a tint alone cannot do:
   a hairline top rule, and a 3px teal edge down its left. On the phone the
   band collapses to a full-width strip, so the edge becomes a bottom rule
   instead — a 3px left edge on a card-shaped row reads as a stray mark.

   tests/playbook_bands_test.py measures the band against every row state it
   can sit next to, at 1440px and 390px.
   -------------------------------------------------------------------------- */

.pb-vendors tr.pb-group td {
  background: #cfe3dd;
  border-top: 1px solid #a9cbc2;
  box-shadow: inset 3px 0 0 var(--teal-600);
  padding: 0.42rem 0.6rem;
}
.pb-vendors tr.pb-group + tr.pb-row td { border-top: 0; }

@media (max-width: 760px) {
  table.data-table tr.pb-group { background: #cfe3dd; }
  table.data-table tr.pb-group td {
    background: #cfe3dd;
    box-shadow: none;
    border-top: 1px solid #a9cbc2;
    border-bottom: 2px solid var(--teal-600);
  }
}


/* ==========================================================================
   Round .17 — BACKLOG 30, the Financials tables  (Scott, 08/05/2026)
   ==========================================================================

   "Fix column headers not aligning with values under 'show as table' in
   Revenue against Operating Expenses."

   `.fd-root th` sets `text-align: right`. `.fd-root td` sets no alignment at
   all, so every cell fell back to the browser default of left. In every one of
   the four tables on that page, each column after the first had its heading
   hard against the right edge and its numbers hard against the left — the two
   as far apart as the column allowed.

   `td` follows `th` now. The one text column, Category in the account detail,
   goes left on BOTH with a shared `.l` class rather than an inline style on
   the cell alone, which is how it came to disagree with its own heading.

   The `.n` class was applied to some numeric cells and not others (Revenue and
   Net had it, Expenses and Margin did not), which is why half the figures in
   the same table were dark and half grey. Every numeric cell carries it now.
   It never set alignment and still does not — it is emphasis only.

   tests/fd_table_align_test.py renders the page against a stubbed payload and
   measures each header's centre against the centre of the column beneath it.
   -------------------------------------------------------------------------- */

.fd-root td { text-align: right; }
.fd-root th.l, .fd-root td.l { text-align: left; }
.fd-root th:first-child, .fd-root td:first-child { text-align: left; }