@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* Omnibus components — every value comes from tokens.css */
.ob, .ob * { box-sizing: border-box; }
.ob { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ---------- Button ---------- */
.ob-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-pill);
  font: 700 15px/20px var(--font-sans); cursor: pointer; text-decoration: none;
  transition: transform .12s ease-out, filter .12s ease-out;
}
.ob-btn:active { transform: scale(.97); }
.ob-btn:focus-visible { outline: 2px solid var(--trust); outline-offset: 2px; }
.ob-btn--primary { background: var(--omni); color: var(--on-omni); }
.ob-btn--primary:hover { filter: brightness(1.04); }
.ob-btn--secondary { background: var(--omni-soft); color: var(--omni-ink); }
.ob-btn--quiet { background: transparent; color: var(--omni-ink); padding: 0 var(--space-4); }
.ob-btn--block { display: flex; width: 100%; }
.ob-btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.ob-btn:disabled, .ob-btn[aria-disabled="true"] { background: var(--mist); color: var(--ink-muted); cursor: not-allowed; transform: none; filter: none; }
.ob-btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- Chip ---------- */
.ob-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--paper);
  font: 600 14px/20px var(--font-sans); color: var(--ink); cursor: pointer;
}
.ob-chip:focus-visible { outline: 2px solid var(--trust); outline-offset: 2px; }
.ob-chip[aria-pressed="true"], .ob-chip--selected { background: var(--omni-soft); border-color: var(--omni-ink); color: var(--ink); }
.ob-chip svg { width: 16px; height: 16px; }

/* ---------- Trust badge ---------- */
.ob-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px;
  border-radius: var(--radius-pill); background: var(--trust-soft); color: var(--trust);
  font: 700 13px/18px var(--font-sans);
}
.ob-badge--plain { background: var(--mist); color: var(--ink-muted); padding-left: 10px; }
.ob-check { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--trust); color: var(--on-trust); flex: none; }
.ob-check svg { width: 12px; height: 12px; }

/* ---------- Avatar ---------- */
.ob-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%; background: var(--omni-soft); color: var(--ink);
  font: 700 17px/1 var(--font-sans); letter-spacing: -.01em; user-select: none;
}
.ob-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ob-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.ob-avatar--lg { width: 72px; height: 72px; font-size: 26px; }
.ob-avatar--sun { background: var(--sun); color: var(--on-sun); }
.ob-avatar--sky { background: var(--trust-soft); }
.ob-avatar--mist { background: var(--mist); }
.ob-avatar--trusted { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--trust); }
.ob-avatar .ob-check { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; box-shadow: 0 0 0 2px var(--paper); }
.ob-avatar--lg .ob-check { width: 24px; height: 24px; }

/* ---------- Contact row ---------- */
.ob-row { display: flex; align-items: center; gap: var(--space-3); min-height: 72px; padding: var(--space-3) var(--space-4); background: var(--paper); }
.ob-row + .ob-row { border-top: 1px solid var(--line); }
.ob-row__text { flex: 1; min-width: 0; }
.ob-row__name { font: 600 17px/22px var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-row__meta { display: flex; align-items: center; gap: 6px; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.ob-row__meta--trusted { color: var(--trust); font-weight: 700; }
.ob-row__chev { color: var(--ink-muted); width: 20px; height: 20px; flex: none; }

/* ---------- Vouch summary ---------- */
.ob-vouch { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--mist); }
.ob-stack { display: flex; flex: none; }
.ob-stack .ob-avatar { box-shadow: 0 0 0 2px var(--mist); }
.ob-stack .ob-avatar + .ob-avatar { margin-left: -6px; }
.ob-vouch__text { font: 400 15px/21px var(--font-sans); color: var(--ink); }
.ob-vouch__text b { font-weight: 700; }

/* ---------- Sheet (verify) ---------- */
.ob-sheet { background: var(--paper); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-3) var(--space-6) var(--space-6); text-align: center; }
.ob-sheet__grab { width: 36px; height: 5px; border-radius: var(--radius-pill); background: var(--line); margin: 0 auto var(--space-4); }
.ob-sheet__title { font: 700 24px/30px var(--font-sans); letter-spacing: -.01em; margin: 0 0 var(--space-2); }
.ob-sheet__body { font: 400 16px/24px var(--font-sans); color: var(--ink-muted); margin: 0 auto var(--space-6); max-width: 300px; }
.ob-qr { display: inline-grid; place-items: center; padding: var(--space-4); border-radius: var(--radius-lg); border: 1.5px solid var(--line-strong); background: #ffffff; margin-bottom: var(--space-6); }
.ob-tabs { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--mist); margin-bottom: var(--space-6); }
.ob-tabs button { border: 0; background: transparent; min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font: 600 14px/20px var(--font-sans); color: var(--ink-muted); cursor: pointer; }
.ob-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.ob-tabs button:focus-visible { outline: 2px solid var(--trust); outline-offset: 2px; }

