/* UK Data Services brand tokens, lifted from the ukdataservices.co.uk stylesheet. */
@font-face { font-family:"Bricolage Grotesque"; src:url(fonts/BricolageGrotesque-variable.woff2) format("woff2"); font-weight:200 800; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url(fonts/InstrumentSans-variable.woff2) format("woff2"); font-weight:400 700; font-display:swap; }

:root {
  --paper:#FAFAFA; --surface:#FFFFFF; --line:#E0E0E0; --line-strong:#C9CED6;
  --ink:#16233A; --muted:#4A5568;
  --navy:#144784; --navy-deep:#0E3260; --navy-tint:#EAF0F8;
  --ok:#1A7F37; --warn:#9A5B00; --bad:#B42318; --bad-tint:#FDECEA;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px;
  --r-sm:8px; --r-md:12px;
  --shadow:0 1px 2px rgba(22,35,58,.06), 0 4px 16px rgba(22,35,58,.06);
  --font-head:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:"Instrument Sans", system-ui, sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.5 var(--font-body); -webkit-font-smoothing:antialiased; }
h1, h2 { font-family:var(--font-head); line-height:1.15; margin:0; letter-spacing:-.01em; }
h2 { font-size:32px; font-weight:700; margin-bottom:var(--s2); }
p { margin:0 0 var(--s3); color:var(--muted); text-wrap:pretty; }
a { color:var(--navy); }

/* header */
header { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:0 var(--s4); min-height:64px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; }
.brand { display:flex; align-items:center; gap:var(--s3); }
.brand img { display:block; height:30px; width:auto; }
.brand h1 { font-size:18px; font-weight:600; color:var(--muted); padding-left:var(--s3); border-left:1px solid var(--line-strong); }
nav { display:flex; gap:var(--s1); }
nav .tab { margin:0; width:auto; min-height:64px; padding:0 var(--s3); background:none; border:0; border-bottom:3px solid transparent; border-radius:0; font:600 16px var(--font-body); color:var(--muted); cursor:pointer; transition:color .2s ease, border-color .2s ease; }
nav .tab:hover { color:var(--navy); background:none; border-color:transparent; }
nav .tab.active:hover { border-color:var(--navy); }
nav .tab.active { color:var(--navy); border-bottom-color:var(--navy); }

.pane { padding:var(--s5) var(--s4) var(--s6); max-width:640px; margin:0 auto; }
#pane-check { max-width:960px; }
#pane-check h2 { margin-bottom:var(--s4); }

/* form controls */
label { display:block; font-weight:600; font-size:15px; margin:var(--s4) 0 var(--s2); }
textarea, input[type=password], input[type=text] { width:100%; font:inherit; color:var(--ink); background:var(--surface); padding:14px var(--s3); border:1.5px solid var(--line-strong); border-radius:var(--r-md); min-height:52px; transition:border-color .2s ease, box-shadow .2s ease; }
textarea:focus, input:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(20,71,132,.18); }
textarea:focus-visible, input:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
#barcode { font-size:28px; font-weight:600; letter-spacing:.06em; min-height:72px; font-variant-numeric:tabular-nums; }
#barcode::placeholder { font-size:20px; font-weight:400; letter-spacing:0; color:#6B7686; }

