/* OYP Card Scanner — brand: Libre Bodoni 500 titles, Bodoni Moda 400 body, Inter 500 labels, icons #9a9a9a */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --head:'Libre Bodoni','Berthold Bodoni','Bodoni 72',Didot,serif;
  --body:'Bodoni Moda','Bodoni 72',Didot,serif;
  --label:Inter,Helvetica,sans-serif;
  --muted-icon:#9a9a9a;
  --gold:#d4af37;
}
body{
  font-family:var(--body);font-weight:400;font-optical-sizing:auto;
  background:#fff;color:#111;-webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,.serif,.title,input.big,button.primary,.jobar strong,.pages .nm,.price{
  font-family:var(--head);font-weight:500;letter-spacing:-.005em;
}
.muted,.toggle,.hint,.warn,.pages .st,dialog,dialog p,button.ghost,input.mid{
  font-family:var(--body);font-weight:400;
}
.lbl{
  font-family:var(--label);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:#777;
  display:block;margin:26px 0 8px;
}

.top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;z-index:5}
.logo{height:30px;width:auto;display:block}
.title{font-size:17px}
.icon{
  background:none;border:0;color:var(--muted-icon);width:48px;height:48px;min-width:48px;min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;padding:0;opacity:1;transition:none;cursor:pointer;
}
.icon:hover,.icon:focus,.icon:active{color:var(--muted-icon);background:none;outline:none}
.icon svg{display:block;pointer-events:none}

