/* verktoy.css — kalkulatorene under /verktoy. Bygger på .kalk fra
   side-forbrukslan.css (feltene) og .kostnad fra detaljside.css (svaret),
   som begge lastes på sidene. Her: skjemaets rutenett og de små feltene. */

.vt{background:var(--fig-hvit);border:1px solid var(--rule);border-radius:10px;
  padding:1.125rem 1.25rem 1rem;margin:0 0 1rem;display:grid;gap:1rem 1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.vt .felt{min-width:0}
.vt label,.vt .felt-tittel{display:block;font-size:var(--tekst-xs);
  font-variation-settings:"wdth" 92,"wght" 520;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
/* Feltet: samme myke flate som beløpsfeltet i lånekalkulatoren, mindre. */
.vt .inn{display:flex;align-items:center;gap:.5rem;background:var(--wash);border-radius:8px;
  padding:.35rem .75rem;min-block-size:2.75rem}
.vt .inn:focus-within{box-shadow:0 0 0 2px var(--spruce)}
.vt .inn input{width:100%;min-width:0;background:transparent;border:0;color:var(--ink);
  font:inherit;font-size:var(--tekst-lg);font-variation-settings:"wdth" 92,"wght" 620;
  padding:0;appearance:textfield;-moz-appearance:textfield}
.vt .inn input:focus{outline:0}
.vt .inn input[type=date]{font-size:var(--tekst-base)}
.vt .enhet{color:var(--muted);font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 620;flex:0 0 auto}
.vt .hint{margin:.375rem 0 0;font-size:var(--tekst-xs);color:var(--muted);line-height:1.4}
/* Avkryssing: vanlig boks, stor nok trykkflate. */
.vt .kryss{display:flex;align-items:center;gap:.5rem;min-block-size:2.75rem;font-size:var(--tekst-sm);color:var(--ink-2)}
.vt .kryss input{inline-size:1.25rem;block-size:1.25rem;accent-color:var(--spruce);margin:0}
/* «Regn ut» står bare for den som er uten skript. Med skript regnes det
   ved hvert tastetrykk, og knappen skjules av data-js. */
.vt .regn{align-self:end}
.vt .regn button{min-block-size:2.75rem;padding:0 1.25rem;border:0;border-radius:6px;background:var(--spruce);
  color:var(--on-spruce);font:inherit;font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 640;cursor:pointer}
.vt-svar{margin-bottom:var(--luft-blokk)}
.vt-svar .kostnad-tall .val{font-size:var(--tekst-xl)}
.vt-svar .samme{font-size:var(--tekst-sm)}
.vt-svar .samme.vilkaar th{inline-size:auto}
.vt-svar .samme.vilkaar td,.vt-svar .samme.vilkaar th{padding:.4rem .75rem .4rem 0;white-space:nowrap}
/* Forklaringen under stolpen: samme regel som på detaljsidene, som der er
   scopet til .brod. Svaret her står utenfor .brod. */
.vt-svar .deling-forklaring{list-style:none;margin:.625rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.375rem 1.25rem;font-size:var(--tekst-sm);color:var(--ink-2)}
.vt-svar .deling-forklaring li{padding:0}
/* Med skript regnes det ved hvert tastetrykk; knappen er for den uten. */
.vt[data-js] .regn{display:none}