/* ---------- Success moment ---------- */
.ob-success { text-align: center; padding: var(--space-6); }
.ob-success__pair { display: inline-flex; align-items: center; margin-bottom: var(--space-6); }
.ob-success__pair .ob-avatar--lg { box-shadow: 0 0 0 4px var(--paper); }
.ob-success__pair .ob-avatar + .ob-avatar { margin-left: -14px; }
.ob-success__seal { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 -12px; border-radius: 50%; background: var(--trust); color: var(--on-trust); box-shadow: 0 0 0 4px var(--paper); }
.ob-success__seal svg { width: 22px; height: 22px; }
.ob-success__title { font: 800 28px/34px var(--font-sans); letter-spacing: -.02em; margin: 0 0 var(--space-2); }
.ob-success__body { font: 400 16px/24px var(--font-sans); color: var(--ink-muted); margin: 0 auto var(--space-6); max-width: 300px; }

/* ---------- Onboarding screen ---------- */
.ob-screen { display: flex; flex-direction: column; min-height: 100%; background: var(--paper); padding: var(--space-6); }
.ob-screen__art { flex: 1; display: grid; place-items: center; }
.ob-screen__title { font: 800 40px/44px var(--font-sans); letter-spacing: -.02em; margin: 0 0 var(--space-3); }
.ob-screen__body { font: 400 17px/25px var(--font-sans); color: var(--ink-muted); margin: 0 0 var(--space-6); }
.ob-screen__actions { display: grid; gap: var(--space-2); }

/* ---------- Logo (lockup) ---------- */
.ob-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.ob-logo svg { width: 36px; height: 36px; flex: none; }
.ob-logo__ring { stroke: var(--omni); }
.ob-logo__ink { stroke: var(--omni); fill: var(--omni); }
.ob-logo__sun { fill: var(--omni); }
.ob-logo__word { font: 800 26px/1 var(--font-sans); letter-spacing: -.03em; }
.ob-logo--lg svg { width: 64px; height: 64px; }
.ob-logo--lg .ob-logo__word { font-size: 44px; }
.ob-logo--on-omni { color: var(--on-omni); }
.ob-logo--on-omni .ob-logo__ring, .ob-logo--on-omni .ob-logo__ink, .ob-logo--on-omni .ob-logo__sun { stroke: var(--on-omni); fill: var(--on-omni); }
.ob-logo--on-omni .ob-logo__ring { fill: none; }

