* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Georgia, serif;
  background: #f5f5f0;
  color: #222;
  font-size: 15px;
}

h1 {
  text-align: center;
  padding: 18px 12px 10px;
  font-size: 1.35em;
  letter-spacing: 0.02em;
}

#app { max-width: 1280px; margin: 0 auto; padding: 0 24px 36px; }

/* ── Controls ── */
#controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 24px;
}
#controls .image-box { grid-column: 1; }
#controls .algo-box  { grid-column: 2 / span 2; }

fieldset {
  border: 1px solid #bbb;
  border-radius: 6px;
  padding: 14px 18px 18px;
}

/* Top-level "super" boxes — Image and Algorithm */
.box {
  flex: 1 1 210px;
  background: #fdfdfa;
  display: flex;
  flex-direction: column;
  border: 1px solid #bbb;
  border-radius: 6px;
  overflow: hidden;
}

.box-title {
  font-size: 1.1em;
  font-weight: 700;
  color: #222;
  text-align: center;
  padding: 9px 18px;
  background: #eeede8;
  border-bottom: 1px solid #d0d0cc;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.box-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 18px;
}

.algo-box { flex: 2 1 460px; }
.algo-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.algo-body .mode-panels-wrap { flex: 1 1 auto; }
.algo-actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #d6d6cc;
}
.algo-actions .action-row { margin-top: 0; }
.algo-blurb {
  margin: 0 0 12px;
  font-size: 0.82em;
  color: #555;
  line-height: 1.45;
}
.algo-blurb b { color: #333; }

legend {
  font-weight: bold;
  font-size: 0.88em;
  padding: 0 8px;
  color: #444;
}

/* (box-title is now a div — see .box-title rule above) */

/* Sub-boxes (Sampling, Kernel parameters, Master parameters) */
.subbox {
  border: 1px solid #cfcfc8;
  border-radius: 5px;
  background: #fff;
  padding: 12px 16px 18px;
  margin-top: 12px;
}

.subbox > legend {
  font-size: 0.78em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  padding: 0 6px;
}

/* ── Mode toggle (Manual / Automatic) ─────────────────────── */
.mode-toggle {
  display: flex;
  gap: 0;
  margin-top: 8px;
  border: 1px solid #bbb;
  border-radius: 5px;
  overflow: hidden;
  background: #ecece4;
}

.mode-btn {
  flex: 1;
  margin: 0;
  padding: 8px 10px;
  background: transparent;
  color: #555;
  border-radius: 0;
  font-size: 0.88em;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  transition: background 0.12s, color 0.12s;
}

.mode-btn + .mode-btn { border-left: 1px solid #bbb; }

.mode-btn:hover { background: #e0e0d6; color: #222; }

.mode-btn.active {
  background: #336;
  color: #fff;
}
.mode-btn.active:hover { background: #224; }

/* Each slot stacks Manual & Auto variants in the same grid cell so the slot
   height = max(manual height, auto height). Inactive variant is invisible but
   keeps its height so both slots stay stable when switching modes. */
.mode-panels-wrap {
  display: flex;
  flex-direction: row;
  gap: 14px;
  margin-top: 18px;
}
.mode-slot {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.mode-slot > .mode-panel-item {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
  margin-top: 0;       /* slot gap handles spacing; suppress .subbox margin-top */
  align-self: stretch; /* fill the slot height so content can anchor to top */
}
.mode-slot > .mode-panel-item.mode-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* ── Auto mode bits ───────────────────────────────────────── */

.advanced-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 0.88em;
  color: #333;
  cursor: pointer;
  user-select: none;
}
.advanced-toggle input { cursor: pointer; }

.master-params { transition: opacity 0.15s; }
.master-params[disabled] {
  opacity: 0.55;
  background: #f7f7f2;
}
.master-params[disabled] input { cursor: not-allowed; }

/* 2-column grid for master / kernel parameters (compact). */
.master-params,
.params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 16px;
  align-items: start;
}
.master-params > legend,
.params-grid  > legend { grid-column: 1 / -1; }
/* Bottom row of master parameters: ξ · Seed · Reset, aligned on a single row */
/* Rows that should span the full width of the grid (e.g. Kernel select). */
.master-row.full-row { grid-column: 1 / -1; }
.master-reset-row { justify-content: flex-end; display: flex; }
.master-reset-row .btn-reset { margin: 0; }

.master-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
  min-width: 0;
}

.master-row > label {
  font-size: 0.82em;
  color: #333;
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.25;
  font-weight: 600;
}
.master-row > label .hint {
  font-size: 0.72em;
  color: #888;
  font-weight: normal;
}

.master-row .ctl {
  display: grid;
  grid-template-columns: 1fr 62px;
  gap: 6px;
  align-items: center;
}
.master-row:not(.slider-master) .ctl {
  grid-template-columns: 1fr;
}
/* Kernel-row readouts need more room for values like 0.000001. */
.params-grid .master-row.slider-master .ctl {
  grid-template-columns: 1fr 82px;
}

/* N_fraction percentage wrapper */
.num-pct-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}
.num-pct-wrap input { flex: 1; min-width: 0; }
.pct-sym {
  font-size: 0.78em;
  color: #555;
  font-weight: 600;
  flex-shrink: 0;
  width: 14px;
}

.master-row input[type=number] {
  width: 100%;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  line-height: 26px;
  text-align: right;
  background: #fff;
  color: #222;
  -moz-appearance: textfield;
  transition: border-color 0.15s;
}
.master-row input[type=number]:hover { border-color: #888; }
.master-row input[type=number]:focus {
  outline: none;
  border-color: #336;
  box-shadow: 0 0 0 2px rgba(51,51,102,0.18);
}
.master-row input[type=number]::-webkit-outer-spin-button,
.master-row input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.master-row input[type=number]:hover::-webkit-inner-spin-button,
.master-row input[type=number]:focus::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
}

.master-row input[type=range] {
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  height: 16px;
}

/* Track */
.master-row input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: #ccc;
}
.master-row input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #ccc;
}
.master-row input[type=range]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: #336;
}

