/* ==========================================================================
   app.css · alleen voor de app (index.html). Werkpakket APP.
   De schermen #start, #lezen, #uitkomst en #post, de brief op papier met
   markeringen, de stempel, de uitkomst en Mijn post.
   ========================================================================== */

/* ---------- Schermen ---------- */

.pagina {
  padding: 1.5rem 0 4rem;
}

/* Een sprong naar #start, #lezen … scrolt niet onder de kop door. */
.scherm {
  scroll-margin-top: 100vh;
}

.scherm-smal {
  max-width: var(--smal);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand-r);
}

.laadfout {
  margin-bottom: 1.5rem;
}

.scherm h1:not(.start-titel):not(.oordeel-label) {
  margin: 0 0 .6rem;
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem);
  line-height: 1;
}

.terug {
  margin: 0 0 .5rem;
}

.terug a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: var(--doel);
  font-weight: 600;
}

.label {
  display: block;
  margin: 0 0 .3rem;
  font-weight: 700;
}

.hint {
  margin: 0 0 .5rem;
  color: var(--grijs-tekst);
  font-size: .92rem;
}

.fout {
  margin: .5rem 0 0;
  color: var(--accent-tekst);
  font-weight: 700;
}

.fout::before {
  content: "! ";
}

.actie-rij {
  margin-top: 1rem;
}

.knoppen-rij {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ---------- Start ---------- */

.scherm-start {
  overflow-x: clip;
}

.start-grid {
  max-width: var(--breed);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand-r);
  display: grid;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .start-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: start;
    padding-top: 1.5rem;
  }
}

/* De naam (met ✳) is ongeveer 4,5 em breed. Op een smal scherm met grote letters (A+) wordt de titel daarom nooit
   breder dan de ruimte tussen de randen: anders breekt de naam midden in het woord. */
.start-titel {
  font-size: clamp(3rem, 1.4rem + 9vw, 7rem);
  font-size: min(clamp(3rem, 1.4rem + 9vw, 7rem), calc((100vw - var(--rand) - var(--rand-r)) / 4.7));
  line-height: .9;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.start-titel .ster {
  color: var(--accent-tekst);
  font-family: var(--font-tekst);
  font-size: .5em;
  vertical-align: .55em;
  margin-left: .05em;
}

.slogan {
  margin: .35rem 0 1rem;
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem);
  line-height: 1;
  color: var(--accent-tekst);
}

/* "Een initiatief van Wervora", vlak onder de slogan: rustig, maar goed leesbaar. Grijs op crème 6,0:1, in donker
   7,8:1; de link in de tekstkleur, onderstreept. De link krijgt ruimte boven en onder (een groter tikvlak), maar
   blijft inline: breekt de regel af, dan komt er geen extra witruimte. */
.start-initiatief {
  margin: -.35rem 0 1.1rem;
  color: var(--grijs-tekst);
  font-size: 1rem;
  font-weight: 600;
}

.start-initiatief a {
  padding: .7rem 0;
  color: var(--fg);
}

.start-knoppen {
  display: grid;
  gap: .75rem;
  max-width: 30rem;
  margin-top: 1.75rem;
}

.start-knoppen .knop {
  justify-content: space-between;
  text-align: left;
}

.belofte {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.4rem;
  font-weight: 600;
}

.belofte a {
  display: inline-block;
  padding: .55rem 0;
}

/* Een slotje van CSS: geen afbeelding, geen tekst voor schermlezers. */
.slot-teken {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: .9rem;
  margin-top: .75rem;
  background: var(--fg);
}

.slot-teken::before {
  content: "";
  position: absolute;
  left: .2rem;
  right: .2rem;
  bottom: 100%;
  height: .5rem;
  border: .17rem solid var(--fg);
  border-bottom: 0;
  border-radius: .5rem .5rem 0 0;
}

.meldingen:not(:empty) {
  margin-top: 1.25rem;
}

.meldingen .melding p + p {
  margin-top: .5rem;
}

.modus-keuze {
  margin-top: 2rem;
  padding: .75rem 1rem 1rem;
  border: 2px solid var(--lijn);
  background: var(--vlak);
  min-width: 0;
}

.modus-keuze legend {
  padding: 0 .4rem;
  font-weight: 700;
}

.keuzes {
  display: grid;
  gap: .5rem;
}

@media (min-width: 40rem) {
  .keuzes {
    grid-template-columns: 1fr 1fr;
  }
}

.keuze {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  min-height: var(--doel);
  padding: .7rem .8rem;
  border: 2px solid var(--haar);
  cursor: pointer;
}

