/*
  Aegis Platform Shell
  Structural layout (fixed sidebar + topbar) themed entirely through brand CSS variables.
  The app sets --brand-primary / --brand-secondary / --brand-accent per tenant; everything
  else derives from those, so re-theming a tenant is just three values.
*/

:root {
  --brand-primary: #7d7350;
  --brand-secondary: #3f3a2e;
  --brand-accent: #3e8fa8;

  --shell-sidebar-width: 256px;
  --shell-topbar-height: 56px;
  --shell-surface: #ffffff;
  --shell-surface-2: #f5f4f0;
  --shell-border: rgba(0, 0, 0, 0.08);
  --shell-sidebar-fg: rgba(255, 255, 255, 0.82);
  --shell-sidebar-fg-active: #ffffff;
}

html, body { height: 100%; }
body { margin: 0; background: var(--shell-surface-2); }

.app-shell { display: flex; min-height: 100vh; min-width: 0; }

/* Sidebar — offcanvas on mobile, fixed on lg+ */
.app-sidebar {
  width: var(--shell-sidebar-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--brand-secondary) !important;  /* beat Bootstrap .offcanvas-lg transparent !important at lg+ */
  color: var(--shell-sidebar-fg);
}
.app-sidebar .offcanvas-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; }

.app-sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1rem .9rem;
  /* no border-bottom — clean logo area */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
}
.app-sidebar-brand img {
  max-height: 40px;
  max-width: 160px;
  width: auto;
  display: block;
  background: #fff;
  padding: 5px 10px;
  border-radius: 7px;
}
.app-sidebar-brand .brand-text {
  font-size: .78rem;
  opacity: .55;
  margin-top: .35rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.app-sidebar-nav { padding: .75rem .5rem; overflow-y: auto; flex: 1 1 auto; }
.app-nav-section {
  padding: .9rem .85rem .35rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.45);
}
.app-nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .85rem;
  margin: .1rem 0;
  border-radius: .5rem;
  color: var(--shell-sidebar-fg);
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.2;
  transition: background-color .12s ease, color .12s ease;
}
.app-nav-link .bi { font-size: 1.05rem; opacity: .9; width: 1.2rem; text-align: center; }
.app-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: var(--shell-sidebar-fg-active); }
.app-nav-link.is-active {
  background: var(--brand-primary);
  color: var(--shell-sidebar-fg-active);
  font-weight: 600;
}

/* Main column */
.app-main { min-height: 100vh; min-width: 0; display: flex; flex-direction: column; width: 100%; background: var(--shell-surface-2); }

/* Topbar */
.app-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--shell-topbar-height);
  z-index: 1030;
  display: flex;
  align-items: center;
  background: var(--brand-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.app-topbar .topbar-title { font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.app-topbar .btn-outline-secondary { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.3); }
.app-topbar .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Content offset for the fixed topbar */
.app-main-content {
  flex: 1 0 auto;
  min-width: 0;
  padding-top: calc(var(--shell-topbar-height) + 1.25rem);
  padding-bottom: 1.5rem;
}

.app-footer { flex-shrink: 0; color: #6b7280; }

/* User menu button */
.app-user-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: .25rem .75rem .25rem .35rem;
  color: #fff;
}
.app-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}

