/* ============================================================================
   eVamb eportal - Intake.

   This file holds ONLY what app.css does not already carry: the card drop zone,
   the scan progress readout, the per field confidence chips, the card preview,
   the dialpad sized quick capture targets and the attribution QR tiles.

   Nothing here restates a class that already exists. Where a rule below names
   an existing class it is always scoped inside an intake container, so it is an
   adjustment in one place rather than a second definition of a shared thing.

   Three rules this file has to respect.

   1. No hex literal. Every colour is a token from tokens.css. The accent split
      matters: --accent is a FILL and --accent-text is TEXT, so a tinted ground
      always takes the fill token and the words on it always take the paired
      on-fill.

   2. Colour is never the only signal. The confidence chips below are tinted,
      and every one of them also carries the word high, fair or low, set in the
      markup. Remove the colour and the meaning survives.

   3. The QR tile does not follow the theme, on purpose. A QR code has to be
      dark modules on a light ground or a phone camera will struggle with it,
      and an inverted code is a support call rather than a lead. --nav-text
      (cream) is the tile ground and --nav-on-accent (ink) is the module
      colour. Neither is redefined in either dark block in tokens.css, so the
      pair holds the same two values in both themes, and it is high contrast
      and needs no hex. Note that this is not true of the whole nav family:
      --nav-bg, --nav-bg-2, --nav-line and --nav-sunken do all flip with the
      theme, so do not reach for one of those here. tokens.css has no purpose
      built print surface pair; see the build report.
   ============================================================================ */

/* ---------------------------------------------------------------- mode strip */

/* The three intake modes sit on the existing .seg component. All this adds is
   room to breathe underneath it on a narrow screen. */
.intake-modes{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}

/* ---------------------------------------------------------------- drop zone */

.drop{display:grid;justify-items:center;gap:10px;text-align:center;
  padding:30px 20px;border:2px dashed var(--line-strong);border-radius:var(--r-lg);
  background:var(--surface-2);transition:var(--t)}
.drop.over{border-color:var(--accent);border-style:solid;background:var(--accent-soft);
  box-shadow:0 0 0 4px var(--accent-ring)}
