:root {
  --bg: #000;
  --bg-deep: #090c29;
  --panel: #151a3b;
  --panel-light: #1f2552;
  --border: #3a3f99;
  --accent: #5acce6;
  --accent-dim: #348cfd;
  --text: #e1e1e1;
  --text-dim: #9aa0c3;
  --danger: #f16a6a;
  --warning: #f5b342;
  --success: #5fd39a;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

a {
  color: var(--accent);
  text-decoration: none;
}

button {
  font: inherit;
  color: var(--text);
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

button:disabled {
  opacity: 0.4;
  cursor: default;
}

button.primary {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: #fff;
}

button.danger {
  background: color-mix(in srgb, var(--danger) 80%, #000);
  border-color: var(--danger);
  color: #fff;
}

button.danger:hover:not(:disabled) {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

input {
  font: inherit;
  width: 100%;
  color: var(--text);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
}

input:focus {
  outline: none;
  border-color: var(--accent);
}

input[type="date"] {
  color-scheme: dark;
}

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 48px;
  padding: 0 16px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--panel-light);
  flex: none;
}

.topbar .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.topbar .logo-mark {
  flex: none;
}

.topbar .source {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 12px;
}

.banner {
  padding: 6px 16px;
  font-size: 13px;
  background: #3a2a05;
  color: var(--warning);
  border-bottom: 1px solid var(--warning);
}

main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Study list ---------- */

.study-list {
  flex: 1;
  overflow: auto;
  padding: 16px 24px;
  background: var(--bg);
}

.study-list h1 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 400;
}

.study-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}

.study-list-head h1 {
  margin: 0;
}

a.button.workflow-builder-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 6px;
}

a.button.workflow-builder-home:hover,
a.button.workflow-builder-home:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.study-list h1 .count {
  color: var(--text-dim);
  font-size: 14px;
  margin-left: 8px;
}

.study-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.study-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-dim);
  padding: 6px 8px 2px;
  background: var(--panel);
  user-select: none;
  white-space: nowrap;
}

.study-table th.sortable {
  cursor: pointer;
}

.study-table th.sorted {
  color: var(--accent);
}

.study-table tr.filters th {
  padding: 4px 8px 8px;
}

.study-table tr.filters .range {
  display: flex;
  gap: 4px;
}

.study-table td {
  padding: 8px;
  border-bottom: 1px solid var(--panel-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-table tr.study-row {
  cursor: pointer;
}

.study-table tr.study-row:hover td {
  background: var(--panel);
}

.study-table tr.study-row.expanded td {
  background: var(--panel);
  border-bottom-color: transparent;
}

.study-table tr.detail td {
  background: var(--bg-deep);
  padding: 8px 16px 16px;
  white-space: normal;
}

.series-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.series-table th,
.series-table td {
  text-align: left;
  padding: 4px 8px;
  font-size: 13px;
  border-bottom: 1px solid var(--panel-light);
}

.series-table th {
  color: var(--text-dim);
  background: transparent;
}

.list-state {
  padding: 32px;
  text-align: center;
  color: var(--text-dim);
}

.list-state.error {
  color: var(--danger);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 0;
  color: var(--text-dim);
}

/* ---------- Viewer ---------- */

.viewer-page {
  flex: 1;
  display: flex;
  min-height: 0;
  background: var(--bg);
}

a.button {
  display: inline-block;
  border-radius: 4px;
  padding: 4px 16px;
  border: 1px solid var(--border);
}

a.button.primary {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: #fff;
}

.study-table tr.filters .range input {
  min-width: 0;
}

.study-table th .th-button {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
}

.study-table th .th-button:focus-visible,
.row-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.row-toggle {
  all: unset;
  cursor: pointer;
  width: 16px;
  margin-right: 6px;
  color: var(--text-dim);
}

.viewport-grid {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  background: var(--panel-light);
}

.viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
  user-select: none;
}

.viewport canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.viewport .overlay,
.viewport .orientation,
.viewport .scale-bar,
.viewport .viewport-status {
  position: absolute;
  pointer-events: none;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}

.viewport .overlay.top-left { top: 8px; left: 10px; }
.viewport .overlay.top-right { top: 8px; right: 10px; text-align: right; }
.viewport .overlay.bottom-left { bottom: 8px; left: 10px; }
.viewport .overlay.bottom-right { bottom: 8px; right: 10px; text-align: right; }

.viewport .orientation {
  font-size: 14px;
  font-weight: 600;
  color: var(--warning);
}

.viewport .orientation.top { top: 8px; left: 50%; transform: translateX(-50%); }
.viewport .orientation.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
.viewport .orientation.left { left: 10px; top: 50%; transform: translateY(-50%); }
.viewport .orientation.right { right: 24px; top: 50%; transform: translateY(-50%); }

.viewport .scale-bar {
  bottom: 48px;
  right: 10px;
  height: 6px;
  border: 1px solid var(--text);
  border-top: none;
}

.viewport .scale-bar span {
  position: absolute;
  right: 0;
  bottom: 6px;
}

.viewport .viewport-status {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: var(--text-dim);
}

.viewport .viewport-status.error {
  color: var(--danger);
}

/* Slides are mostly white glass: corner texts and the scale bar sit on dark
   translucent chips, readable over glass and tissue alike. */
.slide-viewport .overlay > div,
.slide-viewport .scale-bar span {
  width: fit-content;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(10, 14, 30, 0.62);
  text-shadow: none;
}

.slide-viewport .overlay > div + div {
  margin-top: 2px;
}

.slide-viewport .overlay.top-right > div,
.slide-viewport .overlay.bottom-right > div {
  margin-left: auto;
}

.slide-viewport .scale-bar {
  border-color: rgba(10, 14, 30, 0.85);
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9));
}

.slide-viewport .scale-bar span {
  bottom: 8px;
  white-space: nowrap;
}

.slide-viewport canvas {
  cursor: grab;
}

.slide-viewport canvas:active {
  cursor: grabbing;
}

.viewer-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.toolbar {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--panel-light);
  flex: none;
}

/* Sections, a thin rule between two of them. */
.toolbar > .group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.toolbar > .group + .group {
  padding-left: 6px;
  border-left: 1px solid var(--panel-light);
}

.toolbar .icon-tool,
.toolbar .menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  min-width: 32px;
  padding: 0 7px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}

.toolbar .icon-tool:hover:not(:disabled),
.toolbar .menu-toggle:hover:not(:disabled) {
  color: var(--text);
  background: var(--panel-light);
  border-color: transparent;
}

.toolbar .icon-tool.with-label span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.toolbar button.active,
.toolbar button.active:hover:not(:disabled) {
  color: #fff;
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}

/* The chevron of a menu, narrow next to the button it completes. */
.toolbar .menu-toggle {
  min-width: 18px;
  padding: 0 3px;
}

.toolbar .menu-toggle.with-face {
  padding: 0 6px;
}

.toolbar .menu-toggle.open {
  color: var(--text);
  background: var(--panel-light);
}

.toolbar .menu-toggle.lit {
  color: var(--accent);
}

.toolbar .menu-toggle.open .chevron-icon {
  transform: rotate(180deg);
}

.toolbar .tool-icon {
  flex: none;
  display: block;
}

.toolbar-menu {
  position: relative;
  display: flex;
}

.menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.menu-popover[hidden] {
  display: none;
}

.menu-popover hr {
  width: 100%;
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--panel-light);
}

.menu-popover .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
}

.menu-popover .menu-item:hover:not(:disabled) {
  color: var(--text);
  background: var(--panel-light);
  border-color: transparent;
}

.menu-popover .menu-item .tool-icon {
  color: var(--text-dim);
}

.menu-popover .menu-item.active .tool-icon {
  color: #fff;
}

