/* ==========================================================================
   Procent Calculator (V2.64.0) – huisstijl; kleuren, kaart, knop, veld uit css/basis.css
   Groot en duidelijk: grote lettertypes en vlakken, zodat het voor jong en oud makkelijk blijft.
   ========================================================================== */
.pc { display: flex; flex-direction: column; gap: 16px; }
.pc h2 { font: 600 1.1rem/1.3 var(--font-tekst); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.pc h2 svg.i { width: 18px; height: 18px; color: var(--merk); flex: none; }
.pc .knop svg.i { width: 16px; height: 16px; }
.pc-klein-titel { display: block; margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-3); }

.pc-kaart { padding: 24px; }
.pc-vraagkop { font-size: 1.25rem !important; margin-bottom: 14px !important; }

/* de zeven soorten sommen */
.pc-modi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.pc-modus { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: left; cursor: pointer;
  border: 2px solid var(--rand); border-radius: var(--r-m); background: var(--vlak); color: var(--tekst); font: inherit; }
.pc-modus b { font-size: 1rem; line-height: 1.25; }
.pc-modus small { font-size: var(--fs-s); color: var(--tekst-2); }
.pc-modus:hover { border-color: var(--merk); }
.pc-modus:focus-visible { outline: none; box-shadow: var(--ring); }
.pc-modus[aria-pressed="true"] { border-color: var(--merk); background: var(--merk-zacht); }
.pc-modus[aria-pressed="true"] b { color: var(--merk-tekst); }

/* de som als zin */
.pc-werk { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rand); }
.pc-zin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; font-size: 1.5rem; line-height: 1.3; font-weight: 600; }
.pc-w { white-space: normal; }
.pc .pc-veld { width: 9.5rem; max-width: 100%; height: 3.4rem; padding: 0 14px; font: 700 1.6rem var(--font-code); text-align: center; border-width: 2px; }
.pc .pc-keuze { height: 3.4rem; font: 700 1.3rem var(--font-tekst); border-width: 2px; padding: 0 10px; }
.pc .pc-veld.fout { border-color: var(--fout); }
.pc-melding { margin: 12px 0 0; min-height: 1.4em; font-size: var(--fs-m); color: var(--tekst-2); }
.pc-melding.fout { color: var(--fout); font-weight: 600; }

/* het antwoord */
.pc-antwoord { margin-top: 16px; padding: 20px 22px; border-radius: var(--r-m); background: var(--vlak-2); border: 2px solid var(--rand); }
.pc-antwoord.klaar { background: var(--ok-zacht); border-color: var(--ok); }
.pc-antwoord-label { display: block; font-size: var(--fs-m); font-weight: 600; color: var(--tekst-2); }
.pc-antwoord-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pc-antwoord-getal { font: 800 clamp(2.4rem, 8vw, 3.6rem)/1.1 var(--font-code); overflow-wrap: anywhere; }
.pc-antwoord-extra { margin: 8px 0 0; font-size: 1.1rem; font-weight: 600; }
.pc-antwoord-extra:empty { display: none; }
.pc-balk { position: relative; height: 34px; margin-top: 16px; border-radius: 10px; background: var(--vlak); border: 1px solid var(--rand); overflow: hidden; }
.pc-balk-vol { height: 100%; background: var(--merk); opacity: .85; min-width: 4px; transition: width .25s ease; }
.pc-balk-tekst { position: absolute; inset: 0; display: grid; place-items: center; font: 700 var(--fs-s) var(--font-tekst); color: var(--tekst); text-shadow: 0 0 6px var(--vlak), 0 0 3px var(--vlak); }

/* stappen */
.pc-uitleg-blok { margin-top: 20px; }
.pc-stappen { margin: 0; padding-left: 26px; display: grid; gap: 8px; font-size: 1.05rem; line-height: 1.6; }
.pc-stappen li { font-family: var(--font-code); font-weight: 500; }
.pc-stappen:empty { display: none; }
.pc-acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.pc-info ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--tekst-2); font-size: var(--fs-m); line-height: 1.6; }

@media (max-width: 560px) {
  .pc-kaart { padding: 16px; }
  .pc-zin { font-size: 1.25rem; }
  .pc .pc-veld { width: 8rem; height: 3.2rem; font-size: 1.4rem; }
  .pc-modi { grid-template-columns: 1fr 1fr; }
}