@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Dancing+Script:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Raleway:wght@100;200;300;400&display=swap");

/* ===============================
   ONDECK COLOR PALETTE
=============================== */
:root {
  --color-bg: #f5f7f9;          /* light page background */
  --color-card: #f8fafc;        /* card surface */
  --color-card-active: #effaf4; /* subtle active tint */
  --color-border: #e2e8f0;      /* subtle border for separation */
  --color-accent: #56b2bb;      /* buttons / toggles / highlights */
  --color-text: #1f2937;        /* main text */
  --color-muted: #64748b;       /* secondary text */
  --color-dark: #0b1426;        /* nav/footer background */
  --color-nav: rgba(11, 20, 38, 0.85);
  --color-nav-border: rgba(255, 255, 255, 0.12);
  --status-in: #22c55e;
  --status-in-light: #5de292;
  --status-out: #94a3b8;
  --splash-bg: #0b1220;
  --splash-foreground: #ffffff;
  --splash-muted: rgba(148, 163, 184, 0.9);
  --splash-accent: #28b7bf;
  --splash-glow: #18aeb4;
  --board-edge: clamp(36px, 5vw, 72px);
  --shadow-card: 0 2px 8px -2px rgba(15, 23, 42, 0.08),
                 0 10px 24px -12px rgba(15, 23, 42, 0.14);
}

/* ===============================
   GLOBAL LAYOUT
=============================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  margin: 0;
  font-family: "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-synthesis: none;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body.safety-modal-open {
  overflow: hidden;
}

body.visitor-wizard-open {
  overflow: hidden;
}

body.visitor-wizard-open main,
body.visitor-wizard-open .board-shell {
  visibility: hidden;
}

body.visitor-wizard-open .floating-nav,
body.visitor-wizard-open .floating-action-btn {
  display: none;
}

body.ios-standalone .floating-nav {
  bottom: calc(16px + env(safe-area-inset-bottom, 0));
}

.ondock-waves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ondock-waves::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(86, 178, 187, 0.28), rgba(86, 178, 187, 0.12));
  background-repeat: repeat;
  background-size: cover;
  opacity: 0.3;
}

.ondeck-wave {
  position: absolute;
  width: 140%;
  height: 220px;
  left: -20%;
  border-radius: 50%;
  opacity: 0.6;
  animation: ondeck-drift 22s infinite ease-in-out;
}

.ondeck-wave--back {
  bottom: -70px;
  background: linear-gradient(90deg, transparent, rgba(86, 178, 187, 0.18), transparent);
  animation-duration: 28s;
}

.ondeck-wave--mid {
  bottom: -40px;
  background: linear-gradient(90deg, transparent, rgba(86, 178, 187, 0.3), transparent);
}

.ondeck-wave--front {
  bottom: -20px;
  background: linear-gradient(90deg, transparent, rgba(86, 178, 187, 0.45), transparent);
  animation-duration: 16s;
}

@keyframes ondeck-drift {
  0%, 100% { transform: translateY(0) translateX(0) scaleX(1); }
  50% { transform: translateY(-35px) translateX(25px) scaleX(1.04); }
}


.welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  color: #f5faff;
  display: flex;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  opacity: 1;
  transition: opacity 0.18s ease;
  /* Fallback gradient while background images load */
  background: linear-gradient(135deg, #0b1e2e 0%, #0d2a3d 50%, #0f3347 100%);
  /* --ui-unit = the on-screen size of one "reference pixel". Every
     welcome-screen dimension below is sized as calc(<reference px> *
     var(--ui-unit)), so the whole composition scales as ONE proportional
     unit and looks identical on every iPad regardless of logical
     resolution. Reference design is a 1024x768 (classic landscape iPad);
     min() picks the limiting dimension so it "contains" in either
     orientation. At exactly 1024x768, --ui-unit == 1px (look unchanged);
     on a 13" (1366x1024 landscape) it's ~1.33, on a Mini ~0.97, etc.
     The admin preview sets the same variable from its box size so the
     preview is faithful. Plan: roll this --ui-unit pattern out to the
     rest of the iPad app — see ipad-ui-scale-unification memory. */
  --ui-unit: min(calc(100vw / 1024), calc(100vh / 768));
  /* Default pill chrome (used by .welcome-security and any future pill).
     Each design can override via its own --w-pill-* tokens; these defaults
     match Classic (frosted white, suitable over the photo). */
  --w-pill-bg: rgba(255, 255, 255, 0.14);
  --w-pill-border: rgba(255, 255, 255, 0.22);
  --w-pill-fg: #fff;
}

/* PORTRAIT: re-anchor --ui-unit to a portrait 768x1024 reference. The landscape
   formula above (min(100vw/1024, 100vh/768)) collapses to ~0.75x in portrait
   because min() picks the narrow 100vw/1024 term — shrinking the whole screen.
   Because every dimension is calc(N * var(--ui-unit)), this ONE override
   rescales the entire composition to full size in portrait. Gated on the JS-set
   body.app-portrait class (updateOrientationClass) — @media (orientation:) does
   NOT match in this iPad WKWebView. */
body.app-portrait .welcome-screen {
  --ui-unit: min(calc(100vw / 768), calc(100vh / 1024));
}

.welcome-screen.hidden {
  display: none;
}

/* Admin toggle: hide the small sub-label under each button when off. */
.welcome-screen[data-welcome-subtitles="off"] .welcome-cta__sub,
.welcome-screen[data-welcome-subtitles="off"] .welcome-action__sub {
  display: none !important;
}

/* A sub-label the admin cleared. Each design turns its own subs on with a
   [data-welcome-design] rule, so this needs the extra class to out-weigh
   them — otherwise the emptied line keeps its height and leaves a gap. */
.welcome-screen .welcome-cta .welcome-cta__sub:empty,
.welcome-screen .welcome-action .welcome-action__sub:empty {
  display: none;
}

.welcome-screen.is-fading {
  opacity: 0;
}

.welcome-screen__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #0b172a;
  opacity: 0;
  transition: none;
}

.welcome-screen__bg.is-visible {
  opacity: 1;
}

.welcome-screen__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.6));
}

.welcome-screen__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(1100 * var(--ui-unit));
  padding: calc(32 * var(--ui-unit) + env(safe-area-inset-top, 0))
    calc(36 * var(--ui-unit) + env(safe-area-inset-right, 0))
    calc(28 * var(--ui-unit) + env(safe-area-inset-bottom, 0))
    calc(36 * var(--ui-unit) + env(safe-area-inset-left, 0));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: calc(20 * var(--ui-unit));
  margin: 0 auto;
}

/* ========== Security level pill — ONE reusable design across every welcome
   screen. Tappable read-only badge for the current ISPS level. The pill
   chrome (background / border / label colour) comes from --w-pill-*
   tokens set per design; the level indicator (dot + filled number badge)
   is coloured by --sl-color (the live security-level colour set by JS).
   Sits in flow at the top of the welcome content. Horizontal placement
   is controlled by --left/--center/--right via align-self. */
.welcome-security {
  position: static;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--ui-unit));
  padding: calc(5 * var(--ui-unit)) calc(6 * var(--ui-unit)) calc(5 * var(--ui-unit)) calc(14 * var(--ui-unit));
  border-radius: 999px;
  background: var(--w-pill-bg, rgba(255, 255, 255, 0.14));
  border: 1px solid var(--w-pill-border, rgba(255, 255, 255, 0.22));
  color: var(--w-pill-fg, #fff);
  backdrop-filter: blur(calc(14 * var(--ui-unit)));
  -webkit-backdrop-filter: blur(calc(14 * var(--ui-unit)));
  box-shadow: none;
  cursor: pointer;
}
.welcome-security:active { transform: scale(0.97); }
.welcome-security.hidden { display: none; }
/* Horizontal placement (in flow now) — set from welcome-config security_position. */
.welcome-security--left   { align-self: flex-start; }
.welcome-security--center { align-self: center; }
.welcome-security--right  { align-self: flex-end; }
/* Glass/solid modifiers no longer drive the chrome (tokens do); kept as
   no-ops for backwards-compat with the JS that still toggles them. */
.welcome-security--glass, .welcome-security--solid { /* no-op */ }

/* ── Badge row: souls + security, side by side ─────────────────────────
   The ROW takes the security_position placement; inside it the badges are
   plain flex children (their old --left/right classes only ever set
   align-self, which is the cross axis here — pinned back to center). */
.welcome-badges {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--ui-unit));
  align-self: flex-end;
}
.welcome-badges--left   { align-self: flex-start; }
.welcome-badges--center { align-self: center; }
.welcome-badges--right  { align-self: flex-end; }
.welcome-badges > .welcome-security,
.welcome-badges > .welcome-souls { align-self: center; }

/* Souls on board — the admin top bar's life-ring aesthetic, wearing the
   welcome screen's glass pill (same tokens as .welcome-security). */
.welcome-souls {
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--ui-unit));
  padding: calc(5 * var(--ui-unit)) calc(6 * var(--ui-unit)) calc(5 * var(--ui-unit)) calc(12 * var(--ui-unit));
  border-radius: 999px;
  background: var(--w-pill-bg, rgba(255, 255, 255, 0.14));
  border: 1px solid var(--w-pill-border, rgba(255, 255, 255, 0.22));
  color: var(--w-pill-fg, #fff);
  backdrop-filter: blur(calc(14 * var(--ui-unit)));
  -webkit-backdrop-filter: blur(calc(14 * var(--ui-unit)));
}
.welcome-souls.hidden { display: none; }
.welcome-souls__ring {
  width: calc(15 * var(--ui-unit));
  height: calc(15 * var(--ui-unit));
  display: block;
  flex: none;
}
.welcome-souls__label {
  font-size: calc(11 * var(--ui-unit));
  letter-spacing: calc(1.6 * var(--ui-unit));
  text-transform: uppercase;
  font-weight: 600;
  color: inherit;
}
.welcome-souls__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(26 * var(--ui-unit));
  height: calc(26 * var(--ui-unit));
  padding: 0 calc(7 * var(--ui-unit));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: calc(13 * var(--ui-unit));
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
/* Small coloured dot at the start of the pill (security level colour). */
.welcome-security::before {
  content: "";
  width: calc(8 * var(--ui-unit));
  height: calc(8 * var(--ui-unit));
  border-radius: 50%;
  background: var(--sl-color, #10b981);
  flex: none;
}
.welcome-security__meta {
  display: inline-flex;
  align-items: center;
}
.welcome-security__label {
  font-size: calc(11 * var(--ui-unit));
  letter-spacing: calc(1.6 * var(--ui-unit));
  text-transform: uppercase;
  font-weight: 600;
  color: inherit;
}
/* Filled rounded badge with the level number — the prominent indicator. */
.welcome-security__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  min-width: calc(26 * var(--ui-unit));
  height: calc(26 * var(--ui-unit));
  padding: 0 calc(7 * var(--ui-unit));
  border-radius: 999px;
  background: var(--sl-color, #10b981);
  color: #fff;
  font-size: calc(13 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 calc(1 * var(--ui-unit)) calc(3 * var(--ui-unit)) rgba(0, 0, 0, 0.12);
}
.welcome-security__num::before { content: none !important; }

/* Souls breakdown modal — the admin popover's rows on the ISPS notice's
   dark glass. Shares .isps-notice for the overlay/card; only the content
   differs. Donut hues are the admin's, brightened one step to read on the
   dark ground (green stays the app's own --status-in family). */
.souls-notice__inner { text-align: left; }
.souls-notice__head {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--ui-unit));
  margin-bottom: calc(20 * var(--ui-unit));
}
.souls-notice__ring {
  width: calc(26 * var(--ui-unit));
  height: calc(26 * var(--ui-unit));
  align-self: center;
  flex: none;
}
.souls-notice__n {
  font-size: calc(40 * var(--ui-unit));
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.souls-notice__t {
  font-size: calc(15 * var(--ui-unit));
  font-weight: 650;
  color: rgba(245, 250, 255, 0.75);
}
.souls-notice__rows {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--ui-unit));
}
.souls-row-w {
  /* Grid with EQUAL fixed side columns, not flex: the value's width varies
     ("0" vs "634/649"), and centring the label in the leftover space put
     Crew/Visitors/Guests on three different centre lines (founder 08-17).
     Equal tracks pin every row's middle to the same axis. */
  display: grid;
  grid-template-columns: calc(86 * var(--ui-unit)) 1fr calc(86 * var(--ui-unit));
  align-items: center;
  column-gap: calc(10 * var(--ui-unit));
  padding: calc(9 * var(--ui-unit)) calc(10 * var(--ui-unit));
  border-radius: calc(12 * var(--ui-unit));
  background: rgba(255, 255, 255, 0.06);
}
.souls-row-w__ring { width: calc(30 * var(--ui-unit)); height: calc(30 * var(--ui-unit)); justify-self: start; }
.souls-row-w__ring svg { width: 100%; height: 100%; display: block; }
.souls-row-w__ring circle { fill: none; stroke-width: 7; }
.souls-row-w__t { min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--ui-unit)); text-align: center; }
.souls-row-w__l { font-size: calc(15 * var(--ui-unit)); font-weight: 700; }
.souls-row-w__s { font-size: calc(12 * var(--ui-unit)); color: rgba(245, 250, 255, 0.6); }
.souls-row-w__v { font-size: calc(17 * var(--ui-unit)); font-weight: 750; font-variant-numeric: tabular-nums; justify-self: end; }
.souls-row-w__v span { font-size: calc(13 * var(--ui-unit)); font-weight: 600; color: rgba(245, 250, 255, 0.55); }
.souls-notice .isps-notice__close { margin-top: calc(22 * var(--ui-unit)); }

/* ISPS security notice modal — opened by tapping the security-level
   badge. Permanent legal compliance statement. Dark glass to match the
   welcome screen; sized via its own --ui-unit so it's identical on
   every iPad (it sits above the welcome screen at a higher z-index). */
.isps-notice {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 12, 24, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  --ui-unit: min(calc(100vw / 1024), calc(100vh / 768));
}
/* Portrait: same re-anchor as the welcome screen (the ISPS modal opens above it). */
body.app-portrait .isps-notice {
  --ui-unit: min(calc(100vw / 768), calc(100vh / 1024));
}
.isps-notice.hidden { display: none; }
.isps-notice__inner {
  width: min(calc(560 * var(--ui-unit)), 92vw);
  background: linear-gradient(160deg, rgba(18, 32, 52, 0.97), rgba(11, 22, 38, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: calc(24 * var(--ui-unit));
  padding: calc(38 * var(--ui-unit)) calc(36 * var(--ui-unit)) calc(32 * var(--ui-unit));
  color: #f5faff;
  text-align: center;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}
.isps-notice__crest {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--ui-unit));
  margin-bottom: calc(18 * var(--ui-unit));
}
.isps-notice__num {
  display: grid;
  place-items: center;
  width: calc(48 * var(--ui-unit));
  height: calc(48 * var(--ui-unit));
  border-radius: calc(14 * var(--ui-unit));
  background: var(--sl-color, #16A34A);
  color: #fff;
  font-size: calc(26 * var(--ui-unit));
  font-weight: 800;
  letter-spacing: -0.02em;
}
.isps-notice__crest-label {
  font-size: calc(13 * var(--ui-unit));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
}
.isps-notice__title {
  margin: 0 0 calc(14 * var(--ui-unit));
  font-size: calc(30 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #F9522E;   /* brand coral / signal red — was inheriting an invisible blue */
}
.isps-notice__body {
  margin: 0;
  font-size: calc(16 * var(--ui-unit));
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
.isps-notice__body strong { color: #fff; font-weight: 700; }
.isps-notice__close {
  margin-top: calc(28 * var(--ui-unit));
  padding: calc(12 * var(--ui-unit)) calc(40 * var(--ui-unit));
  border-radius: calc(14 * var(--ui-unit));
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: calc(16 * var(--ui-unit));
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.isps-notice__close:active { transform: scale(0.97); }

/* ==========================================================
   CREW PIN GATE — the welcome screen's Crew button, locked.
   Opens instead of the crew board when the yacht has
   actions.crew_pin_lock on. A KEYPAD, not a text field: the
   iOS keyboard never comes up, so nothing on the card moves
   and every key stays above the keyboard line. The PIN is the
   yacht's existing security PIN. Two finishes, admin-picked
   (actions.crew_pin_finish): --black or --glass.
   ========================================================== */
.pin-gate {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  --ui-unit: min(calc(100vw / 1024), calc(100vh / 768));
}
/* Portrait: same re-anchor as the welcome screen it opens above. */
body.app-portrait .pin-gate {
  --ui-unit: min(calc(100vw / 768), calc(100vh / 1024));
}
.pin-gate.hidden { display: none; }

.pin-gate__inner {
  position: relative;
  width: min(calc(420 * var(--ui-unit)), 92vw);
  border-radius: calc(24 * var(--ui-unit));
  padding: calc(30 * var(--ui-unit)) calc(30 * var(--ui-unit)) calc(22 * var(--ui-unit));
  color: #f5faff;
  text-align: center;
}

/* ---- Finish: sleek black (the floating nav's --color-nav, pushed
        to a true neutral so it reads the same over any background). ---- */
.pin-gate--black { background: rgba(4, 6, 10, 0.72); }
.pin-gate--black .pin-gate__inner {
  background: linear-gradient(165deg, rgba(19, 21, 26, 0.98), rgba(8, 9, 12, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.62);
}
.pin-gate--black .pin-gate__lock {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.pin-gate--black .pin-gate__key {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
}
.pin-gate--black .pin-gate__key:active { background: rgba(255, 255, 255, 0.16); }

/* ---- Finish: glass. The SAME glass as .welcome-cta--glass /
        .welcome-action--glass behind it — white at 0.2, hairline at
        0.3, blur(12px). The scrim under it is darker than the black
        finish's so a bright background photo can't wash the keys out. ---- */
.pin-gate--glass {
  background: rgba(6, 12, 24, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pin-gate--glass .pin-gate__inner {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 28px rgba(15, 23, 42, 0.35);
}
.pin-gate--glass .pin-gate__lock {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}
.pin-gate--glass .pin-gate__key {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pin-gate--glass .pin-gate__key:active { background: rgba(255, 255, 255, 0.32); }
.pin-gate--glass .pin-gate__dot { border-color: rgba(255, 255, 255, 0.55); }
.pin-gate--glass .pin-gate__sub { color: rgba(255, 255, 255, 0.86); }
.pin-gate--glass .pin-gate__cancel { color: rgba(255, 255, 255, 0.8); }

.pin-gate__lock {
  display: grid;
  place-items: center;
  width: calc(46 * var(--ui-unit));
  height: calc(46 * var(--ui-unit));
  margin: 0 auto calc(14 * var(--ui-unit));
  border-radius: calc(14 * var(--ui-unit));
  border: 1px solid transparent;
}
.pin-gate__lock svg {
  width: calc(22 * var(--ui-unit));
  height: calc(22 * var(--ui-unit));
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pin-gate__title {
  margin: 0 0 calc(6 * var(--ui-unit));
  font-size: calc(26 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}
.pin-gate__sub {
  margin: 0;
  font-size: calc(14 * var(--ui-unit));
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* The four dots. Wrong PIN flushes them coral and shakes the row once. */
.pin-gate__dots {
  display: flex;
  justify-content: center;
  gap: calc(16 * var(--ui-unit));
  margin: calc(22 * var(--ui-unit)) 0 calc(6 * var(--ui-unit));
}
.pin-gate__dot {
  width: calc(15 * var(--ui-unit));
  height: calc(15 * var(--ui-unit));
  border-radius: 50%;
  border: calc(2 * var(--ui-unit)) solid rgba(255, 255, 255, 0.38);
  background: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.pin-gate__dot.is-on { background: #fff; border-color: #fff; transform: scale(1.08); }
/* A wrong PIN SNAPS the filled dots to coral. Without `transition: none` the
   fourth dot is still fading IN to white when the answer lands, so it fades
   white -> pale pink -> coral: a white blip and a wash, which reads as a
   glitch rather than a refusal (founder 2026-09-11).
   Scoped to .is-on so that when the entry clears a moment later the dots go
   back to empty outlines — the unscoped rule left four coral dots sitting
   there with nothing typed. */
.pin-gate.is-wrong .pin-gate__dot.is-on {
  background: #F9522E;
  border-color: #F9522E;
  transition: none;
}
.pin-gate.is-wrong .pin-gate__dots { animation: pinGateShake 0.42s ease; }
@keyframes pinGateShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(-9 * var(--ui-unit))); }
  45% { transform: translateX(calc(8 * var(--ui-unit))); }
  70% { transform: translateX(calc(-5 * var(--ui-unit))); }
}

.pin-gate__error {
  margin: 0;
  height: calc(20 * var(--ui-unit));
  font-size: calc(13 * var(--ui-unit));
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #F9522E;
  opacity: 0;
  transition: opacity 0.14s ease;
}
.pin-gate.is-wrong .pin-gate__error { opacity: 1; }

.pin-gate__pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(12 * var(--ui-unit));
  margin-top: calc(12 * var(--ui-unit));
}
.pin-gate__key {
  height: calc(58 * var(--ui-unit));
  border-radius: calc(14 * var(--ui-unit));
  border: 1px solid transparent;
  color: #fff;
  font-size: calc(26 * var(--ui-unit));
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.1s ease, background 0.1s ease;
}
.pin-gate__key:active { transform: scale(0.96); }
.pin-gate__key--blank { visibility: hidden; }
.pin-gate__key--del svg {
  width: calc(24 * var(--ui-unit));
  height: calc(24 * var(--ui-unit));
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pin-gate__cancel {
  margin-top: calc(16 * var(--ui-unit));
  padding: calc(10 * var(--ui-unit)) calc(30 * var(--ui-unit));
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  font-size: calc(15 * var(--ui-unit));
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.pin-gate__cancel:active { transform: scale(0.97); }

/* The green tick the sheet leaves on — same green as the sign-out success. */
.pin-gate__ok {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.pin-gate.is-ok .pin-gate__ok { opacity: 1; }
.pin-gate.is-ok .pin-gate__inner { opacity: 0; transition: opacity 0.18s ease; }
.pin-gate__ok-tick {
  display: grid;
  place-items: center;
  width: calc(96 * var(--ui-unit));
  height: calc(96 * var(--ui-unit));
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 calc(18 * var(--ui-unit)) calc(46 * var(--ui-unit)) rgba(22, 163, 74, 0.45);
}
.pin-gate__ok-tick svg {
  width: calc(46 * var(--ui-unit));
  height: calc(46 * var(--ui-unit));
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The padlock on the welcome screen's Crew button. The selectors carry the
   extra weight because the per-design rules
   (.welcome-screen[data-welcome-design] .welcome-action__icon svg) would
   otherwise claim this glyph's size and stroke. */
.welcome-action--locked .welcome-action__icon { position: relative; }
.welcome-screen .welcome-action .welcome-action__icon .welcome-action__lock {
  position: absolute;
  right: calc(-5 * var(--ui-unit));
  bottom: calc(-5 * var(--ui-unit));
  display: grid;
  place-items: center;
  width: calc(24 * var(--ui-unit));
  height: calc(24 * var(--ui-unit));
  border-radius: 50%;
  background: #f5faff;
  box-shadow: 0 calc(2 * var(--ui-unit)) calc(7 * var(--ui-unit)) rgba(0, 0, 0, 0.45);
}
.welcome-screen .welcome-action .welcome-action__icon .welcome-action__lock svg {
  width: calc(13 * var(--ui-unit));
  height: calc(13 * var(--ui-unit));
  fill: none;
  stroke: #0f172a;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.welcome-screen__branding {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--ui-unit));
}

.welcome-screen__logo {
  /* Driven by --welcome-logo-scale (logo_size / 100), set inline by JS — same
     pattern as --welcome-title-scale. Width AND the height guard scale together
     so the 50-200% slider stays meaningful across its whole range. (The old
     fixed max-height: 200*ui cap flattened the top half of the slider for
     square logos — it clamped before the width changes were visible.) */
  width: calc(var(--welcome-logo-scale, 1) * 200 * var(--ui-unit));
  height: auto;
  max-width: 72%;
  max-height: calc(var(--welcome-logo-scale, 1) * 240 * var(--ui-unit));
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}

/* Headline font is driven by data-welcome-font (the admin font picker) so the
   choice applies on EVERY design. Each font sets its own family + natural
   weight/style/transform; the design controls size/colour/spacing. Default =
   Bricolage Grotesque. The 4 admin fonts + Serif are all selectable. */
.welcome-screen[data-welcome-font="default"] { --w-headline-font: "Bricolage Grotesque", Inter, sans-serif; --w-headline-weight: 600; --w-headline-style: normal; --w-headline-transform: none; }
.welcome-screen[data-welcome-font="classic"] { --w-headline-font: "Bodoni Moda", "Times New Roman", serif; --w-headline-weight: 500; --w-headline-style: italic; --w-headline-transform: none; }
.welcome-screen[data-welcome-font="modern"]  { --w-headline-font: "Raleway", "Helvetica Neue", Arial, sans-serif; --w-headline-weight: 700; --w-headline-style: normal; --w-headline-transform: none; }
.welcome-screen[data-welcome-font="bold"]    { --w-headline-font: "Oswald", "Helvetica Neue", Arial, sans-serif; --w-headline-weight: 600; --w-headline-style: normal; --w-headline-transform: uppercase; }
.welcome-screen[data-welcome-font="script"]  { --w-headline-font: "Dancing Script", "Brush Script MT", cursive; --w-headline-weight: 600; --w-headline-style: normal; --w-headline-transform: none; }
.welcome-screen[data-welcome-font="serif"]   { --w-headline-font: "Fraunces", "Instrument Serif", serif; --w-headline-weight: 400; --w-headline-style: italic; --w-headline-transform: none; }

.welcome-screen__title {
  margin: 0;
  font-family: var(--w-headline-font, "Bricolage Grotesque", Inter, sans-serif);
  font-weight: var(--w-headline-weight, 600);
  font-style: var(--w-headline-style, normal);
  text-transform: var(--w-headline-transform, none);
  font-size: calc(var(--welcome-title-scale, 1) * 60 * var(--ui-unit));
  letter-spacing: 0.06em;
  text-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);
}

.welcome-yacht {
  font-size: calc(24 * var(--ui-unit));
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.welcome-screen__cta {
  display: flex;
  justify-content: center;
  gap: calc(14 * var(--ui-unit));
}

/* Visitor pass pill (2026-09-08): beside Visitor In, only while the yacht
   holds a live pass. Same pill, a scan glyph in the label, no arrow. */
.welcome-cta--pass .welcome-cta__label {
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--ui-unit));
}
.welcome-cta--pass .welcome-cta__label svg {
  width: calc(19 * var(--ui-unit));
  height: calc(19 * var(--ui-unit));
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.welcome-cta--pass .welcome-cta__arrow { display: none; }

.welcome-cta {
  --welcome-cta-scale: 1;
  border: 1px solid transparent;
  border-radius: calc(22 * var(--ui-unit) * var(--welcome-cta-scale));
  padding: calc(12 * var(--ui-unit) * var(--welcome-cta-scale)) calc(26 * var(--ui-unit) * var(--welcome-cta-scale));
  font-size: calc(16 * var(--ui-unit) * var(--welcome-cta-scale));
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.welcome-cta--glass {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 28px rgba(15, 23, 42, 0.35);
}

.welcome-cta--solid {
  background: #fff;
  color: #334155;
  border-color: rgba(226, 232, 240, 0.9);
  box-shadow: 0 18px 28px rgba(15, 23, 42, 0.3);
}

.welcome-screen__actions {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: calc(24 * var(--ui-unit));
  padding-bottom: calc(10 * var(--ui-unit));
}

/* Crew-only device mode: the visitor CTA + cards are swapped for the crew
   pill (Sign in / out) and the quick-action cards, in whatever welcome
   design the yacht chose. The crew pair is hidden everywhere else. The
   design-specific rules further down (Light/Dark/Serif/Color/Classic)
   style both pairs identically — only the crew layout rules at the end of
   the welcome section are new. */
.welcome-screen:not(.welcome-screen--crew) .welcome-screen__cta--crew,
.welcome-screen:not(.welcome-screen--crew) .welcome-screen__actions--crew,
.welcome-screen--crew .welcome-screen__cta:not(.welcome-screen__cta--crew),
.welcome-screen--crew .welcome-screen__actions:not(.welcome-screen__actions--crew) {
  display: none !important;
}

/* Crew display — rotating glass panels (notices + weather) */
.crew-display { position: relative; width: min(640px, 86vw); margin: 8px auto 0; }
.crew-display.hidden { display: none; }
.crew-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
  min-height: 168px;
  padding: 26px 28px;
  border-radius: 20px;
  text-align: left;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}
.crew-panel.is-active { display: flex; animation: crewFade 0.35s ease; }
@keyframes crewFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.crew-panel--pinned { border-color: rgba(255, 255, 255, 0.55); }
.crew-panel__kicker {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.crew-panel__body {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.crew-panel__meta {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: auto;
}
.crew-wx { display: flex; flex-wrap: wrap; gap: 16px 30px; }
.crew-wx__item { display: flex; flex-direction: column; gap: 3px; }
.crew-wx__v { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.crew-wx__l {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
}
.crew-display__dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-top: 14px;
}
.crew-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}
.crew-dot.is-on { background: #fff; }

/* Tide curve panel (glass) */
.crew-tide { width: 100%; height: 132px; display: block; overflow: visible; }
.crew-tide__area { fill: rgba(255, 255, 255, 0.18); stroke: none; }
.crew-tide__line {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.crew-tide__ex-dot { fill: rgba(255, 255, 255, 0.85); }
.crew-tide__nowline {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
.crew-tide__now {
  fill: var(--color-accent, #2DBDC6);
  stroke: #fff;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.crew-tide__exrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}
.crew-tide__ex b {
  font-weight: 800;
  color: #fff;
  margin-right: 4px;
}

.welcome-action {
  width: calc(110 * var(--ui-unit));
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--ui-unit));
  font-size: calc(15 * var(--ui-unit));
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.14s ease, opacity 0.14s ease;
  transform: translateY(0) scale(1);
  opacity: 1;
}

.welcome-action.is-pressed {
  transform: translateY(2px) scale(0.96);
  opacity: 0.75;
}

.welcome-action__icon svg {
  width: calc(26 * var(--ui-unit));
  height: calc(26 * var(--ui-unit));
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.welcome-action--glass {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: calc(16 * var(--ui-unit));
  padding: calc(10 * var(--ui-unit)) calc(16 * var(--ui-unit));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.welcome-action--solid {
  background: #fff;
  color: #334155;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: calc(16 * var(--ui-unit));
  padding: calc(10 * var(--ui-unit)) calc(16 * var(--ui-unit));
}

.font-classic {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-style: italic;
}

.font-modern {
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
}

.font-bold-display {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.font-script {
  font-family: "Dancing Script", "Brush Script MT", cursive;
  font-weight: 600;
}

.font-default {
  font-family: "Bricolage Grotesque", Inter, sans-serif;
  font-weight: 600;
}

.font-serif {
  font-family: "Fraunces", "Instrument Serif", serif;
  font-style: italic;
}

/* (Removed the max-width:720px web-era overrides — the app is iPad-only
   now and --ui-unit handles all sizing proportionally, so the fixed-px
   overrides here were both dead for iPads and contradicted the scale
   approach.) */

/* ==========================================================
   WELCOME SCREEN DESIGN THEMES (Types 1-4)
   Classic = the photo/carousel screen above (no data attribute).
   The four below are CSS skins keyed on [data-welcome-design], over the
   SAME markup + behaviour. Every size uses --ui-unit so each design is
   identical on every iPad. Per-design colours live in CSS-var tokens
   (--w-*) so the shared structural rules stay DRY. See
   ipad-welcome-designs memory. Glass vs solid = [data-welcome-glass].
   ========================================================== */

/* The enriched markup's extra bits are hidden by default (Classic). The
   two column wrappers are display:contents everywhere except Color, so
   on Classic + the single-column designs they're layout-transparent and
   their children behave exactly as if the wrappers weren't there. */
.welcome-col { display: contents; }
.welcome-action__text,
.welcome-cta__text { display: contents; }
.welcome-action__sub,
.welcome-action__arrow,
.welcome-cta__arrow,
.welcome-cta__sub,
.welcome-cta__icon { display: none; }

/* ---------- Per-design colour tokens ---------- */
.welcome-screen[data-welcome-design="light"] {
  --w-bg: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #f2f4f7 100%);
  --w-text: #0f172a; --w-muted: #475569; --w-dot: #10b981;
  --w-pill-fg: #475569; --w-pill-bg: rgba(15,23,42,0.04); --w-pill-border: rgba(15,23,42,0.08);
  --w-card-bg: #ffffff; --w-card-border: rgba(0,0,0,0.08); --w-card-backdrop: none;
  --w-icon-bg: rgba(15,23,42,0.05);
  --w-cta-bg: #0f172a; --w-cta-fg: #ffffff; --w-cta-shadow: 0 calc(14*var(--ui-unit)) calc(40*var(--ui-unit)) rgba(15,23,42,0.25);
  --w-headline-size: 84;  /* headline font now via data-welcome-font */
  --w-body-font: Inter, sans-serif; --w-label-font: Inter, sans-serif; --w-label-style: normal;
}
.welcome-screen[data-welcome-design="light"][data-welcome-glass="true"] {
  --w-card-bg: rgba(255,255,255,0.6); --w-card-border: rgba(0,0,0,0.06); --w-card-backdrop: blur(calc(14*var(--ui-unit)));
}
.welcome-screen[data-welcome-design="dark"] {
  --w-bg: radial-gradient(120% 80% at 50% 0%, #16181d 0%, #0a0b0d 100%);
  --w-text: #f1f5f9; --w-muted: #94a3b8; --w-dot: #34d399;
  --w-pill-fg: #cbd5e1; --w-pill-bg: rgba(255,255,255,0.06); --w-pill-border: rgba(255,255,255,0.10);
  --w-card-bg: #15171c; --w-card-border: rgba(255,255,255,0.07); --w-card-backdrop: none;
  --w-icon-bg: rgba(255,255,255,0.06);
  --w-cta-bg: #f1f5f9; --w-cta-fg: #0a0b0d; --w-cta-shadow: 0 calc(14*var(--ui-unit)) calc(40*var(--ui-unit)) rgba(0,0,0,0.5);
  --w-headline-size: 84;  /* headline font now via data-welcome-font */
  --w-body-font: Inter, sans-serif; --w-label-font: Inter, sans-serif; --w-label-style: normal;
}
.welcome-screen[data-welcome-design="dark"][data-welcome-glass="true"] {
  --w-card-bg: rgba(255,255,255,0.04); --w-card-border: rgba(255,255,255,0.08); --w-card-backdrop: blur(calc(14*var(--ui-unit)));
}
.welcome-screen[data-welcome-design="serif"] {
  --w-bg: radial-gradient(120% 80% at 50% 0%, #fbf5e9 0%, #f1e7d2 100%);
  --w-text: #1c1814; --w-muted: rgba(28,24,20,0.65); --w-dot: #b45309;
  --w-pill-fg: #475569; --w-pill-bg: rgba(15,23,42,0.04); --w-pill-border: rgba(15,23,42,0.08);
  --w-card-bg: #fffaf2; --w-card-border: rgba(60,40,30,0.10); --w-card-backdrop: none;
  --w-icon-bg: rgba(28,24,20,0.06);
  --w-cta-bg: #1c1814; --w-cta-fg: #fbf5e9; --w-cta-shadow: 0 calc(14*var(--ui-unit)) calc(36*var(--ui-unit)) rgba(28,24,20,0.25);
  --w-headline-size: 84;  /* unified with Light/Dark so all designs share one headline size */
  --w-body-font: "Fraunces", serif; --w-label-font: "Fraunces", serif; --w-label-style: italic;
}
.welcome-screen[data-welcome-design="serif"][data-welcome-glass="true"] {
  --w-card-bg: rgba(255,255,255,0.55); --w-card-border: rgba(60,40,30,0.08); --w-card-backdrop: blur(calc(14*var(--ui-unit)));
}

/* ---------- Shared single-column layout (Light/Dark/Serif) ---------- */
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) {
  background: var(--w-bg);
  color: var(--w-text);
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-screen__bg,
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-screen__overlay {
  display: none;  /* these designs use a gradient, not the photo */
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-screen__content {
  justify-content: flex-start;
  gap: 0;
  padding: calc(48 * var(--ui-unit) + env(safe-area-inset-top, 0))
           calc(80 * var(--ui-unit) + env(safe-area-inset-right, 0))
           calc(48 * var(--ui-unit) + env(safe-area-inset-bottom, 0))
           calc(80 * var(--ui-unit) + env(safe-area-inset-left, 0));
}
/* security pill — spec look: dot + LABEL · N */
/* (Light/Dark/Serif security overrides removed — the unified base pill
   uses each design's --w-pill-* tokens directly.) */
/* branding + headline + body */
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-screen__branding {
  flex: 0 0 auto; margin-top: calc(36 * var(--ui-unit)); gap: calc(14 * var(--ui-unit));
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-screen__title {
  font-family: var(--w-headline-font); font-weight: var(--w-headline-weight); font-style: var(--w-headline-style);
  text-transform: var(--w-headline-transform, none);
  font-size: calc(var(--welcome-title-scale, 1) * var(--w-headline-size) * var(--ui-unit));
  letter-spacing: -0.04em; line-height: 0.95; color: var(--w-text); text-shadow: none;
  max-width: 100%; overflow-wrap: break-word;
}
/* (Removed the decorative "." that the original handoff appended via ::after
   — users couldn't delete it from the welcome text input.) */
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-body {
  display: block; margin: 0; max-width: calc(540 * var(--ui-unit));
  font-family: var(--w-body-font); font-size: calc(18 * var(--ui-unit)); line-height: 1.5;
  color: var(--w-muted); text-align: center;
}
/* primary CTA — pill + trailing arrow */
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-screen__cta {
  margin-top: calc(36 * var(--ui-unit));
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-cta {
  background: var(--w-cta-bg) !important; color: var(--w-cta-fg);
  border: none; border-radius: 999px; opacity: 1 !important;
  padding: calc(20 * var(--ui-unit)) calc(40 * var(--ui-unit));
  font-family: var(--w-body-font); font-size: calc(20 * var(--ui-unit)); font-weight: 600;
  display: inline-flex; align-items: center; gap: calc(14 * var(--ui-unit));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--w-cta-shadow);
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-cta__arrow {
  display: inline-flex;
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-cta__arrow svg {
  width: calc(20 * var(--ui-unit)); height: calc(20 * var(--ui-unit));
  stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* bottom 2-card row */
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-screen__actions {
  margin-top: auto; gap: calc(18 * var(--ui-unit)); width: 100%; max-width: calc(720 * var(--ui-unit));
  align-self: center;
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-action {
  flex: 1; flex-direction: row; align-items: center; gap: calc(16 * var(--ui-unit));
  width: auto; text-align: left; opacity: 1 !important;
  background: var(--w-card-bg); border: 1px solid var(--w-card-border);
  backdrop-filter: var(--w-card-backdrop); -webkit-backdrop-filter: var(--w-card-backdrop);
  border-radius: calc(18 * var(--ui-unit)); padding: calc(20 * var(--ui-unit)) calc(22 * var(--ui-unit));
  color: var(--w-text);
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-action__icon {
  width: calc(46 * var(--ui-unit)); height: calc(46 * var(--ui-unit)); border-radius: calc(14 * var(--ui-unit));
  background: var(--w-icon-bg); display: grid; place-items: center; flex: none;
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-action__icon svg {
  width: calc(20 * var(--ui-unit)); height: calc(20 * var(--ui-unit));
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-action__text {
  display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: calc(2 * var(--ui-unit));
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-action__label {
  font-family: var(--w-label-font); font-style: var(--w-label-style);
  font-size: calc(18 * var(--ui-unit)); font-weight: 600; color: var(--w-text);
}
.welcome-screen[data-welcome-design="serif"] .welcome-action__label { font-size: calc(22 * var(--ui-unit)); font-weight: 400; }
.welcome-screen[data-welcome-design="serif"] .welcome-screen__title { font-variation-settings: "opsz" 144; }

/* ---------- Type 4 · Color (two-column accent layout) ---------- */
.welcome-screen[data-welcome-design="color"] { background: #fafafa; color: #0f172a; }
.welcome-screen[data-welcome-design="color"] .welcome-screen__bg,
.welcome-screen[data-welcome-design="color"] .welcome-screen__overlay { display: none; }
.welcome-screen[data-welcome-design="color"] .welcome-screen__content {
  display: grid; grid-template-columns: 0.85fr 1fr; grid-template-rows: 1fr;
  align-items: stretch; height: 100%; padding: 0; gap: 0; max-width: none;
}
/* Portrait keeps the SAME two-column grid as landscape (and the admin preview),
   per design — the coral logo column on the left, the sign-in panel on the right.
   (An earlier portrait override stacked the columns, but on a real iPad Mini that
   diverged from the designed/admin-preview look, so portrait now matches landscape.
   The --ui-unit re-anchor for portrait still applies — see body.app-portrait
   .welcome-screen above — so the composition scales to full size.) */
body.app-portrait .welcome-screen[data-welcome-design="color"] .welcome-col {
  min-height: 0;
}
/* the two wrappers become the real columns here (display:contents elsewhere) */
.welcome-screen[data-welcome-design="color"] .welcome-col { display: flex; flex-direction: column; }
.welcome-screen[data-welcome-design="color"] .welcome-col--left {
  background: #ff6a3d; color: #fff; position: relative; overflow: hidden;
  padding: calc(48 * var(--ui-unit) + env(safe-area-inset-top, 0))
           calc(44 * var(--ui-unit))
           calc(48 * var(--ui-unit) + env(safe-area-inset-bottom, 0))
           calc(44 * var(--ui-unit) + env(safe-area-inset-left, 0));
}
.welcome-screen[data-welcome-design="color"] .welcome-col--right {
  background: #fafafa; color: #0f172a;
  padding: calc(52 * var(--ui-unit) + env(safe-area-inset-top, 0))
           calc(56 * var(--ui-unit) + env(safe-area-inset-right, 0))
           calc(52 * var(--ui-unit) + env(safe-area-inset-bottom, 0))
           calc(56 * var(--ui-unit));
}
/* Color: anchor the unified pill to the left of the coral column (always),
   regardless of the user's security_position config — the rest of the
   pill chrome comes from --w-pill-* tokens. */
.welcome-screen[data-welcome-design="color"] .welcome-security,
.welcome-screen[data-welcome-design="color"] .welcome-badges {
  align-self: flex-start;
  z-index: 1;  /* sits above the decorative accent circle */
}
/* left: headline + body pushed to the bottom */
.welcome-screen[data-welcome-design="color"] .welcome-screen__branding {
  flex: 0 0 auto; margin-top: auto; align-items: flex-start; gap: calc(18 * var(--ui-unit)); z-index: 1;
}
.welcome-screen[data-welcome-design="color"] .welcome-screen__title {
  font-family: var(--w-headline-font); font-weight: var(--w-headline-weight); font-style: var(--w-headline-style);
  text-transform: var(--w-headline-transform, none);
  font-size: calc(var(--welcome-title-scale, 1) * 84 * var(--ui-unit));  /* unified across designs */
  letter-spacing: -0.05em; line-height: 0.9; color: #fff; text-align: left; text-shadow: none;
  max-width: 100%; overflow-wrap: break-word;
}
/* (Removed Color's decorative ::after "." too, for consistency.) */
.welcome-screen[data-welcome-design="color"] .welcome-body {
  display: block; margin: 0; max-width: calc(380 * var(--ui-unit)); text-align: left;
  font-family: Inter, sans-serif; font-size: calc(17 * var(--ui-unit)); line-height: 1.5; color: rgba(255,255,255,0.9);
}
.welcome-screen[data-welcome-design="color"] .welcome-accent-circle {
  display: block; position: absolute; right: calc(-120 * var(--ui-unit)); top: calc(-120 * var(--ui-unit));
  width: calc(320 * var(--ui-unit)); height: calc(320 * var(--ui-unit)); border-radius: 50%;
  background: rgba(255,255,255,0.12); z-index: 0;
}
/* right: welcome-message slot (above the CTA) + footer */
.welcome-screen[data-welcome-design="color"] .welcome-eyebrow {
  display: block;
  font-family: Inter, sans-serif;
  font-size: calc(18 * var(--ui-unit));
  line-height: 1.5;
  color: #64748b;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  max-width: calc(540 * var(--ui-unit));
}
.welcome-eyebrow[hidden], .welcome-footer[hidden] { display: none !important; }
.welcome-screen[data-welcome-design="color"] .welcome-screen__cta,
.welcome-screen[data-welcome-design="color"] .welcome-screen__actions { display: contents; }
/* primary (visitor-in) card */
.welcome-screen[data-welcome-design="color"] .welcome-cta {
  width: 100%; margin-top: calc(24 * var(--ui-unit));
  background: #ff6a3d !important; color: #fff; border: none; opacity: 1 !important;
  border-radius: calc(18 * var(--ui-unit)); padding: calc(22 * var(--ui-unit)) calc(24 * var(--ui-unit));
  display: flex; align-items: center; gap: calc(18 * var(--ui-unit)); text-align: left;
  font-family: Inter, sans-serif; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 calc(14 * var(--ui-unit)) calc(36 * var(--ui-unit)) rgba(255,106,61,0.35);
}
.welcome-screen[data-welcome-design="color"] .welcome-cta__icon,
.welcome-screen[data-welcome-design="color"] .welcome-action__icon {
  display: grid; place-items: center; flex: none;
  width: calc(50 * var(--ui-unit)); height: calc(50 * var(--ui-unit)); border-radius: calc(14 * var(--ui-unit));
}
.welcome-screen[data-welcome-design="color"] .welcome-cta__icon { background: rgba(255,255,255,0.18); }
.welcome-screen[data-welcome-design="color"] .welcome-cta__icon svg { width: calc(22 * var(--ui-unit)); height: calc(22 * var(--ui-unit)); stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.welcome-screen[data-welcome-design="color"] .welcome-cta__text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: calc(2 * var(--ui-unit)); }
.welcome-screen[data-welcome-design="color"] .welcome-cta__label { font-size: calc(21 * var(--ui-unit)); font-weight: 600; letter-spacing: -0.01em; }
.welcome-screen[data-welcome-design="color"] .welcome-cta__sub { display: block; font-size: calc(13 * var(--ui-unit)); opacity: 0.7; }
.welcome-screen[data-welcome-design="color"] .welcome-cta__arrow { display: inline-flex; flex: none; }
.welcome-screen[data-welcome-design="color"] .welcome-cta__arrow svg { width: calc(22 * var(--ui-unit)); height: calc(22 * var(--ui-unit)); stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* crew + visitor-out surface cards */
.welcome-screen[data-welcome-design="color"] .welcome-action {
  flex: none; width: 100%; flex-direction: row; align-items: center; gap: calc(18 * var(--ui-unit));
  text-align: left; opacity: 1 !important; color: #0f172a; margin-top: calc(14 * var(--ui-unit));
  background: #ffffff; border: 1px solid rgba(0,0,0,0.08);
  border-radius: calc(18 * var(--ui-unit)); padding: calc(22 * var(--ui-unit)) calc(24 * var(--ui-unit));
}
.welcome-screen[data-welcome-design="color"][data-welcome-glass="true"] .welcome-action {
  background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.06);
  backdrop-filter: blur(calc(14 * var(--ui-unit))); -webkit-backdrop-filter: blur(calc(14 * var(--ui-unit)));
}
.welcome-screen[data-welcome-design="color"] .welcome-action__icon { background: rgba(15,23,42,0.05); }
.welcome-screen[data-welcome-design="color"] .welcome-action__icon svg { width: calc(22 * var(--ui-unit)); height: calc(22 * var(--ui-unit)); stroke: #0f172a; }
.welcome-screen[data-welcome-design="color"] .welcome-action__text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: calc(2 * var(--ui-unit)); }
.welcome-screen[data-welcome-design="color"] .welcome-action__label { font-family: Inter, sans-serif; font-style: normal; font-size: calc(21 * var(--ui-unit)); font-weight: 600; color: #0f172a; }
.welcome-screen[data-welcome-design="color"] .welcome-action__sub { display: block; font-size: calc(13 * var(--ui-unit)); color: #64748b; }
.welcome-screen[data-welcome-design="color"] .welcome-action__arrow { display: inline-flex; flex: none; color: #0f172a; }
.welcome-screen[data-welcome-design="color"] .welcome-action__arrow svg { width: calc(22 * var(--ui-unit)); height: calc(22 * var(--ui-unit)); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* footer */
.welcome-screen[data-welcome-design="color"] .welcome-footer {
  display: flex; justify-content: space-between; align-items: center; margin-top: auto;
  padding-top: calc(20 * var(--ui-unit)); font-size: calc(12 * var(--ui-unit)); color: #94a3b8;
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-action__sub {
  display: block; font-family: Inter, sans-serif; font-size: calc(13 * var(--ui-unit)); color: var(--w-muted);
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-action__arrow {
  display: inline-flex; flex: none; color: var(--w-text);
}
.welcome-screen:is([data-welcome-design="light"],[data-welcome-design="dark"],[data-welcome-design="serif"]) .welcome-action__arrow svg {
  width: calc(20 * var(--ui-unit)); height: calc(20 * var(--ui-unit));
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Classic · photo background + Type 1/2 button treatment ----------
   Classic keeps the uploaded photo + overlay + centred title (only the
   welcome text/logo changes). The 3 buttons adopt the Type 1/2 look: a
   pill CTA (label + arrow) + two horizontal cards (icon-box + label + sub
   + arrow). Frosted glass is the ONLY style (no solid option — user
   decision); the admin opacity slider still works (inline opacity is left
   alone). Vertical layout mirrors Type 1/2/3 (title near the top, CTA
   below it, the 2-card row pinned to the bottom). All --ui-unit sized so
   it's identical on every iPad. See ipad-welcome-designs. */
/* Layout rhythm — identical to Type 1/2/3. */
.welcome-screen[data-welcome-design="classic"] .welcome-screen__content {
  justify-content: flex-start; gap: 0;
  padding: calc(48 * var(--ui-unit) + env(safe-area-inset-top, 0))
           calc(80 * var(--ui-unit) + env(safe-area-inset-right, 0))
           calc(48 * var(--ui-unit) + env(safe-area-inset-bottom, 0))
           calc(80 * var(--ui-unit) + env(safe-area-inset-left, 0));
}
.welcome-screen[data-welcome-design="classic"] .welcome-screen__branding { flex: 0 0 auto; margin-top: calc(36 * var(--ui-unit)); gap: calc(14 * var(--ui-unit)); }
/* Classic title — match Type 1/2/3 sizing + spacing so the font picker
   renders consistently across designs (base rule had 60 + 0.06em letter-
   spacing, which made the SAME font visibly different on Classic). Keep
   the heavier text-shadow for legibility over the photo. */
.welcome-screen[data-welcome-design="classic"] .welcome-screen__title {
  font-size: calc(var(--welcome-title-scale, 1) * 84 * var(--ui-unit));
  letter-spacing: -0.04em;
  line-height: 0.95;
  max-width: 100%;
  overflow-wrap: break-word;
}
.welcome-screen[data-welcome-design="classic"] .welcome-screen__cta { margin-top: calc(36 * var(--ui-unit)); }
/* Body line is opt-in (admin "Welcome message"). When blank the JS sets
   [hidden]; this !important guard beats the per-design `.welcome-body
   { display:block }` rules so an empty message truly collapses. */
.welcome-body[hidden] { display: none !important; }
/* Classic body line — white over the photo, centred under the title. */
.welcome-screen[data-welcome-design="classic"] .welcome-body {
  display: block; margin: calc(12 * var(--ui-unit)) auto 0; max-width: calc(560 * var(--ui-unit));
  font-family: Inter, sans-serif; font-size: calc(18 * var(--ui-unit)); line-height: 1.5;
  color: rgba(255, 255, 255, 0.92); text-align: center;
  text-shadow: 0 calc(2 * var(--ui-unit)) calc(12 * var(--ui-unit)) rgba(0, 0, 0, 0.5);
}
/* primary CTA — pill + trailing arrow */
.welcome-screen[data-welcome-design="classic"] .welcome-cta {
  border-radius: 999px;
  padding: calc(20 * var(--ui-unit)) calc(40 * var(--ui-unit));
  font-family: Inter, sans-serif; font-size: calc(20 * var(--ui-unit)); font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: calc(14 * var(--ui-unit));
}
.welcome-screen[data-welcome-design="classic"] .welcome-cta__arrow { display: inline-flex; }

/* ---- The small line under the MAIN button's label ----
   It only ever rendered on Colour (Type 4), which made the admin's
   "Show the small text under each button" a lie on every other design —
   the two action cards obeyed it and the main pill ignored it (founder
   2026-09-11: "its showing on type 4, but not others").

   The pill is a centred row, so the text becomes a centred COLUMN and the
   arrow stays beside it. An empty sub-line collapses on its own (:empty),
   and the admin's toggle still hides all three at once. */
.welcome-screen:is(
  [data-welcome-design="classic"],
  [data-welcome-design="light"],
  [data-welcome-design="dark"],
  [data-welcome-design="serif"]
) .welcome-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1 * var(--ui-unit));
}
.welcome-screen:is(
  [data-welcome-design="classic"],
  [data-welcome-design="light"],
  [data-welcome-design="dark"],
  [data-welcome-design="serif"]
) .welcome-cta__sub {
  display: block;
  font-size: calc(13 * var(--ui-unit));
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  opacity: 0.66;
}
/* The pill's vertical padding was set for a single line of text; with a
   sub-line under it, ease it in so the pill doesn't grow taller than the
   design intends. */
.welcome-screen:is(
  [data-welcome-design="classic"],
  [data-welcome-design="light"],
  [data-welcome-design="dark"],
  [data-welcome-design="serif"]
) .welcome-cta:has(.welcome-cta__sub:not(:empty)) {
  padding-top: calc(14 * var(--ui-unit));
  padding-bottom: calc(14 * var(--ui-unit));
}
.welcome-screen[data-welcome-design="classic"] .welcome-cta__arrow svg {
  width: calc(20 * var(--ui-unit)); height: calc(20 * var(--ui-unit));
  stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* bottom 2-card row — pinned to the bottom like Type 1/2/3 */
.welcome-screen[data-welcome-design="classic"] .welcome-screen__actions {
  margin-top: auto; gap: calc(18 * var(--ui-unit)); width: 100%; max-width: calc(720 * var(--ui-unit));
  align-self: center; padding-bottom: 0;
}
.welcome-screen[data-welcome-design="classic"] .welcome-action {
  flex: 1; width: auto; flex-direction: row; align-items: center; gap: calc(16 * var(--ui-unit));
  text-align: left; letter-spacing: normal;
  border-radius: calc(18 * var(--ui-unit)); padding: calc(18 * var(--ui-unit)) calc(20 * var(--ui-unit));
}
.welcome-screen[data-welcome-design="classic"] .welcome-action__icon {
  width: calc(46 * var(--ui-unit)); height: calc(46 * var(--ui-unit)); border-radius: calc(14 * var(--ui-unit));
  display: grid; place-items: center; flex: none;
}
.welcome-screen[data-welcome-design="classic"] .welcome-action__icon svg {
  width: calc(20 * var(--ui-unit)); height: calc(20 * var(--ui-unit));
  stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.welcome-screen[data-welcome-design="classic"] .welcome-action__text {
  display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: calc(2 * var(--ui-unit));
}
.welcome-screen[data-welcome-design="classic"] .welcome-action__label {
  font-family: Inter, sans-serif; font-size: calc(18 * var(--ui-unit)); font-weight: 600; letter-spacing: normal;
}
.welcome-screen[data-welcome-design="classic"] .welcome-action__sub {
  display: block; font-family: Inter, sans-serif; font-size: calc(13 * var(--ui-unit));
}
.welcome-screen[data-welcome-design="classic"] .welcome-action__arrow { display: inline-flex; flex: none; }
.welcome-screen[data-welcome-design="classic"] .welcome-action__arrow svg {
  width: calc(20 * var(--ui-unit)); height: calc(20 * var(--ui-unit));
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Classic surfaces: the 2 action cards + ISPS badge stay frosted glass; the
   primary CTA is a SOLID WHITE pill (dark text) so it drastically stands out
   over the photo, like the themed designs' primary. (Alternatives A "bolder
   frosted" and C "solid dark" are recorded in the ipad-welcome-designs memory.)
   Applied regardless of the glass/solid toggle. */
.welcome-screen[data-welcome-design="classic"] .welcome-cta {
  background: #ffffff !important; color: #0f172a;
  border: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 calc(16 * var(--ui-unit)) calc(42 * var(--ui-unit)) rgba(0, 0, 0, 0.4);
}
/* PORTRAIT: nudge the primary CTA up ~12% — it reads slightly small in the
   taller portrait composition vs landscape (user request 2026-06-14). Landscape
   is unchanged. Tune the multipliers (22/45) to taste. */
body.app-portrait .welcome-screen[data-welcome-design="classic"] .welcome-cta {
  padding: calc(22 * var(--ui-unit)) calc(45 * var(--ui-unit));
  font-size: calc(22 * var(--ui-unit));
  gap: calc(16 * var(--ui-unit));
}
body.app-portrait .welcome-screen[data-welcome-design="classic"] .welcome-cta__arrow svg {
  width: calc(22 * var(--ui-unit));
  height: calc(22 * var(--ui-unit));
}
.welcome-screen[data-welcome-design="classic"] .welcome-action {
  background: rgba(255, 255, 255, 0.12); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(calc(14 * var(--ui-unit))); -webkit-backdrop-filter: blur(calc(14 * var(--ui-unit)));
}
.welcome-screen[data-welcome-design="classic"] .welcome-action__icon { background: rgba(255, 255, 255, 0.16); }
.welcome-screen[data-welcome-design="classic"] .welcome-action__sub { color: rgba(255, 255, 255, 0.72); }

/* (Classic security overrides removed — uses the unified base pill with
   the default white-frosted --w-pill-* tokens, suitable over the photo.) */

/* ---------- Crew home layout (crew-only iPads) ----------
   Layout only: colours, pills, cards and icon boxes all come from the
   design rules above. The cluster (heading, pill, cards) is centred between
   the badge row and the bottom edge; the cards sit in a grid whose column
   count follows how many the admin turned on (data-crew-count). Color keeps
   its two-column panel and stacks the cards two across. */
.welcome-screen.welcome-screen--crew:not([data-welcome-design="color"]) .welcome-screen__content {
  justify-content: flex-start;
}
.welcome-screen.welcome-screen--crew:not([data-welcome-design="color"]) .welcome-screen__branding {
  flex: 0 0 auto; margin-top: auto; gap: calc(14 * var(--ui-unit));
}
.welcome-screen.welcome-screen--crew:not([data-welcome-design="color"]) .welcome-screen__cta--crew {
  display: flex; justify-content: center; margin-top: calc(30 * var(--ui-unit));
}
/* Twelve tracks, cards spanning 4 (three across). Counts that leave a short
   last row widen that row's cards to fill it — a lone or half-empty row
   read as an odd one out (founder 2026-09-07). */
.welcome-screen.welcome-screen--crew:not([data-welcome-design="color"]) .welcome-screen__actions--crew {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(16 * var(--ui-unit)); width: 100%; max-width: calc(940 * var(--ui-unit));
  align-self: center; margin-top: calc(52 * var(--ui-unit)); margin-bottom: auto; padding-bottom: 0;
}
.welcome-screen.welcome-screen--crew:not([data-welcome-design="color"]) .welcome-action--crew { grid-column: span 4; }
.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="1"],
.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="2"],
.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="4"] { max-width: calc(640 * var(--ui-unit)); }
.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="1"] { max-width: calc(320 * var(--ui-unit)); }
.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="1"] .welcome-action--crew { grid-column: span 12; }
.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="2"] .welcome-action--crew,
.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="4"] .welcome-action--crew { grid-column: span 6; }
.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="5"] .welcome-action--crew:nth-child(n+4) { grid-column: span 6; }
/* Never more than three across (four squeezed the label into the arrow);
   seven = 3 + 2 + 2, eight = 3 + 3 + 2, every row full. */
.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="7"] .welcome-action--crew:nth-child(n+4),
.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="8"] .welcome-action--crew:nth-child(n+7) { grid-column: span 6; }

.welcome-screen.welcome-screen--crew .welcome-screen__actions--crew[data-crew-count="0"] { display: none; }
/* Portrait is narrower: two across, whatever the count. */
body.app-portrait .welcome-screen.welcome-screen--crew:not([data-welcome-design="color"]) .welcome-screen__actions--crew { max-width: none; }
body.app-portrait .welcome-screen.welcome-screen--crew:not([data-welcome-design="color"]) .welcome-action--crew { grid-column: span 6 !important; }
body.app-portrait .welcome-screen.welcome-screen--crew:not([data-welcome-design="color"]) .welcome-action--crew:last-child:nth-child(odd) { grid-column: span 12 !important; }
.welcome-screen.welcome-screen--crew .welcome-action--crew { width: auto; margin-top: 0; }
/* Color: the pill becomes the design's full-width primary card, the cards
   sit two across underneath, the panel centres vertically. */
.welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__cta--crew { display: contents; }
/* Color's right panel is ~550 units wide. Up to three cards stack in one
   column like the design's own Crew / Visitor Out cards; four or more go
   two across (an odd last card stretches the full width), because one
   column of eight ran off the bottom of the iPad (founder 2026-09-09).
   Two-across cards are tighter: smaller icon box, a label that may wrap. */
.welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: calc(10 * var(--ui-unit));
  margin-top: calc(12 * var(--ui-unit)); max-width: none;
}
.welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-action--crew {
  padding: calc(14 * var(--ui-unit)) calc(20 * var(--ui-unit));
  grid-column: 1 / -1 !important;
}
.welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-action--crew .welcome-action__icon {
  width: calc(40 * var(--ui-unit)); height: calc(40 * var(--ui-unit));
}
/* Landscape only: portrait's panel is too narrow for two across and has
   the height for one column. */
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="4"] .welcome-action--crew,
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="5"] .welcome-action--crew,
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="6"] .welcome-action--crew,
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="7"] .welcome-action--crew,
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="8"] .welcome-action--crew {
  grid-column: span 6 !important;
  padding: calc(12 * var(--ui-unit)) calc(14 * var(--ui-unit)); gap: calc(12 * var(--ui-unit));
}
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="4"] .welcome-action--crew .welcome-action__icon,
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="5"] .welcome-action--crew .welcome-action__icon,
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="6"] .welcome-action--crew .welcome-action__icon,
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="7"] .welcome-action--crew .welcome-action__icon,
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="8"] .welcome-action--crew .welcome-action__icon {
  width: calc(36 * var(--ui-unit)); height: calc(36 * var(--ui-unit));
}
/* An odd last card stretches the row. */
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="5"] .welcome-action--crew:last-child,
body:not(.app-portrait) .welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-screen__actions--crew[data-crew-count="7"] .welcome-action--crew:last-child {
  grid-column: 1 / -1 !important;
}
.welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-cta {
  padding: calc(18 * var(--ui-unit)) calc(20 * var(--ui-unit));
}
/* Whatever the design, a label can never run past its card. */
.welcome-action--crew .welcome-action__text { min-width: 0; }
.welcome-action--crew .welcome-action__label,
.welcome-action--crew .welcome-action__sub { overflow-wrap: break-word; }
.welcome-screen.welcome-screen--crew[data-welcome-design="color"] .welcome-col--right { justify-content: center; }
/* Classic base (no design attribute) has no card grammar of its own — give
   the crew pair the Classic treatment so the pill and cards still draw. */
.welcome-screen.welcome-screen--crew:not([data-welcome-design]) .welcome-action--crew {
  flex-direction: row; align-items: center; gap: calc(16 * var(--ui-unit)); text-align: left;
  border-radius: calc(18 * var(--ui-unit)); padding: calc(18 * var(--ui-unit)) calc(20 * var(--ui-unit));
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
  backdrop-filter: blur(calc(14 * var(--ui-unit))); -webkit-backdrop-filter: blur(calc(14 * var(--ui-unit)));
}

/* Card colour (admin: Crew Display → Card colour). strip = a colour bar
   inside the card's left edge; icon = the icon box takes the colour. */
.welcome-screen__actions--crew[data-crew-accent="strip"] .welcome-action--crew {
  box-shadow: inset calc(5 * var(--ui-unit)) 0 0 var(--crew-card-color);
  padding-left: calc(26 * var(--ui-unit));
}
.welcome-screen__actions--crew[data-crew-accent="icon"] .welcome-action--crew .welcome-action__icon {
  background: var(--crew-card-color) !important;
}
.welcome-screen__actions--crew[data-crew-accent="icon"] .welcome-action--crew .welcome-action__icon svg {
  stroke: #fff !important;
}


main {
  flex: 1;
  overflow: hidden;
  padding: 0;
}

/* ===============================
   HEADINGS
=============================== */
h2 {
  padding: 20px;
  text-align: center;
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: 0.5px;
  margin: 0;
}

/* ===============================
   BOARD HEADER + SETTINGS
=============================== */
.board-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.board-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* ── Pull-to-Refresh ── */
.pull-refresh-indicator {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.pull-refresh-spinner {
  width: 24px;
  height: 24px;
  color: var(--color-accent, #56b2bb);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.pull-refresh-indicator.is-pulling .pull-refresh-spinner {
  opacity: 1;
}

.pull-refresh-indicator.is-refreshing .pull-refresh-spinner {
  opacity: 1;
  animation: pull-refresh-spin 0.8s linear infinite;
}

@keyframes pull-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.board-section {
  padding: 24px calc(var(--board-edge) + env(safe-area-inset-right, 0px)) calc(140px + env(safe-area-inset-bottom, 0)) calc(var(--board-edge) + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.board-header {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  grid-template-rows: auto auto;
  align-items: center;
  /* 18px, not 30px. The safe-area inset already clears the status bar; this
     sits on top of it, so 30px was air ABOVE air. Costs every screen in the
     app, which is why it was worth measuring rather than guessing. */
  padding: calc(18px + env(safe-area-inset-top, 0px)) calc(var(--board-edge) + env(safe-area-inset-right, 0px)) 12px calc(var(--board-edge) + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.board-header h2 {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
}

/* ── Identity header (pilot: crew board) ─────────────────────────────
   Two-line vessel identity beside the existing home-button card —
   marketing-site typography on the light theme. Sizes use clamp() with
   px floors (NOT --ui-unit: that unit is referenced to 1024x768
   landscape and collapses in portrait — it shrank this header to 12px
   text on an iPad Mini, 2026-06-12). The home button keeps its own
   base styling: it is already the rounded white card of the design. */
.board-header--ident {
  grid-template-columns: auto 1fr 38px;
  column-gap: clamp(14px, 1.6vw, 22px);
}
.board-header__home[hidden],
.board-header__back[hidden] { display: none; }
.board-header--ident h2 { display: none; }
.board-ident {
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.35vw, 5px);
  min-width: 0;
}
/* Right-aligned header controls have to land on the same right edge as the
   cards below them, or they read as dropped in the middle of the row. Only
   crew keeps the third column (the gear), so every other identity view runs
   the block to the page edge. Toggled with the gear itself — see
   HEADER_SETTINGS_VIEWS. */
.board-header--ident-wide .board-ident { grid-column: 2 / -1; }
.board-ident[hidden] { display: none; }
.board-ident__line1 {
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.8vw, 11px);
  min-width: 0;
}
/* Views with line-1 controls reserve the row whether the controls are up or
   not, so opening search doesn't shove the first row of the list down.
   42px = the switch (34px + 3px padding + 1px border, both sides). The
   line-2 reservation went with the scope chips: they live on line 1 now
   (founder 2026-08-18 — one band, less header), and the sub-view trail
   that remains on line 2 doesn't need held space. */
.board-ident--acts .board-ident__line1 { min-height: 42px; }
.board-ident__vessel {
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-ident__context {
  font-size: clamp(12px, 1.25vw, 14px);
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
}
.board-ident__context::before { content: "· "; }
.board-ident__line2 {
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.8vw, 11px);
  font-size: clamp(12.5px, 1.3vw, 14.5px);
  line-height: 1.2;
}
/* display:flex beats a bare [hidden], and a board with no tabs must not pay
   for an empty row plus the gap above it. */
.board-ident__line2[hidden] { display: none; }

/* The sub-view trail: a folder path, a muster subtitle, a checklist crumb.
   One slot, one at a time, small and quiet under the name it belongs to. */
.board-ident__sub {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.board-ident__sub[hidden] { display: none; }
.board-ident__sub .safety-breadcrumbs,
.board-ident__sub .safety-view__subtitle { margin: 0; }

.board-ident__status[hidden] { display: none; }
.board-ident__status {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 0.55vw, 7px);
  /* On line 1 now, beside the vessel name — a fact about the boat rather
     than a page label, which is all line 2 was carrying on the crew board. */
  font-size: clamp(12px, 1.25vw, 13.5px);
  font-weight: 600;
  color: #1f7a52;
  white-space: nowrap;
}
/* No separator glyph. It divided the page label from the count on line 2;
   on line 1 it lands immediately before the status's own green dot, and two
   dots in a row read as a stutter rather than a separator. */
.board-ident__dot {
  width: clamp(6px, 0.65vw, 8px);
  height: clamp(6px, 0.65vw, 8px);
  border-radius: 50%;
  background: #2bb673;
}
/* Recording bar owns the header centre — identity steps aside like the h2. */
body.muster-recording .board-ident { visibility: hidden; }

.board-header__muster {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0;
  padding-bottom: 0;
}

.board-header__muster .muster-emergency {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.board-header__muster .muster-emergency-card {
  min-height: 64px;
}

.muster-emergency--header {
  width: 100%;
}

.board-header--muster h2 {
  display: none;
}

.board-header--muster .board-header__muster {
  display: none;
}

.board-header--muster-active .board-header__muster {
  display: flex;
}

.board-header--muster-active .board-header__home,
.board-header--muster-active .board-header__settings {
  opacity: 0.4;
  pointer-events: none;
}

.board-header--muster-active {
  padding-top: calc(1.05rem + env(safe-area-inset-top, 0px));
  padding-bottom: 0.25rem;
}

.board-header--muster-active .board-header__home {
  display: none;
}

.muster-remote-alert {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 15, 25, 0.92);
  z-index: 2000;
  text-align: center;
}

.muster-remote-alert.hidden {
  display: none;
}

.muster-remote-alert__card {
  width: min(880px, 92vw);
  padding: 36px 40px;
  border-radius: 28px;
  background: rgba(15, 23, 42, 0.65);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 30px 70px rgba(5, 10, 20, 0.45);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.muster-remote-alert__kicker {
  font-size: clamp(1rem, 1.6vw + 0.8rem, 1.6rem);
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: #fca5a5;
  font-weight: 700;
}

.muster-remote-alert__message {
  font-size: clamp(1.6rem, 3.4vw + 1rem, 3.4rem);
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.15;
}

/* 38px, matching .board-iconbtn. Home, Back and the gear are the same
   component as the search button beside them — they were 42, 44 and 42
   against its 38, which is three sizes doing one job. */
/* Pin the side buttons to line 1 on EVERY ident board. When the ident
   block grows a second line (a sub-view trail), the grid's
   align-items:center would drop the home/gear to the two-line centre —
   22px below the vessel name they belong beside ("nothing is aligned",
   founder 2026-08-17; the guest board's sagging home icon, 2026-08-18 —
   this was scoped to crew-only and the asymmetry became the bug). Pin to
   the first line's 42px band ((42-38)/2 = 2px); on a one-line header
   that's identical to centred, so it can apply everywhere. */
.board-header--ident .board-header__home,
.board-header--ident .board-header__back,
.board-header--ident .board-header__settings {
  align-self: start;
  margin-top: 2px;
}

.board-header__home,
.board-header__settings {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #ffffff;
  color: #3f4856;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.board-header__settings svg {
  overflow: visible; /* the gear's right cap touches the viewBox edge */
}

.board-header__settings.hidden {
  display: none;
}

/* The gear is pinned to the last column; Home and Back are not — they take
   column 1 by auto-placement. Without this, auto-placement drops the gear
   UNDER the Back button on any view whose identity block spans to the page
   edge. That can't happen today (the gear and that span are both keyed off
   HEADER_SETTINGS_VIEWS) but it is one careless line away from happening. */
.board-header__settings {
  grid-column: 3;
  grid-row: 1;
}

.board-header__home:active,
.board-header__settings:active {
  transform: scale(0.96);
}

/* ===============================
   CREW SETTINGS MODAL
=============================== */
.crew-settings-modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0;
  z-index: 1000;
  pointer-events: none;
}

.crew-settings-modal.hidden {
  display: none;
}

.crew-settings-modal:not(.hidden) {
  pointer-events: auto;
}

.crew-settings-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: settingsFadeIn 0.2s ease-out;
}

@keyframes settingsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes settingsSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 2026-08-31 rebuild: 55% of the screen (founder: the 360px sliver was
   "terrible… could take up at least 50%"), 92% in portrait. */
.crew-settings-modal__inner {
  position: relative;
  width: min(55vw, 780px);
  height: 100vh;
  max-height: 100vh;
  background: #f2f5f7;
  box-shadow: -18px 0 50px rgba(10, 15, 26, 0.35);
  display: flex;
  flex-direction: column;
  animation: settingsSlideIn 0.25s ease-out;
}

body.app-portrait .crew-settings-modal__inner {
  width: 92vw;
}

.crew-settings-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 26px 12px;
  flex-shrink: 0;
}

.crew-settings-modal__header-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crew-settings-modal__icon {
  color: var(--color-accent);
}

.crew-settings-modal__header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

/* House ×: white rounded square with a bold ink glyph — the same weight as
   the sign-out topbar buttons (founder 08-31: the grey disc "doesn't look
   so good and the X isn't that big or bold"). */
.crew-settings-modal__close {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: none;
  background: #fff;
  color: #15203a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.crew-settings-modal__close:hover {
  background: rgba(15, 23, 42, 0.1);
  color: #334155;
}

.crew-settings-modal__close:active {
  transform: scale(0.95);
}

.crew-settings-modal__tabs {
  display: flex;
  gap: 6px;
  padding: 12px 20px;
  background: rgba(241, 245, 249, 0.6);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  flex-shrink: 0;
}

.crew-settings-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}

.crew-settings-tab svg {
  flex-shrink: 0;
}

.crew-settings-tab:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.8);
  color: #475569;
}

.crew-settings-tab.is-active {
  background: #ffffff;
  color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.crew-settings-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}

/* ── 2026-08-31 card family (cs-*): titles inside as header rows, honest
   status pills, record rows. Mock: design-mocks/ipad/device-settings. ── */
.cs-card {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
}

.cs-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: #fbfcfd;
  border-bottom: 1px solid #eef2f6;
}

.cs-card__head > svg {
  width: 18px;
  height: 18px;
  color: #3f4856;
  flex: none;
}

.cs-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #15203a;
}

.cs-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1.5px solid currentColor;
  font-variant-numeric: tabular-nums;
  background: rgba(10, 15, 34, 0.07);
  color: #36415a;
  white-space: nowrap;
}

.cs-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.cs-pill--good { background: #d7f4e3; color: #0b6b43; }
.cs-pill--warn { background: #fdebcf; color: #8a4a07; }
.cs-pill--bad { background: #fcdede; color: #b02525; }
.cs-pill--muted { background: rgba(10, 15, 34, 0.07); color: #36415a; }

.cs-pill.is-checking .cs-pill__dot {
  animation: cs-dot-pulse 0.9s ease-in-out infinite;
}

@keyframes cs-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.cs-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid #eef2f6;
  font-size: 15.5px;
  color: #15203a;
}

.cs-card__head + .cs-row,
.cs-card__head + .cs-explain + .cs-row {
  border-top: 0;
}

.cs-row__ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eef2f7;
  display: grid;
  place-items: center;
  flex: none;
}

.cs-row__ico svg {
  width: 19px;
  height: 19px;
  color: #3f4856;
}

.cs-row__main { flex: 1; min-width: 0; }

.cs-row__t {
  font-weight: 700;
  color: #15203a;
  display: block;
}

.cs-row__t--danger { color: #b02525; }

.cs-row__s {
  font-size: 13.5px;
  color: #5a6573;
  font-weight: 600;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.cs-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  color: #5a6573;
}

.cs-btn {
  border: 1px solid #c9d2dd;
  background: #fff;
  color: #15203a;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  padding: 0 16px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}

.cs-btn:active { background: #f1f5f9; }
.cs-btn:disabled { opacity: 0.45; cursor: default; }
.cs-btn svg { width: 16px; height: 16px; }
.cs-btn--primary { background: #0b1220; border-color: #0b1220; color: #fff; }
.cs-btn--primary:active { background: #1a2435; }
.cs-btn--danger { border-color: #e05656; color: #b02525; }
.cs-btn--danger:active { background: #fef2f2; }

.cs-select {
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #15203a;
  height: 40px;
  border: 1px solid #c9d2dd;
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  max-width: 52%;
}

.cs-helper {
  margin: 0;
  padding: 0 18px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #5a6573;
}

.cs-helper:empty { display: none; }

/* Offline explanation band (the printer-saga distilled) */
.cs-explain {
  margin: 12px 18px;
  padding: 12px 14px;
  background: #fef6f6;
  border: 1px solid #f3c6c6;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #7a2222;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-explain b { color: #b02525; }
.cs-explain .cs-btn { align-self: flex-start; }
.cs-explain.hidden { display: none; }

/* Discovered printers */
.cs-plist.hidden { display: none; }

.cs-prow {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-top: 1px solid #eef2f6;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cs-prow:active { background: #f8fafc; }

.cs-prow.is-selected {
  box-shadow: inset 0 0 0 2px #0b1220;
  border-radius: 10px;
  border-top-color: transparent;
}

/* Reprint rows */
.cs-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.cs-reprint-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.cs-reprint-toggle.is-open svg { transform: rotate(180deg); }

#printerReprintList.hidden { display: none; }
#printerReprintList.is-collapsed .cs-row[data-reprint-row] { display: none; }

.crew-settings-modal__panel {
  display: none;
}

.crew-settings-modal__panel--active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Settings Card */
.crew-settings-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(226, 232, 240, 0.7);
}

.crew-settings-card__header {
  margin-bottom: 14px;
}

.crew-settings-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.crew-settings-card__desc {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

.crew-settings-card--danger {
  border-color: rgba(220, 38, 38, 0.2);
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.3), rgba(254, 202, 202, 0.1));
}

/* Device info rows */
.crew-settings-device-info {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crew-settings-device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(203, 213, 225, 0.5);
}

.crew-settings-device-row:last-child {
  border-bottom: none;
}

.crew-settings-device-label {
  font-size: 0.85rem;
  color: #64748b;
}

.crew-settings-device-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

.crew-settings-device-value--mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: #475569;
}

/* Status indicator */
.crew-settings-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}

.crew-settings-status__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
}

.crew-settings-status__dot--online {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.crew-settings-status__dot--offline {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.crew-settings-status__dot--neutral {
  background: #94a3b8;
}

.crew-settings-status__detail {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.4;
}

/* Settings Field */
.crew-settings-field {
  margin: 14px 0 16px;
  display: grid;
  gap: 8px;
}

.crew-settings-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crew-settings-select-wrap {
  position: relative;
}

.crew-settings-field select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(203, 213, 225, 0.8);
  padding: 12px 36px 12px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #0f172a;
  background: #f8fafc;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.crew-settings-field select:focus {
  outline: none;
  border-color: var(--color-accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(86, 178, 187, 0.15);
}

.crew-settings-select-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}

.crew-settings-field__note {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

/* Action buttons */
.crew-settings-actions {
  display: flex;
  gap: 10px;
}

.crew-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  border-radius: 12px;
  border: none;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--color-accent) 0%, #4da8b3 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(86, 178, 187, 0.3);
  transition: all 0.15s ease;
  cursor: pointer;
}

.crew-settings-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(86, 178, 187, 0.35);
}

.crew-settings-btn:active {
  transform: translateY(0);
}

.crew-settings-btn--ghost {
  background: #f1f5f9;
  color: #334155;
  box-shadow: none;
  border: 1px solid rgba(203, 213, 225, 0.6);
}

.crew-settings-btn--ghost:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.crew-settings-btn--full {
  width: 100%;
  flex: none;
}

.crew-settings-btn--danger {
  background: #fee2e2;
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.3);
}

.crew-settings-btn--danger:hover {
  background: #fecaca;
  border-color: rgba(220, 38, 38, 0.5);
}

.crew-settings-btn--danger:active {
  background: #fca5a5;
}

.crew-settings-btn svg {
  flex-shrink: 0;
}

.crew-settings-helper {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #64748b;
}

.crew-settings-helper:empty {
  display: none;
}

/* Printer/Visitor List */
.crew-settings-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.crew-settings-list.hidden {
  display: none;
}

.crew-settings-list__item {
  border: 1px solid rgba(203, 213, 225, 0.6);
  border-radius: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  text-align: left;
  color: #1e293b;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  cursor: pointer;
}

.crew-settings-list__item:hover {
  background: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.5);
}

.crew-settings-list__item span {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  margin-top: 3px;
}

.crew-settings-list__name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crew-settings-list__tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(86, 178, 187, 0.15);
  color: var(--color-accent);
}

.crew-settings-list__item.is-selected {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.crew-settings-list__item.is-selected .crew-settings-list__tag {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

/* Reprint list items */
.crew-settings-reprint__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.crew-settings-reprint__details {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crew-settings-reprint__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crew-settings-reprint__meta {
  font-size: 0.76rem;
  color: #64748b;
}

.crew-settings-reprint__btn {
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-accent) 0%, #4da8b3 100%);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.crew-settings-reprint__btn:hover {
  transform: scale(1.02);
}

.crew-settings-reprint__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ===============================
   CREW PIN MODAL
=============================== */
.crew-pin-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 34, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1001;
}

.crew-pin-modal.hidden {
  display: none;
}

.crew-pin-modal__inner {
  width: min(340px, 92vw);
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.25);
}

.crew-pin-modal__subtitle {
  margin: 8px 0 14px;
  color: #64748b;
  font-size: 0.9rem;
}

.crew-pin-modal__input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 10px 12px;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 8px;
}

.crew-pin-modal__error {
  margin: 0 0 10px;
  color: #dc2626;
  font-size: 0.85rem;
}

.crew-pin-modal__actions {
  display: flex;
  gap: 10px;
}

.crew-pin-modal__btn {
  flex: 1;
  border-radius: 999px;
  border: none;
  padding: 10px 12px;
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 600;
}

.crew-pin-modal__btn--ghost {
  background: #e2e8f0;
  color: #1e293b;
}

/* ===============================
   CREW PHOTO MODAL
=============================== */
.crew-photo-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 34, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 45;
  padding: 16px;
  transition: background 0.25s ease-out;
}

.crew-photo-modal.is-open {
  background: rgba(10, 15, 34, 0.55);
}

.crew-photo-modal.is-closing {
  background: rgba(10, 15, 34, 0);
}

.crew-photo-modal.hidden {
  display: none;
}

.crew-photo-modal__inner {
  width: min(520px, 94%);
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.crew-photo-modal.is-open .crew-photo-modal__inner {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.crew-photo-modal.is-closing .crew-photo-modal__inner {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
}

.crew-photo-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crew-photo-modal__header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #0f172a;
}

.crew-photo-modal__close {
  border: none;
  background: #e2e8f0;
  color: #1e293b;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}

.crew-photo-modal__name {
  margin: 0;
  font-weight: 600;
  color: #1f2937;
}

.crew-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crew-photo-flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
  pointer-events: none;
}

.crew-photo-flash.is-active {
  opacity: 0.85;
}

.crew-photo-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.35);
  z-index: 3;
  pointer-events: none;
}

.crew-photo-frame video,
.crew-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crew-photo-error {
  margin: 0;
  color: #dc2626;
  font-size: 0.9rem;
}

.crew-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.crew-photo-btn {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}

.crew-photo-btn--ghost {
  background: #e2e8f0;
  color: #1e293b;
}

.crew-photo-btn--timer {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.crew-photo-btn--timer svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crew-photo-btn.is-active {
  background: #cbd5f5;
}

.crew-photo-btn--primary {
  background: var(--color-accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.crew-photo-btn__icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crew-photo-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ===============================
   CREW LIST
=============================== */
/* ===============================
   CREW LIST — balanced inset layout
=============================== */
.crew-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  /* Deliberately NO max-width:100% here. This rule sits later in the file
     than .board-section, so that declaration out-cascaded the 1120px cap
     and ran every board full-bleed. An accidental rule-split this week gave
     the guest board the capped, centred width for the first time — and
     that is the look the founder wants ("shouldn't the crew just be the
     same length?"), so the cap now applies to all three boards. */
}

/* The department bands are guest-grp cards now, and the guest list spaces its
   cards at 10px — the crew board follows the standard. Scoped to the crew
   container so the visitor board's 16px is untouched. GAP ONLY: an earlier
   edit split .crew-grid here and dragged width/max-width into this
   ID-specificity rule, which beat .board-section's 1120px cap and ran the
   crew board full-bleed while guests stayed inset (founder: "the crew cards
   are longer than the guest cards?"). */
#crew-container.crew-grid {
  gap: 10px;
}

/* The crew band's title/pill treatment now lives with the shared band
   styles — see .guest-grp__nm and the __pill margin rule beside it. Both
   boards use the same anatomy (founder 08-17: "it keeps them the same"). */

/* Department headers wear a quiet slate ground (founder 2026-08-18, mock
   option 1): a collapsed department card and a crew card were the same
   white shape, so containers and content blurred — now grey = department,
   white = person. CREW ONLY: guest party cards stay all-white (parties are
   transient, departments are fixtures). Per-department COLOUR is the
   next-update candidate on top of this same shape. */
.crew-dept .guest-grp__h { background: #eef2f7; }
.crew-dept .guest-grp__h:active { background: #e6ebf2; }

.crew-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crew-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: transparent;
  padding: 4px 2px;
  min-height: 44px;
  cursor: pointer;
}

.crew-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: #7c8aa0;
}

.crew-section-chevron {
  width: 16px;
  height: 16px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.crew-section-toggle[aria-expanded="false"] .crew-section-chevron {
  transform: rotate(-90deg);
}

.crew-section-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #7c8aa0;
}

.crew-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--status-out);
}

.crew-section-dot.is-active {
  background: var(--status-in);
}

.crew-section-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crew-section-list.is-collapsed {
  display: none;
}

.crew-swipe-shell {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.crew-swipe-shell[data-pending="1"] .crew-card {
  pointer-events: none;
}

.crew-swipe-shell[data-pending="1"] .crew-swipe-action {
  opacity: 0;
  pointer-events: none;
}

.crew-swipe-action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 96px;
  border: none;
  border-radius: 18px 0 0 18px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--status-in);
  opacity: 0;
  transform: scale(var(--action-scale, 0.82));
  transform-origin: right center;
  transition: opacity 0.38s ease, transform 0.38s ease;
}

.crew-action-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.crew-action-check {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.crew-swipe-action.is-out {
  background: #ef4444;
}

.crew-swipe-shell[data-revealed="1"] .crew-swipe-action,
.crew-swipe-shell[data-dragging="1"] .crew-swipe-action {
  opacity: 1;
  transform: scale(var(--action-scale, 0.92));
}

.crew-swipe-shell[data-action-pop="1"] .crew-swipe-action {
  animation: crew-action-pop 0.5s ease;
}

.crew-swipe-shell[data-action-confirm="1"][data-action-color="out"] .crew-swipe-action {
  background: #ef4444;
}

.crew-swipe-shell[data-action-confirm="1"][data-action-color="in"] .crew-swipe-action {
  background: var(--status-in);
}

.crew-swipe-shell[data-action-confirm="1"] .crew-action-label {
  opacity: 0;
}

.crew-swipe-shell[data-action-confirm="1"] .crew-action-check {
  opacity: 1;
  transform: scale(1);
  animation: crew-action-check 0.6s ease;
}

@keyframes crew-action-check {
  0% { transform: scale(0.72); }
  45% { transform: scale(1.2); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1.04); }
}

@keyframes crew-action-pop {
  0% { transform: scale(0.86); }
  45% { transform: scale(1.18); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1.06); }
}

.crew-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-card);
  border-radius: 18px;
  border: 1px solid var(--color-border);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s ease,
    background 0.2s ease;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* A card is promoted to its own GPU layer only WHILE it moves. The old rule
   put will-change + a translate3d baseline on every card, permanently — fine
   for 30 crew, fatal for a 700-row A-Z guest list, where 700 composited
   layers blow WKWebView's tile budget and every swipe reads as jank. The
   drag adds is-dragging on its first frame, so promotion still lands before
   any movement paints; setCrewCardOffset clears the inline transform once a
   card is parked so a swiped card gives its layer back. */
.crew-card.is-dragging,
.crew-card.is-snapping {
  will-change: transform;
}

.crew-card.is-active {
  background: var(--color-card-active);
  border-color: rgba(34, 197, 94, 0.2);
}

.crew-card.is-dragging {
  transition: none;
  cursor: grabbing;
}

.crew-card.is-snapping {
  transition-duration: 0.62s;
}

.crew-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  border-radius: 999px;
  padding: 2px;
  background: var(--color-border);
  flex-shrink: 0;
  cursor: pointer;
}

.crew-avatar,
.crew-avatar * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.crew-avatar.is-active {
  background: linear-gradient(135deg, var(--status-in), var(--status-in-light));
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18), 0 10px 18px rgba(34, 197, 94, 0.2);
}

.crew-avatar img,
.crew-avatar .crew-avatar-initials {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 999px;
}

.crew-avatar img {
  object-fit: cover;
  background: #eef2f6;
  display: block;
  z-index: 0;
}

.crew-avatar .crew-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2f6;
  color: #475569;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  z-index: 1;
  transition: opacity 0.2s ease;
}

.crew-avatar.has-photo .crew-avatar-initials {
  opacity: 0;
}

.crew-avatar-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.85);
  color: #ffffff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 3;
}

.crew-avatar.is-processing .crew-avatar-check {
  opacity: 1;
  transform: scale(1);
}

.crew-avatar-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--status-in);
  border: 2px solid #fff;
  display: block;
  z-index: 2;
}

.crew-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crew-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crew-role {
  font-size: 0.78rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crew-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.crew-status-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--status-out);
}

.crew-status-label.is-active {
  color: var(--status-in);
}

/* On the crew and guest boards the status is a PILL (the mock's treatment,
   asked for on device 08-17): the bare green-on-green text was too quiet on
   a washed card. Dark green on the mint fill carries the contrast; weight
   and border do the rest. Scoped to the two boards — vehicles share this
   class and keep the quiet text. */
#crew-container .crew-status-label,
#guest-container .crew-status-label {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: rgba(10, 15, 34, 0.06);
  color: #475569;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

#crew-container .crew-status-label.is-active,
#guest-container .crew-status-label.is-active {
  background: #d7f4e3;
  color: #0b6b43;
}

.crew-status-time {
  font-size: 0.75rem;
  color: #7c8aa0;
}

/* A swipe that did not take. Sits in the activity line so the reason is on the
   card the person just swiped, not in a banner at the top of the board.
   #dc2626 rather than the lighter #ef4444 — this is small text and it has to
   read across a gangway. */
.crew-status-time.is-error {
  color: #dc2626;
  font-weight: 600;
}

/* Retrying is NOT an error, so it doesn't get the red. But it does get said:
   a card sitting in pending for eight seconds with nothing on it reads as a
   frozen app, and the next thing that happens is someone swiping again. */
.crew-status-time.is-waiting {
  color: #8a4a07;
  font-weight: 600;
}

.visitor-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-card);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
}

.visitor-card[data-active="1"] {
  background: var(--color-card-active);
  border-color: rgba(34, 197, 94, 0.2);
}

.visitor-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.visitor-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visitor-meta {
  font-size: 0.76rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visitor-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-right: 8px;
}

.visitor-status-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--status-out);
}

.visitor-status-label.is-active {
  color: var(--status-in);
}

.visitor-activity {
  font-size: 0.72rem;
  color: #7c8aa0;
}

.visitor-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.visitor-return-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.floating-action-btn {
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom, 0));
  right: 28px;
  z-index: 30;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.floating-action-btn:hover {
  background: #49a0a8;
  transform: translateY(-2px);
}

.visitor-wizard {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 34, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  padding: 0 12px;
  transition: padding 0.25s ease, align-items 0.25s ease;
}

.visitor-wizard.keyboard-visible {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--keyboard-offset, 0px));
}

.wizard-dialog {
  background: #fff;
  border-radius: 18px;
  width: min(520px, 94%);
  padding: 32px 32px 24px;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 90vh;
  overflow-y: auto;
}

.wizard-dialog.wizard-dialog--wide {
  width: min(640px, 94%);
}

@media (min-width: 1024px) {
  .wizard-dialog {
    width: min(600px, 80%);
  }

  .wizard-dialog.wizard-dialog--wide {
    width: min(780px, 78%);
  }
}

.wizard-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: #ffffffdd;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
}

.wizard-close:hover {
  background: #ffffff;
}

.wizard-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wizard-welcome-yacht {
  color: var(--color-accent);
}

.wizard-welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

@media (min-width: 520px) {
  .wizard-welcome-actions {
    flex-direction: row;
  }
  .wizard-welcome-actions .wizard-primary,
  .wizard-welcome-actions .wizard-secondary {
    flex: 1;
  }
}

.wizard-name-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-print-preview {
  display: flex;
  gap: 16px;
  align-items: center;
  background: #f5f7fb;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.wizard-print-preview__photo {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  object-fit: cover;
  background: #e6ebf2;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.wizard-print-preview__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #1f2a37;
}

.wizard-print-preview__meta span {
  color: #667085;
  font-size: 0.95rem;
}

@media (min-width: 540px) {
  .wizard-name-grid {
    flex-direction: row;
  }
  .wizard-name-grid input {
    flex: 1;
  }
}

.visitor-depart-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 34, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 120;
}

.visitor-depart-modal.hidden {
  display: none;
}

.visitor-depart-modal__inner {
  background: #fff;
  border-radius: 24px;
  width: min(420px, 90vw);
  padding: 28px 24px;
  box-shadow: 0 28px 54px rgba(10, 15, 34, 0.4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.visitor-depart-modal__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.visitor-depart-btn {
  border: none;
  border-radius: 18px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(86, 178, 187, 0.18);
  color: #0b3d4a;
}

.visitor-depart-btn--danger {
  background: rgba(224, 86, 86, 0.18);
  color: #7a1f1f;
}

.visitor-depart-cancel {
  background: none;
  border: none;
  color: #0b3d4a;
  font-weight: 600;
  cursor: pointer;
}

.visitor-checkout-modal,
.visitor-scan-modal,
.visitor-checkout-success-modal,
.visitor-pass-pin,
.visitor-card-dim {
  --wizard-bg: #f2f5f7;
  --wizard-card: #ffffff;
  --wizard-text: #1a2435;
  --wizard-muted: #6b7280;
  --wizard-border: #dbe1e7;
  --wizard-secondary: #e5e9ef;
  --wizard-muted-bg: #eef1f5;
  --wizard-card-shadow: 0 4px 20px -5px rgba(26, 36, 53, 0.15);
}

.visitor-checkout-modal,
.visitor-checkout-success-modal {
  --wizard-primary: #56b2bb;
  --wizard-primary-strong: #2f8f98;
  --wizard-glow: 0 20px 60px -15px rgba(86, 178, 187, 0.4);
  --color-accent: var(--wizard-primary);
}

.visitor-scan-modal {
  --wizard-primary: #1fada2;
  --wizard-primary-strong: #178f86;
  --wizard-glow: 0 20px 60px -15px rgba(31, 173, 162, 0.4);
  --color-accent: var(--wizard-primary);
}

/* Same design-scale unit as the welcome screen (reference 1024x768; the
   portrait override below re-anchors it), so the bar, rows, reticle and
   buttons keep their proportions on every iPad. */
.visitor-checkout-modal,
.visitor-scan-modal {
  --ui-unit: min(calc(100vw / 1024), calc(100vh / 768));
}

body.app-portrait .visitor-checkout-modal,
body.app-portrait .visitor-scan-modal {
  --ui-unit: min(calc(100vw / 768), calc(100vh / 1024));
}

.visitor-checkout-modal {
  position: fixed;
  inset: 0;
  background: var(--wizard-bg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 calc(40 * var(--ui-unit)) calc(calc(24 * var(--ui-unit)) + env(safe-area-inset-bottom, 0px));
  z-index: 180;
}

.visitor-checkout-modal.hidden {
  display: none;
}

/* Sign-out is one bar and a short list, not a wall of cards. Everything that
   matters sits in the top ~40% so the iPad keyboard (330pt landscape on a
   mini) never covers the bar, the scan button or the first two results. */
.visitor-checkout-modal__inner {
  background: transparent;
  border-radius: 0;
  width: min(calc(900 * var(--ui-unit)), 100%);
  padding: calc(8 * var(--ui-unit)) 0 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 auto;
  min-height: 0;
  flex: 1;
}

.visitor-checkout-modal__topbar {
  width: 100%;
  margin: calc(calc(12 * var(--ui-unit)) + env(safe-area-inset-top, 0px)) auto 0;
  display: grid;
  grid-template-columns: calc(56 * var(--ui-unit)) 1fr calc(56 * var(--ui-unit));
  align-items: center;
  height: calc(64 * var(--ui-unit));
}

.visitor-checkout-modal__topbar h3 {
  margin: 0;
  font-size: calc(18.4 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wizard-text);
  text-align: center;
  width: 100%;
}

.visitor-checkout-modal__close {
  border: 1px solid var(--wizard-border);
  background: var(--wizard-card);
  color: var(--wizard-text);
  border-radius: calc(16 * var(--ui-unit));
  width: calc(56 * var(--ui-unit));
  height: calc(56 * var(--ui-unit));
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--wizard-card-shadow);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.visitor-checkout-modal__spacer {
  width: calc(56 * var(--ui-unit));
  height: calc(56 * var(--ui-unit));
  visibility: hidden;
}

.visitor-checkout-modal__close:hover {
  background: var(--wizard-muted-bg);
  transform: translateY(-1px);
}

/* ---- the bar ---- */
.vso-barrow {
  display: flex;
  align-items: flex-end;
  gap: calc(18 * var(--ui-unit));
}

.vso-type {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: calc(6 * var(--ui-unit)) 0 calc(10 * var(--ui-unit));
}

.vso-type input {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: 0;
  font: inherit;
  font-weight: 700;
  font-size: calc(38.4 * var(--ui-unit));
  letter-spacing: -0.025em;
  color: var(--wizard-text);
  padding: 0 calc(48 * var(--ui-unit)) 0 0;
  caret-color: var(--wizard-primary);
  -webkit-appearance: none;
  appearance: none;
}

.vso-type input::placeholder {
  color: #b7c0cb;
  font-weight: 600;
}

.vso-ul {
  height: 2px;
  background: var(--wizard-border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  margin-top: calc(6 * var(--ui-unit));
}

.vso-ul::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wizard-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vso-type.is-on .vso-ul::after {
  transform: scaleX(1);
}

.vso-clear {
  position: absolute;
  right: 0;
  top: calc(14 * var(--ui-unit));
  width: calc(34 * var(--ui-unit));
  height: calc(34 * var(--ui-unit));
  border-radius: 50%;
  border: 0;
  background: var(--wizard-border);
  color: var(--wizard-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.vso-clear[hidden] {
  display: none;
}

.vso-scan {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--ui-unit));
  border: 0;
  border-radius: calc(18 * var(--ui-unit));
  background: var(--color-dark, #0b1220);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: calc(16.8 * var(--ui-unit));
  padding: 0 calc(22 * var(--ui-unit));
  height: calc(58 * var(--ui-unit));
  margin-bottom: calc(10 * var(--ui-unit));
  cursor: pointer;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.vso-scan[hidden] {
  display: none;
}

.vso-scan:active {
  transform: scale(0.98);
}

/* ---- results ---- */
.visitor-checkout-list {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--ui-unit));
  padding: calc(18 * var(--ui-unit)) 2px calc(8 * var(--ui-unit));
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

.visitor-checkout-list::-webkit-scrollbar {
  height: calc(8 * var(--ui-unit));
  width: calc(8 * var(--ui-unit));
}

.visitor-checkout-list::-webkit-scrollbar-thumb {
  background: rgba(86, 178, 187, 0.35);
  border-radius: calc(999 * var(--ui-unit));
}

.visitor-checkout-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(16 * var(--ui-unit));
  background: var(--wizard-card);
  border-radius: calc(18 * var(--ui-unit));
  border: 1px solid var(--wizard-border);
  padding: calc(12 * var(--ui-unit)) calc(14 * var(--ui-unit));
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  box-shadow: var(--wizard-card-shadow);
  transition: transform 0.15s ease, border-color 0.2s ease;
  animation: vso-pop 0.25s ease both;
}

@keyframes vso-pop {
  from { opacity: 0; transform: translateY(calc(6 * var(--ui-unit))); }
  to { opacity: 1; transform: none; }
}

.visitor-checkout-card:active {
  transform: scale(0.99);
}

.visitor-checkout-card:focus-visible {
  border-color: var(--wizard-primary);
  outline: none;
}

.visitor-checkout-card:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.visitor-checkout-card .wizard-host-avatar {
  width: calc(60 * var(--ui-unit));
  height: calc(60 * var(--ui-unit));
  border-radius: calc(999 * var(--ui-unit));
  background: var(--wizard-muted-bg);
  color: var(--wizard-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(18.4 * var(--ui-unit));
  letter-spacing: 0.02em;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0; /* the wizard's avatar centres itself with auto margins */
  box-shadow: 0 0 0 1px var(--wizard-border);
}

.visitor-checkout-card .wizard-host-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visitor-checkout-card__details {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}

.visitor-checkout-card .wizard-host-name {
  font-size: calc(19.2 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--wizard-text);
  text-align: left;
}

.visitor-checkout-card .wizard-host-name mark {
  background: none;
  color: var(--wizard-primary-strong);
}

.visitor-checkout-card .wizard-host-role {
  font-size: calc(13.6 * var(--ui-unit));
  color: var(--wizard-muted);
  opacity: 1;
  text-align: left;
}

.visitor-checkout-card__go {
  margin-left: auto;
  color: #b7c0cb;
  display: flex;
  flex-shrink: 0;
}

/* one quiet line under the bar — it must never move the bar (the old
   order:-1 hoisted it ABOVE the bar and shoved the screen down) */
.visitor-checkout-empty {
  margin: 0;
  padding: calc(14 * var(--ui-unit)) calc(2 * var(--ui-unit)) 0;
  color: var(--wizard-muted);
  font-weight: 500;
  font-size: calc(15.2 * var(--ui-unit));
  line-height: 1.5;
}

.visitor-checkout-empty.hidden {
  display: none;
}

.visitor-checkout-status {
  margin: 0;
  font-size: calc(13.6 * var(--ui-unit));
  color: var(--wizard-text);
}

/* ---- confirm sheet ---- */
.vso-dim {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.38);
  -webkit-backdrop-filter: blur(calc(3 * var(--ui-unit)));
  backdrop-filter: blur(calc(3 * var(--ui-unit)));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.vso-dim.hidden {
  display: none;
}

.vso-sheet {
  width: min(calc(440 * var(--ui-unit)), 86%);
  background: var(--wizard-card);
  border-radius: calc(28 * var(--ui-unit));
  padding: calc(30 * var(--ui-unit)) calc(28 * var(--ui-unit)) calc(24 * var(--ui-unit));
  text-align: center;
  box-shadow: 0 calc(30 * var(--ui-unit)) calc(60 * var(--ui-unit)) calc(-20 * var(--ui-unit)) rgba(0, 0, 0, 0.4);
  animation: vso-pop 0.22s ease both;
}

.vso-sheet .wizard-host-avatar {
  width: calc(96 * var(--ui-unit));
  height: calc(96 * var(--ui-unit));
  border-radius: calc(999 * var(--ui-unit));
  margin: 0 auto calc(14 * var(--ui-unit));
  background: var(--wizard-muted-bg);
  color: var(--wizard-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(30.4 * var(--ui-unit));
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--wizard-border);
}

.vso-sheet .wizard-host-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vso-sheet h2 {
  margin: 0 0 calc(4 * var(--ui-unit));
  font-size: calc(26.4 * var(--ui-unit));
  letter-spacing: -0.025em;
  color: var(--wizard-text);
  text-wrap: balance;
}

.vso-sheet p {
  margin: calc(6 * var(--ui-unit)) 0 calc(20 * var(--ui-unit));
  color: var(--wizard-muted);
  font-size: calc(14.72 * var(--ui-unit));
}

.vso-sheet__co {
  margin: calc(6 * var(--ui-unit)) 0 0 !important;
  font-size: calc(16 * var(--ui-unit)) !important;
  font-weight: 600;
  color: var(--wizard-text) !important;
}

.vso-sheet__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8 * var(--ui-unit));
  margin: calc(12 * var(--ui-unit)) 0 calc(22 * var(--ui-unit));
}

.vso-chip {
  display: inline-flex;
  align-items: center;
  height: calc(32 * var(--ui-unit));
  padding: 0 calc(14 * var(--ui-unit));
  border-radius: 999px;
  background: var(--wizard-muted-bg);
  color: var(--wizard-text);
  font-size: calc(13.5 * var(--ui-unit));
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.vso-sheet__acts {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--ui-unit));
}

.vso-btn {
  border: 0;
  border-radius: calc(16 * var(--ui-unit));
  padding: calc(16 * var(--ui-unit));
  font: inherit;
  font-weight: 700;
  font-size: calc(16.8 * var(--ui-unit));
  cursor: pointer;
}

/* Green, not the chrome teal: this is the "go" and the success tick it
   leads to is green too (founder, 2026-08-29). */
.vso-btn--primary {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
}

.vso-btn--primary:active:not(:disabled) {
  background: #15803d;
}

.vso-btn--primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

.vso-btn--ghost {
  background: transparent;
  color: var(--wizard-muted);
}

.visitor-scan-modal {
  position: fixed;
  inset: 0;
  background: #070b14;
  color: #fff;
  z-index: 130;
}

.visitor-scan-modal.hidden {
  display: none;
}

/* Native scanning: the camera preview sits BEHIND a transparent web view,
   so every ground between it and the reticle has to get out of the way. */
html.native-scan,
html.native-scan body,
html.native-scan .visitor-scan-modal,
html.native-scan .visitor-scan-modal__frame {
  background: transparent !important;
}

/* …and everything else on the page has to go too, or the crew board shows
   through the camera (founder, 2026-08-29: "now i see the crew board lmao").
   The scan modal is a direct child of <body>; hide its siblings, not just
   their grounds. */
html.native-scan body > *:not(#visitorScanModal) {
  visibility: hidden !important;
}

/* The frame is the whole screen: the native preview is positioned over this
   rect, and on the web build the <video> fills it. */
.visitor-scan-modal__frame {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 20%, #22314a 0%, #0e1524 55%, #070b14 100%);
  overflow: hidden;
}

.visitor-scan-modal__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.visitor-scan-modal__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Corner reticle in the app's teal, with a slow sweep so the screen reads as
   live even before the camera warms up. Sized to a badge held at arm's length. */
.visitor-scan-modal__reticle {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(62vw, calc(560 * var(--ui-unit)));
  aspect-ratio: 1.58;
  transform: translate(-50%, -50%);
}

.visitor-scan-modal__reticle i {
  position: absolute;
  width: calc(44 * var(--ui-unit));
  height: calc(44 * var(--ui-unit));
  border: calc(4 * var(--ui-unit)) solid var(--color-accent, #56b2bb);
}

.visitor-scan-modal__reticle i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: calc(12 * var(--ui-unit)) 0 0 0; }
.visitor-scan-modal__reticle i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 calc(12 * var(--ui-unit)) 0 0; }
.visitor-scan-modal__reticle i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 calc(12 * var(--ui-unit)); }
.visitor-scan-modal__reticle i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 calc(12 * var(--ui-unit)) 0; }

.visitor-scan-modal__sweep {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  top: 8%;
  background: linear-gradient(90deg, transparent, var(--color-accent, #56b2bb), transparent);
  box-shadow: 0 0 calc(18 * var(--ui-unit)) var(--color-accent, #56b2bb);
  animation: visitor-scan-sweep 2.6s ease-in-out infinite;
}

@keyframes visitor-scan-sweep {
  0%, 100% { top: 8%; }
  50% { top: 90%; }
}

@media (prefers-reduced-motion: reduce) {
  .visitor-scan-modal__sweep { animation: none; top: 50%; }
}

.visitor-scan-modal__topbar {
  position: absolute;
  top: calc(calc(12 * var(--ui-unit)) + env(safe-area-inset-top, 0px));
  left: calc(40 * var(--ui-unit));
  right: calc(40 * var(--ui-unit));
  display: grid;
  grid-template-columns: calc(56 * var(--ui-unit)) 1fr calc(56 * var(--ui-unit));
  align-items: center;
  height: calc(64 * var(--ui-unit));
}

.visitor-scan-modal__title {
  margin: 0;
  font-size: calc(18.4 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px calc(8 * var(--ui-unit)) rgba(0, 0, 0, 0.5);
}

.visitor-scan-modal__home {
  width: calc(60 * var(--ui-unit));
  height: calc(60 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  border: 0;
  background: #fff;
  color: #0b1426;
  box-shadow: 0 calc(6 * var(--ui-unit)) calc(20 * var(--ui-unit)) rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.visitor-scan-modal__spacer {
  width: calc(56 * var(--ui-unit));
  height: calc(56 * var(--ui-unit));
  visibility: hidden;
}

.visitor-scan-modal__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(120 * var(--ui-unit)) calc(40 * var(--ui-unit)) calc(calc(30 * var(--ui-unit)) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(5, 8, 14, 0.55) 40%, rgba(5, 8, 14, 0.92));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18 * var(--ui-unit));
  text-align: center;
}

.visitor-scan-modal__cap {
  margin: 0;
  font-size: calc(30.4 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px calc(6 * var(--ui-unit)) rgba(0, 0, 0, 0.6), 0 0 calc(24 * var(--ui-unit)) rgba(0, 0, 0, 0.5);
}

.visitor-scan-modal__status {
  margin: 0;
  min-height: 1.2em;
  font-size: calc(16 * var(--ui-unit));
  font-weight: 700;
  color: var(--color-accent, #56b2bb);
  letter-spacing: 0.02em;
  text-shadow: 0 1px calc(6 * var(--ui-unit)) rgba(0, 0, 0, 0.6);
}

/* Initialising: the status breathes and the sweep runs; the camera fades up
   behind it (native side animates the preview in over ~0.45s). */
.visitor-scan-modal.is-init .visitor-scan-modal__status {
  text-transform: uppercase;
  font-size: calc(12.8 * var(--ui-unit));
  letter-spacing: 0.12em;
  animation: visitor-scan-breathe 1.4s ease-in-out infinite;
}

.visitor-scan-modal.is-init .visitor-scan-modal__status::after {
  content: "…";
}

@keyframes visitor-scan-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.visitor-scan-modal__alt {
  border: 0;
  background: #fff;
  color: #0b1426;
  border-radius: calc(999 * var(--ui-unit));
  padding: 0 calc(28 * var(--ui-unit));
  height: calc(58 * var(--ui-unit));
  font: inherit;
  font-size: calc(17.6 * var(--ui-unit));
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 calc(6 * var(--ui-unit)) calc(20 * var(--ui-unit)) rgba(0, 0, 0, 0.35);
}

.visitor-scan-modal__alt:active {
  transform: scale(0.98);
}

.visitor-checkout-success-modal {
  position: fixed;
  inset: 0;
  background: #f2f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 140;
  padding: 0 12px;
  /* NO animation on the modal itself: fading the whole thing in showed the
     crew board through it for the first frames (founder, 08-31). The ground
     is opaque from frame one; the content keeps the fade below. */
}

.visitor-checkout-success-modal.hidden {
  display: none;
}

.visitor-checkout-success-modal__inner {
  width: min(600px, 96vw);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: vrs-fade-in 0.5s ease-out both;
}

.visitor-checkout-success-modal__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #f97316;
  animation: vrs-slide-up 0.5s ease-out 0.5s both;
}

.visitor-checkout-success-modal__subtitle {
  margin: 0;
  color: #64748b;
  font-size: 1.1rem;
  animation: vrs-slide-up 0.5s ease-out 0.6s both;
}

.visitor-checkout-success-modal .wizard-complete-icon {
  width: 128px;
  height: 128px;
  border-radius: 999px;
  /* solid go-green, white tick — the 12% tint read as washed out (founder) */
  background: #16a34a;
  color: #fff;
  box-shadow: 0 18px 40px -14px rgba(22, 163, 74, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  animation: vrs-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.visitor-checkout-success-modal .wizard-complete-icon svg {
  width: 48px;
  height: 48px;
}

.visitor-checkout-success-modal #visitorCheckoutSuccessTitle {
  margin: 0;
  font-size: 2.8rem;
  font-weight: 800;
  color: #1a2435;
  animation: vrs-slide-up 0.5s ease-out 0.4s both;
}

/* ── Vehicle Return Success Screen ── */
.vehicle-return-success {
  position: fixed;
  inset: 0;
  background: #f2f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 140;
  padding: 0 12px;
}

.vehicle-return-success.hidden { display: none; }

/* Reset class to restart child animations without hiding the modal */
.vehicle-return-success.vrs-no-anim * { animation: none !important; }

.vehicle-return-success__inner {
  width: min(600px, 96vw);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vehicle-return-success__icon {
  width: 128px;
  height: 128px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  animation: vrs-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.vehicle-return-success__icon svg {
  width: 48px;
  height: 48px;
}

.vehicle-return-success__title {
  margin: 0;
  font-size: 2.8rem;
  font-weight: 800;
  color: #1a2435;
  animation: vrs-slide-up 0.5s ease-out 0.4s both;
}

.vehicle-return-success__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #f97316;
  animation: vrs-slide-up 0.5s ease-out 0.5s both;
}

.vehicle-return-success__subtitle {
  margin: 0;
  color: #64748b;
  font-size: 1.1rem;
  animation: vrs-slide-up 0.5s ease-out 0.6s both;
}

@keyframes vrs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vrs-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes vrs-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.wizard-step h3 {
  margin: 0 0 12px;
  font-size: 1.2rem;
  color: var(--color-dark);
  padding-right: 70px;
}

.wizard-step h3.wizard-section-title {
  margin-top: 18px;
}

.wizard-text {
  font-size: 0.95rem;
  color: #6b7280;
  margin: 0 0 12px;
}

.wizard-nda-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
}

.wizard-nda-link.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.wizard-nda-missing {
  color: #b45309;
}

.wizard-step input[type="text"],
.wizard-step input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #d0d9dd;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wizard-step input[type="text"]:focus,
.wizard-step input[type="password"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(86, 178, 187, 0.25);
}

.wizard-pill-input {
  width: 100%;
  border-radius: 30px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #f5f7fb;
  padding: 4px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wizard-pill-input:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(86, 178, 187, 0.15);
}

.wizard-pill-input input {
  border: none;
  background: transparent;
  width: 100%;
  padding: 10px 0;
  font-size: 1rem;
  outline: none;
  color: var(--color-text);
}

.wizard-crew-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.wizard-crew-picker label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.wizard-crew-list {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 10px;
  background: #fefefe;
  max-height: min(200px, 35vh);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wizard-crew-list--hidden {
  display: none;
}

.wizard-crew-option {
  border: none;
  border-radius: 14px;
  padding: 12px;
  background: #ffffff;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(13, 23, 43, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wizard-crew-option:hover,
.wizard-crew-option:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(13, 23, 43, 0.12);
}

.wizard-crew-option__name {
  font-weight: 600;
  color: var(--color-text);
}

.wizard-crew-option__meta {
  font-size: 0.85rem;
  color: #6b7280;
}

.wizard-crew-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(86, 178, 187, 0.12);
  color: #0f172a;
}

.wizard-crew-selected.hidden {
  display: none;
}

.wizard-crew-empty {
  font-size: 0.9rem;
  color: #6b7280;
  text-align: center;
  padding: 8px 0;
}

.wizard-host-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-host-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.wizard-host-list--hidden {
  display: none;
}

.wizard-host-option {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px;
  background: #ffffff;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(13, 23, 43, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.wizard-host-option:hover,
.wizard-host-option:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(13, 23, 43, 0.12);
  border-color: rgba(86, 178, 187, 0.5);
}

.wizard-host-option.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(86, 178, 187, 0.2);
}

/* Visit-mode choice cards (step 11 — Unaccompanied / Restricted) */
.wizard-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 640px;
  margin: 8px auto 0;
}

.wizard-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 16px;
  background: #ffffff;
  text-align: center;
  cursor: pointer;
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(13, 23, 43, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.wizard-choice:hover,
.wizard-choice:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(13, 23, 43, 0.12);
  border-color: var(--wizard-primary);
}

.wizard-choice__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  transition: background 0.15s ease, color 0.15s ease;
}

.wizard-choice__title { font-size: 1.15rem; font-weight: 700; }
.wizard-choice__sub { font-size: 0.85rem; color: #64748b; line-height: 1.3; }

.wizard-choice.is-selected {
  border-color: var(--wizard-primary);
  box-shadow: 0 0 0 2px var(--wizard-primary);
}
.wizard-choice.is-selected .wizard-choice__icon {
  background: var(--wizard-primary);
  color: #ffffff;
}

/* Restricted = genuine red signal (matches the red RESTRICTED badge) */
.wizard-choice--restricted.is-selected {
  border-color: #d61f2b;
  box-shadow: 0 0 0 2px #d61f2b;
}
.wizard-choice--restricted.is-selected .wizard-choice__icon {
  background: #d61f2b;
  color: #ffffff;
}

.wizard-host-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  overflow: hidden;
  font-weight: 600;
  color: #0f172a;
}

.wizard-host-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wizard-host-name {
  font-weight: 600;
  color: var(--color-text);
  display: block;
}

.wizard-host-role {
  font-size: 0.85rem;
  color: #6b7280;
  display: block;
}

.wizard-host-status {
  margin-top: 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--status-in);
  display: block;
}

.wizard-host-status--ashore {
  color: #ef4444;
}

.wizard-host-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(86, 178, 187, 0.12);
  color: #0f172a;
}

.wizard-host-selected.hidden {
  display: none;
}

.wizard-host-empty {
  font-size: 0.9rem;
  color: #6b7280;
  text-align: center;
  padding: 6px 0;
}

.wizard-checkbox {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.95rem;
  color: var(--color-text);
}

.wizard-supplemental {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wizard-signature {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--color-text);
}

.wizard-signature span {
  font-weight: 600;
  color: var(--color-dark);
}

.signature-pad {
  position: relative;
  width: 100%;
  height: 180px;
  border: 1px dashed #cbd5f5;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  touch-action: none;
}

.signature-pad canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  cursor: crosshair;
  touch-action: none;
}

.signature-pad__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.signature-pad__placeholder.hidden {
  display: none;
}

.wizard-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #0f172a;
}

.wizard-photo video,
.wizard-photo__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.wizard-photo canvas {
  display: none;
}

.wizard-photo__actions {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.wizard-photo__flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
  pointer-events: none;
}

.wizard-photo__flash.is-active {
  opacity: 0.85;
}

.wizard-photo__countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.35);
  z-index: 3;
  pointer-events: none;
}

.wizard-photo__still.hidden {
  display: none;
}

.wizard-security {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  width: 100%;
}

.wizard-security__icon {
  flex: 0 1 auto;
  max-width: 180px;
  width: 70%;
}

.wizard-security__icon img {
  width: 100%;
  height: auto;
  max-height: 200px;
  display: block;
  object-fit: contain;
}

.wizard-security__body {
  flex: 1 1 320px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

@media (min-width: 700px) {
  .wizard-security {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .wizard-security__icon {
    max-width: 220px;
  }
}

.signature-pad__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.wizard-summary {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--color-text);
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.wizard-primary,
.wizard-secondary {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}

.wizard-primary {
  background: var(--color-accent);
  color: #fff;
}

.wizard-primary:disabled {
  background: #a9cdd1;
  cursor: not-allowed;
}

.wizard-secondary {
  background: #e2e8f0;
  color: var(--color-text);
}

.wizard-error {
  color: #d14343;
  font-size: 0.9rem;
  margin-top: 8px;
}

.wizard-step.hidden {
  display: none;
}
.crew-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  min-width: 0;              /* allow text to wrap inside flex row */
  padding-right: 1rem;       /* breathing room before the toggle */
  width: calc(100% - 3.5rem);/* ensure enough room for italic text on iOS devices */
}

.crew-name {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  line-height: 1.2;
  word-break: break-word;
}

.crew-role {
  display: block;
  font-size: 0.9rem;
  font-style: italic;
  color: #6b7280;
  opacity: 0.9;
  line-height: 1.35;
  max-width: 100%;
  padding-inline-end: 0.75rem; /* provide room for italic overhang */
  word-break: break-word;      /* prevent clipping on long italicized roles */
  overflow-wrap: anywhere;
}

/* toggle on right */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}



.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-border);
  border-radius: 28px;
  transition: background 0.25s, box-shadow 0.25s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s;
}

input:checked + .slider {
  background-color: var(--color-accent);
  box-shadow: 0 0 6px rgba(86, 178, 187, 0.5);
}

input:checked + .slider:before {
  transform: translateX(24px);
}


/* ===============================
   TOGGLE SWITCH
=============================== */
.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-border);
  transition: 0.3s;
  border-radius: 28px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
  background-color: var(--color-accent);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* ===============================
   FLOATING NAVIGATION DOCK
=============================== */
.floating-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 40;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.floating-nav--hidden {
  opacity: 0;
  transform: translateY(80px);
}

.floating-nav__inner {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-radius: 20px;
  background: var(--color-nav);
  border: 1px solid var(--color-nav-border);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.floating-nav__btn {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  min-width: 86px;
  min-height: 56px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.floating-nav__btn span {
  white-space: nowrap;
}

.floating-nav__btn svg {
  transition: transform 0.2s ease;
}

.floating-nav__btn[data-target="muster"] svg {
  color: #ef4444;
}

.floating-nav__btn[data-target="muster"].active svg {
  color: #ef4444;
}

.floating-nav__btn:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
}

.floating-nav__btn.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.floating-nav__btn.active svg {
  transform: scale(1.08);
}

.floating-nav__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

body.muster-active .floating-nav {
  display: none;
}

/* ===============================
   SAFETY LIBRARY
=============================== */
.safety-board {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  box-sizing: border-box;
}

.safety-board__intro {
  position: relative;
  padding-top: 70px;
  overflow: hidden;
}

.safety-board__intro .wave-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 120px;
  transform: translateY(-90%);
  pointer-events: none;
}

.safety-board__intro .wave-top path {
  animation: safety-wave-pan 18s infinite linear;
}

.safety-board__intro h3 {
  margin: 0 0 4px;
  font-size: 1.4rem;
  color: var(--color-dark);
}

.safety-contacts-rail {
  position: relative;
  margin-top: -70px;
  margin-bottom: 10px;
  padding: 6px 6px;
  background: #e7edf2;
  border-radius: 18px;
  z-index: 2;
}

.safety-contacts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 240px);
  gap: 12px;
  padding: 6px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.safety-contacts::-webkit-scrollbar {
  height: 6px;
}

.safety-contacts::-webkit-scrollbar-thumb {
  background: rgba(24, 154, 180, 0.4);
  border-radius: 999px;
}

.safety-contacts--empty {
  display: none;
}

.safety-contacts__empty {
  margin: 0 0 12px;
  color: #7a8899;
  font-size: 0.85rem;
  text-align: center;
}

.safety-contact-card {
  border: none;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 248, 250, 0.95));
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-snap-align: start;
  text-align: left;
  color: inherit;
  min-height: 150px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.safety-contact-card:focus,
.safety-contact-card:hover {
  transform: translateY(-2px);
  box-shadow: none;
  outline: none;
}

.safety-contact-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(24, 154, 180, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.safety-contact-card__icon img {
  width: 24px;
  height: 24px;
}

.safety-contact-card__role {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #189ab4;
  font-weight: 700;
}

.safety-contact-card__name {
  font-size: 1.05rem;
  color: var(--color-dark);
}

.safety-contact-card__phone {
  font-size: 0.95rem;
  color: #475467;
}

.safety-board__intro p {
  margin: 0;
  color: #6b7280;
  font-size: 0.95rem;
}

@keyframes safety-wave-pan {
  0% { transform: translateX(0); }
  100% { transform: translateX(-20%); }
}

.safety-board__layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.safety-board__folders,
.safety-board__details {
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.safety-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.safety-refresh-btn,
.safety-close-btn {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(86, 178, 187, 0.25);
  transition: background 0.2s ease, transform 0.15s ease;
}

.safety-refresh-btn:hover,
.safety-close-btn:hover {
  background: #49a0a8;
  transform: translateY(-1px);
}

.safety-close-btn {
  background: #e2e9ed;
  color: var(--color-dark);
  box-shadow: none;
}

.safety-storage-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(86, 178, 187, 0.12);
  color: var(--color-dark);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
}

.safety-storage__used {
  font-weight: 700;
}

.safety-folder-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.safety-folder-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-card);
  border-radius: 16px;
  padding: 16px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 18px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  text-align: left;
  color: inherit;
  font: inherit;
}

.safety-folder-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 22px rgba(15, 23, 42, 0.12);
}

.safety-folder-card.active {
  border-color: var(--color-accent);
  background: #dff3f5;
  box-shadow: inset 0 0 0 1px rgba(86, 178, 187, 0.35), 0 12px 22px rgba(15, 23, 42, 0.12);
}

.safety-folder-card img {
  width: 64px;
  height: 64px;
}

.safety-folder-card h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-dark);
}

.safety-folder-meta {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.45;
}

.safety-empty-state {
  text-align: center;
  color: #6b7280;
  padding: 40px 20px;
}

.safety-empty-state h3 {
  margin-bottom: 8px;
  color: var(--color-dark);
}

.safety-empty-copy {
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
  margin: 16px 0;
}

.safety-document-list .safety-empty-copy {
  padding: 24px 12px;
  background: var(--color-card);
  border-radius: 12px;
}

.safety-documents.hidden,
.safety-pdf-viewer.hidden {
  display: none;
}

.safety-documents {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.safety-documents__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.safety-documents__header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--color-dark);
}

.safety-documents__header p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #6b7280;
}

.safety-document-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.safety-document-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-card);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border 0.2s ease;
}

.safety-document-item:hover {
  background: #e9eff2;
}

.safety-document-item.active {
  border-color: var(--color-accent);
  background: #dff3f5;
}

.safety-document-info h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-dark);
}

.safety-document-info span {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 4px;
}

.safety-document-meta {
  font-size: 0.8rem;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.safety-viewer {
  background: #f6f8fb;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
}

.safety-viewer__placeholder {
  text-align: center;
  color: #6b7280;
  padding: 40px 10px;
}

.safety-viewer__placeholder h4 {
  margin: 0 0 8px;
  color: var(--color-dark);
}

.safety-pdf-viewer {
  width: 100%;
  min-height: 400px;
  border: none;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.safety-viewer-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 34, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  padding: calc(24px + env(safe-area-inset-top, 0)) calc(24px + env(safe-area-inset-right, 0)) calc(24px + env(safe-area-inset-bottom, 0)) calc(24px + env(safe-area-inset-left, 0));
  backdrop-filter: blur(2px);
}

.safety-viewer-modal.hidden {
  display: none;
}

.safety-viewer-modal__inner {
  background: #fff;
  width: min(1080px, calc(100vw - 48px));
  height: min(900px, calc(100vh - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 32px);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
  position: relative;
}

.safety-viewer-modal__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 18px 22px;
  background: rgba(240, 244, 248, 0.94);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.safety-viewer-modal__header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-dark);
}

.safety-viewer-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-dark);
  font-weight: 600;
  text-align: center;
  z-index: 5;
  pointer-events: none;
}

.safety-viewer-modal__loading p {
  margin: 0;
  font-size: 1rem;
}

.safety-viewer-modal__spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 6px solid rgba(10, 15, 34, 0.12);
  border-top-color: var(--color-accent);
  animation: safety-spinner 0.85s linear infinite;
}

@keyframes safety-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.safety-viewer-modal__close {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  background: rgba(10, 15, 34, 0.92);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px rgba(10, 15, 34, 0.45);
  padding: 0;
}

.safety-viewer-modal__close:hover {
  background: rgba(86, 178, 187, 0.9);
  color: #fff;
}

.safety-viewer-modal__close-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.safety-viewer-modal__close-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.safety-viewer-modal__frame {
  flex: 1;
  border: none;
  width: 100%;
  height: 100%;
  display: block;
  background: #fff;
}

/* Body wrapper: sidebar + viewer side by side */
.safety-viewer-modal__body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}
.safety-viewer-modal__body.hidden { display: none; }

.safety-pdfjs-viewer {
  flex: 1;
  width: 100%;
  min-width: 0;
  overflow-y: auto;
  padding: 24px clamp(16px, 4vw, 36px);
  box-sizing: border-box;
  background: #f9fafc;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.safety-pdfjs-viewer.hidden {
  display: none;
}

/* ── Outline / Chapter Sidebar (overlay drawer) ── */
.safety-outline-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 8px 0 24px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.safety-outline-sidebar.hidden { display: none; }
.safety-outline-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(240, 244, 248, 0.6);
}
.safety-outline-sidebar__title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.safety-outline-sidebar__close {
  background: none; border: none; font-size: 20px;
  color: #94a3b8; cursor: pointer; padding: 0 4px; line-height: 1;
}
.safety-outline-sidebar__close:hover { color: #1a2435; }
.safety-outline-sidebar__nav {
  flex: 1; overflow-y: auto; padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}
.safety-outline-item {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 8px 16px; font-size: 0.88rem; color: #334155;
  cursor: pointer; border: none; background: none;
  width: 100%; text-align: left; line-height: 1.35;
  transition: background 0.15s ease, color 0.15s ease;
}
.safety-outline-item:hover {
  background: rgba(86, 178, 187, 0.08); color: #0f766e;
}
.safety-outline-item--active {
  background: rgba(86, 178, 187, 0.12); color: #0f766e; font-weight: 600;
}
.safety-outline-item__title { flex: 1; min-width: 0; }
.safety-outline-item__page {
  flex-shrink: 0; font-size: 0.75rem; color: #94a3b8;
  min-width: 24px; text-align: right; padding-top: 1px;
}
.safety-outline-item[data-depth="1"] { padding-left: 32px; font-size: 0.84rem; }
.safety-outline-item[data-depth="2"] { padding-left: 48px; font-size: 0.82rem; color: #64748b; }
.safety-outline-item[data-depth="3"] { padding-left: 60px; font-size: 0.8rem; color: #94a3b8; }

/* ── Page Indicator Bar ── */
.safety-page-indicator {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: rgba(240, 244, 248, 0.94);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
}
.safety-page-indicator.hidden { display: none; }
.safety-page-indicator__toc {
  background: none; border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px; padding: 5px 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #64748b; transition: background 0.15s ease, color 0.15s ease;
}
.safety-page-indicator__toc:hover {
  background: rgba(86, 178, 187, 0.1); color: #0f766e;
}
.safety-page-indicator__toc--active {
  background: rgba(86, 178, 187, 0.12); color: #0f766e;
  border-color: rgba(86, 178, 187, 0.3);
}
.safety-page-indicator__toc--no-outline { display: none; }
.safety-page-indicator__label {
  font-size: 0.85rem; color: #64748b;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.safety-page-indicator__input {
  width: 52px; padding: 4px 6px;
  border: 1px solid rgba(15, 23, 42, 0.15); border-radius: 6px;
  font-size: 0.85rem; text-align: center; color: #1a2435; outline: none;
}
.safety-page-indicator__input:focus {
  border-color: #56b2bb; box-shadow: 0 0 0 2px rgba(86, 178, 187, 0.2);
}
.safety-page-indicator__input.hidden { display: none; }

.safety-contact-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 220;
}

.safety-contact-modal__inner {
  background: #fff;
  border-radius: 24px;
  padding: 28px 24px 24px;
  width: min(360px, 92vw);
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.safety-contact-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(15, 23, 42, 0.05);
  border: none;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  font-size: 1.4rem;
  color: #1f2933;
  cursor: pointer;
}

.safety-contact-modal__icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgba(24, 154, 180, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.safety-contact-modal__icon img {
  width: 40px;
  height: 40px;
}

.safety-contact-modal__role {
  margin: 0;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #189ab4;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.safety-contact-modal__inner h3 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--color-dark);
}

.safety-contact-modal__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.safety-contact-modal__label {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
}

.safety-contact-modal__value {
  font-size: 1rem;
  color: #0f172a;
  text-decoration: none;
}

.safety-contact-modal__value:hover {
  text-decoration: underline;
}

.safety-contact-modal__notes {
  font-size: 0.9rem;
  color: #4b5563;
  margin: 0;
}

.safety-contact-modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.safety-contact-modal__action {
  flex: 1;
  text-align: center;
  border-radius: 999px;
  padding: 10px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: #189ab4;
  box-shadow: 0 12px 24px rgba(24, 154, 180, 0.25);
}

.safety-contact-modal__action--ghost {
  background: rgba(24, 154, 180, 0.12);
  color: #189ab4;
  box-shadow: none;
}

.safety-contact-modal__action.disabled {
  opacity: 0.4;
  pointer-events: none;
}

body.contact-modal-open {
  overflow: hidden;
}

.muster-board {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  box-sizing: border-box;
}

body.muster-active #muster-container {
  padding-top: 0;
}

.muster-shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 190px;
}

.muster-state {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Pre-session: vertically centre the slider in the viewport so it sits
   in the middle of the iPad screen on every model. 100dvh accounts for
   iOS safe areas; subtracting ~240px covers the top board header and the
   floating bottom tab bar + padding. */
.muster-state--inactive {
  min-height: calc(100dvh - 240px);
  justify-content: center;
  align-items: center;
}

.muster-sticky {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--color-bg);
  padding: 0 0 0.2rem;
}

.muster-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}

.muster-slider__track {
  position: relative;
  width: 280px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), rgba(249, 115, 22, 0.18));
  overflow: hidden;
  --muster-progress: 0;
}

.muster-slider__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  animation: muster-shimmer 2.2s linear infinite;
}

.muster-slider__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.45), rgba(249, 115, 22, 0.45));
  transform-origin: left center;
  transform: scaleX(var(--muster-progress));
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.muster-slider__text {
  position: absolute;
  /* Start just past the resting handle (handle is left:4px + 56px = 60px)
     so the text centres in the space to the right of the circle, not
     behind it. */
  top: 0;
  bottom: 0;
  left: 64px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.03em;
  transition: opacity 0.2s ease;
  opacity: calc(1 - var(--muster-progress));
  pointer-events: none;
}

.muster-slider__handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 30px rgba(239, 68, 68, 0.35);
  cursor: grab;
  transition: transform 0.25s ease;
  touch-action: none;
}

.muster-slider__handle.is-dragging {
  cursor: grabbing;
  transition: none;
}

.muster-slider__note {
  font-size: 0.75rem;
  color: rgba(100, 116, 139, 0.9);
}

/* Header-takeover recording bar. Lives in the board-header title slot
   (grid-column 2, row 1) and replaces the boardTitle while a muster session
   is actively being recorded. Pulsing dot + mic icon + live MM:SS timer
   gives the captain strong visual confirmation on every tab. */
.muster-rec-bar {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  /* Wide enough to reach into the middle of Fire and Medical (the outer
     emergency cards below), scaling with viewport so it looks balanced on
     iPad Mini through iPad Pro 13". */
  width: clamp(360px, 45vw, 560px);
  margin-bottom: 10px; /* tiny breathing gap before the emergency cards */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.95), rgba(254, 202, 202, 0.85));
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #b91c1c;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 36px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
}
.muster-rec-bar.hidden { display: none; }

.muster-rec-bar__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: muster-rec-bar-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes muster-rec-bar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); opacity: 1; }
  50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); opacity: 0.85; }
}

.muster-rec-bar__icon { color: #b91c1c; flex-shrink: 0; }
.muster-rec-bar__label { font-weight: 700; }
.muster-rec-bar__timer {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  font-size: 1rem;
  color: #7f1d1d;
  padding-left: 4px;
}

/* Hide the normal board title when the recording bar is up. Toggled
   alongside the bar by updateMusterRecordingIndicator() via the
   body.muster-recording class so older iPadOS (no :has() support)
   still renders correctly. */
body.muster-recording .board-header h2 { display: none; }
body.muster-recording .board-header {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.45), rgba(254, 226, 226, 0.12));
  border-bottom-color: rgba(220, 38, 38, 0.15);
}

.muster-emergency {
  display: flex;
  gap: 12px;
}

.muster-emergency-card {
  flex: 1;
  border: none;
  border-radius: 16px;
  padding: 12px;
  color: #fff;
  text-align: left;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.muster-emergency-card:active {
  transform: scale(0.97);
}

.muster-emergency-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

.muster-emergency-card__sub {
  font-size: 0.7rem;
  opacity: 0.85;
}
.muster-emergency-card__phone {
  font-size: 0.62rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.muster-emergency-card--amber {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.muster-emergency-card--teal {
  background: linear-gradient(135deg, #06b6d4, #14b8a6);
}

.muster-emergency-card--rose {
  background: linear-gradient(135deg, #f43f5e, #ef4444);
}

/* VoIP call states */
.muster-emergency-card--calling {
  animation: voip-pulse 1s ease-in-out infinite;
  opacity: 0.85;
}
.muster-emergency-card--connected {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}
@keyframes voip-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.03); opacity: 1; }
}

/* ── Session Log: toggle pill in the sticky bar ── */
.muster-log-toggle {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-top: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}
.muster-log-toggle:hover { background: #f8fafc; }
.muster-log-toggle:active { transform: scale(0.97); }
.muster-log-toggle svg { color: #64748b; }
.muster-log-toggle__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Session Log drawer (slides in from the right) ── */
.muster-log-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.muster-log-backdrop.is-visible { opacity: 1; }
.muster-log-backdrop.hidden { display: none; }

/* Both muster drawers slide in from the LEFT — the right side is where
   thumbs press Present/Missing (founder round 6). */
.muster-log-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 430px;
  max-width: 92vw;
  background: #fff;
  box-shadow: 18px 0 46px rgba(15, 23, 42, 0.15);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.muster-log-drawer.is-open { transform: translateX(0); }
.muster-log-drawer.hidden { display: none; }

/* EMERGENCY drawer — same shell; the shipping call cards stack vertically. */
.muster-sos-drawer__cards { padding: 14px 16px 0; }
.muster-sos-drawer .muster-emergency {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.muster-sos-drawer .muster-emergency-card { width: 100%; box-sizing: border-box; }

/* Quick actions + note at the top of the Session Log drawer (the old Log
   Event sheet, absorbed). */
.muster-log-drawer__quick {
  padding: 12px 16px 14px;
  border-bottom: 1px solid #e6eaf0;
}
.muster-log-drawer__sec {
  font-size: 0.85rem;
  font-weight: 800;
  color: #15203a;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.muster-log-drawer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.muster-log-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 22px 18px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.muster-log-drawer__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}
.muster-log-drawer__subtitle {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}
.muster-log-drawer__close {
  border: none;
  background: rgba(226, 232, 240, 0.6);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  transition: background 0.15s ease;
}
.muster-log-drawer__close:hover { background: rgba(226, 232, 240, 0.9); }
.muster-log-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Event cards (inside the drawer) ── */
.muster-event-card {
  position: relative;
  padding: 12px 14px 12px 18px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.muster-event-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: #94a3b8;
}
.muster-event-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.muster-event-card__time {
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.muster-event-card__type { flex: 1; }
.muster-event-card__body {
  margin-top: 6px;
  color: #1e293b;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Per-type accents (left border + type text colour) */
.muster-event-card--note::before { background: #f59e0b; }
.muster-event-card--note .muster-event-card__type { color: #b45309; }
.muster-event-card--note .muster-event-card__body {
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.08);
  border-radius: 8px;
  border-left: 3px solid rgba(245, 158, 11, 0.4);
  font-style: normal;
  white-space: pre-wrap;
  word-break: break-word;
}

.muster-event-card--call::before { background: #ef4444; }
.muster-event-card--call .muster-event-card__type { color: #b91c1c; }
.muster-event-card--call-end::before { background: #64748b; }
.muster-event-card--call-end .muster-event-card__type { color: #475569; }

.muster-event-card--action::before { background: #0891b2; }
.muster-event-card--action .muster-event-card__type { color: #0e7490; }

/* Small chip for call duration */
.muster-event-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Empty state inside the drawer */
.muster-log-empty {
  padding: 40px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
}
.muster-log-empty__icon {
  opacity: 0.45;
  margin-bottom: 10px;
}

/* ── Muster FAB (Quick Actions) ── */
/* Log Event button (red/orange gradient, sits between Re-Muster and Complete) */
.muster-action-bar .muster-action--log {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 16px 30px rgba(239, 68, 68, 0.3);
}

/* Log Event slide-up sheet */
/* The Log Event sheet's shell is gone (absorbed into the Session Log
   drawer); the quick-action buttons keep their class and become chips. */
.log-event-sheet__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid #d8dee8;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3c465c;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.log-event-sheet__action svg { display: none; }
.log-event-sheet__action:active {
  transform: scale(0.97);
  background: #e2e8f0;
}
.log-event-sheet__action svg {
  flex-shrink: 0;
}
.log-event-sheet__action--logged {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
  font-weight: 600;
}

/* Custom free-text note section inside the Log Event sheet. Sits below the
   admin-configured quick action buttons, separated by a divider, so the user
   can either tap a quick action OR type a custom note. */
.log-event-sheet__divider {
  height: 1px;
  background: #e2e8f0;
  margin: 18px -20px 14px;
}
.log-event-sheet__note-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin: 0 0 8px;
}
.log-event-sheet__note {
  width: 100%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #0f172a;
  resize: none;
  box-sizing: border-box;
  min-height: 72px;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.log-event-sheet__note:focus {
  outline: none;
  border-color: #0f172a;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}
.log-event-sheet__note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.log-event-sheet__note-counter {
  font-size: 0.78rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.log-event-sheet__note-counter--warn {
  color: #d97706;
}
.log-event-sheet__note-save {
  border: none;
  background: #0891b2;  /* deeper / more saturated than the brand teal so it doesn't blend with the textarea focus border */
  color: #ffffff;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 14px 30px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(8, 145, 178, 0.32);
  transition: transform 0.1s, background 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.log-event-sheet__note-save:active {
  transform: scale(0.97);
  background: #0e7490;
  box-shadow: 0 3px 10px rgba(8, 145, 178, 0.4);
}
.log-event-sheet__note-save:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}
.log-event-sheet__note-save--saved {
  background: #059669;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.32);
}

.muster-progress {
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.muster-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
}

.muster-progress__missing {
  color: #ef4444;
}

.muster-progress__bar {
  position: relative;
  width: 100%;
  height: 0.25rem;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: visible;
}

.muster-progress__fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 0.46rem;
  width: 0%;
  background: linear-gradient(90deg, #10b981, #22c55e);
  border-radius: 999px;
  transform: translateY(-50%);
  transition: width 0.3s ease;
}

.muster-progress__fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  background: #22c55e;
  border-radius: 999px;
  transform: translate(50%, -50%);
  box-shadow: 0 0 0 0.12rem rgba(255, 255, 255, 0.9),
    0 6px 12px rgba(16, 185, 129, 0.35);
}

.muster-progress__start {
  margin-top: 6px;
  font-size: 0.75rem;
  color: rgba(100, 116, 139, 0.9);
}

.muster-recording-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
}

.muster-recording-indicator__dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: muster-recording-pulse 1.5s ease-in-out infinite;
}

@keyframes muster-recording-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.muster-recording-indicator__text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ef4444;
}

/* ── M4a top bar: scenario chip + elapsed · big count · missing · REC ·
   view segs · fold toggle. ONE bar (screen-chrome budget). ─────────────── */
/* ── M4a top bar ──────────────────────────────────────────────────────────
   ONE ROW ON EVERY iPAD, BOTH ORIENTATIONS (founder 2026-08-24, from a
   device: "the header with the buttons part goes into a second line" in
   portrait on an 11").

   HISTORY — read before "simplifying" this. The previous fix (2026-08-22)
   was the opposite: below 1160px it FORCED two deliberate rows via a
   zero-height ::before, because a free flex-wrap left the header "all out
   of alignment". That solved alignment by spending vertical space. This
   replaces it: the bar now SCALES so it genuinely fits on one row instead
   of wrapping, so there is nothing left to align.

   THE UI UNIT: `--mu` is a fluid length that every size in this bar
   multiplies (`calc(N * var(--mu, 1px))`), where N is the old px value at the
   12.9" landscape baseline. So the bar is proportionally identical on
   every iPad rather than px-identical — 1.0 at 1366 CSS px (12.9"
   landscape) down to 0.74 at 744 (mini portrait). Type has its own floor
   (`--mut`) so labels never shrink into illegibility just because the
   numerals can.
   ⚠ Change N values, not the formula — the clamp endpoints were measured
   against real iPad widths (744 / 768 / 834 / 1024 / 1180 / 1366). */
.muster-topbar {
  --mu:  clamp(0.74px, calc(0.0418vw + 0.429px), 1px);
  --mut: clamp(0.86px, calc(0.0418vw + 0.429px), 1px);
  /* THE SPACING SCALE (founder 2026-08-24: "everything should be central
     with equal ui unit spacing"). Before this the bar mixed four unrelated
     numbers — gap:11, margin-left:8, margin-left:6, padding:3 — which is
     why nothing lined up.
       --sp1  inside a control (track padding, chip gap)
       --sp2  between items in a group
       --sp3  between groups   ← the ONLY gap on this row
       --ctl  ONE height for every control, so they share a centre line
     ⚠ Exactly one gap value on the row. If something needs to sit closer
     it belongs INSIDE a group, not on a smaller gap.
     ⚠ The 40px floor on --ctl is deliberate and SIGNED OFF: it makes the
     bar 4-7px taller than 824.1, bought for the touch target on the one
     screen used during a real emergency. Don't optimise it back down. */
  --sp1: calc(4 * var(--mu, 1px));
  --sp2: calc(8 * var(--mu, 1px));
  --sp3: calc(18 * var(--mu, 1px));
  --ctl: max(40px, calc(48 * var(--mu, 1px)));
  display: flex;
  align-items: center;
  gap: var(--sp3);
  padding: calc(8 * var(--mu, 1px)) 2px calc(6 * var(--mu, 1px));
  flex-wrap: nowrap;
  min-width: 0;
}
/* One height → one centre line, for every control in the bar.
   ⚠ box-sizing is NOT global in this stylesheet — components opt in one at
   a time. Without border-box here, --ctl sets the CONTENT height and each
   control's own padding/border adds on top, so the four come out 46/42/46/40
   and the bar grows ~6px. */
.muster-topbar > :is(.muster-numtrack, .muster-seg, .muster-iconbtn) {
  box-sizing: border-box;
  height: var(--ctl);
}
.muster-topbar__scen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--mu, 1px));
  flex: 0 1 auto;
  min-width: 0;
}
.muster-topbar__chip {
  font-size: calc(12 * var(--mut, 1px));
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: #15203a;
  border-radius: calc(8 * var(--mu, 1px));
  padding: calc(4 * var(--mu, 1px)) calc(11 * var(--mu, 1px));
  max-width: 100%;
  text-transform: uppercase;
  text-align: center;
  /* A long scenario name is the one thing that can still burst the row —
     truncate it rather than let it push the segs off the edge. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.muster-topbar__elapsed {
  font-size: calc(12.5 * var(--mut, 1px));
  color: #5a6573;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.muster-topbar__elapsed b { color: #15203a; }
/* THE NUMBERS — "the numbers ARE the filter" (founder 2026-08-24).
   Replaces three separate things: the big accounted/expected count, the
   MISSING block, and the Everyone/Missing/Outstanding/Ashore seg. The bar
   used to state the same counts twice and then repeat the words again.

   ⛔ NO BOXES. Founder, 2026-08-24, on the pill-in-a-track this went
   through three rounds of: "all of these pills look like ass on any sized
   ipad." The problem was a box (the pill) inside a box (the track) inside
   the bar, with one solid member and three floating ones — they read as
   one button and three labels, not as a set. Chosen treatment: hairline
   dividers, so the four read as one instrument panel divided into cells.
   ⛔ Do not reintroduce a track background or a filled active pill.

   ⚠ Inactive numbers are a MID SLATE, not pale grey. Dimming them looked
   better and was wrong: you must be able to read "272 outstanding" at a
   glance whichever filter is on. The ink difference marks the selection;
   it must never cost legibility of the other three.
   ⚠ The counts MUST come from musterRowVisible() — the same predicate the
   board filters with — or pressing "10 Missing" shows a different count. */
.muster-numtrack {
  display: flex;
  align-items: stretch;
  flex: none;
}
.muster-numtrack__b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: calc(4 * var(--mu, 1px));
  /* Room to breathe, scaled to what the device actually has (founder
     2026-08-24: "you have so much more room now that we removed the mic
     pill"). --mu alone can't do this: it is nearly flat across the range,
     so one value is either cramped on the 12.9" or overflows the mini.
     The vw term grows the cell with the screen; the floor protects the
     mini (which has ~15px of slack and cannot give any more) and the cap
     stops the cells drifting apart on the widest iPad.
     Measured per side: 11 / 17 / 19 / 26 / 28 / 30px across the six. */
  --npad: clamp(
    calc(15 * var(--mu, 1px)),
    calc(8.9vw - 55px),
    calc(30 * var(--mu, 1px))
  );
  padding: 0 var(--npad);
  border: 0;
  background: none;
  font-family: inherit;
  border-radius: calc(9 * var(--mu, 1px));
  cursor: pointer;
}
/* The hairline is the only thing drawn. Inset top and bottom so it reads as
   a divider between cells rather than a full-height border. */
.muster-numtrack__b + .muster-numtrack__b::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(6 * var(--mu, 1px));
  bottom: calc(6 * var(--mu, 1px));
  width: 1px;
  background: #ccd4e0;
}
.muster-numtrack__b b {
  font-size: calc(32 * var(--mu, 1px));
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #5a6573;
}
/* ⛔ This MUST stay a class, never `.muster-numtrack__b span`. That selector
   is (0,1,1) and also matched the <span>s INSIDE <b> — so "0/272" rendered
   at label size, uppercase and letter-spaced, while every other number was
   full size. It also outranked .muster-numtrack__of (0,1,0), which is why
   the "/272" half looked wrong too. Shipped in 824.3; caught on the device. */
.muster-numtrack__l {
  font-size: calc(10.5 * var(--mut, 1px));
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8b94a5;
}
/* Selected. Ink alone was not enough to see from arm's length (founder,
   2026-08-24: "difficult to see where I am once I've clicked") — and on
   Missing/Outstanding it was nearly invisible, because those numbers are
   already red/amber whether selected or not, leaving the label as the ONLY
   tell. So the selection also draws a rule under the cell.
   ⛔ Still NO box: this is a bar on the bottom edge, not a track, border or
   filled pill. Inset by the cell's own --npad so it is exactly as wide as
   the number and label it underlines — one source for both. */
.muster-numtrack__b.is-on b,
.muster-numtrack__b.is-on .muster-numtrack__l { color: #15203a; }
.muster-numtrack__b.is-on::after {
  content: "";
  position: absolute;
  left: var(--npad);
  right: var(--npad);
  bottom: calc(-6 * var(--mu, 1px));
  /* --mu would put this at 2.2px on the mini — too fine to be the thing
     that answers "where am I". Floor it. */
  height: max(3px, calc(4 * var(--mu, 1px)));
  border-radius: 999px;
  background: #15203a;
}
/* ⚠ The cell content (32px figure + gap + label) already fills --ctl to the
   millimetre, so there is no slack inside it — a rule at `bottom: 0` strikes
   THROUGH the label. It hangs below the cell instead, into the bar's own
   6*--mu bottom padding, which is otherwise dead space. Measured clearance
   below the label is verified per width; don't change either number without
   re-measuring both. */
/* Missing carries the alarm colour whenever anybody IS missing — whichever
   filter you happen to be on. Someone unaccounted for does not stop
   mattering because you are looking at Ashore. .is-zero is set in
   updateMusterStatsUI(), and at zero this falls through to the normal
   slate, because "0 missing" is good news and must not shout.
   ⛔ TRUE red. #a3341f and #b5543f were tried and both read as BROWN on
   the device — this is #dc2626, the same red as the REC waveform. */
.muster-numtrack__b--miss:not(.is-zero) b { color: #dc2626; }
.muster-numtrack__b--miss:not(.is-zero).is-on .muster-numtrack__l { color: #dc2626; }
.muster-numtrack__b--miss:not(.is-zero).is-on::after { background: #dc2626; }
/* Outstanding is the same idea one step down the scale: nobody has reached
   these people yet, which is not an alarm but is not nothing either. Amber
   while non-zero, normal slate at zero.
   ⚠ #d97706, NOT this app's more common #b45309 amber ink. Rendered side
   by side against #dc2626, b45309 still leans brown — and brown has already
   been rejected twice here. These two sit next to each other permanently,
   so they have to read as two colours, not two shades of one. */
.muster-numtrack__b--out:not(.is-zero) b { color: #d97706; }
.muster-numtrack__b--out:not(.is-zero).is-on .muster-numtrack__l { color: #d97706; }
.muster-numtrack__b--out:not(.is-zero).is-on::after { background: #d97706; }

/* REC waveform — a state, never a button. Reads "recording AUDIO", not
   just "on". The chip shell that used to wrap this lived in the top bar;
   it is now .muster-edge-tab--rec on the left edge. */
.muster-rec-chip__wave {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  height: calc(15 * var(--mu, 1px));
}
.muster-rec-chip__wave i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: #dc2626;
  transform-origin: center;
  animation: muster-rec-wave 1.15s ease-in-out infinite;
}
.muster-rec-chip__wave i:nth-child(1) { animation-delay: -0.9s; animation-duration: 1.3s; }
.muster-rec-chip__wave i:nth-child(2) { animation-delay: -0.35s; animation-duration: 1.05s; }
.muster-rec-chip__wave i:nth-child(3) { animation-delay: -0.65s; animation-duration: 1.25s; }
.muster-rec-chip__wave i:nth-child(4) { animation-delay: -0.15s; animation-duration: 0.95s; }
.muster-rec-chip__wave i:nth-child(5) { animation-delay: -0.5s; animation-duration: 1.15s; }
@keyframes muster-rec-wave {
  0%, 100% { transform: scaleY(0.28); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .muster-rec-chip__wave i { animation: none; transform: scaleY(0.6); }
}


/* View segs — Everyone/Missing/Outstanding/Ashore and Department/Station. */
.muster-seg {
  display: flex;
  align-items: center;
  background: #dbe2ec;
  border-radius: calc(12 * var(--mu, 1px));
  padding: var(--sp1);
  gap: var(--sp1);
  flex: none;
}
/* The number track sits with the identity on the left; the view controls
   push to the right edge. This used to be on #musterFilterSeg, which no
   longer exists as a seg. */
#musterGroupSeg { margin-left: auto; }
.muster-seg__b {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: calc(12 * var(--mut, 1px));
  font-weight: 700;
  color: #5a6573;
  /* ⚠ HORIZONTAL padding scales (that is what buys the single row);
     VERTICAL does NOT, and min-height floors the touch target. Scaling
     both dropped these to 21px tall in portrait — a worse target than
     before, on the one screen used during an actual emergency. */
  padding: 0 var(--sp2);
  height: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(9 * var(--mu, 1px));
  white-space: nowrap;
  cursor: pointer;
}
.muster-seg__b.is-on {
  background: #15203a;
  color: #fff;
}
.muster-seg.hidden { display: none; }

/* Narrow viewports have little/no container gutter, so the sticky needs its
   own side padding — without it the progress bar starts at the physical
   screen edge (founder 2026-08-22). Width query, not orientation:
   WKWebView's orientation media is unreliable (see the rotation memories).
   ⛔ The two-row ::before wrap that used to live here is GONE on purpose. */
@media (max-width: 1160px) {
  .muster-sticky { padding-left: 16px; padding-right: 16px; }
}

.muster-iconbtn {
  /* Same rule as the seg buttons: shrink, but never below a hittable size. */
  width: var(--ctl, max(32px, calc(38 * var(--mu, 1px))));
  flex: none;
  border: 1.5px solid #c9d1dd;
  border-radius: calc(12 * var(--mu, 1px));
  background: #fff;
  color: #15203a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.muster-iconbtn svg { width: calc(19 * var(--mu, 1px)); height: calc(19 * var(--mu, 1px)); }
.muster-iconbtn:active { background: #f1f5f9; }
.muster-iconbtn.hidden { display: none; }
.muster-iconbtn svg.hidden { display: none; }

/* ── Left-edge tab stack (EMERGENCY + LOG + REC) ──────────────────────── */
/* ONE stack, not three independently-positioned tabs. They used to carry
   hard-coded tops (200 / 348 / 496) with content-driven widths, so the gaps
   came out 10px then 33px and the widths 44 / 50 / 47 — EMERGENCY visibly
   stuck out less than the other two (founder 2026-08-24, from the device).
   A flex column fixes both: one gap value, and align-items:stretch gives
   every tab the width of the widest. `gap` also collapses correctly when a
   tab is .hidden, which magic tops could never do.
   ⚠ Add a tab by putting it in this container — never by inventing a top. */
.muster-edge-tabs {
  position: fixed;
  left: 0;
  top: 200px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: max-content;
}
.muster-edge-tab {
  color: #fff;
  border: none;
  border-radius: 0 14px 14px 0;
  padding: 16px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  box-shadow: 4px 4px 18px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  font-family: inherit;
}
.muster-edge-tab.hidden { display: none; }
.muster-edge-tab--sos {
  background: linear-gradient(135deg, #f43f5e, #ef4444);
}
.muster-edge-tab--log {
  background: #15203a;
}
/* REC lives here rather than in the top bar (founder 2026-08-24): as a
   header chip it ate ~150px, and the numbers are what the bar is for.
   Bottom-most of the three, and NOT a button — recording is a state. */
.muster-edge-tab--rec {
  /* ⚠ Slate, NOT red, and the waveform carries the colour instead. On this
     screen red means EMERGENCY; a second red block on the same edge dilutes
     the one that matters. Lighter than LOG's #15203a so the two still read
     as different tabs. */
  background: #2c3547;
  cursor: default;
  gap: 7px;
}
.muster-edge-tab--rec .muster-rec-chip__wave { height: 16px; }
.muster-edge-tab__vl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
}
.muster-edge-tab__badge {
  background: #fff;
  color: #15203a;
  border-radius: 99px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  padding: 0 4px;
}
/* Cards match the crew board's width: .muster-board zeroes .board-section's
   --board-edge padding (the sticky bar wants the full container), so the
   roster re-adds it here. The left side also floors at 52px so rows never
   scroll under the fixed edge-tab stack.
   ⚠ The stack is 50px wide — 2px of clearance. It sizes to its widest tab
   (width: max-content), so a wider tab silently pushes rows underneath it.
   Re-measure and raise this floor if you add one. */
body.muster-active .muster-state--active .muster-roster {
  padding-left: max(calc(var(--board-edge) + env(safe-area-inset-left, 0px)), 52px);
  padding-right: calc(var(--board-edge) + env(safe-area-inset-right, 0px));
}

/* ── Section headings: title + meter ring + x/y only. ─────────────────── */
/* ── Bands ────────────────────────────────────────────────────────────── */
.muster-band {
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 15px;
  margin-bottom: 9px;
  overflow: hidden;
}
.muster-band__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: #eef2f7;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
/* Guests and visitors share the warm head: both are non-crew, aboard for a
   while, marked the same way (founder, 2026-08-24). */
.muster-band--guest .muster-band__head,
.muster-band--visitor .muster-band__head { background: #f3eee9; }
/* With a single band the "Guests"/"Visitors" section heading is suppressed as
   a duplicate, and that heading's padding was the only break between the last
   crew department and them. Put a small one back so they still read as two
   different populations — the warm head does the rest. */
.muster-band:not(.muster-band--guest):not(.muster-band--visitor) + .muster-band--guest,
.muster-band:not(.muster-band--guest):not(.muster-band--visitor) + .muster-band--visitor {
  margin-top: 14px;
}
.muster-band__nm {
  font-size: 16.5px;
  font-weight: 750;
  color: #15203a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 130px;
  max-width: 190px;
}
.muster-band__faces { display: flex; }
.muster-band__face {
  margin-left: -9px;
  box-shadow: 0 0 0 2px #eef2f7;
}
.muster-band__face:first-child { margin-left: 0; }
.muster-band--guest .muster-band__face,
.muster-band--visitor .muster-band__face { box-shadow: 0 0 0 2px #f3eee9; }
.muster-band__faces .muster-avatar {
  width: 34px;
  height: 34px;
  border: none;
}
.muster-band__more {
  width: 34px;
  height: 34px;
  border-radius: 99px;
  background: #dde3ec;
  color: #3c465c;
  font-size: 11.5px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -9px;
  box-shadow: 0 0 0 2px #eef2f7;
}
.muster-band__lead {
  font-size: 12px;
  color: #8b93a3;
  white-space: nowrap;
}
.muster-band__pill {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.muster-band__t {
  font-size: 13.5px;
  font-weight: 800;
  color: #2c3547;
  font-variant-numeric: tabular-nums;
}
.muster-band__clear {
  font-size: 11px;
  font-weight: 800;
  color: #0b6b43;
  background: #d7f4e3;
  border-radius: 99px;
  padding: 4px 11px;
}
.muster-band__chev {
  color: #3f4856;
  transition: transform 0.2s;
}
.muster-band.is-closed .muster-band__chev { transform: rotate(-90deg); }
.muster-band.is-closed .muster-band__rows { display: none; }
.muster-band__rows { padding: 5px 9px 8px; }

/* ── Guest cabin/party sub-dividers ───────────────────────────────────── */
.muster-subhd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 9px 2px 5px;
  padding: 8px 12px;
  background: #eef2f7;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #15203a;
}
.muster-subhd:first-child { margin-top: 4px; }
/* A party divider folds like a band. The chevron takes the auto margin so
   it is always hard right, including on the Ashore tab where there is no
   count and no "All present" to push against — which is why those two lost
   theirs and now sit beside the count they act on. */
.muster-subhd[role="button"] { cursor: pointer; }
.muster-subhd__chev {
  margin-left: auto;
  display: inline-flex;
  color: #3f4856;
  transition: transform 0.2s;
}
.muster-subhd.is-closed .muster-subhd__chev { transform: rotate(-90deg); }
.muster-subhd__cnt {
  font-weight: 800;
  color: #3c465c;
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
}
.muster-subhd__all {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 99px;
  padding: 6px 13px;
  background: #15203a;
  color: #fff;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.muster-subhd__done {
  font-size: 11px;
  font-weight: 800;
  color: #0b6b43;
  background: #d7f4e3;
  border-radius: 99px;
  padding: 4px 11px;
}

.muster-roster {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.muster-roster--inactive {
  opacity: 0.6;
}

.muster-roster--inactive .muster-card {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(226, 232, 240, 0.7);
  box-shadow: none;
}

.muster-roster--inactive .muster-avatar img {
  filter: grayscale(1);
}

.muster-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.muster-group__header {
  position: sticky;
  top: var(--muster-sticky-offset, 0px);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  /* Muster department background */
  background: rgba(51, 65, 85, 0.7);
  color: #fff;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.muster-group__header--inactive {
  position: static;
  background: transparent;
  color: rgba(100, 116, 139, 0.65);
  padding: 0 4px;
  letter-spacing: 0.12em;
  box-shadow: none;
  backdrop-filter: none;
}

.muster-group__header--inactive .muster-group__count {
  display: none;
}

.muster-group__count {
  background: rgba(239, 68, 68, 0.92);
  color: #fff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 700;
}

.muster-group__count.is-complete {
  background: rgba(16, 185, 129, 0.95);
}

/* Compact rows (M4a): ~48px, not ~140px — thirty crew were 4-5 screens of
   scrolling during an emergency. */
.muster-card {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid transparent;
  box-shadow: none;
  margin-bottom: 3px;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
  touch-action: manipulation;
}
/* The card itself is NOT interactive — no cursor, no depress. Only the
   Present/Missing buttons respond (founder 2026-08-22: a card that
   depressed but did nothing read as a broken tap). */

.muster-card--present {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}

.muster-card--missing {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.08);
}

.muster-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  background: #dde3ec;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 750;
  font-size: 12px;
  color: #3c465c;
  flex-shrink: 0;
}

.muster-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.muster-card--present .muster-avatar {
  border-color: rgba(16, 185, 129, 0.9);
}

.muster-card--missing .muster-avatar {
  border-color: rgba(239, 68, 68, 0.9);
}

.muster-avatar__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.muster-avatar__overlay--missing {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.muster-card__details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.muster-card__name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #15203a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.muster-card__meta {
  margin: 0;
  font-size: 11.5px;
  color: #5a6573;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ashore: shown, never counted, never markable. */
.muster-card--ashore {
  opacity: 0.55;
  cursor: default;
}
.muster-card__ashore {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #5a6573;
  background: rgba(10, 15, 34, 0.07);
  border-radius: 99px;
  padding: 4px 10px;
  flex: none;
}

.muster-card__status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.7);
  color: rgba(100, 116, 139, 0.9);
}

.muster-card__status.is-present {
  background: rgba(16, 185, 129, 0.18);
  color: #0f766e;
}

.muster-card__status.is-missing {
  background: rgba(239, 68, 68, 0.18);
  color: #b91c1c;
}

/* PRESENT / MISSING action buttons on muster cards */
.muster-card__actions {
  display: flex;
  /* Founder 2026-08-23: enough air between Present and Missing that a
     thumb can't miss-click across them. */
  gap: 16px;
  margin-left: auto;
  flex-shrink: 0;
}

/* The pair, compact (M4a): pills beside the row, same colours, same three
   states — pending / present / missing, lit-tap un-marks. Founder round 14:
   chunky tick/X (16px at stroke 3, per the no-hairline-glyphs rule) and a
   ~40px tap target — small marks and tight pills were miss-clickable. */
.muster-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  min-height: 38px;
  border-radius: 99px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
}

/* Invisible tap slop around each pill (founder, 2026-08-24: "add a little
   bit of negative around each of them ... not too much so I don't end up
   pressing the wrong row"). The pill stays exactly the size it looks —
   only the target grows.
   ⚠ The numbers are bounded by their neighbours, so don't raise them
   without re-checking both: 6px vertical stays INSIDE the card's own 7px
   padding, so it can never reach the row above or below; 5px horizontal
   eats 10px of the 16px gap, leaving a 6px dead strip between Present and
   Missing so a thumb still can't cross from one to the other. */
.muster-action-btn::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -5px;
  right: -5px;
}

.muster-action-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.muster-action-btn span {
  line-height: 1;
}

/* Present button — default (unselected) */
.muster-action-btn--present {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #0f766e;
}

/* Missing button — default (unselected) */
.muster-action-btn--missing {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}

/* Active (selected) states — filled */
.muster-action-btn--present.is-active {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

.muster-action-btn--missing.is-active {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

/* Dimmed — the other button when one is selected */
.muster-action-btn.is-dimmed {
  opacity: 0.3;
}

.muster-action-btn.is-dimmed:active {
  opacity: 0.7;
}

.muster-action-btn:active:not(.is-dimmed) {
  transform: scale(0.95);
}

.muster-empty {
  padding: 18px;
  border-radius: 14px;
  background: rgba(226, 232, 240, 0.5);
  color: rgba(100, 116, 139, 0.9);
  text-align: center;
  font-size: 0.85rem;
}

.muster-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(110px + env(safe-area-inset-bottom, 0));
  padding: 14px 16px 18px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0), rgba(248, 250, 252, 0.9) 35%, rgba(248, 250, 252, 0.98));
  z-index: 35;
}

.muster-action-bar .muster-action {
  border: none;
  border-radius: 16px;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  cursor: pointer;
  transition: transform 0.15s ease;
  border: 2px solid #0f172a;
  box-sizing: border-box;
}

.muster-action-bar .muster-action:active {
  transform: scale(0.98);
}

.muster-action-bar .muster-action--secondary {
  background: rgba(226, 232, 240, 0.85);
  color: #0f172a;
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.12);
}

.muster-action-bar .muster-action--primary {
  background: #10b981;
  color: #fff;
  box-shadow: 0 16px 30px rgba(16, 185, 129, 0.35);
}

.muster-action-bar {
  display: flex;
  justify-content: center;
}

.muster-action-bar > .muster-action {
  flex: 1;
  max-width: 320px;
}

.muster-action-bar > .muster-action + .muster-action {
  margin-left: 12px;
}

body.muster-active .muster-action-bar {
  bottom: calc(16px + env(safe-area-inset-bottom, 0));
  padding: 6px 16px 14px;
  background: transparent;
}

.muster-action-bar {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.muster-action-bar--hidden {
  opacity: 0;
  transform: translateY(80px);
  pointer-events: none;
}

@keyframes muster-shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 34, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}

.confirm-modal.hidden {
  display: none;
}

.confirm-modal__inner {
  background: #fff;
  border-radius: 20px;
  padding: 24px 24px 20px;
  width: min(420px, 90vw);
  text-align: center;
  box-shadow: 0 30px 60px rgba(10, 15, 34, 0.35);
}

.confirm-modal__inner p {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 4px;
}

.confirm-modal__buttons {
  display: flex;
  margin-top: 18px;
}

.confirm-modal__btn {
  flex: 1;
  padding: 18px 12px;
  border: none;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.confirm-modal__btn--cancel {
  background: rgba(224, 86, 86, 0.95);
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.confirm-modal__btn--ok {
  background: rgba(34, 197, 94, 0.95);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.confirm-modal--single .confirm-modal__buttons {
  justify-content: center;
}

.confirm-modal--single .confirm-modal__btn--cancel {
  display: none;
}

.confirm-modal--single .confirm-modal__btn--ok {
  border-radius: 16px;
  min-width: 160px;
}

@media (max-width: 900px) {
  .safety-contacts-rail {
    margin-top: -70px;
  }
}

@media (max-width: 600px) {
  .safety-contacts-rail {
    margin-top: -40px;
  }
}

.safety-pdfjs-viewer .pdfjs-page {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  flex: 0 0 auto;
  width: min(960px, 100%);
  margin: 0 auto;
}

.safety-pdfjs-viewer .pdfjs-page canvas {
  display: block;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
}

.pdfjs-sentinel {
  height: 240px;
  width: 100%;
  pointer-events: none;
  flex: 0 0 auto;
}

@media (min-width: 900px) {
  .safety-board__layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
  }

  .safety-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .safety-viewer {
    min-height: 420px;
  }
}

/* ===============================
   UTILITY CLASSES
=============================== */
.hidden { display: none !important; }
.active { display: block; }

/* ===============================
   RESPONSIVE TWEAKS
=============================== */
@media (max-width: 600px) {
  .crew-card {
    padding: 14px 16px;
  }

  .floating-nav__btn {
    font-size: 0.68rem;
    min-width: 72px;
    min-height: 52px;
  }

  h2 {
    font-size: 1.2em;
  }
}
/* ===============================
   Startup Companion Overlay
=============================== */
.startup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--splash-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--splash-foreground);
  text-align: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.startup-overlay.startup-overlay--exiting {
  opacity: 0;
}

.startup-overlay__logo {
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.startup-overlay__logo img {
  height: 128px;
  width: auto;
}

.startup-overlay__progress {
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.startup-overlay__bar {
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.startup-overlay__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--splash-accent), var(--splash-glow));
  transition: width 0.5s ease;
}

.startup-overlay__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--splash-muted);
  min-height: 20px;
}

.startup-overlay__message {
  display: inline-block;
}

.startup-overlay__message--animate {
  animation: startup-fade-in-up 0.4s ease-out;
}

.startup-overlay__dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.startup-overlay__dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--splash-accent);
  opacity: 0.4;
}

.startup-overlay__dot--1 {
  animation: startup-dot-pulse 1.4s ease-in-out infinite;
}

.startup-overlay__dot--2 {
  animation: startup-dot-pulse 1.4s ease-in-out 0.2s infinite;
}

.startup-overlay__dot--3 {
  animation: startup-dot-pulse 1.4s ease-in-out 0.4s infinite;
}

.startup-overlay__footer {
  position: absolute;
  bottom: 32px;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.5);
}

@keyframes startup-fade-in-up {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes startup-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ===============================
   Splash / Access Code Modal
=============================== */
.splash-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, #0b1220 0%, #0f1a2e 50%, #0a1525 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.splash-overlay.hidden {
  display: none;
}

.splash-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 48px 40px 40px;
  max-width: 380px;
  width: 85%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2);
  animation: splashSlideUp 0.5s ease;
}

@keyframes splashSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.splash-card__logo {
  margin-bottom: 24px;
}

.splash-card__logo img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.splash-card h2 {
  margin: 0 0 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.splash-card p {
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.splash-card__form {
  margin-top: 28px;
  text-align: left;
}

.splash-card__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.splash-card__input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
  text-align: center;
}

.splash-card__input:focus {
  border-color: var(--color-accent, #56B2BB);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(86, 178, 187, 0.15);
}

.splash-card__input::placeholder {
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.splash-card__btn {
  width: 100%;
  margin-top: 16px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent, #56B2BB) 0%, #3da8b1 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(86, 178, 187, 0.3);
}

.splash-card__btn:hover {
  background: linear-gradient(135deg, #4fb0b9 0%, #38a1aa 100%);
  box-shadow: 0 6px 16px rgba(86, 178, 187, 0.4);
  transform: translateY(-1px);
}

.splash-card__btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(86, 178, 187, 0.3);
}

.splash-card__btn:disabled {
  background: #cbd5e1;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.splash-card__footer {
  margin-top: 24px;
  font-size: 0.8rem;
  color: #94a3b8;
}

.splash-card__intro {
  color: #94a3b8;
  margin-bottom: 24px;
}

.splash-card__permissions {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  text-align: left;
}

.splash-card__permissions-title {
  font-size: 0.85rem;
  color: #1e293b;
  margin-bottom: 12px;
  font-weight: 500;
}

.splash-card__permissions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: #1e293b;
}

.splash-card__permissions-list li {
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.splash-card__permissions-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #60a5fa;
}

.splash-card__permissions-list strong {
  color: #0f172a;
}

.splash-card__permissions-note {
  font-size: 0.75rem;
  color: #334155;
  margin-top: 12px;
  margin-bottom: 0;
}

.splash-card p.splash-card__legal {
  margin-top: 80px;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.5;
}

.splash-card__legal a {
  color: #60a5fa;
  text-decoration: none;
}

.splash-card__legal a:hover {
  text-decoration: underline;
}

.status-msg {
  margin-top: 16px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: #1e293b;
  background: #f1f5f9;
  border-radius: 8px;
}

.status-msg:empty {
  display: none;
}

/* Splash step transitions */
.splash-step {
  animation: splashFadeIn 0.3s ease;
}

.splash-step.hidden {
  display: none;
}

@keyframes splashFadeIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.splash-card__input--name {
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

.splash-card__hint {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #94a3b8;
  text-align: center;
}

.splash-card__back {
  margin-top: 16px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.splash-card__back:hover {
  color: #0f172a;
}

/* Onboarding printer step */
.splash-card__printer-area {
  margin-top: 20px;
}

.splash-card__printer-status {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0 0 12px;
  text-align: center;
}

/* Scanning animation */
.splash-card__scanning {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0 20px;
  gap: 20px;
}

.splash-card__scanning-rings {
  position: relative;
  width: 64px;
  height: 64px;
}

.splash-card__scanning-rings .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  animation: scan-pulse 2s ease-out infinite;
}

.splash-card__scanning-rings .ring:nth-child(2) {
  animation-delay: 0.5s;
}

.splash-card__scanning-rings .ring:nth-child(3) {
  animation-delay: 1s;
}

.splash-card__scanning-rings .ring-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: scan-dot 2s ease-in-out infinite;
}

@keyframes scan-pulse {
  0% {
    transform: scale(0.3);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes scan-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

.splash-card__scanning-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.02em;
}

.splash-card__scanning-text .dot-anim {
  display: inline-block;
  width: 1.5em;
  text-align: left;
  overflow: hidden;
  animation: dot-cycle 1.5s steps(4, end) infinite;
}

@keyframes dot-cycle {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

/* Hack: animating content doesn't work, use width clipping instead */
.splash-card__scanning-text .dot-anim::after {
  content: "...";
  display: inline-block;
  animation: dot-width 1.5s steps(4, end) infinite;
}

@keyframes dot-width {
  0% { width: 0; }
  25% { width: 0.4em; }
  50% { width: 0.8em; }
  75% { width: 1.2em; }
  100% { width: 0; }
}

.splash-card__printer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.splash-card__printer-list.hidden {
  display: none;
}

.splash-card__printer-item {
  border: 1px solid rgba(203, 213, 225, 0.6);
  border-radius: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  text-align: left;
  color: #1e293b;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.splash-card__printer-item:active {
  background: #f1f5f9;
}

.splash-card__printer-item.is-paired {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.splash-card__printer-item .printer-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(86, 178, 187, 0.15);
  color: var(--color-accent);
}

.splash-card__printer-item.is-paired .printer-tag {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.splash-card__btn--ghost {
  background: transparent;
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.splash-card__btn--ghost:active {
  background: #f1f5f9;
}

.splash-card__skip {
  display: block;
  width: 100%;
  margin: 12px auto 0;
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.splash-card__skip:hover {
  background: #e2e8f0;
  color: #475569;
}

.splash-card__skip:active {
  background: #e2e8f0;
  transform: translateY(0);
}

/* Permission steps (camera, microphone) */
.splash-card__permission-status {
  font-size: 0.85rem;
  text-align: center;
  margin: 12px 0 0;
  font-weight: 500;
}
.splash-card__permission-status.is-granted {
  color: #16a34a;
}
.splash-card__permission-status.is-denied {
  color: #dc2626;
}
.splash-card__intro--note {
  font-size: 0.8rem;
  color: #94a3b8;
  font-style: italic;
  margin-top: 4px;
}

.wizard-visit-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wizard-visit-grid label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  display: inline-block;
  margin-bottom: 6px;
}

/* Safety redesign */
.safety-board {
  gap: 24px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.board-section.hidden,
.safety-board.hidden {
  display: none;
}

.safety-view.hidden {
  display: none;
}

.safety-home {
  /* Scale the hub with --ui-unit (same pattern as the welcome screen) so the
     cards are the SAME proportional size on every iPad. Landscape reference is
     1024x768; the portrait override below re-anchors to 768x1024. */
  --ui-unit: min(calc(100vw / 1024), calc(100vh / 768));
  padding: calc(12 * var(--ui-unit)) 0 calc(28 * var(--ui-unit));
}
body.app-portrait .safety-home {
  --ui-unit: min(calc(100vw / 768), calc(100vh / 1024));
}

/* Landscape: two columns so a long list of cards no longer overflows the view.
   Portrait stays a single centred column (plenty of height there). */
.safety-home__stack {
  width: 100%;
  max-width: calc(880 * var(--ui-unit));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(16 * var(--ui-unit));
}
body.app-portrait .safety-home__stack {
  grid-template-columns: 1fr;
  max-width: calc(460 * var(--ui-unit));
}

.safety-home-card {
  position: relative;
  width: 100%;
  padding: calc(20 * var(--ui-unit)) calc(20 * var(--ui-unit)) calc(20 * var(--ui-unit)) calc(24 * var(--ui-unit));
  border-radius: calc(16 * var(--ui-unit));
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px var(--accent-shadow, rgba(15, 23, 42, 0.08)), 0 4px 20px -4px var(--accent-shadow-strong, rgba(15, 23, 42, 0.12));
  display: flex;
  align-items: center;
  gap: calc(16 * var(--ui-unit));
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.safety-home-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(16 * var(--ui-unit));
  bottom: calc(16 * var(--ui-unit));
  width: calc(4 * var(--ui-unit));
  border-radius: 999px;
  background: var(--accent);
}

.safety-home-card:hover {
  transform: scale(1.02);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 1px var(--accent-shadow-strong, rgba(15, 23, 42, 0.12)), 0 6px 24px -4px var(--accent-shadow-strong, rgba(15, 23, 42, 0.16));
}

.safety-home-card:active {
  transform: scale(0.98);
}

.safety-home-card__icon {
  width: calc(48 * var(--ui-unit));
  height: calc(48 * var(--ui-unit));
  border-radius: calc(12 * var(--ui-unit));
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--accent-bg);
}

.safety-home-card__icon svg {
  width: calc(26 * var(--ui-unit));
  height: calc(26 * var(--ui-unit));
  transition: transform 0.2s ease;
}

.safety-home-card:hover .safety-home-card__icon svg {
  transform: scale(1.1);
}

.safety-home-card__title {
  font-size: calc(16 * var(--ui-unit));
  font-weight: 600;
  color: #0f172a;
}

.safety-home-card[data-safety-target="documents"] {
  --accent: #3b82f6;
  --accent-bg: rgba(59, 130, 246, 0.14);
  --accent-shadow: rgba(59, 130, 246, 0.15);
  --accent-shadow-strong: rgba(59, 130, 246, 0.2);
}

.safety-home-card[data-safety-target="muster"] {
  --accent: #14b8a6;
  --accent-bg: rgba(20, 184, 166, 0.14);
  --accent-shadow: rgba(20, 184, 166, 0.15);
  --accent-shadow-strong: rgba(20, 184, 166, 0.2);
}

.safety-home-card[data-safety-target="contacts"] {
  --accent: #f59e0b;
  --accent-bg: rgba(245, 158, 11, 0.14);
  --accent-shadow: rgba(245, 158, 11, 0.15);
  --accent-shadow-strong: rgba(245, 158, 11, 0.2);
}

.safety-home-card[data-safety-target="checklists"] {
  --accent: #22c55e;
  --accent-bg: rgba(34, 197, 94, 0.14);
  --accent-shadow: rgba(34, 197, 94, 0.15);
  --accent-shadow-strong: rgba(34, 197, 94, 0.2);
}

.safety-home-card.is-offline {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.6);
}

.safety-home-card__offline-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.15);
  border-radius: 6px;
}

.safety-home-card__offline-badge.hidden {
  display: none;
}

.safety-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Safety's own header bar is gone. Back, title and trail are slots on the
   shared board header now (setBoardSubview / syncSafetyHeader in app.js).
   It was drawing the same three things a second time, one row lower. */


.safety-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #7c8aa0;
  margin-top: 2px;
}

.safety-breadcrumbs__link {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.safety-breadcrumbs__link:hover {
  color: #0f172a;
}
.safety-breadcrumbs__sep { color: #94a3b8; margin: 0 6px; }

.safety-breadcrumbs__chevron {
  display: inline-flex;
  align-items: center;
  color: #cbd5e1;
}

.safety-breadcrumbs__current {
  color: #0f172a;
  font-weight: 600;
}

/* ── Safety: Muster List View ── */
.safety-view__subtitle {
  font-size: 0.78rem;
  color: #64748b;
  margin: 2px 0 0;
}
.safety-home-card--red .safety-home-card__icon { background: rgba(239, 68, 68, 0.1); }
.safety-home-card--red .safety-home-card__icon svg { stroke: #ef4444; }
.safety-home-card--red::before { background: #ef4444; }

.muster-list-tabs {
  display: flex;
  gap: 8px;
  padding: 50px 20px;
  margin: -36px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.muster-list-tabs::-webkit-scrollbar { display: none; }
.muster-list-tab {
  flex: 0 0 auto;
  min-width: calc(25% - 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--tab-bg, rgba(241, 245, 249, 0.7));
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tab-color, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.muster-list-tab--active {
  background: var(--tab-active-bg, white);
  border-color: var(--tab-color, #56b2bb);
  color: var(--tab-color, #0f172a);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.muster-list-tab__name { line-height: 1.2; }

.muster-list-alarm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 20px 10px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.6);
  background: rgba(255,255,255,0.8);
}
.muster-list-alarm__bar { display: none; }
.muster-list-alarm__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.muster-list-alarm__label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin: 0;
  white-space: nowrap;
}
.muster-list-alarm__signal { font-size: 0.88rem; font-weight: 800; margin: 0; }
.muster-list-alarm__pattern { display: flex; align-items: center; gap: 4px; margin: 0; }
.muster-list-alarm__dash { height: 7px; border-radius: 4px; background: currentColor; opacity: 0.85; }
.muster-list-alarm__dash--short { width: 10px; }
.muster-list-alarm__dash--long { width: 28px; }
.muster-list-alarm__dash--continuous { width: 60px; }

.muster-list-notes { padding: 0 20px 8px; }
.muster-list-liferaft-notes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 20px 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}
.muster-list-liferaft-notes svg { flex-shrink: 0; }
.muster-list-liferaft-notes.hidden { display: none; }
.muster-list-notes__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.4);
  background: rgba(241, 245, 249, 0.3);
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
}
.muster-list-notes__toggle svg { transition: transform 0.2s; }
.muster-list-notes__body {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(241, 245, 249, 0.2);
  border: 1px solid rgba(226, 232, 240, 0.25);
  margin-top: 6px;
}
.muster-list-notes__item { font-size: 0.75rem; color: #64748b; line-height: 1.6; padding: 1px 0; text-align: center; }
.muster-list-notes__item--important { color: #f59e0b; font-weight: 600; }

.muster-list-crew { padding: 0 20px calc(140px + env(safe-area-inset-bottom, 0)); }
.muster-list-dept { margin-bottom: 10px; }
.muster-list-dept__header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: 4px;
}
.muster-list-dept__name { font-size: 0.7rem; font-weight: 700; color: #f8fafc; letter-spacing: 0.08em; }
.muster-list-dept__count { font-size: 0.65rem; font-weight: 500; color: rgba(248, 250, 252, 0.6); }

.muster-list-crew-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.5);
  background: rgba(255, 255, 255, 0.8);
  margin-bottom: 3px;
  animation: musterRowIn 0.25s ease-out both;
}
@keyframes musterRowIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.muster-list-crew-row__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.muster-list-crew-row__avatar.has-photo { background: transparent !important; }
.muster-list-crew-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.muster-list-crew-row__info { flex: 1; min-width: 0; }
.muster-list-crew-row__name { font-size: 0.85rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; margin: 0; }
.muster-list-crew-row__role { font-size: 0.72rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; margin: 0; }
.muster-list-crew-row--on-leave { opacity: 0.45; }
.muster-list-crew-row__assignment { flex: 1; min-width: 0; }
.muster-list-crew-row__station { display: flex; align-items: center; gap: 5px; }
.muster-list-crew-row__station svg { flex-shrink: 0; }
.muster-list-crew-row__station span { font-size: 0.78rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muster-list-crew-row__duties { display: flex; align-items: flex-start; gap: 5px; margin-top: 2px; }
.muster-list-crew-row__duties svg { flex-shrink: 0; margin-top: 1px; }
.muster-list-crew-row__duties span { font-size: 0.76rem; color: rgba(15, 23, 42, 0.6); line-height: 1.3; }
.muster-list-raft {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-top: 4px;
  margin-left: auto;
}
.muster-list-raft--port { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.muster-list-raft--stbd { background: rgba(34, 197, 94, 0.1); color: #16a34a; }

/* ── Safety: Abandon Ship Stations View ── */
.abandon-sides { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; }
.abandon-side-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.06), 0 4px 20px -4px rgba(239, 68, 68, 0.1);
  width: 100%;
  text-align: left;
}
.abandon-side-card:active { transform: scale(0.98); }
.abandon-side-card__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.abandon-side-card__icon svg { stroke: #ef4444; }
.abandon-side-card__info { flex: 1; }
.abandon-side-card__info h3 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 0; }
.abandon-side-card__info p { font-size: 0.82rem; color: #64748b; margin: 4px 0 0; }
.abandon-side-card__chevron { color: #94a3b8; flex-shrink: 0; }
.abandon-side-card--starboard { border-color: rgba(34,197,94,0.2); box-shadow: 0 0 0 1px rgba(34,197,94,0.06), 0 4px 20px -4px rgba(34,197,94,0.1); }
.abandon-side-card--starboard .abandon-side-card__icon { background: rgba(34,197,94,0.1); }
.abandon-side-card--starboard .abandon-side-card__icon svg { stroke: #22c55e; }

.abandon-view-content { padding: 0 0 calc(140px + env(safe-area-inset-bottom, 0)); }
.abandon-station { padding: 16px 20px; border-bottom: 1px solid rgba(226, 232, 240, 0.4); }
.abandon-station:last-child { border-bottom: none; }
.abandon-station__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.abandon-station__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.abandon-station__info h3 { font-size: 0.9rem; font-weight: 700; color: #0f172a; margin: 0; }
.abandon-station__info p { font-size: 0.75rem; color: #64748b; margin: 2px 0 0; }
.abandon-station__empty { text-align: center; color: #94a3b8; font-size: 0.82rem; padding: 16px 0; }

.abandon-station__comments { padding: 0 0 8px; text-align: center; }
.abandon-station__comments-label { font-size: 0.7rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.abandon-station__comment { font-size: 0.95rem; font-weight: 600; color: #0f172a; padding: 8px 16px; background: #f0f9ff; border-radius: 8px; border-left: 3px solid #56b2bb; margin-bottom: 4px; display: inline-block; text-align: left; }

.abandon-station__crew { display: flex; flex-direction: column; gap: 8px; }
.abandon-member {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.5);
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.abandon-member--leader { background: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.2); }
.abandon-member--on-leave { opacity: 0.7; }
.abandon-member__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.abandon-member__avatar.has-photo { background: none; }
.abandon-member__avatar img { width: 100%; height: 100%; object-fit: cover; }
.abandon-member--leader .abandon-member__avatar { background: rgba(239, 68, 68, 0.2); }
.abandon-member__left { flex: 1; display: flex; align-items: center; gap: 12px; }
.abandon-member__right { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-left: 1px solid rgba(226, 232, 240, 0.6); padding-left: 16px; min-height: 40px; justify-content: center; }
.abandon-member__info { flex: 1; min-width: 0; text-align: right; }
.abandon-member__name { font-size: 1.05rem; font-weight: 700; color: #0f172a; line-height: 1.2; margin: 0; }
.abandon-member__leader {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
.abandon-member__role { font-size: 0.85rem; color: #64748b; margin: 1px 0 0; }
.abandon-member__duty { display: flex; align-items: center; gap: 6px; }
.abandon-member__duty span { font-size: 0.78rem; font-weight: 500; color: rgba(15, 23, 42, 0.8); }
.abandon-member__equipment { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.abandon-member__equip-tag {
  font-size: 0.68rem;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
}

/* The documents search row is gone: #safetySearchInput moved into the
   board header's slot 3, where .board-search / .board-iconbtn style it
   exactly as they do the guest one. */

.safety-docs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px 24px;
}

.safety-doc-card {
  position: relative;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px var(--accent-shadow, rgba(15, 23, 42, 0.08)), 0 4px 20px -4px var(--accent-shadow-strong, rgba(15, 23, 42, 0.12));
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.safety-doc-card:hover {
  transform: scale(1.01);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 1px var(--accent-shadow-strong, rgba(15, 23, 42, 0.12)), 0 6px 24px -4px var(--accent-shadow-strong, rgba(15, 23, 42, 0.16));
}

.safety-doc-card:active {
  transform: scale(0.99);
}

.safety-doc-card__accent {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.safety-doc-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  background: var(--accent-bg, rgba(15, 23, 42, 0.06));
  color: var(--accent);
}

.safety-doc-card__icon svg {
  transition: transform 0.2s ease;
}

.safety-doc-card:hover .safety-doc-card__icon svg {
  transform: scale(1.1);
}

.safety-doc-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.safety-doc-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.safety-doc-card__meta {
  font-size: 0.75rem;
  color: #7c8aa0;
}

.safety-doc-card__chevron {
  color: #94a3b8;
}

/* Offline status indicator (right side of card) */
.safety-doc-card__offline-status {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.safety-doc-card__offline-status--cached {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.safety-doc-card__offline-status--not-cached {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  cursor: pointer;
}

.safety-doc-card__offline-status--not-cached:active {
  transform: scale(0.9);
  background: rgba(148, 163, 184, 0.2);
}

.safety-doc-card__offline-status--downloading {
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
  position: relative;
}

/* Spinning progress ring */
.safety-doc-card__offline-status--downloading svg.progress-ring {
  animation: safety-spin 1.2s linear infinite;
}

@keyframes safety-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Card highlight when fully cached (folder or document) */
.safety-doc-card--cached {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.25);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.1), 0 4px 20px -4px rgba(16, 185, 129, 0.1);
}

.safety-doc-card--cached:hover {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15), 0 6px 24px -4px rgba(16, 185, 129, 0.15);
}

/* Green accent bar for cached cards */
.safety-doc-card--cached .safety-doc-card__accent {
  background: #10b981;
}

/* "Available offline" text in meta */
.safety-doc-card__meta--offline {
  color: #10b981;
  font-weight: 500;
}

/* Greyed out unavailable card (offline + not cached) */
.safety-doc-card--unavailable {
  opacity: 0.4;
  filter: grayscale(0.6);
  pointer-events: none;
  cursor: default;
}

.safety-empty {
  padding: 48px 24px;
  text-align: center;
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.safety-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(148, 163, 184, 0.6);
}

.safety-loading {
  padding: 16px 0;
  color: #7c8aa0;
}

.safety-contacts-content {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.safety-contacts-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c8aa0;
  font-weight: 600;
}

.safety-contacts-title__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: transparent;
  color: #f59e0b;
}

.safety-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.safety-contact-card {
  position: relative;
  padding: 18px;
  min-height: 70px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px var(--accent-shadow, rgba(245, 158, 11, 0.1)), 0 4px 20px -4px var(--accent-shadow-strong, rgba(15, 23, 42, 0.12));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.safety-contact-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 1px var(--accent-shadow-strong, rgba(245, 158, 11, 0.2)), 0 6px 24px -4px var(--accent-shadow-strong, rgba(15, 23, 42, 0.16));
}

.safety-contact-card__accent {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: var(--accent, #f59e0b);
}

.safety-contact-card__star {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #f59e0b;
  width: 16px;
  height: 16px;
}

.safety-contact-card__body {
  display: flex;
  gap: 16px;
  padding-left: 8px;
  align-items: center;
}

.safety-contact-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-bg, rgba(245, 158, 11, 0.15));
  color: var(--accent, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.safety-contact-card__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.safety-contact-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.safety-contact-card__role {
  font-size: 0.75rem;
  color: #7c8aa0;
}

.safety-contact-card__methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  min-height: 18px;
}

.safety-contact-card__method {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: rgba(15, 23, 42, 0.8);
  text-decoration: none;
}

.safety-contact-card__method:hover {
  color: rgba(15, 23, 42, 1);
}

.safety-contact-card__method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #f59e0b);
}

/* ===============================
   Visitor Check-In Wizard (Kiosk)
=============================== */
.visitor-wizard {
  --wizard-bg: #f2f5f7;
  --wizard-card: #ffffff;
  --wizard-text: #1a2435;
  --wizard-muted: #6b7280;
  --wizard-border: #dbe1e7;
  --wizard-primary: #1fada2;
  --wizard-primary-strong: #178f86;
  --wizard-secondary: #e5e9ef;
  --wizard-muted-bg: #eef1f5;
  --wizard-glow: 0 20px 60px -15px rgba(31, 173, 162, 0.4);
  --wizard-card-shadow: 0 4px 20px -5px rgba(26, 36, 53, 0.15);
  background: var(--wizard-bg);
  align-items: flex-start;
  justify-content: center;
  padding: 24px clamp(16px, 4vw, 40px) calc(24px + env(safe-area-inset-bottom, 0px) + var(--keyboard-offset, 0px));
  z-index: 200;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Dark mode for camera scan steps — reduces glare on glossy cards */
.visitor-wizard.wizard--scan-dark {
  --wizard-bg: #0f172a;
  --wizard-text: #e2e8f0;
  --wizard-muted: #94a3b8;
  --wizard-card: transparent;
  --wizard-card-shadow: none;
  --wizard-border: rgba(255,255,255,0.08);
}

.visitor-wizard .wizard-primary--muted {
  background: rgba(148,163,184,0.18);
  color: #94a3b8;
  box-shadow: none;
  font-weight: 500;
}
.visitor-wizard .wizard-primary--muted:active {
  background: rgba(148,163,184,0.3);
}

.visitor-wizard.visitor-wizard--exiting {
  opacity: 0;
  pointer-events: none;
}

.visitor-wizard.keyboard-visible {
  align-items: flex-start;
  padding-top: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--keyboard-offset, 0px));
}

.visitor-wizard .wizard-dialog {
  width: min(1100px, 96vw);
  min-height: min(920px, 96vh);
  max-height: calc(100vh - 32px);
  background: transparent;
  box-shadow: none;
  border-radius: 32px;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.visitor-wizard .wizard-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Only vehicle wizards need flex:1 to vertically center the mileage/fuel steps */
#vehicleCheckoutWizard .wizard-content,
#vehicleCheckinPrompt .wizard-content {
  flex: 1;
}

.visitor-wizard .wizard-home {
  position: absolute;
  top: 40px; /* clear of the iOS status bar */
  left: 24px;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: none;
  background: var(--wizard-card);
  color: var(--wizard-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wizard-card-shadow);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  z-index: 2;
}

.visitor-wizard .wizard-home:hover {
  background: var(--wizard-muted-bg);
  color: var(--wizard-text);
  transform: translateY(-1px);
}

.visitor-wizard .wizard-home--close {
  left: auto;
  right: 24px;
}

.visitor-wizard .wizard-step {
  flex: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.visitor-wizard .wizard-step-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 48px) clamp(18px, 4vw, 36px) clamp(24px, 5vh, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

/* Agreement step: scrollable PDF fills the viewport */
.visitor-wizard .wizard-step[data-step="4"] .wizard-step-inner {
  min-height: 0;
  position: relative;
}

/* Signature: animated reveal instead of display:none */
.visitor-wizard .wizard-signature.is-locked {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.3s ease;
}

.visitor-wizard .wizard-signature:not(.is-locked) {
  opacity: 1;
  max-height: 280px;
  transition: opacity 0.4s ease 0.15s, max-height 0.5s ease, margin 0.4s ease;
}

/* Shrink scroll box when signature is revealed — push signature to mid-screen */
.visitor-wizard .wizard-step-inner.agreement-unlocked .wizard-agreement-scroll {
  height: 15vh;
}

.visitor-wizard .wizard-step-inner--top {
  max-width: 680px;
  text-align: center;
  align-items: center;
}

/* Portrait wizard layout (iPad held in portrait). Driven by the JS-set
   `body.app-portrait` class (updateOrientationClass in app.js), NOT
   `@media (orientation:portrait)` — that media feature is unreliable inside the
   iPad WKWebView, so portrait rules silently never applied on-device. Landscape
   (no class) is left untouched.

   Goal (user, 2026-06-13): the sign-in steps must look the SAME with or without
   the keyboard. They autofocus their field, so the keyboard is usually up — but
   when it's down the layout must not jump or jam the field against the top
   buttons. So we pin the card to the top in BOTH keyboard states and lay the
   typing steps out as one compact group. */
body.app-portrait .visitor-wizard {
  align-items: flex-start;
  padding-top: 24px;
}
/* Name (0), company (1) & contact (number 2, email 12): a compact, pushed-down
   group, identical keyboard up or down. The Back/X buttons are fixed at 40–104px
   from the top, so push the title + field clear below them. */
body.app-portrait .visitor-wizard .wizard-step[data-step="0"] .wizard-step-inner,
body.app-portrait .visitor-wizard .wizard-step[data-step="1"] .wizard-step-inner,
body.app-portrait .visitor-wizard .wizard-step[data-step="2"] .wizard-step-inner,
body.app-portrait .visitor-wizard .wizard-step[data-step="12"] .wizard-step-inner {
  justify-content: flex-start;
  padding-top: clamp(96px, 12vh, 120px);
}
body.app-portrait .visitor-wizard .wizard-step[data-step="0"] .wizard-actions,
body.app-portrait .visitor-wizard .wizard-step[data-step="1"] .wizard-actions,
body.app-portrait .visitor-wizard .wizard-step[data-step="2"] .wizard-actions,
body.app-portrait .visitor-wizard .wizard-step[data-step="12"] .wizard-actions {
  margin-top: 28px;
}
/* Agreement step (4): shrink the PDF box so the whole step (header + box + hint +
   signature + Continue) fits the portrait dialog and the BOX is the scroller. If
   it overflows, the dialog scrolls instead and the scroll-to-bottom that unlocks
   the signature never fires — why scrolling "didn't work" in portrait but was
   fine in landscape. */
body.app-portrait .visitor-wizard .wizard-step[data-step="4"] .wizard-agreement-scroll {
  height: calc(100vh - 390px);
}
/* When the agreement unlocks in PORTRAIT, shrink the PDF box (like landscape's
   .agreement-unlocked rule does) so the revealed signature is pushed up into
   view. The portrait base rule above is more specific than the shared
   .agreement-unlocked rule, so it would otherwise keep the box at full height
   and leave the signature below the fold — the bug where unlock "worked in
   landscape but not portrait". This selector adds body.app-portrait to win. */
body.app-portrait .visitor-wizard .wizard-step[data-step="4"] .wizard-step-inner.agreement-unlocked .wizard-agreement-scroll {
  height: 24vh;
}
/* Review step (9): no input here, so just push the group clear of the Back/X
   buttons (like steps 0-2) and open up the heading->card->toggle gaps — the
   landscape-tuned clamp() gap reads cramped in the tall portrait dialog. */

.visitor-wizard .wizard-step-inner--center {
  max-width: 600px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.visitor-wizard .wizard-step[data-step="3"] .wizard-step-inner {
  text-align: center;
}


/* Contact number (2) and email (12) wear the name/company bar grammar
   (.wizard-name) — see the 2026-08-29 redesign block near the end of this
   file; the tel/email input types are included in its bar selectors. */

.visitor-wizard .wizard-step[data-step="7"] .wizard-heading {
  width: 100%;
  justify-content: center;
}


.visitor-wizard .wizard-step[data-step="6"] .wizard-heading {
  gap: 8px;
}

.visitor-wizard .wizard-step[data-step="6"] .wizard-heading__icon {
  width: 36px;
  height: 36px;
}

.visitor-wizard .wizard-step[data-step="6"] .wizard-heading__icon svg {
  width: 36px;
  height: 36px;
}

.visitor-wizard .wizard-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.visitor-wizard .wizard-heading__icon {
  width: 32px;
  height: 32px;
  color: var(--wizard-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.visitor-wizard .wizard-heading__icon--shield {
  flex: 0 0 auto;
  opacity: 1;
}

.visitor-wizard .wizard-heading__icon svg {
  width: 32px;
  height: 32px;
}

.visitor-wizard .wizard-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--wizard-text);
  /* Heading adjustment */
  width: 100%;
  text-align: center;
  transform: translateX(32px);
}

.visitor-wizard .wizard-step-inner--center .wizard-title {
  transform: none;
  padding-right: 0;
}

.visitor-wizard .wizard-step[data-step="6"] .wizard-title {
  transform: translateX(20px);
}

.visitor-wizard .wizard-step[data-step="7"] .wizard-title {
  width: auto;
  transform: translateX(0);
}

.visitor-wizard .wizard-title--security-standalone {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  font-weight: 700;
  color: #dc2626;
  text-align: center;
}

.visitor-wizard .wizard-subtitle {
  margin: 0;
  font-size: 1rem;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-search-details {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.visitor-wizard .wizard-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.visitor-wizard .wizard-field label {
  font-weight: 600;
  color: var(--wizard-text);
}

.visitor-wizard .wizard-select {
  width: 100%;
  height: 60px;
  border-radius: 16px;
  border: 2px solid var(--wizard-border);
  background: var(--wizard-card);
  font-size: 1.1rem;
  text-align: center;
  color: var(--wizard-text);
  padding: 0 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.visitor-wizard .wizard-select:focus {
  outline: none;
  border-color: var(--wizard-primary);
  box-shadow: 0 0 0 4px rgba(31, 173, 162, 0.15);
}

.visitor-wizard .wizard-id-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.visitor-wizard .wizard-id-type-btn {
  padding: 10px 20px;
  border-radius: 14px;
  border: 2px solid var(--wizard-border);
  background: var(--wizard-card);
  color: var(--wizard-text);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.visitor-wizard .wizard-id-type-btn:active {
  transform: scale(0.97);
}
.visitor-wizard .wizard-id-type-btn.is-selected {
  border-color: var(--wizard-primary);
  background: rgba(31, 173, 162, 0.08);
  color: var(--wizard-primary);
  font-weight: 600;
}

/* Remember-details toggle — sits at the bottom of the review step (9). The
   switch reuses the global .switch/.slider component; inside the wizard
   --color-accent resolves to the wizard's own accent, so the "on" state matches
   the Continue button rather than introducing a new colour. */
/* Review-step "Remember my details" switch: no grey tap flash on the row (it
   is one big label), and ON is the wizard's green, not the old teal accent. */
.visitor-wizard .wizard-remember-toggle,
.visitor-wizard .wizard-remember-toggle * {
  -webkit-tap-highlight-color: transparent;
}
.visitor-wizard .wizard-remember-toggle input:checked + .slider {
  background-color: #16a34a;
  box-shadow: none;
}
.visitor-wizard .wizard-remember-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 0;
  padding: 16px 20px;
  border-radius: 16px;
  background: #f1f5f9;
  color: var(--wizard-text);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.visitor-wizard .wizard-remember-toggle__label {
  flex: 0 0 auto;
  text-align: left;
}

.visitor-wizard .wizard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 4px 2px;
  max-height: min(420px, 55vh);
  overflow-y: auto;
}

.visitor-wizard .wizard-grid::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.visitor-wizard .wizard-grid::-webkit-scrollbar-thumb {
  background: rgba(31, 173, 162, 0.35);
  border-radius: 999px;
}

.visitor-wizard .wizard-host-option,
.visitor-wizard .wizard-crew-option {
  border-radius: 16px;
  border: 2px solid var(--wizard-border);
  background: var(--wizard-card);
  box-shadow: var(--wizard-card-shadow);
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.visitor-wizard .wizard-host-option:hover,
.visitor-wizard .wizard-crew-option:hover {
  border-color: rgba(31, 173, 162, 0.5);
  transform: translateY(-1px);
}

.visitor-wizard .wizard-host-option.is-selected,
.visitor-wizard .wizard-crew-option.is-selected {
  border-color: var(--wizard-primary);
  background: rgba(31, 173, 162, 0.08);
  box-shadow: var(--wizard-glow);
}

.visitor-wizard .wizard-host-avatar,
.visitor-wizard .wizard-crew-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--wizard-muted-bg);
  color: var(--wizard-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
}

.visitor-wizard .wizard-crew-avatar .wizard-crew-initials {
  position: relative;
  z-index: 0;
}

.visitor-wizard .wizard-crew-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  z-index: 1;
}

.visitor-wizard .wizard-host-option.is-selected .wizard-host-avatar,
.visitor-wizard .wizard-crew-option.is-selected .wizard-crew-avatar {
  background: var(--wizard-primary);
  color: #fff;
}

.visitor-wizard .wizard-host-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visitor-wizard .wizard-host-name,
.visitor-wizard .wizard-crew-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wizard-text);
}

.visitor-wizard .wizard-host-role,
.visitor-wizard .wizard-crew-role {
  font-size: 0.75rem;
  color: var(--wizard-muted);
}

.wizard-crew-ashore {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(244, 114, 100, 0.12);
  color: #f47264;
  padding: 1px 6px;
  border-radius: 6px;
}

.visitor-wizard .wizard-empty {
  text-align: center;
  color: var(--wizard-muted);
  padding: 12px 0;
}

.visitor-wizard .wizard-agreement-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* Agreement step: match visitor wizard — let content push button below fold */
#vehicleCheckoutWizard .wizard-step[data-step="1"] .wizard-step-inner {
  min-height: 0;
  position: relative;
}

.visitor-wizard .wizard-agreement-scroll {
  background: var(--wizard-card);
  border-radius: 16px;
  border: 2px solid var(--wizard-border);
  box-shadow: var(--wizard-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--wizard-text);
  line-height: 1.6;
  height: calc(100vh - 320px);
  flex: none;
  transition: height 0.4s ease;
}

.visitor-wizard .wizard-agreement-placeholder {
  text-align: center;
  color: var(--wizard-muted);
  font-size: 0.95rem;
  padding: 18px 12px;
}

.visitor-wizard .wizard-agreement-viewer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.visitor-wizard .wizard-agreement-viewer .pdfjs-page {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  flex: 0 0 auto;
  width: min(960px, 100%);
  margin: 0 auto;
}

.visitor-wizard .wizard-agreement-viewer .pdfjs-page canvas {
  display: block;
  /* renderWithPdfJs sets an inline px width/height from the box width measured at
     render time. If that was a wider (landscape) measurement and the page isn't
     re-rendered on rotation, the canvas overflows the narrower portrait box and
     clips the text on the right. Force it to scale to its container (the inline
     px would otherwise win over a plain stylesheet rule); height:auto keeps the
     aspect ratio from the canvas's intrinsic dimensions. The render stays
     high-res, so it remains sharp when scaled down. */
  width: 100% !important;
  height: auto !important;
  flex: 0 0 auto;
}

.visitor-wizard .wizard-agreement-scroll h4,
.visitor-wizard .wizard-agreement-scroll h5 {
  margin: 16px 0 8px;
  font-weight: 700;
}

.visitor-wizard .wizard-agreement-footer {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--wizard-muted-bg);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-agreement-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #e8725a;
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: -60px;
  position: relative;
  z-index: 2;
  background: linear-gradient(transparent, var(--wizard-bg) 65%);
  padding: 24px 20px 8px;
  width: 100%;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

.visitor-wizard .wizard-agreement-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

.visitor-wizard .wizard-agreement-hint__chevron {
  display: inline-flex;
  animation: wizard-hint-bounce 1.4s ease-in-out infinite;
}

.visitor-wizard .wizard-agreement-hint__chevron:last-child {
  animation-delay: 0.2s;
}

@keyframes wizard-hint-bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

@keyframes wizard-step-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.visitor-wizard .wizard-agreement-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.visitor-wizard .wizard-supplemental {
  align-items: center;
  text-align: center;
}

.visitor-wizard .wizard-checkbox {
  color: var(--wizard-text);
}

.visitor-wizard .wizard-nda-link {
  color: var(--wizard-primary);
  font-weight: 600;
  text-decoration: underline;
}

.visitor-wizard .wizard-nda-link.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.visitor-wizard .wizard-signature {
  margin-top: 8px;
}

.visitor-wizard .signature-pad {
  border: 2px dashed rgba(31, 173, 162, 0.35);
  border-radius: 18px;
  background: var(--wizard-card);
}

.visitor-wizard .signature-pad__actions .link-button {
  background: none;
  border: none;
  color: var(--wizard-primary);
  font-weight: 600;
  cursor: pointer;
}

.visitor-wizard .wizard-photo {
  background: #0f172a;
  border-radius: 20px;
  overflow: hidden;
}

.visitor-wizard .wizard-id-photo__note {
  font-size: 0.95rem;
  color: var(--wizard-muted);
  margin: 0;
}

.visitor-wizard .wizard-id-photo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.visitor-wizard .wizard-id-photo__verified {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
  font-weight: 600;
  text-align: center;
}

.visitor-wizard .wizard-id-photo__frame {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 24px;
  border: 2px solid var(--wizard-border);
  background: #0f172a;
  box-shadow: var(--wizard-card-shadow);
  position: relative;
  overflow: hidden;
}

.visitor-wizard .wizard-id-photo__verified-overlay {
  position: absolute;
  inset: 0;
  background: rgba(34, 197, 94, 0.9);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 4;
}

.visitor-wizard .wizard-id-photo__verified-overlay.is-active {
  opacity: 1;
  transform: scale(1);
  animation: id-verify-flash 0.45s ease-out;
}

.visitor-wizard .wizard-id-photo__verified-overlay svg {
  width: 72px;
  height: 72px;
  stroke: currentColor;
}

.visitor-wizard .wizard-id-photo__badge-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.visitor-wizard .wizard-id-photo__badge-overlay svg {
  opacity: 0.5;
}

.visitor-wizard .wizard-id-photo__frame video,
.visitor-wizard .wizard-id-photo__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 2;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* A captured shot sits in exactly the same box as the live camera it
   replaces. These previews had `width:100%` and no height bound at all,
   while the viewfinder they replace is locked to 3:2 — and the capture
   draws the FULL video frame (videoWidth x videoHeight, 4:3), not the 3:2
   crop the user actually framed. So the photo came back a different shape
   AND unbounded: on an iPad Pro the wider container made it proportionally
   taller still, until it took over the screen and pushed the Retake button
   below the fold (founder, 2026-08-09 — it was merely bad on an iPad mini,
   which is why it got through). object-fit: cover reproduces what the
   viewfinder showed; the stored image keeps the full frame regardless. */
.visitor-wizard .wizard-photo-preview {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
  border: 2px solid var(--wizard-border);
  background: #0f172a;
  box-shadow: var(--wizard-card-shadow);
  margin-bottom: 12px;
}

.visitor-wizard .wizard-id-photo__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.visitor-wizard .wizard-id-photo__capture {
  width: 72px;
  padding: 0;
  margin-left: auto;
  background: var(--wizard-primary-strong);
}

.visitor-wizard .wizard-id-photo__capture svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visitor-wizard .wizard-id-photo__retake {
  margin-left: auto;
}

.visitor-wizard .wizard-photo-btn--timer {
  gap: 8px;
  padding: 0 20px;
}

.visitor-wizard .wizard-photo-btn--timer svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visitor-wizard .wizard-photo-btn--timer.is-active {
  background: rgba(31, 173, 162, 0.14);
  color: var(--wizard-primary);
}

.visitor-wizard .wizard-id-photo__countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.45);
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.visitor-wizard .wizard-id-photo__flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 11;
  pointer-events: none;
}

.visitor-wizard .wizard-id-photo__flash.is-active {
  opacity: 0.85;
}

@keyframes id-verify-flash {
  0% {
    opacity: 0.3;
    filter: brightness(1.2);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.visitor-wizard .wizard-photo__countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.35);
  z-index: 3;
  pointer-events: none;
}

.visitor-wizard .wizard-photo__flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
  pointer-events: none;
}

.visitor-wizard .wizard-photo__flash.is-active {
  opacity: 0.85;
}

@media (orientation: landscape) {
  .visitor-wizard .wizard-actions {
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }

  .visitor-wizard .wizard-step[data-step="3"] .wizard-id-photo__frame {
    max-width: 720px;
    max-height: 45vh;
    margin: 0 auto;
  }

  .visitor-wizard .wizard-step[data-step="6"] .wizard-photo {
    max-width: 720px;
    max-height: 45vh;
    margin: 0 auto;
  }

}

/* Summary step is clamp()-relative (anchored to iPad Mini landscape, 1024px)
   and compact in both orientations — the clamp floors keep portrait sane. */

/* Compact review card: photo beside a 2x2 grid of details — landscape iPads
   have spare width, not height, so the card spends width to fit the Mini. */
.visitor-wizard .wizard-overview-card {
  background: var(--wizard-card);
  border-radius: clamp(20px, 2.35vw, 32px);
  border: 2px solid var(--wizard-border);
  box-shadow: var(--wizard-card-shadow);
  padding: clamp(14px, 1.6vw, 21px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 1.6vw, 21px);
}

.visitor-wizard .wizard-overview-photo {
  position: relative;
  width: clamp(72px, 7.8vw, 107px);
  height: clamp(72px, 7.8vw, 107px);
  border-radius: 999px;
  background: var(--wizard-muted-bg);
  color: var(--wizard-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin: 0;
  flex: 0 0 auto;
  overflow: hidden;
}

.visitor-wizard .wizard-overview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visitor-wizard .wizard-overview-photo__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-overview-list {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
}

.visitor-wizard .wizard-overview-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--wizard-muted-bg);
  border-radius: clamp(12px, 1.4vw, 19px);
  padding: clamp(10px, 1.2vw, 16px) clamp(12px, 1.4vw, 19px);
  gap: clamp(10px, 1.2vw, 16px);
  text-align: left;
}

.visitor-wizard .wizard-overview-icon {
  width: clamp(32px, 3.5vw, 48px);
  height: clamp(32px, 3.5vw, 48px);
  border-radius: clamp(10px, 1.2vw, 16px);
  background: #fff;
  color: var(--wizard-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(26, 36, 53, 0.08);
  flex-shrink: 0;
}

.visitor-wizard .wizard-overview-icon svg {
  width: clamp(18px, 2.15vw, 29px);
  height: clamp(18px, 2.15vw, 29px);
}

.visitor-wizard .wizard-overview-photo__fallback svg {
  width: clamp(28px, 3.5vw, 48px);
  height: clamp(28px, 3.5vw, 48px);
}

.visitor-wizard .wizard-overview-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.visitor-wizard .wizard-overview-label {
  margin: 0;
  font-size: clamp(12.5px, 1.4vw, 19px);
  color: var(--wizard-muted);
  text-transform: none;
  letter-spacing: 0;
}

.visitor-wizard .wizard-overview-value {
  margin: 0;
  font-size: clamp(15px, 1.75vw, 24px);
  font-weight: 600;
  color: var(--wizard-text);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  word-break: break-word;
}

.visitor-wizard .wizard-overview-role {
  font-size: clamp(12.5px, 1.4vw, 19px);
  font-weight: 500;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-pin-card {
  width: min(384px, 100%);
  margin: 0 auto;
  padding: 24px;
  border-radius: 24px;
  background: var(--wizard-card);
  border: 2px solid var(--wizard-border);
  box-shadow: var(--wizard-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.visitor-wizard .wizard-pin-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wizard-text);
}

.visitor-wizard .wizard-pin-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-pin-help {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: center;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-step[data-step="7"] .wizard-pin-help {
  display: flex;
}

.visitor-wizard .wizard-pin-help__line {
  width: 100%;
  height: 1px;
  background: var(--wizard-border);
}

.visitor-wizard .wizard-pin-help p {
  margin: 0;
}

.visitor-wizard .wizard-pin-card input {
  height: 64px;
  border-radius: 16px;
  border: 2px solid var(--wizard-border);
  font-size: 1.875rem;
  text-align: center;
  letter-spacing: 0.1em;
}

.visitor-wizard .wizard-pin-card input::placeholder {
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-crew-search {
  width: 100%;
  margin-bottom: 16px;
}

.visitor-wizard .wizard-pill-input {
  border-radius: 999px;
  border: 2px solid var(--wizard-border);
  background: var(--wizard-card);
  padding: 4px 18px;
}

.visitor-wizard .wizard-pill-input input {
  font-size: 1rem;
  padding: 12px 0;
}

.visitor-wizard .wizard-print-preview {
  background: var(--wizard-card);
  border-radius: 24px;
  border: 2px solid var(--wizard-border);
  box-shadow: var(--wizard-card-shadow);
  padding: 18px;
}

.visitor-wizard .wizard-inline-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.visitor-wizard .wizard-primary,
.visitor-wizard .wizard-secondary {
  height: 64px;
  padding: 0 28px;
  border-radius: 16px;
  font-size: 1.25rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.visitor-wizard .wizard-primary:active:not(:disabled),
.visitor-wizard .wizard-secondary:active:not(:disabled) {
  transform: scale(0.98);
}

.visitor-wizard .wizard-primary {
  background: var(--wizard-primary);
  color: #fff;
  box-shadow: var(--wizard-glow);
}

.visitor-wizard .wizard-primary--assist {
  background: #22c55e;
  box-shadow: 0 20px 60px -15px rgba(34, 197, 94, 0.45);
}

@media (hover: hover) and (pointer: fine) {
  .visitor-wizard .wizard-primary--assist:hover:not(:disabled) {
    background: #16a34a;
  }

  .visitor-wizard .wizard-primary:hover:not(:disabled) {
    background: var(--wizard-primary-strong);
  }
}

.visitor-wizard .wizard-primary:disabled {
  background: #b0bec5;
  box-shadow: none;
  cursor: not-allowed;
}

.visitor-wizard .wizard-dialog.wizard-dialog--fade {
  animation: wizard-step-fade 0.24s ease-out;
}

.visitor-wizard .wizard-primary--full {
  width: 100%;
}

.visitor-wizard .wizard-primary--lg {
  height: 80px;
  border-radius: 24px;
  font-size: 1.5rem;
  padding: 0 36px;
}

.visitor-wizard .wizard-secondary {
  background: var(--wizard-secondary);
  color: var(--wizard-text);
}

.visitor-wizard .wizard-secondary--assist,
.visitor-wizard .wizard-secondary--home {
  width: 100%;
}

.visitor-wizard .wizard-actions {
  position: static;
  margin-top: auto;
  padding-top: 8px;
  width: 100%;
  background: none;
}

.visitor-wizard .wizard-actions--stacked {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
}

.visitor-wizard .wizard-actions--stacked .wizard-primary,
.visitor-wizard .wizard-actions--stacked .wizard-secondary {
  flex: 0 0 auto;
  width: 100%;
}

.visitor-wizard .wizard-step[data-step="7"] .wizard-actions {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
}

.visitor-wizard .wizard-step[data-step="7"] .wizard-actions .wizard-primary,
.visitor-wizard .wizard-step[data-step="7"] .wizard-actions .wizard-secondary {
  flex: 0 0 auto;
  width: 100%;
}

.visitor-wizard .wizard-next__label {
  flex: 1;
  text-align: center;
}

.visitor-wizard .wizard-next__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.visitor-wizard .wizard-error {
  color: #d14343;
  font-size: 0.95rem;
  text-align: center;
}

.wizard-skip-photo {
  display: block;
  margin: 12px auto 0;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #94a3b8;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.wizard-skip-photo.hidden { display: none; }

.visitor-wizard .wizard-dialog--success .wizard-content {
  flex: 1;
}

.visitor-wizard .wizard-step[data-step="10"] {
  background: #f2f5f7;
}

.visitor-wizard .wizard-step[data-step="10"] .wizard-step-inner {
  flex: 1;
  justify-content: center;
}

.visitor-wizard .wizard-complete-icon {
  width: 128px;
  height: 128px;
  border-radius: 999px;
  /* solid go-green, white tick — the 12% tint read as washed out (founder) */
  background: #16a34a;
  color: #fff;
  box-shadow: 0 18px 40px -14px rgba(22, 163, 74, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  animation: vrs-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.visitor-wizard .wizard-complete-icon svg {
  width: 48px;
  height: 48px;
}

.visitor-wizard .wizard-step[data-step="10"] .wizard-title {
  margin: 0;
  font-size: 2.8rem;
  font-weight: 800;
  color: #1a2435;
  animation: vrs-slide-up 0.5s ease-out 0.4s both;
}

.visitor-wizard .wizard-step[data-step="10"] .wizard-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 1.1rem;
  animation: vrs-slide-up 0.5s ease-out 0.5s both;
}

.visitor-wizard .wizard-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.visitor-wizard .wizard-modal.wizard-modal--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.visitor-wizard.wizard-modal-open .wizard-dialog,
.visitor-wizard.wizard-modal-open .wizard-actions {
  pointer-events: none;
}

.visitor-wizard .wizard-modal__card {
  width: min(600px, 92vw);
  background: var(--wizard-card);
  border-radius: 28px;
  padding: 36px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: transform, opacity;
}

.visitor-wizard .wizard-modal__card h3 {
  margin: 0;
  /* explicit unit sizing (2026-08-30): the text inherited 16px browser
     defaults and read small/soft next to the redesigned steps */
  font-size: calc(26 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wizard-text);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  transition-delay: 0.1s;
  will-change: transform, opacity;
}

.visitor-wizard .wizard-modal__card p {
  margin: 0;
  font-size: calc(18 * var(--ui-unit));
  font-weight: 500;
  line-height: 1.55;
  color: var(--wizard-text);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  transition-delay: 0.2s;
  will-change: transform, opacity;
}

.visitor-wizard .wizard-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  transition-delay: 0.2s;
  will-change: transform, opacity;
}

.visitor-wizard .wizard-modal.wizard-modal--visible .wizard-modal__card,
.visitor-wizard .wizard-modal.wizard-modal--visible .wizard-modal__card h3,
.visitor-wizard .wizard-modal.wizard-modal--visible .wizard-modal__card p,
.visitor-wizard .wizard-modal.wizard-modal--visible .wizard-modal__actions {
  opacity: 1;
  /* end at identity and drop the compositing layer — a kept will-change/scale
     layer rasterizes the settled card's TEXT soft on iPad (reads as blur) */
  transform: none;
  will-change: auto;
}

@media (min-width: 720px) {
  .visitor-wizard .wizard-modal__actions {
    flex-direction: row;
  }

  .visitor-wizard .wizard-modal__actions .wizard-primary,
  .visitor-wizard .wizard-modal__actions .wizard-secondary {
    flex: 1;
  }
}

/* Popup buttons join the redesigned family (2026-08-30): navy go, white
   ghost escape — the old teal + glow was the last of the legacy chrome.
   Scoped to the popups so the vehicle wizard keeps its generic styles. */
.visitor-wizard .wizard-modal__actions .wizard-primary {
  background: var(--color-dark, #0b1220);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .visitor-wizard .wizard-modal__actions .wizard-primary:hover:not(:disabled) {
    background: #1a2435;
  }
}

.visitor-wizard .wizard-modal__actions .wizard-secondary {
  background: #fff;
  border: 2px solid var(--wizard-border);
  color: var(--wizard-text);
}

.visitor-wizard .wizard-modal__actions .wizard-secondary:active {
  background: #eef2f6;
}

@media (max-width: 900px) {
  .visitor-wizard .wizard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .visitor-checkout-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .visitor-wizard {
    padding: 18px 14px;
  }

  .visitor-wizard .wizard-dialog {
    min-height: auto;
  }

  .visitor-wizard .wizard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visitor-checkout-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visitor-scan-modal__title {
    font-size: 1.8rem;
  }

  .visitor-scan-modal .wizard-primary,
  .visitor-scan-modal .wizard-secondary {
    height: 72px;
    min-height: 72px;
    font-size: 1.3rem;
    border-radius: 20px;
  }

  .visitor-scan-modal__topbar,
  .visitor-scan-modal__inner {
    width: min(860px, 92vw);
    margin-left: auto;
    margin-right: auto;
  }


  .visitor-scan-modal__actions {
    width: min(520px, 85vw);
  }

  .visitor-wizard .wizard-primary,
  .visitor-wizard .wizard-secondary {
    height: 60px;
    font-size: 1.05rem;
  }

  .visitor-wizard .wizard-primary--lg {
    height: 72px;
    font-size: 1.3rem;
    border-radius: 20px;
  }

  .visitor-wizard .wizard-title {
    font-size: 1.8rem;
  }
}

/* ========================================
   Offline Banner
======================================== */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  /* The whole banner is the dismiss target — but taps inside the iOS status
     bar go to the SYSTEM, never the webview. Same fix the update banner has
     had all along: paint the inset, put the 36px message row (and therefore
     the tappable area) fully below the clock and battery. */
  box-sizing: content-box;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(135deg, #1e5a8a 0%, #2d7ab8 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 99999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.offline-banner svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.offline-banner span {
  white-space: nowrap;
}

/* ========================================
   Printer Offline Banner
======================================== */
.printer-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  /* Same status-bar clearance as .offline-banner above — a tap must land
     below the system strip to be a tap at all. */
  box-sizing: content-box;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(135deg, #92400e 0%, #b45309 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 99998;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.printer-offline-banner svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.printer-offline-banner span {
  white-space: nowrap;
}

/* When both banners show, push printer banner below network banner — which
   already painted the inset, so this one must not add it again. */
body.has-offline-banner .printer-offline-banner {
  top: calc(36px + env(safe-area-inset-top, 0px));
  padding-top: 0;
}

/* ========================================
   App Update Banner
======================================== */
.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 46px; /* taller so it's a reliable tap target */
  box-sizing: content-box;
  background: linear-gradient(135deg, #92400e 0%, #b45309 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-left: calc(env(safe-area-inset-left, 0px) + 16px);
  padding-right: calc(env(safe-area-inset-right, 0px) + 8px);
  font-size: 14px;
  font-weight: 600;
  z-index: 99997;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Clear the iOS status bar (battery/clock) ONLY when the update banner is the
   topmost banner. When offline/printer banners sit above it, it's pushed to
   top:36/72 and must not add the inset again. */
body:not(.has-offline-banner):not(.has-printer-banner) .update-banner {
  padding-top: env(safe-area-inset-top, 0px);
}

.update-banner svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.update-banner span {
  white-space: nowrap;
}

/* Stack update banner below other banners. The banner above painted the
   status-bar inset, so these offsets carry it. */
body.has-offline-banner .update-banner {
  top: calc(36px + env(safe-area-inset-top, 0px));
}
body.has-printer-banner .update-banner {
  top: calc(36px + env(safe-area-inset-top, 0px));
}
body.has-offline-banner.has-printer-banner .update-banner {
  top: calc(72px + env(safe-area-inset-top, 0px));
}

/* Banner dismiss — entire banner is tappable */
.banner-dismiss {
  display: none;
}

/* The update banner is an action (tap = open the in-app App Store page), so it
   shows a small "Update" pill and a × to snooze. */
.update-banner__cta {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#updateBanner .banner-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto; /* push to the right, in normal flow (sits below the status bar) */
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  opacity: 0.9;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================
   Tutorial Overlays
   ============================================ */

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  animation: tutorialFadeIn 0.4s ease forwards;
}

.tutorial-overlay.is-closing {
  animation: tutorialFadeOut 0.3s ease forwards;
}

.tutorial-card {
  position: relative;
  width: 90%;
  max-width: 280px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  padding: 28px 24px 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  animation: tutorialCardIn 0.4s 0.1s ease forwards;
}

.is-closing .tutorial-card {
  animation: tutorialCardOut 0.3s ease forwards;
}

.tutorial-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(148, 163, 184, 0.6);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.tutorial-text {
  text-align: center;
}

.tutorial-text h3 {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 6px;
}

.tutorial-text p {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

.tutorial-dismiss {
  font-size: 12px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.7);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 12px;
}

/* Swipe demo */
.tutorial-swipe-demo {
  position: relative;
  width: 100%;
  height: 56px;
  border-radius: 14px;
  background: rgba(51, 65, 85, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.15);
  overflow: hidden;
}

.tutorial-swipe-reveal {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-right: 14px;
}

.tutorial-swipe-reveal span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(52, 211, 153, 0.8);
}

.tutorial-swipe-surface {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.2);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  animation: tutorialSwipeCard 3s ease-in-out 0.8s infinite;
}

.tutorial-swipe-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(51, 65, 85, 0.8);
  border: 2px solid rgba(148, 163, 184, 0.25);
  flex-shrink: 0;
}

.tutorial-swipe-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tutorial-swipe-lines .line1 {
  height: 8px;
  width: 64px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.2);
}

.tutorial-swipe-lines .line2 {
  height: 6px;
  width: 40px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.1);
}

.tutorial-finger {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  animation: tutorialSwipeFinger 3s ease-in-out 0.8s infinite;
  opacity: 0;
}

.tutorial-finger svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Selfie/Photo demo */
.tutorial-photo-demo {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(99, 102, 241, 0.3);
  animation: tutorialRipple 2.5s ease-out 0.8s infinite;
}

.tutorial-ripple:nth-child(2) {
  border-color: rgba(99, 102, 241, 0.2);
  animation: tutorialRipple2 2.5s ease-out 0.95s infinite;
}

.tutorial-photo-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(51, 65, 85, 0.8);
  border: 2px solid rgba(148, 163, 184, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: tutorialAvatarPulse 2.5s ease-in-out 0.8s infinite;
}

.tutorial-camera-icon {
  opacity: 0;
  animation: tutorialCameraFlash 2.5s ease-out 0.8s infinite;
}

.tutorial-camera-icon svg {
  width: 24px;
  height: 24px;
  color: rgba(99, 102, 241, 0.7);
  stroke: rgba(99, 102, 241, 0.7);
  fill: none;
}

.tutorial-photo-finger {
  position: absolute;
  opacity: 0;
  animation: tutorialTapFinger 2.5s ease-in-out 0.8s infinite;
}

.tutorial-photo-finger svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Keyframes */
@keyframes tutorialFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tutorialFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes tutorialCardIn {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes tutorialCardOut {
  from { transform: scale(1) translateY(0); opacity: 1; }
  to { transform: scale(0.9) translateY(20px); opacity: 0; }
}

.tutorial-body {
  transition: opacity 0.25s ease;
}
.tutorial-body.tutorial-step-transition {
  opacity: 0;
}

@keyframes tutorialSwipeCard {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-80px); }
  55%  { transform: translateX(-80px); }
  80%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes tutorialSwipeFinger {
  0%   { right: -30px; opacity: 0; }
  10%  { opacity: 1; }
  25%  { right: 100px; opacity: 1; }
  55%  { right: 100px; opacity: 1; }
  70%  { right: 100px; opacity: 0; }
  100% { right: -30px; opacity: 0; }
}

@keyframes tutorialRipple {
  0%   { transform: scale(1); opacity: 0.5; }
  40%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes tutorialRipple2 {
  0%   { transform: scale(1); opacity: 0.3; }
  50%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes tutorialAvatarPulse {
  0%   { transform: scale(1); }
  12%  { transform: scale(0.9); }
  24%  { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes tutorialCameraFlash {
  0%   { opacity: 0; transform: scale(0.5); }
  15%  { opacity: 0; transform: scale(0.5); }
  25%  { opacity: 1; transform: scale(1); }
  55%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 0; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(0.5); }
}

@keyframes tutorialTapFinger {
  0%   { transform: translate(20px, 40px); opacity: 0; }
  10%  { opacity: 1; }
  15%  { transform: translate(0, 0); opacity: 1; }
  55%  { transform: translate(0, 0); opacity: 1; }
  70%  { transform: translate(20px, 40px); opacity: 0; }
  100% { transform: translate(20px, 40px); opacity: 0; }
}

/* ===============================
   VEHICLE BOARD
=============================== */

.vehicle-board {
  width: 100%;
}

.vehicle-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 24px;
  text-align: center;
  color: var(--color-muted);
}

.vehicle-empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
  stroke: var(--color-muted);
}

.vehicle-empty p {
  margin: 0;
  font-size: 1rem;
}

/* Vehicle signature pad — slightly taller */
#vehicleSignaturePadContainer {
  height: 200px;
}

/* Agreement scroll: smooth shrink when signature is revealed */
#vehicleAgreementScroll {
  transition: max-height 0.4s ease;
}

/* Signature section fade-in */
#vehicleSignatureSection.vehicle-sig-reveal {
  animation: vehicleSigFadeIn 0.4s ease-out;
}

@keyframes vehicleSigFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Vehicle avatar — car icon inside crew card */
.vehicle-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(86, 178, 187, 0.12) !important;
  color: var(--color-accent);
}

.vehicle-avatar.is-active {
  background: rgba(34, 197, 94, 0.12) !important;
  color: var(--status-in);
}

.vehicle-icon {
  width: 22px;
  height: 22px;
}

/* Mini driver avatar on vehicle card subtitle */
.vehicle-card .crew-role {
  display: flex;
  align-items: center;
}

.vehicle-driver-mini-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 5px;
  flex-shrink: 0;
}

/* Driver selection grid in checkout wizard */
.vehicle-driver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  width: 100%;
  max-height: min(400px, 55vh);
  overflow-y: auto;
  padding: 4px;
}

.vehicle-driver-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--wizard-card, rgba(255,255,255,0.06));
  border: 2px solid var(--wizard-border, rgba(255,255,255,0.1));
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.vehicle-driver-item:active {
  transform: scale(0.97);
}

.vehicle-driver-item.selected {
  border-color: var(--wizard-primary, #56b2bb);
  background: rgba(86, 178, 187, 0.12);
}

.vehicle-driver-item__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(86, 178, 187, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vehicle-driver-item__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vehicle-driver-item__initials {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wizard-text, #fff);
  opacity: 0.7;
}

.vehicle-driver-item__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wizard-text, #fff);
  text-align: center;
  line-height: 1.2;
}

.vehicle-driver-item__role {
  font-size: 0.78rem;
  color: var(--wizard-muted, rgba(255,255,255,0.5));
  text-align: center;
}

/* Mileage input section */
.vehicle-mileage-section {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin: 24px auto 0;
}

/* Mileage stepper with +/- buttons */
.vehicle-mileage-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 16px auto 0;
}

.mileage-step-btn {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 2px solid var(--wizard-border, rgba(255,255,255,0.15));
  background: var(--wizard-card, rgba(255,255,255,0.06));
  color: var(--wizard-text, #fff);
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}

.mileage-step-btn:active {
  background: rgba(86, 178, 187, 0.2);
  border-color: var(--wizard-primary, #56b2bb);
}

/* Greyed-out state when mileage hasn't been changed yet */
.vehicle-mileage-input.is-unchanged {
  opacity: 0.45;
}

.vehicle-mileage-input {
  flex: 1;
  padding: 14px 12px;
  border-radius: 14px;
  border: 2px solid var(--wizard-border, rgba(255,255,255,0.15));
  background: var(--wizard-card, rgba(255,255,255,0.06));
  color: var(--wizard-text, #fff);
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  transition: opacity 0.2s;
}

.vehicle-mileage-input::placeholder {
  color: var(--wizard-muted, rgba(255,255,255,0.35));
  font-weight: 400;
  font-size: 1rem;
}

.vehicle-mileage-input:focus {
  outline: none;
  border-color: var(--wizard-primary, #56b2bb);
}

.vehicle-mileage-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wizard-muted, rgba(255,255,255,0.5));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Signature label in vehicle wizard */
.wizard-signature__label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--wizard-muted, rgba(255,255,255,0.6));
}

/* Vehicle card stats row (mileage + fuel) */
.vehicle-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
}

.vehicle-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  color: var(--color-muted);
  opacity: 0.7;
}

.vehicle-stat svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.vehicle-stat--low {
  color: #ef4444;
  opacity: 1;
  font-weight: 600;
}

/* Check-in form fields */
.vehicle-checkin-field {
  width: 100%;
  margin-top: 16px;
}

.vehicle-checkin-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wizard-text, #fff);
  margin-bottom: 8px;
}

.vehicle-checkin-label svg {
  opacity: 0.6;
}

.vehicle-fuel-value {
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}

/* Fuel slider */
.vehicle-fuel-slider-wrap {
  width: 100%;
  padding: 18px 0;
}

.vehicle-fuel-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.vehicle-fuel-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  cursor: pointer;
  border: none;
}

.vehicle-fuel-slider::-moz-range-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  cursor: pointer;
  border: none;
}

.vehicle-fuel-markers {
  display: flex;
  justify-content: space-between;
  padding: 4px 2px 0;
  font-size: 0.65rem;
  color: var(--wizard-muted, rgba(255,255,255,0.35));
  user-select: none;
}

/* Vehicle checkout wizard – keep button near content, not at page bottom.
   The shared .visitor-wizard .wizard-actions { margin-top: auto } pushes
   the button to the bottom of the 96vh dialog. That works for the visitor
   wizard (keyboard shrinks the viewport) but creates a huge gap for the
   vehicle wizard where there's no keyboard on most steps. */
#vehicleCheckoutWizard .wizard-actions {
  margin-top: 0;
}

/* Vehicle return wizard — full-screen multi-step (same as checkout) */
#vehicleCheckinPrompt .wizard-actions {
  margin-top: 0;
}

/* Soft fade-in when vehicle return wizard opens */
#vehicleCheckinPrompt.vehicle-return-enter {
  animation: vr-fade-in 0.35s ease-out both;
}
#vehicleCheckinPrompt.vehicle-return-enter .wizard-dialog {
  animation: vr-slide-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes vr-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vr-slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Taller signature pad for vehicle return */
.signature-pad.vehicle-return-sig {
  height: 280px;
  max-width: 640px;
  margin: 0 auto;
}

/* Large centered fuel percentage display */
.vehicle-return-fuel-display {
  margin: 24px 0 8px;
  text-align: center;
}

.vehicle-return-fuel-pct {
  font-size: 4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
  line-height: 1;
}

/* Wizard fade-out on submit (hides content before success screen) */
.wizard-dialog.is-submitting .wizard-content,
.wizard-dialog.is-submitting .wizard-actions,
.wizard-dialog.is-submitting .wizard-home,
.wizard-dialog.is-submitting .wizard-home--close {
  opacity: 0 !important;
  pointer-events: none;
}
/* Solid backdrop so nothing shows through while waiting for API */
.visitor-wizard .wizard-dialog.is-submitting {
  background: #f2f5f7;
}

/* Wider fuel slider for full-screen return step */
.vehicle-fuel-slider-wrap--return {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 0;
}

/* Mileage unit label below stepper */
.vehicle-mileage-unit {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wizard-muted, #64748b);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Vehicle Purpose Grid ───────────────────────── */
.vehicle-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 440px;
  margin: 0 auto;
  padding: 16px 0;
}

.vehicle-purpose-btn {
  padding: 24px 16px;
  border-radius: 16px;
  border: 2.5px solid transparent;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.vehicle-purpose-btn:active {
  transform: scale(0.97);
}
.vehicle-purpose-btn.is-selected {
  border-color: currentColor;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
  transform: scale(1.04);
}

/* 9 purpose colors — same palette as drill tags */
.purpose-color-0 { background: rgba(59,130,246,0.22);  color: #1d4ed8; }
.purpose-color-0.is-selected { background: rgba(59,130,246,0.38); }
.purpose-color-1 { background: rgba(34,197,94,0.22);   color: #15803d; }
.purpose-color-1.is-selected { background: rgba(34,197,94,0.38); }
.purpose-color-2 { background: rgba(251,146,60,0.22);  color: #c2410c; }
.purpose-color-2.is-selected { background: rgba(251,146,60,0.38); }
.purpose-color-3 { background: rgba(168,85,247,0.20);  color: #7c3aed; }
.purpose-color-3.is-selected { background: rgba(168,85,247,0.38); }
.purpose-color-4 { background: rgba(236,72,153,0.22);  color: #be185d; }
.purpose-color-4.is-selected { background: rgba(236,72,153,0.38); }
.purpose-color-5 { background: rgba(20,184,166,0.22);  color: #0f766e; }
.purpose-color-5.is-selected { background: rgba(20,184,166,0.38); }
.purpose-color-6 { background: rgba(239,68,68,0.22);   color: #b91c1c; }
.purpose-color-6.is-selected { background: rgba(239,68,68,0.38); }
.purpose-color-7 { background: rgba(250,204,21,0.22);  color: #a16207; }
.purpose-color-7.is-selected { background: rgba(250,204,21,0.38); }
.purpose-color-8 { background: rgba(148,163,184,0.22); color: #475569; }
.purpose-color-8.is-selected { background: rgba(148,163,184,0.38); }

/* Banner overlays on top - no content push */

/* ===========================================================
   Visitors screen — Visitors / Guests subtabs
   =========================================================== */
/* Section tabs. These live on LINE 2 OF THE IDENTITY BLOCK, not in a band of
   their own — the tab you're on is the page name, so a static page label above
   them said it twice and cost a row. Sized down accordingly: this is a
   sub-line, not a headline. */
/* Section tabs — underline, the same component the admin panel uses.
   They used to be a grey segmented pill, which put them in the exact same
   clothes as the two CONTROLS beside them (the view switch and the scope
   filter). Three identical pills, three different jobs, nothing telling you
   which was navigation. Underline separates navigation from controls without
   spending a single point of height. */
.board-subtabs {
  display: flex;
  gap: clamp(18px, 2vw, 26px);
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
  width: fit-content;
}
.board-subtabs[hidden] { display: none; }
.board-subtab {
  position: relative;
  /* Vertical padding IS the touch target — the drawn thing is just type.
     9px + 12px around a ~19px line box clears 44pt without a container. */
  padding: 9px 1px 12px;
  border: none;
  background: transparent;
  color: #647082;
  font-size: clamp(14px, 1.45vw, 16px);
  font-weight: 650;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.board-subtab.is-active {
  background: none;
  color: #0f172a;
  font-weight: 700;
  box-shadow: none;
}
.board-subtab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2.5px;
  background: var(--color-coral, #F9522E);
  border-radius: 2px;
}
.board-subtab__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  /* Coral only on the tab you are on. On the inactive tab a coral count
     shouts louder than the tab it belongs to. */
  background: #eef1f5;
  color: #3f4856;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.board-subtab.is-active .board-subtab__chip {
  background: #F9522E;
  color: #fff;
}

/* ── Guest board controls, in the identity header ──────────────────────────
   Search + view switch + scope filter, ALL on line 1 (founder 2026-08-18:
   one band). All of it static markup in index.html: only ever shown or
   hidden, never built or emptied. A shared slot that something else cleared
   is exactly how these disappeared before (8f8bcee9). */
.board-ident__acts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.board-ident__acts[hidden] { display: none; }

.board-scope {
  margin-left: auto;
  display: inline-flex;
  background: #eef1f5;
  border: 1px solid #dfe4ec;
  border-radius: 11px;
  padding: 3px;
  gap: 2px;
  flex: none;
}
.board-scope[hidden] { display: none; }
.board-scope button {
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: clamp(11.5px, 1.15vw, 12.5px);
  font-weight: 700;
  color: #3f4856;
  cursor: pointer;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.board-scope button.is-on {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}
/* Portrait: the tabs and the scope filter share 834pt. Give the filter room
   by tightening it rather than letting it push the tabs. */
@media (max-width: 900px) {
  .board-scope button { padding: 0 10px; }
}

/* Guest cards on the Guests tab */
#guest-container {
  /* Padding is .board-section's — deliberately NOT overridden. A flat 24px
     bottom left the last guest jammed against the floating nav, where crew has
     140px and its final card clears it. The horizontal values also carry the
     safe-area insets that a flat 24px threw away in landscape. */
  display: grid;
  gap: 12px;
}
.guest-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 22px;
}
.guest-card__name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.guest-card__name {
  font-weight: 600;
  color: #0f172a;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.guest-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e6f4f3;
  color: #0f6159;
  font-size: 12px;
  font-weight: 600;
}
.guest-card__meta {
  font-size: 14px;
  color: #475569;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guest-card__meta-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
}
.guest-card__meta-val { color: #0f172a; font-weight: 500; }
.guest-card__notes {
  font-size: 13px;
  color: #64748b;
  margin-top: 6px;
  line-height: 1.45;
}
/* guests_plus board - the crew board's swipe cards, so the only new CSS is the
   chrome around them. Everything below .crew-swipe-shell is shared.

   The board answers two different jobs. PARTIES is the processing view: a
   family walks up the passerelle together and boards in one gesture. A-Z is
   the finding view: one person turned up late. The switch is about which job
   you're doing, which is why the alphabet rail stays in both. */

/* ── the board's one control row ─────────────────────────────────────────
   Chips left, search and view switch RIGHT, and the whole thing folds. It
   lives inside #guest-container rather than the header: an earlier pass put
   the switch in the header, where leaving the Guests tab cleared it and
   nothing rebuilt it, so it vanished until a reload. A control belongs in the
   same subtree as the thing whose lifecycle owns it.
   See .claude/skills/screen-chrome. */
/* The board's own control row is gone: its chips, search, view switch and
   fold all moved into the identity header, so the guest board is now just
   the list. See .board-scope / .board-ident__acts above. */

/* Mode switch. Same component the header briefly used, now where it belongs. */
.board-seg {
  display: inline-flex;
  background: #eef1f5;
  border: 1px solid #dfe4ec;
  border-radius: 11px;
  padding: 3px;
  gap: 2px;
  flex: none;
}
.board-seg[hidden] { display: none; }
.board-seg button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #3f4856;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.board-seg button svg { width: 16px; height: 16px; display: block; flex: none; }
.board-seg button.is-on {
  background: #fff;
  color: #15203a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
/* Coral only on the active icon, so the mode reads before the word does. */
.board-seg button.is-on svg { color: #F9522E; }

/* Search: an icon until it's wanted. Opening it takes the switch's place so
   the row never grows a second line. */
.board-iconbtn {
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid #d8dde6;
  border-radius: 11px;
  background: #fff;
  color: #3f4856;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.board-iconbtn:active { background: #f1f5f9; }
.board-iconbtn.is-on { background: #15203a; border-color: #15203a; color: #fff; }

.board-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 13px;
  width: min(320px, 46vw);
  border: 1.5px solid #15203a;
  border-radius: 11px;
  background: #fff;
  color: #5a6573;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}
.board-search[hidden] { display: none; }
.board-search svg { flex: none; }
.board-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;          /* under 16px and iOS zooms the page on focus */
  font-weight: 500;
  color: #0f172a;
  -webkit-appearance: none;
}
.board-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Our own ✕ instead of the suppressed native one, because clearing also has
   to re-render the board — the native cancel wipes the field and nothing
   else. Hidden until there is something to wipe. */
.board-search__clear {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Weighty on purpose — ink on a solid disc, 3.2 stroke. The hairline ✕ is
     the old symbol language this app is walking away from. */
  background: #e2e8f0;
  color: #15203a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.board-search__clear[hidden] { display: none; }

/* ── counts + status chips ───────────────────────────────────────────── */
/* Quiet, and below the row: the chips already carry the numbers, so this is a
   restatement and must not compete with them. */


/* ── one toast for the whole board ───────────────────────────────────────
   A per-row message is invisible when the row you tapped has just been
   filtered off the screen by its own success. It FLOATS above the nav: the
   old in-flow banner opened at the top of the list and shoved every group
   down 60px at the exact moment your eyes were lined up on one. Fixed, so it
   moves nothing; pointer-events none, so it blocks nothing; it says its
   piece and gets out of the way. */
.guest-banner {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 10px);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.guest-banner.is-on { opacity: 1; transform: translate(-50%, 0); }
.guest-banner.is-ok  { background: #d7f4e3; color: #0b6b43; border: 1.5px solid currentColor; }
.guest-banner.is-bad { background: #fcdede; color: #b02525; border: 1.5px solid currentColor; }

/* ── list + rail ─────────────────────────────────────────────────────── */
/* The list scrolls with the PAGE, in #boardScroll, exactly like the crew
   board — it does not get a scroller of its own. A nested `max-height: 62vh`
   box ended the guest list in mid-air with dead space above the floating nav,
   while crew ran the full height and passed behind it. `.board-section`
   already carries the bottom padding that clears the nav, so the list only has
   to stop claiming a height. */
.guest-board__body { display: flex; align-items: flex-start; min-height: 0; gap: 2px; }
.guest-board__list {
  flex: 1;
  min-width: 0;
  padding-right: 2px;
  /* The cards are crew's swipe shells, but crew's 10px gap lives on
     .crew-section-list — a wrapper this list doesn't use. Same figure here or
     the shells sit flush. */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guest-letter {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--page-bg, #f4f3f1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #5a6573;
  padding: 8px 6px 4px;
}

/* Sticky, because the list it indexes is now the whole page. It has to stay
   on screen and thumb-reachable at every scroll position — a rail that scrolls
   away with the list is an index you can only use from the top.
   align-self is what makes sticky possible: stretched to the body's full
   height it would have nothing left to stick within. */
.guest-rail {
  flex: none;
  width: 32px;
  position: sticky;
  top: 8px;
  align-self: flex-start;
  /* Roughly the scrollport: the viewport less the header above and the
     floating nav below. The exact figure doesn't matter — the letters are
     centred inside it — it only has to stay clear of both. dvh second so iOS
     before 15.4, which doesn't know it, keeps the vh value. */
  height: calc(100vh - 300px);
  height: calc(100dvh - 300px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  padding: 6px 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;       /* the rail owns vertical drags on itself */
  cursor: pointer;
  z-index: 4;               /* above the sticky letter headings */
}
.guest-rail[hidden] { display: none; }
.guest-rail__letters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
}
.guest-rail b {
  width: 100%;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  color: #5a6573;
}
.guest-rail b.is-hot { color: #F9522E; }
/* Anchored to the RAIL, not to #guest-container. The container is now as tall
   as the whole guest list, so its 50% was somewhere hundreds of pixels down
   the page; the rail is the thing that stays on screen. */
.guest-railpop {
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: rgba(21, 32, 58, 0.92);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  pointer-events: none;
  z-index: 9;
}
.guest-railpop.is-on { display: flex; }
#guest-container { position: relative; }

/* ── party group ─────────────────────────────────────────────────────── */
.guest-grp {
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 15px;
  /* No margin: the list's own gap spaces the cards now — keeping 9px here
     stacked with it and gave group cards 19px where everything else gets 10. */
  overflow: hidden;
}
.guest-grp__h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-wrap: wrap;
}
.guest-grp__h:active { background: #fafbfc; }
.guest-grp__cv { display: flex; flex: none; align-items: center; }
.guest-grp__av {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-left: -10px;
  border: 2px solid #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex: none;
}
.guest-grp__av:first-child { margin-left: 0; }
.guest-grp__av i { font-style: normal; }
.guest-grp__av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guest-grp__more {
  margin-left: -10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #e2e8f0;
  color: #3f4856;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex: none;
}
/* Band title, both boards (crew departments AND guest parties — founder
   08-17: name first "keeps them the same"). Fixed column so every band's
   avatar stack starts at the same x; single line, vertically centred — no
   sub-line, the ring on the right carries the headcount. */
.guest-grp__nm {
  width: 170px;
  flex: none;
  font-size: 16.5px;
  font-weight: 750;
  color: #15203a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* With the title a fixed column, nothing in the row grows — the pill's auto
   margin is what pushes the status cluster (ring, then any actions, then the
   chevron) to the band's right edge. */
.guest-grp__h .guest-grp__pill { margin-left: auto; }
/* STATUS. Reports, never commands. The ring IS the status now: it already
   draws the proportion aboard, so the words were repeating it — and a 182px
   pill was rent the iPad row can't afford. Full green ring = all on board,
   empty grey = all ashore; the mixed state keeps a bare count, the one thing
   colour can't say. No box at all, so nothing here reads tappable. The full
   sentence lives on in the aria-label. (Admin keeps its worded pill — a
   desktop table row has the width.) */
.guest-grp__pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 750;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The ring takes the pill's own colour, so the graphic can never disagree
   with the count beside it. */
.guest-grp__ring { width: 30px; height: 30px; flex: none; display: block; }
.guest-grp__pill.is-ok   { color: #0b6b43; }
.guest-grp__pill.is-off  { color: #5a6573; }
.guest-grp__pill.is-part { color: #8a4a07; }

/* ACTION. Commands, never reports. Solid fill, verb-first label, and it always
   names the number it is about to move. Deliberately nothing like the pill
   beside it — an earlier version said "ALL ASHORE" here, which read as a state
   and contradicted the status next to it. */
.guest-grp__acts { flex: none; display: inline-flex; gap: 8px; }
/* The width only holds steady for a LONE button, so the header doesn't jump
   as its label flips. Two buttons size to their own labels or they'd eat the
   row. */
.guest-grp__acts .guest-grp__bulk:only-child { min-width: 192px; }
.guest-grp__bulk {
  flex: none;
  justify-content: flex-start;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  background: #F9522E;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.guest-grp__bulk.is-out { background: #15203a; }
/* Mixed party: Board keeps the fill, the ashore move sits quiet beside it —
   two solid buttons on one row is two things shouting. Alone (everyone
   aboard) it keeps the solid navy it has always had. */
.guest-grp__bulk.is-quiet {
  background: #fff;
  color: #15203a;
  border: 1px solid #dfe4ec;
  box-shadow: none;
}
.guest-grp__bulk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.guest-grp__bulk svg { width: 16px; height: 16px; flex: none; display: block; }
.guest-grp__bulk:disabled { opacity: 0.5; }
.guest-grp__k { flex: none; color: #b6bdc9; transition: transform 0.15s; display: flex; }
.guest-grp.is-open .guest-grp__k { transform: rotate(90deg); }
.guest-grp__b { display: none; border-top: 1px solid #f0f2f6; padding: 8px 10px 10px; background: #fbfcfd; }
/* Same 10px the shells get everywhere else — an open group is a list too. */
.guest-grp.is-open .guest-grp__b { display: flex; flex-direction: column; gap: 10px; }

/* ── VIP / Guests sections (2026-09-23) ──────────────────────────────── */
/* Parties view only, and only while a VIP is in view. The section is a card
   whose header is a party header for the whole section (ring, Board /
   Send ashore); the party cards sit in a well beneath it — the admin board's
   shape. Mock: design-mocks/guests/ipad-vip-sections.html. */
.guest-sec {
  background: #fff;
  border: 1px solid #dde2ea;
  border-radius: 17px;
  overflow: hidden;
  flex: none;
}
.guest-sec__h {
  display: grid;
  grid-template-columns: var(--gp-cols);
  align-items: center;
  gap: 12px;
  /* 15px like a party header, + the well's 10px padding + a card's 1px
     border, so every column lands on the same x as the rows beneath. */
  padding: 11px 26px;
  border-bottom: 1px solid #e8ecf2;
}
.guest-sec__lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* The header folds the section (09-23): chevron down when open, right when
   folded — the party card's own chevron, same column. */
.guest-sec__h { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.guest-sec__h:active { background: #fafbfc; }
.guest-sec:not(.is-shut) > .guest-sec__h .guest-grp__k { transform: rotate(90deg); }
.guest-sec.is-shut > .guest-sec__h { border-bottom: 0; }
.guest-sec.is-shut > .guest-sec__well { display: none; }
.guest-sec__ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: #eef1f5;
  color: #3f4856;
}
.guest-sec__ic svg { width: 19px; height: 19px; display: block; }
.guest-sec--vip .guest-sec__ic { background: #fffbeb; border: 1px solid #e5c15a; }
.guest-sec__t { font-size: 18px; font-weight: 800; color: #15203a; letter-spacing: -0.01em; }
.guest-sec__well {
  background: #f2f5f9;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Letter headings stick inside the Guests well — they wear its ground. */
.guest-sec__well .guest-letter { background: #f2f5f9; }

/* ── party rows: fixed columns, buttons only on the open party (09-23) ──
   Founder: the Send ashore buttons didn't line up, and with a dozen parties
   the board was "a WASH of buttons". Every party header and section header
   shares one set of tracks — name · faces · status · buttons · chevron — so
   the ring and both buttons sit at the same x all the way down. A CLOSED
   party keeps its button column but hides the buttons: the row is a status
   line. Open it (the tap the board already had) and its Board / Send ashore
   appear, above the people they move. Section headers always show theirs.
   Guest board only — the crew board's department bands share .guest-grp.
   Mock: design-mocks/guests/ipad-party-actions.html, option 2. */
#guest-container {
  --gp-cols: 170px minmax(0, 1fr) 112px 300px 20px;
}
#guest-container .guest-grp__h {
  display: grid;
  grid-template-columns: var(--gp-cols);
  gap: 12px;
  min-height: 58px;
  padding: 10px 15px;
}
#guest-container .guest-grp__cv { min-width: 0; overflow: hidden; }
#guest-container .guest-grp__h .guest-grp__pill,
#guest-container .guest-sec__h .guest-grp__pill { margin-left: 0; }
#guest-container .guest-grp__pill { font-size: 14px; }
#guest-container .guest-grp__ring { width: 28px; height: 28px; }
/* Empty = nobody aboard: the faint track alone, a touch stronger so it
   still reads as a ring on white. */
#guest-container .guest-grp__pill.is-off .guest-grp__ring circle:first-child { opacity: 0.4; }
#guest-container .guest-grp__acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#guest-container .guest-grp__acts .guest-grp__bulk {
  min-width: 0;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}
#guest-container .guest-grp:not(.is-open) > .guest-grp__h .guest-grp__acts { visibility: hidden; }
#guest-container .guest-grp.is-open {
  border-color: #c9d2dd;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
#guest-container .guest-grp__k { justify-content: center; }

/* Narrow (a mini in portrait): the faces go, the rest tightens. */
@media (max-width: 900px) {
  #guest-container { --gp-cols: 140px minmax(0, 1fr) 104px 272px 18px; }
  #guest-container .guest-grp__cv { visibility: hidden; }
  #guest-container .guest-grp__acts .guest-grp__bulk { padding: 0 9px; font-size: 12.5px; }
}

/* The gold star — the same one admin and Muster Mate use. On a row it sits
   after the name (A–Z view, and a VIP in an unsectioned list). */
.guest-vip-star { fill: #f6d365; stroke: #b7791f; stroke-width: 1.8; stroke-linejoin: round; }
.crew-name .guest-vip-star {
  width: 17px;
  height: 17px;
  margin-left: 7px;
  vertical-align: -2px;
  display: inline-block;
}

.guest-empty {
  padding: 60px 32px;
  text-align: center;
}
.guest-empty__title {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}
.guest-empty__body {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  max-width: 420px;
  margin: 0 auto;
}

/* ============================================================
   Checklists — iPad runner (Phase 1A)
   Self-contained styles. All selectors prefixed .checklist- so
   nothing leaks into other screens.
   ============================================================ */
.checklist-board { padding: 18px 20px 100px; }
.checklist-view { display: block; }
.checklist-view.hidden { display: none; }

.checklist-breadcrumb {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  font-size: 0.92rem; color: #64748b;
}
.checklist-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; cursor: pointer;
  color: #475569; font-size: 0.95rem; font-weight: 500;
  padding: 8px 4px; border-radius: 8px;
}
.checklist-back-btn:hover { color: #0f172a; }
.checklist-breadcrumb__folder { font-weight: 600; color: #0f172a; }

.checklist-list { display: flex; flex-direction: column; gap: 10px; }
.checklist-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 16px 18px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
  font-family: inherit;
}
.checklist-row:hover { border-color: #cbd5e1; background: #f8fafc; }
.checklist-row:active { transform: scale(0.995); }
.checklist-row__icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
}
.checklist-row__icon--folder { background: #fef3c7; color: #b45309; }
.checklist-row__icon--template { background: #dcfce7; color: #15803d; }
.checklist-row__body { flex: 1; min-width: 0; }
.checklist-row__title { font-weight: 600; font-size: 1rem; color: #0f172a; }
.checklist-row__meta { font-size: 0.84rem; color: #64748b; margin-top: 2px; }
.checklist-row__chevron { color: #94a3b8; flex-shrink: 0; }
/* This iPad's favourite star, on the row before the chevron. 44px hit area. */
.checklist-row__star { width: 44px; height: 44px; margin: -6px 0; display: grid; place-items: center; border-radius: 10px; color: #cbd5e1; flex-shrink: 0; }
.checklist-row__star svg { fill: none; }
.checklist-row__star.is-on { color: #f59e0b; }
.checklist-row__star.is-on svg { fill: currentColor; }
.checklist-row__star:active { background: #f1f5f9; }

.checklist-empty {
  text-align: center; padding: 60px 20px;
  display: flex; flex-direction: column; align-items: center;
}

/* Run view */
/* Run-view header is positioned: Back pinned top-left, title block
   centred horizontally on the page. Looks balanced regardless of
   how short or long the title is. */
/* Run header — chevron close + eyebrow + title (mirrors Muster Mate). The
   description moves to an "About this checklist" pill in the body. */
.checklist-run__header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 56px; margin-bottom: 0; }
.checklist-run__close { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 13px; border: 1.5px solid #cbd5e1; background: #fff; color: #0f172a; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,0.06); }
.checklist-run__close:active { background: #f1f5f9; }
.checklist-run__close svg { width: 26px; height: 26px; }
.checklist-run__head-text { min-width: 0; text-align: center; }
/* padding:0 undoes the global `h2 { padding: 20px }` — it was putting 40px of
   dead space into the run header (and 20px each side into the title's own
   width) on every checklist. The rule already says margin:0, so the padding
   was never meant to be there. Part of "the bit above the progress bar is quite
   large" (founder 2026-08-07). */
.checklist-run__title { font-size: 1.3rem; font-weight: 700; color: #0f172a; margin: 0; padding: 0; text-align: center; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sticky-feel progress strip below the header. */
/* Sticky (founder-approved mock 2026-08-05): the view segment + progress pin
   to the top, the current section's band pins beneath — so mid-scroll you
   always see where you are. The band doubles as the section grabber. */
.checklist-run__progband {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0 10px; margin-bottom: 0;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: var(--color-bg);
  box-shadow: 0 8px 14px -10px rgba(15,23,42,0.18);
}
/* The app draws under the status bar (viewport-fit=cover), so the safe-area
   strip behind the clock needs to stay opaque or scrolled items ghost through
   it. FIXED to the top of the viewport, which is the only thing it is ever
   meant to cover.
   It used to be `absolute; bottom: 100%` — a strip one safe-area tall sitting
   directly ABOVE the band, wherever the band happened to be. Unpinned, that is
   on top of the header, so it painted over the bottom of the title, the Back
   button and the faces (founder's iPad, 2026-08-07: "the progress bar is
   cutting off everything on top of it"). It was always wrong; it only became
   visible when the header lost its stray 40px of heading padding. A headless
   browser reports every safe-area inset as 0, which is why no check caught it —
   the test now emulates a real inset. */
.checklist-run__progband::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0;
  height: env(safe-area-inset-top, 0px); background: var(--color-bg);
}
/* Sticky rides the WRAPPER (older iPad WebKit won't stick a <button>). */
.checklist-sec__pin {
  position: sticky; z-index: 50;
  top: calc(env(safe-area-inset-top, 0px) + 52 * var(--chk-u));
}
/* A jumped-to section settles below the pinned bars, not under them. */
.checklist-sec { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 100 * var(--chk-u)); }

/* ── Section grabber — tap the pinned band, jump anywhere ── */
.checklist-secnav { position: fixed; inset: 0; z-index: 3000; }
.checklist-secnav__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.38); }
.checklist-secnav__panel {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 88 * var(--chk-u));
  width: min(calc(500 * var(--chk-u)), 90vw);
  background: #fff; border-radius: calc(16 * var(--chk-u));
  box-shadow: 0 24px 60px rgba(15,23,42,0.3); overflow: hidden;
}
.checklist-secnav__title {
  padding: calc(14 * var(--chk-u)) calc(20 * var(--chk-u)) calc(10 * var(--chk-u));
  font-size: calc(12 * var(--chk-u)); font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: #5a6573;
}
.checklist-secnav__row {
  display: flex; align-items: center; gap: calc(12 * var(--chk-u)); width: 100%;
  padding: calc(13 * var(--chk-u)) calc(14 * var(--chk-u)) calc(13 * var(--chk-u)) calc(20 * var(--chk-u));
  border: none; border-top: 1px solid #eef1f5; background: #fff;
  font-family: inherit; text-align: left; cursor: pointer;
}
.checklist-secnav__row.is-current { background: #f6f8fb; }
.checklist-secnav__row:active { background: #eef1f5; }
.checklist-secnav__n {
  flex: none; width: calc(27 * var(--chk-u)); height: calc(27 * var(--chk-u));
  border-radius: calc(8 * var(--chk-u)); background: #eef1f5; color: #5a6573;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(13.5 * var(--chk-u));
}
.checklist-secnav__row.is-current .checklist-secnav__n { background: #0F172A; color: #fff; }
.checklist-secnav__name {
  flex: 1; min-width: 0; font-weight: 650; color: #15203a; font-size: calc(16 * var(--chk-u));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.checklist-secnav__here {
  margin-left: calc(8 * var(--chk-u)); font-size: calc(10.5 * var(--chk-u)); font-weight: 800;
  color: #F9522E; letter-spacing: 0.04em; text-transform: uppercase;
}
.checklist-secnav__count {
  flex: none; font-variant-numeric: tabular-nums; color: #5a6573;
  font-weight: 700; font-size: calc(14 * var(--chk-u));
}
/* Collapse lives IN the sheet now (the band tap opens the grabber instead). */
.checklist-secnav__fold {
  flex: none; width: calc(38 * var(--chk-u)); height: calc(34 * var(--chk-u));
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d7dee8; border-radius: calc(8 * var(--chk-u));
  background: #fff; cursor: pointer;
}
.checklist-secnav__fold svg { width: calc(15 * var(--chk-u)); height: calc(15 * var(--chk-u)); transition: transform 160ms; }
.checklist-secnav__fold.is-folded svg { transform: rotate(-90deg); }
.checklist-run__prog { flex: 1; height: 6px; border-radius: 999px; background: #e8edf3; overflow: hidden; }
.checklist-run__prog i { display: block; height: 100%; width: 0%; background: #F9522E; border-radius: 999px; transition: width .2s; }
.checklist-run__prognum { flex: none; font-size: 0.78rem; font-weight: 700; color: #64748b; font-variant-numeric: tabular-nums; }

/* "About this checklist" pill — collapsed by default (long descriptions
   shouldn't bury the items). */
/* ── Who's in a shared round ────────────────────────────────────────────
   An overlapping avatar stack in the header's top-right — the same face
   language as the shared row in the list, green ring = signed. It was a
   face-and-name row of its own under the title, which read well but cost the
   header ~80px on every shared round and pushed the progress bar and the first
   item down with it (founder 2026-08-07). The names are one tap away, in the
   sheet below. A DEPARTMENT nobody has picked up yet has no face, so it wears
   its short label on a neutral chip ("ENG") until someone signs. */
.checklist-who {
  /* top+bottom, not a fixed height: the faces then centre on whatever the
     header's own height turns out to be. */
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; padding: 0;
  border: none; background: none; font-family: inherit; cursor: pointer;
}
.checklist-who.hidden { display: none; }
.checklist-who:active { opacity: 0.62; }
/* Room on the right so a long title can't run under the faces. Set from JS,
   because how much room the stack needs depends on how many faces it has. */
.checklist-run__header.has-who { padding-right: var(--chk-who-w, 116px); }
.checklist-who .checklist-av {
  width: 34px; height: 34px; margin-left: -10px;
  border-width: 2px; font-size: 0.72rem;
}
.checklist-who .checklist-av:first-child { margin-left: 0; }
/* More faces than the stack shows — the rest are named in the sheet. */
.checklist-who__more {
  margin-left: -10px; min-width: 34px; height: 34px; padding: 0 5px;
  border-radius: 999px; border: 2px solid #fff; background: #4a5563; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; flex: none;
}
.checklist-who__av { position: relative; display: inline-flex; flex: none; }
/* Typography only — the colour comes from the palette, inline, like a person's.
   This used to also set a pale grey background and dark text, which on glass at
   arm's length read as an empty circle. */
.checklist-av--dept { font-size: calc(12 * var(--chk-u)); letter-spacing: 0.04em; }

/* The sheet behind the stack: everyone on the round, named, with who has
   signed. Same panel as "Jump to a section" — it's the same kind of sheet. */
/* Drops from the stack it belongs to, so it reads as the faces' own panel
   rather than a page-level dialog. */
.checklist-whosheet .checklist-secnav__panel {
  width: min(calc(400 * var(--chk-u)), 88vw);
  left: auto; right: calc(20 * var(--chk-u)); transform: none;
  top: calc(env(safe-area-inset-top, 0px) + 70 * var(--chk-u));
}
.checklist-whorow {
  display: flex; align-items: center; gap: calc(12 * var(--chk-u));
  padding: calc(12 * var(--chk-u)) calc(16 * var(--chk-u));
  border-top: 1px solid #eef1f5;
}
.checklist-whosheet .checklist-av {
  width: calc(36 * var(--chk-u)); height: calc(36 * var(--chk-u));
  margin-left: 0; border-width: calc(2 * var(--chk-u)); font-size: calc(13 * var(--chk-u));
}
.checklist-whosheet .checklist-tick {
  width: calc(15 * var(--chk-u)); height: calc(15 * var(--chk-u));
  border-width: calc(2 * var(--chk-u));
}
.checklist-whorow__t { display: block; flex: 1; min-width: 0; }
.checklist-whorow__n {
  display: block;
  font-size: calc(15.5 * var(--chk-u)); font-weight: 650; color: #15203a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.checklist-whorow__s {
  display: block;
  font-size: calc(13 * var(--chk-u)); font-weight: 650; color: #8592a3;
  margin-top: calc(2 * var(--chk-u));
}
.checklist-whorow.is-signed .checklist-whorow__s { color: #0b6b43; }
.checklist-whorow__you {
  flex: none; padding: calc(3 * var(--chk-u)) calc(9 * var(--chk-u));
  border-radius: 999px; background: #eef1f5; color: #3f4856;
  font-size: calc(11.5 * var(--chk-u)); font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* The tick rides the face, bottom-right. Same badge on a person and on an
   item, because it means the same thing on both: that one is done. */
.checklist-tick {
  position: absolute; right: calc(-2 * var(--chk-u)); bottom: calc(-2 * var(--chk-u));
  width: calc(18 * var(--chk-u)); height: calc(18 * var(--chk-u));
  border-radius: 50%; background: #16a34a; color: #fff;
  border: calc(2 * var(--chk-u)) solid #fff;
  display: grid; place-items: center;
}
.checklist-tick svg { width: 62%; height: 62%; }

/* Shared round: an answered item wears the face of whoever answered it. */
.checklist-item__by {
  display: flex; align-items: center; justify-content: center;
  gap: calc(8 * var(--chk-u)); margin-top: calc(9 * var(--chk-u));
}
.checklist-item__by .checklist-av {
  width: calc(26 * var(--chk-u)); height: calc(26 * var(--chk-u));
  margin-left: 0; border-width: calc(1.5 * var(--chk-u)); font-size: calc(9.5 * var(--chk-u));
}
.checklist-item__by .checklist-tick {
  width: calc(12 * var(--chk-u)); height: calc(12 * var(--chk-u));
  border-width: calc(1.5 * var(--chk-u));
  right: calc(-3 * var(--chk-u)); bottom: calc(-3 * var(--chk-u));
}
.checklist-item__by-n { font-size: calc(13 * var(--chk-u)); font-weight: 650; color: #0b6b43; }

/* Compact cells wear the same face+tick, smaller and inline after the label. */
.checklist-who__av--cell {
  vertical-align: middle;
  margin-left: calc(7 * var(--chk-u));
}
.checklist-who__av--cell .checklist-av {
  width: calc(21 * var(--chk-u)); height: calc(21 * var(--chk-u));
  margin-left: 0; border-width: calc(1.5 * var(--chk-u)); font-size: calc(8 * var(--chk-u));
}
.checklist-who__av--cell .checklist-tick {
  width: calc(10.5 * var(--chk-u)); height: calc(10.5 * var(--chk-u));
  border-width: calc(1.5 * var(--chk-u));
  right: calc(-3 * var(--chk-u)); bottom: calc(-3 * var(--chk-u));
}

/* Transient message for the run view (e.g. tapping a locked answer). */
.checklist-toast {
  position: fixed; left: 50%; bottom: calc(30 * var(--chk-u, 1px) + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 10px);
  background: #0f172a; color: #fff;
  font-size: calc(14 * var(--chk-u, 1px)); font-weight: 600;
  padding: calc(11 * var(--chk-u, 1px)) calc(18 * var(--chk-u, 1px));
  border-radius: 999px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
  max-width: min(560px, 86vw); text-align: center;
  opacity: 0; pointer-events: none; z-index: 4000;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.checklist-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Faces of everyone on a shared round — you should see it's shared before
   you read a word. A green ring means that one has signed. */
.checklist-avstack { display: flex; align-items: center; flex: none; }
.checklist-av {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff;
  margin-left: -10px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.74rem; font-weight: 700; flex: none;
  position: relative; overflow: hidden;
}
.checklist-avstack .checklist-av:first-child { margin-left: 0; }
.checklist-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.checklist-av.is-signed { box-shadow: 0 0 0 2px #10b981; }
.checklist-row--shared .checklist-row__body { margin-left: 12px; }
.checklist-row__join {
  margin-left: auto; height: 30px; padding: 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center;
  background: #d7f4e3; color: #0b6b43; border: 1.5px solid currentColor;
  font-size: 0.82rem; font-weight: 700;
}
.checklist-list-section--shared { color: #0b6b43; }

/* ── Join a shared round: who are you? ──────────────────────────────────
   Read at arm's length on a bulkhead mount, so faces and big targets — a
   column of thin rows with a radio circle on the end is a phone pattern. */
.checklist-join-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.checklist-join-modal.hidden { display: none; }
.checklist-join-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.44); }
.checklist-join-modal__panel {
  position: relative; width: min(760px, 92vw); max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 22px; box-shadow: 0 24px 70px rgba(15,23,42,.28);
}
.checklist-join__head { display: flex; align-items: flex-start; gap: 16px; padding: 24px 26px 18px; border-bottom: 1px solid #eef2f6; }
.checklist-join__title { margin: 0; font-size: 1.32rem; font-weight: 650; letter-spacing: -0.022em; color: #0F172A; }
.checklist-join__sub { margin: 5px 0 0; font-size: 0.95rem; color: #5a6573; line-height: 1.45; }
.checklist-join__x {
  margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid #c9d2dd; background: #fff; color: #3f4856; font-size: 1.2rem; line-height: 1;
}
.checklist-join__body { padding: 18px 26px 24px; overflow-y: auto; }
.checklist-join__ctx { display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: #f8fafc; border-radius: 14px; margin-bottom: 20px; }
.checklist-join__ctx-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checklist-join__ctx-nm { font-size: 1rem; font-weight: 650; color: #0F172A; }
.checklist-join__ctx-sub { font-size: 0.85rem; color: #5a6573; }
.checklist-join__sect + .checklist-join__sect { margin-top: 22px; }
.checklist-join__lbl { display: block; margin-bottom: 11px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #3f4856; }
.checklist-join__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.checklist-person {
  display: flex; align-items: center; gap: 13px; text-align: left; min-height: 72px;
  background: #fff; border: 1.5px solid #dfe5ec; border-radius: 16px; padding: 13px 15px;
  font-family: inherit; transition: border-color .12s, background .12s, transform .12s;
}
.checklist-person:hover { border-color: #9aa7b8; background: #f8fafc; }
.checklist-person:active { transform: scale(.985); }
.checklist-person__av {
  width: 46px; height: 46px; border-radius: 50%; flex: none; overflow: hidden; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.94rem; font-weight: 700;
}
.checklist-person__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.checklist-person__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checklist-person__nm { font-size: 1rem; font-weight: 650; color: #15203a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checklist-person__role { font-size: 0.84rem; color: #5a6573; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Already signed: still listed — a face missing from the grid reads as a bug. */
.checklist-person.is-signed { background: #f6faf8; border-color: #bfe6d2; }
.checklist-person.is-signed .checklist-person__role { color: #0b6b43; font-weight: 650; }
.checklist-join__foot { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid #eef2f6; font-size: 0.86rem; color: #5a6573; line-height: 1.5; }
.checklist-join__foot b { color: #0F172A; font-weight: 650; }
.checklist-join__empty { padding: 20px; text-align: center; color: #5a6573; font-size: 0.9rem; }
.checklist-about { background: #fff; border: 1px solid #e6eaf0; border-radius: 13px; overflow: hidden; margin-bottom: 12px; }
.checklist-about__hd { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 13px; border: none; background: transparent; font-family: inherit; cursor: pointer; text-align: left; }
.checklist-about__hd:active { background: #f8fafc; }
.checklist-about__i { display: inline-flex; color: #1A3A5C; flex: none; }
.checklist-about__lbl { flex: 1; font-size: 0.9rem; font-weight: 700; color: #1f2a3a; }
.checklist-about__chev { color: #94a3b8; flex: none; transition: transform 160ms; }
.checklist-about.is-open .checklist-about__chev { transform: rotate(180deg); }
.checklist-about__tx { display: none; padding: 0 13px 12px; font-size: 0.88rem; line-height: 1.5; color: #475569; white-space: pre-wrap; }
.checklist-about.is-open .checklist-about__tx { display: block; }

/* ── The runner's design scale ──────────────────────────────────────────
   Everything from here down through the question card is sized as
   calc(<reference px> * var(--chk-u)), so the whole runner scales as ONE
   proportional unit and reads identically on a mini and on a 13". Same
   --ui-unit formula as .welcome-screen (see the comment at the top of this
   file) — reference design 1024x768 landscape, re-anchored in portrait.
   Portrait is gated on body.app-portrait, NOT @media (orientation:), which
   does not match in this iPad WKWebView.

   --chk-u carries a deliberate +10% over the panel's reference numbers
   (founder, 2026-07-29): a runner is read at arm's length on a mounted iPad,
   a panel is read on a laptop a foot away. One knob, so the card spec below
   stays readable as the panel's own numbers. */
/* Fallback first: an undefined --chk-u makes every calc() below invalid, which
   silently drops the property rather than falling back to something sane. At
   1px the reference numbers just render as plain px. */
:root { --chk-u: 1px; }
.checklist-board {
  --ui-unit: min(calc(100vw / 1024), calc(100vh / 768));
  --chk-u: calc(1.1 * var(--ui-unit));
}
body.app-portrait .checklist-board {
  --ui-unit: min(calc(100vw / 768), calc(100vh / 1024));
}
/* A reading column. Landscape on a 13" is 1366pt; left full-bleed, one question
   line runs past 130 characters and Pass/N/A/Fail become three enormous
   buttons. Scales on --ui-unit, not --chk-u: the column is a fraction of the
   SCREEN, while the +10% applies to the type inside it. That's the pair that
   was signed off. */
#checklist-run-view { max-width: calc(860 * var(--ui-unit)); margin-inline: auto; }

/* Section bands — ink band, chevron left, count right, name centred ON THE
   BAND (not in the gap between them, which lands it visibly off-axis). */
.checklist-sec { margin: calc(12 * var(--chk-u)) 0; }
.checklist-sec:first-child { margin-top: 2px; }
.checklist-sec__band { position: relative; width: 100%; display: flex; align-items: center; gap: calc(10 * var(--chk-u)); padding: calc(13 * var(--chk-u)) calc(16 * var(--chk-u)); border: none; border-radius: calc(11 * var(--chk-u)); cursor: pointer; background: #0F172A; color: #fff; text-align: left; font-family: inherit; }
.checklist-sec__chev { flex: none; transition: transform 180ms; width: calc(18 * var(--chk-u)); height: calc(18 * var(--chk-u)); }
.checklist-sec.is-collapsed .checklist-sec__chev { transform: rotate(-90deg); }
.checklist-sec__name {
  position: absolute; left: 0; right: 0; padding: 0 calc(76 * var(--chk-u));
  text-align: center; pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(13.4 * var(--chk-u)); font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.checklist-sec__count { margin-left: auto; flex: none; font-size: calc(12.6 * var(--chk-u)); font-weight: 700; color: rgba(255,255,255,0.78); font-variant-numeric: tabular-nums; }
.checklist-sec__items { display: flex; flex-direction: column; gap: calc(12 * var(--chk-u)); padding: calc(12 * var(--chk-u)) 0 2px; }
.checklist-sec.is-collapsed .checklist-sec__items { display: none; }

.checklist-items { display: flex; flex-direction: column; gap: calc(12 * var(--chk-u)); padding-bottom: 100px; }
.checklist-list-section {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #64748b;
  padding: 4px 2px; margin: 16px 2px 8px;
}
.checklist-list-section:first-child { margin-top: 2px; }
.checklist-list-section svg { color: #f59e0b; flex-shrink: 0; }
.checklist-list-section--plain svg { display: none; }
/* In-progress ("waiting to finish") group at the top of the checklist list */
.checklist-list-section--progress { color: #F9522E; }
.checklist-list-section--progress svg { color: #F9522E; }
.checklist-row--progress { border-color: #f6c6ba; }
.checklist-row--progress:hover { border-color: #f0a48f; background: #fff7f4; }
.checklist-row__icon--progress { background: #FEEDE8; color: #F9522E; }
.checklist-progress { height: 5px; border-radius: 999px; background: #eef2f6; overflow: hidden; margin-top: 8px; max-width: 360px; }
.checklist-progress__bar { display: block; height: 100%; border-radius: 999px; background: #F9522E; min-width: 5px; }
.checklist-row__resume {
  flex-shrink: 0; align-self: center;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em;
  color: #fff; background: #F9522E;
  padding: 7px 14px; border-radius: 999px;
}
.checklist-section {
  font-size: 0.82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: #64748b;
  padding: 6px 2px;
  margin: 18px 0 2px;
  border-bottom: 2px solid #e2e8f0;
}
.checklist-run-items > .checklist-section:first-child { margin-top: 0; }
/* ── The question card — founder-locked 2026-07-28, ported from the panel ──
   Two ideas carry it. CONTRAST BEATS WIDTH: the old 1.5px #e2e8f0 was a
   THICKER line than SafetyCulture's 1px #BFC6D4 and still read lighter,
   because a pale thick line goes fuzzy while a darker thin one stays crisp.
   #94A3B8 now, and the SAME colour on the card, the answer buttons, the value
   inputs and the note field, so the card reads as one object.
   CORAL IS THE RUNNER'S INTERACTIVE COLOUR: answers at rest and the action row
   share it, so everything you can touch on a white card is one colour. This is
   a deliberate SCOPED exception to "coral is rare" — a runner is one screen
   with one job. It must not leak to the rest of the app. */
.checklist-item {
  background: #fff; border: 1.5px solid #94A3B8; border-radius: calc(12 * var(--chk-u));
  padding: calc(20 * var(--chk-u));
  box-shadow: 0 2px 6px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.05);
  transition: border-color 120ms;
}
.checklist-item--crit { border-color: #f6a9a9; }
.checklist-item[data-status="passed"] { border-color: #86e0b4; background: #f8fdfa; }
.checklist-item[data-status="na"] { border-color: #94A3B8; background: #f8fafc; }
.checklist-item[data-status="failed"] { border-color: #f6a9a9; background: #fffafa; }
/* Item is answered but a required photo hasn't been attached — block submit
   and tell the user. Border + bottom flag pill make it impossible to miss. */
.checklist-item.needs-photo {
  border-color: #fbbf24;
  background: #fffbeb;
}
.checklist-item__flag {
  margin: calc(12 * var(--chk-u)) 0 0;
  padding: calc(8 * var(--chk-u)) calc(12 * var(--chk-u));
  background: #fef3c7;
  color: #92400e;
  border-radius: calc(8 * var(--chk-u));
  font-size: calc(14 * var(--chk-u));
  font-weight: 500;
  text-align: center;
}

/* Direction A — stacked card. Head = number + inline label (normal items) or
   a "Critical" tag (critical items, whose label drops to a full-width block
   below). Guidance/controls are full-width rows below the label.
   Centred (founder, 2026-07-29): the number travels WITH the text as one unit,
   otherwise it pins left and the pair reads as a centred line knocked askew. */
.checklist-item__head {
  display: flex; align-items: center; justify-content: center;
  gap: calc(9 * var(--chk-u)); margin-bottom: calc(9 * var(--chk-u));
}
.checklist-item__num {
  font-variant-numeric: tabular-nums;
  font-size: calc(15 * var(--chk-u)); color: #9aa7b8; font-weight: 700;
  flex-shrink: 0;
}
/* Full view: the anchored red flag beside the number (founder-picked
   2026-08-05 — replaces the CRITICAL pill, which trailed the text). */
/* "Required" pill ahead of the question — the item has to be answered by a
   person; it cannot be marked N/A or struck through at submit. */
.checklist-item__req {
  display: inline-block; vertical-align: middle;
  font-size: calc(10.5 * var(--chk-u)); font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; line-height: calc(15 * var(--chk-u));
  padding: calc(2 * var(--chk-u)) calc(6 * var(--chk-u));
  border-radius: calc(5 * var(--chk-u));
  background: #0F172A; color: #fff;
  margin-right: calc(8 * var(--chk-u));
  position: relative; top: calc(-1 * var(--chk-u));
}
/* Brief coral ring when the review step sends you to an item. */
.checklist-item.is-jumped,
.checklist-trow.is-jumped > td { box-shadow: inset 0 0 0 2px #F9522E; transition: box-shadow 200ms; }
.checklist-item__crit-flag { display: inline-flex; color: #dc2626; flex-shrink: 0; }
.checklist-item__crit-flag svg { width: calc(17 * var(--chk-u)); height: calc(17 * var(--chk-u)); }
.checklist-item__crit-tag {
  display: inline-flex; align-items: center; gap: calc(5 * var(--chk-u));
  height: calc(21 * var(--chk-u));
  font-size: calc(10.4 * var(--chk-u)); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b02525; background: #fcdede; border: 1.5px solid currentColor;
  padding: 0 calc(8 * var(--chk-u)); border-radius: 999px;
}
.checklist-item__crit-dot {
  width: calc(6 * var(--chk-u)); height: calc(6 * var(--chk-u)); border-radius: 50%;
  background: currentColor; display: inline-block; flex-shrink: 0;
}
.checklist-item__label {
  display: block; text-align: center;
  font-size: calc(17 * var(--chk-u)); font-weight: 600; color: #1F2533;
  line-height: calc(25 * var(--chk-u)); letter-spacing: calc(-0.25 * var(--chk-u));
}
.checklist-item__head > .checklist-item__label { flex: 0 1 auto; min-width: 0; }
.checklist-item__head + .checklist-item__label { margin-top: 0; }
.checklist-item__helper {
  text-align: center;
  font-size: calc(14.5 * var(--chk-u)); font-weight: 400; color: #5a6573;
  margin-top: calc(7 * var(--chk-u)); line-height: calc(21 * var(--chk-u));
}

/* Clamp + "Show guidance/more" toggle for long label or guidance text */
.checklist-clamp {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
}
.checklist-clamp--3 { -webkit-line-clamp: 3; }
.checklist-more {
  display: block; margin-inline: auto;
  background: transparent; border: 0; padding: 2px 0;
  margin-top: calc(4 * var(--chk-u));
  color: #F9522E;
  font-family: inherit; font-size: calc(14 * var(--chk-u)); font-weight: 700;
  cursor: pointer;
}

/* Control row: Pass/N·A/Fail (or Mark done) fill the width; photo button sits
   beside them, fixed-width. */
.checklist-item__ctrl {
  display: flex;
  margin-top: calc(16 * var(--chk-u));
}
/* The single answer control (buttons / mc / slider / signature / media) fills
   the full width — the photo action now lives in the footer, not beside it. */
.checklist-item__ctrl > * { flex: 1; min-width: 0; margin-top: 0; }
.checklist-item__buttons {
  display: flex; gap: calc(10 * var(--chk-u)); flex: 1;
}
.checklist-btn {
  flex: 1;
  min-height: calc(44 * var(--chk-u));
  border-radius: calc(10 * var(--chk-u));
  border: 1.5px solid #94A3B8;
  background: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--chk-u));
  transition: all 120ms;
  color: #F9522E;
  font-family: inherit; font-size: calc(14 * var(--chk-u)); font-weight: 600;
}
.checklist-btn span { line-height: 1; }
.checklist-btn svg { width: calc(20 * var(--chk-u)); height: calc(20 * var(--chk-u)); }
.checklist-btn:hover { border-color: #74808f; }
.checklist-btn:active { transform: scale(0.97); }
.checklist-btn--pass.is-active { background: #16a34a; border-color: #16a34a; color: #fff; }
.checklist-btn--na.is-active   { background: #5a6573; border-color: #5a6573; color: #fff; }
.checklist-btn--fail.is-active { background: #dc2626; border-color: #dc2626; color: #fff; }
.checklist-btn--photo {
  flex: none; width: 52px; gap: 0;
  border-style: dashed;
  border-color: #cbd5e1;
  color: #64748b;
}
.checklist-btn--photo:hover { border-color: #94a3b8; color: #0f172a; background: #f8fafc; }
.checklist-btn--photo.is-needed { border-color: #f59e0b; color: #b45309; }

/* Single-tap "Mark done" toggle for checkbox — green when done, like Pass */
.checklist-btn--check.is-active {
  background: #16a34a; border-color: #16a34a; color: #fff;
}

/* Free-form text/number value input. Same height and border as the answer
   buttons — it's the same act, just typed instead of tapped. */
.checklist-item__value-wrap { margin-top: calc(16 * var(--chk-u)); }
.checklist-item__value-input {
  width: 100%; box-sizing: border-box;
  min-height: calc(44 * var(--chk-u)); padding: 0 calc(14 * var(--chk-u));
  border: 1.5px solid #94A3B8; border-radius: calc(10 * var(--chk-u));
  background: #fff;
  font-family: inherit; font-size: calc(15 * var(--chk-u)); color: #1F2533;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.checklist-item__value-input:focus {
  outline: none;
  border-color: #0F172A;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(15,23,42,0.10);
}
.checklist-item__value-input.is-invalid {
  border-color: #fca5a5;
  background: #fef2f2;
}
.checklist-item--text[data-status="passed"],
.checklist-item--number[data-status="passed"] {
  border-color: #cbd5e1;
}

/* "+ Add note" pill — appears once status is set if note allowed */
.checklist-item__addons {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.checklist-item__add-note {
  background: transparent; border: 1px dashed #cbd5e1;
  color: #64748b; font-family: inherit; font-size: 0.85rem; font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  cursor: pointer;
}
.checklist-item__add-note:hover { border-style: solid; color: #0f172a; border-color: #94a3b8; background: #f8fafc; }

/* Photo thumbnails grid */
.checklist-item__thumbs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--chk-u));
  margin-top: calc(12 * var(--chk-u));
}
.checklist-item__thumb {
  position: relative;
  width: calc(72 * var(--chk-u)); height: calc(72 * var(--chk-u));
  border-radius: calc(10 * var(--chk-u)); overflow: hidden;
  border: 1px solid #c3cbd6; background: #f1f5f9;
}
.checklist-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.checklist-item__thumb-x {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(15,23,42,0.75); color: #fff;
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
}
.checklist-item__thumb-x:hover { background: #dc2626; }

/* ── Checklist field types (Phase F: slider, temperature, date/time, multiple
   choice, signature, media, instruction) — ported from Muster Mate ── */

/* Multiple choice — coloured option pills (the option's colour tints it). */
.checklist-item__mc { display: flex; flex-wrap: wrap; gap: calc(10 * var(--chk-u)); }
.checklist-mc { flex: 1 1 auto; min-width: calc(96 * var(--chk-u)); min-height: calc(44 * var(--chk-u)); border-radius: calc(10 * var(--chk-u));
  border: 1.5px solid #94A3B8; background: #fff; color: #F9522E; font-family: inherit;
  font-weight: 600; font-size: calc(14 * var(--chk-u)); padding: calc(8 * var(--chk-u)) calc(14 * var(--chk-u)); display: flex; align-items: center;
  justify-content: center; gap: 6px; cursor: pointer; }
.checklist-mc.is-active { border-color: var(--mc, #475569); color: #fff; background: var(--mc, #475569); }
.checklist-item__mc-empty { margin-top: calc(12 * var(--chk-u)); font-size: calc(14 * var(--chk-u)); color: #94a3b8; font-style: italic; }

/* Slider (0–100%) — full-width track with the % readout on the right. */
.checklist-item__slider { display: flex; align-items: center; gap: calc(16 * var(--chk-u)); }
.checklist-slider { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: calc(28 * var(--chk-u)); background: transparent; cursor: pointer; }
.checklist-slider__val { flex: none; min-width: calc(60 * var(--chk-u)); text-align: right; font-size: calc(24 * var(--chk-u)); font-weight: 800; color: #F9522E; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.checklist-slider__val span { font-size: calc(14 * var(--chk-u)); font-weight: 700; margin-left: 1px; }
.checklist-slider__val.is-unset { color: #cbd5e1; }
.checklist-slider::-webkit-slider-runnable-track { height: 9px; border-radius: 999px; background: linear-gradient(to right, #F9522E 0%, #F9522E var(--pct, 50%), #e2e8f0 var(--pct, 50%), #e2e8f0 100%); }
.checklist-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -7.5px; border-radius: 50%; background: #fff; border: 3px solid #F9522E; box-shadow: 0 1px 4px rgba(249,82,46,0.3); transition: transform 0.08s ease; }
.checklist-slider:active::-webkit-slider-thumb { transform: scale(1.1); }
.checklist-slider::-moz-range-track { height: 9px; border-radius: 999px; background: #e2e8f0; }
.checklist-slider::-moz-range-progress { height: 9px; border-radius: 999px; background: #F9522E; }
.checklist-slider::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid #F9522E; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(249,82,46,0.3); }

/* Temperature — number entry with a unit chip + acceptable-range hint. */
.checklist-item__temp { display: flex; align-items: stretch; gap: calc(9 * var(--chk-u)); margin-top: calc(16 * var(--chk-u)); }
.checklist-temp__in { flex: 1; }
.checklist-temp__unit { flex: none; display: flex; align-items: center; padding: 0 calc(16 * var(--chk-u)); border-radius: calc(10 * var(--chk-u)); background: #f1f5f9; color: #0f172a; font-weight: 800; font-size: calc(15 * var(--chk-u)); }

/* Date & time — native picker, sized like the other inputs. */
.checklist-dt-wrap { position: relative; margin-top: calc(16 * var(--chk-u)); }
.checklist-dt { min-height: calc(44 * var(--chk-u)); display: flex; align-items: center; -webkit-appearance: none; appearance: none; background: #fff; }
.checklist-dt::-webkit-date-and-time-value { text-align: left; margin: 0; font-size: calc(15 * var(--chk-u)); }
.checklist-dt::-webkit-datetime-edit { color: #1F2533; line-height: 1.2; }
.checklist-dt::-webkit-calendar-picker-indicator { margin-left: auto; }
.checklist-dt-ph { position: absolute; left: calc(14 * var(--chk-u)); top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: calc(15 * var(--chk-u)); pointer-events: none; }
.checklist-dt-wrap.has-value .checklist-dt-ph { display: none; }
.checklist-dt-wrap:not(.has-value) .checklist-dt::-webkit-datetime-edit { color: transparent; }
/* iOS WKWebView paints the value via date-and-time-value, not datetime-edit —
   blank that too or the value shows through the overlay placeholder. */
.checklist-dt-wrap:not(.has-value) .checklist-dt::-webkit-date-and-time-value { color: transparent; }

/* Signature — tap to open the pad; shows the captured signature once signed. */
.checklist-sign { width: 100%; min-height: calc(68 * var(--chk-u)); border: 1.5px dashed #94A3B8; border-radius: calc(10 * var(--chk-u)); background: #fff; color: #F9522E; font-family: inherit; font-weight: 600; font-size: calc(15 * var(--chk-u)); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--chk-u)); cursor: pointer; position: relative; padding: calc(8 * var(--chk-u)); }
.checklist-sign.is-signed { border-style: solid; border-color: #86e0b4; background: #fff; min-height: calc(96 * var(--chk-u)); }
.checklist-sign svg { width: calc(20 * var(--chk-u)); height: calc(20 * var(--chk-u)); }
.checklist-sign__img { max-height: calc(76 * var(--chk-u)); max-width: 80%; object-fit: contain; }
.checklist-sign__re { position: absolute; right: calc(12 * var(--chk-u)); bottom: calc(7 * var(--chk-u)); font-size: calc(12 * var(--chk-u)); font-weight: 700; color: #F9522E; }

/* Media — the answer IS a photo: a prominent capture CTA (thumbs render below). */
.checklist-media-cta { width: 100%; min-height: calc(52 * var(--chk-u)); border: 1.5px solid #94A3B8; border-radius: calc(10 * var(--chk-u)); background: #fff; color: #F9522E; font-family: inherit; font-weight: 600; font-size: calc(15 * var(--chk-u)); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--chk-u)); cursor: pointer; }
.checklist-media-cta svg { width: calc(20 * var(--chk-u)); height: calc(20 * var(--chk-u)); }
.checklist-media-cta.is-done { border-color: #86e0b4; color: #15803d; }

/* Instruction — read-only guidance, not a question. Centred like the rest, so
   the icon sits above the text rather than beside a centred block. */
.checklist-item--instruction { background: #f1f5f9; border-color: #c3cbd6; box-shadow: none; }
.checklist-item__inst { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--chk-u)); }
.checklist-item__inst-icon { flex: none; color: #F9522E; width: calc(20 * var(--chk-u)); height: calc(20 * var(--chk-u)); }
.checklist-item__inst-label { text-align: center; font-size: calc(17 * var(--chk-u)); font-weight: 700; color: #0f172a; line-height: calc(25 * var(--chk-u)); }
.checklist-item__inst-detail { text-align: center; font-size: calc(14.5 * var(--chk-u)); color: #5a6573; line-height: calc(21 * var(--chk-u)); margin-top: calc(4 * var(--chk-u)); }

/* Per-item signature pad overlay (the submit pad is bound to its own canvas). */
.checklist-itemsig { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.checklist-itemsig__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.55); }
.checklist-itemsig__panel { position: relative; width: 100%; max-width: 560px; background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 24px 60px rgba(15,23,42,0.3); }
.checklist-itemsig__head { display: flex; align-items: center; justify-content: space-between; }
.checklist-itemsig__title { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.checklist-itemsig__x { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: #94a3b8; cursor: pointer; }
.checklist-itemsig__sub { margin: 4px 0 12px; font-size: 0.9rem; color: #64748b; }
.checklist-itemsig__wrap { height: 220px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fafbfc; overflow: hidden; touch-action: none; }
.checklist-itemsig__canvas { display: block; }
.checklist-itemsig__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.checklist-itemsig__foot-r { display: flex; gap: 10px; }
.checklist-itemsig__clear, .checklist-itemsig__cancel { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 16px; font-family: inherit; font-weight: 700; font-size: 0.95rem; color: #475569; cursor: pointer; }
.checklist-itemsig__save { background: #0f172a; border: 0; border-radius: 10px; padding: 10px 20px; font-family: inherit; font-weight: 700; font-size: 0.95rem; color: #fff; cursor: pointer; }
.checklist-itemsig__save:disabled { opacity: 0.45; cursor: default; }

/* Reference attachments (admin-pinned guidance images/PDFs on an item) + viewer */
/* Standardised action footer — Note / Photo (camera) on every card. The answer
   control above keeps the full width; these secondary actions sit below a
   hairline separator. Mirrors Muster Mate's .chk-item__aff. */
/* Icon-only, pinned to the card's top-right corner — they no longer own a
   row of the card. The card gets .checklist-item--has-aff so the centred
   question text reserves corner space and never runs under the icons.
   Coral being the RESTING colour means "this item already has a note or a
   photo" can't be signalled by colour any more — it gets the tint instead. */
.checklist-item--has-aff { position: relative; }
.checklist-item--has-aff .checklist-item__head,
.checklist-item--has-aff .checklist-item__head + .checklist-item__label { padding: 0 calc(80 * var(--chk-u)); }
.checklist-item__aff { position: absolute; top: calc(11 * var(--chk-u)); right: calc(11 * var(--chk-u)); display: flex; gap: 4px; }
.checklist-aff__btn { display: inline-flex; align-items: center; justify-content: center; width: calc(38 * var(--chk-u)); height: calc(38 * var(--chk-u)); padding: 0; border: 1px solid transparent; border-radius: calc(10 * var(--chk-u)); background: none; color: #F9522E; cursor: pointer; }
.checklist-aff__btn:active { background: rgba(249,82,46,0.10); }
.checklist-aff__btn.is-on { background: rgba(249,82,46,0.13); }
.checklist-aff__btn.is-needed { color: #b45309; }
.checklist-aff__btn svg { flex: none; width: calc(20 * var(--chk-u)); height: calc(20 * var(--chk-u)); }

/* Reference attachments — a compact, styled tappable chip (NOT a raw thumbnail).
   Tap to open the image lightbox / PDF viewer. */
.checklist-refs { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--chk-u)); margin-top: calc(10 * var(--chk-u)); }
.checklist-ref { display: inline-flex; align-items: center; gap: calc(7 * var(--chk-u)); padding: calc(7 * var(--chk-u)) calc(13 * var(--chk-u)) calc(7 * var(--chk-u)) calc(11 * var(--chk-u)); border: 1.5px solid #c3cbd6; border-radius: calc(10 * var(--chk-u)); background: #f8fafc; color: #1A3A5C; font-family: inherit; font-size: calc(13 * var(--chk-u)); font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; max-width: 100%; }
.checklist-ref:active { background: #eef2f7; }
.checklist-ref svg { color: #F9522E; flex: none; }
.checklist-ref span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checklist-refview { position: fixed; inset: 0; z-index: 4000; background: rgba(8,12,24,0.92); display: none; align-items: center; justify-content: center; padding: 24px; }
.checklist-refview.is-open { display: flex; }
.checklist-refview__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.checklist-refview__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Save & exit / Discard / Keep editing — leave-a-run choice (mirrors MM). */
.checklist-exit { position: fixed; inset: 0; z-index: 4100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.checklist-exit__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.55); }
.checklist-exit__panel { position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 22px 20px 18px; box-shadow: 0 24px 60px rgba(15,23,42,0.3); }
.checklist-exit__title { font-size: 1.2rem; font-weight: 800; color: #0f172a; text-align: center; }
.checklist-exit__msg { margin: 8px 0 18px; font-size: 0.92rem; color: #64748b; text-align: center; line-height: 1.45; }
.checklist-exit__btn { display: block; width: 100%; margin-top: 10px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #fff; font-family: inherit; font-size: 1rem; font-weight: 700; color: #0f172a; cursor: pointer; }
.checklist-exit__btn--save { background: #0f172a; border-color: #0f172a; color: #fff; }
.checklist-exit__btn--discard { color: #dc2626; border-color: #fecaca; }
.checklist-exit__btn--stay { color: #64748b; }

/* Photo source action sheet */
.checklist-photo-sheet {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: end center;
  padding: 0 16px 24px;
}
.checklist-photo-sheet.hidden { display: none; }
.checklist-photo-sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.checklist-photo-sheet__panel {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 30px 80px rgba(15,23,42,0.3);
  animation: dv2-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.checklist-photo-sheet__title {
  margin: 4px 0 8px; font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: #94a3b8; text-align: center; font-weight: 600;
}
.checklist-photo-sheet__btn {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: #0f172a; color: #fff;
  border: 0; border-radius: 12px;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer;
}
.checklist-photo-sheet__btn:hover { background: #1e293b; }
.checklist-photo-sheet__btn--cancel {
  background: #f1f5f9; color: #475569; margin-top: 4px;
}
.checklist-photo-sheet__btn--cancel:hover { background: #e2e8f0; color: #0f172a; }

/* In-app confirm modal (checklist leave, etc.) — replaces window.confirm */
.app-confirm { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; }
.app-confirm.hidden { display: none; }
.app-confirm__backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.app-confirm__card {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  background: #fff; border-radius: 18px;
  padding: 28px 26px 22px;
  box-shadow: 0 30px 80px rgba(15,23,42,0.32);
  text-align: center;
  animation: dv2-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-confirm__title { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; }
.app-confirm__msg { margin: 10px 0 24px; font-size: 0.98rem; color: #64748b; line-height: 1.5; }
.app-confirm__actions { display: flex; gap: 12px; }
.app-confirm__btn {
  flex: 1; min-height: 50px;
  border-radius: 12px; border: 1.5px solid transparent;
  font-family: inherit; font-size: 1.02rem; font-weight: 600;
  cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms;
}
.app-confirm__btn--ghost { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.app-confirm__btn--ghost:hover { background: #e2e8f0; color: #0f172a; }
.app-confirm__btn--primary { background: #0f172a; color: #fff; }
.app-confirm__btn--primary:hover { background: #1e293b; }
.app-confirm__btn--danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.app-confirm__btn--danger:hover { background: #b91c1c; }

/* ── Note thread ────────────────────────────────────────────────────────────
   A note is a thread, not a box (parity with Muster Mate, founder 2026-08-07):
   authored lines, an edit bar for one of your own, then the composer. The
   wrapper class stays `.checklist-item__note` because compact and table views
   already lay that out. */
.checklist-item__note {
  margin-top: calc(14 * var(--chk-u));
  display: flex; flex-direction: column; gap: calc(10 * var(--chk-u));
  padding-top: calc(12 * var(--chk-u));
  border-top: 1px solid #e5eaf1;
  text-align: left;
}
.checklist-npanel__list { display: flex; flex-direction: column; gap: calc(10 * var(--chk-u)); }
.checklist-nline {
  display: flex; gap: calc(9 * var(--chk-u)); align-items: flex-start;
  border-radius: calc(9 * var(--chk-u)); padding: calc(4 * var(--chk-u)); margin: calc(-4 * var(--chk-u));
}
.checklist-nline .checklist-av {
  width: calc(24 * var(--chk-u)); height: calc(24 * var(--chk-u));
  margin-left: 0; border-width: calc(1.5 * var(--chk-u));
  font-size: calc(10 * var(--chk-u)); margin-top: calc(1 * var(--chk-u));
}
/* Only your own lines are tappable — the pencil is the tell. */
.checklist-nline.is-mine { cursor: pointer; }
.checklist-nline.is-mine:active { background: rgba(15,23,42,0.05); }
.checklist-nline.is-editing { background: rgba(249,82,46,0.07); }
.checklist-nline__body { flex: 1; min-width: 0; }
.checklist-nline__meta {
  display: flex; align-items: center; gap: calc(5 * var(--chk-u));
  font-size: calc(12.5 * var(--chk-u)); font-weight: 700; color: #5a6573;
  margin-bottom: calc(1 * var(--chk-u));
}
.checklist-nline__pencil { opacity: 0.75; flex: none; }
.checklist-nline__text {
  font-size: calc(15 * var(--chk-u)); font-weight: 500; color: #1F2533;
  line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
}
.checklist-neditbar {
  display: flex; align-items: center; justify-content: space-between;
  font-size: calc(12.5 * var(--chk-u)); font-weight: 700; color: #5a6573;
  padding: 0 calc(2 * var(--chk-u));
}
.checklist-neditbar__acts { display: flex; gap: calc(16 * var(--chk-u)); }
.checklist-neditbar__acts button {
  border: 0; background: none; font: inherit; cursor: pointer; padding: calc(2 * var(--chk-u));
}
.checklist-neditbar__del { color: #dc2626; }
.checklist-neditbar__cancel { color: #5a6573; }
.checklist-ncomposer { display: flex; gap: calc(9 * var(--chk-u)); align-items: flex-end; }
.checklist-ncomposer__in {
  flex: 1; box-sizing: border-box;
  padding: calc(10 * var(--chk-u)) calc(15 * var(--chk-u));
  border: 1.5px solid #94A3B8; border-radius: calc(20 * var(--chk-u));
  font-family: inherit; font-size: calc(15 * var(--chk-u)); line-height: 1.4; color: #1F2533;
  background: #fff; resize: none;
  min-height: calc(42 * var(--chk-u)); max-height: calc(120 * var(--chk-u));
  -webkit-appearance: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.checklist-ncomposer__in:focus {
  outline: none; border-color: #0F172A; box-shadow: 0 0 0 calc(4 * var(--chk-u)) rgba(15,23,42,0.10);
}
.checklist-ncomposer__send {
  flex: none; width: calc(42 * var(--chk-u)); height: calc(42 * var(--chk-u));
  border-radius: 50%; border: 0; background: #F9522E; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.checklist-ncomposer__send:disabled { background: #cbd5e1; }
/* "Notes · n" — the row's own chip once a comment exists. Committing folds the
   panel back to this, so the comment is visible on the row and one tap away
   (Muster Mate's model; founder 2026-08-08 asked for the same behaviour). */
.checklist-nchip {
  display: inline-flex; align-items: center; gap: calc(6 * var(--chk-u));
  height: calc(30 * var(--chk-u)); padding: 0 calc(12 * var(--chk-u));
  border-radius: 999px; border: 1.5px solid #cbd5e1; background: #fff;
  color: #0f172a; font-family: inherit;
  font-size: calc(13 * var(--chk-u)); font-weight: 700;
  cursor: pointer; flex: none; vertical-align: middle;
}
.checklist-nchip:active { background: #f1f5f9; }
.checklist-nchip.is-on { background: #0F172A; border-color: #0F172A; color: #fff; }
.checklist-nchip svg { flex: none; opacity: 0.9; }
/* Compact card: its own line under the row, left-aligned like the guide. */
.checklist-item--compact > .checklist-nchip { flex-basis: 100%; margin: 0; order: 8; align-self: flex-start; }
/* Table row: inline after the question text. */
.checklist-trow .checklist-nchip {
  margin-left: calc(8 * var(--chk-u)); height: calc(26 * var(--chk-u));
  padding: 0 calc(10 * var(--chk-u)); font-size: calc(12 * var(--chk-u));
}

.checklist-run__footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px max(14px, env(safe-area-inset-bottom)) 24px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e2e8f0;
  z-index: 60;        /* above floating-nav (z-index: 40) just in case */
  gap: 16px;
}

/* While a checklist run is in progress, give the runner the whole
   screen — hide the global nav and the board header. Same UX as the visitor
   wizard. Only the run view's own [Back] + title + items + footer are
   visible. Safety's own header bar used to need hiding separately; there
   isn't one any more, and hiding #boardHeader takes the breadcrumb with it. */
body.checklist-running .floating-nav {
  opacity: 0;
  transform: translateY(80px);
  pointer-events: none;
}
body.checklist-running #boardHeader {
  display: none;
}
/* With the chrome gone, give the runner a comfortable top safe-area
   margin (was previously provided by the global topbar) and breathing
   room beneath the status bar. */
body.checklist-running #checklist-container {
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
}
body.checklist-running .checklist-run__header {
  padding-top: 4px;
  margin-bottom: 14px;
}
/* Legend can shrink — buttons are self-explanatory anyway */
body.checklist-running .checklist-run__legend {
  padding: 6px 14px;
  font-size: 0.78rem;
  margin-bottom: 10px;
}

/* Stronger Back button while running — was easy to miss as a small
   slate-grey text link. Now a clear outlined pill. */
body.checklist-running .checklist-run__header .checklist-back-btn {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 14px 8px 10px;
  color: #0f172a;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
body.checklist-running .checklist-run__header .checklist-back-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
body.checklist-running .checklist-run__header .checklist-back-btn svg {
  width: 18px; height: 18px;
}
.checklist-run__summary { font-size: 0.92rem; color: #475569; font-weight: 500; flex: 1; text-align: center; }
.checklist-run__cancel {
  background: transparent; color: #64748b;
  border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 12px 22px; font-size: 1rem; font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.checklist-run__cancel:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.checklist-run__submit {
  background: #0f172a; color: #fff;
  border: 0; border-radius: 10px;
  padding: 12px 28px; font-size: 1rem; font-weight: 600;
  cursor: pointer;
  transition: background 120ms, opacity 120ms;
}
.checklist-run__submit:hover:not(:disabled) { background: #1e293b; }
.checklist-run__submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* Submit modal */
.checklist-submit-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
}
.checklist-submit-modal.hidden { display: none; }
.checklist-submit-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.checklist-submit-modal__panel {
  position: relative;
  width: min(720px, 96vw);
  max-height: 92vh;
  background: #fff;
  border-radius: 20px;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(15,23,42,0.28);
  overflow: hidden;
}
.checklist-submit-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid #e2e8f0;
}
.checklist-submit-modal__header h3 { margin: 0 0 4px; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; }
.checklist-submit-modal__close {
  background: transparent; border: 0; font-size: 1.8rem; line-height: 1;
  cursor: pointer; color: #64748b;
  width: 36px; height: 36px; border-radius: 10px;
  flex-shrink: 0;
}
.checklist-submit-modal__close:hover { background: #f1f5f9; }
.checklist-submit-modal__body {
  padding: 20px 26px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 22px;
}
.checklist-submit-modal__footer {
  padding: 16px 26px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid #e2e8f0;
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  background: #fafbfc;
}

.checklist-submit__summary {
  font-size: 0.85rem; color: #64748b; margin: 0;
}
.checklist-submit__section { display: flex; flex-direction: column; gap: 10px; }
.checklist-submit__section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 24px;
}
.checklist-submit__label {
  display: block; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: #64748b; font-weight: 600; margin: 0;
}
.checklist-submit__selected-name {
  font-size: 0.9rem; color: #0f172a; font-weight: 500;
}

.checklist-submit__search-wrap {
  position: relative;
  display: flex; align-items: center;
}
.checklist-submit__search-icon {
  position: absolute; left: 14px; color: #94a3b8; pointer-events: none;
}
.checklist-submit__search {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid #e2e8f0; border-radius: 12px;
  font-family: inherit; font-size: 0.95rem; color: #0f172a;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.checklist-submit__search:focus {
  outline: none; border-color: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148,163,184,0.18);
}

.checklist-submit__crew-list {
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 320px; overflow-y: auto;
  padding: 2px;
  border: 1px solid #e2e8f0; border-radius: 12px;
  background: #fafbfc;
}
.checklist-submit__crew-row {
  display: grid;
  grid-template-columns: 40px 1fr 28px;
  gap: 12px; align-items: center;
  text-align: left;
  background: #fff; border: 1.5px solid transparent; border-radius: 10px;
  padding: 10px 12px; cursor: pointer;
  font-family: inherit;
  transition: background 100ms, border-color 100ms;
}
.checklist-submit__crew-row:hover { background: #f1f5f9; }
.checklist-submit__crew-row.is-selected {
  background: #0f172a; border-color: #0f172a;
}
.checklist-submit__crew-row.is-selected .checklist-submit__crew-name { color: #fff; }
.checklist-submit__crew-row.is-selected .checklist-submit__crew-role { color: #cbd5e1; }
.checklist-submit__crew-row.is-selected .checklist-submit__crew-check { color: #fff; opacity: 1; }
.checklist-submit__crew-row.is-selected .checklist-submit__crew-avatar:not(.checklist-submit__crew-avatar--photo) {
  background: rgba(255,255,255,0.18); color: #fff;
}
/* Shared round: identity was fixed when they joined — the row confirms, it
   doesn't offer. */
.checklist-submit__crew-row.is-locked { cursor: default; }
.checklist-submit__joined-note { margin-top: 8px; font-size: 0.85rem; color: #64748b; }
/* "Not you?" is a real control now, not an instruction to close the round. */
.checklist-submit__switch {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 650; color: #f9522e;
  text-decoration: underline; text-underline-offset: 2px;
  min-height: 44px;                     /* the touch target, not the ink */
  cursor: pointer;
}
.checklist-submit__switch:active { opacity: 0.6; }
.checklist-submit__crew-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #e2e8f0; color: #475569;
  display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 600;
  flex-shrink: 0; overflow: hidden;
}
.checklist-submit__crew-avatar--photo { padding: 0; background: #e2e8f0; }
.checklist-submit__crew-avatar--photo img,
.checklist-submit__crew-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.checklist-submit__crew-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.checklist-submit__crew-name { font-size: 0.95rem; font-weight: 500; color: #0f172a; line-height: 1.2; }
.checklist-submit__crew-role { font-size: 0.78rem; color: #64748b; line-height: 1.2; }
.checklist-submit__crew-check { color: transparent; opacity: 0; transition: opacity 100ms; display: grid; place-items: center; }
.checklist-submit__crew-empty {
  padding: 30px 24px; text-align: center; color: #94a3b8; font-size: 0.95rem;
  border: 1px dashed #e2e8f0; border-radius: 12px;
}

.checklist-submit__sig-wrap {
  position: relative;
  background: #fafbfc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  height: 220px; overflow: hidden;
}
.checklist-submit__sig-canvas {
  display: block;
  touch-action: none;
  cursor: crosshair;
  position: relative; z-index: 2;
  width: 100%; height: 100%;
}
.checklist-submit__sig-hint {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 0.95rem; color: #cbd5e1; font-style: italic;
  pointer-events: none; z-index: 1;
  transition: opacity 120ms;
}
.checklist-submit__sig-wrap.has-stroke .checklist-submit__sig-hint { opacity: 0; }
.checklist-submit__sig-wrap.has-stroke { border-style: solid; border-color: #94a3b8; }
.checklist-submit__sig-clear {
  background: transparent; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 5px 12px;
  font-size: 0.78rem; font-weight: 500;
  color: #475569; cursor: pointer;
}
.checklist-submit__sig-clear:hover { background: #f1f5f9; }

.checklist-submit__error {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fef2f2; color: #b91c1c;
  border-radius: 8px; font-size: 0.88rem;
}
/* The sign step's two sections, wrapped so the review step can swap them out. */
.checklist-submit__sign { display: flex; flex-direction: column; gap: 22px; }

/* Review step — items left blank, each one marked N/A or struck through before
   the sign step. Same px scale as the rest of the modal. */
.checklist-review { display: flex; flex-direction: column; gap: 14px; }
.checklist-review__blocked { flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b;
  font-size: 14.5px; font-weight: 600;
}
.checklist-review__blocked svg { flex: none; }
.checklist-review__blocked span { flex: 1; min-width: 0; }
.checklist-review__go {
  margin-left: auto; flex: none;
  background: #b91c1c; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 14px; font-weight: 700; font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.checklist-review__quick { flex: none; display: flex; gap: 8px; align-items: center; }
.checklist-review__quick-lbl {
  margin-right: auto; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #64748b; font-weight: 600;
}
.checklist-review__chip {
  border: 1.5px solid #cbd5e1; background: #fff; color: #0f172a;
  border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.checklist-review__chip:active { background: #f1f5f9; }
.checklist-review__list { flex: none;
  display: flex; flex-direction: column;
  border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden;
}
.checklist-review__row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; background: #fff; border-top: 1px solid #eef1f5;
}
.checklist-review__row:first-child { border-top: 0; }
.checklist-review__n { font-size: 13px; font-weight: 700; color: #94A3B8; font-variant-numeric: tabular-nums; }
.checklist-review__q { min-width: 0; }
.checklist-review__label { font-size: 15.5px; font-weight: 600; color: #1F2533; line-height: 1.3; }
.checklist-review__type { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.checklist-review__na {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 6px;
  background: rgba(10,15,34,0.08); color: #36415a;
}
.checklist-review__row.is-skip .checklist-review__label {
  text-decoration: line-through; text-decoration-thickness: 2px; color: #5a6573;
}
.checklist-review__seg {
  display: flex; border: 1.5px solid #94A3B8; border-radius: 10px; overflow: hidden;
  flex: none;
}
.checklist-review__seg button {
  border: 0; background: #fff; color: #F9522E; font-weight: 600; font-size: 14px;
  padding: 0 16px; min-height: 42px;
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; font-family: inherit;
}
.checklist-review__seg button + button { border-left: 1.5px solid #94A3B8; }
.checklist-review__seg button.is-on { background: #5a6573; color: #fff; }
.checklist-review__seg button.checklist-review__seg-answer { color: #0f172a; }
.checklist-review__seg svg { flex: none; }
.checklist-review__shared { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #f8fafc; }
.checklist-review__shared.is-on { border-color: #94A3B8; background: #fff; }
.checklist-review__shared-tog { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #1F2533; cursor: pointer; }
.checklist-review__shared-tog input { width: 20px; height: 20px; margin: 0; accent-color: #0f172a; }
.checklist-review__shared input[type="text"] { width: 100%; box-sizing: border-box; min-height: 42px; border: 1.5px solid #94A3B8; border-radius: 10px; padding: 0 14px; font: inherit; font-size: 14.5px; color: #1F2533; background: #fff; }
.checklist-review__shared input[type="text"]:focus { outline: none; border-color: #0f172a; }
.checklist-review__reason { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; }
.checklist-review__reason input {
  flex: 1; min-height: 42px; box-sizing: border-box;
  border: 1.5px solid #94A3B8; border-radius: 10px; padding: 0 14px;
  font: inherit; font-size: 14.5px; color: #1F2533; background: #fff;
}
.checklist-review__reason input::placeholder { color: #94A3B8; }
.checklist-review__reason input:focus { outline: none; border-color: #0f172a; }
.checklist-review__note { margin-right: auto; font-size: 13.5px; color: #64748b; }

.checklist-submit__btn {
  padding: 10px 20px;
  border-radius: 8px; border: 0;
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.checklist-submit__btn--ghost {
  background: transparent; color: #475569;
  border: 1px solid #e2e8f0;
}
.checklist-submit__btn--ghost:hover { background: #f8fafc; }
.checklist-submit__btn--primary {
  background: #0f172a; color: #fff;
}
.checklist-submit__btn--primary:hover:not(:disabled) { background: #1e293b; }
.checklist-submit__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Completion overlay */
.checklist-complete-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: dv2-fadein 180ms ease-out;
}
.checklist-complete-overlay.hidden { display: none; }
.checklist-complete-overlay__panel {
  background: #fff; border-radius: 18px;
  padding: 36px 44px; text-align: center;
  box-shadow: 0 24px 60px rgba(15,23,42,0.25);
  animation: dv2-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.checklist-complete-overlay__icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: #dcfce7; color: #16a34a;
  display: grid; place-items: center;
  margin: 0 auto 16px;
}
.checklist-complete-overlay h3 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 600; color: #0f172a; }
.checklist-complete-overlay p { margin: 0; color: #64748b; font-size: 0.92rem; }
@keyframes dv2-fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes dv2-pop { 0% { opacity: 0; transform: scale(0.8) } 100% { opacity: 1; transform: scale(1) } }

/* ── COMPACT VIEW (founder-locked 2026-08-05) ─────────────────────────────
   Full/Compact is a choice on EVERY checklist. Compact keeps every response
   type answerable: rows sit in one bordered card with hairline dividers,
   question left, a 40px-tall version of the item's own control right. Wide
   controls (long choice sets) drop to a second line inside the row, CENTRED.
   Notes/photos/guidance move behind the ··· picker menu; a Fail still opens
   the note line automatically. Long questions wrap — never clamp (safety
   text). Text reads LEFT here; the centred-label rule is full cards only. */
.checklist-run__viewseg {
  flex: none; display: inline-flex; background: #fff;
  border: 1.5px solid #cbd5e1; border-radius: 999px; padding: 2px; gap: 2px;
}
.checklist-run__viewseg button {
  border: 0; background: transparent; font-family: inherit; cursor: pointer;
  font-size: 0.75rem; font-weight: 700; color: #5a6573;
  padding: 5px 13px; border-radius: 999px;
}
.checklist-run__viewseg button.is-on { background: #0F172A; color: #fff; }

.checklist-items--compact { position: relative; }
.checklist-items--compact .checklist-sec__items { gap: 0; }
.checklist-clist {
  background: #fff; border: 1.5px solid #94A3B8; border-radius: calc(12 * var(--chk-u));
  box-shadow: 0 2px 6px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.05);
  overflow: hidden;
}

/* The compact row: strip the card chrome, keep the status backgrounds the
   base .checklist-item[data-status] rules already provide. */
.checklist-item--compact {
  border: 0; border-radius: 0; box-shadow: none;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: calc(8 * var(--chk-u)) calc(12 * var(--chk-u));
  padding: calc(9 * var(--chk-u)) calc(12 * var(--chk-u)) calc(9 * var(--chk-u)) calc(16 * var(--chk-u));
  min-height: calc(58 * var(--chk-u));
  border-top: 1px solid #cbd5e1;
  transition: background 120ms;
}
.checklist-clist > .checklist-item--compact:first-child { border-top: 0; }
.checklist-item--compact.needs-photo { border-top-color: #cbd5e1; }
/* Critical = left stripe + red number (same mark as the table rows). */
.checklist-item--compact.checklist-item--crit { box-shadow: inset 4px 0 0 #dc2626; }
.checklist-item--compact.checklist-item--crit .checklist-crow__num { color: #dc2626; font-weight: 800; }
.checklist-crow__num {
  flex: none; font-variant-numeric: tabular-nums;
  font-size: calc(13.5 * var(--chk-u)); color: #9aa7b8; font-weight: 700;
  min-width: calc(22 * var(--chk-u));
}
.checklist-crow__q {
  flex: 1; min-width: calc(200 * var(--chk-u));
  text-align: left;
  font-size: calc(15.5 * var(--chk-u)); font-weight: 600; color: #1F2533;
  line-height: calc(21 * var(--chk-u)); letter-spacing: calc(-0.1 * var(--chk-u));
}
.checklist-item--compact[data-status="passed"] .checklist-crow__q { color: #7c8698; }
.checklist-crow__q .checklist-item__crit-tag { vertical-align: 1px; margin-left: calc(7 * var(--chk-u)); }
/* Shared round: the answerer's face rides the row, small. */
.checklist-crow__q .checklist-av {
  width: calc(22 * var(--chk-u)); height: calc(22 * var(--chk-u));
  font-size: calc(9 * var(--chk-u)); border-width: 1.5px;
  vertical-align: calc(-6 * var(--chk-u)); margin-left: calc(7 * var(--chk-u));
  display: inline-flex;
}
.checklist-crow__ctrl {
  flex: none; display: flex; align-items: center;
  gap: calc(6 * var(--chk-u)); margin-left: auto;
}
.checklist-crow__ctrl--wide {
  flex-basis: 100%; margin-left: 0; justify-content: center; order: 5;
}
.checklist-crow__ctrl--wide .checklist-item__mc { justify-content: center; }

/* Controls at row height — same classes as the full card so the existing
   handlers (is-active toggling) work verbatim. */
.checklist-item--compact .checklist-item__buttons { display: flex; gap: calc(6 * var(--chk-u)); flex: none; }
.checklist-item--compact .checklist-btn {
  flex: none; width: calc(50 * var(--chk-u)); min-height: calc(40 * var(--chk-u));
  font-size: calc(11.5 * var(--chk-u));
}
.checklist-item--compact .checklist-btn svg { width: calc(17 * var(--chk-u)); height: calc(17 * var(--chk-u)); }
.checklist-item--compact .checklist-btn--na { color: #5a6573; }
.checklist-item--compact .checklist-item__mc { gap: calc(6 * var(--chk-u)); flex-wrap: wrap; justify-content: flex-end; }
.checklist-item--compact .checklist-mc {
  flex: none; min-width: 0; min-height: calc(40 * var(--chk-u));
  padding: 0 calc(13 * var(--chk-u)); font-size: calc(12.5 * var(--chk-u));
  color: #3f4856;
}
.checklist-item--compact .checklist-mc.is-active { color: #fff; }
.checklist-item--compact .checklist-item__slider { gap: calc(10 * var(--chk-u)); }
.checklist-item--compact .checklist-slider { flex: none; width: calc(170 * var(--chk-u)); }
.checklist-item--compact .checklist-slider__val { min-width: calc(44 * var(--chk-u)); font-size: calc(15 * var(--chk-u)); }
.checklist-item--compact .checklist-item__value-wrap { margin: 0; width: calc(230 * var(--chk-u)); }
.checklist-item--compact .checklist-item__value-input { min-height: calc(40 * var(--chk-u)); font-size: calc(14 * var(--chk-u)); }
.checklist-item--compact .checklist-item__temp { display: inline-flex; align-items: center; gap: calc(6 * var(--chk-u)); width: calc(160 * var(--chk-u)); }
.checklist-item--compact .checklist-temp__in { flex: 1; min-width: 0; width: auto; }
.checklist-item--compact .checklist-dt-wrap { width: calc(220 * var(--chk-u)); margin: 0; }
.checklist-item--compact .checklist-sign {
  min-height: calc(40 * var(--chk-u)); padding: calc(4 * var(--chk-u)) calc(14 * var(--chk-u));
  font-size: calc(13 * var(--chk-u)); width: auto;
}
.checklist-item--compact .checklist-sign__img { max-height: calc(30 * var(--chk-u)); }
.checklist-item--compact .checklist-media-cta {
  min-height: calc(40 * var(--chk-u)); padding: 0 calc(14 * var(--chk-u));
  font-size: calc(13 * var(--chk-u)); width: auto;
}
.checklist-item--compact .checklist-item__thumbs { flex-basis: 100%; justify-content: flex-start; margin: 0; order: 7; }
.checklist-item--compact .checklist-item__thumb { width: calc(54 * var(--chk-u)); height: calc(54 * var(--chk-u)); }

/* Note / flag / guidance lines take the full width under the row. */
.checklist-item--compact .checklist-item__note { flex-basis: 100%; margin: 0; order: 8; }
.checklist-item--compact .checklist-item__flag { flex-basis: 100%; margin: 0; order: 9; }
.checklist-crow__guide {
  flex-basis: 100%; order: 4;
  display: flex; gap: calc(9 * var(--chk-u)); align-items: flex-start;
  font-size: calc(13.5 * var(--chk-u)); line-height: calc(19 * var(--chk-u)); color: #5a6573;
  padding-left: calc(34 * var(--chk-u));
}
.checklist-crow__guide svg { flex: none; width: calc(15 * var(--chk-u)); height: calc(15 * var(--chk-u)); color: #9aa7b8; margin-top: calc(2 * var(--chk-u)); }
.checklist-crow__guide .checklist-refs { margin: calc(6 * var(--chk-u)) 0 0; }

/* Instruction rows: quiet guidance, no control. */
.checklist-item--compact.checklist-item--instruction {
  background: #f8fafc; min-height: calc(46 * var(--chk-u)); padding-block: calc(10 * var(--chk-u));
}
.checklist-item--compact .checklist-item__inst { display: flex; gap: calc(9 * var(--chk-u)); align-items: flex-start; margin: 0; }
.checklist-item--compact .checklist-item__inst-label { font-weight: 400; font-size: calc(13.5 * var(--chk-u)); color: #5a6573; text-align: left; }
.checklist-item--compact .checklist-item__inst-detail { font-size: calc(12.5 * var(--chk-u)); }

/* The ··· kebab — coral-tinted once the item carries a note or photo. */
.checklist-crow__kebab {
  flex: none; width: calc(30 * var(--chk-u)); height: calc(40 * var(--chk-u));
  border: 0; background: transparent; color: #b6c0cd; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: calc(8 * var(--chk-u)); transition: all 120ms; font-family: inherit;
}
.checklist-crow__kebab svg { width: calc(19 * var(--chk-u)); height: calc(19 * var(--chk-u)); }
.checklist-crow__kebab.is-extra { background: rgba(249,82,46,0.13); color: #F9522E; }

/* Kebab picker menu — house popover, coral icons, one row per action. */
.checklist-popmenu {
  position: absolute; z-index: 70; min-width: calc(196 * var(--chk-u));
  background: #fff; border: 1px solid #cbd5e1; border-radius: calc(13 * var(--chk-u));
  box-shadow: 0 10px 30px rgba(15,23,42,0.16), 0 2px 8px rgba(15,23,42,0.08);
  padding: calc(6 * var(--chk-u));
  display: flex; flex-direction: column;
}
.checklist-popmenu button {
  display: flex; align-items: center; gap: calc(11 * var(--chk-u));
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: calc(14.5 * var(--chk-u)); font-weight: 600; color: #1F2533; text-align: left;
  padding: calc(11 * var(--chk-u)) calc(12 * var(--chk-u)); border-radius: calc(9 * var(--chk-u));
}
.checklist-popmenu button:active { background: #f1f5f9; }
.checklist-popmenu button svg { width: calc(19 * var(--chk-u)); height: calc(19 * var(--chk-u)); color: #F9522E; flex: none; }
.checklist-popmenu hr { border: 0; border-top: 1px solid #eef2f6; margin: calc(4 * var(--chk-u)) calc(8 * var(--chk-u)); }

/* ── Table groups: a homogeneous section (all pass/fail, or all the same
   multiple-choice set) renders as the external-forms grid — questions down
   the side, the shared answers across the top, one tap per cell. ── */
.checklist-tblwrap { overflow-x: auto; }
.checklist-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1.5px solid #94A3B8; border-radius: calc(12 * var(--chk-u));
  box-shadow: 0 2px 6px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.05);
  overflow: hidden;
}
.checklist-tbl th {
  padding: calc(7 * var(--chk-u)) calc(5 * var(--chk-u));
  font-size: calc(11.5 * var(--chk-u)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: #5a6573; text-align: center; border-bottom: 1.5px solid #94A3B8;
  background: #f8fafc; width: calc(72 * var(--chk-u));
}
.checklist-tbl th:first-child { text-align: left; width: auto; padding-left: calc(12 * var(--chk-u)); }
.checklist-tbl th:last-child { width: calc(34 * var(--chk-u)); }
.checklist-tbl td { border-top: 1px solid #cbd5e1; padding: calc(4 * var(--chk-u)) calc(3 * var(--chk-u)); text-align: center; vertical-align: middle; }
.checklist-tbl tbody tr:first-child td { border-top: 0; }
.checklist-tbl td:first-child {
  text-align: left; padding: calc(6 * var(--chk-u)) calc(8 * var(--chk-u)) calc(6 * var(--chk-u)) calc(12 * var(--chk-u));
  font-size: calc(13.5 * var(--chk-u)); font-weight: 600; color: #1F2533; line-height: calc(18 * var(--chk-u));
}
/* Critical = left stripe + red number in compact (founder-picked 2026-08-05;
   the trailing pill's position depended on where the sentence ended). */
.checklist-tbl tr.checklist-trow--crit td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.checklist-tbl tr.checklist-trow--crit .checklist-crow__num { color: #dc2626; font-weight: 800; }
.checklist-trow[data-status="passed"] { background: #f8fdfa; }
.checklist-trow[data-status="passed"] td:first-child { color: #7c8698; }
.checklist-trow[data-status="failed"] { background: #fffafa; }
.checklist-trow[data-status="na"] { background: #f8fafc; }
.checklist-trow td:first-child .checklist-crow__num { margin-right: calc(8 * var(--chk-u)); min-width: 0; }
.checklist-trow td:first-child .checklist-av {
  width: calc(22 * var(--chk-u)); height: calc(22 * var(--chk-u));
  font-size: calc(9 * var(--chk-u)); border-width: 1.5px;
  vertical-align: calc(-6 * var(--chk-u)); margin-left: calc(7 * var(--chk-u));
  display: inline-flex;
}
/* Cells: an empty radio circle until chosen; the existing .is-active fills
   (btn--pass green / btn--fail red / btn--na slate / mc option colour) apply. */
.checklist-tbl .checklist-cell {
  width: calc(64 * var(--chk-u)); min-height: calc(38 * var(--chk-u));
  flex: none; margin: 0 auto; display: inline-flex;
  border-color: #cbd5e1; min-width: 0; padding: 0 calc(4 * var(--chk-u));
  font-size: calc(11.5 * var(--chk-u));
}
.checklist-tbl .checklist-cell:not(.is-active) svg,
.checklist-tbl .checklist-cell:not(.is-active) span { display: none; }
.checklist-tbl .checklist-cell:not(.is-active)::after {
  content: ""; width: calc(13 * var(--chk-u)); height: calc(13 * var(--chk-u));
  border-radius: 50%; border: 1.5px solid #cbd5e1;
}
.checklist-tbl .checklist-cell svg { width: calc(18 * var(--chk-u)); height: calc(18 * var(--chk-u)); }
.checklist-trow--note td { padding: 0 calc(12 * var(--chk-u)) calc(12 * var(--chk-u)); background: #fffafa; border-top: 0; }
.checklist-trow--note .checklist-item__note { margin: 0; }
.checklist-trow--guide td { background: #fff; border-top: 0; padding: 0 calc(12 * var(--chk-u)) calc(12 * var(--chk-u)); }
.checklist-trow--guide .checklist-crow__guide { padding-left: calc(4 * var(--chk-u)); }
.checklist-trow--inst td {
  background: #f8fafc; text-align: left; font-weight: 400;
  font-size: calc(13.5 * var(--chk-u)); color: #5a6573; padding: calc(10 * var(--chk-u)) calc(16 * var(--chk-u));
}
/* Table rows keep the needs-photo breadcrumb visible. */
.checklist-trow.needs-photo { background: #fffbeb; }

/* ── Asset category sections (vehicle/asset board) ── */
.asset-cat-section { margin-bottom: 14px; }
.asset-cat-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 10px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: #475569;
}
.asset-cat-chev {
  flex: none;
  color: #94a3b8;
  transition: transform 0.18s ease;
}
.asset-cat-section.is-collapsed .asset-cat-chev { transform: rotate(-90deg); }
.asset-cat-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1e293b;
}
.asset-cat-count {
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: #64748b;
  background: #eef2f8;
  padding: 3px 11px;
  border-radius: 999px;
}
.asset-cat-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asset-cat-section.is-collapsed .asset-cat-body { display: none; }

/* ── Wizard note input (simple-category asset check-out, step 6) ── */
.wizard-note-input {
  width: 100%;
  max-width: 520px;
  min-height: 180px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 2px solid var(--wizard-border);
  background: var(--wizard-card);
  color: var(--wizard-text);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.wizard-note-input:focus {
  outline: none;
  border-color: var(--wizard-primary);
  box-shadow: 0 0 0 4px rgba(31, 173, 162, 0.15);
}

/* =========================================================
   Muster scenario picker (post-slide-to-activate)
   Reuses the trip-purpose visual language (large coloured buttons)
   but rendered as a full-screen overlay so the slider stays intact
   underneath. Selection = confirmation; there is no separate yes/no
   gate. Cancel arrow returns to the slider.
   ========================================================= */
/* The "Mustering" transition — a deliberate beat, not a spinner era. */
.muster-start-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 28, 0.97);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 240;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.muster-start-overlay.is-visible { opacity: 1; }
.muster-start-overlay.hidden { display: none; }
.muster-start-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.muster-start-overlay__chip {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: #15203a;
  border-radius: 8px;
  padding: 6px 14px;
  text-transform: uppercase;
}
.muster-start-overlay__title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.muster-start-overlay__bar {
  width: 200px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.muster-start-overlay__bar i {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: 99px;
  background: #fff;
  animation: muster-start-slide 0.7s ease-in-out infinite;
}
@keyframes muster-start-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .muster-start-overlay__bar i { animation: none; width: 100%; }
}

/* The re-muster "ready" finish. Same overlay, second beat: the working
   bar is replaced by a tick and ONE button. It waits for a tap on
   purpose — the board underneath has just been wiped and the controller
   should see that stated before they start marking again. */
.muster-start-overlay__sub {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  max-width: 46ch;
}
.muster-start-overlay__sub.hidden { display: none; }
.muster-start-overlay__bar.hidden { display: none; }
.muster-start-overlay__tick.hidden { display: none; }
.muster-start-overlay__btn.hidden { display: none; }

.muster-start-overlay__tick {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(34, 197, 94, 0.95);
  box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.16);
}

.muster-start-overlay__btn {
  margin-top: 8px;
  border: none;
  border-radius: 16px;
  padding: 18px 44px;
  min-width: 220px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0b1220;
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.muster-start-overlay__btn:active { transform: scale(0.98); }

.muster-scenario-picker {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 28, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 250;
}
.muster-scenario-picker.hidden { display: none; }

.muster-scenario-picker__inner {
  background: #fff;
  border-radius: 24px;
  padding: 28px 28px 24px;
  width: min(640px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 40px 80px rgba(10, 15, 34, 0.5);
  position: relative;
}

.muster-scenario-picker__back {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.muster-scenario-picker__back:active { background: rgba(15, 23, 42, 0.12); }

.muster-scenario-picker__title {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
}
.muster-scenario-picker__hint {
  margin: 0 0 22px;
  font-size: 0.95rem;
  color: #64748b;
  text-align: center;
}

.muster-scenario-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 480px) {
  .muster-scenario-picker__grid { grid-template-columns: 1fr; }
}

.muster-scenario-btn {
  --tab-color: #475569;
  appearance: none;
  border: 2px solid color-mix(in srgb, var(--tab-color) 30%, transparent);
  background: color-mix(in srgb, var(--tab-color) 12%, #fff);
  color: color-mix(in srgb, var(--tab-color) 75%, #0f172a);
  border-radius: 16px;
  padding: 24px 18px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.muster-scenario-btn:active {
  transform: scale(0.97);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--tab-color) 24%, transparent);
}

.muster-scenario-picker__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.muster-scenario-picker__divider::before,
.muster-scenario-picker__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, 0.35);
}

.muster-scenario-picker__real {
  width: 100%;
  appearance: none;
  border: none;
  border-radius: 16px;
  padding: 18px 18px 20px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.32);
  -webkit-tap-highlight-color: transparent;
}
.muster-scenario-picker__real:active { transform: scale(0.985); }
.muster-scenario-picker__real-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.muster-scenario-picker__real-label {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.muster-scenario-picker__real.hidden { display: none; }

/* Step 2's calm sibling — a drill is a practice run, not a red button. */
.muster-scenario-picker__drill {
  width: 100%;
  appearance: none;
  border: 2px solid #c3cbd6;
  border-radius: 16px;
  padding: 15px 18px 17px;
  margin-top: 12px;
  background: #f8fafc;
  color: #15203a;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  -webkit-tap-highlight-color: transparent;
}
.muster-scenario-picker__drill:active { transform: scale(0.985); background: #eef2f7; }
.muster-scenario-picker__drill-label {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.muster-scenario-picker__drill-sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: #5a6573;
}

/* ==========================================================================
   Visitor check-in — "What's your name?" (2026-08-29 redesign)
   Same grammar as the sign-out screen: bare bar (.vso-type), Continue beside
   it on the same line, remembered visitors as .visitor-checkout-card rows.
   Sized in --ui-unit; the unit is SCOPED so the wizard declares its own.
   ========================================================================== */
.visitor-wizard {
  --ui-unit: min(calc(100vw / 1024), calc(100vh / 768));
}

body.app-portrait .visitor-wizard {
  --ui-unit: min(calc(100vw / 768), calc(100vh / 1024));
}

/* The step's shared bottom Continue is replaced by the one beside the bar. */
.visitor-wizard .wizard-name .wizard-actions {
  display: none;
}

/* On the name step the wizard wears the sign-out screen's chrome: full-bleed
   ground with the same 40u side padding, no dialog box, the floating Back/×
   hidden — so the bar lands exactly where the sign-out bar does. */
.visitor-wizard.wizard--name,
body.app-portrait .visitor-wizard.wizard--name {
  padding: 0 calc(40 * var(--ui-unit)) calc(calc(24 * var(--ui-unit)) + env(safe-area-inset-bottom, 0px) + var(--keyboard-offset, 0px));
}

.visitor-wizard.wizard--name .wizard-dialog {
  width: 100%;
  min-height: 0;
  max-height: none;
  border-radius: 0;
}

.visitor-wizard.wizard--name .wizard-home {
  display: none;
}

.visitor-wizard .wizard-name {
  max-width: min(calc(900 * var(--ui-unit)), 100%);
  align-items: stretch;
  text-align: left;
  gap: 0;
  padding: calc(8 * var(--ui-unit)) 0 calc(24 * var(--ui-unit));
}

/* [data-step] keeps this ahead of the legacy per-step portrait paddings */
body.app-portrait .visitor-wizard .wizard-step[data-step] .wizard-name {
  padding-top: calc(8 * var(--ui-unit));
}

.visitor-wizard .wizard-topbar {
  display: none;
}

.visitor-wizard.wizard--name .wizard-topbar {
  display: grid;
}

/* beat the generic .wizard-step h3 / .wizard-title rules */
.visitor-wizard .wizard-topbar h3 {
  margin: 0;
  padding: 0;
  font-size: calc(18.4 * var(--ui-unit));
  font-weight: 700;
  color: var(--wizard-text);
  text-align: center;
  width: 100%;
}

.visitor-wizard .wizard-name__title {
  transform: none;
  padding: 0;
  text-align: left;
  font-size: calc(24 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 calc(2 * var(--ui-unit));
  color: var(--wizard-text);
}

/* Beat the generic .wizard-step input[type="text"] box. tel/email are the
   contact steps (2/12) wearing the same bar. */
.visitor-wizard .wizard-name .vso-type input[type="text"],
.visitor-wizard .wizard-name .vso-type input[type="tel"],
.visitor-wizard .wizard-name .vso-type input[type="email"] {
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  text-align: left;
  font-weight: 700;
  font-size: calc(38.4 * var(--ui-unit));
  letter-spacing: -0.025em;
  color: var(--wizard-text);
  padding: 0 calc(48 * var(--ui-unit)) 0 0;
  caret-color: var(--wizard-primary);
}

.visitor-wizard .wizard-name .vso-type input[type="text"]:focus,
.visitor-wizard .wizard-name .vso-type input[type="tel"]:focus,
.visitor-wizard .wizard-name .vso-type input[type="email"]:focus {
  border: 0;
  box-shadow: none;
}

.visitor-wizard .wizard-name__next {
  gap: calc(12 * var(--ui-unit));
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.visitor-wizard .wizard-name__next svg {
  width: calc(22 * var(--ui-unit));
  height: calc(22 * var(--ui-unit));
}

.visitor-wizard .wizard-name__next:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

.visitor-wizard .wizard-name .wizard-remembered-list,
.visitor-wizard .wizard-name .wizard-company-suggestions {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--ui-unit));
  padding: calc(18 * var(--ui-unit)) 2px calc(8 * var(--ui-unit));
  overflow-y: auto;
  min-height: 0;
}

.visitor-wizard .wizard-name .wizard-remembered-list.hidden,
.visitor-wizard .wizard-name .wizard-company-suggestions.hidden {
  display: none;
}

/* Remembered visitors: a person glyph, never the stored photo or initials.
   The list is shown to whoever types on the gangway iPad; the photo was
   captured to identify the visitor DURING their visit (founder, 2026-08-29). */
/* Remembered (returning) visitor: soft green row — green is "go" on the
   iPad (the sign-in action, the success tick). Amber below = already aboard,
   stop. A stranger's row stays white. */
.visitor-wizard .wizard-remembered-item:not(.is-onboard) {
  background: rgba(22, 163, 74, 0.07);
  border-color: rgba(22, 163, 74, 0.45);
}
.visitor-wizard .wizard-remembered-item:not(.is-onboard) .wizard-host-role { color: #15803d; }
.visitor-wizard .wizard-remembered-item:not(.is-onboard) .wizard-remembered-item__person { color: #15803d; }
.visitor-wizard .wizard-remembered-item:not(.is-onboard) .visitor-checkout-card__go { color: #15803d; }

/* Remembered visitor who is already aboard: amber row, chip instead of the
   chevron, no pick. Palette = .visitor-return-chip (the iPad's amber). */
.visitor-wizard .wizard-remembered-item.is-onboard {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.55);
  cursor: default;
}
.visitor-wizard .wizard-remembered-item.is-onboard:active { transform: none; }
.visitor-wizard .wizard-remembered-item.is-onboard .wizard-host-role { color: #b45309; }
/* Facts about the row (what this visit may skip) as quiet chips in the
   trailing slot, before the chevron. */
.visitor-wizard .wizard-remembered-item__facts {
  margin-left: auto;
  display: flex;
  gap: calc(8 * var(--ui-unit));
  flex-shrink: 0;
}
.visitor-wizard .wizard-remembered-item__fact {
  height: calc(30 * var(--ui-unit));
  padding: 0 calc(12 * var(--ui-unit));
  font-size: calc(13 * var(--ui-unit));
}
.visitor-wizard .wizard-remembered-item__chip {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  border: 1.5px solid currentColor;
}
.visitor-wizard .wizard-remembered-item__person svg {
  width: calc(30 * var(--ui-unit));
  height: calc(30 * var(--ui-unit));
  color: #9aa5b1;
}

/* Company suggestions: a building glyph in the avatar circle. */
.visitor-wizard .wizard-company-suggestion__glyph svg {
  width: calc(28 * var(--ui-unit));
  height: calc(28 * var(--ui-unit));
  color: #9aa5b1;
}

/* Top bar: home glyph on the first step, back arrow after it; × on the right
   from the second step (the first has nothing to lose). */
.visitor-wizard .wizard-topbar .wizard-topbar__ico-back,
.visitor-wizard .wizard-topbar.is-back .wizard-topbar__ico-home {
  display: none;
}

.visitor-wizard .wizard-topbar.is-back .wizard-topbar__ico-back {
  display: block;
}

.visitor-wizard .wizard-topbar__x {
  justify-self: end;
}

.visitor-wizard .wizard-topbar__x.hidden {
  visibility: hidden;
  display: inline-flex; /* keep the grid slot so the title stays centred */
}

/* ── Contact number: country chip + picker sheet (2026-08-30) ──────────────
   The chip sits inside the bar, split from the number by a hairline. The bar
   becomes a flex row, so its underline goes absolute to keep the same spot
   the other bars put it in flow (above the 10u bottom padding). */
.visitor-wizard .vso-type--cc {
  display: flex;
  align-items: center;
}

.visitor-wizard .vso-type--cc input[type="tel"] {
  flex: 1;
  min-width: 0;
}

.visitor-wizard .vso-type--cc .vso-ul {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10 * var(--ui-unit));
  margin-top: 0;
}

.visitor-wizard .wizard-cc {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--ui-unit));
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 0 calc(18 * var(--ui-unit)) 0 0;
  margin-right: calc(18 * var(--ui-unit));
  border-right: 2px solid var(--wizard-border);
  height: calc(52 * var(--ui-unit));
  -webkit-tap-highlight-color: transparent;
}

.visitor-wizard .wizard-cc__flag {
  font-size: calc(34 * var(--ui-unit));
  line-height: 1;
}

.visitor-wizard .wizard-cc__dial {
  font-size: calc(30 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wizard-text);
  font-variant-numeric: tabular-nums;
}

.visitor-wizard .wizard-cc__chev {
  width: calc(20 * var(--ui-unit));
  height: calc(20 * var(--ui-unit));
  color: #9aa5b1;
}

/* A typed + puts the chip in "International" mode. */
.visitor-wizard .wizard-cc.is-intl .wizard-cc__flag {
  display: none;
}

.visitor-wizard .wizard-cc.is-intl .wizard-cc__dial {
  color: var(--wizard-muted);
  font-size: calc(22 * var(--ui-unit));
}

/* Quiet reassurance line: "Saves as +44 7712 345678". */
.visitor-wizard .wizard-cc-saved {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--ui-unit));
  margin-top: calc(14 * var(--ui-unit));
  font-size: calc(15 * var(--ui-unit));
  font-weight: 600;
  color: var(--wizard-muted);
  min-height: calc(22 * var(--ui-unit));
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.visitor-wizard .wizard-cc-saved.show {
  opacity: 1;
}

.visitor-wizard .wizard-cc-saved svg {
  width: calc(15 * var(--ui-unit));
  height: calc(15 * var(--ui-unit));
  color: #16a34a;
  flex: none;
}

.visitor-wizard .wizard-cc-saved b {
  color: var(--wizard-text);
  font-weight: 700;
}

/* The picker sheet covers the whole step, its own topbar carries the back. */
.visitor-wizard .wizard-ccsheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--wizard-bg);
  display: none;
  flex-direction: column;
  padding: 0 calc(40 * var(--ui-unit)) calc(16 * var(--ui-unit));
  box-sizing: border-box;
}

.visitor-wizard .wizard-ccsheet.open {
  display: flex;
}

.visitor-wizard .wizard-ccsheet__col {
  width: 100%;
  max-width: calc(900 * var(--ui-unit));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.visitor-wizard .wizard-ccsheet__bar {
  flex: none;
}

/* Beat the .wizard-name bar's 38u input rule — the search bar is one size down. */
.visitor-wizard .wizard-name .wizard-ccsheet__bar input[type="text"] {
  font-size: calc(30 * var(--ui-unit));
  letter-spacing: -0.02em;
}

.visitor-wizard .wizard-ccsheet__hd {
  font-size: calc(13 * var(--ui-unit));
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wizard-muted);
  margin: calc(20 * var(--ui-unit)) 0 calc(8 * var(--ui-unit));
}

.visitor-wizard .wizard-ccsheet__list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0 2px calc(24 * var(--ui-unit));
  -webkit-overflow-scrolling: touch;
}

.visitor-wizard .wizard-ccgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(8 * var(--ui-unit)) calc(18 * var(--ui-unit));
}

body.app-portrait .visitor-wizard .wizard-ccgrid {
  grid-template-columns: 1fr;
}

.visitor-wizard .wizard-ccrow {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--ui-unit));
  border: 0;
  text-align: left;
  background: #fff;
  border-radius: calc(14 * var(--ui-unit));
  padding: calc(13 * var(--ui-unit)) calc(16 * var(--ui-unit));
  cursor: pointer;
  font: inherit;
  color: var(--wizard-text);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  -webkit-tap-highlight-color: transparent;
}

.visitor-wizard .wizard-ccrow:active {
  background: #eef2f6;
}

.visitor-wizard .wizard-ccrow.is-selected {
  outline: 2px solid #0b1220;
  outline-offset: -2px;
}

.visitor-wizard .wizard-ccrow__flag {
  font-size: calc(27 * var(--ui-unit));
  line-height: 1;
  flex: none;
}

.visitor-wizard .wizard-ccrow__name {
  font-size: calc(18 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visitor-wizard .wizard-ccrow__dial {
  font-size: calc(16 * var(--ui-unit));
  font-weight: 700;
  color: var(--wizard-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.visitor-wizard .wizard-ccnone {
  font-size: calc(17 * var(--ui-unit));
  font-weight: 600;
  color: var(--wizard-muted);
  padding: calc(18 * var(--ui-unit)) 0;
}

/* ==========================================================================
   Welcome agreement — the paper sheet (2026-08-29 redesign)
   ========================================================================== */
/* The wizard fills the screen on this step so the sheet can run off the
   bottom; the dialog becomes a column and the step grows into it. */
.visitor-wizard.wizard--agree .wizard-dialog {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.visitor-wizard.wizard--agree .wizard-content,
.visitor-wizard.wizard--agree .wizard-step[data-step="4"] {
  flex: 1;
  min-height: 0;
}

.visitor-wizard .wizard-agree {
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
}

.visitor-wizard .wizard-agree__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(16 * var(--ui-unit));
  margin-bottom: calc(12 * var(--ui-unit));
}

.visitor-wizard .wizard-agree__heading .wizard-name__title {
  margin: 0;
}

.visitor-wizard .wizard-agree__readout {
  margin: 0;
  font-weight: 600;
  font-size: calc(14 * var(--ui-unit));
  color: var(--wizard-muted);
  white-space: nowrap;
}

.visitor-wizard .wizard-agree__readout b {
  color: var(--wizard-primary-strong);
  font-variant-numeric: tabular-nums;
}

.visitor-wizard .wizard-agree__readout.is-done b {
  color: #16a34a;
}

/* the paper */
.visitor-wizard .wizard-agree__paper {
  position: relative;
  isolation: isolate;
  flex: 1;
  min-height: 0;
  background: var(--wizard-card);
  border-radius: calc(20 * var(--ui-unit)) calc(20 * var(--ui-unit)) 0 0;
  box-shadow: 0 -1px 0 var(--wizard-border), 0 12px 40px -18px rgba(26, 36, 53, 0.3);
  overflow: hidden;
}

.visitor-wizard .wizard-agree__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--wizard-border);
  z-index: 2;
  will-change: transform;
  transform: translateZ(0);
}

.visitor-wizard .wizard-agree__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--wizard-primary);
  transition: width 0.15s linear;
}

/* The scroll box: no longer a bordered card of fixed height. `!important`
   on height beats the legacy .agreement-unlocked / portrait height rules
   (shared with the vehicle wizard, so they stay). PDF pages sit on a grey
   ground, full width, no nested frame. */
.visitor-wizard .wizard-agree .wizard-agreement-scroll {
  position: absolute;
  inset: 0;
  height: auto !important;
  flex: none;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #e9edf1;
  padding: calc(18 * var(--ui-unit)) calc(18 * var(--ui-unit)) calc(40 * var(--ui-unit));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: none;
}

.visitor-wizard .wizard-agree .wizard-agreement-viewer {
  gap: calc(18 * var(--ui-unit));
}

.visitor-wizard .wizard-agree .wizard-agreement-viewer .pdfjs-page {
  width: 100%;
  max-width: none;
  border-radius: calc(6 * var(--ui-unit));
  box-shadow: 0 1px 0 var(--wizard-border), 0 10px 30px -18px rgba(26, 36, 53, 0.35);
}

.visitor-wizard .wizard-agree .wizard-agreement-placeholder,
.visitor-wizard .wizard-agree .wizard-nda-missing {
  padding: calc(40 * var(--ui-unit)) calc(20 * var(--ui-unit));
  font-size: calc(16 * var(--ui-unit));
  text-align: center;
}

/* the foot of the document: terms, signature, Continue — inline like paper */
.visitor-wizard .wizard-agree__foot {
  margin-top: calc(18 * var(--ui-unit));
  background: var(--wizard-card);
  border-radius: calc(16 * var(--ui-unit));
  padding: calc(26 * var(--ui-unit)) calc(28 * var(--ui-unit));
  display: flex;
  flex-direction: column;
  gap: 0;
}

.visitor-wizard .wizard-agree .wizard-supplemental {
  display: block;
  margin-bottom: calc(22 * var(--ui-unit));
}

.visitor-wizard .wizard-agree__terms {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--ui-unit));
  padding: calc(14 * var(--ui-unit)) calc(16 * var(--ui-unit));
  border: 1px solid var(--wizard-border);
  border-radius: calc(14 * var(--ui-unit));
  font-weight: 600;
  font-size: calc(15 * var(--ui-unit));
  color: var(--wizard-text);
  cursor: pointer;
  text-align: left;
}

.visitor-wizard .wizard-agree__terms input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.visitor-wizard .wizard-agree__box {
  width: calc(26 * var(--ui-unit));
  height: calc(26 * var(--ui-unit));
  border-radius: calc(7 * var(--ui-unit));
  border: 2px solid #b7c0cb;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}

.visitor-wizard .wizard-agree__box svg {
  width: 70%;
  height: 70%;
  display: none;
}

.visitor-wizard .wizard-agree__terms input:checked ~ .wizard-agree__box {
  background: var(--wizard-primary);
  border-color: var(--wizard-primary);
}

.visitor-wizard .wizard-agree__terms input:checked ~ .wizard-agree__box svg {
  display: block;
}

.visitor-wizard .wizard-agree__terms input:focus-visible ~ .wizard-agree__box {
  box-shadow: 0 0 0 3px rgba(31, 173, 162, 0.3);
}

.visitor-wizard .wizard-agree__terms-text {
  flex: 1;
  min-width: 0;
}

.visitor-wizard .wizard-agree__terms .wizard-nda-link {
  margin-left: auto;
  white-space: nowrap;
  font-size: calc(14 * var(--ui-unit));
  color: var(--wizard-primary-strong);
}

/* signature: always present at the foot (the legacy lock hid it until the
   bottom; here the bottom IS where it lives) */
.visitor-wizard .wizard-agree .wizard-signature,
.visitor-wizard .wizard-agree .wizard-signature.is-locked {
  opacity: 1;
  max-height: none;
  overflow: visible;
  margin: 0;
  pointer-events: auto;
  transition: none;
  gap: 0;
}

.visitor-wizard .wizard-agree__siglabel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(8 * var(--ui-unit));
}

.visitor-wizard .wizard-agree__siglabel span {
  font-weight: 700;
  font-size: calc(13 * var(--ui-unit));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-agree__siglabel .link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: calc(14 * var(--ui-unit));
  color: var(--wizard-primary-strong);
  cursor: pointer;
}

.visitor-wizard .wizard-agree .signature-pad {
  height: calc(220 * var(--ui-unit)); /* 150 was "quite difficult to sign" (founder) */
  border-radius: calc(16 * var(--ui-unit));
  border: 2px dashed #c9d2db;
  background: #f6f8fa;
}

.visitor-wizard .wizard-agree .signature-pad.has-ink {
  border-style: solid;
  border-color: var(--wizard-primary);
  background: #fff;
}

.visitor-wizard .wizard-agree .signature-pad__line {
  position: absolute;
  left: calc(20 * var(--ui-unit));
  right: calc(20 * var(--ui-unit));
  bottom: calc(52 * var(--ui-unit));
  border-top: 1px solid #c9d2db;
  pointer-events: none;
}

.visitor-wizard .wizard-agree .signature-pad__placeholder {
  inset: auto auto calc(14 * var(--ui-unit)) calc(20 * var(--ui-unit));
  display: block;
  font-weight: 600;
  font-size: calc(15 * var(--ui-unit));
  color: #b7c0cb;
}

.visitor-wizard .wizard-agree__signedas {
  margin: calc(10 * var(--ui-unit)) 0 0;
  font-weight: 500;
  font-size: calc(14 * var(--ui-unit));
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-agree__signedas:empty {
  display: none;
}

.visitor-wizard .wizard-agree__signedas b {
  color: var(--wizard-text);
  font-weight: 600;
}

/* the shared Continue bar lands in the foot; on this step it is the one
   green go button */
.visitor-wizard .wizard-agree .wizard-actions {
  display: block;
  margin-top: calc(22 * var(--ui-unit));
  padding: 0;
}

.visitor-wizard .wizard-agree .wizard-actions .wizard-primary {
  height: calc(64 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  font-size: calc(19 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.01em;
  background: #16a34a;
  box-shadow: none;
  transition: opacity 0.2s ease;
}

.visitor-wizard .wizard-agree .wizard-actions .wizard-primary:disabled {
  background: #16a34a;
  opacity: 0.3;
}

/* keep-reading pill; hidden = faded */
.visitor-wizard .wizard-agree__pill {
  position: absolute;
  left: 50%;
  bottom: calc(22 * var(--ui-unit));
  transform: translateX(-50%);
  background: var(--color-dark, #0b1220);
  color: #fff;
  font-weight: 700;
  font-size: calc(14.5 * var(--ui-unit));
  padding: calc(11 * var(--ui-unit)) calc(18 * var(--ui-unit));
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  gap: calc(8 * var(--ui-unit));
  box-shadow: 0 10px 30px -10px rgba(11, 18, 32, 0.5);
  z-index: 3;
  /* tappable (founder 08-31: "it looks like a button") — tap pages the
     document down; hidden state restores pointer-events:none below */
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease, transform 0.25s ease;
  /* own compositing layer: WKWebView otherwise lets the touch-scrolling
     sheet paint over it (pill invisible on device, fine headless) */
  will-change: transform, opacity;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

.visitor-wizard .wizard-agree__pill:active {
  transform: translate3d(-50%, 0, 0) scale(0.95);
}

.visitor-wizard .wizard-agree__pill svg {
  width: calc(16 * var(--ui-unit));
  height: calc(16 * var(--ui-unit));
  animation: wizard-hint-bounce 1.4s ease-in-out infinite;
}

.visitor-wizard .wizard-agree__pill.hidden {
  opacity: 0;
  transform: translate3d(-50%, calc(12 * var(--ui-unit)), 0);
  pointer-events: none; /* invisible = never eats a tap meant for the sheet */
}

/* ==========================================================================
   Host picker (2026-08-29 refresh) — big cards kept; top-bar chrome, bigger
   names, department as a pill, navy selection, green/coral presence.
   ========================================================================== */
.visitor-wizard .wizard-host {
  max-width: min(calc(900 * var(--ui-unit)), 100%);
  align-items: stretch;
  text-align: left;
  gap: 0;
  padding: calc(8 * var(--ui-unit)) 0 calc(24 * var(--ui-unit));
}

body.app-portrait .visitor-wizard .wizard-step[data-step] .wizard-host {
  padding-top: calc(8 * var(--ui-unit));
}

.visitor-wizard .wizard-host__heading {
  margin-bottom: calc(16 * var(--ui-unit));
}

.visitor-wizard .wizard-host__heading .wizard-name__title {
  margin: 0;
}

.visitor-wizard .wizard-host__sub {
  margin: calc(4 * var(--ui-unit)) 0 0;
  font-weight: 500;
  font-size: calc(15 * var(--ui-unit));
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-host .wizard-grid--hosts {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(calc(196 * var(--ui-unit)), 1fr));
  gap: calc(14 * var(--ui-unit));
  padding: calc(4 * var(--ui-unit)) 0;
  margin: 0;
  /* NOT a scroll box: a scroller clips at its edge and cut the last
     column's card (founder, mini portrait). The wizard itself scrolls on
     this step (.wizard--host) and its 40u side padding keeps shadows clear. */
  max-height: none;
  overflow: visible;
}

.visitor-wizard .wizard-host .wizard-host-option {
  position: relative;
  border-radius: calc(18 * var(--ui-unit));
  border: 2px solid var(--wizard-border);
  background: var(--wizard-card);
  box-shadow: var(--wizard-card-shadow);
  padding: calc(20 * var(--ui-unit)) calc(14 * var(--ui-unit)) calc(16 * var(--ui-unit));
  gap: calc(6 * var(--ui-unit));
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.visitor-wizard .wizard-host .wizard-host-option:hover {
  border-color: #9aa7b8;
  transform: none;
}

.visitor-wizard .wizard-host .wizard-host-option:active {
  transform: scale(0.985);
}

.visitor-wizard .wizard-host .wizard-host-option.is-selected {
  border-color: var(--color-dark, #0b1220);
  background: var(--wizard-card);
  /* the ring is INSET so nothing paints outside the card box */
  box-shadow: inset 0 0 0 2px var(--color-dark, #0b1220), var(--wizard-card-shadow);
}

/* this step scrolls as a whole: the modal is the scroller, the dialog
   must not clip (its overflow-x:hidden was the second cutter) */
.visitor-wizard.wizard--host {
  overflow-y: auto;
  overflow-x: hidden;
}

.visitor-wizard.wizard--host .wizard-dialog {
  overflow: visible;
  max-height: none;
}

/* the tick badge: only on the chosen card */
.visitor-wizard .wizard-host .wizard-host-tick {
  position: absolute;
  top: calc(10 * var(--ui-unit));
  right: calc(10 * var(--ui-unit));
  width: calc(28 * var(--ui-unit));
  height: calc(28 * var(--ui-unit));
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: none;
  place-items: center;
}

.visitor-wizard .wizard-host .wizard-host-tick svg {
  width: 62%;
  height: 62%;
}

.visitor-wizard .wizard-host .wizard-host-option.is-selected .wizard-host-tick {
  display: grid;
}

.visitor-wizard .wizard-host .wizard-host-avatar {
  width: calc(84 * var(--ui-unit));
  height: calc(84 * var(--ui-unit));
  font-size: calc(24 * var(--ui-unit));
  font-weight: 700;
  color: var(--wizard-text);
  background: #e8ecf1;
  box-shadow: 0 0 0 1px var(--wizard-border);
}

.visitor-wizard .wizard-host .wizard-host-option.is-selected .wizard-host-avatar {
  background: #e8ecf1;
  color: var(--wizard-text);
  box-shadow: 0 0 0 3px var(--color-dark, #0b1220);
}

.visitor-wizard .wizard-host .wizard-host-name {
  margin-top: calc(6 * var(--ui-unit));
  font-size: calc(21 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--wizard-text);
}

.visitor-wizard .wizard-host .wizard-host-role {
  font-size: calc(14 * var(--ui-unit));
  font-weight: 500;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-host .wizard-host-dept {
  display: inline-block;
  margin-top: calc(2 * var(--ui-unit));
  padding: calc(4 * var(--ui-unit)) calc(11 * var(--ui-unit));
  border-radius: 999px;
  background: #e8ecf1;
  color: var(--color-dark, #0b1220);
  font-size: calc(12.5 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1.5px solid currentColor;
}

.visitor-wizard .wizard-host .wizard-host-status {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--ui-unit));
  margin-top: calc(6 * var(--ui-unit));
  font-size: calc(12 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b6b43;
}

.visitor-wizard .wizard-host .wizard-host-status i {
  width: calc(8 * var(--ui-unit));
  height: calc(8 * var(--ui-unit));
  border-radius: 50%;
  background: #16a34a;
}

.visitor-wizard .wizard-host .wizard-host-status--ashore {
  color: #b02525;
}

.visitor-wizard .wizard-host .wizard-host-status--ashore i {
  background: #f9522e;
}

.visitor-wizard .wizard-host .wizard-empty {
  font-size: calc(16 * var(--ui-unit));
  padding: calc(30 * var(--ui-unit)) 0;
}

/* the shared Continue bar stays on this step, as a proper kiosk button */
.visitor-wizard .wizard-host .wizard-actions {
  padding-top: calc(18 * var(--ui-unit));
}

.visitor-wizard .wizard-host .wizard-actions .wizard-primary {
  height: calc(64 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  font-size: calc(19 * var(--ui-unit));
  font-weight: 700;
  background: var(--color-dark, #0b1220);
  box-shadow: none;
}

.visitor-wizard .wizard-host .wizard-actions .wizard-primary:disabled {
  background: var(--color-dark, #0b1220);
  opacity: 0.3;
}

/* ==========================================================================
   Check-in photo — the face circle (2026-08-29 redesign)
   ========================================================================== */
/* On this step the wizard is the camera: no padding, no dialog box, no
   floating Back/× (the step draws its own solid-white back button). */
.visitor-wizard.wizard--cam,
body.app-portrait .visitor-wizard.wizard--cam {
  padding: 0;
  background: #0b1220;
  overflow: hidden;
}

.visitor-wizard.wizard--cam .wizard-dialog {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.visitor-wizard.wizard--cam .wizard-content,
.visitor-wizard.wizard--cam .wizard-step[data-step="6"],
.visitor-wizard.wizard--cam .wizard-step[data-step="3"] {
  flex: 1;
  min-height: 0;
}

.visitor-wizard.wizard--cam .wizard-home {
  display: none;
}

.visitor-wizard .wizard-cam {
  position: relative;
  max-width: none;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  gap: 0;
  display: block;
  color: #fff;
  /* circle geometry: centred — hand-held at arm's length the face sits at
     the centre (founder was angling the iPad to chase a high circle) */
  --cam-cx: 50%;
  --cam-cy: 50%; /* the lens at eye level puts the eyes at frame centre */
  --cam-r: calc(215 * var(--ui-unit)); /* founder: a touch bigger — a small circle read as "closer than usual" */
  --cam-zoom: 1.2; /* keep in step with PHOTO_PREVIEW_ZOOM in app.js */
}

body.app-portrait .visitor-wizard .wizard-cam {
  --cam-cy: 50%;
  --cam-r: calc(240 * var(--ui-unit));
}

body.app-portrait .visitor-wizard .wizard-cam__caption {
  top: calc(var(--cam-cy) + var(--cam-r) + calc(28 * var(--ui-unit)));
}

/* the feed fills the screen (mirrored like a selfie camera; the stored
   photo is drawn from the raw frame, so the crew board sees it true) */
/* [data-step="6"] in the selector outranks the legacy landscape rule that
   capped .wizard-photo at 720px / 45vh */
.visitor-wizard .wizard-step[data-step="6"] .wizard-cam .wizard-photo,
.visitor-wizard .wizard-step[data-step="3"] .wizard-cam .wizard-photo {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: #0b1220;
  max-width: none;
  max-height: none;
  margin: 0;
}

.visitor-wizard .wizard-cam .wizard-photo video,
.visitor-wizard .wizard-cam .wizard-photo__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

/* the live preview carries the zoom; the still is already cropped by it */
.visitor-wizard .wizard-cam .wizard-photo video {
  transform: scaleX(-1) scale(var(--cam-zoom, 1));
}

.visitor-wizard .wizard-cam .wizard-photo__still.hidden {
  display: none;
}

/* dimmed mask with the circle cut out */
.visitor-wizard .wizard-cam__mask {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 20, 0.62);
  -webkit-mask: radial-gradient(circle at var(--cam-cx) var(--cam-cy), transparent calc(var(--cam-r) - 1px), #000 var(--cam-r));
  mask: radial-gradient(circle at var(--cam-cx) var(--cam-cy), transparent calc(var(--cam-r) - 1px), #000 var(--cam-r));
  transition: background 0.3s ease;
  pointer-events: none;
}

.visitor-wizard .wizard-cam.has-photo .wizard-cam__mask {
  background: rgba(5, 10, 20, 0.78);
}

/* the ring: thin white at rest, green sweep while counting, solid green once shot.
   z above the caption so the caption's device-rasterized shadow box can never
   paint over the ring edge. */
.visitor-wizard .wizard-cam__ring {
  position: absolute;
  left: var(--cam-cx);
  top: var(--cam-cy);
  width: calc(var(--cam-r) * 2 + calc(14 * var(--ui-unit)));
  height: calc(var(--cam-r) * 2 + calc(14 * var(--ui-unit)));
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
  z-index: 6;
  /* THE flat-edge fix: the circle is r=47 + half a 6u stroke ≈ 50.26 in a
     50-radius viewBox, and SVG clips to its viewport by default — shaving
     the ring flat exactly at top/bottom/left/right (founder, 08-31). */
  overflow: visible;
}

/* photo taken: the ground behind the caption is dark — the shadow buys nothing
   and its layer box was the black rectangle on device. */
.visitor-wizard .wizard-cam.has-photo .wizard-cam__caption {
  text-shadow: none;
}

/* the capture flash stays above the raised ring */
.visitor-wizard .wizard-cam .wizard-photo__flash {
  z-index: 8;
}

/* Agreement pages fade in instead of popping — only matters on a cold load;
   normally they're preloaded at wizard open and step 4 shows them instantly. */
#wizardAgreementViewer .pdfjs-page {
  animation: agree-page-in 0.28s ease both;
}

@keyframes agree-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.visitor-wizard .wizard-cam__ring circle {
  fill: none;
  stroke-width: calc(6 * var(--ui-unit));
}

.visitor-wizard .wizard-cam__track {
  stroke: rgba(255, 255, 255, 0.55);
}

.visitor-wizard .wizard-cam__sweep {
  stroke: #16a34a;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.visitor-wizard .wizard-cam.is-counting .wizard-cam__sweep {
  transition: stroke-dashoffset 3s linear;
  stroke-dashoffset: 0;
}

.visitor-wizard .wizard-cam.has-photo .wizard-cam__sweep {
  stroke-dashoffset: 0;
}

.visitor-wizard .wizard-cam.has-photo .wizard-cam__track {
  stroke: #16a34a;
}

/* the count sits in the circle; the flash covers everything */
.visitor-wizard .wizard-cam .wizard-photo__countdown {
  position: absolute;
  left: var(--cam-cx);
  top: var(--cam-cy);
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  background: none;
  color: #fff;
  font-size: calc(96 * var(--ui-unit));
  font-weight: 800;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* a real shutter flash: full white, held while .is-active (220 ms), then a
   long fade — the old blink was barely visible (founder: "SignInApp does a
   much brighter flash") */
.visitor-wizard .wizard-cam .wizard-photo__flash {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.visitor-wizard .wizard-cam .wizard-photo__flash.hidden {
  display: block !important;
}

.visitor-wizard .wizard-cam .wizard-photo__flash.is-active {
  opacity: 1;
  transition: none;
}

/* chrome on the feed: solid white back, one caption, the actions */
.visitor-wizard .wizard-cam__back {
  position: absolute;
  left: calc(40 * var(--ui-unit));
  top: calc(calc(12 * var(--ui-unit)) + env(safe-area-inset-top, 0px));
  width: calc(56 * var(--ui-unit));
  height: calc(56 * var(--ui-unit));
  border-radius: calc(16 * var(--ui-unit));
  border: 0;
  background: #fff;
  color: var(--wizard-text, #1a2435);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 5;
  padding: 0;
}

.visitor-wizard .wizard-cam__back svg {
  width: calc(24 * var(--ui-unit));
  height: calc(24 * var(--ui-unit));
}

.visitor-wizard .wizard-cam__caption {
  position: absolute;
  left: 0;
  right: 0;
  /* Below the ring (z) — on device the caption's text-shadow rasterizes into
     an opaque black layer box that was painting over the ring's nearest edge
     (top in landscape, bottom in portrait — founder, 08-31). */
  z-index: 5;
  /* landscape: ABOVE the circle — below it, the 215u circle leaves no room
     before the Take photo button (founder screenshot: caption under button) */
  top: calc(var(--cam-cy) - var(--cam-r) - calc(64 * var(--ui-unit)));
  text-align: center;
  color: #fff;
  font-size: calc(32 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  padding: 0 calc(40 * var(--ui-unit));
  pointer-events: none;
}

.visitor-wizard .wizard-cam__acts {
  position: absolute;
  left: calc(40 * var(--ui-unit));
  right: calc(40 * var(--ui-unit));
  bottom: calc(calc(34 * var(--ui-unit)) + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  gap: calc(14 * var(--ui-unit));
  z-index: 5;
}

.visitor-wizard .wizard-cam__btn {
  height: calc(64 * var(--ui-unit));
  padding: 0 calc(34 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: calc(19 * var(--ui-unit));
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--ui-unit));
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.visitor-wizard .wizard-cam__btn.hidden {
  display: none;
}

.visitor-wizard .wizard-cam__btn svg {
  width: calc(22 * var(--ui-unit));
  height: calc(22 * var(--ui-unit));
}

.visitor-wizard .wizard-cam__btn--go {
  background: #16a34a;
  color: #fff;
  min-width: calc(280 * var(--ui-unit));
}

.visitor-wizard .wizard-cam__btn--white {
  background: #fff;
  color: var(--wizard-text, #1a2435);
}

.visitor-wizard .wizard-cam__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.visitor-wizard .wizard-cam.is-counting .wizard-cam__acts {
  visibility: hidden;
}

.visitor-wizard .wizard-cam__error {
  position: absolute;
  left: calc(40 * var(--ui-unit));
  right: calc(40 * var(--ui-unit));
  top: calc(calc(84 * var(--ui-unit)) + env(safe-area-inset-top, 0px));
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: calc(16 * var(--ui-unit));
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.visitor-wizard .wizard-cam__skip {
  position: absolute;
  right: calc(40 * var(--ui-unit));
  top: calc(calc(22 * var(--ui-unit)) + env(safe-area-inset-top, 0px));
  margin: 0;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: calc(15 * var(--ui-unit));
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  text-decoration: underline;
  cursor: pointer;
  z-index: 5;
}

.visitor-wizard .wizard-cam__skip.hidden,
.visitor-wizard .wizard-cam__error.hidden {
  display: none;
}

/* ==========================================================================
   Your details (step 9, 2026-08-29 refresh) — the receipt card
   ========================================================================== */
.visitor-wizard .wizard-review {
  max-width: min(calc(900 * var(--ui-unit)), 100%);
  align-items: stretch;
  text-align: left;
  gap: 0;
  padding: calc(8 * var(--ui-unit)) 0 calc(24 * var(--ui-unit));
}

body.app-portrait .visitor-wizard .wizard-step[data-step] .wizard-review {
  padding-top: calc(8 * var(--ui-unit));
}

.visitor-wizard .wizard-review__heading {
  margin-bottom: calc(16 * var(--ui-unit));
}

.visitor-wizard .wizard-review__heading .wizard-name__title {
  margin: 0;
}

.visitor-wizard .wizard-review__sub {
  margin: calc(4 * var(--ui-unit)) 0 0;
  font-weight: 500;
  font-size: calc(15 * var(--ui-unit));
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-review__card {
  display: flex;
  align-items: flex-start;
  gap: calc(28 * var(--ui-unit));
  background: var(--wizard-card);
  border: 2px solid var(--wizard-border);
  border-radius: calc(18 * var(--ui-unit));
  box-shadow: var(--wizard-card-shadow);
  padding: calc(24 * var(--ui-unit)) calc(26 * var(--ui-unit));
}

body.app-portrait .visitor-wizard .wizard-review__card {
  flex-direction: column;
  align-items: center;
}

.visitor-wizard .wizard-review__photo {
  flex: none;
  width: calc(150 * var(--ui-unit));
  height: calc(150 * var(--ui-unit));
  border-radius: 50%;
  overflow: hidden;
  background: #e8ecf1;
  box-shadow: 0 0 0 3px #16a34a; /* the photo just taken — green = done */
  position: relative;
  margin: 0;
}

.visitor-wizard .wizard-review__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* the visitor just posed in a mirrored preview; unmirrored here reads as
     "flipped" (founder). Display-only — the stored photo stays true. */
  transform: scaleX(-1);
}

.visitor-wizard .wizard-review__photo img.hidden {
  display: none;
}

.visitor-wizard .wizard-review__photo .wizard-overview-photo__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #9aa5b1;
}

.visitor-wizard .wizard-review__photo .wizard-overview-photo__fallback svg {
  width: 45%;
  height: 45%;
}

.visitor-wizard .wizard-review__photo .wizard-overview-photo__fallback.hidden {
  display: none;
}

.visitor-wizard .wizard-review__rows {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.visitor-wizard .wizard-review__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--ui-unit));
  padding: calc(13 * var(--ui-unit)) 0;
  border-top: 1px solid var(--wizard-border);
  margin: 0;
  cursor: default;
}

.visitor-wizard .wizard-review__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.visitor-wizard .wizard-review__label {
  flex: none;
  font-weight: 600;
  font-size: calc(15 * var(--ui-unit));
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-review__value {
  min-width: 0;
  text-align: right;
  font-weight: 700;
  font-size: calc(19 * var(--ui-unit));
  letter-spacing: -0.01em;
  color: var(--wizard-text);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(8 * var(--ui-unit));
  flex-wrap: wrap;
}

.visitor-wizard .wizard-review__value:empty::before {
  content: "—";
  color: var(--wizard-muted);
}

/* "(Bosun)" from populateWizardSummary, shown as the same bordered pill as the host cards */
.visitor-wizard .wizard-review__pill {
  display: inline-block;
  padding: calc(3 * var(--ui-unit)) calc(10 * var(--ui-unit));
  border-radius: 999px;
  background: #e8ecf1;
  color: var(--color-dark, #0b1220);
  font-size: calc(12.5 * var(--ui-unit));
  font-weight: 700;
  border: 1.5px solid currentColor;
  opacity: 1;
}

.visitor-wizard .wizard-review__pill.hidden,
.visitor-wizard .wizard-review__pill:empty {
  display: none;
}

/* the Remember row: same row grammar, the switch on the right, kiosk-sized */
.visitor-wizard .wizard-review .wizard-remember-toggle {
  cursor: pointer;
  background: none;
  border-radius: 0;
  /* Same padding as every other review row: with padding-bottom 0 the
     switch sat on the next row's hairline (founder 2026-09-09). */
  width: auto;
  max-width: none;
  margin: 0;
}

.visitor-wizard .wizard-review .wizard-remember-toggle__label {
  font-weight: 600;
  font-size: calc(16 * var(--ui-unit));
  color: var(--wizard-text);
}

.visitor-wizard .wizard-review .switch {
  flex: none;
  width: calc(64 * var(--ui-unit));
  height: calc(36 * var(--ui-unit));
}

.visitor-wizard .wizard-review .switch .slider::before {
  width: calc(28 * var(--ui-unit));
  height: calc(28 * var(--ui-unit));
}

.visitor-wizard .wizard-review .switch input:checked + .slider::before {
  transform: translateX(calc(28 * var(--ui-unit)));
}

/* the final go: green */
.visitor-wizard .wizard-review .wizard-actions {
  padding-top: calc(18 * var(--ui-unit));
}

.visitor-wizard .wizard-review .wizard-actions .wizard-primary {
  height: calc(64 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  font-size: calc(19 * var(--ui-unit));
  font-weight: 700;
  background: #16a34a;
  box-shadow: none;
}

/* the tick draws itself on after the spring lands (founder picked "solid +
   tick draws on", stroke direction = how a hand draws it) */
.visitor-wizard .wizard-complete-icon svg polyline,
.visitor-checkout-success-modal .wizard-complete-icon svg polyline {
  /* real path length (~23 units) — tiny pathLength dashes glitch in WebKit */
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: tick-draw 0.4s ease-out 0.55s forwards;
}

@keyframes tick-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .visitor-wizard .wizard-complete-icon svg polyline,
  .visitor-checkout-success-modal .wizard-complete-icon svg polyline {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* the frozen shot lives IN the circle, so live → freeze → review match */
.visitor-wizard .wizard-cam .wizard-photo__still {
  inset: auto;
  /* 2px larger than the mask cutout on every side: sized EXACTLY to it,
     subpixel rounding left a hairline dark edge between the photo and the
     ring (founder, landscape 08-31). The overlap hides under the ring. */
  left: calc(var(--cam-cx) - var(--cam-r) - 2px);
  top: calc(var(--cam-cy) - var(--cam-r) - 2px);
  width: calc(var(--cam-r) * 2 + 4px);
  height: calc(var(--cam-r) * 2 + 4px);
  border-radius: 50%;
  object-fit: cover;
}

/* ==========================================================================
   Visit type (step 11, 2026-08-30 refresh) — host-card grammar
   ========================================================================== */
.visitor-wizard .wizard-visitmode {
  max-width: min(calc(900 * var(--ui-unit)), 100%);
  align-items: stretch;
  text-align: left;
  gap: 0;
  padding: calc(8 * var(--ui-unit)) 0 calc(24 * var(--ui-unit));
}

body.app-portrait .visitor-wizard .wizard-step[data-step] .wizard-visitmode {
  padding-top: calc(8 * var(--ui-unit));
}

.visitor-wizard .wizard-visitmode__heading {
  margin-bottom: calc(16 * var(--ui-unit));
}

.visitor-wizard .wizard-visitmode__heading .wizard-name__title {
  margin: 0;
}

.visitor-wizard .wizard-visitmode__sub {
  margin: calc(4 * var(--ui-unit)) 0 0;
  font-weight: 500;
  font-size: calc(15 * var(--ui-unit));
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-visitmode .wizard-choice-grid {
  display: grid;
  width: 100%;
  max-width: none;
  margin: 0;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--ui-unit));
  padding: calc(4 * var(--ui-unit)) 0;
}

body.app-portrait .visitor-wizard .wizard-visitmode .wizard-choice-grid {
  grid-template-columns: 1fr;
}

.visitor-wizard .wizard-visitmode .wizard-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--ui-unit));
  border: 2px solid var(--wizard-border);
  border-radius: calc(18 * var(--ui-unit));
  background: var(--wizard-card);
  box-shadow: var(--wizard-card-shadow);
  padding: calc(26 * var(--ui-unit)) calc(18 * var(--ui-unit)) calc(22 * var(--ui-unit));
  cursor: pointer;
  font: inherit;
  color: var(--wizard-text);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.visitor-wizard .wizard-visitmode .wizard-choice:hover {
  border-color: #9aa7b8;
  transform: none;
  box-shadow: var(--wizard-card-shadow);
}

.visitor-wizard .wizard-visitmode .wizard-choice:active {
  transform: scale(0.985);
}

.visitor-wizard .wizard-visitmode .wizard-choice.is-selected {
  border-color: var(--color-dark, #0b1220);
  background: var(--wizard-card);
  box-shadow: 0 0 0 3px rgba(11, 18, 32, 0.12), var(--wizard-card-shadow);
}

.visitor-wizard .wizard-visitmode .wizard-choice .wizard-host-tick {
  position: absolute;
  top: calc(10 * var(--ui-unit));
  right: calc(10 * var(--ui-unit));
  width: calc(28 * var(--ui-unit));
  height: calc(28 * var(--ui-unit));
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: none;
  place-items: center;
}

.visitor-wizard .wizard-visitmode .wizard-choice .wizard-host-tick svg {
  width: 62%;
  height: 62%;
}

.visitor-wizard .wizard-visitmode .wizard-choice.is-selected .wizard-host-tick {
  display: grid;
}

.visitor-wizard .wizard-visitmode .wizard-choice__icon {
  width: calc(84 * var(--ui-unit));
  height: calc(84 * var(--ui-unit));
  border-radius: 50%;
  background: #e8ecf1;
  color: var(--wizard-text);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px var(--wizard-border);
}

.visitor-wizard .wizard-visitmode .wizard-choice__icon svg {
  width: calc(40 * var(--ui-unit));
  height: calc(40 * var(--ui-unit));
}

.visitor-wizard .wizard-visitmode .wizard-choice.is-selected .wizard-choice__icon {
  background: #e8ecf1;
  color: var(--wizard-text);
  box-shadow: 0 0 0 3px var(--color-dark, #0b1220);
}

.visitor-wizard .wizard-visitmode .wizard-choice__title {
  margin-top: calc(6 * var(--ui-unit));
  font-size: calc(21 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.015em;
}

.visitor-wizard .wizard-visitmode .wizard-choice__sub {
  font-size: calc(14 * var(--ui-unit));
  font-weight: 500;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-visitmode .wizard-actions {
  padding-top: calc(18 * var(--ui-unit));
}

.visitor-wizard .wizard-visitmode .wizard-actions .wizard-primary {
  height: calc(64 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  font-size: calc(19 * var(--ui-unit));
  font-weight: 700;
  background: var(--color-dark, #0b1220);
  box-shadow: none;
}

.visitor-wizard .wizard-visitmode .wizard-actions .wizard-primary:disabled {
  background: var(--color-dark, #0b1220);
  opacity: 0.3;
}

/* ==========================================================================
   Security search (steps 7 + 8, 2026-08-30 refresh)
   ========================================================================== */
.visitor-wizard .wizard-secpin,
.visitor-wizard .wizard-officer {
  max-width: min(calc(900 * var(--ui-unit)), 100%);
  align-items: stretch;
  text-align: left;
  gap: 0;
  padding: calc(8 * var(--ui-unit)) 0 calc(24 * var(--ui-unit));
}

body.app-portrait .visitor-wizard .wizard-step[data-step] .wizard-secpin,
body.app-portrait .visitor-wizard .wizard-step[data-step] .wizard-officer {
  padding-top: calc(8 * var(--ui-unit));
}

.visitor-wizard .wizard-secpin__heading,
.visitor-wizard .wizard-officer__heading {
  margin-bottom: calc(16 * var(--ui-unit));
}

.visitor-wizard .wizard-secpin__heading .wizard-name__title,
.visitor-wizard .wizard-officer__heading .wizard-name__title {
  margin: 0;
}

.visitor-wizard .wizard-secpin__title {
  color: #dc2626; /* the urgency stays */
  font-size: calc(32 * var(--ui-unit));
}

.visitor-wizard .wizard-secpin__sub,
.visitor-wizard .wizard-officer__sub {
  margin: calc(4 * var(--ui-unit)) 0 0;
  font-weight: 500;
  font-size: calc(15 * var(--ui-unit));
  color: var(--wizard-muted);
}

/* the PIN is a bare line with the dots — no box (founder: "sleekness,
   like our new screens"); same grammar as the name bar */
.visitor-wizard .wizard-secpin__card,
.visitor-pass-pin .wizard-secpin__card {
  width: min(calc(380 * var(--ui-unit)), 100%);
  margin: 0 auto; /* centred (founder) */
  background: none;
  border: 0;
  box-shadow: none;
  padding: calc(6 * var(--ui-unit)) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--ui-unit));
}

.visitor-wizard .wizard-secpin__label,
.visitor-pass-pin .wizard-secpin__label {
  font-weight: 700;
  font-size: calc(13 * var(--ui-unit));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-secpin__card input,
.visitor-pass-pin .wizard-secpin__card input {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--wizard-border);
  border-radius: 0;
  background: transparent;
  outline: 0;
  font: inherit;
  font-weight: 700;
  font-size: calc(44 * var(--ui-unit));
  letter-spacing: calc(18 * var(--ui-unit));
  text-indent: calc(18 * var(--ui-unit)); /* balances the trailing letter-space */
  text-align: center;
  color: #000; /* the dots read too soft in ink-navy */
  caret-color: #dc2626;
  padding: 0 0 calc(10 * var(--ui-unit));
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.25s ease;
}

.visitor-wizard .wizard-secpin__card input:focus,
.visitor-pass-pin .wizard-secpin__card input:focus {
  border-bottom-color: #dc2626; /* this screen's accent is the urgency red */
  box-shadow: none;
}

.visitor-wizard .wizard-secpin__card input::placeholder,
.visitor-pass-pin .wizard-secpin__card input::placeholder {
  color: #6b7280;
}

.visitor-wizard .wizard-secpin .wizard-actions {
  padding-top: calc(18 * var(--ui-unit));
}

.visitor-wizard .wizard-secpin .wizard-actions .wizard-primary:not(.wizard-primary--assist) {
  height: calc(64 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  font-size: calc(19 * var(--ui-unit));
  font-weight: 700;
  background: var(--color-dark, #0b1220);
  box-shadow: none;
}

.visitor-wizard .wizard-secpin .wizard-actions .wizard-primary:not(.wizard-primary--assist):disabled {
  background: var(--color-dark, #0b1220);
  opacity: 0.3;
}

/* the assist button joins the family: go-green, no glow wash behind it */
.visitor-wizard .wizard-secpin .wizard-actions .wizard-primary--assist {
  height: calc(64 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  font-size: calc(19 * var(--ui-unit));
  font-weight: 700;
  background: #16a34a;
  box-shadow: none;
}

.visitor-wizard .wizard-secpin .wizard-actions .wizard-primary--assist svg {
  stroke-width: 2.4;
}

/* Assist button states (2026-08-30): the button is its own confirmation.
   sending = dimmed green; sent = solid green + tick, one soft pop;
   error/offline = this screen's red, still tappable to retry. */
.visitor-wizard .wizard-primary--assist .wizard-assist__ico-check {
  display: none;
}

.visitor-wizard .wizard-primary--assist.is-sent .wizard-assist__ico-phone {
  display: none;
}

.visitor-wizard .wizard-primary--assist.is-sent .wizard-assist__ico-check {
  display: block;
}

.visitor-wizard .wizard-secpin .wizard-actions .wizard-primary--assist:disabled {
  background: #16a34a;
  box-shadow: none;
  cursor: default;
  opacity: 0.55;
}

.visitor-wizard .wizard-secpin .wizard-actions .wizard-primary--assist.is-sent:disabled {
  opacity: 1;
  animation: assist-sent-pop 0.35s ease;
}

.visitor-wizard .wizard-secpin .wizard-actions .wizard-primary--assist.is-error {
  background: #dc2626;
}

@keyframes assist-sent-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.visitor-wizard .wizard-secpin .wizard-pin-help {
  margin: calc(6 * var(--ui-unit)) 0 calc(2 * var(--ui-unit));
}

.visitor-wizard .wizard-secpin .wizard-pin-help p {
  font-weight: 600;
  font-size: calc(14 * var(--ui-unit));
  color: var(--wizard-muted);
}

/* officer step: the name bar */
.visitor-wizard .wizard-officer__bar .vso-type input {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: 0;
  font: inherit;
  font-weight: 700;
  font-size: calc(32 * var(--ui-unit));
  letter-spacing: -0.025em;
  color: var(--wizard-text);
  padding: 0;
  caret-color: var(--wizard-primary);
  -webkit-appearance: none;
  appearance: none;
}

.visitor-wizard .wizard-officer__bar .vso-type input::placeholder {
  color: #b7c0cb;
  font-weight: 600;
}

.visitor-wizard .wizard-officer__bar .vso-type input::-webkit-search-cancel-button {
  display: none;
}

/* officer cards: host grammar, one size down */
.visitor-wizard .wizard-officer .wizard-grid--crew {
  display: grid;
  width: 100%;
  max-width: none;
  margin: calc(14 * var(--ui-unit)) 0 0;
  grid-template-columns: repeat(auto-fill, minmax(calc(160 * var(--ui-unit)), 1fr));
  gap: calc(12 * var(--ui-unit));
  padding: calc(4 * var(--ui-unit)) 0;
  max-height: none;
  overflow: visible;
}

.visitor-wizard .wizard-officer .wizard-crew-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--ui-unit));
  border: 2px solid var(--wizard-border);
  border-radius: calc(16 * var(--ui-unit));
  background: var(--wizard-card);
  box-shadow: var(--wizard-card-shadow);
  padding: calc(14 * var(--ui-unit)) calc(10 * var(--ui-unit)) calc(12 * var(--ui-unit));
  cursor: pointer;
  font: inherit;
  color: var(--wizard-text);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.visitor-wizard .wizard-officer .wizard-crew-option:hover {
  border-color: #9aa7b8;
  transform: none;
}

.visitor-wizard .wizard-officer .wizard-crew-option:active {
  transform: scale(0.985);
}

.visitor-wizard .wizard-officer .wizard-crew-option.is-selected {
  border-color: var(--color-dark, #0b1220);
  background: var(--wizard-card);
  box-shadow: 0 0 0 3px rgba(11, 18, 32, 0.12), var(--wizard-card-shadow);
}

.visitor-wizard .wizard-officer .wizard-crew-avatar {
  width: calc(60 * var(--ui-unit));
  height: calc(60 * var(--ui-unit));
  font-size: calc(18 * var(--ui-unit));
  background: #e8ecf1;
  color: var(--wizard-text);
  box-shadow: 0 0 0 1px var(--wizard-border);
}

.visitor-wizard .wizard-officer .wizard-crew-option.is-selected .wizard-crew-avatar {
  background: #e8ecf1;
  color: var(--wizard-text);
  box-shadow: 0 0 0 3px var(--color-dark, #0b1220);
}

.visitor-wizard .wizard-officer .wizard-crew-name {
  font-size: calc(16.5 * var(--ui-unit));
  font-weight: 700;
  letter-spacing: -0.01em;
}

.visitor-wizard .wizard-officer .wizard-crew-role {
  font-size: calc(12.5 * var(--ui-unit));
  font-weight: 500;
  color: var(--wizard-muted);
}

/* signature + ID type (agreement grammar) */
.visitor-wizard .wizard-officer .wizard-search-details {
  margin-top: calc(20 * var(--ui-unit));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--ui-unit));
}

.visitor-wizard .wizard-officer__siglabel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(8 * var(--ui-unit));
}

.visitor-wizard .wizard-officer__siglabel span {
  font-weight: 700;
  font-size: calc(13 * var(--ui-unit));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wizard-muted);
}

.visitor-wizard .wizard-officer__siglabel .link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: calc(14 * var(--ui-unit));
  color: var(--wizard-primary-strong);
  cursor: pointer;
}

.visitor-wizard .wizard-officer .wizard-signature--search {
  margin: 0;
  gap: 0;
}

.visitor-wizard .wizard-officer .signature-pad {
  height: calc(170 * var(--ui-unit));
  border-radius: calc(16 * var(--ui-unit));
  border: 2px dashed #c9d2db;
  background: #f6f8fa;
}

.visitor-wizard .wizard-officer .signature-pad__line {
  position: absolute;
  left: calc(20 * var(--ui-unit));
  right: calc(20 * var(--ui-unit));
  bottom: calc(40 * var(--ui-unit));
  border-top: 1px solid #c9d2db;
  pointer-events: none;
}

.visitor-wizard .wizard-officer .signature-pad__placeholder {
  inset: auto auto calc(14 * var(--ui-unit)) calc(20 * var(--ui-unit));
  display: block;
  font-weight: 600;
  font-size: calc(15 * var(--ui-unit));
  color: #b7c0cb;
}

.visitor-wizard .wizard-officer .wizard-id-type-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: calc(10 * var(--ui-unit));
}

.visitor-wizard .wizard-officer .wizard-id-type-btn {
  height: calc(52 * var(--ui-unit));
  padding: 0 calc(22 * var(--ui-unit));
  border-radius: 999px;
  border: 2px solid var(--wizard-border);
  background: var(--wizard-card);
  color: var(--wizard-text);
  font: inherit;
  font-weight: 600;
  font-size: calc(16 * var(--ui-unit));
  cursor: pointer;
}

.visitor-wizard .wizard-officer .wizard-id-type-btn.is-selected {
  border-color: var(--color-dark, #0b1220);
  background: var(--color-dark, #0b1220);
  color: #fff;
}

.visitor-wizard .wizard-officer .wizard-error {
  margin: calc(8 * var(--ui-unit)) 0 0;
  font-weight: 600;
  color: #b02525;
}

.visitor-wizard .wizard-officer .wizard-actions {
  padding-top: calc(20 * var(--ui-unit));
}

.visitor-wizard .wizard-officer .wizard-actions .wizard-primary {
  height: calc(64 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  font-size: calc(19 * var(--ui-unit));
  font-weight: 700;
  background: #16a34a; /* the officer's confirm is the final go of the search */
  box-shadow: none;
}

.visitor-wizard .wizard-officer .wizard-actions .wizard-primary:disabled {
  background: #16a34a;
  opacity: 0.3;
}


/* ==========================================================================
   ID scan — the card frame (2026-08-30 rebuild)
   Photo-step grammar, card-shaped: full-bleed feed, scrim with an ID-1
   cutout (1.586:1), snake ring on the card outline. The step reuses the
   .wizard-cam chrome (back button, caption, acts, countdown, flash) by
   pointing --cam-cx/--cam-cy/--cam-r at the card window's geometry.
   ========================================================================== */
.visitor-wizard .wizard-idcam {
  overflow: hidden;
  --id-w: calc(612 * var(--ui-unit));
  --id-h: calc(386 * var(--ui-unit));
  --id-r: calc(26 * var(--ui-unit));
  --cam-cx: 50%;
  --cam-cy: 49%;
  --cam-r: calc(var(--id-h) / 2); /* caption + countdown anchor off this */
}

body.app-portrait .visitor-wizard .wizard-idcam {
  --id-w: calc(600 * var(--ui-unit));
  --id-h: calc(378 * var(--ui-unit));
  --cam-cy: 44%;
}

/* the card must read correctly live — no selfie mirror, no zoom */
.visitor-wizard .wizard-idcam .wizard-photo video {
  transform: none;
}

/* portrait: the caption stays ABOVE the frame (the photo step's below-the-
   circle rule would drop it into the buttons here) */
body.app-portrait .visitor-wizard .wizard-idcam .wizard-cam__caption {
  top: calc(var(--cam-cy) - var(--cam-r) - calc(64 * var(--ui-unit)));
}

/* scrim with the card cut out: the window element is transparent and its
   giant box-shadow paints the dim — works over the web video AND over the
   native feed behind a transparent web view (no mask-composite games) */
.visitor-wizard .wizard-idcam__win {
  position: absolute;
  left: var(--cam-cx);
  top: var(--cam-cy);
  width: var(--id-w);
  height: var(--id-h);
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  border-radius: var(--id-r);
  box-shadow: 0 0 0 200vmax rgba(8, 13, 22, 0.62);
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

.visitor-wizard .wizard-idcam__ring {
  position: absolute;
  left: var(--cam-cx);
  top: var(--cam-cy);
  width: calc(var(--id-w) + calc(28 * var(--ui-unit)));
  height: calc(var(--id-h) + calc(28 * var(--ui-unit)));
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  z-index: 4;
  pointer-events: none;
  overflow: visible; /* the stroke touches the viewBox edge — never clip it */
  will-change: transform;
}

.visitor-wizard .wizard-idcam__ring rect {
  fill: none;
}

.visitor-wizard .wizard-idcam__track {
  stroke: rgba(255, 255, 255, 0.55);
}

.visitor-wizard .wizard-idcam.is-reading .wizard-idcam__track {
  stroke: rgba(255, 255, 255, 0.8);
}

.visitor-wizard .wizard-idcam__sweep {
  stroke: #16a34a;
  stroke-linecap: round;
}

/* the comet crawls while looking, hurries while reading; JS owns the
   dasharray (real path lengths — pathLength micro-dashes glitch in WebKit) */
@keyframes idcam-comet {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: var(--idring-len, -2000); }
}

.visitor-wizard .wizard-idcam:not(.has-photo):not(.is-counting) .wizard-idcam__sweep {
  animation: idcam-comet 2.6s linear infinite;
}

.visitor-wizard .wizard-idcam.is-reading:not(.has-photo):not(.is-counting) .wizard-idcam__sweep {
  animation-duration: 1.1s;
}

.visitor-wizard .wizard-idcam.has-photo .wizard-idcam__track,
.visitor-wizard .wizard-idcam.has-photo .wizard-idcam__sweep {
  stroke: #16a34a;
}

/* the captured card lands IN the window — contain, readable, the whole
   point of the rebuild (the old screen re-cropped the crop with cover) */
.visitor-wizard .wizard-idcam__still {
  position: absolute;
  left: var(--cam-cx);
  top: var(--cam-cy);
  width: var(--id-w);
  height: var(--id-h);
  transform: translate(-50%, -50%);
  border-radius: var(--id-r);
  object-fit: contain;
  background: #0c1420;
  z-index: 5;
}

.visitor-wizard .wizard-idcam__still.hidden {
  display: none;
}

/* verified only — a manual capture completes the ring but earns no tick */
.visitor-wizard .wizard-idcam__tick {
  position: absolute;
  left: calc(var(--cam-cx) + var(--id-w) / 2 - calc(10 * var(--ui-unit)));
  top: calc(var(--cam-cy) - var(--id-h) / 2 - calc(10 * var(--ui-unit)));
  transform: translate(-50%, -50%) scale(0.4);
  width: calc(64 * var(--ui-unit));
  height: calc(64 * var(--ui-unit));
  border-radius: 999px;
  background: #16a34a;
  border: calc(4 * var(--ui-unit)) solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
  opacity: 0;
  box-shadow: 0 calc(10 * var(--ui-unit)) calc(26 * var(--ui-unit)) rgba(22, 163, 74, 0.5);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.visitor-wizard .wizard-idcam__tick svg {
  width: 55%;
  height: 55%;
}

.visitor-wizard .wizard-idcam.is-verified.has-photo .wizard-idcam__tick {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Native scanning behind the web view: same drill as the badge scanner —
   every ground between the camera and the chrome goes transparent, and the
   wizard's page siblings hide so the crew board can't show through. The
   scrim keeps painting (it's an rgba shadow over the transparent hole). */
html.native-scan-id,
html.native-scan-id body,
html.native-scan-id .visitor-wizard,
html.native-scan-id .visitor-wizard .wizard-dialog,
html.native-scan-id .visitor-wizard .wizard-content,
html.native-scan-id .visitor-wizard .wizard-step[data-step="3"],
html.native-scan-id .visitor-wizard .wizard-idcam,
html.native-scan-id .visitor-wizard .wizard-idcam .wizard-photo {
  background: transparent !important;
}

html.native-scan-id body > *:not(#visitorWizardModal) {
  visibility: hidden !important;
}

/* layer order in the card frame: scrim 3 · ring 4 · still 5 · count 6 · flash 8 */
.visitor-wizard .wizard-idcam .wizard-photo__countdown {
  z-index: 6;
}

.visitor-wizard .wizard-idcam .wizard-photo__flash {
  z-index: 8;
}

/* the caption must paint ABOVE the scrim (z3) — under it, the dark rgba
   greys the white text (founder: "looking a bit grey") */
.visitor-wizard .wizard-idcam .wizard-cam__caption {
  z-index: 6;
}


/* ── Visitor pass (2026-09-08) ─────────────────────────────────────────── */
/* Review step: the day pills. One is on (green = go), the rest quiet. */
.wizard-pass-days {
  display: flex;
  gap: calc(8 * var(--ui-unit));
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wizard-pass-days__opt {
  cursor: pointer;
  border: 1.5px solid currentColor;
  background: #eef2f6;
  color: #15203a;
  font: inherit;
  font-weight: 700;
}
.wizard-pass-days__opt.is-on {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
/* The crew PIN sheet reuses the sign-out sheet; the PIN card sits inside it. */
.wizard-passpin .wizard-passpin__card {
  margin: calc(6 * var(--ui-unit)) 0 calc(4 * var(--ui-unit));
  width: 100%;
}
.wizard-passpin .vso-sheet__co { margin-bottom: 0; }
/* The pass confirm sheet floats over the camera screen. */
.visitor-scan-modal .visitor-pass-dim {
  position: fixed;
  inset: 0;
  z-index: 5;
}

/* Body-level sheets (the pass PIN, the visitor card) sit over whatever is
   open — the wizard, the board — with the sign-out sheet's own unit scale.
   The PIN sheet opens FROM the card sheet, so it sits above it. */
.visitor-pass-pin, .visitor-card-dim {
  position: fixed; inset: 0; z-index: 140;
  --ui-unit: min(calc(100vw / 1024), calc(100vh / 768));
}
/* Above the wizard (200) and the ISPS popup (320): the sheet opens from
   inside both. It sat at 150 after the move to body level, so from the
   review step it opened UNDER the wizard with the field focused — keyboard
   up, nothing to see (founder 2026-09-09). */
.visitor-pass-pin { z-index: 340; }
/* The body-level sheets take the sign-out screen's --wizard-* set (declared
   with .visitor-checkout-modal above) so chips, ground and text match it. */
body.app-portrait .visitor-pass-pin, body.app-portrait .visitor-card-dim {
  --ui-unit: min(calc(100vw / 768), calc(100vh / 1024));
}
.vso-sheet__status:empty { display: none; }
.visitor-card-dim .vso-sheet__status:not(:empty) { margin: calc(10 * var(--ui-unit)) 0 calc(4 * var(--ui-unit)); }
/* A second, quieter full-width action on a sheet: white, ink, real border. */
.vso-btn--soft {
  background: #fff;
  color: #15203a;
  border: 1.5px solid #c3cbd6;
}
.vso-btn--soft:active:not(:disabled) { background: #f1f5f9; }
.vso-sheet__status { min-height: calc(20 * var(--ui-unit)); font-size: calc(15 * var(--ui-unit)); font-weight: 600; color: #5a6573; text-align: center; }

/* An amber pill for a state the crew must read (founder 09-08: "the error
   message is hard to read. can it be in an amber pill?"). Wraps. */
.vso-chip--warn {
  background: #fdebcf;
  color: #8a4a07;
  height: auto;
  min-height: calc(32 * var(--ui-unit));
  padding: calc(8 * var(--ui-unit)) calc(16 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  font-weight: 700;
}
.vso-sheet__chips--note { margin-top: 0; }

/* Green pill: a state that went well (badge printed, pass issued). */
.vso-chip--good {
  background: #d7f4e3;
  color: #0b6b43;
  height: auto;
  min-height: calc(32 * var(--ui-unit));
  padding: calc(8 * var(--ui-unit)) calc(16 * var(--ui-unit));
  border-radius: calc(18 * var(--ui-unit));
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  font-weight: 700;
}
.vso-sheet__status .vso-chip { height: auto; min-height: calc(32 * var(--ui-unit)); padding: calc(8 * var(--ui-unit)) calc(16 * var(--ui-unit)); border-radius: calc(18 * var(--ui-unit)); white-space: normal; line-height: 1.3; font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════════════
   Onboarding wizard restyle (founder 2026-09-09: "anchor logo, teal, thin
   font… looks dated"). The house language: the ISPS popup's dark glass,
   the M mark, 800-weight white headings, the sign-out bar for inputs, the
   solid white welcome pill. Same steps and ids; these rules override the
   older .splash-* rules above by order.
   ═══════════════════════════════════════════════════════════════════════ */
.splash-overlay { --ui-unit: min(calc(100vw / 1024), calc(100vh / 768)); }
body.app-portrait .splash-overlay { --ui-unit: min(calc(100vw / 768), calc(100vh / 1024)); }
.splash-card {
  width: min(calc(600 * var(--ui-unit)), 92vw); max-width: none;
  background: linear-gradient(160deg, rgba(18, 32, 52, 0.97), rgba(11, 22, 38, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: calc(26 * var(--ui-unit));
  padding: calc(36 * var(--ui-unit)) calc(40 * var(--ui-unit)) calc(30 * var(--ui-unit));
  color: #f5faff; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}
.splash-card__logo { margin: 0 auto calc(18 * var(--ui-unit)); width: calc(64 * var(--ui-unit)); height: calc(64 * var(--ui-unit)); }
.splash-card__logo img { width: 100%; height: 100%; border-radius: calc(16 * var(--ui-unit)); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.splash-card h2 { font-size: calc(30 * var(--ui-unit)); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 0 calc(8 * var(--ui-unit)); }
.splash-card p, .splash-card .splash-card__intro, .splash-card__permissions-note, .splash-card__hint, .splash-card__footer, #splashYachtConnecting {
  font-size: calc(16 * var(--ui-unit)); font-weight: 600; color: rgba(245, 250, 255, 0.72); line-height: 1.45; margin: 0 0 calc(14 * var(--ui-unit));
}
.splash-card p:empty { display: none; }
#splashYachtConnecting strong { color: #fff; font-weight: 800; }
.splash-card__permissions { margin: calc(18 * var(--ui-unit)) 0 calc(6 * var(--ui-unit)); text-align: left; background: none; border: 0; padding: 0; }
.splash-card__permissions-title { display: none; }
.splash-card__permissions-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(8 * var(--ui-unit)); }
.splash-card__permissions-list li {
  display: flex; align-items: center; gap: calc(14 * var(--ui-unit)); position: relative; line-height: 1.3;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: calc(14 * var(--ui-unit));
  padding: calc(12 * var(--ui-unit)) calc(14 * var(--ui-unit)); color: rgba(245, 250, 255, 0.72); font-size: calc(15 * var(--ui-unit)); font-weight: 600;
}
.splash-card__permissions-list li strong { color: #fff; font-weight: 800; font-size: calc(16 * var(--ui-unit)); display: block; }
.splash-card__permissions-list li::before {
  content: ""; position: static; flex: none; width: calc(40 * var(--ui-unit)); height: calc(40 * var(--ui-unit)); border-radius: calc(11 * var(--ui-unit));
  background: rgba(255, 255, 255, 0.10) center / calc(20 * var(--ui-unit)) no-repeat;
}
.splash-card__permissions-list li[data-perm="camera"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.splash-card__permissions-list li[data-perm="mic"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10a7 7 0 0 0 14 0M12 17v5M8 22h8'/%3E%3C/svg%3E"); }
.splash-card__permissions-list li[data-perm="network"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); }
.splash-card__label { display: block; text-align: left; font-size: calc(12 * var(--ui-unit)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245, 250, 255, 0.55); margin: calc(14 * var(--ui-unit)) 0 calc(6 * var(--ui-unit)); }
.splash-card__input {
  background: transparent; border: 0; border-bottom: 2px solid rgba(255, 255, 255, 0.22); border-radius: 0;
  padding: calc(6 * var(--ui-unit)) 0 calc(10 * var(--ui-unit));
  color: #fff; font-size: calc(34 * var(--ui-unit)); font-weight: 800; letter-spacing: 0.06em; text-align: left; box-shadow: none;
}
.splash-card__input--name { text-transform: none; letter-spacing: -0.01em; }
.splash-card__input::placeholder { color: rgba(245, 250, 255, 0.35); font-weight: 700; }
.splash-card__input:focus { border-bottom-color: var(--color-accent, #56b2bb); background: transparent; box-shadow: none; }
.splash-card__btn {
  margin-top: calc(22 * var(--ui-unit)); padding: 0; height: calc(56 * var(--ui-unit)); border-radius: 999px;
  background: #fff; color: #0F172A; font-size: calc(18 * var(--ui-unit)); font-weight: 800; letter-spacing: 0.01em;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.35); border: 1px solid rgba(226, 232, 240, 0.9); transform: none;
}
.splash-card__btn:hover, .splash-card__btn:active { background: #fff; transform: none; box-shadow: 0 18px 28px rgba(0, 0, 0, 0.35); }
.splash-card__btn:disabled { opacity: 0.55; }
#onboardPrinterSkip, #onboardPrinterRescan { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.22); box-shadow: none; }
.splash-card__back { display: block; margin: calc(14 * var(--ui-unit)) auto 0; background: none; border: 0; color: rgba(245, 250, 255, 0.72); font-weight: 700; font-size: calc(16 * var(--ui-unit)); }
.splash-card__back:hover { color: #fff; background: none; }
.splash-card p.splash-card__legal { margin: calc(18 * var(--ui-unit)) 0 0; font-size: calc(13 * var(--ui-unit)); color: rgba(245, 250, 255, 0.5); }
.splash-card__legal a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
/* The status under the field is a PILL, never a bar: glass while waiting,
   green when approved, amber when something is wrong. */
.splash-card .status-msg {
  display: flex; width: max-content; align-items: center; justify-content: center; gap: calc(8 * var(--ui-unit));
  margin: calc(16 * var(--ui-unit)) auto 0; padding: calc(9 * var(--ui-unit)) calc(16 * var(--ui-unit));
  border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: calc(15 * var(--ui-unit)); font-weight: 700; line-height: 1.3; max-width: 100%; text-align: center;
}
.splash-card .status-msg:empty { display: none; }
.splash-card .status-msg.is-wait::before {
  content: ""; width: calc(8 * var(--ui-unit)); height: calc(8 * var(--ui-unit)); border-radius: 999px; background: #fff;
  animation: splashWaitPulse 1.2s ease-in-out infinite;
}
@keyframes splashWaitPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.splash-card .status-msg.is-good { background: #16a34a; color: #fff; }
.splash-card .status-msg.is-error { background: #fdebcf; color: #8a4a07; }
.splash-card__printer-status, .splash-card__permission-status { color: rgba(245, 250, 255, 0.72); font-weight: 600; }
/* where you are: a dots rail under the mark */
.splash-rail { display: flex; justify-content: center; gap: calc(7 * var(--ui-unit)); margin: 0 0 calc(18 * var(--ui-unit)); }
.splash-rail i { width: calc(8 * var(--ui-unit)); height: calc(8 * var(--ui-unit)); border-radius: 999px; background: rgba(255, 255, 255, 0.22); transition: width 0.2s ease, background 0.2s ease; }
.splash-rail i.on { width: calc(26 * var(--ui-unit)); background: #fff; }
/* printers found: rows, the paired one green-tagged */
.splash-card__printer-list { display: grid; gap: calc(8 * var(--ui-unit)); text-align: left; }
.splash-card__printer-item {
  display: flex; align-items: center; gap: calc(12 * var(--ui-unit)); width: 100%;
  padding: calc(14 * var(--ui-unit)) calc(16 * var(--ui-unit)); cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: calc(14 * var(--ui-unit));
  color: #fff; font-family: inherit; font-weight: 800; font-size: calc(16 * var(--ui-unit)); text-align: left;
}
.splash-card__printer-item:active { background: rgba(255, 255, 255, 0.12); }
.splash-card__printer-item.is-paired { border-color: rgba(22, 163, 74, 0.7); background: rgba(22, 163, 74, 0.12); }
.splash-card__printer-item .printer-tag {
  margin-left: auto; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: calc(12 * var(--ui-unit)); font-weight: 800;
  padding: calc(4 * var(--ui-unit)) calc(10 * var(--ui-unit)); border-radius: 999px;
}
.splash-card__printer-item.is-paired .printer-tag { background: #16a34a; color: #fff; }


/* The confirm sheets (pass sign-in, sign-out) exist so the crew can check
   the face. 96 units read small on a mini (founder 2026-09-09): the photo
   is now the biggest thing on the sheet. */
.vso-sheet .wizard-host-avatar {
  width: calc(200 * var(--ui-unit));
  height: calc(200 * var(--ui-unit));
  margin-bottom: calc(14 * var(--ui-unit));
}
.vso-sheet .wizard-host-avatar span { font-size: calc(64 * var(--ui-unit)); }
.vso-sheet .wizard-host-avatar img { width: 100%; height: 100%; object-fit: cover; }


/* Pre-boarded on Muster Mate (founder 2026-09-09): amber row, PICKABLE —
   the same amber as "already aboard" but with the chevron, not the chip.
   Beats the green :not(.is-onboard) rule above by specificity. */
.visitor-wizard .wizard-remembered-item.is-preboarded {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.6);
}
.visitor-wizard .wizard-remembered-item.is-preboarded .wizard-host-role { color: #b45309; }
.visitor-wizard .wizard-remembered-item.is-preboarded .wizard-remembered-item__person { color: #b45309; }
.visitor-wizard .wizard-remembered-item.is-preboarded .visitor-checkout-card__go { color: #b45309; }


/* ── Visitor types (2026-09-28): "Why are you here today?" (step 13) ──
   The visit-mode cards, one per type, with the type's colour as a band
   across the top. No icons: admins name their own types ("Tours") and no
   picture set keeps up. One tap moves on, so the step has no Continue. */
.visitor-wizard .wizard-visitmode.wizard-type .wizard-choice-grid {
  grid-template-columns: repeat(var(--type-cols, 2), 1fr);
}
body.app-portrait .visitor-wizard .wizard-visitmode.wizard-type .wizard-choice-grid {
  grid-template-columns: 1fr;
}
.visitor-wizard .wizard-visitmode.wizard-type .wizard-choice {
  overflow: hidden;
  padding: calc(44 * var(--ui-unit)) calc(18 * var(--ui-unit)) calc(38 * var(--ui-unit));
  gap: calc(8 * var(--ui-unit));
}
.visitor-wizard .wizard-visitmode.wizard-type .wizard-choice::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(12 * var(--ui-unit));
  background: var(--type-hue, #1e2b4a);
}
.visitor-wizard .wizard-visitmode.wizard-type .wizard-choice__title {
  margin-top: 0;
  font-size: calc(34 * var(--ui-unit));
  font-weight: 800;
  letter-spacing: -0.02em;
}
.visitor-wizard .wizard-visitmode.wizard-type .wizard-choice .wizard-host-tick {
  top: calc(22 * var(--ui-unit));
}
.visitor-wizard.wizard--type .wizard-actions,
.visitor-wizard.wizard--type [data-wizard-actions] {
  display: none;
}
.visitor-wizard .wizard-type-word {
  font-weight: 800;
}
.visitor-wizard .wizard-type-change {
  margin-left: calc(14 * var(--ui-unit));
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: calc(17 * var(--ui-unit));
  font-weight: 700;
  color: var(--wizard-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}