/* ==========================================================================
   Oppervlakte Calculator (V2.41.0) – zelfde opbouw als de Volume Calculator – huisstijl; kleuren, kaart, knop, veld, segment uit css/basis.css
   ========================================================================== */
.op { display: flex; flex-direction: column; gap: 16px; }
.op h2 { font: 600 1.1rem/1.3 var(--font-tekst); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.op h2 svg.i { width: 18px; height: 18px; color: var(--merk); flex: none; }
.op-hint { margin: 0; font-size: var(--fs-s); color: var(--tekst-2); }
.op-hint.op-klein { font-size: var(--fs-xs); color: var(--tekst-3); margin-top: 10px; }
.op-klein-titel { font-size: var(--fs-xs); font-weight: 700; color: var(--tekst-3); text-transform: uppercase; letter-spacing: .04em; }
.op-klein-veld { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs); font-weight: 600; color: var(--tekst-3); min-width: 0; }

/* vormtegels */
.op-vormen { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.op-vormen button {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-m); border: 2px solid var(--rand);
  background: var(--vlak); color: var(--tekst); text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.op-vormen button:hover { border-color: color-mix(in srgb, var(--merk) 50%, var(--rand)); }
.op-vormen button[aria-selected="true"] { border-color: var(--merk); background: var(--merk-zacht); box-shadow: 0 4px 14px color-mix(in srgb, var(--merk) 20%, transparent); }
.op-vormen button[aria-selected="true"] b { color: var(--merk); }
.op-vormen button:focus-visible { outline: none; box-shadow: var(--ring); }
.op-mini { width: 46px; height: 37px; flex: none; }
.op-mini .op-lijn { stroke-width: 14; }
.op-tegel-tekst { display: flex; flex-direction: column; min-width: 0; }
.op-tegel-tekst b { font: 700 var(--fs-s)/1.2 var(--font-tekst); }
.op-tegel-tekst small { font-size: .7rem; color: var(--tekst-3); line-height: 1.25; }

/* hoofdkaart */
.op-hoofd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 22px; align-items: start; }
.op-instel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 12px; }
.op-instel .veld { min-width: 110px; }
.op-keuze { display: flex; flex-direction: column; gap: 5px; }
.op-keuze[hidden] { display: none; }
.op .op-keuze .segment button { padding-left: 10px; padding-right: 10px; }
.op-velden { display: flex; flex-direction: column; gap: 10px; }
.op-veld { display: flex; flex-direction: column; gap: 5px; }
.op-veld-naam { font-size: var(--fs-s); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.op-veld.opt .op-veld-naam span { color: var(--tekst-2); font-weight: 500; }
.op-veld-naam i { font: 700 .8rem var(--font-code); font-style: normal; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 6px; background: var(--merk-zacht); color: var(--merk); display: inline-grid; place-items: center; }
.op-rij { display: flex; align-items: center; gap: 8px; }
.op .op-rij .veld { flex: 1; min-width: 0; height: 46px; font: 600 1.1rem var(--font-code); }
.op .op-rij .veld.fout { border-color: var(--fout); }
.op-rij em { font-style: normal; min-width: 36px; font-weight: 600; color: var(--tekst-2); font-size: var(--fs-s); }
.op-melding { margin: 10px 0 0; font-size: var(--fs-s); color: var(--tekst-2); }
.op-melding:empty { display: none; }
.op-melding.fout { color: var(--fout); font-weight: 600; }
.op-stappen { margin: 12px 0 0; padding-left: 22px; font: 600 var(--fs-s)/1.7 var(--font-code); color: var(--tekst); overflow-wrap: anywhere; }
.op-stappen:empty { display: none; }
.op-vb-blok { margin-top: 14px; }
.op-vb { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.op-chip { height: 32px; padding: 0 12px; border-radius: var(--r-rond); border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst-2); font: 600 var(--fs-xs) var(--font-tekst); cursor: pointer; }
.op-chip:hover { border-color: var(--merk); color: var(--merk); }
.op-chip:focus-visible { outline: none; box-shadow: var(--ring); }

/* tekening en resultaat */
.op-rechts { display: flex; flex-direction: column; gap: 14px; }
.op-tekening { width: 100%; max-width: 440px; margin: 0 auto; display: block; }
.op-lijn { fill: none; stroke: var(--tekst-2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.op-lijn.achter { stroke-dasharray: 5 5; opacity: .55; }
.op-lijn.recht { stroke-width: 1.5; stroke-dasharray: none; fill: none; }
.op-lijn.boog { fill: none; stroke: var(--merk); stroke-width: 2; }
.op-lijn.maat { stroke: var(--merk); stroke-width: 2; stroke-dasharray: 6 4; }
rect.op-lijn, polygon.op-lijn, ellipse.op-lijn, circle.op-lijn, .op-tekening path.op-lijn:first-child, .op-mini path.op-lijn:first-child { fill: color-mix(in srgb, var(--merk) 7%, transparent); }
.op-lab { font: 700 13px var(--font-tekst); fill: var(--merk); paint-order: stroke; stroke: var(--vlak); stroke-width: 4px; }
.op-uit { padding: 16px 18px; border-radius: var(--r-m); background: var(--vlak-2); display: flex; flex-direction: column; gap: 6px; }
.op-groot { font: 700 2rem/1.2 var(--font-code); color: var(--tekst); }
.op-lijst { margin: 4px 0 0; display: grid; grid-template-columns: auto auto; gap: 4px 16px; justify-content: start; font-size: var(--fs-s); }
.op-lijst:empty { display: none; }
.op-lijst dt { color: var(--tekst-2); }
.op-lijst dd { margin: 0; font: 700 var(--fs-s) var(--font-code); }
.op-extra-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.op .op-extra button { padding: 5px 9px; font-size: var(--fs-xs); }
.op-extra-w { font: 700 var(--fs-m) var(--font-code); }

/* hoeveel nodig */
.op-nodig, .op-uitleg { padding: 20px 22px; }
.op-nodig-rij { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; margin-top: 12px; align-items: end; }
.op-nodig-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.op .op-nodig-velden .veld { font-family: var(--font-code); width: 100%; }
.op .op-nodig-velden .veld.fout { border-color: var(--fout); }
.op-nodig-uit { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.op-nodig-blok { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-m); background: var(--vlak-2); }
.op-nodig-blok b { font: 700 1.4rem var(--font-code); }
.op-nodig-blok small { font-size: var(--fs-xs); color: var(--tekst-2); }
.op-uitleg a { color: var(--merk); }
.op-uitleg ul { margin: 4px 0 0; padding-left: 20px; color: var(--tekst-2); line-height: 1.7; }
.op-uitleg li + li { margin-top: 6px; }

@media (max-width: 860px) {
  .op-hoofd { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .op-rechts { order: -1; }
  .op-tekening { max-width: 360px; }
}
@media (max-width: 560px) {
  .op-vormen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .op-vormen button { flex-direction: column; text-align: center; gap: 4px; padding: 8px 4px; }
  .op-tegel-tekst small { display: none; }
  .op-hoofd, .op-nodig, .op-uitleg { padding: 14px; }
  .op-nodig-rij { grid-template-columns: minmax(0, 1fr); }
  .op-groot { font-size: 1.6rem; }
  .op-stappen { font-size: .78rem; }
}