/* ---------------------------------------------------------------------
   02-app-shell §1 Geometry
   --------------------------------------------------------------------- */
.app-main { margin-left: 280px; min-width: 0; }
.wrap { max-width: var(--container-max); padding: 24px; }
/* Sprite symbols are authored as monoline paths meant to be stroked; filling
   them collapses open paths to nothing and closed ones to solid blobs. */
.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------
   02-app-shell §2 Sidebar
   --------------------------------------------------------------------- */
.sidebar {
  width: 280px;
  padding: 16px 0;
  background: var(--surface-card);
  border-right: 1px solid var(--border-subtle);
  box-shadow: none;
  color: var(--ink);
}
.sidebar-brand { padding: 0 24px 24px; }
.sidebar-name { color: var(--primary); font-size: 24px; font-weight: 700; line-height: 1.25; }
.sidebar-brand p { margin: 4px 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.45; }
.sidebar-cta-row { padding: 0 16px 12px; }
.sidebar-quick-switch {
  width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 8px 14px; border: 0; border-radius: var(--r-md);
  background: var(--primary); color: var(--on-primary); font: 600 13px/1 var(--font-ui); cursor: pointer;
}
.sidebar-quick-switch:hover { background: var(--clinical-green-dark); }
.sidebar-nav { padding: 0; }
.nav-section-title { padding: 16px 24px 4px; color: var(--ink-faint); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-section .nav-section-title { padding-left: 24px; }
.nav-item { min-height: 40px; margin: 0 8px; padding: 9px 16px; gap: 12px; border-radius: var(--r-md); color: var(--secondary); }
.nav-item:hover { background: var(--surface-mid); color: var(--secondary); }
.nav-item.active { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }
.nav-item[data-page] .nav-icon { width: 20px; height: 20px; -webkit-mask-size: 20px 20px; mask-size: 20px 20px; }
.nav-settings-divider { height: 1px; margin: 8px 16px; background: var(--border-subtle); }

/* ---------------------------------------------------------------------
   02-app-shell §3 Top bar
   --------------------------------------------------------------------- */
.topbar { height: 64px; padding: 0 16px; gap: 16px; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
.quick-switcher-button {
  order: 1; flex: 1; max-width: 576px; height: 40px; justify-content: flex-start; padding: 0 14px;
  border: 0; border-radius: var(--r-md); background: var(--surface-mid); color: transparent; font-size: 0;
}
.quick-switcher-button::before { content: "⌕"; color: var(--ink-muted); font-size: 20px; margin-right: 10px; }
.quick-switcher-button::after { content: "Quick search — tools (Ctrl+K)"; color: var(--ink-faint); font: 400 13px/1 var(--font-ui); }
.topbar-title { order: 2; margin-left: auto; color: var(--ink-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hamburger { width: 40px; height: 40px; border: 0; border-radius: var(--r-md); color: var(--secondary); background: transparent; }

/* ---------------------------------------------------------------------
   02-app-shell §4 Workspace bar and panels
   --------------------------------------------------------------------- */
/* Pinned workspace bar: keep patient tabs reachable while working deep in a page. On desktop
   the topbar is hidden, so top:0 sits the bar at the viewport edge; the 860px query below
   offsets it to 64px to clear the sticky topbar that appears on narrow screens. Once scrolled
   past the bar (body.page-scrolled, toggled in patient-profile.js), the summary row collapses
   so only the tab strip stays pinned, with a shadow to lift it off the page. */
.patient-banner { position: sticky; top: 0; z-index: 25; padding: 8px 16px 0; background: var(--surface-low); color: var(--ink); border-bottom: 1px solid var(--border-subtle); box-shadow: none; transition: box-shadow 0.15s ease; }
body.page-scrolled .patient-banner { box-shadow: var(--shadow-card); }
body.page-scrolled .patient-banner-info-row { display: none; }
.patient-tabs-row { min-height: 32px; gap: 8px; }
.patient-tabs { gap: 8px; }
.patient-zero-state { align-self: center; color: var(--ink-muted); font-size: 13px; }
.patient-tab { min-height: 32px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-md) var(--r-md) 0 0; background: transparent; color: var(--ink-muted); box-shadow: none; }
.patient-tab:hover { background: var(--surface-mid); }
.patient-tab.active { background: var(--surface-card); color: var(--ink); border-color: var(--border-subtle); border-bottom-color: var(--surface-card); box-shadow: none; }
.patient-tab-initials { background: transparent; color: inherit; border: 0; border-radius: 0; min-width: 0; padding: 0; }
.patient-tab-remove { margin-left: 8px; }
.patient-tab-add { width: 32px; height: 32px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--secondary); }
.patient-tab-add-zero { width: auto; margin-left: 4px; padding: 0 8px; }
.patient-banner-info-row { margin: 0 -16px; padding: 8px 16px; min-height: 48px; background: var(--surface-card); border-top: 1px solid var(--border-subtle); }
.patient-banner-main { min-width: 0; }
.patient-banner-icon { color: var(--ink-muted); }
.patient-banner-summary { color: var(--ink); font: 500 13px/20px var(--font-mono); }
.patient-sync-off-chip { flex: 0 0 auto; margin-left: 8px; }
.patient-banner-controls { gap: 4px; }
.patient-btn { min-height: 32px; padding: 6px 10px; border: 0; background: transparent; color: var(--secondary); box-shadow: none; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.patient-btn:hover { background: var(--surface-mid); }
.patient-btn-danger { color: var(--danger); }
.patient-banner-controls .patient-btn-danger { margin-left: 12px; }
.patient-edit-panel { margin: 12px 24px 0 304px; border-color: var(--border-subtle); border-radius: var(--r-lg); background: var(--surface-card); box-shadow: var(--shadow-card); }
.patient-close-dialog { width: min(480px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-raised); }
.patient-close-dialog::backdrop { background: rgba(26, 28, 30, .4); }
.patient-close-dialog h2 { margin: 0 0 12px; }
.patient-close-dialog p { margin: 0; color: var(--ink-muted); }
.patient-close-dialog-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px; }

/* ---------------------------------------------------------------------
   02-app-shell §5 Canvas and page headers
   --------------------------------------------------------------------- */
.home-button-row { margin-left: 280px; padding: 12px 24px 0; background: var(--bg); }
.home-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--secondary); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.home-btn .icon { width: 16px; height: 16px; }
.page-header { margin: 0 0 24px; padding: 0; border: 0; background: transparent; }
.page-header h1 { margin: 0; color: var(--ink); font-size: 28px; line-height: 1.25; }
.page-subtitle { max-width: 65ch; margin: 6px 0 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }

/* ---------------------------------------------------------------------
   02-app-shell §7 Toasts and §8 Quick switcher
   --------------------------------------------------------------------- */
.tool-navigation-toast { left: calc(50% + 140px); bottom: 24px; border-radius: var(--r-md); background: var(--readout-bg); color: var(--readout-ink); box-shadow: var(--shadow-raised); }
.toast-undo-button { color: var(--readout-accent); }
.qs-overlay { z-index: 60; background: rgba(26, 28, 30, .4); }
.qs-dialog { width: min(560px, calc(100vw - 32px)); border-radius: var(--r-lg); background: var(--surface-card); box-shadow: var(--shadow-raised); }
.qs-input { min-height: 48px; border-color: var(--border-subtle); color: var(--ink); }
.qs-item { min-height: 40px; padding: 6px 10px; color: var(--ink-muted); }
.qs-item:hover, .qs-active { background: var(--secondary-container); color: var(--on-secondary-container); }

@media (max-width: 1100px) {
  .wrap { padding: 16px; }
  .patient-edit-panel { margin-right: 16px; }
}
@media (max-width: 860px) {
  .app-main { margin-left: 0; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-raised); }
  .sidebar.open { transform: translateX(0); }
  /* Narrow screens show the sticky topbar (64px); offset the pinned workspace bar below it. */
  .patient-banner { top: 64px; }
  .topbar-title { order: 1; margin: 0 auto; font-size: 14px; letter-spacing: 0; text-transform: none; }
  .quick-switcher-button { order: 2; flex: 0 0 40px; width: 40px; padding: 0; background: transparent; }
  .quick-switcher-button::before { margin: 0; }
  .quick-switcher-button::after { content: none; }
  .patient-tabs-row { overflow-x: auto; }
  .patient-banner-info-row { flex-wrap: wrap; }
  .home-button-row { margin-left: 0; padding-inline: 16px; }
  .patient-edit-panel { margin: 12px 16px 0; }
  .tool-navigation-toast { left: 50%; }
}
@media (max-width: 640px) {
  .wrap { padding: 16px; }
  .patient-banner { padding-inline: 12px; }
  .patient-banner-info-row { margin-inline: -12px; padding-inline: 12px; }
  .patient-banner-controls { width: 100%; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition-duration: .001ms; }
}
/* Wave 7 cleanup: retained compatibility selectors in the split stylesheet. */
@layer legacy {
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--clinical-green-dark) 0%, var(--ink) 100%);
  color: var(--on-primary);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 40;
  transition: transform 0.2s ease;
  box-shadow: var(--shadow-sidebar);
}

