/* ============================================================
   roefus.nl - opmaak van de pagina's zelf
   De kleuren, letters en bouwstenen (.kaart, .terzijde, .let-op,
   .kenteken) komen uit huisstijl.css, de huisstijl van werkAI. Het
   klaarzetscript zet die ernaast; hier staat alleen de bladspiegel.
   Geen hexcodes hier: alles via de tokens van de huisstijl.
   ============================================================ */

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.5;
}

main{max-width:46rem;margin:0 auto;padding:3rem 1rem 4rem}
main.smal{max-width:26rem}

h1{
  font-family:var(--font-heading);
  font-size:2rem;
  line-height:1.15;
  letter-spacing:var(--kop-spatie);
  color:var(--primary);
  margin:.2rem 0 .6rem;
}
h2{font-family:var(--font-heading);font-size:1.15rem;margin:0 0 .35rem}

.kenteken{margin:0}
.inleiding{color:var(--muted);margin:0 0 1.6rem}
.voet{font-size:.9rem;color:var(--muted);margin-top:2rem}

a{color:var(--primary)}
a:hover{color:var(--primary-dark)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Bovenaan het overzicht: waar je bent, en uitloggen. */
.balk{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.balk .uit{font-size:.9rem}

/* Ingangen en tools: kaarten naast elkaar, op een smal scherm onder elkaar. */
.tools{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;
}
.tools .kaart{border-left:var(--accentrand) solid var(--primary)}
.tools .kaart:hover{border-color:var(--primary)}
.tools p{margin:0;color:var(--muted)}

/* Inlogformulier. */
.inlog{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.inlog label{font-weight:700}
.inlog input{
  font:inherit;padding:.55rem .7rem;
  border:var(--rand) solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);
}
.inlog button{
  font:inherit;font-weight:700;margin-top:.4rem;padding:.6rem 1rem;cursor:pointer;
  background:var(--primary);color:var(--surface);
  border:var(--rand) solid var(--primary-dark);border-radius:var(--radius-sm);
}
.inlog button:hover{background:var(--primary-dark)}
.inlog button:disabled,.inlog input:disabled{opacity:.55;cursor:not-allowed}

.let-op,.terzijde{margin:1rem 0 0}