/* scar_pin_paint.css — the admin zone-map editor inside the enlarged 3D panel.
 *
 * Everything is scoped under .scar-pin-paint-* / .scar-pin-map-* / #scar-pin-*. The
 * bar and the map canvas are built by scar_pin_paint.js only when
 * `scars.pin.paint_enabled` is on AND the viewer is an admin, so with the feature off
 * this file contributes nothing to the rendered page.
 *
 * Colours come from the app's own custom properties with literal fallbacks, matching
 * scar_pin.css — a renamed variable must not make the bar invisible over the frame. */

.scar-pin-paint-toggle.active,
.scar-pin-btn.active {
  border-color: var(--accent, #4f8ef7);
  box-shadow: inset 0 0 0 1px var(--accent, #4f8ef7);
}

/* The panel is 50% of the frame by default. The map is two 4:1 panels side by side,
   so width is what buys vertical resolution on the girth axis: at 94% of the frame a
   256-row flank lands at a usable height. */
.scar-pin-panel.scar-pin-map-mode {
  width: 94%;
  height: 88%;
}

/* .scar-pin-panel is a flex column; `flex: 0 0 auto` keeps the 3D canvas taking the
   slack rather than the map and the controls. */
.scar-pin-map-wrap,
.scar-pin-paint-bar {
  flex: 0 0 auto;
}

.scar-pin-map-wrap {
  display: block;
  padding: 2px 7px 0;
  background: var(--bg-alt, #1c2228);
  border-top: 1px solid var(--border, #2a3138);
}

/* "head left | head right" — the pair reads like the lab's L/R photograph, and the
   labels are the only thing stopping the mirrored panel being read backwards. */
.scar-pin-map-heads {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #8b96a1);
  padding-bottom: 2px;
}

/* `display:block` because an inline canvas sits on the text baseline and leaves a
   few pixels of gap that make the panel scroll. The cursor is a crosshair: the
   brush outline is drawn on the canvas itself, so a pointer arrow would hide the
   very cell being aimed at. */
.scar-pin-map {
  display: block;
  width: 100%;
  cursor: crosshair;
  background: #0b0e11;
  border: 1px solid var(--border, #2a3138);
  border-radius: 3px;
  image-rendering: pixelated;
}

.scar-pin-paint-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 7px 6px;
  background: var(--bg-alt, #1c2228);
}

.scar-pin-paint-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* A swatch is its zone's colour, so the label on it has to stay readable over both a
   dark green and a light yellow: white text with a hard dark outline does that
   without needing per-zone contrast maths. */
.scar-pin-paint-swatch {
  width: 26px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 1px 1px #000;
  border: 1px solid rgba(0, 0, 0, 0.55);
}

.scar-pin-paint-swatch:hover { filter: brightness(1.15); }

.scar-pin-paint-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent, #4f8ef7);
}

.scar-pin-paint-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.scar-pin-paint-radius-lab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted, #8b96a1);
}

.scar-pin-paint-radius {
  width: 86px;
  vertical-align: middle;
}

.scar-pin-paint-radius-out {
  min-width: 46px;
  font-variant-numeric: tabular-nums;
  color: var(--text, #dfe5ea);
}

.scar-pin-paint-status {
  font-size: 10px;
  line-height: 1.35;
  min-height: 14px;
  color: var(--text-muted, #8b96a1);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}