/*
 * De accountschermen: wat inloggen, profiel, de feedbackinbox, "zo werkt leren
 * hier" en de leeromgeving met elkaar delen — een kaart, een knop, een veld,
 * een melding.
 *
 * WAT HIER NIET MEER STAAT: de indeling van de leeromgeving zelf. Die stond
 * hier tot 25-08-2026 en is bij de herindeling van dat scherm verhuisd naar
 * app/account/leeromgeving.css. Reden: het waren ruim vijfhonderd regels die
 * maar één pagina aangingen, in een bestand dat vijf pagina's lezen.
 *
 * Alle vormgeving staat in een stijlblad en nergens anders — de server stuurt
 * `style-src 'self'` mee en weigert een style-attribuut STIL. Kleuren en maten
 * komen uit tokens.css, zodat dit eruitziet als de rest van de app.
 */

body {
  margin: 0;
  background: var(--tf-canvas);
  color: var(--tf-ink);
  font-family: var(--tf-font-ui);
  line-height: 1.55;
}

.vel {
  max-width: var(--tf-lees-max);
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.kop {
  padding: 20px 0 4px;
}

.etiket {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tf-muted);
}

.kop h1 {
  margin: 0 0 8px;
  font-family: var(--tf-font-display);
  font-size: 1.7rem;
  line-height: 1.2;
}

.kop .inleiding {
  margin: 0;
  color: var(--tf-ink-soft);
}

.kaart {
  background: var(--tf-surface);
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-card);
  padding: 18px 16px;
  margin: 16px 0;
}

.kaart h2 {
  margin: 0 0 10px;
  font-family: var(--tf-font-display);
  font-size: 1.15rem;
}

.kaart p {
  margin: 0 0 10px;
}

.veld {
  display: block;
  margin: 0 0 14px;
}

.veld span {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 0.92rem;
}

.veld input,
.veld select {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--tf-hit);
  padding: 8px 12px;
  font: inherit;
  color: inherit;
  background: var(--tf-bg);
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-element);
}

.veld input:focus-visible,
.veld select:focus-visible {
  outline: 2px solid var(--tf-accent-strong);
  outline-offset: 1px;
}

.veld .toelichting {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--tf-muted);
}

.knop {
  display: inline-block;
  min-height: var(--tf-hit);
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--tf-accent-ink);
  background: var(--tf-accent);
  border: var(--tf-border) solid var(--tf-accent-strong);
  border-radius: var(--tf-radius-pill);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.knop:hover { background: var(--tf-accent-strong); }

.knop:disabled {
  cursor: wait;
  opacity: 0.62;
}

.knop-stil {
  background: var(--tf-surface);
  color: var(--tf-ink);
  border-color: var(--tf-outline);
}

.knop-stil:hover { background: var(--tf-surface-sunken); }

.knop-gevaar {
  background: var(--tf-bad-tint);
  color: var(--tf-bad-ink, var(--tf-bad));
  border-color: var(--tf-bad);
}

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* Meldingen. Drie soorten en meer niet: gewoon, gelukt, en let-op. */
.melding {
  border: var(--tf-border) solid var(--tf-line);
  background: var(--tf-surface-warm);
  border-radius: var(--tf-radius-element);
  padding: 12px 14px;
  margin: 12px 0;
}

.melding[data-soort="gelukt"] {
  background: var(--tf-good-tint);
  border-color: var(--tf-good);
}

.melding[data-soort="letop"] {
  background: var(--tf-accent-tint);
  border-color: var(--tf-accent-line);
}

.melding p { margin: 0 0 8px; }
.melding p:last-child { margin-bottom: 0; }

