/* ───────── Patient Case View — premium clinical mobile ───────── */

/* Bengali web font — Kalpurush. Used for Bangla glyphs (e.g. discharge medicine dosing in
   বাংলা on the printed documents). The unicode-range limits the download to pages that
   actually contain Bengali text, so Latin-only screens never fetch it; Latin text keeps
   using Manrope and only the Bangla characters fall back to Kalpurush. */
@font-face {
  font-family: 'Kalpurush';
  src: url('fonts/kalpurush.woff2') format('woff2'),
       url('fonts/kalpurush.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0980-09FF, U+200C-200D, U+2055, U+25CC;
}

:root {
  /* primary (overridden by tweaks) */
  --primary: #4338CA;
  --primary-50: #EEF0FF;
  --primary-100: #E0E4FF;
  --primary-600: #4338CA;
  --primary-700: #3730A3;

  /* neutrals */
  --ink-0: #FFFFFF;
  --ink-50: #F8FAFC;
  --ink-100: #F1F5F9;
  --ink-200: #E2E8F0;
  --ink-300: #CBD5E1;
  --ink-400: #6B7688;
  --ink-500: #586677;
  --ink-600: #475569;
  --ink-700: #334155;
  --ink-800: #1E293B;
  --ink-900: #0F172A;

  /* semantic */
  --ok: #059669;
  --ok-50: #ECFDF5;
  --warn: #B45309;
  --warn-50: #FFFBEB;
  --err: #DC2626;
  --err-50: #FEF2F2;

  /* density */
  --dens: 1;
  --pad: calc(16px * var(--dens));
  --pad-sm: calc(12px * var(--dens));
  --pad-lg: calc(20px * var(--dens));
  --radius: 14px;
  --radius-lg: 18px;
  --radius-sm: 10px;

  /* type */
  --font-sans: 'Manrope', 'Kalpurush', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }

/* Keyboard focus rings — visible only for keyboard navigation, not mouse clicks */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

html, body { margin: 0; padding: 0; }

/* App container fills iOS device inner area */
.pcv-app {
  --app-bg: #F4F6FB;
  background: var(--app-bg);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  color: var(--ink-900);
  font-size: 14px;
  letter-spacing: -0.01em;
  font-feature-settings: 'cv11', 'ss01';
  overflow: hidden;
  position: relative;
}

/* ───── Top app bar — slim ───── */
.pcv-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 50px 10px 6px;
  background: var(--ink-0);
  position: relative;
  z-index: 3;
}
.pcv-icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--ink-700); border-radius: 8px;
  cursor: pointer; flex-shrink: 0;
  transition: background 120ms;
}
.pcv-icon-btn:hover { background: var(--ink-100); }
.pcv-topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px 0 8px;
  margin-left: -4px;
  border-radius: 16px;
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms;
}
.pcv-topbar-back svg {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}
.pcv-topbar-back:hover,
.pcv-topbar-back:active {
  background: var(--primary-50, #EEF0FF);
}

/* ───── Patient header — integrated, compact ───── */
.pcv-patient {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  background: var(--ink-0);
  padding: 5px 10px 7px;
  border-bottom: 1px solid var(--ink-200);
  position: relative;
  z-index: 2;
  max-width: 100%;
  box-sizing: border-box;
}
.pcv-patient-name {
  font-size: 15px; font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcv-patient-meta {
  margin-top: 3px;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--ink-500);
  letter-spacing: -0.01em;
}
.pcv-patient-meta b {
  color: var(--ink-700);
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: -0.01em;
}
.pcv-patient-meta b {
  color: var(--ink-700);
  font-weight: 600;
}
.pcv-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); flex-shrink: 0; }

/* ── Bed Doctor (attending) — inline editable, beside the patient name ── */
.pcv-patient-name-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.pcv-patient-name-row .pcv-patient-name { flex: 1 1 auto; min-width: 0; }
.pcv-bed-doctor {
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  max-width: 46%;
  padding: 2px 7px;
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.22);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-700, #334155);
  font-size: 10.5px; line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.pcv-bed-doctor:hover { background: rgba(13, 148, 136, 0.14); }
.pcv-bed-doctor-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.02em;
  color: #0D9488; text-transform: uppercase; flex-shrink: 0;
}
.pcv-bed-doctor-name {
  font-weight: 600; color: #1F2937;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcv-bed-doctor-pencil { display: inline-flex; color: #0D9488; flex-shrink: 0; }
.pcv-bed-doctor-edit {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.pcv-bed-doctor-input {
  font-size: 11px; padding: 3px 7px; min-width: 110px; max-width: 180px;
  border: 1px solid rgba(13, 148, 136, 0.45);
  border-radius: 7px; outline: none; color: #1F2937;
  background: #fff;
}
.pcv-bed-doctor-input:focus { border-color: #0D9488; box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.16); }
.pcv-bed-doctor-save {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 3px 4px;
  color: #0D9488; flex-shrink: 0;
}

.pcv-patient-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  letter-spacing: 0;
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--primary) 35%, transparent);
}
.pcv-patient-progress {
  position: relative;
  width: 38px; height: 38px;
  flex-shrink: 0;
  color: var(--primary);
}
.pcv-patient-progress-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.pcv-patient-progress-num .den {
  color: var(--ink-400); font-weight: 500;
}

/* Read-only key/value cells (used in step bodies) */
.pcv-cell-label {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-500);
}
.pcv-cell-value {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.3;
}
.pcv-cell-value.muted { color: var(--ink-400); font-style: italic; font-weight: 400; }

/* ───── Stepper bar (horizontal) ───── */
.pcv-stepper-wrap {
  flex-shrink: 0;
  background: var(--ink-0);
  border-bottom: 1px solid var(--ink-200);
  margin-top: 12px;
  position: relative;
}
.pcv-stepper-progress {
  height: 2px;
  background: var(--ink-100);
  position: relative;
  overflow: hidden;
}
.pcv-stepper-progress-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--primary);
  transition: width 320ms cubic-bezier(.16,1,.3,1);
}
.pcv-stepper-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 4px;
}
.pcv-stepper-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-500);
}
.pcv-stepper-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.pcv-stepper-count b { color: var(--primary); font-weight: 700; }
.pcv-stepper-scroll {
  display: flex;
  gap: 6px;
  padding: 6px 16px 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pcv-stepper-scroll::-webkit-scrollbar { display: none; }

.pcv-step-pip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  padding: 6px 10px 6px 6px;
  cursor: pointer;
  scroll-snap-align: start;
  font-size: 11px;
  color: var(--ink-600);
  font-weight: 500;
  transition: all 160ms;
  white-space: nowrap;
}
.pcv-step-pip:hover { border-color: var(--ink-300); }
.pcv-step-pip-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink-200);
  color: var(--ink-600);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: all 160ms;
}
.pcv-step-pip.is-complete .pcv-step-pip-num {
  background: var(--ok); color: white;
}
.pcv-step-pip.is-complete {
  border-color: var(--ok);
  background: var(--ok-50);
  color: var(--ink-800);
}
.pcv-step-pip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.pcv-step-pip.is-active .pcv-step-pip-num {
  background: rgba(255,255,255,0.22);
  color: white;
}
.pcv-step-pip.is-required:not(.is-complete) .pcv-step-pip-num::after {
  content: ''; position: absolute;
}
.pcv-step-pip-req-mark {
  color: var(--err);
  margin-left: -3px;
  font-size: 9px;
  font-weight: 700;
}
.pcv-step-pip.is-active .pcv-step-pip-req-mark { color: rgba(255,255,255,0.9); }
.pcv-step-pip.is-complete .pcv-step-pip-req-mark { display: none; }

/* Stack — no bottom bar overlap padding once stepper removed */
.pcv-stack {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Bottom padding == the single-row action bar height, so the last ribbon sits
     right above it with no wasted gap and is never hidden behind it. */
  padding: 4px 10px calc(env(safe-area-inset-bottom) + 66px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Auto-fit system: every ribbon takes an EQUAL share of the available stack height
   (flex: 1 1 0), so all ribbons are always visible between the upper events rail and the
   lower action bar — they shrink automatically when the gallery grows (photos/videos
   added) and grow back when it collapses. A min-height floor keeps them tappable; only on
   very short screens does the stack fall back to scrolling. */
.pcv-stack > .pcv-step {
  flex: 1 1 0;
  min-height: 42px;
  border-radius: 0;
  border-top-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pcv-stack > .pcv-step > .pcv-step-head {
  flex: 1 1 auto;
  min-height: 0;
}
.pcv-stack > .pcv-step:first-of-type {
  border-top-width: 1px;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.pcv-stack > .pcv-step:last-of-type {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
/* The ribbon directly after a phase label starts a fresh rounded section. */
.pcv-stack > .pcv-phase-label + .pcv-step {
  border-top-width: 1px;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.pcv-step {
  background: var(--ink-0);
  border-radius: var(--radius);
  border: 1px solid var(--ink-200);
  overflow: hidden;
  transition: box-shadow 200ms, border-color 200ms;
  flex-shrink: 0;
}
.pcv-step.is-open {
  box-shadow: var(--shadow-md);
  border-color: var(--ink-300);
}

/* Step header bar — tight (kept compact so every ribbon fits on screen at once) */
.pcv-step-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  background: var(--step-tint, var(--ink-0));
  position: relative;
}
.pcv-step.is-open .pcv-step-head { border-bottom: 1px solid var(--ink-200); }
/* Progress "spine": a full-height left rail per ribbon. Neutral when untouched, tenant
   accent once the section is complete or open — together the rails read as one journey. */
.pcv-step-head::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ink-200);
  transition: background 200ms;
}
.pcv-step.is-saved > .pcv-step-head::before { background: var(--step-accent, var(--ok)); }
.pcv-step.is-open  > .pcv-step-head::before { background: var(--step-accent, var(--primary)); }
.pcv-step-head-text { flex: 1; min-width: 0; }
.pcv-step-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.015em;
  display: flex; align-items: center; gap: 6px;
  line-height: 1.2;
}
.pcv-step-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-300);
  flex-shrink: 0;
  box-sizing: border-box;
}
/* 3-state completion dot: empty (hollow) · partial (amber) · complete (green) */
.pcv-step-status-dot.dot-empty {
  background: var(--ink-0);
  border: 1.6px solid var(--ink-300);
}
.pcv-step-status-dot.dot-partial {
  background: #F59E0B;
  box-shadow: 0 0 0 3px color-mix(in srgb, #F59E0B 20%, transparent);
}
.pcv-step-status-dot.dot-complete {
  background: #16A34A;
  box-shadow: 0 0 0 3px color-mix(in srgb, #16A34A 20%, transparent);
}
.pcv-step-status-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.pcv-step-status-dot.active { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.pcv-step-status-dot.req { background: var(--ink-0); border: 1.5px solid var(--err); }
.pcv-step-status-dot.warn { background: var(--warn); }
.pcv-req-mark {
  color: var(--err);
  font-weight: 700;
  font-size: 12px;
  margin-left: -3px;
}
.pcv-step-summary {
  margin-top: 1px;
  font-size: 11px;
  color: var(--ink-600);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcv-step-summary.empty {
  color: var(--ink-400);
  font-style: italic;
}
.pcv-step-summary .kv {
  display: inline-flex; align-items: baseline; gap: 3px;
  margin-right: 8px;
}
.pcv-step-summary .kv-k { color: var(--ink-400); font-size: 10.5px; }
.pcv-step-summary .kv-v { color: var(--ink-700); font-weight: 500; }
.pcv-step-chev {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-400);
  transition: transform 200ms;
}
.pcv-step.is-open .pcv-step-chev { transform: rotate(90deg); color: var(--ink-600); }
.pcv-step-count-pill {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  color: var(--ink-700);
  border-radius: 999px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

/* Step body */
.pcv-step-body {
  padding: 12px;
  background: var(--ink-0);
  transition: background 200ms ease-out;
}

/* Form primitives — compact baseline */
.pcv-field { display: block; margin-bottom: 6px; }
.pcv-field:last-child { margin-bottom: 0; }
.pcv-field.tight { margin-bottom: 5px; }
.pcv-label {
  /* Field headlines must be easy to spot on phone AND desktop (consultant request):
     bold, a step larger, on a light-gray chip so they stand off the white inputs. */
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-800);
  background: var(--ink-100, #F1F5F9);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 3px;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.pcv-label .req { color: var(--err); margin-left: 2px; }
.pcv-hint {
  font-size: 10px;
  color: var(--ink-500);
  margin-top: -2px;
  margin-bottom: 5px;
}
.pcv-input,
.pcv-textarea,
.pcv-select {
  width: 100%;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--ink-900);
  background: var(--ink-0);
  transition: border 120ms, box-shadow 120ms;
  -webkit-appearance: none;
  appearance: none;
}
.pcv-input.sm,
.pcv-textarea.sm,
.pcv-select.sm {
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 7px;
}
.pcv-input:focus,
.pcv-textarea:focus,
.pcv-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.pcv-input::placeholder, .pcv-textarea::placeholder { color: var(--ink-400); }
.pcv-textarea { min-height: 64px; resize: vertical; line-height: 1.4; }
.pcv-textarea.sm { min-height: 48px; }
/* Operation Note: the operative description is the bulk of the note, so give it lots of
   room; the surrounding identity fields are squeezed tighter so they take less combined
   space. (.pcv-opnote-desc wins over .sm via order/specificity.) */
.pcv-opnote-desc { min-height: 300px; }
.pcv-opnote-postop { min-height: 110px; }
.pcv-opnote-form .pcv-field { margin-bottom: 6px; }
.pcv-opnote-form .pcv-row,
.pcv-opnote-form .pcv-row-3 { gap: 7px; margin-bottom: 0; }
.pcv-opnote-form .pcv-input.sm,
.pcv-opnote-form .pcv-select.sm { padding-top: 6px; padding-bottom: 6px; }
/* Middle identity/timing fields squeezed extra-tight; Operation Name (above) and the
   Operative Description / Post-op Instruction (below) keep their full size. */
.pcv-opnote-mid { margin: 2px 0; }
.pcv-opnote-mid .pcv-field { margin-bottom: 4px; }
.pcv-opnote-mid .pcv-label { margin-bottom: 1px; font-size: 9.5px; }
.pcv-opnote-mid .pcv-input.sm,
.pcv-opnote-mid .pcv-select.sm { padding-top: 4px; padding-bottom: 4px; }
.pcv-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5l5 5 5-5' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.pcv-select.sm { padding-right: 26px; background-position: right 8px center; }
.pcv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pcv-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.pcv-readonly {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink-200);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ink-200);
}
.pcv-readonly-cell {
  background: var(--ink-0);
  padding: 9px 11px;
}
.pcv-readonly-cell .pcv-cell-label { font-size: 9px; }
.pcv-readonly-cell .pcv-cell-value { font-size: 12px; }

/* Buttons */
.pcv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ink-200);
  background: var(--ink-0);
  color: var(--ink-800);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.pcv-btn:hover { background: var(--ink-50); border-color: var(--ink-300); }
.pcv-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.pcv-btn.primary:hover { background: var(--primary-700); border-color: var(--primary-700); }
.pcv-btn.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-700);
}
.pcv-btn.ghost:hover { background: var(--ink-100); }
.pcv-btn.danger {
  background: var(--err);
  border-color: var(--err);
  color: white;
}
.pcv-btn.sm { padding: 6px 10px; font-size: 11.5px; border-radius: 8px; }

.pcv-btn-row {
  display: flex; gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  justify-content: flex-end;
}

/* Inline chip rows */
.pcv-chips {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.pcv-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  color: var(--ink-700);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.pcv-chip.is-on {
  background: color-mix(in srgb, var(--primary) 12%, white);
  border-color: color-mix(in srgb, var(--primary) 50%, white);
  color: var(--primary);
}

/* Empty hint inside steps */
.pcv-empty {
  text-align: center;
  padding: 18px 8px;
  font-size: 12px;
  color: var(--ink-500);
  background: var(--ink-50);
  border: 1px dashed var(--ink-200);
  border-radius: 10px;
}

/* Attachments row */
.pcv-attach-list { display: flex; flex-direction: column; gap: 6px; }
.pcv-attach-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
}
.pcv-attach-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-500);
  flex-shrink: 0;
}
.pcv-attach-name { flex: 1; font-size: 12px; font-weight: 500; min-width: 0; }
.pcv-attach-name .sub { display: block; font-size: 10.5px; color: var(--ink-500); font-weight: 400; }

/* ───── Sticky bottom action bar ───── */
.pcv-actionbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--ink-200);
  padding: 10px 14px 38px;
  display: flex; align-items: center; gap: 8px;
  z-index: 4;
}
.pcv-actionbar .pcv-btn { flex-shrink: 0; }
.pcv-actionbar .grow { flex: 1; }
.pcv-actionbar-more {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--ink-200);
  background: white;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-700);
  cursor: pointer;
}
.pcv-actionbar-generate {
  flex: 1;
  height: 40px;
  border: none;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-700) 100%);
  color: white;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--primary) 40%, transparent);
  transition: filter 120ms;
}
.pcv-actionbar-generate:hover { filter: brightness(1.05); }
.pcv-actionbar-generate.is-blocked {
  background: var(--ink-200);
  color: var(--ink-500);
  box-shadow: none;
}
.pcv-actionbar-generate .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.pcv-actionbar-generate.is-blocked .badge { background: var(--err); color: white; }

/* ───── Overflow menu sheet ───── */
.pcv-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 10;
  animation: fade 200ms ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.pcv-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--ink-0);
  border-radius: 20px 20px 0 0;
  z-index: 11;
  padding: 8px 14px 40px;
  animation: slideup 280ms cubic-bezier(.16,1,.3,1);
  max-height: 80%;
  overflow-y: auto;
}
@keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.pcv-sheet-handle {
  width: 36px; height: 4px; background: var(--ink-300);
  border-radius: 2px; margin: 8px auto 12px;
}
.pcv-sheet-title {
  font-size: 16px; font-weight: 700;
  color: var(--ink-900);
  margin: 4px 4px 6px;
  letter-spacing: -0.02em;
}
.pcv-sheet-sub {
  font-size: 12px;
  color: var(--ink-500);
  margin: 0 4px 14px;
  line-height: 1.45;
}
.pcv-sheet-action {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px;
  border: none; background: transparent;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit; font-size: 13.5px;
  color: var(--ink-800);
  font-weight: 500;
}
.pcv-sheet-action:hover { background: var(--ink-50); }
.pcv-sheet-action.danger { color: var(--err); }
.pcv-sheet-action-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--ink-100);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-600);
}
.pcv-sheet-action.danger .pcv-sheet-action-icon { background: var(--err-50); color: var(--err); }

/* Validation in modal */
.pcv-validation-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.pcv-validation-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--warn-50);
  border: 1px solid color-mix(in srgb, var(--warn) 25%, white);
  border-radius: 10px;
}
.pcv-validation-item.is-fixed {
  background: var(--ok-50);
  border-color: color-mix(in srgb, var(--ok) 25%, white);
}
.pcv-validation-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--warn);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
}
.pcv-validation-item.is-fixed .pcv-validation-icon { background: var(--ok); }
.pcv-validation-text { flex: 1; min-width: 0; }
.pcv-validation-text .what {
  font-size: 12.5px; font-weight: 600; color: var(--ink-900);
  line-height: 1.35;
}
.pcv-validation-text .where {
  font-size: 11px; color: var(--ink-500); margin-top: 2px;
}
.pcv-validation-go {
  background: transparent; border: none;
  color: var(--primary);
  font-weight: 600; font-size: 11.5px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: inherit;
  flex-shrink: 0;
}
.pcv-validation-go:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* Section spacer/divider in step body */
.pcv-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
}
.pcv-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Drawer for attachments */
.pcv-drawer-handle {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}

