/* Digipass Visitor Pass - built like an app, on both screens.
 *
 * Phone: a tab bar pinned to the bottom where thumbs are, large titles, full
 * width buttons, grouped list rows with inset dividers.
 * Desktop: the same shell in a centred column, the tabs moved up into the bar.
 *
 * Soft grey ground, white cards with real corner radius and a quiet shadow,
 * one accent - the Digipass indigo - on anything you can press.
 */

:root {
  color-scheme: light;

  --bg: #f1f2f7;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --surface-3: #eceef4;
  --line: #e7e9f0;
  --line-soft: #eef0f5;

  --text: #111319;
  --text-2: #3c414b;
  --muted: #6d7482;
  --faint: #9aa1af;

  --accent: #3936ef;
  --accent-press: #2b28cf;
  --accent-ink: #312ed8;
  --accent-wash: #eeeefe;

  --ok: #10794b;
  --ok-wash: #e8f6ee;
  --bad: #c02a20;
  --bad-wash: #fdeceb;
  --warn: #8a5a00;
  --warn-wash: #fcf2e2;

  --paper: #ffffff;
  --paper-ink: #111319;
  --paper-muted: #6d7482;
  --paper-line: #e7e9f0;

  --r-card: 18px;
  --r-ctl: 12px;
  --shadow: 0 1px 2px rgba(17, 19, 25, .05), 0 10px 26px -14px rgba(17, 19, 25, .22);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0b0c10;
    --surface: #16181f;
    --surface-2: #1c1f27;
    --surface-3: #242833;
    --line: #262a34;
    --line-soft: #21242d;

    --text: #f0f2f7;
    --text-2: #c9cedb;
    --muted: #949bab;
    --faint: #6b7283;

    --accent: #7b78ff;
    --accent-press: #918eff;
    --accent-ink: #a6a3ff;
    --accent-wash: #1e1d3d;

    --ok: #4ade80;
    --ok-wash: #10251b;
    --bad: #fb7185;
    --bad-wash: #2b1419;
    --warn: #fbbf24;
    --warn-wash: #2a2113;

    --paper: #f8f8f6;
    --paper-ink: #111319;
    --paper-muted: #6d7482;
    --paper-line: #e2e2de;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -16px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0c10;
  --surface: #16181f;
  --surface-2: #1c1f27;
  --surface-3: #242833;
  --line: #262a34;
  --line-soft: #21242d;

  --text: #f0f2f7;
  --text-2: #c9cedb;
  --muted: #949bab;
  --faint: #6b7283;

  --accent: #7b78ff;
  --accent-press: #918eff;
  --accent-ink: #a6a3ff;
  --accent-wash: #1e1d3d;

  --ok: #4ade80;
  --ok-wash: #10251b;
  --bad: #fb7185;
  --bad-wash: #2b1419;
  --warn: #fbbf24;
  --warn-wash: #2a2113;

  --paper: #f8f8f6;
  --paper-ink: #111319;
  --paper-muted: #6d7482;
  --paper-line: #e2e2de;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -16px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
        "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* ---- app bar ------------------------------------------------------------------ */

header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  padding-top: max(10px, env(safe-area-inset-top));
  /* No backdrop-filter here: it would make the header the containing block for
     the fixed tab bar inside it, pinning the tabs to the header's bottom edge
     instead of the screen's. The bar carries its own blur instead. */
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand img { height: 24px; width: auto; display: block; }
.brand .names { display: flex; flex-direction: column; line-height: 1.2; }
.brand .product { font-size: 15px; font-weight: 640; letter-spacing: -0.01em; }
.brand .family { font-size: 11.5px; color: var(--faint); }

/* Tabs: in the bar on a desktop, pinned to the bottom on a phone. */
header nav { display: flex; gap: 3px; margin-left: 18px; }
header nav a {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 550;
}
header nav a svg { display: none; }
header nav a:hover { background: var(--surface-2); color: var(--text); }
header nav a.active { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow); }

.themetoggle {
  margin-left: auto;
  width: 36px; height: 36px;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: var(--surface);
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  flex: none;
  box-shadow: var(--shadow);
}
.themetoggle:hover { color: var(--text); }
.themetoggle .moon { display: none; }
:root[data-theme="dark"] .themetoggle .moon { display: initial; }
:root[data-theme="dark"] .themetoggle .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle .sun { display: none; }
  :root:not([data-theme="light"]) .themetoggle .moon { display: initial; }
}

main { max-width: 860px; margin: 0 auto; padding: 8px 18px 48px; }

/* ---- titles and sections -------------------------------------------------------- */

.page-head { margin: 10px 0 20px; }
.page-head h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.page-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.page-head .label { display: none; }

