/* 94-auth.css — de inlogpagina: één gecentreerde kaart op de verloopband.
 *
 * Voxel tekent dit scherm met Vue, dus de opmaak hangt aan zijn eigen klassen
 * (`.ts-auth`, `.ts-form-group`, `.ts-btn`). De structuur zelf komt uit onze
 * eigen override in templates/widgets/login/login-screen.php.
 */

/* De band breekt uit de container, de kaart staat erin gecentreerd.
   `main.tb-app` blijft dus staan zoals 95-raster.css hem zet — die regel is er
   met reden, en ertegenin werken is precies de valkuil waar CLAUDE.md voor
   waarschuwt. */
.tb-app-auth{padding-bottom:0;}
.tb-auth-band{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--tb-wash);
  min-height:560px;
  display:flex;align-items:center;justify-content:center;
  padding:64px 20px;
  box-sizing:border-box;
}

.tb-auth-kaart{
  width:100%;max-width:420px;
  background:var(--tb-surface);
  border:1px solid var(--tb-line);
  border-radius:var(--tb-r-card);
  box-shadow:var(--tb-lift);
  padding:32px;
}

/* Eén kop, in de schreef van de rest van de site. */
.tb-auth-kaart h1{
  font-family:var(--tb-serif);font-size:27px;font-weight:600;line-height:1.2;
  color:var(--tb-ink);margin:0;
}
.tb-auth-intro{
  margin:8px 0 24px;
  font:400 14.5px/1.6 var(--tb-sans);color:var(--tb-muted);
}

/* Alles in de kaart is even breed — 356px bij een kaart van 420 met 32 padding.
   Dat is wat een knop een knop maakt in plaats van een balk van 750px. */
.tb-auth-form{display:flex;flex-direction:column;}
.tb-auth-form .ts-form-group{margin:0 0 16px;}

.tb-auth-veld label{
  display:block;margin:0 0 6px;
  font:500 13.5px/1.3 var(--tb-sans);color:var(--tb-body);
}
.tb-auth-veld input{
  width:100%;box-sizing:border-box;height:var(--tb-h-ctrl);
  padding:0 14px;
  border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);
  background:var(--tb-surface);
  font:400 15px/1 var(--tb-sans);color:var(--tb-ink);
}
.tb-auth-veld input:focus{outline:2px solid var(--tb-action);outline-offset:1px;border-color:var(--tb-action);}

/* Het oogje zit in het veld, dus het veld krijgt ruimte aan de rechterkant. */
.tb-auth-pass{position:relative;}
.tb-auth-pass input{padding-right:46px;}
.tb-auth-pass .view-password{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--tb-muted);border-radius:var(--tb-r-ctrl);
}
.tb-auth-pass .view-password:hover{color:var(--tb-ink);}
.tb-auth-pass .view-password:focus-visible{outline:2px solid var(--tb-action);outline-offset:1px;}
.tb-auth-pass .view-password svg{width:18px;height:18px;}
.tb-auth-pass .view-password.active{color:var(--tb-action);}

/* Drie acties, drie vormen: oranje knop, witte knop, tekstlink. */
.tb-auth-kaart .tb-auth-knop{
  width:100%;height:var(--tb-h-ctrl);
  display:flex;align-items:center;justify-content:center;
  background:var(--tb-action);color:#fff;border:0;border-radius:var(--tb-r-ctrl);
  font:600 15px/1 var(--tb-sans);cursor:pointer;
}
.tb-auth-kaart .tb-auth-knop:hover{background:var(--tb-action-hover);}
.tb-auth-kaart .tb-auth-knop:focus-visible{outline:2px solid var(--tb-ink);outline-offset:2px;}

.tb-auth-vergeten{margin:0 0 24px;font-size:14px;}
.tb-auth-vergeten a{
  color:var(--tb-accent-text);text-decoration:underline;text-underline-offset:3px;
}

/* Eén scheidingsregel, kleine letters, ná het formulier. */
.tb-auth-of{
  display:flex;align-items:center;gap:12px;
  margin:0 0 20px;
  font:400 13.5px/1 var(--tb-sans);color:var(--tb-soft);
}
.tb-auth-of::before,.tb-auth-of::after{
  content:"";flex:1 1 auto;height:1px;background:var(--tb-line);
}

