/* Palette follows clinical review-station convention: near-black chrome so nothing
   competes with the greyscale image, one restrained accent, and saturated colour reserved
   exclusively for warnings. */
:root {
  /* NEUTRAL grey, not blue-black. Reading stations use a neutral chrome deliberately:
     any colour cast in the surround shifts how the eye judges greyscale, which is the one
     thing the operator is actually trying to assess. */
  --bg: #1c1c1c;
  --panel-bg: #252525;
  --panel-header: #2e2e2e;
  --toolbar: #2a2a2a;
  --border: #383838;
  --border-strong: #454545;
  --text: #dcdcdc;
  --text-dim: #8e8e8e;
  --accent: #4a7fa5;
  --accent-bright: #5d97be;
  --kidney-color: #ffb347;
  --tumor-color: #ff4d6d;
  /* Cool colour for cyst: a fluid cyst and a solid tumour must never be
     confused at a glance, so they sit at opposite ends of the spectrum. */
  --cyst-color: #4dd2ff;
  --danger: #d64550;
  /* Patient identity is annotated in green, the long-standing convention on review
     stations -- it reads as "who this is", distinct from the red regulatory warnings. */
  --anno-green: #52c41a;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  height: 42px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--panel-header);
}

.app-header h1 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}

/* Regulatory status belongs in the title bar of anything imaging-adjacent. */
.header-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}

.session-note {
  color: var(--text-dim);
  font-size: 11px;
  margin-left: auto;
}

.lang-switch {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  overflow: hidden;
}

.lang-btn {
  width: auto;
  margin: 0;
  padding: 3px 9px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}

.lang-btn + .lang-btn { border-left: 1px solid var(--border-strong); }

.lang-btn.active {
  background: var(--accent);
  color: #fff;
}

.lang-btn:hover:not(.active) { background: #1d232c; color: var(--text); }

/* Thai needs more leading than Latin at the same size, and a font that actually has the
   glyphs -- otherwise tone marks collide with the line above. */
html.lang-th body {
  font-family: "Noto Sans Thai", "Thonburi", "Krungthep", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;
}

html.lang-th .panel h2,
html.lang-th .field-label,
html.lang-th .toggle-row,
html.lang-th .slider-row,
html.lang-th .info-block,
html.lang-th .more-info,
html.lang-th button { line-height: 1.75; }

html.lang-th .panel h2 { letter-spacing: 0; }
html.lang-th .header-badge { letter-spacing: 0.02em; }

.app-layout {
  display: flex;
  height: calc(100vh - 42px - 30px);
}

.sidebar {
  width: 268px;
  min-width: 268px;
  overflow-y: auto;
  border-right: 1px solid var(--border-strong);
  background: var(--bg);
  padding: 0;
}

/* Square, stacked, hairline-separated panels — closer to a review station's tool rail
   than to a set of floating cards. */
.panel {
  background: var(--panel-bg);
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 8px 10px 10px;
  margin: 0;
}

.panel h2 {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #9aa4b2;
  margin: -10px -12px 10px;
  padding: 6px 12px 6px 10px;
  background: var(--panel-header);
  border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--accent);
}

.field-label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin: 10px 0 4px 0;
}

.field-label:first-child {
  margin-top: 0;
}

.seed-buttons {
  display: flex;
  gap: 6px;
}

.seed-buttons button {
  flex: 1;
}

/* Collapsible tool sections, so the rail shows controls rather than a wall of options. */
.tool-group > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  padding: 5px 0;
}

.tool-group > summary::-webkit-details-marker { display: none; }

.tool-group > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 6px;
  color: var(--accent);
  transition: transform 0.12s ease;
}

.tool-group[open] > summary::before { transform: rotate(90deg); }

.tool-body {
  padding-top: 6px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}

