/* RT-DEV-097 — EMV payment QR decoder.
 * Colour rule (docs/contrast-conventions.md): inside the navy --rt-result-bg
 * box, values use --rt-result-ink and labels --rt-result-muted; on the light
 * surfaces everything uses --rt-ink / --rt-ink-soft. Nothing crosses over, and
 * the pass/fail signal is carried by a RULE and a pill rather than by
 * recolouring 15px type on navy (3.0:1 at best). */

.emv-form { display: flex; flex-direction: column; gap: var(--rt-s-16); min-width: 0; }

.emv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.emv-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.emv-label { font-family: var(--rt-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--rt-ink-muted); }
.emv-hint { font-size: 11px; color: var(--rt-ink-soft); }

.emv-input {
    width: 100%; box-sizing: border-box; min-height: 118px; resize: vertical;
    padding: 12px 14px; border: 1px solid var(--rt-hairline); border-radius: var(--rt-r-button);
    background: var(--rt-surface); color: var(--rt-ink);
    font-family: var(--rt-font-mono); font-size: 13.5px; line-height: 1.65;
    word-break: break-all;
}
.emv-input:focus { outline: none; border-color: var(--rt-accent); box-shadow: 0 0 0 3px var(--rt-accent-soft); }

.emv-samples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.emv-samples-label { font-size: 11px; color: var(--rt-ink-soft); margin-right: 2px; }
.emv-chip {
    padding: 5px 11px; border-radius: var(--rt-r-chip); cursor: pointer;
    border: 1px solid var(--rt-hairline); background: var(--rt-surface-2);
    color: var(--rt-ink); font-size: 12px; font-family: var(--rt-font-sans);
    transition: border-color 140ms ease, background 140ms ease;
}
.emv-chip:hover { border-color: var(--rt-accent); background: var(--rt-surface); }

/* ── verdict box (navy) ──────────────────────────────────────────────────── */
/* Reserved to the height the box occupies ONCE FILLED, not to the height of the
   server-rendered placeholder (docs/cls-conventions.md rule 1). MEASURED in the
   browser on the default PayNow sample, not estimated:

     1280x900   placeholder 361px   filled 460px   box top y=607
     375x812    placeholder 487px   filled 790px   box top y=781

   Reserving the placeholder height would have left the box growing by 99px on
   desktop and 303px on mobile the moment the kernel rendered. Both growths are
   below the fold at those widths and would therefore have cost nothing in CLS —
   reserving the filled height costs nothing either and moves NOTHING at all,
   which is the better answer when the number is this easy to measure.

   What still moves, stated rather than implied: picking a different sample can
   make the box taller — 857px for EMVCo's example and 902px for QRIS at 375,
   where the scheme name wraps. Those are interaction-triggered and excluded from
   CLS (rule 6), and holding 902px of navy open on every mobile view to avoid a
   shift nobody's Core Web Vitals will ever record is the worse trade. */
.emv-verdict {
    min-width: 0; background: var(--rt-result-bg); border-radius: var(--rt-r-card);
    padding: var(--rt-s-16); min-height: 460px;
}
@media (max-width: 720px) { .emv-verdict { min-height: 790px; } }

.emv-v-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.emv-v-pill { padding: 4px 11px; border-radius: var(--rt-r-chip); font-size: 11.5px; font-weight: 600; font-family: var(--rt-font-mono); letter-spacing: .03em; white-space: nowrap; }
.emv-v-pass { background: var(--rt-success-soft); color: var(--rt-success); }
.emv-v-fail { background: var(--rt-danger-soft); color: var(--rt-danger); }
.emv-v-note { background: var(--rt-accent-soft); color: var(--rt-accent-text); }
.emv-v-idle { background: rgba(246, 244, 239, .12); color: var(--rt-result-muted); }
.emv-v-title { font-size: 17px; font-weight: 600; color: var(--rt-result-ink); margin: 0; }
.emv-v-detail { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--rt-result-muted); }

.emv-crc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-s-12); margin-top: var(--rt-s-16); }
.emv-crc-cell { min-width: 0; border-left: 2px solid rgba(246, 244, 239, .18); padding-left: 10px; }
.emv-crc-cell.emv-crc-bad { border-left-color: var(--rt-accent); }
.emv-crc-cell .v { display: block; font-family: var(--rt-font-mono); font-size: 22px; font-weight: 600; letter-spacing: .06em; color: var(--rt-result-ink); }
.emv-crc-cell .l { display: block; margin-top: 3px; font-size: 11px; color: var(--rt-result-muted); }

