/* YAP camera model scan (Work Order J1 + J3). One stylesheet, two mounts:
   the homepage hero model field and the /parts model field. Reads the
   site's custom properties (homepage.css and the parts.html :root share
   the same names); the fallbacks are the YAP palette. */

.scan-wrap { position: relative; display: block; }

/* Make room for the button inside the model field: the 113 px pill, its
   3 px inset and 8 of clearance before the typed model number.
   Spacing (audit, 2026-09-12): 8 icon to label, 12 pill sides (phone 11,
   which makes the icon-only pill a 44 square), 3 inset because a 44 pill
   in a 47 field has 1.5 above and below. Chip and sheet: 16 padding, 8
   between lines and rows. */
.scan-wrap > input[data-scan="model"] { padding-right: 124px; }

/* Visually hidden, still focusable for the label. The selector outranks
   the field's own input rule (width 100%, padding), which on /parts made
   this 1 px input 288 px wide and pushed the page past the viewport. */
.scan-wrap > input.scan-file {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0; min-height: 0; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; pointer-events: none;
}

/* The button is a <label>, so the field's own label rule (uppercase, muted,
   block) would win on specificity; this selector outranks it. */
.scan-wrap > label.scan-btn {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  min-height: 44px; padding: 0 12px;
  border-radius: 999px;
  background: var(--red, #CC0000); color: #fff;
  font-family: var(--font, system-ui, sans-serif);
  font-size: 14px; font-weight: 600; line-height: 1;
  text-transform: none; letter-spacing: 0;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background .15s ease;
}
.scan-wrap > label.scan-btn:hover, .scan-wrap > label.scan-btn:focus-within { background: var(--red-dk, #990000); }
.scan-wrap > label.scan-btn.is-busy { background: var(--muted, #5a6470); pointer-events: none; }
.scan-btn.is-busy svg { animation: scan-pulse 1s ease-in-out infinite; }
@keyframes scan-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .scan-btn.is-busy svg { animation: none; } }

/* On a phone the label text goes and the icon stays a 44 px target, so the
   model number itself keeps the room (the placeholder was clipping at 390). */
@media (max-width: 429px) {
  .scan-btn-text { display: none; }
  .scan-wrap > label.scan-btn { padding: 0 11px; }
  .scan-wrap > input[data-scan="model"] { padding-right: 56px; }
}

.scan-chip {
  margin-top: 8px; padding: 12px 16px;
  border-radius: 12px;
  background: var(--white, #fff);
  border: 1.5px solid var(--text, #111);
  font-family: var(--font, system-ui, sans-serif);
  font-size: 15px; line-height: 1.35;
  color: var(--text, #111);
  text-align: left;
}
.scan-chip[hidden] { display: none; }
.scan-chip.is-sure  { border-color: var(--green, #15803d); background: var(--green-bg, #dcfce7); }
.scan-chip.is-guess { border-color: #d97706; background: #fffbeb; }
.scan-chip.is-null  { border-color: var(--border, #e5e7eb); background: var(--surface, #f9fafb); }

.scan-chip-line { margin: 0 0 8px; }
.scan-chip-line strong { font-size: 18px; letter-spacing: .02em; font-family: 'SF Mono', 'Fira Code', monospace; }

.scan-alts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.scan-alts-label { font-size: 13px; color: var(--muted, #5a6470); }
.scan-alt {
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid var(--text, #111); background: var(--white, #fff); color: var(--text, #111);
  font: 600 14px/1 'SF Mono', 'Fira Code', monospace; cursor: pointer;
}

.scan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.scan-actions button {
  min-height: 44px; border-radius: 999px; cursor: pointer;
  font-family: var(--font, system-ui, sans-serif); font-size: 15px; font-weight: 600; line-height: 1;
}
.scan-yes {
  flex: 1 1 auto; padding: 0 16px; border: 0;
  background: var(--red, #CC0000); color: #fff;
}
.scan-yes:hover { background: var(--red-dk, #990000); }
.scan-edit, .scan-hint-btn {
  padding: 0 16px; background: transparent;
  border: 1.5px solid var(--text, #111); color: var(--text, #111);
}

/* "Where's my tag" sheet: static HTML in the template, hidden by default.
   A bottom sheet over the page (scan-button.js parks it on <body>), so
   opening it never pushes the Find button below the fold (J3 acceptance).
   On a wide screen it is the same sheet, centered, 480 px wide. */
.tag-hint {
  position: fixed; left: 0; right: 0; bottom: 0;
  width: auto; max-width: 480px; z-index: 60; margin: 0 auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0; border: 0;
  background: var(--white, #fff); color: var(--text, #111); text-align: left;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.18);
  max-height: 70vh; overflow-y: auto; box-sizing: border-box;
  font-family: var(--font, system-ui, sans-serif);
}
.tag-hint[hidden] { display: none; }
.tag-hint-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tag-hint-head strong { font-size: 14px; }
.tag-hint-close {
  min-height: 36px; min-width: 36px; border: 0; background: transparent;
  color: var(--muted, #5a6470); font-size: 20px; line-height: 1; cursor: pointer;
}
.tag-hint dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; font-size: 14px; }
.tag-hint dt { font-weight: 700; }
.tag-hint dd { margin: 0; color: var(--muted, #5a6470); }