/* de Sluis - ITARR 2.0 "Het Relaas op het Web".
   Licht papier is de identiteit; donker is dezelfde Azul-ladder van de andere kant.
   Signaturen: de azul dash, de asymmetrische kaart-radius (scherpe hoek linksboven),
   de genummerde stappen, de veld-lijn die op focus intekent, en de status-adem. */

@font-face {
  font-family: "Schibsted"; src: url("/static/schibsted-grotesk-variable.woff2") format("woff2");
  font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: "InterS"; src: url("/static/inter-variable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

:root {
  --azul: #0c004c;
  --azul-30: #554d82;
  --azul-68: #b1adc6;
  --azul-82: #d3d1df;

  --papier: #ffffff;
  --papier-2: #f4f6fb;
  --inkt: #17142e;
  --inkt-2: #504e63;
  --inkt-3: #77758a;
  --accent: var(--azul);
  --accent-zacht: var(--azul-30);
  --hairline: var(--azul-68);
  --nevel: var(--azul-82);
  --cta-bg: var(--azul);
  --cta-tekst: #ffffff;
  --fout: #963a46;
  --goed: #1f7a54;
  --schaduw: 12, 0, 76;

  --sans: "InterS", system-ui, -apple-system, sans-serif;
  --heading: "Schibsted", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

/* Donker: optioneel. Automatisch voor wie zijn systeem op donker heeft staan,
   tenzij expliciet op licht gezet. Een expliciete data-theme="dark" wint altijd. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0e0b24; --papier-2: #131030;
    --inkt: #eceaf6; --inkt-2: #b6b2ce; --inkt-3: #8b87a8;
    --accent: #c9c3ea; --accent-zacht: #8f89bb;
    --hairline: #2c2752; --nevel: #221e45;
    --cta-bg: #eceaf6; --cta-tekst: #0c004c;
    --fout: #e5a9b0; --goed: #7ee0b8; --schaduw: 0, 0, 0;
  }
}
[data-theme="dark"] {
  --papier: #0e0b24; --papier-2: #131030;
  --inkt: #eceaf6; --inkt-2: #b6b2ce; --inkt-3: #8b87a8;
  --accent: #c9c3ea; --accent-zacht: #8f89bb;
  --hairline: #2c2752; --nevel: #221e45;
  --cta-bg: #eceaf6; --cta-tekst: #0c004c;
  --fout: #e5a9b0; --goed: #7ee0b8; --schaduw: 0, 0, 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--nevel); color: var(--inkt); }

h1, h2, h3 { font-family: var(--heading); font-weight: 500; letter-spacing: -0.015em; line-height: 1.12; }

/* De signatuur-dash: kort dik azul lijntje boven een kop/kaart. */
.dash::before {
  content: ""; display: block;
  width: 1.4rem; height: 3px; background: var(--accent);
  margin-bottom: 1.1rem;
  transition: width 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Kopbalk ---------- */
.topbalk {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.15rem clamp(1.25rem, 5vw, 2.75rem);
  border-bottom: 1px solid var(--hairline);
}
/* Het echte ITARR-logo (beeldmerk + woordmerk), inline SVG, kleurt mee via currentColor. */
.merk-logo { height: 20px; width: auto; color: var(--inkt); display: block; }
.merk-logo-groot { height: 26px; width: auto; color: var(--inkt); display: block; margin-bottom: 2.5rem; }
.merk-scheiding { width: 1px; height: 1.1rem; background: var(--hairline); }
.merk-label {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em;
  color: var(--inkt-3); text-transform: uppercase;
}
.verbinding {
  margin-left: auto;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--inkt-2); display: inline-flex; align-items: center; gap: 0.5rem;
}
.status-adem::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--goed); box-shadow: 0 0 0 0 rgba(31, 122, 84, 0.4);
  animation: adem 4s ease-in-out infinite;
}
@keyframes adem { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: 0.4; scale: 0.78; } }

