:root {
  --bg: #F7F4EC;
  --panel: #FFFEFA;
  --ink: #1C2321;
  --ink-soft: #4A524F;
  --ink-faint: #8A8F8B;
  --rule: #E3DDCC;
  --rule-soft: #EDE7D7;
  --accent: #2F4F4A;

  --btn-red: #B05835;
  --btn-red-bg: #F3DDD0;
  /* Light green is intentionally pale — meaningful primarily as "started but
     not done" (a faint nudge). Dark green is fully saturated — meaningful as
     "done" (clear visual confirmation). Higher contrast between the two so
     workflow-state changes stand out at a glance. */
  --btn-lt-green: #B8D2A8;
  --btn-lt-green-bg: #ECF5DD;
  --btn-dk-green: #2F5A2A;
  --btn-dk-green-bg: #95B883;

  --phase-prev-bg: #EDEFF1;
  --phase-prev-rule: #CFD5DC;
  --phase-prev-accent: #5C6A77;
  --phase-adm-bg: #FFFEFA;
  --phase-adm-rule: #E3DDCC;
  --phase-adm-accent: #2F4F4A;

  --st-imaging: #D9E2EC;
  --st-imaging-border: #8FA5BA;
  --st-labs: #F1E5C8;
  --st-labs-border: #C6A968;
  --st-dc-summary: #DFD8E8;
  --st-dc-summary-border: #9E8FB5;
  --st-pathology: #E8D8D8;
  --st-pathology-border: #B88A8A;
  --st-ptphoto: #DCE4D2;
  --st-ptphoto-border: #8FA57A;
  --st-ednote: #CFE4E0;
  --st-ednote-border: #6FA69B;
  --st-edverbal: #F5D7BE;
  --st-edverbal-border: #C79670;

  --focus: #C48234;
  --focus-bg: #FBEFD8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body { padding: 14px 20px 40px; min-height: 100vh; }

/* ============================================================
   Phase 1I — Session sidebar + patient banner + switch flash
   Two-column app shell: persistent sidebar (260px) on the left
   plus the existing main stack on the right. Per-patient color
   is set via inline --sess-color on each row.
   ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  min-height: calc(100vh - 54px);
}
.app-main { min-width: 0; }

.app-sidebar {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
}
.sidebar-new-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.sidebar-new-btn:hover { background: #24403C; }
.sidebar-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-top: 4px;
  padding: 0 4px;
}
.sidebar-list { display: flex; flex-direction: column; gap: 4px; }

/* Sweep 5: search input + results, EOS button */
.sidebar-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12.5px;
  background: white;
  margin-top: 4px;
}
.sidebar-search:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px rgba(196,130,52,0.18); }
.sidebar-search-results {
  margin-top: 6px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  max-height: 360px;
  overflow-y: auto;
  font-size: 12px;
}
.search-result {
  background: white;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  padding: 7px 9px;
  margin-bottom: 6px;
  cursor: pointer;
}
.search-result:hover { background: var(--focus-bg); border-color: var(--focus); }
.search-result-label {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink);
}
.search-result-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.search-hit {
  margin-top: 4px;
  padding: 3px 6px;
  background: var(--rule-soft);
  border-radius: 2px;
  font-size: 11.5px;
}
.search-hit-where {
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 6px;
}
.search-hit em { background: var(--focus-bg); color: var(--ink); font-style: normal; padding: 0 2px; border-radius: 1px; }
.search-empty { color: var(--ink-faint); font-style: italic; padding: 6px; }

.sidebar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-eos-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.sidebar-eos-btn:hover { border-color: var(--focus); color: var(--focus); }
.sidebar-empty {
  padding: 14px 10px;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 12px;
  text-align: center;
}

.sess-row {
  padding: 8px 10px;
  border-radius: 4px;
  border-left: 5px solid var(--sess-color, var(--rule));
  background: color-mix(in srgb, var(--sess-color, var(--rule)) 7%, transparent);
  cursor: pointer;
  transition: background 0.12s, border-left-width 0.12s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
}
.sess-row:hover {
  background: color-mix(in srgb, var(--sess-color, var(--rule)) 15%, transparent);
}
.sess-row.active {
  background: color-mix(in srgb, var(--sess-color, var(--rule)) 22%, var(--focus-bg));
  border-left-width: 9px;
  box-shadow: inset 0 0 0 1px rgba(196, 130, 52, 0.45);
}
.sess-bubble {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sess-color, var(--ink-faint));
  color: white;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 11px;
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.sess-text { flex: 1; min-width: 0; padding-right: 20px; }
.sess-label {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sess-row.active .sess-label { font-weight: 700; }
.sess-meta {
  font-size: 10.5px;
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 1px;
}
/* Pin button. The 📌 emoji is an OS-rendered color glyph so `color:` on it
   has no effect. The on/off distinction is driven by:
   - opacity (grayscale emoji filter when off → looks faded/monochrome)
   - a filled amber pill background when on (visually unmistakable)
   - larger hit target than the glyph alone */
.sess-pin {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  padding: 0;
  border-radius: 4px;
  opacity: 0.4;
  filter: grayscale(100%);
  transition: background 0.12s, opacity 0.12s, border-color 0.12s, filter 0.12s;
}
.sess-pin:hover {
  opacity: 0.85;
  background: rgba(196, 130, 52, 0.12);
  border-color: rgba(196, 130, 52, 0.35);
}
.sess-pin.on {
  opacity: 1;
  filter: none;                 /* restore emoji's native color */
  background: var(--focus-bg);  /* warm amber fill behind the emoji */
  border-color: var(--focus);   /* solid amber border — unmistakable "on" */
  box-shadow: 0 0 0 1px rgba(196, 130, 52, 0.25);
}
.sess-pin.on:hover { background: #F5E2B8; }
.sess-row.active .sess-pin { opacity: 0.9; }

/* Demo session: violet color, "DEMO" pill next to the label, pin locked. */
.sess-row.demo .sess-bubble { background: #7B6CB6; }
.sess-row.demo { border-left-color: #7B6CB6; }
.sess-demo-badge {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 1px 5px;
  background: #7B6CB6;
  color: white;
  border-radius: 2px;
  margin-left: 6px;
  vertical-align: 1px;
}
.sess-pin.locked { cursor: default; }
.sess-pin.locked:hover { filter: brightness(0.97); }

/* Delete patient button — sits to the left of the pin, hidden until row
   hover, red on hover. Demo session has it locked (greyed, no-pointer). */
.sess-del {
  position: absolute;
  top: 4px;
  right: 36px; /* sits left of .sess-pin (right: 4px, width: 28px → 32px) */
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  padding: 0;
  border-radius: 4px;
  opacity: 0;
  filter: grayscale(100%);
  transition: opacity 0.12s, background 0.12s, border-color 0.12s, filter 0.12s;
}
.sess-row:hover .sess-del { opacity: 0.55; }
.sess-del:hover {
  opacity: 1 !important;
  filter: none;
  background: rgba(184, 92, 60, 0.14);
  border-color: rgba(184, 92, 60, 0.5);
  color: var(--btn-red, #B85C3C);
}
.sess-del.locked { cursor: not-allowed; }
.sess-row:hover .sess-del.locked { opacity: 0.18; }
.sess-del.locked:hover {
  background: transparent;
  border-color: transparent;
  filter: grayscale(100%);
}

/* Thin topbar variant — the heavyweight patient ID moved to the banner below. */
.topbar-thin { padding: 8px 18px; }
.topbar-utils { display: flex; gap: 12px; align-items: center; }
.topbar-clock {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* Prominent patient banner: dominant visual identifier. 32pt label, colored
   stripe + initials bubble + pulsing Active badge. Thick dark border flags it
   as signaling, not chrome. Never obscured by the editor overlay. */
.pt-banner {
  display: flex;
  align-items: stretch;
  /* Faint patient-color wash so the banner background carries the same
     identity hue as the switch flash + sidebar row + initials bubble.
     Falls back to plain panel cream when --sess-color isn't set yet. */
  background: color-mix(in srgb, var(--sess-color, var(--accent)) 18%, var(--panel));
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
}
.pt-stripe { width: 14px; flex: 0 0 14px; background: var(--sess-color, var(--accent)); }
.pt-body { flex: 1; padding: 14px 20px; display: flex; align-items: center; gap: 22px; min-width: 0; }
.pt-initials {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--sess-color, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  color: white;
  flex: 0 0 62px;
  letter-spacing: 0.02em;
}
.pt-name-block { flex: 1; min-width: 0; }
.pt-name {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pt-name #session-label-value { cursor: pointer; }
.pt-name .edit-icon { font-size: 12px; padding: 3px 6px; }
.pt-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.03em;
}
.pt-usage {
  margin-left: 4px;
  color: var(--accent);
  font-weight: 500;
}

/* Per-call cost chip — small inline pill we attach to versions / MDM /
   ask responses to show "this call cost N tokens / $X". */
.cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  margin-left: 6px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: none;
  vertical-align: middle;
}
.cost-chip .cost-amount { color: var(--accent); font-weight: 600; }
.pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.pt-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #A8DCAA;
  animation: pt-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes pt-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.88); }
}

/* Full-screen safety flash — vignette at 40% alpha per patient color.
   z-index above the editor overlay (1000) AND the floating panels (1100)
   so it covers EVERYTHING including sidebar during the flash. */
.switch-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: white;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease-out, visibility 0.22s;
}
.switch-flash.fire {
  visibility: visible;
  animation: switch-flash-seq 1000ms ease-out forwards;
}
@keyframes switch-flash-seq {
  0%   { opacity: 0; transform: scale(1.04); }
  10%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); visibility: hidden; }
}
/* Steady veil for fired reminders — gentle pulse, click/Esc dismiss.
   Lower opacity than the initial flash so the underlying app stays
   recognizable and the user doesn't think the UI broke. */
.switch-flash.steady {
  visibility: visible;
  opacity: 0.45;
  pointer-events: auto;
  cursor: pointer;
  animation: steady-veil-pulse 3.4s ease-in-out infinite;
}
@keyframes steady-veil-pulse {
  0%, 100% { opacity: 0.38; }
  50%      { opacity: 0.55; }
}
.flash-dismiss-hint {
  display: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 28px;
  padding: 8px 18px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.switch-flash.steady .flash-dismiss-hint { display: block; }
.switch-flash .flash-kicker {
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.switch-flash .flash-patient {
  font-family: 'Fraunces', serif;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(0, 0, 0, 0.6);
  padding: 0 24px;
}
.switch-flash .flash-initials {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 3px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 46px;
  letter-spacing: 0.02em;
}
.switch-flash .flash-sub {
  font-size: 13px;
  opacity: 0.85;
  letter-spacing: 0.08em;
  font-family: 'IBM Plex Mono', monospace;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-bottom: 10px;
}
.brand {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.brand-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateY(-2px);
}
.brand-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  font-weight: 400;
}
.top-right { display: flex; gap: 22px; align-items: center; }
.session-meta { display: flex; gap: 20px; align-items: center; font-size: 12px; }
.session-meta .label {
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  margin-right: 5px;
}
.session-meta .value { font-family: 'Fraunces', serif; font-size: 14px; font-weight: 500; }
.session-meta .value.mono { font-family: 'IBM Plex Mono', monospace; }
.session-label-group { display: inline-flex; align-items: center; gap: 5px; }
.session-label-input {
  font: inherit;
  padding: 0 4px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--panel);
  min-width: 140px;
}
.edit-icon {
  font-size: 10px;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 2px 4px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  line-height: 1;
  user-select: none;
}
.edit-icon:hover { color: var(--ink); border-color: var(--ink-soft); }
.hide-tags-toggle {
  padding: 6px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hide-tags-toggle::before { content: '◉'; font-size: 9px; color: var(--accent); }
.hide-tags-toggle.active::before { color: var(--ink-faint); }

.workflow-bar {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workflow-row { display: grid; gap: 7px; }
.workflow-row.row1 { grid-template-columns: repeat(6, 1fr); }
.workflow-row.row2 { grid-template-columns: repeat(5, 1fr); }
.wf-btn {
  position: relative;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid;
  transition: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 38px;
  justify-content: center;
  user-select: none;
}
.wf-btn .label-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.wf-btn .label-text { flex: 1; line-height: 1.2; }
.wf-btn .subcheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  font-size: 10px;
  flex-shrink: 0;
  opacity: 0.9;
  cursor: pointer;
}
.wf-btn .subcheck.checked::after { content: '✓'; font-weight: 600; line-height: 1; }
.wf-btn .sublabel {
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
  opacity: 0.75;
  text-transform: uppercase;
}
.workflow-bar { position: relative; }

/* Q6 edit toggle — pill on the corner of the workflow bar, always visible. */
.wf-edit-toggle {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 3px 12px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  z-index: 5;
}
.wf-edit-toggle:hover { border-color: var(--focus); color: var(--focus); }
.workflow-bar.edit-mode .wf-edit-toggle {
  background: var(--focus);
  color: white;
  border-color: var(--focus);
}
.wf-counter {
  position: absolute;
  bottom: -10px;
  right: 14px;
  background: var(--panel);
  border: 1px solid var(--focus);
  padding: 2px 10px;
  border-radius: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--focus);
  letter-spacing: 0.06em;
  z-index: 5;
}

/* Edit-mode affordances on each button */
.workflow-bar.edit-mode .wf-btn {
  cursor: grab;
  box-shadow: 0 0 0 2px rgba(196, 130, 52, 0.3) !important;
}
.workflow-bar.edit-mode .wf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 0 0 2px var(--focus) !important;
}
.workflow-bar.edit-mode .wf-btn:active { cursor: grabbing; }
.workflow-bar.edit-mode .wf-btn.dragging { opacity: 0.5; }
.workflow-bar.edit-mode .wf-btn.drag-over::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px dashed var(--focus);
  border-radius: 5px;
  pointer-events: none;
}
.wf-btn .grip {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: -2px;
  pointer-events: none;
}
.wf-btn .wf-delete-x {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--btn-red);
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  z-index: 6;
  border: 2px solid var(--panel);
  user-select: none;
}
.wf-btn input.wf-rename {
  background: white;
  border: 1px solid var(--focus);
  border-radius: 3px;
  padding: 2px 5px;
  font-family: inherit;
  font-size: 11.5px;
  text-align: center;
  width: 100%;
  color: var(--ink);
  outline: none;
}
.wf-add {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 2px dashed var(--rule);
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  min-height: 44px;
  font-family: inherit;
}
.wf-add:hover { border-color: var(--focus); color: var(--focus); }
.wf-add.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--rule);
  color: var(--ink-faint);
}

.wf-btn.red { background: var(--btn-red-bg); color: var(--btn-red); border-color: var(--btn-red); }
.wf-btn.light-green {
  background: var(--btn-lt-green-bg);
  color: #4A6B3D;
  border-color: var(--btn-lt-green);
}
.wf-btn.dark-green {
  background: var(--btn-dk-green-bg);
  color: #1B3A18;
  border-color: var(--btn-dk-green);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(47, 90, 42, 0.25);
}
.wf-btn .housekeeping-items {
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.03em;
  opacity: 0.8;
  text-transform: none;
  line-height: 1.3;
}

.phase-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 4px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.phase-divider::before, .phase-divider::after { content: ''; flex: 1; height: 1px; }
.phase-divider.prev { color: var(--phase-prev-accent); }
.phase-divider.prev::before, .phase-divider.prev::after { background: var(--phase-prev-rule); }
.phase-divider.adm { color: var(--phase-adm-accent); }
.phase-divider.adm::before, .phase-divider.adm::after { background: var(--phase-adm-rule); }
.phase-divider:first-child { margin-top: 0; }

.main {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 14px;
  align-items: start;
}

.input-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 11px 13px;
  margin-bottom: 10px;
}
.input-card.previous { background: var(--phase-prev-bg); border-color: var(--phase-prev-rule); }
.input-card.admission { background: var(--phase-adm-bg); border-color: var(--phase-adm-rule); }
.input-card.admission.filled { border-left: 3px solid var(--phase-adm-accent); padding-left: 12px; }
.input-card.previous.filled { border-left: 3px solid var(--phase-prev-accent); padding-left: 12px; }

.input-card.priority {
  border-color: #C48234;
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(196, 130, 52, 0.15);
  padding: 10px 12px;
}
.input-card.priority.filled { border-left: 3px solid #C48234; padding-left: 12px; }
.input-card.priority .card-head {
  background: #F5E4BF;
  margin: -10px -12px 10px -12px;
  padding: 9px 12px;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid rgba(196, 130, 52, 0.35);
}
.priority-star {
  color: #C48234;
  font-size: 13px;
  line-height: 1;
  margin-right: 2px;
}

/* Right column: output pane + priority cards + redactor slot stacked. */
#priority-cards { margin-top: 14px; }
#redactor-slot { margin-top: 14px; }
#priority-cards:empty, #redactor-slot:empty { display: none; margin-top: 0; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card-title .status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
}
.admission .status-icon.filled { background: var(--phase-adm-accent); color: white; }
.previous .status-icon.filled { background: var(--phase-prev-accent); color: white; }
.status-icon.empty { background: transparent; border: 1.5px dashed var(--ink-faint); color: var(--ink-faint); }
.card-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.undo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.undo-btn.active { color: var(--ink-soft); border-color: var(--ink-soft); }
.undo-btn.disabled { opacity: 0.35; cursor: not-allowed; }