.tool-btn {
  width: 100%;
  margin: 0;
  padding: 6px 4px;
  font-size: 11px;
  background: #1a202a;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}

.tool-btn:hover:not(.active) { background: #222a36; color: var(--text); }

.tool-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Live indicator that clicks will edit the mask rather than move the crosshair. */
.paint-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 4px 9px;
  background: rgba(47, 129, 214, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  pointer-events: none;
  letter-spacing: 0.02em;
}

.paint-badge[hidden] { display: none; }

.cursor-readout {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: #cfd6e2;
  text-align: right;
  white-space: pre-line;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}

.cursor-readout[hidden] { display: none; }

.niivue-container.painting { cursor: crosshair; }
.niivue-container.panning { cursor: grabbing; }

.zoom-slider { max-width: 120px; flex: 0 0 auto; }

#zoomLabel {
  min-width: 42px;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.copyright { opacity: 0.85; }

.app-version {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
  white-space: nowrap;
  opacity: 0.8;
}

.link-btn {
  width: auto;
  margin: 0 0 0 14px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent-bright);
  font-size: 11px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.link-btn:hover { color: #6ec3d8; background: none; }

.attrib-body {
  max-height: 58vh;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.6;
  color: #b9c1cd;
}

.attrib-body h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  margin: 16px 0 6px;
}

.attrib-body h3:first-child { margin-top: 0; }
.attrib-body ul { margin: 0; padding-left: 18px; }
.attrib-body li { margin-bottom: 7px; }
.attrib-body a { color: var(--accent-bright); }
.attrib-body code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
}

.attrib-note {
  margin-top: 14px;
  font-size: 11.5px !important;
  color: var(--text-dim) !important;
}

.phase-row {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.full-select {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 6px;
  font-size: 12px;
}

.or-divider {
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  margin: 8px 0;
}

.model-row, .toggle-row, .slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 12px;
}

.toggle-row input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0;
}

input[type="range"] {
  accent-color: var(--accent);
  height: 3px;
}

.slider-row input[type="range"] {
  flex: 1;
}

.slider-row span {
  min-width: 34px;
  text-align: right;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.kidney-swatch { background: var(--kidney-color); }
.tumor-swatch { background: var(--tumor-color); }
.cyst-swatch { background: var(--cyst-color); }

input[type="file"] {
  width: 100%;
  font-size: 11px;
  color: var(--text-dim);
}

/* Sidebar scrollbar sized like a tool rail rather than an OS default. */
.sidebar::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-track { background: var(--bg); }
.sidebar::-webkit-scrollbar-thumb {
  background: #2b333f;
  border: 2px solid var(--bg);
  border-radius: 5px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: #3a4453; }

button {
  width: 100%;
  padding: 5px 10px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-top: 4px;
}

button:hover:not(:disabled) { background: var(--accent-bright); border-color: var(--accent-bright); }
button:active:not(:disabled) { transform: translateY(1px); }

button:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 1px;
}

button:disabled {
  background: #1a1f27;
  border-color: var(--border);
  color: #59616e;
  cursor: not-allowed;
}

button.secondary {
  background: #1a202a;
  border: 1px solid var(--border-strong);
  color: var(--text);
}

button.secondary:hover:not(:disabled) { background: #222a36; border-color: #3d4757; }

button.secondary:disabled { background: #151a21; color: #59616e; }

/* Collapsed by default so the sidebar reads as controls, not documentation. */
.more-info {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 6px 0;
}

.more-info > summary {
  cursor: pointer;
  color: var(--accent);
  list-style: none;
  user-select: none;
}

.more-info > summary::-webkit-details-marker { display: none; }

.more-info > summary::before {
  content: "\25B8";           /* right-pointing triangle; rotates when open */
  display: inline-block;
  margin-right: 5px;
  transition: transform 0.12s ease;
}

.more-info[open] > summary::before { transform: rotate(90deg); }

.more-info[open] > summary { margin-bottom: 5px; }

.info-block {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.5;
  word-break: break-word;
}

/* Measurements read as instrument output, not prose: tabular figures, monospaced. */
#seedInfo, #seedResult, #runStatus {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: #0d1116;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 8px;
}

#seedInfo:empty, #seedResult:empty, #runStatus:empty { display: none; }

progress {
  width: 100%;
  margin-top: 8px;
  height: 6px;
}

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

.niivue-container {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
}

#niivueCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.viewer-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 14px;
  pointer-events: none;
}

.viewer-placeholder[hidden] {
  display: none;
}

/* ---- Corner annotations ---- */

.corner-annotation {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: #cfd6e2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  pointer-events: none;
  max-width: 46%;
  white-space: pre-line;
}

.corner-annotation-right {
  left: auto;
  right: 12px;
  text-align: right;
}

.corner-annotation[hidden] { display: none; }

.corner-annotation .anno-primary {
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
}

/* Patient identity block only. The series/acquisition block on the right stays neutral,
   so colour continues to mean "this is who the images belong to". */
#patientAnnotation {
  color: var(--anno-green);
}