/* Accent helpers reused by pages */
.text-brand { color: var(--brand-secondary) !important; }
.bg-brand { background-color: var(--brand-primary) !important; color: #fff; }

/* Brand button — explicit states so text stays white and feedback is visible on
   hover AND active/click. Without an :active override, Bootstrap's base .btn:active
   rule reverts a custom button to dark-text/transparent (invisible on click). */
.btn-brand { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-brand:hover { background-color: var(--brand-secondary); border-color: var(--brand-secondary); color: #fff; }
.btn-brand:focus,
.btn-brand:focus-visible { color: #fff; box-shadow: 0 0 0 .25rem rgba(125, 115, 80, .45); }
.btn-brand:active,
.btn-brand:first-child:active,
.btn-brand.active,
.btn-brand.show,
.btn-brand:active:focus {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #fff !important;
}
.btn-brand:disabled,
.btn-brand.disabled { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; opacity: .6; }
.badge-brand-accent { background-color: var(--brand-accent); color: #fff; }

/* Keep outline buttons legible on hover/active everywhere (defensive: white text on fill). */
.btn-outline-secondary:hover, .btn-outline-secondary:active,
.btn-outline-primary:hover, .btn-outline-primary:active,
.btn-outline-success:hover, .btn-outline-success:active,
.btn-outline-danger:hover, .btn-outline-danger:active { color: #fff !important; }

/* ── Accordion nav sections ───────────────────────────────────────────────── */
/* Section header is now a toggle button */
.app-nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .9rem .85rem .35rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .12s;
  line-height: 1.2;
}
.app-nav-section-toggle:hover { color: rgba(255, 255, 255, 0.7); }
.app-nav-section-toggle .chevron {
  font-size: .75rem;
  transition: transform .2s ease;
  opacity: .6;
}
.app-nav-section-toggle[aria-expanded="false"] .chevron { transform: rotate(-90deg); }

/* ── Topbar search ────────────────────────────────────────────────────────── */
.topbar-search {
  flex: 0 1 280px;
  min-width: 0;
}
.topbar-search .form-control {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: .88rem;
  padding: .3rem .75rem .3rem 2rem;
  border-radius: 999px;
  height: 34px;
  transition: background .15s, border-color .15s;
}
.topbar-search .form-control::placeholder { color: rgba(255,255,255,.45); }
.topbar-search .form-control:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  color: #fff;
  outline: none;
}
.topbar-search-icon {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.45);
  font-size: .85rem;
  pointer-events: none;
}

/* ── Dropdown menu — explicit colours to prevent white-on-white ───────────── */
.dropdown-menu {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-color: #1f2937;
  --bs-dropdown-link-color: #1f2937;
  --bs-dropdown-link-hover-bg: #f3f4f6;
  --bs-dropdown-link-hover-color: #111827;
  background-color: #ffffff !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  border: 1px solid #e5e7eb;
}
.dropdown-menu .dropdown-item { color: #1f2937 !important; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background-color: #f3f4f6 !important; color: #111827 !important; }
.dropdown-menu .dropdown-divider { border-color: #e5e7eb; }
/* Undo the global white-text-on-hover rule INSIDE dropdowns only */
.dropdown-menu .btn-outline-secondary:hover,
.dropdown-menu .btn-outline-secondary:active { color: #374151 !important; }

/* ── Breadcrumb bar at top of content ────────────────────────────────────── */
.page-breadcrumb {
  margin-bottom: 1rem;
}
.page-breadcrumb .breadcrumb { margin: 0; }
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #9ca3af; }
.page-breadcrumb .breadcrumb-item a { color: #6b7280; }
.page-breadcrumb .breadcrumb-item.active { color: #374151; font-weight: 500; }

/* Desktop: pin sidebar, offset main + topbar */
@media (min-width: 992px) {
  .app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; transform: none !important; visibility: visible !important; background: var(--brand-secondary) !important; }
  .app-main { margin-left: var(--shell-sidebar-width); }
  .app-topbar { left: var(--shell-sidebar-width); }
}

/* ════════════════════════════════════════════════════════════════════════════
   SIDEBAR AUTO-COLLAPSE — host-chrome seam (Harbor Clinical workspace-nav frame,
   Tranche A; docs/harbor/clinical/chart-nav-flow.md §3).

   Owner rule: "collapse the main left nav when there is a second vertical left
   nav." A page DECLARES "I mount my own vertical rail" via
   ViewData["Aegis.Harbor.MountsOwnRail"]=true (see _Layout.cshtml); the layout
   turns that into body.sidebar-collapsed. ONLY the host-chrome layout applies
   the collapse — pages never ship their own collapse CSS/JS.

   This block is intentionally GENERIC (no Harbor-specific selectors) so it can
   be reused verbatim by a second workspace's own "mounts own rail" surface
   without any change here — only that surface's page sets the same ViewData
   flag. The per-app SIDEBAR-WIDTH override (the actual px value to collapse
   TO/FROM) lives in each host's own site.css, next to wherever that host
   already defines its sidebar-width custom property (Bridge: --sb-w in
   samples/Aegis.Platform.Bridge/wwwroot/css/site.css) — this file only
   declares the STRUCTURAL collapse behavior (icon-only cards, hidden labels,
   the overlay expand affordance), not the width numbers themselves.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --shell-sidebar-collapsed-width: 60px;
}

/* Icon-only card treatment — hides text labels, centers icons, turns section
   headers into thin separators. Scoped so a host's OWN sidebar item markup
   (whatever class names it uses for the label/icon/section-header) picks this
   up automatically as long as it follows the same rough shape every existing
   Bridge sidebar item already has: an icon + a text label as siblings. */
@media (min-width: 992px) {
  body.sidebar-collapsed .app-sidebar-brand .brand-text,
  body.sidebar-collapsed .sb-logo-text,
  body.sidebar-collapsed .app-nav-link span:not(.bi),
  body.sidebar-collapsed .sb-item span:not(.bi),
  body.sidebar-collapsed .sb-label,
  body.sidebar-collapsed .sb-footer .sb-footer-links,
  body.sidebar-collapsed .sb-footer > span,
  body.sidebar-collapsed .sb-workspace-settings span,
  body.sidebar-collapsed .app-nav-section,
  body.sidebar-collapsed .app-nav-section-toggle span:not(.chevron),
  body.sidebar-collapsed .app-nav-section-toggle .chevron {
    display: none;
  }
  body.sidebar-collapsed .app-sidebar-brand,
  body.sidebar-collapsed .sb-logo {
    justify-content: center;
    padding-left: 6px;
    padding-right: 6px;
  }
  body.sidebar-collapsed .app-nav-link,
  body.sidebar-collapsed .sb-item,
  body.sidebar-collapsed .sb-workspace-settings {
    justify-content: center;
    padding-left: 6px;
    padding-right: 6px;
  }
  /* .sb-section is the ITEM CONTAINER in the Bridge shell (a .sb-label header followed by the
     section's .sb-item links) — NEVER squash the container itself: doing so hid the entire nav
     behind two 1px lines (live defect 2026-07-05, "empty sidebar"). The prototype's separator
     treatment belongs on the HEADER: the .sb-label collapses to a hairline group divider. */
  body.sidebar-collapsed .sb-section {
    padding: 0;
    margin: 2px 0;
  }
  body.sidebar-collapsed .sb-section > .sb-label {
    display: block;
    height: 1px;
    padding: 0;
    margin: 10px 10px 9px;
    background: rgba(255, 255, 255, 0.10);
    font-size: 0;
    overflow: hidden;
  }

  /* Bottom expand affordance — hidden unless collapsed; a label wired to the
     hidden checkbox in _Layout.cshtml so the toggle needs no page-local JS.
     `position: fixed` + docked to the collapsed sidebar's own width/bottom so
     it always sits at the foot of the (fixed) sidebar regardless of content
     scroll. */
  .sb-expand-toggle {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: var(--shell-sidebar-collapsed-width);
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    background: rgba(0, 0, 0, 0.14);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    z-index: 101; /* above the collapsed sidebar (100), below the pinned-open overlay state (150) */
  }
  .sb-expand-toggle:hover { background: rgba(0, 0, 0, 0.24); color: #fff; }
  .sb-expand-toggle .sb-expand-label { display: none; } /* icon-only in the collapsed rail itself */
  body.sidebar-collapsed .sb-expand-toggle { display: flex; }
  .sb-expand-toggle-input { position: absolute; opacity: 0; pointer-events: none; }

  /* Checked state (the hidden checkbox) — pin the sidebar OPEN as a scrimmed OVERLAY (never a push
     reflow: .app-main / .app-topbar keep their COLLAPSED offset the whole time — see the "PINNED-OPEN
     case" note in each host's own site.css for why the sidebar-width variable deliberately does NOT
     change here; only the sidebar's own box widens and gains elevation, floating ABOVE the content that
     never moved). The actual expanded-width VALUE is a direct .app-sidebar width override in each host's
     own site.css (Bridge: samples/Aegis.Platform.Bridge/wwwroot/css/site.css) reacting to the SAME
     :has(#sb-expand-toggle-input:checked) selector — this rule only adds elevation/stacking, not a
     hardcoded width, so it stays host-width-agnostic. */
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .app-sidebar {
    box-shadow: 2px 0 24px rgba(0, 0, 0, .28);
    z-index: 150;
  }
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .app-sidebar-brand .brand-text,
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-logo-text,
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .app-nav-link span:not(.bi),
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-item span:not(.bi),
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-label,
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-footer .sb-footer-links,
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-footer > span,
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-workspace-settings span {
    display: initial;
  }
  /* the collapsed hairline-separator treatment on .sb-label reverses fully when pinned open */
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-section > .sb-label {
    height: auto;
    font-size: revert;
    background: none;
    overflow: visible;
    margin: revert;
    padding: revert;
  }
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .app-sidebar-brand,
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-logo,
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .app-nav-link,
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-item,
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-workspace-settings {
    justify-content: flex-start;
    padding-left: 18px;
    padding-right: 18px;
  }
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-expand-toggle {
    justify-content: flex-start;
    padding-left: 18px;
    width: 232px;
  }
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-expand-toggle .sb-expand-label { display: inline; }
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-expand-toggle i { transform: rotate(180deg); }

  /* Scrim — click-out to close; only present (clickable) while pinned open. */
  .sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23, 43, 77, .22);
    z-index: 140;
    cursor: default;
  }
  body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sidebar-scrim { display: block; }
}

/* Below 992px the offcanvas sidebar already takes over the full mobile nav pattern (unrelated to this
   seam) — the collapse rule is a desktop-only ("second vertical nav" only exists at desktop widths where
   the sidebar renders inline) concern, so nothing here needs a narrow-viewport variant. */

/* ════════════════════════════════════════════════════════════════════════════
   V2-R5 CANON WORKFLOW STRIP — promoted to production 2026-06-10
   Owner-approved per Prototype Protocol; canon source files:
     - ~/Aegis/Prototypes/Bridge/Harbor/patients/v1-canon.html
     - ~/Aegis/Prototypes/Bridge/Harbor/intake/v1-canon.html
     - ~/Aegis/Code/Aegis.Platform/Prototypes/Bridge/workspace-shell-crm/v1-canon.html
   The strip sits below the topbar when the active workspace exposes workflows.
   Tabs derive their active accent from --brand-accent (tenant theming wins).
   The structural sidebar navy / strip height / 48-px rhythm are the canon's
   structural contract and are NOT tenant-overridable.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --canon-workflow-strip-height: 48px;
  --canon-workflow-active: var(--brand-accent, #0052cc);
  --canon-workflow-fg: #5e6c84;
  --canon-workflow-fg-hover: #172b4d;
  --canon-workflow-border: #e8eaed;
  --canon-workflow-strip-bg: #ffffff;
}

.app-workflow-strip {
  position: fixed;
  top: var(--shell-topbar-height);
  left: 0;
  right: 0;
  height: var(--canon-workflow-strip-height);
  background: var(--canon-workflow-strip-bg);
  border-bottom: 1px solid var(--canon-workflow-border);
  z-index: 1020; /* below topbar (1030), above sidebar offcanvas backdrop */
  display: flex;
  align-items: stretch;
  padding: 0 22px 0 22px;
}
.app-workflow-strip .workflow-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 0 0 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-workflow-strip .workflow-tabs::-webkit-scrollbar { display: none; }
.app-workflow-strip .workflow-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  text-decoration: none;
  color: var(--canon-workflow-fg);
  font-size: 13px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.app-workflow-strip .workflow-tab:hover { color: var(--canon-workflow-fg-hover); }
.app-workflow-strip .workflow-tab.is-active {
  color: var(--canon-workflow-active);
  border-bottom-color: var(--canon-workflow-active);
  font-weight: 600;
}
.app-workflow-strip .workflow-tab.is-disabled {
  color: #adb5bd;
  pointer-events: none;
  cursor: not-allowed;
}
.app-workflow-strip .workflow-tab i {
  font-size: 14px;
  line-height: 1;
}
/* Global per-tab count badge + red alert LED (canon: Prototypes/Bridge/Harbor/attendance/v2-canon.html).
   Generic to every workspace — populated by IWorkflowTabBadgeProvider via PlatformShellNavComposer. */
.workflow-tab .count-badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#dee2e6;color:#5e6c84;font-size:11px;font-weight:700;text-align:center;line-height:18px;margin-left:2px;}
.workflow-tab.is-active .count-badge{background:var(--workflow-active,#0052cc);color:#fff;}
.workflow-tab .alert-dot{width:6px;height:6px;border-radius:50%;background:#dc3545;margin-left:2px;display:inline-block;}
.app-workflow-strip .workflow-strip-spacer { flex: 1 1 auto; }
.app-workflow-strip .workflow-settings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 12px;
  color: var(--canon-workflow-fg);
  text-decoration: none;
  border-left: 1px solid var(--canon-workflow-border);
  white-space: nowrap;
  transition: color .12s, background .12s;
}
.app-workflow-strip .workflow-settings:hover {
  color: var(--canon-workflow-fg-hover);
  background: #f8f9fa;
}
.app-workflow-strip .workflow-settings.is-active {
  color: var(--canon-workflow-active);
  font-weight: 600;
}
.app-workflow-strip .workflow-settings i { font-size: 14px; }

/* Content offset — when the strip is present in the layout, body gets .has-workflow-strip
   and we push the main content area down by the strip's height. Layout opts in by adding
   the class so workspaces WITHOUT a workflow nav (the strip is not rendered) don't get
   the extra padding. */
body.has-workflow-strip .app-main-content {
  padding-top: calc(var(--shell-topbar-height) + var(--canon-workflow-strip-height) + 1.25rem);
}

/* Pin the strip's left edge to the right side of the fixed sidebar on lg+ (matches the
   canon's content/sidebar split). */
@media (min-width: 992px) {
  .app-workflow-strip { left: var(--shell-sidebar-width); }
}

/* Bootstrap nav-tabs (.workspace-tabs in the page header partial) remain as the
   pre-canon back-compat for pages that still render them. When the canon workflow
   strip is active on the body, the in-header tabs collapse to avoid a double row. */
body.has-workflow-strip .workspace-tabs { display: none; }


/* ── V2-R5b: Patients (and future) workspace content patterns ─────────────────
   Promoted verbatim from Prototypes/Bridge/Harbor/patients/v1-canon.html so any
   Bridge.Harbor page can use these classes without inlining. The shell CSS
   (#sidebar / #topbar / #workflow-strip) is intentionally NOT duplicated — that
   already lives above as .app-shell-* / .app-workflow-strip.

   Pattern groups below:
     1. Hand-held guidance prompt strip (.prompt-strip)
     2. Worklist header (.worklist-header)
     3. Smart-default filter pills (.filter-pills / .filter-pill)
     4. Worklist panel + table (.aegis-panel / .aegis-table / .patient-cell …)
     5. Status pills (.pill / .pill-success / .pill-warn / …)
     6. Canned-template smart cards (.smart-prompts / .smart-card)
     7. Reshape design-note callout (.design-note)
   ──────────────────────────────────────────────────────────────────────────── */

/* 1. Standing prompt strip — the "hand-held guidance" surface */
.prompt-strip { display:flex; align-items:center; gap:14px; padding:12px 16px; background:#fff8e1; border-left:4px solid #f4b400; border-radius:6px; margin-bottom:18px; font-size:13px; }
.prompt-strip .pr-icon { font-size:18px; color:#b07900; flex-shrink:0; }
.prompt-strip .pr-text { flex:1; color:#5a4400; }
.prompt-strip .pr-text strong { color:#172b4d; }
.prompt-strip .pr-action { white-space:nowrap; }

/* 2. Worklist header */
.worklist-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.worklist-header h1 { font-size:22px; font-weight:600; margin:0; }
.worklist-header h1 small { font-size:13px; font-weight:400; color:#5e6c84; margin-left:8px; }

/* 3. Smart-default filter pills */
.filter-pills { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.filter-pill { padding:5px 12px; border:1px solid #dee2e6; border-radius:14px; font-size:12px; font-weight:500; color:#5e6c84; background:#fff; cursor:pointer; }
.filter-pill.is-active { background:#172b4d; color:#fff; border-color:#172b4d; }
.filter-pill .pill-count { font-weight:700; opacity:.7; margin-left:4px; }

/* 4. Worklist panel + table */
.aegis-panel { background:#fff; border:1px solid #dee2e6; border-radius:8px; padding:0; margin-bottom:1.5rem; overflow:hidden; }
.aegis-table { width:100%; border-collapse:collapse; }
.aegis-table th, .aegis-table td { padding:.85rem 1rem; border-bottom:1px solid #f0f1f3; font-size:.9rem; vertical-align: middle; }
.aegis-table th { background:#f8f9fa; font-weight:600; color:#5e6c84; font-size:.75rem; text-transform:uppercase; letter-spacing:.4px; text-align:left; }
.aegis-table tr:last-child td { border-bottom:none; }
.aegis-table tr.row-link { cursor:pointer; }
.aegis-table tr.row-link:hover td { background:#fafbfc; }
.patient-cell { display:flex; align-items:center; gap:10px; }
.patient-avatar { width:32px; height:32px; border-radius:50%; background:#e6f0ff; color:#0052cc; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }
.patient-name { font-weight:600; color:#172b4d; line-height:1.2; }
.patient-mrn  { font-size:11px; color:#5e6c84; font-family: ui-monospace, SFMono-Regular, monospace; }

/* 5. Status pills */
.pill { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; line-height:1.4; }
.pill-success { background:#d4edda; color:#155724; }
.pill-warn    { background:#fff3cd; color:#856404; }
.pill-danger  { background:#f8d7da; color:#721c24; }
.pill-info    { background:#e8f0fe; color:#0052cc; }
.pill-muted   { background:#f4f5f7; color:#5e6c84; }
.pill-family  { background:#e6f4ea; color:#0c6b3e; }

/* 6. Canned-template smart cards */
.smart-prompts { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-bottom:24px; }
.smart-card { padding:12px 14px; background:#fff; border:1px solid #dee2e6; border-radius:8px; cursor:pointer; transition: box-shadow .12s; }
.smart-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); border-color:#bcd0ee; }
.smart-card .sc-icon { font-size:18px; color:#0052cc; margin-bottom:6px; }
.smart-card .sc-title { font-weight:600; font-size:13px; color:#172b4d; }
.smart-card .sc-sub   { font-size:12px; color:#5e6c84; margin-top:2px; }

/* 7. Reshape design-note callout */
.design-note { background:#eef2f7; border-left:4px solid #5e6c84; padding:12px 16px; border-radius:6px; margin-top:24px; font-size:12px; color:#3d4f6e; }
.design-note strong { color:#172b4d; }
.design-note code { background:rgba(0,0,0,.06); padding:1px 5px; border-radius:3px; font-size:11px; }

/* ── V2-R5c: Harbor Attendance workspace content patterns ────────────────
   Sourced verbatim (with light comment normalization) from the owner-approved
   canon at ~/Aegis/Prototypes/Bridge/Harbor/attendance/v1-canon.html. Patterns
   shared with Patients (prompt-strip, aegis-panel, patient-cell/avatar/name/mrn,
   pill + pill-*, design-note) are NOT duplicated here — they live above under
   V2-R5b. */

/* 1. Day header + day-nav (prev / today / next / calendar picker). */
.day-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.day-header h1 { font-size:22px; font-weight:600; margin:0; }
.day-header h1 small { font-size:13px; font-weight:400; color:#5e6c84; margin-left:8px; }
.day-nav { display:flex; align-items:center; gap:6px; }
.day-nav button { background:#fff; border:1px solid #dee2e6; padding:4px 10px; border-radius:6px; font-size:13px; }
.day-nav .today { font-weight:600; }

/* 2. KPI row — 5 equal-width metric tiles above the live grid. */
.kpi-row { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin-bottom:18px; }
.kpi { background:#fff; border:1px solid #dee2e6; border-radius:8px; padding:12px 14px; }
.kpi .lab { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:#5e6c84; font-weight:600; }
.kpi .val { font-size:22px; font-weight:700; color:#172b4d; line-height:1.1; margin-top:4px; }
.kpi .sub { font-size:11px; color:#5e6c84; margin-top:3px; }

/* 3. Panel header strip — used by attendance panels with an inline legend. */
.panel-head { padding:12px 16px; border-bottom:1px solid #f0f1f3; display:flex; align-items:center; justify-content:space-between; }
.panel-head h2 { font-size:14px; font-weight:600; margin:0; }

/* 4. Live grid table — tighter than .aegis-table (operator scans many rows/day). */
.grid-table { width:100%; border-collapse:collapse; }
.grid-table th, .grid-table td { padding:.6rem .9rem; border-bottom:1px solid #f0f1f3; font-size:.85rem; vertical-align:middle; }
.grid-table th { background:#f8f9fa; font-weight:600; color:#5e6c84; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; text-align:left; }
.grid-table tr:last-child td { border-bottom:none; }

/* 5. Status cell + status dot — colored indicator inline with the status label.
      Late state pulses to draw the eye to time-sensitive rows. */
.status-cell { display:flex; align-items:center; gap:6px; }
.status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.status-dot.checked { background:#198754; }
.status-dot.absent { background:#dee2e6; }
.status-dot.scheduled { background:#0d6efd; }
.status-dot.late { background:#c89400; animation: harbor-attendance-pulse 1.5s infinite; }
@keyframes harbor-attendance-pulse { 0%, 100% { opacity:1; } 50% { opacity:.4; } }

/* 6. Segment bar — 5-6 colored segments per row showing shift progress. */
.seg-bar { display:flex; gap:2px; align-items:center; }
.seg { height:14px; border-radius:1.5px; min-width:9px; flex:1; }
.seg.completed { background:#198754; }
.seg.in-progress { background:#0d6efd; }
.seg.scheduled { background:#dee2e6; }
.seg.exception { background:#dc3545; }

/* 7. Nurse sig state — pending / signed / missing / blocked. */
.sig-state { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#5e6c84; }
.sig-state.signed { color:#155724; }
.sig-state.missing { color:#856404; }
.sig-state.blocked { color:#721c24; }

/* 8. Inline row actions — icon-only buttons (check-in / check-out / edit / resolve). */
.row-actions { display:flex; gap:4px; justify-content:flex-end; }
.row-actions button { background:transparent; border:none; color:#5e6c84; padding:3px 7px; border-radius:4px; font-size:12px; }
.row-actions button:hover { background:#f4f5f7; color:#172b4d; }
.row-actions button:disabled { color:#bcc2cc; cursor:not-allowed; }
.row-actions button:disabled:hover { background:transparent; color:#bcc2cc; }

/* ── V2-R5d: Harbor RCM workspace content patterns ──────────────────────────
   Sourced verbatim (with light comment normalization) from the owner-approved
   canon at ~/Aegis/Prototypes/Bridge/Harbor/rcm/v1-canon.html. Patterns shared
   with earlier tranches (prompt-strip, aegis-panel, aegis-table, patient-cell /
   avatar / name / mrn, pill + pill-*, design-note, kpi-row / kpi, filter-pills /
   filter-pill, worklist-header, panel-head, row-actions) are NOT duplicated
   here — they live above under V2-R5b / V2-R5c.
   Animation namespace: harbor-rcm-* (avoids global collision per V2-R5c rule). */

/* 1. AR strip — 6-KPI cards in a single-row grid. Two use .danger modifier. */
.ar-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; margin-bottom:18px; }
.ar-card { background:#fff; border:1px solid #dee2e6; border-radius:8px; padding:12px 14px; }
.ar-card .lab { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:#5e6c84; font-weight:600; }
.ar-card .val { font-size:18px; font-weight:700; color:#172b4d; line-height:1.1; margin-top:4px; }
.ar-card .sub { font-size:11px; color:#5e6c84; margin-top:3px; }
.ar-card.danger { border-color:#f5c2c7; background:#fff5f6; }
.ar-card.danger .val { color:#a02530; }

/* 2. Lifecycle state-flow strip — inline pill chain showing claim state machine.
      Step order: Draft › Scrub › Ready › Submitted › Paid/Denied.
      .done = completed (green), .current = active step (blue by default;
      inline-style override applies red for Denied, amber for ScrubFail, green for Paid),
      .todo = downstream step (muted). Separator (›) is styled muted. */
.state-flow { display:flex; align-items:center; gap:4px; font-size:11px; }
.state-step { padding:2px 7px; border-radius:10px; background:#f4f5f7; color:#5e6c84; }
.state-step.done { background:#d4edda; color:#155724; }
.state-step.current { background:#0052cc; color:#fff; font-weight:700; }
.state-step.todo { background:#f4f5f7; color:#adb5bd; }
.state-sep { color:#dee2e6; }

/* 3. Claim-id mono cell — small monospaced claim reference number. */
.claim-id { font-family: ui-monospace, SFMono-Regular, monospace; font-size:11px; color:#5e6c84; }

/* 4. Numeric amount cell — monospaced currency amounts in the claims table. */
.num { font-family: ui-monospace, SFMono-Regular, monospace; }

/* 5. Pill variants added by RCM (draft state). Other pill-* are in V2-R5b. */
.pill-draft { background:#e0e7ff; color:#3730a3; }
.pill-paid  { background:#dcfce7; color:#166534; }

/* ── V2-R5e: Harbor Intake + state-pluggable right rail ──────────────────────
   Sourced verbatim (with light comment normalization) from the owner-approved
   canon at ~/Aegis/Prototypes/Bridge/Harbor/intake/v1-canon.html.
   Pattern reuse: filter-pills / filter-pill, prompt-strip, aegis-panel,
   aegis-table, worklist-header, smart-prompts / smart-card, design-note,
   ref-cell / ref-source / ref-name, pill + pill-* are in V2-R5b/c/d — NOT
   duplicated here.
   CSS variables (--rail-width etc.) defined here for shared use.
   Animation namespace: harbor-intake-* / harbor-state-rail-* (no global collision). */

/* ── CSS variables for the state rail ──────────────────────────────────────── */
:root {
    --rail-width:   320px;
    --rail-bg:      #fbfaf6;
    --rail-border:  #e9e3d2;
    --rail-heading: #574c2c;
}

/* ── Body class: .has-state-rail ────────────────────────────────────────────
   When present, the main content area gains padding-right equal to the rail
   width so the rail doesn't overlap the content. The rail itself is
   position:fixed on the right edge. */
body.has-state-rail .app-main-content {
    /* !important is required: .app-main-content also carries Bootstrap's .px-3 utility
       (padding-right: 1rem !important). A non-!important rule loses to a utility's !important
       regardless of specificity, so without this the content never reserved the rail width and the
       fixed rail overlapped the right column (e.g. the POC Summary "Current state" card was clipped
       ~250px under the rail). Two !important rules → specificity decides, and this selector wins. */
    padding-right: calc(var(--rail-width) + 16px) !important;
}

/* ── State-pluggable right rail container ───────────────────────────────────
   Fixed to the right edge of the viewport, between the bottom of the
   workflow strip and the viewport bottom. Scrolls independently. */
.state-rail {
    position: fixed;
    top: calc(var(--shell-topbar-height, 56px) + var(--canon-workflow-strip-height, 48px));
    right: 0;
    bottom: 0;
    width: var(--rail-width);
    background: var(--rail-bg);
    border-left: 1px solid var(--rail-border);
    overflow-y: auto;
    z-index: 50;
    padding: 18px 18px 32px;
}

/* Rail head: flag icon + pack name + info chevron. */
.state-rail-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.state-rail-flag {
    width:18px; height:13px; border-radius:1.5px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06); flex-shrink:0;
}
/* Florida flag approximation (matches canon HTML) */
.state-rail-flag.fl {
    background: linear-gradient(to bottom, #fff 0 33%, #d50000 33% 67%, #fff 67%);
    position: relative;
}
.state-rail-flag.fl::before {
    content: "";
    position: absolute; left:50%; top:50%;
    width:6px; height:6px; border-radius:50%;
    background:#003366; transform:translate(-50%,-50%);
}
/* Texas approximation */
.state-rail-flag.tx {
    background: linear-gradient(to right, #003166 0 33%, #fff 33% 67%, #c8102e 67%);
}
.state-rail-head-text { flex:1; min-width:0; }
.state-rail-pack-label {
    font-size:10px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--rail-heading); font-weight:700;
}
.state-rail-pack-name { font-size:13px; font-weight:600; color:#172b4d; line-height:1.2; margin-top:1px; }
.state-rail-info { color:#a89968; font-size:14px; cursor:default; flex-shrink:0; }

/* Rail banner: amber callout showing data source + last refresh. */
.state-rail-banner {
    background:#fff8e1; border:1px solid #f0e2b5; border-left:3px solid #c89400;
    border-radius:4px; padding:7px 10px; font-size:11.5px; color:#5a4400;
    margin-bottom:14px;
}
.state-rail-banner code { background:rgba(0,0,0,.06); padding:1px 4px; border-radius:3px; font-size:10.5px; }

/* Rail sections: titled groups of obligations. */
.state-rail-section { margin-bottom:18px; }
.state-rail-section-h {
    font-size:10px; text-transform:uppercase; letter-spacing:.6px;
    color:var(--rail-heading); font-weight:700;
    padding:8px 0 6px; border-bottom:1px solid var(--rail-border); margin-bottom:10px;
}

/* Individual obligation row within a section. */
.state-rail-obl {
    display:block; padding:7px 9px; border-radius:4px;
    color:#172b4d; transition: background .12s; cursor:default;
}
.state-rail-obl:hover { background:rgba(0,0,0,.04); }
.state-rail-obl-h { display:flex; align-items:baseline; gap:6px; }
.state-rail-obl-cite {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size:11px; color:#5e6c84; flex-shrink:0;
}
.state-rail-obl-title { font-size:12.5px; font-weight:600; line-height:1.25; }
.state-rail-obl-sub { font-size:11.5px; color:#5e6c84; margin-top:2px; line-height:1.35; }

/* Empty-state message when no obligations are registered. */
.state-rail-empty {
    font-size:12px; color:#5e6c84; padding:12px 0;
}

/* Rail footer: canon-viewer link + source URL. */
.state-rail-footer {
    font-size:11px; color:#5e6c84;
    padding:12px 0 0; border-top:1px solid var(--rail-border); margin-top:14px;
}
.state-rail-footer a { color:#0052cc; text-decoration:none; }
.state-rail-footer a:hover { text-decoration:underline; }

/* ── Intake-specific refinements ────────────────────────────────────────────
   The referral table uses .ref-cell / .ref-source / .ref-name (V2-R5b shared)
   and .pill / .pill-* (V2-R5b shared). No new intake-specific table patterns
   needed — the existing shared vocabulary covers the worklist columns. */

/* Canned template grid — 3-column on wide; wraps on narrow (reuses smart-prompts
   from canon but defined here to avoid duplication with Patients). The class name
   .smart-prompts is already in V2-R5b; no re-declaration needed. */

/* ── V2-R5f: Harbor Clinical workspace + POC + patient context strip ──── */

/* ── Patient context strip — 64px fixed bar ─────────────────────────────
   Stack order (top → bottom):
     banner → topbar → patient context strip → workflow strip → content
   The strip stacks between the topbar (--shell-topbar-height, 56px) and the
   workflow strip (--canon-workflow-strip-height, 48px). */

:root {
    --patient-strip-height: 64px;
}

/* Body padding shifts when the patient strip is active. CSS does NOT cascade-add padding across rules —
   a more-specific rule REPLACES the value — so each variant must restate the topbar height + 1.25rem
   breathing room (the base / .has-workflow-strip values it overrides), then add the patient-strip (and
   workflow-strip) heights. Omitting the topbar tucked the first content element (e.g. the automation
   banner) up under the fixed chrome: chrome bottom is topbar(56)+patient(64)+workflow(48)=168px, but the
   old value was only patient+workflow=112px, so content started ~56px too high, behind the strips. */
body.has-patient-context-strip.has-workflow-strip .app-main-content {
    padding-top: calc(var(--shell-topbar-height) + var(--patient-strip-height) + var(--canon-workflow-strip-height) + 1.25rem);
}
body.has-patient-context-strip:not(.has-workflow-strip) .app-main-content {
    padding-top: calc(var(--shell-topbar-height) + var(--patient-strip-height) + 1.25rem);
}

/* Strip container — fixed between topbar and workflow strip. */
.patient-context-strip {
    position: fixed;
    top: var(--shell-topbar-height, 56px);
    left: var(--shell-sidebar-width, 0);
    right: 0;
    height: var(--patient-strip-height);
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    display: flex;
    align-items: center;
    padding: 0 22px;
    gap: 18px;
    z-index: 88;
}

/* On lg+ where the sidebar is rendered inline, offset left past the sidebar. */
@media (min-width: 992px) {
    .patient-context-strip { left: var(--shell-sidebar-width, 240px); }
}

/* Workflow strip stacks below the patient strip when both are active.
   The element is <nav id="workflow-strip" class="app-workflow-strip"> — this offset MUST target the
   .app-workflow-strip class. A bare ".workflow-strip" class selector matched nothing, so the fixed
   workflow strip stayed pinned at the topbar and painted over the fixed patient strip (z 1020 > 88),
   clipping the patient identity band to a sliver on every clinical workspace tab. */
body.has-patient-context-strip .app-workflow-strip {
    top: calc(var(--shell-topbar-height, 56px) + var(--patient-strip-height));
}

/* State rail stacks below both topbar + patient strip + workflow strip. */
body.has-patient-context-strip .state-rail {
    top: calc(var(--shell-topbar-height, 56px) + var(--patient-strip-height) + var(--canon-workflow-strip-height, 48px));
}

/* Avatar — 44px circle, initials, blue tint. */
.patient-context-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e6f0ff;
    color: #0052cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

/* Identity block. */
.patient-context-identity { flex-shrink: 0; min-width: 0; }

.patient-context-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #172b4d;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Switcher chevron — affordance; real picker in V2-R6f. */
.patient-context-switcher {
    color: #5e6c84;
    font-size: 13px;
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 4px;
    transition: background .12s;
}
.patient-context-switcher:hover { background: #f4f5f7; }

.patient-context-demographics {
    font-size: 11.5px;
    color: #5e6c84;
    margin-top: 2px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Divider line between identity and facts. */
.patient-context-divider {
    width: 1px;
    height: 38px;
    background: #e8eaed;
    flex-shrink: 0;
}

/* Facts row. */
.patient-context-facts {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    overflow-x: auto;
}

.patient-context-fact { display: flex; flex-direction: column; min-width: 0; flex-shrink: 0; }

.pcf-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #5e6c84;
    font-weight: 600;
}

.pcf-value {
    font-size: 13px;
    color: #172b4d;
    line-height: 1.2;
    margin-top: 2px;
}

/* Actions — right-aligned print + overflow buttons. */
.patient-context-actions {
    display: flex;
    gap: 6px;
}

/* ── Vitals workspace patterns ───────────────────────────────────────────────── */

/* 6-card at-a-glance grid. */
.vital-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 1100px) {
    .vital-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .vital-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Individual vital card. */
.vital-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
}
.vital-card.is-out-of-range {
    border-color: #f8d7da;
    background: #fff5f6;
}

.vc-lab {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #5e6c84;
    font-weight: 600;
}
.vc-val {
    font-size: 22px;
    font-weight: 700;
    color: #172b4d;
    line-height: 1.1;
    margin-top: 4px;
}
.vital-card.is-out-of-range .vc-val,
.out-of-range-val { color: #a02530; }

.vc-unit { font-size: 12px; color: #5e6c84; font-weight: 400; }
.vc-time { font-size: 11px; color: #5e6c84; margin-top: 3px; }

/* Recent-vitals log — reuse .aegis-table + .num + .out-of-range from V2-R5b. */
.out-of-range { color: #a02530; font-weight: 600; }

/* ── POC focused content patterns ───────────────────────────────────────────── */

/* POC header card — persistent above sub-section tabs. */
.poc-header-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.poc-header-row1 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.poc-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #172b4d;
    line-height: 1.2;
}
.poc-header-title small {
    font-size: 12px;
    color: #5e6c84;
    font-weight: 500;
    margin-left: 8px;
}

.poc-header-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
@media (max-width: 1100px) {
    .poc-header-grid { grid-template-columns: repeat(3, 1fr); }
}

.poc-grid-fact .pgf-lab {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #5e6c84;
    font-weight: 600;
}
.poc-grid-fact .pgf-val {
    font-size: 13.5px;
    color: #172b4d;
    line-height: 1.3;
    margin-top: 3px;
    font-weight: 500;
}

/* Lock-state pills for POC header. */
.pill-lock { background: #e3f2e9; color: #0c6b3e; }
.pill-lock i { margin-right: 3px; font-size: 10px; }

/* ── POC sub-section tab strip ───────────────────────────────────────────────
   Content-level tab strip — DISTINCT from the workspace workflow strip.
   Smaller text (13px vs 13px but different active style), grey active
   indicator (not brand-primary), and attached to the sub-section body
   below via shared border. Cannot be confused with the fixed workflow strip. */
.poc-subsection-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    border-bottom: none;
    padding: 0 6px;
    overflow-x: auto;
}

.poc-subsection-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    text-decoration: none;
    color: #5e6c84;
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color .12s, border-color .12s;
}
.poc-subsection-tab:hover { color: #172b4d; }
.poc-subsection-tab.is-active {
    color: #172b4d;
    border-bottom-color: #172b4d; /* dark, not brand-primary — intentionally distinct */
    font-weight: 600;
}
.poc-subsection-tab i { font-size: 13px; opacity: .7; }
.poc-subsection-tab .count-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #dee2e6;
    color: #5e6c84;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
    margin-left: 2px;
}
.poc-subsection-tab.is-active .count-badge { background: #172b4d; color: #fff; }

/* Sub-section body — attached below the tab strip. */
.poc-subsection-body {
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.poc-body-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.poc-body-head h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #172b4d;
}
.poc-body-head h2 small {
    font-size: 12px;
    font-weight: 400;
    color: #5e6c84;
    margin-left: 8px;
}

/* Prescribed service card grid. */
.poc-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 800px) {
    .poc-service-grid { grid-template-columns: 1fr; }
}

.poc-service-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fafbfc;
}

.poc-service-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.poc-service-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: #e8f0fe;
    color: #0052cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.poc-service-name {
    font-size: 14px;
    font-weight: 600;
    color: #172b4d;
    line-height: 1.2;
    flex: 1;
}

.poc-service-facts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
}

.poc-service-fact .psf-lab {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #5e6c84;
    font-weight: 600;
}
.poc-service-fact .psf-val {
    font-size: 13px;
    color: #172b4d;
    line-height: 1.2;
    margin-top: 2px;
    font-weight: 500;
}

.poc-service-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eceff3;
    font-size: 11.5px;
    color: #5e6c84;
}

/* Section header (reused on Clinical tab pages — not POC-specific but declared here
   since all Clinical pages need it and it wasn't promoted in earlier tranches). */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.section-header h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}
.section-header h1 small {
    font-size: 13px;
    font-weight: 400;
    color: #5e6c84;
    margin-left: 8px;
}

/* ── end V2-R5f ──────────────────────────────────────────────────────────── */

/* ── V2-R5g: Harbor Recertification + Coverage/Authorization ──────────────── */
/*
   New patterns:
     1. Danger-styled prompt strip variant (.prompt-strip.is-danger)
     2. Cross-type rollup table (.recert-rollup-table shape uses .aegis-table base)
     3. Type chip variants (.type-chip + .type-chip.poc/auth/cred/license)
     4. Countdown pill variants (.countdown-pill.red/amber/blue/done)
     5. Units visualization bar (.units-bar + .units-bar-fill + .units-bar.is-green/amber/red)
     6. Stage pill variants (.stage-pill.draft/awaiting-physician/awaiting-payer/ready/blocked)

   Pattern REUSE (not re-declared):
     .prompt-strip base (amber, V2-R5b), .aegis-panel, .aegis-table, .pill + .pill-*,
     .filter-pills / .filter-pill, .patient-cell / .patient-avatar / .patient-name,
     .worklist-header, .design-note, .row-link.
*/

/* 1. Danger-styled prompt strip variant (spec §6 — tenant-license urgency). */
.prompt-strip.is-danger {
    background: #fff5f6;
    border-left-color: #dc3545;
}
.prompt-strip.is-danger .pr-icon {
    color: #b02a37;
}
.prompt-strip.is-danger .pr-text {
    color: #6e1d27;
}
.prompt-strip.is-danger .pr-text strong {
    color: #172b4d;
}

/* 2. Recert rollup table — reuses .aegis-table base; no additional rules needed
   unless the spec introduces a unique column layout. Placeholder for V2-R5g
   custom overrides if the canon diverges. */
.recert-rollup-table td { vertical-align: middle; }

/* 3. Type chip — colored chips for the "Type" column in the cross-type rollup. */
.type-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    background: #e9ecef;
    color: #495057;
}
.type-chip.poc     { background: #d0ebff; color: #1971c2; }
.type-chip.auth    { background: #d3f9d8; color: #2b8a3e; }
.type-chip.cred    { background: #fff3bf; color: #87620a; }
.type-chip.license { background: #ffd8a8; color: #c05621; }

/* 4. Countdown pill variants — Expires column in the rollup table. */
.countdown-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.countdown-pill.red   { background: #fff5f6; color: #c92a2a; border: 1px solid #ffc9c9; }
.countdown-pill.amber { background: #fff8e1; color: #c89400; border: 1px solid #ffe066; }
.countdown-pill.blue  { background: #e7f5ff; color: #1971c2; border: 1px solid #bac8ff; }
.countdown-pill.done  { background: #f8f9fa; color: #868e96; border: 1px solid #dee2e6; }

/* 5. Units visualization bar — spec §4 "Units" column for Coverage/Auth workspace. */
.units-bar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 100px;
}
.units-bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: #e9ecef;
    overflow: hidden;
}
.units-bar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    border-radius: 4px;
    transition: width .2s ease;
}
/* Color is set by the bar modifier class; width is set via inline style. */
.units-bar.is-green .units-bar-fill { background: #2f9e44; }
.units-bar.is-amber .units-bar-fill { background: #f08c00; }
.units-bar.is-red   .units-bar-fill { background: #c92a2a; }
.units-bar-label {
    font-size: 11px;
    color: #5e6c84;
    white-space: nowrap;
}

/* 6. Stage pill variants — Status column in the recert rollup table. */
.stage-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    background: #f8f9fa;
    color: #495057;
}
.stage-pill.draft              { background: #f8f9fa; color: #6c757d; }
.stage-pill.awaiting-physician { background: #fff3bf; color: #87620a; }
.stage-pill.awaiting-payer     { background: #d0ebff; color: #1971c2; }
.stage-pill.ready              { background: #d3f9d8; color: #2b8a3e; }
.stage-pill.blocked            { background: #fff5f6; color: #c92a2a; }

/* ── end V2-R5g ──────────────────────────────────────────────────────────── */

/* ── V2-R5h: Harbor Providers + Compliance/Credentialing ──────────────────── */

/* 1. Role pill — Provider role column (Providers workspace spec §5). */
.role-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    background: #e9ecef;
    color: #495057;
}
.role-pill.internal { background: #d3f9d8; color: #2b8a3e; }
.role-pill.external { background: #d0ebff; color: #1971c2; }

/* 2. Credentialing status pill — Credentialing column (Providers workspace spec §5).
   Active green / InReview info / Expired danger / N/A muted. */
.credentialing-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: #e9ecef;
    color: #495057;
}
.credentialing-pill.active         { background: #d3f9d8; color: #2b8a3e; }
.credentialing-pill.in-review      { background: #d0ebff; color: #1971c2; }
.credentialing-pill.expired        { background: #fff5f6; color: #c92a2a; border: 1px solid #ffc9c9; }
.credentialing-pill.not-applicable { background: #f8f9fa; color: #868e96; }

/* 3. CAQH staleness flag — warn indicator for > 90d since last CAQH attestation. */
.caqh-stale-flag {
    color: #f08c00;
    font-size: 11px;
    vertical-align: middle;
}

/* 4. Severity pill — Severity column (Compliance workspace spec §7).
   Critical danger / Operational warn / Administrative info. */
.severity-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: #e9ecef;
    color: #495057;
}
.severity-pill.critical      { background: #fff5f6; color: #c92a2a; border: 1px solid #ffc9c9; }
.severity-pill.operational   { background: #fff8e1; color: #c89400; border: 1px solid #ffe066; }
.severity-pill.administrative { background: #d0ebff; color: #1971c2; }

/* 5. Requirement status pill — Status column (Compliance workspace spec §7).
   Open danger / InProgress warn / AwaitingEvidence info / Closed success. */
.requirement-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: #e9ecef;
    color: #495057;
}
.requirement-status-pill.open             { background: #fff5f6; color: #c92a2a; border: 1px solid #ffc9c9; }
.requirement-status-pill.in-progress      { background: #fff8e1; color: #c89400; border: 1px solid #ffe066; }
.requirement-status-pill.awaiting-evidence { background: #d0ebff; color: #1971c2; }
.requirement-status-pill.closed           { background: #d3f9d8; color: #2b8a3e; }
.requirement-status-pill.awaiting-verification { background: #fff8e1; color: #b07d00; border: 1px solid #ffe066; }
.requirement-status-pill.ready-to-complete     { background: #d3f9d8; color: #2b8a3e; border: 1px solid #8ce99a; }

/* 6. Due-date countdown pill — Due column (Compliance workspace spec §7).
   Distinct class from Recert's .countdown-pill (different column semantics). */
.due-countdown {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.due-countdown.red   { background: #fff5f6; color: #c92a2a; border: 1px solid #ffc9c9; }
.due-countdown.amber { background: #fff8e1; color: #c89400; border: 1px solid #ffe066; }
.due-countdown.blue  { background: #e7f5ff; color: #1971c2; border: 1px solid #bac8ff; }

/* 7. Policy version pill — Policies tab (Compliance workspace). */
.policy-version-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    background: #f3f0ff;
    color: #5f3dc4;
    border: 1px solid #d0bfff;
}

/* ── end V2-R5h ──────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
   V2-R5i: Harbor Family Portal — parent-facing canon
   Canon: Prototypes/Bridge/Harbor/family-portal/v1-canon.html
   Spec:  docs/harbor/v2-r5-prototypes/family-portal-flow.md §3
   Audience: Parent / legal guardian (NOT operator). Visual language is
   deliberately distinct from operator-workspace chrome.
   Mobile-first: single column ≤ 440px; reflows to centered column on wider viewports.
   NOTE-7 / EMP-8: all classes are family-portal-* prefixed to avoid collision.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
    --fp-bg: #eaf3fb;
    --fp-card-bg: #ffffff;
    --fp-card-shadow: 0 1px 3px rgba(23,43,77,.06), 0 4px 16px rgba(23,43,77,.05);
    --fp-text: #172b4d;
    --fp-text-soft: #5e6c84;
    --fp-text-mute: #8993a4;
    --fp-accent: #0052cc;
    --fp-accent-soft: #e8f0fe;
    --fp-success-bg: #e6f4ea;
    --fp-success: #0c6b3e;
    --fp-warn-bg: #fff3cd;
    --fp-warn: #856404;
    --fp-radius: 14px;
    --fp-radius-pill: 999px;
    --fp-app-bar-h: 56px;
    --fp-tab-bar-h: 64px;
    --fp-gate-banner-h: 42px;
    --fp-column-width: 440px;
}

/* ── Body — pale-blue, reset operator sidebar padding ──────────────────── */
.family-portal-body {
    background: var(--fp-bg);
    /* Reset operator shell that adds padding-left for the sidebar */
    padding-left: 0 !important;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color: var(--fp-text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Gate notice banner — PROMINENT AND UNMISSABLE ─────────────────────── */
/* This banner appears at the very top of every Family Portal page.         */
/* It signals to any operator who navigates here that the portal is in a   */
/* preview-only state gated by NOTE-7 / EMP-8 owner Stage D authorization. */
.family-portal-gate-notice {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    min-height: var(--fp-gate-banner-h);
    background: #fff8e1;
    border-bottom: 2px solid #ffe066;
    color: #5a4400;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.45;
    box-shadow: 0 2px 8px rgba(90,68,0,.08);
}
.family-portal-gate-notice i {
    font-size: 16px;
    color: #c89400;
    flex-shrink: 0;
}
.family-portal-gate-notice code {
    background: rgba(90,68,0,.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    color: #5a4400;
}

/* ── Top app-bar ────────────────────────────────────────────────────────── */
.family-portal-app-bar {
    position: fixed;
    top: var(--fp-gate-banner-h);
    left: 0;
    right: 0;
    height: var(--fp-app-bar-h);
    background: #ffffff;
    border-bottom: 1px solid #e3edf6;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    z-index: 1000;
    box-shadow: 0 1px 4px rgba(23,43,77,.05);
}
.fpa-center-name {
    flex: 1;
    min-width: 0;
}
.fpa-wordmark {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--fp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fpa-subtitle {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--fp-text-mute);
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-top: 1px;
}
.fpa-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fpa-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f7fb;
    color: var(--fp-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: none;
    cursor: pointer;
    position: relative;
}
.fpa-icon-btn:not(:disabled):hover {
    background: var(--fp-accent-soft);
    color: var(--fp-accent);
}
.fpa-icon-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.fpa-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d2f0e0;
    color: #0c6b3e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    cursor: default;
}

/* ── Scrollable content column — mobile-first, max 440px ───────────────── */
.family-portal-column {
    max-width: min(var(--fp-column-width), 100vw);
    margin: 0 auto;
    padding: calc(var(--fp-gate-banner-h) + var(--fp-app-bar-h) + 16px) 16px calc(var(--fp-tab-bar-h) + 24px);
}

/* ── Bottom tab strip ───────────────────────────────────────────────────── */
.family-portal-bottom-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--fp-tab-bar-h);
    background: #ffffff;
    border-top: 1px solid #e3edf6;
    display: flex;
    align-items: stretch;
    z-index: 1000;
    box-shadow: 0 -2px 8px rgba(23,43,77,.04);
}
.family-portal-bottom-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--fp-text-soft);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    padding: 6px 4px;
}
.family-portal-bottom-tab i {
    font-size: 22px;
    line-height: 1;
}
.family-portal-bottom-tab.is-active {
    color: var(--fp-accent);
}
.family-portal-bottom-tab.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    background: var(--fp-accent);
    border-radius: 0 0 3px 3px;
}

/* ── Hero card ──────────────────────────────────────────────────────────── */
.family-portal-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
    border-radius: var(--fp-radius);
    padding: 20px;
    box-shadow: var(--fp-card-shadow);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.fp-hero-illust {
    position: absolute;
    top: 14px;
    right: -10px;
    width: 110px;
    height: 90px;
    opacity: .35;
    pointer-events: none;
}
.fp-hero-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.fp-hero-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b8e0c8 0%, #6fc795 100%);
    color: #08502d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 19px;
    flex-shrink: 0;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(12,107,62,.25);
}
.fp-hero-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--fp-text);
    line-height: 1.2;
}
.fp-hero-sub {
    font-size: 12px;
    color: var(--fp-text-mute);
    margin-top: 2px;
}
.fp-hero-headline {
    font-size: 17px;
    font-weight: 700;
    color: var(--fp-text);
    line-height: 1.4;
    margin: 0 0 6px;
}
.fp-hero-body {
    font-size: 14px;
    color: var(--fp-text-soft);
    line-height: 1.5;
    margin: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.family-portal-card {
    background: var(--fp-card-bg);
    border-radius: var(--fp-radius);
    padding: 18px;
    box-shadow: var(--fp-card-shadow);
    margin-bottom: 14px;
}
.fp-card-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--fp-text-mute);
    font-weight: 700;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fp-card-title i {
    font-size: 14px;
    opacity: .8;
}
.fp-tab-content-card {
    min-height: 200px;
}

/* ── Quick-actions strip ────────────────────────────────────────────────── */
/* Rounded-full pills, ≥44px touch targets, horizontal scroll. Spec §4.4.  */
.family-portal-quick-actions {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin: 0 -16px 18px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
}
.family-portal-quick-actions::-webkit-scrollbar { display: none; }
.fp-quick-action {
    flex-shrink: 0;
    min-width: 116px;
    min-height: 80px;
    background: #fff;
    border-radius: var(--fp-radius);
    padding: 12px 14px;
    box-shadow: var(--fp-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid transparent;
    text-align: left;
    cursor: pointer;
}
.fp-quick-action:not(:disabled):hover {
    border-color: var(--fp-accent);
}
.fp-quick-action:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.fp-qa-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--fp-accent-soft);
    color: var(--fp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.fp-qa-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fp-text);
    line-height: 1.25;
}
.fp-qa-meta {
    font-size: 11px;
    color: var(--fp-text-mute);
}

/* ── Snapshot rows ──────────────────────────────────────────────────────── */
.fp-snapshot-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f4f8;
}
.fp-snapshot-row:last-child { border-bottom: none; padding-bottom: 0; }
.fp-snapshot-row:first-child { padding-top: 0; }
.fp-snapshot-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--fp-accent-soft);
    color: var(--fp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.fp-snapshot-icon.success { background: var(--fp-success-bg); color: var(--fp-success); }
.fp-snapshot-body { flex: 1; min-width: 0; }
.fp-snapshot-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--fp-text-mute);
    font-weight: 600;
}
.fp-snapshot-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-text);
    margin-top: 1px;
    line-height: 1.3;
}

/* ── Snapshot pills — state-encoded, rounded full ───────────────────────── */
/* Never carry raw clinical values. Spec §5 + §7 invariant 6. */
.family-portal-snapshot-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--fp-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* ── Empty states ───────────────────────────────────────────────────────── */
.fp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 8px;
    gap: 8px;
}
.fp-empty-state-lg {
    padding: 32px 16px;
}
.fp-empty-primary {
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-text);
    margin: 0;
}
.fp-empty-secondary {
    font-size: 13px;
    color: var(--fp-text-soft);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

/* ── Tasks ──────────────────────────────────────────────────────────────── */
.fp-task-card {
    border: 1px solid #f4d9a0;
    background: #fffaef;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.fp-task-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff3cd;
    color: #856404;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.fp-task-body { flex: 1; }
.fp-task-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-text);
    line-height: 1.3;
}
.fp-task-meta {
    font-size: 12px;
    color: var(--fp-text-soft);
    margin-top: 2px;
}

/* ── Care team member rows ──────────────────────────────────────────────── */
.fp-care-team-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f4f8;
}
.fp-care-team-row:last-child { border-bottom: none; padding-bottom: 0; }
.fp-care-team-row:first-child { padding-top: 0; }
.fp-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #d2f0e0;
    color: #0c6b3e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.fp-member-body { flex: 1; }
.fp-member-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-text);
}
.fp-member-role {
    font-size: 12px;
    color: var(--fp-text-soft);
    margin-top: 1px;
}

/* ── Pill button ────────────────────────────────────────────────────────── */
/* Rounded-full, ≥44px touch target, Aegis accent. Spec §3. */
.fp-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--fp-accent);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: var(--fp-radius-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}
.fp-btn-pill:not(:disabled):hover { background: #0747a6; }
.fp-btn-pill:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Responsive — wider viewport: column stays centered ─────────────────── */
/* Mobile-first: all rules above apply at all widths.
   At ≥560px (tablet+), add some extra breathing room around the column.    */
@media (min-width: 560px) {
    .family-portal-column {
        padding-left: 24px;
        padding-right: 24px;
    }
    .family-portal-quick-actions {
        margin-left: -24px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ── end V2-R5i ──────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Workspace subnav strip — generic horizontal tab navigation
   Used by any workspace that declares SubnavItems on its PlatformWorkspaceDescriptor.
   Rendered by the shared _WorkspaceSubnav partial; no workspace-specific selectors here.
══════════════════════════════════════════════════════════════════════════════ */

.ws-subnav {
  display: flex;
  border-bottom: 1px solid var(--shell-border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.ws-subnav::-webkit-scrollbar { display: none; }

.ws-subnav-inner {
  display: flex;
  gap: 0;
  min-width: max-content;
}

.ws-subnav-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem .45rem;
  font-size: .83rem;
  font-weight: 500;
  color: var(--canon-workflow-fg);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.ws-subnav-item:hover {
  color: var(--brand-primary);
  border-bottom-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
}
.ws-subnav-item.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: 600;
}

.ws-subnav-icon {
  font-size: .9em;
  opacity: .8;
}
.ws-subnav-item.active .ws-subnav-icon {
  opacity: 1;
}

.ws-subnav-cross {
  opacity: .85;
}
.ws-subnav-cross::after {
  content: "\F1C5"; /* bi-box-arrow-up-right unicode — external hint */
  font-family: "bootstrap-icons";
  font-size: .7em;
  opacity: .55;
  margin-left: .2rem;
}

/* Sidebar auto-collapse — brand wordmark/logo image handling (live finding 2026-07-05):
   tenant nav logos render up to 130px wide inside .sb-logo; at the 60px collapsed rail
   they clip mid-wordmark. Hide the image while collapsed (rail is icons-only; the brand
   returns with the overlay expand), mirroring the .sb-logo-text treatment above. */
body.sidebar-collapsed .sb-logo img { display: none; }
body.sidebar-collapsed:has(#sb-expand-toggle-input:checked) .sb-logo img { display: inline-block; }