/*
  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); }
}

/* ════════════════════════════════════════════════════════════════════════════
   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;
}
.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 {
    padding-right: calc(var(--rail-width) + 16px);
}

/* ── 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 strip is active — add strip height on top of
   existing workflow-strip padding already applied by .has-workflow-strip. */
body.has-patient-context-strip.has-workflow-strip .app-main-content {
    padding-top: calc(var(--patient-strip-height) + var(--canon-workflow-strip-height, 48px));
}
body.has-patient-context-strip:not(.has-workflow-strip) .app-main-content {
    padding-top: var(--patient-strip-height);
}

/* 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. */
body.has-patient-context-strip .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; }

/* 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 ──────────────────────────────────────────────────────────── */