/* Doorgronden — de aanmeldkaart.

   Alleen `index.html` laadt dit bestand: de poort op `/app`. De werkruimte
   staat in `workspace.css`, de landingspagina in `landing.css`, en alle drie
   lezen ze de tokens uit `tokens.css`.

   ## Waarom dit niet meer zijn eigen uiterlijk heeft

   Hier stond: "de voordeur houdt bewust zijn eigen uiterlijk — afgemeld is een
   andere plek dan ingelogd, en dat mag je zien." Dat argument klopt over de
   *plek* en werd gebruikt om een heel ander *product* te rechtvaardigen. De
   kaart draaide op het gegenereerde palet uit `variables.css`: blauw waar de
   applicatie indigo is, altijd donker waar de applicatie standaard licht is, en
   een andere letter. Wie zich aanmeldde zag het scherm wisselen alsof hij naar
   een tweede applicatie was doorgestuurd.

   Dat het buiten is mag je nog steeds zien — één kaart op een leeg vlak, geen
   zijbalk, geen dichtheid. Maar het is dezelfde kaart als in de applicatie, in
   dezelfde kleuren, met dezelfde letters.

   De statuskleuren en de sequentiële ramp die hier stonden zijn weg: de poort
   toont geen ernst en geen duur, en tokens die nergens worden gebruikt zijn
   tokens die niemand controleert. Ze staan in `tokens.css` voor wie ze wél
   nodig heeft. */

*,*::before,*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: 1.2rem; letter-spacing: -.02em; margin: 0 0 1rem; text-wrap: balance; }
p  { margin: 0 0 .75rem; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius:0; }
.muted { color: var(--text-2); font-size: .82rem; }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Make `hidden` hide.
 *
 * The browser hides a `hidden` element with `[hidden] { display: none }` from
 * its own default stylesheet, and every rule in this file outranks it — author
 * styles beat the user agent's, whatever the specificity. `.gate` below sets
 * `display: grid`, so `hidden` did nothing to it.
 *
 * What that looked like: `showApp()` set `gate.hidden = true`, nothing moved,
 * and the sign-in card kept sitting at the top of the page — centred in a full
 * viewport height, with the application one screen further down. Somebody who
 * had just signed in saw a sign-in card, pressed it again, and got the same
 * card back. The session was fine every single time.
 *
 * `!important` is not decoration here. It is the only thing that puts a plain
 * attribute back above the class rules that were burying it, and it must keep
 * winning against any `display` added to this file later.
 *
 * `test/frontdoor.test.js` leest deze regel uit dit bestand. */
[hidden] { display: none !important; }

/* ── de poort ──────────────────────────────────────────────────────────── */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }

.gate-card {
  width: min(23rem, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
  display: flex; flex-direction: column;
}

/* Hetzelfde merkblok als de rail van de werkruimte en de kop van de
   landingspagina: ◈ in het accent, de naam ernaast. Drie schermen, één merk. */
.gate-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }
.gate-brand .mark {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-size: 14px;
}
.gate-brand .nm { font-weight: 600; letter-spacing: -.01em; }
.gate-brand .sub { display: block; font-size: .7rem; color: var(--text-3); letter-spacing: .01em; }

/* De terugweg. Een link en geen knop: hij navigeert weg en verstuurt dit
   formulier niet. */
.gate-back {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-3);
}

/* Elke deur stapelt zoals de kaart zelf stapelt. */
.gate-door { display: flex; flex-direction: column; gap: .5rem; }

/* ── de knop naar Starting Up ─────────────────────────────────────────────
   Geel is een vlak en nooit een tekstkleur — de regel staat in `brand.css` van
   Starting Up. Puur geel op wit is ongeveer 1,4:1; bijna-zwart op dit geel is
   ongeveer 10:1. En hij is geel en niet indigo omdat hij naar iemand anders
   wijst: het accent van dit product betekent "dit is van ons", deze knop het
   tegendeel. */
.su {
  --su-yellow: #ffc700; --su-yellow-hi: #ffd233; --su-yellow-lo: #eab600; --su-ink: #14110b;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 16px; border-radius: var(--r-sm);
  background: var(--su-yellow); border: 1px solid var(--su-yellow-lo); color: var(--su-ink);
  font-size: .93rem; font-weight: 600; text-decoration: none;
  transition: background .12s;
}
.su:hover { background: var(--su-yellow-hi); text-decoration: none; }
.su:focus-visible { outline: 2px solid var(--su-ink); outline-offset: 2px; }
.su svg {
  width: 18px; height: 18px; flex: none; stroke: var(--su-ink); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
}

/* Waarom een aanmelding niet lukte. Opvallend genoeg om te lezen, rustig genoeg
   om niet als storing te lezen — meestal is "probeer opnieuw" het hele antwoord. */
.notice {
  margin: 0 0 1rem; padding: 10px 12px; font-size: .82rem;
  border: 1px solid var(--warn-line); border-left-width: 3px; border-radius: var(--r-sm);
  background: var(--warn-bg); color: var(--text);
}