/*
  Wingmate styles.

  Every colour, size and weight below is lifted verbatim from the mockups —
  the design is unchanged. It is organised in three layers:

    1. Tokens      — the palette and type scale. Change a brand colour here
                     and the whole app follows.
    2. Primitives  — card, chip, button, dashed rule, ticket notch.
    3. Screens     — the handful of rules unique to one screen.

  Nothing uses a CSS framework, so there is no build step and no class-name
  soup to decode later.
*/

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --page:        #E8E4DA;   /* the desk the phone sits on */
  --app:         #F4F1EA;   /* app background */
  --card:        #FFFEFB;
  --muted:       #EDE8DE;
  --chip:        #F0ECE3;
  --disabled:    #E4E0D6;
  --ink:         #17171A;
  --ink-hover:   #2A2A2F;
  --ink-2:       #5C5A55;
  --ink-3:       #9A968D;
  --ink-4:       #B4AFA4;
  --accent:      oklch(0.52 0.14 32);
  --accent-dark: oklch(0.46 0.14 32);
  --accent-lite: oklch(0.72 0.13 40);
  --live:        oklch(0.64 0.15 150);   /* the "something new" dot */

  --line:        rgba(23, 23, 26, 0.13);
  --line-soft:   rgba(23, 23, 26, 0.10);
  --line-strong: rgba(23, 23, 26, 0.25);
  --line-dash:   rgba(23, 23, 26, 0.28);

  --sans: Archivo, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --radius:   5px;
  --radius-sm: 3px;
  --radius-lg: 6px;

  /* Safe-area insets so the app sits correctly on a real notched phone. */
  --top:    max(env(safe-area-inset-top), 14px);
  --bottom: max(env(safe-area-inset-bottom), 12px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--page);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar { width: 0; height: 0; }

@keyframes wm-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }
@keyframes wm-in    { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes wm-stamp { from { opacity: 0; transform: scale(1.5) rotate(-14deg) } to { opacity: 1; transform: scale(1) rotate(-9deg) } }
@keyframes wm-spin  { to { transform: rotate(360deg) } }

/* ── Device shell ──────────────────────────────────────────────────────── */
/* On a phone the app is simply full-screen. On a desktop it is framed like
   the mockup so the design can be reviewed at its intended size. */

#device {
  width: 100%;
  height: 100dvh;
  background: var(--app);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 820px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: repeating-linear-gradient(90deg, rgba(23,23,26,0.035) 0 1px, transparent 1px 9px);
    padding: 40px;
  }
  #device {
    width: 402px;
    height: 874px;
    border-radius: 48px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12);
    --top: 44px;
    --bottom: 28px;
  }
  #device::after {           /* dynamic island */
    content: '';
    position: absolute;
    top: 11px; left: 50%;
    transform: translateX(-50%);
    width: 126px; height: 37px;
    border-radius: 24px;
    background: #000;
    z-index: 50;
    pointer-events: none;
  }
  .home-indicator { display: flex; }
}

.home-indicator {
  display: none;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 34px;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8px;
  pointer-events: none;
  z-index: 60;
}
.home-indicator i {
  width: 139px; height: 5px;
  border-radius: 100px;
  background: rgba(0,0,0,0.25);
}
.home-indicator.on-dark i { background: rgba(255,255,255,0.7); }

/* The screen itself. Every screen module renders into this. */
#screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--app);
}

/* ── 2. Primitives ─────────────────────────────────────────────────────── */

.pad      { padding: 0 20px; }
.grow     { flex: 1; }
.scroll   { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.col      { display: flex; flex-direction: column; }
.row      { display: flex; align-items: center; }
.between  { display: flex; justify-content: space-between; align-items: center; }
.tap      { cursor: pointer; }

/* Type */
.wordmark  { font: 700 11px/1 var(--mono); letter-spacing: 0.26em; color: var(--ink); }
.h1        { font: 600 30px/1.12 var(--sans); letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.h2        { font: 600 25px/1.1 var(--sans);  letter-spacing: -0.02em; color: var(--ink); }
.h3        { font: 600 19px/1 var(--sans); color: var(--ink); }
.body      { font: 400 14.5px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.body-sm   { font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); }
.label     { font: 500 10px/1 var(--mono); letter-spacing: 0.2em; color: var(--ink-3); }
.label-sm  { font: 500 9.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--ink-3); }
.value     { font: 700 15px/1 var(--mono); color: var(--ink); }
.value-lg  { font: 700 30px/1 var(--mono); color: var(--ink); }
.mono-note { font: 400 11px/1.6 var(--mono); color: var(--ink-3); }
.accent    { color: var(--accent); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card-pad { padding: 16px 17px; }

.chip {
  padding: 5px 8px;
  border-radius: 2px;
  background: var(--chip);
  font: 500 10.5px/1 var(--mono);
  color: var(--ink-2);
}

/* The dashed hairline used throughout the mockup */
.dashed-rule {
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(23,23,26,0.3) 0 4px, transparent 4px 8px);
}
.dashed-box {
  border: 1px dashed var(--line-dash);
  border-radius: 4px;
  padding: 13px 15px;
  font: 400 11px/1.55 var(--mono);
  color: var(--ink-3);
}

.btn {
  padding: 17px;
  border-radius: var(--radius);
  text-align: center;
  font: 600 15px/1 var(--sans);
  cursor: pointer;
  border: none;
  width: 100%;
  display: block;
  transition: background 0.15s ease;
}
.btn-primary   { background: var(--ink); color: var(--app); }
.btn-primary:hover:not(:disabled)  { background: var(--ink-hover); }
.btn-accent    { background: var(--accent); color: var(--card); }
.btn-accent:hover:not(:disabled)   { background: var(--accent-dark); }
.btn-outline   { background: transparent; border: 1px solid rgba(23,23,26,0.22); color: var(--ink); padding: 15px; font-size: 14px; }
.btn-outline:hover { border-color: var(--ink); }
/* Apple Pay. Black is not a style choice here — Apple's Human Interface
   Guidelines specify the button's appearance, and a differently-coloured one
   is both off-brand and, once the real button is used, not permitted. */
.btn-dark      { background: #000; color: #fff; }
.btn-dark:hover:not(:disabled)     { background: #1a1a1a; }
.btn:disabled  { background: var(--disabled); color: var(--ink-4); cursor: default; }
.btn-lift      { box-shadow: 0 8px 20px rgba(23,23,26,0.22); }

.back {
  font: 600 20px/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
  padding: 0 4px;
  width: 24px;
  background: none;
  border: none;
}

/* Header bar shared by the feed / chats / activity screens */
.topbar {
  flex: none;
  padding: calc(var(--top) + 16px) 20px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
}

/* Scrambled photo tile — the heart of the design.
   `--blur` is the only thing that changes when a reveal becomes mutual. */
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--c1), var(--c2));
  flex: none;
}
.tile > .veil {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--blur, 14px));
  -webkit-backdrop-filter: blur(var(--blur, 14px));
  background: var(--veil, rgba(244,241,234,0.18));
  transition: backdrop-filter 0.45s ease, background 0.45s ease;
}
.tile.unlocked > .veil { --blur: 0px; --veil: transparent; }
.tile > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile > .tag {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 3px 0;
  text-align: center;
  font: 700 8px/1 var(--mono);
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.92);
  background: rgba(23,23,26,0.35);
}

/* Bottom tab bar — a floating pill. The highlight is one element that slides
   between tabs: `--i` is the selected index, `--n` the number of tabs, and
   `settleTabs()` in components.js moves `--i` after paint so it animates. */
.tabs-dock {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 12px calc(var(--bottom) + 10px);
  z-index: 40;
  pointer-events: none;           /* the gutter either side stays tappable */
}
#screen > .tabs-dock { animation: none; }   /* it stays put while the screen changes */
.tabs {
  --pad: 6px;
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  padding: var(--pad);
  border-radius: 999px;
  isolation: isolate;
  /* Liquid glass: mostly see-through, the page behind blurred and a little
     brighter and more saturated, with light catching the top edge. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 100%);
  backdrop-filter: blur(12px) saturate(1.35) brightness(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.35) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),     /* bright rim on top */
    inset 0 -1px 1px rgba(255, 255, 255, 0.25),  /* softer rim below */
    inset 0 0 18px rgba(255, 255, 255, 0.18),    /* glow inside the glass */
    0 10px 30px rgba(23, 23, 26, 0.14),
    0 1px 2px rgba(23, 23, 26, 0.08);
}
/* A soft sheen across the upper half, like light on a curved surface. */
.tabs::before {
  content: "";
  position: absolute;
  inset: 1px 10% 45% 10%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: -1;
}
/* Glass that barely blurs looks broken; without blur support, go solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabs { background: rgba(255, 254, 251, 0.94); }
}
.tabs-pill {
  position: absolute;
  top: var(--pad); bottom: var(--pad); left: var(--pad);
  width: calc((100% - 2 * var(--pad)) / var(--n, 5));
  border-radius: 999px;
  /* A drop of clearer glass sitting on the bar. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.35));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px rgba(23, 23, 26, 0.06),
    0 2px 10px rgba(23, 23, 26, 0.10);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform 0.46s cubic-bezier(.32, 1.3, .5, 1);
}
.tabs button {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 8px 2px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--ink-2);
  /* Keeps labels readable over whatever scrolls behind the glass. */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  transition: color 0.2s ease;
}
.tabs button.on { color: var(--ink); }
.tabs .icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 27px;
}
.tabs svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}
.tabs .on svg .f { fill: currentColor; }
.tabs svg .hole { fill: rgba(255, 255, 255, 0.92); }
.tabs button:active svg,
.tabs button:active .avatar { transform: scale(0.9); }
.tabs .avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 1px var(--line);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.tabs .on .avatar { box-shadow: 0 0 0 2px var(--ink); }
.tabs .name {
  font: 600 11px/1 var(--sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tabs .on .name { font-weight: 700; }

/* Unread count on Chats. The icon is the positioning context, so the badge
   sits on the glyph rather than on the whole tab. */
.tab-badge {
  position: absolute;
  top: -4px;
  left: 17px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--card);
  font: 700 9.5px/16px var(--sans);
  font-style: normal;
  text-align: center;
  box-shadow: 0 0 0 2px var(--card);
}
/* Something new in your group — a dot, not a count. Group chatter is not
   something to be nagged about by number. */
.tab-dot {
  position: absolute;
  top: 0; right: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 2px var(--card);
}

/* The bar floats over the screen, so the last card of a list must be able to
   scroll clear of it. `keep-pad` opts out a pane that has a composer between
   it and the bar. `!important` because screens set their padding inline. */
#screen:has(.tabs-dock) .scroll:not(.keep-pad) {
  padding-bottom: calc(var(--bottom) + 100px) !important;
}
@media (prefers-reduced-motion: reduce) {
  .tabs-pill, .tabs svg { transition: none; }
}

/* The `hidden` attribute is only `display:none` in the browser's own
   stylesheet, so ANY author rule that sets `display` silently defeats it.
   That is exactly what happened to the typing indicator below, which stayed
   on screen permanently. Stated once here so it cannot happen again. */
[hidden] { display: none !important; }

