/* Distance Fields shared UI kit v2 — extracted from shared/df-styles.html.
   The standard styling for all new pages, tools and applications (NOT games).
   Dark "inspector" look: design tokens, type, wells/inputs, segmented controls,
   sliders, chips, swatches, buttons and cards. */

:root {
  /* Surfaces */
  --bg: #0d0e11;
  --well: #1b1d21;
  --well-focus: #202329;
  --chip: #2c2f35;
  --seg: #16181b;
  --seg-active: #34373d;
  --divider: #20232a;

  /* Text */
  --text: #f0f1f3;
  --muted: #7c828c;
  --faint: #565b63;

  /* Accent — swap to #3b82f6 for the blue look */
  --accent: #ff7a18;

  /* Type + radii */
  --font: 15px/1.5 Helvetica, "Helvetica Neue", Arial, sans-serif;
  --r-sm: 7px; --r-md: 8px; --r-lg: 11px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--font);
}

/* Layout helpers */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.col { display: flex; flex-direction: column; gap: 1.5rem; }

h1 { font-size: 1.8rem; font-weight: 500; margin: 0; }
h2 { font-size: 1.5rem; font-weight: 500; margin: 0; }
h3 { font-size: 1.1rem; font-weight: 500; margin: 0; }
label, .label { display: block; color: var(--muted); margin-bottom: 0.5rem; font-size: 0.95rem; }
.field-row { display: flex; gap: 1rem; }
.field-row > * { flex: 1; }

.divider { height: 1px; background: var(--divider); margin: 0.5rem 0; }

/* Filled wells (inputs) */
.well {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--well);
  border-radius: var(--r-lg);
  padding: 0 0.85rem;
  height: 54px;
  border: 2px solid transparent;
}
.well:focus-within { border-color: var(--accent); background: var(--well-focus); }
.well input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--text); font: inherit;
}
.well input::placeholder { color: var(--faint); }

/* "Aa" prefix chip + color swatch */
.chip {
  flex: none;
  width: 40px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--chip);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-weight: 500;
}
.swatch { flex: none; width: 40px; height: 36px; border-radius: var(--r-sm); }

/* Select */
.well.select { cursor: pointer; }
.well.select select {
  flex: 1; appearance: none; background: none; border: none; outline: none;
  color: var(--text); font: inherit; cursor: pointer;
}
.well.select::after { content: "⌄"; color: var(--muted); font-size: 1.2rem; transform: translateY(-3px); }

/* Segmented control */
.seg {
  display: flex;
  background: var(--seg);
  border-radius: var(--r-lg);
  padding: 4px;
  gap: 4px;
}
.seg button {
  flex: 1;
  border: none; cursor: pointer;
  background: none; color: var(--muted);
  font: inherit; padding: 0.6rem 0;
  border-radius: var(--r-md);
}
.seg button.active { background: var(--seg-active); color: var(--text); }
.seg.icons button { font-size: 1.1rem; }
.seg button.active.accent { color: var(--accent); }

/* Slider */
.slider-wrap { padding-top: 0.25rem; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px; outline: none;
  background: linear-gradient(to right, var(--accent) var(--p,0%), var(--chip) var(--p,0%));
}
input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #6b7079; cursor: pointer; margin-top: -8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: #6b7079; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.slider-foot { display: flex; align-items: center; margin-top: 0.6rem; }
.val { background: var(--well); border-radius: var(--r-md); padding: 0.35rem 0.7rem; min-width: 48px; text-align: center; }
.slider-foot .max { margin-left: auto; color: var(--faint); }
.slider-foot .min { color: var(--faint); margin-right: 0.6rem; }

/* Buttons */
.btn-primary {
  background: var(--accent); color: #fff; border: none; border-radius: var(--r-md);
  font: inherit; font-weight: 500; padding: 0.6rem 1.1rem; cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost {
  background: transparent; color: var(--muted); border: 1px solid var(--chip);
  border-radius: var(--r-md); font: inherit; padding: 0.55rem 1rem; cursor: pointer;
}
.btn-ghost:hover { color: var(--text); background: var(--well); }

/* Card */
.card {
  background: var(--well);
  border-radius: var(--r-lg);
  border: 1px solid var(--divider);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--chip); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }