/* ============================================================
   QR Scanner (citizen camera-based QR check-in) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--primary/.btn--outline from
   elements.css. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  .qr-scanner { justify-items: center; }

  /* Viewfinder: the live camera feed with a centred scan frame and a
     caption pinned to the bottom. A positioned stack — the feed fills it,
     the frame and instruction sit on top. */
  .viewfinder {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 3 / 4;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--mea-radius-3xl);
  }
  @container (min-width: 28rem) { .viewfinder { aspect-ratio: 1 / 1; } }

  .viewfinder__feed {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .viewfinder__frame {
    position: relative;
    inline-size: 60%;
    aspect-ratio: 1 / 1;
    border-radius: var(--mea-radius-xl);
  }

  .viewfinder__instruction {
    position: absolute;
    inset-block-end: var(--mea-space-5);
    inset-inline: var(--mea-space-5);
    margin: 0;
    padding: var(--mea-space-2) var(--mea-space-4);
    border-radius: var(--mea-radius-pill);
    text-align: center;
  }

  /* Off-screen scratch canvas used for frame capture/decoding. */
  .qr-scanner__buffer { display: none; }

  .scan-error { margin: 0; padding: var(--mea-space-3) var(--mea-space-4);
                border-radius: var(--mea-radius-lg); text-align: center; }

  .scan-retry { align-self: center; }

  /* Capture controls: shutter button stacked over a hint line. */
  .capture { display: grid; gap: var(--mea-space-2); justify-items: center; }
  .capture__shutter {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 4.5rem; block-size: 4.5rem; padding: var(--mea-space-1);
    border: 0; border-radius: var(--mea-radius-circle); cursor: pointer;
  }
  .capture__shutter-ring {
    inline-size: 100%; block-size: 100%; border-radius: var(--mea-radius-circle);
  }
  .capture__hint { margin: 0; text-align: center; }

  /* Scan result card: confirmation mark, title, scanned value, actions. */
  .scan-result {
    inline-size: 100%;
    display: grid; gap: var(--mea-space-4); justify-items: center; text-align: center;
    padding: var(--mea-space-6) var(--mea-space-5);
    border-radius: var(--mea-radius-2xl);
  }
  .scan-result__mark, .scan-result__title, .scan-result__data { margin: 0; }
  .scan-result__actions { inline-size: 100%; display: grid; gap: var(--mea-space-3); }
}

@layer design {
  .viewfinder { background: var(--t-bg-recessed); box-shadow: var(--mea-shadow-sm); }
  .viewfinder__frame { border: 3px solid var(--t-accent); box-shadow: var(--mea-shadow-md); }
  .viewfinder__instruction {
    background: var(--t-bg-active); color: var(--t-text);
    font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
  }

  .scan-error {
    background: var(--t-bg-recessed); color: var(--t-error-text);
    font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
  }

  .capture__shutter { background: transparent; border: 3px solid var(--t-border); }
  .capture__shutter:disabled { opacity: .5; cursor: default; }
  .capture__shutter:not(:disabled):active { opacity: .85; }
  .capture__shutter-ring {
    background: var(--t-accent);
    transition: background var(--mea-dur-fast);
  }
  .capture__shutter:not(:disabled):hover .capture__shutter-ring { background: var(--t-accent-hover); }
  .capture__hint { color: var(--t-text-secondary); font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); }

  .scan-result {
    background: var(--t-card-bg); border: 1px solid var(--t-card-border);
    box-shadow: var(--mea-shadow-sm);
  }
  .scan-result__mark {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--mea-radius-circle);
    background: var(--t-success); color: var(--t-accent-text);
    font-size: var(--mea-text-3xl); font-weight: var(--mea-w-bold); line-height: 1;
  }
  .scan-result__title {
    font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
    font-weight: var(--mea-w-bold); color: var(--t-text);
  }
  .scan-result__data { font-size: var(--mea-text-md); color: var(--t-text-secondary); word-break: break-word; }
}