.sidebar-brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .eyebrow { color: rgba(217,240,236,0.75); margin: 0 0 3px; }
.sidebar-brand h1 { color: var(--on-primary); font-size: 18px; letter-spacing: -0.005em; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 14px 12px 20px;
  gap: 2px;
}
.nav-section { margin: 2px 0 6px; }
.nav-section-title { color: rgba(217,240,236,0.52); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 8px 15px 4px; text-transform: uppercase; }
.nav-item-pinned { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 42px;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: rgba(217,240,236,0.82);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.nav-item[hidden], .dash-card[data-page][hidden] { display: none !important; }
.nav-item .nav-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,0.07); color: var(--on-primary); }
.nav-item.active {
  background: rgba(255,255,255,0.1);
  border-left-color: var(--primary-container);
  color: var(--on-primary);
  font-weight: 600;
}
.nav-item.disabled { opacity: 0.5; cursor: default; }
.nav-item .nav-soon {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.app-main { flex: 1; margin-left: 248px; min-width: 0; }

.skip-link {
  position: fixed;
  left: 12px;
  top: 8px;
  z-index: 10000;
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--on-primary);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 30;
}
.hamburger {
  background: var(--primary-tint);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  width: 38px;
  height: 38px;
  font-size: 16px;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
}
.hamburger:hover { background: var(--secondary-container); border-color: var(--primary-container); }
.topbar-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.quick-switcher-button {
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--primary-tint);
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.quick-switcher-button:hover { background: var(--secondary-container); border-color: var(--primary-container); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,20,25,0.45);
  backdrop-filter: blur(1px);
  z-index: 35;
}
.sidebar-overlay.open { display: block; }

