/* APK Reminder, design system
   ---------------------------------------------------------------
   The palette is taken from the object the whole site is about: the
   Dutch license plate. Its yellow appears only on plates, its EU-band
   blue is the interface accent, and everything else is concrete grey
   so the plate is always the brightest thing on screen.
*/

:root {
  --plaat: #f6d500;
  --plaat-diep: #e0c200;
  --eu: #0b3b8f;
  --eu-licht: #1d55b8;
  --ink: #12141a;
  --ink-zacht: #5b6373;
  --paper: #eef0f4;
  --card: #ffffff;
  --line: #d7dbe2;
  --line-zacht: #e7eaef;

  --groen: #0c6b4c;
  --groen-vlak: #e4f2ec;
  --amber: #97540a;
  --amber-vlak: #fbeedd;
  --rood: #b32318;
  --rood-vlak: #fce9e7;
  --grijs-vlak: #eceef2;

  --radius: 14px;
  --radius-s: 9px;
  --schaduw: 0 1px 2px rgba(18, 20, 26, .06), 0 8px 24px -12px rgba(18, 20, 26, .18);
  --maat: min(100% - 2.5rem, 62rem);

  --font-plaat: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-tekst: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1f6;
    --ink-zacht: #a3abbb;
    --paper: #101319;
    --card: #171b23;
    --line: #2b313d;
    --line-zacht: #232833;
    --eu: #6f9bf0;
    --eu-licht: #8db2ff;
    --groen: #59c99e;
    --groen-vlak: #14291f;
    --amber: #e0a860;
    --amber-vlak: #2c2113;
    --rood: #f08a80;
    --rood-vlak: #2e1715;
    --grijs-vlak: #1e222b;
    --schaduw: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -14px rgba(0, 0, 0, .8);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-tekst);
  font-size: clamp(1rem, .97rem + .16vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--eu); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--eu-licht); }

:focus-visible {
  outline: 3px solid var(--eu);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: .5rem;
  background: var(--card);
  padding: .6rem 1rem;
  border-radius: var(--radius-s);
  z-index: 10;
}
.skip:focus { left: 1rem; }

/* Visible to screen readers, not on screen. */
.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Micro-label: the mono, wide-tracked caption used for every data field. */
.label {
  font-family: var(--font-data);
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}

/* --- License plate ------------------------------------------------ */

.plate {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: linear-gradient(178deg, #fbe45c 0%, var(--plaat) 38%, var(--plaat-diep) 100%);
  border: 2px solid rgba(18, 20, 26, .82);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
              inset 0 -2px 4px rgba(120, 96, 0, .25),
              0 6px 18px -8px rgba(18, 20, 26, .5);
  overflow: hidden;
}

.plate__band {
  flex: 0 0 auto;
  width: clamp(2.1rem, 8%, 3.1rem);
  background: var(--eu);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1em;
  padding: .35rem .2rem;
}

.plate__stars { width: 62%; max-width: 1.4rem; }

.plate__country {
  font-family: var(--font-plaat);
  color: #fff;
  font-size: clamp(.6rem, 1.6vw, .8rem);
  line-height: 1;
}

.plate__value {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-plaat);
  font-size: clamp(1.9rem, 9.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: .045em;
  color: #101014;
  text-align: center;
  padding: .38em .3em .34em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The input variant: the same plate, but you type in it. */
input.plate__value {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  appearance: none;
  font-family: var(--font-plaat);
}
input.plate__value::placeholder { color: rgba(16, 16, 20, .26); }
input.plate__value:focus { outline: none; }

.plate--input:focus-within {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
              0 0 0 4px color-mix(in srgb, var(--eu) 32%, transparent),
              0 8px 22px -8px rgba(18, 20, 26, .55);
}

.plate--klein {
  max-width: 15rem;
  border-width: 1.5px;
  border-radius: 7px;
}
.plate--klein .plate__value { font-size: clamp(1.25rem, 5vw, 1.6rem); }

/* --- Masthead & footer -------------------------------------------- */

.masthead {
  width: var(--maat);
  margin-inline: auto;
  padding: 1.4rem 0 .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}

.wordmark__plate {
  font-family: var(--font-plaat);
  font-size: .82rem;
  letter-spacing: .04em;
  color: #101014;
  background: var(--plaat);
  border: 1.5px solid rgba(18, 20, 26, .8);
  border-radius: 4px;
  padding: .18em .38em .12em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

.wordmark__text { font-size: 1.05rem; letter-spacing: -.01em; }

.masthead__nav {
  display: flex;
  gap: 1.25rem;
  font-size: .94rem;
}
.masthead__nav a { color: var(--ink-zacht); text-decoration: none; }
.masthead__nav a:hover { color: var(--eu); text-decoration: underline; }

.footer {
  margin-top: 4rem;
  border-top: 1px solid var(--line);
  background: var(--card);
}

.footer__inner {
  width: var(--maat);
  margin-inline: auto;
  padding: 2rem 0 2.5rem;
  display: grid;
  gap: 1rem;
}

.footer__note { color: var(--ink-zacht); font-size: .875rem; max-width: 46ch; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  font-size: .875rem;
}

/* --- Page scaffolding --------------------------------------------- */

.wrap { width: var(--maat); margin-inline: auto; }
.wrap--smal { width: min(100% - 2.5rem, 44rem); margin-inline: auto; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}

/* --- Landing hero -------------------------------------------------- */

.hero {
  width: min(100% - 2.5rem, 40rem);
  margin: clamp(2rem, 7vw, 4.5rem) auto 0;
  text-align: center;
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: 1.1rem;
}

.hero__title {
  font-size: clamp(2rem, 1.35rem + 3.1vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.025em;
  margin-bottom: .85rem;
}

.hero__lead {
  color: var(--ink-zacht);
  font-size: clamp(1.02rem, .98rem + .28vw, 1.15rem);
  max-width: 34ch;
  margin-inline: auto;
}

.zoekform { margin-top: clamp(1.75rem, 5vw, 2.5rem); }

.zoekform__hint {
  margin-top: .7rem;
  font-size: .85rem;
  color: var(--ink-zacht);
}

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: .9rem;
  padding: .95rem 1.5rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--eu);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.knop:hover { background: var(--eu-licht); }
.knop:active { transform: translateY(1px); }

@media (prefers-color-scheme: dark) {
  .knop { color: #0d1117; }
}

.fout {
  margin-top: .8rem;
  padding: .7rem .9rem;
  background: var(--rood-vlak);
  color: var(--rood);
  border-radius: var(--radius-s);
  font-size: .9rem;
  font-weight: 500;
  text-align: left;
}

/* --- Landing supporting content ------------------------------------ */

.uitleg {
  width: min(100% - 2.5rem, 58rem);
  margin: clamp(3rem, 8vw, 5rem) auto 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.uitleg__item { padding: 1.35rem 1.4rem 1.5rem; }
.uitleg__item h2 { font-size: 1.05rem; margin: .55rem 0 .4rem; }
.uitleg__item p { color: var(--ink-zacht); font-size: .93rem; }

.prose {
  width: min(100% - 2.5rem, 44rem);
  margin: clamp(2.5rem, 7vw, 4rem) auto 0;
}
.prose h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.9vw, 2.5rem);
  letter-spacing: -.022em;
  margin-bottom: .9rem;
}
.prose > p { color: var(--ink-zacht); }
.prose h2 { font-size: 1.18rem; margin: 2.2rem 0 .5rem; }
.prose h2 + p { margin-bottom: .6rem; }
.prose p + p { margin-top: .7rem; }
.prose ul { color: var(--ink-zacht); padding-left: 1.1rem; margin: .6rem 0 0; }
.prose li + li { margin-top: .35rem; }

/* --- Result page ---------------------------------------------------- */

.resultaat {
  width: min(100% - 2.5rem, 46rem);
  margin: clamp(1.5rem, 5vw, 2.75rem) auto 0;
  display: grid;
  gap: 1rem;
}

.resultaat__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.25rem;
  justify-content: space-between;
}

.resultaat__voertuig h1 {
  font-size: clamp(1.35rem, 1.15rem + .9vw, 1.75rem);
  letter-spacing: -.02em;
}
.resultaat__voertuig p { color: var(--ink-zacht); font-size: .9rem; margin-top: .15rem; }

/* Verdict card: the one loud element on the page. */
.oordeel { padding: 1.5rem 1.5rem 1.6rem; border-left: 5px solid var(--lijn-kleur, var(--line)); }
.oordeel--geldig { --lijn-kleur: var(--groen); }
.oordeel--verloopt-binnenkort { --lijn-kleur: var(--amber); }
.oordeel--verlopen { --lijn-kleur: var(--rood); }
.oordeel--onbekend { --lijn-kleur: var(--ink-zacht); }

.oordeel__status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-data);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 100px;
}
.oordeel--geldig .oordeel__status { background: var(--groen-vlak); color: var(--groen); }
.oordeel--verloopt-binnenkort .oordeel__status { background: var(--amber-vlak); color: var(--amber); }
.oordeel--verlopen .oordeel__status { background: var(--rood-vlak); color: var(--rood); }
.oordeel--onbekend .oordeel__status { background: var(--grijs-vlak); color: var(--ink-zacht); }