/* Toast */
.pcv-toast {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 110px;
  background: var(--ink-900);
  color: white;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 12;
  display: flex; align-items: center; gap: 8px;
  animation: toastin 240ms cubic-bezier(.16,1,.3,1);
}
.pcv-toast.is-error { background: #B91C1C; }
@keyframes toastin {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Failed-upload retry affordance (background uploads, B7) ──
   Floats above the bottom nav so a failed upload is never silently lost; the user
   keeps working and taps Retry when ready. */
.pcv-upload-failed {
  position: absolute;
  left: 12px; right: 12px; bottom: 64px;
  z-index: 61;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px -8px rgba(15,23,42,0.3);
  animation: toastin 240ms cubic-bezier(.16,1,.3,1);
}
.pcv-upload-failed-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; color: #B91C1C;
  margin-bottom: 7px;
}
.pcv-upload-failed-head > span { flex: 1; min-width: 0; }
.pcv-upload-failed-all {
  font-size: 11px; font-weight: 800; color: #fff;
  background: #DC2626; border: none; border-radius: 8px;
  padding: 4px 10px; cursor: pointer;
}
.pcv-upload-failed-all:active { background: #B91C1C; }
.pcv-upload-failed-list { display: flex; flex-direction: column; gap: 6px; max-height: 132px; overflow-y: auto; }
.pcv-upload-failed-row { display: flex; align-items: center; gap: 8px; }
.pcv-upload-failed-name {
  flex: 1; min-width: 0;
  font-size: 11.5px; color: var(--ink-700, #334155);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcv-upload-failed-btn {
  font-size: 11px; font-weight: 700; color: #B91C1C;
  background: #fff; border: 1px solid #FCA5A5; border-radius: 8px;
  padding: 3px 10px; cursor: pointer; flex-shrink: 0;
}
.pcv-upload-failed-btn:disabled { opacity: 0.6; cursor: default; }
.pcv-upload-failed-x {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  color: #94A3B8; background: transparent; border: none; cursor: pointer;
  border-radius: 8px;
}
.pcv-upload-failed-x:active { background: rgba(148,163,184,0.18); }

/* density-driven adjustments */
.pcv-app.density-compact .pcv-stack { gap: 4px; padding-top: 4px; padding-bottom: calc(env(safe-area-inset-bottom) + 66px); }
.pcv-app.density-compact .pcv-step-head { padding: 8px 12px; }
.pcv-app.density-compact .pcv-step-title { font-size: 13px; }
.pcv-app.density-compact .pcv-step-summary { font-size: 11px; margin-top: 1px; }
.pcv-app.density-compact .pcv-patient { padding-top: 4px; padding-bottom: 10px; }
.pcv-app.density-compact .pcv-patient-name { font-size: 15px; }

/* monochrome step mode */
.pcv-app.mono .pcv-step-head { background: var(--ink-50) !important; }
.pcv-app.mono .pcv-step-head::before { background: var(--ink-400) !important; }
.pcv-app.mono .pcv-step-body.tinted { background: var(--ink-50) !important; }

/* small helpers */
.pcv-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcv-grow { flex: 1; min-width: 0; }
.pcv-mono { font-family: var(--font-mono); letter-spacing: -0.02em; }
.pcv-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Scale wrapper for centering inside the iOS device */
.pcv-host {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 30% 0%, #E8EDFB 0%, transparent 60%),
    radial-gradient(900px 500px at 70% 100%, #EFF6F4 0%, transparent 60%),
    #EEF1F8;
  padding: 20px;
}

/* ── Bottom action bar — 5 buttons, icon-above-text, 10.5px font ── */
.pcv-actionbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border-top: 1px solid var(--ink-200);
  padding: 7px 10px calc(env(safe-area-inset-bottom) + 9px);
  display: flex; flex-direction: column; gap: 6px;
  z-index: 4;
  max-width: 100%;
  box-sizing: border-box;
}
/* Heavy blur repaints every scroll frame on phones → drop it on small screens (the bar is
   already near-opaque, so it still reads as a solid bar). Removes the scroll jank. */
@media (max-width: 820px), (pointer: coarse) {
  .pcv-actionbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}
.pcv-actionbar-row { display: flex; align-items: stretch; gap: 8px; width: 100%; }
/* Full-width Discharge action (light red). Locks to grey once discharged. */
.pcv-discharge-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #FB8C8C, #F36A6A);
  color: #fff; font-family: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: -0.01em; cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(244, 99, 99, 0.5);
}
.pcv-discharge-btn:active { transform: translateY(1px); }
.pcv-discharge-btn:disabled { opacity: .65; cursor: default; }
.pcv-discharge-btn svg { width: 14px; height: 14px; }
.pcv-discharge-btn.is-locked {
  background: var(--ink-200, #D6DEE8); color: var(--ink-600, #475569);
  box-shadow: none;
}
/* Discharged lock: the whole case body greys out + becomes non-interactive; the top bar
   (status/back) and the action bar (to unlock) stay live. */
.pcv-app.is-discharged-lock .pcv-patient,
.pcv-app.is-discharged-lock .pcv-dashboard,
.pcv-app.is-discharged-lock .pcv-stack {
  opacity: 0.55;
  filter: grayscale(0.5);
  pointer-events: none;
  user-select: none;
}
.pcv-bottom-btn {
  flex: 1 1 0;
  min-width: 0;
  /* Horizontal (icon beside label), stretched to share the FULL bar width so
     "Generate Orders" never truncates. Slimmer height for a sleeker bar. */
  /* Icon-above-label, all three exactly equal width (flex:1) + equal height */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 4px;
  border-radius: 11px;
  border: 1.5px solid var(--ink-200);
  background: white;
  color: var(--ink-800);
  font-size: 9.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 160ms;
  position: relative;
  letter-spacing: -0.005em;
  height: 50px;
  box-sizing: border-box;
}
.pcv-bottom-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.pcv-bottom-btn:hover { background: var(--ink-50); border-color: var(--ink-300); }
.pcv-bottom-btn span {
  text-align: center;
  white-space: normal;   /* allow 2-line wrap so full label is always readable */
  line-height: 1.1;
  width: 100%;
}

/* Match the upper events-rail buttons' teal theme.
   Print Drug Orders = filled teal (like Log Round); Print Documents = teal outline. */
.pcv-bottom-btn.generate {
  background: #0D9488;
  border-color: #0D9488;
  color: #fff;
}
.pcv-bottom-btn.generate:hover { background: #0B7E73; }
.pcv-bottom-btn.generate.is-set { background: #0D9488; }
.pcv-bottom-btn.generate svg { color: #fff; }
.pcv-bottom-btn.print {
  color: #0D9488;
  border-color: rgba(13, 148, 136, 0.35);
}
.pcv-bottom-btn.print svg { color: #0D9488; }
.pcv-bottom-btn.print:hover { background: #F0FBF8; border-color: rgba(13, 148, 136, 0.55); }
/* Discharge — soft light-red, sits harmoniously in the row (red = terminal action) */
.pcv-bottom-btn.discharge {
  background: color-mix(in srgb, var(--err) 9%, white);
  border-color: color-mix(in srgb, var(--err) 30%, white);
  color: #B91C1C;
}
.pcv-bottom-btn.discharge svg { color: #DC2626; }
.pcv-bottom-btn.discharge:hover { background: color-mix(in srgb, var(--err) 14%, white); }
.pcv-bottom-btn.discharge.is-locked {
  background: var(--ink-100); border-color: var(--ink-200); color: var(--ink-500);
}
.pcv-bottom-btn.discharge.is-locked svg { color: var(--ink-400); }
.pcv-bottom-btn:disabled { opacity: 0.6; cursor: default; }

.pcv-bottom-btn.drugorder {
  background: #F3EEFD; border-color: #DDD0FA; color: #7C3AED;
}
.pcv-bottom-btn.drugorder:hover { background: #ECE0FB; }

.pcv-bottom-btn.assignot {
  background: #E5FBF4; border-color: #BBEFDF; color: #0D9488;
}
.pcv-bottom-btn.assignot:hover { background: #D9F7EC; }
.pcv-bottom-btn.assignot.is-set { background: #0D9488; border-color: #0D9488; color: white; }

.pcv-bottom-btn.upload {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--primary) 35%, transparent);
}
.pcv-bottom-btn.upload:hover { background: var(--primary-700); border-color: var(--primary-700); }

.pcv-bottom-btn.loground {
  background: #EFFAF1; border-color: #C9EFCC; color: #16A34A;
}
.pcv-bottom-btn.loground:hover { background: #E5F7E9; }

.pcv-bottom-btn.print {
  background: white; border-color: var(--ink-300); color: var(--ink-700);
}
.pcv-bottom-btn.print:hover { background: var(--ink-50); }

.pcv-bottom-badge {
  position: absolute; top: -4px; right: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ink-900);
  color: white;
  font-size: 9.5px;
  font-weight: 700;
  border: 1.5px solid white;
}
.pcv-bottom-dot {
  position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  border: 1.5px solid white;
}

/* ── Assign to OT button (in patient header) ── */
.pcv-assign-ot {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px;
  border-radius: 9px;
  border: 1.5px solid var(--primary);
  background: var(--primary-50);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: all 160ms;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}
.pcv-assign-ot:hover { background: var(--primary-100); }
.pcv-assign-ot.is-set {
  background: var(--primary);
  color: white;
}
.pcv-assign-ot-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  position: absolute;
  top: -3px; right: -3px;
  border: 1.5px solid white;
}

/* ── OT sheet ── */
.pcv-ot-sheet { padding-bottom: 24px; }
.pcv-ot-banner {
  display: flex; align-items: center; gap: 10px;
  position: relative;
  padding: 11px 14px;
  background: #F2F4FA;
  border-radius: 10px;
  margin: 0 0 12px;
  overflow: hidden;
}
.pcv-ot-banner-bar {
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--err);
  border-radius: 0 2px 2px 0;
}
.pcv-ot-banner-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.015em;
}
.pcv-ot-banner-sub {
  font-size: 11.5px;
  color: var(--ink-500);
  margin-top: 1px;
}
.pcv-ot-banner-flag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--err);
  flex-shrink: 0;
}
.pcv-ot-banner-flag.is-ready { color: var(--ok); }
.pcv-ot-form {
  padding: 2px 0 4px;
}

/* ── Comorbidity grouped panel ── */
.pcv-comorb-group {
  margin-top: 8px;
}
.pcv-comorb-toggle {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 7px 10px;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-800);
  letter-spacing: -0.005em;
}
.pcv-comorb-toggle:hover { border-color: var(--ink-300); }
.pcv-comorb-toggle-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dp-accent, var(--primary));
  flex-shrink: 0;
}
.pcv-comorb-toggle-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--dp-accent, var(--primary));
  color: white;
  font-size: 10px;
  font-weight: 700;
}
.pcv-comorb-toggle-chev {
  font-size: 9px;
  color: var(--ink-400);
}
.pcv-comorb-meds {
  margin-top: 6px;
  padding: 9px;
  background: color-mix(in srgb, var(--dp-accent, var(--primary)) 6%, white);
  border: 1px solid color-mix(in srgb, var(--dp-accent, var(--primary)) 18%, var(--ink-200));
  border-radius: 9px;
  animation: pv-slidedown 200ms cubic-bezier(.16,1,.3,1);
}
@keyframes pv-slidedown {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pcv-comorb-meds-empty {
  font-size: 11px;
  color: var(--ink-500);
  text-align: center;
  padding: 6px 0;
  font-style: italic;
}
.pcv-comorb-meds-add {
  margin-top: 7px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px dashed color-mix(in srgb, var(--dp-accent, var(--primary)) 40%, var(--ink-300));
  background: transparent;
  color: var(--dp-accent, var(--primary));
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.pcv-comorb-meds-add:hover { background: color-mix(in srgb, var(--dp-accent, var(--primary)) 8%, white); }

/* ── Single drug entry card (used in comorb panel + meds) ── */
.pcv-drug-card,
.pcv-med-card {
  position: relative;
  padding: 9px 10px 7px;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
}
.pcv-drug-card-x {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--ink-400);
  border-radius: 6px;
  cursor: pointer;
}
.pcv-drug-card-x:hover { background: var(--err-50); color: var(--err); }

/* ── Meds autosuggest chip row ── */
.pcv-meds-suggest {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--primary) 6%, white);
  border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--ink-300));
  border-radius: 9px;
  margin-bottom: 10px;
}
.pcv-meds-suggest-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-right: 2px;
}
.pcv-meds-suggest-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px;
  background: white;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--ink-200));
  color: var(--primary);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.pcv-meds-suggest-chip:hover { background: color-mix(in srgb, var(--primary) 12%, white); }

/* ── Clinical table ── */
.pcv-clin-wrap {
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.pcv-clin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pcv-clin-table thead th {
  padding: 8px 10px;
  background: var(--ink-50);
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-200);
}
.pcv-clin-table tbody tr { border-bottom: 1px solid var(--ink-100); }
.pcv-clin-table tbody tr:last-child { border-bottom: none; }
.pcv-clin-table tbody td {
  padding: 8px 10px;
  color: var(--ink-800);
  vertical-align: top;
  font-size: 12px;
}
.pcv-clin-table tbody td.muted { color: var(--ink-400); }
.pcv-clin-table tfoot td {
  padding: 8px 10px;
  border-top: 1px solid var(--ink-200);
  background: var(--ink-50);
}

/* Table "Add row" button — lower right */
.pcv-clin-add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; background: none;
  color: var(--primary);
  font-size: 11px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 7px;
  transition: background 120ms;
}
.pcv-clin-add-btn:hover { background: var(--primary-50); }

/* Inline add-form below table */
.pcv-table-add-form {
  padding: 10px 12px;
  background: var(--ink-50);
  border-top: 1px solid var(--ink-200);
}

/* Section label (used in exam body) */
.pcv-section-label {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-700);
  background: var(--ink-100, #F1F5F9);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 6px;
  margin-top: 4px;
}

/* ── Drug panel (comorbidities) ── */
.pcv-drug-panel {
  margin-top: 6px;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  background: var(--ink-50);
  padding: 10px 10px 8px;
  animation: pv-slidedown 200ms cubic-bezier(.16,1,.3,1);
}
@keyframes pv-slidedown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pcv-drug-panel-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-500);
  margin-bottom: 7px;
}
.pcv-drug-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pcv-drug-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  background: white;
  color: var(--ink-700);
  font-size: 11px; font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
  font-family: inherit;
}
.pcv-drug-chip:hover { border-color: var(--ink-300); }
.pcv-drug-chip.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.pcv-drug-add-other {
  display: flex; gap: 6px;
  margin-top: 8px;
}
.pcv-drug-add-other input {
  flex: 1;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--ink-900);
  background: white;
  outline: none;
}
.pcv-drug-add-other input:focus { border-color: var(--primary); }
.pcv-drug-add-other button {
  padding: 6px 11px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: white;
  font-size: 11px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* ── Add other comorbidity inline ── */
.pcv-comorb-add {
  display: flex; gap: 6px;
  margin-top: 8px;
}
.pcv-comorb-add input {
  flex: 1;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--ink-900);
  background: white;
  outline: none;
}
.pcv-comorb-add input:focus { border-color: var(--primary); }
.pcv-comorb-add button {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--ink-200);
  background: white;
  color: var(--ink-700);
}
.pcv-comorb-add button:first-of-type {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* ──────── Case dashboard strips (between header & ribbon stack) ──────── */
.pcv-dashboard {
  flex-shrink: 0;
  background: var(--ink-0);
  border-bottom: 1px solid var(--ink-200);
  padding: 3px 10px 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
  box-sizing: border-box;
}
.pcv-dash-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}
.pcv-dash-tile-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
  min-width: 0;
}
.pcv-dash-link {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary);
  background: transparent;
  border: none;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.pcv-dash-link:hover { background: var(--primary-50); }
.pcv-dash-rail .pcv-dash-label { margin-bottom: 4px; }
.pcv-dash-strip {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pcv-dash-strip::-webkit-scrollbar { display: none; }

/* Photo rail */
.pcv-photo-thumb {
  width: 40px; height: 40px;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  background: var(--ink-100);
  border: 2px solid var(--ink-200);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms, border-color 120ms;
  display: block;
}
.pcv-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcv-photo-thumb:hover { transform: scale(1.06); }
.pcv-photo-thumb.src-injury  { border-color: #DC2626; }
.pcv-photo-thumb.src-key     { border-color: var(--primary); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--primary) 25%, transparent); }
.pcv-photo-thumb.src-preop   { border-color: #0D9488; }
.pcv-photo-thumb.src-investigation { border-color: #3B82F6; }
.pcv-photo-thumb.src-intraop { border-color: #EA580C; }
.pcv-photo-thumb.src-postop  { border-color: #64748B; }
.pcv-photo-thumb.src-others  { border-color: #475569; }

.pcv-photo-more {
  flex-shrink: 0;
  height: 40px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--ink-100);
  border: 1.5px solid var(--ink-300);
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.pcv-photo-more:hover { background: var(--ink-200); }

.pcv-photo-add {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: inherit;
  margin-left: auto;
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--primary) 45%, transparent);
  transition: transform 120ms, box-shadow 120ms;
  position: relative;
}
.pcv-photo-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px -2px color-mix(in srgb, var(--primary) 55%, transparent);
}
.pcv-photo-add svg { width: 18px; height: 18px; }
.pcv-photo-add::after {
  content: '+';
  position: absolute;
  top: -3px; right: -3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--primary);
  line-height: 1;
  padding-bottom: 1px;
  box-sizing: border-box;
}

/* Full-page step overlay — an opened ribbon takes the whole case-view area so the
   entry form gets maximum space (portaled into .pcv-app, which is position:relative). */
/* Ribbon overlay = dim backdrop; the form lives in a pop-up "sheet" that leaves a gap at
   the top so it reads as a modal, not a full page. Tap the gap to close. */
.pcv-step-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, 0.42);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: pcv-overlay-fade 160ms ease;
}
@keyframes pcv-overlay-fade { from { opacity: 0; } to { opacity: 1; } }
.pcv-step-sheet {
  margin-top: 44px;                 /* the gap that makes it feel like a pop-up */
  flex: 1 1 auto; min-height: 0;
  background: var(--ink-0);
  border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -12px 44px -8px rgba(15, 23, 42, 0.35);
  animation: pcv-sheet-up 240ms cubic-bezier(.16,1,.3,1);
}
@keyframes pcv-sheet-up { from { transform: translateY(28px); opacity: 0.5; } to { transform: none; opacity: 1; } }
@keyframes pcv-step-overlay-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pcv-step-overlay-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 14px 11px;
  border-bottom: 1px solid var(--ink-150);
  background: var(--step-tint, #fff);
  border-radius: 22px 22px 0 0;
  position: relative;
}
/* a faint grab handle on the sheet header */
.pcv-step-overlay-head::after {
  content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 999px; background: rgba(15,23,42,0.15);
}
.pcv-step-head-saved { flex-shrink: 0; margin-left: auto; }
/* Bottom-of-ribbon footer: passive "Saved / Auto-saving" status + an explicit Done that
   closes the ribbon (autosave has already persisted; Done is just a clear exit). */
.pcv-step-overlay-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--ink-150);
}
.pcv-step-done-btn {
  flex-shrink: 0; border: none; border-radius: 10px;
  background: var(--step-accent, var(--primary)); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 800;
  padding: 11px 28px; cursor: pointer; letter-spacing: -0.01em;
  box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--step-accent, var(--primary)) 55%, transparent);
}
.pcv-step-done-btn:active { transform: translateY(1px); }
.pcv-step-overlay-back {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: -4px;
  border: none; background: transparent; border-radius: 999px;
  color: var(--step-accent, var(--ink-700)); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pcv-step-overlay-back:active { background: color-mix(in srgb, var(--step-accent, var(--ink-400)) 16%, transparent); }
.pcv-step-overlay-title {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 800; color: var(--ink-900);
}
.pcv-step-overlay-done {
  flex-shrink: 0;
  /* Light/idle by default; turns dark + filled once the user edits something (is-dirty). */
  border: 1px solid color-mix(in srgb, var(--step-accent, var(--primary)) 35%, white);
  background: color-mix(in srgb, var(--step-accent, var(--primary)) 12%, white);
  color: var(--step-accent, var(--primary));
  font-family: inherit; font-size: 13px; font-weight: 800;
  padding: 8px 18px; border-radius: 999px;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.pcv-step-overlay-done.is-dirty {
  border-color: var(--step-accent, var(--primary));
  background: var(--step-accent, var(--primary));
  color: #fff;
  box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--step-accent, var(--primary)) 60%, transparent);
}
.pcv-step-overlay-done:active { transform: translateY(1px); }
.pcv-step-body-full {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Bottom scroll-room so the on-screen keyboard can't trap the last field, but not so much
     that short forms scroll oddly. 28vh clears the keyboard without huge empty space. */
  padding: 12px 13px calc(28vh + env(safe-area-inset-bottom)) !important;
  border-radius: 0 !important;
  scroll-padding-bottom: 28vh;
}
/* Framed (desktop) mode draws a mock status bar; nudge the overlay header below it. */
.ios-device:not(.ios-device-fluid) .pcv-step-overlay-head { padding-top: 14px; }

