/* Onboarding, huisstijl.
   Kleur: diep pruim als drager, koraal voor waar je nu bent, oker voor wat af is.
   Vorm: overal dezelfde rail. Op een kaart liggend, in een module staand.
   Lopende tekst staat in bijna zwart, nooit in grijs. */

:root {
  --ob-inkt: #1a1020;
  --ob-pruim: #3b1d4e;
  --ob-pruim-licht: #6b4a80;
  --ob-koraal: #ff5a45;
  --ob-koraal-donker: #d93c29;
  --ob-oker: #e9a93c;
  --ob-papier: #f1eef3;
  --ob-wit: #fff;
  --ob-rand: #ded5e3;

  --ob-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ob-body: "Karla", "Segoe UI", system-ui, sans-serif;
  --ob-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --ob-radius: 14px;
  --ob-rail: 4px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ob-papier);
  color: var(--ob-inkt);
  font-family: var(--ob-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--ob-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: 1.35rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ob-pruim); text-decoration-color: var(--ob-rand); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ob-koraal); }

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

/* Eyebrow: het mono-label boven een kop. Zegt waar je bent, nooit meer dan dat. */
.ob-eyebrow {
  font-family: var(--ob-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ob-pruim-licht);
  margin: 0 0 10px;
}

/* Knoppen */
.ob-knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ob-koraal);
  color: var(--ob-wit);
  font-family: var(--ob-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ob-knop:hover { background: var(--ob-koraal-donker); }
.ob-knop:active { transform: translateY(1px); }
.ob-knop[disabled] { background: var(--ob-rand); color: var(--ob-pruim-licht); cursor: default; }
.ob-knop[disabled]:hover { background: var(--ob-rand); }

.ob-knop.ob-stil {
  background: transparent;
  color: var(--ob-pruim);
  border: 1.5px solid var(--ob-rand);
  font-weight: 500;
}
.ob-knop.ob-stil:hover { background: var(--ob-wit); border-color: var(--ob-pruim); }
.ob-knop.ob-stil[disabled] { color: var(--ob-rand); border-color: var(--ob-rand); background: transparent; }

/* Velden */
.ob-veld {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ob-rand);
  border-radius: 10px;
  background: var(--ob-wit);
  color: var(--ob-inkt);
  font-family: var(--ob-body);
  font-size: 1rem;
}
.ob-veld:focus { border-color: var(--ob-pruim); outline: none; box-shadow: 0 0 0 3px rgba(59, 29, 78, .12); }
label { font-family: var(--ob-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-pruim-licht); }
label .ob-veld, label textarea { margin-top: 6px; }

.ob-kaart {
  background: var(--ob-wit);
  border: 1.5px solid var(--ob-rand);
  border-radius: var(--ob-radius);
  padding: 24px;
}

.ob-fout {
  font-family: var(--ob-mono);
  font-size: .85rem;
  color: var(--ob-koraal-donker);
  margin: 12px 0 0;
}

/* ---------- Inloggen ---------- */
/* De rail loopt hier al door het beeld: afgelegd tot de kaart, daarna nog te gaan. */
.ob-inlog {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(var(--ob-oker), var(--ob-oker)) left center / 50% var(--ob-rail) no-repeat,
    repeating-linear-gradient(90deg, #cec2d6 0 12px, transparent 12px 20px) right center / 50% var(--ob-rail) no-repeat,
    var(--ob-papier);
}
.ob-inlog .ob-kaart { width: 100%; max-width: 400px; padding: 34px; }
.ob-inlog h1 { margin-bottom: 6px; }
.ob-inlog form { margin-top: 22px; }
.ob-inlog .ob-knop { margin-top: 16px; width: 100%; justify-content: center; }

/* ---------- Paginaraster ---------- */
.ob-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 28px 96px;
}
.ob-zijbalk { align-self: start; position: sticky; top: 48px; }
.ob-hoofd { min-width: 0; }
.ob-terug {
  display: inline-block;
  font-family: var(--ob-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ob-pruim-licht);
  margin-bottom: 26px;
}
.ob-terug:hover { color: var(--ob-koraal); }

