/* overview.html — Rooms this week (the first page sheet of Phase 8 of
   docs/PLAN-shell-consolidation.md, 2026-10-11: moved out of the page's inline
   <style> with workspaces PR 3, loaded right before that block so the
   cascade is unchanged). */
.ovp-ages { display: block; font-weight: 400; font-size: 12px; color: var(--ink-2, #5a5a6e); }
/* Rooms this week: one header line per service day, then one tile per room. */
.ovp-day + .ovp-day { border-top: 1px solid #f0ece5; margin-top: 12px; padding-top: 12px; }
.ovp-day-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; font-size: 13.5px; margin: 0 0 8px; }
.ovp-day-st { font-weight: 600; }
.ovp-day-st.is-red { color: #b42318; }
.ovp-day-st.is-amber { color: #8a5300; }
.ovp-day-st.is-green { color: #2f7d5b; }
.ovp-svc-h { margin: 10px 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-2, #5a5a6e); }
.ovp-room-tiles.stat-tiles { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ovp-room-tile.stat-tile { padding: 8px 10px; font-size: 13px; }
.ovp-room-tile b { display: block; font-size: 13px; }
.ovp-room-n { display: block; color: var(--ink, #1a1a2e); }
.ovp-room-tile.stat-tile.is-off { border-style: dashed; color: var(--ink-2, #5a5a6e); }
.ovp-room-tile.is-off .ovp-room-n { color: var(--ink-2, #5a5a6e); }
.ovp-room-tile .ovp-room-k { font-family: var(--font-display, Lora, serif); font-size: 15px; font-weight: 600; }
.ovp-stations .ovp-room-n { font-size: 12.5px; }
.ovp-day-pick { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink-2, #5a5a6e); }
.ovp-day-pick select { width: auto; font: inherit; padding: 4px 8px; }

/* ── The rest of the page (its inline <style> until Phase 8) ── */
/* ⚠️ Every colour carries a LITERAL fallback (the app-shell lesson):
   revival-ui.css is a third-party origin, and this is the first page a
   staff member sees. The literals are the palette the overview was
   specified in — warm ground #F3F0EA, navy #1E2433, teal #0F6E74,
   red #A3281B, amber #8A5300. */
.app-header {
  position: relative; z-index: 2;
  background: var(--bg-sidebar, #1e2433); color: #fff;
  padding: 0 28px; height: 64px;
  display: flex; align-items: center; gap: 16px;
}
body { background: var(--bg, #f3f0ea); }
/* The page is fluid up to 1,400px of content (plus its 24px gutters),
   centered. The sections are ONE shared .ov-grid (style.css; packed by
   overview-rows.js, drawn by overview.js ovSectionsHtml) — no grid rule of
   this page's own (2026-10-11). */
.page { max-width: 1448px; margin: 0 auto; padding: 22px 24px 64px; }
.ov-mut { color: var(--ink-2, #5a5a6e); }

/* ── Greeting ────────────────────────────────────────────────────── */
.ov-greet { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.ov-greet-text { flex: 1 1 320px; min-width: 0; }
.ov-date { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2, #5a5a6e); margin: 0 0 6px; }
.ov-date .ov-next { text-transform: none; letter-spacing: normal; font-weight: 500; }
.ov-date .ov-next::before { content: '·'; margin: 0 8px; }
h1.ov-hello { font-family: var(--font-serif, 'Lora', Georgia, serif); font-weight: 600; font-size: clamp(24px, 3vw, 28px); line-height: 1.15; margin: 0 0 4px; letter-spacing: -.01em; color: var(--ink, #1a1a2e); }
.ov-role-sub { margin: 0; font-size: 1rem; color: var(--ink-2, #5a5a6e); }
.ov-greet-acts { display: flex; align-items: center; gap: 8px; flex: none; margin-top: 6px; }
.ov-roster-note { margin: 8px 0 0; font-size: .86rem; color: #8a5300; }
.ov-roster-note a { color: inherit; text-decoration: underline; }
#ov-roster-notes[hidden] { display: none; }
.ov-main { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: .9rem; background: var(--accent, #1f4e5f); color: #fff; border: 1px solid var(--accent, #1f4e5f); text-decoration: none; }
.ov-main:hover { filter: brightness(1.08); }
.ov-main:focus-visible, .ov-tile:focus-visible { outline: 2px solid var(--accent-2, #d8a04a); outline-offset: 2px; }

.ov-customize { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: .86rem; font-weight: 500; background: var(--bg-card, #faf8f5); color: var(--accent, #1f4e5f); border: 1px solid rgba(31,78,95,.3); cursor: pointer; }
.ov-customize:hover, .ov-customize[aria-expanded="true"] { background: var(--accent-lt, #e6f0f3); }
.ov-customize:focus-visible { outline: 2px solid var(--accent-2, #d8a04a); outline-offset: 2px; }

/* ── First sign-in ────────────────────────────────────────────────── */
.ov-intro { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -8px 0 22px; padding: 12px 16px; border-radius: var(--radius, 12px); background: var(--bg-card, #faf8f5); border: 1px dashed var(--accent, #1f4e5f); }
.ov-intro[hidden] { display: none; }
.ov-intro p { margin: 0; flex: 1 1 320px; font-size: .92rem; color: var(--ink-2, #5a5a6e); }
.ov-intro p b { color: var(--ink, #1a1a2e); }

/* ── Customize panel ──────────────────────────────────────────────── */
.ov-custom { margin: -8px 0 22px; padding: 14px 16px; background: var(--bg-card, #faf8f5); border: 1px solid var(--accent, #1f4e5f); border-radius: var(--radius, 12px); }
.ov-custom[hidden] { display: none; }
.ov-custom-head h2 { font-family: var(--font-serif, 'Lora', Georgia, serif); font-size: 1.05rem; margin: 0 0 2px; }
.ov-custom-head h2:focus { outline: none; }
.ov-custom-head p { margin: 0 0 10px; font-size: .86rem; }
.ov-custom-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ov-custom-row, .ov-custom-num { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 8px; background: rgba(26,26,46,.03); }
.ov-custom-row.is-off, .ov-custom-num.is-off { color: var(--ink-2, #5a5a6e); }
.ov-custom-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; text-transform: none; letter-spacing: normal; cursor: pointer; min-height: 32px; }
.ov-custom-check input { width: 18px; height: 18px; accent-color: var(--accent, #1f4e5f); }
.ov-custom-move { display: inline-flex; gap: 4px; }
.ov-custom-row[data-sec="numbers"] { flex-wrap: wrap; }
.ov-custom-nums { list-style: none; margin: 4px 0 2px; padding: 0 0 0 26px; flex: 1 1 100%; display: flex; flex-direction: column; gap: 3px; }
.ov-custom-num { background: rgba(26,26,46,.04); padding: 3px 6px 3px 8px; }
.ov-custom-num .ov-custom-check { font-weight: 500; font-size: .86rem; min-height: 28px; }
.ov-custom-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ov-custom-acts .rui-btn--primary { margin-left: auto; }


/* ── Panels (2026-10-06) ──────────────────────────────────────────────
   Every section but Needs your action, Key numbers and Your areas is a
   white panel on the cream ground: a header row (30px icon tile · title
   16px/600 · count · page link right) over a bordered body. One rule set
   for role views and preset views (overview-preset.js) alike. */
/* A panel is a size CONTAINER: what is inside it (the queue rows) lays
   out by the panel's own width, so a Compact queue on a big monitor
   stacks exactly as it does on a phone. */
.ov-box { background: var(--bg-raised, #fff); border: 1px solid #e3ddd3; border-radius: 12px; box-shadow: 0 1px 2px rgba(26,26,46,.05); padding: 0; container-type: inline-size; }
.ov-box > .ov-phead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 14px 18px; border-bottom: 1px solid #ece7df; }
.ov-box > .ov-phead h2 { font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif); font-size: 16px; font-weight: 600; margin: 0; color: var(--ink, #1a1a2e); }
.ov-box > .ov-phead .ov-mut { font-size: 13px; }
.ov-pic { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-lt, #e6f0f3); color: var(--accent, #1f4e5f); display: inline-flex; align-items: center; justify-content: center; }
.ov-pic svg, .ov-needs-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ov-pcount { padding: 2px 9px; border-radius: 999px; background: #eef1f3; font-size: 12px; font-weight: 700; color: #46585f; }
.ov-plinks { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.ov-plinks .ov-side-link { font-size: 13px; }
.ov-plinks .ov-side-link:not([target])::after { content: ' ›'; }
.ov-box > :not(.ov-phead) { margin-left: 18px; margin-right: 18px; }
.ov-box > .ov-phead + * { margin-top: 12px; }
.ov-box > :last-child:not(.ov-phead) { margin-bottom: 16px; }
/* Row lists run edge to edge: 12px 18px rows with a rule between them. */
.ov-box > :is(.ovp-list, .ovp-regs, .ovp-reqs, .ov-coming, .ov-recent, .ov-thin, .ov-rows) { margin-left: 0; margin-right: 0; }
.ov-box > :is(.ovp-list, .ovp-regs, .ovp-reqs, .ov-coming, .ov-recent, .ov-thin) > li { padding: 12px 18px; border-top: 1px solid #f0ece5; }
.ov-box > :is(.ovp-list, .ovp-regs, .ovp-reqs, .ov-coming, .ov-recent, .ov-thin) > li:first-child { border-top: 0; }
.ov-box > .ov-phead + :is(.ovp-list, .ovp-regs, .ovp-reqs, .ov-coming, .ov-recent, .ov-thin, .ov-rows) { margin-top: 0; }
.ov-box > :is(.ovp-list, .ovp-regs, .ovp-reqs, .ov-coming, .ov-recent, .ov-thin):last-child { margin-bottom: 0; }
.ov-box .ov-side-ok, .ov-box .ov-side-warn, .ov-box .ovp-intro, .ov-box .ovp-foot { font-size: 13px; }

/* App / source tags: a fixed-width word leading a row. The tint is by
   source id; the word is always there, so colour is never the only signal. */
.ov-tag { flex: none; display: inline-block; width: 96px; box-sizing: border-box; margin-right: 10px; padding: 3px 4px; border-radius: 6px; text-align: center; vertical-align: 1px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #eef1f3; color: #33454c; }
.ov-tag[data-tag="design"] { background: #fdecd8; color: #8a3b12; }
.ov-tag[data-tag="facility"] { background: #e3ecf7; color: #1d3f6e; }
.ov-tag:is([data-tag="intake"], [data-tag="onboarding"], [data-tag="equip"]) { background: #dcecee; color: #0f4f54; }
.ov-tag:is([data-tag="care"], [data-tag="missions"]) { background: #ede4f6; color: #57307d; }

.ovp-intro, .ovp-foot { margin: 0 0 10px; color: var(--ink-2, #5a5a6e); }
.ovp-foot { margin: 10px 0 0; }
.ovp-req-tabs .ov-tab-n { opacity: 1; }
.ovp-req-act { margin-top: 6px; }
.ovp-req-status { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; margin-left: auto; }
.ovp-req-meta { margin-left: 106px; }
.ovp-team-tiles.stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
a.ovp-team-tile.stat-tile { padding: 8px 10px; text-decoration: none; }
a.ovp-team-tile.stat-tile:hover { border-color: var(--accent, #1f4e5f); }
.ovp-team-head { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #5a5a6e); margin: 6px 0 2px; }
.ovp-meta { font-size: .8rem; color: var(--ink-2, #5a5a6e); }
.ovp-sub { display: block; font-size: 13px; color: var(--ink-2, #5a5a6e); }
.ovp-list { list-style: none; margin: 0; padding: 0; }
.ovp-person, .ovp-note { display: flex; align-items: center; gap: 10px; }
.ovp-note { align-items: flex-start; }
.ovp-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700; background: var(--accent-lt, #e6f0f3); color: var(--accent, #1f4e5f); }
.ovp-person-text, .ovp-note-body { flex: 1 1 auto; min-width: 0; }
.ovp-person-text a { font-weight: 600; color: var(--ink, #1a1a2e); }
.ovp-note-text { margin: 3px 0; font-size: .9rem; overflow-wrap: anywhere; }
.ovp-regs, .ovp-reqs { list-style: none; margin: 0; padding: 0; }
.ovp-reg-top, .ovp-req-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ovp-req-top { justify-content: flex-start; align-items: center; }
.ovp-reg-name, .ovp-req-top a { font-weight: 600; color: var(--ink, #1a1a2e); overflow-wrap: anywhere; }
.ovp-reg-count { font-size: .86rem; margin: 4px 0; }
.ovp-bar { height: 6px; border-radius: 999px; background: rgba(26,26,46,.1); overflow: hidden; }
.ovp-bar > span { display: block; height: 100%; background: var(--accent, #1f4e5f); }
.ovp-bar.is-full > span { background: var(--error, #c0392b); }
.ovp-reg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ovp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* Orientation course: complete / in progress / not started, one bar. */
.ov-bar-done { background: #2f7d5b; }
.ov-bar-prog { background: var(--accent, #1f4e5f); }
.ov-bar-todo { background: var(--warn, #9a5800); }
.ovp-course-key { justify-content: space-between; }
.ovp-course-key .is-todo b { color: #8a5300; }
.ovp-state:empty { display: none; }
@media (pointer: coarse) { .ovp-panel .row-icon { min-height: 44px; min-width: 44px; } }
@media (max-width: 600px) { .ovp-reg-acts .rui-btn { flex: 1 1 auto; } .ovp-req-meta { margin-left: 0; } }
/* ── Sections ────────────────────────────────────────────────────── */
.ov-section { margin-bottom: 26px; }
.ov-section-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.ov-section-head h2 { font-family: var(--font-serif, 'Lora', Georgia, serif); font-weight: 600; font-size: 1.1rem; margin: 0; color: var(--ink, #1a1a2e); }
/* Eyebrow headings (Key numbers, Your areas): DM Sans 11.5px/700, tracked. */
.ov-eyebrow-head { margin: 0 0 10px; }
.ov-section-head h2.ov-eyebrow { font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #5a5a6e); }
.ov-section-head .ov-mut { font-size: .82rem; }

/* Your areas — one tile per destination the role can open. Real links. */
.ov-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ov-tile-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-lt, #e6f0f3); color: var(--accent, #1f4e5f); }
.ov-tile-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ov-tile-text { min-width: 0; flex: 1 1 auto; }
.ov-tile-label { display: block; font-weight: 600; font-size: 14px; line-height: 1.25; }
.ov-tile-sec { display: block; font-size: 12px; color: var(--ink-2, #5a5a6e); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-tile-count { flex: none; min-width: 24px; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; text-align: center; background: rgba(26,26,46,.07); color: var(--ink, #1a1a2e); }
.ov-tile-count.is-red { background: #f6dcd8; color: var(--error, #a3281b); }
.ov-tile-count.is-amber { background: #f6e7cc; color: #8a5300; }
.ov-tile-go { flex: none; color: var(--accent, #1f4e5f); font-weight: 600; }
.ov-empty { padding: 14px 16px; background: var(--bg-card, #faf8f5); border: 1px dashed var(--border, rgba(26,26,46,.18)); border-radius: var(--radius, 12px); color: var(--ink-2, #5a5a6e); font-size: .92rem; }
.ov-empty a { color: var(--accent, #1f4e5f); font-weight: 600; }

/* ── Needs your action — a LIGHT band (2026-10-06) ───────────────────
   accent-lt ground, every chip in one row on a desktop: a white tile, a
   big count, the label, and a bottom edge in the chip's tone. */
.ov-needs { padding: 18px 20px; border-radius: 14px; background: var(--accent-lt, #e6f0f3); border: 1px solid #c9dde3; }
.ov-needs .ov-needs-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.ov-needs-head h2 { font-family: var(--font-serif, 'Lora', Georgia, serif); font-size: 20px; font-weight: 600; margin: 0; }
.ov-needs-ic { display: inline-flex; color: var(--accent, #1f4e5f); }
.ov-needs-ic svg { width: 20px; height: 20px; }
.ov-badge-total { margin-left: auto; font-size: 13px; font-weight: 500; color: #46585f; }
.ov-chips.stat-tiles { grid-template-columns: repeat(var(--ov-n, 4), minmax(0, 1fr)); margin: 0; }
a.ov-chip.stat-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; }
a.ov-chip.stat-tile:hover { border-color: var(--accent, #1f4e5f); }
a.ov-chip.stat-tile.is-on { border-color: var(--accent, #1f4e5f); outline: 2px solid var(--accent, #1f4e5f); outline-offset: -1px; }
.ov-needs .ov-chip .ov-badge { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--ink, #1a1a2e); font-family: var(--font-serif, 'Lora', Georgia, serif); font-size: 26px; font-weight: 600; line-height: 1.1; }
.ov-chip-l { font-size: 13px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.ov-chip:focus-visible, .ov-tab:focus-visible { outline: 2px solid var(--accent-2, #d8a04a); outline-offset: 2px; }
@media (max-width: 720px) { .ov-chips.stat-tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } }
.ov-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: rgba(26,26,46,.08); color: var(--ink, #1a1a2e); }
.ov-badge.is-amber { background: #f6e7cc; color: #8a5300; }
.ov-badge.is-red { background: #f6dcd8; color: #a3281b; }
.ov-needs-empty { margin: 0; color: var(--ink-2, #5a5a6e); font-size: .92rem; }

/* ── Your serve requests (docs/PLAN-overview-serve-requests.md) ─────── */
/* The card is serve-requests.js's — the volunteer home's markup and
   `vh-*` classes — drawn here in the overview's own tokens. */
/* ── Registrations (2026-10-03) — the card's own vocabulary
   (registrations-card.js: dc-tiles / dc-attn / vo-days / rgc-*), drawn
   here in the overview's tokens the way the serve card's vh-* are. The
   Inbox section (2026-10-08, inbox-card.js) shares the same vocabulary. */
.ov-registrations .dc-attn-head, .ov-inbox .dc-attn-head { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2, #5a5a6e); margin: 10px 0 2px; }
.ov-registrations .dc-attn-row, .ov-inbox .dc-attn-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border, rgba(26,26,46,.08)); font-size: .92rem; }
.ov-registrations .dc-attn-name, .ov-inbox .dc-attn-name { color: var(--ink, #1a1a2e); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ov-registrations .dc-attn-step, .ov-inbox .dc-attn-step { font-size: .82rem; color: var(--ink-2, #5a5a6e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.ov-registrations .vo-days, .ov-inbox .vo-days { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: rgba(26,26,46,.08); color: var(--ink, #1a1a2e); }
.ov-registrations .vo-days.warn, .ov-inbox .vo-days.warn { background: #f6e7cc; color: #8a5300; }
.ov-registrations .vo-empty, .ov-inbox .vo-empty { margin: 6px 0 0; color: var(--ink-2, #5a5a6e); font-size: .92rem; }
.ov-registrations .rgc-row, .ov-inbox .rgc-row { text-decoration: none; color: inherit; }
.ov-registrations .rgc-row:hover .dc-attn-name, .ov-inbox .rgc-row:hover .dc-attn-name { text-decoration: underline; }
.ov-inbox .ibxc-row { text-decoration: none; color: inherit; }
.ov-inbox .ibxc-row:hover .dc-attn-name { text-decoration: underline; }
.ov-inbox .ibxc-when { font-size: .78rem; color: var(--ink-2, #5a5a6e); margin-left: auto; white-space: nowrap; }
.ov-inbox .ibxc-more { margin: 6px 0 0; color: var(--ink-2, #5a5a6e); font-size: .86rem; }
/* The three tiles sit in a row like the card's; they stacked on day one
   because cards.css (which draws .dc-tiles.three) is not loaded here. */
.ov-inbox .stat-tiles.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .ov-inbox .stat-tiles.three { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .ov-inbox .ibxc-row { min-height: 44px; } }
.ov-registrations .rgc-row-stack, .ov-inbox .rgc-row-stack { flex-direction: column; align-items: stretch; gap: 3px; }
.ov-registrations .rgc-line, .ov-inbox .rgc-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ov-registrations .rgc-line .dc-attn-step, .ov-inbox .rgc-line .dc-attn-step { white-space: normal; overflow: visible; text-overflow: clip; flex: 1 1 auto; max-width: none; }
.ov-registrations .rgc-date, .ov-inbox .rgc-date { font-size: .82rem; color: var(--ink-2, #5a5a6e); white-space: nowrap; }
.ov-registrations .rgc-bar, .ov-inbox .rgc-bar { height: 5px; border-radius: 999px; background: rgba(26,26,46,.1); overflow: hidden; margin-top: 2px; }
.ov-registrations .rgc-bar > span, .ov-inbox .rgc-bar > span { display: block; height: 100%; background: var(--accent, #1f4e5f); }
.ov-registrations .rgc-bar.is-full > span, .ov-inbox .rgc-bar.is-full > span { background: var(--error, #c0392b); }
.ov-serve .vh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ov-serve .vh-req { background: var(--bg-card, #faf8f5); border: 1px solid var(--border, rgba(26,26,46,.1)); border-radius: var(--radius, 12px); padding: 12px 14px; }
.ov-serve.has-open .vh-req { border-color: rgba(31,78,95,.35); }
.ov-serve .vh-req-when { font-family: var(--font-serif, 'Lora', Georgia, serif); font-weight: 600; font-size: 1.02rem; margin: 0; }
.ov-serve .vh-req-what { margin: 2px 0 10px; color: var(--ink-2, #5a5a6e); font-size: .9rem; }
.ov-serve .vh-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* The serve card's buttons carry BOTH .door-btn (the volunteer home's doorway.css)
   and .rui-btn (this page's revival-ui.css); each page draws the one sheet it loads. */
.ov-serve .vh-link:focus-visible { outline: 2px solid var(--accent-2, #d8a04a); outline-offset: 2px; }
.ov-serve .vh-reason { margin-top: 10px; }
.ov-serve .vh-reason label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; text-transform: none; letter-spacing: normal; }
.ov-serve .vh-reason textarea { width: 100%; min-height: 72px; padding: 9px 11px; border: 1px solid var(--border, rgba(26,26,46,.14)); border-radius: 10px; font: inherit; font-size: .95rem; resize: vertical; background: #fff; }
.ov-serve .vh-done { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: .9rem; }
.ov-serve .vh-done.is-green { background: #e3f1e6; color: #1f5a2d; }
.ov-serve .vh-done.is-amber { background: #f6e7cc; color: #8a5300; }
.ov-serve .vh-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent, #1f4e5f); cursor: pointer; text-decoration: underline; }
.ov-serve-line, .ov-serve-next { margin: 0; color: var(--ink-2, #5a5a6e); font-size: .92rem; }
.ov-serve-next b { color: var(--ink, #1a1a2e); }

/* ── Work row — the queue, and a rail beside it (build step 4) ───────── */
/* The queue panel, with This Sunday / Coming up / Recent activity as
   panels UNDER it (one column — no right-hand rail, 2026-10-06). */
.ov-work { display: flex; flex-direction: column; gap: 20px; }
.ov-work-side:empty { display: none; }
/* Queue filters (step 2): Mine/Team segmented control, then the source pills. */
.ov-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.ov-queue .ov-section-head { align-items: center; flex-wrap: wrap; }
.ov-queue .ov-section-head .ov-scope { margin-left: auto; flex: 0 0 auto; }
.ov-pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* The count pills are .rui-btn (2026-10-11): a filter that names its count.
   The pill shape and the pressed / unreachable states ride the shared class. */
.ov-pill-btn.rui-btn { gap: 6px; border-radius: 999px; white-space: nowrap; }
.ov-pill-btn.rui-btn[aria-pressed="true"] { border-color: var(--accent, #1f4e5f); background: rgba(31,78,95,.1); color: var(--accent, #1f4e5f); }
.ov-pill-btn.rui-btn.is-down { color: #8a5300; border-style: dashed; }
.ov-pill-btn.rui-btn.is-off { color: var(--ink-2, #5a5a6e); border-style: dashed; background: none; cursor: not-allowed; }
.ov-pill-n { font-weight: 700; font-size: .76rem; min-width: 18px; padding: 0 5px; border-radius: 999px; background: rgba(26,26,46,.08); text-align: center; }
.ov-pill-btn.rui-btn[aria-pressed="true"] .ov-pill-n { background: var(--accent, #1f4e5f); color: #fff; }
.ov-sort { margin: 8px 2px 0; font-size: 12.5px; color: var(--ink-2, #5a5a6e); }
.ov-pager.pager { justify-content: space-between; padding-top: 8px; border-top: 1px solid #f0ece5; }
.ov-queue > .ov-rows { border-top: 1px solid #f0ece5; }
/* The record panel (step 4): its body inside the shared detail pane — the frame, head and ✕ are `.detail-pane` in style.css. */
.ov-panel-dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: .92rem; }
.ov-panel-dl dt { color: var(--ink-2, #5a5a6e); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding-top: 3px; }
.ov-panel-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ov-panel-wait { color: var(--ink-2, #5a5a6e); font-size: .86rem; margin-left: 6px; }
.ov-panel-summary { white-space: pre-line; }
.ov-panel-ro { margin: 16px 0 10px; font-size: .8rem; color: var(--ink-2, #5a5a6e); }
.ov-panel-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ov-panel-acts .rui-btn { width: 100%; justify-content: center; }
.ov-panel-pco { font-size: .86rem; }
.ov-tabs { display: flex; gap: 4px; margin: 0 0 8px; border-bottom: 1px solid var(--border, rgba(26,26,46,.1)); }
.ov-tab { font: inherit; font-size: .86rem; font-weight: 600; padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2, #5a5a6e); cursor: pointer; }
.ov-tab[aria-selected="true"] { color: var(--accent, #1f4e5f); border-bottom-color: var(--accent, #1f4e5f); }
.ov-tab-n { font-weight: 500; opacity: .8; }
.ov-showing.chip { margin-left: auto; }   /* showingChipHtml (utils.js) */
.ov-start { margin-left: 0; }
.ov-rows { list-style: none; margin: 0; padding: 0; }
.ov-row { display: grid; grid-template-columns: 96px minmax(140px, 1.5fr) minmax(100px, 1fr) minmax(100px, 1.1fr) auto auto; gap: 10px; align-items: center; padding: 12px 18px; border-top: 1px solid #f0ece5; font-size: 14px; }
.ov-row:first-child { border-top: 0; }
.ov-row-tag { min-width: 0; }
.ov-row-tag .ov-tag { margin-right: 0; }
.ov-row-who { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-row-who a { color: inherit; }
.ov-row-who a:hover { text-decoration: underline; }
.ov-row-area a { color: var(--ink-2, #5a5a6e); }
.ov-row-area a:hover { color: var(--accent, #1f4e5f); text-decoration: underline; }
.ov-row-step { color: var(--ink-2, #5a5a6e); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Part 3b: a row's meta (an intake row's reminders) — text under the step. */
.ov-row-meta { display: block; font-size: 12px; color: var(--ink-2, #5a5a6e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-queue-empty { margin: 10px 2px 8px; color: var(--ink-2, #5a5a6e); }
.ov-src-warn { margin: 0 0 8px; font-size: .84rem; color: #8a5300; }
.ov-link { font: inherit; font-size: inherit; border: 0; background: none; color: var(--accent, #1f4e5f); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
/* Queue pages (2026-10-09): 15 rows a page unless the view sets its own. */
.ov-page-info { text-align: center; }

/* ── Key numbers ──────────────────────────────────────────────────── */
/* ── Loading + page error (2026-10-05) ───────────────────────────────
   While /api/overview is on its way every data section draws a skeleton,
   so a slow answer never looks like a finished, empty page. A failed
   answer draws ONE page-level error with Try again, in role and preset
   layouts alike. */
.ov-page-err { margin: 0 0 22px; background: var(--bg-raised, #fff); border: 1px solid rgba(163,40,27,.35); border-radius: var(--radius, 12px); color: var(--ink, #1a1a2e); }
.ov-page-err[hidden] { display: none; }
.ov-skel-sec .ov-skel-host { min-height: 48px; }
.ov-skel-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ov-skel-card { padding: 14px 16px; background: var(--bg-raised, #fff); border: 1px solid #e3ddd3; border-radius: 12px; }
.ov-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ov-num { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--bg-raised, #fff); border: 1px solid #e3ddd3; border-radius: 12px; box-shadow: 0 1px 2px rgba(26,26,46,.05); color: var(--ink, #1a1a2e); text-decoration: none; }
.ov-num.is-tone-red { box-shadow: inset 3px 0 0 #b42318, 0 1px 2px rgba(26,26,46,.05); }
.ov-num.is-tone-amber { box-shadow: inset 3px 0 0 var(--warn, #9a5800), 0 1px 2px rgba(26,26,46,.05); }
a.ov-num:hover { border-color: var(--accent, #1f4e5f); }
a.ov-num:focus-visible { outline: 2px solid var(--accent-2, #d8a04a); outline-offset: 2px; }
.ov-num-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #5a5a6e); }
.ov-num-value { font-family: var(--font-serif, 'Lora', Georgia, serif); font-size: 28px; font-weight: 600; line-height: 1.15; margin: 4px 0 2px; }
.ov-num-note { font-size: 12.5px; color: var(--ink-2, #5a5a6e); }
.ov-num-note.is-amber { color: #8a5300; font-weight: 600; }
.ov-num-note.is-red { color: #a3281b; font-weight: 600; }
.ov-num-note.is-unknown { color: #8a5300; font-style: italic; }

/* ── Right rail ────────────────────────────────────────────────────── */
.ov-work-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: start; }
.ov-side-link { font-size: .8rem; font-weight: 600; color: var(--accent, #1f4e5f); }
.ov-side-link:hover { text-decoration: underline; }
.ov-side-sub { font-size: .76rem; color: var(--ink-2, #5a5a6e); }
.ov-side-warn { margin: 0; font-size: .84rem; color: #8a5300; }
.ov-side-ok { margin: 0; font-size: .86rem; color: var(--ink-2, #5a5a6e); }
.ov-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(26,26,46,.08); }
.ov-bar-c { background: var(--accent, #1f4e5f); }
.ov-bar-p { background: #d8a04a; }
.ov-bar-d { background: #a3281b; }
.ov-bar-key { list-style: none; display: flex; gap: 12px; margin: 6px 0 10px; padding: 0; font-size: .8rem; color: var(--ink-2, #5a5a6e); }
.ov-bar-key b { color: var(--ink, #1a1a2e); }
.ov-thin { list-style: none; margin: 0; padding: 0; }
.ov-thin li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center; font-size: 14px; }
.ov-thin-room { grid-column: 2; grid-row: 1; }
.ov-thin-svc { grid-column: 2; grid-row: 2; font-size: .76rem; color: var(--ink-2, #5a5a6e); }
.ov-thin-n { grid-column: 3; grid-row: 1 / span 2; font-weight: 700; font-size: .8rem; white-space: nowrap; }
.ov-dot { width: 10px; height: 10px; border-radius: 50%; grid-column: 1; grid-row: 1 / span 2; background: #d8a04a; }
.ov-dot.is-red { background: #a3281b; }
.ov-dot.is-green { background: var(--accent, #1f4e5f); }
.ov-coming, .ov-recent { list-style: none; margin: 0; padding: 0; }
.ov-recent-row { display: flex; flex-direction: column; font-size: 14px; }
.ov-coming-row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.ov-coming-text { display: flex; flex-direction: column; min-width: 0; }
/* The date block: month eyebrow over the day number. */
.ov-dblk { flex: none; width: 38px; text-align: center; line-height: 1.1; }
.ov-dblk-m { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #5a5a6e); }
.ov-dblk b { font-size: 17px; color: var(--ink, #1a1a2e); }
.ov-coming-when, .ov-recent-when { font-size: 12.5px; color: var(--ink-2, #5a5a6e); }
.ov-coming-row.is-today .ov-coming-when { color: var(--accent, #1f4e5f); font-weight: 700; }
.ov-coming-name, .ov-recent-who { font-weight: 600; }
.ov-coming-where, .ov-recent-text { font-size: .8rem; color: var(--ink-2, #5a5a6e); }

/* ── Notifications bell (top bar) ─────────────────────────────────── */
.ov-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--ink-2, #5a5a6e); flex: none; margin-left: auto; text-decoration: none; }
.ov-bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ov-bell:hover { background: rgba(26,26,46,.07); color: var(--ink, #1a1a2e); }
.ov-bell:focus-visible { outline: 2px solid var(--accent-2, #d8a04a); outline-offset: 1px; }
.ov-bell-n { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #a3281b; color: #fff; font-size: .66rem; font-weight: 700; line-height: 16px; text-align: center; }
body[data-app-shell] .app-navslot .ov-bell { margin-left: auto; }
/* The row's tap overlay — a phone-only control, inert on desktop. */
.ov-row { position: relative; }
.ov-row-tap { display: none; }

/* ── Phone tab bar ────────────────────────────────────────────────── */
.ov-start-fab { display: none; }

@media (pointer: coarse) { .ov-tile, .ov-main, .ov-chip, .ov-tab, .ov-side-link, a.ov-num, .ov-customize, .ov-custom-check, .ov-serve .vh-link { min-height: 44px; } .ov-bell { width: 44px; height: 44px; } }
/* The rest of the home's controls at 360px on a touch phone (2026-10-13, the
   `Overview at 360px` describe in overview.spec.js — every built-in view):
   · a queue row's name and area links were 18px. The whole row is already a
     tap onto the record (.ov-row-tap), so a small link on top of it is the
     easiest place to land on the wrong thing. Each is a 44px block; a block,
     never inline-flex, so the name keeps its ellipsis in the nowrap cell, and
     never a ::after hit area, which the cell's overflow:hidden would clip.
   · .ov-link (Try again, Communications settings) and the link inside an
     empty state's sentence grow the line box, as .pap-change does.
   · a Registrations / Inbox row that is a link is a 44px row — cards.css's
     rule for the same row is not on this page unless a card is placed. */
@media (pointer: coarse) {
  .ov-row-who > a, .ov-row-area > a {
    display: block; min-height: 44px; min-width: 44px; line-height: 44px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ov-link, .ov-empty a { display: inline-flex; align-items: center; min-height: 44px; }
  .ov-registrations a.dc-attn-row, .ov-inbox a.dc-attn-row { min-height: 44px; }
}
/* The queue's stacked layout, keyed on the QUEUE's own width (2026-10-07):
   a narrow queue — a phone, or a Compact queue on a big monitor — reads
   tag · who · days on one line, then area and step under the name, with
   the action at the right. */
@container (max-width: 640px) {
  .ov-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ov-row-tag { grid-row: 1; grid-column: 1; }
  .ov-row-who { grid-row: 1; grid-column: 2; }
  .ov-row-days { grid-row: 1; grid-column: 3; }
  .ov-row-area { grid-row: 2; grid-column: 2; }
  .ov-row-step { grid-row: 3; grid-column: 2; }
  .ov-row-act { grid-row: 2 / span 2; grid-column: 3; justify-self: end; }
}
@media (max-width: 900px) {
  .page { padding: 18px 16px 60px; }
  .ov-greet-acts { width: 100%; flex-wrap: wrap; }
  .ov-main { flex: 1 1 100%; }
  .ov-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  a.ov-chip.stat-tile { min-height: 48px; }
  .ov-serve .vh-btn.rui-btn { min-height: 48px; flex: 1 1 auto; }
  /* Queue rows on a phone: the whole row opens the record, no inline
     action. (The stacked LAYOUT is the container query above — the
     queue is narrow here — this only adds what is about the device.) */
  .ov-row { min-height: 56px; padding: 10px 16px; }
  .ov-row-area, .ov-row-step { grid-column: 2 / -1; }
  .ov-row-act { display: none; }
  .ov-row-tap { display: block; position: absolute; inset: 0; z-index: 1; }
  .ov-row-who, .ov-row-area { position: relative; z-index: 2; width: fit-content; }
  /* This Sunday: the bar and the one thinnest room. */
  .ov-thin li:nth-child(n+2) { display: none; }
  body[data-app-shell] .app-header.app-topbar .ov-bell { display: inline-flex; }
  /* Queue filters: Mine/Team stays in the header, the pills scroll sideways. */
  .ov-filters { flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .ov-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
  .ov-pills::-webkit-scrollbar { display: none; }
  /* One Start per layout: the header's hides, the floating one shows. */
  .ov-start { display: none; }
  .ov-start-fab { display: inline-flex; align-items: center; gap: 6px; position: fixed; right: 16px; bottom: calc(56px + 14px + env(safe-area-inset-bottom, 0px)); z-index: 106; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent, #1f4e5f); color: #fff; font: inherit; font-size: .95rem; font-weight: 700; box-shadow: 0 8px 22px rgba(31,78,95,.35); cursor: pointer; }
  .ov-start-fab[hidden] { display: none; }
  .ov-start-fab:focus-visible { outline: 2px solid var(--accent-2, #d8a04a); outline-offset: 2px; }
}
/* Placed dashboard cards (overview-cards.js) — the cards keep their own
   look from dashboard/cards.css. They are Half by default and take a cell
   of the shared .ov-grid like every other section (2026-10-11). */
.ovc-sec[hidden] { display: none; }
/* The cards are drawn for /cards.html's 14px root: inherited text and
   their --card-rem sizes (dashboard/cards.css) use 14px here too. */
.ovc-slot { font-size: 14px; --card-rem: 14px; }
.ovc-slot > .action-card { margin: 0; height: 100%; }

/* ── The Director overview (2026-10-13) — role-class layout only; the looks
   are the shared pieces (.owner-group, .count-row, .data-table, .pos-meter,
   .link-tile, .stat-tile, .pill). */
.ovd-list, .ovd-groups { margin: 0; padding: 4px 0 12px; list-style: none; }
.ovd-rows { padding: 2px 0 10px; }
.ov-box .ovd-none { padding: 12px 0 14px; }
.ovd-scroll.data-table-scroll { margin: 8px 18px 14px; }
.data-table .ovd-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ovd-meter.pos-meter { min-width: 140px; }
.ovd-mins { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 12px 0 16px; }
.ovd-min.link-tile { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 96px; }
.ovd-min.link-tile.is-hot { border-color: #e3a79f; background: #fcf3f1; }
.ovd-min-name { font-family: var(--font-serif, 'Lora', Georgia, serif); font-size: 16px; font-weight: 600; }
.ovd-min-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ovd-tiles.stat-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 12px 0 2px; }
a.ovd-tile.stat-tile { text-decoration: none; }