#patientAnnotation .anno-primary {
  color: var(--anno-green);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.corner-annotation .anno-dim { color: #8f99a8; }

/* ---- Segmentation progress ---- */

.progress-overlay {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 48px));
  padding: 12px 16px 11px;
  background: rgba(12, 16, 21, 0.94);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
}

.progress-overlay[hidden] { display: none; }

.progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

.progress-pct {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-bright);
}

.progress-track {
  height: 8px;
  background: #0a0d11;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: width 0.25s ease;
}

.progress-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.slice-scrubber-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-top: 1px solid var(--border-strong);
  background: var(--panel-header);
}

.slice-scrubber-row label {
  color: var(--text-dim);
  font-size: 12px;
}

.slice-scrubber-row select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
}

.slice-scrubber-row input[type="range"] {
  flex: 1;
}

#sliceLabel {
  min-width: 66px;
  text-align: right;
  color: var(--text);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  height: 30px;
  padding: 0 14px;
  border-top: 1px solid var(--border-strong);
  background: var(--panel-header);
  color: var(--text-dim);
  font-size: 11px;
}

#statusBar {
  font-family: var(--mono);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.disclaimer {
  color: var(--danger);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}


.credit {
  color: var(--text);
  white-space: nowrap;
}

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

/* ---- Research-use acknowledgement ---- */

body.modal-open { overflow: hidden; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 7, 10, 0.82);
  backdrop-filter: blur(3px);
}

.modal-overlay[hidden] { display: none; }

.modal-card {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  padding: 0 22px 20px;
}

.modal-band {
  margin: 0 -22px 16px;
  padding: 8px 22px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px 4px 0 0;
}

.modal-card h2 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.modal-card p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #b9c1cd;
}

.modal-list {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #b9c1cd;
}

.modal-privacy {
  border-left: 2px solid var(--border-strong);
  padding-left: 10px;
  font-size: 12px !important;
  color: var(--text-dim) !important;
}

.modal-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 14px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
}

#disclaimerAccept {
  margin-top: 0;
  padding: 10px;
  font-size: 13px;
}


/* ---- Basic mode ----
   Everything except the guided panel is hidden, so the app presents one path:
   pick a scan, wait, download. Advanced mode restores the full tool rail. */

body.mode-basic .panel:not(.basic-panel) { display: none; }
body.mode-advanced .basic-panel { display: none; }

.mode-switch { margin-left: 0; }

.mode-btn {
  width: auto;
  margin: 0;
  padding: 3px 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}