/* ---------- Private (anonymous) person ---------- */
.ob-avatar--private { background: var(--mist); color: var(--ink-muted); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.ob-avatar--private svg { width: 55%; height: 55%; }
.ob-stack .ob-avatar--private { box-shadow: inset 0 0 0 1.5px var(--line-strong), 0 0 0 2px var(--mist); }
.ob-vouch__note { display: block; margin-top: 2px; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }

/* Trust path: you → … → them */
.ob-path { display: flex; align-items: center; gap: 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ob-path__step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; text-align: center; font: 600 12px/16px var(--font-sans); color: var(--ink); }
.ob-path__step--private { color: var(--ink-muted); font-weight: 500; }
.ob-path__link { flex: 1; min-width: 12px; height: 2px; margin-bottom: 22px; background: var(--trust); border-radius: 2px; }
.ob-path__link--private { background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }

/* ---------- Share ---------- */
.ob-card { border-radius: var(--radius-lg); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; text-align: left; }
.ob-sharecard { display: flex; gap: var(--space-3); padding: var(--space-3); align-items: center; }
.ob-sharecard__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--omni); flex: none; }
.ob-sharecard__icon img { width: 40px; height: 40px; }
.ob-sharecard__title { font: 700 15px/20px var(--font-sans); color: var(--ink); }
.ob-sharecard__body { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ob-sharecard__src { font: 600 11px/16px var(--font-sans); color: var(--ink-muted); text-transform: none; margin-top: 2px; }
.ob-chat { padding: var(--space-4); background: var(--mist); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-2); }
.ob-bubble { max-width: 300px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--paper); font: 400 15px/21px var(--font-sans); color: var(--ink); }
.ob-bubble--out { align-self: flex-end; background: var(--omni-soft); }
.ob-bubble .ob-card { margin: 4px -4px 6px; box-shadow: none; background: var(--mist); }
.ob-bubble--out .ob-card { background: var(--paper); }
.ob-bubble__who { font: 700 13px/18px var(--font-sans); color: var(--omni-ink); }
.ob-targets { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4) var(--space-2); margin: var(--space-6) 0; }
.ob-target { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: 600 13px/18px var(--font-sans); color: var(--ink); padding: 0; }
.ob-target__tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--mist); color: var(--ink); }
.ob-target__tile svg { width: 26px; height: 26px; }
.ob-target:focus-visible { outline: 2px solid var(--trust); outline-offset: 4px; border-radius: 12px; }
.ob-group { padding: var(--space-4); }
.ob-group__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.ob-group__name { font: 700 18px/24px var(--font-sans); }
.ob-group__meta { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.ob-progress { height: 8px; border-radius: var(--radius-pill); background: var(--mist); overflow: hidden; margin: var(--space-2) 0 var(--space-4); }
.ob-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--trust); }
.ob-faces { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.ob-avatar--sm .ob-check { width: 14px; height: 14px; right: -3px; bottom: -3px; }
.ob-avatar--sm .ob-check svg { width: 9px; height: 9px; }
.ob-avatar--sm.ob-avatar--trusted { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--trust); }

/* ---------- Trust levels ---------- */
.ob-dots { display: inline-flex; gap: 3px; flex: none; }
.ob-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); opacity: .45; }
.ob-dots i.on { background: var(--omni-ink); opacity: 1; }
.ob-level { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--omni-soft); color: var(--ink); font: 700 13px/18px var(--font-sans); white-space: nowrap; }
.ob-level--new { background: var(--mist); color: var(--ink-muted); }
.ob-pick { display: grid; gap: var(--space-2); text-align: left; }
.ob-pick__opt { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--mist); border: 2px solid transparent; cursor: pointer; font: inherit; color: var(--ink); text-align: left; width: 100%; }
.ob-pick__opt:focus-visible { outline: 2px solid var(--trust); outline-offset: 2px; }
.ob-pick__opt[aria-checked="true"] { background: var(--omni-soft); border-color: var(--omni-ink); }
.ob-pick__text { flex: 1; min-width: 0; }
.ob-pick__name { display: block; font: 700 17px/22px var(--font-sans); }
.ob-pick__desc { display: block; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.ob-pick__radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); flex: none; }
.ob-pick__opt[aria-checked="true"] .ob-pick__radio { box-shadow: inset 0 0 0 7px var(--omni-ink); }

/* ---------- Tutorial scaffolding ---------- */
.ob-steps { display: flex; gap: 6px; margin-bottom: var(--space-6); }
.ob-steps i { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--mist); }
.ob-steps i.on { background: var(--omni); }
.ob-screen__kicker { font: 700 13px/18px var(--font-sans); color: var(--omni-ink); margin: 0 0 var(--space-2); }
.ob-screen__fine { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); text-align: center; margin: var(--space-2) 0 0; }

/* Handle field */
.ob-field { display: flex; align-items: center; gap: 2px; min-height: 56px; padding: 0 var(--space-4); border-radius: var(--radius-sm); background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--line-strong); font: 600 20px/28px var(--font-sans); color: var(--ink); }
.ob-field:focus-within { box-shadow: inset 0 0 0 2px var(--trust); }
.ob-field__at { color: var(--ink-muted); }
.ob-field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: inherit; outline: none; padding: 0; }
.ob-field__ok { color: var(--trust); display: inline-flex; align-items: center; gap: 4px; font: 700 13px/18px var(--font-sans); }
.ob-hint { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); margin: var(--space-2) 0 0; }

