/* Labrat: pixelrat die het aanmeldformulier samen met de bezoeker invult.
   Wit vak, harde zwarte rand, geen staartje. Geen schaduw, geen ronding. */
/* .labrat is het vaste klikvlak (64x64); het plaatje staat in .labrat__beeld en mag van maat wisselen. */
.labrat { position: absolute; left: 0; top: 0; width: 64px; height: 64px; z-index: 5; cursor: pointer;
  will-change: transform; border: 0; padding: 0; background: transparent; }
.labrat__beeld { position: absolute; left: 0; top: 0; display: block; width: 64px; height: 64px; pointer-events: none;
  background-repeat: no-repeat; image-rendering: pixelated; }
.labrat__beeld[hidden] { display: none; }
.labrat--loop { width: 56px; height: 56px; translate: 4px 14px; }
.labrat--zit { image-rendering: pixelated; width: 64px; height: 64px; }
.labrat:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }

.labrat-ballon { position: absolute; left: 0; top: 0; z-index: 8; width: max-content; max-width: min(260px, calc(100vw - 32px));
  padding: 10px 12px; background: var(--wit); color: var(--inkt); border: 2px solid var(--inkt);
  font: 400 13px/1.45 "JetBrains Mono", monospace; opacity: 0; transform: translate(-9999px, 0); pointer-events: none; }
.labrat-ballon.aan { opacity: 1; pointer-events: auto; }

.labrat-ballon form { margin-top: 6px; }
.labrat-ballon input { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 2px 0 3px; border: 0; border-bottom: 1px solid var(--inkt); border-radius: 0; background: transparent; color: var(--inkt); outline: none; }
.labrat-ballon button { font: inherit; padding: 4px 8px; border: 1px solid var(--inkt); border-radius: 0; background: var(--inkt); color: var(--papier); cursor: pointer; }
.labrat-link { display: inline-block; margin-top: 8px; color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; }
.labrat-keuzes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.labrat-keuzes button { background: transparent; color: var(--inkt); }
.labrat-keuzes button:hover, .labrat-keuzes button:focus-visible { background: var(--inkt); color: var(--papier); }

/* Veld dat de rat net heeft ingevuld: kort knipperen. */
.labrat-gevuld input { animation: labrat-gevuld 1.2s steps(4); }
@keyframes labrat-gevuld { 0%, 50% { background: var(--inkt); color: var(--papier); } 51%, 100% { background: inherit; color: inherit; } }

@media (prefers-reduced-motion: reduce) { .labrat-gevuld input { animation: none; } }
@media print { .labrat, .labrat-ballon { display: none; } }
.labrat-verborgen { display: none; }