button, .primary, .secondary { display:block; width:100%; font:600 17px var(--font-body); min-height:52px; border-radius:var(--r-md); border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); padding:12px var(--s3); margin-top:var(--s3); text-align:center; text-decoration:none; cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
button:hover, .secondary:hover { border-color:var(--navy); background:var(--navy-tint); }
button:active, .primary:active { transform:translateY(1px); }
button:focus-visible, .primary:focus-visible, .secondary:focus-visible, nav .tab:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
button:disabled:hover { background:var(--surface); border-color:var(--line-strong); }
.primary { background:var(--navy); color:#fff; border-color:var(--navy); }
.primary:hover { background:var(--navy-deep); border-color:var(--navy-deep); }
button.primary:disabled:hover { background:var(--navy); border-color:var(--navy); }
.primary.big { font-size:20px; min-height:64px; }
label.primary.big { display:block; }
.secondary { background:var(--surface); }
.danger { background:var(--bad); color:#fff; border-color:var(--bad); }
.danger:hover { background:#8E1B12; border-color:#8E1B12; }

/* scan screen */
.scan-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:var(--s4); }
.scan-card label:first-of-type { margin-top:0; }
.optional { margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line); }
.optional h3 { font:700 16px var(--font-head); margin:0 0 var(--s1); }
.optional p { font-size:15px; margin-bottom:var(--s3); }
.add-photo { display:inline-block; width:auto; margin:0; padding:10px var(--s3); border:1.5px dashed var(--line-strong); border-radius:var(--r-md); font-weight:600; font-size:15px; color:var(--navy); cursor:pointer; transition:background .2s ease, border-color .2s ease; }
.add-photo:hover, #file:focus-visible + .add-photo { background:var(--navy-tint); border-color:var(--navy); }
.thumbs { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.thumbs:empty { display:none; }
.thumbs img { width:72px; height:72px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--line); }
.linklike { width:auto; display:inline-block; margin:var(--s4) 0 0; min-height:44px; padding:8px 0; background:none; border:0; color:var(--navy); text-decoration:underline; text-underline-offset:3px; font-weight:500; }
.linklike:hover { background:none; text-decoration-thickness:2px; }
.linklike:disabled { color:var(--muted); text-decoration:none; opacity:.75; }
.linklike:disabled:hover { background:none; }

/* check screen */
.check-grid { display:grid; gap:var(--s4); grid-template-columns:1fr; align-items:start; }
@media (min-width:860px) { .check-grid { grid-template-columns:360px 1fr; gap:var(--s5); } .side { position:sticky; top:88px; } }
.shot { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.shot img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.price-big { font:800 52px var(--font-head); color:var(--navy); text-align:center; margin:var(--s2) 0 var(--s3); font-variant-numeric:tabular-nums; }
.side label:first-of-type { margin-top:var(--s3); }
.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:var(--s2); }
.choices button { margin:0; min-height:56px; padding:10px 6px; white-space:nowrap; }
#price { grid-template-columns:repeat(3,1fr); }
.choices button span { display:block; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.choices button.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.choices button.on::before { content:"\2713\00a0"; }
.bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:var(--s2); }
.bar div { height:100%; width:0; background:var(--ok); transition:width .2s ease; }
.bar div.warn { background:var(--warn); } .bar div.bad { background:var(--bad); }
.toggle { display:flex; align-items:center; gap:var(--s3); min-height:52px; font-weight:500; cursor:pointer; }
.toggle input { width:24px; height:24px; accent-color:var(--navy); }

.banner { margin:var(--s3) auto 0; width:calc(100% - 2 * var(--s4)); max-width:592px; padding:14px var(--s3); border-radius:var(--r-md); background:var(--bad-tint); border:1px solid #F1B8B2; color:var(--bad); font-weight:600; }

.spinner { width:48px; height:48px; border:5px solid var(--line); border-top-color:var(--navy); border-radius:50%; margin:var(--s6) auto var(--s4); animation:spin 1s linear infinite; }
#pane-busy p { text-align:center; font-weight:500; }
@keyframes spin { to { transform:rotate(360deg); } }
.done-mark { width:56px; height:56px; border-radius:50%; background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; margin-bottom:var(--s3); }

.listed { list-style:none; padding:0; margin:var(--s3) 0 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.listed li { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; padding:var(--s3); border-bottom:1px solid var(--line); }
.listed li:last-child { border-bottom:0; }
.listed img { width:64px; height:64px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--line); }
.listed a { font-weight:600; text-decoration:none; }
.listed a:hover { text-decoration:underline; }
.listed .price { margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); width:100%; margin-top:var(--s2); }
.actions button { margin:0; }
.actions > :only-child { grid-column:1 / -1; }
.sr-only { position:absolute; left:-9999px; }
.vh { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }

@media (max-width:560px) { header { padding:0 var(--s3); } .brand h1 { display:none; } .pane { padding:var(--s4) var(--s3) var(--s5); } h2 { font-size:28px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }