:root {
  /* RADLink theme (same palette as the PACS app) */
  --bg: #181818;
  --bg-dark: #141416;
  --panel: #202024;
  --border: #2a2b30;
  --text: #e8e8ea;
  --muted: #9ca3af;
  --gold: #ffd800;
  --gold-dim: #c4a15b;
  --accent: var(--gold);
  --report-font: Calibri, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
}
.topbar h1 { font-size: 1.1rem; margin: 0; }

.brand-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-logo { height: 28px; width: 28px; }

.brand {
  display: flex;
  gap: 4px;
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.2px;
}
.brand-a { color: var(--gold); text-transform: uppercase; font-style: italic; }
.brand-b { color: #fff; }

.hidden { display: none !important; }

.nav-btn.active { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); }

/* RADLink PACS views — the embedded PACS gets the whole window below the
   toolbar (no side panel), since it is a full application in its own right. */
.pacs-view { padding: 0; margin: 0; }
.pacs-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 58px);   /* full height minus the app toolbar */
  border: 0;
  background: #fff;
}
/* With the PACS action bar present, the frame gives up its height too. */
.pacs-frame-barred { height: calc(100vh - 100px); }
.pacs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
}
.pacs-bar .status-text { margin-right: auto; }
.pacs-bar a.ghost-btn { text-decoration: none; display: inline-flex; align-items: center; }
.pacs-notice {
  margin: 16px;
  padding: 14px 16px;
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  background: rgba(255, 216, 0, 0.06);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
}
.pacs-notice.hidden { display: none; }
.pacs-notice h3 { margin: 0 0 6px; font-size: 1rem; color: var(--gold); }
.pacs-notice a { color: var(--gold); }
.pacs-notice .field-row { margin-top: 10px; margin-bottom: 0; }

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
}
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.field-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--muted);
}
label.grow { flex: 1; }
.checkbox-row { flex-direction: row; align-items: center; gap: 8px; }

select, input[type="text"], input[type="number"], textarea {
  background: var(--bg-dark);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: inherit;
}
textarea { resize: vertical; }

button {
  cursor: pointer;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.9rem;
  border: 1px solid var(--border);
}
.primary-btn { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); font-weight: 600; }
.ghost-btn { background: transparent; color: var(--text); }
.ghost-btn.warn { border-color: #e05555; color: #e05555; }

.status-text { align-self: center; color: var(--muted); font-size: 0.85rem; }

.tirads-result {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--bg-dark);
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 4px 0 0;
}