/* Thumb — centered on the 4px track: margin-top = (4px − 14px) / 2 = −5px */
.master-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #336;
  margin-top: -5px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.20);
  transition: background 0.12s;
}
.master-row input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #336;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.20);
  transition: background 0.12s;
}

.master-row input[type=range]:hover::-webkit-slider-thumb { background: #224; }
.master-row input[type=range]:hover::-moz-range-thumb     { background: #224; }

/* Wider number input for the scale slider */
.img-scale-ctl {
  grid-template-columns: 1fr 90px;
}

/* pct-out and val-out now share the same base style as all other number inputs. */
.master-row .pct-out,
.master-row .val-out {
  cursor: text;
  width: 100%;
}

.master-row .ctl-select {
  width: 100%;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 0.86em;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
}

.master-params[disabled] .pct-out { opacity: 0.9; }

.btn-reset {
  margin-top: 12px;
  background: #777;
  font-size: 0.8em;
  padding: 5px 10px;
}
.btn-reset:hover { background: #555; }

.sampling-box {
  padding: 12px 16px 18px;
}
.sampling-box .method-panels-wrap { margin-top: 16px; }
.sampling-box .action-row { margin-top: 8px; }

/* Auto sampling + auto/manual params: flex column so footer anchors to bottom.
   align-items: stretch overrides the align-items: start from .master-params so
   footer rows (reset, action) expand to full box width. */
#auto-sampling-fieldset,
#auto-params-fieldset,
.subbox.params-grid,
.subbox.sampling-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Auto-mode inner wrapper: 2-column grid for compact slider pairs.
   No flex-grow here — the stat pill below uses margin-top: auto instead,
   so it (and the buttons) float to the bottom of the fieldset. */
.master-params-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 16px;
  align-items: start;
  width: 100%;
  min-width: 0;
}
.master-params-body > .full-row { grid-column: 1 / -1; }

/* Manual Parameters inner wrapper: 2-column grid */
.params-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.params-body > .full-row { grid-column: 1 / -1; }

/* Shared: float the Reset-to-defaults row to the bottom of its box.
   When preceded by an action-row, margin-top: auto = 0 (space consumed by
   flex: 1 1 auto sibling above), so only padding-top gives the gap. */
.box-footer-reset {
  margin-top: auto;
  padding-top: 6px;
}

/* Manual sampling content wrapper — absorbs flex space so footer anchors below */
.sampling-body {
  flex: 1 1 auto;
}

.master-params .action-row { grid-column: 1 / -1; margin-top: 8px; }
/* Selects inside master-row: suppress default top margin, fill width */
.master-row select { margin-top: 0; width: 100%; }

/* Inline stat pill inside auto-mode fieldsets (n = … / σ₁ = … · σ₂ = …) */
.auto-inline-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: #eef2f8;
  border: 1px solid #c8d3e4;
  border-radius: 4px;
  font-size: 0.8em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  flex-wrap: wrap;
}
.auto-stat-k   { color: #6a7a95; }
.auto-stat-v   { font-weight: bold; color: #1a2a4a; }
.auto-stat-sep { color: #aab4c4; padding: 0 3px; }

/* ── Action rows shared by both modes ─────────────────────── */
.action-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.action-row > button { flex: 1; margin-top: 0; }

.btn-primary { background: #336; }
.btn-primary:hover { background: #224; }
.btn-danger  { background: #933; }
.btn-danger:hover  { background: #722; }
.btn-go {
  width: 100%;
  margin-top: 10px;
  background: #2e8b57;
  font-size: 0.95em;
  font-weight: 600;
  padding: 9px 14px;
  position: relative;
  overflow: hidden;
}
.btn-go:hover { background: #1e6b40; }
.btn-go.loading {
  background: #1e6b40;
  cursor: wait;
}

.btn-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  transition: width 0.12s linear;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.28) 0px,
    rgba(255,255,255,0.28) 8px,
    rgba(255,255,255,0.08) 8px,
    rgba(255,255,255,0.08) 16px
  );
  pointer-events: none;
}

.btn-progress-text {
  position: relative;
  z-index: 1;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.88em;
  cursor: pointer;
  color: #333;
}

/* "Show points" toggle pinned inline at the right of the random-panel grid.
   Green pill when checked, red when unchecked. */
.sampling-box { position: relative; }
.show-points-toggle {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.82em;
  font-weight: 600;
  color: #fff;
  background: #b03a2e;
  border: 1px solid #8a2a20;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.show-points-toggle:has(input:checked) {
  background: #2e8b57;
  border-color: #1e6b40;
}
.show-points-toggle input {
  margin: 0;
  accent-color: #fff;
}

select {
  margin-top: 9px;
  width: 100%;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 0.9em;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
}

.slider-row select,
.param-row select {
  margin-top: 0;
}

/* Stack all three method panels in the same cell so switching method
   never changes the sampling-box height. */
.method-panels-wrap {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 10px;
}
.method-panels-wrap > .method-panel {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
}
.method-panels-wrap > .method-panel.invis {
  visibility: hidden;
  pointer-events: none;
}

.method-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.method-panel label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9em;
}

.method-panel input[type=number] {
  width: 64px;
  padding: 4px 6px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  text-align: right;
  background: #fff;
  color: #222;
}

.random-panel-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.seed-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-basis: 100%;
}

.seed-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
  cursor: pointer;
  user-select: none;
}

.seed-opt input[type=radio] { margin: 0; cursor: pointer; accent-color: #336; }

.seed-opt input[type=number] {
  width: 62px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  line-height: 26px;
  background: #fff;
  color: #222;
  text-align: right;
}

/* When "Random" is chosen, fade the seed input to signal it's inactive. */
.seed-group:has(input[value="random"]:checked) input[type=number] {
  opacity: 0.45;
  pointer-events: none;
}

.hidden { display: none !important; }

/* Reserve vertical space for the recommended-scale warning so layout doesn't
   jump when it appears/disappears. */
#img-scale-warn {
  min-height: 26px;
  box-sizing: border-box;
}
#img-scale-warn.hidden {
  display: flex !important;
  visibility: hidden;
}

.slider-row, .param-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.param-row label, .slider-row label {
  width: 28px;
  text-align: right;
  font-size: 0.9em;
  flex-shrink: 0;
}

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

.param-row input[type=number], .slider-row input[type=number] {
  width: 72px;
  padding: 4px 6px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  text-align: right;
  background: #fff;
  color: #222;
}

#img-info {
  margin-top: 7px;
  font-size: 0.78em;
  color: #555;
  line-height: 1.6;
}

#img-info span { display: block; }

/* Full-resolution preview of the currently loaded image (Image box).
   Stretches to fill the available vertical space inside the Image super-box,
   so the preview is as tall as possible while still fitting. */
.img-preview-wrap {
  margin-top: 12px;
  width: 100%;
  flex: 1 1 200px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-conic-gradient(#f0efe9 0% 25%, #e6e5df 0% 50%) 50% / 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  padding: 6px;
}

.img-preview-wrap img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: auto;
}

.img-preview-wrap img:not([src]),
.img-preview-wrap img[src=""] { display: none; }

/* Image super-box: box-body is flex column so the preview can stretch. */
.image-box .box-body { flex: 1 1 auto; }

#img-scale-warn {
  margin-top: 5px;
  font-size: 0.78em;
  color: #7a4800;
  background: #fff8e6;
  border: 1px solid #d9b84a;
  border-radius: 3px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
#img-scale-warn .warn-btn {
  margin: 0;
  padding: 2px 8px;
  font-size: 0.95em;
  background: #7a4800;
  color: #fff;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
#img-scale-warn .warn-btn:hover { background: #5a3500; }

input[type=file] { display: none; }

.file-btn, button, .tool-btn {
  display: inline-block;
  padding: 7px 14px;
  margin-top: 10px;
  border-radius: 4px;
  background: #444;
  color: #fff;
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: 0.88em;
  user-select: none;
}

.file-btn:hover, button:hover { background: #222; }

.tool-btn { background: #555; }
.tool-btn.active { background: #0a6; }
#tool-remove.active { background: #c22; }

/* "Upload / Take Photo" button placed under the image dropdown */
.file-btn-top {
  display: block;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 4px;
}

#status {
  margin-top: 8px;
  font-size: 0.82em;
  color: #666;
  min-height: 1.2em;
  text-align: center;
}

/* ── Panels ── */
/* Pipeline stage toggle — inherits pill style from .show-points-toggle */
.pipeline-toggle-label { margin-top: 10px; }
/* When placed below panel-a, match width of pts-mode-toggle below panel-b */
.panel-pipeline-toggle.pipeline-toggle-disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.panel-pipeline-toggle {
  display: flex;
  width: 100%;
  margin-top: 8px;
  justify-content: center;
  box-sizing: border-box;
}

/* Seed group inside compact half-column of auto sampling grid */
#auto-sampling-fieldset .seed-group-master {
  flex-wrap: wrap;
  gap: 6px 8px;
}
#auto-sampling-fieldset .seed-group-master .seed-opt input[type=number] {
  width: 48px;
}
/* Stat pills float to the bottom of the fieldset: margin-top: auto consumes
   all free space in the flex column (since master-params-body has no flex-grow). */
#auto-sampling-fieldset .auto-inline-stat,
#auto-params-fieldset .auto-inline-stat { margin-top: auto; }

.pts-mode-toggle {
  display: flex;
  gap: 0;
  margin-top: 8px;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: #ecece4;
  width: 100%;
}
.pts-mode-btn {
  position: relative;
  flex: 1;
  margin: 0;
  padding: 6px 4px;
  background: transparent;
  color: #555;
  border-radius: 0;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  transition: background 0.12s, color 0.12s;
}
.pts-mode-btn:first-child { border-radius: 5px 0 0 5px; }
.pts-mode-btn:last-child  { border-radius: 0 5px 5px 0; }
.pts-mode-btn + .pts-mode-btn { border-left: 1px solid #bbb; }
.pts-mode-btn:hover { background: #e0e0d6; color: #222; }
.pts-mode-btn.active { background: #336; color: #fff; }
.pts-mode-btn.active:hover { background: #224; }
.pts-mode-btn[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; }
.pts-mode-btn[aria-disabled="true"]:hover { background: transparent; color: #555; }

/* General tooltip — any element with data-tooltip gets a dark pill above */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.76em;
  font-weight: normal;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s 0.3s;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1a1a2e;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s 0.3s;
  z-index: 200;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before { opacity: 1; }
/* Suppress tooltip on disabled pts-mode buttons */
.pts-mode-btn[aria-disabled="true"]::after,
.pts-mode-btn[aria-disabled="true"]::before { display: none; }

#panels {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

/* Pipeline panels: removed from layout flow when not in pipeline mode. */
.pipeline-panel {
  display: none;
  pointer-events: none;
}

/* 2×3 expanded grid */
#panels.pipeline-mode {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
#panels.pipeline-mode .pipeline-panel {
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow: visible;
}
#panels.pipeline-mode .panel { flex: unset; }

.panel {
  flex: 1 1 200px;
  text-align: center;
}

.panel-label {
  font-size: 0.82em;
  margin-bottom: 6px;
  color: #333;
}

/* Fixed-height image box — all three panels the same height */
.img-box {
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  background: #e8e8e8;
  overflow: hidden;
}

.img-box canvas,
.img-box > canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* p5 canvas wrapper inside img-box */
#canvas-b-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#canvas-b-dots {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#canvas-b-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── Panel sub-content (metrics, pipeline toggle) ── */
.panel-metrics {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.panel-metric {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #eef2f8;
  border: 1px solid #c8d3e4;
  border-radius: 4px;
  padding: 5px 6px;
  font-size: 0.8em;
  white-space: nowrap;
}

.panel-metric-label {
  color: #6a7a95;
  font-family: Georgia, serif;
}

.panel-metric-value {
  font-weight: bold;
  color: #1a2a4a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.panel-metric-hint {
  color: #999;
  font-size: 0.84em;
}

/* ── Results section ── */
#results-section {
  margin-top: 28px;
  border-top: 1px solid #ccc;
  padding-top: 16px;
}

#results-heading {
  font-size: 1.05em;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

#results-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  min-width: 0;
}
#results-inner > #results-table-wrap { grid-column: 1 / span 2; }
#results-inner > #results-charts     { grid-column: 3; }

#results-table-wrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e0e0db;
  border-radius: 4px;
}
#results-table-wrap.scrollable {
  max-height: 376px;
  overflow-y: auto;
}
#results-table thead th { position: sticky; top: 0; z-index: 1; }
#results-table tbody tr.blank-row { color: #ccc; pointer-events: none; }
#results-table tbody tr.blank-row:hover { background: inherit; cursor: default; }
#results-table tbody tr.blank-row:nth-child(even) { background: #f9f9f7; }

#results-table {
  border-collapse: collapse;
  font-size: 0.82em;
  width: 100%;
}

#results-table th {
  background: #e0e0db;
  padding: 6px 8px;
  text-align: center;
  border-bottom: 2px solid #bbb;
  white-space: nowrap;
  font-weight: bold;
}

