/* ================================================================
           METROCARE HOSPITAL · DARK GLASS THEME
           ================================================================ */

/* ── ROOT VARIABLES ── */
:root,
[data-theme="dark"] {
  --bg-primary: #060d16;
  --bg-secondary: #0b1828;
  --bg-card: rgba(12, 28, 48, 0.75);
  --bg-card-hover: rgba(18, 38, 60, 0.85);
  --bg-glass: rgba(8, 20, 36, 0.65);
  --border-glass: rgba(0, 180, 255, 0.12);
  --border-glass-strong: rgba(0, 180, 255, 0.25);
  --text-primary: #e8f4ff;
  --text-secondary: #8ab8d8;
  --text-muted: #4a7088;
  --text-dim: #2a4a60;

  --accent-cyan: #00d4ff;
  --accent-cyan-dim: rgba(0, 212, 255, 0.12);
  --accent-cyan-glow: rgba(0, 212, 255, 0.25);
  --accent-teal: #2ed573;
  --accent-blue: #4f8ef7;
  --accent-gold: #ffda79;
  --accent-red: #ff4757;
  --accent-pink: #ff6b9d;
  --pain-scale-2: #80ff00;
  --pain-scale-4: #ff8800;

  --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(0, 212, 255, 0.06);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --header-height: 52px;
  /* Panel widths are fluid: they track the viewport between a hard floor and a
     ceiling instead of snapping at each breakpoint. The 3D viewer is flex:1, so
     whatever these don't take, it gets. */
  --sidebar-width: clamp(200px, 16vw, 280px);
  --sidebar-collapsed: 0px;
  --panel-min-width: 200px;
  --panel-max-width: 380px;
  /* Off-canvas drawer / bottom-sheet geometry (≤1200px). */
  --drawer-width: min(320px, 86vw);
  --sheet-height: min(82dvh, 720px);
  --sheet-ease: 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── LIGHT THEME ── */
/* Palette aligned with the EHR (frontend/src/index.css): page #F4F7FB,
           white surfaces, slate text, sky-blue accent #0284C7. Only light-mode
           tokens are overridden here; the dark block above is untouched. The
           cyan chrome accent is remapped to the EHR sky-blue; status accents
           (teal/gold/red/pink) intentionally inherit from :root. */
[data-theme="light"] {
  /* UX.md Doctor treatment — Cream Clínico surface, Marino/Pizarra text, Surgical Teal accent.
               Status accents (--accent-teal/gold/red/pink) + the 3D organ pain scale are preserved. */
  --bg-primary: #fbf9f5;
  /* Cream Clinical */
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f6f3ec;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --border-glass: rgba(15, 100, 102, 0.12);
  --border-glass-strong: rgba(15, 100, 102, 0.25);
  --text-primary: #1a2e40;
  /* Marino profundo */
  --text-secondary: #536473;
  /* Pizarra suave */
  --text-muted: #536473;
  --text-dim: #94a3b8;
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 30px rgba(15, 100, 102, 0.06);

  /* Chrome accent: cyan → Surgical Teal #0F6466 (UX.md Doctor; light only) */
  --accent-cyan: #0f6466;
  --accent-cyan-dim: rgba(15, 100, 102, 0.12);
  --accent-cyan-glow: rgba(15, 100, 102, 0.25);

  /* Status/vital accents: the dark theme's neon values (bright green/gold/red/
     blue/pink) fail text contrast against this theme's white/cream surfaces —
     #ffda79 gold on white is close to unreadable. Darkened, hue-matched
     equivalents (DESIGN_SYSTEM.md §1 semantic values where a family exists;
     vetted Tailwind 700-weight shades otherwise) restore ~4.5:1+ contrast for
     both the text and small-fill (health bar / pain-scale) usages that share
     these variables. */
  --accent-teal: #047857;
  --accent-gold: #b45309;
  --accent-red: #b91c1c;
  --accent-blue: #1d4ed8;
  --accent-pink: #be185d;
  --pain-scale-2: #4d7c0f;
  --pain-scale-4: #c2410c;

  /* Cobalt keyboard-focus indicator (UX.md 2.4.7) */
  --focus: #0a4fa8;
  /* Atkinson Hyperlegible body (Inter for headings via rule below); mono numbers stay JetBrains */
  --font-sans: "Atkinson Hyperlegible", "Inter", -apple-system,
    BlinkMacSystemFont, sans-serif;
}

/* ═══ UX.md DOCTOR — light-theme additions ═══
           Inter headings, tabular numerals, Cobalt focus rings, 44px primary targets,
           and a gentle proportional readability lift for the dense micro-typography.
           Scoped to [data-theme="light"] so the dark-glass theme is untouched. */

/* Gentle proportional readability lift (rem-based sizes scale ~6%) */
[data-theme="light"] {
  font-size: 17px;
}

/* Body → tabular figures (mono data already aligns) */
[data-theme="light"] body {
  font-variant-numeric: tabular-nums;
}

/* Inter for headings/titles (body stays Atkinson Hyperlegible via --font-sans) */
[data-theme="light"] .mc-logo-title,
[data-theme="light"] .mc-card-title,
[data-theme="light"] .info-panel-header,
[data-theme="light"] .sc-group-title,
[data-theme="light"] .event-log-modal-title,
[data-theme="light"] .info-organ-name,
[data-theme="light"] .pname,
[data-theme="light"] .style-picker-header,
[data-theme="light"] .pdf-modal-title,
[data-theme="light"] .pdf-report-title,
[data-theme="light"] .pdf-section-title {
  font-family: "Inter", var(--font-sans);
}

/* Cobalt keyboard focus ring (UX.md 2.4.7) — additive over the app's custom focus */
[data-theme="light"] button:focus-visible,
[data-theme="light"] a:focus-visible,
[data-theme="light"] input:focus-visible,
[data-theme="light"] select:focus-visible,
[data-theme="light"] textarea:focus-visible,
[data-theme="light"] [tabindex]:focus-visible {
  outline: 2px solid var(--focus, #0a4fa8) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(10, 79, 168, 0.3) !important;
}

/* 44px minimum on PRIMARY controls (UX.md 2.5.5) — action buttons + main search */
[data-theme="light"] .mc-header-actions button,
[data-theme="light"] .sidebar-search input,
[data-theme="light"] .mc-btn,
[data-theme="light"] .pdf-btn,
[data-theme="light"] .pdf-modal button {
  min-height: 44px;
}

/* These three rules hardcode a second hue stop tuned to complement the dark
   theme's bright pink/gold accents. Overridden here so the gradient/tint
   reads correctly against the light theme's darkened accent-pink/gold. */
[data-theme="light"] .mc-sex-btn.active-f {
  background: rgba(190, 24, 93, 0.1);
}
[data-theme="light"] .muscle-bar-fill.pink {
  background: linear-gradient(90deg, var(--accent-pink), #e05a94);
}
[data-theme="light"] .muscle-bar-fill.gold {
  background: linear-gradient(90deg, var(--accent-gold), #d97b1f);
}

/* .mc-btn.primary and .patient-avatar hardcode a near-black text color
   (#001a2e) tuned for the dark theme's bright neon accent-cyan background.
   In light theme accent-cyan resolves to a dark teal (#0F6466), which makes
   that text nearly invisible against it — swap to white, matching
   DESIGN_SYSTEM.md's on-accent-medico pairing for this exact accent value. */
[data-theme="light"] .mc-btn.primary {
  color: #ffffff;
}
[data-theme="light"] .patient-avatar {
  background: linear-gradient(135deg, var(--accent-cyan), #0a3d3e);
  color: #ffffff;
}

/* ── RESET & BASE ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  height: 100vh;
  /* dvh tracks the collapsing URL bar on mobile browsers; the vh line above is
     the fallback for engines without dvh. */
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  transition:
    background 0.4s,
    color 0.3s;
}

/* ── SVG ICON LIBRARY ── */
.mc-icon {
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-block;
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-glass-strong);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

/* ── HEADER ── */
.mc-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-glass);
  padding: 0 20px;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  position: relative;
  transition:
    background 0.3s,
    border-color 0.3s;
  z-index: 100;
}
.mc-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-cyan),
    var(--accent-cyan),
    transparent
  );
  opacity: 0.3;
}

.mc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.mc-logo-icon {
  width: 32px;
  height: 32px;
  /* Match the EHR CLINICZ health mark: role-accent teal (Surgical Teal in the doctor light theme) */
  background: linear-gradient(135deg, var(--accent-cyan), #14b8a6 65%, #0891b2);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(99, 91, 255, 0.45);
}
.mc-logo-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}
.mc-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.mc-logo-title {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  /* Gradient wordmark, like the EHR navbar */
  background: linear-gradient(90deg, #e2e8f0, #a5b4fc 55%, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c7d2fe; /* fallback if clip unsupported */
}
.mc-logo-sub {
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.mc-header-divider {
  width: 1px;
  height: 24px;
  background: var(--border-glass-strong);
  flex-shrink: 0;
}

.mc-patient-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-secondary);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  /* Was flex-shrink:0 — a long patient name pushed the Export/theme buttons
     off the header. Now the badge yields and the name ellipsises instead. */
  flex-shrink: 1;
  min-width: 0;
}
.mc-patient-badge strong {
  color: var(--text-primary);
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-patient-badge .id {
  color: var(--accent-cyan);
  font-weight: 600;
}
.mc-patient-badge .age {
  color: var(--accent-gold);
}

.mc-header-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.mc-header-vitals {
  /*display: flex;*/
  display: none;
  align-items: center;
  gap: 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 3px 14px;
  height: 32px;
}
.mc-vital-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-secondary);
}
.mc-vital-item .val {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.72rem;
}
.mc-vital-item .val.green {
  color: var(--accent-teal);
}
.mc-vital-item .val.cyan {
  color: var(--accent-cyan);
}
.mc-vital-item .val.gold {
  color: var(--accent-gold);
}
.mc-vital-sep {
  width: 1px;
  height: 16px;
  background: var(--border-glass);
}