.emv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rt-s-12); border-top: 1px solid rgba(246, 244, 239, .14); margin-top: var(--rt-s-16); padding-top: var(--rt-s-12); }
@media (max-width: 720px) { .emv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emv-crc { grid-template-columns: 1fr; } }
.emv-stat { min-width: 0; }
.emv-stat .v { display: block; font-family: var(--rt-font-mono); font-size: 14px; font-weight: 600; color: var(--rt-result-ink); overflow-wrap: anywhere; }
.emv-stat .l { display: block; margin-top: 3px; font-size: 11px; color: var(--rt-result-muted); }

/* ── panels (light) ──────────────────────────────────────────────────────── */
/* min-width:0 on every grid/flex child that can hold a wide value: a flex
   item's default `min-width: auto` refuses to shrink below its content, so one
   long merchant identifier would widen the whole document rather than scroll
   inside its own panel. */
.emv-panel { border: 1px solid var(--rt-hairline); border-radius: var(--rt-r-card); background: var(--rt-surface); overflow: hidden; min-width: 0; }
.emv-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 11px var(--rt-s-16); border-bottom: 1px solid var(--rt-hairline); background: var(--rt-surface-2); }
.emv-panel-title { font-size: 13px; font-weight: 600; color: var(--rt-ink); margin: 0; }
.emv-panel-note { font-size: 11.5px; color: var(--rt-ink-soft); }
.emv-panel-body { padding: var(--rt-s-12) var(--rt-s-16) var(--rt-s-16); }
.emv-scroll { overflow-x: auto; min-width: 0; }