.tag-rows {
  margin-top: 6px;
  margin-bottom: 10px;
  padding: 6px 0 8px;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.hide-tags .tag-rows { display: none; }
.tag-row { display: flex; gap: 4px; flex-wrap: nowrap; }
.tag-btn {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--panel);
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.tag-btn:disabled { opacity: 0.55; cursor: default; }
.tag-row.source-row .tag-btn {
  padding: 8px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-width: 1.5px;
}
.tag-row.source-row .tag-btn.imaging { background: var(--st-imaging); border-color: var(--st-imaging-border); color: #3A4E62; }
.tag-row.source-row .tag-btn.labs { background: var(--st-labs); border-color: var(--st-labs-border); color: #6A5420; }
.tag-row.source-row .tag-btn.dcsum { background: var(--st-dc-summary); border-color: var(--st-dc-summary-border); color: #4F4061; }
.tag-row.source-row .tag-btn.path { background: var(--st-pathology); border-color: var(--st-pathology-border); color: #6B3D3D; }
.tag-row.source-row .tag-btn.ptphoto { background: var(--st-ptphoto); border-color: var(--st-ptphoto-border); color: #4A5D3D; }
.tag-row.source-row .tag-btn.ednote { background: var(--st-ednote); border-color: var(--st-ednote-border); color: #2E5A54; }
.tag-row.source-row .tag-btn.edverbal { background: var(--st-edverbal); border-color: var(--st-edverbal-border); color: #6B4528; }

.paste-log { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.paste-log:empty::before {
  content: 'no pastes yet — drop, paste, or type below';
  color: var(--ink-faint);
  font-size: 11px;
  font-style: italic;
  font-family: 'Fraunces', serif;
  padding: 4px 0;
}
.paste-event {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 9px;
  padding: 6px 9px;
  background: #FBF9F1;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  align-items: start;
  font-size: 11.5px;
  position: relative;
}
.previous .paste-event { background: #F4F5F7; border-color: var(--phase-prev-rule); }
.paste-event .ts {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.paste-event .ts .abs { font-weight: 500; color: var(--ink); display: block; }
.paste-event .ts .rel { color: var(--ink-faint); font-size: 9px; }
.paste-event .ts .src-icon {
  display: inline-block;
  font-size: 9px;
  color: var(--ink-faint);
  margin-top: 1px;
}
.paste-event .preview {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.paste-event .del {
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  padding: 0 2px;
}
.paste-event .del:hover { opacity: 1; color: var(--btn-red); }

.paste-event.focused {
  /* Outline (not border) so the focus indicator survives even on tagged
     pastes whose .st-* classes override border + background. */
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px rgba(196, 130, 52, 0.18);
  position: relative;
  z-index: 2;
}
.paste-event.focused .del { opacity: 0.9; color: var(--focus); }

/* Sweep 2: per-paste exclude-from-Claude state. Visually mutes the paste
   (greyed out, strikethrough preview text) so it's clear at a glance that
   this paste won't reach Claude on the next regen. */
.paste-event.excluded {
  opacity: 0.55;
  background: #EDE7D7;
  border-style: dashed;
}
.paste-event.excluded .preview {
  text-decoration: line-through;
  text-decoration-color: rgba(176, 88, 53, 0.5);
}
.paste-event.excluded .src-icon { opacity: 0.4; }
.paste-excluded-badge {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--btn-red);
  background: var(--btn-red-bg);
  padding: 2px 6px;
  border-radius: 2px;
  margin-top: 4px;
}

/* Vertical stack of per-paste action buttons in the right gutter of the row. */
.paste-event-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
}
.paste-excl {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  position: relative;
  width: 22px;
  height: 20px;
}
.paste-excl:hover { background: var(--btn-red-bg); color: var(--btn-red); border-color: var(--btn-red); }
.paste-excl.on {
  background: var(--btn-red-bg);
  color: var(--btn-red);
  border-color: var(--btn-red);
}
/* Strike-through overlay drawn via CSS so the ✉ glyph reads as "no email" */
.paste-excl::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 1.5px;
  background: var(--ink-soft);
  transform: rotate(-22deg);
  opacity: 0;
  pointer-events: none;
}
.paste-excl.on::after {
  opacity: 1;
  background: var(--btn-red);
}

.paste-event.st-imaging { background: var(--st-imaging); border-color: var(--st-imaging-border); }
.paste-event.st-labs { background: var(--st-labs); border-color: var(--st-labs-border); }
.paste-event.st-dcsum { background: var(--st-dc-summary); border-color: var(--st-dc-summary-border); }
.paste-event.st-path { background: var(--st-pathology); border-color: var(--st-pathology-border); }
.paste-event.st-ptphoto { background: var(--st-ptphoto); border-color: var(--st-ptphoto-border); }
.paste-event.st-ednote { background: var(--st-ednote); border-color: var(--st-ednote-border); }
.paste-event.st-edverbal { background: var(--st-edverbal); border-color: var(--st-edverbal-border); }

.paste-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  padding: 1px 5px;
  background: var(--panel);
  border: 1px solid var(--ink-faint);
  border-radius: 2px;
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 500;
}
.paste-tag.source { background: transparent; border-style: dashed; font-weight: 600; }
.paste-tag .tag-x {
  cursor: pointer;
  opacity: 0.55;
  font-size: 10px;
  line-height: 1;
  padding-left: 1px;
}
.paste-tag .tag-x:hover { opacity: 1; color: var(--btn-red); }

.paste-annotation {
  margin-top: 4px;
  padding: 3px 6px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 10.5px;
  font-style: italic;
  color: var(--ink-soft);
  font-family: 'Fraunces', serif;
}
.paste-annotation.active { border-color: var(--focus); background: #FFF; padding: 0; }
.paste-annotation-input {
  width: 100%;
  padding: 3px 6px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-style: italic;
  color: var(--ink);
  font-family: 'Fraunces', serif;
}

.tag-btn.inline-other-input {
  font-family: inherit;
  font-style: italic;
  text-align: left;
  padding: 4px 6px;
  color: var(--ink);
}

.redactor-card {
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  background: #F3F5EF;
  border-radius: 6px;
  padding: 11px 13px;
  margin-bottom: 14px;
}
.redactor-card .card-title { color: var(--accent); }
.redactor-card .card-title::before {
  content: '🛡';
  font-size: 13px;
  margin-right: 2px;
}
.redactor-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border: 1px solid;
}
.redactor-status-pill.ok { background: var(--btn-dk-green-bg); color: var(--btn-dk-green); border-color: var(--btn-dk-green); }
.redactor-status-pill.warn { background: var(--btn-red-bg); color: var(--btn-red); border-color: var(--btn-red); }
.redactor-status-pill.ok::before { content: '●'; font-size: 10px; }
.redactor-status-pill.warn::before { content: '⚠'; font-size: 10px; }

.redactor-paths {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--rule);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.redactor-paths code {
  font-family: inherit;
  color: var(--ink-soft);
}

.redactor-setup-hint {
  padding: 10px 12px;
  background: var(--btn-red-bg);
  border: 1px solid var(--btn-red);
  border-radius: 4px;
  color: var(--btn-red);
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.redactor-setup-hint code {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--panel);
  padding: 1px 4px;
  border-radius: 2px;
  color: var(--ink);
}

.drop-zone.redactor-intake-drop {
  border-color: var(--accent);
  color: var(--accent);
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(47,79,74,0.05) 6px 12px);
}
.drop-zone.redactor-intake-drop.drag-over {
  background: #E4EDE3;
  border-color: var(--btn-dk-green);
}

.entry-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.drop-zone {
  padding: 14px 10px;
  border: 1.5px dashed var(--rule);
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,0.015) 6px 12px);
  border-radius: 4px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-faint);
  font-family: 'Fraunces', serif;
  font-style: italic;
  cursor: text;
}
.drop-zone::before {
  content: '↓';
  display: block;
  font-size: 16px;
  margin-bottom: 2px;
  font-style: normal;
  opacity: 0.5;
}
.drop-zone.drag-over {
  border-color: var(--accent);
  background: #F0EBDB;
  color: var(--accent);
}
.drop-zone.drop-error {
  border-color: var(--btn-red);
  color: var(--btn-red);
  background: var(--btn-red-bg);
}

.type-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: start; }
.type-btn-stack { display: flex; flex-direction: column; gap: 4px; }
.type-box {
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink);
  min-height: 30px;
  resize: vertical;
  width: 100%;
}
.type-box-priority {
  min-height: 120px;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 12px;
  background: #FFFEF8;
}
.type-box:empty::before {
  content: 'click to type a note…';
  color: var(--ink-faint);
  font-style: italic;
}
.save-btn {
  padding: 0 14px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.02em;
  min-height: 26px;
}
.save-btn:hover { background: var(--accent); color: white; }
.save-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

.discard-btn {
  padding: 0 14px;
  border: 1px solid #B85C3C;
  background: transparent;
  color: #B85C3C;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.02em;
  min-height: 26px;
}
.discard-btn:hover { background: #B85C3C; color: white; }
.discard-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

.output-pane {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
.section-tabs {
  display: flex;
  padding: 0 6px;
  border-bottom: 1px solid var(--rule);
  background: #F9F5E8;
  border-radius: 6px 6px 0 0;
}
.section-tab {
  padding: 10px 14px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
}
.section-tab .tab-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.section-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--panel);
}
.section-tab.active .tab-num { color: var(--accent); }
.section-tab.disabled { opacity: 0.45; cursor: not-allowed; }
.section-tab .kbd {
  font-size: 8.5px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink-faint);
  font-weight: 400;
}

.version-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: flex-end;
  background: #FBF9F1;
  flex-wrap: wrap;
}
.version-tab {
  padding: 5px 10px 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-transform: uppercase;
}
.version-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}
.version-tab .time {
  display: block;
  font-size: 8.5px;
  font-weight: 400;
  color: var(--ink-faint);
  margin-top: 1px;
  letter-spacing: 0.02em;
}
.version-tabs .empty-hint {
  padding: 5px 4px 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.changes-banner {
  background: linear-gradient(to right, #FDF5E6, #FBF9F1);
  border-bottom: 1px solid var(--rule);
  padding: 9px 14px;
  font-size: 11px;
}
.changes-banner .title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7B3F00;
  margin-bottom: 3px;
}

.note-body {
  padding: 14px 18px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  min-height: 220px;
  position: relative;
}
.note-body:empty::before {
  content: 'No note generated yet — click Update Note below.';
  color: var(--ink-faint);
  font-style: italic;
  font-family: 'Fraunces', serif;
}
.note-body strong { color: var(--ink); font-weight: 600; }
.note-body .placeholder-line {
  color: var(--ink-faint);
  font-style: italic;
  font-size: 11px;
  padding: 3px 7px;
  background: var(--rule-soft);
  border-radius: 3px;
  display: inline-block;
  margin: 2px 0;
}
.note-body .empty-parens {
  color: var(--btn-red);
  font-weight: 600;
}

.action-bar {
  border-top: 1px solid var(--rule);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FBF9F1;
  border-radius: 0 0 6px 6px;
  gap: 10px;
}
.update-notice {
  font-size: 10.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 7px;
}
.update-notice.pending { color: var(--btn-red); }
.update-notice .pulse {
  width: 7px;
  height: 7px;
  background: var(--btn-red);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(176,88,53,0.18);
  display: none;
}
.update-notice.pending .pulse { display: inline-block; }
.btn {
  padding: 6px 13px;
  border-radius: 4px;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); }

/* Flag workflow panel */
.flag-panel {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
  font-size: 12px;
  color: var(--ink);
}
.flag-panel-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7B3F00;
  margin-bottom: 5px;
}
.flag-panel-hint {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 12px;
  font-family: 'Fraunces', serif;
  font-style: italic;
}
.flag-block {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #FDFBF4;
}
.flag-block-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.flag-id {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: #7B3F00;
  font-size: 11px;
}
.flag-type {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace;
}
.flag-description {
  font-size: 11.5px;
  color: var(--ink);
  margin-bottom: 7px;
  line-height: 1.45;
}
.flag-options { display: flex; flex-direction: column; gap: 3px; }
.flag-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.4;
}
.flag-option:hover { background: var(--rule-soft); }
.flag-option input[type="radio"] { margin-top: 3px; accent-color: var(--accent); }
.flag-option .letter {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--accent);
  margin-right: 2px;
}
.flag-custom {
  margin-top: 5px;
  padding: 4px 7px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font: inherit;
  font-size: 11px;
  width: 100%;
}
.flag-submit-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}