.layout-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.layout-presets .layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 11px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
}

.layout-presets .layout:hover:not(:disabled) {
  color: var(--text);
  background: var(--panel-light);
  border-color: transparent;
}

.toolbar .fps {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 12px;
}

.toolbar .fps input {
  width: 56px;
}

.toolbar .fps.cine-reverse input {
  width: auto;
  margin: 0;
}

/* Cine played backwards: the play icon points the other way. */
.toolbar [data-testid="action-cine"].reverse .tool-icon,
.toolbar [data-testid="action-cine"].reverse svg {
  transform: scaleX(-1);
}

.viewport .stack-scrollbar {
  position: absolute;
  right: 2px;
  top: 40px;
  bottom: 70px;
  width: 14px;
  height: auto;
  writing-mode: vertical-lr;
  padding: 0;
  border: none;
  background: transparent;
  accent-color: var(--accent);
  opacity: 0.6;
}

.viewport .stack-scrollbar:hover {
  opacity: 1;
}

.series-panel {
  width: 220px;
  max-width: 40vw;
  flex: none;
  overflow-y: auto;
  background: var(--bg-deep);
  border-right: 1px solid var(--panel-light);
  padding: 8px;
}

.series-panel-head {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
}

.series-panel-head h2 {
  flex: 1;
  min-width: 0;
}

/* Fold button at the edge facing the viewports: its chevrons point left. */
.series-panel .panel-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: -4px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
}

.series-panel .panel-toggle:hover {
  color: var(--accent);
}

.series-panel .panel-toggle-icon {
  transform: rotate(180deg);
  transition: transform 0.15s;
}

/* Folded: a strip holding only the button, pointing back out. */
.series-panel.collapsed {
  width: 32px;
  padding: 0;
  overflow: hidden;
}

.series-panel.collapsed .series-panel-head {
  margin: 0;
}

.series-panel.collapsed .series-panel-head > :not(.panel-toggle),
.series-panel.collapsed > :not(.series-panel-head) {
  display: none;
}

.series-panel.collapsed .panel-toggle {
  width: 32px;
  height: 36px;
  margin: 0;
}

.series-panel.collapsed .panel-toggle-icon {
  transform: none;
}

/* Handle on the edge of a side panel facing the viewports: it takes no room
   (negative margins), straddles the panel's border and lights up on hover. */
.panel-resizer {
  position: relative;
  z-index: 20;
  flex: none;
  width: 7px;
  margin: 0 -3px;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}

.panel-resizer[hidden] {
  display: none;
}

.panel-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 3px;
  background: transparent;
  transition: background 0.1s;
}

.panel-resizer:hover::after,
.panel-resizer:focus-visible::after,
.panel-resizer.dragging::after {
  background: var(--accent);
}

.series-panel-head .series-size-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
}

.series-panel-head .series-size-toggle:hover {
  color: var(--accent);
  border-color: var(--panel-light);
}

.series-panel h2 {
  margin: 4px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.series-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.series-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--panel-light);
  border-radius: 6px;
  background: var(--panel);
  cursor: grab;
}

.series-card:hover {
  border-color: var(--accent);
}

/* Shown in a viewport: a light outline, the accent for the active one. */
.series-card.shown {
  border-color: rgb(90 204 230 / 30%);
}

.series-card.shown-active {
  border-color: rgb(90 204 230 / 80%);
  box-shadow: 0 0 0 1px rgb(90 204 230 / 35%);
}

.series-card.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.series-card.disabled:hover {
  border-color: var(--panel-light);
}

.series-card .thumbnail {
  width: 100%;
  aspect-ratio: 1;
  background: #000;
  border-radius: 4px;
}

.series-card .thumbnail-frame {
  position: relative;
}

.series-card .thumbnail-frame .thumbnail {
  display: block;
}

.series-card .load-progress {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 4px;
  border-radius: 2px;
  background: rgb(255 255 255 / 20%);
  overflow: hidden;
}

/* Tags of the series, at the bottom left of its thumbnail. */
.series-card .series-tags {
  position: absolute;
  left: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 4px;
  background: rgb(0 0 0 / 70%);
  color: var(--text);
  opacity: 0.85;
}

.series-card .series-tags:hover,
.series-card .series-tags:focus-visible {
  opacity: 1;
}

.series-card .series-tags svg {
  width: 14px;
  height: 14px;
}

/* The loading bar starts right of the tags button. */
.series-card .thumbnail-frame .load-progress {
  left: 32px;
  bottom: 13px;
}

.series-card .load-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.15s linear;
}

/* Step of unknown length: a segment sweeping across the bar. */
.load-progress.indeterminate .load-progress-fill {
  width: 35%;
  animation: load-sweep 1.2s ease-in-out infinite;
}

@keyframes load-sweep {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(290%);
  }
}

/* SEG series being loaded, at the top of the right panel. */
.seg-loading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--panel-light);
  background: var(--panel);
}

.seg-loading-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  font-size: 12px;
}

.seg-loading-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 500;
}

.seg-loading-step {
  color: var(--text-dim);
}

.seg-loading .load-progress {
  height: 6px;
  border-radius: 3px;
  background: rgb(255 255 255 / 12%);
  overflow: hidden;
}

.seg-loading .load-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.15s linear;
}

.series-card .thumbnail.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-weight: 600;
}

.series-card .series-description {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.series-card .series-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.series-card .series-flag {
  font-size: 12px;
  color: var(--warning);
}

/* Shrunk thumbnails: one row per series, a small thumbnail beside its text. */
.series-panel.compact ul {
  gap: 4px;
}

.series-panel.compact .series-card {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 4px;
}

.series-panel.compact .series-card > .thumbnail-frame,
.series-panel.compact .series-card > .thumbnail {
  width: 48px;
  flex: none;
}

.series-panel.compact .series-card .thumbnail.placeholder {
  font-size: 10px;
  overflow: hidden;
}

/* Long modality names (RTSTRUCT, RTDOSE) fit the small tile. */
.series-panel.compact .series-card .thumbnail.placeholder.long {
  font-size: 8px;
  letter-spacing: -0.02em;
}

.series-panel.compact .series-card .load-progress {
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 3px;
}

.series-panel.compact .series-card .series-tags {
  left: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
}

.series-panel.compact .series-card .series-tags svg {
  width: 11px;
  height: 11px;
}

.series-panel.compact .series-card .thumbnail-frame .load-progress {
  left: 21px;
  bottom: 8px;
}

.series-panel.compact .series-info {
  min-width: 0;
  flex: 1;
}

.viewport-cell {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  outline: 1px solid transparent;
  outline-offset: -1px;
}

.viewport-cell.active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
}

.viewport-cell > .viewport {
  flex: 1;
}

/* Why a PR series could not be opened in this cell. */
.viewport-cell > .cell-status {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--danger);
  background: var(--bg-deep);
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

.viewport.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13px;
}

.viewport .overlay.debug {
  top: 50%;
  left: 10px;
  color: var(--accent);
}

.segmentation-panel {
  width: 260px;
  flex: none;
  overflow-y: auto;
  background: var(--bg-deep);
  border-left: 1px solid var(--panel-light);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.segmentation-panel button.download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.segmentation-panel h2 {
  margin: 4px 0;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.segmentation-panel .seg-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.segmentation-panel button.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: #fff;
}

.segmentation-panel .setting {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.segmentation-panel .setting input[type="number"] {
  width: 64px;
}

.segmentation-panel .setting input[type="range"] {
  flex: 1;
}

.segmentation-panel .setting input[type="checkbox"] {
  width: auto;
}

.segmentation-panel .hint {
  font-size: 12px;
  color: var(--text-dim);
}

.segments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.segment-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--panel-light);
  border-radius: 4px;
  cursor: pointer;
}