.mc-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mc-shortcut-hint {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  display: none;
}
@media (min-width: 1200px) {
  .mc-shortcut-hint {
    display: inline;
  }
}

.mc-input {
  background: var(--bg-primary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  padding: 5px 8px;
  outline: none;
  transition: border-color 0.15s;
}
.mc-input:focus {
  border-color: var(--accent-cyan);
}

.mc-btn {
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.mc-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.mc-btn.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}
.mc-btn.primary {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #001a2e;
  font-weight: 600;
}
.mc-btn.primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 20px var(--accent-cyan-glow);
}
.mc-btn.icon-only {
  padding: 4px 7px;
  font-size: 0.7rem;
}

.mc-sex-toggle {
  display: flex;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.mc-sex-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.04em;
}
.mc-sex-btn:first-child {
  border-right: 1px solid var(--border-glass);
}
.mc-sex-btn.active {
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}
.mc-sex-btn.active-f {
  color: var(--accent-pink);
  background: rgba(255, 107, 157, 0.1);
}

#theme-toggle {
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
}
#theme-toggle:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

#patient-select {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
  max-width: 180px;
  transition: border-color 0.15s;
}
#patient-select:focus {
  border-color: var(--accent-cyan);
}
#patient-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* ── APP LAYOUT ── */
.mc-app {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 0;
}

/* ════════════════════════════════════════════════
           SIDEBAR — new styled organ parts panel
           ════════════════════════════════════════════════ */

.mc-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  transition:
    width 0.25s ease,
    min-width 0.25s ease,
    background 0.3s,
    border-color 0.3s;
  position: relative;
  z-index: 10;
}

.mc-sidebar.collapsed {
  width: 0;
  min-width: 0;
  border-right: none;
  overflow: hidden;
}

/* Sidebar toggle button (floating on the edge) */
.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  z-index: 20;
  width: 18px;
  height: 48px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
  font-size: 0.55rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  padding: 0 3px;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
}
.sidebar-toggle:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}
.sidebar-toggle .arrow {
  transition: transform 0.25s ease;
  display: inline-block;
}
.mc-sidebar.collapsed .sidebar-toggle .arrow {
  transform: rotate(180deg);
}
/* When collapsed, the toggle sits at the edge */
.mc-sidebar.collapsed .sidebar-toggle {
  right: -18px;
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* When expanded, toggle is at the right edge of sidebar */
.mc-sidebar:not(.collapsed) .sidebar-toggle {
  right: -18px;
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.sidebar-search {
  padding: 10px 14px 8px 14px;
  flex-shrink: 0;
  position: relative;
}
.sidebar-search .search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}
.sidebar-search input {
  width: 100%;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  padding: 5px 10px 5px 26px;
  outline: none;
  transition: border-color 0.15s;
}
.sidebar-search input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}
.sidebar-search input:focus {
  border-color: var(--accent-cyan);
}

.sys-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 14px 8px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-glass);
}
.sys-chip {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.48rem;
  font-weight: 500;
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sys-chip:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.sys-chip.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

.sidebar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 8px 14px;
  flex-shrink: 0;
  gap: 8px;
  border-bottom: 1px solid var(--border-glass);
}
.sidebar-controls #select-all-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.5rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: 0.04em;
}
.sidebar-controls #select-all-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.sidebar-controls #select-all-btn.all-selected {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  background: rgba(46, 213, 115, 0.08);
}
.sidebar-controls #mode-badge {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  padding: 2px 6px;
  background: var(--bg-glass);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
}

.overview-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 10px 4px 10px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.12s;
  flex-shrink: 0;
}
.overview-nav-item:hover {
  background: var(--accent-cyan-dim);
}
.overview-nav-item.active {
  background: var(--accent-cyan-dim);
  color: var(--accent-cyan);
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--border-glass);
}
.guide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.guide-btn:hover,
.guide-btn.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

#parts-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#parts-list::-webkit-scrollbar {
  width: 2px;
}

.part-category {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.part-cat-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
  user-select: none;
  position: relative;
}
.part-cat-header:hover {
  background: var(--accent-cyan-dim);
}
.cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.cat-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-count {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: auto;
  padding: 0 4px;
  opacity: 0;
  transition: opacity 0.12s;
}
.part-cat-header:hover .cat-count {
  opacity: 1;
}
.cat-arrow {
  color: var(--text-dim);
  transition: transform 0.2s;
  display: inline-flex;
  margin-left: 2px;
  flex-shrink: 0;
}
.cat-arrow.open {
  transform: rotate(90deg);
}
.part-cat-header .select-all-btn {
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.52rem;
  padding: 1px 6px;
  cursor: pointer;
  transition: all 0.12s;
  margin-left: 2px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  opacity: 0;
}
.part-cat-header:hover .select-all-btn {
  opacity: 1;
}
.part-cat-header .select-all-btn.all-selected {
  opacity: 1;
}
.part-cat-header .select-all-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.part-cat-header .select-all-btn.all-selected {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  background: rgba(46, 213, 115, 0.08);
}

.parts-items {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding-left: 16px;
  margin-bottom: 2px;
}
.parts-items.open {
  display: flex;
}

.part-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s;
  font-size: 0.7rem;
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.part-item:hover {
  background: var(--accent-cyan-dim);
  border-color: var(--border-glass);
  color: var(--text-primary);
}
.part-item.selected {
  background: var(--accent-cyan-dim);
  border-color: rgba(0, 212, 255, 0.15);
  color: var(--accent-cyan);
}
.part-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.45rem;
  flex-shrink: 0;
  color: var(--accent-cyan);
  background: var(--bg-primary);
  transition: all 0.12s;
}
.part-item.selected .part-check {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}
.part-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── LEFT DASHBOARD PANEL ── */
.mc-dashboard-left {
  /* Was `width:280px; min-width:380px` — min beat width, so the panel was
     permanently pinned at 380px. Fluid between a readable floor and the same
     ceiling; the drag handle still overrides `width` inline. */
  width: clamp(240px, 22vw, 380px);
  min-width: 240px;
  max-width: 380px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  transition:
    background 0.3s,
    border-color 0.3s;
}

/* ── LEFT DASHBOARD PANEL ── */
.mc-panel-scroll {
  flex: 1;
  overflow-y: auto; /* panel itself scrolls */
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* Each card – bigger height, scrollable */
.mc-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition:
    background 0.3s,
    border-color 0.3s;
  box-shadow: var(--shadow-card);
  overflow: hidden;

  /* --- NEW: make the card itself scrollable --- */
  /*max-height: 280px;*/ /* adjust to your desired card height */
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  /* Skip layout/paint for cards scrolled out of .mc-panel-scroll. The
     intrinsic size keeps the scrollbar honest, so nothing jumps (CLS) when a
     card comes into view. */
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}
/* Uniform card height is a desktop affordance; on a sheet the card should be
   as tall as its content and no taller. */
@media (min-width: 901px) {
  .mc-card {
    min-height: 150px;
  }
}

/* .mc-panel-scroll is a flex column, so its cards defaulted to flex-shrink:1
   and every card got squeezed by however much the stack overran — the second
   row of Patient Overview, most of Patient History, etc. were pushed behind
   the card's own scrollbar. Cards now keep their natural height (the PANEL is
   what scrolls), capped so a long problem list can't run away with the
   column; past the cap the card scrolls internally, which is what its
   pre-existing `overflow-y:auto` was for. */
.mc-panel-scroll > .mc-card {
  flex-shrink: 0;
  max-height: clamp(200px, 45dvh, 440px);
}
.mc-card:hover {
  border-color: var(--border-glass-strong);
}