.tb-auth-kaart .tb-auth-google{
  width:100%;height:var(--tb-h-ctrl);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--tb-surface);color:var(--tb-ink);
  border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);
  font:500 15px/1 var(--tb-sans);text-decoration:none;
}
.tb-auth-kaart .tb-auth-google:hover{border-color:var(--tb-border-strong);background:var(--tb-tint);}
.tb-auth-kaart .tb-auth-google svg{width:18px;height:18px;flex:none;}

.tb-auth-aanmelden{
  margin:24px 0 0;padding-top:20px;border-top:1px solid var(--tb-line);
  font:400 14px/1.5 var(--tb-sans);color:var(--tb-muted);text-align:center;
}
.tb-auth-aanmelden a{
  color:var(--tb-action);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}

@media (max-width:479px){
  .tb-app-auth{padding:32px 16px;min-height:0;}
  .tb-auth-kaart{padding:24px 20px;}
}

/* Het Google-merkteken.
 *
 * Voxel levert `google.svg` als één pad — een monochroom merkteken, geen
 * vierkleuren-G. Het bord toont de gekleurde versie; die kan hier dus niet
 * zonder Googles eigen bestand toe te voegen, en een zelf ingekleurd pad is
 * geen goedgekeurd beeldmerk. Blijft dus monochroom, maar in inkt in plaats van
 * grijs: nu leest het als een logo en niet als een uitgeschakeld icoontje. */
.tb-auth-kaart .tb-auth-google svg,
.tb-auth-kaart .tb-auth-google svg path{fill:var(--tb-ink);}

/* ------------------------------------------------------- /aanmelden/ */

.tb-aanmelden{width:100%;max-width:760px;text-align:center;}
.tb-aanmelden h1{
  font-family:var(--tb-serif);font-size:clamp(26px,3vw,34px);font-weight:600;
  color:var(--tb-ink);margin:0;
}
.tb-aanmelden-sub{margin:8px 0 32px;font:400 16px/1.5 var(--tb-sans);color:var(--tb-muted);}

.tb-aanmelden-keuzes{
  display:grid;gap:20px;text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.tb-aanmelden-kaart{
  background:var(--tb-surface);border:1px solid var(--tb-line);
  border-radius:var(--tb-r-card);box-shadow:var(--tb-lift);
  padding:24px;display:flex;flex-direction:column;
}
.tb-aanmelden-kaart h2{
  font-family:var(--tb-serif);font-size:20px;font-weight:600;color:var(--tb-ink);margin:0 0 6px;
}
.tb-aanmelden-kaart > p{margin:0 0 14px;font:400 14.5px/1.55 var(--tb-sans);color:var(--tb-muted);}
.tb-aanmelden-kaart ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;}
.tb-aanmelden-kaart li{
  position:relative;padding-left:24px;
  font:400 14.5px/1.45 var(--tb-sans);color:var(--tb-body);
}
/* Het vinkje is versiering naast tekst die het al zegt: uit de leesvolgorde. */
.tb-aanmelden-kaart li::before{
  content:"";position:absolute;left:4px;top:5px;
  width:6px;height:10px;border:solid var(--tb-ok);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.tb-aanmelden-knop{
  margin-top:auto;height:var(--tb-h-ctrl);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  background:var(--tb-action);color:#fff;border-radius:var(--tb-r-ctrl);
  font:600 15px/1 var(--tb-sans);text-decoration:none;
}
.tb-aanmelden-knop:hover{background:var(--tb-action-hover);}
.tb-aanmelden-knop:focus-visible{outline:2px solid var(--tb-ink);outline-offset:2px;}
.tb-aanmelden-knop.is-zacht{
  background:var(--tb-surface);color:var(--tb-ink);border:1px solid var(--tb-border);
}
.tb-aanmelden-knop.is-zacht:hover{background:var(--tb-tint);border-color:var(--tb-border-strong);}

.tb-aanmelden-voorwaarden{
  margin:24px 0 0;font:400 13px/1.6 var(--tb-sans);color:var(--tb-soft);
}
.tb-aanmelden-voorwaarden a{color:var(--tb-soft);text-decoration:underline;text-underline-offset:3px;}
.tb-aanmelden-terug{margin:16px 0 0;font:400 14px/1.5 var(--tb-sans);color:var(--tb-muted);}
.tb-aanmelden-terug a{color:var(--tb-action);font-weight:600;text-decoration:underline;text-underline-offset:3px;}