.segment-row.active {
  border-color: var(--accent);
  background: var(--panel);
}

.segment-row input[type="color"] {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  flex: none;
}

.segment-row .segment-label {
  flex: 1;
  min-width: 0;
}

/* Named by the characterization's label answer: read as text, not a field. */
.segment-row .segment-label.named {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.segment-row button.icon {
  padding: 2px 4px;
  flex: none;
}

.segment-row:not(.layer-row) {
  gap: 3px;
}

.seg-layers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--panel-light);
}

.seg-layers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.seg-layers-header h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.seg-legend-layer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.seg-legend-layer:hover {
  border-color: var(--panel-light);
}

/* The selected segmentation: its active segment is the one framed. */
.seg-legend-layer.selected {
  border-color: var(--accent);
  background: var(--panel);
}

/* Opacity and outline of one segmentation, between its name and segments. */
.seg-legend-display {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 4px 6px;
  border-bottom: 1px solid var(--panel-light);
}

.seg-legend-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Hidden segment: dimmed. */
.legend-segment.hidden-segment .legend-swatch,
.legend-segment.hidden-segment .legend-label,
.segment-row.hidden-segment .segment-label {
  opacity: 0.5;
}

button.icon .btn-icon {
  display: block;
}

.seg-legend-layer h3 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.legend-segment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
}

.legend-segment.active {
  outline: 1px solid var(--accent);
  border-radius: 4px;
}

.legend-segment .legend-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend-segment button.icon {
  padding: 2px 6px;
  flex: none;
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: none;
}