.label {
  font-size: 12.5px;
  font-weight: 620;
  color: var(--faint);
  text-transform: none;
  letter-spacing: 0;
  margin: 22px 4px 8px;
  display: block;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grid > * { min-width: 0; }

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card p.hint { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
}

/* ---- grouped rows: the home screen ------------------------------------------------ */

.actions { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  position: relative;
}
/* Inset divider, the way a grouped list does it. */
.action + .action::before {
  content: "";
  position: absolute;
  left: 68px; right: 0; top: 0;
  height: 1px;
  background: var(--line-soft);
}
.action:active { background: var(--surface-2); }
.action .icon {
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.action .text { min-width: 0; }
.action strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.action span { color: var(--muted); font-size: 13.5px; }
.action .chev { margin-left: auto; color: var(--faint); flex: none; }

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

.videowrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0b0e;
}

video, img.preview {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #0a0b0e;
}

.guide { position: absolute; inset: 0; pointer-events: none; }
.guide::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 48%; aspect-ratio: .78;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255, 255, 255, .45);
  border-radius: 50%;
}
.videowrap.ready .guide::after { border-color: #4ade80; border-style: solid; }

.camoff {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: rgba(255, 255, 255, .55);
  font-size: 13.5px;
  pointer-events: none;
}

.coach {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  color: #fff;
  background: rgba(10, 11, 14, .76);
  backdrop-filter: blur(10px);
}
.coach .pip { width: 7px; height: 7px; border-radius: 50%; background: #9aa1af; flex: none; }
.coach.ok .pip { background: #4ade80; }
.coach.warn .pip { background: #fbbf24; }

.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 68px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* ---- controls ----------------------------------------------------------------------- */

button, .btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  background: var(--surface-3);
  color: var(--text);
  padding: 13px 20px;
  border-radius: var(--r-ctl);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  transition: transform .12s ease, background .16s ease;
}
button:active:not(:disabled) { transform: scale(.985); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary { background: var(--accent); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--accent-press); }
button.ghost { background: transparent; color: var(--accent-ink); }
button.ghost:hover:not(:disabled) { background: var(--surface-2); }
button.link { background: none; color: var(--accent-ink); padding: 6px 2px; min-height: 0; font-size: 14px; }

button.busy { pointer-events: none; opacity: .85; }
button.busy::before {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.row.stack { flex-direction: column; }
.row.stack > button { width: 100%; }

.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); cursor: pointer; }
.switch input { accent-color: var(--accent); width: 18px; height: 18px; }

/* ---- form ---------------------------------------------------------------------------- */

form.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
form.fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 560;
  color: var(--text-2);
  min-width: 0;
}
form.fields label.wide { grid-column: 1 / -1; }
form.fields .req { color: var(--faint); font-weight: 400; }
form.fields textarea { resize: vertical; min-height: 64px; }
form.fields input, form.fields textarea {
  font: inherit;
  font-size: 16px;   /* iOS zooms the page on anything smaller */
  font-weight: 450;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  padding: 13px 14px;
  width: 100%;
  min-width: 0;
}
form.fields input::placeholder, form.fields textarea::placeholder { color: var(--faint); }
form.fields input:focus, form.fields textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
}
form.fields input:user-invalid { border-color: var(--bad); }

/* ---- status and verdict ----------------------------------------------------------------- */

.status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  font-size: 14px;
  color: var(--muted);
}
.status.ok   { background: var(--ok-wash);   color: var(--ok); }
.status.bad  { background: var(--bad-wash);  color: var(--bad); }
.status.warn { background: var(--warn-wash); color: var(--warn); }

.verdict {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--surface-2);
}
.verdict .mark {
  width: 50px; height: 50px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: pop .32s cubic-bezier(.2, .9, .3, 1.2) backwards;
}
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.verdict .headline { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.verdict .sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.verdict.ok   { background: var(--ok-wash); }
.verdict.ok .mark { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.verdict.ok .headline { color: var(--ok); }
.verdict.bad  { background: var(--bad-wash); }
.verdict.bad .mark { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.verdict.bad .headline { color: var(--bad); }
/* Amber and a clock, never red and a cross: no verdict is not a refusal. */
.verdict.warn { background: var(--warn-wash); }
.verdict.warn .mark { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.verdict.warn .headline { color: var(--warn); }

/* ---- the pass ------------------------------------------------------------------------------ */

.paper {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-card);
  padding: 18px;
  box-shadow: var(--shadow);
}
.paper .marque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--paper-muted);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--paper-line);
}
.paper img.qr {
  display: block;
  width: min(100%, 58vmin);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: #fff;
  /* "pixelated" keeps module edges hard; smoothing makes dense codes fail to scan. */
  image-rendering: pixelated;
}
.paper .who { text-align: center; margin-top: 14px; }
.paper .who .name { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; }
.paper .who .id { font-family: var(--mono); font-size: 11.5px; color: var(--paper-muted); word-break: break-all; margin-top: 4px; }
.paper .stub {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--paper-line);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--paper-muted);
}