/* Mobile keyboard ergonomics: a focused field scrolls to the TOP of its scroll area
   (app.jsx focusin handler). scroll-margin-top leaves room so it lands just below the
   sticky header / sheet handle instead of flush against the edge. */
.pcv-app input, .pcv-app textarea, .pcv-app select,
.pcv-sheet input, .pcv-sheet textarea, .pcv-sheet select { scroll-margin-top: 70px; }

/* Ortho Board assignment — lives on the Log Round → Board Decision page (SOMC) */
.pcv-board-assign-row { display: flex; flex-wrap: wrap; gap: 7px; }
.pcv-board-assign-chip {
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid #7C3AED; color: #5B21B6; background: #F5F1FE;
  transition: background 120ms, transform 120ms;
}
.pcv-board-assign-chip:hover { background: #7C3AED; color: #fff; transform: translateY(-1px); }
/* Once assigned, the control locks to a light-gray "Assigned to … Board" chip. */
.pcv-board-assigned {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--ink-100, #EEF2F7); color: var(--ink-500, #64748B);
  border: 1px solid var(--ink-200, #D6DEE8);
  font-size: 12.5px; font-weight: 700;
}
.pcv-board-assigned svg { width: 12px; height: 12px; }

/* Multi-board assignment: a checklist where each board can be ticked independently;
   ticking reveals its review date + a Cancel control. */
.pcv-label-hint { font-weight: 500; color: var(--ink-400, #94A3B8); font-size: 9.5px; }
.pcv-board-check-list { display: flex; flex-direction: column; gap: 6px; }
.pcv-board-check-item {
  border: 1px solid var(--ink-200, #E2E8F0); border-radius: 10px;
  padding: 9px 11px; background: var(--ink-0, #fff);
  transition: border-color 120ms, background 120ms;
}
.pcv-board-check-item.is-on { border-color: #A78BFA; background: #F8F5FF; }
.pcv-board-check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-700, #334155); }
.pcv-board-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: #7C3AED; cursor: pointer; flex: none; }
.pcv-board-review {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--ink-200, #E2E8F0);
}
.pcv-board-review-label { font-size: 10px; font-weight: 700; color: var(--ink-500, #64748B); text-transform: uppercase; letter-spacing: .02em; }
.pcv-board-review .pcv-input.sm { max-width: 160px; }
.pcv-board-cancel {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid #FCA5A5; color: #DC2626; background: #FEF2F2;
}
.pcv-board-cancel:hover { background: #FEE2E2; }
.pcv-board-cancel svg { width: 11px; height: 11px; }

/* ── OT List schedule (SOMC) ── */
.otlist-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.otlist-print-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.otlist-card { background: #fff; border: 1px solid var(--ink-150,#E8EDF3); border-radius: 13px; padding: 11px; }
.otlist-card-head { display: flex; align-items: center; gap: 9px; }
.otlist-serial {
  flex: none; width: 24px; height: 24px; border-radius: 999px;
  background: #E5FBF4; color: #0D9488; font-weight: 800; font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.otlist-card-name { flex: 1; min-width: 0; }
.otlist-reorder { display: flex; align-items: center; gap: 2px; }
.otlist-reorder .pcv-icon-btn { width: 28px; height: 28px; color: var(--ink-500,#64748B); }
.otlist-reorder .pcv-icon-btn:disabled { opacity: .3; cursor: default; }
.otlist-reorder .otlist-del { color: #DC2626; }
.otlist-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 8px; }
.otlist-meta { margin-top: 8px; font-size: 12px; color: var(--ink-700,#334155); line-height: 1.5; }
.otlist-meta b { color: var(--ink-500,#64748B); font-weight: 700; }

/* OT List / Planning printable */
.otlist-print-root { position: fixed; inset: 0; z-index: 300; background: var(--ink-100,#EEF2F7); overflow: auto; display: flex; flex-direction: column; }
.otlist-print-toolbar { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: max(env(safe-area-inset-top), 14px) 14px 12px; background: #fff; border-bottom: 1px solid var(--ink-200,#E2E8F0); }
.otlist-print-toolbar-title { flex: 1; text-align: center; font-weight: 800; font-size: 14px; color: var(--ink-900,#0F172A); }
.otlist-print-page { background: #fff; margin: 14px auto; padding: 22px; max-width: 900px; width: 100%; box-sizing: border-box; box-shadow: 0 2px 14px rgba(15,23,42,.08); }
.otlist-print-head { text-align: center; margin-bottom: 14px; }
.otlist-print-inst { font-weight: 800; font-size: 15px; color: #0F172A; }
.otlist-print-doctitle { font-weight: 700; font-size: 13px; color: #334155; margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.otlist-print-date { font-size: 12px; color: #64748B; margin-top: 3px; }
.otlist-print-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.otlist-print-table th, .otlist-print-table td { border: 1px solid #94A3B8; padding: 5px 6px; text-align: left; vertical-align: top; }
.otlist-print-table th { background: #F1F5F9; font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: .02em; }
.otlist-print-dim { color: #64748B; font-size: 10px; }
.otlist-print-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; font-size: 11px; color: #334155; flex-wrap: wrap; }

/* OT List / OT Planning print. The print doc lives INSIDE the phone device-shell, so a
   naive window.print() printed the framed (clipped/scaled) UI. We escape the frame the
   same way the case-view docs do: while body.otlist-printing is set, hide everything via
   visibility, reveal ONLY the printable, and pin it to the page origin at full width.
   Optimised so a full day's list (up to ~20 cases) fits one A4 landscape page. */
@media print {
  /* NAMED page — must NOT be the unnamed @page, or this landscape size leaks into every other
     print job (clinical case-view docs were silently coming out landscape because of it). Only
     the OT-list pages opt in via `page: otlist`. */
  @page otlist { size: A4 landscape; margin: 7mm; }
  body.otlist-printing .otlist-print-page,
  body.otlist-printing .somc-ol-page { page: otlist; }
  body.otlist-printing { background: #fff !important; }
  body.otlist-printing * { visibility: hidden !important; }
  body.otlist-printing .otlist-print-page,
  body.otlist-printing .otlist-print-page * { visibility: visible !important; }
  body.otlist-printing .otlist-print-toolbar { display: none !important; }
  /* Pin the container to the page box (escapes the device-shell frame), page flows inside. */
  body.otlist-printing .otlist-print-root {
    position: fixed !important; inset: 0 !important; overflow: visible !important;
    background: #fff !important; display: block !important; width: auto !important; height: auto !important; transform: none !important;
  }
  body.otlist-printing .otlist-print-page {
    position: static !important; width: 100% !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; box-shadow: none !important; background: #fff !important;
  }
  .otlist-print-head { margin-bottom: 6px; }
  .otlist-print-inst { font-size: 13px; }
  .otlist-print-doctitle { font-size: 10px; margin-top: 2px; }
  .otlist-print-date { font-size: 9px; margin-top: 2px; }
  /* Fixed layout + wrapping so columns honour their width; compact rows fit ~20/page. */
  .otlist-print-table { table-layout: fixed; width: 100%; font-size: 8px; }
  .otlist-print-table th, .otlist-print-table td {
    padding: 2px 4px; font-size: 8px; line-height: 1.2; vertical-align: top;
    word-break: break-word; overflow-wrap: anywhere; white-space: normal;
  }
  .otlist-print-table th { font-size: 7.5px; }
  .otlist-print-dim { font-size: 7px; }
  /* Repeat the header on every page; never split a case row across pages. */
  .otlist-print-table thead { display: table-header-group; }
  .otlist-print-table tr { break-inside: avoid; page-break-inside: avoid; }
  .otlist-print-foot { margin-top: 10px; font-size: 8.5px; }
}

/* ───── SOMC official "Operation List" form (A4 landscape) ─────
   Printed from the OT List screen. Two forms per day: Routine (OT room 1) and Emergency
   (OT rooms 2 & 3). Rendered inside .otlist-print-page so the existing print-escape +
   A4-landscape @page rules apply. Cell text auto-fits via the FitText component. */
.somc-ol { font-family: var(--font-sans); color: #111; }
.somc-ol-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.somc-ol-recv { font-size: 8px; line-height: 1.5; width: 20%; border: 1px solid #111; padding: 3px 5px; }
.somc-ol-titlewrap { flex: 1; text-align: center; padding-top: 2px; }
.somc-ol-inst { font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.somc-ol-crest { width: 20px; height: 20px; border: 1.4px solid #111; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.somc-ol-tag { border: 1.4px solid #111; border-radius: 3px; padding: 1px 9px; font-size: 13px; font-weight: 800; margin-left: 4px; }
.somc-ol-meta { width: 100%; border-collapse: collapse; margin-top: 7px; font-size: 9px; table-layout: fixed; }
.somc-ol-meta td { border: 1px solid #111; padding: 4px 7px; }
.somc-ol-tick { display: inline-block; width: 10px; height: 10px; border: 1px solid #111; margin: 0 3px 0 7px; vertical-align: -1px; text-align: center; line-height: 9px; font-size: 8px; }
.somc-ol-tick.on { background: #111; color: #fff; }
.somc-ol-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8px; margin-top: 5px; }
.somc-ol-table th, .somc-ol-table td { border: 1px solid #111; padding: 2px 3px; vertical-align: top; word-break: break-word; overflow-wrap: anywhere; }
.somc-ol-table th { font-size: 7px; font-weight: 700; text-align: center; line-height: 1.12; }
.somc-ol-table td { height: 30px; font-size: 8px; }
.somc-ol-c { text-align: center; }
.somc-ol-nm { font-weight: 700; font-size: 8.5px; }
.somc-ol-sub { color: #333; font-size: 7.5px; }
.somc-ol-fit { line-height: 1.15; overflow: hidden; word-break: break-word; overflow-wrap: anywhere; }
.somc-ol-decl { font-size: 8px; margin-top: 7px; font-style: italic; }
.somc-ol-foot { display: flex; justify-content: space-between; gap: 24px; margin-top: 5px; align-items: flex-end; }
.somc-ol-copy { font-size: 7.5px; line-height: 1.55; }
.somc-ol-signs { display: flex; gap: 26px; align-items: flex-end; margin-top: 34px; }
.somc-ol-sig { border-top: 1px solid #111; padding-top: 3px; text-align: center; font-size: 8.5px; min-width: 150px; }
/* OT List editable screen — patient picker + a couple of helpers */
.otlist-pick { display: flex; align-items: center; gap: 8px; }
.otlist-pick select { flex: 1; }
.otlist-meta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.otlist-card-room { min-width: 78px; }
.otlist-rt-badge { font-size: 9px; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; }
.otlist-rt-badge.routine { background: #E0F2FE; color: #0369A1; }
.otlist-rt-badge.emergency { background: #FEE2E2; color: #B91C1C; }
@media print {
  body.otlist-printing .somc-ol-page { page-break-after: always; }
  body.otlist-printing .somc-ol-page:last-child { page-break-after: auto; }
}

/* Collapsed gallery — slim add button shown until the first media is logged */
.pcv-photo-rail.is-collapsed { margin: 0; padding: 0; }
.pcv-photo-add-collapsed {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px dashed var(--ink-300, #CBD5E1);
  background: var(--ink-50, #F8FAFC);
  color: var(--primary);
  font-family: inherit;
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.pcv-photo-add-collapsed:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, white);
}
.pcv-photo-add-collapsed svg { width: 16px; height: 16px; }

/* Active meds tile */
.pcv-meds-tile {
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  padding: 8px 9px;
  max-width: 100%;
  box-sizing: border-box;
}
.pcv-meds-pills {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-width: 0;
}
.pcv-med-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 7px;
  border-radius: 999px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  color: var(--ink-800);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  max-width: 100%;
  min-width: 0;
  transition: background 120ms, border-color 120ms;
}
.pcv-med-pill:hover { background: white; border-color: var(--ink-300); }
.pcv-med-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pcv-med-pill-dot.src-comorb   { background: #3B82F6; }
.pcv-med-pill-dot.src-order    { background: #8B5CF6; }
.pcv-med-pill-dot.src-discharge{ background: #16A34A; }
.pcv-med-pill-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}
.pcv-med-pill-meta {
  color: var(--ink-500);
  font-weight: 500;
  font-size: 10.5px;
}
.pcv-med-pill-more {
  background: white;
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--ink-200));
}

/* Events rail */
.pcv-event-card {
  flex-shrink: 0;
  width: 175px;
  padding: 8px 10px;
  border: 1px solid var(--ink-200);
  border-left: 3px solid #64748B;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: transform 120ms;
}
.pcv-event-card:hover { transform: translateY(-1px); }
.pcv-event-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  align-self: flex-start;
}
.pcv-event-date {
  font-size: 10px;
  color: var(--ink-500);
  font-weight: 500;
}
.pcv-event-snippet {
  font-size: 11px;
  color: var(--ink-800);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcv-event-empty, .pcv-event-add {
  width: auto;
  min-width: 100px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--primary);
  border-color: var(--primary);
  border-left: 1px solid var(--primary);
  background: var(--primary-50);
  font-size: 11px;
  font-weight: 700;
}
.pcv-event-empty:hover, .pcv-event-add:hover { background: var(--primary-100); }

/* Full-width "Log Round" empty-state CTA — centered */
.pcv-event-empty-cta {
  flex: 1;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 14px;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, #0D9488, #14B8A6);
  color: white;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, #0D9488 50%, transparent);
  transition: transform 120ms, box-shadow 120ms;
}
.pcv-event-empty-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px color-mix(in srgb, #0D9488 60%, transparent);
}
.pcv-event-empty-cta-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pcv-event-empty-cta-icon svg { width: 16px; height: 16px; }
.pcv-event-empty-cta-text {
  display: flex; flex-direction: column;
  align-items: center;
  min-width: 0;
}
.pcv-event-empty-cta-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.pcv-event-empty-cta-sub {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}

/* ── Patient Condition Update (read-only) ── */
.pcv-cond-body { display: flex; flex-direction: column; gap: 9px; }
.pcv-cond-head {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink-200);
}
.pcv-cond-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
}
.pcv-cond-date {
  font-size: 11.5px;
  color: var(--ink-700);
  font-weight: 600;
}
.pcv-cond-source {
  margin-left: auto;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  font-weight: 700;
}
.pcv-cond-section { display: flex; flex-direction: column; gap: 3px; }
.pcv-cond-section-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}
.pcv-cond-text {
  font-size: 12px;
  color: var(--ink-800);
  line-height: 1.4;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  padding: 6px 9px;
}
.pcv-cond-vitals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.pcv-cond-vital {
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  padding: 6px 8px;
  text-align: center;
}
.pcv-cond-vital-k {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}
.pcv-cond-vital-v {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  margin-top: 1px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}
.pcv-cond-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.pcv-cond-grid .pcv-cond-vital-k {
  display: inline-block;
  margin-bottom: 3px;
}
.pcv-cond-footer {
  font-size: 10.5px;
  color: var(--ink-400);
  font-style: italic;
  text-align: center;
  padding-top: 4px;
}

/* ── Pre-Op letter mode ── */
.pcv-ob-preop {
  display: flex; flex-direction: column;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 9px;
  padding: 10px;
  gap: 8px;
}
.pcv-ob-preop-header {
  font-size: 11px;
  font-weight: 700;
  color: #92400E;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pcv-ob-preop-list { display: flex; flex-direction: column; gap: 6px; }
.pcv-ob-preop-line {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 9px;
  background: white;
  border-radius: 7px;
  border: 1px solid #FDE68A;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-800);
}
.pcv-ob-preop-line input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #D97706;
  cursor: pointer;
  flex-shrink: 0;
}
.pcv-ob-preop-line.is-off { opacity: 0.45; }
.pcv-ob-preop-line.is-locked { background: #FEF3C7; }
.pcv-ob-preop-lock {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #D97706;
  font-size: 8px;
  margin-top: 2px;
  flex-shrink: 0;
}
.pcv-ob-inst-text {
  flex: 1; min-width: 0;
  word-wrap: break-word;
}
.pcv-ob-var-input {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  border: 1px solid #FCD34D;
  background: #FEF3C7;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #92400E;
  min-width: 70px;
  vertical-align: baseline;
}
.pcv-ob-var-input:focus { outline: none; border-color: #D97706; background: white; }
.pcv-ob-var-val {
  display: inline-block;
  padding: 0 5px;
  background: #FEF3C7;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #92400E;
}

/* ── Order Builder ── */
.pcv-ob { display: flex; flex-direction: column; gap: 8px; }
.pcv-ob-tpl-btn {
  display: flex; align-items: center; gap: 5px;
  justify-content: flex-start;
  cursor: pointer;
  text-align: left;
  background: white;
  font-family: inherit;
  color: var(--primary);
  font-weight: 600;
}
.pcv-ob-tpl-list {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px;
  background: var(--primary-50);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--ink-200));
  border-radius: 9px;
}
.pcv-ob-tpl-empty { font-size: 11px; color: var(--ink-500); font-style: italic; text-align: center; padding: 6px; }
.pcv-ob-tpl-card {
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
}
.pcv-ob-tpl-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.pcv-ob-tpl-name { font-size: 12.5px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.005em; }
.pcv-ob-tpl-meta { font-size: 10.5px; color: var(--ink-500); margin-top: 2px; }

.pcv-ob-items { display: flex; flex-direction: column; gap: 4px; }
.pcv-ob-empty {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 8px;
  background: var(--ink-50);
  border: 1px dashed var(--ink-300);
  border-radius: 9px;
  color: var(--ink-500);
  font-size: 11.5px;
}
.pcv-ob-item {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  min-width: 0;
}
.pcv-ob-item-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  color: white;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.pcv-ob-item-text {
  flex: 1; min-width: 0;
  font-size: 11.5px;
  color: var(--ink-800);
  line-height: 1.35;
  word-wrap: break-word;
}
.pcv-ob-item-actions { display: flex; gap: 1px; flex-shrink: 0; }
.pcv-ob-item-actions button { font-size: 10px; }
.pcv-ob-item-actions button:disabled { opacity: 0.3; cursor: not-allowed; }

.pcv-ob-editor {
  display: flex; flex-direction: column; gap: 6px;
  padding: 9px;
  background: var(--primary-50);
  border: 1.5px solid var(--primary);
  border-radius: 9px;
  margin-top: 4px;
}
.pcv-ob-editor-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}
.pcv-ob-editor-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  margin-top: 4px;
}

.pcv-ob-toggle {
  display: flex; gap: 3px;
  padding: 3px;
  background: var(--ink-100);
  border-radius: 7px;
  min-width: 0;
}
.pcv-ob-toggle-btn {
  flex: 1;
  padding: 5px 6px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-600);
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
}
.pcv-ob-toggle-btn.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.pcv-ob-add-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.pcv-ob-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 4px;
  border-radius: 7px;
  border: 1px dashed var(--ink-300);
  background: white;
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.pcv-ob-add-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.pcv-ob-add-btn[data-k="diet"]:hover        { border-color: #16A34A; color: #16A34A; background: #EFFAF1; }
.pcv-ob-add-btn[data-k="drug"]:hover        { border-color: #8B5CF6; color: #8B5CF6; background: #F3EEFD; }
.pcv-ob-add-btn[data-k="fluid"]:hover       { border-color: #0EA5E9; color: #0EA5E9; background: #E5F2F8; }
.pcv-ob-add-btn[data-k="instruction"]:hover { border-color: #475569; color: #475569; background: #F1F5F9; }
.pcv-ob-add-btn svg { width: 10px; height: 10px; }

.pcv-ob-save-row {
  display: flex; gap: 6px; justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--ink-200);
}

.pcv-ob-tpl-save {
  display: flex; gap: 4px; flex: 1; align-items: center;
  min-width: 0;
}
.pcv-ob-tpl-save input { flex: 1; min-width: 0; }

/* Saved order cards */
.pcv-ob-saved-order {
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  padding: 8px 10px;
}
.pcv-ob-saved-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.pcv-ob-saved-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
}
.pcv-ob-saved-date {
  font-size: 10.5px;
  color: var(--ink-500);
  flex: 1;
}
.pcv-ob-saved-items { display: flex; flex-direction: column; gap: 2px; }
.pcv-ob-saved-line {
  font-size: 11px;
  color: var(--ink-800);
  line-height: 1.35;
  word-wrap: break-word;
}
.pcv-ob-saved-line.muted { color: var(--ink-500); font-style: italic; }

/* Discharge file generation blocks */
.pcv-discharge-block {
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 11px 11px 10px;
}
.pcv-discharge-block-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-800);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink-200);
}
.pcv-discharge-block-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Investigation row (compact single-line) */
.pcv-invest-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.pcv-invest-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 9px;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  min-width: 0;
}
.pcv-invest-date {
  font-size: 10.5px;
  color: var(--ink-500);
  flex-shrink: 0;
  padding-top: 2px;
  white-space: nowrap;
}
.pcv-invest-body { flex: 1; min-width: 0; }
.pcv-invest-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  line-height: 1.2;
  word-wrap: break-word;
}
.pcv-invest-result {
  font-size: 11px;
  color: var(--ink-600);
  margin-top: 2px;
  line-height: 1.35;
  word-wrap: break-word;
}

.pcv-empty-line {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-400);
  font-style: italic;
  padding: 12px 6px;
}

/* ── Discharge medication row (drug | freq | duration in same row) ── */
/* ── Discharge medication row — unified with Order Builder drug rows ── */
.pcv-med-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 0;
  flex-wrap: nowrap;
}
.pcv-med-row.auto {
  background: color-mix(in srgb, var(--primary) 5%, white);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--ink-200));
  border-radius: 8px;
  padding: 6px 8px;
}
.pcv-med-row > input,
.pcv-med-row > select { min-width: 0; }

.pcv-med-row .pcv-input.sm {
  height: 30px;
  padding: 6px 9px;
  font-size: 12.5px;
  border-radius: 6px;
}

/* Auto-flow row: read-only drug + source badge */
.pcv-med-row-drug {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1 1 110px; min-width: 100px;
  padding: 4px 6px;
  background: rgba(67, 56, 202, 0.04);
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 rgba(67, 56, 202, 0.15);
}
.pcv-med-row-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  line-height: 1.3;
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* (source badge styled below in the unified block) */

/* Read-only frequency (auto-flow rows) */
.pcv-med-row-freq {
  flex: 0 0 80px;
  font-size: 11px;
  text-align: center;
  color: var(--ink-700);
  font-weight: 600;
  height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px;
  background: var(--ink-100);
  border-radius: 6px;
}

/* Duration input */
.pcv-med-row-dur {
  flex: 1 1 90px;
  min-width: 80px;
}

/* User row name input */
.pcv-med-row-name-input { flex: 1 1 110px; min-width: 100px; }
/* User row freq input */
.pcv-med-row-freq-input {
  flex: 0 0 80px;
  width: 80px;
  text-align: center;
  font-size: 11.5px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.pcv-comorb-meds-hint {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--ink-500);
  font-style: italic;
  text-align: center;
}

/* ── Section label tightening ── */
.pcv-section-label {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-700);
  background: var(--ink-100, #F1F5F9);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 6px;
}

/* ── Toggle card (blood required etc) ── */
.pcv-toggle-card {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  padding: 9px 10px;
  margin-top: 6px;
}
.pcv-toggle-row {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-800);
}
.pcv-toggle-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.pcv-toggle-label { letter-spacing: -0.005em; }

/* ── Generate sheet tabs ── */
.pcv-gen-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--ink-100);
  border-radius: 9px;
  margin: 8px 0 10px;
}
.pcv-gen-tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-600);
  cursor: pointer;
  letter-spacing: -0.005em;
  position: relative;
}
.pcv-gen-tab.active {
  background: white;
  color: var(--ink-900);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pcv-gen-tab svg { width: 12px; height: 12px; flex-shrink: 0; }
.pcv-gen-tab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  margin-left: 2px;
}
.pcv-gen-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-size: 9.5px;
  font-weight: 700;
}
.pcv-gen-section { animation: pv-fadein 180ms ease-out; }

/* ── Upload picker sheet ── */
.pcv-upload-cat-list {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0 12px;
}
.pcv-upload-cat-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid;
  background: white;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: left;
  transition: transform 120ms;
}
.pcv-upload-cat-btn:hover { transform: translateY(-1px); }
.pcv-upload-cat-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pcv-upload-cat-btn span { flex: 1; }
.pcv-upload-cat-chev { flex: 0 0 auto !important; opacity: 0.55; }
.pcv-upload-cat-chev svg { width: 12px; height: 12px; }

.pcv-upload-method-list {
  display: flex; flex-direction: column; gap: 6px;
  margin: 10px 0 12px;
}
.pcv-upload-method-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--ink-200);
  background: white;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
}
.pcv-upload-method-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.pcv-upload-method-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pcv-upload-method-icon svg { width: 16px; height: 16px; }
.pcv-upload-method-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.pcv-upload-method-sub {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 2px;
}

/* Override the old action bar styles that conflict */
.pcv-actionbar-more,
.pcv-actionbar-generate { display: none; }

/* ── Assign OT button (in patient header) ── */
.pcv-assign-ot-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1.5px solid #0D9488;
  background: #E5FBF4;
  color: #0D9488;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: all 160ms;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}
.pcv-assign-ot-btn:hover { background: #D9F7EC; }
.pcv-assign-ot-btn.is-set {
  background: #0D9488;
  color: white;
}
.pcv-assign-ot-btn svg { width: 13px; height: 13px; }
.pcv-assign-ot-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  position: absolute;
  top: -3px; right: -3px;
  border: 1.5px solid white;
}

/* ── Patient header avatar tightening ── */
.pcv-patient-avatar {
  width: 38px !important; height: 38px !important;
  font-size: 12px !important;
  flex-shrink: 0;
}

/* ── Injury photo mini thumbnail ── */
.pcv-injury-photo-mini {
  width: 38px; height: 38px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--ink-200);
  background: var(--ink-100);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 140ms, border-color 140ms;
  display: block;
}
.pcv-injury-photo-mini img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pcv-injury-photo-mini:hover {
  transform: scale(1.05);
  border-color: var(--primary);
}

/* ── Key picture as thumbnail (when uploaded) ── */
.pcv-key-photo-mini {
  width: 38px; height: 38px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
  background: var(--ink-100);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 140ms;
  display: block;
}
.pcv-key-photo-mini img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pcv-key-photo-mini:hover { transform: scale(1.05); }

/* ── Key picture button (when not uploaded) ── */
.pcv-key-picture-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1.5px dashed var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, white);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms;
  white-space: nowrap;
}
.pcv-key-picture-btn:hover { background: color-mix(in srgb, var(--primary) 14%, white); }
.pcv-key-picture-btn svg { width: 12px; height: 12px; }

/* ── Photo modal — anchored inside mobile frame ── */
.pcv-photo-modal {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 18px 40px;
  overflow: hidden;
  animation: pv-fadein 180ms ease-out;
}
@keyframes pv-fadein { from { opacity: 0; } to { opacity: 1; } }
.pcv-photo-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 8; /* above the nav strips so the close button is never swallowed */
}
.pcv-photo-modal-close:hover { background: white; }
.pcv-photo-modal-body {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pcv-photo-modal-body img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 10px;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.5);
  display: block;
}
.pcv-photo-modal-label {
  font-size: 12px;
  color: white;
  opacity: 0.85;
  text-align: center;
  letter-spacing: -0.005em;
}
/* Subtle uploader attribution beside the photo/video label ("— <name>") */
.pcv-photo-modal-author {
  margin-left: 10px;
  font-size: 11px;
  font-style: italic;
  opacity: 0.7;
}

/* ── Edit button on collapsed saved step head ── */
.pcv-step-edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--ink-200);
  background: rgba(255,255,255,0.7);
  color: var(--ink-600);
  cursor: pointer;
  margin-right: 4px;
  flex-shrink: 0;
  transition: all 120ms;
}
.pcv-step-edit:hover { background: white; color: var(--step-accent, var(--primary)); border-color: var(--step-accent, var(--ink-300)); }

/* ── Drug order / log round sheet item ── */
.pcv-order-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  min-width: 0;
}
.pcv-order-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.pcv-order-body { flex: 1; min-width: 0; }
.pcv-order-drug {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  word-wrap: break-word;
}
.pcv-order-dose {
  font-weight: 500;
  color: var(--ink-600);
  margin-left: 4px;
}
.pcv-order-meta {
  font-size: 10.5px;
  color: var(--ink-500);
  margin-top: 2px;
}

.pcv-order-form {
  padding: 10px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  margin-bottom: 8px;
}

/* ── Width overflow prevention ── */
#root { overflow: hidden; }
.pcv-app { max-width: 100%; box-sizing: border-box; }
.pcv-stack { overflow-x: hidden; max-width: 100%; box-sizing: border-box; }
.pcv-step { max-width: 100%; box-sizing: border-box; }
.pcv-step-body {
  min-width: 0;
  /* Only clamp the horizontal axis — the full-page overlay body (.pcv-step-body-full)
     needs vertical scrolling, and a blanket `overflow:hidden` here would override its
     `overflow-y:auto` (equal specificity, declared later) and trap the content. */
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}
.pcv-input, .pcv-textarea, .pcv-select {
  max-width: 100%;
  box-sizing: border-box;
}
.pcv-field { max-width: 100%; min-width: 0; }
.pcv-btn-row { max-width: 100%; min-width: 0; flex-wrap: wrap; }
.pcv-btn { max-width: 100%; box-sizing: border-box; }
.pcv-chips { max-width: 100%; }
.pcv-row, .pcv-row-3 { min-width: 0; max-width: 100%; }
.pcv-row > *, .pcv-row-3 > * { min-width: 0; }
.pcv-drug-card, .pcv-med-card { max-width: 100%; box-sizing: border-box; min-width: 0; }


/* ───── Drug Order — paper-style prescription ───── */
.pcv-order-sheet .pcv-ob-wrap {
  display: flex; flex-direction: column; gap: 12px;
}

/* Template picker — first screen */
.pcv-tpl-pick { display: flex; flex-direction: column; gap: 8px; }
.pcv-tpl-pick-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-500); font-weight: 700;
}
.pcv-tpl-pick-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.pcv-tpl-pick-card {
  position: relative; overflow: hidden;
  text-align: left;
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 12px 12px 12px 16px;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.pcv-tpl-pick-card:hover { border-color: var(--tpl-accent); transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(15,23,42,0.18); }
.pcv-tpl-pick-card:active { transform: translateY(0); }
.pcv-tpl-pick-tab {
  position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 2px 2px 0;
}
.pcv-tpl-pick-name {
  font-size: 12.5px; font-weight: 700; color: var(--ink-900);
  letter-spacing: -0.015em; line-height: 1.2;
}
.pcv-tpl-pick-sub {
  font-size: 10.5px; color: var(--ink-500); margin-top: 4px; line-height: 1.35;
}

/* The paper */
.pcv-paper {
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(14, 116, 144, 0.05) 25px 26px),
    #F2F8FB;
  border: 1px solid #D6E3EA;
  border-radius: 10px;
  box-shadow: 0 1px 0 #E7E2D2, 0 6px 14px -8px rgba(30, 41, 59, 0.18);
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.pcv-paper::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--paper-accent, #0EA5A9) 80%, white) 0%,
    var(--paper-accent, #0EA5A9) 50%,
    color-mix(in srgb, var(--paper-accent, #0EA5A9) 80%, white) 100%);
  opacity: 0.85;
}
.pcv-paper.is-read { background: #F6FAFC; }

.pcv-paper-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--paper-accent, #0EA5A9) 22%, white);
  margin-bottom: 8px;
}
.pcv-paper-title {
  font-family: 'Manrope', serif;
  font-size: 14.5px; font-weight: 800;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--paper-accent, #0F172A) 78%, #0F172A);
  flex-shrink: 0;
}
.pcv-paper-when {
  font-size: 11.5px;
  color: var(--ink-600);
  font-variant-numeric: tabular-nums;
  flex: 1;
}
.pcv-paper-when-input {
  border: none;
  background: transparent;
  color: var(--ink-700);
  font-size: 11.5px;
  font-family: inherit;
  padding: 2px 0;
  width: 100%;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.pcv-paper-when-input:focus { background: color-mix(in srgb, var(--paper-accent, #0EA5A9) 8%, white); }
.pcv-paper-rm {
  width: 26px; height: 26px; border-radius: 8px;
  border: none; background: transparent;
  color: var(--ink-400); cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.pcv-paper-rm:hover { background: var(--err-50, #FEE2E2); color: var(--err); }

.pcv-paper-body {
  display: flex; flex-direction: column; gap: 6px;
}
.pcv-paper-empty {
  font-size: 11.5px; color: var(--ink-400); font-style: italic; padding: 6px 0;
}

/* A line on the paper */
.pcv-line {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 13px;
  color: #1E293B;
  line-height: 1.55;
  min-height: 24px;
  padding: 1px 0;
}
.pcv-line.is-bold { font-weight: 700; color: var(--ink-900); }
.pcv-line-key {
  font-weight: 700; color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-right: 2px;
}
.pcv-line-sep { color: var(--ink-400); padding: 0 1px; }
.pcv-line-rm {
  margin-left: auto;
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: transparent;
  color: var(--ink-300); font-size: 16px; line-height: 1;
  cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.pcv-line-rm:hover { background: rgba(220, 38, 38, 0.1); color: var(--err); }

.pcv-drug-line { gap: 4px 6px; }

/* The slot — the tappable / editable atom */
.pcv-slot {
  display: inline-block;
  border: none;
  background: transparent;
  padding: 1px 4px;
  border-radius: 4px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
  transition: background 120ms, box-shadow 120ms;
}
.pcv-slot.is-tap.has-val {
  background: rgba(67, 56, 202, 0.06);
  box-shadow: inset 0 -1px 0 rgba(67, 56, 202, 0.22);
}
.pcv-slot.is-tap.has-val:hover { background: rgba(67, 56, 202, 0.12); }
.pcv-slot.is-tap.is-empty {
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 600;
  background: transparent;
  border-bottom: 1px dashed var(--primary);
  border-radius: 0;
  padding: 0 6px 1px;
  letter-spacing: -0.01em;
}
.pcv-slot.is-tap.is-empty:hover { background: rgba(67, 56, 202, 0.08); }
.pcv-slot.is-read {
  padding: 0;
  cursor: default;
  background: transparent;
  box-shadow: none;
}
.pcv-slot.is-read.is-empty {
  color: var(--ink-400);
  font-style: italic;
  display: inline-block;
  min-width: 40px;
  border-bottom: 1px dotted var(--ink-300);
}
.pcv-slot.is-mono, .pcv-slot-input.is-mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
}

/* Inline editing input — replaces the slot button while focused */
.pcv-slot-input {
  font: inherit;
  color: var(--ink-900);
  border: none;
  background: #FFFBEB;
  box-shadow: inset 0 0 0 1.5px var(--primary);
  border-radius: 4px;
  padding: 1px 4px;
  min-width: 40px;
  outline: none;
  line-height: 1.4;
  max-width: 100%;
}
textarea.pcv-slot-input { width: 100%; line-height: 1.45; resize: vertical; min-height: 36px; }

/* Chip pop-over */
.pcv-chip-slot { position: relative; display: inline-block; }
.pcv-chip-pop {
  position: absolute; left: 0; top: calc(100% + 6px);
  z-index: 30;
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.28);
  padding: 8px;
  min-width: 220px;
  max-width: 280px;
}
.pcv-chip-grid {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.pcv-chip-pop .pcv-chip {
  font-size: 11px; font-weight: 600;
  padding: 4px 9px;
  cursor: pointer;
  background: var(--ink-100);
  border: 1px solid transparent;
  color: var(--ink-700);
  border-radius: 999px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: -0.01em;
}
.pcv-chip-pop .pcv-chip:hover { background: var(--ink-200); }
.pcv-chip-pop .pcv-chip.is-on {
  background: var(--primary); color: white; border-color: var(--primary);
}
.pcv-chip-free {
  display: flex; gap: 4px; margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-200);
}
.pcv-chip-free .pcv-input { flex: 1; font-size: 11.5px; padding: 5px 8px; }
.pcv-chip-apply {
  border: none; background: var(--primary); color: white;
  border-radius: 6px; padding: 5px 10px;
  font-size: 11px; font-weight: 600; cursor: pointer;
}

/* Add row at bottom of paper */
.pcv-paper-add {
  display: flex; gap: 6px; margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--paper-accent, #0EA5A9) 30%, white);
}
.pcv-paper-add-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px dashed var(--ink-300);
  background: transparent;
  color: var(--ink-600);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.pcv-paper-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(67, 56, 202, 0.04);
}

/* Action row for the active draft */
.pcv-ob-actions {
  display: flex; gap: 6px; justify-content: flex-end;
}

/* Saved orders stack */
.pcv-ob-saved-list {
  display: flex; flex-direction: column; gap: 10px;
}
.pcv-ob-saved-wrap {
  display: flex; flex-direction: column; gap: 6px;
}
.pcv-ob-saved-tools {
  display: flex; gap: 6px; justify-content: flex-end;
}
/* Single-order-type view: header row (‹ Back + type name) + empty-state create prompt. */
.pcv-ob-typebar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 2px;
  border-bottom: 1px solid var(--ink-200);
}
.pcv-ob-typebar-title { font-size: 15px; font-weight: 800; color: var(--ink-900); letter-spacing: -0.01em; }
.pcv-ob-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 30px 16px; text-align: center;
}
.pcv-ob-empty-text { font-size: 13px; color: var(--ink-500); margin: 0; }


/* ───── Compact comorbidity drug rows (no toggle, no hint) ───── */
.pcv-comorb-group.tight { margin-top: 4px; }
.pcv-comorb-meds.tight {
  margin-top: 4px;
  padding: 6px 8px 7px;
  background: color-mix(in srgb, var(--dp-accent, var(--primary)) 5%, white);
  border: 1px solid color-mix(in srgb, var(--dp-accent, var(--primary)) 22%, white);
  border-radius: 8px;
  animation: none;
  opacity: 1;
}
.pcv-comorb-meds-list {
  display: flex; flex-direction: column; gap: 5px;
}
.pcv-comorb-meds-add.tight {
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--dp-accent, var(--primary)) 50%, white);
  color: var(--dp-accent, var(--primary));
}

/* Tight drug card — single flex row, no field labels, no card chrome */
.pcv-drug-card.tight {
  display: flex; align-items: center; gap: 5px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
}
.pcv-drug-card.tight .pcv-input.sm {
  padding: 6px 9px;
  font-size: 12px;
  border-radius: 6px;
  height: 30px;
  background: white;
}
.pcv-drug-card.tight .pcv-drug-name { flex: 1; min-width: 0; }
.pcv-drug-card.tight .pcv-drug-freq {
  width: 92px; flex-shrink: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  text-align: center;
}
.pcv-drug-card.tight .pcv-drug-card-x {
  position: static;
  width: 26px; height: 30px;
  flex-shrink: 0;
}

.pcv-comorb-meds-add.tight {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
  width: auto;
  cursor: pointer;
  line-height: 1.2;
}


/* Source badge — unified pill style used by Order Builder + Discharge Meds + Active Meds */
.pcv-drug-src,
.pcv-med-row-source {
  display: inline-flex; align-items: center;
  height: 16px; padding: 0 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--paper-accent, var(--primary)) 60%, #0F172A);
  background: color-mix(in srgb, var(--paper-accent, var(--primary)) 14%, white);
  border: 1px solid color-mix(in srgb, var(--paper-accent, var(--primary)) 32%, white);
  border-radius: 999px;
  margin-right: 2px;
  flex-shrink: 0;
  line-height: 1;
}
.pcv-paper.is-read .pcv-drug-src {
  background: color-mix(in srgb, var(--paper-accent, var(--primary)) 8%, white);
}


/* ───── Patient imagery — grouped by category ───── */
.pcv-photo-rail-v2 {
  display: flex; flex-direction: column; gap: 6px;
}
.pcv-photo-specials {
  display: flex; gap: 8px; padding: 4px 0 2px;
}
.pcv-photo-special {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pcv-photo-special-label {
  font-size: 9.5px; font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}

.pcv-photo-cats {
  display: flex; flex-direction: column; gap: 5px;
}
.pcv-photo-cat {
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  padding: 6px 8px;
  border-left: 2px solid var(--cat-color, var(--ink-300));
}
.pcv-photo-cat.is-empty { background: var(--ink-50); }
.pcv-photo-cat-head {
  display: flex; align-items: center; gap: 6px;
  min-height: 24px;
}
.pcv-photo-cat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cat-color, var(--ink-400));
  flex-shrink: 0;
}
.pcv-photo-cat-name {
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-800);
  letter-spacing: -0.01em;
  flex: 1;
}
.pcv-photo-cat-count {
  font-size: 10px; font-weight: 700;
  background: color-mix(in srgb, var(--cat-color, var(--ink-400)) 14%, white);
  color: var(--cat-color, var(--ink-700));
  border-radius: 999px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.pcv-photo-cat-add {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--cat-color, var(--ink-300)) 55%, white);
  background: transparent;
  color: var(--cat-color, var(--ink-500));
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.pcv-photo-cat-add:hover {
  background: color-mix(in srgb, var(--cat-color, var(--ink-300)) 12%, white);
}
.pcv-photo-cat-strip {
  display: flex; gap: 5px;
  margin-top: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.pcv-photo-cat-strip::-webkit-scrollbar { height: 4px; }
.pcv-photo-cat-strip::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 2px; }

/* Media thumb (image or video) */
.pcv-media-thumb {
  position: relative;
  width: 44px; height: 44px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  overflow: hidden;
  padding: 0;
  background: var(--ink-100);
  cursor: pointer;
  flex-shrink: 0;
  display: block;
}
.pcv-media-thumb img,
.pcv-media-thumb video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.pcv-media-thumb.is-video::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.45));
}
.pcv-media-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
}
.pcv-photo-modal-body video {
  max-width: 100%; max-height: 70vh;
  border-radius: 12px;
  background: #000;
  /* poster (server thumbnail) is a real frame — contain it so it isn't cropped */
  object-fit: contain;
}
/* Gallery prev/next navigation in the fullscreen viewer */
.pcv-photo-modal-nav {
  /* Full-height side strips: tapping ANYWHERE on the left/right ~72px column navigates,
     so a tap can't miss and fall through to the dim backdrop (which closes the viewer) —
     that mis-tap was the "have to click three times" problem. The centre stays free for
     image zoom / native video controls. A faint edge gradient hints they're tappable. */
  /* Middle vertical band only — must NOT cover the ✕ close button (top) or the
     filmstrip / Add-tag / Delete controls (bottom), or taps on those hit the nav strip
     instead. top/bottom insets clear those zones. */
  position: absolute; top: 72px; bottom: 188px; width: 72px; border: none;
  color: #fff; cursor: pointer; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pcv-photo-modal-nav.prev { left: 0; background: linear-gradient(to right, rgba(0,0,0,0.34), rgba(0,0,0,0)); justify-content: flex-start; padding-left: 10px; }
.pcv-photo-modal-nav.next { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.34), rgba(0,0,0,0)); justify-content: flex-end; padding-right: 10px; }
/* The chevron sits in a visible pill so the control is obvious. */
.pcv-photo-modal-nav svg { width: 30px; height: 30px; background: rgba(0,0,0,0.5); border-radius: 999px; padding: 9px; box-sizing: content-box; }
.pcv-photo-modal-nav:active svg { background: rgba(0,0,0,0.78); }
.pcv-photo-modal-count { opacity: 0.7; }


/* ───── Print Preview overlay ───── */
.pcv-pp-overlay {
  position: absolute; inset: 0;
  background: #ECEEF3;
  z-index: 25;
  display: flex; flex-direction: column;
  animation: fade 180ms ease-out;
  overflow: hidden;
}
.pcv-pp-topbar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 50px 12px 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--ink-200);
}
.pcv-pp-back {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  color: var(--ink-700);
  cursor: pointer; flex-shrink: 0;
}
.pcv-pp-topbar-title { flex: 1; min-width: 0; }
.pcv-pp-topbar-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-500); text-transform: uppercase;
}
.pcv-pp-topbar-name {
  font-size: 14px; font-weight: 700;
  color: var(--ink-900); letter-spacing: -0.02em;
  line-height: 1.2;
}
.pcv-pp-print-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--primary) 60%, transparent);
}
.pcv-pp-print-btn:hover { filter: brightness(1.05); }
.pcv-pp-print-btn:active { transform: translateY(1px); }