/* Switch */
.ob-switch { position: relative; width: 52px; height: 32px; flex: none; border: 0; padding: 0; border-radius: var(--radius-pill); background: var(--line-strong); cursor: pointer; transition: background .15s ease-out; }
.ob-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); transition: transform .15s ease-out; }
.ob-switch[aria-checked="true"] { background: var(--omni); }
.ob-switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--on-omni); }
.ob-switch:focus-visible { outline: 2px solid var(--trust); outline-offset: 2px; }

/* Setting row */
.ob-setting { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--paper); }
.ob-setting + .ob-setting { border-top: 1px solid var(--line); }
.ob-setting__text { flex: 1; min-width: 0; }
.ob-setting__title { font: 600 16px/22px var(--font-sans); color: var(--ink); }
.ob-setting__desc { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); margin-top: 2px; }
.ob-setting__value { font: 600 14px/20px var(--font-sans); color: var(--omni-ink); white-space: nowrap; }
.ob-group-title { font: 700 13px/18px var(--font-sans); color: var(--ink-muted); padding: var(--space-6) var(--space-4) var(--space-2); }
.ob-list { border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); margin: 0 var(--space-4); }

/* ---------- Home map ---------- */
.ob-map { position: relative; overflow: hidden; background: var(--mist); }
.ob-map__ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-map__road { stroke: var(--paper); fill: none; stroke-linecap: round; }
.ob-map__park { fill: var(--omni-soft); }
.ob-map__water { fill: var(--trust-soft); }
.ob-map__range { fill: var(--omni); fill-opacity: .08; stroke: var(--omni); stroke-opacity: .35; stroke-width: 1.5; stroke-dasharray: 4 6; }
.ob-pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ob-pin__tag { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--paper); font: 700 12px/16px var(--font-sans); color: var(--ink); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line); }
.ob-pin--me .ob-avatar { box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--omni); }
.ob-pin--live .ob-avatar { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--trust); }
.ob-pin--unknown { opacity: .9; }
.ob-pin--unknown .ob-avatar { box-shadow: 0 0 0 3px var(--paper); filter: saturate(.6); }
.ob-pin--unknown .ob-pin__tag { color: var(--ink-muted); font-weight: 600; }
.ob-mapbar { position: absolute; left: var(--space-4); right: var(--space-4); top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ob-mapchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-pill); background: var(--paper); font: 700 14px/20px var(--font-sans); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); border: 0; }
.ob-mapchip .ob-switch { width: 40px; height: 24px; }
.ob-mapchip .ob-switch::after { width: 18px; height: 18px; }
.ob-mapchip .ob-switch[aria-checked="true"]::after { transform: translateX(16px); }

/* Nearby encounter */
.ob-nearby { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ob-nearby__top { display: flex; align-items: center; gap: var(--space-3); }
.ob-nearby__kicker { font: 700 12px/16px var(--font-sans); color: var(--omni-ink); }
.ob-nearby__title { font: 800 20px/26px var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.ob-nearby__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ob-newdot { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 2px var(--paper); }

/* Setup nudge */
.ob-nudge { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--sun); color: var(--on-sun); }
.ob-nudge__ring { position: relative; width: 40px; height: 40px; flex: none; }
.ob-nudge__ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.ob-nudge__ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 var(--font-sans); }
.ob-nudge__text { flex: 1; font: 700 15px/20px var(--font-sans); }
.ob-nudge__text span { display: block; font: 500 13px/18px var(--font-sans); }

/* Who do you want to meet */
.ob-reach { display: grid; gap: var(--space-2); }
.ob-reach .ob-pick__opt { min-height: 88px; }
.ob-reach svg.ob-rings { width: 56px; height: 56px; flex: none; }
.ob-rings__ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ob-rings__ring.on { stroke: var(--omni-ink); stroke-dasharray: none; }
.ob-rings__me { fill: var(--omni); }
.ob-rings__dot { fill: var(--line-strong); }
.ob-rings__dot.on { fill: var(--omni-ink); }