/* Tool-specific: QR Code Reader
   Layout-only. All colors come from src/shared/css/base.css tokens. */

/* Privacy callout — same pattern as QR Generator. */
.privacy-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--color-signal-soft);
  border-left: 2px solid var(--color-signal);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

[dir="rtl"] .privacy-callout {
  border-left: 0;
  border-right: 2px solid var(--color-signal);
}

.privacy-callout__glyph {
  color: var(--color-signal);
  font-weight: 700;
  flex-shrink: 0;
}

.privacy-callout__body {
  flex: 1;
  line-height: var(--leading-snug);
}

.privacy-callout__title {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.privacy-callout__detail {
  display: block;
  font-family: var(--font-sans);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* Two-column layout: input/camera left, result right.
   Collapses to single column below 800px. */
.qr-reader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

@media (max-width: 800px) {
  .qr-reader-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.qr-reader-input-col .panel {
  margin-bottom: var(--space-4);
}

/* Drop zone — large dashed-border drag target. */
.qr-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--color-rule);
  border-radius: var(--radius-0);
  background: var(--color-bg-elevated);
  cursor: pointer;
  text-align: center;
  transition: border-color 120ms ease, background 120ms ease;
  position: relative;
}

.qr-drop-zone:hover,
.qr-drop-zone:focus,
.qr-drop-zone:focus-visible,
.qr-drop-zone.is-drag-over {
  border-color: var(--color-signal);
  background: var(--color-signal-soft);
  outline: none;
}

.qr-drop-zone__icon {
  color: var(--color-ink-faint);
  margin-bottom: var(--space-1);
}

.qr-drop-zone__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: 600;
}

.qr-drop-zone__hint {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* Hidden real file input overlaid over the drop zone for click-to-open. */
.qr-drop-zone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* Camera section. */
.qr-camera-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.qr-camera-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
  user-select: none;
}

.qr-camera-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-signal);
  cursor: pointer;
  flex-shrink: 0;
}

.qr-camera-toggle__label {
  font-weight: 600;
}

.qr-camera-feed {
  margin-top: var(--space-2);
}

/* Camera video: 4:3 aspect ratio, max 480px. */
.qr-camera-video {
  display: block;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-0);
  background: var(--color-bg-sunken);
}

/* Hidden canvas used for per-frame pixel sampling — never visible. */
.qr-camera-canvas {
  display: none;
}

/* Result content textarea: monospace font, sufficient height. */
.qr-result-content {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--color-rule);
  background: var(--color-bg-elevated);
  color: var(--color-ink);
  border-radius: var(--radius-0);
  line-height: var(--leading-normal);
  box-sizing: border-box;
}

/* Kind badge in the panel hint slot — pill style. */
.qr-kind-badge {
  display: inline-block;
  padding: 1px var(--space-2);
  background: var(--color-signal-soft);
  color: var(--color-signal);
  border: 1px solid var(--color-signal);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* RTL — drop zone and video align naturally; empty selector documents intent. */
[dir="rtl"] .qr-drop-zone { /* no override needed — flex + text-align:center works */ }