/*
 * Landingspagina. Dezelfde kleuren als de app (apps/mobile/src/theme.ts), zodat
 * iemand die doorklikt niet op een ander product lijkt te landen.
 *
 * Bewust platte CSS zonder buildstap: deze pagina moet in één verzoek staan.
 */

:root {
  --achtergrond: #0d1117;
  --vlak: #161b22;
  --vlak-hoog: #1c2129;
  --rand: #2d333b;
  --tekst: #e6edf3;
  --tekst-zacht: #8b949e;
  --tekst-vaag: #6e7681;
  --accent: #4493f8;
  --positief: #3fb950;
  --negatief: #f85149;
  --waarschuwing: #d29922;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  line-height: 1.6;
}

.wrap {
  margin: 0 auto;
  max-width: 940px;
  padding: 0 20px;
}

.kop {
  border-bottom: 1px solid var(--rand);
  padding: 14px 0;
}

.kop-inhoud {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.merk {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Het woordmerk (logo-wit.svg) is 6150×1500; hoogte sturen, breedte volgt.
   Vloeiend zoals de h1: ~32px op een telefoon, tot 42px op desktop. */
.merk-logo {
  display: block;
  height: clamp(32px, 4vw, 42px);
  width: auto;
}

h1 {
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px;
}

h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Rundatum naast "De uitslag": informatief, geen tweede kop. */
.kop-datum {
  color: var(--tekst-vaag);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 4px;
}

h3 {
  font-size: 15px;
  margin: 0 0 6px;
}

.hero {
  padding: 56px 20px 32px;
}

.lead {
  color: var(--tekst-zacht);
  font-size: 17px;
  margin: 0 0 14px;
  max-width: 60ch;
}

.lead strong {
  color: var(--tekst);
}

.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 18px;
}

.kaart p {
  color: var(--tekst-zacht);
  font-size: 14px;
  margin: 0;
}

.resultaat {
  padding-bottom: 40px;
}

.resultaat-kop {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.kies {
  align-items: center;
  color: var(--tekst-zacht);
  display: flex;
  font-size: 13px;
  gap: 8px;
}

select,
input[type="email"] {
  background: var(--vlak-hoog);
  border: 1px solid var(--rand);
  border-radius: 6px;
  color: var(--tekst);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
}

.cijfers {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 14px;
}

.cijfer {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 14px;
}

.cijfer-waarde {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cijfer-label {
  color: var(--tekst-vaag);
  font-size: 12px;
}

.voortgang-sectie {
  padding-bottom: 40px;
}

.versies {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 18px 0 10px;
}

.versie {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 16px;
}

.versie-kop {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.versie-meta {
  color: var(--tekst-vaag);
  font-size: 11px;
}

.versie-regel {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 68px 1fr 64px;
  margin-bottom: 6px;
}

.versie-regel span {
  color: var(--tekst-zacht);
  font-size: 12px;
}

.versie-regel b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.balk {
  background: var(--vlak-hoog);
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
}

.balk div {
  border-radius: 3px;
  height: 8px;
}

.versie-oordeel {
  border-top: 1px solid var(--rand);
  font-size: 12px;
  margin: 10px 0 0;
  padding-top: 8px;
}

.grafiek-kaart {
  padding: 16px;
}

.grafiek-kop {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.grafiek-titel {
  color: var(--tekst-zacht);
  font-size: 13px;
}

.schakelaar {
  background: var(--vlak-hoog);
  border: 1px solid var(--rand);
  border-radius: 999px;
  color: var(--tekst-zacht);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  padding: 4px 11px;
}

.schakelaar[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.legenda .datum {
  color: var(--tekst);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.legenda b {
  color: var(--tekst);
  font-variant-numeric: tabular-nums;
}

.legenda em {
  color: var(--tekst-vaag);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

#grafiek {
  touch-action: pan-y;
}

#grafiek svg {
  display: block;
  height: auto;
  width: 100%;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}

.legenda span {
  align-items: center;
  color: var(--tekst-zacht);
  display: flex;
  font-size: 12px;
  gap: 6px;
}

.streep {
  border-radius: 2px;
  display: inline-block;
  height: 3px;
  width: 18px;
}

.samenvatting {
  color: var(--tekst-zacht);
  font-size: 15px;
  margin: 16px 0;
  max-width: 68ch;
}

.jaartabel {
  margin-top: 12px;
  padding: 0;
}

.jaartabel-kop {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  padding: 14px 18px;
}

.tabel-schuif {
  overflow-x: auto;
  padding: 0 18px 18px;
}

table {
  border-collapse: collapse;
  font-size: 13px;
  min-width: 100%;
  white-space: nowrap;
}

th,
td {
  border-bottom: 1px solid var(--rand);
  padding: 6px 10px 6px 0;
  text-align: right;
}

th:first-child,
td:first-child {
  text-align: left;
}

th {
  color: var(--tekst-vaag);
  font-size: 11px;
  font-weight: 600;
}

td {
  color: var(--tekst-zacht);
  font-variant-numeric: tabular-nums;
}

tr.holdout td {
  background: var(--vlak-hoog);
}

.op { color: var(--positief); }
.neer { color: var(--negatief); }

.kanttekening {
  padding-bottom: 40px;
}

.kanttekening ul {
  color: var(--tekst-zacht);
  font-size: 14px;
  margin: 14px 0 0;
  max-width: 70ch;
  padding-left: 18px;
}

.kanttekening li {
  margin-bottom: 8px;
}

.kanttekening strong {
  color: var(--tekst);
}

.acties {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding-bottom: 48px;
}

.actie form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.knop {
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 18px;
  text-align: center;
  text-decoration: none;
}

.knop-klein {
  font-size: 13px;
  padding: 7px 12px;
}

.actie .knop {
  margin-top: 4px;
}

.fijndruk {
  color: var(--tekst-vaag);
  font-size: 11px;
  margin: 0;
}

.melding {
  font-size: 13px;
  margin: 0;
  min-height: 1.2em;
}

.leeg p {
  margin: 0;
}

.voet {
  border-top: 1px solid var(--rand);
  color: var(--tekst-vaag);
  font-size: 12px;
  padding-bottom: 32px;
  padding-top: 20px;
}

a {
  color: var(--accent);
}

/*
 * De flopgrafiek onder de jaartabel. Krijgt een eigen kop met wat lucht
 * erboven, zodat duidelijk is dat hier een ander pakket getoond wordt en niet
 * een tweede weergave van hetzelfde.
 */
.blok-kop {
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}

/* Gezinspagina (gezin.html): de rekenregel als vaste tekst, zelfde kaartstijl. */
.regel-sectie {
  padding-bottom: 32px;
}

.rekenregel {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  color: var(--tekst);
  /* Grid in plaats van <pre>: de langste regel was 61 tekens in een blok van
     60ch en gaf een horizontale schuifbalk. Nu blijven term en teken uitgelijnd
     en breekt alleen de uitleg af als het smal wordt. */
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 64ch;
  padding: 14px 18px;
}

.rekenregel .term,
.rekenregel .op {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  white-space: nowrap;
}

.rekenregel .op {
  color: var(--accent);
}

.rekenregel .uitleg {
  min-width: 0;
  overflow-wrap: anywhere;
}

.regel-sectie .kaart {
  max-width: 70ch;
}

.regel-sectie table td:first-child {
  white-space: normal;
  min-width: 18ch;
}