.segment-row button.characterize.todo {
  color: var(--warning);
  border-color: var(--warning);
  font-weight: 700;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

.modal {
  width: min(440px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-deep);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.modal h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.modal .questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal .question {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
}

.modal .question select,
.modal .question textarea {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-light);
  border-radius: 4px;
  padding: 6px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.seg-history {
  display: flex;
  gap: 4px;
}

.viewport .brush-cursor {
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--accent);
  border-radius: 50%;
}

.viewport .scissors-rect {
  position: absolute;
  pointer-events: none;
  border: 1px dashed var(--accent);
}

.viewport .contour-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.viewport .contour-draft {
  fill: rgba(80, 200, 255, 0.15);
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.viewport .contour-draft.erase {
  fill: rgba(255, 90, 90, 0.15);
  stroke: #ff5a5a;
  stroke-dasharray: 4 3;
}

.seg-status {
  margin: 0;
  font-size: 12px;
  color: var(--accent);
}

.seg-status.error {
  color: var(--danger);
}

/* Outcome message with its closing cross. */
.status-message {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 6px 6px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.status-message.error {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.status-message .status-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

button.icon.status-close {
  flex: none;
  padding: 3px;
  line-height: 0;
  background: transparent;
  border-color: transparent;
  color: inherit;
  opacity: 0.7;
}

button.icon.status-close:hover {
  opacity: 1;
  background: var(--panel-light);
  border-color: transparent;
}

.viewport .annotation-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* RT structures: under the annotations, above the canvas. */
.viewport .rt-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.rt-layer .rt-roi,
.rt-layer .rt-line {
  stroke-width: 1.5px;
}

.rt-layer .rt-roi.selected {
  stroke-width: 3px;
}

.rt-layer .rt-line {
  fill: none;
}

.rt-layer .rt-point {
  stroke-width: 2px;
  fill: none;
}

.annotation-layer .annotation line,
.annotation-layer .annotation polyline,
.annotation-layer .annotation ellipse,
.annotation-layer .annotation rect {
  fill: none;
  stroke: #ffd400;
  stroke-width: 1.5;
}

.annotation-layer .annotation.selected line,
.annotation-layer .annotation.selected polyline,
.annotation-layer .annotation.selected ellipse,
.annotation-layer .annotation.selected rect {
  stroke: var(--accent);
}

.annotation-layer .annotation .handle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.annotation-layer .annotation text {
  fill: #ffd400;
  font-size: 12px;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 3px;
}

.annotation-layer marker polygon {
  fill: #ffd400;
}

/* Region of a report link: bright, thicker than a measurement, never filled. */
.annotation-layer .sr-highlight polyline,
.annotation-layer .sr-highlight polygon {
  fill: none;
  stroke: #ff5fd2;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 2px #000);
}

.annotation-layer .sr-highlight circle {
  fill: #ff5fd2;
  stroke: #000;
  stroke-width: 1;
}

/* Graphics and texts of a presentation state. */
.viewport .presentation-layer {
  --pr-default: #ffd24a;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.presentation-layer .pr-graphic {
  fill: none;
  stroke: var(--pr-default);
  vector-effect: non-scaling-stroke;
}

.presentation-layer .pr-graphic * {
  vector-effect: non-scaling-stroke;
}

.presentation-layer .pr-text {
  fill: var(--pr-default);
  font-size: 13px;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 3px;
}

.presentation-layer .pr-text-box {
  fill: none;
  stroke: var(--pr-default);
  stroke-opacity: 0.6;
  stroke-width: 1px;
}

.presentation-layer .pr-anchor-line {
  stroke: var(--pr-default);
  stroke-width: 1px;
}

.right-panel {
  width: 280px;
  max-width: 40vw;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-deep);
  border-left: 1px solid var(--panel-light);
}

.right-panel .panel-head {
  display: flex;
  flex: none;
  border-bottom: 1px solid var(--panel-light);
}

/* Too narrow for every tab: they scroll sideways, over a thin bar. */
.right-panel .tabs {
  flex: 1;
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.right-panel .tabs::-webkit-scrollbar {
  height: 4px;
}

.right-panel .tabs::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.right-panel .panel-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
}

.right-panel .panel-toggle:hover {
  color: var(--accent);
}

.right-panel .panel-toggle-icon {
  transition: transform 0.15s;
}

/* Folded: a strip holding only the button, pointing back out. */
.right-panel.collapsed {
  width: 32px;
}

.right-panel.collapsed .panel-head {
  border-bottom: none;
}

.right-panel.collapsed .panel-toggle {
  height: 36px;
}

.right-panel.collapsed .tabs,
.right-panel.collapsed > :not(.panel-head) {
  display: none;
}

.right-panel.collapsed .panel-toggle-icon {
  transform: rotate(180deg);
}

.right-panel .tabs button {
  flex: 1 0 auto;
  white-space: nowrap;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 8px;
}

.right-panel .tabs button.active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.right-panel .segmentation-panel {
  width: auto;
  border-left: none;
  flex: 1;
}

/* The followed workflow's name: as tall as its content, its tools just below. */
.right-panel .followed-workflow {
  flex: none;
  padding-bottom: 0;
}

.right-panel .followed-workflow p {
  margin-bottom: 0;
}

.measurements-panel {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.measurements-panel h2 {
  margin: 4px 0;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.measurements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.measurement-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--panel-light);
  border-radius: 4px;
}

.measurement-row.selected {
  border-color: var(--accent);
}

.measurement-row .measurement-kind {
  font-size: 12px;
  color: var(--text-dim);
}

.measurement-row .measurement-value {
  grid-column: 1 / -1;
  text-align: left;
  font-size: 12px;
  background: transparent;
  border: none;
  color: #ffd400;
  padding: 2px 0;
}

.measurement-row .icon {
  grid-row: 1;
  grid-column: 3;
  padding: 2px 6px;
}

.viewport .crosshair-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.viewport .crosshair-layer line {
  stroke: #3cb44b;
  stroke-width: 1;
  stroke-dasharray: 6 4;
}

.viewport .reference-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.viewport .reference-layer line {
  stroke: #f5c542;
  stroke-width: 1.5;
}

/* 3D cell (VolumeViewport): preset menu at the top left, standard views at
   the top right, the reduction at the bottom left, loading in the middle. */
.viewport.vrt .vrt-presets {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 2;
}

.viewport.vrt button {
  font: inherit;
  color: var(--text);
  background: rgb(0 0 0 / 60%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 4px;
  cursor: pointer;
}

.viewport.vrt button:hover,
.viewport.vrt button:focus-visible {
  border-color: var(--accent);
}

.viewport.vrt .vrt-preset-toggle,
.viewport.vrt .vrt-preset-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 12px;
  white-space: nowrap;
}

.viewport.vrt .vrt-preset-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding: 4px;
  background: var(--bg-deep);
  border: 1px solid var(--panel-light);
  border-radius: 4px;
}

.viewport.vrt .vrt-preset-list[hidden] {
  display: none;
}

.viewport.vrt .vrt-preset-item {
  border-color: transparent;
  background: transparent;
}

.viewport.vrt .vrt-preset-item.active {
  border-color: var(--accent);
}

.viewport.vrt .vrt-swatch {
  width: 22px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgb(255 255 255 / 30%);
}

.viewport.vrt .vrt-views {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  gap: 3px;
  z-index: 2;
}

.viewport.vrt .vrt-views button {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
}

/* Debug timings above the reduction, clear of the left letter. */
.viewport.vrt .overlay.debug { top: auto; bottom: 28px; }

/* Under the presets and the views (the top letter would sit under the views
   of a narrow cell), in one column: a beam's-eye view's banner, then the top
   letter, never under it however many lines the banner takes. */
.viewport.vrt .vrt-top {
  position: absolute;
  top: 36px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}

.viewport.vrt .vrt-top .orientation.top {
  position: static;
  transform: none;
}

/* What the cell says of its reductions (the PET's above the CT's), at the
   bottom left. */
.viewport.vrt .vrt-notes {
  position: absolute;
  left: 10px;
  bottom: 8px;
  max-width: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.viewport.vrt .vrt-reduced,
.viewport.vrt .vrt-pet-reduced {
  font-size: 12px;
  color: var(--warning);
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}

/* The surfaces' and the PET's loading and failures, low in the middle,
   stacked in one box: the CT stays in view, two of them never overlap. */
.viewport.vrt .vrt-statuses {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: min(260px, 70%);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  z-index: 1;
}

.viewport.vrt .vrt-pet-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}

/* What the last double-click picked (« Pointé : GTV »), a chip at the bottom
   right, clear of the notes (bottom left) and the statuses (middle). */
.viewport.vrt .vrt-picked {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  max-width: 40%;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--text);
  background: rgb(0 0 0 / 60%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewport.vrt .vrt-pet-status.error {
  color: var(--danger);
}

.viewport.vrt .vrt-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(260px, 70%);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  pointer-events: none;
}

.viewport.vrt .vrt-loading .load-progress,
.viewport.vrt .vrt-pet-status .load-progress {
  height: 6px;
  border-radius: 3px;
  background: rgb(255 255 255 / 15%);
  overflow: hidden;
}

.viewport.vrt .vrt-loading .load-progress-fill,
.viewport.vrt .vrt-pet-status .load-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.15s linear;
}

/* The crosshair point in 3D: always drawn, a circle and a cross. */
.viewport .vrt-crosshair-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.viewport .vrt-crosshair-layer circle,
.viewport .vrt-crosshair-layer path {
  fill: none;
  stroke: #3cb44b;
  stroke-width: 1.5;
}

/* The marks of the RT structures in 3D (points, open contours), above the
   image, in the colour of their structure (stroke and fill attributes). */
.viewport .vrt-marks-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.vrt-marks-layer .vrt-mark path,
.vrt-marks-layer .vrt-mark polyline {
  fill: none;
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.vrt-marks-layer .vrt-mark text {
  font-size: 12px;
  paint-order: stroke;
  stroke: rgb(0 0 0 / 75%);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* The beams of the plans in 3D (spec « vrt-rtplan » §6), in the colour of
   their beam (stroke attribute of each part): widths by part (--w), × 2 for
   the chosen beam (--k), × 1.5 for the field of an arc's shown point (--c);
   the part deeper than the isocentre's plane dashed and half as opaque. */
.vrt-marks-layer .vrt-beam {
  --k: 1;
}

.vrt-marks-layer .vrt-beam.selected {
  --k: 2;
}

.vrt-marks-layer .vrt-beam path {
  fill: none;
  stroke-width: calc(var(--w, 1px) * var(--k) * var(--c, 1));
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(var(--o, 1) * var(--b, 1));
}

.vrt-marks-layer .vrt-beam .current {
  --c: 1.5;
}

.vrt-marks-layer .vrt-beam .vrt-beam-axis.in,
.vrt-marks-layer .vrt-beam .vrt-beam-aperture {
  --w: 1.5px;
}

.vrt-marks-layer .vrt-beam .vrt-beam-jaws path {
  stroke-dasharray: 2 2;
}

.vrt-marks-layer .vrt-beam .vrt-beam-fan.spoke {
  --w: 0.75px;
  --o: 0.6;
}

.vrt-marks-layer .vrt-beam.selected .vrt-beam-fan.spoke {
  --o: 1;
}

.vrt-marks-layer .vrt-beam path.behind {
  --b: 0.5;
  stroke-dasharray: 4 3;
}

/* The name of a beam where its axis enters the CT: it takes the pointer
   (click: the beam chosen in the « Plan » tab). */
.vrt-marks-layer .vrt-beam-label {
  font-size: 12px;
  paint-order: stroke;
  stroke: rgb(0 0 0 / 75%);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: auto;
  cursor: pointer;
}

.vrt-marks-layer .vrt-beam.selected .vrt-beam-label {
  font-weight: 700;
}

/* A beam's-eye view (spec « vrt-rtplan » §10): its banner at the top of
   `.vrt-top`, centred, only its button takes the pointer; compact in a
   narrow cell (`narrow`: the title alone, smaller); its field over the image
   in the colour of its beam (stroke attribute), the aperture wider, the jaws
   dashed when an MLC shapes the field, the graticule of the collimator's
   axes in white. */
.viewport.vrt .vrt-bev-banner {
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  background: rgb(0 0 0 / 60%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 4px;
  pointer-events: none;
}

.viewport.vrt .vrt-bev-banner.narrow {
  gap: 6px;
  padding: 2px 6px;
  font-size: 11px;
}

.viewport.vrt .vrt-bev-banner.narrow .vrt-bev-help {
  display: none;
}

.viewport.vrt .vrt-bev-text {
  min-width: 0;
}

.viewport.vrt .vrt-bev-help {
  color: var(--text-dim);
}

.viewport.vrt .vrt-bev-banner button {
  flex: none;
  padding: 2px 8px;
  font-size: inherit;
  white-space: nowrap;
  pointer-events: auto;
}

.vrt-marks-layer .vrt-bev path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vrt-marks-layer .vrt-bev-aperture path {
  stroke-width: 2px;
}

.vrt-marks-layer .vrt-bev-jaws path {
  stroke-width: 1px;
}

.vrt-marks-layer .vrt-bev-jaws.dashed path {
  stroke-dasharray: 4 3;
}

.vrt-marks-layer .vrt-bev-graticule path {
  stroke: rgb(255 255 255 / 70%);
  stroke-width: 1px;
}

.vrt-marks-layer .vrt-bev-graticule text {
  fill: rgb(255 255 255 / 85%);
  font-size: 11px;
  paint-order: stroke;
  stroke: rgb(0 0 0 / 80%);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.vrt-marks-layer path.vrt-bev-centre {
  stroke-width: 1.5px;
}

/* An isocentre of the plans in 3D: a cross of 14 px and its name, as in 2D. */
.vrt-marks-layer .vrt-iso-mark path {
  fill: none;
  stroke: #ffd24d;
  stroke-width: 1.5px;
}

.vrt-marks-layer .vrt-iso-mark text {
  fill: #ffd24d;
  font-size: 11px;
  paint-order: stroke;
  stroke: rgb(0 0 0 / 80%);
  stroke-width: 3px;
}

.mpr-status {
  margin: 0;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--warning);
  background: var(--bg-deep);
}

/* Gear of the top bar and its settings dialog. */
.topbar .settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.topbar .settings-toggle:hover,
.topbar .settings-toggle[aria-expanded="true"] {
  color: var(--text);
  background: var(--panel);
  border-color: var(--panel-light);
}

.topbar .settings-toggle .btn-icon {
  width: 18px;
  height: 18px;
}

.modal.settings-dialog {
  width: min(380px, 90vw);
}

.settings-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 12px 16px;
  margin: 0;
  font-size: 13px;
}

.settings-list dt {
  color: var(--text-dim);
}

.settings-list dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.settings-list select {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-light);
  border-radius: 4px;
  padding: 4px 6px;
  min-width: 140px;
}

.settings-version code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--panel-light);
  overflow-wrap: anywhere;
}

