/* ═══════════════════════════════════════════════════════════════════════
   DataBandar — visual polish layer
   ───────────────────────────────────────────────────────────────────────
   Loaded AFTER each template's inline <style>, so it can restyle existing
   components without editing ten files. app.css (tokens) loads first.

   Scope discipline: this file only touches *paint* properties — colour,
   border, radius, shadow, transition. It deliberately avoids width/height/
   padding on containers, because the 3D pages size their panels and map
   stage in JS and a reflow here would desync the canvas.

   Delete the two <link> lines to revert everything.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── range sliders ──────────────────────────────────────────────────────
   The default `accent-color` slider renders as a heavy dark bar — easily
   the most dated element in the tool chrome, and there are 5+ per panel.
   Replacing it with a light track + a raised brand thumb is the single
   biggest visible upgrade on the 3D pages. */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 20px;
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 100px;
  background: var(--card2, #e4e8f0);
  border: 1px solid var(--border);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;               /* centres an 18px thumb on a 6px track */
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(15, 20, 27, .18);
  transition: transform var(--dur-fast, 120ms) var(--ease, ease),
              box-shadow var(--dur-fast, 120ms) var(--ease, ease);
}

input[type=range]:hover::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgba(15, 20, 27, .22);
}

input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.02);
  box-shadow: 0 0 0 5px var(--brandglow);
}

input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 100px;
  background: var(--card2, #e4e8f0);
  border: 1px solid var(--border);
}

input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(15, 20, 27, .18);
}

/* ── checkboxes: bigger hit area, brand tint ───────────────────────────── */
input[type=checkbox] {
  accent-color: var(--brand);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── cards & panels: real elevation instead of a flat 1px outline ─────── */
.card,
.ds-card,
.map-card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur, 180ms) var(--ease, ease),
              border-color var(--dur, 180ms) var(--ease, ease);
}

/* ── text inputs & selects: softer resting state, brand focus ─────────── */
input[type=text],
input[type=search],
input[type=email],
input[type=password],
select,
textarea {
  transition: border-color var(--dur-fast, 120ms) var(--ease, ease),
              box-shadow var(--dur-fast, 120ms) var(--ease, ease);
}

input[type=text]:hover,
input[type=search]:hover,
select:hover {
  border-color: #c7cedb;
}

input[type=text]:focus,
input[type=search]:focus,
input[type=email]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brandglow);
}

/* ── buttons: tactile press feedback ───────────────────────────────────── */
button,
.tb-action,
.btn {
  transition: background var(--dur-fast, 120ms) var(--ease, ease),
              border-color var(--dur-fast, 120ms) var(--ease, ease),
              box-shadow var(--dur-fast, 120ms) var(--ease, ease),
              transform var(--dur-fast, 120ms) var(--ease, ease);
}

button:not(:disabled):active,
.tb-action:active,
.btn:active {
  transform: translateY(1px);
}

/* ── background swatch grid ─────────────────────────────────────────────
   The 4-column grid leaves ~58px per cell, so "Transparent" was breaking
   mid-word into "Transparen / t". Dropping the label a little and
   forbidding mid-word breaks keeps it on one line without touching the
   grid geometry. */
.bg-card {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.bg-card > span,
.bg-card > small,
.bg-card > div:last-child {
  font-size: 9.5px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  text-align: center;
  white-space: nowrap;
}

.bg-card.active {
  box-shadow: 0 0 0 3px var(--brandglow);
}

/* ── empty map stage: give the placeholder some presence ──────────────── */
.status-msg {
  font-size: 15px;
  color: var(--muted);
  letter-spacing: -0.01em;
}