.view{padding:28px 20px}.hidden{display:none!important}
h1{font-size:30px;margin-bottom:8px}
.muted{color:#777}
input.big{width:100%;font-size:34px;padding:18px;border:2px solid #111;border-radius:14px;text-align:center;letter-spacing:.05em}
input.mid{width:100%;font-size:16px;padding:14px;border:1px solid #ccc;border-radius:10px}
button.primary{width:100%;min-height:60px;margin-top:22px;background:#111;color:#fff;border:0;border-radius:14px;font-size:20px;letter-spacing:.06em}
button.ghost{min-height:52px;padding:0 20px;background:#fff;border:1px solid #111;border-radius:12px;font-size:16px;color:#111}
.warn{margin-top:18px;color:#a06b00;font-size:14px}

#scanView{padding:12px 14px}
.jobar{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;margin-bottom:10px;font-family:var(--body)}
.jobar strong{font-size:20px}
.stage{position:relative;width:100%;max-width:100%;box-sizing:border-box;aspect-ratio:3/4;max-height:62vh;margin:0 auto;background:#000;border-radius:16px;overflow:hidden}
.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.guide{position:absolute;inset:7% 8%;border:2px dashed rgba(212,175,55,.9);border-radius:10px;pointer-events:none}
.hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;padding:8px 14px;border-radius:20px;font-size:14px;white-space:nowrap}
.hint.ok{background:var(--gold);color:#111}
.controls{display:flex;align-items:center;justify-content:space-between;padding:16px 4px}
.toggle{font-size:14px;display:flex;align-items:center;gap:6px;min-height:48px;color:#555}
.toggle input{width:22px;height:22px;accent-color:#111}
.shutter{width:78px;height:78px;border-radius:50%;border:5px solid var(--gold);background:#111;box-shadow:inset 0 0 0 4px #fff}
.shutter:active{transform:scale(.94)}

.pages{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.pages li{display:flex;align-items:center;gap:12px;border:1px solid #eee;border-radius:12px;padding:8px}
.pages img{width:56px;height:72px;object-fit:cover;border-radius:6px;background:#f4f4f4}
.pages .nm{font-size:15px}
.pages .st{font-size:13px;color:#777}
.st.ok{color:#2a7a2a}.st.err{color:#b00020}.st.mm{color:#a06b00}.st.queued{color:#777}
.pages .retry{margin-left:auto;min-height:44px;padding:0 14px;border:1px solid #111;background:#fff;border-radius:10px;font-family:var(--body);font-size:14px}

dialog{border:0;border-radius:18px;padding:22px;width:min(92vw,460px);margin:auto;font-family:var(--body)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog h2{margin-bottom:4px;font-size:24px}
dialog .lbl{margin-top:18px}
dialog .row{display:flex;gap:10px;margin-top:16px}
dialog .row button{flex:1;margin-top:0}

.jorow{display:flex;gap:10px;align-items:stretch}
.jorow input.big{flex:1;min-width:0}
.mic{flex:0 0 84px;min-height:84px;border:2px solid var(--gold);border-radius:14px;background:#111;color:var(--gold);display:flex;align-items:center;justify-content:center}
.mic:active{transform:scale(.95)}
.mic.listening{background:var(--gold);color:#111;animation:micpulse 1.1s ease-in-out infinite}
@keyframes micpulse{0%{box-shadow:0 0 0 0 rgba(212,175,55,.7)}70%{box-shadow:0 0 0 16px rgba(212,175,55,0)}100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}}
#startView .toggle{margin-top:10px}

/* review / corner editor */
.review{position:fixed;inset:0;z-index:20;background:#111;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.rvhead{padding:14px 18px 8px;color:#fff;display:flex;flex-direction:column;gap:2px}
.rvhead .serif{font-family:var(--head);font-weight:500;font-size:22px}
.rvsub{font-size:14px;color:#aaa}
.rvstage{position:relative;flex:1;margin:6px 26px;touch-action:none}
.rvstage canvas{position:absolute}
.rvlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.handle{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:3px solid var(--gold);background:rgba(212,175,55,.25);touch-action:none;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.handle::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--gold)}
.handle.drag{background:rgba(212,175,55,.45);transform:scale(1.15)}
.rvbar{display:flex;gap:10px;padding:12px 16px 16px}
.rvbar button{flex:1;margin-top:0;min-height:58px}
.rvbar button.ghost{background:transparent;color:#fff;border-color:#666}
.rvbar button.primary{background:var(--gold);color:#111}

.rvopts{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px}
.rvopts .enh{font-size:15px;display:flex;align-items:center;gap:8px}
.rvpreview{height:72px;max-width:45%;object-fit:contain;border:1px solid rgba(255,255,255,.25);background:#111}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;background:rgba(20,20,20,.92);color:#fff;padding:8px 10px 8px 8px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.toast img{height:56px;border-radius:4px}
.toast button{padding:6px 12px}
.rvopts{color:#eee}
/* owner: instructions + auto-start label in Inter 500 16px */
#startView .help{font-family:Inter,Helvetica,sans-serif;font-weight:500;font-size:16px;text-transform:uppercase;letter-spacing:normal}

#btnStart.pulse{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(212,175,55,.45)}}
/* owner: header title + main heading 22px on all screens */
header.top .title, h1{font-size:22px}
/* owner: JO number label (start) + JO label (scan view) 16px */
#startView .lbl, .jobar, .jobar strong{font-size:16px}
#btnSettings,#btnSettings:hover,#btnSettings:focus,#btnSettings:active{color:#000}
/* owner: mic as trailing icon inside the JO input (iOS search-field style) */
.jorow{position:relative;display:block}
.jorow input.big{width:100%;padding-left:64px;padding-right:64px}
.jorow .mic{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:48px;height:48px;min-height:48px;flex:none;border:0;border-radius:50%;background:transparent;color:#9a9a9a;padding:0;animation:none}
.jorow .mic svg{width:26px;height:26px}
.jorow .mic:active{transform:translateY(-50%) scale(.92)}
.jorow .mic.listening{background:rgba(214,48,49,.12);color:#d63031;animation:micdot 1s ease-in-out infinite}
@keyframes micdot{50%{box-shadow:0 0 0 7px rgba(214,48,49,.18)}}
/* owner: SCAN button auto-width, centered */
#btnStart{display:block;width:fit-content;width:-webkit-fit-content;margin-left:auto;margin-right:auto;padding:14px 36px;min-height:44px}
/* owner mockup: black pill SCAN; hamburger left, logo right */
#btnStart{background:#000;color:#fff;border:0;border-radius:16px;font-family:'Libre Bodoni',serif;font-weight:500;font-size:22px;letter-spacing:.04em;padding:14px 40px;text-transform:none}
header.top #btnSettings{order:0}
header.top .title{order:1}
header.top .logo{order:2}
header.top .title{text-transform:uppercase;font-size:22px}
header.top .title{font-size:20px}
/* owner: JO input 60px tall */
.jorow input.big{height:60px;box-sizing:border-box;padding-top:0;padding-bottom:0;font-size:26px;line-height:60px}
/* owner: leading JO label inside input; JO label, number and mic share one grey */
:root{--field-gray:#9a9a9a}
.jorow .jopre{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-family:Inter,Helvetica,sans-serif;font-weight:500;font-size:16px;text-transform:uppercase;color:var(--field-gray);letter-spacing:.06em;cursor:text;user-select:none;-webkit-user-select:none}
.jorow input.big{color:var(--field-gray);padding-left:64px}
.jorow input.big::placeholder{color:var(--field-gray);opacity:.55}
.jorow .mic{color:var(--field-gray)}
.jorow .mic.listening{color:#d63031}
/* owner: listening state in brand gold */
.jorow .mic.listening{color:var(--gold);background:rgba(212,175,55,.16);animation:micgold 1s ease-in-out infinite}
@keyframes micgold{50%{box-shadow:0 0 0 7px rgba(212,175,55,.22)}}

/* fixed-ratio pages: uniform thumbnails, no gaps */
.pages img{width:50px;height:78px;object-fit:cover;background:none}
.rvpreview{object-fit:cover;aspect-ratio:1/1.55;height:72px;width:auto;background:none}
.toast img{height:56px;aspect-ratio:1/1.55;object-fit:cover}
/* owner: more space above JO box; listening = gold icon only */
#startView .help{margin-bottom:32px}
.jorow .mic.listening{color:#d4af37;background:transparent;animation:none;box-shadow:none;transform:translateY(-50%)}
/* owner: JO cap height = mic icon visual height (~20.6px); Inter cap-height 0.75em */
.jorow .jopre{font-size:22px;line-height:1;letter-spacing:.02em}
.jorow input.big{padding-left:76px}
/* owner: JO number uses same font as JO label (size/colour unchanged) */
.jorow input.big{font-family:Inter,Helvetica,sans-serif;font-weight:500}
/* owner step1: vertically centre start block below header */
#startView{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;min-height:calc(100vh - 77px);min-height:calc(100dvh - 77px)}
#startView .help{text-transform:none}
/* owner: title cap-centre aligned with logo centre */
header.top .title{line-height:1;position:relative;top:2.5px}
#startView h1,#startView .help{text-align:center}
/* owner: instructions on one line down to 360px */
#startView .help{white-space:nowrap;font-size:15px}
/* owner: stone background below white header, fixed (iOS-safe pseudo-element) */
html.on-start body::before{content:"";position:fixed;inset:0;z-index:-1;background:#fff url(bg-stone.jpg?v=1792162220) center/cover no-repeat;pointer-events:none}
header.top{background:#fff}
/* owner: readability on stone */
#startView .help{color:#444}
.jorow input.big{background:#fff}
/* owner: continuous stone everywhere incl. overscroll */
html.on-start{background:#d8d3c8 url(bg-stone.jpg?v=1792162220) center top/cover no-repeat fixed;min-height:100%}
html.on-start body{background:transparent;min-height:100%}
html:not(.on-start),html:not(.on-start) body{background:#fff}
html.on-start body::before{top:-120px;left:0;right:0;bottom:auto;inset:auto;top:-120px;left:0;right:0;height:calc(120vh + 240px);height:calc(100lvh + 240px);background-color:#d8d3c8;background-position:center}
header.top{background:#fff}
/* owner: scan screen refresh */
#scanView .jobar{position:relative;justify-content:center;text-align:center}
#scanView .jobar > span:first-child{font-weight:700}
#scanView .jobar strong{font-weight:700}
#scanView #pageLabel{position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:Inter,Helvetica,sans-serif;font-weight:500;letter-spacing:0;text-transform:none}
#scanView .controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
#scanView .controls .toggle{font-family:Inter,Helvetica,sans-serif;font-weight:500;font-size:12px;gap:5px}
#scanView .controls .toggle input{width:18px;height:18px}
#scanView .controls .toggle:first-child{justify-self:start}
#scanView .controls .toggle:last-child{justify-self:end}
#btnDone{display:block;width:fit-content;width:-webkit-fit-content;margin-left:auto;margin-right:auto;min-height:44px;background:#000;color:#fff;border:0;border-radius:16px;font-family:'Libre Bodoni',serif;font-weight:500;font-size:22px;letter-spacing:.04em;padding:14px 40px}
#btnCapture.shutter{background:#d4af37}

/* toggles aligned to viewfinder edges */
#scanView .controls{box-sizing:border-box;max-width:100%;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
#scanView .jobar{box-sizing:border-box;max-width:100%;margin-left:auto;margin-right:auto}
header.top #btnSettings{position:relative;top:2.5px}