/* "typing…" — three dots in a bubble, the shape every chat app uses. */
.bubble.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  min-height: 0;
}
.bubble.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: wm-typing 1.2s infinite ease-in-out both;
}
.bubble.typing span:nth-child(2) { animation-delay: .16s; }
.bubble.typing span:nth-child(3) { animation-delay: .32s; }
@keyframes wm-typing {
  0%, 70%, 100% { opacity: .28; transform: translateY(0); }
  35%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble.typing span { animation: none; opacity: .55; }
}

/* ── 3. Screens ────────────────────────────────────────────────────────── */

/* Welcome + arrival share the dark treatment */
.dark-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(var(--top) + 26px) 24px calc(var(--bottom) + 18px);
  background: var(--ink);
  overflow-y: auto;
}
.dark-screen .wordmark { color: var(--app); }
.dark-screen h1 {
  font: 600 38px/1.08 var(--sans);
  letter-spacing: -0.03em;
  color: var(--app);
  text-wrap: pretty;
  margin: 0;
}
.dark-screen p { font: 400 15px/1.6 var(--sans); color: rgba(244,241,234,0.7); text-wrap: pretty; margin: 0; }
.dark-screen .promise { font: 500 11px/1 var(--mono); color: rgba(244,241,234,0.55); }
.btn-light { background: var(--app); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-ghost-light {
  background: transparent;
  border: 1px solid rgba(244,241,234,0.25);
  color: var(--app);
  padding: 16px;
  font-size: 14px;
}

/* Onboarding */
.step-head { flex: none; padding: calc(var(--top) + 14px) 22px 0; }
.step-bar  { flex: 1; height: 3px; border-radius: 2px; background: #E0DBD0; overflow: hidden; }
.step-bar i { display: block; height: 100%; background: var(--ink); transition: width 0.3s ease; }

.keypad {
  flex: none;
  padding: 8px 10px calc(var(--bottom) + 14px);
  background: var(--muted);
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.keypad button {
  padding: 13px 0;
  border-radius: var(--radius);
  background: var(--card);
  border: none;
  font: 500 21px/1 var(--mono);
  color: var(--ink);
  cursor: pointer;
}
.keypad button:active { background: var(--chip); }
.keypad button.blank { background: transparent; cursor: default; }

.code-box {
  flex: 1;
  height: 62px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 24px/1 var(--mono);
  color: var(--ink);
}
.code-box.active { border-color: var(--ink); }

.option {
  padding: 14px 15px;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--card);
  border: 1px solid rgba(23,23,26,0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
}
.option .title { font: 600 14.5px/1 var(--sans); color: var(--ink); }
.option .sub   { margin-top: 6px; font: 400 11.5px/1.4 var(--sans); color: var(--ink-2); }
.option .mark  { font: 700 12px/1 var(--mono); color: var(--ink); }
.option.on              { background: var(--ink); border-color: var(--ink); }
.option.on .title,
.option.on .mark        { color: var(--app); }
.option.on .sub         { color: rgba(244,241,234,0.6); }

.prompt-option {
  padding: 15px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--card);
  border: 1px solid rgba(23,23,26,0.15);
  text-align: left;
  width: 100%;
}
.prompt-option .q { font: 500 9.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--ink-3); }
.prompt-option .a { margin-top: 9px; font: 400 14.5px/1.5 var(--sans); color: var(--ink); text-wrap: pretty; }
.prompt-option.on          { background: var(--ink); border-color: var(--ink); }
.prompt-option.on .q       { color: var(--accent-lite); }
.prompt-option.on .a       { color: var(--app); }

/* Boarding pass card, with the punched notches */
.pass { background: var(--card); border: 1px solid rgba(23,23,26,0.14); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(23,23,26,0.07); }
.pass-tear {
  position: relative;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(23,23,26,0.4) 0 5px, transparent 5px 10px);
}
.pass-tear::before, .pass-tear::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--app);
  border: 1px solid rgba(23,23,26,0.14);
}
.pass-tear::before { left: -9px; }
.pass-tear::after  { right: -9px; }

/* Feed card */
.person-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(23,23,26,0.05);
  animation: wm-in 0.35s ease both;
}
.person-card:hover { border-color: rgba(23,23,26,0.3); }
.person-card .name { font: 600 16.5px/1 var(--sans); color: var(--ink); }
.person-card .where { font: 500 10px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.person-card .line {
  margin-top: 7px;
  font: 400 12.5px/1.45 var(--sans);
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.person-card .tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.person-card .tags .chip { padding: 3.5px 7px; border-radius: 2px; font-size: 10px; letter-spacing: 0.04em; }
.person-card .foot { padding: 10px 15px 12px; display: flex; justify-content: space-between; align-items: center; }
.person-card .foot .meta  { font: 500 10.5px/1.4 var(--mono); color: var(--ink-3); }
.person-card .foot .state { font: 700 10.5px/1 var(--mono); color: var(--ink); }
.person-card .foot .state.mutual { color: var(--accent); }

/* Scope chips */
.scope {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font: 600 11.5px/1 var(--sans);
  cursor: pointer;
  border: 1px solid rgba(23,23,26,0.22);
  background: transparent;
  color: var(--ink-2);
}
.scope.on { background: var(--ink); border-color: var(--ink); color: var(--app); }
/* A scope this account cannot open. Dimmed rather than hidden — it is the
   reason to buy Pro, so it has to be visible to do its job. */
.scope.locked { border-style: dashed; color: var(--ink-3); }
.scope-lock {
  margin-left: 6px;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--card);
  font: 600 8.5px/1 var(--mono);
  letter-spacing: 0.06em;
  font-style: normal;
  vertical-align: 1px;
}

/* Profile hero */
.hero {
  position: relative;
  height: 300px;
  flex: none;
  overflow: hidden;
  background: linear-gradient(150deg, var(--c1), var(--c2));
}
.hero .veil {
  position: absolute; inset: 0;
  backdrop-filter: blur(var(--blur, 26px));
  -webkit-backdrop-filter: blur(var(--blur, 26px));
  background: var(--veil, rgba(244,241,234,0.18));
  transition: backdrop-filter 0.5s ease, background 0.5s ease;
}
.hero.unlocked .veil { --blur: 0px; --veil: transparent; }
.hero .weave { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 6px, transparent 6px 12px); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .back-round {
  position: absolute;
  top: calc(var(--top) + 12px); left: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(23,23,26,0.5);
  backdrop-filter: blur(8px);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font: 600 16px/1 var(--sans);
  cursor: pointer;
  z-index: 2;
}
.hero .stamp {
  position: absolute;
  top: calc(var(--top) + 26px); right: 14px;
  padding: 7px 11px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font: 700 11px/1.15 var(--mono);
  letter-spacing: 0.08em;
  text-align: center;
  background: rgba(255,254,251,0.85);
  transform: rotate(-9deg);
  animation: wm-stamp 0.4s ease both;
  z-index: 2;
}
.hero .caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px 20px 16px;
  background: linear-gradient(to top, rgba(23,23,26,0.72), transparent);
  z-index: 2;
}
.hero .caption .name { font: 600 27px/1 var(--sans); color: var(--card); }
.hero .caption .sub  { margin-top: 8px; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; color: rgba(255,255,255,0.8); }

.waiting {
  padding: 17px;
  border-radius: var(--radius);
  border: 1px dashed rgba(23,23,26,0.3);
  text-align: center;
  font: 600 14px/1 var(--sans);
  color: var(--ink-2);
  animation: wm-pulse 1.4s ease-in-out infinite;
}

/* Chat */
.bubble {
  max-width: 78%;
  padding: 11px 13px;
  font: 400 14px/1.45 var(--sans);
  animation: wm-in 0.25s ease both;
  word-wrap: break-word;
}
.bubble.theirs { align-self: flex-start; border-radius: 12px 12px 12px 3px; background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.bubble.mine   { align-self: flex-end;   border-radius: 12px 12px 3px 12px; background: var(--ink);  color: var(--app); border: 1px solid var(--ink); }

.chat-note {
  align-self: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--muted);
  font: 500 10px/1.4 var(--mono);
  color: var(--ink-3);
  text-align: center;
}

.composer {
  flex: none;
  padding: 10px 14px calc(var(--bottom) + 4px);
  background: var(--card);
  border-top: 1px solid var(--line-soft);
}
.composer input {
  flex: 1;
  padding: 12px 13px;
  border: 1px solid rgba(23,23,26,0.18);
  border-radius: 4px;
  font: 400 13.5px/1 var(--sans);
  color: var(--ink);
  background: var(--card);
  outline: none;
  min-width: 0;
}
.composer input::placeholder { color: var(--ink-4); }
.composer input:focus { border-color: var(--ink); }
.composer .send {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 4px;
  background: var(--ink);
  color: var(--app);
  border: none;
  display: flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--sans);
  cursor: pointer;
}
.quick {
  flex: none;
  padding: 8px 11px;
  border: 1px solid rgba(23,23,26,0.2);
  border-radius: var(--radius-sm);
  font: 500 11.5px/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  background: var(--card);
}
.quick:hover { background: var(--chip); }

/* Seat map */
.seat {
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font: 700 9.5px/1 var(--mono);
  background: var(--card);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  padding: 0;
}
.seat.aisle   { margin-right: 16px; }
.seat.taken   { background: var(--disabled); color: var(--ink-4); border-color: var(--disabled); cursor: default; }
.seat.theirs  { background: var(--accent);   color: var(--card);  border-color: var(--accent);   cursor: default; }
.seat.mine,
.seat.picked  { background: var(--ink);      color: var(--card);  border-color: var(--ink); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; font: 500 10px/1 var(--mono); color: var(--ink-2); }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 11px; height: 11px; border-radius: 2px; display: block; }

/* Toggle switch on the You screen */
.switch {
  width: 46px; height: 27px;
  flex: none;
  border-radius: 14px;
  background: #D8D3C8;
  position: relative;
  cursor: pointer;
  border: none;
  transition: background 0.18s ease;
}
.switch i {
  position: absolute;
  top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--card);
  transition: left 0.18s ease;
}
.switch.on   { background: var(--accent); }
.switch.on i { left: 22px; }

/* Activity rows */
.notif { background: var(--card); border: 1px solid rgba(23,23,26,0.12); border-radius: var(--radius); padding: 13px 15px; cursor: pointer; width: 100%; text-align: left; }
.notif:hover { border-color: rgba(23,23,26,0.28); }
.notif.emphasis { background: var(--muted); }
.notif .kind { font: 700 9.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--ink); }
.notif.emphasis .kind, .notif .kind.accent { color: var(--accent); }
.notif .when { font: 500 9.5px/1 var(--mono); color: var(--ink-3); }
.notif .text { margin-top: 9px; font: 400 13.5px/1.5 var(--sans); color: var(--ink); text-wrap: pretty; }

/* Settings list */
.settings { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.settings .row { padding: 14px 16px; border-bottom: 1px solid rgba(23,23,26,0.08); justify-content: space-between; gap: 10px; }
.settings .row:last-child { border-bottom: none; }
.settings .row .k { font: 500 13.5px/1 var(--sans); color: var(--ink); }
.settings .row .v { font: 500 11px/1 var(--mono); color: var(--ink-3); }

/* Toast for errors — the app never fails silently */
#toast {
  position: absolute;
  left: 16px; right: 16px;
  bottom: calc(var(--bottom) + 20px);
  padding: 13px 15px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--app);
  font: 500 12.5px/1.45 var(--sans);
  z-index: 100;
  animation: wm-in 0.2s ease both;
  box-shadow: 0 10px 30px rgba(23,23,26,0.25);
}
#toast:empty { display: none; }

