:root {
  --ink: #17232c;
  --ink-soft: #4b5c67;
  --glass: #e3ebee;
  --glass-deep: #c9d7dd;
  --paper: #ffffff;
  --beam: #0e7c86;
  --beam-dark: #0a5d65;
  --ok: #2d7a4f;
  --review: #8f5600;
  --fail: #b3261e;
  --line: #b4c3ca;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--glass);
  color: var(--ink);
  font: 1rem/1.5 var(--sans);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--beam); outline-offset: 2px; }

.top { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 0.5rem; }
.top h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
.top p { margin: 0.25rem 0 0; color: var(--ink-soft); max-width: 40rem; }

.bench {
  display: grid;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}
@media (min-width: 56rem) {
  .bench { grid-template-columns: minmax(20rem, 5fr) 7fr; align-items: start; }
}

/* ---- scanner sheet ------------------------------------------------ */
.sheet {
  position: relative;
  background: var(--paper);
  border-radius: 4px;
  padding: 2rem 1.5rem;
  box-shadow: 0 1px 0 var(--glass-deep), 0 12px 28px -18px rgba(23, 35, 44, 0.45);
  transition: outline-color 120ms;
  outline: 2px dashed transparent;
  outline-offset: -10px;
}
.sheet.is-over { outline-color: var(--beam); background: #f4fbfb; }

.mark { position: absolute; width: 1.1rem; height: 1.1rem; border: 0 solid var(--ink); }
.mark.tl { top: 0.6rem; left: 0.6rem; border-width: 2px 0 0 2px; }
.mark.tr { top: 0.6rem; right: 0.6rem; border-width: 2px 2px 0 0; }
.mark.bl { bottom: 0.6rem; left: 0.6rem; border-width: 0 0 2px 2px; }
.mark.br { bottom: 0.6rem; right: 0.6rem; border-width: 0 2px 2px 0; }

.view { min-height: 15rem; display: flex; flex-direction: column; justify-content: center; }
.drop-title { margin: 0; font: 600 1.5rem/1.25 var(--serif); }
.drop-hint { margin: 0.25rem 0 1.25rem; color: var(--ink-soft); }
.formats { margin: 1rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.1rem;
  border: 1.5px solid var(--ink); border-radius: 4px;
  background: transparent; color: var(--ink);
  font: 600 1rem/1 var(--sans); cursor: pointer;
}
.btn:hover { background: var(--glass); }
.btn.primary { background: var(--beam); border-color: var(--beam); color: #fff; }
.btn.primary:hover { background: var(--beam-dark); border-color: var(--beam-dark); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.small { min-height: 2.25rem; padding: 0 0.8rem; font-size: 0.875rem; }

.frame-wrap { position: relative; overflow: hidden; margin-bottom: 1rem; background: var(--glass); }
.frame { display: block; width: 100%; max-height: 26rem; object-fit: contain; background: #0f1a21; }
.frame-wrap .frame { background: var(--glass); }
video.frame { margin-bottom: 1rem; }

.file-tile {
  display: flex; align-items: center; gap: 0.75rem; min-height: 9rem; padding: 1rem;
  border: 1.5px solid var(--line); background: var(--paper);
}
.file-kind {
  display: inline-grid; place-items: center; min-width: 3rem; height: 3.75rem; padding: 0 0.4rem;
  border: 1.5px solid var(--ink); font: 700 0.875rem/1 var(--sans);
}
.file-name { overflow-wrap: anywhere; font-weight: 600; }

/* the scan beam: shown only while the server is working */
.beam {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: 0; pointer-events: none;
  background: var(--beam);
  box-shadow: 0 0 14px 4px rgba(14, 124, 134, 0.55);
}
.sheet[data-scanning="true"] .beam { opacity: 1; animation: sweep 1.6s ease-in-out infinite alternate; }
@keyframes sweep { from { top: 0; } to { top: calc(100% - 3px); } }
@media (prefers-reduced-motion: reduce) {
  .sheet[data-scanning="true"] .beam { animation: none; top: 50%; }
}

.key { margin-top: 1rem; color: var(--ink-soft); font-size: 0.9375rem; }
.key summary { cursor: pointer; width: fit-content; }
.key label { display: block; margin: 0.5rem 0 0.25rem; }
.key input {
  width: 100%; max-width: 22rem; min-height: 2.5rem; padding: 0 0.6rem;
  border: 1.5px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink);
  font: 1rem var(--sans);
}

/* ---- result record ------------------------------------------------ */
.record {
  background: var(--paper); border-radius: 4px; padding: 1.5rem;
  box-shadow: 0 1px 0 var(--glass-deep), 0 12px 28px -18px rgba(23, 35, 44, 0.45);
  min-height: 12rem;
}
.record h2 { margin: 0 0 1rem; font-size: 1rem; color: var(--ink-soft); font-weight: 600; }
.empty { margin: 0; color: var(--ink-soft); max-width: 34rem; }
.working { margin: 0; color: var(--ink-soft); }

.verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin: 0 0 0.25rem; }
.doc-type { margin: 0; font: 600 2rem/1.15 var(--serif); overflow-wrap: anywhere; }
.badge {
  display: inline-block; padding: 0.15rem 0.6rem; border: 1.5px solid currentColor; border-radius: 3px;
  font-weight: 700; font-size: 0.9375rem;
}
.badge.ok { color: var(--ok); }
.badge.review { color: var(--review); }
.badge.fail { color: var(--fail); }
.note { margin: 0.25rem 0 1rem; }
.note.review { color: var(--review); }
.note.fail { color: var(--fail); }

dl.facts { margin: 1rem 0 0; }
.row { display: grid; gap: 0.15rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--glass-deep); }
@media (min-width: 40rem) { .row { grid-template-columns: 9.5rem 1fr; } }
.row dt { color: var(--ink-soft); font-size: 0.9375rem; }
.row dd { margin: 0; max-width: 42rem; overflow-wrap: anywhere; }
.row .inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9375rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.chip { padding: 0.1rem 0.55rem; background: var(--glass); border-radius: 999px; font-size: 0.875rem; }
.chip.verified, .chip.confirmed { color: var(--ok); }
.chip.uncertain { color: #8a5a00; background: #fbf0d9; }

.raw { margin-top: 1rem; border-top: 1px solid var(--glass-deep); padding-top: 0.75rem; }
.raw summary { cursor: pointer; width: fit-content; color: var(--ink-soft); }
.raw pre {
  margin: 0.75rem 0 0; padding: 0.75rem; max-height: 22rem; overflow: auto;
  background: #0f1a21; color: #dbe7ec; font: 0.8125rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.error { margin: 0; color: var(--fail); font-weight: 600; max-width: 34rem; }
.error-hint { margin: 0.5rem 0 0; color: var(--ink-soft); max-width: 34rem; }

.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
.check.good { color: var(--ok); }
.check.bad { color: var(--fail); font-weight: 600; }