/* Self-hosted fonts — no external requests, so the portal stays inside its
   own origin (CSP-safe, privacy-safe, works offline). Both are variable
   fonts; one file covers the full weight axis. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.260c81a4759b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-variable.3268e3c9f19e.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* AU Summit 2026 palette — formal gold-and-maroon on a warm cream ground. */
  --brand: #c4953a;        /* AU Summit gold — primary actions, headings */
  --brand-light: #b3842f;  /* darker gold — hover states */
  --accent: #6a0027;       /* deep diplomatic maroon — links, focus rings */
  --maroon: #8b1a3c;       /* footer + action-bar maroon */
  --bg: #fbf9f4;           /* warm cream page background */
  --card: #ffffff;
  --surface: #f5f3ee;      /* input fills + subtle panels */
  --nav-bg: #f4f5f6;       /* TopNavBar surface */
  --text: #574144;         /* warm near-black body text */
  --muted: #6b7280;        /* placeholder + secondary text */
  --error: #b3261e;
  --ok: #1e7d34;
  --border: #e5e0d5;       /* warm hairline border */

  /* Inter for UI/headings, EB Garamond for editorial body + input text.
     System faces follow as fallbacks while the woff2 loads. */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  /* Sticky footer — body fills the viewport so the footer is pushed to the
     bottom even when the page content is short. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

/* TopNavBar — light diplomatic header: brand at the inline-start, nav and
   controls at the inline-end, hairline rule beneath. */