.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: wm-spin 0.7s linear infinite;
  margin: 40px auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Updated design handoff — screens and controls added in the second round.
   ══════════════════════════════════════════════════════════════════════════ */

/* Screens rise and settle as they enter, per the handoff's motion spec. */
/* No fade: starting from invisible is what showed the background between
   screens as a flash. A new screen settles a few pixels into place instead. */
@keyframes wm-screen {
  from { transform: translate3d(0, 8px, 0); }
  to   { transform: none; }
}
#screen > * { animation: wm-screen 0.24s cubic-bezier(.22,.72,.18,1) both; }
@media (prefers-reduced-motion: reduce) {
  #screen > * { animation: none; }
}

/* ── Language pill + corner menu ─────────────────────────────────────────── */
.lang-pill {
  position: absolute;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid rgba(23, 23, 26, 0.16);
  color: var(--ink);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  cursor: pointer;
  z-index: 40;
  box-shadow: 0 4px 14px rgba(23, 23, 26, 0.14);
}
.lang-pill.on-dark {
  background: rgba(244, 241, 234, 0.12);
  border-color: rgba(244, 241, 234, 0.3);
  color: var(--app);
}
.lang-pill .flag { font-size: 13px; line-height: 1; }

.lang-menu {
  position: absolute;
  right: 20px;
  min-width: 176px;
  background: var(--card);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(23, 23, 26, 0.22);
  overflow: hidden;
  z-index: 42;
  animation: wm-in 0.18s ease both;
}
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font: 500 13.5px/1 var(--sans);
  color: var(--ink-2);
  text-align: left;
}
.lang-menu button.on { background: var(--ink); color: var(--app); }
.lang-menu button .flag { font-size: 15px; }

/* Full-screen catcher that dismisses the menu. */
.lang-scrim { position: absolute; inset: 0; z-index: 41; background: transparent; }

/* ── Sign-in options ─────────────────────────────────────────────────────── */
.sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font: 600 15px/1 var(--sans);
  background: var(--app);
  color: var(--ink);
}
.sso.outline {
  background: transparent;
  border: 1px solid rgba(244, 241, 234, 0.28);
  color: var(--app);
}
.sso svg { flex: none; display: block; }
.text-link {
  background: none;
  border: none;
  cursor: pointer;
  font: 500 13px/1 var(--sans);
  color: rgba(244, 241, 234, 0.6);
  padding: 6px;
}

/* ── Prompt writer ───────────────────────────────────────────────────────── */
.writer textarea {
  width: 100%;
  min-height: 64px;
  border: none;
  outline: none;
  background: none;
  resize: vertical;
  font: 400 14.5px/1.5 var(--sans);
  color: var(--ink);
}
.writer textarea::placeholder { color: var(--ink-4); }

.kw-group + .kw-group { margin-top: 16px; }
.kw-group .head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}
.kw-group .head .name {
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.kw-group .head .count { font: 700 9.5px/1 var(--mono); color: var(--accent); }
.kw-list { display: flex; flex-wrap: wrap; gap: 7px; }

.kw {
  padding: 9px 12px;
  border-radius: 20px;
  border: 1px solid rgba(23, 23, 26, 0.18);
  background: var(--card);
  color: var(--ink-2);
  font: 500 12.5px/1 var(--sans);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.kw.on { background: var(--ink); border-color: var(--ink); color: var(--app); }

.regen {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid rgba(23, 23, 26, 0.28);
  color: var(--ink);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.regen:disabled { border-color: rgba(23, 23, 26, 0.14); color: var(--ink-4); cursor: default; }

/* ── Trip details ────────────────────────────────────────────────────────── */
.trip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.trip-field {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 15px 13px;
  box-sizing: border-box;
}
.trip-field.filled { border-color: rgba(23, 23, 26, 0.3); }
.trip-field label {
  display: block;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.trip-field input {
  width: 100%;
  margin-top: 7px;
  border: none;
  outline: none;
  background: none;
  font: 600 17px/1.2 var(--sans);
  color: var(--ink);
}
.trip-field input::placeholder { color: var(--ink-4); font-weight: 500; }

.suggest {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  background: var(--card);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(23, 23, 26, 0.22);
  overflow: hidden;
  z-index: 30;
  max-height: 264px;
  overflow-y: auto;
}
.suggest button {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  text-align: left;
}
.suggest button:last-child { border-bottom: none; }
.suggest button:hover { background: var(--surface-hover, var(--chip)); }
.suggest .iata {
  width: 30px;
  flex: none;
  font: 700 11.5px/1 var(--mono);
  color: var(--accent);
}
.suggest .where { flex: 1; font: 500 13px/1.3 var(--sans); color: var(--ink); }
.suggest .country { font: 500 10px/1 var(--mono); color: var(--ink-3); }

.terminal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.terminal-chip {
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(23, 23, 26, 0.18);
  background: var(--card);
  color: var(--ink-2);
  font: 600 11.5px/1 var(--mono);
  cursor: pointer;
}
.terminal-chip.on { background: var(--ink); border-color: var(--ink); color: var(--app); }

/* ── Deals ───────────────────────────────────────────────────────────────── */
.venue { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.venue .top { padding: 14px 15px 12px; }
.venue .name { font: 600 16.5px/1 var(--sans); color: var(--ink); }
.venue .kind { margin-top: 6px; font: 500 10px/1 var(--mono); letter-spacing: 0.12em; color: var(--ink-3); }
.venue .walk { font: 500 10.5px/1 var(--mono); color: var(--ink-4); white-space: nowrap; }
.venue .offer { margin: 10px 0 0; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.venue .foot { padding: 10px 15px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.venue .bring { font: 700 10px/1 var(--mono); letter-spacing: 0.12em; color: var(--accent); }
.venue .send {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--ink);
  color: var(--card);
  font: 600 11.5px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.venue .send.sent { background: var(--accent); }

/* Bottom sheet for picking who to send a deal to. */
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 26, 0.42);
  z-index: 50;
  animation: wm-in 0.2s ease both;
}
.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--app);
  border-radius: 14px 14px 0 0;
  padding: 10px 16px calc(var(--bottom) + 14px);
  z-index: 51;
  animation: wm-sheet 0.26s cubic-bezier(.22,.72,.18,1) both;
}
@keyframes wm-sheet { from { transform: translateY(100%); } to { transform: none; } }
.sheet .grab {
  width: 38px; height: 4px;
  border-radius: 2px;
  background: rgba(23, 23, 26, 0.18);
  margin: 4px auto 14px;
}
.sheet .sheet-label {
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.sheet .sheet-title { margin-top: 7px; font: 600 18px/1.2 var(--sans); color: var(--ink); }
.recipient {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 13px;
  margin-top: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
}
.recipient .who { font: 600 15px/1 var(--sans); color: var(--ink); }
.recipient .sub { margin-top: 5px; font: 500 10px/1 var(--mono); color: var(--ink-3); }

/* A required trip field that is still empty. Quiet until it matters — the
   footer button stays disabled, so this only has to hint at why. */
.trip-field.needed { border-color: rgba(23, 23, 26, 0.13); }
.trip-field.needed label { color: var(--accent); }

/* Boarding countdown beside the wordmark. Colour carries the urgency:
   accent while waiting, solid ink once it is actually time to move. */
.boarding-flag {
  font: 500 10.5px/1 var(--mono);
  color: var(--accent);
  white-space: nowrap;
}
.boarding-flag.soon     { color: var(--accent); font-weight: 700; }
.boarding-flag.boarding { color: var(--card); background: var(--accent); padding: 4px 7px; border-radius: 3px; font-weight: 700; }
.boarding-flag.gone     { color: var(--ink-4); }

/* ── Photo grid ──────────────────────────────────────────────────────────────
   One main slot (3/4 portrait) beside two stacked extras, per the design. */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.photo-slot {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 96px;
}
.photo-slot.main {
  grid-row: span 2;
  aspect-ratio: 3 / 4;
}
.photo-slot .tile { border-radius: var(--radius); }
.photo-slot .tile > img { width: 100%; height: 100%; object-fit: cover; }

.photo-add {
  width: 100%; height: 100%;
  min-height: 96px;
  border: 1px dashed rgba(23, 23, 26, 0.3);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-4);
}
.photo-add:hover { border-color: var(--ink-3); color: var(--ink-3); }

.photo-remove {
  position: absolute;
  top: 7px; right: 7px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 23, 26, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 600 12px/1 var(--sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 7px 6px;
  text-align: center;
  font: 700 8.5px/1.3 var(--mono);
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(23, 23, 26, 0.4);
  z-index: 2;
}

/* ── Community ───────────────────────────────────────────────────────────── */
.comm-stack { display: flex; justify-content: center; margin: 2px 0 18px; }
.comm-stack .tile { border-radius: 50%; margin-left: -12px; box-shadow: 0 0 0 3px var(--card); }
.comm-stack .tile:first-child { margin-left: 0; }

.comm-actions button {
  padding: 7px 11px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--card);
  font: 600 11.5px/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.comm-actions button:hover { border-color: var(--line-strong); }

.comm-members { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; }
.comm-member {
  flex: none;
  width: 48px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 0;
  background: none; border: none;
  cursor: pointer;
}
.comm-member .tile { border-radius: 50%; }
.comm-member .who {
  max-width: 48px;
  font: 600 10.5px/1.1 var(--sans);
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comm-member.empty { cursor: default; }
.comm-member .ring { width: 40px; height: 40px; border-radius: 50%; border: 1px dashed var(--line-dash); }

.bubble .who { display: block; margin-bottom: 3px; font: 600 11px/1.2 var(--sans); color: var(--accent); }
.comm-line {
  align-self: center;
  margin: 2px 0;
  font: 500 10px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.comm-composer { padding-bottom: calc(var(--bottom) + 92px); }
.typing-name { font: 500 10px/1 var(--mono); color: var(--ink-3); }


/* ── Legal documents and consent ────────────────────────────────────────── */
.legal-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 14px -20px 0; padding: 0 20px 2px; }
.legal-tabs button {
  flex: none;
  padding: 7px 11px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--card);
  font: 600 11.5px/1 var(--sans);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.legal-tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--app); }

.legal-doc { font: 400 14px/1.6 var(--sans); color: var(--ink-2); }
.legal-doc h2 { font: 600 15.5px/1.3 var(--sans); color: var(--ink); margin: 26px 0 8px; text-wrap: balance; }
.legal-doc p { margin: 0 0 10px; }
.legal-doc ul { margin: 0 0 10px; padding-left: 18px; }
.legal-doc li { margin: 4px 0; }
.legal-doc a { color: var(--accent); }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc code { font: 500 12px/1 var(--mono); }
/* Tables scroll inside themselves on a narrow phone. */
.legal-doc table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 12.5px; line-height: 1.45; }
.legal-doc th { text-align: left; font: 600 9.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
.legal-doc td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; min-width: 96px; }
.legal-doc blockquote { margin: 8px 0 12px; padding: 10px 14px; border: 1px dashed var(--line-dash); border-radius: 4px; }
/* A blank still to be filled in. Loud on purpose: none may survive to launch. */
.legal-doc mark.fill { background: oklch(0.92 0.08 90); color: var(--ink); padding: 0 3px; border-radius: 2px; }
.legal-summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.legal-summary ul { margin: 10px 0 0; }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 400 13px/1.5 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.consent .box {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--sans);
  color: var(--app);
}
.consent.on { border-color: var(--ink); }
.consent.on .box { background: var(--ink); border-color: var(--ink); }
.consent:focus-visible, .legal-links button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legal-links.center { justify-content: center; }
.legal-links button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: 500 11px/1.5 var(--mono);
  letter-spacing: 0.03em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-links.on-dark button { color: rgba(244, 241, 234, 0.78); }

/* Offline chat: a matched person is within Bluetooth / Wi-Fi range. */
.nearby-flag { margin-top: 5px; font: 600 9.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--live); }

