/*
 * Contact vastleggen (referentie Vastleggen.html).
 *
 * Maten letterlijk uit de tekening. Wat daar inline stond, staat hier als
 * klasse: het CSP gooit een style-attribuut weg (§10).
 */

.nav-teller { margin-left: auto; }

/* ---- De twee routes ----------------------------------------------------- */

/*
 * Naast elkaar en even breed. Sinds besluit B1 is "Zonder foto" geen uitwijk
 * meer maar een hoofdroute: er komt geen lijst van de beurs die het werk
 * achteraf goedmaakt. Even zwaar betekent hier ook letterlijk even groot.
 */
.routes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.route-knop {
  height: 76px;
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}

/* De foto is de gouden knop; typen is de rustige. Even groot, niet even luid -
   §16.8 laat één hoofdactie per scherm toe en dat blijft de camera. */
.route-foto {
  background: var(--grad-gold-btn);
  color: var(--on-gold);
  box-shadow: var(--shadow-gold-btn);
}
.route-typen {
  background: var(--surface);
  border-color: var(--gold-a35);
  color: var(--gold-light);
}
.route-knop:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.routes-uitleg {
  font-size: var(--fs-meta);
  color: var(--muted-2);
  margin: 9px 0 0;
  text-align: center;
  line-height: var(--lh-body);
}

/* ---- De gelezen foto ---------------------------------------------------- */

.scan {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--white-a06);
}

/*
 * De gemaakte foto. De maat komt uit de tekening (112 bij 68, de verhouding van
 * een kaartje); `object-fit: cover` vult die zonder te vervormen.
 *
 * Dit was een vlak met een icoontje erin, uit de tijd dat er geen camera was.
 * Eén regel voor één ding: er staat geen tweede `.scan-foto` verderop, want twee
 * regels voor hetzelfde element is waar over een half jaar de verkeerde wint.
 */
.scan-foto {
  width: 112px;
  height: 68px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--white-a04);
  border: 1px solid var(--white-a07);
  flex: 0 0 auto;
}

.scan-kop { font-size: var(--fs-support); font-weight: 600; }
.scan-sub { font-size: var(--fs-meta); color: var(--muted-2); margin-top: 3px; line-height: 1.4; }
.scan-knoppen { gap: 7px; margin-top: 9px; }

/* ---- De velden: een lijst, geen formulier ------------------------------- */

.f {
  display: flex;
  align-items: center;
  gap: var(--gap-row);
  padding: 9px 0;
}

.fl {
  width: 74px;
  font-size: var(--fs-meta);
  color: var(--muted-2);
  flex: 0 0 auto;
  letter-spacing: var(--ls-pill);
}

/*
 * De waarde is een echt invoerveld maar ziet er niet uit als een vakje. Een
 * scherm vol randjes leest als een formulier, en dit is een lijst die je
 * naloopt.
 */
.fv {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-tight);
  background: none;
  border: 0;
  color: var(--ink);
  font-family: inherit;
  padding: 0;
  /* Aanraakvlak van 44 zonder dat de regel hoger wordt (afspraak 1). */
  min-height: 26px;
}
.fv:focus { outline: none; }
.fv:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }

/* Nooit een rode rand om iets wat nog niet af is (§16.4). Leeg is gewoon leeg. */
.fv::placeholder { color: var(--ink-dim); font-style: italic; }

.i-ok { stroke: var(--ok); }

/* ---- Chiprijen ---------------------------------------------------------- */

.chip-kopje { margin-bottom: 9px; }
.chips-tweede { margin-top: 12px; }
.chips { flex-wrap: wrap; row-gap: 8px; }

/* ---- De vaste regel ----------------------------------------------------- */

.lockrow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 14px;
  border-radius: var(--r-banner);
  background: var(--white-a035);
  border: 1px solid var(--white-a05);
}

.lockrow-tekst {
  font-size: var(--fs-verantwoording);
  color: var(--muted-2);
  line-height: 1.45;
}
.lockrow-tekst b { color: var(--muted); font-weight: 600; }
.lockrow-vast { color: var(--ink-faint); }