.page { display: none; }
.page.active { display: block; animation: page-in 0.15s ease; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   Patient Mode banner + edit panel
   --------------------------------------------------------------------- */
.patient-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 28px 12px;
  background: var(--primary-tint);
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.patient-mode-on .patient-banner {
  background: var(--secondary-container);
  border-bottom-color: var(--secondary-container);
}

.home-button-row {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 28px 0;
}
body.on-dashboard .home-button-row { display: none; }
body:not(.on-dashboard) #mainContent { padding-top: 18px; }
.home-btn {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.home-btn:hover { background: var(--primary-tint); border-color: var(--primary-container); }

@media (max-width: 1100px) {
  .home-button-row { max-width: 100%; padding-inline: 22px; }
}
@media (max-width: 860px) {
  .home-button-row { padding: 10px 16px 0; }
  body:not(.on-dashboard) #mainContent { padding-top: 12px; }
}

.patient-tabs-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.patient-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  flex: 1;
  min-width: 0;
}
.patient-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
  font-family: inherit;
  cursor: pointer;
  touch-action: pan-x;
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.patient-tab:hover { border-color: var(--primary-container); }
.patient-tab.organize-dragging { cursor: grabbing; opacity: 0.45; }
.patient-tab.insert-before::before,
.patient-tab.insert-after::after {
  background: var(--clinical-green-dark);
  border-radius: 2px;
  content: "";
  height: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  z-index: 2;
}
.patient-tab.insert-before::before { left: -5px; }
.patient-tab.insert-after::after { right: -5px; }
.patient-tab.keyboard-destination { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.patient-tabs.patient-tabs-drop-end { box-shadow: inset -3px 0 0 var(--clinical-green-dark); }
.patient-tab-divider {
  align-items: center;
  background: var(--primary-tint);
  border: 1px solid var(--secondary-container);
  border-radius: var(--r-sm);
  color: var(--primary);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  gap: 4px;
  min-height: 26px;
  padding: 3px 8px;
  white-space: nowrap;
}
.patient-tab-divider:hover { background: var(--surface-card); border-color: var(--primary-container); }
.patient-tab-divider-caret { font-size: 12px; line-height: 1; }
.patient-tab-divider-count { color: var(--ink-muted); font-size: 10px; font-weight: 600; }
.patient-tab.active {
  background: var(--primary);
  border-color: var(--primary);
}
.patient-tab-initials {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.patient-tab.active .patient-tab-initials { color: var(--on-primary); }
.patient-tab-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-muted);
}
.patient-tab-remove:hover { background: rgba(0,0,0,0.08); color: var(--danger); }
.patient-tab.active .patient-tab-remove { color: rgba(255,255,255,0.75); }
.patient-tab.active .patient-tab-remove:hover { background: rgba(255,255,255,0.2); color: var(--on-primary); }

.patient-tab-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-card);
  border: 1px dashed var(--border-strong);
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.patient-tab-add:hover { background: var(--primary-tint); border-color: var(--primary-container); color: var(--primary); }

