/* ══════════════════════════════════════════════════════════════
   Meetback — scan-confirm ("Check what was read")

   Built from the ADOPTED reference
   design-system/products/meetback/assets/scan-confirm.html, owner-ruled
   2026-08-06. Every value below is the reference's, with its local colour
   variables read from tokens.css instead — the reference declares
   --warn/--warn-bg/--warn-line privately, and Q32 says a colour is declared in
   exactly one file. They landed there as --caution/--caution-bg/--caution-line
   with a note on why caution is not error.

   ⚠ THE UNSURE FIELD DOES NOT RELY ON COLOUR. The reference is explicit about
   it — a dotted underline AND a worded "check" chip beside the label, so the
   flag survives a colourblind reader, a greyscale screenshot and a very bright
   hall. Do not "simplify" this to a tint.

   The shell (#app + #nav) is a fixed-height flex column, so this screen owns its
   own scroller, the same arrangement cards-home and share-hub use.
   ══════════════════════════════════════════════════════════════ */

.scan-confirm {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

.sc-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.scan-confirm .wrap {
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
  padding: calc(8px + var(--sat)) clamp(14px, 4.5vw, 18px) 28px;
}

.scan-confirm .screen-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 6px 0 4px;
}
.scan-confirm .screen-sub {
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.scan-confirm .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
  margin-bottom: 14px;
}
.scan-confirm .card-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.scan-confirm .card-copy {
  font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 16px;
}

.scan-confirm .row { margin-bottom: 15px; }
.scan-confirm .row:last-of-type { margin-bottom: 0; }
.scan-confirm .label {
  font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 5px;
  display: flex; align-items: center; gap: 7px;
}

.scan-confirm .field {
  width: 100%;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}
.scan-confirm .field:focus { border-color: var(--accent); }
/* An unread field reads as a prompt rather than as a value. */
.scan-confirm .field.empty { color: var(--muted); }

/* A GUESS MUST LOOK LIKE A GUESS, AND NOT ONLY BY COLOUR. */
.scan-confirm .field.unsure {
  background: var(--caution-bg);
  border-color: var(--caution-line);
  text-decoration: underline dotted var(--caution) 2px;
  text-underline-offset: 4px;
}
.scan-confirm .flag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--caution);
  border: 1px solid var(--caution-line);
  border-radius: var(--r-pill);
  padding: 2px 7px;
  background: var(--caution-bg);
}

/* Two candidates is the common case on a business card, and the discard is
   said out loud rather than left to be discovered. */
.scan-confirm .alts {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; align-items: center;
}
.scan-confirm .alts .also { font-size: 11px; color: var(--muted); }
.scan-confirm .alt {
  font-size: 12px; padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-family: inherit;
}
.scan-confirm .alt:hover { border-color: var(--accent); color: var(--accent); }
.scan-confirm .alt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scan-confirm .note {
  font-size: 11px; color: var(--muted); margin-top: 7px; line-height: 1.45;
}

.scan-confirm .sc-msg {
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
  margin: 0 2px 10px; min-height: 1em;
}
.scan-confirm .sc-msg:empty { display: none; }

/* The label names the action — the same rule the owner applied to the card
   menu's delete. */
.scan-confirm .actions {
  display: flex; flex-direction: column; gap: 9px; margin-top: 4px;
}
.scan-confirm .btn {
  padding: 14px; border: none; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; width: 100%;
}
.scan-confirm .btn-primary { background: var(--accent); color: var(--surface); }
.scan-confirm .btn-primary:disabled { opacity: .55; cursor: default; }
.scan-confirm .btn-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); font-weight: 600;
}
.scan-confirm .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Q7 — both bands continue this screen's own surface. */
body:has([data-screen="scan-confirm"]) { background: var(--bg); }
[data-screen="scan-confirm"] { --edge-top: var(--bg); }

/* ── Q63: autofill takes this surface's own colours. The reasoning and the
   box-shadow trap are written out once, in editor.css. ── */

.scan-confirm .field:-webkit-autofill,
.scan-confirm .field:-webkit-autofill:hover,
.scan-confirm .field:-webkit-autofill:focus,
.scan-confirm .field:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px var(--surface-muted) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}