.mc-card-title {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mc-card-title .badge {
  font-family: var(--font-sans);
  font-size: 0.48rem;
  background: var(--accent-cyan-dim);
  color: var(--accent-cyan);
  padding: 1px 7px;
  border-radius: 10px;
  border: 1px solid rgba(0, 212, 255, 0.15);
}

.vitals-grid {
  display: grid;
  /* auto-fit: 2-up in a narrow desktop column, 3-4-up across a wide sheet,
     1-up at 320px — without a breakpoint for each. */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
}
.vital-dash {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 7px 8px;
  text-align: center;
  transition: border-color 0.2s;
}
.vital-dash .label {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.vital-dash .value {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}
.vital-dash .unit {
  font-size: 0.5rem;
  color: var(--text-muted);
  font-weight: 400;
}
.vital-dash .status {
  font-size: 0.45rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.vital-dash.bpm .value {
  color: var(--accent-blue);
}
.vital-dash.bp .value {
  color: var(--accent-blue);
}
.vital-dash.o2 .value {
  color: var(--accent-blue);
}
.vital-dash.temp .value {
  color: var(--accent-gold);
}
.vital-dash.bmi .value {
  color: var(--accent-pink);
}

/* Organs without a clinical assessment for the loaded patient are dimmed so
           a doctor can tell at a glance which structures have data. Toggled via the
           `dimmed` class by buildPartsList() (sidebar) + rebuildOverlayCards() (3D). */
.part-item.dimmed {
  opacity: 0.4;
  filter: grayscale(0.45);
}
.part-item.dimmed.selected {
  opacity: 1;
  filter: none;
}
.part-category.dimmed {
  opacity: 0.4;
  filter: grayscale(0.45);
}
.organ-label-card.dimmed {
  opacity: 0.45;
  filter: grayscale(0.5);
}

.genomic-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.genomic-item {
  flex: 1;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  text-align: center;
}
.genomic-item .label {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.genomic-item .value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-cyan);
}
.genomic-item .sub {
  font-size: 0.48rem;
  color: var(--text-muted);
}

.risk-text {
  font-size: 0.62rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--bg-glass);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent-gold);
}

.muscle-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.muscle-bar-wrap {
  flex: 1;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
}
.muscle-bar-wrap .label {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}
.muscle-bar-track {
  height: 4px;
  background: var(--bg-primary);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 3px;
}
.muscle-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-teal));
}
.muscle-bar-fill.pink {
  background: linear-gradient(90deg, var(--accent-pink), #ff8aae);
}
.muscle-bar-fill.gold {
  background: linear-gradient(90deg, var(--accent-gold), #f0c94d);
}

.health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.health-item {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}
.health-item .label {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}
.health-item .bar {
  height: 3px;
  background: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
}
.health-item .bar .fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}
.health-item .bar .fill.high {
  background: var(--accent-teal);
}
.health-item .bar .fill.medium {
  background: var(--accent-gold);
}
.health-item .bar .fill.low {
  background: var(--accent-red);
}

/* ── ORGAN FUNCTION MODELING — FIXED OVERFLOW ── */
.organ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  overflow: hidden;
  width: 100%;
}

.organ-chip {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}
.organ-chip:hover {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}
.organ-chip .icon {
  font-size: 14px;
  flex-shrink: 0;
}
.organ-chip .name {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.organ-chip .status {
  margin-left: auto;
  font-size: 0.45rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}
.organ-chip .status.ok {
  color: var(--accent-teal);
  background: rgba(46, 213, 115, 0.12);
}
.organ-chip .status.warn {
  color: var(--accent-gold);
  background: rgba(255, 218, 121, 0.12);
}
.organ-chip .status.danger {
  color: var(--accent-red);
  background: rgba(255, 68, 68, 0.12);
}

.timeline-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.timeline-item {
  flex: 1;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.timeline-item:hover {
  border-color: var(--accent-cyan);
}
.timeline-item .label {
  font-family: var(--font-mono);
  font-size: 0.38rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.timeline-item .val {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-cyan);
}
.timeline-item.active {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}
.timeline-item .sub {
  font-size: 0.42rem;
  color: var(--text-muted);
}

.sensor-row {
  display: flex;
  gap: 6px;
}
.sensor-item {
  flex: 1;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  text-align: center;
}
.sensor-item .label {
  font-family: var(--font-mono);
  font-size: 0.38rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.sensor-item .val {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-teal);
}
.sensor-item .val.warn {
  color: var(--accent-gold);
}
.sensor-item .val.danger {
  color: var(--accent-red);
}

.event-log {
  max-height: 80px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  color: var(--text-muted);
  padding-right: 4px;
}
.event-log .entry {
  padding: 2px 6px;
  border-left: 2px solid var(--border-glass);
  display: flex;
  gap: 8px;
  align-items: center;
}
.event-log .entry .time {
  color: var(--text-dim);
  font-size: 0.45rem;
  flex-shrink: 0;
}
.event-log .entry .msg {
  color: var(--text-secondary);
}
.event-log .entry .msg .highlight {
  color: var(--accent-cyan);
}

/* ── Event log restore button ── */
.log-restore-btn {
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.48rem;
  padding: 0px 4px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: all 0.12s;
  line-height: 1.4;
}
.log-restore-btn:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}
.event-log .entry {
  align-items: center;
}

/* ── Event log card: clickable to expand ── */
.mc-card-clickable {
  cursor: pointer;
  position: relative;
}
.mc-card-clickable:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-glass-strong);
}
.mc-card-clickable .mc-card-title span:first-child::after {
  content: "⤢";
  margin-left: 6px;
  color: var(--text-dim);
  font-size: 0.6rem;
  vertical-align: middle;
}

/* ── Event log modal ── */
.event-log-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 12, 0.65);
  backdrop-filter: blur(4px);
  /* softened below for light mode */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
}
.event-log-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}
.event-log-modal {
  width: min(640px, 92vw);
  max-height: min(720px, 86vh);
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
}
.event-log-modal-backdrop.active .event-log-modal {
  transform: translateY(0) scale(1);
}
.event-log-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-glass);
  flex-shrink: 0;
}
.event-log-modal-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.event-log-modal-close {
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Shared X-icon mask, reused by every modal-close / search-clear button
           so a single rule fixes them everywhere instead of touching each
           instance's markup — respects currentColor for hover/theme. */
.event-log-modal-close::before,
.event-log-modal-search-clear::before,
.pdf-modal-close::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.event-log-modal-close:hover {
  color: var(--accent-red);
  border-color: rgba(255, 71, 87, 0.4);
}
.event-log-modal-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 18px;
  padding: 6px 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.event-log-modal-search:focus-within {
  border-color: var(--accent-cyan);
}
.event-log-modal-search-icon {
  font-size: 0;
  opacity: 0.6;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.event-log-modal-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.65rem;
}
.event-log-modal-search input::placeholder {
  color: var(--text-dim);
}
.event-log-modal-search-clear {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0;
  align-items: center;
  justify-content: center;
  padding: 2px;
  flex-shrink: 0;
}
.event-log-modal-search-clear:hover {
  color: var(--accent-red);
}
.event-log-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
}
.event-log-modal-body .entry {
  padding: 7px 10px;
  border-left: 2px solid var(--border-glass);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--bg-glass);
  transition:
    background 0.15s,
    border-color 0.15s;
}
.event-log-modal-body .entry:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-glass-strong);
}
.event-log-modal-body .entry .time {
  color: var(--text-dim);
  font-size: 0.55rem;
  flex-shrink: 0;
  width: 92px;
}
.event-log-modal-body .entry .msg {
  color: var(--text-secondary);
  flex: 1;
}
.event-log-modal-body .entry .msg .highlight {
  color: var(--accent-cyan);
}
.event-log-modal-body .log-restore-btn {
  font-size: 0.58rem;
  padding: 2px 7px;
}
@media (max-width: 520px) {
  .event-log-modal-body .entry {
    flex-wrap: wrap;
  }
  .event-log-modal-body .entry .time {
    width: auto;
  }
}

.resize-handle {
  position: relative;
  z-index: 50;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  width: 5px;
  background: transparent;
  transition: background 0.15s;
  user-select: none;
}
.resize-handle:hover,
.resize-handle.dragging {
  background: var(--accent-cyan-dim);
}
.resize-handle::after {
  content: "";
  display: block;
  width: 1px;
  height: 24px;
  border-radius: 2px;
  background: var(--border-glass-strong);
}
.resize-handle:hover::after,
.resize-handle.dragging::after {
  background: var(--accent-cyan);
}

/* ── VIEWER ── */
.mc-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  /* min-width:0 lets the flex item actually shrink; the viewer's floor is
     enforced by .viewer-area's min-height instead, so the canvas can never be
     squeezed to nothing but also never forces the row to overflow sideways. */
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

.viewer-toolbar {
  padding: 6px 14px;
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  flex-wrap: wrap;
  min-height: 36px;
  flex-shrink: 0;
  transition:
    background 0.3s,
    border-color 0.3s;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  max-height: 40px;
}
.tag {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--accent-cyan-dim);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 1px 6px 1px 5px;
  font-size: 0.58rem;
  color: var(--accent-cyan);
  flex-shrink: 0;
}
.tag-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tag-x {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 8px;
  margin-left: 1px;
}
.tag-x:hover {
  color: var(--accent-red);
}
.tags-overflow {
  font-size: 0.58rem;
  color: var(--text-muted);
  align-self: center;
}

.viewer-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: clamp(240px, 45dvh, 100%);
}
#viewer-canvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  cursor: grab;
  /* The canvas owns every gesture inside it (orbit + pinch, see 05-viewer.js);
     without this the browser scrolls/zooms the page mid-drag on touch. */
  touch-action: none;
}
#viewer-canvas:active {
  cursor: grabbing;
}