/* De lijst van wat er meegaat naar een account. */
.meelijst {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.meelijst li {
  padding: 8px 2px;
  border-bottom: 1px solid var(--tf-line-soft);
}

.meelijst li:last-child { border-bottom: 0; }

.stil { color: var(--tf-muted); }

/* ── de besloten feedbackinbox ─────────────────────────────────────── */

.feedbackacties { margin-bottom: 14px; }

.feedbacklijst {
  display: grid;
  gap: 14px;
}

.feedbackkaart { margin: 0; }

.feedbackkop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.feedbackkop h2,
.feedbackkop h3 { margin-bottom: 2px; }

.feedbackkop .knop {
  flex: none;
  min-height: 42px;
}

.feedbackdeel {
  margin-top: 12px;
  padding: 11px 12px;
  border-left: 3px solid var(--tf-accent);
  border-radius: 0 10px 10px 0;
  background: var(--tf-surface-sunken);
}

.feedbacklabel {
  margin: 0 0 5px;
  color: var(--tf-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.feedbacktekst {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Twee blokken onder elkaar: eerst wat aan vragen hangt, dan alles. */
.feedbackblok { margin-bottom: 34px; }

.feedbackbloktitel {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.feedbackvraagtekst {
  margin: 0 0 2px;
  font-weight: 600;
}

.feedbacknummer {
  margin: 0 0 10px;
  color: var(--tf-muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.feedbackherkomst {
  margin: 6px 0 0;
  color: var(--tf-muted);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.feedbackadres {
  margin: 2px 0 0;
  color: var(--tf-muted);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .feedbackkop { display: block; }
  .feedbackkop .knop { margin-top: 10px; }
}

/* ── het startpunt (de cockpit) ─────────────────────────────────────── */

.balk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 14px;
}

.avatar {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: var(--tf-surface);
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tf-ink);
  text-decoration: none;
}

.avatar:hover { border-color: var(--tf-accent-line); }

.kop-strak { padding-top: 0; }

/* ── de voet en de kleine dingen van het inlogscherm ─────────────────── */

.voet {
  margin-top: 28px;
  font-size: 0.85rem;
  color: var(--tf-muted);
}

.voet p { margin: 0 0 6px; }

/* Het merk boven het inlogscherm: herkenning, en de weg terug. */
.merkkop {
  margin-bottom: 22px;
  width: fit-content;
}

/*
 * HET NIEUWE LOGO IN DE ACCOUNTSCHERMEN (wens 103, mijlpaal 2, ownerbesluit
 * vraag 2: "een tester ziet nu twee logo's in één klikpad"). Dit is UITSLUITEND
 * het logo — geen herontwerp van de accountschermen. De klassen zijn woordelijk
 * dezelfde als de kopbalk-bouwsteen in app/prijzen.html en app/site/huisstijl.css,
 * maar hier lokaal opnieuw gedefinieerd omdat de accountschermen huisstijl.css
 * niet laden: ze blijven in de bestaande (amberkleurige) app-tokens uit
 * app/tokens.css, en dat is met opzet zo (zie de niet_doelen op de kaart van
 * wens 103 — de oefenapp krijgt de nieuwe kleuren niet ongevraagd mee). MAAR:
 * het logo zelf is het merk en kleurt dus NIET mee met de amberkleurige
 * app-tokens — een amber logo is een derde logo, en dat was precies het
 * probleem. De merkkleuren staan daarom hier vast op het donkerblauw en groen
 * van de huisstijl van 28-08-2026, in licht en donker leesbaar gehouden met
 * een eigen inktkleur voor de donkere stand.
 */
.site-merk {
  /* De logo-svg tekent met var(--tf-ink) en var(--tf-accent); die twee worden
     hier binnen het merk opnieuw gezet, zodat alleen het merk de
     huisstijlkleuren draagt en de rest van het scherm zijn app-tokens houdt. */
  --tf-ink: #0b2349;
  --tf-accent: #00b45c;
  --tf-accent-strong: #00854a;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--tf-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-merk {
    --tf-ink: #eef2f8;
    --tf-accent-strong: #37e08d;
  }
}

:root[data-theme="dark"] .site-merk {
  --tf-ink: #eef2f8;
  --tf-accent-strong: #37e08d;
}

.site-merk-logo {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
}

.site-merk-woordmerk {
  font: 700 19px var(--tf-font-display);
  color: var(--tf-ink);
}

.site-merk-groen {
  color: var(--tf-accent-strong);
}

/* Hoe het werkt, in drie regels. Wie een wachtwoordveld verwacht, leest hier
   dat het er niet komt — dat scheelt zoeken en wantrouwen. */
.hoehet {
  margin: 18px 0 0;
  padding: 14px 0 0 22px;
  border-top: 1px solid var(--tf-line-soft);
  color: var(--tf-muted);
  font-size: 0.9rem;
}

.hoehet li { margin: 3px 0; }
.hoehet li::marker { font-weight: 700; color: var(--tf-accent-strong); }

/* Drie zekerheden, elk twee woorden. Meer beloven we niet. */
.zekerheden {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.zekerheden li {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tf-ink-soft);
  background: var(--tf-surface-warm);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-pill);
  padding: 4px 12px;
}

.voetlink {
  margin: 20px 0 0;
  font-size: 0.9rem;
}

.voetlink a { color: var(--tf-muted); }

/*
 * DE TERUGBALK BOVEN DE ACCOUNTPAGINA.
 *
 * Ownerbesluit 30-08-2026. Deze pagina had geen uitgang: de tabbalk en het
 * menu verdwenen, en het voelde als uit de website stappen. De balk staat
 * bovenaan de kolom en dus altijd op de plek waar je begint te lezen.
 */
.terugbalk {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 4px 0 2px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--tf-radius-pill, 999px);
  background: var(--tf-surface-sunken, var(--tf-surface));
  color: var(--tf-ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.terugbalk:hover {
  color: var(--tf-ink);
}

.terugbalk svg {
  flex: none;
}

/*
 * Vanaf 1024 staat de zijbalk links en is "Mijn account" daar aangezet. Een
 * losse terugknop erboven zou dan een tweede uitgang zijn voor iets wat al
 * in beeld staat.
 */
@media (min-width: 1024px) {
  .terugbalk {
    display: none;
  }
}

@media (min-width: 1024px) {
  .vel {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 28px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * DE ACCOUNTPAGINA OP EEN COMPUTERSCHERM — 30-08-2026
 *
 * Ownerbesluit: "De Mijn Account pagina voor Desktop ziet er uit als een
 * echte mobiele pagina, doe dat netjes maken voor desktop."
 *
 * De pagina had wel de schil van de leeromgeving gekregen maar niet de
 * indeling: één smalle kolom met kaarten onder elkaar, en op 1440 breed dus
 * driehonderd punten leegte ernaast.
 * ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  body[data-scherm="account"] .vel {
    max-width: 980px;
    padding: 30px 30px 60px;
  }

  body[data-scherm="account"] .kop {
    padding-top: 4px;
  }

  body[data-scherm="account"] .kop h1 {
    font-size: 2rem;
  }

  /*
   * TWEE SPOREN: links wat je invult, rechts wat je met je account doet.
   * De kaarten staan in de bron onder elkaar in de volgorde die op een
   * telefoon klopt; hier worden ze met grid-column op hun plek gezet zonder
   * dat die volgorde verandert.
   */
  body[data-scherm="account"] .vel {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 0 22px;
    align-content: start;
  }

  body[data-scherm="account"] .terugbalk,
  body[data-scherm="account"] .kop {
    grid-column: 1 / -1;
  }

  /* De eerste kaart is "Je gegevens" en die staat links. */
  body[data-scherm="account"] .kaart:first-of-type {
    grid-column: 1;
    grid-row: 3 / span 3;
  }

  body[data-scherm="account"] .kaart {
    grid-column: 2;
    margin-top: 0;
    margin-bottom: 18px;
  }

  /*
   * HET GEVAARBLOK OVER DE VOLLE BREEDTE, onderaan. Dat is met opzet: het is
   * het enige op deze pagina dat onomkeerbaar is, en het hoort niet weggestopt
   * in een smalle kolom naast iets anders.
   */
  body[data-scherm="account"] .kaart:last-of-type {
    grid-column: 1 / -1;
    margin-top: 6px;
  }

  /*
   * DE VELDEN TWEE AAN TWEE. Een invoerveld van 560 breed voor een roepnaam
   * is een leeg vlak met een rand omheen. Het e-mailadres blijft over de volle
   * breedte staan, want daar past wel iets lang in.
   */
  body[data-scherm="account"] #formulier {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  body[data-scherm="account"] #formulier .veld:first-of-type,
  #formulier .knoprij,
  #formulier .stil {
    grid-column: 1 / -1;
  }

  body[data-scherm="account"] .veld {
    margin: 0;
  }
}