/* Document links inside a consent sentence. The row itself ticks the box;
   these open the document instead. */
.consent-link {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.consent-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legal-line .consent-link { letter-spacing: inherit; }

/* ── Trip form: A-Z airport list, terminal chips, departure wheel ─────────── */
.suggest-letter {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 14px;
  background: var(--app);
  border-bottom: 1px solid var(--line-soft);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.trip-field .terminal-chips { margin-top: 9px; }
.terminal-hint { margin-top: 8px; font: 500 12.5px/1.3 var(--sans); color: var(--ink-4); }

.time-field {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.time-value {
  display: block;
  margin-top: 7px;
  font: 600 17px/1.2 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.time-value.empty { color: var(--ink-4); font-weight: 500; }

.time-done {
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--app);
  font: 600 14px/1 var(--sans);
  cursor: pointer;
}
.wheels {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  height: 200px;
  margin-top: 14px;
}
.wheel-band {
  position: absolute;
  left: 0; right: 0;
  top: 80px;
  height: 40px;
  border-radius: 10px;
  background: var(--chip, rgba(23, 23, 26, 0.07));
  pointer-events: none;
}
.wheel {
  position: relative;
  width: 72px;
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  perspective: 420px;
  scrollbar-width: none;
  padding: 80px 0;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
          mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  outline: none;
}
.wheel::-webkit-scrollbar { display: none; }
.wheel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wheel-item {
  height: 40px;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 22px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  cursor: pointer;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.wheel-item.on { color: var(--ink); font-weight: 600; }
.wheel-colon { position: relative; font: 600 22px/1 var(--sans); color: var(--ink); }

/* Deals on hold until real venue agreements exist. */
.deals-soon { padding: 48px 28px 20px; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.deals-soon-tag {
  padding: 8px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.2em;
  color: var(--accent);
}
.deals-soon-body { margin: 0; max-width: 30ch; font: 400 14px/1.55 var(--sans); color: var(--ink-2); text-wrap: balance; }

/* ── Community lanes: terminal group, or a shared ride to the airport ─────── */
.lane-switch {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  padding: 3px;
  border-radius: 999px;
  background: var(--chip);
}
.lane-switch button {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 999px;
  background: none;
  font: 600 12.5px/1 var(--sans);
  color: var(--ink-3);
  cursor: pointer;
}
.lane-switch button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(23, 23, 26, 0.12); }
.lane-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ride-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ride-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 13px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  text-align: left;
  cursor: pointer;
}
.ride-option:hover { border-color: var(--ink); }
.ride-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ride-kind { font: 600 17px/1.1 var(--sans); color: var(--ink); }
.ride-seats { font: 400 12.5px/1.35 var(--sans); color: var(--ink-2); }
.ride-open { margin-top: 4px; font: 600 9.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--accent); }

/* ── Security wait, estimated from travellers' reports ───────────────────── */
.wait-card { padding: 11px 13px 11px; }
.wait-card.bare { padding: 0 0 4px; }
.wait-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wait-now { font: 600 18px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.wait-now.none { font: 600 10px/1 var(--mono); letter-spacing: 0.08em; color: var(--ink-4); }
.wait-meta { margin: 4px 0 0; font: 400 11.5px/1.4 var(--sans); color: var(--ink-3); }
.wait-chips {
  display: flex;
  gap: 5px;
  margin: 8px -13px 0;
  padding: 0 13px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.wait-card.bare .wait-chips { flex-wrap: wrap; margin: 10px 0 0; padding: 0; }
.wait-chips::-webkit-scrollbar { display: none; }
.wait-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 5px 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  font: 600 10.5px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  cursor: pointer;
}
.wait-chip.static { cursor: default; }
.wait-chip.on { background: var(--ink); border-color: var(--ink); color: var(--app); }
.wait-chip:focus-visible, .wait-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wait-count {
  min-width: 14px;
  padding: 2px 4px;
  border-radius: 999px;
  background: var(--chip);
  font: 700 9.5px/1 var(--mono);
  text-align: center;
  color: var(--ink-3);
}
.wait-chip.on .wait-count { background: rgba(244, 241, 234, 0.2); color: var(--app); }
.wait-fine { margin: 10px 0 0; font: 500 9px/1.5 var(--mono); letter-spacing: 0.06em; color: var(--ink-4); }
.wait-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: none;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--accent);
  cursor: pointer;
}

/* Trip form: whether the flight is public. */
.privacy-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 13px 15px; }
.privacy-title { font: 600 14.5px/1.2 var(--sans); color: var(--ink); }
.privacy-sub { margin-top: 4px; font: 400 12px/1.45 var(--sans); color: var(--ink-3); text-wrap: pretty; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Referrals: the code field at sign-up, and your own code on You ──────── */
.referral-field { margin-top: 22px; padding-bottom: 10px; border-bottom: 1px solid rgba(23, 23, 26, 0.22); }
.referral-field label { display: block; font: 500 9.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--ink-3); }
.referral-field input {
  width: 100%;
  margin-top: 8px;
  border: none;
  outline: none;
  background: none;
  font: 600 17px/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.referral-field input::placeholder { color: var(--ink-4); font-weight: 500; letter-spacing: 0.04em; text-transform: none; }

.invite-card { padding: 10px 12px; }
.invite-row { display: flex; align-items: center; gap: 6px; }
.invite-text { flex: 1; min-width: 0; }
.invite-sub { margin: 3px 0 0; font: 400 11.5px/1.3 var(--sans); color: var(--ink-3); }
.invite-code {
  flex: none;
  padding: 6px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--ink);
  user-select: all;
}
.invite-btn {
  flex: none;
  padding: 7px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--app);
  font: 600 11.5px/1 var(--sans);
  cursor: pointer;
}
.invite-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.invite-meta { margin: 6px 0 0; font: 500 9.5px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--ink-4); }

/* ── Screen transitions and swipes ─────────────────────────────────────────
   A repaint of the same screen does not animate at all (.settled). A new tab
   slides in from the side it sits on; a swipe back lets the previous screen
   ease in from the left. */
#screen.settled > * { animation: none; }
@keyframes wm-from-right { from { transform: translate3d(22%, 0, 0); } to { transform: none; } }
@keyframes wm-from-left  { from { transform: translate3d(-22%, 0, 0); } to { transform: none; } }
@keyframes wm-from-back  { from { transform: translate3d(-8%, 0, 0); } to { transform: none; } }
#screen[data-enter="right"]:not(.settled) > :not(.tabs-dock) { animation: wm-from-right 0.26s cubic-bezier(.22,.72,.18,1) both; }
#screen[data-enter="left"]:not(.settled) > :not(.tabs-dock)  { animation: wm-from-left 0.26s cubic-bezier(.22,.72,.18,1) both; }
#screen[data-enter="back"]:not(.settled) > *                 { animation: wm-from-back 0.24s cubic-bezier(.22,.72,.18,1) both; }
#screen.dragging-back { box-shadow: -12px 0 28px rgba(23, 23, 26, 0.18); }
@media (prefers-reduced-motion: reduce) {
  #screen[data-enter] > * { animation: none !important; }
}

/* Switching tabs is instant, as on any phone: the tab bar stays, the page
   swaps. Only a swipe adds a slide (data-enter). */
#screen:not([data-enter]):has(> .tabs-dock) > * { animation: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Warm redesign — friendlier type, bigger text, rounder shapes.
   One font everywhere (Figtree: open, round, familiar next to apps like Uber
   and dating apps) instead of a technical monospace. Fewer letter-spaced capitals,
   larger sizes, softer boxes. Later rules here override the ones above.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:    16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
}
body { font-size: 16px; }

.wordmark  { font: 800 20px/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.h1        { font: 800 32px/1.1 var(--sans); letter-spacing: -0.025em; }
.h2        { font: 800 28px/1.12 var(--sans); letter-spacing: -0.02em; }
.h3        { font: 700 20px/1.25 var(--sans); }
.body      { font: 400 16px/1.5 var(--sans); }
.body-sm   { font: 400 14px/1.45 var(--sans); }
.label     { font: 600 13px/1.25 var(--sans); letter-spacing: 0; color: var(--ink-3); }
.label-sm  { font: 600 12px/1.25 var(--sans); letter-spacing: 0; }
.value     { font: 700 16px/1.2 var(--sans); }
.value-lg  { font: 800 30px/1 var(--sans); }
.mono-note { font: 400 14px/1.45 var(--sans); color: var(--ink-3); }
.chip      { font: 600 13px/1 var(--sans); border-radius: 999px; padding: 7px 11px; }
/* Notes are soft filled panels, not dashed technical boxes. */
.dashed-box { border: none; background: var(--muted); border-radius: var(--radius); padding: 14px 16px; font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.btn        { border-radius: 999px; font: 700 16px/1 var(--sans); }
.btn-outline { font-size: 15px; }
.topbar    { background: var(--app); border-bottom: none; padding-bottom: 10px; }

/* Scope pills */
.scope { padding: 10px 16px; border-radius: 999px; font: 600 14.5px/1 var(--sans); border-color: var(--line); background: var(--card); }
.scope.locked { border-style: solid; }
.scope-lock { font: 700 10px/1 var(--sans); letter-spacing: 0; border-radius: 999px; padding: 3px 6px; background: var(--ink); }

/* Tab labels a touch larger */
.tabs .name { font: 600 12px/1 var(--sans); }

/* ── Nearby: route heading, calm timer, simple cards ─────────────────────── */
.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(23, 23, 26, 0.08);
}
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px var(--card); }

.route { margin: 18px 0 0; font: 800 30px/1.1 var(--sans); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.route-arrow { margin: 0 10px; color: var(--ink-3); font-weight: 600; }
.route-sub { margin: 8px 0 0; font: 500 16px/1.35 var(--sans); color: var(--ink-2); }

.scopes { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; padding-bottom: 2px; }
.scopes .scope { flex: none; }

.empty-state { padding: 34px 18px; text-align: center; }
.empty-state .empty-title { font: 700 20px/1.25 var(--sans); color: var(--ink); }
.empty-state p { margin: 8px auto 18px; max-width: 30ch; font: 400 16px/1.5 var(--sans); color: var(--ink-2); }

.pro-pitch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border: none; border-radius: var(--radius);
  background: var(--muted);
  font: 600 16px/1.3 var(--sans); color: var(--ink);
  text-align: left; cursor: pointer;
}