.obj-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-primary);
  z-index: 10;
}
.obj-loading.active {
  display: flex;
}
.obj-loading span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--accent-cyan);
  letter-spacing: 0.08em;
}
.obj-progress-bar {
  width: 160px;
  height: 2px;
  background: var(--border-glass);
  border-radius: 2px;
  overflow: hidden;
}
.obj-progress-fill {
  height: 100%;
  background: var(--accent-cyan);
  border-radius: 2px;
  width: 0%;
  transition: width 0.2s;
  box-shadow: 0 0 12px var(--accent-cyan-glow);
}
.obj-progress {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-muted);
  min-width: 140px;
  text-align: center;
}
.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border-glass);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#obj-hover-tooltip {
  position: absolute;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 0.6rem;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  pointer-events: none;
  z-index: 999;
  display: none;
  white-space: nowrap;
  box-shadow: 0 2px 16px var(--accent-cyan-glow);
  letter-spacing: 0.04em;
}

.obj-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 0.58rem;
  color: var(--text-muted);
  line-height: 1.6;
  pointer-events: none;
  display: none;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.obj-badge.show {
  display: block;
}
.obj-badge strong {
  color: var(--text-primary);
}

.obj-btn {
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.58rem;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all 0.12s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}
.obj-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.obj-btn.active-ctrl {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}
.obj-btn select,
.obj-btn input {
  background: var(--bg-primary);
  border: 1px solid var(--border-glass);
  border-radius: 2px;
  color: var(--text-primary);
  font-size: 0.6rem;
  padding: 2px 4px;
  font-family: var(--font-sans);
}
.obj-btn input[type="number"] {
  width: 60px;
  text-align: right;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
}
.obj-btn input[type="range"] {
  accent-color: var(--accent-cyan);
  height: 2px;
  width: 60px;
}

/* ── INFO PANEL ── */
.mc-info-panel {
  width: clamp(220px, 20vw, 360px);
  min-width: 200px;
  max-width: 380px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  transition:
    background 0.3s,
    border-color 0.3s;
}

.info-panel-header {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  transition:
    background 0.3s,
    border-color 0.3s;
}
.info-panel-header .icon {
  font-size: 16px;
}
.info-panel-header .label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.info-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}

.info-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-muted);
  gap: 8px;
  padding: 20px;
}
.info-empty .icon {
  font-size: 32px;
  opacity: 0.2;
}
.info-empty p {
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.info-empty .shortcuts {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  color: var(--text-dim);
  line-height: 1.8;
}

/* Keyboard-shortcut guide popover, opened from the sidebar's "Guide" button */
.guide-popup {
  position: fixed;
  z-index: 9999;
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  width: 300px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  padding: 14px;
}
.guide-popup .sc-guide {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.guide-popup .sc-group-title {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-cyan, #22d3ee);
  font-weight: 700;
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
}
.guide-popup .sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
.guide-popup .sc-item,
.guide-popup .sc-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.56rem;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.5;
}
.guide-popup .sc-row {
  justify-content: flex-start;
  padding: 1px 0;
}
.guide-popup .sc-keys {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  min-width: 62px;
}
.guide-popup .sc-plus {
  color: var(--text-dim, #64748b);
  font-size: 0.5rem;
}
.guide-popup kbd.sc-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
  background: var(--bg-card, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.12));
  border-bottom-width: 2px;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.info-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.65rem;
  padding: 24px;
  font-family: var(--font-mono);
}
.info-loading.active {
  display: flex;
}
.info-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-glass);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.info-error {
  display: none;
  background: rgba(255, 71, 87, 0.06);
  border: 1px solid rgba(255, 71, 87, 0.15);
  border-radius: var(--radius-sm);
  margin: 8px 0;
  font-size: 0.65rem;
  color: var(--accent-red);
  line-height: 1.5;
  padding: 8px 10px;
}
.info-error.visible {
  display: block;
}

.info-content {
  display: none;
}
.info-content.visible {
  display: block;
}

.info-organ-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: -0.02em;
}
.info-organ-cat {
  font-size: 0.58rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.info-cat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.info-divider {
  height: 1px;
  background: var(--border-glass);
  margin: 10px 0;
}
.info-section-label {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.info-summary-text {
  font-size: 0.68rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.info-facts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.info-fact {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  transition:
    background 0.3s,
    border-color 0.3s;
}
.info-fact-icon {
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
}
.info-fact-icon .mc-icon {
  color: var(--accent-teal);
}
.info-fact.profile-hint {
  background: rgba(77, 240, 194, 0.05);
  border-color: rgba(77, 240, 194, 0.15);
}
.info-fact-text {
  font-size: 0.65rem;
  color: var(--text-secondary);
  line-height: 1.5;
  min-width: 0;
}
.info-fact-text strong {
  color: var(--text-primary);
  display: block;
  font-size: 0.6rem;
  margin-bottom: 1px;
}

/* ── Organ trend & "since last visit" delta ── */
.trend-delta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.trend-delta-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  font-family: var(--font-mono);
}
.trend-delta-label {
  font-size: 0.5rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.trend-delta-val {
  font-size: 0.62rem;
  color: var(--text-primary);
  font-weight: 600;
}
.trend-delta-unit {
  font-size: 0.5rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 1px;
}
.trend-delta-arrow {
  font-size: 0.68rem;
  font-weight: 700;
}
.trend-empty {
  font-size: 0.6rem;
  color: var(--text-dim);
  font-style: italic;
}
.trend-chart-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.trend-chart-row {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 6px 8px 4px;
}
.trend-chart-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.trend-chart-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.trend-chart-name {
  font-size: 0.56rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1;
}
.trend-chart-last {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-primary);
  font-weight: 600;
}
.trend-chart-svg {
  display: block;
  width: 100%;
  height: 32px;
}

.patient-assess-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-cyan-dim);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin-bottom: 8px;
  font-size: 0.62rem;
  color: var(--accent-cyan);
}
.patient-assess-badge .badge-name {
  font-weight: 600;
}
.no-assess-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 71, 87, 0.05);
  border: 1px solid rgba(255, 71, 87, 0.1);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin-bottom: 8px;
  font-size: 0.62rem;
  color: #ff8888;
}

.patient-profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-card);
}
.patient-profile-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.patient-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-cyan), #0090cc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  color: #001a2e;
  font-weight: 700;
  box-shadow: 0 0 12px var(--accent-cyan-glow);
}
.patient-name-block .pname {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
}
.patient-name-block .pid {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.patient-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.patient-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.patient-field-key {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.patient-field-val {
  font-size: 0.65rem;
  color: var(--text-primary);
}

.active-badge {
  flex-shrink: 0;
  font-size: 0.56rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.active-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.active-badge.is-active {
  color: var(--accent-teal);
  background: rgba(46, 213, 115, 0.1);
}
.active-badge.is-inactive {
  color: var(--text-muted);
  background: var(--bg-glass);
}

.profile-edit-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.profile-edit-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.contact-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border-glass);
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  color: var(--text-secondary);
}
.contact-row .mc-icon {
  color: var(--text-dim);
}

.vital-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.vital-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-left: 3px solid var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  box-shadow: var(--shadow-card);
}
.vital-card-wide {
  grid-column: 1 / -1;
}
.vital-card-label {
  font-family: var(--font-mono);
  font-size: 0.46rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.vital-card-val {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
}
.vital-card-unit {
  font-size: 0.55rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 3px;
}
.vital-card-status {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-top: 1px;
  min-height: 0.7em;
}
.vital-card-spark {
  margin-top: 4px;
  min-height: 20px;
}
.vital-card-spark .trend-chart-svg {
  height: 22px;
}

#info-edit-btn {
  display: none;
  padding: 2px 8px;
  font-size: 0.58rem;
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all 0.12s;
}
#info-edit-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.edit-field-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg-card);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
}
.edit-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.edit-field-key {
  background: transparent;
  border: none;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  outline: none;
  width: 100%;
}
.edit-field-key:focus {
  color: var(--accent-cyan);
}
.edit-field-value {
  background: var(--bg-primary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  padding: 4px 6px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.edit-field-value:focus {
  border-color: var(--accent-cyan);
}
/* new styles for array editing */
.edit-array-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.edit-array-item {
  display: flex;
  gap: 4px;
  align-items: center;
}
.edit-array-value {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  padding: 4px 6px;
  outline: none;
}
.edit-array-value:focus {
  border-color: var(--accent-cyan);
}
.remove-array-item-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
}
.remove-array-item-btn:hover {
  color: var(--accent-red);
}
.add-array-item-btn {
  background: var(--accent-cyan-dim);
  border: 1px dashed rgba(0, 212, 255, 0.2);
  border-radius: var(--radius-sm);
  color: var(--accent-cyan);
  font-size: 0.55rem;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 2px;
  align-self: flex-start;
}
.add-array-item-btn:hover {
  background: var(--accent-cyan-dim);
  border-color: var(--accent-cyan);
}
/* Object fields */
.edit-object-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.edit-object-property {
  display: flex;
  gap: 6px;
  align-items: center;
}
.edit-object-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 60px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.edit-object-value {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  padding: 4px 6px;
  outline: none;
}
.edit-object-value:focus {
  border-color: var(--accent-cyan);
}
.edit-simple-value {
  background: var(--bg-primary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  padding: 4px 6px;
  outline: none;
  width: 100%;
}
.edit-simple-value:focus {
  border-color: var(--accent-cyan);
}
.remove-field-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  padding: 1px 3px;
}
.remove-field-btn:hover {
  color: var(--accent-red);
}
.add-field-btn {
  background: var(--accent-cyan-dim);
  border: 1px dashed rgba(0, 212, 255, 0.2);
  border-radius: var(--radius-sm);
  color: var(--accent-cyan);
  font-size: 0.6rem;
  padding: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 4px;
}
.add-field-btn:hover {
  background: var(--accent-cyan-dim);
  border-color: var(--accent-cyan);
}

#info-edit-actions {
  display: none;
  gap: 4px;
  align-items: center;
}

#toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.toast {
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 6px 16px;
  font-size: 0.68rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  animation:
    toastIn 0.25s ease,
    toastOut 0.3s ease 2.2s forwards;
  white-space: nowrap;
}
.toast.success {
  border-color: rgba(46, 213, 115, 0.35);
}
.toast.error {
  border-color: rgba(255, 71, 87, 0.35);
}
.toast.info {
  border-color: rgba(0, 212, 255, 0.35);
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes toastOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#organ-overlay-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: visible;
}
#hud-corners {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 19;
}
.hud-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: 0.3;
}
.hud-corner::before,
.hud-corner::after {
  content: "";
  position: absolute;
  background: var(--accent-cyan);
}
.hud-corner::before {
  width: 100%;
  height: 1px;
  top: 0;
}
.hud-corner::after {
  height: 100%;
  width: 1px;
  top: 0;
}
.hud-corner.tl {
  top: 0;
  left: 0;
}
.hud-corner.tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}
.hud-corner.bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}
.hud-corner.br {
  bottom: 0;
  right: 0;
  transform: scale(-1);
}

.organ-label-card {
  position: absolute;
  pointer-events: auto;
  z-index: 21;
  cursor: pointer;
  user-select: none;
}
.organ-label-inner {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  padding: 9px 13px 9px 12px;
  min-width: 150px;
  max-width: 198px;
  border-radius: var(--radius-sm);
  animation: labelAppear 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition:
    background 0.2s,
    border-color 0.2s;
  border: 1px solid var(--border-glass);
}
.organ-label-card:hover .organ-label-inner {
  background: var(--bg-card-hover);
  border-color: var(--border-glass-strong);
}
.organ-label-name {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  padding-right: 12px; /* room for the ping dot */
}
.organ-label-system {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.organ-label-divider {
  height: 1px;
  margin: 4px 0 3px;
  background: var(--border-glass);
}
.organ-label-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
}
.organ-label-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.organ-label-stat-val {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-cyan);
  white-space: nowrap;
}
.organ-label-stat-val small {
  font-size: 0.48rem;
  font-weight: 600;
  opacity: 0.75;
}
.organ-label-stat-key {
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.organ-label-ping {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pingGlow 2.4s ease-in-out infinite;
}
.organ-pain-bar {
  display: flex;
  gap: 2px;
  margin-top: 5px;
}
.pain-seg {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--border-glass);
  transition: background 0.3s;
}
.pain-seg.filled-1 {
  background: var(--accent-teal);
}
.pain-seg.filled-2 {
  background: var(--pain-scale-2);
}
.pain-seg.filled-3 {
  background: var(--accent-gold);
}
.pain-seg.filled-4 {
  background: var(--pain-scale-4);
}
.pain-seg.filled-5 {
  background: var(--accent-red);
}

@keyframes pingGlow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}
@keyframes labelAppear {
  from {
    opacity: 0;
    transform: translateX(-4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

#hud-bar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
}
#hud-mode-btn {
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: var(--radius-sm);
  color: rgba(0, 212, 255, 0.5);
  font-size: 0.52rem;
  padding: 3px 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.15s;
  white-space: nowrap;
}
#hud-mode-btn:hover,
#hud-mode-btn.active {
  border-color: rgba(0, 212, 255, 0.4);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}
#hud-page-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}
#hud-page-controls button {
  background: transparent;
  border: none;
  color: rgba(0, 212, 255, 0.6);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
  transition: color 0.12s;
}
#hud-page-controls button:hover {
  color: var(--accent-cyan);
}
#hud-page-controls button:disabled {
  color: var(--text-dim);
  cursor: default;
}
#hud-page-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  color: rgba(0, 212, 255, 0.5);
  min-width: 32px;
  text-align: center;
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE SHELL
   ═══════════════════════════════════════════════════════════════════
   Five stops — >1600 / 1201-1600 / 901-1200 / 601-900 / ≤600 — with
   clamp()/minmax()/auto-fit carrying the scaling in between, so panels glide
   rather than snap. The shell stays flexbox (.mc-app) because .mc-viewer's
   `flex:1` already IS the "viewer takes the remaining space" rule, and it is
   what js/09-panel-resize.js writes inline `width` against.

   Below 1200px the side panels leave the flex row and become overlays. They
   are re-positioned IN PLACE — same elements, same ids, same handlers — so
   nothing in the JS has to know a layout changed. Before this, they were just
   `display:none`, and the clinical data was simply unreachable on a tablet.
   Open/close state is the `.is-open` class, owned by js/23-responsive.js. */

/* Chrome that exists only in the overlay layouts. */
.mc-nav-toggle,
.mc-mobile-bar,
.mc-sheet-head,
#mc-open-patient-toolbar {
  display: none;
}

.mc-scrim {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: rgba(2, 6, 12, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.mc-scrim.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Grab bar + close button pinned to the top of a panel while it is an
   overlay. Static in markup.html, revealed by the breakpoints below. */
.mc-sheet-head {
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-glass);
  background: var(--bg-secondary);
}
/* The grip pill reads as "drag me down" — only meaningful on a bottom sheet,
   so it's revealed alongside them at ≤900px, not on the 901–1200px side
   drawer. */
.mc-sheet-head .mc-sheet-grip {
  display: none;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--border-glass-strong);
}
.mc-sheet-head .mc-sheet-title {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.mc-sheet-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  transition: all 0.15s;
}
.mc-sheet-close:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* Bottom action bar (≤900px) — the entry point to both sheets. */
.mc-mobile-bar {
  flex-shrink: 0;
  align-items: stretch;
  gap: 8px;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom)) 10px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-glass);
  z-index: 880;
}
.mc-mobile-bar button {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.mc-mobile-bar button:hover,
.mc-mobile-bar button[aria-expanded="true"] {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

/* Hamburger — same visual language as .mc-btn. */
.mc-nav-toggle {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.mc-nav-toggle:hover,
.mc-nav-toggle[aria-expanded="true"] {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

/* ── >1600px DESKTOP/ULTRAWIDE and 1201–1600px LAPTOP ────────────── */
/* No @media block needed: the clamp() widths on --sidebar-width,
   .mc-dashboard-left and .mc-info-panel already shrink the four columns
   smoothly across this whole range, and .mc-viewer (flex:1) absorbs the
   difference. Adding breakpoints here would reintroduce the snapping. */

/* ── 901–1200px · SMALL LAPTOP / TABLET LANDSCAPE ────────────────── */
/* Sidebar + viewer + organ info stay in the row; the patient dashboard
   becomes a right-hand drawer reached from the viewer toolbar. */
@media (max-width: 1200px) {
  .mc-patient-badge {
    font-size: 0.5rem;
    padding: 2px 8px;
  }
  #mc-open-patient-toolbar {
    display: inline-flex;
  }

  .mc-dashboard-left {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: auto;
    width: min(400px, 60vw);
    min-width: 0;
    max-width: none;
    border-left: 1px solid var(--border-glass);
    border-right: none;
    box-shadow: var(--shadow-card);
    transform: translateX(100%);
    transition: transform var(--sheet-ease);
    z-index: 900;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mc-dashboard-left.is-open {
    transform: none;
  }
  .mc-dashboard-left .mc-sheet-head {
    display: flex;
  }
  #resize-left {
    display: none;
  }
}

/* ── 601–900px · TABLET PORTRAIT / LARGE PHONE ───────────────────── */
/* Full overlay shell: viewer is the only in-flow panel. */
@media (max-width: 900px) {
  .mc-nav-toggle {
    display: inline-flex;
  }
  .mc-mobile-bar {
    display: flex;
  }
  #mc-open-patient-toolbar {
    display: none;
  }

  .mc-header {
    padding: 0 10px;
    gap: 8px;
  }
  .mc-header-center {
    justify-content: flex-end;
  }

  /* Organ list → left off-canvas drawer. */
  .mc-sidebar,
  .mc-sidebar.collapsed {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--drawer-width);
    min-width: 0;
    max-width: none;
    border-right: 1px solid var(--border-glass);
    box-shadow: var(--shadow-card);
    transform: translateX(-100%);
    transition: transform var(--sheet-ease);
    z-index: 900;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mc-sidebar.is-open {
    transform: none;
  }
  /* The desktop collapse tab and both drag handles have no meaning here. */
  .mc-sidebar .sidebar-toggle,
  .resize-handle {
    display: none;
  }

  /* Patient dashboard + organ clinical data → bottom sheets. */
  .mc-dashboard-left,
  .mc-info-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: var(--sheet-height);
    border: 1px solid var(--border-glass);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-card);
    transform: translateY(100%);
    transition: transform var(--sheet-ease);
    z-index: 900;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mc-dashboard-left.is-open,
  .mc-info-panel.is-open {
    transform: none;
  }
  .mc-info-panel .mc-sheet-head {
    display: flex;
  }
  .mc-sheet-head {
    position: relative;
    padding-top: 12px;
  }
  .mc-sheet-head .mc-sheet-grip {
    display: block;
  }
  /* The sheet header carries the close action, so the panel's own header
     keeps only its title + edit control. */
  .mc-info-panel .info-panel-header {
    padding: 6px 14px;
  }

  .viewer-toolbar {
    padding: 6px 10px;
  }
}

/* ── ≤600px · PHONE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --header-height: 48px;
    --sheet-height: min(88dvh, 720px);
  }
  .mc-header {
    padding: 0 8px;
    gap: 6px;
  }
  /* Wordmark and the secondary id/age chips go; the patient's NAME, Export
     PDF and the theme toggle all stay reachable (buttons collapse to icons
     via .mc-btn-label). */
  .mc-logo-text,
  .mc-patient-badge .id,
  .mc-patient-badge .age,
  .mc-btn-label {
    display: none;
  }
  .mc-header-actions {
    gap: 4px;
  }
  .mc-header-actions .mc-btn,
  .mc-header-actions button {
    padding: 4px 8px;
  }
  .mc-patient-badge {
    padding: 2px 6px;
    min-width: 0;
  }
  .viewer-area {
    min-height: 45dvh;
  }
  .mc-mobile-bar button {
    font-size: 0.62rem;
  }

  /* NOTE: the responsive MODAL rules deliberately live at the very END of
     this file, not here — .pdf-modal & friends are defined further down, and
     at equal specificity the later rule wins. */
}

