:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#0f172a;background:#f1f5f9;font-size:16px}*{box-sizing:border-box}body{margin:0}main{max-width:1600px;margin:auto;padding:24px}.staging{padding:10px 16px;text-align:center;background:#9a3412;color:white;font-weight:700}header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}h1{font-size:36px;margin:0}h2{font-size:20px;margin:0 0 12px}p{line-height:1.5;margin:10px 0}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:#64748b;margin:0 0 4px}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}button,select,input{font:inherit;border:1px solid #cbd5e1;border-radius:10px;background:white;color:#0f172a;min-height:46px;padding:10px 14px}button{font-weight:700;cursor:pointer}button:disabled{opacity:.42;cursor:default}button:hover:enabled{border-color:#0f172a}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}button.primary,.tab.active{background:#0f172a;color:white;border-color:#0f172a}button.green{background:#15803d;color:white;border-color:#15803d}button.orange{background:#c2410c;color:white;border-color:#c2410c}button.blue{background:#1d4ed8;color:white;border-color:#1d4ed8}button.red{background:#b91c1c;color:white;border-color:#b91c1c}[hidden]{display:none!important}section{padding:20px;background:white;border:1px solid #dbe3ed;border-radius:16px;margin-bottom:20px}.camera-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.camera-heading span{color:#64748b;font-size:14px}.camera-panel select#camera{max-width:330px}.preview-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}#preview{width:320px;max-width:100%;max-height:240px;background:#020617;border-radius:10px}#camera-light{display:flex;gap:8px;align-items:center;border:1px solid #cbd5e1;border-radius:999px;background:white;padding:11px 14px;font-size:14px}.dot{width:12px;height:12px;border-radius:50%;background:#9ca3af}#camera-light[data-state=green] .dot{background:#16a34a}#camera-light[data-state=red] .dot{background:#dc2626}#recording-status{font-weight:800}#recording-status:not(:empty){padding:10px;background:#eff6ff;border-radius:8px}.error{color:#b91c1c}.offline{color:#9a3412;font-weight:700}nav{margin:24px 0 12px}#grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:24px}.card{background:white;border:2px solid #cbd5e1;border-radius:16px;overflow:hidden}.card.recording{border-color:#dc2626;box-shadow:0 0 0 3px #fecaca}.strip{display:flex;align-items:center;justify-content:space-between;padding:14px;background:#0f172a;color:white}.number{font-size:26px;font-weight:900;overflow-wrap:anywhere}.strip small{font-size:13px}.statusbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:#fef3c7;font-size:13px;font-weight:800}.card.recording .statusbar{background:#0f172a;color:white}.statusbar.done{background:#dcfce7}.actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px}.actions button{flex:1;min-width:110px}.actions button.view{flex:0 1 auto;min-width:64px}.items{padding:0 18px 12px;margin:0;list-style:none}.items li{padding:7px 0;border-top:1px solid #e2e8f0;font-weight:600;white-space:pre-wrap}.items li.mod{padding-left:16px;color:#64748b;font-weight:400}.phase-status{padding:0 14px 14px;font-size:13px;color:#475569}.local-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid #e2e8f0}.help p{color:#475569}.help{margin-top:24px}footer{padding:12px;color:#64748b;font-size:13px}dialog{width:min(900px,94vw);max-height:90vh;border:1px solid #cbd5e1;border-radius:16px;padding:24px}dialog::backdrop{background:#0f172aaa}.dialog-heading{display:flex;justify-content:space-between;align-items:center}#evidence-content video{width:100%;max-height:55vh;background:#020617;border-radius:10px}#evidence-content p{font-weight:700}.badge{background:#fef3c7;border-radius:5px;padding:3px 6px}.camera-heading h2{margin-bottom:10px}@media(max-width:700px){main{padding:14px}header{align-items:flex-start;flex-direction:column}header .controls{width:100%}.camera-heading{align-items:flex-start;flex-direction:column}.camera-panel select#camera{max-width:100%;width:100%}.camera-panel{padding:16px}#grid{grid-template-columns:1fr}.camera-heading span{margin-bottom:8px}.preview-wrap{flex-direction:column;align-items:flex-start}button{min-height:48px}}
:root .strip.deliveroo{background:#00ccbc;color:#0f172a}:root .strip.justeat{background:#ff8000;color:#0f172a}:root .strip.uber{background:#000;color:#fff}

/* Tablet cards mirror the Android OrdersAdapter colours and layout. */
#grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.card{position:relative;border:1px solid #cbd5e1;border-radius:14px;box-shadow:0 6px 18px rgba(2,6,23,.08);min-height:210px;display:flex;flex-direction:column}
.strip{height:62px;min-height:62px;padding:0 14px;color:#fff;gap:10px}
:root .strip.deliveroo{background:#00ccbc;color:#fff}:root .strip.justeat{background:#ff8000;color:#fff}:root .strip.uber{background:#000;color:#fff}:root .strip.other{background:#64748b;color:#fff}
.numblock{min-width:0;flex:1;line-height:1.1}.number{font-size:20px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}.header-date{font-size:12px;opacity:.95;margin-top:3px}.header-time{font-size:18px;font-weight:800;white-space:nowrap}
.statusbar{min-height:62px;padding:8px 14px;background:#e5e7eb;color:#111827;gap:8px;font-weight:400;border-top:1px solid #0001}.status-left{flex:1;min-width:0;line-height:1.15}.status-label{font-size:14px;font-weight:900}.status-date{font-size:12px;margin-top:3px}.status-time{font-weight:900;font-size:20px;white-space:nowrap}.status-recording{background:#000;color:#fff}.status-handed{background:#fff;color:#065f46}.status-review{background:#fef3c7;color:#92400e}
.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 10px 4px;align-items:center}.actions button,.actions button.view{width:100%;min-width:0;min-height:44px;max-width:100%;height:44px;padding:4px 6px;font-size:13px;line-height:1.15;border-radius:21px;font-weight:800}.actions button.view{border-radius:10px;background:#fff;color:#0f172a}.actions .wide{grid-column:2 / 4;border-radius:10px}.actions .rec-badge{font-size:10px;color:#ef4444;font-weight:900;margin-right:3px}.actions button.drinks{background:#111827;border-color:#111827;color:#fff}.actions button.food{background:#059669;border-color:#059669;color:#fff}.card button.handed{background:#4f46e5;border-color:#4f46e5;color:#fff}.card button.stop{background:#0284c7;border-color:#0284c7;color:#fff}.card button.play{background:#dc2626;border-color:#b91c1c;color:#fff}.card button:disabled{background:#d1d5db;border-color:#d1d5db;color:#111827;opacity:1;cursor:default}
.card.recording{border:3px solid #ef4444;box-shadow:0 0 0 3px #fecaca}.recording-timer{color:#ef4444;font-size:18px;font-weight:900;animation:card-blink 1s steps(2,end) infinite}.waiting-banner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;color:#ef4444;font-weight:900;font-size:18px;padding:6px 12px;animation:card-blink 1s steps(2,end) infinite}.driver-arrived{animation:card-flash 1s steps(2,end) infinite}.card-footer{font-size:12px;color:#64748b;text-align:right;padding:8px 12px 10px;margin-top:auto}.card-details{padding:8px 12px}.card-details .items{padding:0;margin:0}.detail-actions{display:flex;gap:8px;margin:8px 0}.detail-actions button{min-height:38px;font-size:13px;padding:6px 12px}.card-details .phase-status{padding:0;margin:8px 0 0;font-size:12px}.actions button:hover:enabled{filter:brightness(.96)}
@keyframes card-blink{0%,49%{opacity:1}50%,100%{opacity:.3}}@keyframes card-flash{0%,49%{opacity:1}50%,100%{opacity:.5}}
@media(min-width:1200px){#grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:719px){#grid{grid-template-columns:1fr}.actions button{height:48px;min-height:48px}.card .strip{height:62px}.card .statusbar{min-height:62px}}
@media(prefers-reduced-motion:reduce){.recording-timer,.waiting-banner,.driver-arrived{animation:none}}

.card.recording .statusbar.status-recording{background:#000;color:#fff}

.card button.ready{background:#4f46e5;border-color:#4f46e5;color:#fff}.card button.ready:disabled{background:#d1d5db;border-color:#d1d5db;color:#111827}
#grid{overflow-anchor:none}html{scroll-behavior:auto}#camera-message{min-height:48px}#recording-status{min-height:44px;margin:10px 0;padding:10px}#message{min-height:48px}#server-overlay-status{min-height:24px}

html{overflow-anchor:none}.card.recording .statusbar{position:relative}.card.recording .recording-timer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;margin:0}.card.recording .status-left{flex:initial;width:calc(50% - 44px)}.card.recording .status-time{margin-left:auto}

.card.recording{border-width:1px;outline:2px solid #ef4444;outline-offset:-1px}@media(max-width:719px){.card.recording .status-label{font-size:12px}}
/* Status and its timestamp share row one; date and recording duration share row two. */
.statusbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(23px,auto) 21px;gap:2px 8px;align-items:center}
.status-left,.card.recording .status-left{display:contents;width:auto}
.status-label{grid-column:1;grid-row:1;line-height:1.15;align-self:center}
.status-date{grid-column:1;grid-row:2;margin-top:0;line-height:1.15;align-self:center}
.status-time,.card.recording .status-time{grid-column:2;grid-row:1;justify-self:end;margin:0;line-height:1.15}
.card.recording .recording-timer{position:static;transform:none;left:auto;top:auto;grid-column:1 / -1;grid-row:2;justify-self:center;align-self:center;line-height:21px}

.card.recording .recording-timer{grid-column:2;grid-row:2;justify-self:end;text-align:right}

/* One compact collapsed height; the waiting notice uses the existing footer. */
.card{height:224px;min-height:224px}.card.expanded{height:auto}.statusbar{height:62px;min-height:62px;grid-template-rows:23px 21px}.status-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-footer{height:40px;min-height:40px;padding:8px 12px 12px;display:flex;align-items:center;justify-content:flex-end;line-height:20px}.card-footer.has-waiting{justify-content:center}.waiting-banner{height:20px;min-height:20px;padding:0;gap:6px;line-height:20px;font-size:14px;flex-wrap:nowrap;white-space:nowrap}

@media(max-width:719px){.card{height:228px;min-height:228px}.card.expanded{height:auto}}


/* A small red trail follows the existing rounded border; layout is unchanged. */
@property --recording-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.recording-ring{position:absolute;inset:0;border-radius:inherit;padding:3px;pointer-events:none;z-index:2;background:conic-gradient(from var(--recording-angle),transparent 0deg 300deg,#ef4444 300deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:recording-outline 2.48s linear infinite}
@keyframes recording-outline{0%{--recording-angle:0deg}48.3871%,51.6129%{--recording-angle:180deg}100%{--recording-angle:360deg}}
@media(prefers-reduced-motion:reduce){.recording-ring{animation:none;background:#ef4444}}

.card-footer{position:relative}.waiting-total{position:absolute;right:12px;bottom:3px;display:flex;gap:3px;font-size:10px;line-height:11px;color:#64748b;font-weight:400;white-space:nowrap}

/* Total time retains the same font and right-edge position in every phase. */
.card-footer.has-waiting{justify-content:space-between;gap:8px}.card-footer.has-waiting .waiting-banner{flex:1;min-width:0}.waiting-total{position:static;right:auto;bottom:auto;flex:0 0 auto;font-size:inherit;line-height:inherit;color:inherit}
@media(max-width:400px),(min-width:720px) and (max-width:979px){.card-footer.has-waiting .waiting-banner{font-size:11px;gap:4px}}

.card.recording .recording-timer{grid-column:1;grid-row:2;justify-self:start;text-align:left}

.card.recording{border-color:#cbd5e1;outline:none;box-shadow:0 6px 18px rgba(2,6,23,.08)}.card.awaiting-driver{border-color:#059669;outline:2px solid #059669;outline-offset:-1px}

/* Subtle steady glow makes waiting cards easier to distinguish. */
.card.awaiting-driver{box-shadow:0 0 10px 2px rgba(5,150,105,.25),0 6px 18px rgba(2,6,23,.08)}

/* The existing camera pill is the hidden settings entry. */
button#camera-light{min-height:0;font-weight:400;cursor:pointer;touch-action:manipulation;user-select:none}
.settings-page{width:min(720px,96vw);padding:24px}.settings-page h2{margin:0}.settings-page .dialog-heading{gap:16px;margin-bottom:24px}.settings-fields{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px 16px;align-items:center}.settings-fields input,.settings-fields select{width:100%;min-width:0}.settings-hint{font-size:14px;color:#64748b}.settings-store{margin-top:28px;padding-top:20px;border-top:1px solid #e2e8f0}.settings-store h3{margin:0 0 10px;font-size:18px}#settings-message{font-size:14px;line-height:1.4}
@media(max-width:719px){.settings-page{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0;padding:20px}.settings-fields{grid-template-columns:1fr;gap:8px}.settings-fields input,.settings-fields select{margin-bottom:10px}.settings-page .dialog-heading{align-items:flex-start}.settings-page .dialog-heading button{font-size:14px}}

/* Packing home and full settings pages. */
body{background:#eef2f6}.staging{font-size:11px;padding:5px;background:#e2e8f0;color:#475569;letter-spacing:.12em}main{max-width:1600px;padding:20px}.app-header{background:#fff;border:1px solid #dce3ec;border-radius:16px;padding:16px 20px;margin-bottom:16px}.brand{width:260px;max-width:48vw;height:auto}.app-header .connection{font-size:13px;color:#64748b;margin:6px 0 0}#training-banner{border:1px solid #fbbf24;border-radius:10px;background:#fffbeb;color:#92400e;font-weight:800;padding:10px 16px;margin:0 0 12px;display:flex;gap:12px;align-items:center}#training-banner span{font-weight:400;font-size:13px}.home-tools{justify-content:space-between;margin:0 0 12px}.home-tabs{display:flex;gap:8px}#order-count{font-size:13px;color:#64748b}#message{min-height:24px;margin:8px 0;font-size:14px}#message:empty{visibility:hidden}#recording-status:empty{display:none}#recording-status{min-height:0}#server-overlay-status{font-size:13px;margin:8px 0}#server-overlay-status:not(.error){color:#64748b}.settings-shell{max-width:900px;margin:auto}.settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.settings-head h1{font-size:28px}.settings-tabs{display:flex;gap:8px;border-bottom:1px solid #cbd5e1;padding-bottom:12px;margin:0 0 20px}.settings-tabs button{flex:1}.stack{display:grid;gap:10px;max-width:540px}.stack label{font-weight:700}.stack input,.stack select{width:100%}.stack p{font-size:13px;color:#64748b}.stack button{justify-self:start}.settings-shell section{margin:0 0 18px}.settings-shell .controls{margin:10px 0}.camera-panel select#camera{max-width:100%;width:100%}.camera-heading{margin-bottom:12px}.camera-heading span{font-size:12px}#camera-message{min-height:36px}.preview-wrap{display:block}#preview-frame{width:100%;max-width:640px;aspect-ratio:16/9;background:#020617;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:14px 0}#preview-frame.portrait{aspect-ratio:9/16;max-width:360px}#preview{max-height:none;width:100%;height:100%;object-fit:contain;border-radius:0}#preview-frame.portrait #preview{width:177.78%;height:56.25%;max-width:none;flex-shrink:0}.camera-sentry{position:fixed;left:-10000px;top:0;width:640px;height:360px;pointer-events:none;overflow:hidden;opacity:.01}.camera-sentry .camera-panel{width:640px}.switch-row{display:flex;align-items:center;gap:14px;font-size:20px;font-weight:800}.switch-row input{width:28px;height:28px}.hint{font-size:13px;color:#64748b}.training-badge{color:#92400e}#startup-splash{position:fixed;inset:0;background:#fff;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}#startup-splash img{max-width:70vw;width:540px}.live-indicator{background:#eff6ff;border:1px solid #93c5fd;color:#1e40af;font-size:13px;padding:8px 14px;border-radius:8px;margin-bottom:12px}.admin-shell{max-width:1100px}.admin-shell header{margin-bottom:24px}.admin-shell h1{font-size:26px;margin-bottom:16px}.admin-row{display:grid;grid-template-columns:1fr auto;gap:8px;border-top:1px solid #e2e8f0;padding:16px 0}.admin-row span{grid-column:1;font-size:13px;color:#64748b}.admin-row button{grid-column:2;grid-row:1/3}#live-frame{max-width:640px;max-height:60vh;width:100%;background:#020617;border-radius:10px}#sound-preview{width:100%;margin-top:20px}summary{cursor:pointer;font-weight:700;padding:10px 0}.admin-shell details{margin-top:20px}button.ready{background:#7c3aed;border-color:#7c3aed;color:#fff}#grid .card button.ready{background:#7c3aed;border-color:#7c3aed}#grid .card button.ready:disabled{background:#d1d5db;border-color:#d1d5db;color:#111827}
@media(max-width:700px){main{padding:12px}.app-header{padding:14px}.app-header .brand{width:230px;max-width:70vw}.app-header .controls{gap:6px}.app-header .controls button{font-size:12px;padding:8px 10px}.settings-tabs{gap:5px}.settings-tabs button{font-size:13px;padding:8px}.home-tools{gap:10px}#training-banner{flex-wrap:wrap;gap:4px}.admin-row{grid-template-columns:1fr}.admin-row button{grid-column:1;grid-row:auto;justify-self:start}.brand{max-width:65vw}}

.camera-panel .stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:6px 12px}.camera-panel .stack label{grid-row:1;font-size:13px}.camera-panel .stack select{grid-row:2;max-width:100%;font-size:14px}.camera-panel .stack label[for=camera],.camera-panel .stack #camera{grid-column:1}.camera-panel .stack label[for=quality],.camera-panel .stack #quality{grid-column:2}.camera-panel .stack label[for=rotation],.camera-panel .stack #rotation{grid-column:3}#camera-message{font-size:14px;min-height:24px}.preview-wrap{margin-top:8px}#preview-frame{margin:8px 0}.camera-panel .hint{margin-bottom:0}@media(max-width:600px){.camera-panel .stack{grid-template-columns:repeat(2,minmax(0,1fr))}.camera-panel .stack label[for=camera]{grid-row:1;grid-column:1/3}.camera-panel .stack #camera{grid-row:2;grid-column:1/3}.camera-panel .stack label[for=quality]{grid-row:3;grid-column:1}.camera-panel .stack #quality{grid-row:4;grid-column:1}.camera-panel .stack label[for=rotation]{grid-row:3;grid-column:2}.camera-panel .stack #rotation{grid-row:4;grid-column:2}}

/* Compact packing toolbar: keep the touch targets without a separate navigation row. */
#packing-page .app-header{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:6px 10px;margin-bottom:8px;border-radius:10px}
.brand-block{flex:0 0 auto;min-width:0}.app-header .brand{display:block;width:170px;max-width:100%;height:auto}.brand-caption{display:flex;align-items:center;gap:6px;margin-top:1px}.stage-label{font-size:9px;font-weight:800;color:#64748b;letter-spacing:.04em}.app-header .connection{font-size:10px;line-height:13px;margin:0;white-space:nowrap}
#packing-page .header-tools{flex:1;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;width:auto;margin:0}
#packing-page .header-tools button,#packing-page .header-tools input{min-height:44px;padding:7px 10px;font-size:13px;line-height:18px;border-radius:8px}#packing-page .header-tools #camera-light{display:flex;border-radius:999px;gap:6px;padding:7px 10px;min-height:44px;font-size:12px}#camera-light .dot{width:10px;height:10px;flex-shrink:0}#order-count{font-size:11px;white-space:nowrap}#history-date{width:145px}#date-label{font-size:12px}
#training-banner{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,2fr) minmax(max-content,1fr);align-items:center;gap:8px;padding:5px 10px;margin-bottom:8px;min-height:54px}#training-banner strong{font-size:13px}#training-camera-hint{grid-column:2;text-align:center;line-height:18px;font-weight:400;font-size:13px}#training-banner #demo{grid-column:3;justify-self:end;min-height:44px;padding:7px 12px;font-size:13px;white-space:nowrap}
#message:empty{display:none}#message{min-height:0;margin:6px 0;font-size:13px}#grid{margin-bottom:12px}#settings-store #queue-panel{margin-top:12px;padding:12px}#settings-store #queue-panel h2{font-size:16px}
main{padding:8px 12px}
@media(max-width:900px){#packing-page .app-header{gap:6px}.app-header .brand{width:145px}#packing-page .header-tools{gap:4px}#packing-page .header-tools button{font-size:12px;padding:7px 8px}#order-count{display:none}}
@media(max-width:600px){#packing-page .app-header .header-tools{flex-basis:100%;justify-content:flex-start}#training-banner{grid-template-columns:1fr auto;gap:3px 8px}#training-banner strong{grid-column:1;grid-row:1}#training-banner #demo{grid-column:2;grid-row:1}#training-camera-hint{grid-column:1 / -1;grid-row:2}#camera-light #camera-status{font-size:11px}}