/* Aanmeldserver demo.ezisms.nl — de enige stylesheet.
   Bewust geen Vite-build: de demo-applicatie is ook Laravel en serveert
   onder /build, en dat pad zou in de HAProxy-ACL botsen (§5.1).

   De stijl volgt www.ezisms.nl (../www/index.html), de Industry-skin uit
   isms/ota: staalblauw op een lichte technische grond, Barlow Condensed
   koppen boven Barlow bodytekst, vierkante hoeken en haarlijnranden met
   registratiekruisjes. Mono-schema — één accent; rood, groen en oker alleen
   waar een status iets moet zeggen. Het lettertype komt uit
   fonts/barlow.css, dat vóór dit bestand wordt geladen. */

:root {
  color-scheme: light;

  --font-sans: 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Neutraalramp */
  --zinc-700: #5d5d60;
  --zinc-800: #424244;

  /* Accent — staalblauw, hue 210 */
  --steel-100: #eef6ff;
  --steel-200: #d6ebff;
  --steel-700: #416180;
  --steel-900: #1d2d3d;

  --grond: #f2f2f3;
  --vlak: #e9e9ea;               /* codeblokken, balkjes */
  --veld: #fafafa;               /* invoervelden: net iets lichter dan de grond */
  --inkt: #1d1f20;
  --inkt-2: var(--zinc-800);
  --inkt-3: var(--zinc-700);
  --lijn: color-mix(in srgb, #1d1f20 16%, transparent);
  --lijn-veld: color-mix(in srgb, #1d1f20 30%, transparent);
  --accent: #5980a6;
  --accent-tekst: var(--steel-700);
  --accent-donker: var(--steel-900);

  --fout: #9b3a2f;
  --fout-vlak: #f6e6e3;
  --goed: #2f6a48;
  --goed-vlak: #e4efe8;
  --wacht: #85600f;
  --wacht-vlak: #f5ecd8;

  --schaduw: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font: 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--accent-tekst);
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-donker); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--steel-200); }

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  padding: 0 0.3em;
}

/* ── Kop: logo en naam, zoals bovenaan www.ezisms.nl ─────────────────── */

.kop {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.75rem;
  text-align: center;
}

.kop a { color: inherit; text-decoration: none; }

/* Het logo heeft veel witruimte rondom; de vierkante houder snijdt die
   voor een deel weg, zodat het beeld niet verdrinkt. */
.logo {
  display: block;
  width: 9rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.35);
}

.kop .naam {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0.5rem 0 0.4rem;
}

/* Kicker onder de naam: klein, ruim gespatieerd, in de kopletter */
.kicker {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-tekst);
  margin: 0;
}

/* ── Blad en kaart ───────────────────────────────────────────────────── */

.blad {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

/* De blauwdrukrand: een kader zonder vulling, met op de vier hoeken een
   registratiekruisje zoals op een technische tekening. De kruisjes liggen
   6px buiten de rand; elk kader heeft daar dus marge voor nodig. */
.kaart,
.paneel,
.voet {
  position: relative;
  border: 1px solid var(--lijn);
  border-radius: 0;
}

.kaart::before, .kaart::after,
.paneel::before, .paneel::after,
.voet::before, .voet::after {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  color: color-mix(in srgb, var(--inkt) 55%, transparent);
}

/* linksboven en rechtsonder */
.kaart::before, .paneel::before, .voet::before {
  background:
    linear-gradient(currentColor, currentColor) 0 5px / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 5px 0 / 1px 11px no-repeat,
    linear-gradient(currentColor, currentColor) 100% calc(100% - 5px) / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 5px) 100% / 1px 11px no-repeat;
}

/* rechtsboven en linksonder */
.kaart::after, .paneel::after, .voet::after {
  background:
    linear-gradient(currentColor, currentColor) 100% 5px / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 5px) 0 / 1px 11px no-repeat,
    linear-gradient(currentColor, currentColor) 0 calc(100% - 5px) / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 5px 100% / 1px 11px no-repeat;
}

.kaart {
  padding: 2rem;
}
@media (max-width: 30rem) {
  .kaart { padding: 1.5rem 1.25rem; }
}

h1 {
  font-size: 2rem;
  margin: 0 0 1.1rem;
}

p { margin: 0 0 1rem; }
p.leeswijzer { color: var(--inkt-2); margin: -0.5rem 0 1.75rem; }

/* ── Formulieren ─────────────────────────────────────────────────────── */

.veld { margin-bottom: 1.1rem; }

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--inkt);
  background: var(--veld);
  border: 1px solid var(--lijn-veld);
  border-radius: 0;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

input[aria-invalid="true"] { border-color: var(--fout); }

/* Keuzerondjes: een fieldset zonder kader, met de legend als gewoon label. */
fieldset.keuzes { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.keuzes legend {
  padding: 0;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
label.keuze {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.45rem;
  cursor: pointer;
}
label.keuze input { margin-top: 0.3rem; accent-color: var(--accent-tekst); }
label.keuze .toelichting {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--inkt-3);
}
fieldset.keuzes.fout legend { color: var(--fout); }

.veldfout {
  color: var(--fout);
  font-size: 0.875rem;
  margin: 0.3rem 0 0;
}

/* De honeypot moet voor mensen onzichtbaar zijn maar voor een bot gewoon
   in de HTML staan; display:none wordt door sommige bots overgeslagen. */
.val {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent-tekst);
  border: 1px solid var(--accent-donker);
  border-radius: 0;
  padding: 0.5rem 1.4rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
button:hover { background: var(--accent-donker); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Meldingen en kleine tekst ───────────────────────────────────────── */

.melding {
  border: 1px solid color-mix(in srgb, var(--fout) 35%, transparent);
  border-left: 3px solid var(--fout);
  background: var(--fout-vlak);
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}
.melding.goed {
  border-color: color-mix(in srgb, var(--goed) 35%, transparent);
  border-left-color: var(--goed);
  background: var(--goed-vlak);
}

.privacy {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--inkt-3);
  border-top: 1px solid var(--lijn);
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.hint {
  font-size: 0.95rem;
  color: var(--inkt-2);
  box-shadow: inset 2px 0 0 var(--accent);
  padding-left: 0.9rem;
}

.hint summary { cursor: pointer; }

h2 {
  font-size: 1.3rem;
  margin: 1.75rem 0 0.5rem;
}

/* Het wachtwoord wordt één keer getoond; het mag dus opvallen. */
.geheim {
  border: 1px solid var(--accent);
  padding: 1rem 1.1rem;
  margin: 0 0 1.25rem;
}

.geheim .etiket {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-3);
  margin-bottom: 0.4rem;
}

.geheim .waarde {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  word-break: break-all;
  user-select: all;
}

/* ── Voet, in hetzelfde kader en even breed als de kaart ─────────────── */

.voet {
  margin: 2rem 0 0;
  padding: 0.8rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--inkt-3);
}