/* ── the field tree ──────────────────────────────────────────────────────── */
.emv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 660px; }
.emv-table th { text-align: left; font-family: var(--rt-font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--rt-ink-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--rt-hairline); white-space: nowrap; }
.emv-table td { padding: 8px 10px; border-bottom: 1px solid var(--rt-hairline); color: var(--rt-ink); vertical-align: top; }
.emv-table tr:last-child td { border-bottom: 0; }
.emv-tag { font-family: var(--rt-font-mono); font-weight: 600; white-space: nowrap; }
.emv-d1 .emv-tag { padding-left: 18px; }
.emv-d2 .emv-tag { padding-left: 36px; }
.emv-d3 .emv-tag { padding-left: 54px; }
.emv-row-template { background: var(--rt-bg-inset); }
.emv-row-crc .emv-tag { color: var(--rt-accent-text); }
.emv-name { font-size: 12px; }
.emv-name small { display: block; color: var(--rt-ink-soft); font-size: 11px; }
.emv-len { font-family: var(--rt-font-mono); color: var(--rt-ink-soft); white-space: nowrap; }
.emv-len b { color: var(--rt-ink); font-weight: 600; }
.emv-val { font-family: var(--rt-font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.emv-val-template { color: var(--rt-ink-soft); font-family: var(--rt-font-sans); font-size: 11.5px; font-style: italic; }

/* ── findings ────────────────────────────────────────────────────────────── */
.emv-findings { display: flex; flex-direction: column; gap: 8px; }
.emv-finding { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 8px; background: var(--rt-surface-2); border-left: 2px solid var(--rt-hairline); }
.emv-finding p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--rt-ink); }
.emv-finding-error { border-left-color: var(--rt-danger); background: var(--rt-danger-soft); }
.emv-finding-warning { border-left-color: var(--rt-accent); background: var(--rt-accent-soft); }
.emv-finding-info { border-left-color: var(--rt-hairline); }
.emv-finding-clean { border-left-color: var(--rt-success); background: var(--rt-success-soft); }
.emv-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: var(--rt-r-chip); font-family: var(--rt-font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.emv-badge-error { background: var(--rt-danger); color: #fff; }
.emv-badge-warning { background: var(--rt-accent-fill); color: #fff; }
.emv-badge-info { background: var(--rt-bg-inset); color: var(--rt-ink-soft); }
.emv-badge-clean { background: var(--rt-success); color: #fff; }

/* ── scheme panel ────────────────────────────────────────────────────────── */
.emv-schemes { display: flex; flex-direction: column; gap: var(--rt-s-12); }
.emv-scheme { border: 1px solid var(--rt-hairline); border-radius: 10px; padding: 11px 13px; min-width: 0; }
.emv-scheme-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.emv-scheme-name { font-size: 13.5px; font-weight: 600; color: var(--rt-ink); }
.emv-scheme-tag { font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-soft); }
.emv-scheme-id { display: block; margin-top: 4px; font-family: var(--rt-font-mono); font-size: 12px; color: var(--rt-ink-soft); overflow-wrap: anywhere; }
.emv-scheme-note { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--rt-ink-soft); }
.emv-basis { display: inline-block; padding: 2px 8px; border-radius: var(--rt-r-chip); font-family: var(--rt-font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.emv-basis-registry { background: var(--rt-success-soft); color: var(--rt-success); }
.emv-basis-inferred { background: var(--rt-accent-soft); color: var(--rt-accent-text); }
.emv-basis-unknown { background: var(--rt-bg-inset); color: var(--rt-ink-soft); }

/* ── coverage strip ──────────────────────────────────────────────────────── */
.emv-cover { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rt-s-12); }
@media (max-width: 720px) { .emv-cover { grid-template-columns: 1fr; } }
.emv-cover-cell { min-width: 0; }
.emv-cover-cell .v { display: block; font-family: var(--rt-font-mono); font-size: 15px; font-weight: 600; color: var(--rt-ink); overflow-wrap: anywhere; }
.emv-cover-cell .l { display: block; margin-top: 3px; font-size: 11px; color: var(--rt-ink-soft); }
.emv-cover-tail { margin-top: var(--rt-s-12); font-family: var(--rt-font-mono); font-size: 12px; line-height: 1.7; color: var(--rt-ink-soft); overflow-wrap: anywhere; }
.emv-cover-tail b { color: var(--rt-ink); }
.emv-cover-tail mark { background: var(--rt-accent-soft); color: var(--rt-accent-text); padding: 1px 3px; border-radius: 4px; }

.emv-stamp { margin: var(--rt-s-12) 0 0; font-size: 11.5px; line-height: 1.7; color: var(--rt-ink-soft); }
.emv-stamp strong { color: var(--rt-ink); font-weight: 600; }

/* ── reading a QR image (light surface) ──────────────────────────────────── */
/* The file input stays in the accessibility tree and the tab order — it is
   visually hidden, NOT display:none, so a keyboard user reaches it and the
   label shows the focus ring via :focus-within. */
.emv-scan { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.emv-scan-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.emv-scan-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 7px 14px; border-radius: var(--rt-r-button);
    border: 1px solid var(--rt-ink); background: var(--rt-surface); color: var(--rt-ink);
    font-size: 13px; font-weight: 600; font-family: var(--rt-font-sans);
    transition: background 140ms ease, border-color 140ms ease;
}
.emv-scan-btn:hover { background: var(--rt-surface-2); border-color: var(--rt-accent); }
.emv-scan:focus-within .emv-scan-btn { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.emv-scan-btn.emv-scan-busy { opacity: .65; cursor: progress; }
.emv-scan-hint { font-size: 12px; color: var(--rt-ink-soft); min-width: 0; }
.emv-scan-off .emv-scan-btn { opacity: .5; cursor: not-allowed; }

/* Drop target: the whole form lights up while a file is dragged over it. */
.emv-form.emv-drop { outline: 2px dashed var(--rt-accent); outline-offset: 6px; border-radius: var(--rt-r-card); }

/* The status line appears only after the reader acts, so the shift it causes is
   input-triggered and excluded from CLS (docs/cls-conventions.md rule 6). It is
   empty — and takes no space — until then. */
.emv-scan-status { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--rt-ink); }
.emv-scan-status:empty { display: none; }
.emv-scan-status span { display: block; }
.emv-scan-status.emv-scan-ok, .emv-scan-status.emv-scan-note, .emv-scan-status.emv-scan-error, .emv-scan-status.emv-scan-busy { padding: 8px 12px; border-radius: 8px; border-left: 2px solid var(--rt-hairline); background: var(--rt-surface-2); }
.emv-scan-status.emv-scan-ok { border-left-color: var(--rt-success); background: var(--rt-success-soft); }
.emv-scan-status.emv-scan-note { border-left-color: var(--rt-accent); background: var(--rt-accent-soft); }
.emv-scan-status.emv-scan-error { border-left-color: var(--rt-danger); background: var(--rt-danger-soft); }
.emv-scan-status.emv-scan-busy { color: var(--rt-ink-soft); }
.emv-scan-text { display: block; margin-top: 6px; font-family: var(--rt-font-mono); font-size: 12px; color: var(--rt-ink); overflow-wrap: anywhere; }