/* GateRoster mobile interface */
:root {
  color-scheme: light;
  --ink: #0b2519;
  --ink-2: #153a29;
  --green: #147a4b;
  --green-dark: #0d5635;
  --green-soft: #e8f5ed;
  --lime: #d9ff63;
  --lime-soft: #f2ffc7;
  /* Warm cream ground. The old #f3f5ef read cold and screen-like; paper is the
     right register for a community organisation. */
  --canvas: #f4efe4;
  --card: #fffdf7;
  --soft: #ece5d6;
  --line: #dcd2bd;
  --control-line: #5f6c65;
  --muted: #5f6c65;
  /* Block palette. Used as large flat fields, never as text colour on canvas. */
  --sand: #e7ddc7;
  --clay: #9c3d24;
  --on-clay: #fffdf7;
  --on-block: #46564d;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  /* Ink edge for the lime pill. The face is lime in both themes, so this does
     NOT flip with the theme: a pale edge on lime is ~1.0:1 and the control
     reads as a blob. Deep green on lime is 14.26:1. Any control that needs an
     inverting edge gets its own token. */
  --btn-edge: #0b2519;
  --amber: #a76600;
  --red: #c83d35;
  --deep: #0b2519;
  --on-deep: #fff;
  --nav-bg: rgba(255, 255, 255, .96);
  --card-glass: rgba(255, 255, 255, .84);
  --brand-ink: #0b2519;
  /* Elevation is reserved for things that genuinely float (nav, sheets). Flat
     surfaces are separated by a hairline instead. */
  --shadow-sm: none;
  --shadow-md: 0 16px 40px rgba(11, 37, 25, .12);
  --shadow-nav: 0 14px 38px rgba(11, 37, 25, .18);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(.2, .75, .25, 1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef7f2;
  --ink-2: #d6e5dc;
  --green: #79dba8;
  --green-dark: #a6ecc3;
  --green-soft: #173a28;
  --lime: #d9ff63;
  --lime-soft: #293d1d;
  --canvas: #07120d;
  --card: #102219;
  --soft: #152a1f;
  --line: #3d5848;
  --sand: #1d3327;
  --clay: #7d2f1b;
  --on-clay: #ffece5;
  --on-block: #bccdc3;
  --control-line: #7d968a;
  --muted: #acbbb3;
  --amber: #ffc66d;
  --red: #ff8179;
  --nav-bg: rgba(16, 34, 25, .97);
  --card-glass: rgba(16, 34, 25, .88);
  --brand-ink: var(--lime);
  --shadow-sm: none;
  --shadow-md: 0 16px 40px rgba(0, 0, 0, .34);
  --shadow-nav: 0 16px 42px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); scroll-behavior: smooth; }
/* One scrollbar treatment. A light-scheme scrollbar over a deep-green page is
   the pale line down the right edge, so those pages declare `color-scheme:
   dark` and the UA draws a dark bar instead. */