/* ── HORIZONTAL GALLERIES ────────────────────────────────────────── */
/* The image strips already scroll sideways; make them feel native and stop
   them from handing their overscroll to the page. */
.images-grid {
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.images-grid > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ── TOUCH VIEWER CONTROLS ───────────────────────────────────────── */
/* Same glass chrome as #hud-bar / .obj-controls, so the viewer still reads as
   one surface. Only surfaced to fingers — a mouse has a wheel. */
.viewer-touch-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: 6px;
}
.viewer-touch-controls button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all 0.15s;
}
.viewer-touch-controls button:active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

/* ── COARSE POINTERS ─────────────────────────────────────────────── */
/* WCAG 2.5.5 — 44×44 hit targets whenever the primary input is a finger.
   This generalises the pre-existing rule that only applied in light theme.
   Padding does the work, so nothing changes visually beyond the hit box. */
@media (pointer: coarse) {
  .mc-btn,
  .mc-header-actions button,
  .sidebar-search input,
  .sidebar-controls #select-all-btn,
  .guide-btn,
  .event-log-modal-close,
  .pdf-modal-close,
  .mc-sheet-close,
  .mc-input,
  .mc-mobile-bar button {
    min-height: 44px;
  }
  .sys-chip {
    min-height: 34px;
    padding: 6px 12px;
  }
  .overview-nav-item,
  .part-item {
    min-height: 44px;
  }
  .tag-x {
    padding: 8px;
    margin: -8px -4px -8px 1px;
  }
  /* The per-organ calibration toolbar is a mouse-precision dev tool
     (?debug=1 only) — it has no place under a finger. */
  .obj-controls {
    display: none !important;
  }
  .viewer-touch-controls {
    display: flex;
  }
}

/* Sheets and the drawer animate with transform only; honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .mc-sidebar,
  .mc-dashboard-left,
  .mc-info-panel,
  .mc-scrim {
    transition: none;
  }
}

/* ── DF STYLES (dynamic field display) ── */
.df-field-wrap {
  position: relative;
  transition: opacity 0.15s;
}
.df-field-wrap.drag-source {
  opacity: 0.35;
}
.df-field-wrap.drag-over-top {
  box-shadow: 0 -2px 0 0 var(--accent-cyan);
}
.df-field-wrap.drag-over-bottom {
  box-shadow: 0 2px 0 0 var(--accent-cyan);
}
.df-field-wrap:hover .df-style-btn {
  opacity: 1;
}
.df-field-wrap:hover .df-drag-handle {
  opacity: 1;
}
.df-drag-handle {
  position: absolute;
  top: 0;
  left: -16px;
  width: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: -1px;
  user-select: none;
  z-index: 3;
}
.df-drag-handle:hover {
  color: var(--accent-cyan);
}
.df-drag-handle:active {
  cursor: grabbing;
}
#df-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.9;
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 4px 10px;
  font-size: 0.65rem;
  color: var(--text-primary);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(-50%) rotate(1deg);
  font-family: var(--font-sans);
}
.df-style-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.55rem;
  padding: 1px 4px;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    color 0.12s,
    border-color 0.12s;
  z-index: 2;
  line-height: 1.3;
}
.df-style-btn:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  opacity: 1;
}
.style-picker-popup {
  position: fixed;
  z-index: 9999;
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  width: 200px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.style-picker-header {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-glass);
  font-size: 0.62rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.style-picker-header strong {
  color: var(--text-primary);
}
.style-picker-grid {
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.style-picker-opt {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.58rem;
  padding: 4px 6px;
  cursor: pointer;
  transition: all 0.12s;
  text-align: left;
}
.style-picker-opt:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.style-picker-opt.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}
.df-card {
  margin-bottom: 0;
}
.df-section {
  margin-bottom: 2px;
}
.df-section-key {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 3px;
}
.df-pill {
  font-size: 0.55rem;
  padding: 1px 7px;
  border-radius: 3px;
  display: inline-block;
}
.df-bar-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
}
.df-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.df-bar-track {
  height: 4px;
  background: var(--border-glass);
  border-radius: 4px;
  overflow: hidden;
}
.df-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.df-stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}
.df-stat-label {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.df-stat-val {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.df-stat-unit {
  font-size: 0.5rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 3px;
}
.df-stat-notes {
  font-size: 0.55rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 3px;
}
.df-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
}
.df-table-wrap table td {
  padding: 2px 4px 2px 0;
  vertical-align: top;
}
.df-code-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
}
.df-code {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  color: var(--accent-cyan);
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 3px;
  max-height: 100px;
  overflow-y: auto;
}
.df-inline-tag {
  display: inline-block;
  font-size: 0.55rem;
  background: var(--accent-cyan-dim);
  border: 1px solid rgba(0, 212, 255, 0.1);
  color: var(--accent-cyan);
  border-radius: 3px;
  padding: 1px 5px;
  margin: 1px 2px 1px 0;
}
.pain-score-display {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
}
.pain-score-bars {
  display: flex;
  gap: 2px;
  flex: 1;
}
.pain-score-seg {
  height: 10px;
  flex: 1;
  border-radius: 2px;
  background: var(--border-glass);
  transition: background 0.4s;
}
.pain-score-val {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.pain-score-label {
  font-size: 0.52rem;
  color: var(--text-muted);
}
.afect-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}
.afect-pill {
  font-size: 0.55rem;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid rgba(255, 71, 87, 0.25);
  color: #ff8888;
  background: rgba(255, 71, 87, 0.06);
}
.afect-pill.none {
  color: var(--text-muted);
  border-color: var(--border-glass);
  background: transparent;
}
.eval-pill {
  font-size: 0.55rem;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid rgba(0, 212, 255, 0.15);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

/* Sidebar toggle button on the edge – override for collapsed state */
.mc-sidebar .sidebar-toggle {
  right: -18px;
}
.mc-sidebar.collapsed .sidebar-toggle {
  right: -18px;
}
/* ── 3D VIEWER CENTERING ENHANCEMENT ── */
/* Ensures the 3D model stays perfectly centered in the viewport */
.viewer-area {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: radial-gradient(
    ellipse at center,
    var(--bg-secondary),
    var(--bg-primary)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}

#viewer-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
  cursor: grab;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

/* Loading overlay - perfectly centered */
.obj-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(6, 13, 22, 0.82);
  backdrop-filter: blur(6px);
  z-index: 10;
  padding: 20px;
}
.obj-loading.active {
  display: flex;
}
/* Light mode: the loading scrim must not read as a black box over the
           now-light 3D stage. */
[data-theme="light"] .obj-loading {
  background: rgba(255, 255, 255, 0.82);
  color: var(--text-primary);
}

/* HUD overlay - ensures labels are positioned relative to the centered model */
#organ-overlay-canvas,
#organ-label-cards {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

#organ-label-cards {
  z-index: 21;
  pointer-events: none;
}

.organ-label-card {
  position: absolute;
  pointer-events: auto;
  z-index: 21;
  cursor: pointer;
  user-select: none;
  will-change: transform, opacity;
  contain: layout paint style;
  backface-visibility: hidden;
}