.keuze:hover {
  border-color: var(--lijn);
}

.keuze:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.keuze:has(input:checked) {
  border-color: var(--lijn);
  background: var(--vlak-2);
}

.keuze input {
  width: 1.4rem;
  height: 1.4rem;
  margin: .1rem 0 0;
  accent-color: var(--fg);
}

.keuze-naam {
  display: block;
  font-weight: 700;
}

.keuze-uitleg {
  display: block;
  color: var(--grijs-tekst);
  font-size: .9rem;
  line-height: 1.45;
}

.gast-uitleg {
  margin-top: 1.5rem;
}

.start-post {
  margin-top: 1.25rem;
}

.start-post-status {
  font-weight: 600;
}

/* Een rustig plaatje van een brief, alleen op brede schermen. Puur decoratie. */
.start-beeld {
  display: none;
}

@media (min-width: 60rem) {
  .start-beeld {
    display: block;
    position: relative;
    min-height: 30rem;
    margin-top: 2rem;
  }
}

.beeld-mat {
  position: absolute;
  inset: 3.5rem 5% 3rem 16%;
  background: var(--limoen);
  border: 2px solid var(--inkt);
  transform: rotate(5deg);
}

.beeld-brief {
  position: absolute;
  inset: 1.5rem 14% 2rem 4%;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 2rem 1.75rem;
  background: var(--papier);
  border: 2px solid var(--inkt);
  box-shadow: .5rem .5rem 0 var(--inkt);
  transform: rotate(-2.5deg);
}

.beeld-regel {
  display: block;
  height: .5rem;
  background: var(--papier-lijn);
}

.beeld-regel.kort {
  width: 45%;
  height: .8rem;
  background: var(--papier-inkt);
}

.beeld-regel.half {
  width: 50%;
}

.beeld-regel.driekwart {
  width: 75%;
}

.beeld-rij {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px dashed var(--papier-lijn);
}

.beeld-geld {
  width: 28%;
  height: 1rem;
  background: var(--limoen);
  outline: 2px solid var(--papier-inkt);
}

.beeld-datum {
  width: 24%;
  height: .55rem;
  background: var(--papier-lijn);
  box-shadow: 0 .45rem 0 -.1rem var(--koraal-tekst);
}

.beeld-stempel {
  position: absolute;
  right: 7%;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  border: 2px solid var(--inkt);
  border-radius: 50%;
  background: var(--koraal);
  color: var(--inkt);
  font-size: 3rem;
  transform: rotate(12deg);
}

