:root {
  --blue: #2E5FAC;
  --blue-dark: #1F3864;
  --teal: #0f8a7e;
  --teal-bg: #e3f3f1;
  --green: #1a7f37;
  --red: #b3261e;
  --gray: #666;
  --bg: #f5f6f8;
  --border: #ddd;
}

* { box-sizing: border-box; }

/* Regula's <face-liveness> Web Component defaults to a full-viewport
   overlay (position: fixed internally), which traps page scroll even
   before the user starts a capture. Wrapping it in a containing block
   (any ancestor with a transform/will-change) makes CSS "fixed" position
   relative to that ancestor instead of the real viewport, so it stays
   contained inside the card rather than covering the whole page. Added
   2026-09-22 during the Regula Face SDK trial. */
face-liveness {
  display: block;
  position: relative;
  width: 100%;
  height: 480px;
  max-height: 70vh;
  overflow: auto;
  transform: translateZ(0);
  border-radius: 8px;
}

/* On phones the fixed 480px box above cuts off the bottom of Regula's
   readiness checklist (the "Go" button was hidden below the visible
   area — found 2026-09-22 testing on iPhone). Give it more room on
   narrow screens; overflow:auto above means it'll scroll internally as
   a last resort even if a particular phone still needs more than this. */
@media (max-width: 480px) {
  face-liveness {
    height: 640px;
    max-height: 85vh;
  }
}

/* Regula's component locks scroll on the whole page (sets overflow:hidden
   on html/body directly, not just its own box) as soon as it initializes,
   even before the user starts a capture. Force it back with !important
   since this is an inline style fight, not a specificity one. Added
   2026-09-22 during the Regula Face SDK trial — revisit if/when this
   trial card is removed or replaced. */
html, body {
  overflow: auto !important;
  height: auto !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  margin: 0;
  padding: 0;
  color: #1a1a1a;
}

header {
  background: var(--blue-dark);
  color: white;
  padding: 16px 20px;
}

header img.brand-logo {
  height: 24px;
  display: block;
}

header h1 {
  margin: 0;
  font-size: 20px;
}

header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #cbd6ea;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.card h2 {
  margin-top: 0;
  font-size: 16px;
  color: var(--blue-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon-in-a-colored-circle motif, pulled from the How It Works deck's
   real icon assets (public/icons/) — repeated consistently next to every
   card header rather than one-off decoration. */
.icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-circle.blue { background: #e4ebf6; }
.icon-circle.red { background: #fdeeee; }

.icon-circle img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.result-box img.inline-check {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin-right: 6px;
}

button img.btn-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 5px;
  filter: brightness(0) invert(1);
}

button.secondary img.btn-icon,
button.danger img.btn-icon {
  filter: none;
}

label {
  display: block;
  font-size: 13px;
  color: var(--gray);
  margin-top: 10px;
}

input, select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
  margin-top: 4px;
}

button {
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 12px;
}

button.secondary {
  background: white;
  color: var(--blue);
  border: 1px solid var(--blue);
}

button.danger {
  background: white;
  color: var(--red);
  border: 1px solid var(--red);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Added 2026-09-24 for the mDL "Open Wallet" link (public/driver.html) —
   an <a> tag so it can carry a real href (Credence's session.qrUrl) and
   support target="_blank", but styled to match <button> above so it reads
   as the primary action it is, not a secondary text link. */
.button-like {
  display: inline-block;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}

/* Added 2026-08-09: wide tables (7 columns on the Vehicles table) were
   getting cut off with no way to reach the hidden columns on a phone
   screen — found live, testing on an actual phone. Scrolls horizontally
   within its own card instead of overflowing the page. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  text-align: left;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge.active, .badge.granted, .badge.verified { background: #e3f4e8; color: var(--green); }
.badge.suspended, .badge.denied { background: #fdeeee; color: var(--red); }
.badge.revoked { background: #eee; color: var(--gray); }

.status-line {
  font-size: 13px;
  color: var(--gray);
  margin-top: 8px;
}

.result-box {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}

.result-box.granted { background: #e3f4e8; color: var(--green); }
.result-box.denied { background: #fdeeee; color: var(--red); }

.mode-banner {
  background: #fff8e1;
  color: #8a6d00;
  padding: 8px 12px;
  font-size: 12px;
  border-bottom: 1px solid #f0e0a0;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 13px;
  margin-right: 12px;
}