.patient-banner-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.patient-banner-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.patient-banner-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-block;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%233e6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='13' r='5' fill='%23fff'/%3E%3Cpath d='M10 32c1-7 4-11 10-11s9 4 10 11Z' fill='%23b6cfe6'/%3E%3Cpath d='M27 8h5a2 2 0 0 1 2 2v19a2 2 0 0 1-2 2h-5M29 14h2M29 19h2M29 24h2' stroke='%236f9db3'/%3E%3C/svg%3E");
}
.patient-summary-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}
.patient-summary-heading::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-block;
  background: center / contain no-repeat;
}
.patient-summary-heading[data-patient-icon="profile"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%233e6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='13' r='5' fill='%23fff'/%3E%3Cpath d='M10 32c1-7 4-11 10-11s9 4 10 11Z' fill='%23b6cfe6'/%3E%3Cpath d='M13 32h14' stroke='%236f9db3'/%3E%3C/svg%3E");
}
.patient-summary-heading[data-patient-icon="growth"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%233e6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='26' height='26' rx='3' fill='%23fff'/%3E%3Cpath d='M12 28h16M13 25l5-6 4 3 6-8' stroke='%236f9db3' stroke-width='2.4'/%3E%3Ccircle cx='13' cy='25' r='2' fill='%23b0d79f'/%3E%3Ccircle cx='18' cy='19' r='2' fill='%23b0d79f'/%3E%3Ccircle cx='22' cy='22' r='2' fill='%23b0d79f'/%3E%3Ccircle cx='28' cy='14' r='2' fill='%23b0d79f'/%3E%3C/svg%3E");
}
.patient-summary-heading[data-patient-icon="regimen"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%233e6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 10h18v20a3 3 0 0 1-3 3H14a3 3 0 0 1-3-3Z' fill='%23fff'/%3E%3Cpath d='M15 10V7h10v3' fill='%23b6cfe6'/%3E%3Cpath d='M14 22c2.5-3 4.5 3 7 0s4.5 3 7 0' stroke='%236f9db3'/%3E%3Ccircle cx='20' cy='16' r='1.5' fill='%23b0d79f'/%3E%3C/svg%3E");
}
.patient-summary-heading[data-patient-icon="needs"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%233e6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='7' width='22' height='27' rx='3' fill='%23fff'/%3E%3Cpath d='M15 7V5h10v2' fill='%23b6cfe6'/%3E%3Cpath d='M14 15h12M14 21h8M14 27h12' stroke='%236f9db3'/%3E%3Cpath d='m24 20 2 2 4-5' stroke='%23b0d79f'/%3E%3C/svg%3E");
}
.patient-summary-heading[data-patient-icon="nutrition"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%233e6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15h17l-2 17a3 3 0 0 1-3 2h-7a3 3 0 0 1-3-2Z' fill='%23fff'/%3E%3Cpath d='M9 15h19M13 11h12l2 4H10Z' fill='%23b6cfe6'/%3E%3Cpath d='M17 8c-2 2 3 3 1 5M22 8c-2 2 3 3 1 5' stroke='%23b0d79f'/%3E%3Cpath d='M14 22h8M15 27h6' stroke='%236f9db3'/%3E%3C/svg%3E");
}
.patient-banner-summary {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.patient-mode-on .patient-banner-summary { color: var(--primary); }

.patient-banner-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.patient-btn {
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-card);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.patient-btn:hover { background: var(--primary-tint); border-color: var(--primary-container); }
.patient-btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.patient-btn-primary:hover { background: var(--primary); border-color: var(--primary); }
.patient-btn-danger { color: var(--danger); }
.patient-btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.patient-btn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.patient-btn-inline .icon { width: 16px; height: 16px; }
.patient-btn-inline:hover { background: var(--primary-tint); color: var(--primary); }

.patient-edit-panel {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  padding: 20px 28px;
}
.patient-organize-panel { padding-bottom: 18px; }
.patient-organize-heading {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.patient-organize-heading h2 { color: var(--primary); font-size: 18px; margin: 0 0 4px; }
.patient-organize-heading p { color: var(--ink-muted); font-size: 12px; margin: 0; max-width: 70ch; }
.patient-organize-actions { display: flex; flex-shrink: 0; gap: 8px; }
.patient-organizer-list { border-top: 1px solid var(--border-subtle); margin-top: 18px; }
.patient-organizer-item { position: relative; transition: background-color 0.15s ease, opacity 0.15s ease; }
.patient-organizer-item.insert-before::before,
.patient-organizer-item.insert-after::after {
  background: var(--clinical-green-dark);
  border-radius: 2px;
  content: "";
  height: 3px;
  left: 12px;
  position: absolute;
  right: 12px;
  z-index: 2;
}
.patient-organizer-item.insert-before::before { top: -2px; }
.patient-organizer-item.insert-after::after { bottom: -2px; }
.patient-organizer-item.organize-dragging { opacity: 0.45; }
.patient-organizer-divider {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  gap: 12px;
  min-height: 48px;
  padding: 6px 0 6px 8px;
}
.patient-organizer-divider-name-wrap { flex: 1; min-width: 0; }
.patient-organizer-drag-handle {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  cursor: grab;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 16px;
  height: 32px;
  justify-content: center;
  letter-spacing: -3px;
  padding: 0 8px 0 5px;
  touch-action: none;
  width: 34px;
}
.patient-organizer-drag-handle:hover { background: var(--primary-tint); border-color: var(--secondary-container); color: var(--primary); }
.patient-organizer-drag-handle:active { cursor: grabbing; }
.patient-organizer-drag-handle[aria-pressed="true"] { background: var(--secondary-container); color: var(--primary); }
.patient-organizer-divider-name {
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  padding: 7px 8px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patient-organizer-divider-name:hover { background: var(--primary-tint); }
.patient-organizer-divider-input { max-width: 320px; min-height: 38px; width: 100%; }
.patient-organizer-divider-controls { display: flex; gap: 4px; }
.patient-organizer-collapse,
.patient-organizer-remove {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}
.patient-organizer-collapse:hover { background: var(--primary-tint); border-color: var(--secondary-container); color: var(--primary); }
.patient-organizer-remove:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.patient-organizer-empty { color: var(--ink-muted); font-size: 12px; margin: 0; min-height: 30px; padding: 8px 16px 8px 72px; }
.patient-organizer-empty.keyboard-destination { background: var(--primary-tint); color: var(--primary); outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.patient-organizer-patient {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  gap: 10px;
  min-height: 44px;
  padding: 6px 16px 6px 32px;
}
.patient-organizer-patient.active { background: var(--primary-tint); }
.patient-organizer-initials {
  align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  min-height: 28px;
  min-width: 36px;
  padding: 0 8px;
}
.patient-organizer-patient-label { color: var(--ink-muted); font-size: 12px; }
.patient-organizer-patient.active .patient-organizer-patient-label { color: var(--primary); font-weight: 600; }
.patient-organizer-patient .patient-organizer-drag-handle { margin-left: auto; }
.patient-edit-warnings {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 12px;
}
.patient-duplicate-notice { color: var(--warning-deep, var(--warning)); font-size: 11px; margin: 5px 0 0; }
.patient-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .patient-banner-info-row { flex-direction: column; align-items: flex-start; }
  .patient-banner-summary { max-width: 100%; white-space: normal; }
  .stat-row { grid-template-columns: 1fr; }
  h1 { font-size: 21px; }
}

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------------
   Quick-switcher (Ctrl+K / Cmd+K)
   --------------------------------------------------------------------- */
.qs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(36,55,64,0.45);
  display: none;
  justify-content: center;
  padding-top: min(20vh, 140px);
}
.qs-overlay.qs-open {
  display: flex;
}
.qs-dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: min(420px, 60vh);
  background: var(--surface-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-raised), 0 0 0 1px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qs-input {
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font-ui);
  color: var(--ink);
  background: transparent;
  outline: none;
}
.qs-input::placeholder { color: var(--ink-muted); }
.qs-results {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}
.qs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
}
.qs-item:hover,
.qs-active {
  background: var(--primary-tint);
  color: var(--ink);
}
.qs-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.qs-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qs-text strong { font-size: 14px; font-weight: 600; }
.qs-text small { display: none; }
.qs-kind { flex-shrink: 0; color: var(--ink-muted); }
.qs-active .qs-kind,
.qs-item:hover .qs-kind { color: var(--on-secondary-container); }
}