/* ---------- Lezen: tabbladen ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.5rem 0 1.25rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--lijn);
}

[role="tab"] {
  flex: 1 1 auto;
  min-height: 3rem;
  padding: .55rem 1rem;
  border: 2px solid var(--lijn);
  border-radius: 0;
  background: var(--vlak);
  color: var(--fg);
  font-weight: 700;
}

[role="tab"]:hover {
  background: var(--limoen);
  color: var(--inkt);
}

[role="tab"][aria-selected="true"] {
  background: var(--knop-primair-bg);
  border-color: var(--knop-primair-bg);
  color: var(--knop-primair-fg);
  box-shadow: inset 0 -.3rem 0 var(--limoen);
}

.invoer-tekst {
  display: block;
  width: 100%;
  min-height: 14rem;
  padding: .85rem 1rem;
  border: 2px solid var(--lijn);
  border-radius: 0;
  background: var(--vlak);
  color: var(--fg);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

.invoer-tekst[aria-invalid="true"] {
  border-color: var(--accent-tekst);
  border-width: 3px;
}

.foto-tips {
  margin-bottom: 1.25rem;
}

.foto-kies {
  position: relative;
}

/* De echte file-input blijft bereikbaar met het toetsenbord; het label is de grote knop. */
.bestand-invoer {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.bestand-invoer:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.foto-kies .knop {
  justify-content: space-between;
  width: 100%;
  max-width: 30rem;
}

.foto-kies + .foto-kies {
  margin-top: .6rem;
}

/* Melding als een geplakte tekst langer is dan 20.000 tekens (role="status"; leeg = geen ruimte). */
.lang-hint {
  margin: .5rem 0 0;
  padding-left: .6rem;
  border-left: .3rem solid var(--koraal);
  color: var(--fg);
  font-weight: 600;
}

.lang-hint:empty {
  margin: 0;
  padding: 0;
  border: 0;
}

.analyse-fout {
  margin: 0 0 1rem;
}

.foto-voorbeeld:not(:empty) {
  margin-top: 1rem;
}

.foto-beeld {
  display: block;
  max-width: 100%;
  max-height: 24rem;
  border: 2px solid var(--lijn);
}

.foto-status {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
}

.foto-status progress {
  width: 100%;
  height: 1rem;
  accent-color: var(--fg);
}

.foto-voortgang-label {
  font-weight: 600;
}

.foto-resultaat {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
}

.voorbeelden {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.voorbeeld-knop {
  width: 100%;
  height: 100%;
  min-height: 5.5rem;
  display: grid;
  align-content: start;
  gap: .2rem;
  padding: .9rem 1rem;
  border: 2px solid var(--lijn);
  border-radius: 0;
  background: var(--vlak);
  color: var(--fg);
  text-align: left;
}

.voorbeeld-knop:hover {
  background: var(--limoen);
  color: var(--inkt);
}

.voorbeeld-kanaal {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.voorbeeld-titel {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}

.voorbeeld-van {
  font-size: .92rem;
}

.voorbeeld-tag {
  justify-self: start;
  margin-top: .3rem;
  padding: .05rem .45rem;
  border: 1.5px solid currentColor;
  font-size: .78rem;
  font-weight: 700;
}

.lezen-wis {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--haar);
}

/* ---------- Uitkomst: indeling ---------- */

.uitkomst {
  max-width: var(--breed);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand-r);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hoofd" "uitleg" "brief" "blokken" "slot";
  gap: 1.5rem;
}

.uitkomst-hoofd { grid-area: hoofd; }
.uitkomst-uitleg { grid-area: uitleg; }
.brief-blok { grid-area: brief; }
.blokken { grid-area: blokken; }
.slotregel { grid-area: slot; }

@media (min-width: 72rem) {
  .uitkomst {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "hoofd brief"
      "uitleg brief"
      "blokken brief"
      "slot brief";
    column-gap: 2.5rem;
    align-items: start;
  }

  .brief-blok {
    align-self: start;
  }
}

.uitkomst h2 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 2rem 0 .7rem;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem);
  line-height: 1.05;
}

.uitkomst h2::before {
  content: "";
  flex: none;
  width: .45em;
  height: .45em;
  background: var(--koraal);
  border: 2px solid var(--inkt);
}

.uitkomst h2.sr-only::before {
  display: none;
}

.uitkomst h3 {
  margin: 1rem 0 .35rem;
  font-size: 1.05rem;
}

.uitkomst-kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
  margin-bottom: 1rem;
}

.uitkomst-kop .kicker {
  margin: 0;
}

.uitkomst-afzender {
  font-size: 1.05rem;
}

/* Geld terug (SPEC §12.11) */
.uitkomst-terug {
  padding: .45rem .7rem;
  border-left: .4rem solid var(--limoen);
  background: var(--vlak-2);
  font-size: 1.05rem;
}

.voorbeeld-melding {
  margin-top: .4rem;
}

.tip-hulpverlener {
  margin-top: 1rem;
}

/* ---------- 1 · Oordeel ---------- */

.oordeel-kaart {
  padding: 1.25rem 1.25rem 1.1rem;
  border: 2px solid var(--inkt);
  background: var(--papier);
  color: var(--inkt);
}

.oordeel-oplichting {
  background: var(--status-oplichting-vlak);
  color: var(--status-oplichting-tekst);
}

.oordeel-let-op {
  background: var(--status-letop-vlak);
  color: var(--status-letop-tekst);
  border-color: var(--status-letop-tekst);
}

.oordeel-klopt {
  background: var(--status-klopt-vlak);
  color: var(--status-klopt-tekst);
}

.oordeel-onbekend {
  background: var(--papier);
  color: var(--papier-inkt);
}

.oordeel-label {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem);
  line-height: 1;
  overflow-wrap: break-word;
}

.oordeel-kaart :focus-visible {
  outline-color: var(--inkt);
}

.oordeel-sub {
  margin-top: .6rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
}

.meter {
  position: relative;
  height: .8rem;
  margin-top: 1rem;
  border: 2px solid currentColor;
  background: var(--papier);
}

.meter-vul {
  position: absolute;
  inset: 0 auto 0 0;
  background: currentColor;
}

.meter-tekst {
  margin-top: .35rem;
  font-size: .9rem;
  font-weight: 600;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border: 1.5px solid var(--inkt);
  background: var(--papier);
  color: var(--inkt);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.35;
}

.pill-teken {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--inkt);
  font-size: .75rem;
  line-height: 1;
}