/* Section 4 / MDM panel */
.s4-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  flex: 1;
  overflow-y: auto;
  min-height: 240px;
}
.s4-main, .s4-coding {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 13px 15px;
}
.s4-heading {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.s4-body {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.s4-body strong { font-weight: 600; }
.coding-panel-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.estimate-block {
  padding: 9px 11px;
  background: #FBF9F1;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  margin-bottom: 3px;
}
.estimate-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.estimate-level {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.estimate-justify {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 4px;
}
.delta-arrow {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  color: #7B3F00;
  font-size: 14px;
  line-height: 1;
  padding: 3px 0;
  font-weight: 600;
}
.delta-arrow.same { color: var(--ink-faint); font-size: 11px; }
.s4-regen-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 8px;
}
.s4-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 20px;
  font-family: 'Fraunces', serif;
  color: var(--ink-soft);
}
.s4-empty .headline { font-size: 13px; font-style: italic; margin-bottom: 12px; }
.s4-empty .sub { font-size: 11px; color: var(--ink-faint); margin-top: 10px; font-family: inherit; }

/* Generation overlay */
.generating-overlay {
  position: absolute;
  inset: 0;
  background: rgba(247, 244, 236, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  font-size: 12px;
  color: var(--accent);
  font-family: 'Fraunces', serif;
  font-style: italic;
  letter-spacing: 0.02em;
  gap: 8px;
}
.generating-overlay .spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 16px;
  background: var(--ink);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  max-width: 320px;
}
.toast.show { opacity: 0.92; }
.toast.error { background: var(--btn-red); }

/* ============================================================
   Feedback modal + right-click context menu
   ============================================================ */
.fb-modal {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(28, 35, 33, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.fb-modal[hidden] { display: none; }
.fb-card {
  width: 540px;
  max-width: 92vw;
  max-height: 88vh;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.fb-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
}
.fb-close {
  background: transparent; border: 1px solid var(--rule);
  padding: 3px 9px; border-radius: 3px; cursor: pointer;
  color: var(--ink-soft); font-size: 12px;
}
.fb-categories {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 6px;
}
.fb-cat {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.fb-cat:hover { border-color: var(--focus); background: var(--focus-bg); }
.fb-cat.active {
  border-color: var(--focus);
  background: var(--focus-bg);
  box-shadow: 0 0 0 2px rgba(196, 130, 52, 0.18);
}
.fb-cat-icon {
  grid-row: 1 / 3;
  font-size: 22px;
  align-self: center;
}
.fb-cat-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.fb-cat-sub {
  font-size: 11px;
  color: var(--ink-soft);
}
.fb-text {
  margin: 6px 16px 8px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 110px;
  background: white;
}
.fb-text:focus { outline: none; border-color: var(--focus); }
.fb-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 14px;
}
.fb-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* Right-click context menu */
.fb-ctx {
  position: fixed;
  z-index: 9600;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
.fb-ctx[hidden] { display: none; }
.fb-ctx-item {
  background: transparent;
  border: none;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  border-radius: 3px;
}
.fb-ctx-item:hover { background: var(--focus-bg); color: var(--focus); }

/* ============================================================
   End-of-shift modal + Quick-phrases modal (Sweep 5 #24, #7)
   ============================================================ */
.eos-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(28, 35, 33, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.eos-card {
  width: 720px;
  max-width: 92vw;
  max-height: 88vh;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.eos-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.eos-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
}
.eos-close {
  background: transparent; border: 1px solid var(--rule);
  padding: 3px 9px; border-radius: 3px; cursor: pointer;
  color: var(--ink-soft); font-size: 12px;
}
.eos-text {
  flex: 1;
  margin: 14px 18px;
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  line-height: 1.55;
  resize: none;
  background: white;
  white-space: pre-wrap;
  min-height: 280px;
}
.eos-actions {
  display: flex; gap: 8px; padding: 10px 18px 14px;
}
.qp-list {
  padding: 10px 18px 14px;
  overflow-y: auto;
  max-height: 50vh;
}
.qp-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: white;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  margin-bottom: 6px;
}
.qp-abbr {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--accent);
  font-size: 13px;
}
.qp-text {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  color: var(--ink);
}
.qp-delete {
  background: transparent;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
}
.qp-delete:hover { color: var(--btn-red); }

/* ============================================================
   Inline Explain popup (Sweep 5 #9)
   ============================================================ */
.explain-popup {
  position: fixed;
  z-index: 1300;
  width: 380px;
  max-height: 70vh;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(28,35,33,0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}
.explain-popup[hidden] { display: none; }
.explain-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(47, 79, 74, 0.08);
  border-bottom: 1px solid var(--rule);
  cursor: grab;
}
.explain-popup-header:active { cursor: grabbing; }
.explain-grip { color: var(--ink-faint); letter-spacing: -3px; font-size: 12px; }
.explain-title { flex: 1; font-weight: 500; color: var(--accent); font-size: 12.5px; }
.explain-close {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11px;
}
.explain-popup-body {
  padding: 12px 14px;
  overflow-y: auto;
  font-family: 'Fraunces', serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  user-select: text;
}
.explain-quote {
  font-style: italic;
  color: var(--ink-soft);
  border-left: 3px solid var(--focus);
  padding-left: 10px;
  margin-bottom: 10px;
  font-size: 12.5px;
}
.explain-answer { white-space: pre-wrap; }

/* ============================================================
   Reminder timers panel — floating, collapsible (Sweep 4 #17)
   ============================================================ */
.rt-panel {
  position: fixed;
  top: 90px;
  right: 16px;
  width: 240px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(28, 35, 33, 0.14);
  z-index: 1090;
  user-select: none;
  font-family: 'IBM Plex Sans', sans-serif;
  overflow: hidden;
}
.rt-panel.collapsed .rt-body { display: none; }
.rt-panel.collapsed .rt-toggle { transform: rotate(180deg); }
.rt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #F9F5E8;
  border-bottom: 1px solid var(--rule);
  cursor: grab;
}
.rt-header:active { cursor: grabbing; }
.rt-grip { color: var(--ink-faint); letter-spacing: -3px; font-size: 12px; }
.rt-title { flex: 1; font-weight: 500; color: var(--ink); font-size: 12.5px; }
.rt-count {
  background: var(--accent);
  color: white;
  border-radius: 9px;
  padding: 1px 7px;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
}
.rt-count.zero { background: var(--rule); color: var(--ink-faint); }
.rt-btn-mini {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 2px 7px;
  font-size: 10.5px;
  border-radius: 3px;
  cursor: pointer;
}
.rt-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rt-form { display: flex; flex-direction: column; gap: 6px; }
.rt-form input {
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: inherit;
  font-size: 12.5px;
  background: white;
}
.rt-form input:focus { outline: none; border-color: var(--focus); }
.rt-form-row { display: flex; gap: 6px; align-items: center; }
.rt-form-row .btn-primary { padding: 6px 14px; font-size: 12px; flex: 1; }
.rt-form-or { gap: 8px; }
.rt-form-or input[type="datetime-local"] {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  padding: 3px 4px;
  font-family: inherit;
}
.rt-list { display: flex; flex-direction: column; gap: 5px; max-height: 220px; overflow-y: auto; }
.rt-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: white;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--focus);
  border-radius: 3px;
}
.rt-item .text { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-item .due {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.rt-item .delete {
  background: transparent;
  border: none;
  color: var(--ink-faint);
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
}
.rt-item .delete:hover { color: var(--btn-red); }
.rt-item.fired { opacity: 0.55; border-left-color: var(--btn-dk-green); }

/* ============================================================
   Lock overlay (Sweep 4 #27) — covers everything when idle
   ============================================================ */
.lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(28, 35, 33, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lock-overlay[hidden] { display: none; }
.lock-card {
  background: var(--panel);
  padding: 36px 48px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  max-width: 360px;
}
.lock-card .lock-icon { font-size: 56px; }
.lock-card .lock-title {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}
.lock-card .lock-sub {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 260px;
}
.lock-card .btn-primary { padding: 10px 28px; font-size: 14px; }

/* ============================================================
   Boat-slip dock for floating panels
   ============================================================ */
.dock {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 1080;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}
.dock.collapsed .dock-slots,
.dock.collapsed .dock-drop-zone { display: none; }
.dock.collapsed .dock-collapse { transform: rotate(180deg); }

.dock-drop-zone {
  background: var(--panel);
  border: 2px dashed var(--rule);
  border-radius: 6px;
  padding: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  width: 100%;       /* matches dock width — same as panel slots below */
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dock-drop-zone.hover {
  background: var(--focus-bg);
  border-color: var(--focus);
  color: var(--focus);
  border-style: solid;
}

.dock-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Whole-dock grab handle — drag to move the entire dock as one unit.
   Sits at the TOP of the dock (titlebar position) so it's the obvious
   grab target. Uses the accent color and a subtle hover lift. */
.dock-grab {
  background: var(--accent);
  color: white;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 10px rgba(28, 35, 33, 0.18);
  transition: filter 0.12s, transform 0.12s;
}
.dock-grab:hover { filter: brightness(1.07); }
.dock-grab:active { cursor: grabbing; transform: scale(0.995); }
.dock-grab-grip {
  letter-spacing: -3px;
  opacity: 0.7;
  font-size: 14px;
}
.dock-grab-label { flex: 1; }
.dock-collapse {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 1px 7px;
  font-size: 10.5px;
  border-radius: 3px;
  cursor: pointer;
}

/* When a panel is docked, override its position to flow inside .dock-slots
   and force a uniform width so the slips look like a row. The height is
   left to each panel's natural body but capped via max-height so very
   tall panels (like clipboard with 12 items) don't overflow the dock. */
.docked {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 280px !important;
  max-width: 280px !important;
  max-height: 240px !important;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
.is-dragging { opacity: 0.85; pointer-events: none; }

/* ============================================================
   Reference launcher panel — floating dock for OpenEvidence /
   UpToDate / custom URLs. Each click opens that URL in a popup
   browser window (window.open with sized features) so the user has
   the reference visible alongside Scribe without iframe issues.
   ============================================================ */
.ref-launcher {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 240px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 35, 33, 0.18);
  font-family: 'IBM Plex Sans', sans-serif;
  z-index: 1100;
  overflow: hidden;
  user-select: none;
}
.ref-launcher.collapsed .ref-launcher-body { display: none; }
.ref-launcher.collapsed .ref-launcher-toggle { transform: rotate(180deg); }
.ref-launcher-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #F9F5E8;
  border-bottom: 1px solid var(--rule);
  cursor: grab;
}
.ref-launcher-header:active { cursor: grabbing; }
.ref-launcher-grip {
  color: var(--ink-faint);
  letter-spacing: -3px;
  font-size: 12px;
}
.ref-launcher-title {
  flex: 1;
  font-weight: 500;
  color: var(--ink);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.ref-launcher-btn-mini {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 2px 7px;
  font-size: 10.5px;
  border-radius: 3px;
  cursor: pointer;
}
.ref-launcher-btn-mini:hover { background: var(--focus-bg); color: var(--focus); border-color: var(--focus); }
.ref-launcher-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ref-launcher-list { display: flex; flex-direction: column; gap: 4px; }
.ref-launcher-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  text-align: left;
  position: relative;
}
.ref-launcher-item:hover { background: var(--focus-bg); border-color: var(--focus); }
.ref-launcher-item .icon { font-size: 14px; flex: 0 0 auto; }
.ref-launcher-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-launcher-item .domain {
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  flex: 0 0 auto;
}
.ref-launcher-item .delete {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--btn-red);
  padding: 0 4px;
  font-size: 12px;
  line-height: 1;
}
.ref-launcher-item.custom:hover .delete { display: inline; }
.ref-launcher-item.custom:hover .domain { display: none; }

.ref-launcher-add {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: 4px;
  color: var(--ink-faint);
  font-size: 11.5px;
  cursor: pointer;
  margin-top: 2px;
  font-family: inherit;
}
.ref-launcher-add:hover { color: var(--accent); border-color: var(--accent); }

.ref-launcher-form {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-top: 4px;
}
.ref-launcher-form.open { display: flex; }
.ref-launcher-form input {
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  background: white;
}
.ref-launcher-form input:focus { outline: none; border-color: var(--focus); }
.ref-launcher-form-row { display: flex; gap: 5px; }
.ref-launcher-form-row button {
  flex: 1;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  border: 1px solid var(--rule);
}
.ref-launcher-form-cancel { background: white; color: var(--ink-soft); }
.ref-launcher-form-save { background: var(--accent); color: white; border-color: var(--accent); }

/* Popup-size settings (gear button → form). */
.ref-launcher-settings {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-top: 4px;
}
.ref-launcher-settings.open { display: flex; }
.ref-launcher-settings-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ref-launcher-settings-row {
  display: flex;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.ref-launcher-settings-row label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ref-launcher-settings-row input,
.ref-launcher-settings-row select {
  padding: 5px 7px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  background: white;
}
.ref-launcher-settings-row input:focus,
.ref-launcher-settings-row select:focus { outline: none; border-color: var(--focus); }

/* ============================================================
   Sweep 3 — Free Text scratch tab
   ============================================================ */
.section-tab.scratch-tab {
  margin-left: auto;
  background: rgba(196, 130, 52, 0.08);
  color: var(--focus);
}
.section-tab.scratch-tab.active {
  background: var(--focus-bg);
  color: var(--focus);
}
.section-tab.ask-tab {
  background: rgba(47, 79, 74, 0.08);
  color: var(--accent);
}
.section-tab.ask-tab.active {
  background: rgba(47, 79, 74, 0.18);
  color: var(--accent);
}
.section-tab.saved-tab {
  background: rgba(47, 79, 74, 0.05);
  color: var(--accent);
  position: relative;
  padding-right: 22px;
}
.section-tab.saved-tab.active {
  background: rgba(47, 79, 74, 0.18);
  color: var(--accent);
}
.section-tab .tab-close {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  font-size: 10px;
  color: var(--ink-faint);
  padding: 1px 3px;
  border-radius: 2px;
}
.section-tab.saved-tab:hover .tab-close { display: inline; }
.section-tab .tab-close:hover { color: var(--btn-red); background: var(--btn-red-bg); }

/* ── Ask panel ── */
.ask-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.ask-saved-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(47, 79, 74, 0.08);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.ask-saved-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
  flex: 1;
  color: var(--ink);
}
.ask-saved-actions { display: flex; gap: 6px; }
.ask-form { display: flex; flex-direction: column; gap: 10px; }
.ask-persona-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ask-persona-row label {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ask-persona-row select {
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: white;
  font-family: inherit;
  font-size: 12.5px;
}
.ask-persona-custom {
  flex: 1;
  min-width: 200px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: inherit;
  font-size: 12.5px;
  background: white;
  display: none;
}
.ask-persona-custom.show { display: inline-block; }
.ask-textarea {
  width: 100%;
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: 'Fraunces', serif;
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
  background: white;
}
.ask-textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px rgba(196,130,52,0.18); }
.ask-actions-row { display: flex; gap: 8px; }
.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  font-size: 13px;
}
.btn-primary:hover { background: #24403C; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 7px 14px;
  border-radius: 4px;
  font-family: inherit;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-soft);
}
.btn-ghost:hover { border-color: var(--focus); color: var(--focus); }