html { --scroll-thumb: rgba(11, 37, 25, .3); scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
html[data-theme="dark"] { --scroll-thumb: rgba(255, 255, 255, .22); }
html:has(body.login-page), html:has(body.pass-page), html:has(body.scanner-page) { --scroll-thumb: rgba(255, 255, 255, .22); background: var(--deep); color-scheme: dark; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--scroll-thumb); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
body { min-height: 100dvh; margin: 0; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
body, button, input, select { font: inherit; }
button, input, select, summary, a { -webkit-tap-highlight-color: transparent; }
button, summary { user-select: none; }
a { color: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.lucide { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: 2.15; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; min-height: 44px; display: flex; align-items: center; padding: 0 14px; border-radius: 12px; background: var(--deep); color: var(--on-deep); font-weight: 850; text-decoration: none; transform: translateY(-150%); transition: transform 150ms var(--ease); }
.skip-link:focus { transform: none; }
:where(a, button, input, select, summary):focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; line-height: 1; }
.brand-ball { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: var(--lime); color: var(--deep); font-size: 20px; font-weight: 950; letter-spacing: -.04em; transform: rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(11, 37, 25, .12); }
.brand-logo { background: none; box-shadow: none; transform: none; border-radius: 12px; object-fit: contain; }
.brand b { display: block; font-size: 17px; font-weight: 900; letter-spacing: -.04em; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
/* One vector lockup, recoloured per surface through --brand-ink. */
.brand-lockup { display: block; height: 21px; aspect-ratio: 635.92 / 238.42; background: var(--brand-ink); -webkit-mask: url(brand/ysi-lockup-green.svg?v=3) center / contain no-repeat; mask: url(brand/ysi-lockup-green.svg?v=3) center / contain no-repeat; }
.brand-lockup-link { gap: 0; }
.eyebrow { color: var(--green-dark); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.muted { color: var(--muted); }

/* Shared actions and forms */
.primary-action,
.secondary-action,
.scan-action {
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}
.primary-action { width: 100%; margin-top: 20px; background: var(--deep); color: var(--on-deep); }
/* Public pages get the pill with an offset block; the staff tool keeps the
   flat rectangle, which is what a gate device should look like. */
.public-page .primary-action,
.public-page .secondary-action {
  width: auto;
  min-height: 56px;
  padding: 0 26px;
  border: 2px solid var(--btn-edge);
  border-radius: 999px;
  background: var(--lime);
  color: var(--deep);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 5px 5px 0 var(--btn-edge);
}
.public-page .primary-action .lucide { margin-left: 4px; }
.public-page .form-card { border-radius: var(--radius-lg); }
.public-page .form-card .primary-action { width: 100%; }
.public-page .primary-action:active,
.public-page .secondary-action:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--btn-edge); }
.public-page .primary-action:disabled { transform: none; box-shadow: 5px 5px 0 var(--btn-edge); }
.primary-action .lucide { margin-left: auto; }
.secondary-action { border: 1px solid var(--control-line); background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.scan-action { background: var(--lime); color: var(--deep); }
.primary-action:active, .secondary-action:active, .scan-action:active { transform: scale(.985); }
.primary-action:disabled, .secondary-action:disabled { opacity: .72; cursor: wait; box-shadow: none; }

.form-card,
.panel,
.login-card,
.pass-card,
.empty-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.form-card, .panel { padding: 18px; }
.form-intro { display: grid; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.form-intro h2 { order: 1; margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.form-intro p { order: 2; margin: 0; color: var(--muted); font-size: 14px; }
.form-time { order: 3; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.form-time .lucide { width: 14px; height: 14px; }
.field-grid { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; margin: 0; }
.field > span, .question legend { color: var(--ink); font-size: 13px; font-weight: 650; }
.field span b, .question legend b, .consent b { color: var(--red); }
.field small { margin-left: 4px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.field input, .field select, .search-bar input, .attendee-search input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--soft);
  color: var(--ink);
  padding: 0 14px;
  font-size: 16px;
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
}
.field input::placeholder, .search-bar input::placeholder, .attendee-search input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus, .search-bar input:focus, .attendee-search input:focus { border-color: var(--green-dark); background: var(--card); box-shadow: 0 0 0 3px var(--green-dark); }
.question { min-width: 0; padding: 0; margin: 22px 0 0; border: 0; }
.question legend { margin-bottom: 11px; }
.required-group[aria-invalid="true"] { border-radius: 14px; outline: 3px solid var(--red); outline-offset: 5px; }
.group-error { display: block; margin-top: 10px; color: var(--red); font-size: 11px; font-weight: 800; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { min-height: 44px; display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--control-line); border-radius: var(--radius-sm); background: var(--soft); color: var(--ink-2); font-size: 13px; font-weight: 500; transition: transform 150ms var(--ease), border-color 150ms, background 150ms, color 150ms; }
.choice input:checked + span { border-color: var(--deep); background: var(--deep); color: var(--on-deep); font-weight: 650; }
.choice input:active + span { transform: scale(.97); }
.choice input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.other-interest { margin-top: 11px; }
.more-fields { margin-top: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more-fields > summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 850; }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary::after { content: "+"; width: 26px; height: 26px; display: grid; place-items: center; margin-left: auto; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-size: 18px; line-height: 1; transition: transform 180ms var(--ease); }
.more-fields[open] > summary::after { transform: rotate(45deg); }
.more-fields > summary span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.details-body { display: grid; gap: 20px; padding: 8px 0 22px; animation: reveal 220ms var(--ease); }
.details-body .question { margin: 0; }
.toggle-row, .consent { min-height: 44px; display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.toggle-row input, .consent input { width: 21px; height: 21px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--green); }
.toggle-row span { display: grid; gap: 3px; }
.toggle-row b { font-size: 13px; }
.toggle-row small, .consent span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.consent { margin-top: 18px; }
.form-message { min-height: 0; margin-top: 11px; font-size: 12px; font-weight: 780; line-height: 1.4; }
.form-message.error { color: var(--red); }
.form-message.success { color: var(--green-dark); }
.inline-pass-link { color: var(--green-dark); font-weight: 900; }
.honeypot { position: absolute; left: -9999px; }

/* Public registration */
/* Masthead, not an app bar: a solid brand rule across the top, the lockup
   given room, and staff access kept quiet at the edge. */
.public-header { min-height: calc(66px + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(18px, calc(env(safe-area-inset-top) + 4px)) 20px 16px; }
.public-header .brand { min-height: 44px; }
.public-header .brand-lockup { height: 34px; }
.staff-entry { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; margin-right: -10px; padding: 0 10px; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; }
.staff-entry .lucide { width: 16px; height: 16px; }
.public-main { width: min(100%, 660px); margin: 0 auto; padding: 0 20px calc(40px + env(safe-area-inset-bottom)); }
.event-intro { padding: 34px 0 30px; animation: page-in 400ms var(--ease) both; }
.event-intro .eyebrow { position: relative; display: block; padding-top: 15px; }
.event-intro .eyebrow::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 4px; background: var(--lime); }
.event-intro h1 { max-width: 14ch; margin: 14px 0 22px; font-size: clamp(32px, 8.6vw, 50px); font-weight: 800; line-height: 1.03; letter-spacing: -.032em; text-wrap: balance; }
.event-intro > p { max-width: 46ch; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.event-intro h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; }
/* Three plain steps before the form. Tells someone on a WhatsApp link what
   they are about to get, which is the whole reason they tapped through. */
.steps { counter-reset: step; list-style: none; display: grid; gap: 2px; margin: 26px 0 0; padding: 18px 18px 20px; border-radius: var(--radius-lg); background: var(--sand); }
.steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; }
.steps li + li { border-top: 1px solid rgba(122, 143, 131, .38); }
.steps li::before { counter-increment: step; content: counter(step); grid-row: 1 / span 2; align-self: start; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--deep); color: var(--lime); font-size: 12px; font-weight: 800; }
.steps b { font-size: 15px; font-weight: 800; letter-spacing: -.015em; }
.steps span { color: var(--on-block); font-size: 13px; line-height: 1.45; }
.public-main .form-card { animation: card-in 440ms 70ms var(--ease) both; }
.public-footer { display: grid; gap: 14px; margin-top: 44px; padding: 28px 22px 30px; border-radius: var(--radius-lg); background: var(--deep); color: #fff; }
.public-footer .brand-lockup { height: 26px; background: var(--lime); }
.public-footer p { max-width: 42ch; margin: 0; color: #cfc4ad; font-size: 13px; line-height: 1.55; }
/* Green rings only clear 3:1 on the cream ground; on a deep block the focus
   indicator switches to lime so it stays visible outdoors. */
.band-deep :focus-visible, .public-footer :focus-visible, .pass-head :focus-visible { outline-color: var(--lime); }
.footer-staff { min-height: 44px; display: inline-flex; align-items: center; align-self: start; color: var(--lime); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* Login and pass */
.login-page, .pass-page, .scanner-page { --brand-ink: var(--lime); }
.login-page, .pass-page { background: var(--deep); }
.login-brand .brand-lockup, .pass-shell > .brand .brand-lockup { height: 36px; }
.login-shell { min-height: 100dvh; display: grid; align-content: center; gap: 30px; padding: max(30px, env(safe-area-inset-top)) 17px max(30px, env(safe-area-inset-bottom)); color: #fff; }
.login-brand, .login-card { width: min(100%, 430px); margin: auto; }
.login-brand .brand small, .login-brand p { color: #a5b8ae; }
.login-brand .eyebrow { display: block; margin-top: 42px; color: var(--lime); }
.login-brand h1 { margin: 12px 0 10px; font-size: 38px; font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
.login-brand p { margin: 0; font-size: 15px; line-height: 1.55; }
/* No white slab on the deep ground: the fields sit straight on it and carry
   their own edges, so nothing outshouts the sign-in button. */
.login-card { display: grid; gap: 18px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #fff; animation: card-in 420ms var(--ease) both; }
.login-card .field > span { color: #fff; }
.login-card .field input { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); color: #fff; }
.login-card .field input::placeholder { color: #a5b8ae; }
.login-card .field input:focus { border-color: var(--lime); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(217, 255, 99, .6); }
.login-page .primary-action { margin-top: 6px; background: var(--lime); color: var(--deep); }
.login-page .form-message.error { color: #ff9a91; }
.pass-shell { width: min(100%, 470px); min-height: 100dvh; margin: auto; padding: max(24px, env(safe-area-inset-top)) 15px 30px; }
.pass-shell > .brand { min-height: 44px; margin: 0 4px 26px; color: #fff; }
.pass-shell > .brand small { color: #a5b8ae; }
/* The card is meant to read as something the organisation issued: a printed
   head band, the name given the room, then the QR panel below it. */
.pass-card { overflow: hidden; padding: 0; border-radius: var(--radius-lg); animation: pass-in 480ms var(--ease) both; }
.pass-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 18px; border-bottom: 3px solid var(--lime); background: var(--deep); color: var(--lime); }
.pass-kind { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.pass-status { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 999px; background: rgba(217, 255, 99, .14); color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.pass-status .lucide { width: 16px; height: 16px; }
.pass-body { padding: 20px 18px 22px; }
.pass-card h1 { margin: 0; font-size: clamp(26px, 7.4vw, 32px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; }
.pass-org { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.qr-panel { display: grid; justify-items: center; gap: 12px; margin-top: 20px; padding: 16px 14px 18px; border-radius: var(--radius); background: var(--sand); }
.qr-host { width: min(100%, 250px); padding: 11px; border-radius: 14px; background: #fff; }
.qr-host svg { width: 100%; height: auto; display: block; }
.pass-code { color: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .19em; }
.pass-card dl { display: grid; gap: 0; margin: 18px 0 0; border-top: 1px solid var(--line); text-align: left; }
.pass-card dl div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pass-card dt { color: var(--muted); font-size: 13px; }
.pass-card dd { max-width: 65%; margin: 0; text-align: right; font-size: 13px; font-weight: 800; }
.pass-card .pass-hint { margin-top: 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.push-toggle {
  margin-top: 14px;
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}
.push-toggle svg { width: 18px; height: 18px; }
.push-toggle:active { transform: scale(.985); }
.push-toggle[data-push-state="on"] { background: var(--lime); border-color: var(--btn-edge); color: var(--btn-edge); }
.push-toggle[disabled] { opacity: .55; cursor: default; }

/* Mobile application shell */
.app-page { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
.app-header { position: sticky; z-index: 30; top: 0; min-height: calc(64px + env(safe-area-inset-top)); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 15px 9px; border-bottom: 1px solid rgba(221, 228, 220, .82); background: rgba(243, 245, 239, .91); backdrop-filter: blur(18px) saturate(1.2); }
.app-header .brand-ball { width: 44px; height: 44px; border-radius: 14px; font-size: 18px; }
.app-header .brand { min-height: 44px; }
.app-header .brand-lockup { height: 24px; }
.app-header .brand > span:last-child { min-width: 0; }
.app-header .brand small { display: none; }
.current-event { min-width: 0; max-width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-glass); text-decoration: none; box-shadow: var(--shadow-sm); }
.current-event > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.current-event small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.current-event b { overflow: hidden; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.current-event .lucide { width: 15px; height: 15px; color: var(--muted); }
.event-switch { position: relative; min-width: 0; max-width: 58%; }
.event-switch > summary { max-width: none; cursor: pointer; list-style: none; }
.event-switch > summary::-webkit-details-marker { display: none; }
.event-switch > summary > .lucide:last-child { transition: transform 160ms var(--ease); }
.event-switch[open] > summary > .lucide:last-child { transform: rotate(90deg); }
.event-switch-menu { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(80vw, 320px); max-height: 62vh; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-nav); animation: reveal 160ms var(--ease); }
.event-switch-menu a { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; color: inherit; text-decoration: none; }
.event-switch-menu a > span { min-width: 0; display: grid; gap: 2px; }
.event-switch-menu b { overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.event-switch-menu small { color: var(--muted); font-size: 11px; }
.event-switch-menu .lucide { width: 17px; height: 17px; margin-left: auto; flex: 0 0 auto; color: var(--green-dark); }
.event-switch-menu [aria-current="true"] { background: var(--green-soft); }
.event-switch-menu [aria-current="true"] b { color: var(--green-dark); }
.event-pulse { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(20, 122, 75, .11); }
.app-main { width: min(100%, 1040px); margin: auto; padding: 18px 14px 28px; animation: page-in 300ms var(--ease) both; }
.app-main.narrow { width: min(100%, 720px); }
.screen-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin: 4px 1px 18px; }
.screen-heading h1 { margin: 5px 0 0; font-size: clamp(32px, 9vw, 48px); line-height: 1; letter-spacing: -.055em; }
.screen-heading p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.title-row { display: flex; align-items: center; gap: 11px; }
.title-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 16px; background: var(--lime); color: var(--deep); }
.title-icon .lucide { width: 24px; height: 24px; }
.page-title { align-items: center; }
.page-title .title-row > span:last-child { min-width: 0; }
.page-title .title-row p { margin-top: 5px; }
.panel { margin-top: 14px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 11px; margin-bottom: 11px; }
.panel-title h2 { margin: 2px 0 0; font-size: 18px; letter-spacing: -.035em; }
.panel-title > a, .panel-title > span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--green-dark); font-size: 11px; font-weight: 850; text-decoration: none; }
.action-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: var(--green-soft); color: var(--green-dark); }
.action-icon .lucide { width: 21px; height: 21px; }

/* Home */
.home-main { display: grid; gap: 13px; }
.home-main > * { min-width: 0; }
.event-hero { position: relative; overflow: hidden; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; padding: 19px; border-radius: var(--radius-lg); background: linear-gradient(145deg, #0a2b1d 0%, #154e34 100%); color: #fff; box-shadow: 0 18px 42px rgba(11, 37, 25, .2); }
.event-hero::after { content: ""; position: absolute; width: 190px; height: 190px; right: -76px; bottom: -110px; border: 34px solid rgba(217, 255, 99, .11); border-radius: 50%; }
.event-hero > * { position: relative; z-index: 1; }
.event-art { display: none; }
.event-theme-football { background: linear-gradient(145deg, #082b1c 0%, #12613c 100%); }
.event-theme-football::after { display: none; }
.event-theme-football .event-art { position: absolute; z-index: 0; inset: 0; display: block; opacity: .22; pointer-events: none; }
.event-theme-football .event-art::before { content: ""; position: absolute; top: -14%; right: -5%; bottom: -14%; width: 46%; border: 2px solid #d9ff63; border-radius: 16px 0 0 16px; }
.event-theme-football .event-art::after { content: ""; position: absolute; top: 50%; right: 29%; width: 104px; height: 104px; border: 2px solid #d9ff63; border-radius: 50%; transform: translate(50%, -50%); }
.event-theme-football .event-art i { position: absolute; top: 0; right: 29%; bottom: 0; width: 2px; background: #d9ff63; }
/* Horse racing: the home turn of a track. One oval swung off to the right so
   its bend sweeps the card — outer rail, dashed lane divider, inner rail.
   Selected by event_type, so football keeps its pitch and everything else
   keeps the neutral ring above. */
.event-theme-racing { background: linear-gradient(145deg, #08281a 0%, #16593a 100%); }
.event-theme-racing::after { display: none; }
.event-theme-racing .event-art { position: absolute; z-index: 0; inset: 0; display: block; opacity: .26; pointer-events: none; }
.event-theme-racing .event-art::before,
.event-theme-racing .event-art::after,
.event-theme-racing .event-art i { content: ""; position: absolute; top: 50%; right: -30%; border-radius: 50%; transform: translateY(-50%) rotate(-7deg); }
.event-theme-racing .event-art::before { width: 128%; height: 290%; border: 2px solid #d9ff63; }
.event-theme-racing .event-art i { width: 108%; height: 244%; border: 1px dashed rgba(217, 255, 99, .8); }
.event-theme-racing .event-art::after { width: 88%; height: 198%; border: 2px solid #d9ff63; }
.event-kind { min-height: 29px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #e8f1ec; }
.event-kind .lucide { width: 14px; height: 14px; color: var(--lime); }
.event-hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; color: #bdd0c6; font-size: 10px; font-weight: 760; }
.event-hero-top > span:last-child { margin-left: auto; }
.event-status { min-height: 29px; display: inline-flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #e8f1ec; }
.event-status i { width: 7px; height: 7px; border-radius: 50%; background: #f2be53; }
.event-status.open i { background: var(--lime); box-shadow: 0 0 0 4px rgba(217, 255, 99, .1); }
.event-hero h1 { max-width: 630px; margin: 28px 0 16px; font-size: clamp(30px, 9vw, 54px); line-height: .98; letter-spacing: -.058em; }
.event-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.event-hero-meta span { display: inline-flex; align-items: center; gap: 7px; color: #d5e1da; font-size: 11px; font-weight: 720; }
.event-hero-meta .lucide { width: 16px; height: 16px; color: var(--lime); }
.attendance-overview { padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.attendance-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.attendance-heading > span { display: grid; }
.attendance-heading small { color: var(--muted); font-size: 10px; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.attendance-heading strong { margin-top: 3px; font-size: 31px; line-height: 1; letter-spacing: -.055em; }
.attendance-heading strong em { color: var(--muted); font-size: 16px; font-style: normal; font-weight: 750; }
.attendance-heading > b { min-width: 49px; min-height: 31px; display: grid; place-items: center; border-radius: 999px; background: var(--lime-soft); color: var(--green-dark); font-size: 11px; }
.progress-track { height: 9px; overflow: hidden; margin: 14px 0 11px; border-radius: 999px; background: #e8ece6; }
.progress-track span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--green), #34a96e); transform-origin: left; animation: progress-in 700ms 140ms var(--ease) both; }
.attendance-breakdown { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.attendance-breakdown b { color: var(--ink); }
.home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.home-action { min-width: 0; min-height: 126px; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.home-action:active { transform: scale(.975); }
.home-action > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.home-action > .lucide { display: none; }
.home-action b { font-size: 14px; letter-spacing: -.02em; }
.home-action small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.home-action.primary { border-color: var(--lime); background: var(--lime); color: var(--deep); }
.home-action.primary .action-icon { background: var(--deep); color: var(--lime); }
.home-action.primary small { color: #36523e; }
.recent-panel { margin-top: 0; }
.recent-list { display: grid; }
.recent-list > div { min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; }
.recent-list > div:first-child { border-top: 0; }
.recent-list > div > span { min-width: 0; display: flex; align-items: center; gap: 9px; overflow: hidden; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.recent-list i { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-style: normal; }
.recent-list i .lucide { width: 15px; height: 15px; }
.recent-list time { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.recent-list .recent-empty { min-height: 84px; justify-content: flex-start; color: var(--muted); }
.recent-empty p { margin: 0; font-size: 12px; line-height: 1.4; }
.event-management { margin-top: 0; padding: 0; overflow: hidden; }
.event-management > summary { min-height: 68px; display: flex; align-items: center; gap: 11px; padding: 11px 16px; cursor: pointer; list-style: none; }
.event-management > summary::-webkit-details-marker { display: none; }
.event-management > summary > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.event-management > summary b { font-size: 14px; }
.event-management > summary small { color: var(--muted); font-size: 10px; }
.event-management > summary > .lucide { margin-left: auto; color: var(--muted); transition: transform 180ms var(--ease); }
.event-management[open] > summary > .lucide { transform: rotate(90deg); }
.event-management-body { padding: 0 16px 16px; border-top: 1px solid var(--line); animation: reveal 220ms var(--ease); }
.event-list { display: grid; }
.event-list a { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; }
.event-list a:first-child { border-top: 0; }
.event-list a.selected { color: var(--green-dark); }
.event-list a > div:first-child { min-width: 0; display: grid; gap: 4px; }
.event-list b, .event-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-list b { font-size: 12px; }
.event-list span { color: var(--muted); font-size: 10px; }
.event-count { flex: 0 0 auto; display: grid; text-align: right; }
.event-count strong { font-size: 18px; }
.event-toggle { border-top: 1px solid var(--line); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; margin: 7px 0 0; padding: 0; border: 0; background: none; color: var(--green-dark); font-size: 12px; font-weight: 850; cursor: pointer; }
.text-link.danger { color: var(--red); }
.create-event { border-top: 1px solid var(--line); }
.create-event > summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; list-style: none; color: var(--green-dark); font-size: 12px; font-weight: 850; }
.create-event > summary::-webkit-details-marker { display: none; }
.create-event > summary span { display: inline-flex; align-items: center; gap: 7px; }
.create-event > summary .lucide { width: 17px; height: 17px; }
.create-event form { padding-bottom: 4px; }

/* Attendees and community */
.attendee-tools { position: sticky; z-index: 18; top: calc(64px + env(safe-area-inset-top)); margin: 0 -14px; padding: 8px 14px 10px; border-bottom: 1px solid rgba(221, 228, 220, .78); background: rgba(243, 245, 239, .94); backdrop-filter: blur(16px); }
.attendee-search, .community-search label { position: relative; display: block; }
.attendee-search input, .community-search label input { padding-left: 45px; background: var(--card); box-shadow: var(--shadow-sm); }
.search-icon { position: absolute; z-index: 2; left: 14px; top: 50%; display: grid; place-items: center; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.search-icon .lucide { width: 19px; height: 19px; }
.filter-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.filter-tabs button { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 7px; border: 1px solid var(--control-line); border-radius: 12px; background: var(--card); color: var(--muted); font-size: 10px; font-weight: 820; cursor: pointer; transition: border-color 150ms, background 150ms, color 150ms, transform 150ms var(--ease); }
.filter-tabs button:active { transform: scale(.97); }
.filter-tabs button[aria-pressed="true"] { border-color: var(--deep); background: var(--deep); color: var(--on-deep); }
.filter-tabs b { color: var(--ink); font-size: 11px; }
.filter-tabs button[aria-pressed="true"] b { color: var(--lime); }
.list-result { margin: 11px 2px 8px; color: var(--muted); font-size: 10px; font-weight: 760; }
.attendee-list, .people-list { display: grid; gap: 8px; }
.attendee-card, .people-list article { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 17px; background: var(--card); box-shadow: var(--shadow-sm); }
.attendee-card { transition: opacity 150ms, transform 180ms var(--ease), border-color 180ms, background 180ms; }
.attendee-card.checking { opacity: .68; }
.attendee-card.checked { border-color: #cde2d5; background: #f6fbf7; }
.attendee-card.checkin-success { animation: checkin-flash 600ms var(--ease); }
.person-avatar { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: var(--green-soft); color: var(--green-dark); font-size: 14px; font-weight: 900; }
.person-main { min-width: 0; display: grid; gap: 3px; }
.person-main b, .person-main span, .person-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-main b { font-size: 12px; }
.person-main span, .person-main small { color: var(--muted); font-size: 9px; }
.attendee-card .person-main { flex: 1; }
.attendee-action { flex: 0 0 auto; margin-left: auto; text-align: right; }
.attendee-action form { display: grid; justify-items: end; }
.attendee-action .form-message { max-width: 130px; margin-top: 5px; font-size: 9px; }
.attendee-checkin { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 0; border-radius: 13px; background: var(--lime); color: var(--deep); font-size: 11px; font-weight: 900; cursor: pointer; transition: transform 150ms var(--ease), opacity 150ms; }
.attendee-checkin .lucide { width: 16px; height: 16px; }
.attendee-checkin:active { transform: scale(.96); }
.attendee-checkin:disabled { opacity: .6; cursor: wait; }
.attendee-await { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.attendee-await .lucide { width: 15px; height: 15px; opacity: .8; }
.attendee-status { display: flex; align-items: center; gap: 6px; color: var(--green-dark); font-size: 10px; font-weight: 900; }
.attendee-status > .lucide { width: 17px; height: 17px; }
.attendee-status > span { display: grid; gap: 2px; }
.attendee-status small { color: var(--muted); font-size: 8px; font-weight: 650; }
.attendee-empty { grid-column: 1 / -1; margin-top: 5px; }
.search-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 13px; }
.search-bar button { min-width: 74px; min-height: 52px; border: 0; border-radius: 14px; background: var(--deep); color: var(--on-deep); font-size: 12px; font-weight: 850; cursor: pointer; }
.people-list article { min-height: 68px; }
.person-count { margin-left: auto; text-align: right; }
.person-count strong { display: block; font-size: 17px; }
.person-count span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.empty-card { padding: 30px 20px; text-align: center; }
.empty-card > .action-icon { margin: auto; }
.empty-card h1, .empty-card h2 { margin: 9px 0 6px; letter-spacing: -.045em; }
.empty-card p { max-width: 440px; margin: 0 auto 17px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.closed-card .action-icon { background: #fdeae8; color: var(--red); }
.desk-actions { display: grid; gap: 8px; }
.desk-actions .primary-action { margin: 0; }
.staff-list { display: grid; }
.staff-list > div { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.staff-list > div:first-child { border-top: 0; }
.staff-list span { min-width: 0; display: grid; gap: 3px; }
.staff-list b, .staff-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-list b { font-size: 12px; }
.staff-list small { color: var(--muted); font-size: 9px; }
.staff-list em { padding: 6px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 8px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.compact-form > summary { min-height: 44px; cursor: pointer; font-weight: 850; }
.compact-form form { padding-top: 15px; }

/* Raised five-item bottom navigation */
.bottom-nav { position: fixed; z-index: 60; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; height: 70px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; padding: 4px 5px; border: 1px solid var(--line); border-radius: 23px; background: var(--nav-bg); box-shadow: var(--shadow-nav); backdrop-filter: blur(20px) saturate(1.25); }
.nav-item { min-width: 0; min-height: 58px; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 16px; color: var(--muted); font-size: 10px; font-weight: 800; text-decoration: none; transition: color 160ms, transform 160ms var(--ease), background 160ms; }
.nav-item:active { transform: scale(.94); }
.nav-icon { width: 29px; height: 27px; display: grid; place-items: center; border-radius: 10px; }
.nav-icon .lucide { width: 21px; height: 21px; }
.nav-item.active { color: var(--green-dark); }
.nav-item.active .nav-icon { background: var(--green-soft); }
.nav-primary { position: relative; align-content: end; padding-bottom: 4px; color: var(--deep); }
.nav-primary:active { transform: none; }
.nav-fab { position: absolute; top: -21px; left: 50%; width: 60px; height: 60px; display: grid; place-items: center; border: 6px solid var(--canvas); border-radius: 50%; background: var(--lime); color: var(--deep); box-shadow: 0 12px 24px rgba(11, 37, 25, .2); transform: translateX(-50%); animation: fab-in 420ms var(--ease) both; transition: transform 160ms var(--ease), background 160ms; }
.nav-primary:active .nav-fab { transform: translateX(-50%) scale(.94); }
.nav-primary.active .nav-fab { background: var(--deep); color: var(--lime); }
.nav-fab .lucide { width: 25px; height: 25px; stroke-width: 2.4; }
.nav-more-trigger { width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.nav-more-trigger.active, .nav-more-trigger[aria-expanded="true"] { color: var(--green-dark); }
.nav-more-trigger.active .nav-icon, .nav-more-trigger[aria-expanded="true"] .nav-icon { background: var(--green-soft); }
.nav-sheet-open { overflow: hidden; }
.nav-sheet-open .bottom-nav { visibility: hidden; opacity: 0; pointer-events: none; }
.more-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--ink); }
.more-dialog::backdrop { background: rgba(6, 20, 13, .3); animation: backdrop-in 180ms ease both; }
.more-sheet { position: absolute; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; max-height: calc(100dvh - 20px - env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; padding: 9px 15px calc(15px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 28px; background: var(--card); color: var(--ink); box-shadow: 0 10px 30px rgba(11, 37, 25, .16); animation: sheet-up 220ms var(--ease) both; }
.sheet-handle { width: 38px; height: 4px; margin: 1px auto 13px; border-radius: 999px; background: #d9dfda; }
.more-profile { position: sticky; z-index: 2; top: -9px; display: flex; align-items: center; gap: 11px; margin: 0 -2px; padding: 12px 5px 14px; border-bottom: 1px solid var(--line); background: var(--card); }
.profile-avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: var(--deep); color: var(--lime); font-size: 15px; font-weight: 900; }
.more-profile > span:nth-child(2) { min-width: 0; flex: 1; display: grid; gap: 3px; }
.more-profile b { font-size: 13px; }
.more-profile small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.sheet-close { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; margin-left: auto; border: 0; border-radius: 14px; background: var(--soft); color: var(--muted); cursor: pointer; }
.sheet-close .lucide { width: 20px; height: 20px; }
.more-links { display: grid; padding: 7px 0; }
.more-links > a { min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 7px 2px; border-bottom: 1px solid var(--line); text-decoration: none; }
.more-links > a > span:nth-child(2) { min-width: 0; display: grid; flex: 1; gap: 3px; }
.more-links > a b { font-size: 12px; }
.more-links > a small { color: var(--muted); font-size: 10px; }
.more-links > a > .lucide { width: 16px; height: 16px; color: #9aa69f; }
.more-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: var(--green-soft); color: var(--green-dark); }
.more-icon .lucide { width: 18px; height: 18px; }
/* Header theme switch: icon only, 44px, no border. Shows the theme you would
   switch TO. app.js owns the state via [data-theme-toggle]. */
.theme-btn { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.theme-btn > span { display: grid; }
.theme-btn .lucide { width: 19px; height: 19px; }
.theme-btn:active { transform: scale(.92); }
.header-actions { display: flex; align-items: center; gap: 2px; }
.scanner-page .theme-btn { color: #d5dfd9; }
.theme-icon-sun { display: none !important; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: grid !important; }
.more-logout button { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 11px; padding: 0 2px; border: 0; background: transparent; color: var(--red); font-size: 12px; font-weight: 850; cursor: pointer; }
.more-logout .more-icon { background: #fdeae8; color: var(--red); }

/* Scanner keeps the next person moving */
.scanner-page { height: 100dvh; overflow: hidden; background: #06140d; color: #fff; }
.scanner-page .app-header { position: absolute; right: 0; left: 0; z-index: 30; border: 0; background: linear-gradient(rgba(3, 12, 8, .82), transparent); color: #fff; backdrop-filter: none; }
.scanner-page .app-header .brand small { color: #a5b8ae; }
.scanner-page .current-event { border-color: var(--lime); background: rgba(8, 28, 19, .82); color: #fff; box-shadow: none; }
.scanner-page .current-event small { color: var(--lime) !important; }
.scanner-page .current-event small, .scanner-page .current-event .lucide { color: #a5b8ae; }
.scanner-page .event-pulse { background: var(--lime); }
.scanner-page .bottom-nav { display: none; }
.scanner-shell { height: 100dvh; display: grid; grid-template-rows: minmax(55dvh, 1fr) auto; }
.scanner-stage { position: relative; min-height: 0; overflow: hidden; background: #06140d; }
.scanner-stage video { width: 100%; height: 100%; display: block; object-fit: cover; }
.scanner-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(3, 12, 8, .35), transparent 30%, transparent 66%, rgba(3, 12, 8, .74)); }
.scan-frame { position: absolute; z-index: 3; top: 48%; left: 50%; width: min(68vw, 290px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.scan-frame i { position: absolute; width: 42px; height: 42px; border-color: var(--lime); border-style: solid; }
.scan-frame i:nth-child(1) { top: 0; left: 0; border-width: 4px 0 0 4px; border-radius: 15px 0 0; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-width: 4px 4px 0 0; border-radius: 0 15px 0 0; }
.scan-frame i:nth-child(3) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-radius: 0 0 15px; }
.scan-frame i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 15px; }
.scanner-topline { position: absolute; z-index: 5; top: max(73px, calc(env(safe-area-inset-top) + 62px)); right: 13px; left: 13px; display: flex; justify-content: space-between; pointer-events: none; }
.sync-pill, .queue-pill { min-height: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(6, 20, 13, .72); color: #d5dfd9; font-size: 9px; font-weight: 850; backdrop-filter: blur(10px); }
.sync-pill.online { color: var(--lime); }
.sync-pill.offline { color: #ffd47a; }
.sync-pill.warning { color: #ffd47a; }
.sync-pill.auth { color: #ff9a91; }
.camera-start { position: absolute; z-index: 8; top: 50%; left: 50%; min-height: 52px; padding: 0 19px; border: 0; border-radius: 15px; background: var(--lime); color: var(--deep); font-weight: 900; transform: translate(-50%, -50%); }
.scan-feedback { position: absolute; z-index: 6; right: 13px; bottom: 13px; left: 13px; min-height: 72px; display: grid; align-content: center; gap: 3px; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: rgba(6, 20, 13, .84); backdrop-filter: blur(15px); transition: background 120ms, transform 120ms; }
.scan-feedback span { color: #a5b8ae; font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.scan-feedback strong { overflow: hidden; font-size: 18px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.scan-feedback.success { background: rgba(13, 104, 62, .96); transform: scale(1.012); }
.scan-feedback.warning { background: rgba(126, 81, 7, .96); }
.scan-feedback.error { background: rgba(128, 28, 24, .96); }
.scanner-rail { z-index: 7; max-height: 39dvh; overflow: auto; margin-top: -13px; padding: 15px 13px calc(17px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--canvas); color: var(--ink); }
.scanner-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.scanner-stats div { min-width: 0; display: grid; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.scanner-stats strong { font-size: 20px; letter-spacing: -.04em; }
.scanner-stats span { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.scanner-attendees { min-height: 44px !important; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 12px; background: var(--green-soft); color: var(--green-dark) !important; }
.scanner-attendees .lucide { width: 16px; height: 16px; }
.scan-list { display: grid; }
.scan-item { min-height: 47px; display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); }
.scan-item::before { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--green); }
.scan-item.warning::before { background: #d69018; }
.scan-item.error::before { background: var(--red); }
.scan-item div { min-width: 0; display: grid; }
.scan-item b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.scan-item small { color: var(--muted); font-size: 8px; }
.scan-item time { margin-left: auto; color: var(--muted); font-size: 8px; }

html[data-theme="dark"] .app-header { border-bottom-color: var(--line); background: rgba(7, 18, 13, .92); }
html[data-theme="dark"] .attendee-tools { border-bottom-color: var(--line); background: rgba(7, 18, 13, .95); }
html[data-theme="dark"] .primary-action { background: var(--lime); color: var(--deep); }
html[data-theme="dark"] .choice input:checked + span { border-color: var(--lime); background: var(--lime); color: var(--deep); }
/* On the dark ground the deep-green blocks sit too close to the canvas, so the
   flat blocks pick up a hairline. */
html[data-theme="dark"] .photo,
html[data-theme="dark"] .programme:nth-child(4n+1),
html[data-theme="dark"] .band-deep { box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="dark"] .login-page .primary-action { background: var(--lime); color: var(--deep); }
html[data-theme="dark"] .event-hero { border: 1px solid #315c45; box-shadow: 0 18px 42px rgba(0, 0, 0, .32); }
html[data-theme="dark"] .progress-track { background: #263b30; }
html[data-theme="dark"] .attendee-card.checked { border-color: #315c45; background: #122a1d; }
html[data-theme="dark"] .closed-card .action-icon,
html[data-theme="dark"] .more-logout .more-icon { background: #3a1c1a; }
html[data-theme="dark"] .more-dialog::backdrop { background: rgba(0, 0, 0, .62); }
html[data-theme="dark"] .sheet-handle { background: #53675c; }
html[data-theme="dark"] .scanner-page .app-header { background: linear-gradient(rgba(3, 12, 8, .9), transparent); }
html[data-theme="dark"] .checkin-dialog::backdrop { background: rgba(0, 0, 0, .72); }
html[data-theme="dark"] .checkin-meta { border-color: #2a4436; }
html[data-theme="dark"] .checkin-dialog[data-state="already"] .checkin-mark { background: #3a2a10; }

@media (max-width: 240px) {
  .bottom-nav { grid-template-columns: repeat(3, minmax(44px, 1fr)); }
  .bottom-nav > .nav-item:nth-child(2),
  .bottom-nav > .nav-item:nth-child(4) { display: none; }
  .nav-item { font-size: 9px; }
  .bottom-nav[data-active="attendees"] .nav-more-trigger { color: var(--green-dark); }
  .bottom-nav[data-active="attendees"] .nav-more-trigger .nav-icon { background: var(--green-soft); }
  .event-hero-top { align-items: flex-start; flex-direction: column; }
  .event-hero-top > span:last-child { margin-left: 0; }
}

@media (max-width: 350px) {
  .app-header .brand > span:last-child { display: none; }
}

@keyframes page-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes pass-in { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes fab-in { from { opacity: 0; transform: translateX(-50%) translateY(9px) scale(.84); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes sheet-up { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes progress-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes checkin-flash { 0% { transform: scale(1); } 42% { transform: scale(1.018); background: var(--lime-soft); } 100% { transform: scale(1); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 680px) {
  /* Masthead keeps the same optical left edge as the content column. */
  .public-header { padding-inline: max(16px, calc((100% - 660px) / 2 + 20px)); }
  .public-header .brand-lockup { height: 36px; }
  .event-intro { padding: 52px 0 40px; }
  .event-intro h1 { margin-bottom: 28px; }
  .form-card, .panel { padding: 25px; }
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide { grid-column: 1 / -1; }
  .login-shell { max-width: 980px; grid-template-columns: 1fr 1fr; align-items: center; margin: auto; }
  .app-main { padding: 25px 22px 36px; }
  .bottom-nav { right: auto; left: 50%; width: 500px; transform: translateX(-50%); }
  .more-sheet { right: auto; left: 50%; width: 480px; transform: translateX(-50%); animation: sheet-up-wide 220ms var(--ease) both; }
  .home-main { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .event-hero, .attendance-overview, .event-management { grid-column: 1 / -1; }
  .home-actions { align-self: stretch; }
  .recent-panel { height: 100%; }
  .attendee-tools { top: calc(64px + env(safe-area-inset-top)); margin-right: -22px; margin-left: -22px; padding-right: 22px; padding-left: 22px; }
  .attendee-card, .people-list article { padding: 13px 15px; }
  .scanner-shell { grid-template-rows: 1fr; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .55fr); }
  .scanner-rail { max-height: 100dvh; margin: 0; padding-top: max(86px, calc(env(safe-area-inset-top) + 76px)); border-radius: 28px 0 0 28px; }
  .scan-frame { width: min(38vw, 340px); }
}

@media (min-width: 1024px) {
  .event-hero { min-height: 220px; padding: 25px; }
  .attendance-overview { padding: 22px; }
  .app-main { padding-top: 30px; }
}

/* ======================================================================
   Desktop staff portal. The phone shell stops being a phone shell: the
   masthead gains height, the floating tab bar becomes a persistent left
   rail, and content spreads instead of sitting in one narrow column.
   Everything below 1080px is the mobile build, untouched.
   ====================================================================== */
@media (min-width: 1080px) {
  :root { --rail: 252px; --masthead: 76px; }

  /* --- Masthead ------------------------------------------------------ */
  .app-header { height: var(--masthead); min-height: var(--masthead); align-items: center; gap: 18px; padding: 0 clamp(20px, 2.2vw, 34px); }
  .app-header .brand-lockup { height: 30px; }
  .app-header .brand-ball { width: 46px; height: 46px; border-radius: 15px; font-size: 20px; }
  .app-header .brand small { display: block; }
  .event-switch { max-width: 400px; margin-left: auto; }
  .current-event { min-height: 48px; padding: 7px 11px 7px 14px; }
  .current-event b { font-size: 13px; }
  .current-event small { font-size: 10px; }
  /* The masthead and the rail are one chrome surface against the canvas,
     so the blur-over-cream tint goes and both themes get a flat card ground. */
  .app-page .app-header,
  html[data-theme="dark"] .app-page .app-header { border-bottom: 1px solid var(--line); background: var(--card); backdrop-filter: none; }

  /* --- Persistent left rail ------------------------------------------ */
  .app-page .bottom-nav {
    position: fixed;
    top: var(--masthead); right: auto; bottom: 0; left: 0;
    width: var(--rail); height: auto;
    transform: none;
    display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    overflow-y: auto;
    padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
    border: 0; border-right: 1px solid var(--line); border-radius: 0;
    background: var(--card);
    box-shadow: none;
    backdrop-filter: none;
  }
  .app-page .nav-item { min-height: 48px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px; border-radius: 12px; font-size: 13px; text-align: left; }
  .app-page .nav-item:hover { background: var(--soft); color: var(--ink); }
  .app-page .nav-item:active { transform: none; }
  .app-page .nav-item.active { background: var(--green-soft); }
  .app-page .nav-icon { width: 30px; height: 30px; background: none !important; }
  /* In a rail the primary action does not need to float; it is simply the
     loudest row. The circular FAB becomes a normal leading icon. */
  .app-page .nav-primary { position: static; align-content: center; padding: 0 12px; background: var(--lime); color: var(--deep); }
  .app-page .nav-primary:hover { background: var(--lime); }
  .app-page .nav-fab { position: static; width: 30px; height: 30px; border: 0; border-radius: 10px; background: var(--deep); color: var(--lime); transform: none; animation: none; box-shadow: none; }
  .app-page .nav-primary:active .nav-fab { transform: none; }
  .app-page .nav-fab .lucide { width: 19px; height: 19px; }
  .app-page .nav-primary.active { background: var(--deep); color: var(--lime); }
  .app-page .nav-primary.active .nav-fab { background: var(--lime); color: var(--deep); }
  .app-page .nav-more-trigger { margin-top: auto; }
  /* The rail is the navigation now, so it stays put while the sheet is open. */
  .app-page.nav-sheet-open .bottom-nav { visibility: visible; opacity: 1; pointer-events: auto; }
  .app-page .more-sheet { right: auto; left: calc(var(--rail) + 12px); bottom: 14px; width: 340px; max-width: none; max-height: calc(100dvh - var(--masthead) - 28px); border-radius: 20px; transform: none; animation: sheet-up 200ms var(--ease) both; }

  /* --- Content ------------------------------------------------------- */
  .app-page { padding-bottom: 0; }
  .app-page .app-main { width: auto; max-width: 1460px; margin: 0 0 0 max(var(--rail), calc((100% - 1460px) / 2)); padding: 30px clamp(22px, 2.4vw, 40px) 56px; }
  .app-page .app-main.narrow {
    max-width: 1120px;
    margin-left: max(var(--rail), calc((100% - 1120px) / 2));
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, .6fr);
    align-items: start; gap: 16px;
  }
  .app-page .app-main.narrow > .screen-heading,
  .app-page .app-main.narrow > .empty-card { grid-column: 1 / -1; }
  .app-page .app-main.narrow > .panel { margin-top: 0; }

  /* Directories become a card grid rather than one very wide row per person. */
  .attendee-list, .people-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
  .people-list > .empty-card { grid-column: 1 / -1; }
  .attendee-tools,
  html[data-theme="dark"] .attendee-tools {
    top: var(--masthead);
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
    margin-inline: calc(clamp(22px, 2.4vw, 40px) * -1);
    padding: 12px clamp(22px, 2.4vw, 40px);
    border-bottom: 1px solid var(--line);
    background: var(--canvas);
    backdrop-filter: none;
  }
  .attendee-search { flex: 1 1 240px; max-width: 460px; }
  .filter-tabs { flex: 0 0 auto; margin-top: 0; margin-left: auto; grid-template-columns: repeat(3, auto); }
  .filter-tabs button { padding: 0 14px; font-size: 11px; }
  .list-result { margin-top: 14px; }
  .search-bar { max-width: 560px; }
  /* The action cards keep their own height instead of stretching to match
     the arrivals feed beside them. */
  .home-main .home-actions { align-self: start; }

  /* --- Scanner ------------------------------------------------------- */
  .scanner-shell { grid-template-columns: minmax(0, 1fr) clamp(340px, 26%, 470px); }
  .scanner-rail { padding-top: calc(var(--masthead) + 16px); }
  .scan-frame { width: min(30vw, 380px); }
}

@media (min-width: 1440px) {
  /* Enough room for the event, the numbers, the actions and the arrivals feed
     to sit on one screen instead of stacking down a column. */
  .home-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .home-main .event-hero { grid-column: 1 / -1; }
  .home-main .attendance-overview { grid-column: auto; }
  /* The arrivals feed is the tall thing, so it runs down the right and the
     events list fills the space it leaves rather than a band of empty page. */
  .home-main .recent-panel { grid-column: 3; grid-row: span 2; }
  .home-main .event-management { grid-column: 1 / span 2; }
}

@keyframes sheet-up-wide { from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.985); } to { opacity: 1; transform: translateX(-50%); } }

/* Check-in confirmation sheet */
.checkin-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--ink); }
.checkin-dialog[open] { display: grid; place-items: center; padding: 14px; }
.checkin-dialog::backdrop { background: rgba(6, 20, 13, .45); animation: backdrop-in 180ms ease both; }
.checkin-sheet { display: grid; justify-items: center; gap: 10px; width: 100%; max-width: 380px; max-height: calc(100dvh - 28px); overflow: auto; padding: 26px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); text-align: center; box-shadow: var(--shadow-md); animation: sheet-up 220ms var(--ease) both; }
.checkin-mark { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.checkin-mark svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.checkin-mark-ring { stroke-dasharray: 145; stroke-dashoffset: 0; opacity: .28; }
.checkin-mark-tick { stroke-dasharray: 40; stroke-dashoffset: 0; }
.checkin-mark.drawing .checkin-mark-ring { animation: checkin-ring 620ms var(--ease) both; }
.checkin-mark.drawing .checkin-mark-tick { animation: checkin-tick 420ms var(--ease) 400ms both; }
.checkin-kicker { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-dark); }
.checkin-name { font-size: 21px; line-height: 1.2; font-weight: 900; }
.checkin-meta { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 4px 0 2px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; text-align: left; }
.checkin-meta dt { color: var(--muted); }
.checkin-meta dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.checkin-ready { width: 100%; min-height: 52px; margin-top: 6px; border: 0; border-radius: 999px; background: var(--lime); color: var(--deep); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.checkin-ready:active { transform: scale(.98); }
.checkin-dialog[data-state="already"] .checkin-kicker { color: var(--amber); }
.checkin-dialog[data-state="already"] .checkin-mark { background: #fdf1dc; color: var(--amber); }

@keyframes checkin-ring { from { stroke-dashoffset: 145; } to { stroke-dashoffset: 0; } }
@keyframes checkin-tick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .more-dialog::backdrop { animation: none !important; }
  .checkin-dialog::backdrop { animation: none !important; }
}

/* ======================================================================
   Membership site — two blocks: what this is, and join.
   `.site` spans the viewport, `.wrap` holds the reading column, so the deep
   closing block runs edge to edge without any negative-margin tricks.
   ====================================================================== */
.site { padding-bottom: 0; }
.wrap { width: min(100%, 660px); margin: 0 auto; padding: 0 20px; }

/* --- Photography ------------------------------------------------------
   ONE convention: drop a real photo at assets/photos/<name>.jpg and it fills
   its slot with no markup or layout change. The file is the topmost
   background layer, so while it is absent the brand placeholder underneath
   shows through and still looks deliberate.
     photos/founder.jpg  1:1 square — Senator Abdulaziz Yari, chest-up
   Slots are decorative (aria-hidden); the page reads correctly without them.
   -------------------------------------------------------------------- */
.photo {
  display: block;
  background-color: var(--deep);
  background-image:
    var(--photo, none),
    url(brand/ysi-mark-lime.svg?v=1),
    repeating-linear-gradient(135deg, rgba(239, 231, 214, .05) 0 10px, transparent 10px 24px);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center, center bottom 22%, center;
  background-size: cover, 74px auto, auto;
}
/* A circle, not an arch: the square portrait fits it whole — cap, face and
   shoulders all inside — and a replacement photo crops the same way. */
.photo-founder { --photo: url(photos/founder.jpg); aspect-ratio: 1 / 1; border-radius: 50%; }

/* --- Block one: what this is, and join -------------------------------- */
.site-hero { padding: 30px 0 40px; animation: page-in 400ms var(--ease) both; }
.site-locale { margin: 0; color: var(--green-dark); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.site-hero h1 { margin: 14px 0 0; font-size: clamp(36px, 10.4vw, 60px); font-weight: 800; line-height: 1.0; letter-spacing: -.036em; text-wrap: balance; }
.site-hero h1 em, .event-intro h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.site-lead { margin: 18px 0 0; max-width: 32ch; color: var(--muted); font-size: 16px; line-height: 1.55; }
.site-hero .primary-action { width: auto; margin-top: 28px; }
/* The next event rides in the hero as one line instead of owning a section. */
.site-next { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink); }
.site-next > span { min-width: 0; display: grid; gap: 2px; }
.site-next .lucide { width: 18px; height: 18px; flex: 0 0 auto; color: var(--green-dark); }
.site-next b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.site-next small { color: var(--muted); font-size: 13px; }

/* --- Block two: who is behind it, and the footer ---------------------- */
.band-deep { padding: 34px 0 30px; background: var(--deep); color: #fff; }
/* Portrait and name are one unit, side by side: a small kicker beside a
   portrait sized to the name, not a posted avatar with a caption under it. */
.site-close .wrap { display: grid; grid-template-columns: clamp(92px, 25vw, 132px) minmax(0, 1fr); align-items: center; gap: 8px 18px; }
.site-close .photo { width: 100%; }
.site-founder-name { margin: 0; color: #cfc4ad; font-size: 11px; font-weight: 800; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; }
.site-founder-name b { display: block; margin-top: 7px; color: #fff; font-size: clamp(22px, 6.2vw, 30px); font-weight: 800; letter-spacing: -.028em; line-height: 1.1; text-transform: none; }
.site-footer { grid-column: 1 / -1; display: grid; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(239, 231, 214, .22); }
.site-footer .brand-lockup { height: 22px; background: var(--lime); }
.site-footer p { max-width: 42ch; margin: 0; color: #cfc4ad; font-size: 12px; line-height: 1.55; }
.footer-contact { list-style: none; display: grid; gap: 5px; margin: 0; padding: 0; color: #cfc4ad; font-size: 12px; line-height: 1.5; }
.footer-contact a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- Attendance history (member pass) --------------------------------- */
.history-list { list-style: none; margin: 0; padding: 0; }
.history-card { margin: 22px 4px 0; }
.history-card h2 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a5b8ae; }
.history-card .muted { color: #a5b8ae; font-size: 14px; }
.history-list li { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.history-list li:last-child { border-bottom: 0; }
.history-list b { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.history-list span { color: #a5b8ae; font-size: 13px; }

@media (min-width: 680px) {
  .site-hero { padding: 52px 0 56px; }
  .site-close .wrap { gap: 8px 30px; }
}