/* Identix.org/tools — stijlen voor de toolpagina's (lane 7).
 * Bouwt uitsluitend op de DS-tokens uit /ds/styles.css; geen eigen kleuren.
 * Wordt geladen náór /ds/styles.css en /style.css. */

/* ---------- verborgen blijft verborgen ----------
 * DS-klassen (.field{display:grid}, .check{display:inline-flex}) verslaan als
 * author-stijlen de UA-regel [hidden]{display:none}; deze reset herstelt dat. */
[hidden] { display: none !important; }

/* ---------- lay-out: formulier links, uitkomst rechts ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}
@media (max-width: 920px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
}

.tool-paneel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.tool-paneel + .tool-paneel { margin-top: var(--space-4); }
.tool-paneel > h2 {
  font-size: 17px;
  margin-bottom: var(--space-4);
}

/* ---------- uitkomstpaneel ---------- */
.tool-uitkomst {
  position: sticky;
  top: 84px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 920px) {
  .tool-utikomst, .tool-uitkomst { position: static; }
}

.uitkomst-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.uitkomst-kop h2 { font-size: 17px; margin: 0; }
.uitkomst-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.uitkomst-bedrag {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.15;
  margin: var(--space-2) 0 var(--space-1);
  text-wrap: balance;
}
.uitkomst-sub {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.uitkomst-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.uitkomst-tabel th, .uitkomst-tabel td {
  text-align: left;
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.uitkomst-tabel th { font-weight: 400; color: var(--color-text-muted); width: 58%; }
.uitkomst-tabel td { font-weight: 600; color: var(--color-text); text-align: right; }
.uitkomst-tabel tr:last-child th, .uitkomst-tabel tr:last-child td { border-bottom: none; }
.uitkomst-tabel .regel-bron {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.uitkomst-melding {
  border-left: 3px solid var(--color-blue);
  background: var(--color-accent-2-100);
  padding: 10px 14px;
  font-size: 13.5px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-4) 0 0;
}
.uitkomst-melding.let-op { border-left-color: var(--color-warning, #9a6700); background: var(--color-surface-2); }
.uitkomst-melding p { margin: 0; }

/* ---------- aannames & bronnen ---------- */
.tool-aannames { margin: var(--space-4) 0 0; padding: 0 0 0 2px; list-style: none; }
.tool-aannames li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.tool-aannames li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-blue);
}

.tool-bronnen { font-size: 13px; color: var(--color-text-muted); }
.tool-bronnen ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.tool-bronnen li { margin-bottom: 4px; }
.tool-bronnen .peildatum { font-size: 12px; }

/* ---------- embedmodus (?embed=1): geen site-chrome ---------- */
body.embed .skip-link,
body.embed .brandband,
body.embed .topbar,
body.embed .site-footer,
body.embed .kruimels { display: none !important; }
body.embed main {
  padding-block: 14px 28px !important;
  max-width: 860px !important;
}
body.embed .tool-uitkomst { position: static; box-shadow: none; }
body.embed .embed-balk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.embed-balk { display: none; }
.embed-balk a { color: var(--color-blue); }

/* kleine taalwissel voor embed (de site-kop ontbreekt daar) */
.embed-taal { display: inline-flex; border: 1px solid var(--color-divider-strong); border-radius: var(--radius-md); overflow: hidden; }
.embed-taal button {
  border: none;
  background: transparent;
  font: 600 12px var(--font-body);
  color: var(--color-text-muted);
  padding: 3px 9px;
  cursor: pointer;
}
.embed-taal button[aria-pressed="true"] { background: var(--color-navy); color: #fff; }
.embed-taal button:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -2px; }

/* ---------- formulier-details ---------- */
.tool-form .field { margin-bottom: var(--space-4); }
.tool-form .field .input, .tool-form .field .select { width: 100%; }
.toelichting-parameter {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
fieldset.tool-fieldset {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-2);
  margin: 0 0 var(--space-4);
}
fieldset.tool-fieldset legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
  padding: 0 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .tool-uitkomst, .uitkomst-bedrag { transition: opacity .15s ease; }
}