/* verberg het icoontje van de oude opzet; het woordmerk draagt de kop nu */
.woordmerk-icoon { display: none; }

/* ---------- Hoofdkolom ---------- */
.scherm {
  flex: 1;
  width: 100%; max-width: 660px;
  margin: 0 auto;
  padding: clamp(2.25rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2rem) 3rem;
  display: flex; flex-direction: column; gap: 1.75rem;
}

/* ---------- Stap-paneel (kaart) ---------- */
.stap-paneel {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--hairline);
  border-radius: 0 6px 6px 6px;             /* scherpe hoek linksboven = ITARR-signatuur */
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 1px 2px rgba(var(--schaduw), 0.05), 0 10px 30px rgba(var(--schaduw), 0.06);
}
.stap-nr {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em;
  color: var(--accent-zacht); margin-bottom: 0.5rem; display: block;
}
.stap-paneel h1 {
  font-size: clamp(1.6rem, 4vw, 2.05rem);
  color: var(--inkt);
}
.toelichting { color: var(--inkt-2); margin-top: 0.85rem; max-width: 46ch; }
.toelichting-klein { color: var(--inkt-3); font-size: 0.9rem; margin-top: 0.6rem; }

/* ---------- Toegangscode-veld ---------- */
form { margin-top: 1.6rem; }
label {
  display: block; font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-3);
  margin-bottom: 0.6rem;
}
#veld-code {
  width: 100%; background: transparent; border: none;
  border-bottom: 1.5px solid var(--hairline);
  font-family: var(--sans); font-size: 1.7rem; letter-spacing: 0.4em;
  font-variant-numeric: tabular-nums; color: var(--inkt); padding: 0.35rem 0.1rem 0.6rem;
  /* veld-lijn: azul tekent zich van links in op focus */
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%;
  transition: background-size 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
#veld-code:focus { outline: none; background-size: 100% 2px; }
#veld-code::placeholder { color: var(--inkt-3); letter-spacing: 0.2em; }

/* ---------- Knoppen (ITARR: azul vlak, hoekig, uppercase) ---------- */
.knop-primair, .knop-secundair {
  display: inline-block; cursor: pointer; border: none;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.95rem 1.9rem; transition: all 200ms ease; text-decoration: none;
}
.knop-primair {
  background: var(--cta-bg); color: var(--cta-tekst); margin-top: 1.6rem;
}
.knop-primair:hover { filter: brightness(1.12); }
.knop-primair:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.knop-secundair {
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent);
}
.knop-secundair:hover { background: var(--accent); color: var(--cta-tekst); }

.bestandskiezer { margin-top: 1.6rem; }

/* ---------- Bestandenlijst ---------- */
.bestandenlijst { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.bestandrij {
  border: 1px solid var(--hairline); border-radius: 0 5px 5px 5px;
  padding: 0.9rem 1.05rem; background: var(--papier-2);
}
.bestand-info { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.bestand-naam { font-weight: 600; color: var(--inkt); word-break: break-all; }
.bestand-omvang { font-family: var(--sans); font-size: 0.8rem; color: var(--inkt-3); white-space: nowrap; }
.voortgang-track {
  margin-top: 0.7rem; height: 4px; background: var(--nevel);
  border-radius: 999px; overflow: hidden;
}
.voortgang-vulling { height: 100%; width: 0; background: var(--accent); transition: width 200ms ease; }
.bestand-status { display: block; margin-top: 0.55rem; font-family: var(--sans); font-size: 0.75rem; color: var(--inkt-2); }
.bestand-status[data-toestand="klaar"] { color: var(--goed); }
.bestand-status[data-toestand="fout"] { color: var(--fout); }

/* ---------- Foutmelding ---------- */
.foutmelding {
  margin-top: 1.1rem; color: var(--fout); font-size: 0.92rem;
  border-left: 3px solid var(--fout); padding-left: 0.85rem;
}

/* ---------- Ontvangstbewijs ---------- */
.bewijs-meta { display: flex; flex-wrap: wrap; gap: 2rem 3rem; margin-top: 1.6rem; }
.bewijs-meta dt { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-3); }
.bewijs-meta dd { font-family: var(--sans); font-size: 0.95rem; color: var(--inkt); margin-top: 0.3rem; }
.tabel-wrap { margin-top: 1.75rem; overflow-x: auto; border: 1px solid var(--hairline); border-radius: 0 5px 5px 5px; }
.bewijstabel { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bewijstabel th {
  text-align: left; font-family: var(--sans); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-3);
  padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--hairline); background: var(--papier-2);
}
.bewijstabel td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.bewijstabel tr:last-child td { border-bottom: none; }
.cel-naam { font-weight: 600; color: var(--inkt); word-break: break-all; }
/* De SHA-256-vingerafdruk blijft monospace: vaste breedte helpt bij het naast elkaar
   leggen en verifieren van de hash. De enige plek waar monospace functioneel is. */
