/*
    /nft — alleen wat de NFT-pagina extra nodig heeft. Kleuren en maten
    komen uit studio.css; hier geen eigen tokens behalve de drie tinten
    van de verdeelbalk.
*/
:root{
  --nf-pack: var(--accent);
  --nf-res:  color-mix(in srgb, var(--accent) 45%, var(--surface-2));
  --nf-dev:  var(--line-2);
}

/* ── galerij ───────────────────────────────────────── */
.nf-galerij{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.nf-galerij img{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--schaduw);
}

/* ── cijfers: zes vakken, op smal drie per rij (studio.css) ── */
.nf-cijfers .cijfer__w{ font-variant-numeric:tabular-nums; }
#nf-back{ color:var(--accent); }

/* ── verdeelbalk ───────────────────────────────────── */
.nf-split{
  display:flex; height:44px; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); margin:8px 0 22px;
}
.nf-split__d{
  display:flex; align-items:center; padding:0 14px;
  font-family:var(--mono); font-size:13px; font-weight:650; white-space:nowrap;
}
.nf-split__d--pack{ background:var(--nf-pack); color:var(--accent-in); }
.nf-split__d--res{ background:var(--nf-res); color:var(--ink); }
.nf-split__d--dev{ background:var(--nf-dev); color:var(--ink-2); justify-content:center; padding:0 6px; }
.nf-feiten .feit__l{ width:110px; font-family:var(--mono); }

/* ── bronnen van de pot: kaarten zonder foto ───────── */
.nf-bronnen .kaart:hover{ transform:none; }
.nf-bronnen .kaart p{ margin:0; }
.nf-bronnen .kaart b{ color:var(--ink); font-family:var(--mono); }

/* ── burn-voorbeeld ────────────────────────────────── */
.nf-burn{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start;
  border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); padding:24px 26px;
}
.nf-burn__ctl label{
  display:flex; justify-content:space-between; gap:12px;
  font-size:13.5px; font-weight:550; color:var(--ink-2);
}
.nf-burn__ctl output{ font-family:var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.nf-burn__ctl input{ width:100%; margin:12px 0 0; accent-color:var(--accent); }
.nf-burn__ctl .klein{ margin-top:12px; }
.nf-burn__uit{ margin:0; }
.nf-burn__uit b{ font-variant-numeric:tabular-nums; }
#nf-e-back{ color:var(--accent); }

/* ── toen en nu ────────────────────────────────────── */
.nf-thennow{
  width:100%; height:auto; border-radius:var(--r-l);
  border:1px solid var(--line); box-shadow:var(--schaduw-h);
}

@media (max-width:960px){
  .nf-galerij{ grid-template-columns:repeat(2,1fr); }
  .nf-burn{ grid-template-columns:1fr; gap:20px; }
}