/* ── Streaming response card ── */
.ask-response {
  margin-top: 6px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: 'Fraunces', serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.ask-response.streaming { border-left: 3px solid var(--focus); }
.ask-response-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ask-response-q { margin-bottom: 8px; color: var(--ink-soft); }
.ask-response-a { white-space: pre-wrap; }
.ask-response-actions { display: flex; gap: 6px; margin-top: 12px; }

/* ── History panel ── */
.ask-history-panel {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--rule-soft);
  border-radius: 4px;
}
.ask-history-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.ask-history-empty {
  color: var(--ink-faint);
  font-style: italic;
  font-size: 12px;
}
.ask-history-item {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 8px 12px;
  margin-bottom: 6px;
  cursor: pointer;
}
.ask-history-item:hover { background: var(--focus-bg); border-color: var(--focus); }
.ask-history-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ask-history-q {
  font-family: 'Fraunces', serif;
  font-size: 12.5px;
  color: var(--ink);
  margin-top: 3px;
}
.ask-history-actions { display: flex; gap: 6px; margin-top: 6px; }
.ask-history-actions button { padding: 3px 9px; font-size: 11px; }

.scratch-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scratch-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.scratch-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 1;
}
.scratch-status.ok { color: var(--btn-dk-green); }
.scratch-status.pending { color: var(--focus); }
.scratch-btn {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 5px 10px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.scratch-btn:hover { border-color: var(--focus); color: var(--focus); }
.scratch-version-select {
  font-family: inherit;
  font-size: 11.5px;
  padding: 5px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: white;
  color: var(--ink-soft);
  max-width: 260px;
}
.scratch-textarea {
  width: 100%;
  min-height: 320px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: white;
  font-family: 'Fraunces', serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
}
.scratch-textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(196, 130, 52, 0.18);
}

/* Rich-text scratch editor (Sweep 6 #1 / Option B):
   contenteditable div replacing the plain textarea. Toolbar adds B/I/U +
   color + font-size + clear-formatting. Storage = HTML; typer / clipboard
   exports strip back to plain text. */
.scratch-toolbar { flex-wrap: wrap; }
.scratch-rt-sep {
  color: var(--ink-faint);
  font-size: 14px;
  padding: 0 4px;
  user-select: none;
}
.scratch-rt-btn {
  min-width: 30px;
  padding: 4px 8px;
  font-size: 12px;
  text-align: center;
}
.scratch-rt-btn b, .scratch-rt-btn i, .scratch-rt-btn u { font-size: 13px; }
.scratch-rt-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
}
.scratch-rt-size {
  font-family: inherit;
  font-size: 11.5px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: white;
  color: var(--ink-soft);
}
.scratch-rt-editor {
  width: 100%;
  min-height: 320px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: white;
  font-family: 'Fraunces', serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  overflow-y: auto;
  cursor: text;
}
.scratch-rt-editor:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(196, 130, 52, 0.18);
}
/* Empty-state placeholder via data-placeholder attribute. :empty would only
   match before the first newline div is inserted; using :not([data-content])
   plus the empty:: pseudo-element is reliable for contenteditable. */
.scratch-rt-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  pointer-events: none;
  font-style: italic;
}

/* Hover preview tooltip for input-card pastes — floating, mouse-follow,
   shows full latest content. Generous max-width + max-height so longer
   pastes are readable; scrolls inside the tooltip if very long. */
.paste-preview-tooltip {
  position: fixed;
  z-index: 1500;
  max-width: 480px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px 14px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(28, 35, 33, 0.22);
  font-family: 'Fraunces', serif;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  pointer-events: none;
}
/* Hold Shift to pin: tooltip stops following cursor and accepts mouse input
   so the user can scroll inside long pastes. Release Shift or press Esc or
   click elsewhere to dismiss. */
.paste-preview-tooltip.pinned {
  pointer-events: auto;
  max-width: 640px;
  max-height: 80vh;
  border-color: var(--focus, #C48234);
  box-shadow: 0 12px 36px rgba(28, 35, 33, 0.32);
}
.paste-preview-tooltip.pinned::before {
  content: "📌 Pinned — Esc or click outside to dismiss";
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--focus, #C48234);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--rule);
}

/* ============================================================
   Phase 1E — Full-screen editor overlay
   ============================================================ */

.editor-overlay {
  position: fixed;
  /* Phase 1I: insets leave room for the sidebar (left) and the top bar +
     patient banner + workflow bar (top) so those elements stay visible
     while the editor is open. JS refines the exact values on open via
     the --editor-inset-* custom properties. */
  top: var(--editor-inset-top, 0);
  left: var(--editor-inset-left, 0);
  right: var(--editor-inset-right, 0);
  bottom: var(--editor-inset-bottom, 0);
  background: var(--bg);
  z-index: 1000;
  display: none;
  flex-direction: column;
}
.editor-overlay.open { display: flex; }

/* The section editor's window — flex column wrapping header/main/footer.
   Default (fullscreen) fills the overlay; floating mode reboxes it. */
.editor-window {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Floating mode for the section editor — shrinks the window to a centered
   8.5×11-proportioned panel over a dimmed backdrop. The header acts as a
   drag handle; JS sets position:fixed inline once dragging starts. */
.editor-overlay.floating {
  /* Floating mode (windowed) ignores the 1I workbench inset — it dims the
     whole viewport and centers its own window. Sidebar + banner are above
     a dim but still visible. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 34, 38, 0.25);
  padding: 36px 20px 20px;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
}
.editor-overlay.floating .editor-window {
  width: min(816px, calc(100vw - 40px));
  flex: 0 0 auto;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  max-height: calc(100vh - 56px);
  overflow: hidden;
}
.editor-overlay.floating .editor-header {
  cursor: move;
  /* Floating window is only 816px wide — the patient ID block + section
     tabs + 6-button toolbar collide into each other in a single row.
     Allow rows to wrap so each gets its own line if needed. */
  flex-wrap: wrap;
  row-gap: 8px;
  padding: 8px 14px;
}
/* Patient banner is visible behind the dimmed floating backdrop, so the
   editor's pt block is redundant here. Hide it to free up horizontal
   space for the section tabs + utility buttons. */
.editor-overlay.floating .editor-pt-block { display: none; }
/* Tighten the toggle buttons in floating mode so the row fits. */
.editor-overlay.floating .editor-header-right {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}
.editor-overlay.floating .editor-header-right .btn-ghost.editor-toggle {
  padding: 3px 7px;
  font-size: 10.5px;
  white-space: nowrap;
}
.editor-overlay.floating .editor-section-tabs {
  flex-wrap: wrap;
}
.editor-overlay.floating .editor-section-tabs .section-tab {
  padding: 5px 10px;
  font-size: 11.5px;
  white-space: nowrap;
}

/* Full-screen mode for the paste editor — expands into a full-viewport
   overlay like the section editor's default. */
.paste-editor-overlay.fullscreen {
  padding: 0;
  background: var(--bg);
  align-items: stretch;
  justify-content: stretch;
}
.paste-editor-overlay.fullscreen .paste-editor-window {
  width: 100vw;
  max-height: none;
  height: 100vh;
  border-radius: 0;
  border: none;
  box-shadow: none;
  /* Cancel any drag-positioning from a prior mode. */
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
}
.paste-editor-overlay.fullscreen .paste-editor-header {
  border-radius: 0;
  cursor: default;
}

/* Pop-up paste editor — floating 8.5×11 window (task #4). */
.paste-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 34, 38, 0.25);
  /* Above the section editor (1000) so opening a paste/clipboard editor
     while the section editor is open doesn't hide it behind. Below floating
     panels (1100) so clipboard / chat / minimap remain accessible. */
  z-index: 1050;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 20px 20px;
  overflow: auto;
}
.paste-editor-overlay.open { display: flex; }
.paste-editor-window {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  /* 8.5×11 page proportions. Width is bounded so it fits on typical laptops;
     height grows with content but caps at the viewport. */
  width: min(816px, calc(100vw - 40px));
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.paste-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  border-radius: 6px 6px 0 0;
  cursor: move;
  user-select: none;
}
.paste-editor-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.paste-editor-sep { color: var(--ink-faint); }
.paste-editor-context {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
  font-family: inherit;
  font-size: 11px;
}
.paste-editor-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.paste-editor-save-status {
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}
.paste-editor-save-status.saving { color: var(--accent); }
.paste-editor-save-status.dirty  { color: #B85C3C; }
.paste-editor-save-status.error  { color: var(--btn-red); }
.paste-editor-close { padding: 2px 8px; font-size: 14px; min-height: 24px; }
.paste-editor-toggle { padding: 0 10px; font-size: 10.5px; min-height: 24px; }
.paste-editor-main {
  flex: 1;
  overflow: auto;
  padding: 18px 24px;
  background: var(--panel);
  cursor: text;
  display: flex;
  flex-direction: column;
}
.paste-editor-body {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.paste-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  border-radius: 0 0 6px 6px;
}
.paste-editor-footer-hint {
  font-size: 10.5px;
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.03em;
}
body.paste-editor-open { overflow: hidden; }
.paste-event { cursor: pointer; }

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  flex: 0 0 auto;
}
.editor-title {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 200px;
}
.editor-title .editor-sep { color: var(--ink-faint); }
.editor-title .editor-session-label { color: var(--ink-soft); font-size: 14px; }