/* « À propos » dialog of the top bar (its button is styled as the gear). */
.modal.about-dialog {
  width: min(440px, 90vw);
}

.about-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-head .logo-mark {
  width: 44px;
  height: 44px;
  flex: none;
}

.about-head h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.about-tagline {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

.about-licence {
  flex-wrap: wrap;
}

.about-licence-badge {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bg-deep);
  background: var(--warning);
}

.about-licence-summary {
  font-size: 12px;
  color: var(--text-dim);
}

.about-research {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}

.about-credits {
  padding-top: 12px;
  border-top: 1px solid var(--panel-light);
  font-size: 13px;
  text-align: center;
}

.about-credits p {
  margin: 0 0 4px;
}

.about-heart {
  color: var(--danger);
}

.about-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  font-size: 13px;
}

.about-contact a {
  color: var(--accent);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.modal.tag-browser {
  width: min(900px, 92vw);
  height: 80vh;
  max-height: 80vh;
  overflow: hidden;
}

.tag-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tag-instance {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  color: var(--text-dim);
  font-size: 13px;
}

.tag-instance-nav {
  display: flex;
  gap: 4px;
}

.tag-instance-nav button {
  padding: 0 8px;
  line-height: 22px;
}

.tag-browser input[type="search"] {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-light);
  border-radius: 4px;
  padding: 6px 8px;
}

.tag-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--panel-light);
  border-radius: 4px;
}

.tag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.tag-table th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 4px 6px;
  background: var(--panel);
  color: var(--text-dim);
  font-weight: 500;
}

.tag-table td {
  padding: 3px 6px;
  border-top: 1px solid var(--panel-light);
  vertical-align: top;
}

.tag-table td.tag {
  white-space: nowrap;
}

.tag-table td.value {
  word-break: break-all;
}

/* Text followed by a copy button (tag browser, SR document). */
.copyable {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
}

.copyable-text {
  min-width: 0;
}

button.icon.copy-button {
  flex: none;
  padding: 2px;
  background: transparent;
  border-color: transparent;
  color: var(--text-dim);
  line-height: 0;
  opacity: 0.35;
  transition: opacity 0.12s;
}

tr:hover button.icon.copy-button,
.copyable:hover button.icon.copy-button,
button.icon.copy-button:focus-visible {
  opacity: 1;
}

button.icon.copy-button:hover {
  background: var(--panel-light);
  border-color: transparent;
}

button.icon.copy-button.copied {
  opacity: 1;
  color: var(--accent);
}

.tag-table tr.item td {
  color: var(--text-dim);
  font-style: italic;
}

/* Launch from a portal: loading, refusal and failure screens. */
.boot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 16px;
  color: var(--text-dim);
  background: radial-gradient(ellipse at center, var(--bg-deep) 0%, var(--bg) 70%);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--panel-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.4s;
  }
}

.boot-card {
  max-width: 460px;
  padding: 32px 36px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.boot-card h1 {
  margin: 12px 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.boot-card p {
  margin: 8px 0;
  line-height: 1.5;
}

.boot-card .detail {
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.8;
}

.boot-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
  color: var(--warning);
  border: 2px solid var(--warning);
}

.boot-icon.denied {
  color: var(--danger);
  border-color: var(--danger);
}

.boot-action {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.boot-action:hover {
  background: var(--accent);
  color: var(--bg);
}

.workflow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--accent);
}

.workflow-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-chooser .workflow-select select {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
}

.workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

label.button {
  display: inline-block;
  font-size: 14px;
  color: var(--text);
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
}

label.button:hover,
label.button:focus-within {
  border-color: var(--accent);
  color: var(--accent);
}

/* « Créer ↗ »: the workflow guide and editor, in a new tab. */
a.button.workflow-builder-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--text);
  background: var(--panel-light);
  border: 1px solid var(--border);
  padding: 4px 10px;
}

a.button.workflow-builder-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Structured report cell (components/sr_viewport.rs) */
.sr-viewport {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-deep);
  color: var(--text);
}

.sr-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-light);
  font-size: 12px;
}

.sr-bar .sr-toc-toggle {
  border: 1px solid var(--panel-light);
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  padding: 1px 6px;
  line-height: 1.2;
}

.sr-bar .sr-toc-toggle.active {
  color: var(--text);
  border-color: var(--border);
}

.sr-tabs {
  display: flex;
  gap: 4px;
}

.sr-tabs button {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 7px 6px 5px;
}

.sr-tabs button.active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.sr-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.sr-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 12px 18px 24px;
  font-size: 13px;
  line-height: 1.5;
  user-select: text;
}

.sr-state {
  color: var(--text-dim);
}

.sr-state.error {
  color: var(--danger);
}

.sr-header {
  border-bottom: 1px solid var(--panel-light);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.sr-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
}

.sr-header-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12px;
}

.sr-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #14532d;
  color: #bbf7d0;
}

.sr-badge.pending {
  background: #713f12;
  color: #fde68a;
}

.sr-meta {
  color: var(--text-dim);
}

.sr-heading {
  color: #fff;
  font-weight: 600;
  margin: 14px 0 4px;
}

h2.sr-heading {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

h3.sr-heading {
  font-size: 13px;
  color: #cbd5e1;
  margin-top: 10px;
}

h4.sr-heading,
h5.sr-heading,
h6.sr-heading {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 8px;
}

.sr-paragraph {
  margin: 0 0 6px;
}

.sr-paragraph p {
  margin: 0;
  white-space: pre-line;
}

.sr-json pre {
  margin: 2px 0 0;
  padding: 6px 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--bg-deep);
  border: 1px solid var(--panel-light);
  border-radius: 4px;
}

.sr-paragraph-label,
.sr-field-label {
  color: var(--text-dim);
}

.sr-field,
.sr-composite {
  display: flex;
  gap: 8px;
  margin: 0 0 3px;
}

.sr-field-label {
  min-width: 120px;
}

.sr-field-value {
  white-space: pre-line;
}

