/* Blad 'Identiteitsbewijs': de zoeker van de camera met een kader voor de MRZ. Alleen tokens. */

.iddoc { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.iddoc > h2 { margin: 0; }
.iddoc__remove { margin: 0; }
.iddoc__private {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-4);
  border: var(--hair) solid var(--line);
  background: var(--sheet);
  font-size: var(--step--1);
  line-height: 1.5;
}
.iddoc__private p { margin: 0; }
.iddoc__private .i { margin-top: 0.1rem; color: var(--accent); }
.iddoc__later { font-size: var(--step--1); }

.scan { display: grid; gap: var(--s-4); }
.scan__buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* De zoeker: liggend, zoals een ID-kaart. Het kader valt over de onderste helft, waar de MRZ zit. */
.scan__view {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-width: 36rem;
  border: var(--hair) solid var(--ink);
  background: var(--ink);
}
.scan__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scan__frame {
  position: absolute;
  inset: 52% 5% 12% 5%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border: 2px solid var(--on-ink);
  border-radius: var(--radius);
  box-shadow: 0 0 0 100vmax var(--scrim);
}
.scan__frame span {
  margin-top: calc(var(--s-5) * -1);
  color: var(--on-ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.scan__stop { position: absolute; top: var(--s-3); right: var(--s-3); background: var(--sheet); }
.scan__status { min-height: 1.5em; margin: 0; color: var(--ink-2); }
.scan__status:empty { min-height: 0; }
.scan__result { display: grid; gap: var(--s-4); max-width: var(--measure); }
.scan__result h3 { margin: 0; }
/* De kop krijgt na het lezen focus voor schermlezers; een rand eromheen zegt de kijker niets. */
.scan__result h3:focus:not(:focus-visible) { outline: none; }

.iddoc__again { margin-bottom: var(--s-7); }
.iddoc__again > summary { display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; font-weight: 500; }
.iddoc__again[open] > summary { margin-bottom: var(--s-4); }
.scan__result .actions { margin-top: 0; }

.scan__frame.is-found { border-color: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .scan__frame { transition: border-color var(--dur) var(--ease); }
}