/* ---- De balk onderaan --------------------------------------------------- */

.dock-staat { margin-bottom: 10px; }
.dock-knoppen { gap: 10px; }

/* Referentie: Opslaan is 108 breed, Volgende vult de rest. */
.knop-opslaan { flex: 0 0 108px; }

.banner-vet { color: var(--gold-soft); }

.onderruimte-vast { height: 24px; }

.mt-12 { margin-top: 12px; }

/* ---- De zoeker (blok A punt 2) ----------------------------------------- */

/*
 * Een laag over het vastlegscherm, niet een eigen scherm: je bent halverwege een
 * kaartje, en dit duurt drie seconden. Zwart eromheen, want dat is wat een
 * camera hoort te zijn - en het is ook wat er in een beurshal het rustigst leest
 * (§2: donker is de enige modus).
 */
.zoeker {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.zoeker-beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Het kader met de verhouding van een visitekaartje. De maten komen per keer uit
 * `guideFrameRect` en worden via de CSSOM gezet - een stijlattribuut zou door
 * het beveiligingsbeleid worden weggegooid (§10), en dan stond het kader op de
 * server op nul bij nul terwijl het lokaal klopte.
 */
.zoeker-kader {
  position: absolute;
  display: none;
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.zoeker-kader-gezet {
  display: block;
  left: var(--kader-x);
  top: var(--kader-y);
  width: var(--kader-b);
  height: var(--kader-h);
}

.zoeker-uitleg {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--safe-top) + 16px);
  text-align: center;
  font-size: var(--fs-support);
  color: var(--gold-light);
  padding: 0 var(--pad-x);
}

/*
 * De knoppenrij onderaan. Boven de veegstreep (§2: onder de onderste 34 punten
 * ligt nooit een knop) en alle drie minstens 44 bij 44 (§7, afspraak 1) - juist
 * hier, want dit is de handeling met een glas in je andere hand.
 */
.zoeker-knoppen {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(34px + var(--safe-onder));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  gap: 12px;
}

.zoeker-sluit,
.zoeker-bestand {
  min-width: 88px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--white-a10, rgba(255, 255, 255, 0.1));
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-support);
  cursor: pointer;
}

/* De sluiterknop: rond, groot, en in het midden waar je duim toch al is. */
.zoeker-knip {
  width: 72px;
  height: 72px;
  border-radius: 36px;
  background: #fff;
  border: 4px solid rgba(255, 255, 255, 0.4);
  background-clip: content-box;
  padding: 3px;
  cursor: pointer;
  flex: 0 0 auto;
}
.zoeker-knip:active {
  transform: scale(0.94);
}

/* Het bestandsveld hoort niet in beeld; het wordt met een tik geopend. */
.zoeker-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/*
 * Wat er mis is met de foto, als er iets mis is. Oranje omdat het aandacht
 * vraagt, en met de reden erbij - te donker, te weinig contrast en te klein zijn
 * drie verschillende dingen met drie verschillende oplossingen (§16.6).
 */
.scan-let-op {
  margin-top: 6px;
  font-size: var(--fs-support-sm);
  color: var(--warn);
  line-height: 1.4;
}

/*
 * De derde route (AANVULLING-10 §6): breder dan de twee erboven en lager van
 * toon. Niet omdat hij minder waard is, maar omdat het een ander soort ding is -
 * de twee erboven gaan over iemand die je hebt gesproken.
 */
.route-zaak {
  width: 100%;
  height: 46px;
  margin-top: 10px;
  gap: 8px;
}

/* ---- Aanvulling 14 §3: het herbouwde scherm ----------------------------- */

/* De fotoroute als brede knop onder (of tijdens een event boven) de velden. */
.route-breed {
  width: 100%;
  height: 56px;
  flex-direction: row;
  gap: 10px;
}

/*
 * De slotregel begint onzichtbaar (§18.8): op een leeg formulier is
 * "Vastgelegd door" een bewering over iets dat niet bestaat. `visibility`
 * en geen `display`, zodat het scherm niet verspringt zodra hij verschijnt.
 */
.slotregel-nog-niet { visibility: hidden; }