/* A value of the report followed by its copy button. */
.sr-copyable {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.sr-copyable > p,
.sr-copyable > pre {
  flex: 0 1 auto;
  min-width: 0;
}

.sr-json .sr-copyable > pre {
  flex: 1;
}

.sr-copyable:hover button.icon.copy-button {
  opacity: 1;
}

.sr-context,
.sr-see-also {
  color: var(--text-dim);
  font-size: 12px;
  margin: 0 0 4px;
}

.sr-link-row {
  margin: 0 0 4px;
}

.sr-link {
  font-size: 12px;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  padding: 0 6px;
}

.sr-link:hover:not([data-disabled="true"]) {
  background: var(--panel-light);
}

/* Reference outside the study or not found: kept visible, with its reason as a tooltip. */
.sr-link[data-disabled="true"] {
  color: var(--text-dim);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 0.6;
}

.sr-bar .sr-instance-select {
  margin-left: auto;
  max-width: 45%;
  font-size: 12px;
  padding: 1px 4px;
}

/* Right of the bar, after the instance selector when there is one. */
.sr-bar .sr-load-measures {
  margin-left: auto;
  font-size: 12px;
  padding: 1px 10px;
}

.sr-bar .sr-instance-select ~ .sr-load-measures {
  margin-left: 0;
}

.sr-toc {
  flex: 0 0 auto;
  width: 30%;
  max-width: 220px;
  min-width: 110px;
  overflow-y: auto;
  padding: 8px 0;
  border-right: 1px solid var(--panel-light);
  background: var(--panel);
  font-size: 12px;
}

.sr-toc-entry {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 3px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-toc-entry[data-level="1"] {
  font-weight: 600;
}

.sr-toc-entry:not([data-level="1"]) {
  color: var(--text-dim);
}

.sr-toc-entry:hover {
  background: var(--panel-light);
  color: var(--text);
}

.sr-toc-empty {
  color: var(--text-dim);
  padding: 0 8px;
  margin: 0;
}

.sr-see-also-link {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--accent);
  font-size: inherit;
  text-decoration: underline dotted;
}

.sr-tree {
  font-size: 12px;
  line-height: 1.45;
}

.sr-tree-children {
  margin-left: 9px;
  padding-left: 9px;
  border-left: 1px solid var(--panel-light);
}

.sr-tree-children[hidden] {
  display: none;
}

.sr-tree-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 1px 0;
}

.sr-tree-toggle,
.sr-tree-leaf {
  flex: 0 0 14px;
  width: 14px;
}

.sr-tree-toggle {
  border: none;
  background: transparent;
  color: var(--text-dim);
  padding: 0;
  line-height: 1;
}

.sr-tree-relationship {
  color: var(--text-dim);
  font-size: 10.5px;
}

.sr-tree-type {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--accent);
}

.sr-tree-concept {
  color: var(--text);
  font-weight: 600;
}