/* ---- data ------------------------------------------------------------------------------------ */

dl.details { margin: 0; display: grid; grid-template-columns: minmax(96px, auto) 1fr; font-size: 14.5px; }
dl.details dt { color: var(--muted); font-size: 13.5px; padding: 10px 0; }
dl.details dd { margin: 0; padding: 10px 0 10px 16px; overflow-wrap: anywhere; text-align: right; }
dl.details dt + dd { border-bottom: 1px solid var(--line-soft); }
dl.details dt { border-bottom: 1px solid var(--line-soft); }
dl.details dt:last-of-type, dl.details dd:last-of-type { border-bottom: none; }
dl.details dd.mono { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }

figure.shot { margin: 0; }
figure.shot img { border-radius: 14px; max-height: 320px; object-fit: contain; background: var(--surface-3); }
figure.shot figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; text-align: center; }

.anatomy { display: flex; height: 8px; overflow: hidden; background: var(--surface-3); margin: 6px 0 12px; border-radius: 999px; }
.anatomy .fields { background: #94a3b8; }
.anatomy .face { background: var(--accent); }
.anatomy .sig { background: #c084fc; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.legend b { color: var(--text); font-weight: 600; }
.legend i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; margin-right: 7px; }
.legend .fields i { background: #94a3b8; }
.legend .face i { background: var(--accent); }
.legend .sig i { background: #c084fc; }

.gauge { margin: 16px 0 2px; }
.gauge .track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ok) 38%, transparent) 0%, color-mix(in srgb, var(--ok) 38%, transparent) var(--line-at),
    color-mix(in srgb, var(--bad) 24%, transparent) var(--line-at), color-mix(in srgb, var(--bad) 24%, transparent) 100%);
}
.gauge .line { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--text); opacity: .45; left: var(--line-at); }
.gauge .dot {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  transform: translate(-50%, -50%);
  left: var(--at);
}
.gauge .dot.ok { background: var(--ok); }
.gauge .dot.bad { background: var(--bad); }
.gauge .scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); margin-top: 9px; }

.recents { list-style: none; margin: 0; padding: 0; }
.recents li { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.recents li:last-child { border-bottom: none; }
.recents .pip { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.recents .pip.ok { background: var(--ok); }
.recents .pip.bad { background: var(--bad); }
.recents .pip.warn { background: var(--warn); }
.recents .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.recents .muted { color: var(--muted); font-size: 13px; }
.recents .when { margin-left: auto; color: var(--faint); font-size: 12.5px; white-space: nowrap; }

details.more { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
details.more summary { cursor: pointer; font-size: 14px; font-weight: 550; color: var(--accent-ink); list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: " \203a"; }
details.more[open] summary::after { content: " \2039"; }
details.more > div, details.more > dl { margin-top: 14px; }

code.mono {
  font-family: var(--mono);
  font-size: 11.5px;
  word-break: break-all;
  color: var(--faint);
  display: block;
  max-height: 72px;
  overflow: auto;
  background: var(--surface-2);
  padding: 12px;
  border-radius: var(--r-ctl);
}

ul.notes { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
ul.notes li { margin: 7px 0; }
ul.notes b { color: var(--text); font-weight: 600; }

.muted { color: var(--muted); }
.hidden { display: none !important; }

.health { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.health .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.health .dot.up { background: var(--ok); }
.health .dot.down { background: var(--bad); }

footer {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 18px 40px;
  display: flex;
  gap: 10px 18px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--faint);
  font-size: 13px;
}

/* ---- phone: the tabs move to the bottom, where the thumb is --------------------------------- */

@media (max-width: 720px) {
  main { max-width: none; padding: 4px 16px 24px; }
  footer { padding: 12px 16px calc(96px + env(safe-area-inset-bottom)); }
  .page-head h2 { font-size: 27px; }
  .card { padding: 18px; border-radius: 16px; }
  .row > button { flex: 1 1 100%; }
  .grid { gap: 14px; }

  header { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }

  header nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--line);
  }
  header nav a {
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 560;
    background: none !important;
    box-shadow: none !important;
  }
  header nav a svg { display: block; }
  header nav a.active { color: var(--accent-ink); }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- print ------------------------------------------------------------------------------------ */

/* Holds the composed pass card (QR + name); only ever visible to the printer. */
#printarea { display: none; }

@media print {
  /* Print the pass, not a screenshot of the app. */
  body > *:not(#printarea) { display: none !important; }
  body { background: #fff; }
  #printarea { display: block !important; }
  #printarea img { display: block; width: 88mm; margin: 0 auto; }
  @page { margin: 14mm; }
}