.pcv-pp-scroll {
  flex: 1; overflow-y: auto;
  padding: 14px;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(15,23,42,0.02) 12px 13px),
    #ECEEF3;
}
.pcv-pp-page {
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px -10px rgba(15,23,42,0.18);
  padding: 22px 20px 32px;
  color: #1F2937;
  font-family: 'Manrope', 'Kalpurush', sans-serif;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  min-height: 0;
  /* Keep header/table tints when printed on colour printers; harmless on greyscale. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Long clinical text (operative description, addresses, implant details, drug durations)
   must wrap inside its cell/paragraph instead of overflowing the page width. */
.pcv-pp-page td, .pcv-pp-page th, .pcv-pp-page p, .pcv-pp-section-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pcv-pp-doc-head {
  border-bottom: 2px solid #1F2937;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.pcv-pp-clinic-name {
  font-size: 12.5px; font-weight: 800;
  color: #1F2937;
  letter-spacing: -0.02em;
}
.pcv-pp-clinic-sub {
  font-size: 9.5px;
  color: var(--ink-500);
  margin-top: 1px;
}
.pcv-pp-doc-title {
  margin: 8px 0 6px;
  font-size: 15px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  color: #0F172A;
}
.pcv-pp-doc-when {
  text-align: center;
  font-size: 10.5px;
  color: var(--ink-500);
  margin: -2px 0 8px;
  font-variant-numeric: tabular-nums;
}
.pcv-pp-patient-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 14px;
  font-size: 10px;
  color: #1E293B;
  margin-top: 4px;
}
.pcv-pp-patient-row > div { display: flex; gap: 4px; align-items: baseline; }
/* Compact 2-line patient strip for non-discharge documents (small font). */
.pcv-pp-patient-mini { margin-top: 4px; }
.pcv-pp-patient-mini-name { font-weight: 800; font-size: 12px; color: #0F172A; }
.pcv-pp-patient-mini-sub { font-size: 10.5px; color: #475569; margin-top: 1px; }
.pcv-pp-k {
  font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-500);
}

.pcv-pp-section {
  margin-top: 12px;
  page-break-inside: avoid;
  orphans: 3; widows: 3;
}
.pcv-pp-h2 {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0F172A;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink-200);
}
.pcv-pp-section-body p { margin: 4px 0; }
.pcv-pp-section-body p:first-child { margin-top: 0; }
.pcv-pp-muted { color: var(--ink-400); font-style: italic; }