/* Anatomy companion */
.anatomy-diagram { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.anatomy-diagram svg { width: 100%; height: auto; display: block; }
.anat-region:hover { fill: var(--gold-dim) !important; }
.anat-region.anat-active { fill: var(--gold) !important; stroke: var(--gold) !important; }
.anatomy-structures { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.anatomy-structure-btn {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
}
.anatomy-structure-btn:hover { border-color: var(--gold-dim); }
.anatomy-structure-btn.active { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); }
.anatomy-detail {
  background: #fff;
  color: #111;
  border-radius: 8px;
  padding: 16px 20px;
  min-height: 120px;
  line-height: 1.5;
  font-size: 0.95rem;
}
.anatomy-detail:empty { display: none; }
.anatomy-detail h3 { margin: 0 0 8px; font-size: 1.05rem; }
.anatomy-detail strong { color: #000; }
.anatomy-detail .anat-overview { color: #333; }
#anatomyEditText { font-family: monospace; font-size: 0.85rem; }

/* External reference links panel (Anatomy + Reference) */
.ext-links {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  background: rgba(255, 216, 0, 0.05);
}
.ext-links.hidden { display: none; }
.ext-links-title {
  margin: 0 0 6px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-dim);
}
.ext-links-list { margin: 0; padding-left: 18px; }
.ext-links-list li { margin: 2px 0; }
.ext-links-list a { color: var(--gold); text-decoration: none; }
.ext-links-list a:hover { text-decoration: underline; }
.ext-link-src { color: var(--muted); font-size: 0.8rem; }
#anatomyLinksEdit, #referenceLinksEdit { font-family: monospace; font-size: 0.85rem; }

/* Sign-in gate */
.login-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark, #141416);
  padding: 20px;
}
.login-gate.hidden { display: none; }
.login-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  padding: 28px 24px;
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  background: var(--panel, #1c1c1f);
}
.login-logo { width: 48px; height: 48px; align-self: center; }
.login-title { margin: 0 0 4px; text-align: center; font-size: 1.3rem; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.login-card input {
  padding: 10px;
  background: #fff;
  color: #111;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
}
.login-card .primary-btn { margin-top: 4px; padding: 10px; }

/* Inline embedded external viewer (e.g. Radiopaedia case) */
.anatomy-embed { margin-bottom: 12px; }
.anatomy-embed.hidden { display: none; }
.anatomy-embed-frame {
  width: 100%;
  height: 80vh;
  min-height: 480px;
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  background: #fff;
}
.anatomy-embed-note { margin: 6px 0 0; color: var(--muted); font-size: 0.8rem; }
.anatomy-topic-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 0.85rem;
  margin-bottom: 4px;
  cursor: pointer;
}
.anatomy-topic-item:hover { background: var(--panel); }
.anatomy-topic-item.active { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); }
.anatomy-system-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 10px 0 6px; }
/* Desktop-app offline-anatomy prefetch progress banner. */
.anatomy-offline-status { font-size: 0.72rem; color: var(--gold-dim, #c4a15b); margin: 2px 0 6px; padding: 4px 6px; border-radius: 4px; background: rgba(196, 161, 91, 0.08); }
.anatomy-offline-status.hidden { display: none; }
/* Subgroup heading nested under a region ("Region / Subgroup" convention). */
.anatomy-subgroup-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--gold-dim, #c4a15b); margin: 6px 0 3px 12px; }
.anatomy-topic-item.anatomy-topic-sub { margin-left: 12px; }
/* Drag-to-reorder affordance + state. */
.anatomy-topic-item[draggable="true"] { cursor: grab; }
.anatomy-topic-item.dragging { opacity: 0.45; cursor: grabbing; }

/* "Keep this stack on my device" switch, inside each image-stack row.
   Stacks run 107-459 MB, so the size sits next to the switch — the cost is
   visible BEFORE it's committed, not discovered afterwards. */
.anat-topic-label { flex: 1; min-width: 0; }
.anat-offline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  cursor: pointer;
}
.anat-offline-size {
  font-size: 0.66rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.anat-offline-switch {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: #3a3b42;
  border: 1px solid var(--border);
  transition: background 0.15s ease;
  flex: 0 0 auto;
}
.anat-offline-switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e8e8ea;
  transition: transform 0.15s ease;
}
.anat-offline.is-on .anat-offline-switch { background: #21a03c; border-color: #21a03c; }
.anat-offline.is-on .anat-offline-switch::after { transform: translateX(12px); }
.anat-offline.is-on .anat-offline-size { color: #4cc463; }
.anat-offline.is-busy .anat-offline-switch { background: var(--gold-dim, #c4a15b); border-color: var(--gold-dim, #c4a15b); }
.anat-offline.is-busy .anat-offline-switch::after { transform: translateX(6px); }
.anat-offline.is-busy .anat-offline-size { color: var(--gold); }
/* On the gold "active" row, dim text needs to read against the light background. */
.anatomy-topic-item.active .anat-offline-size { color: rgba(20, 20, 22, 0.7); }
.anatomy-topic-item.active .anat-offline.is-on .anat-offline-size { color: #0f6b26; }
.anatomy-offline-status.warn { color: #f0b429; background: rgba(240, 180, 41, 0.1); }
/* Small dim hint next to a dialog field label. */
.muted-note { color: var(--muted); font-weight: 400; font-size: 0.8em; }

/* Background anatomy-upload progress chip (fixed, non-blocking). Shows while an
   uploaded stack is being processed + synced to the server; auto-removed when
   the queue is empty. */
.anatomy-sync-chip {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 8px 12px; border-radius: 999px;
  background: rgba(20, 20, 24, 0.94); color: #f1ead6;
  border: 1px solid var(--gold-dim, #c4a15b);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  font-size: 0.78rem; line-height: 1.2;
}
.anatomy-sync-chip.is-error { border-color: #c9603f; color: #f0c9bd; }
.anatomy-sync-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anatomy-sync-spinner {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(196, 161, 91, 0.35); border-top-color: var(--gold, #fdc400);
  animation: anatomy-sync-spin 0.8s linear infinite;
}
.anatomy-sync-chip.is-error .anatomy-sync-spinner { display: none; }
@keyframes anatomy-sync-spin { to { transform: rotate(360deg); } }
/* Chip controls: Retry (paused only) + ✕ Cancel (always). */
.anatomy-sync-btn, .anatomy-sync-x {
  flex: 0 0 auto; cursor: pointer; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font: inherit; line-height: 1;
}
.anatomy-sync-btn { padding: 3px 9px; }
.anatomy-sync-x { padding: 3px 7px; }
.anatomy-sync-btn:hover, .anatomy-sync-x:hover { background: rgba(255, 255, 255, 0.18); }

/* Real scrollable slice-stack viewer */
.anatomy-viewer-toolbar { margin-bottom: 6px; }

/* Anatomy tab: resizable split (drag the divider) + vertically-centred image. */
#anatomyView {
  display: flex;
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 92px);
}
#anatomyView .anatomy-nav-panel {
  flex: 0 0 var(--anat-nav-w, 25%);
  min-width: 200px;
  max-width: 75%;
  overflow: hidden;
}
#anatomyView > .panel:not(.anatomy-nav-panel) {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Let the image fill ALL the leftover space in the right panel (both dimensions). */
#anatomyViewerWrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.anat-resizer {
  flex: 0 0 16px;
  align-self: stretch;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.anat-resizer::before {
  content: "";
  width: 4px;
  height: 54px;
  border-radius: 3px;
  background: var(--border);
  transition: background 0.15s;
}
.anat-resizer:hover::before,
.anat-resizer.dragging::before { background: var(--gold); }
@media (max-width: 860px) {
  #anatomyView { flex-direction: column; min-height: 0; }
  #anatomyView .anatomy-nav-panel { flex-basis: auto; max-width: none; }
  .anat-resizer { display: none; }
}

.anatomy-viewer {
  position: relative;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  outline: none;
  cursor: grab;
  touch-action: none; /* let hold-and-drag scrub the stack instead of scrolling the page */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.anatomy-viewer.scrubbing { cursor: grabbing; }
/* Vertical scroll slider to the RIGHT of the image (click + drag up/down).
   The row fills the panel; the image is CENTRED in it (both axes) and hugs its
   own size, so overlays/pins stay aligned. The slider stays full-height. */
.anatomy-viewer-row { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; margin: 0 auto; flex: 1 1 auto; min-height: 0; }
.anatomy-viewer-row .anatomy-viewer { margin: 0; max-height: 82vh; }
/* Scroll track = a load-map strip (which frames are cached) NEXT TO the slider,
   so the slider's solid gold fill never hides it.
   BOTH children are absolutely positioned ON PURPOSE: the canvas must never sit
   in flow. Its `height:100%` can't resolve against a content-sized parent, so the
   browser would fall back to the canvas's INTRINSIC size — and paintAnatomyLoadMap
   sets that from the measured rect, creating a resize feedback loop that grows the
   row without bound on every repaint. Out of flow, its size can't affect layout. */
.anatomy-scroll-track { position: relative; align-self: stretch; flex: 0 0 34px; width: 34px; }
.anatomy-scroll-track.hidden { display: none; }
.anatomy-load-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 100%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12); /* base = nothing loaded yet */
  pointer-events: none;
}
.anatomy-frame-slider {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  writing-mode: vertical-lr; /* proper vertical range in Chrome/Edge */
  direction: rtl; /* first slice at the TOP */
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 22px;
  padding: 0;
  margin: 0;
  cursor: ns-resize;
  accent-color: var(--gold);
  background: transparent;
}
.anatomy-frame-slider.hidden { display: none; }
/* Full-screen: centre the viewer, scale the image to fill, keep overlay aligned. */
#anatomyViewerWrap:fullscreen { background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#anatomyViewerWrap:fullscreen .anatomy-viewer { margin: 0; }
#anatomyViewerWrap:fullscreen #anatomyFrameImg { max-height: 96vh; max-width: 100vw; }
.anatomy-viewer:focus { border-color: var(--gold-dim); }
/* Base frame sizes to the biggest it can be — capped by the panel width and by
   ~80vh so it never runs off-screen. The viewer box (fit-content) hugs it, so
   the absolutely-positioned overlay (width:100% of the box) stays aligned. */
/* Fill the available space in WHICHEVER dimension binds first, never forcing a
   fixed height — a forced height:100% stretches wide (landscape) plates. width/
   height:auto + max-width/height:100% preserves the true aspect ratio: square
   slices fill the height, wide label plates fill the width. The viewer box hugs
   the image (fit-content), so overlays/pins stay aligned. */
.anatomy-viewer img { display: block; width: auto; height: auto; max-width: 100%; max-height: 82vh; user-select: none; }
/* Focus mode: hide the description box + links to give the image the whole panel. */
#anatomyView.focus-image #anatomyDetail,
#anatomyView.focus-image #anatomyLinks,
#anatomyView.focus-image #anatomyEmbed { display: none; }
/* Upload dialog: full-quality checkbox row. */
.inline-check { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; font-size: 0.86rem; color: var(--muted); cursor: pointer; }
.inline-check input { margin-top: 2px; flex: 0 0 auto; }
.inline-check span { line-height: 1.35; }
/* Colour-overlay layer: absolutely stacked ON TOP of the base frame, same box.
   pointer-events:none so clicks fall through to the viewer's identify handler. */
.anatomy-overlay-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  mix-blend-mode: normal;
}
.anatomy-overlay-img.hidden { display: none; }
.anatomy-overlay-controls { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.anatomy-overlay-controls.hidden { display: none; }
.anatomy-overlay-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.anatomy-overlay-toggle input { width: auto; }
#anatomyOverlayOpacity { width: 90px; }
.anatomy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  max-width: 640px;
}
.anatomy-legend.hidden { display: none; }
.anatomy-legend-title { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); margin-bottom: 2px; }
.anatomy-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-dark);
  color: inherit;
  cursor: pointer;
}
.anatomy-legend-item:hover { border-color: var(--gold-dim); }
.anatomy-legend-item.active { border-color: var(--gold); }
.anatomy-legend-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.25); }
/* Image organizer (New stack / Organize images) — draggable thumbnails */
.stack-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin: 8px 0;
}
.stack-thumb {
  position: relative;
  width: 92px;
  height: 92px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  cursor: grab;
}
.stack-thumb:active { cursor: grabbing; }
.stack-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.stack-thumb-n {
  position: absolute;
  top: 2px;
  left: 2px;
  min-width: 16px;
  padding: 0 4px;
  font-size: 0.72rem;
  text-align: center;
  background: var(--gold);
  color: var(--bg-dark);
  border-radius: 8px;
  font-weight: 700;
}
.stack-thumb-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  line-height: 16px;
  font-size: 0.7rem;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
}
.stack-thumb-x:hover { background: #c0392b; }
.anatomy-pin-layer { position: absolute; inset: 0; }
.anatomy-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg-dark);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--gold-dim);
}
.anatomy-pin:hover, .anatomy-pin.anat-active { background: #fff; }
.anatomy-pin.draft { background: var(--gold-dim); }
.anatomy-pin-tag {
  position: absolute;
  transform: translate(8px, -50%);
  background: var(--bg-dark);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}
.anatomy-disclaimer {
  color: var(--gold);
  font-size: 0.8rem;
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 10px 0;
}
.anatomy-pin-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.anatomy-pin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
.anatomy-pin-row input[type="text"] { flex: 1; padding: 4px 8px; font-size: 0.85rem; }
.anatomy-pin-row .pin-frame-tag { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.anatomy-pin-row.draft { border-color: var(--gold-dim); }
#anatomyAddLabelBtn.active { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); }

#signatureBlock { font-family: monospace; font-size: 0.9rem; }
.signature-log-title { font-size: 0.9rem; margin: 12px 0 6px; color: var(--muted); }
.signature-log { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.signature-log-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.82rem;
}
.signature-log-item.revoked { opacity: 0.6; border-color: #ff6b6b; }
.signature-log-item .sig-id { font-family: monospace; font-weight: 700; color: var(--gold); }
.signature-log-item .sig-meta { color: var(--muted); }
.signature-log-item .sig-revoked-tag { color: #ff6b6b; font-weight: 600; }

#modalityTabs { gap: 8px; }
.modality-tab {
  background: var(--bg-dark);
  color: var(--muted);
  border: 1px solid var(--border);
}
.modality-tab.active { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); }

.output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.output-header h2 { font-size: 1rem; margin: 0; }
.output-actions { display: flex; gap: 8px; align-items: center; }

/* Link styled as a ghost button (Open in Docs) */
a.ghost-btn {
  display: inline-block;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
  background: transparent;
}
a.ghost-btn:hover { border-color: var(--gold-dim); }

.report-preview {
  margin-top: 10px;
  background: #fff;
  color: #111;
  border-radius: 8px;
  min-height: 420px;
  padding: 20px 24px;
  font-family: var(--report-font);
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-y: auto;
  max-height: 70vh;
}
/* All paragraph spacing is set inline by the formatter (deterministic and
   clipboard-safe) — no default margins here. */
.report-preview p { margin: 0; }

/* Plain-text output mode (X-ray): a copyable textbox, no formatting, no Google Doc. */
.plainmode-label {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.85rem;
}
.plainmode-label input { width: auto; }
.plain-report-box {
  margin-top: 6px;
  width: 100%;
  min-height: 420px;
  max-height: 70vh;
  resize: vertical;
  background: #fff;
  color: #111;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  font-family: var(--report-font);
  font-size: 15px;
  line-height: 1.5;
}

/* Paste & Format mode (Cowork-generated reports formatted here, no AI cost). */
.report-mode-toggle { align-items: center; gap: 6px; margin-bottom: 10px; }
.mode-btn {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.mode-btn.active { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); font-weight: 600; }
.paste-report-box {
  margin-top: 6px;
  width: 100%;
  min-height: 360px;
  max-height: 62vh;
  resize: vertical;
  background: #fff;
  color: #111;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  font-family: var(--report-font);
  font-size: 15px;
  line-height: 1.5;
}
.version-pick { display: flex; flex-direction: column; }

/* Optional grading suggestions (reference hub Phase 2). */
.grading-suggest { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.grading-suggest.hidden { display: none; }
.grading-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.grading-chip-row .status-text { margin-right: 4px; }
.grading-chip {
  background: var(--panel);
  border: 1px solid var(--gold-dim);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.82rem;
  cursor: pointer;
}
.grading-chip:hover { border-color: var(--gold); }
.grading-review {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.9rem;
}
.grading-review pre {
  white-space: pre-wrap;
  margin: 6px 0 10px;
  font-family: var(--report-font);
  font-size: 0.9rem;
}

/* Reference pages: render markdown tables + headings legibly. */
.anatomy-detail .ref-table { border-collapse: collapse; width: 100%; margin: 8px 0 14px; font-size: 0.88rem; }
.anatomy-detail .ref-table th, .anatomy-detail .ref-table td {
  border: 1px solid var(--border);
  padding: 5px 9px;
  text-align: left;
  vertical-align: top;
}
.anatomy-detail .ref-table th { background: var(--bg-dark); }
.anatomy-detail h2, .anatomy-detail h3, .anatomy-detail h4 { margin: 14px 0 6px; }
.anatomy-detail h3 { font-size: 1rem; }
.anatomy-detail h4 { font-size: 0.92rem; color: var(--muted); }

.library-browser {
  max-height: 78vh;
  overflow-y: auto;
  padding-right: 4px;
}

.library-region-card {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.library-region-card h4 { margin: 0 0 8px; font-size: 0.95rem; }

.library-subsection { margin-bottom: 10px; }
.library-subsection:last-child { margin-bottom: 0; }
.library-subsection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 6px;
}

.library-technique-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.library-technique-label {
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 150px;
}

.library-empty-note { font-size: 0.8rem; color: var(--muted); font-style: italic; }

.library-file-item {
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  color: var(--text);
  font-size: 0.8rem;
}
.library-file-item:hover { background: var(--panel); }
.library-file-item.active { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); }

.small-btn { padding: 3px 8px; font-size: 0.75rem; }

/* Collapsible calculators panel — collapsed by default, toggled by its header. */
.calc-panel { margin: 4px 0 2px; }
.calc-panel > .calc-row { margin-top: 8px; }
/* The calc-row is a .field-row (display:flex), which overrides the browser's
   default "hide details content when closed" — so hide it explicitly. */
.calc-panel:not([open]) > .calc-row { display: none; }
.calc-panel-summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; user-select: none; padding: 4px 2px; width: fit-content;
}
.calc-panel-summary::-webkit-details-marker { display: none; }
.calc-panel-caret { display: inline-block; color: var(--gold, #fdc400); transition: transform 0.15s ease; font-size: 0.8rem; }
.calc-panel[open] > .calc-panel-summary .calc-panel-caret { transform: rotate(90deg); }
.calc-panel-label { font-weight: 600; color: var(--gold-dim, #c4a15b); font-size: 0.9rem; letter-spacing: 0.01em; }
.calc-panel-hint { font-size: 0.75rem; color: var(--muted); }
.calc-panel[open] > .calc-panel-summary .calc-panel-hint { display: none; }
.calc-panel-summary:hover .calc-panel-label { color: var(--gold, #fdc400); }

.calc-row { align-items: center; }
.calc-block { display: flex; flex-direction: column; gap: 4px; }
.calc-title { font-size: 0.85rem; color: var(--muted); }
.calc-inputs { display: flex; gap: 6px; align-items: center; }
.calc-input { width: 64px; }

/* Calculators with many inputs (e.g. Myer-Cotton: 7 fields) carry a visible
   caption above each box — a 64px input truncates any placeholder longer than
   about six characters, which made the fields unreadable. */
.calc-inputs-wrap { flex-wrap: wrap; row-gap: 10px; align-items: flex-end; }
.calc-group { display: flex; flex-direction: column; gap: 3px; }
.calc-group-label {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
}
.calc-pair { display: flex; align-items: center; gap: 4px; }
.calc-x { color: var(--muted); font-size: 0.8rem; }
.calc-input-sm { width: 52px; }

.region-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--bg-dark);
}
.region-row-head { align-items: flex-end; }
.region-remove-btn { margin-left: auto; }

.patient-doc-panel {
  margin: 10px 0;
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--bg-dark);
}
.patient-doc-panel summary { cursor: pointer; color: var(--gold); font-weight: 600; font-size: 0.85rem; }
.patient-doc-panel .field-row { margin-top: 10px; margin-bottom: 0; }
.patient-doc-panel .field-row + .field-row { margin-top: 10px; }
.patient-doc-panel .ghost-btn { border-color: var(--gold-dim); }
.patient-doc-panel .ghost-btn:hover { border-color: var(--gold); }
.patient-doc-panel a { color: var(--gold); }
.patient-doc-panel a:hover { color: var(--gold-dim); }

.chat-panel { margin-top: 12px; }
.chat-input { flex: 1; }
.chat-log {
  margin-top: 8px;
  max-height: 160px;
  overflow-y: auto;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-log-entry.user { color: var(--text); }
.chat-log-entry.done { color: #7ee787; }
.chat-log-entry.error { color: #ff6b6b; }
.chat-log-entry.pending { font-style: italic; }
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc-input { -moz-appearance: textfield; }

#libraryContent { font-family: monospace; font-size: 0.85rem; }

.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-backdrop.hidden { display: none; }
.dialog {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Signature dialog: modality tickboxes sit on one line beside the hospital
   dropdown, wrapping on a narrow window rather than squashing. */
.sig-modality-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 4px; }
.sig-modality-row .inline-check { margin: 0; white-space: nowrap; }
#signatureLabelPreview { display: block; margin-top: 4px; font-size: 0.78rem; }

/* Template-version tick boxes (replaces the old dropdown, which reset to V1
   on every region/technique change and silently generated the wrong version). */
.version-picker { display: flex; gap: 6px; align-items: center; padding-top: 2px; }
.version-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-direction: row;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.version-opt:hover { border-color: var(--gold-dim); }
/* The ticked version is unmistakable at a glance — the whole point is that a
   wrong version can't slip past unnoticed and burn a paid generation. */
.version-opt:has(input:checked) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-dark);
  font-weight: 600;
}
.version-opt input { margin: 0; cursor: pointer; accent-color: var(--bg-dark); }

/* ---- Dictation box: fullscreen + light mode ------------------------------- */
.dictation-head { display: flex; align-items: center; gap: 8px; }
.dictation-btn {
  padding: 3px 9px;
  font-size: 0.75rem;
  line-height: 1.4;
  border-radius: 5px;
}
.dictation-head .dictation-btn:first-of-type { margin-left: auto; }

/* Fullscreen overlay. The REAL textarea is moved in here, so it keeps its
   text, cursor and listeners — nothing is copied or synced back. */
.dictation-fs {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  padding: 12px 16px 16px;
  gap: 10px;
}
.dictation-fs-bar { display: flex; align-items: center; gap: 8px; }
.dictation-fs-bar .status-text { margin-right: auto; }
.dictation-fs > textarea {
  flex: 1;
  width: 100%;
  resize: none;
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 16px 18px;
}

/* Light mode — one body class drives the inline boxes AND the fullscreen one,
   so the two can never show different themes. */
body.dictation-light .region-row textarea,
body.dictation-light .dictation-fs > textarea,
body.dictation-light #pasteReportBox {
  background: #ffffff;
  color: #111111;
  border-color: #c9c9cf;
}
body.dictation-light .region-row textarea::placeholder,
body.dictation-light .dictation-fs > textarea::placeholder {
  color: #8a8a90;
}
body.dictation-light .dictation-fs { background: #f2f2f4; }
body.dictation-light .dictation-fs-bar .status-text { color: #55555c; }

/* In light mode the fullscreen bar sits on a LIGHT background, so its buttons
   must not keep the dark-theme's pale text — that rendered them invisible. */
body.dictation-light .dictation-fs .ghost-btn,
body.dictation-light .dictation-fs .dictation-btn {
  background: #ffffff;
  color: #1a1a1f;
  border-color: #b9b9c0;
}
body.dictation-light .dictation-fs .ghost-btn:hover,
body.dictation-light .dictation-fs .dictation-btn:hover {
  border-color: var(--gold-dim);
  background: #f7f7f9;
}

/* Recurring-finding tick boxes for the zero-AI Normal report path. */
.snippet-picker { margin-top: 8px; }
.snippet-picker.hidden { display: none; }
.snippet-picker-label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.snippet-picker-boxes { display: flex; flex-wrap: wrap; gap: 6px; }
.snippet-opt { font-size: 0.82rem; padding: 4px 9px; }

/* ---- Failed-Google-Doc banner + in-app problem fixer --------------------
   The banner is deliberately loud and persistent: a finished report that
   never reached the Doc used to vanish into an overwritten status line. */
.gdoc-fail-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #b3452f;
  background: rgba(179, 69, 47, 0.13);
}
.gdoc-fail-banner.hidden { display: none; }
.gdoc-fail-text { flex: 1 1 260px; font-size: 0.82rem; color: #f0c2b6; }
.gdoc-fail-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.doctor-panel {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.doctor-panel.hidden { display: none; }
.doctor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.doctor-body { display: flex; flex-direction: column; gap: 6px; }
.doctor-row { padding: 7px 9px; border-radius: 5px; border-left: 3px solid var(--border); background: var(--bg); }
.doctor-row-head { font-size: 0.82rem; font-weight: 600; }
.doctor-row-detail { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.doctor-row-hint { font-size: 0.78rem; color: var(--gold-dim, #c4a15b); margin-top: 4px; }
.doctor-ok { border-left-color: #21a03c; }
.doctor-ok .doctor-row-head { color: #4cc463; }
.doctor-warn { border-left-color: #f0b429; }
.doctor-warn .doctor-row-head { color: #f0b429; }
.doctor-fail { border-left-color: #d9503a; }
.doctor-fail .doctor-row-head { color: #f0806b; }
.doctor-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.doctor-copy-box {
  width: 100%;
  min-height: 120px;
  margin-top: 10px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
}
.doctor-copy-box.hidden { display: none; }

/* ---- Report action bar --------------------------------------------------
   Was five identical flat-grey slabs whose labels wrapped onto two lines at
   uneven heights. Now one consistent pill shape with a colour per role, so the
   bar can be read at a glance instead of word by word:
     blue = go elsewhere · gold = the main action · teal = sign
     grey = minor utility · amber = diagnostics
   Colour is carried by a tinted ground + border + icon/label, keeping the dark
   RADLink theme rather than pasting bright buttons on top of it. */
/* justify-content keeps a wrapped row right-aligned under the others, so if it
   ever does wrap (narrow window, larger browser font) it reads as intentional
   rather than as one orphaned button hanging off the left. */
.output-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.report-action,
a.report-action {
  --ra: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Tight enough that all five fit one row inside the half-width Report panel
     (~523px). flex-wrap above stays as the fallback for narrower windows or a
     larger browser font, so this degrades to two rows instead of overflowing. */
  gap: 6px;
  height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;          /* no more two-line labels / orphaned arrow */
  text-decoration: none;
  cursor: pointer;
  color: var(--ra);
  background: color-mix(in srgb, var(--ra) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--ra) 42%, transparent);
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.08s ease;
}
.report-action svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.report-action:hover {
  background: color-mix(in srgb, var(--ra) 20%, transparent);
  border-color: color-mix(in srgb, var(--ra) 70%, transparent);
}
.report-action:active { transform: translateY(1px); }
.report-action:focus-visible { outline: 2px solid var(--ra); outline-offset: 2px; }
.report-action:disabled { opacity: 0.45; cursor: default; transform: none; }

/* The `a.report-action` selector above is (0,1,1); a bare `.ra-open` is (0,1,0)
   and LOSES to it, which left the Open Doc link stuck on the default grey.
   Each role is therefore written for both element types. */
.ra-open, a.ra-open { --ra: #6aa8ff; }   /* leaves the app  */
.ra-sign, a.ra-sign { --ra: #35c39a; }   /* completes it    */
.ra-copy, a.ra-copy { --ra: #98a2b3; }   /* minor utility   */
.ra-fix,  a.ra-fix  { --ra: #f0b429; }   /* diagnostics     */

/* The main action: solid gold, so it reads as the primary control. */
.ra-send {
  --ra: var(--gold);
  color: var(--bg-dark);
  background: var(--gold);
  border-color: var(--gold);
}
.ra-send:hover { background: #ffe23f; border-color: #ffe23f; }
.ra-send:disabled { background: var(--gold); border-color: var(--gold); }

/* When a send has actually failed, "Fix problems" stops being a quiet utility
   and turns red so the way out is obvious.

   Implemented as its own ROLE class that JS SWAPS IN for .ra-fix, not as a
   modifier layered on top of it. A modifier (.ra-fix.needs-attention) was tried
   first and its background/border silently lost to the base .report-action rule
   even when written later, more specific, and !important - while its --ra did
   apply. Swapping the role means exactly one role rule ever matches, so there is
   nothing to override and it uses the same code path as the other four buttons. */
.ra-alert, a.ra-alert { --ra: #f0806b; }

@media (max-width: 720px) {
  .output-header { flex-wrap: wrap; gap: 8px; }
  .report-action, a.report-action { height: 32px; padding: 0 10px; font-size: 0.78rem; }
}