.site-header {
  background: var(--nav-bg);
  color: var(--text);
  padding: 1.5rem 4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
}
.brand-block {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.brand {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

/* Header actions — Forms tab and language switcher, grouped on one side. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Language switcher ----------------------------------------------------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}
.lang-switch-label { display: none; }

/* Desktop nav links — uppercase gold, the AU Summit nav treatment. */
.nav-tab {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-tab:hover { color: var(--brand-light); }
.nav-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--brand);
}

/* Language dropdown + its no-JS submit button — quiet pill controls that
   sit at the same level and size on the light header. */
.lang-select,
.btn-lang-go {
  display: inline-flex;
  align-items: center;
  width: auto;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-select:hover,
.btn-lang-go:hover { border-color: var(--brand); }
.lang-select:focus,
.btn-lang-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-select option { color: var(--text); background: #fff; }

/* Maroon action button — the rounded sign-out control at the header end. */
.nav-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--maroon);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.nav-action:hover { background: #73142f; }
.nav-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.header-actions form { margin: 0; }

/* Right-to-left support (Arabic) ---------------------------------------- */
html[dir="rtl"] body { font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; }
html[dir="rtl"] .brand { letter-spacing: 0; }
/* Flip edge-anchored decorations so they sit on the inline-start side. */
html[dir="rtl"] .data-table th,
html[dir="rtl"] .data-table td { text-align: right; }
html[dir="rtl"] .form-repeatable .repeat-row {
  border-left: 1px solid var(--border);
  border-right: 3px solid var(--accent);
}
html[dir="rtl"] .value-entry {
  border-left: 0;
  border-right: 3px solid var(--accent);
  padding-left: 0;
  padding-right: 0.9rem;
}
html[dir="rtl"] .links { padding-left: 0; padding-right: 1.1rem; }
html[dir="rtl"] .submission-item.is-active a {
  box-shadow: inset -3px 0 0 var(--accent);
}

.container { max-width: 720px; margin: 3rem auto; padding: 0 1.5rem; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(87, 65, 68, 0.08);
}
.card-narrow { max-width: 440px; margin: 0 auto; }

/* Auth screens (login, verification, password) — centred card on the cream
   ground with generous vertical breathing room. */
.auth-screen { margin-block: 4rem; }
.auth-card { padding: 2.5rem; }
.auth-card .lead { margin-bottom: 1.75rem; }

/* Rounded icon badge above the heading on auth cards. */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 2.25rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
}
.card-icon--mail { background: #ffd9de; }

/* Circular lock badge for the secure-verification (OTP) screen. */
.card-icon--lock {
  width: 3.25rem;
  height: 3.25rem;
  background: #fbe0e6;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

/* Circular reset badge for the password-reset screen. */
.card-icon--reset {
  width: 3.25rem;
  height: 3.25rem;
  background: #fbe0e6;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

/* Auth card variant where the heading + copy are centre-aligned. */
.auth-card--center { text-align: center; }
.auth-card--center h1 { color: var(--brand); }
.auth-card--center .lead { color: var(--text); }

/* Segmented one-time-code entry. */
.otp-form { margin-top: 0.5rem; }
.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.otp-digit {
  width: 2.6rem;
  height: 3.2rem;
  padding: 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.otp-digit:focus,
.otp-digit--filled {
  border: 1px solid var(--accent);
  background: var(--card);
  box-shadow: none;
  outline: none;
}
.otp-digit--filled { border-color: var(--brand); }
.otp-fallback { margin: 0.6rem 0 1rem; text-align: center; letter-spacing: 0.3em; }

/* "Didn't receive the code? Resend code" line. */
.resend-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.btn-link--inline {
  display: inline;
  padding: 0;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--accent);
}
.btn-link--inline:hover { text-decoration: underline; }

/* Auth-card header — icon, title and lead, centred above the form. */
.auth-head { text-align: center; }
.auth-head h1 { font-size: 1.7rem; }

/* Password fields — a reveal/hide toggle sits inside the input. */
.input-wrap { position: relative; }
.input-wrap input { padding-inline-end: 2.9rem; }
.pw-toggle {
  position: absolute;
  inset-inline-end: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.pw-toggle:hover { color: var(--accent); }
.pw-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.pw-toggle .pw-eye { display: none; }
.pw-toggle.is-on .pw-eye { display: inline; }
.pw-toggle.is-on .pw-eye-off { display: none; }

/* Security-requirements panel — a bordered checklist validated live by JS. */
.req-panel {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.req-title {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
}
.req-list { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.req-list li {
  position: relative;
  padding-inline-start: 1.6rem;
  margin: 0.32rem 0;
  color: var(--muted);
  transition: color 0.15s;
}
.req-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.12rem;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  transition: background 0.15s, border-color 0.15s;
}
.req-list li.is-met { color: var(--ok); }
.req-list li.is-met::before {
  background: var(--ok);
  border-color: var(--ok);
}
.req-list li.is-met::after {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 0.3rem;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Verification (CAPTCHA) — label row with an inline reload control. */
.captcha-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.captcha-head label { margin-bottom: 0.45rem; }
.captcha-reload {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.captcha-reload:hover { text-decoration: underline; }
.captcha-reload:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.captcha-reload svg { width: 14px; height: 14px; }

/* Centred secondary link below an auth form. */
.auth-alt-link {
  display: block;
  margin-top: 1.1rem;
  text-align: center;
  color: var(--accent);
  font-size: 0.9rem;
}
.btn-arrow { margin-inline-start: 0.4rem; }

.card-success { border-top: 4px solid var(--ok); }
.card-error { border-top: 4px solid var(--error); }

h1 {
  margin-top: 0;
  color: var(--brand);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lead { color: var(--text); font-size: 0.95rem; }
.note { color: var(--muted); font-size: 0.9rem; }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.4rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.85rem 0.9rem;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--font-serif);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(196, 149, 58, 0.2);
}

.help { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }
.field-error { display: block; color: var(--error); font-size: 0.85rem; margin-top: 0.25rem; }
.form-errors {
  background: #fdecea;
  border: 1px solid var(--error);
  color: var(--error);
  padding: 0.7rem 0.9rem;
  border-radius: 5px;
  margin-bottom: 1rem;
}

/* Honeypot — kept out of the visual + accessibility tree. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--card);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-light); border-color: var(--brand-light); }
.btn-block { width: 100%; }
.btn-link {
  border: none;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.resend { margin-top: 0.5rem; }

.messages { list-style: none; padding: 0; }
.msg { padding: 0.7rem 0.95rem; border-radius: 8px; margin-bottom: 0.5rem; }
.msg-info { background: var(--surface); border: 1px solid var(--border); }
.msg-error { background: #fdecea; border: 1px solid var(--error); color: var(--error); }
.msg-success { background: #e7f6ea; border: 1px solid var(--ok); color: var(--ok); }

.reference {
  font-family: "Courier New", monospace;
  font-size: 1.1rem;
  background: var(--bg);
  padding: 0.6rem 0.8rem;
  border-radius: 5px;
  word-break: break-all;
}
.qr {
  display: block;
  margin: 1rem auto;
  border: 1px solid var(--border);
  max-width: 240px;
  height: auto;
  image-rendering: pixelated;
}

/* Submission header — reference/meta on the left, entry-ID QR on the right. */
.submission-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.submission-head-info { flex: 1 1 280px; min-width: 0; }
.submission-qr {
  flex: 0 0 auto;
  margin: 0;
  max-width: 180px;
  text-align: center;
}
.submission-qr .qr { margin: 0 0 0.4rem; max-width: 160px; }
.submission-qr figcaption { font-size: 0.78rem; }
.submission-qr-download { margin-top: 0.7rem; width: 100%; }

/* Superuser QR entry-pass page ----------------------------------------- */
.qr-pass-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  align-items: flex-start;
  margin: 1.5rem 0 2rem;
}
.qr-print-area {
  flex: 0 0 auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  text-align: center;
}
.qr-print-area .qr {
  margin: 0 auto 0.5rem;
  max-width: 240px;
  border: 0;
}
.qr-print-area .reference { font-size: 0.82rem; }

.qr-pass-side { flex: 1 1 260px; min-width: 0; }
.qr-pass-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.qr-pass-actions form { margin: 0; }

/* iOS-only save hint (revealed by main.js when the share sheet is absent). */
.qr-save-hint {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.4;
}
.qr-save-hint[hidden] { display: none; }

/* Key/value detail list. */
.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}
.kv dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}
.kv dd { margin: 0; word-break: break-word; }

/* Print: only the QR + reference reach the page. */
@media print {
  body * { visibility: hidden; }
  .qr-print-area, .qr-print-area * { visibility: visible; }
  .qr-print-area {
    position: absolute;
    inset: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    border: 0;
  }
  .qr-print-area .qr { max-width: 320px; }
}

/* Public invitation entry pass ------------------------------------------- */
/* Centre the pass in the viewport so it doesn't sit against the top with a
   large empty band below (esp. on tall mobile screens). */
.invite-main {
  /* `width: 100%` because .container's auto margins make it shrink-to-fit
     inside the column-flex body — without it this page's width is dictated by
     the artwork's intrinsic pixel size rather than the viewport. */
  width: 100%;
  max-width: 900px;
  min-height: calc(100dvh - 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* `width: 100%` matters: .invite-main is a column flex container, so the auto
   margins here would otherwise make this a shrink-to-fit item and the card
   below would collapse to the artwork's intrinsic 388px instead of its
   max-width. */
.invite { width: 100%; margin: 0 auto; text-align: center; }

/* The card: static event artwork (background image) + two dynamic overlays.
   `container-type: inline-size` makes 1cqw == 1% of the card's width, so the
   name scales with the card on every screen.
   Scoped to `.invite >` because the invitations *list* reuses the .invite-card
   class for its grid tiles — unscoped, the 9:13 ratio below would reshape every
   tile on that page. */
.invite > .invite-card {
  position: relative;
  container-type: inline-size;
  width: 100%;
  /* The artwork is 388 × 560 px; holding the card near that keeps the printed
     text and dotted lines crisp instead of stretching them on wide screens. */
  max-width: 480px;
  aspect-ratio: 9 / 13;
  margin: 0.25rem auto 1rem;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  line-height: 0;
}
.invite-card-bg { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Guest name, set directly after the invitation's “الأستاذ /” label. The artwork
   carries no fill-in rule — printed dots under rendered Arabic read as a form
   the guest still has to complete — so the name is right-anchored just clear of
   the label's ink (which starts at 67.3%) and runs leftward, as RTL text would
   be written by hand. */
.invite-name {
  position: absolute;
  left: 65.5%;
  top: 48.4%;
  transform: translate(-100%, -100%);
  width: 47%;
  line-height: 1.05;
  text-align: right;
  color: #1e1a15;
  font-weight: 700;
  font-family: "Segoe UI", "Tahoma", "Noto Sans Arabic", "Cairo", Arial, sans-serif;
  font-size: 1rem;                            /* fallback if cqw unsupported */
  font-size: clamp(0.6rem, 4.2cqw, 1.5rem);
  /* Single line, kept on the printed “الأستاذ /” blank. main.js shrinks the font
     to fit long names in full instead of clipping them. */
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

/* Entry QR — overlays and fully covers the design's placeholder QR, which sits
   at 37.4%–62.9% across and 63.9%–81.6% down the artwork. Sized a little wider
   than the placeholder so no gold module peeks out from under the real code. */
.invite-qr {
  position: absolute;
  left: 50.1%;
  top: 72.8%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 28%;
  height: auto;
  aspect-ratio: 1;
  /* White plate, sized so the code inside still spans the full placeholder
     (25.5%) while widening the PNG's 2-module quiet zone toward the 4 modules
     scanners prefer. Flat and near-borderless so it sits in the artwork rather
     than on top of it — the design's background here is already near-white. */
  background: #fff;
  padding: 1.2%;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(90, 70, 40, 0.14);
}

/* Organiser serial (م) shown clearly below the card for gate staff. */
.invite-serial {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 auto 1rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.invite-serial-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.invite-serial-num {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.invite-actions .btn { min-width: 9.5rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Print: only the invitation card reaches the page, centred at the invitation's
   true trim size (90 × 130 mm) so it can be cut out at 1:1 rather than scaled to
   whatever the paper happens to be. */
@media print {
  /* Nothing but the card on the sheet: the site's cream page fill would
     otherwise flood the whole page whenever background graphics are enabled. */
  html, body { background: #fff; }
  .invite > .invite-card, .invite > .invite-card * { visibility: visible; }
  .invite > .invite-card {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 90mm;
    max-width: none;
    height: 130mm;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .invite-actions, .qr-save-hint { display: none; }
}

.form-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.2rem;
}
.form-section legend {
  font-weight: 700;
  color: var(--brand);
  padding: 0 0.4rem;
}
.section-desc { color: var(--muted); font-size: 0.9rem; margin-top: 0; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.data-table th { color: var(--brand); font-size: 0.9rem; }
.mono { font-family: "Courier New", monospace; font-size: 0.85rem; }

.value-list { margin: 0; }
.value-list dt { font-weight: 600; color: var(--brand); margin-top: 0.6rem; }
.value-list dd { margin: 0.1rem 0 0; }

/* Repeatable sub-forms. */
.form-repeatable .repeat-row {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 0.9rem 1rem 0.4rem;
  margin-bottom: 0.9rem;
  background: #FAFAFA;
}
.repeat-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.repeat-row-num { font-weight: 700; color: var(--brand); font-size: 0.9rem; }
/* Delete-entry icon button. */
.repeat-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--error);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.repeat-remove:hover { background: #fdecea; border-color: var(--error); }
.repeat-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.repeat-remove svg { width: 1rem; height: 1rem; display: block; }
.repeat-add { margin-top: 0.2rem; }

/* Back button — a nav tab rendered as a <button>, sitting beside Forms.
   Hidden until main.js detects in-app history, so it is never a dead control. */
button.nav-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  cursor: pointer;
}
.nav-back { gap: 0.25rem; }
.nav-tab[hidden] { display: none; }

/* Sign-out submits a form; flatten the form so the button sits inline with
   the other nav tabs instead of starting a new block. */
.site-nav .nav-signout-form { display: contents; }

/* Accordion sections. */
.form-accordion { padding: 0; }
.form-accordion > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--brand);
  padding: 0.8rem 1.2rem;
  list-style-position: inside;
}
.form-accordion[open] > summary { border-bottom: 1px solid var(--border); }
.form-accordion > *:not(summary) { padding-left: 1.2rem; padding-right: 1.2rem; }
.form-accordion > .field:last-child { padding-bottom: 0.8rem; }

/* Multi-select (checkbox) fields. */
.field ul { list-style: none; margin: 0; padding: 0; }
.field ul li { margin: 0.15rem 0; }
.field ul li label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 400;
}
.field input[type="checkbox"], .field input[type="radio"] { width: auto; }

/* Searchable select (country combobox). The native <select> is shown when
   JavaScript is unavailable; `.combo-native` hides it once enhanced. */
.combo { position: relative; }
.combo-native { display: none; }
.combo-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.combo-list[hidden] { display: none; }
.combo-option { padding: 0.5rem 0.7rem; cursor: pointer; }
.combo-option:hover,
.combo-option.is-active { background: #e8f3ea; }
.combo-empty { padding: 0.5rem 0.7rem; color: var(--muted); }

/* Stored repeatable entries on the detail page. */
.value-entry {
  border-left: 3px solid var(--accent);
  padding-left: 0.9rem;
  margin: 0.8rem 0;
}
.value-entry-title {
  font-size: 0.95rem;
  color: var(--brand);
  margin: 0.2rem 0;
}

.captcha-box { display: flex; align-items: stretch; gap: 0.6rem; }
.captcha-img {
  flex: 0 0 auto;
  width: 150px;
  height: 54px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.captcha-box input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.links { padding-left: 1.1rem; }
.links a { color: var(--accent); }

/* Forms list — modern enterprise cards, one clickable card per form.
   auto-fill + minmax flows 1/2/3 columns based on the real available width,
   so cards never get squeezed regardless of viewport or sidebar size. */
.form-cards {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.form-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.form-card:hover,
.form-card:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 8px 22px rgba(87, 65, 68, 0.12);
  transform: translateY(-2px);
  outline: none;
}

/* Icon + title row. */
.form-card-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.form-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand);
  transition: background 0.18s, color 0.18s;
}
.form-card:hover .form-card-icon,
.form-card:focus-visible .form-card-icon {
  background: var(--brand);
  color: #fff;
}
.form-card-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--accent);
}

/* Description — clamped to three lines so every card is the same height. */
.form-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Call to action — pinned to the bottom edge of every card. */
.form-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.2rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
}
.form-card-cta svg { transition: transform 0.18s; }
.form-card:hover .form-card-cta svg,
.form-card:focus-visible .form-card-cta svg { transform: translateX(3px); }
html[dir="rtl"] .form-card:hover .form-card-cta svg,
html[dir="rtl"] .form-card:focus-visible .form-card-cta svg {
  transform: translateX(-3px);
}
html[dir="rtl"] .form-card-cta svg { transform: scaleX(-1); }

.empty-state {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  color: var(--muted);
}

/* Minimal Footer — solid maroon band, centred white attribution line. */
.site-footer {
  background: var(--maroon);
  color: #fff;
  text-align: center;
  padding: 1.5rem 1rem;
}
.site-footer small { font-size: 0.9rem; }

/* Master-detail layout: submissions list on the left, form on the right. */
.container-wide { max-width: 1040px; }
/* Forms list + edit view run wider so the main card has room to breathe. */
.container-forms { max-width: 1280px; }
/* Invitations page — spans most of the viewport, with modest gutters on the
   sides so the card never touches the page edges. */
body .container.container-invites { max-width: 1440px !important; padding-inline: 2.5rem; }

.split { display: flex; gap: 1.5rem; align-items: flex-start; }
/* Submissions panel — Django-admin-style filter sidebar pinned to the end. */
.split-aside {
  flex: 0 0 260px;
  padding: 1rem 1.1rem;
  background: #f8f9fa;
  border: 1px solid var(--border);
}
.split-aside h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.4rem;
}
.split-aside .note { font-size: 0.8rem; }
/* Main column fills every remaining pixel, so its card is genuinely wide. */
.split-main { flex: 1 1 auto; min-width: 0; }
.split-main > .card { width: 100%; }

@media (max-width: 860px) {
  .split { flex-direction: column-reverse; }
  .split-aside { flex-basis: auto; width: 100%; }
}

/* Edit page — the container spans the full viewport so the submissions
   panel can sit hard against the far-left edge while the edit card stays
   centred in the page, well clear of the sidebar. */
.container-edit { max-width: 1500px; }
/* Sidebar pinned left at its natural width; the edit card is centred in the
   remaining space with equal margins, so there is always a clear gap. */
.split--edit { display: flex; align-items: flex-start; gap: 0; }
.split--edit .split-aside { flex: 0 0 260px; }
.split--edit .split-main { flex: 1 1 auto; min-width: 0; }
.split--edit .edit-card { max-width: 760px; margin-inline: auto; }

/* QR block on the edit card — centred above the form. */
.edit-qr { margin: 1.25rem auto 1.75rem; }

.submission-list { list-style: none; margin: 0; padding: 0; }
.submission-item { margin: 0 0 0.4rem; }
.submission-item a {
  display: block;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.submission-item a:hover { border-color: var(--accent); background: #f1f7f2; }
.submission-item.is-active a {
  border-color: var(--accent);
  background: #e8f3ea;
  box-shadow: inset 3px 0 0 var(--accent);
}
.submission-form { display: block; font-weight: 600; color: var(--brand); }
.submission-brief {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.submission-meta { display: block; font-size: 0.75rem; color: var(--muted); }

/* "View all my invitations" — a small card-style link below the list. */
.sidebar-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.sidebar-card-link:hover {
  border-color: var(--accent);
  background: #f1f7f2;
}
.sidebar-card-link-arrow { flex: 0 0 auto; font-size: 1rem; }
html[dir="rtl"] .sidebar-card-link-arrow { transform: scaleX(-1); }

/* ----------------------------------------------------------------------
   Responsive — the layout reflows for tablet and phone widths.
---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .site-header { padding: 1.25rem 1.5rem; }
  .container { margin: 2rem auto; }
}

@media (max-width: 600px) {
  /* Header stacks: brand on top, actions beneath, both inline-start. */
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }
  .header-actions { width: 100%; gap: 0.6rem; }
  .brand { font-size: 1.15rem; }

  .container { margin: 1.5rem auto; padding: 0 1rem; }
  .card { padding: 1.5rem; border-radius: 10px; }
  .auth-screen { margin-block: 1.5rem; }
  .auth-card { padding: 1.75rem 1.5rem; }
  h1 { font-size: 1.6rem; }

  .otp-inputs { gap: 0.4rem; }
  .otp-digit { width: 2.4rem; height: 3rem; font-size: 1.25rem; }

  .site-footer { padding: 1.25rem 1rem; }
  .site-footer small { font-size: 0.8rem; }
}

/* Coarse-pointer devices — keep tap targets comfortably large. */
@media (pointer: coarse) {
  .nav-action,
  .lang-select,
  .btn { min-height: 44px; }
}

/* ======================================================================
   Public landing page (home).
====================================================================== */
.container.home-main { max-width: none; margin: 0; padding: 0; }

/* Hero ------------------------------------------------------------------ */
.hero {
  /* Light neutral scrim — just enough to keep the white text legible while
     the hero artwork shows through clearly. */
  background:
    linear-gradient(180deg, rgba(24, 10, 16, 0.55) 0%, rgba(24, 10, 16, 0.28) 45%, rgba(24, 10, 16, 0.5) 100%),
    url("../img/hero-section.b79016d800df.svg") center / cover no-repeat;
  color: #fff;
  padding: 5.5rem 1.5rem 6rem;
  text-align: center;
}
.hero-inner { max-width: 900px; margin: 0 auto; }
.hero-eyebrow {
  margin: 0 0 1.5rem;
  color: #fec969;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.hero-title {
  margin: 0 0 2.5rem;
  color: #fff;
  font-size: 3.2rem;
  line-height: 1.13;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Countdown card */
.countdown {
  display: inline-flex;
  gap: 0.25rem;
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
  padding: 0 0.6rem;
}
.cd-unit + .cd-unit { border-inline-start: 1px solid var(--border); }
.cd-num {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--maroon);
  font-variant-numeric: tabular-nums;
}
.cd-label {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text);
}

.cta {
  display: inline-block;
  margin-top: 2.5rem;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.cta:hover { background: var(--brand-light); transform: translateY(-1px); }
.cta:focus-visible { outline: 2px solid #fec969; outline-offset: 3px; }

/* Content sections ------------------------------------------------------ */
.section { padding: 5rem 1.5rem; background: var(--card); }
.section-cream { background: var(--bg); }
.section-wrap { max-width: 1120px; margin: 0 auto; }

.eyebrow {
  margin: 0 0 0.6rem;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.section-title {
  margin: 0 0 1rem;
  color: var(--maroon);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.section-lead {
  max-width: 760px;
  margin: 0 0 2.5rem;
  font-size: 1.1rem;
  color: var(--text);
}

/* Centred section header — eyebrow, title and lead stacked and centred. */
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }

/* Bento grid — section 1 */
.bento { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.bento-main, .bento-side { border-radius: 14px; padding: 2rem; }
.bento-main {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(87, 65, 68, 0.06);
}
.bento-side { background: var(--surface); }
.bento h3 { margin: 0 0 0.75rem; color: var(--maroon); font-size: 1.4rem; }
.bento p { margin: 0; color: var(--text); }

/* Icon badge on the main bento card. */
.bento-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
}

.objective-list { list-style: none; margin: 0; padding: 0; }
.objective-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.objective-list li:last-child { border-bottom: 0; }
.check-icon { flex-shrink: 0; color: var(--brand); }

/* Stats + agenda — section 2 */
.exec-top {
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.exec-intro { flex: 1; min-width: 0; }
.exec-intro .section-lead { margin-bottom: 0; }
.stat-card { display: flex; flex-shrink: 0; }
.stat { display: flex; flex-direction: column; padding: 0 1.75rem; }
.stat:first-child { padding-inline-start: 0; }
.stat + .stat { border-inline-start: 1px solid var(--border); }
.stat-num { font-size: 3rem; font-weight: 700; color: var(--maroon); line-height: 1; }
.stat-label {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.agenda-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.agenda-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: 12px;
  padding: 1.5rem;
}
.day-tag {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.agenda-card h3 { margin: 0 0 0.5rem; color: var(--maroon); font-size: 1.15rem; }
.agenda-card p { margin: 0; font-size: 0.9rem; color: var(--text); }

/* Host city — section 3 */
.host-city {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.host-media {
  position: relative;
  /* Match the artwork's own aspect ratio so the framed image shows in full
     — no cropping — and `contain` keeps the drop shadow intact. */
  aspect-ratio: 700 / 756;
  background: url("../img/background-shadow.4434baec1d75.svg") center / contain no-repeat;
}
.host-copy p { color: var(--text); font-size: 1.05rem; }
.feature-row { display: flex; gap: 2rem; margin-top: 1.5rem; }
.feature { flex: 1; border-top: 2px solid var(--brand); padding-top: 0.85rem; }
.feature h4 { margin: 0 0 0.25rem; color: var(--maroon); font-size: 1.05rem; }
.feature p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* Landing — responsive */
@media (max-width: 860px) {
  .hero { padding: 4rem 1.25rem; }
  .hero-title { font-size: 2.25rem; }
  .section { padding: 3.5rem 1.25rem; }
  .section-title { font-size: 1.9rem; }
  .bento { grid-template-columns: 1fr; }
  .exec-top { flex-direction: column; gap: 1.75rem; }
  .agenda-grid { grid-template-columns: repeat(2, 1fr); }
  .host-city { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 520px) {
  .hero-title { font-size: 1.8rem; }
  .countdown { padding: 0.9rem 0.6rem; }
  .cd-unit { min-width: 62px; padding: 0 0.4rem; }
  .cd-num { font-size: 1.9rem; }
  .agenda-grid { grid-template-columns: 1fr; }
  .stat { padding: 0 1.1rem; }
}

/* ======================================================================
   Gate scanner — door officers validate attendee QR passes.
   ====================================================================== */
.gate { max-width: 560px; margin: 0 auto; }
.gate h1 { margin-bottom: 0.3rem; }

/* Camera viewfinder. */
.gate-camera {
  position: relative;
  background: #11100f;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gate-camera video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gate-camera-msg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.6rem 0.9rem;
  background: rgba(17, 16, 15, 0.78);
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
}

/* Camera-permission gate — overlays the blank viewfinder until access is
   granted, and reappears with guidance if the officer refuses or the camera
   fails. Persistent by design: scanning is impossible without the camera. */
.gate-perm {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  text-align: center;
  background: rgba(17, 16, 15, 0.92);
  color: #fff;
}
.gate-perm[hidden] { display: none; }
.gate-perm-title { margin: 0; font-size: 1rem; font-weight: 700; }
.gate-perm-help {
  margin: 0;
  max-width: 34ch;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #e7e3da;
}
.gate-perm-help:empty { display: none; }
.gate-perm .btn { margin-top: 0.2rem; }

/* Manual reference fallback. */
.gate-manual { margin-top: 1rem; }
.gate-manual-row { display: flex; gap: 0.6rem; }
.gate-manual-row input { flex: 1 1 auto; min-width: 0; }
.gate-manual-row .btn { flex: 0 0 auto; }

/* Result panel. */
.gate-result { margin-top: 0.5rem; padding-bottom: 7rem; }
.gate-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}
.gate-result-form { font-size: 1.15rem; font-weight: 700; color: var(--brand); }
.gate-result-ref { font-size: 0.78rem; color: var(--muted); font-family: monospace; }
.gate-result-meta { margin: 0.2rem 0 1rem; color: var(--muted); font-size: 0.88rem; }

/* Previous-entry history. */
.gate-history {
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.95rem;
  border-radius: 8px;
  font-size: 0.86rem;
}
.gate-history--first { background: var(--surface); color: var(--muted); }
.gate-history--seen { background: #fdf4e3; border: 1px solid #e8d6a8; }
.gate-history-title { margin: 0 0 0.4rem; font-weight: 700; color: var(--accent); }
.gate-history ul { list-style: none; margin: 0; padding: 0; }
.gate-history li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.15rem 0;
}
.gate-history-when { font-variant-numeric: tabular-nums; }
.gate-history-officer { color: var(--muted); }
.gate-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--border);
  color: var(--text);
}
.gate-tag--ok { background: #d9efdf; color: var(--ok); }
.gate-tag--bad { background: #fbe0e0; color: var(--error); }

/* Value detail blocks. */
.gate-section { margin-bottom: 1.1rem; }
.gate-section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brand);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25rem;
}
.gate-entry-num {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}
.gate-values { margin: 0; }
.gate-values dt {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 0.55rem;
}
.gate-values dd {
  margin: 0.1rem 0 0;
  font-size: 1rem;
  color: var(--text);
  word-break: break-word;
}
.gate-empty { color: var(--muted); }

/* Decision controls — a bar pinned to the viewport bottom, so the officer
   can Admit / Refuse at any scroll position without scrolling back up. */
.gate-decision {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(87, 65, 68, 0.16);
  padding: 0.7rem 1rem;
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
}
.gate-decision-inner {
  display: flex;
  gap: 0.7rem;
  max-width: 560px;
  margin: 0 auto;
}
.gate-btn {
  flex: 1 1 0;
  padding: 1.1rem 1rem;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: filter 0.15s;
}
.gate-btn:hover { filter: brightness(0.92); }
.gate-btn:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.gate-btn--admit { background: var(--ok); }
.gate-btn--refuse { background: var(--error); }

/* Recorded outcome. */
.gate-outcome {
  margin: 0.4rem 0 1rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
}
.gate-outcome--admit { background: #d9efdf; color: var(--ok); }
.gate-outcome--refuse { background: #fbe0e0; color: var(--error); }

/* Invitation cards — an owner's gathered QR entry passes. */
.invite-cards {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.invite-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.invite-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 14px rgba(87, 65, 68, 0.08);
}
.invite-card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.95rem 1.1rem;
  text-decoration: none;
  color: var(--text);
}
.invite-card-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand);
}
.invite-card-brief {
  font-size: 0.85rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-card-qr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 1.2rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.invite-card-qr:hover { background: var(--brand); color: #fff; }
.invite-card-qr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }