:root { --ink:#10222e; --ink-soft:#2c4453; --muted:#4a6072; --surface:#fff; --surface-2:#f7fafb; --bg:#f2f6f9; --line:#dbe5ec; --line-strong:#c3d2dc; --brand:#00697b; --brand-strong:#00505e; --brand-ink:#005766; --brand-wash:#e2f1f4; --on-brand:#fff; --success:#0f7550; --success-wash:#e0f3ea; --warning:#a35c00; --warning-wash:#fbeed6; --shadow:0 1px 2px rgb(16 34 46 / 5%),0 8px 24px rgb(16 34 46 / 6%); --radius:12px; --radius-lg:18px; --tap:48px; --appbar:56px; --rail:400px; --lists:360px; color-scheme:light dark; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
@media (prefers-color-scheme:dark) { :root { --ink:#e8eff4; --ink-soft:#c2d2dd; --muted:#9fb4c1; --surface:#142630; --surface-2:#192f3b; --bg:#0d1a22; --line:#25404e; --line-strong:#3a5f72; --brand:#3fb8cf; --brand-strong:#63cbde; --brand-ink:#7fd3e2; --brand-wash:#0f333d; --on-brand:#04222b; --success:#41c08c; --success-wash:#0f3229; --warning:#e2a04a; --warning-wash:#33260f; --shadow:0 1px 2px rgb(0 0 0 / 30%),0 8px 24px rgb(0 0 0 / 28%); } }

*,*::before,*::after { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; min-width:320px; padding-bottom:calc(124px + env(safe-area-inset-bottom)); color:var(--ink); background:var(--bg); font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%; } h1,h2,h3,p,dl,dd,figure { margin:0; } img,video,canvas,svg { display:block; max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }.skip-link { position:absolute; z-index:60; top:-100px; left:8px; border-radius:0 0 var(--radius) var(--radius); padding:10px 16px; color:var(--on-brand); background:var(--brand); font-weight:700; text-decoration:none; }.skip-link:focus { top:0; }
.muted { color:var(--muted); }.eyebrow { color:var(--brand-ink); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } h2 { font-size:1.15rem; letter-spacing:-.015em; } h3 { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:.95rem; }.count { display:inline-grid; min-width:22px; height:22px; place-items:center; border-radius:999px; padding:0 7px; color:var(--brand-ink); background:var(--brand-wash); font-size:.75rem; font-weight:800; }

.appbar { position:sticky; z-index:20; top:0; border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top); background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(14px); }.appbar-inner { display:flex; min-height:var(--appbar); align-items:center; justify-content:space-between; gap:12px; width:min(1440px,100%); margin:0 auto; padding:0 16px; }.brand { display:flex; align-items:center; gap:10px; color:var(--ink); }.brand-mark { flex:none; width:22px; height:22px; color:var(--brand); }.brand-text { display:flex; flex-direction:column; line-height:1.15; }.brand-text b { font-size:1rem; letter-spacing:-.02em; }.brand-text small { color:var(--muted); font-size:.72rem; font-weight:600; letter-spacing:.04em; }

.workspace { display:grid; gap:14px; width:100%; padding:14px 16px 0; }.rail { display:grid; align-content:start; gap:14px; min-width:0; }.stage-col { min-width:0; }.panel { border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; background:var(--surface); box-shadow:var(--shadow); }.intro-panel p { margin-top:4px; font-size:.9rem; }#results,.result-lists { display:grid; gap:14px; }

.stage { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:#0b1d27; box-shadow:var(--shadow); }.stage-media { --stage-max:clamp(200px,calc(100dvh - 330px),68dvh); display:grid; min-height:200px; height:var(--stage-max); place-items:center; overscroll-behavior:contain; }.stage-media > video,.stage-media > img,.stage-media > canvas { width:auto; height:auto; max-width:100%; max-height:var(--stage-max); object-fit:contain; }.stage-media.is-zoomed { place-items:start; overflow:auto; touch-action:pan-x pan-y; }.stage-media.is-zoomed > canvas { max-width:none; max-height:none; }
.stage-empty { position:absolute; display:grid; inset:0; place-content:center; justify-items:center; gap:6px; padding:20px; color:var(--muted); background:var(--surface-2); text-align:center; }.stage-empty-mark { width:44px; height:44px; margin-bottom:2px; opacity:.7; }.stage-empty-title { color:var(--ink); font-weight:700; }.stage-empty-hint { max-width:34ch; font-size:.86rem; }
.stage-tools { position:absolute; right:10px; bottom:10px; display:flex; gap:8px; }
.legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:10px; padding:0 2px; color:var(--muted); font-size:.82rem; }.key { display:inline-flex; align-items:center; gap:6px; }.key.hint { font-style:italic; }.key.orientation { color:var(--ink-soft); font-weight:600; }.dot { flex:none; width:10px; height:10px; border-radius:50%; }.dot.success { background:var(--success); }.dot.warning { background:var(--warning); }.dot.indicia { background:transparent; border:2px dashed var(--brand); }

button { display:inline-flex; min-height:var(--tap); align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:var(--radius); padding:0 18px; color:var(--on-brand); background:var(--brand); font:inherit; font-weight:600; line-height:1.2; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s,border-color .15s,transform .1s; }button:hover { background:var(--brand-strong); }button:active { transform:translateY(1px); }button:disabled { border-color:var(--line-strong); color:var(--muted); background:var(--line); cursor:not-allowed; transform:none; }
button.secondary { border-color:var(--line-strong); color:var(--brand-ink); background:var(--surface); }button.secondary:hover { border-color:var(--brand); background:var(--brand-wash); }button.ghost { color:var(--brand-ink); background:transparent; }button.ghost:hover { background:var(--brand-wash); }button.compact { min-height:36px; padding:0 12px; font-size:.85rem; }button.chip { min-height:38px; border-color:rgb(255 255 255 / 28%); border-radius:999px; padding:0 14px; color:#fff; background:rgb(11 29 39 / 66%); font-size:.82rem; backdrop-filter:blur(8px); }button.chip:hover { background:rgb(11 29 39 / 82%); }
:where(a,button,input,summary,[tabindex]):focus-visible { outline:3px solid var(--brand-ink); outline-offset:2px; }

.actionbar { position:fixed; z-index:30; right:0; bottom:0; left:0; display:grid; gap:8px; border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--surface) 92%,transparent); box-shadow:0 -6px 22px rgb(16 34 46 / 9%); backdrop-filter:blur(16px); }.actionbar-buttons { display:flex; gap:10px; }.actionbar-buttons > button { flex:1 1 auto; }.actionbar-buttons:has(> button:not(.secondary):not([hidden])) > button.secondary { flex:0 1 auto; }#status { min-height:1.1rem; color:var(--muted); font-size:.84rem; font-weight:600; text-align:center; }

.answer-panel { container-type:inline-size; display:grid; gap:14px; }.answer-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px; }.lookup-status { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:4px 11px; font-size:.82rem; font-weight:700; }.lookup-status::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }.lookup-status.ok { color:var(--success); background:var(--success-wash); }.lookup-status.warn { color:var(--warning); background:var(--warning-wash); }.lookup-status.idle { color:var(--muted); background:var(--surface-2); }
.code-block { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:var(--radius); padding:12px; background:var(--surface-2); }.code-groups { flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 18px; }.code-group { display:grid; justify-items:center; gap:2px; }.code-group b { font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace; font-size:1.02rem; font-weight:700; letter-spacing:.04em; }.code-group small { color:var(--muted); font-size:.64rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }.code-group.filled b { color:var(--warning); }.code-group.filled small { color:var(--warning); }.code-note { color:var(--muted); font-size:.84rem; }
.record-address { display:grid; gap:1px; border-left:3px solid var(--brand); padding-left:12px; font-style:normal; line-height:1.55; }.record-address .name { font-size:1.02rem; font-weight:700; }.record-address .postcode { margin-top:2px; font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace; font-weight:700; letter-spacing:.06em; }.record-fields { border-top:1px solid var(--line); padding-top:10px; }.record-fields summary { color:var(--brand-ink); font-size:.85rem; font-weight:700; cursor:pointer; }.record-grid { display:grid; gap:10px; margin-top:12px; }.record-grid dt { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.record-grid dd { overflow-wrap:anywhere; }.empty { color:var(--muted); font-size:.88rem; }

.card-list { container-type:inline-size; display:grid; gap:10px; }.barcode-card { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:start; gap:12px; width:100%; min-height:0; border:1px solid var(--line); border-radius:var(--radius); padding:10px; color:inherit; background:var(--surface-2); font-weight:400; text-align:left; white-space:normal; }.barcode-card:hover { border-color:var(--brand); background:var(--brand-wash); }.barcode-card[aria-pressed="true"] { border-color:var(--brand); outline:2px solid var(--brand); outline-offset:-2px; background:var(--brand-wash); }.card-thumb { position:relative; }.card-thumb img { width:76px; height:62px; border-radius:8px; background:#0b1d27; object-fit:contain; }.card-index { position:absolute; top:-6px; left:-6px; display:grid; min-width:24px; height:24px; place-items:center; border:2px solid var(--surface-2); border-radius:999px; padding:0 5px; color:#fff; font-size:.72rem; font-weight:800; }.card-index.success { background:var(--success); }.card-index.warning { background:var(--warning); }.card-body { display:grid; gap:6px; min-width:0; }.tags { display:flex; flex-wrap:wrap; gap:5px; }.tag { border-radius:999px; padding:3px 8px; color:var(--brand-ink); background:var(--brand-wash); font-size:.68rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }.tag.strong { color:var(--on-brand); background:var(--brand); }.tag.warning { color:var(--warning); background:var(--warning-wash); }.card-value { overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace; font-size:.88rem; font-weight:700; line-height:1.35; }.card-note { color:var(--muted); font-size:.82rem; }

body:is([data-mode="ready"],[data-mode="busy"],[data-mode="results"]) .stage-media { min-height:160px; height:auto; }
body[data-mode="results"] .stage-media.is-zoomed { height:var(--stage-max); }
@media (min-width:640px) { :root { --appbar:64px; --tap:44px; } body { padding-bottom:0; }.workspace { gap:20px; width:min(960px,100%); margin:0 auto; padding:22px 24px 40px; }.panel { padding:20px; } h2 { font-size:1.3rem; }.stage-media { --stage-max:min(60vh,calc(100vh - 320px)); min-height:280px; }.actionbar { position:static; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:none; }.actionbar-buttons { flex:0 1 auto; }.actionbar-buttons > button,.actionbar-buttons > button.secondary { flex:0 0 auto; }#status { flex:1 1 200px; text-align:left; }.result-lists { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } }

@container (min-width:420px) { .record-grid { grid-template-columns:minmax(120px,170px) minmax(0,1fr); align-items:baseline; gap:8px 16px; }.record-grid dt { padding-top:2px; } }
@container (min-width:430px) { .barcode-card { grid-template-columns:92px minmax(0,1fr); }.card-thumb img { width:92px; height:72px; } }
@media (min-width:1024px) { .workspace { grid-template-columns:minmax(0,1fr) minmax(340px,var(--rail)); grid-template-areas:"stage action" "stage rail" "stage lists"; align-items:start; gap:16px 24px; width:min(1440px,100% - 48px); padding:24px 0 48px; }.stage-col { grid-area:stage; position:sticky; top:calc(var(--appbar) + 24px); }.actionbar { grid-area:action; }.rail { grid-area:rail; }.stage-media { --stage-max:min(72vh,calc(100vh - 230px)); min-height:360px; }.result-lists { grid-area:lists; grid-template-columns:minmax(0,1fr); }.rail,#results,.result-lists { gap:16px; } }
@media (min-width:1440px) { :root { --rail:440px; } }
@media (min-width:1600px) { .workspace { grid-template-columns:minmax(0,1fr) minmax(340px,var(--rail)) minmax(320px,var(--lists)); grid-template-areas:"stage action ." "stage rail lists"; width:min(1840px,100% - 48px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
@media (forced-colors:active) { .panel,.stage,.barcode-card,.code-block { border:1px solid CanvasText; }.barcode-card[aria-pressed="true"] { outline:2px solid Highlight; } }

.check-list { display:grid; gap:8px; }.check { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:10px; border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; background:var(--surface-2); }.check.mismatch { border-color:var(--warning); background:var(--warning-wash); }.check-mark { display:grid; flex:none; width:20px; height:20px; margin-top:1px; place-items:center; border-radius:50%; color:#fff; font-size:.72rem; font-weight:800; }.check-mark.match { background:var(--success); }.check-mark.mismatch { background:var(--warning); }.check-mark.partial { color:var(--success); background:var(--surface); box-shadow:inset 0 0 0 1px var(--success); }.check-mark.unavailable { color:var(--muted); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }.check-body { display:grid; gap:3px; min-width:0; }.check-name { font-size:.9rem; font-weight:700; }.check-detail { color:var(--muted); font-size:.82rem; }.check-values { display:flex; flex-wrap:wrap; gap:2px 16px; margin:1px 0 2px; font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace; font-size:.85rem; font-weight:700; }.check-values > span { display:inline-flex; align-items:baseline; gap:7px; overflow-wrap:anywhere; }.check-values small { color:var(--muted); font-family:system-ui,sans-serif; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.mailmark-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:10px 14px; border-top:1px solid var(--line); padding-top:12px; }.mailmark-fields div { display:grid; gap:2px; min-width:0; }.mailmark-fields b { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.mailmark-fields span { overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace; font-size:.88rem; font-weight:700; white-space:pre-wrap; }
.mailmark-fields span.warn-value { color:var(--warning); }#fourstate-panel .check-detail { margin-top:12px; }