.cel-hash { font-family: var(--mono); font-size: 0.76rem; color: var(--inkt-2); word-break: break-all; max-width: 22ch; }
.knop-klein {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--hairline); color: var(--accent);
  padding: 0.35rem 0.7rem; cursor: pointer; transition: all 160ms ease; white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.knop-klein:hover { border-color: var(--accent); background: var(--accent); color: var(--cta-tekst); }
#knop-bewijs-opslaan { margin-top: 1.75rem; }

/* ---------- Klantruimte ---------- */
.ruimte-titel { font-weight: 600; color: var(--inkt); margin-top: 0.85rem; }
.ruimte-blok { margin-top: 2.1rem; }
.ruimte-blok-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem;
}
.ruimte-blok-kop h2 {
  font-size: 1rem; color: var(--inkt); font-weight: 500;
}
.ruimte-rij-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.7rem; margin-top: 0.7rem;
}
.ruimte-datum { font-family: var(--sans); font-size: 0.78rem; color: var(--inkt-3); }
.doctype-badge {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 0.22rem 0.6rem; background: var(--nevel);
}
.doctype-badge-wacht { color: var(--inkt-3); background: transparent; font-style: italic; text-transform: none; letter-spacing: 0; }
.knop-download { margin-left: auto; }
.bestandrij[data-richting="uitgaand"] { background: var(--papier); }

/* ---------- Voetbalk ---------- */
.voetbalk {
  border-top: 1px solid var(--hairline);
  padding: 1.4rem clamp(1.25rem, 5vw, 2.75rem);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; justify-content: space-between;
}
.voetbalk p { color: var(--inkt-3); font-size: 0.82rem; }
.voet-url { font-family: var(--sans); font-size: 0.8rem; color: var(--inkt-2); letter-spacing: 0.02em; }

/* ---------- Kale voordeur (kaal.html) ---------- */
body.kaal { justify-content: center; }
.kaal-scherm {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: 560px; margin: 0 auto; padding: 3rem clamp(1.5rem, 6vw, 2rem);
  text-align: left;
}
.woordmerk-beeld { display: none; }
.kaal .woordmerk { /* de oude "de Sluis"-tekst wordt de kop */ }
.kaal-kop {
  font-family: var(--heading); font-weight: 500; font-size: clamp(1.9rem, 6vw, 2.6rem);
  color: var(--inkt); letter-spacing: -0.02em; line-height: 1.1;
}
.kaal-regel { color: var(--inkt-2); margin-top: 1rem; font-size: 1.05rem; }
.kaal-voet { margin-top: 3rem; font-family: var(--sans); font-size: 0.75rem; color: var(--inkt-3); letter-spacing: 0.04em; }

/* ---------- Toegankelijkheid ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

@media (max-width: 480px) {
  #veld-code { font-size: 1.4rem; letter-spacing: 0.3em; }
  .verbinding span { display: none; }
}