/* Shared calculator icon system: one monoline family (24px grid, 1.75 stroke)
   across the sidebar, dashboard cards, pinned tools, the Calculators hub, and
   the quick switcher. Each page's mark lives in --tool-icon and is painted as a
   currentColor mask, so a mark takes the ink of whatever chip holds it and the
   chip keeps its own tint underneath. Deliberately unlayered: @layer legacy
   would lose to .icon-chip's background shorthand. */
[data-page="dashboard"], [data-qs-page="dashboard"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M5.5 9.7V19h13V9.7'/%3E%3Cpath d='M9.8 19v-4.7h4.4V19'/%3E%3Cpath d='M15.9 7V4.9h1.9v3.6'/%3E%3C/svg%3E"); }
[data-page="alltools"], [data-qs-page="alltools"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='3' width='13' height='18' rx='2'/%3E%3Crect x='7.8' y='6' width='8.4' height='3' rx='.6'/%3E%3Cpath d='M8.7 12.6h0M12 12.6h0M15.3 12.6h0M8.7 15.6h0M12 15.6h0M15.3 15.6h0M8.7 18.4h0M12 18.4h0M15.3 18.4h0'/%3E%3C/svg%3E"); }
[data-page="regimen"], [data-qs-page="regimen"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2.5c.3-.5 1.7-.5 2 0 .5.7.3 1.4-.2 1.9h-1.6c-.5-.5-.7-1.2-.2-1.9z'/%3E%3Crect x='9.4' y='4.5' width='5.2' height='2.3' rx='.5'/%3E%3Cpath d='M10 6.8h4c.6 0 1 .4 1 1v10.4c0 .9-.6 1.6-1.5 1.6h-3c-.9 0-1.5-.7-1.5-1.6V7.8c0-.6.4-1 1-1z'/%3E%3Cpath d='M10.9 10h1.8M10.9 12h1.8M10.9 14h1.8'/%3E%3C/svg%3E"); }
[data-page="tubefeeds"], [data-qs-page="tubefeeds"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8.5v11h8v-11l-2-3h-4z'/%3E%3Cpath d='M8 8.5h8'/%3E%3Cpath d='M10 5.5 12 8l2-2.5'/%3E%3C/svg%3E"); }
[data-page="goalvolume"], [data-qs-page="goalvolume"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='13.5' r='8'/%3E%3Ccircle cx='10.5' cy='13.5' r='4.4'/%3E%3Cpath d='M10.5 13.5h0'/%3E%3Cpath d='M10.5 13.5 20 4'/%3E%3Cpath d='M15.5 4h4.5v4.5'/%3E%3C/svg%3E"); }
[data-page="advplan"], [data-qs-page="advplan"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='1.5'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M8 3.5v3.5M16 3.5v3.5'/%3E%3Cpath d='m8.5 14.8 2.3 2.3 4.7-4.8'/%3E%3C/svg%3E"); }
[data-page="recipes"], [data-qs-page="recipes"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='8.5' cy='7.5' rx='4' ry='1.5'/%3E%3Cpath d='M4.5 7.5v8.5c0 .8 1.8 1.5 4 1.5s4-.7 4-1.5V7.5'/%3E%3Cpath d='M14.5 15h5l-.6 3c-.1.5-.5.8-1 .8h-1.8c-.5 0-.9-.3-1-.8z'/%3E%3Cpath d='m19.3 15-.5-1.8 2.2-.6'/%3E%3C/svg%3E"); }
[data-page="renalblend"], [data-qs-page="renalblend"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5c-3.9 0-6.5 3-6.5 7s2.6 7 6.5 7c1.8 0 3-1.2 3-2.6 0-.9-.5-1.5-1.2-2 .7-.5 1.2-1.1 1.2-2s-.5-1.5-1.2-2c.7-.5 1.2-1.1 1.2-2C17 6.2 15.8 5 14 5z'/%3E%3Cpath d='M15.2 12h2.8M15.6 9.8l2.2-.7M15.6 14.2l2.2.7'/%3E%3C/svg%3E"); }
[data-page="growth"], [data-qs-page="growth"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Cpath d='m7 15 3.5-4 3 2.4L20 7'/%3E%3Cpath d='M16 7h4v4'/%3E%3C/svg%3E"); }
[data-page="cga"], [data-qs-page="cga"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 12V7'/%3E%3Cpath d='m12 12 3.4 2.4'/%3E%3Cpath d='M12 3.5v1.2M20.5 12h-1.2M12 20.5v-1.2M3.5 12h1.2'/%3E%3C/svg%3E"); }
[data-page="chylo"], [data-qs-page="chylo"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c4 5 6.5 8 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 11.5 8 8.5 12 3.5z'/%3E%3Cpath d='M9 15.5a3 3 0 0 0 2.2 2.6'/%3E%3C/svg%3E"); }
[data-page="gir"], [data-qs-page="gir"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c4 5 6.5 8 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 11.5 8 8.5 12 3.5z'/%3E%3Cpath d='M12.6 9.3 9.8 13.8h2.3l-.7 3.4 3-4.9h-2.3z'/%3E%3C/svg%3E"); }
[data-page="parenteralnutrition"], [data-qs-page="parenteralnutrition"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='5' width='10' height='12' rx='1.2'/%3E%3Cpath d='M11 5V3.8a1 1 0 0 1 2 0V5'/%3E%3Cpath d='M13.5 8h1.6M13.5 10h1.6M13.5 12h1.6'/%3E%3Cpath d='M12 17v1.8c0 1.5 1.2 2.7 2.7 2.7'/%3E%3C/svg%3E"); }
[data-page="unitconverter"], [data-qs-page="unitconverter"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13'/%3E%3Cpath d='m14 6 3 3-3 3'/%3E%3Cpath d='M20 15H7'/%3E%3Cpath d='m10 12-3 3 3 3'/%3E%3C/svg%3E"); }
[data-page="referencehub"], [data-qs-page="referencehub"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.4C10 5 7 4.6 4 5.5v12c3-.9 6-.5 8 1 2-1.5 5-1.9 8-1v-12c-3-.9-6-.5-8 1z'/%3E%3Cpath d='M12 6.4v12.1'/%3E%3Cpath d='M11 18v3l1-.8 1 .8v-3'/%3E%3C/svg%3E"); }
[data-page="reference"], [data-qs-page="reference"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3.5H6.5c-.6 0-1 .4-1 1v15c0 .6.4 1 1 1H13'/%3E%3Cpath d='M13 3.5 17 7.5H13z'/%3E%3Cpath d='M8.5 9h4M8.5 11.5h5'/%3E%3Ccircle cx='15' cy='15.5' r='3'/%3E%3Cpath d='m17.2 17.7 2.3 2.3'/%3E%3C/svg%3E"); }
[data-page="micronutrients"], [data-qs-page="micronutrients"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='16' height='12' rx='1.2'/%3E%3Cpath d='M4 10h16M4 14h16M9.3 6v12M14.6 6v12'/%3E%3C/svg%3E"); }
[data-page="estimatedneeds"], [data-qs-page="estimatedneeds"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18a8 8 0 0 1 16 0'/%3E%3Cpath d='M4 18h3M20 18h-3M6.6 11.2l1.7 1.7M12 8.2v2.4M17.4 11.2l-1.7 1.7'/%3E%3Cpath d='M12 18l3.5-2.6'/%3E%3Cpath d='M12 18h0'/%3E%3C/svg%3E"); }
[data-page="settings"], [data-qs-page="settings"] { --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='M19.2 13.2a7.4 7.4 0 0 0 0-2.4l1.9-1.5-2-3.4-2.2 1a7.4 7.4 0 0 0-2.1-1.2L14.5 3.3h-4l-.3 2.4a7.4 7.4 0 0 0-2.1 1.2l-2.2-1-2 3.4 1.9 1.5a7.4 7.4 0 0 0 0 2.4l-1.9 1.5 2 3.4 2.2-1a7.4 7.4 0 0 0 2.1 1.2l.3 2.4h4l.3-2.4a7.4 7.4 0 0 0 2.1-1.2l2.2 1 2-3.4z'/%3E%3C/svg%3E"); }

.dash-card[data-page] .dash-icon,
.qs-item[data-qs-page] .qs-icon,
.tool-launch-icon[data-page] {
  align-items: center;
  display: inline-flex;
  font-size: 0;
  justify-content: center;
}

.dash-card[data-page] .dash-icon::before,
.qs-item[data-qs-page] .qs-icon::before,
.tool-launch-icon[data-page]::before {
  background-color: currentColor;
  content: "";
  display: block;
  height: 26px;
  -webkit-mask: var(--tool-icon) center / contain no-repeat;
  mask: var(--tool-icon) center / contain no-repeat;
  width: 26px;
}

.qs-item[data-qs-page] .qs-icon { height: 28px; }
.qs-item[data-qs-page] .qs-icon::before { height: 22px; width: 22px; }
.tool-launch-icon[data-page]::before { height: 24px; width: 24px; }

.nav-item[data-page] .nav-icon {
  background-color: currentColor;
  height: 18px;
  -webkit-mask: var(--tool-icon) center / 17px 17px no-repeat;
  mask: var(--tool-icon) center / 17px 17px no-repeat;
}