.pill.alarm .pill-teken {
  background: var(--koraal);
}

.pill.ok .pill-teken {
  background: var(--limoen);
}

.pill.kosten .pill-teken {
  background: var(--status-letop-vlak);
}

/* ---------- 2 t/m 5 · Uitleg ---------- */

.uitleg-wat {
  font-size: 1.1rem;
}

.uitkomst-uitleg > p {
  max-width: 65ch;
}

.uitkomst-uitleg,
.uitkomst-hoofd,
.brief-blok {
  min-width: 0;
}

.termijn,
.post-item,
.signaal-uitleg,
.hulp-lijst,
.bronnen {
  overflow-wrap: anywhere;
}

.uitkomst .stappen-lijst > li {
  max-width: 65ch;
}

.termijnen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
}

.termijn {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
  padding: 1rem 1.15rem;
  border: 2px solid var(--lijn);
  background: var(--vlak);
}

.termijn.nep {
  border-style: dashed;
}

.termijn-doel {
  color: var(--grijs-tekst);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.termijn-wet {
  letter-spacing: .04em;
}

.termijn-label {
  display: block;
  font-weight: 600;
}

.termijn-datum {
  display: block;
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);
  line-height: 1.05;
}

.termijn-teller {
  justify-self: start;
  padding: .1rem .6rem;
  border: 2px solid var(--inkt);
  background: var(--limoen);
  color: var(--inkt);
  font-weight: 700;
}

.termijn-teller.kort {
  background: var(--koraal);
}

.termijn-teller.voorbij {
  background: var(--status-letop-vlak);
  border-color: var(--status-letop-tekst);
  color: var(--status-letop-tekst);
}

.termijn-brief,
.termijn-bron,
.termijn-extra {
  font-size: .95rem;
  color: var(--fg-zacht);
}

.termijn-bron-label {
  font-weight: 700;
}

.termijn-extra {
  padding-left: .75rem;
  border-left: 3px solid var(--haar);
}

.termijn-acties {
  margin-top: .4rem;
}

/* Geen datum op de brief (SPEC §12.9): de laatste dag kan eerder zijn. */
.termijn-onzeker {
  padding: .45rem .7rem;
  border: 2px solid var(--status-letop-tekst);
  border-left-width: .4rem;
  background: var(--status-letop-vlak);
  color: var(--status-letop-tekst);
  font-size: .95rem;
}

/* Zitting (SPEC §12.10): wanneer je hulp zoekt. */
.termijn-hulp {
  font-size: 1.05rem;
}

.termijn-hulp.kort {
  padding-left: .6rem;
  border-left: .3rem solid var(--koraal);
}

.nep-termijn {
  margin-bottom: .75rem;
}

.geen-termijn {
  padding: .9rem 1rem;
  border: 2px dashed var(--lijn);
}

/* De zin die wordt voorgelezen, licht op. */
.leest {
  background: var(--limoen) !important;
  color: var(--inkt) !important;
  box-shadow: 0 0 0 .3rem var(--limoen);
}

/* ---------- 6 · Knoppen ---------- */

.knoppen-blok {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--lijn);
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.knop-teken {
  font-size: .9em;
}

/* Zonder lokale Nederlandse stem: één zin hoe je een stem zet (SPEC §12.1). */
.voorlees-uitleg {
  margin-top: .9rem;
  color: var(--fg-zacht);
  font-size: .95rem;
}

.knoppen-melding:not(:empty) {
  margin-top: .9rem;
  padding: .6rem .9rem;
  border-left: .4rem solid var(--lijn);
  background: var(--vlak-2);
}

.bevestig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
  margin-top: .9rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--letop-tekst);
  background: var(--letop-vlak);
  color: var(--letop-tekst);
}

.bevestig-titel {
  font-weight: 700;
  font-size: 1.05rem;
}

.bevestig :focus-visible {
  outline-color: var(--inkt);
}

/* De reactiebrief */
.reactie-paneel {
  margin-top: 1.25rem;
  padding: 1.1rem 1.15rem 1.25rem;
  border: 2px solid var(--lijn);
  background: var(--vlak);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}

.reactie-paneel h2 {
  margin-top: 0;
}

.reactie-tekst {
  width: 100%;
  min-height: 22rem;
  padding: .9rem 1rem;
  border: 2px solid var(--papier-inkt);
  border-radius: 0;
  background: var(--papier);
  color: var(--papier-inkt);
  font-family: var(--font-tekst);
  font-size: .95rem;
  line-height: 1.55;
  resize: vertical;
}