#results-table td {
  padding: 5px 8px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}

#results-table tbody tr:nth-child(even) { background: #f9f9f7; }
#results-table tbody tr:hover { background: #eef; cursor: pointer; }
#results-table tbody tr.selected-row { background: #d0e4ff !important; }
#results-table tbody tr.selected-row td { font-weight: bold; }

#results-table .load-btn {
  padding: 3px 8px;
  font-size: 0.82em;
  background: #336;
  margin-top: 0;
}

#results-charts {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-wrap {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  min-height: 180px;
}

.chart-title {
  font-size: 0.8em;
  color: #555;
  text-align: center;
  margin-bottom: 4px;
  font-family: Georgia, serif;
}

.chart-container {
  width: 100%;
  min-height: 150px;
}

/* Mobile layout */
/* ── Responsive layout ────────────────────────────────────────────────
   The page has three layered grids: #controls (image | algorithm), the
   algorithm's internal random-panel (3-col) and kernel params (2-col),
   and #panels (a)(b)(c). Each one breaks down to fewer columns as the
   viewport narrows so nothing gets crushed. */

/* Medium: algorithm and panel internals start stacking. */
@media (max-width: 1024px) {
  .params-grid { grid-template-columns: 1fr; }
}

/* Narrow: Image and Algorithm stack on top of each other. */
@media (max-width: 860px) {
  #controls {
    grid-template-columns: 1fr;
  }
  #controls .image-box { grid-column: 1; }
  #controls .algo-box  { grid-column: 1; }
  .image-box .img-preview-wrap { max-height: 360px; }
  /* Panels go 2-col (c drops below) */
  #panels {
    flex-wrap: wrap;
  }
  #panels .panel { flex: 1 1 calc(50% - 16px); min-width: 0; }
  /* Results: table above charts */
  #results-inner {
    grid-template-columns: 1fr;
  }
  #results-inner > #results-table-wrap { grid-column: 1; grid-row: 1; }
  #results-inner > #results-charts     { grid-column: 1; grid-row: 2; }
}