.drop.busy{opacity:.72}
.drop .dz{font-size:32px;line-height:1;color:var(--accent-text)}
.drop .dz-title{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.drop .dz-sub{font-size:12.5px;color:var(--text-muted);max-width:46ch}
.drop-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* The file inputs stay in the DOM and stay focusable. They are hidden with the
   shared .sr-only rule, and the visible target is the label beside them, so the
   control keeps its native label association and its keyboard behaviour. The
   focus ring is forwarded from the input to the label, otherwise a keyboard
   user would be on a control with no visible focus at all. */
.pick{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 17px;border-radius:10px;cursor:pointer;
  font-size:14px;font-weight:600;border:1px solid transparent;transition:var(--t);
  background:var(--accent);color:var(--on-accent)}
.pick.quiet{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.pick:hover{filter:brightness(1.08)}
.pick-in:focus-visible + .pick{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------------------------------------------------------- scan progress */

.scan{display:grid;gap:10px}
.scanbar{height:9px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.scanbar .fill{height:100%;width:0;background:var(--accent);border-radius:5px;
  transition:width .18s cubic-bezier(.4,0,.2,1)}
.scan-line{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;font-size:12.5px}
.scan-line .what{font-weight:600;color:var(--text)}
.scan-line .pct{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--text-muted)}
.scan-steps{display:flex;flex-wrap:wrap;gap:7px;font-size:11.5px;color:var(--text-faint)}
.scan-steps .st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
  border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.scan-steps .st.done{border-color:var(--ok);color:var(--ok)}
.scan-steps .st.now{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent-text);font-weight:700}

/* ---------------------------------------------------------------- confidence */

/* A confidence chip always carries its word. The tint is a second signal, never
   the only one, and every tint uses a soft ground with its own paired text
   token so the words clear AA in both themes. */
.conf{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:20px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap}
.conf-high{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.conf-fair{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.conf-low{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.conf .glyph{font-size:9px;line-height:1}

/* The chip sits beside the field's own label, inside it, so a screen reader
   reads the name and the confidence as one thing. .field label is a block in
   app.css; here it becomes a row that wraps. */
.parsed .field label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------------------------------------------------------------- card preview */

.shot{display:grid;gap:10px;justify-items:start}
.shot img{max-width:100%;width:340px;border-radius:var(--r);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-1);background:var(--surface-2)}
.shot .meta{font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
@media (max-width:720px){.shot img{width:100%}}

/* The region row: which table the parser matched, and the override beside it. */
.region-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.region-row .field{min-width:200px;flex:1 1 200px}

/* ---------------------------------------------------------------- quick capture */

/* Thumb sized. A person standing at a counter is holding a phone in one hand,
   so the targets are large, the grid is a single column and the input font
   never drops below 16px, which is the floor at which mobile Safari stops
   zooming the page on focus. app.css steps inputs down to 14px above 760px;
   inside quick capture that step down is deliberately not applied. */
.qc .form-grid{grid-template-columns:1fr;gap:16px}
.qc .field label{font-size:13px}
.qc .field input,.qc .field select,.qc .field textarea{font-size:16px;min-height:52px;padding:13px 14px}
.qc .field textarea{min-height:88px}
.qc-actions{display:flex;flex-wrap:wrap;gap:12px}
.qc-actions .btn{min-height:54px;font-size:15px;padding:14px 22px;flex:1 1 200px}

/* The session tally. It counts what this sitting has captured, and it counts
   what is still queued on the device separately, because the two are not the
   same promise. */
.tally{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tally .n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:600;line-height:1}
.tally .cap{font-size:11.5px;color:var(--text-muted)}
.tally .box{display:grid;gap:3px;padding:10px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface-2);min-width:112px}
.tally .box.queued{border-color:var(--warn);background:var(--warn-soft)}

/* ---------------------------------------------------------------- QR tiles */

.qrgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.qrtile{display:grid;gap:11px;justify-items:center;text-align:center;padding:16px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.qrtile .chan{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em}
.qrtile .why{font-size:11.5px;color:var(--text-muted);min-height:2.4em}
/* Cream ground and ink modules, the same in both themes. See the note at the
   top of this file: a QR that inverts with the theme does not scan reliably.
   qr.js reads --nav-text and --nav-on-accent off this element, so the two
   properties below are the symbol's palette and not only the tile's. It sizes
   the canvas itself in inline styles so every module lands on a whole pixel,
   which is why no width or height is set here. */
.qrtile .qr{max-width:100%;border-radius:var(--r-sm);padding:8px;
  background:var(--nav-text);color:var(--nav-on-accent);
  border:1px solid var(--line-strong);image-rendering:pixelated}
.qrtile .qr-missing{width:186px;height:186px;display:grid;place-items:center;padding:12px;
  border-radius:var(--r-sm);border:1px dashed var(--line-strong);background:var(--surface-3);
  font-size:11.5px;color:var(--text-faint);text-align:center}
.qrtile .urlbox{display:flex;align-items:center;gap:6px;width:100%;min-width:0}
.qrtile .url{flex:1 1 auto;min-width:0;font-family:var(--font-mono);font-size:11px;
  color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:left;direction:ltr}

/* A print run of the tiles is a real thing an operator does before an event. */
@media print{
  .qrtile{break-inside:avoid;border-color:var(--line-strong)}
  .qrtile .url{white-space:normal;overflow:visible}
}

/* ---------------------------------------------------------------- shared bits */

/* The channel statement. Read only by design: the seat sets it, not this
   screen. The ring makes it read as a stated fact rather than a control
   somebody is meant to try to change. */
.seat-fact{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface-2)}
.seat-fact .lab{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted)}
.seat-fact .val{font-family:var(--font-display);font-weight:700;font-size:16px}

/* Used for the consent split, so the two questions never read as one. */
.split{display:grid;gap:14px}
.split .half{padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface)}
.split .half h3{font-family:var(--font-display);font-weight:700;font-size:14px;
  letter-spacing:-.01em;margin-bottom:4px}
.split .half p{font-size:12px;color:var(--text-muted);line-height:1.6}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr}}