/* Hover tooltip - follows mouse over the centered model */
#obj-hover-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 25;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-sm);
  padding: 3px 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--accent-cyan);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.15);
  white-space: nowrap;
  display: none;
  letter-spacing: 0.04em;
}

/* Corner HUD elements - fixed relative to viewport */
#hud-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

.hud-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(0, 212, 255, 0.1);
  border-style: solid;
  border-width: 0;
}
.hud-corner.tl {
  top: 8px;
  left: 8px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.hud-corner.tr {
  top: 8px;
  right: 8px;
  border-top-width: 1px;
  border-right-width: 1px;
}
.hud-corner.bl {
  bottom: 8px;
  left: 8px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.hud-corner.br {
  bottom: 8px;
  right: 8px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

/* HUD bar - fixed position overlay controls */
#hud-bar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  box-shadow: var(--shadow-card);
}

/* Model controls - positioned at bottom right */
.obj-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  max-height: calc(100% - 100px);
  overflow-y: auto;
  min-width: 140px;
  box-shadow: var(--shadow-card);
}
.obj-controls::-webkit-scrollbar {
  width: 2px;
}
.obj-controls.show {
  display: flex;
}

/* Badge - top left info */
.obj-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-muted);
  line-height: 1.5;
  pointer-events: none;
  display: none;
  z-index: 5;
  box-shadow: var(--shadow-card);
}
.obj-badge.show {
  display: block;
}
.obj-badge strong {
  color: var(--text-primary);
}

/* Responsive adjustments for viewer centering */
@media (max-width: 768px) {
  .viewer-area {
    min-height: 300px;
  }
  .obj-controls {
    right: 6px;
    bottom: 6px;
    padding: 4px 6px;
    min-width: 100px;
    max-height: calc(100% - 70px);
  }
  .obj-btn {
    font-size: 0.5rem;
    padding: 2px 6px;
  }
  #hud-bar {
    top: 8px;
    right: 8px;
    padding: 2px 6px;
  }
  #hud-mode-btn {
    font-size: 0.45rem;
    padding: 2px 6px;
  }
  .obj-badge {
    font-size: 0.48rem;
    padding: 3px 8px;
    top: 8px;
    left: 8px;
  }
}

@media (max-width: 480px) {
  .viewer-area {
    min-height: 200px;
  }
  .obj-controls {
    display: none !important;
  }
  .obj-badge {
    font-size: 0.42rem;
    padding: 2px 6px;
    max-width: 140px;
    top: 6px;
    left: 6px;
  }
  #hud-bar {
    top: 6px;
    right: 6px;
    padding: 2px 4px;
  }
  #hud-mode-btn {
    font-size: 0.4rem;
    padding: 1px 4px;
  }
}

/* Patient edit form */
.patient-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.patient-edit-form .edit-field-row {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.patient-edit-form .edit-field-row input,
.patient-edit-form .edit-field-row select {
  background: var(--bg-primary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  padding: 3px 6px;
  outline: none;
  width: 100%;
}

.patient-edit-form .edit-field-row input:focus,
.patient-edit-form .edit-field-row select:focus {
  border-color: var(--accent-cyan);
}

.patient-edit-form .edit-field-row .edit-field-header {
  font-size: 0.5rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Ensure the edit button appears inline */
#patient-edit-btn {
  flex-shrink: 0;
}

/* Adjust patient avatar and name layout */
.patient-profile-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.patient-name-block {
  flex: 1;
  min-width: 0;
}

.edit-object-properties {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 2px 4px;
  width: 100%;
}
.edit-object-property {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-primary);
  border-radius: 3px;
  padding: 2px 4px;
  border: 1px solid var(--border-glass);
  transition: border-color 0.15s;
}
.edit-object-property:hover {
  border-color: var(--border-glass-strong);
}
.edit-object-label {
  flex: 0 0 90px;
  min-width: 50px;
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: 2px;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 600;
  padding: 2px 4px;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.edit-object-label:focus {
  border-color: var(--accent-cyan);
}
.edit-object-value {
  flex: 1;
  min-width: 40px;
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: 2px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  padding: 2px 4px;
  outline: none;
}
.edit-object-value:focus {
  border-color: var(--accent-cyan);
}
.remove-prop-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.55rem;
  padding: 0 3px;
  transition: color 0.12s;
  flex-shrink: 0;
  line-height: 1.2;
}
.remove-prop-btn:hover {
  color: var(--accent-red);
}
.add-prop-btn {
  background: var(--accent-cyan-dim);
  border: 1px dashed rgba(0, 212, 255, 0.15);
  border-radius: 3px;
  color: var(--accent-cyan);
  font-family: var(--font-sans);
  font-size: 0.5rem;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
  align-self: flex-start;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.add-prop-btn:hover {
  border-color: var(--accent-cyan);
  background: rgba(0, 212, 255, 0.12);
}
.edit-object-empty-hint {
  font-size: 0.5rem;
  color: var(--text-dim);
  padding: 2px 0;
  font-style: italic;
}
.edit-array-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-primary);
  border-radius: 3px;
  padding: 2px 4px;
  border: 1px solid var(--border-glass);
}
.edit-array-value {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: 2px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  padding: 2px 4px;
  outline: none;
  min-width: 40px;
}
.edit-array-value:focus {
  border-color: var(--accent-cyan);
}
.remove-array-item-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.55rem;
  padding: 0 3px;
  transition: color 0.12s;
  flex-shrink: 0;
  line-height: 1.2;
}
.remove-array-item-btn:hover {
  color: var(--accent-red);
}
.add-array-item-btn {
  background: var(--accent-cyan-dim);
  border: 1px dashed rgba(0, 212, 255, 0.15);
  border-radius: 3px;
  color: var(--accent-cyan);
  font-family: var(--font-sans);
  font-size: 0.5rem;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
  align-self: flex-start;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.add-array-item-btn:hover {
  border-color: var(--accent-cyan);
  background: rgba(0, 212, 255, 0.12);
}
.remove-field-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.6rem;
  padding: 0 3px;
  transition: color 0.12s;
  flex-shrink: 0;
  line-height: 1.2;
}
.remove-field-btn:hover {
  color: var(--accent-red);
}
.edit-field-header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.edit-field-key {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-glass);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 2px;
  outline: none;
  min-width: 60px;
}
.edit-field-key:focus {
  border-bottom-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.edit-field-row {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.15s;
}
.edit-field-row:hover {
  border-color: var(--border-glass-strong);
}
/* Ensure card content respects the scroll container */
.mc-card > * {
  flex-shrink: 0; /* prevent children from stretching */
}

/* For cards with a known fixed content like vitals grid, allow wrapping */
.mc-card .vitals-grid,
.mc-card .genomic-row,
.mc-card .muscle-row,
.mc-card .health-grid,
.mc-card .organ-grid,
.mc-card .timeline-row,
.mc-card .sensor-row,
.mc-card .event-log {
  flex-shrink: 0; /* keep their own height if needed */
}

/* The organ grid inside a card – we want it to scroll within the card */
.organ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  overflow-y: auto; /* grid itself can scroll if needed */
  /* Was a hard 160px. Scales with the viewport so a tall sheet shows more
     rows and a short phone doesn't hand a card most of the screen. */
  max-height: clamp(120px, 22dvh, 220px);
}

/* Event log – already scrollable, but now it's inside a scrollable card */
.event-log {
  max-height: clamp(120px, 22dvh, 220px);
  overflow-y: auto;
}

/* ── PDF EXPORT MODAL ── */
.pdf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 12, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.pdf-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}
.pdf-modal {
  width: min(1100px, 94vw);
  height: min(800px, 90vh);
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.2s ease;
}
.pdf-modal-backdrop.active .pdf-modal {
  transform: translateY(0) scale(1);
}
.pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-glass);
  flex-shrink: 0;
}
.pdf-modal-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}
.pdf-modal-close {
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdf-modal-close:hover {
  color: var(--accent-red);
  border-color: rgba(255, 71, 87, 0.4);
}
.pdf-modal-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.pdf-options-panel {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid var(--border-glass);
  padding: 20px;
  overflow-y: auto;
  background: var(--bg-glass);
}
.pdf-options-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  margin-bottom: 12px;
  font-weight: 600;
}
.pdf-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.pdf-option:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}
.pdf-option input[type="checkbox"] {
  accent-color: var(--accent-cyan);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.pdf-select {
  background: var(--bg-primary);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  outline: none;
}
.pdf-preview-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  min-width: 0;
}
.pdf-preview-toolbar {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-glass);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pdf-preview-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scroll */
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px; /* Space between pages */
  background: #1a1a1a;
}

/* The preview page wrapper - Removed padding to prevent overflow */
.pdf-preview-page {
  width: 210mm;
  min-height: 297mm;
  background: #ffffff;
  color: #111111;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  padding: 0; /* Set to 0 so the inner container controls padding */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10pt;
  line-height: 1.5;
  position: relative;
  transform-origin: top center;
  flex-shrink: 0; /* Prevent pages from shrinking */
}
.pdf-preview-page.dark-pdf {
  background: #0f172a;
}