/* Patient ID block at the editor's top-left — visually substitutes for the
   main patient banner (which the editor covers in fullscreen). Colored
   stripe + initials bubble + bold label, all in the patient's color. */
.editor-pt-block {
  display: flex;
  align-items: stretch;
  gap: 10px;
  /* Patient-color wash, same recipe as .pt-banner so the editor's pt block
     carries the same identity hue as the main banner / sidebar / switch
     flash. Falls back to panel cream when no patient color is set. */
  background: color-mix(in srgb, var(--editor-pt-color, var(--accent)) 18%, var(--panel));
  border: 2px solid var(--ink);
  border-radius: 5px;
  overflow: hidden;
  min-width: 240px;
  max-width: 340px;
}
.editor-pt-stripe {
  width: 8px;
  flex: 0 0 8px;
  background: var(--editor-pt-color, var(--accent));
}
.editor-pt-bubble {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  margin: 6px 0 6px 8px;
  border-radius: 50%;
  background: var(--editor-pt-color, var(--accent));
  color: white;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editor-pt-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 12px 4px 4px;
  min-width: 0;
}
.editor-pt-label {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-pt-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 1px;
}
.editor-title .editor-version-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.editor-section-tabs {
  display: flex;
  gap: 0;
  background: #F9F5E8;
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
}
.editor-section-tabs .section-tab {
  padding: 7px 14px 7px;
  border-bottom: 2px solid transparent;
}
.editor-section-tabs .section-tab.active {
  background: var(--panel);
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.editor-header-right {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 200px;
  justify-content: flex-end;
}
.editor-toggle.active {
  background: var(--focus-bg);
  color: var(--focus);
  border-color: var(--focus);
}
.editor-close {
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1;
}

.editor-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 0 1fr 0;
  min-height: 0;
  position: relative;  /* so the minimap can position absolutely within */
}

/* Mini-document position indicator — looks like a little page with a folded
   corner. Renders the actual unit text at tiny scale so you can start to
   make out content. Sized at ~75% of the left gutter (the space between the
   editor's left edge and the centered text column), bounded.

   Pinch-zoom on touch and Ctrl+wheel on desktop both work; a ↺ button
   appears when zoomed so you can reset.
*/
/* Mini-doc preview — floating, draggable panel pinned above the editor
   overlay. Only visible while the section editor is open. */
.editor-minimap {
  position: fixed;
  /* Phase 1I: anchor to the editor's inset (just inside its left edge)
     instead of the viewport edge so the sidebar isn't covered. Users can
     still drag the panel anywhere — this is only the initial open position. */
  top: calc(var(--editor-inset-top, 60px) + 14px);
  left: calc(var(--editor-inset-left, 20px) + 14px);
  z-index: 1100;                              /* above editor overlay */
  width: 280px;
  max-width: calc(100vw - 40px);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(28, 35, 33, 0.18);
  font-family: 'IBM Plex Sans', sans-serif;
  user-select: none;
  display: none;                              /* hidden until editor opens */
  flex-direction: column;
  overflow: hidden;
  touch-action: none;
}
.editor-minimap.open { display: flex; }
.editor-minimap.collapsed .editor-minimap-inner { display: none; }
.editor-minimap.collapsed .editor-minimap-collapse { transform: rotate(180deg); }
.editor-minimap.collapsed { border-radius: 8px; }

.editor-minimap-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #F9F5E8;
  border-bottom: 1px solid var(--rule);
  border-radius: 8px 8px 0 0;
  cursor: grab;
  font-size: 11px;
}
.editor-minimap.collapsed .editor-minimap-header { border-radius: 8px; border-bottom: none; }
.editor-minimap-header:active { cursor: grabbing; }
.editor-minimap-grip {
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: -3px;
  user-select: none;
}
.editor-minimap-title {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
  flex: 1;
}
.editor-minimap-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 2px 7px;
  font-size: 10.5px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: transform 0.15s;
}
.editor-minimap-btn:hover { background: var(--focus-bg); color: var(--focus); border-color: var(--focus); }
.editor-minimap-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Inner "page" — the miniature document rendering area. Keeps the 8.5×11
   aspect and folded-corner paper look from the prior design. */
.editor-minimap-inner {
  position: relative;
  background: #FFFEFA;
  aspect-ratio: 0.78;
  max-height: calc(100vh - 160px);
  padding: 10px 12px 28px 12px;
  overflow-y: auto;
  scrollbar-width: thin;      /* Firefox: show a thin scrollbar */
  transform-origin: top left;
  /* Allow vertical pan-scroll (mousewheel + 1-finger touch); pinch-zoom is
     still handled by the custom touch handler in setupMinimapGestures. */
  touch-action: pan-y;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
/* WebKit: thin discreet scrollbar so the preview is visibly scrollable. */
.editor-minimap-inner::-webkit-scrollbar { width: 8px; }
.editor-minimap-inner::-webkit-scrollbar-track { background: transparent; }
.editor-minimap-inner::-webkit-scrollbar-thumb {
  background: rgba(196, 130, 52, 0.35);
  border-radius: 4px;
}
.editor-minimap-inner::-webkit-scrollbar-thumb:hover { background: rgba(196, 130, 52, 0.55); }
.editor-minimap-inner::before {
  /* Folded top-right corner on the page */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, transparent 48%, var(--rule) 48%, var(--rule) 52%, #FFFEFA 52%);
}

.editor-minimap-content {
  font-size: 7.5px;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: 0.015em;
}
.editor-minimap .mini-unit {
  cursor: pointer;
  padding: 0.5px 2px;
  margin-bottom: 0.6px;
  border-radius: 1.5px;
  border-left: 1.5px solid transparent;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  transition: background 0.1s;
}
.editor-minimap .mini-unit:hover { background: rgba(196, 130, 52, 0.12); }
.editor-minimap .mini-unit.focused {
  background: var(--focus-bg);
  border-left-color: var(--focus);
  box-shadow: 0 0 0 0.5px rgba(196, 130, 52, 0.35);
}
.editor-minimap .mini-unit[data-kind="heading"] {
  font-weight: 700;
  color: #000;
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.editor-minimap .mini-unit[data-kind="bullet"] {
  padding-left: 6px;
  position: relative;
}
.editor-minimap .mini-unit[data-kind="bullet"]::before {
  content: "•";
  position: absolute;
  left: 1.5px;
  top: 0.5px;
}
.editor-minimap-empty {
  padding: 10px 4px;
  font-size: 10px;
  color: var(--ink-faint);
  text-align: center;
  font-style: italic;
  line-height: 1.4;
}
.editor-minimap-caption {
  position: absolute;
  bottom: 6px;
  left: 10px;
  right: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-align: center;
  text-transform: uppercase;
  border-top: 1px dashed var(--rule);
  padding-top: 5px;
}
.editor-minimap-reset {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 9px;
  line-height: 1.3;
  cursor: pointer;
  display: none;
  font-family: 'IBM Plex Sans', sans-serif;
}
.editor-minimap.scaled .editor-minimap-reset { display: block; }
.editor-minimap-reset:hover { background: var(--focus-bg); color: var(--focus); border-color: var(--focus); }
.editor-main[data-sidebar="on"]  { grid-template-columns: 200px 1fr 0; }
.editor-main[data-margin="on"]   { grid-template-columns: 0 1fr 260px; }
.editor-main[data-sidebar="on"][data-margin="on"] { grid-template-columns: 200px 1fr 260px; }

.editor-sidebar, .editor-margin {
  background: var(--panel);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
}
.editor-margin { border-right: none; border-left: 1px solid var(--rule); }

.editor-pane {
  /* Tan gutter on either side of the white text column — matches the
     page-preview aesthetic so the editor feels like a sheet of paper laid
     on a desk. */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.editor-body {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 44px 140px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: #0E1412;
  letter-spacing: 0.002em;
  background: #FFFFFF;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}
.editor-body strong { color: #000; font-weight: 600; }

/* Unit styles --- the core editing primitive.
   Goal: feel like editing the real note, with a quiet focus ring. */
.edit-unit {
  position: relative;
  /* Reserve right-side breathing room for the absolute-positioned control
     cluster (R / 💬 / ✕ / undo) at top-right so text never flows under it
     when focused. ~98px ≈ 4 × 24px buttons + gaps + right offset. */
  padding: 4px 100px 4px 14px;
  margin: 1px 0;
  border-left: 2px solid transparent;
  border-radius: 2px;
  cursor: text;
  outline: none;
  transition: background-color 0.1s, border-color 0.1s;
}
/* Sentence-kind units keep their inline controls flowing with the text
   (set in .edit-unit[data-kind="sentence"] .edit-unit-controls); they
   don't need the reserved gutter. */
.edit-unit[data-kind="sentence"] { padding-right: 14px; }
.edit-unit:hover { background: rgba(196, 130, 52, 0.09); }
.edit-unit.focused {
  background: var(--focus-bg);
  border-left-color: var(--focus);
  box-shadow: 0 0 0 1px rgba(196, 130, 52, 0.25);
}
.edit-unit.focused .edit-unit-controls { opacity: 1; pointer-events: auto; }
/* Shift-click span selection — range of units between anchor and lead. The
   focused unit (lead) is also selected; its focus ring wins visually. */
.edit-unit.selected {
  background: rgba(196, 130, 52, 0.18);
  border-left-color: rgba(196, 130, 52, 0.8);
}
.edit-unit.selected.focused { background: rgba(196, 130, 52, 0.28); }
.edit-unit.selected .edit-unit-controls { opacity: 1; pointer-events: auto; }

.edit-unit-text { white-space: pre-wrap; word-wrap: break-word; }
.edit-unit-text strong { font-weight: 600; color: var(--ink); }
.edit-unit-text .placeholder-line {
  color: var(--ink-faint);
  font-style: italic;
  font-size: 11px;
  padding: 1px 5px;
  background: var(--rule-soft);
  border-radius: 3px;
}
.edit-unit-text .empty-parens {
  color: var(--btn-red);
  font-weight: 600;
  background: #FDEBDD;
  padding: 0 4px;
  border-radius: 3px;
}

/* Narrative sentence units inline in a paragraph; bullets and headings block. */
.edit-unit[data-kind="sentence"] {
  display: inline;
  padding: 2px 4px;
  margin-right: 2px;
  border-left: none;
  border-bottom: 2px solid transparent;
}
.edit-unit[data-kind="sentence"].focused {
  background: var(--focus-bg);
  border-bottom-color: var(--focus);
  border-left: none;
}
.edit-unit[data-kind="bullet"]   { display: block; }
.edit-unit[data-kind="heading"]  {
  display: block;
  font-weight: 600;
  margin-top: 14px;
  margin-bottom: 3px;
}
.edit-unit-block-gap { height: 10px; }

/* Unit inline controls — small, top-right, only visible when focused */
.edit-unit-controls {
  position: absolute;
  top: 2px;
  right: 4px;
  display: flex;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}
.edit-unit[data-kind="sentence"] .edit-unit-controls {
  position: static;
  display: inline-flex;
  margin-left: 4px;
  vertical-align: middle;
}
.edit-unit-btn {
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.2;
  border-radius: 3px;
  cursor: pointer;
}
.edit-unit-btn:hover:not(:disabled) { background: var(--focus-bg); color: var(--focus); border-color: var(--focus); }
.edit-unit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.edit-unit-btn.edit-unit-delete:hover { background: var(--btn-red-bg); color: var(--btn-red); border-color: var(--btn-red); }
/* Stylized serif R glyph for regenerate — distinct from the undo arrow. */
.edit-unit-btn .r-glyph {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Note and undo are emoji/text, slightly larger for clarity. */
.edit-unit-btn.edit-unit-note { font-size: 11px; }
.edit-unit-btn.edit-unit-undo { font-size: 12px; }

/* Inline textarea during edit mode. Inherits font/size from edit-unit-text. */
.edit-unit-input {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--focus);
  border-radius: 2px;
  padding: 3px 6px;
  resize: none;
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-bg);
  white-space: pre-wrap;
  overflow: hidden;
}
.edit-unit[data-kind="sentence"] .edit-unit-input { display: inline-block; min-width: 80px; }

.editor-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--ink-faint);
  font-style: italic;
  font-family: 'Fraunces', serif;
}

/* Rich-text scratch editor (Sweep 7) — full-screen editor's contenteditable
   counterpart to the main-pane scratch tab. Toolbar above + content below. */
.editor-rich-scratch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
}
.editor-rich-scratch-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.editor-rich-scratch .rt-tb-btn {
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 4px 9px;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  min-width: 30px;
  text-align: center;
  font-family: inherit;
}
.editor-rich-scratch .rt-tb-btn:hover {
  border-color: var(--focus);
  color: var(--focus);
}
.editor-rich-scratch .rt-tb-btn b,
.editor-rich-scratch .rt-tb-btn i,
.editor-rich-scratch .rt-tb-btn u { font-size: 13px; }
.editor-rich-scratch .rt-tb-color {
  width: 30px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
}
.editor-rich-scratch .rt-tb-size {
  font-family: inherit;
  font-size: 11.5px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: white;
  color: var(--ink-soft);
}
.editor-rich-scratch-content {
  flex: 1 1 auto;
  min-height: 60vh;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: white;
  font-family: 'Fraunces', serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  overflow-y: auto;
  outline: none;
}
.editor-rich-scratch-content:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(196, 130, 52, 0.18);
}