/* Existing: very narrow — single column everywhere. */
@media (max-width: 600px) {
  #controls { display: flex; flex-direction: column; }
  #panels { flex-direction: column; }
  .panel { flex: unset; width: 100%; }
  #results-inner { flex-direction: column; }
  #results-charts { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .chart-wrap { flex: 1 1 240px; }
}

/* ── Toast notifications ──────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  max-width: 300px;
  pointer-events: none;
}

.toast {
  background: #1a1a2e;
  color: #f0f0f0;
  border-radius: 6px;
  padding: 10px 38px 10px 14px;
  font-size: 0.84em;
  line-height: 1.45;
  box-shadow: 0 4px 16px rgba(0,0,0,0.32);
  position: relative;
  pointer-events: all;
  overflow: hidden;
  margin-bottom: 8px;
  animation: toast-in 0.18s ease;
  font-family: inherit;
}

.toast.dismissing {
  animation: toast-out 0.35s ease forwards;
  pointer-events: none;
}

.toast-close {
  position: absolute;
  top: 5px;
  right: 7px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.15em;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  margin: 0;
  border-radius: 3px;
}
.toast-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
    max-height: 120px;
    margin-bottom: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ── Slow-run warning modal ───────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-backdrop.hidden {
  display: none;
}
#slow-modal {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  padding: 28px 32px 24px;
  max-width: 460px;
  width: calc(100% - 48px);
  font-family: Georgia, serif;
}
#slow-modal h3 {
  font-size: 1.05em;
  margin-bottom: 12px;
  color: #222;
}
#slow-modal p {
  font-size: 0.92em;
  line-height: 1.55;
  color: #444;
  margin-bottom: 18px;
}
#slow-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.4em;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  margin: 0;
}
#slow-modal-close:hover { background: #f0f0f0; color: #333; }
.slow-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}