.sr-tree-value {
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Presentation states: badge, list, scrollbar ticks. */
.viewport .pr-menu-root {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pr-badge {
  padding: 2px 10px;
  font-size: 12px;
  color: var(--text);
  background: rgba(21, 26, 59, 0.85);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.pr-badge.inactive {
  color: var(--text-dim);
  opacity: 0.6;
}

.pr-menu {
  margin-top: 4px;
  min-width: 260px;
  max-width: 360px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  font-size: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.pr-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 4px 6px;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.pr-option:hover {
  background: var(--panel-light);
}

.pr-option.applied {
  border-left-color: var(--accent);
}

.pr-option.disabled {
  color: var(--text-dim);
  opacity: 0.6;
}

.pr-option-label {
  font-weight: 600;
}

.pr-option-description,
.pr-option-meta {
  color: var(--text-dim);
}

.pr-option-reason {
  color: var(--danger);
}

.pr-details h4 {
  margin: 8px 0 2px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.pr-layer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 4px;
}

.pr-notice {
  margin: 2px 0;
  color: var(--warning);
}

.viewport .pr-ticks {
  position: absolute;
  right: 16px;
  top: 40px;
  bottom: 70px;
  width: 6px;
  pointer-events: none;
}

.viewport .pr-tick {
  position: absolute;
  left: 0;
  width: 6px;
  height: 2px;
  margin-top: -1px;
  background: var(--warning);
}

/* PET fusion: colour scale, badge and menu, value under the pointer. */
.viewport .color-scale {
  position: absolute;
  right: 34px;
  top: 96px;
  height: calc(50% - 130px);
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  font-size: 11px;
  color: var(--text);
  text-shadow: 0 0 2px #000, 0 0 2px #000;
  z-index: 2;
}

.color-scale-status {
  max-width: 160px;
  text-align: right;
  color: var(--warning);
}

.color-scale-body {
  flex: 1;
  display: flex;
  gap: 4px;
  min-height: 60px;
}

.color-scale-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}

.color-scale-bar {
  width: 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.pet-menu {
  margin-top: 4px;
  min-width: 260px;
  max-width: 340px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  font-size: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.pet-menu ul {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

/* The « TEP » tab of the right panel: the same settings, laid out in the panel. */
.pet-menu.pet-menu-panel {
  margin-top: 0;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.pet-menu-panel .pet-row input[type="range"],
.pet-menu-panel .pet-row select {
  flex: 1;
  min-width: 0;
}

.pet-menu-panel .pet-switch {
  align-self: flex-start;
}

/* A PET series of the list, with the eye of the fused one at its right. */
.pet-option-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pet-option-row .pr-option {
  flex: 1;
  min-width: 0;
}

.pet-option-row button.icon {
  flex: none;
  padding: 2px 6px;
}

.pet-option-row button.icon[aria-pressed="false"] {
  color: var(--text-dim);
}

/* In the panel, the bounds share the row's width with its label and unit. */
.pet-menu-panel .pet-row input[type="number"] {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.pet-menu-panel .pet-row > span:first-child {
  flex: none;
  min-width: 84px;
}

.pet-menu-panel .pet-row input[type="checkbox"] {
  flex: none;
  width: auto;
  margin: 0;
}

/* A checkbox row: the box, then its text. */
.pet-menu-panel .pet-row:has(> input[type="checkbox"]:first-child) > span {
  min-width: 0;
  color: var(--text);
}

.pet-settings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 2px;
  border-top: 1px solid var(--border);
}

.pet-3d {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.pet-3d h3 {
  margin: 0;
  font-size: 12px;
}

.pet-3d input[type="range"] {
  flex: 1;
  min-width: 0;
}

.pet-3d output {
  min-width: 32px;
  text-align: right;
}

/* Without a reliable SUV, the default foci threshold is a fraction of the window. */
.pet-3d-suv-hint {
  margin: 0;
  font-size: 12px;
  color: var(--warning);
}

.pet-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pet-row > span:first-child {
  min-width: 90px;
  color: var(--text-dim);
}

.pet-row input[type="number"] {
  width: 70px;
}

.pet-presets {
  flex-wrap: wrap;
}

.pet-preset,
.pet-switch {
  padding: 2px 8px;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

/* « Afficher / Masquer la TEP » while the PET is shown. */
.pet-switch.active {
  border-color: var(--accent);
  color: var(--accent);
}

.pet-status-line {
  margin: 4px 0;
  color: var(--warning);
}

.pet-suv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.pet-suv dt {
  color: var(--text-dim);
}

.pet-suv dd {
  margin: 0;
}

.pet-suv-unavailable {
  margin: 6px 0 0;
  color: var(--warning);
}

/* Values under the pointer (heatmaps, dose, PET), stacked bottom centre. */
.viewport .value-lines {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.viewport .pet-value {
  font-size: 12px;
  color: #ffb37a;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
  white-space: pre-line;
  text-align: center;
}

.viewport .seg-value {
  color: #9fe3ff;
}

/* « RT Struct » tab. */
.rt-set + .rt-set {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.rt-set.other-series .seg-legend-header h3,
.rt-set.other-series .rt-set-meta {
  font-style: italic;
}

.rt-set-meta {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}

.rt-instance-select {
  width: 100%;
}

.rt-roi-row {
  cursor: pointer;
}

.rt-roi-row .rt-roi-type {
  flex: none;
  font-size: 11px;
  color: var(--text-dim);
}

.rt-roi-row[data-status="other-frame"],
.rt-roi-row[data-status="no-contour"],
.rt-roi-row[data-status="unsupported"] {
  cursor: help;
}

/* Cross removing a loaded segmentation or structure set. */
.rt-remove,
.seg-legend-remove {
  flex: none;
  padding: 3px;
  line-height: 0;
  background: transparent;
  border-color: transparent;
  color: var(--text-dim);
}

button.icon.rt-remove:hover,
button.icon.seg-legend-remove:hover {
  color: var(--danger);
  border-color: transparent;
  background: var(--panel-light);
}

.confirm-dialog p {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.45;
}

.rt-notices {
  font-size: 12px;
  color: var(--warning);
}

.rt-fill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
}

.rt-fill input {
  flex: 1;
}

.rt-empty {
  color: var(--text-dim);
  font-size: 13px;
}

/* RT Dose: scale or legend, isodose lines. */
.dose-menu .pet-preset.active {
  border-color: #3dd6ff;
  color: #9be9ff;
}

.dose-menu .dose-hint {
  color: var(--muted, #8a93b8);
  font-size: 11px;
}

.dose-menu .dose-reference-source {
  margin: 0 0 6px;
  color: var(--muted, #8a93b8);
}

.dose-menu .dose-level input[type="number"],
.dose-menu input[data-testid="dose-level-new"] {
  width: 64px;
}

.viewport .color-scale.lower,
.viewport .isodose-legend.lower {
  top: calc(50% - 10px);
  height: calc(50% - 100px);
}

.viewport .isodose-legend {
  position: absolute;
  right: 34px;
  top: 96px;
  max-height: calc(50% - 40px);
  overflow: hidden;
  pointer-events: none;
  font-size: 11px;
  color: var(--text);
  text-align: right;
  text-shadow: 0 0 2px #000;
}

.isodose-legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.isodose-legend li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  line-height: 15px;
}

.isodose-swatch {
  display: inline-block;
  width: 12px;
  height: 3px;
  border: 1px solid rgba(0, 0, 0, 0.6);
}

.isodose-reference {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.isodose-source {
  max-width: 180px;
  color: var(--muted, #8a93b8);
}

.viewport .isodose-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.isodose-layer .isodose {
  stroke-width: 1.5px;
}


/* First-launch warning: research tool, not a medical device. */
.disclaimer-backdrop {
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(2px);
}

.modal.disclaimer {
  width: min(520px, 92vw);
  border-color: var(--warning);
  gap: 14px;
}

.disclaimer-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.disclaimer-head h3 {
  flex: 1;
  font-size: 16px;
}

.disclaimer-icon {
  flex: none;
  color: var(--warning);
}

.disclaimer-langs {
  display: flex;
  gap: 2px;
}

button.disclaimer-lang {
  padding: 2px 8px;
  font-size: 12px;
  background: transparent;
  border-color: var(--panel-light);
  color: var(--text-dim);
}

button.disclaimer-lang.active {
  border-color: var(--accent);
  color: var(--accent);
}

.disclaimer-text p {
  margin: 0 0 8px;
  line-height: 1.5;
  color: var(--text);
}

.disclaimer-text p:last-child {
  margin-bottom: 0;
}

/* ---------- Dose analysis and DVH dialog ---------- */

.dose-analysis {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-light);
}

.dose-analysis-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.dose-analysis button:disabled {
  opacity: 0.45;
  cursor: default;
}

.modal.dvh-dialog {
  width: min(860px, 94vw);
  max-height: 92vh;
  gap: 10px;
}

.dvh-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dvh-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

.dvh-chart {
  width: 100%;
  height: auto;
  background: var(--panel);
  border: 1px solid var(--panel-light);
  border-radius: 6px;
  cursor: crosshair;
}

.dvh-chart .dvh-grid {
  stroke: var(--panel-light);
  stroke-width: 1;
}

.dvh-chart .dvh-axis {
  stroke: var(--text-dim);
  stroke-width: 1;
}

.dvh-chart .dvh-tick {
  fill: var(--text-dim);
  font-size: 11px;
}

.dvh-chart .dvh-axis-title {
  fill: var(--text);
  font-size: 12px;
}

.dvh-chart .dvh-curve {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}

.dvh-chart .dvh-pointer {
  stroke: var(--text);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

.dvh-chart .dvh-hit {
  fill: transparent;
}

.dvh-chart .dvh-selection {
  fill: rgba(90, 204, 230, 0.14);
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

.dvh-chart {
  touch-action: none;
  user-select: none;
}

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

.dvh-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
}

.dvh-hint {
  opacity: 0.8;
}

.dvh-readout {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}

.dvh-table-wrap {
  overflow-x: auto;
}

.dvh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.dvh-table th,
.dvh-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--panel-light);
  text-align: left;
  white-space: nowrap;
}

.dvh-table th {
  color: var(--text-dim);
  font-weight: 500;
}

.dvh-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dvh-table .dvh-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dvh-table .dvh-eye-col {
  width: 28px;
  padding: 2px 4px;
}

.dvh-table tr.dimmed td:not(.dvh-eye-col) {
  opacity: 0.45;
}

.dvh-table .dvh-at {
  color: var(--accent);
}

.dvh-table .dvh-error {
  color: var(--warning);
}

/* DVH dose objectives: tabs under the chart, verdicts, marks on the chart. */

.dvh-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--panel-light);
}

.dvh-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.dvh-tabs button.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.dvh-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--bg-deep);
}

.dvh-count.passed {
  background: var(--success);
}

.dvh-count.failed {
  background: var(--danger);
}

.dvh-count.unknown {
  background: var(--text-dim);
}

.dvh-objectives {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dvh-table .dvh-verdict-cell {
  white-space: normal;
}

.dvh-verdict {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.dvh-verdict.passed {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 16%, transparent);
}

.dvh-verdict.failed {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
}

.dvh-verdict.unknown {
  color: var(--text-dim);
  background: var(--panel-light);
}

.dvh-why {
  margin-left: 8px;
  color: var(--text-dim);
}

.dvh-origin {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.dvh-objective-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dvh-objective-form select {
  max-width: 40%;
  font: inherit;
  color: var(--text);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
}

.dvh-objective-form input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.dvh-objective-error {
  color: var(--danger);
}

.dvh-syntax {
  opacity: 0.8;
}

.dvh-chart .dvh-objective-mark {
  cursor: help;
}

.dvh-chart .dvh-objective-diamond {
  stroke-width: 2;
}

.dvh-chart .dvh-objective-mark.passed .dvh-objective-diamond {
  stroke: var(--success);
}

.dvh-chart .dvh-objective-mark.failed .dvh-objective-diamond {
  stroke: var(--danger);
}

.dvh-chart .dvh-objective-line {
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
  opacity: 0.8;
  pointer-events: none;
}

/* ---------- RT Plan tab and isocentre markers ---------- */

.plan-unread {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-unread-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.plan-unread-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--panel-light);
}

.plan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plan-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}

.plan-actions {
  display: flex;
  gap: 4px;
  flex: none;
}

.plan-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  color: var(--text-dim);
  border: 1px solid var(--panel-light);
  white-space: nowrap;
}

.plan-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}

.plan-facts {
  margin: 0;
}

.plan-beams,
.plan-isos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-beam {
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--panel-light);
}

.plan-beam.setup {
  opacity: 0.7;
}

.plan-beam-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}

.plan-beam-mu {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* The name takes the room: the meterset and the « Vue du faisceau » button
   on the right. */
.plan-beam-head {
  align-items: center;
}

.plan-beam-name {
  flex: 1;
  min-width: 0;
}

.plan-beam-head button.icon.plan-beam-bev,
.plan-beam-head button.icon.plan-beam-eye {
  flex: none;
  padding: 1px 4px;
  line-height: 0;
}

/* A beam whose eye is closed: neither drawn in 2D nor in 3D. */
.plan-beams .plan-beam.beam-hidden .plan-beam-name,
.plan-beams .plan-beam.beam-hidden .plan-beam-meta {
  opacity: 0.5;
}

/* What the 3D says of a beam: not drawn, assumed values, field not drawn. */
.plan-beam-note {
  font-size: 11px;
  margin-top: 2px;
  color: var(--text-dim);
  font-style: italic;
}

/* The referenced structure set and its « Charger » button. */
.plan-structures-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-beam-meta {
  font-size: 11px;
  margin-top: 2px;
}

.plan-beam-meta.dim {
  color: var(--text-dim);
}

.plan-iso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.viewport .plan-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.plan-layer .plan-iso-mark circle,
.plan-layer .plan-iso-mark path {
  fill: none;
  stroke: #ffd24d;
  stroke-width: 1.5;
}

.plan-layer .plan-iso-mark text {
  fill: #ffd24d;
  font-size: 11px;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.8);
  stroke-width: 3px;
}

.plan-layer .plan-beam path {
  fill: none;
  stroke-width: 1.5;
}

.plan-layer .plan-beam .plan-beam-exit,
.plan-layer .plan-beam .plan-beam-edge {
  stroke-dasharray: 6 5;
  opacity: 0.55;
}

.plan-layer .plan-beam.oblique path {
  stroke-dasharray: 3 4;
}

.plan-layer .plan-beam .plan-beam-arc {
  stroke-width: 2;
}

.plan-layer .plan-beam text {
  stroke: rgba(0, 0, 0, 0.8);
  stroke-width: 3px;
  paint-order: stroke;
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.plan-beams .plan-beam {
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.plan-beams .plan-beam:hover,
.plan-beams .plan-beam:focus-visible {
  border-color: var(--border);
  outline: none;
}

.plan-beams .plan-beam.selected {
  border-color: var(--accent);
  background: var(--panel-light);
}

.plan-beams .plan-beam.inert {
  cursor: default;
}

/* The control points of the chosen beam, under its row as a part of it
   (spec « vrt-rtplan » §11): the slider, the point in words, what it acts
   on. */
.plan-beams .plan-cp-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: -2px 0 0 10px;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--accent);
  font-size: 11px;
}

.plan-cp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan-cp-label {
  flex: none;
  color: var(--text-dim);
}

.plan-cp-row input[type="range"] {
  flex: 1;
  min-width: 0;
  margin: 0;
  accent-color: var(--accent);
}

.plan-cp-text {
  font-variant-numeric: tabular-nums;
}

.plan-cp-help {
  color: var(--text-dim);
}

.plan-layer .plan-beam.selected path {
  stroke-width: 3;
}

.plan-layer .plan-beam.selected .plan-beam-exit,
.plan-layer .plan-beam.selected .plan-beam-edge {
  opacity: 0.85;
}

.plan-layer .plan-beam.selected text {
  font-weight: 700;
}

/* Encapsulated document cell (components/doc_viewport.rs) */
.doc-viewport {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-deep);
  color: var(--text);
}

.doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  min-height: 32px;
  padding: 3px 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-light);
  font-size: 12px;
}