.mode-btn + .mode-btn { border-left: 1px solid var(--border-strong); }
.mode-btn.active { background: var(--accent); color: #fff; }
.mode-btn:hover:not(.active) { background: #1d232c; color: var(--text); }

.basic-step {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.basic-step:last-of-type { border-bottom: 0; }

.basic-step-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: #1a202a;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The step currently in play is the only one highlighted, so the eye knows where to look. */
.basic-step.active .basic-step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.basic-step.done .basic-step-num {
  background: transparent;
  border-color: var(--anno-green);
  color: var(--anno-green);
}

.basic-step-body { flex: 1; min-width: 0; }

.basic-step-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 7px;
}

.basic-step.pending .basic-step-title { color: var(--text-dim); }

#basicStatus {
  font-family: var(--mono);
  font-size: 11px;
  background: #0d1116;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 8px;
  margin-top: 0;
}

.sample-btn {
  width: auto;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 11px;
  background: #1a202a;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}

.sample-btn:hover:not(:disabled) { background: #222a36; color: var(--text); }


/* ---- Imaging toolbar ----
   The single most recognisable thing about a reading station: a dense strip of icon tools
   directly above the image, grouped by function with hairline separators. It drives the
   same controls the sidebar does rather than duplicating any logic. */

.toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  /* min-height, not height: a fixed height let a wrapped second row spill out of the bar
     and get painted over by the viewer canvas, which hid the very controls wrapping was
     meant to keep reachable. */
  min-height: 34px;
  padding: 3px 6px;
  background: var(--toolbar);
  border-bottom: 1px solid var(--border-strong);
  /* WRAP, do not scroll. With nowrap + overflow-x the toolbar silently pushed its last
     controls past the right edge -- measured 116 px of overflow at 1600 px wide, which put
     "Reset view" out of reach with no scrollbar affordance to suggest it was there.
     Wrapping keeps every control clickable at every width. */
  flex-wrap: wrap;
  row-gap: 4px;
}

.tb-sep {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  margin: 0 5px;
  flex: 0 0 auto;
}

.tb-btn {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  height: 26px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
}

.tb-btn svg { width: 15px; height: 15px; display: block; }
.tb-btn:hover:not(:disabled) { background: #383838; color: var(--text); border-color: var(--border-strong); }
.tb-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tb-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tb-btn.has-label { padding: 0 7px; }
/* Toolbar buttons carry a visible label, not just a tooltip: the three layout icons differ
   by a single hairline, and a tooltip is unreachable on a touch screen. */
.tb-btn-label { font-size: 11px; white-space: nowrap; }
@media (max-width: 1250px) {
  /* Too narrow for both: keep the icons, which are at least unambiguous once learned, and
     let the title attribute carry the name. */
  .tb-btn-label { display: none; }
  .tb-btn.has-label { padding: 0 4px; }
}

.tb-select {
  height: 26px;
  background: #1e1e1e;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  font-size: 11px;
  padding: 0 5px;
  flex: 0 0 auto;
  max-width: 190px;
}

.tb-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  margin: 0 5px 0 2px;
  flex: 0 0 auto;
}

.tb-readout {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  white-space: nowrap;
  padding-left: 10px;
  flex: 0 0 auto;
}

.tb-zoom { width: 92px; flex: 0 0 auto; }

/* Four-corner annotation, as on any reading station. */
.corner-annotation.corner-tl { top: 10px; bottom: auto; left: 12px; }
.corner-annotation.corner-tr { top: 10px; bottom: auto; left: auto; right: 12px; text-align: right; }

/* Colour key for Basic mode's 3D result. */
.basic-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  font-size: 12px;
  color: var(--text);
}

.basic-legend[hidden] { display: none; }

.legend-item { display: inline-flex; align-items: center; gap: 6px; }

.legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
}

/* A control group that belongs to ONE tool, indented so it reads as that tool's settings
   rather than as another panel-level control. The fill tolerance used to live in a
   different panel entirely and was shared with manual selection. */
.sub-controls {
  margin: 6px 0 2px;
  padding: 6px 8px;
  border-left: 2px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.02);
}
.sub-controls .field-label { margin-top: 0; }

/* Short explanatory note attached to a control, distinct from the collapsible "More info". */
.hint-block {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 4px 0 2px;
}

/* Storage-key list in the privacy notice: the key names are literal strings a reader can
   search for in their own browser's developer tools, so they are set in the mono face. */
.mono-list code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 4px;
  border-radius: 2px;
}
.mono-list li { margin-bottom: 5px; }

/* AI disclosure in the blocking notice. Emphasised on purpose: it is the line most likely
   to be skimmed past, and it must not read as fine print. */
.modal-ai {
  margin: 12px 0 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--accent);
  background: rgba(90, 160, 220, 0.10);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
}

/* "Another project by Pawin.dev" byline in the header.
   Set on a white backing so it reads as a brand lockup rather than as another line of
   status text. In a header that is otherwise dark greys plus one red warning badge, a
   solid light chip is the strongest thing available that does not compete with the
   research-use warning for the colour that means "stop". */
.header-byline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 4px;
  background: #f4f6f8;
  color: #3a4046;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.header-byline a {
  color: #14181c;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 24, 28, 0.35);
}
.header-byline a:hover,
.header-byline a:focus-visible {
  border-bottom-color: currentColor;
}
/* Narrow windows: the title, the research-use badge and the mode/language switches all
   have to stay reachable, so the byline is the first thing to go. */
@media (max-width: 1100px) {
  .header-byline { display: none; }
}