.pcv-pp-list { margin: 2px 0 4px; padding-left: 16px; }
.pcv-pp-list li { margin: 2px 0; }

.pcv-pp-comorb-block { margin: 6px 0 8px; }
.pcv-pp-comorb-name {
  font-weight: 700;
  font-size: 10.5px;
  color: #1F2937;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pcv-pp-kv {
  width: 100%;
  border-collapse: collapse;
}
.pcv-pp-kv th {
  text-align: left;
  font-weight: 700;
  font-size: 10px;
  color: var(--ink-500);
  padding: 3px 8px 3px 0;
  width: 32%;
  vertical-align: top;
}
.pcv-pp-kv td {
  padding: 3px 0;
  font-size: 11px;
  color: #1F2937;
}
/* Compact 2-column admission block (discharge): label/value pairs flow into two columns so the
   block takes roughly half the height of the single-column table. */
.pcv-pp-kv2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
  row-gap: 1px;
  width: 100%;
}
.pcv-pp-kv2-cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--ink-200);
  min-width: 0;
}
.pcv-pp-kv2-k {
  flex: 0 0 auto;
  min-width: 86px;
  font-weight: 700;
  font-size: 10px;
  color: var(--ink-500);
}
.pcv-pp-kv2-v {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: #1F2937;
  overflow-wrap: anywhere;
}
/* Bold inline label for the structured Operation-note headlines (Name of operation, Indication…). */
.pcv-pp-oplabel { font-weight: 700; }
/* Discharge advice instructions box — tall enough for at least 7 lines without scrolling. */
.pcv-textarea-tall { min-height: 176px; line-height: 1.5; resize: vertical; }