.oordeel__datum {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.025em;
  margin: .8rem 0 .2rem;
}

.oordeel__toelichting { color: var(--ink-zacht); font-size: .95rem; }

/* Time axis from today to the expiry date. Only shown when a date exists. */
.tijdlijn { margin-top: 1.4rem; }

.tijdlijn__spoor {
  position: relative;
  height: 6px;
  border-radius: 100px;
  background: var(--grijs-vlak);
  overflow: hidden;
}

.tijdlijn__vulling {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 100px;
  background: var(--lijn-kleur, var(--ink-zacht));
  width: var(--voortgang, 0%);
}

.tijdlijn__uiteinden {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
}

/* Data grid: register fields, mono labels above plain values. */
.gegevens {
  padding: 1.35rem 1.5rem 1.5rem;
  display: grid;
  gap: 1.1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.gegevens__waarde { margin-top: .2rem; font-weight: 500; }

.blok { padding: 1.4rem 1.5rem 1.5rem; }
.blok__kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
}
.blok__kop h2 { font-size: 1.08rem; letter-spacing: -.01em; }

.telling {
  font-family: var(--font-data);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .22rem .5rem;
  border-radius: 100px;
  background: var(--grijs-vlak);
  color: var(--ink-zacht);
  white-space: nowrap;
}
.telling--alarm { background: var(--rood-vlak); color: var(--rood); }

/* Recall entries, styled as stamped record rows. */
.actie {
  border-top: 1px solid var(--line-zacht);
  padding-top: 1.1rem;
  margin-top: 1.1rem;
}
.actie:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.actie__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  margin-bottom: .45rem;
}

.merk {
  font-family: var(--font-data);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.merk--open { color: var(--rood); background: var(--rood-vlak); }
.merk--afgehandeld { color: var(--groen); background: var(--groen-vlak); }

/* Recall categories are full sentences from the register: keep the mono
   voice of a data label, but drop the uppercasing so they stay readable. */
.actie__categorie {
  font-family: var(--font-data);
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink-zacht);
}

.actie__titel { font-size: 1rem; font-weight: 600; margin-bottom: .3rem; }
.actie__tekst { color: var(--ink-zacht); font-size: .93rem; }
.actie__tekst + .actie__tekst { margin-top: .5rem; }

.actie__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  margin-top: .7rem;
  font-family: var(--font-data);
  font-size: .72rem;
  color: var(--ink-zacht);
}

.leeg {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--ink-zacht);
  font-size: .95rem;
}

.opnieuw {
  display: grid;
  gap: .75rem;
  justify-items: center;
  margin-top: 1.5rem;
  text-align: center;
}

/* Message pages: not found, unavailable, rate limited. */
.bericht {
  width: min(100% - 2.5rem, 34rem);
  margin: clamp(2.5rem, 8vw, 4.5rem) auto 0;
  text-align: center;
  padding: 2rem 1.75rem 2.25rem;
}
.bericht h1 { font-size: 1.5rem; letter-spacing: -.02em; margin: 1.1rem 0 .5rem; }
.bericht p { color: var(--ink-zacht); }
.bericht .plate { margin-inline: auto; }
.bericht form { margin-top: 1.5rem; text-align: left; }

/* --- Motion -------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .resultaat > * {
    animation: opkomen .45s cubic-bezier(.2, .7, .3, 1) backwards;
  }
  .resultaat > *:nth-child(2) { animation-delay: .06s; }
  .resultaat > *:nth-child(3) { animation-delay: .12s; }
  .resultaat > *:nth-child(4) { animation-delay: .18s; }
  .resultaat > *:nth-child(5) { animation-delay: .24s; }

  .tijdlijn__vulling {
    animation: vullen .8s .25s cubic-bezier(.2, .7, .3, 1) backwards;
  }
}

@keyframes opkomen {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes vullen {
  from { width: 0; }
}