*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--flow-bg,#f5f5f7);color:var(--flow-ink,#1d1d1f);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}a{color:inherit}
button,.button{min-height:48px;border:0;border-radius:14px;padding:12px 18px;cursor:pointer;font-weight:550;transition:background .16s ease,transform .16s ease}
button:disabled{opacity:.55;cursor:wait}button:active,.button:active{transform:scale(.98)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--flow-accent,#0066cc);outline-offset:4px}
.button{display:flex;align-items:center;justify-content:center;text-decoration:none}
.primary{background:var(--flow-accent,#0066cc);color:#fff}.secondary,.quiet{background:var(--flow-bg,#f5f5f7);color:var(--flow-ink,#1d1d1f)}.full{width:100%}
.shell{height:100vh;height:100dvh;max-width:680px;margin:auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;padding:max(18px,env(safe-area-inset-top)) 24px max(18px,env(safe-area-inset-bottom));background:var(--flow-surface,#fff)}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}.brand{font-size:25px;font-weight:650;letter-spacing:-1px;text-decoration:none}.brand span{display:block;font-size:11px;font-weight:400;letter-spacing:0;color:var(--flow-muted,#6e6e73);margin-top:1px}
nav{display:flex;align-items:center;flex-shrink:0}nav .scan-nav{min-height:44px;display:flex;align-items:center;padding:10px 14px;border-radius:12px;text-decoration:none;font-size:14px;background:var(--flow-bg,#f5f5f7)}.trace-toggle{display:none!important}
main{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}footer{display:flex;gap:10px;align-items:center}footer>*{flex:1;min-width:0}
h1{font-size:clamp(25px,6vw,34px);line-height:1.15;letter-spacing:-.055em;font-weight:600;margin:16px 0 10px}p{margin:8px 0}.muted{font-size:15px;color:var(--flow-muted,#6e6e73);line-height:1.5}.subtle{font-size:12px;color:var(--flow-muted,#6e6e73)}
.capture{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px}.capture h1{margin:12px 0 0}.capture>.muted{max-width:30ch}.frame{width:min(100%,310px);aspect-ratio:4/5;max-height:42dvh;border-radius:24px;display:grid;place-items:center;background:var(--flow-bg,#f5f5f7);overflow:hidden}.frame img{width:100%;height:100%;object-fit:contain}.idle-frame{width:88px;height:88px;aspect-ratio:1;border-radius:26px}.frame svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:1.8}.photo-choice{background:none;color:var(--flow-accent,#0066cc)}
.card,.candidate{overflow-wrap:anywhere}.person{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px 8px;text-align:center}.initials{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--flow-bg,#f5f5f7);color:var(--flow-muted,#6e6e73);font-size:22px;font-weight:500;margin:0 auto 8px}.person h1{max-width:100%;font-size:clamp(28px,7vw,38px)}.person>.muted{max-width:34ch;margin:0 auto}.links{display:grid;gap:10px;width:100%;max-width:380px;margin-top:28px}.links p{margin:0 0 6px}
.candidate{display:block;width:100%;text-align:left;border:1px solid var(--flow-line,#dedee3);background:var(--flow-surface,#fff);margin:10px 0;padding:16px}.candidate strong,.candidate span{display:block}.candidate strong{font-size:17px;font-weight:600}.candidate span{font-size:14px;color:var(--flow-muted,#6e6e73);margin-top:4px}
.form{display:grid;gap:12px;padding:8px 0}label{display:grid;gap:8px;font-size:14px}input,textarea{width:100%;min-height:48px;font-size:16px;padding:14px;border:1px solid var(--flow-line,#dedee3);border-radius:14px;background:var(--flow-surface,#fff);color:var(--flow-ink,#1d1d1f)}textarea{min-height:150px;resize:vertical}.error{padding:12px;border-radius:14px;background:#fff2f0;color:#8c2a20;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* The preview stays mounted while recognition updates these small overlays. */
.live-mode{background:#111113;color:#fff}.live-mode .brand span{color:#b9b9bf}.live-mode nav .scan-nav{background:#ffffff12;color:#eee}.live-mode main{overflow:hidden}.camera-capture{position:relative;display:block;height:100%;text-align:left}.camera-capture>h1{display:none}.camera-frame{position:relative;height:100%;width:100%;max-height:none;border-radius:24px;background:#1d1d1f;container-type:size}.camera-frame video{width:100%;height:100%;object-fit:cover;border-radius:inherit}.badge-guide{position:absolute;left:50%;top:50%;width:min(88%,104cqh);aspect-ratio:1.6;transform:translate(-50%,-50%);border:2px solid #fffc;border-radius:12px;box-shadow:0 0 0 600px #0003;pointer-events:none}.camera-capture #live-status{position:absolute;top:14px;left:14px;right:14px;color:#fff;font-size:14px;text-align:center;background:#0008;border-radius:16px;padding:9px 12px;margin:0;line-height:1.4}.live-reading{position:absolute;bottom:18px;left:18px;right:18px;color:#fff;font-size:13px;line-height:1.4;white-space:pre-line;max-height:80px;overflow:auto;text-shadow:0 1px 3px #000;margin:0}.live-reading:empty,.camera-capture:has(.live-person) .live-reading{display:none}.live-matches{position:absolute;bottom:12px;left:12px;right:12px;max-height:48%;overflow:auto;display:grid;gap:8px}.live-person{padding:14px;border-radius:18px;background:#fffffff5;color:var(--flow-ink,#1d1d1f);display:flex;gap:12px;align-items:center;text-align:left;width:100%}.live-person>div{flex:1;min-width:0}.live-person strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.03em}.live-person p{font-size:12px;color:var(--flow-muted,#6e6e73);margin:4px 0;overflow-wrap:anywhere}.choice-arrow{font-size:24px;color:var(--flow-muted,#6e6e73)}.live-mode footer .quiet{background:#ffffff12;color:#eee}
#stage:has(>.capture):has(>.error){display:flex;flex-direction:column;gap:8px}#stage:has(>.error)>.capture{height:auto;flex:1;min-height:0}#stage>.error{flex-shrink:0;margin:0}
@media(max-width:600px){.shell{padding-left:16px;padding-right:16px;gap:12px}.live-mode{padding-left:12px;padding-right:12px}.camera-frame{border-radius:20px}.person{padding:16px 2px}.brand{font-size:23px}}
@media(max-height:680px){.shell{gap:8px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}.capture{gap:6px}.frame{max-height:30dvh}.camera-frame{max-height:none}.person{padding:12px 2px}.initials{width:48px;height:48px;font-size:18px}.person h1{margin-top:10px}.links{margin-top:20px}footer button{font-size:14px;padding:11px 8px}.live-reading{max-height:55px}}
@media(prefers-reduced-motion:reduce){button,.button{transition:none}button:active,.button:active{transform:none}}
/* Matched badges remain available while the camera scans the next person. */
.live-stack{display:grid;gap:8px}
.live-match-card{display:flex;align-items:center;gap:4px;background:var(--flow-surface,#fff);color:var(--flow-ink,#1d1d1f);border:1px solid #ffffff80;border-radius:18px;box-shadow:0 6px 20px #0002;overflow:hidden}
.live-match-card>button:not(.live-dismiss){flex:1;min-width:0;text-align:left;background:transparent;color:inherit;padding:12px 14px}
.live-match-card strong,.live-match-card span{display:block;overflow-wrap:anywhere}
.live-match-card strong{font-size:16px;font-weight:600;letter-spacing:-.02em}
.live-match-card p,.live-match-card small{display:block;font-size:12px;color:var(--flow-muted,#6e6e73);margin:3px 0 0}
.live-dismiss{flex:none;width:44px;min-height:44px;padding:8px;background:transparent;color:var(--flow-muted,#6e6e73);font-size:22px;margin-right:4px}
.camera-capture:has(.live-match-card) .live-reading{display:none}
.batch-people{width:100%;max-width:380px;margin-top:20px;display:grid;gap:8px}
.batch-people a{display:block;padding:12px;border:1px solid var(--flow-line,#dedee3);border-radius:12px;text-decoration:none;font-size:14px}

.live-overlays{position:absolute;bottom:12px;left:12px;right:12px;max-height:48%;overflow:auto;display:grid;gap:8px;z-index:2}
.live-overlays .live-matches{position:static;max-height:none;overflow:visible}
.live-overlays:empty{display:none}.live-stack:empty{display:none}
.live-match-card>div{flex:1;min-width:0;padding:12px 0 12px 14px}
.live-match-card>button:not(.live-dismiss){flex:0 0 auto;font-size:13px;padding:10px;color:var(--flow-accent,#0066cc)}
.scanned-together{width:100%;max-width:380px;margin-top:22px;display:grid;gap:8px}.scanned-together h2{font-size:14px;font-weight:500;color:var(--flow-muted,#6e6e73);margin:0 0 2px}.scanned-together a{padding:12px;border:1px solid var(--flow-line,#dedee3);border-radius:12px;text-decoration:none;font-size:14px}

.batch-countdown{padding:10px 14px;background:#202025ed;color:#fff;border-radius:12px;font-size:12px;overflow:hidden}.batch-countdown[hidden]{display:none}.countdown-bar{display:block;height:2px;background:#fff;margin-top:8px;transform-origin:left;animation:countdown-drain 5s linear forwards}@keyframes countdown-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
#stage>a.button{margin-bottom:8px}#stage>button{margin:8px 8px 0 0}

/* Spatial contract: camera target above, notification stack below, actions outside. */

.live-overlays{left:12px;right:12px;bottom:12px;max-height:42%;gap:10px;overscroll-behavior:contain;scroll-padding:8px}
.live-stack{gap:10px}.live-match-card{min-height:76px;border-radius:16px;gap:8px}
.live-match-card>div{padding:14px 0 14px 16px}.live-match-card strong{font-size:15px;line-height:1.35}.live-match-card p{line-height:1.4;margin-top:5px}
.live-match-card>button:not(.live-dismiss){min-height:44px;padding:10px 12px}.live-dismiss{margin-right:6px}
.live-mode footer{gap:12px}.live-mode footer .button,.live-mode footer button{font-size:14px;padding:12px 10px}
.batch-countdown{padding:10px 14px;line-height:1.4;flex-shrink:0}
@media(max-width:380px){.live-match-card{gap:2px}.live-match-card>div{padding-left:12px}.live-dismiss{width:44px;margin-right:0}.live-match-card>button:not(.live-dismiss){padding:10px 8px}}
@media(max-height:600px){.live-overlays{max-height:48%;bottom:8px}.live-match-card{min-height:64px}.live-match-card>div{padding-top:10px;padding-bottom:10px}}

/* A stable crop: results never move the camera target beneath the user's hand. */
.live-mode .camera-capture .badge-guide{top:30%;width:min(80%,60cqh)}
.batch-countdown{min-height:46px;transition:opacity 180ms ease;opacity:1}
.batch-countdown[data-active="false"]{opacity:0;pointer-events:none}
.live-overlays{scrollbar-width:thin;scrollbar-color:#ffffff50 transparent}
@media(max-height:600px){.live-mode .camera-capture .badge-guide{top:27%;width:min(75%,55cqh)}}
@media(prefers-reduced-motion:reduce){.countdown-bar{animation:none;display:none}.batch-countdown{transition:none}}

.group-hold{width:100%;background:#101a3c;color:#f8f6f3;min-height:44px;font-size:13px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.group-hold[aria-pressed="true"]{background:#ff5900;color:#020817}.live-overlays{max-height:46%}.live-stack{min-height:0}.batch-countdown{min-height:38px;padding:6px 12px}