/* PageScan — flat design system.
   Hierarchy comes from scale, weight and solid colour blocks. There are no
   box shadows, no bevels and no gradients on components; depth cues are
   replaced by contrast and by decorative geometry sitting behind content. */

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --fg: #111827;
  /* Dark enough that white type on a fill clears WCAG AA. */
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --secondary: #047857;
  --secondary-dark: #065F46;
  --accent: #F59E0B;
  --muted: #F3F4F6;
  --border: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-500: #4B5563;
  --gray-700: #374151;

  --radius: 8px;
  --radius-sm: 6px;
  --wrap: 1280px;
  --step: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.band :focus-visible, .topbar :focus-visible, .stage :focus-visible {
  outline-color: #FFFFFF;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; width: 100%; }
.is-hidden { display: none !important; }

.skip {
  position: absolute; left: 12px; top: 12px; z-index: 10;
  transform: translateY(-160%);
  background: #FFFFFF; color: var(--fg); text-decoration: none;
  font-weight: 700; padding: 8px 12px; border-radius: var(--radius-sm);
}
.skip:focus { transform: none; }

/* ------------------------------- top bar ------------------------------- */

.topbar { background: var(--fg); color: #FFFFFF; }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 76px;
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
/* A miniature QR finder pattern: the app's whole idea in 26 pixels. */
.brand__mark {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--primary); position: relative; flex: none;
}
.brand__mark::after {
  content: ''; position: absolute; inset: 7px;
  background: #FFFFFF; border-radius: 2px;
}
.brand__word { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }

.modes { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.1); padding: 4px; border-radius: var(--radius); }
.mode {
  border: 0; background: transparent; color: rgba(255, 255, 255, 0.82);
  padding: 10px 22px; border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 600; letter-spacing: 0.01em; text-decoration: none; text-align: center;
  display: inline-block;
  transition: background var(--step), color var(--step), transform var(--step);
}
.mode:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.14); }
.mode.is-active { background: var(--primary); color: #FFFFFF; }
.mode.is-active:hover { background: var(--primary-dark); }

/* -------------------------------- bands -------------------------------- */

.band { position: relative; overflow: hidden; color: #FFFFFF; padding: 64px 0 72px; }
.band--primary { background: var(--primary); }
.band--secondary { background: var(--secondary); }

.band__inner { position: relative; z-index: 1; }
.band__eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px;
  font-weight: 600; margin-bottom: 14px;
}
.band__title { font-size: clamp(34px, 6vw, 60px); margin-bottom: 20px; }
.band__lead { max-width: 56ch; font-size: 18px; line-height: 1.5; }
.band__next { margin-top: 22px; font-size: 16px; font-weight: 700; }
.band__next a { color: #FFFFFF; text-underline-offset: 3px; }
.crumb {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; font-size: 14px; font-weight: 600;
}
.crumb a { color: #FFFFFF; text-underline-offset: 3px; }
.crumb [aria-current="page"] { color: #FFFFFF; }

/* Flat geometry behind the type — poster decoration, never depth. */
.band__shape { position: absolute; background: rgba(255, 255, 255, 0.09); pointer-events: none; }
.band__shape--circle { width: 420px; height: 420px; border-radius: 50%; right: -110px; top: -160px; }
.band__shape--square { width: 260px; height: 260px; border-radius: 16px; right: 240px; bottom: -150px; transform: rotate(24deg); }

/* ------------------------------- layout -------------------------------- */

.layout {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 24px; padding-top: 40px; padding-bottom: 64px; align-items: start;
}
.controls { grid-column: span 5; background: var(--muted); border-radius: var(--radius); padding: 28px; min-width: 0; }
.stage { grid-column: span 7; background: var(--fg); border-radius: var(--radius); padding: 32px; min-width: 0; }
.results { grid-column: span 7; min-width: 0; }

/* ------------------------------- groups -------------------------------- */

.group { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.group:last-of-type { margin-bottom: 22px; }
.group__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; padding: 0 0 12px;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 12px; font-weight: 600; color: var(--gray-500);
}
.group__value {
  font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--fg);
  text-transform: none; font-variant-numeric: tabular-nums;
}
.group__hint { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--gray-500); }

/* -------------------------------- tiles -------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  border: 0; background: #FFFFFF; border-radius: var(--radius-sm);
  padding: 10px 10px 12px; cursor: pointer; text-align: center;
  transition: background var(--step), color var(--step), transform var(--step);
}
.tile:hover { background: var(--border); transform: scale(1.04); }
.tile.is-active { background: var(--primary); color: #FFFFFF; }
.tile.is-active:hover { background: var(--primary-dark); }
.tile__art {
  display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 3px;
  background: var(--muted); overflow: hidden;
  transition: background var(--step);
}
.tile.is-active .tile__art { background: rgba(255, 255, 255, 0.16); }
.tile__name { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }

/* ------------------------------ segments ------------------------------- */

.segments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.segments--two { grid-template-columns: repeat(2, 1fr); }
.segment {
  border: 0; background: #FFFFFF; color: var(--fg); border-radius: var(--radius-sm);
  padding: 13px 8px; cursor: pointer; font-weight: 600; font-size: 14px;
  transition: background var(--step), color var(--step), transform var(--step);
}
.segment:hover { background: var(--border); transform: scale(1.04); }
.segment.is-active { background: var(--primary); color: #FFFFFF; }
.segment.is-active:hover { background: var(--primary-dark); }

/* ------------------------------ swatches ------------------------------- */

.swatches { display: flex; gap: 8px; }
.swatch {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; background: #FFFFFF; border-radius: var(--radius-sm);
  padding: 12px 6px; cursor: pointer; font-weight: 600; font-size: 13px;
  transition: background var(--step), color var(--step), transform var(--step);
}
.swatch:hover { background: var(--border); transform: scale(1.04); }
.swatch.is-active { background: var(--fg); color: #FFFFFF; }
.swatch__dot { width: 14px; height: 14px; border-radius: 3px; flex: none; }

/* ------------------------------- slider -------------------------------- */

.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
  background: var(--gray-300); border-radius: 2px; cursor: pointer; }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  background: var(--primary); border-radius: var(--radius-sm); border: 0; cursor: pointer;
  transition: background var(--step), transform var(--step);
}
.slider::-webkit-slider-thumb:hover { background: var(--primary-dark); transform: scale(1.12); }
.slider::-moz-range-thumb {
  width: 22px; height: 22px; background: var(--primary);
  border-radius: var(--radius-sm); border: 0; cursor: pointer;
}
.slider::-moz-range-track { height: 8px; background: var(--gray-300); border-radius: 2px; }

/* ------------------------------ checkbox ------------------------------- */

.check { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.4; }
.check + .check { margin-top: 10px; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 22px; height: 22px; flex: none; border-radius: 5px;
  border: 2px solid var(--gray-300); background: #FFFFFF; position: relative;
  transition: background var(--step), border-color var(--step);
}
.check input:checked + .check__box { background: var(--primary); border-color: var(--primary); }
.check input:checked + .check__box::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #FFFFFF; border-width: 0 2.5px 2.5px 0; transform: rotate(43deg);
}
.check input:focus-visible + .check__box { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ------------------------------- stepper ------------------------------- */

.stepper { display: flex; gap: 6px; }
.stepper__btn {
  width: 52px; border: 0; background: #FFFFFF; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 22px; font-weight: 600; line-height: 1;
  transition: background var(--step), transform var(--step);
}
.stepper__btn:hover { background: var(--border); transform: scale(1.06); }
.stepper__input {
  flex: 1; border: 0; background: #FFFFFF; border-radius: var(--radius-sm);
  padding: 13px 14px; text-align: center; font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.stepper__input:focus { background: #FFFFFF; outline: 3px solid var(--primary); outline-offset: 0; }
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------- buttons ------------------------------- */

.actions { display: grid; gap: 10px; margin-top: 28px; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  min-height: 58px; padding: 0 22px;
  font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  transition: background var(--step), color var(--step), transform var(--step);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--sm { min-height: 46px; font-size: 14px; padding: 0 18px; }

.btn--primary { background: var(--primary); color: #FFFFFF; }
.btn--primary:hover:not(:disabled) { background: var(--primary-dark); transform: scale(1.03); }

.btn--secondary { background: #FFFFFF; color: var(--fg); }
.btn--secondary:hover:not(:disabled) { background: var(--border); transform: scale(1.03); }

.btn--outline {
  background: transparent; color: var(--primary);
  box-shadow: inset 0 0 0 4px var(--primary);  /* a flat border, not depth */
}
.btn--outline:hover:not(:disabled) { background: var(--primary); color: #FFFFFF; transform: scale(1.03); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.is-busy { pointer-events: none; opacity: 0.75; }

.note {
  margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--gray-700);
  background: #FFFFFF; border-radius: var(--radius-sm); padding: 14px 16px;
}
.note strong { font-weight: 700; }

/* -------------------------------- stage -------------------------------- */

.stage__paper {
  background: #FFFFFF; border-radius: 3px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; max-height: 74vh;
}
.stage__paper svg { display: block; max-height: 74vh; width: auto; }

.stage__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 20px; margin: 28px 0 0; color: #FFFFFF;
}
.stage__facts div { min-width: 0; }
.stage__facts dt {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  font-weight: 600; color: rgba(255, 255, 255, 0.55); margin-bottom: 4px;
}
.stage__facts dd { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
/* Multi-colour figures: each fact gets its own accent. */
.stage__facts div:nth-child(1) dd { color: #FFFFFF; }
.stage__facts div:nth-child(2) dd { color: #60A5FA; }
.stage__facts div:nth-child(3) dd { color: #34D399; }
.stage__facts div:nth-child(4) dd { color: #FBBF24; }

/* ------------------------------ dropzone ------------------------------- */

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; cursor: pointer;
  background: #FFFFFF; border-radius: var(--radius); padding: 40px 24px;
  box-shadow: inset 0 0 0 4px var(--border);
  transition: background var(--step), box-shadow var(--step), transform var(--step);
}
.dropzone:hover, .dropzone.is-over {
  background: #EFF6FF; box-shadow: inset 0 0 0 4px var(--primary); transform: scale(1.01);
}
.dropzone__icon { color: var(--primary); display: block; }
.dropzone__icon svg { width: 40px; height: 40px; }
.dropzone__title { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.dropzone__hint { font-size: 13px; color: var(--gray-500); }

/* ------------------------------- camera -------------------------------- */

.camera { position: relative; background: var(--fg); border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.camera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera__pips { position: absolute; inset: 18px; pointer-events: none; }
.camera__pips span {
  position: absolute; width: 30px; height: 30px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  transition: background var(--step), transform var(--step);
}
.camera__pips span.is-found { background: var(--secondary); transform: scale(1.15); }
.camera__pips [data-corner="TL"] { left: 0; top: 0; }
.camera__pips [data-corner="TR"] { right: 0; top: 0; }
.camera__pips [data-corner="BL"] { left: 0; bottom: 0; }
.camera__pips [data-corner="BR"] { right: 0; bottom: 0; }
.camera__status {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px;
  background: rgba(17, 24, 39, 0.82); color: #FFFFFF;
  font-size: 13px; font-weight: 600; text-align: center;
}
.camera__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 14px; }

/* The capture confirmation. An auto-capture happens without the user doing
   anything, so it has to announce itself loudly enough to be read from arm's
   length: the whole frame floods with colour, a tick lands in the middle, and
   it stays up for the whole cooldown rather than blinking past. */
.camera__confirm {
  position: absolute; inset: 0; display: flex; gap: 14px;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(4, 120, 87, 0.94); color: #FFFFFF;
  opacity: 0; visibility: hidden; transition: opacity var(--step), visibility var(--step);
}
.camera__confirm.is-bad { background: rgba(185, 28, 28, 0.94); }
.camera__confirm.is-on { opacity: 1; visibility: visible; }
.camera__confirm-badge {
  width: 92px; height: 92px; border-radius: 50%; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.4);
}
.camera__confirm.is-on .camera__confirm-badge { animation: pop 420ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
.camera__confirm-badge svg { width: 52px; height: 52px; stroke-width: 3.5; }
.camera__confirm.is-ok .camera__confirm-badge { color: var(--secondary-dark); }
.camera__confirm.is-bad .camera__confirm-badge { color: #DC2626; }
.camera__confirm-text {
  font-size: 19px; font-weight: 800; letter-spacing: -0.01em;
  text-align: center; padding: 0 24px; max-width: 22ch;
}
@keyframes pop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* The countdown line under the frame: the camera is deliberately not looking
   for a sheet while this is running, and saying so is the point. */
.camera__hint {
  margin: 10px 0 0; min-height: 22px; font-size: 13px; font-weight: 600;
  color: var(--gray-500); text-align: center;
}
.camera__hint.is-holding { color: var(--secondary-dark); }
.camera__hint.is-bad { color: #DC2626; }

@media (prefers-reduced-motion: reduce) {
  .camera__confirm.is-on .camera__confirm-badge { animation: none; transform: scale(1); }
}

/* ------------------------------- results ------------------------------- */

.results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.results__title { font-size: 26px; }
.results__count { font-size: 14px; font-weight: 600; color: var(--gray-500); }

.empty { background: var(--muted); border-radius: var(--radius); padding: 56px 32px; text-align: center; }
.empty__icon { color: var(--gray-300); display: block; margin-bottom: 12px; }
.empty__icon svg { width: 48px; height: 48px; }
.empty__title { font-size: 19px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.empty__text { font-size: 15px; color: var(--gray-500); max-width: 46ch; margin: 0 auto; line-height: 1.5; }

.pagelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pagecard {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 18px; align-items: center;
  background: var(--muted); border-radius: var(--radius); padding: 14px 16px;
  transition: background var(--step), transform var(--step);
}
/* A card that has just arrived. Two beats of green is long enough to catch
   out of the corner of your eye and short enough not to nag. */
.pagecard.is-new { animation: landed 1600ms ease-out 1; }
@keyframes landed {
  0% { background: #A7F3D0; transform: scale(1.015); }
  35% { background: #A7F3D0; transform: scale(1); }
  100% { background: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .pagecard.is-new { animation: none; background: #D1FAE5; }
}
.pagecard:hover { background: var(--border); }
.pagecard.is-dragging { opacity: 0.45; }
.pagecard.is-drop-target { background: #DBEAFE; }
.pagecard__thumb {
  width: 76px; background: #FFFFFF; border-radius: 3px; display: block;
  cursor: grab; height: auto;
}
.pagecard__body { min-width: 0; }
.pagecard__title {
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.pagecard__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; background: #FFFFFF; color: var(--gray-700);
}
.badge--ok { background: var(--secondary); color: #FFFFFF; }
.badge--warn { background: var(--accent); color: var(--fg); }
.pagecard__tools { display: flex; gap: 4px; }
.iconbtn {
  width: 38px; height: 38px; border: 0; border-radius: var(--radius-sm);
  background: #FFFFFF; color: var(--gray-700); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--step), color var(--step), transform var(--step);
}
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn:hover:not(:disabled) { background: var(--fg); color: #FFFFFF; transform: scale(1.08); }
.iconbtn--danger:hover:not(:disabled) { background: #DC2626; }
.iconbtn:disabled { opacity: 0.3; cursor: not-allowed; }

.log { margin-top: 16px; display: grid; gap: 6px; }
.log__line {
  font-size: 13px; font-weight: 500; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--muted); color: var(--gray-700);
}
.log__line--busy { background: #DBEAFE; color: #1E3A8A; }
.log__line--ok { background: #D1FAE5; color: #065F46; }
.log__line--warn { background: #FEF3C7; color: #78350F; }
.log__line--error { background: #FEE2E2; color: #991B1B; }

/* ------------------------------- footer -------------------------------- */

.footer { background: var(--fg); color: #FFFFFF; padding: 40px 0; margin-top: 0; }
.footer__inner { display: grid; gap: 6px; }
.footer__nav { display: flex; gap: 18px; margin-bottom: 8px; }
.footer__nav a { color: rgba(255, 255, 255, 0.82); font-weight: 700; text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__nav a[aria-current="page"] { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.footer__note { font-size: 14px; font-weight: 500; }
.footer__note--dim { color: rgba(255, 255, 255, 0.78); font-weight: 400; }
.footer code { background: rgba(255, 255, 255, 0.14); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.footer :focus-visible { outline-color: #FFFFFF; }

.noscript {
  margin: 0; padding: 14px 24px; text-align: center;
  background: #FEF3C7; color: #78350F; font-weight: 600;
}

/* ----------------------------- responsive ------------------------------ */

@media (max-width: 1080px) {
  .controls, .stage, .results { grid-column: span 12; }
  .stage__paper svg, .stage__paper { max-height: 62vh; }
  .band { padding: 48px 0 54px; }
  .band__shape--circle { width: 300px; height: 300px; right: -120px; top: -120px; }
  .band__shape--square { display: none; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .topbar__inner { min-height: 68px; gap: 12px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  .modes { margin-left: auto; }
  .brand__word { font-size: 18px; }
  .mode { padding: 9px 14px; font-size: 14px; }
  .controls, .stage { padding: 20px; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .segments { grid-template-columns: repeat(3, 1fr); }
  .segments--two { grid-template-columns: repeat(2, 1fr); }
  .swatches { display: grid; grid-template-columns: 1fr 1fr; }
  .pagecard { grid-template-columns: 56px 1fr; row-gap: 12px; }
  .pagecard__thumb { width: 56px; }
  .pagecard__tools { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
  .tile:hover, .segment:hover, .btn:hover, .swatch:hover, .iconbtn:hover,
  .stepper__btn:hover, .dropzone:hover { transform: none; }
}