/* ---------- Overzicht ---------- */
.ob-filters { display: grid; gap: 2px; }
.ob-filters label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-family: var(--ob-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ob-inkt);
  cursor: pointer;
}
.ob-filters label:hover { background: var(--ob-papier); }
.ob-filters input { accent-color: var(--ob-koraal); width: 16px; height: 16px; }

.ob-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.ob-grid a { text-decoration: none; color: inherit; display: block; }
.ob-grid .ob-kaart {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.ob-grid a:hover .ob-kaart { border-color: var(--ob-pruim); transform: translateY(-2px); }

.ob-chip {
  align-self: flex-start;
  font-family: var(--ob-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ob-pruim);
  background: var(--ob-papier);
  border-radius: 999px;
  padding: 5px 11px;
}
.ob-kaart-naam { font-size: 1.6rem; }
.ob-kaart-tekst { color: var(--ob-inkt); }
.ob-kaart-voet { margin-top: auto; padding-top: 16px; }

/* De rail, liggend: een streepje per onderdeel. Gevuld is gezien. */
.ob-rail { display: flex; gap: 4px; margin-bottom: 8px; }
.ob-rail span {
  height: var(--ob-rail);
  flex: 1;
  border-radius: 2px;
  background: #cec2d6;
}
/* Een functie zonder onderdelen krijgt toch een rail, anders valt er een gat. */
.ob-rail:empty {
  height: var(--ob-rail);
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #cec2d6 0 10px, transparent 10px 16px);
}
.ob-rail span.ob-af { background: var(--ob-oker); }
.ob-stand {
  font-family: var(--ob-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--ob-pruim-licht);
}

/* ---------- Modulepagina ---------- */
.ob-modulenaam { margin-bottom: 22px; }

/* Dezelfde rail, nu staand: de tijdlijn van de module. */
.ob-menu { list-style: none; margin: 0; padding: 0; position: relative; }
.ob-menu::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: var(--ob-rail);
  background: var(--ob-rand);
  border-radius: 2px;
}
.ob-menu li { position: relative; }
.ob-menu button {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px 9px 0;
  border: 0;
  background: none;
  font-family: var(--ob-body);
  font-size: .95rem;
  color: var(--ob-inkt);
  text-align: left;
  cursor: pointer;
}
.ob-knoop {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ob-papier);
  border: 2px solid var(--ob-rand);
  font-family: var(--ob-mono);
  font-size: .74rem;
  color: var(--ob-pruim-licht);
}
.ob-menu button:hover .ob-knoop { border-color: var(--ob-pruim); color: var(--ob-pruim); }
.ob-menu button.ob-af .ob-knoop { background: var(--ob-oker); border-color: var(--ob-oker); color: var(--ob-inkt); }
.ob-menu button[aria-current="true"] { font-weight: 700; }
.ob-menu button[aria-current="true"] .ob-knoop {
  background: var(--ob-koraal);
  border-color: var(--ob-koraal);
  color: var(--ob-wit);
  box-shadow: 0 0 0 4px rgba(255, 90, 69, .18);
}

.ob-stap { border: 0; background: none; padding: 0; }
.ob-stap h1 { margin-bottom: 20px; }
.ob-stap p { max-width: 62ch; font-size: 1.05rem; }
.ob-stap video {
  width: 100%;
  overflow: hidden;
  margin-top: 26px;
  border-radius: var(--ob-radius);
  background: var(--ob-inkt);
  display: block;
}
.ob-navigatie {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1.5px solid var(--ob-rand);
}

/* Afronden is een vinkje, geen knop: zo zie je meteen dat het aan en uit kan. */
.ob-afvink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1.5px solid var(--ob-rand);
  border-radius: 999px;
  background: var(--ob-wit);
  font-family: var(--ob-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ob-inkt);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease;
}
.ob-afvink:hover { border-color: var(--ob-oker); }
.ob-afvink input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  border: 2px solid var(--ob-pruim-licht);
  border-radius: 6px;
  background: var(--ob-wit);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ob-afvink input::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2.5px solid var(--ob-inkt);
  border-bottom: 2.5px solid var(--ob-inkt);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.ob-afvink input:checked { background: var(--ob-oker); border-color: var(--ob-oker); }
.ob-afvink input:checked::after { opacity: 1; }
.ob-afvink input:focus-visible { outline: 3px solid var(--ob-koraal); outline-offset: 3px; }
.ob-afvink.ob-is-af { background: #fdf3e2; border-color: var(--ob-oker); font-weight: 700; }

/* Voortgang van een upload, in dezelfde taal als de rail. */
.ob-voortgang {
  height: var(--ob-rail);
  border-radius: 2px;
  background: #cec2d6;
  overflow: hidden;
}
.ob-voortgang span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ob-koraal);
  transition: width .2s ease;
}

/* Bij het wisselen van stap schuift de inhoud kort in. */
.ob-stap { animation: ob-in .28s ease both; }
@keyframes ob-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Beheer ---------- */
.ob-beheerlink {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--ob-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ob-functielijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ob-functielijst button {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-family: var(--ob-body);
  font-size: .95rem;
  color: var(--ob-inkt);
  text-align: left;
  cursor: pointer;
}
.ob-functielijst button:hover { background: var(--ob-papier); }
.ob-functielijst button[aria-current="true"] {
  background: var(--ob-pruim);
  color: var(--ob-wit);
  font-weight: 700;
}

.ob-stapkaart {
  background: var(--ob-wit);
  border: 1.5px solid var(--ob-rand);
  border-left: var(--ob-rail) solid var(--ob-pruim);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
  display: grid;
  gap: 10px;
}
.ob-stapkaart.ob-video { border-left-color: var(--ob-koraal); }
.ob-stapkop {
  font-family: var(--ob-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ob-pruim-licht);
  margin: 0;
}
.ob-stapknoppen { display: flex; gap: 8px; margin: 4px 0 0; }
.ob-stapknoppen .ob-knop { padding: 7px 14px; font-size: .85rem; }
.ob-bestand { font-family: var(--ob-mono); font-size: .8rem; color: var(--ob-pruim); margin: 0; }
.ob-melding { font-family: var(--ob-mono); font-size: .85rem; color: var(--ob-pruim); }
.ob-veldrij { display: grid; gap: 16px; margin-bottom: 24px; }
.ob-scheiding { margin: 30px 0 16px; }

textarea.ob-veld { resize: vertical; min-height: 96px; font-family: var(--ob-body); }
input[type="file"] { font-family: var(--ob-mono); font-size: .82rem; }

/* ---------- Smal scherm ---------- */
@media (max-width: 940px) {
  .ob-layout { display: flex; flex-direction: column; gap: 32px; padding: 28px 20px 64px; }
  .ob-zijbalk { position: static; }
  /* Op een smal scherm komt eerst de kop en pas daarna het filter. De tijdlijn
     van een module blijft wel bovenaan staan, zodat je ziet waar je bent. */
  .ob-zijbalk:has(#filters) { order: 2; }
  .ob-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Wie ben ik, in de zijbalk ---------- */
.ob-ikblok { margin-top: 30px; padding-top: 22px; border-top: 1.5px solid var(--ob-rand); }
.ob-wie { margin: 0 0 2px; font-weight: 700; }
.ob-ikacties { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; }
.ob-ikacties a,
.ob-ikacties button {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--ob-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ob-pruim-licht);
  text-decoration: none;
  cursor: pointer;
}
.ob-ikacties a:hover,
.ob-ikacties button:hover { color: var(--ob-koraal); }

/* Beheer: de tabbladen en de accountlijst hergebruiken de functielijst. */
.ob-functielijst a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ob-inkt);
  font-size: .95rem;
}
.ob-functielijst a:hover { background: var(--ob-papier); }
.ob-functielijst a[aria-current="true"] { background: var(--ob-pruim); color: var(--ob-wit); font-weight: 700; }

/* Het startwachtwoord: één keer te zien, dus het mag opvallen. */
.ob-startwoord {
  margin-top: 22px;
  padding: 20px 24px;
  border: 1.5px solid var(--ob-oker);
  border-radius: var(--ob-radius);
  background: #fdf3e2;
}
.ob-startcode {
  font-family: var(--ob-mono);
  font-size: 1.5rem;
  letter-spacing: .06em;
  margin: 0 0 8px;
  user-select: all;
}

select.ob-veld { appearance: none; background-image: none; }