:root {
  --bg: #fafafa;
  --fg: #1f2933;
  --muted: #5b6770;
  --accent: #2c7a3e;
  --discarded: #c4302b;
  --packed: #ffffff;
  --detection: #ff1493;
  --canvas-bg: #e8eef3;
  --canvas-border: #b6c3cd;
  --frame-border: #cdd5dd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.25rem 1.5rem 2rem;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1 { margin: 0 0 0.5rem; font-size: 1.4rem; }
.subtitle { margin: 0; color: var(--muted); font-size: 0.95rem; }

.stages-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  font-size: 0.92rem;
  align-items: baseline;
}
.stages-nav li {
  color: #b6bdc4;
  display: inline-flex;
  align-items: baseline;
}
.stages-nav li.current { color: var(--fg); }
/* Arrow separator between consecutive stage names. The arrow inherits the
   color of the previous stage (i.e. always gray once we're past the current
   one), since it's nested inside the next li but we set its color via a
   neighbor-aware style. Keeping it dimmed keeps the active stage prominent. */
.stages-nav li + li::before {
  content: '→';
  margin-right: 0.6rem;
  color: #b6bdc4;
  font-weight: 400;
}

.controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.controls button {
  padding: 0.4rem 0.85rem;
  border: 1px solid #99a3ad;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9rem;
}
.controls button:hover { background: #eef2f6; }
.controls button:disabled { opacity: 0.4; cursor: not-allowed; }

.slider-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.slider-label { font-size: 0.9rem; color: var(--muted); }
.slider-value {
  display: inline-block;
  min-width: 2.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#m-slider {
  accent-color: var(--accent);
  width: 200px;
}
#m-slider:disabled {
  filter: grayscale(1);
  cursor: not-allowed;
  opacity: 0.45;
}

.canvas-count {
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: auto;
}

.legend {
  display: flex;
  gap: 1.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 0.35rem;
  border-radius: 2px;
}
.swatch-relevant { background: transparent; border: 2px solid var(--accent); }
.swatch-discarded { background: transparent; border: 2px solid var(--discarded); }
.swatch-detection { background: transparent; border: 2px solid var(--detection); }
.swatch-frame { background: rgba(0,0,0,0.35); }
/* From stage 4 onward (packing/detect/unpack), the polyomino outline is white;
   keep the legend swatch in sync so the color guide always reflects what the
   user is looking at. */
body.stage-packed .swatch-relevant { border-color: var(--packed); background: rgba(0,0,0,0.15); }

main {
  background: white;
  border: 1px solid #d6dde4;
  border-radius: 6px;
  padding: 0.75rem;
  overflow: auto;
}
#stage {
  display: block;
  width: 100%;
  height: auto;
  background: white;
}

.frame-bg { fill: var(--frame-border); }
.frame-image { /* opacity transitioned via JS */ }
.canvas-bg { fill: var(--canvas-bg); stroke: var(--canvas-border); stroke-width: 1px; }
.canvas-label { fill: var(--muted); font-size: 11px; }

.polyomino-edge { stroke: var(--accent); stroke-width: 2px; fill: none; pointer-events: none; }
.polyomino-edge.discarded { stroke: var(--discarded); stroke-width: 2.5px; }
/* Packed polyominoes use a white border so detection bboxes stand out clearly against them. */
.polyomino-edge.packed { stroke: var(--packed); stroke-width: 2px; }

.detection {
  fill: none;
  stroke: var(--detection);
  stroke-width: 2.5px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

footer {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
}
footer .hint { margin: 0 0 0.25rem; }
footer .meta { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; }