/* Scrollable AM/PM time picker (window.TimePicker) — hour : minute · AM/PM segments. */
.pcv-timepick { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.pcv-timepick .pcv-select { width: auto; padding-right: 22px; }
.pcv-timepick .pcv-tp-seg { min-width: 58px; }
.pcv-timepick .pcv-tp-ap { min-width: 62px; }
.pcv-timepick .pcv-tp-colon { font-weight: 800; color: var(--ink-500, #64748B); margin: 0 -1px; }
/* Tourniquet pressure: preset dropdown (+ Manual) with an optional custom value below. */
.pcv-tq-pressure { display: flex; flex-direction: column; gap: 4px; }

/* Auto-numbered discharge advice: one point per line ("1. … 2. …"). */
.pcv-pp-advice-list { margin: 0; padding-left: 22px; list-style: decimal; }
.pcv-pp-advice-list li { padding: 1px 0; }

/* Compact 2-column investigations — used when the list is long, so a big lab panel takes ~half
   the height ("1. Test  Result · date" packed into two columns) and the page-1 narrative stays
   readable. Each entry keeps Test bold + Result regular, with the date small and muted. */
.pcv-pp-inv2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 1px; }
.pcv-pp-inv2-item { display: flex; align-items: baseline; gap: 5px; padding: 1.5px 0; border-bottom: 1px dotted var(--ink-200); break-inside: avoid; }
.pcv-pp-inv2-n { flex: 0 0 auto; color: var(--ink-400); min-width: 15px; }
.pcv-pp-inv2-t { flex: 0 1 auto; font-weight: 700; }
.pcv-pp-inv2-r { flex: 1 1 auto; min-width: 0; color: #1F2937; overflow-wrap: anywhere; }
.pcv-pp-inv2-d { color: var(--ink-400); white-space: nowrap; }

/* ── Tap-to-edit in the print preview (Ed) ──
   Editable values get a faint dotted underline on screen; tapping swaps in an inline
   input/textarea. NOTHING of this shows on paper (stripped in @media print below). */
.pcv-pp-ed { cursor: text; border-bottom: 1px dotted var(--ink-300, #B6C2D1); }
.pcv-pp-ed:hover { background: #FEF3C7; border-bottom-color: #D97706; }
.pcv-pp-ed.is-block { display: block; }
.pcv-pp-ed-empty { color: var(--ink-300, #B6C2D1); font-style: italic; }
.pcv-pp-ed-input {
  width: 100%; box-sizing: border-box;
  font: inherit; color: inherit;
  border: 1.5px solid #D97706; border-radius: 5px;
  padding: 2px 5px; background: #FFFBEB; outline: none;
}
textarea.pcv-pp-ed-input { display: block; resize: vertical; }
.pcv-pp-edit-hint {
  margin: 0 auto 8px; max-width: 640px;
  font-size: 11px; font-weight: 600; text-align: center;
  color: #92400E; background: #FEF3C7;
  border: 1px dashed #F59E0B; border-radius: 8px;
  padding: 6px 10px;
}

/* ── DischargeFit measurement probe ── an offscreen clone of a discharge zone laid out at TRUE
   PRINT geometry: 182mm content width (688px @96dpi — A4 210mm minus the 14mm side margins) and
   the @media-print discharge font sizes converted pt→px (12.5pt≈16.7px, 13pt≈17.3px, 11pt≈14.7px).
   Its measured height tells DischargeFit how much print-only zoom (if any) makes the zone fit. */
.pcv-print-probe {
  position: absolute; left: -10000px; top: 0;
  width: 688px; padding: 0; box-sizing: border-box;
  background: #fff; color: #1F2937;
  font-family: 'Manrope', 'Kalpurush', sans-serif;
  font-size: 16.7px; line-height: 1.5;
}
.pcv-print-probe .pcv-pp-section { margin-bottom: 10px; }
.pcv-print-probe .pcv-pp-h2 { font-size: 17.3px; margin-bottom: 6px; }
.pcv-print-probe .pcv-pp-section-body p,
.pcv-print-probe .pcv-pp-list li { font-size: 16.7px; line-height: 1.5; }
/* Admission block must measure as the real 2-column grid (else it stacks to 1 column and the
   probe over-measures, over-shrinking the page). Mirror the print grid + pt→px font sizes. */
.pcv-print-probe .pcv-pp-kv2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; row-gap: 1px; width: 100%; }
.pcv-print-probe .pcv-pp-kv2-cell { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.pcv-print-probe .pcv-pp-kv2-k { flex: 0 0 auto; min-width: 86px; font-size: 14.7px; }
.pcv-print-probe .pcv-pp-kv2-v { flex: 1 1 auto; min-width: 0; font-size: 16.7px; overflow-wrap: anywhere; }
.pcv-print-probe .pcv-pp-table { font-size: 16.7px; }
.pcv-print-probe .pcv-pp-table th { font-size: 16px; }
.pcv-print-probe .pcv-pp-table th, .pcv-print-probe .pcv-pp-table td { padding: 6px 8px; }
/* Page-2 zone elements mirrored too, so the meds + advice + signature fit measurement is true. */
.pcv-print-probe .pcv-pp-advice-list { margin: 0; padding-left: 22px; }
.pcv-print-probe .pcv-pp-advice-list li { font-size: 16.7px; line-height: 1.5; padding: 2px 0; }
/* Compact 2-column investigations mirrored at print size, so a long lab panel measures as the
   real 2-column height (else the probe stacks it to 1 column and over-shrinks the page). */
.pcv-print-probe .pcv-pp-inv2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 1px; }
.pcv-print-probe .pcv-pp-inv2-item { display: flex; align-items: baseline; gap: 5px; padding: 1.5px 0; font-size: 16px; }
.pcv-print-probe .pcv-pp-inv2-n { flex: 0 0 auto; min-width: 15px; }
.pcv-print-probe .pcv-pp-inv2-t { flex: 0 1 auto; font-weight: 700; }
.pcv-print-probe .pcv-pp-inv2-r { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pcv-print-probe .pcv-pp-sign { margin-top: 30px; }
.pcv-print-probe .pcv-pp-sign-line { height: 38px; }
.pcv-print-probe .pcv-pp-sign-cap { font-size: 13px; }

.pcv-pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  margin: 4px 0;
}
.pcv-pp-table th {
  background: var(--ink-100);
  text-align: left;
  font-weight: 700;
  padding: 5px 8px;
  border-bottom: 1px solid var(--ink-300);
  color: #1F2937;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pcv-pp-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--ink-200);
  vertical-align: top;
}

.pcv-pp-orders {
  display: flex; flex-direction: column; gap: 10px;
}
.pcv-pp-order .pcv-paper { box-shadow: none; }

.pcv-pp-sign {
  margin-top: 26px;
  display: flex; flex-direction: column; align-items: flex-end;
}
.pcv-pp-sign-line {
  width: 180px; height: 1px;
  background: #1F2937;
}
.pcv-pp-sign-cap {
  margin-top: 3px;
  font-size: 9.5px;
  color: var(--ink-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.pcv-pp-doc-foot {
  margin-top: 20px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-200);
  display: flex; justify-content: space-between;
  font-size: 8.5px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  page-break-before: avoid;  /* keep the footer with the content above it */
}

/* ───── Print media ───── */
/* ── Personal Logbook printable document (rendered into #pcv-pp-printable) ── */
.lp-doc { color: #0F172A; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lp-doc-header { border-bottom: 2px solid #0F172A; padding-bottom: 8px; margin-bottom: 12px; }
.lp-doc-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.lp-doc-clinician { font-size: 13px; font-weight: 700; margin-top: 2px; }
.lp-doc-sub { font-size: 11px; color: #475569; margin-top: 2px; }
.lp-doc-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: #334155; margin-bottom: 14px; }
.lp-doc-stats b { font-size: 14px; }
.lp-doc-entry { border: 1px solid #CBD5E1; border-radius: 6px; padding: 9px 11px; margin-bottom: 9px; page-break-inside: avoid; }
.lp-doc-entry-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.lp-doc-entry-no { font-weight: 800; }
.lp-doc-entry-name { font-weight: 800; font-size: 13.5px; }
.lp-doc-entry-meta { font-size: 11px; color: #64748B; }
.lp-doc-entry-row { font-size: 11.5px; color: #334155; margin-top: 1px; }
.lp-doc-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.lp-doc-img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; border: 1px solid #E2E8F0; }
.lp-doc-empty { font-size: 12px; color: #64748B; padding: 16px 0; }
.lp-doc-footer { margin-top: 14px; padding-top: 8px; border-top: 1px solid #CBD5E1; font-size: 10px; color: #94A3B8; }

/* The printable document is cloned into a top-level #pcv-print-root at print time (hidden on screen). */
#pcv-print-root { display: none; }

@media print {
  /* Print ONLY the cloned sheet (a direct <body> child): display:none everything else so the app
     chrome (the PREVIEW / Print toolbar) can NEVER leak into the PDF and no blank trailing pages
     are produced. This clone approach + the afterprint teardown in print-preview.jsx also survives
     mobile Chrome's asynchronous "Save as PDF" capture, which happens long after window.print()
     returns (the old visibility-toggle + fixed-timeout approach tore the styles down too early). */
  body.pcv-printing > *:not(#pcv-print-root) { display: none !important; }
  #pcv-print-root { display: block !important; }

  /* ── Defensive isolation for the BROWSER's own "Save as PDF" path ──
     The app's Print button clones the doc into #pcv-print-root and hides the rest. But if the
     user instead prints from the browser menu, body.pcv-printing is never set, so the whole
     preview overlay would print: the toolbar + a full-viewport scroll area (→ a blank 2nd page)
     + the document. These UNCONDITIONAL rules strip the preview chrome and collapse the overlay
     to its content height, so EVERY print path outputs just the one-page document. Harmless
     during the normal clone print — the original overlay is hidden by the rule above. */
  .pcv-pp-topbar { display: none !important; }
  .pcv-pp-overlay { position: static !important; inset: auto !important; overflow: visible !important;
    display: block !important; background: #fff !important; animation: none !important; }
  .pcv-pp-scroll { flex: none !important; overflow: visible !important; height: auto !important;
    padding: 0 !important; background: #fff !important; }
  html, body { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  /* Un-clamp the app shell so a multi-page document is NOT clipped to one screen. On phones the
     host is .is-fluid (height:100dvh; overflow:hidden) with .is-fluid>* forced to height:100%, and
     #root is overflow:hidden — all of which truncate the print to a single page. Reset them. */
  #root, .is-fluid, .is-fluid > *, .pcv-host, .adm-host, .login-host, .as-host, .ofs-host {
    height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
  }
  /* Browser "Save as PDF" path (no clone, body.pcv-printing unset): the preview overlay is a direct
     child of .pcv-app, so HIDE the app's other children (header, gallery, ribbons, action bar) and
     print only the document. display:none removes them from flow → no app chrome, no blank pages.
     Skipped during the in-app clone print (.pcv-printing), which already isolates via #pcv-print-root. */
  body.pcv-preview-open:not(.pcv-printing) .pcv-app > *:not(.pcv-pp-overlay) { display: none !important; }
  body.pcv-preview-open:not(.pcv-printing) .pcv-app {
    display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
    padding: 0 !important; margin: 0 !important; max-width: none !important; transform: none !important;
  }
  #pcv-print-root .pcv-pp-page {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important; /* page margins come from @page clindoc so they REPEAT on every page */
    font-size: 12pt !important;
    line-height: 1.45 !important;
  }
  /* Portrait + a SINGLE set of margins that repeat on every printed page (page 2+ had no top
     margin when the margin lived in element padding). A *named* page is required: the OT-list
     print declares an unnamed `@page { size: A4 landscape }`, which would otherwise leak in and
     rotate these clinical docs. Referral is excluded (self-contained letter, own padding/fit). */
  .pcv-pp-page:not(.pcv-pp-page-referral) { page: clindoc; }
  #pcv-print-root .pcv-pp-doc-title { font-size: 17pt !important; }
  /* The on-screen preview uses tiny px sizes (keys 8.5px ≈ 6.4pt on paper) so the page fits the
     phone. On PAPER those are illegibly small — bump every text element to point sizes for print
     so the OT Call (and all docs) print at a readable size. */
  /* Floor every printed text element at 11pt (the consultant's minimum) — keys/labels and
     table headers were below that (9.5pt / 10pt) and printed illegibly small. */
  #pcv-print-root .pcv-pp-k { font-size: 11pt !important; }
  #pcv-print-root .pcv-pp-kv th { font-size: 11pt !important; }
  #pcv-print-root .pcv-pp-kv td { font-size: 12pt !important; }
  #pcv-print-root .pcv-pp-kv2-k { font-size: 11pt !important; }
  #pcv-print-root .pcv-pp-kv2-v { font-size: 12pt !important; }
  /* keep each admission pair intact across the 2 columns / page breaks */
  #pcv-print-root .pcv-pp-kv2-cell { break-inside: avoid; page-break-inside: avoid; }
  #pcv-print-root .pcv-pp-table { font-size: 11pt !important; }
  #pcv-print-root .pcv-pp-table th { font-size: 11pt !important; }
  #pcv-print-root .pcv-pp-comorb-name { font-size: 11.5pt !important; }
  #pcv-print-root .pcv-pp-section-body p,
  #pcv-print-root .pcv-pp-list li { font-size: 12pt !important; }
  /* Never split a section's headline from its body across a page; keep table rows intact. */
  #pcv-print-root .pcv-pp-section { break-inside: avoid; page-break-inside: avoid; }
  #pcv-print-root .pcv-pp-h2 { font-size: 12.5pt !important; break-after: avoid; page-break-after: avoid; }
  #pcv-print-root .pcv-pp-table tr,
  #pcv-print-root .pcv-pp-kv tr,
  #pcv-print-root .lp-doc-entry { break-inside: avoid; page-break-inside: avoid; }
  /* Repeat table headers when a discharge table spans multiple pages. */
  #pcv-print-root .pcv-pp-table thead { display: table-header-group; }
  #pcv-print-root .pcv-pp-table tbody { display: table-row-group; }

  /* ── Black & white: every clinical print is mono (clinic laser printers).
     Force black text + black borders, drop tints/shadows/accents. The ::before/::after
     selectors are REQUIRED — the order-card left accent bar is a ::before gradient that the
     plain `*` selector can't reach, so it would otherwise still print teal. ── */
  #pcv-print-root, #pcv-print-root *,
  #pcv-print-root *::before, #pcv-print-root *::after,
  .pcv-pp-page, .pcv-pp-page *,
  .pcv-pp-page *::before, .pcv-pp-page *::after {
    color: #000 !important;
    border-color: #000 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     MAH-only print tweaks (scoped via body[data-print-tenant="mah"], set in
     print-preview.jsx printFlow). Drug orders (Order on Admission / Fresh /
     Pre-Op / Post-Op + Fresh-Order meds) print in the RIGHT half of the sheet
     at 12pt with 1.5 line spacing. (The page margins themselves come from
     @page clindoc and repeat on every page; the Operation Note is full-width
     and auto-fits to a single page — see FitOnePage in print-preview.jsx.)
     ───────────────────────────────────────────────────────────────────────── */
  body[data-print-tenant="mah"][data-print-doc^="order-"] #pcv-print-root .pcv-pp-page,
  body[data-print-tenant="mah"][data-print-doc="meds"] #pcv-print-root .pcv-pp-page {
    padding-left: 50% !important; /* content sits in the right half (left half stays blank) */
  }
  /* Drug orders: 12pt text + 1.5 line spacing on every drug/note line, list and table. */
  body[data-print-tenant="mah"][data-print-doc^="order-"] #pcv-print-root .pcv-ord-read-text,
  body[data-print-tenant="mah"][data-print-doc="meds"] #pcv-print-root .pcv-ord-read-text,
  body[data-print-tenant="mah"][data-print-doc^="order-"] #pcv-print-root .pcv-pp-section-body p,
  body[data-print-tenant="mah"][data-print-doc="meds"] #pcv-print-root .pcv-pp-section-body p,
  body[data-print-tenant="mah"][data-print-doc^="order-"] #pcv-print-root .pcv-pp-list li,
  body[data-print-tenant="mah"][data-print-doc="meds"] #pcv-print-root .pcv-pp-list li,
  body[data-print-tenant="mah"][data-print-doc="meds"] #pcv-print-root .pcv-pp-table,
  body[data-print-tenant="mah"][data-print-doc="meds"] #pcv-print-root .pcv-pp-table td {
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }
  /* Row rhythm so the 1.5 spacing also reads between rows, not just within wrapped lines. */
  body[data-print-tenant="mah"][data-print-doc^="order-"] #pcv-print-root .pcv-ord-drug-row,
  body[data-print-tenant="mah"][data-print-doc^="order-"] #pcv-print-root .pcv-ord-note-row,
  body[data-print-tenant="mah"][data-print-doc="meds"] #pcv-print-root .pcv-ord-drug-row,
  body[data-print-tenant="mah"][data-print-doc="meds"] #pcv-print-root .pcv-ord-note-row {
    line-height: 1.5 !important;
    margin-bottom: 2mm !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     DISCHARGE SUMMARY layout (keyed on the page node's data-doc attribute, so it
     applies on BOTH print paths — the in-app clone and the browser Save-as-PDF):
       • roomier type (13pt / 1.7 line gap) so a typical discharge fills two pages;
       • "Treatment on discharge" ALWAYS starts on PAGE 2 (forced page break).
     ───────────────────────────────────────────────────────────────────────── */
  .pcv-pp-page[data-doc="discharge"] { font-size: 12.5pt !important; line-height: 1.5 !important; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-section { margin-bottom: 10px; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-h2 { font-size: 13pt !important; margin-bottom: 6px; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-section-body p,
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-list li,
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-advice-list li { font-size: 12.5pt !important; line-height: 1.5 !important; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-advice-list li { padding: 2px 0; break-inside: avoid; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-kv2-k { font-size: 11pt !important; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-kv2-v { font-size: 12.5pt !important; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-kv2-cell { padding: 2px 0; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-table { font-size: 12.5pt !important; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-table th { font-size: 12pt !important; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-table th,
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-table td { padding: 6px 8px; }
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-inv2-item { font-size: 12pt !important; line-height: 1.35; }
  /* PAGE 2 always starts a fresh page (treatment + advice + signature). The break rides on the
     zone wrapper so it fires even when there are no discharge meds (advice-only files). */
  .pcv-pp-page[data-doc="discharge"] .pcv-pp-page2 {
    break-before: page !important;
    page-break-before: always !important;
  }
  /* Print-only shrink of each discharge zone, driven by its DischargeFit probe measurement.
     `zoom` (not transform) so pagination still flows correctly. fit=1 when content already fits. */
  .pcv-pp-page[data-doc="discharge"] .pcv-dc-fit { zoom: var(--dc-fit, 1); }

  /* Tap-to-edit affordances NEVER print: no hint banner, no dotted underlines, no empty
     placeholders; an input left open mid-edit prints as plain text. */
  .pcv-pp-edit-hint { display: none !important; }
  .pcv-pp-ed { border-bottom: none !important; background: transparent !important; }
  .pcv-pp-ed-empty { display: none !important; }
  .pcv-pp-ed-input { border: none !important; background: transparent !important; padding: 0 !important; }

  /* Clinical docs: A4 PORTRAIT with wide margins that repeat on EVERY page (top a touch larger).
     Named so the OT-list landscape @page can't leak in. Referral/overlay keep the default below. */
  @page clindoc { size: A4 portrait; margin: 26mm 18mm 20mm 18mm; }
  /* DISCHARGE prints on the hospital's preprinted PAD — a generous 45mm blank band at the TOP of
     EVERY page for the letterhead (equal on both pages, named-page margins repeat), with slimmer
     14mm side margins for more usable width. Nothing prints above the DISCHARGE SUMMARY title. */
  @page dischargepg { size: A4 portrait; margin: 45mm 14mm 20mm 14mm; }
  .pcv-pp-page[data-doc="discharge"] { page: dischargepg; }
  @page { margin: 0; }
}

/* ───── SOMC government-form overlay (form-overlay.jsx) ───── */
.fov-wrap { display: flex; flex-direction: column; gap: 18px; align-items: center; padding: 8px 0 24px; }
.fov-sheet {
  position: relative; background: #fff; box-sizing: border-box;
  font-family: 'Manrope', system-ui, sans-serif; color: #000;
}
.fov-sheet.is-screen {
  outline: 1px solid var(--ink-200);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px -10px rgba(15,23,42,0.18);
  /* faint mm grid so placement is visible while calibrating against the real form */
  background-image:
    linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
  background-size: 10mm 10mm, 10mm 10mm;
}
.fov-field { box-sizing: border-box; }
.fov-sheet.is-screen .fov-field { outline: 1px dashed rgba(99,102,241,0.5); background: rgba(99,102,241,0.04); }
.fov-fold { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(220,0,0,0.5); z-index: 1; }
.fov-label {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-400); background: rgba(255,255,255,0.85); padding: 2px 5px; border-radius: 4px;
}
#fov-print-root { display: none; }

/* Overlay print: ONLY the cloned sheets, sized to the physical form, no chrome. */
@media print {
  body.pcv-printing-overlay > *:not(#fov-print-root) { display: none !important; }
  #fov-print-root { display: block !important; }
  #fov-print-root .fov-wrap { display: block; gap: 0; padding: 0; }
  #fov-print-root .fov-sheet {
    page-break-after: always; outline: none !important; box-shadow: none !important;
    background-image: none !important; margin: 0 !important;
  }
  #fov-print-root .fov-sheet:last-child { page-break-after: auto; }
  #fov-print-root .fov-field { outline: none !important; background: none !important; }
  #fov-print-root .fov-label, #fov-print-root .fov-fold { display: none !important; }
}

/* Overlay toggle in the preview top bar */
.pcv-pp-toggle {
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  padding: 6px 10px; border-radius: 8px; margin-right: 8px;
  border: 1px solid var(--ink-300); background: var(--ink-50); color: var(--ink-600);
}
.pcv-pp-toggle.is-on { border-color: var(--primary); background: var(--primary-50); color: var(--primary-700); }


/* ───── Work Area — body of the active ribbon, placed under Log Round ───── */
.pcv-workarea {
  flex: 1 1 0;
  min-height: 160px;
  max-height: 55%;
  margin: 4px 12px 6px;
  background: var(--ink-0);
  border: 1px solid var(--ink-300);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.28);
  animation: pv-slideup-wa 220ms cubic-bezier(.16,1,.3,1) forwards;
  display: flex; flex-direction: column;
}
@keyframes pv-slideup-wa {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pcv-workarea-head {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-200);
  position: relative;
}
.pcv-workarea-head::before {
  content: ''; position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--step-accent);
  border-radius: 0 2px 2px 0;
}
.pcv-workarea-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, white);
}
.pcv-workarea-title {
  flex: 1;
  font-size: 14px; font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.pcv-workarea-close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  color: var(--ink-600);
  cursor: pointer; flex-shrink: 0;
}
.pcv-workarea-close:hover { background: var(--ink-50); border-color: var(--ink-300); }
.pcv-workarea-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  background: var(--step-tint-soft, var(--ink-0));
}

/* Compact ribbon stack (always collapsed) */
.pcv-step.is-active .pcv-step-head {
  background: var(--step-tint);
  outline: 2px solid color-mix(in srgb, var(--step-accent) 50%, white);
  outline-offset: -2px;
}
.pcv-step.is-active .pcv-step-chev { transform: rotate(90deg); color: var(--step-accent); }
.pcv-step .pcv-step-summary {
  /* always show summary in collapsed-only mode */
}


/* ───── Save status (passive auto-save indicator) ───── */
.pcv-save-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-200);
}
.pcv-save-status-ok,
.pcv-save-status-edit {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 3px 8px;
  border-radius: 999px;
}
.pcv-save-status-ok {
  color: #0D9488;
  background: rgba(13, 148, 136, 0.1);
}
.pcv-save-status-edit {
  color: var(--ink-500);
  background: var(--ink-100);
}
.pcv-save-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-400);
  animation: pcv-pulse 1.4s ease-in-out infinite;
}
@keyframes pcv-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ───── Photo thumb edit/delete overlay ───── */
.pcv-photo-thumb { position: relative; }
.pcv-thumb-actions {
  position: absolute; top: 2px; right: 2px;
  display: none;
  gap: 2px;
  z-index: 3;
}
.pcv-photo-thumb:hover .pcv-thumb-actions,
.pcv-photo-thumb.is-edit-mode .pcv-thumb-actions {
  display: flex;
}
.pcv-thumb-action {
  width: 18px; height: 18px;
  border: none;
  border-radius: 4px;
  background: rgba(0,0,0,0.65);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.pcv-thumb-action:hover { background: rgba(0,0,0,0.85); }
.pcv-thumb-action.danger:hover { background: var(--err); }

/* Photo modal action toolbar */
.pcv-photo-modal-actions {
  display: flex; gap: 6px; justify-content: center;
  margin-top: 10px;
}
.pcv-photo-modal-action {
  display: inline-flex; align-items: center; gap: 5px;
  background: white;
  border: 1px solid var(--ink-300);
  color: var(--ink-800);
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.pcv-photo-modal-action.danger {
  color: var(--err);
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(254, 226, 226, 0.5);
}
.pcv-photo-modal-action.danger:hover { background: rgba(254, 226, 226, 1); }

/* Tag input row inside modal */
.pcv-photo-tag-row {
  display: flex; gap: 4px;
  margin-top: 10px;
}
.pcv-photo-tag-input {
  flex: 1;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--ink-300);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  outline: none;
}
.pcv-photo-tag-input:focus { border-color: var(--primary); }


/* ───── Simple drug row (3 inputs) ───── */
.pcv-ord-drug-row {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap;
  padding: 3px 0;
}
.pcv-ord-drug-row.is-read { padding: 2px 0; }

.pcv-ord-input {
  border: 1px solid var(--ink-200);
  background: white;
  border-radius: 6px;
  padding: 6px 9px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-900);
  outline: none;
  min-width: 0;
  height: 30px;
  transition: border-color 120ms, box-shadow 120ms;
}
.pcv-ord-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
.pcv-ord-drug-name { flex: 1 1 140px; min-width: 120px; }
.pcv-ord-drug-dose { flex: 0 1 80px; width: 80px; text-align: center; }
.pcv-ord-drug-freq {
  flex: 0 1 90px; width: 90px;
  text-align: center;
  font-size: 11.5px;
}

textarea.pcv-ord-input.pcv-ord-note {
  width: 100%;
  flex: 1 1 auto;
  height: auto;
  min-height: 44px;
  line-height: 1.45;
  resize: vertical;
  font-size: 12.5px;
}

.pcv-ord-note-row {
  display: flex; align-items: flex-start; gap: 5px;
  padding: 3px 0;
}

.pcv-ord-rm {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: none; background: transparent;
  border-radius: 50%;
  color: var(--ink-300);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pcv-ord-rm:hover { background: rgba(220, 38, 38, 0.12); color: var(--err); }

.pcv-ord-read-text {
  font-size: 13px;
  color: #1F2937;
  line-height: 1.5;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(67, 56, 202, 0.04);
  box-shadow: inset 0 -1px 0 rgba(67, 56, 202, 0.15);
}
.pcv-ord-note-row.is-read .pcv-ord-read-text {
  background: transparent;
  box-shadow: none;
  padding: 2px 0;
  display: block;
  width: 100%;
}
.pcv-ord-muted { color: var(--ink-400); font-style: italic; }

.pcv-ob-actions {
  display: flex; justify-content: flex-end;
  margin-top: 4px;
}


/* ───── Log Round entry header (auto stamp + user, tag centered) ───── */
.pcv-log-meta-row {
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 2px 6px;
  font-size: 11.5px;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.pcv-log-meta-stamp { font-weight: 600; color: var(--ink-800); }
.pcv-log-meta-sep { color: var(--ink-300); }
.pcv-log-meta-user { font-weight: 500; color: var(--ink-600); }

.pcv-log-tag-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0 10px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--ink-200);
}
.pcv-log-tag-chip {
  border: 1px solid var(--ink-200);
  background: white;
  color: var(--ink-700);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.pcv-log-tag-chip:hover { background: var(--ink-50); }
.pcv-log-tag-chip.is-on {
  font-weight: 700;
}

/* Picker cards — soft cool tints */
.pcv-tpl-pick-card {
  background: color-mix(in srgb, var(--tpl-accent, #0EA5A9) 4%, white);
}
.pcv-tpl-pick-card:hover {
  background: color-mix(in srgb, var(--tpl-accent, #0EA5A9) 8%, white);
}


/* Block separators inside paper */
.pcv-paper-block { display: flex; flex-direction: column; gap: 5px; }
.pcv-paper-block-notes {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--paper-accent, #0EA5A9) 24%, white);
}
.pcv-paper-add-inline {
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px dashed color-mix(in srgb, var(--paper-accent, #0EA5A9) 50%, white);
  background: transparent;
  color: color-mix(in srgb, var(--paper-accent, #0EA5A9) 80%, var(--ink-700));
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.pcv-paper-add-inline:hover {
  background: color-mix(in srgb, var(--paper-accent, #0EA5A9) 8%, white);
  border-color: var(--paper-accent, #0EA5A9);
}

/* Pre-Op instruction builders (PreOpHelpers) — a dashed card inside the notes block. */
.pcv-preop-helpers {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--paper-accent, #2563EB) 40%, white);
  border-radius: 9px;
  display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--paper-accent, #2563EB) 4%, white);
}
.pcv-preop-helpers-title {
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--paper-accent, #2563EB) 75%, var(--ink-700));
}
.pcv-preop-checklist-label {
  margin-top: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-500);
}
.pcv-preop-helpers .pcv-chip { align-self: flex-start; }

/* Order-type chooser rendered as a Log-Round-style list (TypePicker). Stacks name + sub inside
   the reused .pcv-log-summary row; the tag chip is a + / ✓ in the type's accent. */
.pcv-tpl-pick-row { width: 100%; text-align: left; }
.pcv-tpl-pick-row .pcv-log-summary-snippet {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal;
}
.pcv-tpl-pick-row-name { font-weight: 700; color: var(--ink-800); font-size: 13px; }
.pcv-tpl-pick-row-sub { font-size: 11px; color: var(--ink-500); }

/* ───── Chart templates (TemplateBar) — apply-chips + create, embedded in ribbons/orders ───── */
.pcv-tplbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 4px 0 10px; padding: 7px 9px;
  background: color-mix(in srgb, var(--primary, #0E7490) 5%, white);
  border: 1px dashed color-mix(in srgb, var(--primary, #0E7490) 30%, white);
  border-radius: 9px;
}
.pcv-tplbar-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: color-mix(in srgb, var(--primary, #0E7490) 80%, var(--ink-700)); white-space: nowrap;
}
.pcv-tplbar-label svg { width: 13px; height: 13px; }
.pcv-tplbar-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
/* Dropdown variant — one compact row: select grows, edit + create stay small. */
.pcv-tplbar-controls { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pcv-tpl-select { flex: 1 1 auto; min-width: 0; max-width: 320px; font-size: 11.5px; padding: 4px 8px; }
.pcv-tplbar-controls .pcv-tpl-chip-edit { border: 1px solid var(--ink-200); border-radius: 7px; background: #fff; }
.pcv-tpl-chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--ink-200); border-radius: 999px; background: #fff; overflow: hidden;
}
.pcv-tpl-chip.is-mine { border-color: color-mix(in srgb, var(--primary, #0E7490) 45%, white); }
/* Applied (toggled-on) chip — tap again to clear. */
.pcv-tpl-chip.is-applied { border-color: var(--primary, #0E7490); }
.pcv-tpl-chip.is-applied .pcv-tpl-chip-apply { background: var(--primary, #0E7490); color: #fff; font-weight: 700; }
.pcv-tpl-chip-apply {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-800);
  padding: 4px 10px;
}
.pcv-tpl-chip-apply:hover { background: color-mix(in srgb, var(--primary, #0E7490) 10%, white); }
.pcv-tpl-chip-edit {
  border: none; border-left: 1px solid var(--ink-150, #e7ecf2); background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; padding: 4px 6px; color: var(--ink-400);
}
.pcv-tpl-chip-edit:hover { color: var(--primary, #0E7490); background: color-mix(in srgb, var(--primary, #0E7490) 8%, white); }
.pcv-tpl-chip-edit svg { width: 12px; height: 12px; }
.pcv-tplbar-controls .pcv-tpl-chip-del { border: 1px solid var(--ink-200); border-radius: 7px; background: #fff;
  display: inline-flex; align-items: center; padding: 4px 6px; color: var(--ink-400); cursor: pointer; }
.pcv-tpl-chip-del:hover { color: var(--err, #DC2626); background: color-mix(in srgb, var(--err, #DC2626) 8%, white); border-color: color-mix(in srgb, var(--err, #DC2626) 35%, white); }
.pcv-tpl-chip-del svg { width: 12px; height: 12px; }
.pcv-tpl-create {
  font-size: 11.5px; font-weight: 700; gap: 4px;
  color: color-mix(in srgb, var(--primary, #0E7490) 85%, var(--ink-700));
  border-style: dashed;
}
.pcv-tpl-hint { font-size: 10.5px; color: var(--err, #DC2626); margin-top: 3px; }
.pcv-tpl-editor { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.pcv-tpl-row { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.pcv-tpl-row .pcv-input { flex: 1 1 auto; min-width: 0; }
.pcv-tpl-row .pcv-tpl-narrow { flex: 0 0 88px; }
.pcv-tpl-addrow { align-self: flex-start; margin-top: 2px; }
/* keep the template bar out of printed documents */
@media print { .pcv-tplbar { display: none !important; } }

/* Saved (read-only) drug rows — show single-line layout with delete */
.pcv-ord-drug-row.is-read,
.pcv-ord-note-row.is-read {
  display: flex; align-items: center; gap: 6px;
}
.pcv-ord-drug-row.is-read .pcv-ord-read-text,
.pcv-ord-note-row.is-read .pcv-ord-read-text {
  flex: 1; min-width: 0;
  background: transparent;
  box-shadow: none;
  padding: 4px 0;
  white-space: normal;
}
.pcv-ord-drug-row.is-read .pcv-ord-rm,
.pcv-ord-note-row.is-read .pcv-ord-rm {
  opacity: 0.45;
  transition: opacity 120ms;
}
.pcv-ord-drug-row.is-read:hover .pcv-ord-rm,
.pcv-ord-note-row.is-read:hover .pcv-ord-rm { opacity: 1; }

/* Hide the now-unused old footer */
.pcv-paper-add { display: none; }

/* Make sure the 3 inputs don't wrap on narrow screens */
.pcv-ord-drug-row { flex-wrap: nowrap; }
.pcv-ord-drug-row .pcv-ord-drug-dose { width: 70px; flex: 0 0 70px; }
.pcv-ord-drug-row .pcv-ord-drug-freq { width: 80px; flex: 0 0 80px; }


/* S/F (Start From) date — appears in same drug row */
.pcv-ord-sf-wrap {
  display: inline-flex; align-items: center; gap: 2px;
  flex: 0 0 auto;
  color: var(--ink-600);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pcv-ord-sf-prefix,
.pcv-ord-sf-suffix {
  font-family: var(--font-mono, monospace);
  color: var(--ink-500);
  font-size: 11px;
  flex-shrink: 0;
}
.pcv-ord-input.pcv-ord-drug-sf {
  width: 95px; flex: 0 0 95px;
  padding: 5px 4px;
  font-size: 10.5px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  background: transparent;
  border-color: transparent;
  border-bottom: 1px dashed var(--ink-300);
  border-radius: 0;
  color: var(--ink-700);
  height: 26px;
}
.pcv-ord-input.pcv-ord-drug-sf::-webkit-datetime-edit-fields-wrapper { color: var(--ink-700); }
.pcv-ord-input.pcv-ord-drug-sf::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}
.pcv-ord-input.pcv-ord-drug-sf:focus {
  background: white;
  border-color: var(--primary);
  border-radius: 4px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.pcv-ord-sf-read {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--ink-600);
  margin-left: 6px;
}

/* Allow drug row to wrap S/F to a second visual line if very narrow */
@media (max-width: 360px) {
  .pcv-ord-drug-row { flex-wrap: wrap; }
  .pcv-ord-sf-wrap { margin-left: auto; }
}


/* Tiny category caption strip on each gallery thumb */
.pcv-media-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.78) 60%, rgba(15,23,42,0.92) 100%);
  color: white;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 2px 2px;
  text-align: center;
  line-height: 1;
  pointer-events: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.pcv-media-thumb { position: relative; }
/* Subtle uploader name on a gallery thumb — sits just above the category caption */
.pcv-media-uploader {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  color: rgba(255,255,255,0.92);
  font-size: 7.5px;
  font-style: italic;
  letter-spacing: 0;
  padding: 0 3px;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(15,23,42,0.9);
}


/* Stale-blob placeholder (previously-uploaded media that's lost after reload) */
.pcv-media-stale {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg,
    var(--ink-100) 0 6px,
    color-mix(in srgb, var(--ink-100) 50%, white) 6px 12px);
  color: var(--ink-500);
}


/* ───── Field state styling: saved (tint) vs editing/empty (white) ───── */
/* Saved state: inputs with a value (placeholder hidden) get a soft tint of the step accent */
.pcv-step-body.is-saved .pcv-input:not(:focus):not(:placeholder-shown):not([type="date"]),
.pcv-step-body.is-saved .pcv-textarea:not(:focus):not(:placeholder-shown),
.pcv-step-body.is-saved input.pcv-input[type="date"]:not(:focus):not([value=""]),
.pcv-step-body.is-saved .pcv-select:not(:focus):not([data-empty="true"]) {
  background: color-mix(in srgb, var(--step-accent, var(--primary)) 9%, white);
  border-color: color-mix(in srgb, var(--step-accent, var(--primary)) 22%, white);
}

/* Editing state OR empty fields: pure white */
.pcv-step-body.is-editing .pcv-input,
.pcv-step-body.is-editing .pcv-textarea,
.pcv-step-body.is-editing .pcv-select {
  background: white !important;
  border-color: var(--ink-200);
}

/* Focused fields always white */
.pcv-step-body .pcv-input:focus,
.pcv-step-body .pcv-textarea:focus,
.pcv-step-body .pcv-select:focus {
  background: white;
  border-color: var(--step-accent, var(--primary));
}

/* Saved status footer + Edit toggle */
.pcv-save-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-200);
}
.pcv-save-edit-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--ink-700);
  background: white;
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.pcv-save-edit-btn:hover { background: var(--ink-50); border-color: var(--step-accent, var(--ink-400)); }
.pcv-save-edit-btn.is-on {
  background: var(--step-accent, var(--primary));
  color: white;
  border-color: var(--step-accent, var(--primary));
}
.pcv-save-edit-btn.is-on:hover { filter: brightness(1.06); }


/* ───── Compact Active Medications button + Round actions ───── */
.pcv-active-meds-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 9px 11px;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  margin-top: 4px;
  transition: border-color 120ms, background 120ms;
}
.pcv-active-meds-btn:hover { border-color: var(--primary); background: var(--primary-50); }
.pcv-active-meds-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
  border-radius: 8px;
  flex-shrink: 0;
}
.pcv-active-meds-text {
  flex: 1;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-800);
}
.pcv-active-meds-count {
  display: inline-block;
  font-weight: 800;
  color: var(--primary);
  margin-right: 4px;
}
.pcv-active-meds-arrow {
  color: var(--ink-400);
  flex-shrink: 0;
}

.pcv-round-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-top: 6px;
}
.pcv-round-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  border: 1.5px solid transparent;
  transition: filter 120ms, background 120ms;
}
.pcv-round-btn.primary {
  background: #0D9488;
  color: white;
  box-shadow: 0 2px 8px -2px rgba(13, 148, 136, 0.5);
}
.pcv-round-btn.primary:hover { filter: brightness(1.05); }
.pcv-round-btn.ghost {
  background: white;
  color: #0D9488;
  border-color: rgba(13, 148, 136, 0.35);
}
.pcv-round-btn.ghost:hover { background: rgba(13, 148, 136, 0.06); border-color: #0D9488; }
.pcv-round-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pcv-round-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
}
.pcv-round-btn-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: #0D9488;
  color: white;
  font-size: 9px; font-weight: 800;
  min-width: 14px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid white;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}

/* ───── Patient Log summary list (browse mode) ───── */
.pcv-log-summary-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
.pcv-log-summary-item {
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  background: white;
  overflow: hidden;
  transition: border-color 120ms;
}
.pcv-log-summary-item.is-open { border-color: var(--ink-300); }
.pcv-log-summary-head {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  border: none; background: transparent;
  cursor: pointer;
  text-align: left;
}
.pcv-log-summary-head:hover { background: var(--ink-50); }
.pcv-log-summary-item.is-open .pcv-log-summary-head { background: var(--ink-50); }
.pcv-log-summary-tag {
  flex-shrink: 0;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
}
.pcv-log-summary-snippet {
  flex: 1; min-width: 0;
  font-size: 11.5px;
  color: var(--ink-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcv-log-summary-when {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Subtle author attribution on round/course entries ("— <name>") */
.pcv-log-summary-author {
  flex-shrink: 0;
  font-size: 9.5px;
  color: var(--ink-400, #94A3B8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}
.pcv-log-meta-author {
  font-size: 10px;
  color: var(--ink-500, #6B7280);
  font-style: italic;
}
/* Attribution caption (decision #6): subtle, muted "— <name>" shown under a
   submitted artifact (1:1 ribbons, etc.). Additive text only — no box/border. */
.pcv-submitted-by {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-400, #94A3B8);
  font-style: italic;
}
.pcv-log-summary-head svg {
  color: var(--ink-400);
  transition: transform 180ms;
}
.pcv-log-summary-item.is-open .pcv-log-summary-head > svg { transform: rotate(90deg); }
.pcv-log-summary-body {
  padding: 8px 11px 11px;
  border-top: 1px solid var(--ink-150, var(--ink-200));
  font-size: 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.pcv-log-detail-row {
  font-size: 12px;
  color: var(--ink-800);
  line-height: 1.5;
}
.pcv-log-detail-row b { color: var(--ink-600); margin-right: 2px; }
.pcv-log-modified-note {
  font-size: 10.5px;
  font-style: italic;
  color: var(--ink-500);
  padding-top: 4px;
  border-top: 1px dashed var(--ink-200);
}
.pcv-log-detail-actions {
  display: flex; justify-content: flex-end;
  margin-top: 4px;
}

/* ───── Active Meds Sheet groups ───── */
.pcv-active-meds-group + .pcv-active-meds-group { margin-top: 6px; }
.pcv-active-meds-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px;
}
.pcv-active-meds-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
}
.pcv-active-meds-name {
  flex: 1; min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcv-active-meds-dose {
  font-size: 11px;
  color: var(--ink-600);
  font-variant-numeric: tabular-nums;
}
.pcv-active-meds-freq {
  font-size: 10.5px;
  color: var(--ink-600);
  background: var(--ink-100);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
}

/* ───── Patient header: age/sex inline ───── */
.pcv-patient-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pcv-patient-age {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: -0.01em;
  background: var(--ink-100);
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}


/* 3-column round actions row — left and right are identical, center wider */
.pcv-round-actions-3 { grid-template-columns: 1fr 1.35fr 1fr; gap: 8px; }
.pcv-round-actions-3 .pcv-round-btn {
  padding: 0 8px;
  font-size: 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.pcv-round-actions-3 .pcv-round-btn-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcv-round-actions-3 .pcv-round-btn.primary {
  font-size: 13.5px;
  font-weight: 800;
  height: 40px;
}
.pcv-active-meds-inline {
  /* match the ghost-style sibling buttons */
}


/* ───── Bottom action bar: larger button text ───── */
.pcv-bottom-btn span:not(.pcv-bottom-badge) {
  font-size: 13.5px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Active Meds inline-edit row */
.pcv-active-meds-name-input { flex: 1 1 100px; min-width: 100px; }
.pcv-active-meds-dose-input { width: 72px; flex: 0 0 72px; text-align: center; font-size: 11.5px; }
.pcv-active-meds-freq-input { width: 90px; flex: 0 0 90px; text-align: center; font-size: 11px; }

.pcv-active-meds-action {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--ink-200);
  background: white;
  color: var(--ink-700);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pcv-active-meds-action:hover { background: var(--ink-50); }
.pcv-active-meds-action.ghost {
  border-color: transparent;
  color: var(--ink-500);
  background: transparent;
}
.pcv-active-meds-action.ghost:hover { background: var(--ink-100); color: var(--ink-800); }

.pcv-active-meds-sf {
  font-size: 10px;
  color: var(--ink-500);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums;
}
.pcv-active-meds-row.is-editing {
  background: color-mix(in srgb, var(--primary) 4%, white);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--ink-200));
}

/* Ongoing-meds manager — danger action, add button, notes */
.pcv-active-meds-action.danger { color: var(--err); }
.pcv-active-meds-action.danger:hover { background: var(--err-50); color: var(--err); }
.pcv-meds-add {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  width: 100%;
  justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--ink-300));
  background: var(--primary-50, #EEF0FF);
  color: var(--primary);
  border-radius: 10px;
  font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.pcv-meds-add:hover { background: var(--primary-100, #E0E4FF); }
.pcv-meds-section-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500);
  margin: 18px 2px 6px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
}
.pcv-note-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: 9px;
}
.pcv-note-row.is-editing {
  background: color-mix(in srgb, var(--primary) 4%, white);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--ink-200));
}
.pcv-note-row + .pcv-note-row { margin-top: 4px; }
.pcv-note-text {
  flex: 1; min-width: 0;
  font-size: 12px; line-height: 1.4; color: var(--ink-800);
  word-break: break-word; padding-top: 3px;
}
.pcv-note-row .pcv-active-meds-action { margin-top: 1px; }
.pcv-opnote-extra {
  margin-top: 16px;
  padding: 10px 10px 8px;
  background: white;
  border: 1px dashed var(--ink-300);
  border-radius: 10px;
}
.pcv-opnote-extra-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}


/* ───── Investigations: inline auto-saving rows (matches Order Builder feel) ───── */
.pcv-invest-rows {
  display: flex; flex-direction: column; gap: 6px;
}
/* Each investigation = 2 lines: [small date · test · ✕] then a 2-line result box. */
.pcv-invest-row-edit {
  display: flex; flex-direction: column; gap: 3px;
  padding-bottom: 6px; border-bottom: 1px solid var(--ink-100);
}
.pcv-invest-row-edit:last-child { border-bottom: none; padding-bottom: 0; }
.pcv-invest-row-top { display: flex; align-items: center; gap: 5px; }
.pcv-invest-row-edit .pcv-input.sm { height: 28px; padding: 4px 7px; font-size: 12px; }
.pcv-invest-test   { flex: 1 1 auto; min-width: 0; }
.pcv-invest-date   { flex: 0 0 92px; width: 92px; font-size: 9.5px !important; padding: 4px 4px !important; font-family: var(--font-mono, monospace); }
.pcv-invest-result { width: 100%; height: auto !important; min-height: 38px; resize: none; line-height: 1.3; }


/* Patient header meta row: wrap so the bed/cabin number is always fully visible */
.pcv-patient-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap !important;
  gap: 3px 8px;
  white-space: normal;
  min-width: 0;
}
.pcv-patient-meta > span {
  flex-shrink: 0;
  white-space: nowrap;
}
.pcv-patient-meta .pcv-meta-dot {
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   Field-rule visual treatments (driven by field-rules.jsx).
   Wrappers carry data-locked / data-req attrs which CSS reads.
   ───────────────────────────────────────────────────────────── */

/* Required marker — small red asterisk next to label */
.pcv-field[data-req] > .pcv-label::after,
.pcv-field[data-required] > .pcv-label::after {
  content: ' *';
  color: var(--err, #DC2626);
  font-weight: 700;
}

/* Read-only / locked field (admin marked editable: false) */
.pcv-field[data-locked] {
  position: relative;
}
.pcv-field[data-locked] > .pcv-label {
  color: var(--ink-500);
}
.pcv-field[data-locked] > .pcv-label::before {
  content: '';
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='6' width='8' height='6' rx='1.2'/%3E%3Cpath d='M5 6V4.5a2 2 0 0 1 4 0V6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: -1px;
}
.pcv-field[data-locked] input,
.pcv-field[data-locked] textarea,
.pcv-field[data-locked] select {
  background: var(--ink-50);
  color: var(--ink-700);
  cursor: not-allowed;
}
.pcv-field[data-locked] input:focus,
.pcv-field[data-locked] textarea:focus,
.pcv-field[data-locked] select:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--ink-200);
}

/* ───── Responsive: full-bleed app on phones/tablets ─────
   Every page host (.pcv-host/.adm-host/.login-host/.as-host/.ofs-host) gets the
   `is-fluid` class from useDeviceShell on touch / narrow viewports. We then drop the
   centered + scaled desktop mockup and let the app fill the screen. `!important` keeps
   these winning over the per-page inline host styles regardless of cascade order.
   100dvh (not vh) so mobile browser chrome doesn't clip bottom action bars. */
.is-fluid {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000 !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}
.is-fluid > * {
  transform: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
/* the full-bleed device wrapper itself */
.ios-device-fluid { border-radius: 0 !important; box-shadow: none !important; }

/* ───── Desktop hosts (fine pointer, ≥960px): real desktop surfaces, no phone mockup ─────
   Login → a centered sign-in card on a tinted backdrop. Standalone case view → a
   full-height centered workspace column (mirrors the dashboards page's main pane). */
.login-desktop {
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 32px;
  background:
    radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, #4338CA 10%, #EEF2F7), #EEF2F7);
}
.login-desktop-card {
  width: 430px; height: min(840px, 92dvh);
  border-radius: 22px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 24px 60px -24px rgba(15,23,42,0.35);
}
.login-desktop-card > * { width: 100% !important; height: 100% !important; }

.pcv-desktop {
  display: flex; justify-content: center;
  min-height: 100dvh;
  background: var(--ink-100, #EEF2F7);
}
.pcv-desktop-col {
  width: min(820px, 100vw); height: 100dvh;
  background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px var(--ink-200, #D6DEE8), 0 18px 48px -22px rgba(15,23,42,0.3);
}
.pcv-desktop-col > * { width: 100% !important; height: 100% !important; }
/* no mock status bar on desktop → drop the phone-notch top reservation */
.pcv-desktop .pcv-topbar { padding-top: 12px; }

/* On a real phone the device wrapper already clears the notch via
   env(safe-area-inset-top), so the app top bars must NOT also reserve ~50px for a
   (now-hidden) mock status bar — that's the dead space above the interface. */
.is-fluid .pcv-topbar { padding-top: 8px !important; }
.is-fluid .op-topbar  { padding-top: 8px !important; }

/* AUTHORITATIVE print un-clamp — MUST come after the .is-fluid rules above (equal specificity +
   !important is resolved by source order, so the earlier @media-print reset lost to .is-fluid's
   height:100dvh/overflow:hidden and clipped multi-page prints to a single page). Placed last so
   the print shell can grow to the full document height and paginate. */
@media print {
  html, body, #root,
  .is-fluid, .is-fluid > *,
  .pcv-host, .adm-host, .login-host, .as-host, .ofs-host,
  .ios-device-fluid, .pcv-app {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Premium pass — Batch 1 (hero flags · save beacon · progress phases · tactile)
   ══════════════════════════════════════════════════════════════════════════ */

/* Persistent save beacon in the top bar */
.pcv-saved-ind {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1px;
  color: var(--ink-500); white-space: nowrap; min-width: 0;
}
.pcv-saved-ind-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-300); flex-shrink: 0; }
.pcv-saved-ind.is-saving { color: var(--ink-500); }
.pcv-saved-ind.is-saving .pcv-saved-ind-dot { background: var(--warn, #D97706); animation: pcv-blink 1s ease-in-out infinite; }
.pcv-saved-ind.is-saved  { color: var(--ok, #0D9488); }
.pcv-saved-ind.is-saved  .pcv-saved-ind-dot { background: var(--ok, #0D9488); }
.pcv-saved-ind.is-error  { color: var(--err, #DC2626); }
.pcv-saved-ind.is-error  .pcv-saved-ind-dot { background: var(--err, #DC2626); }
@keyframes pcv-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
/* On narrow phones, keep just the dot to save space */
@media (max-width: 380px) { .pcv-saved-ind-text { display: none; } }

/* Patient hero — comorbidity / allergy flag */
.pcv-patient-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.pcv-flag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1px;
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcv-flag.warn { background: #FEF3C7; color: #92400E; }
.pcv-flag.warn svg { flex-shrink: 0; }

/* Phase section labels in the ribbon list */
.pcv-phase-label {
  margin: 14px 2px 5px; padding: 0;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-400);
}
.pcv-stack > .pcv-phase-label:first-of-type { margin-top: 2px; }

/* Inline save pulse — the bottom "Saved ✓" briefly glows green when it flips */
.pcv-save-status-ok { animation: pcv-saved-pop 360ms ease-out; }
@keyframes pcv-saved-pop { 0% { transform: scale(0.92); opacity: 0.4; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }

/* Motion + tactile: a unified easing token + a subtle press on key controls */
:root { --pcv-ease: cubic-bezier(.2,.8,.2,1); }
.pcv-bottom-btn:active, .pcv-discharge-btn:active, .pcv-step-done-btn:active,
.pcv-assign-ot-btn:active, .pcv-photo-add:active, .pcv-photo-modal-nav:active {
  transform: scale(0.97);
}

/* ══════════════════════════════════════════════════════════════════════════
   Premium pass — Batch 2 (lightbox zoom/pan/swipe · filmstrip · before/after)
   ══════════════════════════════════════════════════════════════════════════ */
.pcv-zoom-wrap {
  max-width: 100%; max-height: 70vh; overflow: hidden; position: relative;
  touch-action: none; display: flex; align-items: center; justify-content: center;
}
.pcv-zoom-wrap img { will-change: transform; -webkit-user-drag: none; user-select: none; }
/* Instant low-res placeholder shown under the full image while it loads (navigation never
   goes blank). Slight blur hides the upscaling; the full image fades in on top. */
.pcv-zoom-wrap .pcv-zoom-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; filter: blur(8px); transform: scale(1.02); opacity: 0.85;
}

.pcv-filmstrip {
  display: flex; gap: 6px; overflow-x: auto; max-width: 100%;
  padding: 6px 2px 2px; margin-top: 6px; -webkit-overflow-scrolling: touch;
}
.pcv-filmstrip::-webkit-scrollbar { height: 0; }
.pcv-filmstrip-thumb {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; background: rgba(255,255,255,0.12); padding: 0; cursor: pointer;
}
.pcv-filmstrip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcv-filmstrip-thumb.is-active { border-color: #fff; }
.pcv-filmstrip-vid { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; background: #1F2937; }

/* Before / after compare */
.pcv-compare { display: flex; gap: 10px; max-width: 100%; padding: 0 8px; }
.pcv-compare-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pcv-compare-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; opacity: 0.85;
}
.pcv-compare-pane img { max-width: 100%; max-height: 64vh; border-radius: 10px; box-shadow: 0 12px 40px -8px rgba(0,0,0,0.5); cursor: zoom-in; }
.pcv-compare-empty {
  width: 100%; aspect-ratio: 3/4; border: 1.5px dashed rgba(255,255,255,0.35); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); font-size: 12px; text-align: center; padding: 12px;
}
.pcv-photo-compare-btn {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  border: 1.5px solid var(--ink-200); background: #fff; color: var(--ink-700);
  border-radius: 999px; font-family: inherit; font-size: 11px; font-weight: 700;
  padding: 4px 11px; cursor: pointer;
}
.pcv-photo-compare-btn:active { transform: scale(0.97); }

/* ══════════════════════════════════════════════════════════════════════════
   Premium pass — Batch 3 (dictation mic · quick-picks · sticky ribbon footer)
   ══════════════════════════════════════════════════════════════════════════ */
.pcv-ta-wrap { position: relative; }
.pcv-mic {
  position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--ink-200); background: #fff; color: var(--ink-500);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}
.pcv-mic:active { transform: scale(0.94); }
.pcv-mic.is-on { background: var(--err, #DC2626); color: #fff; border-color: transparent; animation: pcv-blink 1s ease-in-out infinite; }

.pcv-quickpick { margin-top: 8px; }
.pcv-quickpick .pcv-chip { font-weight: 600; }

/* Sticky ribbon footer — pinned to the bottom of the sheet; Done in the lower-right corner */
.pcv-step-overlay-foot {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 10px 14px calc(env(safe-area-inset-bottom) + 10px);
  border-top: 1px solid var(--ink-150);
  background: var(--ink-0);
}
.pcv-step-overlay-foot.is-readonly { justify-content: flex-start; }
.pcv-step-overlay-foot .pcv-step-readonly-note { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Premium pass — Batch 4 (case timeline · discharge sheet)
   ══════════════════════════════════════════════════════════════════════════ */
.pcv-timeline { display: flex; align-items: flex-start; padding: 8px 14px 2px; overflow-x: auto; }
.pcv-timeline::-webkit-scrollbar { height: 0; }
.pcv-tl-step { flex: 1 1 0; min-width: 54px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.pcv-tl-step::before { content: ''; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--ink-200); z-index: 0; }
.pcv-tl-step:first-child::before { display: none; }
.pcv-tl-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 999px; background: var(--ink-0); border: 2px solid var(--ink-300); display: flex; align-items: center; justify-content: center; color: #fff; transition: background 220ms, border-color 220ms, box-shadow 220ms; }
.pcv-tl-dot svg { width: 9px; height: 9px; }
.pcv-tl-label { font-size: 9.5px; font-weight: 700; color: var(--ink-400); letter-spacing: 0.02em; white-space: nowrap; }
.pcv-tl-step.is-done .pcv-tl-dot { background: var(--primary); border-color: var(--primary); }
.pcv-tl-step.is-done::before { background: var(--primary); }
.pcv-tl-step.is-current .pcv-tl-dot { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.pcv-tl-step.is-current .pcv-tl-label { color: var(--primary); }
.pcv-timeline.is-cancelled { padding: 8px 14px; }
.pcv-tl-cancel { font-size: 11px; font-weight: 800; color: var(--err); letter-spacing: 0.04em; text-transform: uppercase; }

.pcv-discharge-sheet { padding: 2px 16px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pcv-discharge-sheet-icon { width: 48px; height: 48px; border-radius: 999px; background: color-mix(in srgb, var(--err) 12%, white); color: var(--err); display: flex; align-items: center; justify-content: center; }
.pcv-discharge-sheet-title { font-size: 16px; font-weight: 800; color: var(--ink-900); text-align: center; }
.pcv-discharge-points { list-style: none; margin: 2px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 9px; }
.pcv-discharge-points li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink-700); line-height: 1.4; }
.pcv-dp-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); margin-top: 6px; }
.pcv-discharge-confirm { border: none; border-radius: 10px; background: linear-gradient(135deg, #FB8C8C, #F36A6A); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; padding: 11px; cursor: pointer; }
.pcv-discharge-confirm:active { transform: scale(0.98); }

/* ══════════════════════════════════════════════════════════════════════════
   Premium pass — Batch 6 (dark mode · command palette · skeletons · a11y)
   ══════════════════════════════════════════════════════════════════════════ */
.pcv-theme-toggle { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--ink-200); background: var(--ink-0); color: var(--ink-600); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.pcv-theme-toggle:active { transform: scale(0.94); }

.pcv-cmdk { position: absolute; inset: 0; z-index: 120; background: rgba(15,23,42,0.45); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.pcv-cmdk-box { width: min(440px, 92%); background: var(--ink-0); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pcv-step-overlay-in 160ms var(--pcv-ease, ease); }
.pcv-cmdk-input { width: 100%; border: none; border-bottom: 1px solid var(--ink-200); padding: 14px 16px; font-family: inherit; font-size: 15px; color: var(--ink-900); background: var(--ink-0); outline: none; }
.pcv-cmdk-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.pcv-cmdk-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; padding: 10px 12px; border-radius: 9px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-800); cursor: pointer; text-align: left; }
.pcv-cmdk-item:hover { background: var(--ink-100); }
.pcv-cmdk-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.pcv-cmdk-empty { padding: 16px; text-align: center; color: var(--ink-400); font-size: 13px; }

/* Skeleton shimmer behind media tiles while the image loads (img covers it once painted) */
.pcv-media-thumb, .pcv-photo-thumb, .pcv-filmstrip-thumb, .pcv-photo-more {
  background-image: linear-gradient(100deg, var(--ink-100) 30%, var(--ink-50) 50%, var(--ink-100) 70%);
  background-size: 200% 100%; animation: pcv-shimmer 1.3s linear infinite;
}
@keyframes pcv-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ── Dark mode (first pass) — flips the neutral ramp + the main hardcoded surfaces ── */
html[data-pcv-theme="dark"] {
  --ink-0: #0F1729; --ink-50: #131D30; --ink-100: #1B2740; --ink-150: #243150; --ink-200: #2C3A57;
  --ink-300: #3C4C6C; --ink-400: #8593AC; --ink-500: #9AA8C0; --ink-600: #B4C0D6; --ink-700: #CCD6E8;
  --ink-800: #E1E9F5; --ink-900: #F4F8FE;
  --shadow-sm: none;
  --shadow-md: 0 4px 16px -2px rgba(0,0,0,0.55);
  --shadow-lg: 0 14px 40px -10px rgba(0,0,0,0.7);
}
html[data-pcv-theme="dark"] body,
html[data-pcv-theme="dark"] .ios-device,
html[data-pcv-theme="dark"] .pcv-app { background: #0B1322; color: var(--ink-800); }
html[data-pcv-theme="dark"] .pcv-actionbar { background: #0B1322 !important; border-top-color: var(--ink-200); }
html[data-pcv-theme="dark"] .pcv-bottom-btn,
html[data-pcv-theme="dark"] .pcv-mic,
html[data-pcv-theme="dark"] .pcv-theme-toggle { background: var(--ink-100); color: var(--ink-700); border-color: var(--ink-200); }
html[data-pcv-theme="dark"] .pcv-sheet,
html[data-pcv-theme="dark"] .pcv-cmdk-box { background: var(--ink-50); }
html[data-pcv-theme="dark"] .pcv-step-overlay,
html[data-pcv-theme="dark"] .pcv-step-overlay-foot { background: var(--ink-0); }
html[data-pcv-theme="dark"] .pcv-input,
html[data-pcv-theme="dark"] .pcv-textarea,
html[data-pcv-theme="dark"] .pcv-select,
html[data-pcv-theme="dark"] .pcv-step-body.is-editing .pcv-input,
html[data-pcv-theme="dark"] .pcv-step-body.is-editing .pcv-textarea,
html[data-pcv-theme="dark"] .pcv-step-body.is-editing .pcv-select,
html[data-pcv-theme="dark"] .pcv-step-body.is-saved .pcv-input,
html[data-pcv-theme="dark"] .pcv-step-body.is-saved .pcv-textarea,
html[data-pcv-theme="dark"] .pcv-step-body.is-saved .pcv-select {
  background: var(--ink-50) !important; color: var(--ink-900); border-color: var(--ink-200);
}
html[data-pcv-theme="dark"] .pcv-discharge-sheet-icon { background: rgba(220,38,38,0.18); }
html[data-pcv-theme="dark"] .pcv-saved-ind.is-saving { color: var(--ink-500); }

/* ── On-demand media: gallery shows ICON placeholders (no fetch on case open);
      the real photo/video loads only when tapped, in the viewer (with a spinner). ── */
.pcv-media-thumb.is-icon {
  background: var(--ink-100) !important;
  background-image: none !important;
  animation: none !important;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-400);
  border: 1px solid var(--ink-200);
}
.pcv-media-thumb.is-icon.is-video {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--ink-100)) !important;
}
.pcv-media-thumb.is-icon.is-stale { color: var(--warn, #B45309); }
.pcv-media-thumb-icon { display: flex; align-items: center; justify-content: center; pointer-events: none; }

/* Loading state inside the fullscreen viewer */
.pcv-media-loading {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: rgba(255,255,255,0.92); font-size: 12px; font-weight: 600; pointer-events: none;
}
.pcv-media-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff;
  animation: pcv-spin 0.8s linear infinite;
}
@keyframes pcv-spin { to { transform: rotate(360deg); } }

/* Auto-generated, non-editable field (e.g. IP No.) */
.pcv-input.is-fixed {
  background: var(--ink-100) !important;
  color: var(--ink-600);
  cursor: not-allowed;
}

/* Date inputs: tapping anywhere on the field opens the picker, and the calendar icon is
   hidden (the transparent picker indicator is stretched to cover the whole field). */
.pcv-input[type="date"] { position: relative; }
.pcv-input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}

/* Investigation: per-row "view" button + full-report popup */
.pcv-invest-view {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--ink-200); background: var(--ink-0); color: var(--primary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pcv-invest-view:active { transform: scale(0.92); }
.pcv-info-pop {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(15,23,42,0.5);
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.pcv-info-card {
  width: min(480px, 100%); max-height: 84vh; overflow-y: auto;
  background: var(--ink-0); border-radius: 18px; padding: 22px 20px 18px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 10px;
  animation: pcv-sheet-up 200ms var(--pcv-ease, ease);
}
.pcv-info-test { font-size: 17px; font-weight: 800; color: var(--ink-900); line-height: 1.25; }
.pcv-info-date { font-size: 12px; font-weight: 700; color: var(--primary); }
.pcv-info-report { font-size: 14px; color: var(--ink-800); line-height: 1.5; white-space: pre-wrap; margin-top: 2px; }
.pcv-info-close {
  align-self: flex-end; margin-top: 8px; border: none; border-radius: 9px;
  background: var(--primary); color: #fff; font-family: inherit; font-size: 13px; font-weight: 800;
  padding: 9px 22px; cursor: pointer;
}
.pcv-info-close:active { transform: translateY(1px); }

/* Investigations as a compact one-line list → tap to open an editable detail popup */
.pcv-invest-list { display: flex; flex-direction: column; }
.pcv-invest-empty { font-size: 12.5px; color: var(--ink-400); font-style: italic; padding: 6px 2px; }
.pcv-invest-line {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: none; border-bottom: 1px solid var(--ink-100);
  padding: 9px 2px; cursor: pointer; font-family: inherit;
}
.pcv-invest-line:active { background: var(--ink-50); }
.pcv-invest-line-date { flex: 0 0 auto; font-size: 9.5px; color: var(--ink-500); font-family: var(--font-mono, monospace); white-space: nowrap; }
.pcv-invest-line-test { flex: 0 1 auto; max-width: 42%; font-size: 13px; font-weight: 700; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcv-invest-line-result { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcv-invest-line-chev { flex: 0 0 auto; color: var(--ink-300); display: flex; align-items: center; }

.pcv-invest-edit-card { gap: 4px; }
.pcv-invest-edit-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.pcv-invest-del {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid color-mix(in srgb, var(--err) 35%, white); background: color-mix(in srgb, var(--err) 8%, white);
  color: #B91C1C; border-radius: 9px; font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 8px 14px; cursor: pointer;
}
.pcv-invest-del:active { transform: translateY(1px); }

/* Investigation popup read-mode actions: three EQUAL buttons (Delete · Close · Edit) */
.pcv-invest-edit-actions.is-read { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pcv-invest-edit-actions.is-read > button {
  width: 100%; height: 34px; font-size: 12px; justify-content: center;
  padding-left: 0; padding-right: 0;
}
.pcv-invest-rightbtns { display: flex; align-items: center; gap: 8px; }
.pcv-invest-closebtn {
  border: 1px solid var(--ink-200); background: var(--ink-0); color: var(--ink-600);
  border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; cursor: pointer;
}
.pcv-invest-closebtn:active { transform: translateY(1px); }
.pcv-info-close { display: inline-flex; align-items: center; gap: 6px; }
.pcv-info-close svg { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════════════════
   Generate Order chooser + Referral Note (SOMC) — additive; does not alter any
   existing case-view styling.
   ════════════════════════════════════════════════════════════════════════════ */
.pcv-sheet-back {
  border: none; background: transparent; font-size: 22px; line-height: 1;
  color: var(--primary, #0D9488); cursor: pointer; padding: 0 4px; font-weight: 800;
}
.pcv-generate-choose { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.pcv-choose-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; width: 100%; padding: 16px 16px;
  border: 1px solid var(--ink-200, #E2E8F0); border-radius: 14px; background: #fff; cursor: pointer;
}
.pcv-choose-card:active { transform: translateY(1px); }
.pcv-choose-card svg { width: 22px; height: 22px; color: var(--primary, #0D9488); margin-bottom: 4px; }
.pcv-choose-card-title { font-weight: 800; font-size: 15px; color: var(--ink-900, #0F172A); }
.pcv-choose-card-sub { font-size: 12px; color: var(--ink-500, #64748B); }
.pcv-referral-form { margin-top: 8px; }
.pcv-referral-row { display: flex; gap: 10px; }

/* Referral note printable letter — auto-fits to one A4 page (see PrintReferral).
   Sizes/margins are em off the .pcv-ref-scale base (13px); the auto-fit shrinks that base
   when content is long, scaling the ENTIRE letter (text + spacing) so it always lands on a
   single A4 page regardless of how much text is in history/examination/investigations. */
.pcv-ref-page { box-sizing: border-box; width: 100%; color: #0F172A; }
.pcv-ref-scale { width: 100%; font-size: 13px; }
.pcv-ref-inst { text-align: center; font-weight: 800; font-size: 1.23em; }
.pcv-ref-dept-line { text-align: center; font-size: 0.92em; color: #334155; margin-top: 0.15em; padding-bottom: 0.6em; border-bottom: 1.5px solid #0F172A; }
.pcv-ref-to { margin-top: 1.2em; font-size: 1em; line-height: 1.5; }
.pcv-ref-to-name { font-weight: 700; }
.pcv-ref-title { text-align: center; font-size: 1.31em; font-weight: 800; text-decoration: underline; margin: 1.05em 0 0.75em; letter-spacing: .02em; }
.pcv-ref-patient { font-size: 0.96em; color: #1F2937; padding: 0.46em 0; border-top: 1px solid #CBD5E1; border-bottom: 1px solid #CBD5E1; margin-bottom: 0.77em; }
.pcv-ref-para { font-size: 1em; line-height: 1.5; margin: 0.62em 0; text-align: justify; }
.pcv-ref-para-label { font-weight: 800; }
.pcv-ref-seal { margin-top: 2.3em; width: 60%; margin-left: auto; text-align: left; }
.pcv-ref-seal-line { border-top: 1px solid #0F172A; margin-bottom: 0.3em; }
.pcv-ref-seal-name { font-weight: 700; font-size: 1em; }
.pcv-ref-seal-role { font-size: 0.92em; color: #334155; }
.pcv-ref-seal-dept, .pcv-ref-seal-inst { font-size: 0.88em; color: #475569; }

@media print {
  .pcv-pp-page-referral { padding: 14mm !important; }
  .pcv-pp-page-referral .pcv-ref-page { height: auto; }
}