/*
 * scanner -- das Kamerabild als Schicht über der Seite. scanner__head trägt
 * Überschrift und Schließen-Knopf (__close), scanner__stage das Bild der Kamera
 * (__view) mit dem Sucherrahmen (__frame, hellgrüne Ecken), scanner__status sagt,
 * was gerade passiert. Am Handy der ganze Bildschirm auf dunklem Grund, am Desktop ein
 * Kasten in der Mitte (`claude_design/scan-trail-1.html`, vom User am 26. Oktober
 * 2026 angenommen).
 * Zwei Zustände: offen -- das Attribut [open] setzt der Browser selbst; und
 * scanner__view--running, solange die Kamera läuft. Vorher ist das Bild nicht
 * da, nicht nur durchsichtig.
 *
 * Sitzt wie Drawer und Modal auf einem <dialog> und wird mit showModal()
 * geöffnet: Fokusfalle, Escape und die Fläche darüber kommen damit vom Browser.
 * Bewegt wird mit @keyframes und nicht mit transition -- die Begründung steht
 * in drawer.css, die Mechanik ist dieselbe: [open] blendet ein, [data-leaving]
 * blendet aus, und geschlossen wird erst im animationend.
 */

.scanner {
  /* dialog steht sonst zentriert und schmal in der Mitte: Rand, Ränder und die
     vorgegebenen Höchstmaße müssen weg, damit das Bild die Fläche bekommt */
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100svh;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: oklch(14% 0.01 var(--accent-hue));
  color: oklch(100% 0 0);
  overflow: hidden;
  /* Der Fokusrahmen hellgrün, in der Hausfarbe wäre er auf dem dunklen Grund nicht zu
     sehen */
  --color-focus: var(--color-brand-light);
}

/* Eine feste Spalte: Sonst drückt das Seitenverhältnis des Kamerabilds sie breiter als
   den Scanner */
.scanner[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Der Block setzt display und schlägt damit die Regel des Browsers, die einen
   geschlossenen dialog ausblendet -- hier wieder hergestellt */
.scanner:not([open]) {
  display: none;
}

.scanner::backdrop {
  background-color: var(--color-scrim);
}

@keyframes scannerFadeIn {
  from {
    opacity: 0;
  }
}

@keyframes scannerFadeOut {
  to {
    opacity: 0;
  }
}

.scanner[open] {
  animation: scannerFadeIn var(--transition-fast);
}

.scanner[data-leaving] {
  animation-name: scannerFadeOut;
  animation-fill-mode: forwards;
}

.scanner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-3) var(--page-gutter);
}

.scanner__title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-heavy);
}

.scanner .scanner__close {
  color: oklch(100% 0 0);
}

.scanner .scanner__close:hover {
  color: var(--color-brand-light);
}

/* Das Kamerabild füllt die Bühne; bis es läuft, ein dunkler Grund */
.scanner__stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, oklch(26% 0.02 var(--accent-hue)), oklch(12% 0.01 var(--accent-hue)));
}

/* Vorher ist das Bild nicht da, nicht nur durchsichtig */
.scanner__view {
  display: none;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.scanner__view--running {
  display: block;
}

/* Der Sucherrahmen: hellgrüne Ecken, groß und mittig über dem Kamerabild */
.scanner__frame {
  position: relative;
  inline-size: min(72vmin, 18rem);
  aspect-ratio: 1;
  --corner: var(--color-brand-light);
  background:
    linear-gradient(var(--corner), var(--corner)) top left / 2.5rem 5px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top left / 5px 2.5rem no-repeat,
    linear-gradient(var(--corner), var(--corner)) top right / 2.5rem 5px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top right / 5px 2.5rem no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom left / 2.5rem 5px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom left / 5px 2.5rem no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom right / 2.5rem 5px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom right / 5px 2.5rem no-repeat;
}

/* Der Stand als Marke unten: weiß auf dunklem Glas, über 12:1 */
.scanner__status {
  justify-self: center;
  max-inline-size: calc(100% - 2 * var(--page-gutter));
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-large);
  background-color: oklch(22% 0.015 var(--accent-hue));
  text-align: center;
}

.scanner__status:empty {
  display: none;
}

/* Am Desktop ein Kasten in der Mitte über der abgedunkelten Seite */
@media (min-width: 48rem) {
  .scanner {
    inline-size: min(36rem, calc(100vw - 2 * var(--page-gutter)));
    block-size: fit-content;
    margin: auto;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-medium);
  }

  .scanner[open] {
    grid-template-rows: auto auto auto;
  }

  .scanner__stage {
    aspect-ratio: 4 / 3;
  }

  .scanner__frame {
    inline-size: 55%;
  }
}

/* ---------- Die Seite „Scannen" ---------- */

/* Neben dem Text (am Handy darüber) ein Sucher als Bild: Rahmen mit Ecken in der
   Hausfarbe um das Zeichen zum Scannen. Nur Schmuck. */
.scan-page {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

.scan-page__viewfinder {
  display: grid;
  place-items: center;
  inline-size: min(14rem, 100%);
  aspect-ratio: 1;
  border-radius: var(--radius-large);
  background-color: var(--color-card);
}

.scan-page__frame {
  display: grid;
  place-items: center;
  inline-size: 70%;
  aspect-ratio: 1;
  --corner: var(--color-primary);
  background:
    linear-gradient(var(--corner), var(--corner)) top left / 2rem 4px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top left / 4px 2rem no-repeat,
    linear-gradient(var(--corner), var(--corner)) top right / 2rem 4px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top right / 4px 2rem no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom left / 2rem 4px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom left / 4px 2rem no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom right / 2rem 4px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom right / 4px 2rem no-repeat;
  color: var(--color-primary);
}

.scan-page__frame svg {
  inline-size: 45%;
  block-size: 45%;
}

.scan-page__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.scan-page__intro {
  max-inline-size: 46ch;
  color: var(--color-text-muted);
  font-size: var(--font-size-large);
}

.layout__band .scan-page__button {
  min-height: 3.5rem;
  padding-inline: var(--space-7);
  font-size: var(--font-size-large);
}

@media (min-width: 48rem) {
  .scan-page {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-8);
  }

  .scan-page__viewfinder {
    inline-size: 18rem;
  }
}