.person-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius); box-shadow: 0 2px 10px rgba(23, 23, 26, 0.05); position: relative; }
.person-card .tile { border-radius: 50%; flex: none; }
.pc-body { flex: 1; min-width: 0; }
.pc-name { font: 700 18px/1.2 var(--sans); color: var(--ink); }
.pc-line { margin: 4px 0 0; font: 400 15px/1.4 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-meta { margin-top: 6px; font: 500 13.5px/1.3 var(--sans); color: var(--ink-3); }
.pc-meta::first-letter { text-transform: uppercase; }
.pc-state { position: absolute; top: 12px; right: 14px; padding: 4px 9px; border-radius: 999px; background: var(--muted); font: 600 12px/1 var(--sans); color: var(--ink-2); }
.pc-state.mutual { background: var(--ink); color: var(--app); }

/* ── Community, simplified: icons, calm colours ──────────────────────────── */
.lane-switch { margin-top: 14px; padding: 4px; background: var(--muted); }
.lane-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; font: 600 15px/1 var(--sans); color: var(--ink-2); }
.lane-switch svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lane-switch button.on { color: var(--ink); }
.soft-count { margin: 0 0 18px; font: 500 14px/1.3 var(--sans); color: var(--ink-3); }
.ride-open { font: 600 12.5px/1.2 var(--sans); letter-spacing: 0; color: var(--ink-3); }
.ride-kind { font: 700 18px/1.1 var(--sans); }
.ride-seats { font: 400 14px/1.35 var(--sans); }
.wait-line { border-style: solid; border-color: var(--line); color: var(--ink-2); font: 600 13px/1 var(--sans); letter-spacing: 0; padding: 7px 12px; }
.comm-member .who { font: 600 12.5px/1.2 var(--sans); letter-spacing: 0; }
.comm-line { font: 500 13.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.chat-note { font: 500 13px/1.4 var(--sans); letter-spacing: 0; }
.wait-now { font-size: 20px; }
.wait-meta { font-size: 13px; }
.wait-chip { font: 600 12.5px/1 var(--sans); }

/* ── The W8 logo, and W8 taking off while a screen loads ─────────────────── */
.logo-mark {
  display: block;
  flex: none;
  color: var(--ink);
  background: currentColor;
  -webkit-mask: url(/assets/logo-w8.png) center / contain no-repeat;
          mask: url(/assets/logo-w8.png) center / contain no-repeat;
}
.dark-screen .logo-mark { color: var(--app); }
.loading-screen .logo-mark { color: var(--ink); }

.loading-screen { display: flex; align-items: center; justify-content: center; color: var(--ink); }
/* Revealed left to right — wings first, then the 8 — with a small lift, like
   a take-off, then it settles and starts again. */
.logo-mark.animated { animation: w8-takeoff 1.9s cubic-bezier(.55,0,.25,1) infinite; }
@keyframes w8-takeoff {
  0%   { clip-path: inset(0 100% 0 0); transform: translate3d(-6px, 4px, 0); opacity: 1; }
  45%  { clip-path: inset(0 0 0 0);    transform: translate3d(0, -3px, 0); opacity: 1; }
  75%  { clip-path: inset(0 0 0 0);    transform: translate3d(0, 0, 0);    opacity: 1; }
  100% { clip-path: inset(0 0 0 0);    transform: translate3d(8px, -6px, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-mark.animated { animation: wm-pulse 1.6s ease-in-out infinite; }
}

/* ── Moving W8 while something loads ─────────────────────────────────────────
   A small glass pill at the top: the logo glides in a gentle wave while a
   sheen passes over it, like a wing catching light. */
#busy {
  position: absolute;
  top: calc(var(--top) + 6px);
  left: 50%;
  z-index: 60;
  transform: translateX(-50%);
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 20px rgba(23, 23, 26, 0.12);
  pointer-events: none;
  animation: busy-in 0.18s ease-out both;
}
@keyframes busy-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.logo-mark.moving,
.logo-mark.animated {
  color: var(--ink);
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, #8E8A82 50%, var(--ink) 62%, var(--ink) 100%);
  background-size: 250% 100%;
  animation: w8-glide 1.4s ease-in-out infinite, w8-sheen 1.4s linear infinite;
}
@keyframes w8-glide {
  0%   { transform: translate3d(-3px, 2px, 0) rotate(-3deg); }
  50%  { transform: translate3d(3px, -3px, 0) rotate(2deg); }
  100% { transform: translate3d(-3px, 2px, 0) rotate(-3deg); }
}
@keyframes w8-sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .logo-mark.moving, .logo-mark.animated { animation: wm-pulse 1.6s ease-in-out infinite; }
}

/* ── Departure-board yellow instead of red ───────────────────────────────────
   Two shades of the same yellow: the board's own bright yellow for fills
   (with black text on it, like the board), and a deeper gold for yellow text
   and icons, which bright yellow on cream would be too pale to read. */
:root {
  --board:       #FFC72C;
  --accent:      #B8860B;
  --accent-dark: #946B00;
  --accent-lite: #FFD966;
}
.btn-accent, .btn-accent:hover:not(:disabled) { background: var(--board); color: var(--ink); }
.tab-badge { background: var(--board); color: var(--ink); }
.seat.theirs { background: var(--board); border-color: var(--board); color: var(--ink); }
.switch.on { background: var(--board); }
.switch.on i { box-shadow: 0 1px 2px rgba(23, 23, 26, 0.2); }
.pass .label::first-letter { text-transform: uppercase; }

/* ── Filters ──────────────────────────────────────────────────── */
.filter-row { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.filter-pill {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px 9px 15px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent;
  font: 600 14px/1 var(--sans); color: var(--ink);
  cursor: pointer;
}
.filter-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.filter-pill.on { background: var(--ink); border-color: var(--ink); color: var(--app); }

.filter-sheet { padding: 10px 24px calc(var(--bottom) + 18px); background: var(--card); border-radius: 22px 22px 0 0; }
.fs-title { margin: 10px 0 0; text-align: center; font: 700 26px/1.2 var(--sans); color: var(--ink); }
.fs-sub { margin: 6px 0 22px; text-align: center; font: 400 16px/1.4 var(--sans); color: var(--ink-3); }

/* Each number sits above its own thumb. 15px is half a thumb. */
.age-values { position: relative; height: 24px; margin: 0 15px; font: 600 20px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.age-values span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
#age-lo { left: calc(var(--lo) * 100%); }
#age-hi { left: calc(var(--hi) * 100%); }
.dual-range { position: relative; height: 44px; margin-top: 6px; }
.dr-track, .dr-fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; }
/* The thumbs' centres run from 15px to width - 15px, so the bar does too. */
.dr-track { left: 15px; right: 15px; background: var(--muted); }
.dr-fill { left: calc(15px + (100% - 30px) * var(--lo)); right: calc(15px + (100% - 30px) * (1 - var(--hi))); background: var(--ink); }
.dual-range input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 44px; margin: 0;
  background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.dual-range input[type="range"]::-webkit-slider-runnable-track { background: none; height: 44px; }
.dual-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 30px; height: 30px; margin-top: 7px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--card); box-shadow: 0 2px 8px rgba(23, 23, 26, 0.3);
  cursor: grab;
}
.dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--card); box-shadow: 0 2px 8px rgba(23, 23, 26, 0.3);
}
.dual-range input[type="range"]::-moz-range-track { background: none; }
.dual-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

.dealbreaker { display: flex; align-items: flex-start; gap: 14px; width: 100%; margin-top: 24px; padding: 0; border: none; background: none; text-align: left; cursor: pointer; }
.dealbreaker .box { flex: none; width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--sans); color: var(--app); }
.dealbreaker.on .box { background: var(--ink); }
.db-title { display: block; font: 600 17px/1.3 var(--sans); color: var(--ink); }
.db-sub { display: block; margin-top: 3px; font: 400 14.5px/1.4 var(--sans); color: var(--ink-3); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.filter-chip { padding: 11px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); font: 600 15px/1 var(--sans); color: var(--ink); cursor: pointer; }
.filter-chip.on { background: var(--ink); border-color: var(--ink); color: var(--app); }

/* The person at the top of a chat opens their profile. */
.chat-who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: none; background: none; cursor: pointer; }
.chat-chevron { flex: none; font: 400 22px/1 var(--sans); color: var(--ink-4); }

/* ── Pictures and voice notes in a chat ──────────────────────────────────── */
.composer-btn {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.composer-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.composer-btn:disabled { opacity: 0.4; cursor: default; }
.composer-btn.mic.on { background: var(--accent); border-color: var(--accent); color: var(--card); transform: scale(1.06); }
.rec-hint { margin-top: 8px; text-align: center; font: 600 13px/1 var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; }

.bubble-photo { padding: 4px; border: none; cursor: pointer; max-width: 72%; }
.bubble-photo img { display: block; width: 100%; border-radius: 12px; }
.bubble-voice { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.bubble-voice audio { height: 34px; max-width: 190px; }
.voice-length { font: 600 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; opacity: 0.75; }

/* ── Groups you create, and the open ones you can walk into ──────────────── */
.open-group {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px 16px; cursor: pointer; text-align: left;
}
.og-name { display: block; font: 700 17px/1.2 var(--sans); color: var(--ink); }
.og-size { display: block; margin-top: 3px; font: 500 13.5px/1.2 var(--sans); color: var(--ink-3); }
.og-join { flex: none; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--app); font: 700 14px/1 var(--sans); }

/* ── Pro: three plans, yearly first ───────────────────────────────────────── */
.plans { display: flex; flex-direction: column; gap: 9px; }
.plan-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 16px 16px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--card); text-align: left; cursor: pointer;
}
.plan-option.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.po-left { min-width: 0; }
.po-title { display: flex; align-items: center; gap: 8px; font: 700 17px/1.2 var(--sans); color: var(--ink); }
.po-sub { display: block; margin-top: 4px; font: 400 13.5px/1.35 var(--sans); color: var(--ink-3); }
.po-price { flex: none; font: 800 19px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.po-badge { font-style: normal; padding: 3px 8px; border-radius: 999px; background: var(--board); color: var(--ink); font: 700 11px/1 var(--sans); }
.plan-nudge { margin: 0; padding: 12px 14px; border-radius: var(--radius); background: var(--muted); font: 500 14px/1.4 var(--sans); color: var(--ink); }
.founding { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 999px; background: var(--board); color: var(--ink); font: 700 12.5px/1.2 var(--sans); }

/* ── Revealed to you ──────────────────────────────────────────────────────── */
.incoming { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: none; border-radius: var(--radius); background: var(--card); box-shadow: 0 2px 10px rgba(23, 23, 26, 0.05); cursor: pointer; text-align: left; }
.incoming .faces { display: flex; }
.incoming .faces .tile { border-radius: 50%; margin-left: -10px; box-shadow: 0 0 0 2px var(--card); }
.incoming .faces .tile:first-child { margin-left: 0; }
.incoming .in-text { flex: 1; min-width: 0; }
.incoming .in-title { display: block; font: 700 16px/1.25 var(--sans); color: var(--ink); }
.incoming .in-sub { display: block; margin-top: 3px; font: 500 13.5px/1.2 var(--sans); color: var(--accent); }
.pc-state.theirs { background: var(--board); color: var(--ink); }
.pro-lock { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--muted); text-align: center; font: 500 15px/1.4 var(--sans); color: var(--ink); }
.dealbreaker.locked { opacity: 0.55; }
.lock-tag { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: var(--app); font: 700 10px/1 var(--sans); vertical-align: 2px; }