.reactie-tekst:focus-visible {
  outline-color: var(--focus);
}

.reactie-teller {
  font-weight: 600;
}

.reactie-melding:empty {
  display: none;
}

/* ---------- 7 · De brief op papier ---------- */

.brief-blok h2 {
  margin-top: 0;
}

@media (max-width: 71.99rem) {
  .brief-blok h2 {
    margin-top: 1rem;
  }
}

.brief-intro {
  margin-bottom: .75rem;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: .85rem;
}

.legenda li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.legenda-voorbeeld {
  padding: .05rem .3rem;
  background: var(--papier);
  color: var(--papier-inkt);
  border: 1px solid var(--papier-lijn);
  font-size: .85em;
  line-height: 1.4;
}

.prive-melding {
  margin: 0 0 1rem;
  font-size: .95rem;
}

.prive-melding p + p {
  margin-top: .6rem;
}

.brief-vak {
  position: relative;
}

.brief {
  --brief-px: 1.75rem;
  position: relative;
  padding: 0 var(--brief-px) 2rem;
  border: 2px solid var(--papier-inkt);
  background: var(--papier);
  box-shadow: var(--schaduw-brief);
  color: var(--papier-inkt);
  font-size: .92rem;
  line-height: 1.62;
  overflow: hidden;
}

@media (max-width: 34rem) {
  .brief {
    --brief-px: 1rem;
    padding-bottom: 1.5rem;
    font-size: .88rem;
  }
}