/* 1E-5 Focus mode: dim all units except the focused one to ~25% opacity. */
.editor-overlay.focus-mode .edit-unit:not(.focused) {
  opacity: 0.22;
  transition: opacity 0.2s;
}
.editor-overlay.focus-mode .edit-unit.focused {
  opacity: 1;
}
.editor-overlay.focus-mode .edit-unit:hover { opacity: 0.6; }

/* 1E-5 Structure sidebar: TOC of heading-kind units in the active section. */
.editor-sidebar {
  padding: 14px 12px 24px;
  overflow-y: auto;
}
.editor-sidebar-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: 10px;
  padding: 0 4px;
}
.editor-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.editor-sidebar-item {
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
  font-family: 'Fraunces', serif;
  font-size: 12.5px;
  color: var(--ink);
  border-radius: 2px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-sidebar-item:hover {
  background: var(--focus-bg);
  border-left-color: var(--focus);
}
.editor-sidebar-item.active {
  background: var(--focus-bg);
  border-left-color: var(--focus);
  color: var(--focus);
  font-weight: 600;
}
.editor-sidebar-empty {
  padding: 10px 8px;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 12px;
  font-family: 'Fraunces', serif;
}

/* 1E-2: margin notes aside */
.editor-margin {
  padding: 14px 12px 24px;
  overflow-y: auto;
}
.margin-section { margin-bottom: 14px; }
.margin-section-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: 8px;
  padding: 0 4px;
}
.margin-section.deleted .margin-section-title { color: var(--btn-red); }
.margin-note {
  background: white;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--focus);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.margin-section.deleted .margin-note {
  border-left-color: var(--btn-red);
  background: var(--btn-red-bg);
  opacity: 0.85;
}
.margin-note-anchor {
  font-family: 'Fraunces', serif;
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 4px;
  margin-bottom: 5px;
  white-space: pre-wrap;
}
.margin-note-text {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
  white-space: pre-wrap;
}
.margin-note-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.margin-note-actions button { padding: 2px 8px; font-size: 10.5px; }

/* 1E-3: regenerating state on a unit */
.edit-unit.regenerating {
  background: var(--focus-bg);
  outline: 2px dashed var(--focus);
  position: relative;
}
.edit-unit.regenerating::after {
  content: "regenerating…";
  position: absolute;
  top: -8px;
  right: 8px;
  background: var(--focus);
  color: white;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.06em;
}
.edit-unit-btn.has-note {
  background: var(--focus-bg) !important;
  color: var(--focus) !important;
  border-color: var(--focus) !important;
}

/* Plain-text mode — full-section textarea, no unit splitting. Lets the user
   copy/paste large blocks or replace whole sections wholesale. */
.editor-plain-textarea {
  width: 100%;
  min-height: 60vh;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: white;
  font-family: 'Fraunces', serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: #0E1412;
  resize: vertical;
  letter-spacing: 0.002em;
}
.editor-plain-textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(196, 130, 52, 0.18);
}
.paste-editor-plain-textarea {
  width: 100%;
  flex: 1 1 auto;
  min-height: 60vh;
  padding: 18px 22px;
  border: none;
  background: white;
  font-family: 'Fraunces', serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  resize: none;
  display: block;
  box-sizing: border-box;
}
.paste-editor-plain-textarea:focus { outline: none; }

/* Keyboard shortcut help overlay (1J polish) */
.kbh-group { margin-bottom: 18px; }
.kbh-group:last-child { margin-bottom: 0; }
.kbh-group-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
}
.kbh-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 4px 0;
  font-size: 12.5px;
}
.kbh-keys {
  flex: 0 0 230px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.kbh-desc { flex: 1; color: var(--ink-soft); line-height: 1.4; }
.kbh-keys kbd,
#shortcut-help-modal kbd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  padding: 1px 6px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--ink);
  white-space: nowrap;
}