/* ── Pro: pick your car ───────────────────────────────────────────────────── */
.car-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.car-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; text-align: left; }
.car-pick .cp-name { font: 700 15.5px/1.2 var(--sans); color: var(--ink); }
.car-pick .cp-sub { display: block; margin-top: 2px; font: 500 13px/1.2 var(--sans); color: var(--ink-3); }
.car-pick .og-join { font-size: 13px; padding: 8px 14px; }

/* ── Delete account, moderation ─────────────────────────────────────────── */
.btn-danger { background: #B3261E; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #8C1D18; }
.delete-link {
  margin-top: 6px; padding: 10px; background: none; border: none; cursor: pointer;
  font: 500 13px/1 var(--sans); color: #B3261E; opacity: 0.85;
}
.delete-card { border-color: rgba(179, 38, 30, 0.25); }
.mod-card { display: flex; flex-direction: column; gap: 10px; }
.mod-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.mod-name { font-weight: 700; font-size: 16px; }
.mod-meta { font-size: 12.5px; color: var(--ink-3, #6f6a60); overflow-wrap: anywhere; }
.mod-count { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.mod-reports { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mod-reports li { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; background: rgba(23, 23, 26, 0.04); }
.mod-note {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(23, 23, 26, 0.18); font: inherit; font-size: 14px; resize: vertical;
  background: transparent; color: var(--ink);
}
.mod-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mod-actions .btn { padding: 12px 6px; font-size: 14px; }

/* ── iOS switch (2026-09-21) ────────────────────────────────────────────────
   Apple's own proportions: 51 × 31 track, 27 px white knob with a soft
   shadow, grey when off, system green when on, and a springy slide. */
.switch {
  width: 51px; height: 31px;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.16);
  transition: background 0.25s ease;
}
.switch i {
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.switch.on { background: #34C759; }
.switch.on i {
  left: 2px;
  transform: translateX(20px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
}
.switch:active i { width: 33px; }
.switch.on:active i { transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { .switch i { transition: none; } }

/* ── Apple-style type for small text (2026-09-21) ───────────────────────────
   The last of the "technical" look: tiny, widely spaced labels. Apple sets
   small text at normal spacing, never below ~13 px, in sentence case. Codes
   people copy or type (invite and referral codes) keep their spacing. */
.label, .label-sm, .trip-field label, .sheet .sheet-label, .photo-add, .photo-caption,
.comm-line, .legal-doc th, .legal-links button, .nearby-flag, .suggest-letter,
.deals-soon-tag, .ride-open, .wait-now.none, .wait-fine, .wait-line, .wordmark,
.referral-field label, .invite-meta, .tile > .tag, .prompt-option .q,
.person-card .tags .chip, .scope-lock, .hero .stamp, .hero .caption .sub,
.notif .kind, .lang-pill, .kw-group .head .name, .regen, .venue .kind, .venue .bring {
  letter-spacing: normal;
}
.label-sm, .trip-field label, .sheet .sheet-label, .photo-caption, .nearby-flag,
.ride-open, .wait-now.none, .referral-field label, .invite-meta, .prompt-option .q,
.notif .kind, .kw-group .head .name, .regen, .venue .kind, .venue .bring { font-size: 13px; }
.wait-fine, .legal-doc th { font-size: 12px; }
.legal-doc th { text-transform: none; }

/* Text buttons, like "Edit" in an iPhone navigation bar. */
.text-btn {
  padding: 4px 0; background: none; border: none; cursor: pointer;
  font: 400 17px/1.2 var(--sans); letter-spacing: -0.01em; color: var(--accent);
}
.text-btn:active { opacity: 0.5; }
.settings .row .k { font: 400 16px/1.2 var(--sans); }
.settings .row .v { font: 400 15px/1.2 var(--sans); letter-spacing: normal; color: var(--ink-3); text-align: right; }
.photo-add { font: 400 15px/1 var(--sans); color: var(--ink-3); }
.chip { text-transform: none; }

/* ── Legal documents, Apple style; links in Apple blue (2026-09-21) ─────────
   Set like Apple's own legal pages: 17 px body at a relaxed line height,
   semibold section titles, and links in Apple's link blue without an
   underline. On dark screens the brighter blue Apple uses on black. */
:root { --link: #0066CC; --link-on-dark: #2997FF; }

.legal-doc { font: 400 17px/1.47 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.legal-doc h2 { font: 600 22px/1.25 var(--sans); letter-spacing: -0.015em; margin: 34px 0 10px; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul { padding-left: 22px; margin: 0 0 14px; }
.legal-doc li { margin: 6px 0; }
.legal-doc strong { font-weight: 600; }
.legal-doc table { font-size: 15px; line-height: 1.4; }
.legal-doc th { font: 600 13px/1.3 var(--sans); color: var(--ink-3); }
.legal-doc mark.fill { background: rgba(255, 199, 44, 0.28); padding: 0 2px; border-radius: 4px; }
.legal-summary { border: none; background: var(--card); border-radius: 18px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(23, 23, 26, 0.06); }

.legal-tabs button { border: none; background: rgba(120, 120, 128, 0.12); color: var(--ink); font: 500 15px/1 var(--sans); letter-spacing: normal; }
.legal-tabs button.on { background: var(--ink); color: var(--app); }

.legal-doc a, .consent-link, .legal-links button {
  color: var(--link);
  text-decoration: none;
}
.legal-doc a:hover, .consent-link:hover, .legal-links button:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:active, .consent-link:active, .legal-links button:active { opacity: 0.6; }
.legal-links button { font: 400 15px/1.5 var(--sans); letter-spacing: normal; }
.legal-links { gap: 6px 18px; }
.legal-links.on-dark button, .on-dark .consent-link, .dark-screen .consent-link { color: var(--link-on-dark); }

/* ── You tab as a calm hub; Edit | View profile (2026-09-21) ────────────── */
.me-hero { display: flex; flex-direction: column; align-items: center; padding: calc(var(--top) + 36px) 20px 18px; gap: 12px; }
.me-avatar {
  position: relative; width: 124px; height: 124px; border-radius: 50%;
  padding: 0; border: none; background: var(--muted); cursor: pointer;
  box-shadow: 0 0 0 4px var(--app), 0 0 0 5px var(--line-strong);
}
.me-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.me-initial { display: grid; place-items: center; width: 100%; height: 100%; font: 700 46px/1 var(--sans); color: var(--ink-3); }
.me-pencil {
  position: absolute; right: 2px; bottom: 4px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); box-shadow: 0 0 0 3px var(--app);
}
.me-pencil svg { width: 16px; height: 16px; fill: none; stroke: var(--app); stroke-width: 2; stroke-linejoin: round; }
.me-name { margin: 4px 0 0; font: 800 30px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.me-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; margin-top: 6px; }
.me-actions .btn { padding: 13px 10px; font-size: 15px; }

.me-visible, .me-plan { padding: 16px 18px; gap: 14px; align-items: center; }
.me-plan { width: 100%; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.me-row-title { display: block; font: 600 16px/1.25 var(--sans); color: var(--ink); }
.me-row-sub { display: block; margin-top: 4px; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.me-row-sub.gold { color: var(--accent); }
.me-chev, .me-list i { font-style: normal; font: 400 22px/1 var(--sans); color: var(--ink-4); }

.me-list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.me-list button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px; background: none; border: none; cursor: pointer; text-align: left;
  font: 400 16px/1.2 var(--sans); color: var(--ink);
}
.me-list button + button { border-top: 1px solid var(--line-soft, rgba(23,23,26,0.07)); }
.me-list button:active { background: rgba(23, 23, 26, 0.04); }
.me-list button.danger { color: #B3261E; }

.pe-head { flex: none; padding: calc(var(--top) + 8px) 16px 0; background: var(--app); }
.pe-bar { display: flex; align-items: center; justify-content: space-between; }
.pe-title { font: 700 17px/1 var(--sans); color: var(--ink); }
.pe-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; border-bottom: 1px solid var(--line); }
.pe-tabs button {
  padding: 12px 0 13px; background: none; border: none; cursor: pointer;
  font: 600 16px/1 var(--sans); color: var(--ink-4); box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.15s ease, box-shadow 0.2s ease;
}
.pe-tabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.pe-body { padding: 20px 20px calc(var(--bottom) + 28px); gap: 30px; }
.pe-section { display: flex; flex-direction: column; gap: 12px; }
.pe-h { margin: 0; font: 700 20px/1.2 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.pe-note { margin: 0; font: 400 14px/1.45 var(--sans); color: var(--ink-3); }
.pe-card {
  display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 20px 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; color: inherit;
}
.pe-q { font: 600 14px/1.2 var(--sans); color: var(--ink-2); }
.pe-a { font: 600 22px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.pe-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-chips .chip { font: 500 15px/1 var(--sans); padding: 10px 14px; }

.pe-body:has(.pv-name) { gap: 16px; }
.pv-name { margin: 0; font: 800 30px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.pv-photo {
  width: 100%; aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, var(--c1), var(--c2));
}
.pv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 22px 30px; background: var(--card); border-radius: var(--radius); }
.pv-a { font: 700 26px/1.25 var(--sans); letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
.pv-facts { display: flex; flex-wrap: wrap; background: var(--card); border-radius: var(--radius); padding: 6px 8px; }
.pv-fact { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; font: 500 15px/1 var(--sans); color: var(--ink); }
.pv-fact + .pv-fact { border-left: 1px solid var(--line); }
.pv-fact svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linejoin: round; }
.pv-facts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pv-facts::-webkit-scrollbar { display: none; }
.pv-fact { flex: none; white-space: nowrap; }
/* The invite card reads at the same size as the rows around it. */
.invite-card { padding: 14px 16px; }
.invite-card .label { font: 600 16px/1.25 var(--sans); color: var(--ink); }
.invite-sub { font-size: 14px; }
.pe-body > * { flex: none; }
/* Edit profile: photo grid — equal tiles in one row. */
.pe-section .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; gap: 8px; height: auto; }
.pe-section .photo-slot, .pe-section .photo-slot.main { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; height: auto; min-height: 0; }
.pe-section .photo-add { min-height: 0; }
.pe-section .photo-caption { font-size: 11px; padding: 6px 4px; }
.pe-section .photo-caption { display: none; }

/* ── Terminal overview strip on Nearby (2026-09-21) ─────────────────────── */
.ov { flex: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.ov-title { font: 600 14px/1.2 var(--sans); color: var(--ink-3); padding: 0 2px; }
.ov-row { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
.ov-row::-webkit-scrollbar { display: none; }
.ov-area {
  flex: none; min-width: 104px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ov-area.mine { border-color: var(--board); box-shadow: inset 0 0 0 1px var(--board); }
.ov-area.open { background: var(--muted); }
.ov-name { font: 700 16px/1.1 var(--sans); }
.ov-here { font: 600 12px/1 var(--sans); color: var(--accent); margin-top: -2px; }
.ov-stat { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/1 var(--sans); color: var(--ink-2); }
.ov-stat b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ov-stat svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ov-places { margin: 0; padding: 12px 14px; background: var(--card); border-radius: 14px; font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.ov-places b { color: var(--ink); font-weight: 600; }
.ov-credit { margin: 0 2px; font: 400 11.5px/1.3 var(--sans); color: var(--ink-4); }

/* ── Terminal map (2026-09-21) ──────────────────────────────────────────── */
.tm { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.tm svg { display: block; width: 100%; height: auto; }
.tm-building { fill: #EAE5DA; stroke: #D8D1C3; stroke-width: 1; }
.tm-gate { fill: var(--ink-4); }
.tm-food { fill: var(--board); stroke: #C99A10; stroke-width: 0.8; }
.tm-bubble { cursor: pointer; }
.tm-bubble rect { fill: var(--ink); }
.tm-bubble text { font: 700 12.5px/1 var(--sans); fill: var(--app); }
.tm-bubble.mine rect { fill: var(--board); }
.tm-bubble.mine text { fill: var(--ink); }
.tm-bubble.open rect { stroke: var(--ink); stroke-width: 2; }
.tm-bubble:focus { outline: none; }
.tm-bubble:focus-visible rect { stroke: var(--accent); stroke-width: 2.5; }
.tm-you circle { fill: #2F7CF6; stroke: #fff; stroke-width: 2; }
.tm-you .halo { fill: rgba(47, 124, 246, 0.2); stroke: none; }

/* ── Eat & drink list (2026-09-21) ──────────────────────────────────────── */
.ov-all {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  font: 600 15px/1.2 var(--sans); color: var(--ink); cursor: pointer; text-align: left;
}
.ov-all i { font-style: normal; font-size: 20px; color: var(--ink-4); }
.pl-kinds { display: flex; gap: 8px; overflow-x: auto; margin: 14px -20px 0; padding: 0 20px 2px; scrollbar-width: none; }
.pl-kinds::-webkit-scrollbar { display: none; }
.pl-kinds .filter-chip { flex: none; }
.pl-kinds .filter-chip.on { background: var(--ink); border-color: var(--ink); color: var(--app); }
.pl-group { display: flex; flex-direction: column; gap: 10px; }
.pl-h { display: flex; align-items: baseline; gap: 10px; margin: 0 2px; font: 700 19px/1.2 var(--sans); color: var(--ink); }
.pl-h .ov-here { margin: 0; }
.pl-count { margin-left: auto; font: 500 14px/1 var(--sans); color: var(--ink-4); }
.pl-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; }
.pl-row + .pl-row { border-top: 1px solid var(--line-soft); }
.pl-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--muted); display: grid; place-items: center; }
.pl-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pl-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-name { font: 600 16px/1.25 var(--sans); color: var(--ink); }
.pl-name.unnamed { color: var(--ink-3); font-weight: 500; }
.pl-meta { font: 400 14px/1.35 var(--sans); color: var(--ink-3); }
.pl-hours { font: 400 13px/1.35 var(--sans); color: var(--ink-3); overflow-wrap: anywhere; }

/* ── Airport tab (2026-09-21) ───────────────────────────────────────────── */
.air-head { padding-bottom: 8px; }
.air-title { margin: 18px 0 0; font: 800 30px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.air-sub { margin: 6px 0 0; font: 400 16px/1.3 var(--sans); color: var(--ink-3); }
.air-all {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 15px 16px; background: none; border: none; border-top: 1px solid var(--line-soft);
  font: 600 15px/1.2 var(--sans); color: var(--ink); cursor: pointer; text-align: left;
}
.air-all i { font-style: normal; font-size: 20px; color: var(--ink-4); }
.airport-teaser {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  font: 500 15px/1.2 var(--sans); color: var(--ink); cursor: pointer; text-align: left;
}
.airport-teaser i { font-style: normal; font-size: 20px; color: var(--ink-4); }

/* ── Profile column, deck, likes, talking points (2026-09-21) ───────────── */
.hc-photo, .hc-card, .hc-facts { position: relative; flex: none; }
.hc-photo {
  width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, var(--c1), var(--c2));
}
.hc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-photo.locked::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.hc-lock { position: absolute; left: 16px; bottom: 16px; z-index: 1; font: 500 14px/1.3 var(--sans); color: rgba(255,255,255,0.92); max-width: 70%; }
.hc-card { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 28px; background: var(--card); border-radius: var(--radius); }
.hc-q { font: 600 14px/1.25 var(--sans); color: var(--ink-2); padding-right: 44px; }
.hc-a { font: 700 25px/1.25 var(--sans); letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; padding-right: 30px; }
.hc-facts { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; background: var(--card); border-radius: var(--radius); padding: 6px 8px; scrollbar-width: none; }
.hc-facts::-webkit-scrollbar { display: none; }
.hc-facts span { flex: none; padding: 10px 12px; font: 500 15px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.hc-facts span + span { border-left: 1px solid var(--line); }
.hc-flags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 26px; line-height: 1; padding-right: 30px; }
.hc-favs { margin: 0; padding: 0 30px 0 0; list-style: none; display: flex; flex-direction: column; gap: 14px; counter-reset: fav; }
.hc-favs li { display: flex; flex-direction: column; gap: 3px; }
.hc-fav-name { font: 700 20px/1.2 var(--sans); color: var(--ink); }
.hc-fav-why { font: 400 16px/1.4 var(--sans); color: var(--ink-2); }
.hc-langs { display: flex; flex-wrap: wrap; gap: 8px; padding-right: 30px; }
.hc-langs .chip { font: 500 15px/1 var(--sans); padding: 9px 13px; }
.hc-heart {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; border: none; cursor: pointer;
  background: var(--card); box-shadow: 0 4px 14px rgba(23, 23, 26, 0.16);
}
.hc-heart svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.hc-heart:active { transform: scale(0.92); }
.hc-card .hc-heart { background: var(--muted); box-shadow: none; }

.deck { flex: none; display: flex; flex-direction: column; gap: 14px; padding-bottom: 90px; }
.deck-head { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px 0; }
.deck-name { margin: 0; font: 800 30px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.deck-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.deck-tags span { padding: 5px 10px; border-radius: 999px; background: var(--board); font: 600 13px/1 var(--sans); color: var(--ink); }
.deck-full { align-self: center; padding: 10px 14px; background: none; border: none; font: 500 15px/1 var(--sans); color: var(--ink-3); cursor: pointer; }
.deck-skip {
  position: absolute; left: 20px; bottom: calc(var(--bottom, 0px) + 96px); z-index: 20;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--card); color: var(--ink); font: 400 24px/1 var(--sans);
  box-shadow: 0 6px 20px rgba(23, 23, 26, 0.2);
}
.deck-skip:active { transform: scale(0.93); }
.route-term { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.route-term span { color: var(--ink-4); }
.term-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: none; border: none; font: 500 16px/1.2 var(--sans); color: var(--ink); cursor: pointer; text-align: left; }
.term-row + .term-row { border-top: 1px solid var(--line-soft); }
.term-row.on { font-weight: 700; }
.term-row em { font-style: normal; font-size: 13px; color: var(--accent); }
.airport-teaser em { font-style: normal; font-size: 14px; color: var(--accent); }

.like-sheet { display: flex; flex-direction: column; gap: 12px; }
.like-title { margin: 4px 0 0; font: 700 20px/1.2 var(--sans); color: var(--ink); }
.like-label { font: 600 14px/1.2 var(--sans); color: var(--ink-3); }
.like-ideas { display: flex; flex-direction: column; gap: 8px; }
.like-idea { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font: 400 15px/1.35 var(--sans); color: var(--ink); cursor: pointer; }
.like-idea.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.like-text { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); font: 400 16px/1.4 var(--sans); resize: none; background: var(--card); color: var(--ink); }

.pe-add {
  display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; width: 100%;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: transparent;
  font: 500 16px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; text-align: left;
}
.pe-add i { font-style: normal; font-size: 22px; color: var(--ink-3); }
.pe-flags { display: flex; flex-wrap: wrap; gap: 5px; font-size: 22px; line-height: 1; }
.pe-fav { display: flex; flex-direction: column; gap: 2px; font: 400 15px/1.35 var(--sans); color: var(--ink-2); }
.pe-fav b { font: 600 17px/1.3 var(--sans); color: var(--ink); }
.pe-card.pe-chips { flex-direction: row; flex-wrap: wrap; }

.ce-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(var(--top) + 12px) 20px 12px; }
.ce-head > :first-child { justify-self: start; }
.ce-title { margin: 0; font: 700 18px/1.2 var(--sans); color: var(--ink); text-align: center; }
.ce-close { justify-self: end; background: none; border: none; font: 400 22px/1 var(--sans); color: var(--ink); cursor: pointer; padding: 6px; }
.ce-back { background: none; border: none; font: 400 28px/1 var(--sans); color: var(--ink); cursor: pointer; padding: 0 6px; }
.ce-count-top { font: 500 14px/1 var(--sans); color: var(--accent); }
.ce-cats { flex: none; display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 14px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.ce-cats::-webkit-scrollbar { display: none; }
.ce-cat { flex: none; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font: 500 16px/1 var(--sans); color: var(--ink); cursor: pointer; }
.ce-cat.on { background: var(--ink); border-color: var(--ink); color: var(--app); }
.ce-list { display: flex; flex-direction: column; }
.ce-prompt { text-align: left; padding: 20px; margin-left: 0; background: none; border: none; border-bottom: 1px solid var(--line-soft); font: 400 18px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.ce-prompt:active { background: rgba(23, 23, 26, 0.04); }
.ce-chosen { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--app); cursor: pointer; }
.ce-chosen span { font: 700 20px/1.25 var(--sans); color: var(--ink); }
.ce-chosen i { font-style: normal; font: 500 14px/1 var(--sans); color: var(--accent); }
.ce-answer { width: 100%; box-sizing: border-box; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line-strong); font: 400 18px/1.4 var(--sans); resize: vertical; background: var(--card); color: var(--ink); }
.ce-count { margin: -8px 4px 0; text-align: right; font: 400 13px/1 var(--sans); color: var(--ink-4); }
.ce-remove { background: none; border: none; font: 500 16px/1 var(--sans); color: #B3261E; padding: 12px; cursor: pointer; }
.ce-search { flex: none; padding: 0 16px 10px; }
.ce-search input { width: 100%; box-sizing: border-box; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--app); font: 400 16px/1.2 var(--sans); color: var(--ink); }
.ce-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; background: none; border: none; border-bottom: 1px solid var(--line-soft); cursor: pointer; text-align: left; }
.ce-row[hidden] { display: none; }
.ce-flag { font-size: 24px; line-height: 1; }
.ce-name { flex: 1; font: 400 17px/1.2 var(--sans); color: var(--ink); }
.ce-tick { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-strong); flex: none; }
.ce-tick.radio { border-radius: 50%; }
.ce-row.on .ce-tick { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 5px var(--card); }
.ce-foot { flex: none; padding: 12px 16px calc(var(--bottom, 0px) + 14px); border-top: 1px solid var(--line); }
.ce-fav { display: flex; flex-direction: column; gap: 8px; }
.ce-fav-country { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--app); font: 600 17px/1.2 var(--sans); color: var(--ink); cursor: pointer; text-align: left; }
.ce-fav-country i { margin-left: auto; font-style: normal; color: var(--ink-4); font-size: 20px; }
.ce-placeholder { font-weight: 400; color: var(--ink-3); }
.ce-why { width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-strong); font: 400 16px/1.3 var(--sans); background: var(--card); color: var(--ink); }
.ce-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.ce-lang { padding: 11px 15px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font: 500 15px/1 var(--sans); color: var(--ink); cursor: pointer; }
.ce-lang.on { background: var(--ink); border-color: var(--ink); color: var(--app); }

/* ── Deck motion: the W8 that flies off after a like ────────────────────── */
.fly-logo {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 92px; height: 44px; opacity: 0;
  background: var(--ink);
  -webkit-mask: url('/assets/logo-w8.png') center / contain no-repeat;
          mask: url('/assets/logo-w8.png') center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(23, 23, 26, 0.25));
  will-change: transform, opacity;
}
.fly-logo.trail { background: var(--board); filter: none; }
.deck { will-change: transform; transform-origin: 50% 20%; }

/* ── iPhone keyboard: the screen makes room, sliding with the keyboard ──── */
.native-keyboard #screen {
  padding-bottom: var(--kb, 0px);
  transition: padding-bottom 0.3s cubic-bezier(0.25, 0.9, 0.3, 1);
}
/* With the keyboard up, the home-indicator gap under the chat box is not needed. */
.kb-open .composer { padding-bottom: 10px; }

/* Places to meet, above the chat box. */
.meet-row { gap: 7px; overflow-x: auto; padding-bottom: 9px; scrollbar-width: none; }
.meet-row::-webkit-scrollbar { display: none; }
.quick.meet { flex: none; white-space: nowrap; }

/* Renaming a group you started. */
.group-title { display: flex; align-items: center; gap: 8px; }
.group-rename { flex: none; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--muted); display: grid; place-items: center; cursor: pointer; }
.group-rename svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.scope-caret { margin-left: 6px; font-size: 0.85em; opacity: 0.8; }

/* Several groups (Pro): the way back to the list, unread counts in it. */
.group-list-link { align-self: flex-start; margin-top: 8px; padding: 6px 0; background: none; border: none; font: 500 15px/1.2 var(--sans); color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.og-unread { flex: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--board); font: 700 13px/24px var(--sans); color: var(--ink); text-align: center; }
.og-open { flex: none; font: 400 22px/1 var(--sans); color: var(--ink-4); }

/* Report / block */
.safety-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--card); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(23,23,26,0.08); }
.safety-btn svg { width: 20px; height: 20px; fill: var(--ink-2); }
.profile-safety { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.profile-safety button { background: none; border: none; padding: 8px; font: 500 15px/1.2 var(--sans); color: #B3261E; cursor: pointer; }
.profile-safety span { font: 400 13px/1.3 var(--sans); color: var(--ink-4); }

/* Nearby: only "Who am I" until tapped. */
.hc-card.hc-open { cursor: pointer; }
.hc-card.hc-open:active { transform: scale(0.99); }
.hc-more { font: 500 14px/1 var(--sans); color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.hc-more i { font-style: normal; font-size: 16px; }

/* Second card: destination, boarding, languages. */
.hc-facts-card { flex: none; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; background: var(--card); border-radius: var(--radius); }
.hc-fact { display: flex; align-items: center; gap: 14px; }
.hc-fact-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--muted); display: grid; place-items: center; }
.hc-fact-icon svg { width: 19px; height: 19px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-fact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-fact-label { font: 500 13px/1.2 var(--sans); color: var(--ink-3); }
.hc-fact-value { font: 600 17px/1.25 var(--sans); color: var(--ink); }
.kw-group .head .name { font: 600 14px/1.2 var(--sans); color: var(--ink-3); }

/* Travel line inside the "Who am I" card. */
.hc-strip { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 6px -8px 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); scrollbar-width: none; padding-right: 56px; }
.hc-strip::-webkit-scrollbar { display: none; }
.hc-strip span { flex: none; padding: 4px 12px; font: 500 15px/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.hc-strip span + span { border-left: 1px solid var(--line); }
.hc-less { align-self: flex-start; background: none; border: none; padding: 0; cursor: pointer; }

/* ── Swipe right to like ────────────────────────────────────────────────── */
/* The heart stays only for screen readers and keyboards; everyone else swipes. */
.hc-heart {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; box-shadow: none !important;
}
.hc-heart:focus-visible { width: 46px !important; height: 46px !important; clip: auto; overflow: visible; margin: 0; right: 14px; bottom: 14px; background: var(--card); border-radius: 50%; outline: 2px solid var(--accent); }
[data-like] { touch-action: pan-y; will-change: transform; }
[data-like].like-dragging { position: relative; z-index: 5; box-shadow: 0 18px 40px rgba(23, 23, 26, 0.18); transition: none; }
/* Everything but the card blurs and fades as it goes. */
.like-swiping #screen .topbar,
.like-swiping #screen .scroll > :not(.deck),
.like-swiping #screen .deck > :not(.like-dragging):not(.like-gone),
.like-swiping #screen .tabs-dock,
.like-swiping #screen .deck-skip {
  filter: blur(calc(var(--like-p, 0) * 7px));
  opacity: calc(1 - var(--like-p, 0) * 0.35);
}
.like-swiping:not(.like-held) #screen .topbar,
.like-swiping:not(.like-held) #screen .deck > * { transition: filter 0.05s linear, opacity 0.05s linear; }
html:not(.like-swiping) #screen .topbar,
html:not(.like-swiping) #screen .deck > *,
html:not(.like-swiping) #screen .scroll > * { transition: filter 0.3s ease, opacity 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .like-swiping #screen * { filter: none !important; } }

/* ── Nearby header without the logo row; filters behind one icon ────────── */
.nearby-head { padding-top: calc(var(--top) + 10px); }
.route-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.route-row .route { margin: 0; min-width: 0; }
.head-icons { display: flex; gap: 10px; flex: none; }
.head-icons .icon-btn svg { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.filters-all { max-height: 86vh; overflow-y: auto; }
.fs-section { padding: 14px 0 18px; border-top: 1px solid var(--line-soft); }
.fs-section:first-of-type { border-top: none; padding-top: 4px; }
.fs-h { margin: 0; font: 700 18px/1.2 var(--sans); color: var(--ink); }
.fs-section .fs-sub { margin: 4px 0 14px; text-align: left; }
.fs-apply { margin-top: 8px; position: sticky; bottom: 0; }
button.pro-lock { width: 100%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hc-less-bottom { flex: none; align-self: center; margin-top: 4px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); font: 500 15px/1 var(--sans); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }

/* Name and age inside the "Who am I" card. */
.hc-card .deck-head { display: flex; flex-direction: column; gap: 8px; padding: 0 0 14px; margin-bottom: 2px; border-bottom: 1px solid var(--line-soft); }
.hc-card .deck-name { font: 800 28px/1.1 var(--sans); }
.hc-card .safety-btn { background: var(--muted); box-shadow: none; width: 36px; height: 36px; }
.deck { gap: 14px; }

/* The terminal field slides in once an airport is chosen. */
.terminal-appear { animation: terminal-in 0.32s cubic-bezier(.2,.8,.2,1); }
@keyframes terminal-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .terminal-appear { animation: none; } }

/* ── Settings (from the You tab) ────────────────────────────────────────── */
.set-head { flex: none; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: calc(var(--top) + 10px) 16px 14px; border-bottom: 1px solid var(--line-soft); }
.set-heading { margin: 0; text-align: center; font: 700 19px/1.2 var(--sans); color: var(--ink); }
.set-close { justify-self: end; background: none; border: none; font: 400 22px/1 var(--sans); color: var(--ink); cursor: pointer; padding: 6px; }
.set-body { padding: 0 0 calc(var(--bottom) + 30px); }
.set-group { padding: 26px 20px 10px; font: 600 15px/1.2 var(--sans); color: var(--ink-3); border-bottom: 1px solid var(--line-soft); }
.set-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; background: none; border: none; border-bottom: 1px solid var(--line-soft); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.set-row:active { background: rgba(23, 23, 26, 0.04); }
.set-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.set-title { font: 500 17px/1.25 var(--sans); color: var(--ink); }
.set-sub { font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.set-value { flex: none; font: 400 15px/1.2 var(--sans); color: var(--ink-3); }
.set-chev { flex: none; font-style: normal; font-size: 22px; color: var(--ink-4); }
.set-check { flex: none; font-style: normal; font-weight: 700; color: var(--ink); }
.set-row.danger .set-title { color: #B3261E; }
.set-note { margin: 16px 20px 4px; font: 400 15px/1.45 var(--sans); color: var(--ink-3); }
.set-unblock { flex: none; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer; }

/* ── Boarding pass, Apple Wallet style (check-in screen) ────────────────── */
.wallet-pass {
  flex: none; display: flex; flex-direction: column; gap: 22px;
  padding: 22px 20px 24px; border-radius: 18px;
  background: var(--board); color: var(--ink);
  box-shadow: 0 14px 34px rgba(23, 23, 26, 0.18);
  position: relative; overflow: hidden;
}
/* The two notches of a real pass. */
.wallet-pass::before, .wallet-pass::after {
  content: ""; position: absolute; top: 118px; width: 16px; height: 16px; border-radius: 50%; background: var(--app);
}
.wallet-pass::before { left: -8px; }
.wallet-pass::after { right: -8px; }
.wp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wp-brand { font: 700 15px/1 var(--sans); letter-spacing: 0.3em; padding-top: 6px; }
.wp-top-fields { display: flex; gap: 18px; text-align: right; }
.wp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wp-top-fields .wp-field { align-items: flex-end; }
.wp-label { font: 700 11.5px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.78; }
.wp-value { font: 500 21px/1.1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-top-fields .wp-value { font-size: 24px; font-weight: 600; }
.wp-route { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.wp-end { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wp-end.right { align-items: flex-end; text-align: right; }
.wp-city { font: 700 12.5px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.wp-code { font: 300 54px/1 var(--sans); letter-spacing: -0.01em; }
.wp-plane { flex: none; padding-bottom: 10px; }
.wp-plane svg { width: 40px; height: 40px; fill: var(--ink); }
.wp-row { display: flex; justify-content: space-between; gap: 12px; }
.wp-row .wp-value { font-size: 19px; }
.wp-row { gap: 10px; }
.wp-row .wp-field { flex: 0 1 auto; }
.wp-row .wp-value { font-size: 18px; overflow: visible; text-overflow: clip; }
.wp-row .wp-label { white-space: nowrap; }
/* Pass: the warm off-white of the app, a shade deeper so the card and its
   notches stand out; the plane exactly in the middle of the route. */
.wallet-pass { background: #ECE5D6; border: 1px solid rgba(23, 23, 26, 0.08); box-shadow: 0 12px 30px rgba(23, 23, 26, 0.12); }
.wp-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.wp-plane { justify-self: center; }
.wp-end.right { justify-self: end; }

/* Inline text button, e.g. "Resend code" under the code boxes. */
.link-btn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink);
  font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* First-run hint over the top card: which way to swipe. Never in the way. */
.swipe-hint {
  position: fixed; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center; pointer-events: none;
}
.swipe-hint-pill {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(23, 23, 26, 0.94); color: #fff;
  border-radius: 20px; padding: 12px 20px; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.swipe-hint-pill b { font-size: 15px; font-weight: 700; letter-spacing: 0.1px; }
.swipe-hint-pill i { font-style: normal; font-size: 12.5px; opacity: 0.72; }