/* Scale down the preview slightly on smaller screens so it fits the modal */
@media (max-width: 1200px) {
  .pdf-preview-page {
    transform: scale(0.85);
    margin-bottom: -40mm;
  }
}
@media (max-width: 900px) {
  .pdf-preview-page {
    transform: scale(0.7);
    margin-bottom: -80mm;
  }
  .pdf-options-panel {
    width: 220px;
    min-width: 220px;
  }
}

.pdf-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-glass);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--bg-secondary);
}

/* PDF Content Styling */
.pdf-header {
  border-bottom: 2px solid var(--accent-cyan);
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.pdf-hospital-name {
  font-size: 22pt;
  font-weight: 800;
  color: var(--accent-cyan);
  margin: 0;
}
.pdf-report-title {
  font-size: 12pt;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}
.pdf-section-title {
  font-size: 13pt;
  font-weight: 700;
  color: var(--accent-blue);
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 4px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.pdf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 15px;
}
.pdf-grid-item {
  background: var(--bg-card);
  padding: 8px 12px;
  border-radius: 4px;
  border-left: 3px solid var(--accent-cyan);
}
.pdf-grid-item .label {
  font-size: 8pt;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.pdf-grid-item .value {
  font-size: 11pt;
  font-weight: 600;
  color: var(--text-primary);
}
.pdf-problem-item {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-glass);
  display: flex;
  gap: 10px;
}
.pdf-problem-severity {
  font-size: 8pt;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  height: fit-content;
}
.pdf-problem-severity.critical {
  background: rgba(255, 71, 87, 0.15);
  color: var(--accent-red);
}
.pdf-problem-severity.moderate {
  background: rgba(255, 218, 121, 0.15);
  color: var(--accent-gold);
}
.pdf-chart-container {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 15px;
  color: var(--text-primary);
}
.pdf-chart-container .mc-card-title {
  font-size: 11pt;
  margin-bottom: 8px;
}
.pdf-chart-placeholder {
  background: var(--bg-card);
  border: 1px dashed var(--border-glass);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 15px;
  border-radius: 4px;
}

/* ── PROFESSIONAL PDF REPORT STYLES ── */
.pdf-report-container {
  width: 210mm;
  min-height: 297mm;
  background: #ffffff;
  color: #111111;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10pt;
  line-height: 1.5;
  box-sizing: border-box;
}
.pdf-report-container.dark-pdf {
  background: #0f172a;
  color: #f1f5f9;
}

.pdf-letterhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  border-bottom: 4px solid #00d4ff;
  background: #f8fafc;
}
.dark-pdf .pdf-letterhead {
  background: #1e293b;
  border-bottom-color: #38bdf8;
}

.pdf-logo-area {
  display: flex;
  align-items: center;
  gap: 15px;
}
.pdf-logo-icon {
  width: 40px;
  height: 40px;
  background: #00d4ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdf-logo-text h1 {
  font-size: 18pt;
  margin: 0;
  color: #0f172a;
  letter-spacing: -0.5px;
}
.dark-pdf .pdf-logo-text h1 {
  color: #ffffff;
}
.pdf-logo-text p {
  font-size: 8pt;
  margin: 0;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pdf-report-meta {
  text-align: right;
  font-size: 8pt;
  color: #64748b;
}
.pdf-report-meta strong {
  color: #0f172a;
  font-size: 9pt;
}
.dark-pdf .pdf-report-meta strong {
  color: #ffffff;
}

.pdf-content-body {
  padding: 25px;
}

.pdf-section {
  margin-bottom: 25px;
  page-break-inside: avoid;
}
.pdf-section-header {
  font-size: 12pt;
  font-weight: 700;
  color: #0f172a;
  border-left: 5px solid #00d4ff;
  padding-left: 10px;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dark-pdf .pdf-section-header {
  color: #f1f5f9;
}

.pdf-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 10px;
}
.pdf-info-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 15px;
}
.dark-pdf .pdf-info-card {
  background: #1e293b;
  border-color: #334155;
}
.pdf-info-label {
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
  margin-bottom: 4px;
}
.pdf-info-value {
  font-size: 11pt;
  font-weight: 600;
  color: #0f172a;
}
.dark-pdf .pdf-info-value {
  color: #f1f5f9;
}

.pdf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
}
.pdf-table th {
  background: #0f172a;
  color: #ffffff;
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
}
.dark-pdf .pdf-table th {
  background: #334155;
}
.pdf-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}
.dark-pdf .pdf-table td {
  border-bottom-color: #334155;
  color: #cbd5e1;
}
.pdf-table tr:nth-child(even) td {
  background: #f8fafc;
}
.dark-pdf .pdf-table tr:nth-child(even) td {
  background: #1e293b;
}

.status-pill {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 7pt;
  font-weight: 700;
  text-transform: uppercase;
}
.status-pill.ok {
  background: #dcfce7;
  color: #166534;
}
.status-pill.warn {
  background: #fef9c3;
  color: #854d0e;
}
.status-pill.critical {
  background: #fee2e2;
  color: #991b1b;
}

.pdf-chart-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 15px;
  margin-top: 10px;
}
.dark-pdf .pdf-chart-box {
  background: #1e293b;
  border-color: #334155;
}

/* ── Organ Function Modeling — scrollable 3-col grid of tall (portrait) cards.
      Click a tile to grow it 1x1 → 3x3 (full width); click again to shrink.
      The grow/shrink is animated in JS with a FLIP transform. ─────────────── */
.omp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 258px; /* taller than wide → portrait tiles */
  grid-auto-flow: row dense; /* backfill the gap left by a full-width tile */
  gap: 12px;
}
.omp-card {
  grid-column: span 1;
  grid-row: span 1;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-top: 3px solid var(--omp-accent, var(--border-glass));
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  will-change: transform;
}
.omp-card:hover {
  border-color: var(--omp-accent, var(--accent-cyan));
}
.omp-card.expanded {
  grid-column: 1 / -1; /* full 3 columns wide … */
  grid-row: span 3; /* … and 3 rows tall */
  cursor: default;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.38);
  border-color: var(--omp-accent, var(--accent-cyan));
}
.omp-inner {
  height: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.omp-card.expanded .omp-inner {
  overflow-y: auto;
}
.omp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.omp-icon {
  font-size: 1.55rem;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  flex-shrink: 0;
}
.omp-status {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}
.omp-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  margin-top: 8px;
}
.omp-sub {
  font-size: 0.64rem;
  color: var(--text-muted);
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
.omp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.omp-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  min-width: 32px;
}
.omp-painbar {
  flex: 1;
  height: 7px;
  border-radius: 6px;
  background: var(--border-glass);
  overflow: hidden;
}
.omp-painfill {
  height: 100%;
  border-radius: 6px;
}
.omp-painval {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Full description block — only visible in the expanded (3x3) tile. */
.omp-body {
  display: none;
  margin-top: 4px;
}
.omp-card.expanded .omp-body {
  display: block;
}
.omp-card.expanded .omp-hint {
  display: none;
}
.omp-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 8px 0 4px;
}
.omp-section-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 14px;
  margin-bottom: 6px;
}
.omp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.omp-tag {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: capitalize;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-glass);
  background: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .omp-tag {
  background: rgba(2, 132, 199, 0.08);
}

/* Light-mode modal scrims: dim the page with a slate veil instead of a
   near-black box, so backdrops read as "dimmed" rather than a dark panel. */
[data-theme="light"] .event-log-modal-backdrop {
  background: rgba(15, 23, 42, 0.4);
}
[data-theme="light"] .pdf-modal-backdrop {
  background: rgba(15, 23, 42, 0.4);
}
.omp-notes {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0;
}
.omp-hint {
  margin-top: auto;
  font-size: 0.54rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-align: center;
  padding-top: 6px;
}

/* Searchable dropdown (Surgeon / Procedure Name on the Surgeries form) */
.combobox-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  max-height: 180px;
  overflow-y: auto;
  z-index: 20;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.combobox-item {
  padding: 7px 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.combobox-item:hover {
  background: rgba(2, 132, 199, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE MODAL OVERRIDES — MUST STAY LAST IN THIS FILE
   ═══════════════════════════════════════════════════════════════════
   .pdf-modal / .pdf-modal-body / .pdf-options-panel are defined ~1000 lines
   above; at equal specificity the later rule wins, so these have to sit after
   them. Keep this block at the end of the file — moving it up silently
   restores the desktop geometry on phones. */

/* The PDF modal's options | preview split can't survive a narrow viewport —
   stack the options above the preview instead of squeezing both. */
@media (max-width: 900px) {
  .pdf-modal-body {
    flex-direction: column;
  }
  .pdf-options-panel {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border-glass);
    padding: 14px;
    flex-shrink: 0;
    max-height: 40dvh;
  }
}

/* Full-bleed rather than a 94vw card floating on a 3vw gutter — at this width
   the gutter costs more than it reads. */
@media (max-width: 600px) {
  .event-log-modal,
  .pdf-modal {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .event-log-modal-header,
  .pdf-modal-header {
    padding: 12px 14px;
  }
  .pdf-modal-footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) 14px;
    flex-wrap: wrap;
  }
}