/* Prompts modal tabs (one per prompt file) */
.prompts-tab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
}
.prompts-tab.active {
  background: var(--focus-bg, rgba(196, 130, 52, 0.12));
  border-color: var(--focus, #C48234);
  color: var(--focus, #C48234);
  font-weight: 600;
}

/* Find & replace panel — sits below editor header tabs.
   Compact toolbar with two inputs, toggles, nav, and action buttons. */
.editor-find-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.editor-find-panel[hidden] { display: none; }
.editor-find-input {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
  color: var(--ink);
  min-width: 160px;
  flex: 0 1 220px;
}
.editor-find-input:focus {
  outline: none;
  border-color: var(--focus, #C48234);
  box-shadow: 0 0 0 2px rgba(196, 130, 52, 0.18);
}
.editor-find-input.no-match {
  border-color: var(--btn-red, #B85C3C);
  background: rgba(184, 92, 60, 0.06);
}
.editor-find-toggle,
.editor-find-nav,
.editor-find-action,
.editor-find-close {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  min-height: 24px;
}
.editor-find-toggle.active {
  background: var(--focus-bg, rgba(196, 130, 52, 0.12));
  border-color: var(--focus, #C48234);
  color: var(--focus, #C48234);
  font-weight: 600;
}
.editor-find-action {
  font-weight: 600;
}
.editor-find-action:disabled,
.editor-find-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.editor-find-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  min-width: 60px;
  text-align: center;
  letter-spacing: 0.03em;
}
.editor-find-close {
  margin-left: auto;
}
/* Highlight the active match unit briefly when navigating. */
.edit-unit.find-hit {
  background: rgba(255, 220, 80, 0.35);
  transition: background 220ms ease;
}
.edit-unit.find-hit-current {
  background: rgba(255, 180, 30, 0.55);
  outline: 2px solid var(--focus, #C48234);
  outline-offset: -2px;
}

/* Track-changes diff view (Phase 1E-4) — read-only line diff of
   edited_sections vs sections for the active version. */
.editor-diff-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 11.5px;
  margin-bottom: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
}
.diff-summary-title {
  flex: 1;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.diff-summary-stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
}
.diff-ins-stat { color: #0b6b3c; background: rgba(34, 139, 80, 0.12); }
.diff-del-stat { color: #9a1b1b; background: rgba(188, 64, 64, 0.12); }

.editor-diff-body {
  font-family: 'Fraunces', serif;
  font-size: 14.5px;
  line-height: 1.7;
}
.diff-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 1px 6px 1px 4px;
  border-left: 2px solid transparent;
  white-space: pre-wrap;
}
.diff-line.diff-ins {
  background: rgba(34, 139, 80, 0.08);
  border-left-color: #228b50;
}
.diff-line.diff-del {
  background: rgba(188, 64, 64, 0.07);
  border-left-color: #bc4040;
  text-decoration: line-through;
  color: #7a5050;
}
.diff-line.diff-eq { color: var(--ink); }
.diff-gutter {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  width: 10px;
  color: var(--ink-faint);
  user-select: none;
  flex: 0 0 auto;
  padding-top: 3px;
}
.diff-line.diff-ins .diff-gutter { color: #228b50; }
.diff-line.diff-del .diff-gutter { color: #bc4040; }
.diff-text { flex: 1; }

.editor-diff-empty {
  padding: 40px 12px;
  text-align: center;
  color: var(--ink-soft);
  font-family: 'Fraunces', serif;
}
.editor-diff-empty .headline { font-size: 16px; margin-bottom: 8px; color: var(--ink); }
.editor-diff-empty .sub { font-size: 12.5px; color: var(--ink-faint); font-style: italic; }

/* Footer */
.editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--panel);
  border-top: 1px solid var(--rule);
  flex: 0 0 auto;
}
.editor-footer-left, .editor-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.editor-save-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.editor-save-status.saving { color: var(--focus); }
.editor-save-status.saved { color: var(--btn-dk-green); }
.editor-save-status.dirty { color: var(--ink-soft); }
.editor-save-status.error { color: var(--btn-red); }

body.editor-open { overflow: hidden; }

/* ============================================================
   Print stylesheet — strip UI chrome and print only the active
   note section in clean clinical-handoff format. Triggered by
   the 🖨 Print button or Ctrl+P.
   ============================================================ */
@media print {
  /* Hide everything except the output pane's note body. */
  body { padding: 0 !important; background: white !important; }
  body * { visibility: hidden !important; }
  .print-target,
  .print-target * { visibility: visible !important; }
  .print-target {
    position: absolute !important;
    inset: 0 !important;
    padding: 0.5in !important;
    width: auto !important;
    max-width: none !important;
    background: white !important;
    color: black !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 11pt !important;
    line-height: 1.45 !important;
  }
  .print-target .print-header {
    display: block !important;
    margin-bottom: 12pt;
    padding-bottom: 8pt;
    border-bottom: 1pt solid #555;
  }
  .print-target .print-header .print-patient {
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 16pt;
    color: black;
  }
  .print-target .print-header .print-meta {
    font-family: Arial, sans-serif;
    font-size: 9pt;
    color: #444;
    margin-top: 2pt;
  }
  .print-target h2.print-section-title {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #333;
    margin-top: 14pt;
    margin-bottom: 4pt;
    page-break-after: avoid;
  }
  .print-target .print-body {
    white-space: pre-wrap;
    page-break-inside: auto;
  }
  .print-target .print-body strong { font-weight: 700; color: black; }
  /* Hide all the screen-only chrome inside .print-target too. */
  .print-target .section-tab,
  .print-target .version-tab,
  .print-target .changes-banner,
  .print-target .action-bar,
  .print-target .flag-panel,
  .print-target #priority-cards,
  .print-target #redactor-slot { display: none !important; }
  /* Floating panels, toasts, overlays, sidebar, etc. — all gone. */
  .app-sidebar, .pt-banner, .topbar, .workflow-bar,
  #cards-col, .toast, .editor-overlay, .clipboard-nb,
  .chat-panel, .ref-launcher, .switch-flash,
  .pin-tooltip, #kbd-debug { display: none !important; }
}

/* ============================================================
   Clipboard notebook — floating, always-visible panel
   ============================================================ */

/* Claude chat panel (task #6) — mirrors the clipboard notebook visual language
   but pinned bottom-LEFT so the two don't overlap. */
.chat-panel {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 360px;
  max-width: calc(100vw - 40px);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(28, 35, 33, 0.18);
  z-index: 1100;           /* above editor overlay, same tier as clipboard */
  display: flex;
  flex-direction: column;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11.5px;
}
.chat-panel.collapsed .chat-panel-body { display: none; }
.chat-panel.collapsed .chat-panel-toggle { transform: rotate(180deg); }

.chat-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #EDF3F1;
  border-bottom: 1px solid var(--rule);
  border-radius: 8px 8px 0 0;
  cursor: grab;
  user-select: none;
}
.chat-panel.collapsed .chat-panel-header { border-radius: 8px; border-bottom: none; }
.chat-panel-header:active { cursor: grabbing; }
.chat-panel-grip {
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: -3px;
  user-select: none;
}
.chat-panel-title {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.chat-panel-mode {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.02em;
  margin-left: 4px;
}
.chat-panel-mode.patient {
  background: var(--accent);
  color: white;
}
.chat-panel-mode:hover { filter: brightness(1.05); }
.chat-panel-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.chat-panel-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 3px 8px;
  font-size: 10.5px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.chat-panel-btn:hover { background: var(--focus-bg); color: var(--focus); border-color: var(--focus); }
.chat-panel-toggle { padding: 3px 7px; font-size: 11px; line-height: 1; transition: transform 0.15s; }

.chat-panel-body {
  display: flex;
  flex-direction: column;
  max-height: min(520px, calc(100vh - 80px));
}
.chat-panel-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  max-height: 420px;
}
.chat-panel-empty {
  color: var(--ink-faint);
  font-style: italic;
  font-size: 11px;
  text-align: center;
  padding: 20px 10px;
}
.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-msg.user .chat-msg-bubble {
  background: #E8F0ED;
  border: 1px solid #BCD4CC;
  align-self: flex-end;
  border-radius: 10px 10px 2px 10px;
  max-width: 85%;
}
.chat-msg.assistant .chat-msg-bubble {
  background: var(--panel);
  border: 1px solid var(--rule);
  align-self: flex-start;
  border-radius: 10px 10px 10px 2px;
  max-width: 92%;
}
.chat-msg-bubble { padding: 7px 10px; }
.chat-msg.pending .chat-msg-bubble {
  color: var(--ink-faint);
  font-style: italic;
}
.chat-msg strong { color: var(--ink); font-weight: 600; }
.chat-panel-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 0 0 8px 8px;
}
.chat-panel-input {
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink);
  min-height: 30px;
  max-height: 160px;
  resize: vertical;
  line-height: 1.4;
}
.chat-panel-send {
  padding: 0 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.02em;
  min-height: 30px;
}
.chat-panel-send:hover:not(:disabled) { filter: brightness(1.08); }
.chat-panel-send[disabled] { opacity: 0.4; cursor: not-allowed; }

.clipboard-nb {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(28, 35, 33, 0.18);
  z-index: 1100;           /* above editor overlay */
  display: flex;
  flex-direction: column;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11.5px;
  user-select: none;
}
.clipboard-nb.collapsed .clipboard-nb-body { display: none; }
.clipboard-nb.collapsed .clipboard-nb-toggle { transform: rotate(180deg); }

.clipboard-nb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #F9F5E8;
  border-bottom: 1px solid var(--rule);
  border-radius: 8px 8px 0 0;
  cursor: grab;
}
.clipboard-nb.collapsed .clipboard-nb-header { border-radius: 8px; border-bottom: none; }
.clipboard-nb-header:active { cursor: grabbing; }
.clipboard-nb-grip {
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: -3px;
  user-select: none;
}
.clipboard-nb-title {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.clipboard-nb-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 1px 7px;
  background: var(--accent);
  color: white;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.clipboard-nb-count.empty { background: var(--ink-faint); opacity: 0.5; }
.clipboard-nb-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.clipboard-nb-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 3px 8px;
  font-size: 10.5px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.clipboard-nb-btn:hover { background: var(--focus-bg); color: var(--focus); border-color: var(--focus); }
.clipboard-nb-toggle {
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1;
  transition: transform 0.15s;
}

.clipboard-nb-body {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}
.clipboard-nb-empty {
  padding: 14px 12px;
  color: var(--ink-faint);
  font-style: italic;
  font-family: 'Fraunces', serif;
  font-size: 11.5px;
  text-align: center;
  line-height: 1.5;
}
.clipboard-nb-empty.hidden { display: none; }

.clipboard-nb-list { display: flex; flex-direction: column; gap: 4px; }
.cb-item {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  position: relative;
}
.cb-item:hover {
  background: var(--focus-bg);
  border-color: var(--focus);
}
.cb-item.just-copied {
  background: var(--btn-dk-green-bg);
  border-color: var(--btn-dk-green);
}
.cb-item { position: relative; }
.cb-item::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-top: 1.5px solid var(--ink-faint);
  border-right: 1.5px solid var(--ink-faint);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.cb-item:hover::after { opacity: 0.5; }

.cb-item-tooltip {
  position: fixed;
  z-index: 2000;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #FFFEF8;
  border: 1px solid #C48234;
  border-radius: 5px;
  box-shadow: 0 10px 36px rgba(28, 35, 33, 0.22);
  padding: 10px 12px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  display: none;
  pointer-events: none;
}

.cb-item-preview {
  color: var(--ink);
  font-size: 11.5px;
  line-height: 1.4;
  max-height: 48px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
  word-wrap: break-word;
  user-select: text;
}
.cb-item-preview strong { font-weight: 600; }
.cb-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px dashed var(--rule);
}
.cb-item-src {
  font-size: 10px;
  color: var(--ink-faint);
}
.cb-item-src.pinned { color: var(--focus); }
.cb-item-ts {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.cb-item-chars {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-faint);
  margin-left: auto;
}
.cb-item-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.cb-item-btn:hover { background: var(--panel); color: var(--ink); border-color: var(--ink-soft); }
.cb-item-btn.remove:hover { background: var(--btn-red-bg); color: var(--btn-red); border-color: var(--btn-red); }

/* Floating pin tooltip — shown next to a completed drag-selection. */
.pin-tooltip {
  position: fixed;
  display: none;
  z-index: 1200;                    /* above clipboard notebook */
  transform: translateX(-50%) translateY(calc(-100% - 10px));
  white-space: nowrap;
}
.pin-tooltip .pin-tooltip-btn + .pin-tooltip-btn { margin-left: 4px; }
.pin-tooltip.show {
  display: block;
  animation: pin-tooltip-in 0.12s ease-out;
}
@keyframes pin-tooltip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(calc(-100% - 2px)); }
  to   { opacity: 1; transform: translateX(-50%) translateY(calc(-100% - 10px)); }
}
.pin-tooltip-btn {
  background: var(--ink);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 12px;
  border-radius: 5px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(28, 35, 33, 0.32);
  white-space: nowrap;
  position: relative;
}
.pin-tooltip-btn::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.pin-tooltip-btn:hover { background: var(--focus); }
.pin-tooltip-btn:active { transform: translateY(1px); }
.pin-tooltip-copy { background: var(--accent); }
.pin-tooltip-copy:hover { background: #3a615b; }
/* Only the pin button carries the tail so the bubble has one clear anchor. */
.pin-tooltip-copy::after { display: none; }