:root {
  --bg: #ffffff;
  --card: #ffffff;
  --ink: #111827;
  --muted: #6b7280;
  --accent: #6557A2;           /* Brand accent */
  --grid: rgba(17,24,39,0.10);
  --ink-soft: #374151;

  --data-tint: #f8f7ff;        /* soft accent tints for separation */
  --model-tint: #f7faff;
  --result-tint: #f9fff8;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

header, footer { max-width: 1680px; margin: 24px auto; padding: 0 16px; }
header h1 { margin:0 0 8px; font-size: 28px; color: var(--accent); letter-spacing: .2px; }
header p { margin:0; color: var(--ink-soft); }

main {
  max-width: 1680px;
  margin: 16px auto 48px;
  padding: 0 16px;
  display: grid;
  gap: 16px;
}


/* Twee kolommen op brede schermen: data | result */
@media (min-width: 1200px) {
  main {
    grid-template-columns: 1fr 1.25fr;
    grid-template-areas:
      "data result";
    align-items: start;
  }
  #dataCard { grid-area: data; position: sticky; top: 12px; }
  /* #modelCard bestaat niet, dus geen area nodig */
  #resultCard { grid-area: result; }
}


.card {
  background: var(--card);
  border: 1px solid var(--grid);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  position: relative;
}

/* Stronger separation between the three panels via colored top borders + faint backgrounds */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background: var(--accent);
  opacity: .85;
}
.card-data { background: var(--data-tint); }
.card-model { background: var(--model-tint); }
.card-result { background: var(--result-tint); }

h2 { margin: 0 0 12px; font-size: 20px; color: var(--ink); }

textarea {
  width: 100%;
  border-radius: 12px;
  padding: 10px;
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--grid);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.row { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.row.wrap-gap { gap: 8px 10px; }
.row.compact { margin-top: 0; }
.spacer { flex: 1; }
.info { color: var(--muted); }

/* Buttons */
button, input[type="number"], input[type="text"] {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--grid);
  border-radius: 10px;
  padding: 8px 10px;
}
button { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .02s; }
button:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(101,87,162,0.12); }
button:active { transform: translateY(0.5px); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { box-shadow: 0 0 0 3px rgba(101,87,162,0.20); }
.btn-outline {
  background: #fff;
  color: var(--accent);
  border-color: var(--accent);
}

/* Layers grid */
#layersContainer { display: grid; gap: 10px; }
.layer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 12px;
  padding: 12px;
  border: 1px dashed var(--grid);
  border-radius: 12px;
  background: #fff;
}
.layer h3 { margin: 0 0 4px; font-size: 15px; color: var(--accent); font-weight: 600; }
.layer .field { display: grid; gap: 4px; }
.layer .field .pair {
  display: grid;
  grid-template-columns: 1fr 90px; /* compact controls */
  gap: 8px;
  align-items: center;
}

/* --- Range slider normalization & fix (cross-browser) --- */
/* Reset the native look so other styles don't override unexpectedly */
.layer input[type="range"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 22px;                 /* provides room for the thumb to center */
  background: transparent;      /* track drawn on pseudo-element */
  outline: none;
}

/* TRACK */
.layer input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(101,87,162,0.25);
  border-radius: 999px;
}
.layer input[type="range"]::-moz-range-track {
  height: 6px;
  background: rgba(101,87,162,0.25);
  border-radius: 999px;
}

/* THUMB */
.layer input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(101,87,162,0.3);
  margin-top: -5px; /* centers the thumb on the 6px track */
}
.layer input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(101,87,162,0.3);
}

/* Focus ring for accessibility */
.layer input[type="range"]:focus-visible::-webkit-slider-runnable-track { box-shadow: 0 0 0 3px rgba(101,87,162,0.20); }
.layer input[type="range"]:focus-visible::-moz-range-track { box-shadow: 0 0 0 3px rgba(101,87,162,0.20); }

.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.adv { margin-top: 12px; }

/* Plot */
.plot {
  width: 100%;
  height: 520px;
  background: #ffffff;
  border: 1px solid var(--grid);
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.plot svg { width: 100%; height: 100%; display: block; }
.legend { display:flex; gap:12px; align-items:center; color:var(--muted); margin-top:6px; }
.legend .dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.meas { background:#eab308; }
.dot.model { background:#10b981; }

footer { color: var(--muted); text-align: center; }

/* --- UI tweaks (append to the end of style.css) --- */

/* 1) Meer ruimte tussen knoppen en grafiek (rechter kolom) */
#resultCard .row.wrap-gap {
  margin-bottom: 16px; /* was vrijwel 0; nu ademruimte */
}

/* 2) Advanced settings compacter (kleiner font + inputs) */
details.adv {
  --adv-font-size: 13px;     /* globale schaal voor advanced */
  --adv-input-width: 120px;  /* vaste breedte voor number inputs */
  --adv-gap-col: 14px;       /* kolom-gap */
  --adv-gap-row: 8px;        /* rij-gap */
}

details.adv,
details.adv summary,
details.adv label,
details.adv .info {
  font-size: var(--adv-font-size);
}

/* compacter input uiterlijk binnen advanced */
details.adv input[type="number"] {
  font-size: var(--adv-font-size);
  width: var(--adv-input-width);
  padding: 6px 8px;         /* iets smaller dan standaard */
  border-radius: 8px;       /* visueel lichter */
}

/* 3) Netjes uitlijnen met consistente grid voor labels/velden */
details.adv .row.compact {
  display: grid;
  grid-template-columns: max-content var(--adv-input-width) max-content var(--adv-input-width);
  gap: var(--adv-gap-row) var(--adv-gap-col);
  align-items: center;
  margin: 8px 0;
}

/* wat extra ruimte tussen de twee compacte rijen */
details.adv .row.compact + .row.compact {
  margin-top: 10px;
}

/* optioneel: iets rustiger labelkleur in advanced */
details.adv label {
  color: #4b5563; /* Tailwind-ish slate-600 */
}