.doc-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 140px;
  line-height: 1.25;
}

.doc-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-meta {
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-meta:empty {
  display: none;
}

.doc-nav,
.doc-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.doc-bar button {
  font-size: 12px;
  padding: 2px 8px;
  line-height: 1.3;
}

.doc-bar .doc-icon-button {
  min-width: 24px;
  padding: 1px 4px;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  border-color: var(--panel-light);
}

.doc-bar .doc-fit {
  display: inline-flex;
  align-items: center;
  padding: 3px 5px;
  background: transparent;
  border-color: var(--panel-light);
  color: var(--text-dim);
}

.doc-bar .doc-fit.active {
  color: var(--text);
  border-color: var(--accent);
}

.doc-page-number,
.doc-zoom-value {
  min-width: 4.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.doc-zoom-value {
  min-width: 3.5em;
}

.doc-bar .doc-instance-select {
  max-width: 30%;
  font-size: 12px;
  padding: 1px 4px;
}

.doc-bar .doc-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.doc-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: color-mix(in srgb, var(--bg-deep) 70%, var(--panel-light));
}

.doc-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  min-width: max-content;
}

.doc-page {
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 45%);
}

.doc-page canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* A page not drawn yet: a faint pulse on the blank sheet. */
.doc-page[data-drawn="false"][data-failed="false"] {
  animation: doc-page-wait 1.2s ease-in-out infinite alternate;
}

@keyframes doc-page-wait {
  from { background: #fff; }
  to { background: #e9ebf3; }
}

.doc-page-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 13px;
}

.doc-page-state.error {
  color: #b42318;
}

.doc-state {
  color: var(--text-dim);
  padding: 12px 18px;
  font-size: 13px;
}

.doc-state.error {
  color: var(--danger);
}

.doc-other {
  padding: 14px 18px 24px;
  font-size: 13px;
}

.doc-other .doc-state {
  padding: 0;
}

.doc-other-kind {
  font-weight: 600;
  margin: 0 0 6px;
}

.doc-text {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--panel-light);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}

/* Window of a heatmap (fractional segmentation), under its segments. */
.heatmap-settings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 2px 4px;
  padding: 6px 8px;
  border-left: 2px solid var(--accent-dim);
  background: var(--panel-light);
  border-radius: 0 4px 4px 0;
  cursor: default;
}

.heatmap-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.heatmap-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.heatmap-row > span:first-child {
  flex: none;
  min-width: 52px;
}

.heatmap-row select,
.heatmap-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.heatmap-row output {
  flex: none;
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.heatmap-scale {
  position: relative;
  height: 10px;
  border-radius: 3px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.heatmap-scale-window {
  position: absolute;
  top: 0;
  bottom: 0;
}

.heatmap-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.heatmap-presets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.segmentation-panel .heatmap-presets .pet-preset.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: #fff;
}

/* The « 3D » tab. */
.vrt-panel .pet-presets {
  flex-wrap: wrap;
}

.vrt-panel .pet-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.vrt-panel .vrt-value {
  flex: none;
  min-width: 64px;
  margin-left: auto;
  text-align: right;
  color: var(--text-dim);
}

/* A label too long to share its row (the DRR's shift): above its slider and value. */
.vrt-panel .pet-row.vrt-row-stacked {
  flex-wrap: wrap;
  row-gap: 2px;
}

.vrt-panel .pet-row.vrt-row-stacked > span:first-child {
  flex: 1 0 100%;
}

.vrt-crop h3,
.vrt-surfaces h3 {
  margin: 0;
  font-size: 13px;
}

/* The « Surfaces » group: one row per object of the CT. */
.vrt-surfaces .vrt-surfaces-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vrt-surface-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vrt-surface-row {
  align-items: flex-start;
}

.vrt-surface-row .legend-swatch {
  margin-top: 2px;
}

.vrt-surface-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vrt-surface-source,
.vrt-surface-note {
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vrt-surface-note.warning {
  color: var(--warning);
}

.vrt-surface-row.hidden-segment .vrt-surface-text {
  opacity: 0.5;
}

/* An object the active 3D cell leaves out (beyond 16 surfaces). */
.legend-segment.not-in-3d {
  box-shadow: inset 2px 0 0 var(--warning);
}

.legend-segment.not-in-3d .legend-label {
  color: var(--warning);
}

.vrt-crop-axis {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 2px 6px;
  padding: 4px 0;
}

.vrt-crop-label {
  grid-row: span 2;
  color: var(--text-dim);
}

.vrt-crop-axis input[type="range"] {
  width: 100%;
  min-width: 0;
}

.vrt-crop-range {
  grid-column: 2;
  font-size: 12px;
  color: var(--text-dim);
}