/* ---------------------------------------------------------------------------
   Gedeelde stijl voor de publieke pagina's van dekromgroep.ai:
   de landingspagina, het inloggen en de tutorial.

   Huisstijl De Kromgroep (zie brand/BRAND.md): cyaan #009FE3 als accent, charcoal
   voor tekst, veel wit. Lato voor koppen en tekst, net als op de website de-krom.nl - gelijk
   aan het bestaande dashboard, zodat een medewerker die van de site naar het
   portaal gaat geen stijlbreuk ziet.

   Bewust EEN bestand voor drie pagina's: de vorige opzet had alle CSS inline
   per pagina, wat betekende dat een kleurwijziging op drie plekken moest.
--------------------------------------------------------------------------- */

:root {
  --blue: #009FE3;
  --blue-ink: #0079B1;
  --blue-soft: #ECF7FD;
  --charcoal: #3A3A3A;
  --ink: #2C2F32;
  --ink-2: #5B6368;
  --ink-3: #8B9298;
  --bg: #FFFFFF;
  --panel: #F4F6F8;
  --surface: #FFFFFF;
  --line: #E7EAEE;
  --line-2: #D6DBE0;
  --ok: #2FA36B;
  --warn: #DB7A1E;
  --err: #C8402F;
  --head: 'Lato', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font: 'Lato', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --maxw: 1140px;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(58, 58, 58, .03);
  --shadow-lift: 0 18px 36px -18px rgba(58, 58, 58, .28), 0 4px 12px rgba(58, 58, 58, .06);
}

* { box-sizing: border-box; }

/* Het hidden-attribuut moet altijd winnen.
   De browser geeft [hidden] een display:none, maar dat is een gewone regel uit
   de standaardstijl: elke eigen regel met een display erin overschrijft hem. Zo
   stond de melding "gegevens nog niet klaargezet" in de tutorial tegelijk met de
   gegevens zelf in beeld, omdat .msg.show een display:block meebracht. Deze
   regel voorkomt dat overal in een keer. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background: var(--panel);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--blue-ink); text-decoration: none; }
a:hover { color: var(--blue); }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--blue-soft); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --- kop --- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--blue); opacity: .85;
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 28px; gap: 16px;
}
/* Het officiele logo is een staand ruit-monogram naast het woordmerk (2046x882),
   veel minder breed dan de oude tekening. Daarom op breedte gezet: de kop houdt
   dezelfde optische breedte als voorheen. */
.brand-logo { height: 46px; width: auto; display: block; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

.user-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 15px 5px 5px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--head); font-size: 12.5px; font-weight: 600;
  color: #fff; background: var(--charcoal);
}
.user-name { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

/* --- pagina --- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 52px 28px 64px; }
.wrap-narrow { max-width: 720px; }

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--head); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--blue);
}
.eyebrow::before { content: "// "; color: var(--blue); }

h1.title {
  margin: 0;
  font-family: var(--head); font-size: clamp(30px, 4vw, 44px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.08; color: var(--charcoal);
}
h1.title span { color: var(--blue); }
.subtitle {
  margin: 12px 0 0; font-size: 15.5px; color: var(--ink-2);
  max-width: 56ch; line-height: 1.55;
}

h2.block-label {
  margin: 0 0 18px;
  font-family: var(--head); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--charcoal);
}
h2.block-label::before { content: "// "; color: var(--blue); }

.block { margin-top: 44px; }

/* --- kaarten --- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.card h3 {
  margin: 0 0 8px;
  font-family: var(--head); font-size: 16px; font-weight: 600; color: var(--charcoal);
}
.card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.note {
  background: var(--blue-soft); border: 1px solid rgba(0, 159, 227, .22);
  border-radius: 14px; padding: 16px 20px;
}
.note h4 { margin: 0 0 4px; font-family: var(--head); font-size: 14.5px; font-weight: 600; color: var(--blue-ink); }
.note p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
/* Twee alinea's in een notitieblok liepen visueel tegen elkaar aan, omdat .note p
   geen marge heeft. Alleen de tweede en volgende krijgen er ruimte boven, zodat
   een blok met één alinea niet verandert. */
.note p + p { margin-top: 9px; }

.note.warn { background: #FDF6EE; border-color: rgba(219, 122, 30, .3); }
.note.warn h4 { color: #A85D12; }

/* --- formulier --- */
.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-lift);
}
.field { margin-bottom: 18px; }
.field label {
  display: block; margin-bottom: 7px;
  font-family: var(--head); font-size: 13px; font-weight: 600; color: var(--charcoal);
}
.field input {
  width: 100%; padding: 13px 15px;
  font-family: var(--font); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 159, 227, .16);
}
.field input[inputmode="numeric"] { letter-spacing: .34em; font-size: 19px; }
.field .hint { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-3); letter-spacing: normal; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px;
  font-family: var(--head); font-size: 15px; font-weight: 600; color: #fff;
  background: var(--blue); border: 1px solid var(--blue); border-radius: 11px;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover:not(:disabled) { background: var(--blue-ink); border-color: var(--blue-ink); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { color: var(--charcoal); background: #fff; border-color: var(--line-2); }
.btn.secondary:hover:not(:disabled) { background: var(--panel); border-color: var(--ink-3); }
.btn.inline { width: auto; padding: 9px 16px; font-size: 13.5px; }

.msg {
  margin: 0 0 18px; padding: 13px 16px; border-radius: 11px;
  font-size: 13.5px; line-height: 1.5; display: none;
}
.msg.show { display: block; }
.msg.error { background: #FDF0EE; border: 1px solid rgba(200, 64, 47, .28); color: #93301F; }
.msg.ok { background: #EEF9F3; border: 1px solid rgba(47, 163, 107, .28); color: #1E6B45; }
.msg.info { background: var(--blue-soft); border: 1px solid rgba(0, 159, 227, .22); color: var(--blue-ink); }

/* --- stappen (tutorial) --- */
.steps { list-style: none; counter-reset: stap; padding: 0; margin: 0; }
.steps > li {
  counter-increment: stap;
  display: grid; grid-template-columns: 44px 1fr; gap: 18px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.steps > li:last-child { border-bottom: none; }
.steps > li::before {
  content: counter(stap);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--head); font-size: 15px; font-weight: 600;
  color: #fff; background: var(--blue);
}
.steps h3 {
  margin: 6px 0 8px;
  font-family: var(--head); font-size: 17px; font-weight: 600; color: var(--charcoal);
}
.steps p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.steps p:last-child { margin-bottom: 0; }
.steps ul { margin: 10px 0 0; padding-left: 20px; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.steps li + li { margin-top: 6px; }

/* --- geheime waarden (DiCloak-gegevens) --- */
.secret-grid { display: grid; gap: 14px; margin-top: 6px; }
.secret {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px;
}
.secret .label {
  font-family: var(--head); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 4px;
}
.secret .value {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 15px; color: var(--charcoal); word-break: break-all;
}
.secret .value.masked { letter-spacing: .18em; color: var(--ink-3); }

/* --- voet --- */
.foot {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}

@media (max-width: 640px) {
  .wrap { padding: 36px 20px 48px; }
  .topbar-inner { padding: 13px 20px; }
  .form-card { padding: 24px; }
  .steps > li { grid-template-columns: 34px 1fr; gap: 14px; }
  .steps > li::before { width: 30px; height: 30px; font-size: 13px; }
}