.brief-label {
  display: inline-block;
  margin: 0 0 1.25rem calc(-1 * var(--brief-px));
  padding: .25rem .6rem;
  background: var(--papier-inkt);
  color: var(--papier);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ln {
  min-height: 1.62em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ln.leeg {
  min-height: .75em;
}

.ln.kopregel {
  font-weight: 800;
  font-size: 1.05em;
  letter-spacing: .02em;
}

.ln.mailregel {
  color: var(--papier-grijs);
  font-family: var(--font-mono);
  font-size: .85em;
}

.ln.rij {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1rem;
  border-bottom: 1px dotted var(--papier-lijn);
}

.ln.rij .l {
  color: var(--papier-grijs);
}

.ln.rij .v {
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* De stempel: tekst loopt eromheen. */
.stempel {
  float: right;
  shape-outside: circle(50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  margin: .25rem -.5rem .75rem 1rem;
  border: 2.5px solid var(--papier-inkt);
  border-radius: 50%;
  box-shadow: .25rem .25rem 0 var(--papier-inkt);
  background: var(--papier);
  color: var(--papier-inkt);
  text-align: center;
  transform: rotate(12deg);
}

.stempel b {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: .95;
}

.stempel small {
  max-width: 5.5rem;
  margin-top: .3rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.stempel.oplichting {
  background: var(--koraal);
  color: var(--inkt);
}

.stempel.klopt {
  background: var(--limoen);
  color: var(--inkt);
}

.stempel.let-op {
  background: var(--status-letop-vlak);
  color: var(--status-letop-tekst);
}

@media (prefers-reduced-motion: no-preference) {
  .stempel-in {
    animation: stempel .55s cubic-bezier(.2, 1.5, .4, 1) both;
  }
}

@keyframes stempel {
  0% { transform: rotate(-10deg) scale(1.8); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: rotate(12deg) scale(1); }
}

/* Op een smal scherm past de tweede regel van de stempel niet. Alleen "KLOPT" of "GEEN ALARM" zou te veel
   geruststellen (bijvoorbeeld bij te hoge kosten). De stempel is versiering (aria-hidden); het oordeel staat
   helemaal in de kaart bovenaan. Daarom tonen we de stempel daar niet. */
@media (max-width: 34rem) {
  .stempel {
    display: none;
  }
}

/* Markeringen. Kleur is nooit het enige teken: er is altijd ook een lijn, kader of notitie. */
.m-bedrag {
  background: linear-gradient(transparent 10%, var(--limoen) 10%, var(--limoen) 90%, transparent 90%);
  box-shadow: inset 0 -2px 0 var(--papier-inkt);
  padding: 0 .1em;
  white-space: nowrap; /* "€" en het bedrag blijven bij elkaar */
}

.m-bedrag.hoofd {
  outline: 2px solid var(--papier-inkt);
  outline-offset: 1px;
}

.m-datum.deadline,
.m-termijn {
  box-shadow: inset 0 -.2em 0 var(--koraal-tekst);
  font-weight: 700;
}

.m-iban {
  outline: 1.5px solid var(--papier-inkt);
  outline-offset: 1px;
}

.m-iban.ok,
.m-link.ok {
  background: var(--ok-tint);
}

.m-iban.alarm,
.m-link.alarm {
  background: var(--alarm-tint);
  outline: 2px solid var(--koraal-tekst);
}

.m-iban.let-op {
  background: var(--status-letop-vlak);
}

.m-link {
  text-decoration: underline dotted 1.5px;
  text-underline-offset: .2em;
}

.m-link.alarm {
  text-decoration: underline wavy var(--koraal-tekst) 1.5px;
}

.m-alarm {
  background: var(--alarm-tint);
  border-bottom: 2px dashed var(--koraal-tekst);
}

.m-pii {
  background: var(--prive-tint);
  border-bottom: 2px dotted var(--papier-grijs);
}

.m-pii .x {
  display: none;
}

.brief.afgeschermd .m-pii .o {
  display: none;
}

.brief.afgeschermd .m-pii .x {
  display: inline;
  padding: .1em .35em;
  background: var(--papier-inkt);
  color: var(--papier);
  font-family: var(--font-mono);
  font-size: .82em;
  font-weight: 600;
}

.m-woord {
  position: relative;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-decoration: underline dotted 2px;
  text-underline-offset: .22em;
  cursor: help;
}

/* Groter tikvlak zonder dat de tekst verschuift. */
.m-woord::after {
  content: "";
  position: absolute;
  inset: -.45rem -.15rem;
}

.m-woord:hover,
.m-woord[aria-expanded="true"] {
  background: var(--ok-tint);
}

.m-woord:focus-visible {
  outline: 3px solid var(--papier-inkt);
  outline-offset: 2px;
}

.m-note {
  margin-left: .35em;
  color: var(--koraal-tekst);
  font-family: var(--font-hand);
  font-style: italic;
  font-weight: 700;
  white-space: normal;
}

.m-note.ok {
  color: var(--ok-inkt);
}

.m-note.info {
  color: var(--papier-inkt);
}

.legenda-voorbeeld.m-woord-voorbeeld {
  text-decoration: underline dotted 2px;
  text-underline-offset: .22em;
}

.legenda-voorbeeld.m-note {
  margin: 0;
  font-size: .85em;
}

/* De woordhulp-popover */
.woord-pop {
  position: absolute;
  z-index: 5;
  width: min(21rem, calc(100% - 1rem));
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* een lang woord mag de popover niet breder maken dan het scherm */
  gap: .5rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--limoen);
  background: var(--donker);
  color: var(--creme);
  font-size: .95rem;
  line-height: 1.5;
}

.woord-pop-titel {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1;
}

/* Op 320 px met grote tekst past een lang woord (zoals "Inkomstenbelasting") soms niet: dan afbreken, niet uitsteken. */
.woord-pop-titel,
.woord-pop-tekst {
  overflow-wrap: break-word;
  hyphens: auto;
}

.woord-pop .knop {
  justify-self: start;
}

/* ---------- 8 · Uitklapblokken ---------- */

.blokken {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
  align-content: start;
}

.blok {
  border: 2px solid var(--lijn);
  background: var(--vlak);
}

.blok > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .75rem;
  min-height: 3rem;
  padding: .65rem 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.blok > summary::-webkit-details-marker {
  display: none;
}

.blok > summary::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat;
}

.blok[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat;
}

.blok > summary:hover .blok-titel {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.blok-titel {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.blok-tel {
  color: var(--grijs-tekst);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

.blok-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  overflow-wrap: anywhere;
  padding: .25rem 1rem 1.15rem;
  font-size: .95rem;
}

.blok-in h3 {
  margin: .5rem 0 0;
}

.klein {
  font-size: .88rem;
  color: var(--grijs-tekst);
}

.signalen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .7rem;
}

.signaal {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: .75rem;
}

.signaal-gewicht {
  align-self: start;
  padding: .05rem .3rem;
  border: 1.5px solid var(--inkt);
  color: var(--inkt);
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.signaal-gewicht.plus {
  background: var(--koraal);
}

.signaal-gewicht.min {
  background: var(--limoen);
}

.signaal-gewicht.nul {
  background: var(--status-letop-vlak);
  border-color: var(--status-letop-tekst);
  color: var(--status-letop-tekst);
}

.signaal-label {
  font-weight: 700;
}

.signaal-uitleg {
  color: var(--fg-zacht);
}

.som {
  padding-top: .6rem;
  border-top: 1px solid var(--haar);
  font-size: .9rem;
}

.handtekening {
  padding: .6rem .8rem;
  border: 2px solid var(--lijn);
  border-left-width: .4rem;
}

.handtekening.nee {
  background: var(--letop-vlak);
  border-color: var(--letop-tekst);
  color: var(--letop-tekst);
}

.tabel {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.tabel th,
.tabel td {
  padding: .4rem .5rem .4rem 0;
  border-bottom: 1px solid var(--haar);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.tabel th {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tabel th:first-child,
.tabel td:first-child {
  width: 34%;
}

.tabel th:last-child,
.tabel td:last-child {
  width: 30%;
}

.tabel .r {
  padding-right: 0;
  text-align: right;
}

.wik {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .4rem;
  padding: .8rem 1rem;
  border: 2px solid var(--lijn);
}

.wik.te-veel {
  background: var(--letop-vlak);
  border-color: var(--letop-tekst);
  color: var(--letop-tekst);
}

.woorden {
  display: grid;
  gap: .6rem;
}

.woorden dt {
  font-weight: 700;
}

.woorden dd {
  margin: .1rem 0 0;
  color: var(--fg-zacht);
}

.lees-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
}

.schaal {
  position: relative;
  height: 1rem;
  border: 2px solid var(--lijn);
  background: var(--vlak);
}

.schaal-b1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 70%;
  right: 0;
  background: var(--limoen);
  border-left: 2px dashed var(--inkt);
}

.schaal-streep {
  position: absolute;
  top: -.4rem;
  bottom: -.4rem;
  width: .3rem;
  margin-left: -.15rem;
  background: var(--fg);
  border: 1px solid var(--bg);
}

.schaal-as {
  display: flex;
  justify-content: space-between;
  color: var(--grijs-tekst);
  font-size: .78rem;
}

.hulp-lijst,
.bronnen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
}

.hulp-lijst li {
  padding-left: .75rem;
  border-left: 3px solid var(--lijn);
}

.bronnen li {
  padding-left: 1rem;
  position: relative;
}

.bronnen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: .4rem;
  height: .4rem;
  background: var(--fg);
}

.hulp-lijst a,
.bronnen a,
.blok-in a {
  display: inline-block;
  padding: .6rem 0; /* aanraakdoel minstens 44 px hoog, ook in kleine tekst (SPEC §2.6) */
}

.ext {
  white-space: nowrap;
}

/* ---------- 9 · Vaste regel ---------- */

.slotregel {
  margin-top: 1rem;
  padding: 1rem 0 0;
  border-top: 2px solid var(--lijn);
  font-weight: 600;
}

.slotregel a {
  display: inline-block;
  padding: .45rem 0;
}

/* ---------- Mijn post ---------- */

.post-inhoud {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

.post-uitleg {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
}

.post-uitleg li {
  position: relative;
  padding-left: 1.6rem;
}

.post-uitleg li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .85rem;
  height: .85rem;
  background: var(--limoen);
  border: 2px solid var(--inkt);
}

.post-schakel {
  padding-top: 1rem;
  border-top: 1px solid var(--haar);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
}

.post-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
}

.post-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
  padding: 1rem 1.15rem;
  border: 2px solid var(--lijn);
  background: var(--vlak);
}

.post-item.post-oplichting {
  border-style: dashed;
}

.post-boven {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.post-afzender {
  font-family: var(--font-tekst);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.post-soort {
  color: var(--fg-zacht);
}

/* Bij 'Geen alarm': de zin uit SPEC §12.3 */
.post-echt {
  font-size: .95rem;
  font-style: italic;
}

.post-actie {
  font-weight: 600;
}

.post-actie.kort {
  padding-left: .6rem;
  border-left: .3rem solid var(--koraal);
}

.post-knoppen {
  margin-top: .3rem;
}

.mini {
  display: inline-block;
  padding: .1rem .5rem;
  border: 1.5px solid var(--inkt);
  background: var(--papier);
  color: var(--inkt);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mini-oplichting {
  background: var(--koraal);
}

.mini-klopt {
  background: var(--limoen);
}

.mini-let-op {
  background: var(--status-letop-vlak);
  border-color: var(--status-letop-tekst);
  color: var(--status-letop-tekst);
}

.mini-voorbeeld {
  background: var(--vlak-2);
  color: var(--fg);
  border-color: var(--lijn);
}

/* Rustige melding bij twee of meer betaalachterstanden */
.stapeling {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem 1rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border: 2px solid var(--letop-tekst);
  background: var(--letop-vlak);
  color: var(--letop-tekst);
}

.stapeling-aantal {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: .9;
}

.stapeling-tekst {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
}

.stapeling a {
  color: inherit;
}

.stapeling summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--doel);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.stapeling ol {
  margin: .25rem 0 .5rem;
  padding-left: 1.3rem;
  display: grid;
  gap: .25rem;
}

.stapeling :focus-visible {
  outline-color: var(--inkt);
}

/* ---------- Waarschuwing voor het automatisch wissen ---------- */

.wis-waarschuwing {
  position: fixed;
  left: var(--rand);
  right: var(--rand-r);
  bottom: 1rem;
  z-index: 50;
  max-width: 34rem;
  margin: 0 auto;
  display: grid;
  gap: .5rem;
  padding: 1rem 1.15rem;
  border: 2px solid var(--letop-tekst);
  background: var(--letop-vlak);
  color: var(--letop-tekst);
  border-top-width: .5rem;
}

.wis-titel {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
}

.wis-waarschuwing :focus-visible {
  outline-color: var(--inkt);
}

/* Bij een lage schermhoogte (400% zoom, liggende telefoon) moet de melding helemaal in beeld passen: titel,
   aftelling en knop. Dan korter, en als het toch niet past, binnen de melding scrollen. */
.wis-waarschuwing {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

@media (max-height: 30rem) {
  .wis-waarschuwing {
    bottom: .5rem;
    gap: .3rem;
    padding: .5rem .8rem;
    border-top-width: .3rem;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .wis-titel {
    font-size: 1.2rem;
  }

  .wis-extra {
    display: none;
  }

  .wis-waarschuwing .knop {
    min-height: var(--doel);
    padding-top: .4rem;
    padding-bottom: .4rem;
  }
}

.wis-tel {
  font-variant-numeric: tabular-nums;
}

/* ---------- Hoog contrast (forced-colors): markeringen houden een lijn ---------- */

@media (forced-colors: active) {
  .m-bedrag,
  .m-datum.deadline,
  .m-termijn {
    text-decoration: underline 2px;
    text-underline-offset: .2em;
  }

  .m-iban,
  .m-bedrag.hoofd {
    outline: 2px solid CanvasText;
  }

  .meter-vul {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .leest {
    outline: 3px solid Highlight;
  }

  .oordeel-kaart,
  .termijn,
  .blok,
  .stempel {
    border-color: CanvasText;
  }

  /* Het gekozen tabblad: achtergrond en schaduw vallen weg in hoog contrast. Dan een dikke rand en een streep. */
  [role="tab"][aria-selected="true"] {
    border-width: 4px;
    border-color: Highlight;
    text-decoration: underline 3px;
    text-underline-offset: .25em;
  }
}

/* ---------- Kleine schermen ---------- */

@media (max-width: 26rem) {
  /* Terugval voor browsers zonder container-eenheden (zie onder): lange woorden (zoals "rekeningnummer") in de
     grote tekst van het oordeel mogen dan bij 320 px en grote tekst worden afgebroken, alleen als ze 12 letters of
     meer hebben. De gewone tekst in de kaart blijft heel. */
  .oordeel-label {
    hyphens: auto;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 5;
    hyphenate-limit-chars: 12 5 5;
  }

  .oordeel-kaart {
    padding: 1rem .9rem .9rem;
  }

  .oordeel-sub {
    font-size: 1rem;
  }

  .termijn,
  .post-item,
  .reactie-paneel {
    padding-left: .85rem;
    padding-right: .85rem;
  }

  .blok-in {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .knoppen .knop {
    flex: 1 1 9rem;
  }

  .uitkomst h2 {
    margin-top: 1.6rem;
  }

  .signaal {
    grid-template-columns: 3.2rem minmax(0, 1fr);
  }
}

/* ---------- Het oordeel: woorden heel laten ----------
   B1-lezers lezen een afgebroken woord ("rekening-nummer", "Voorbeeldre-gister") veel moeilijker. Daarom geen
   automatische afbreking in de kaart van het oordeel. De grote tekst wordt op een smal scherm kleiner, zodat het
   langste woord ("rekeningnummer", 6,2 keer de lettergrootte breed) altijd op één regel past: 15cqi is 15% van de
   breedte van de kaart. */
.oordeel-sub,
.meter-tekst,
.pills {
  hyphens: manual;
}

@supports (font-size: 1cqi) {
  .oordeel-kaart {
    container-type: inline-size;
  }

  .oordeel-label {
    font-size: min(clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem), 15cqi);
    hyphens: manual;
  }
}