/* Install-first onboarding and the notifications step. Its own file so the
   onboarding can change without touching the app's main sheet. */
.ob-flip, .ob-skip {
  display: block; margin: 4px auto 0; padding: 12px 8px; border: 0; background: none;
  color: var(--brand-deep, var(--brand)); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.ob-skip { margin-top: 14px; color: var(--text-3); }
.ob-install .ob-steps { margin-bottom: 6px; }
/* The how-to video (9:16): as tall as the screen allows with the title above it, never wider than the column.
   Under it the steps go small and lose their pictures: the video is the picture. .no-video = it didn't load. */
.ob-video { margin: 0 0 16px; }
.ob-video video { display: block; width: min(100%, calc((100svh - 250px) * 9 / 16)); min-width: 200px; height: auto; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 24px; background: var(--night); box-shadow: var(--float); }
.ob-howto:not(.no-video) .ob-steps { gap: 0; background: var(--surface); border-radius: 20px; box-shadow: var(--lift); }
.ob-howto:not(.no-video) .ob-step { padding: 12px 16px; background: none; border-radius: 0; box-shadow: none; }
.ob-howto:not(.no-video) .ob-step + .ob-step { border-top: 1px solid var(--line); }
.ob-howto:not(.no-video) .ob-n { width: 24px; height: 24px; font-size: 13px; }
.ob-howto:not(.no-video) .ob-step-txt { font-size: 15px; }
.ob-howto:not(.no-video) .ob-pic { display: none; }
.ob-howto.no-video .ob-video { display: none; }
/* With a video the screen is the video: the icon tile above the title goes (the video ends on it), the title tightens. */
.ob-install:has(.ob-howto:not(.no-video)) .home-icon { display: none; }
.ob-install:has(.ob-howto:not(.no-video)) h1 { font-size: 26px; }
.ob-install:has(.ob-howto:not(.no-video)) .ob-lede { margin: 6px 0 14px; font-size: 15px; }
.ob-install:has(.ob-howto:not(.no-video)) { padding-top: calc(16px + var(--safe-t)); }
.ob-install:has(.ob-howto:not(.no-video)) .ob-inner { margin-top: 0; }
.ob-install .btn-secondary { margin-top: 12px; }
.ob-added { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ok); font-size: 15px; font-weight: 500; }
.ob-added .i { width: 18px; height: 18px; flex: none; }
.ob-center { margin: 10px 0 0; text-align: center; }
.ob-warn { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--warn) 10%, white); color: var(--text-2); font-size: 15px; line-height: 1.4; }
.ob-warn .i { width: 20px; height: 20px; flex: none; color: var(--warn); margin-top: 1px; }
.ob-notify h1 { margin-top: 18px; font-size: 31px; text-align: center; }
.ob-notify .ob-lede { margin: 10px 0 22px; text-align: center; }
.ob-bell { width: 76px; height: 76px; margin: 0 auto; display: grid; place-items: center; border-radius: 22px; background: var(--brand-soft); color: var(--brand); }
.ob-bell .i { width: 36px; height: 36px; }
.ob-preview { display: flex; gap: 12px; align-items: center; margin: 0 0 24px; padding: 12px 14px; border-radius: 22px; background: var(--surface); box-shadow: var(--lift); text-align: left; }
.ob-preview .tally { flex: none; border-radius: 9px; }
.ob-preview-txt { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.3; color: var(--text-2); }
.ob-preview-txt strong { color: var(--ink, inherit); font-size: 15px; }
.ob-preview-app { color: var(--text-3); font-size: 12px; }
/* Safari 26's address bar, drawn, with the page menu ringed: the button
   people miss because it doesn't look like a button. */
.ob-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px; border-radius: 22px; background: #1c1d22; color: #e9eaee; }
.ob-bar .i { width: 18px; height: 18px; }
.ob-bar-btn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #2c2e35; }
.ob-bar-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: 20px; background: #2c2e35; font-size: 14px; }
.ob-bar-host { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.ob-bar-pm { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--brand-on-dark), 0 0 0 7px color-mix(in srgb, var(--brand-on-dark) 35%, transparent); animation: ob-ping 1.6s ease-in-out infinite; }
@keyframes ob-ping { 50% { box-shadow: 0 0 0 2.5px var(--brand-on-dark), 0 0 0 10px color-mix(in srgb, var(--brand-on-dark) 12%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ob-bar-pm { animation: none; } }
/* "Not your phone?": what the steps above are for, and a small way to change it. */
.ob-who { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--line); }
.ob-who-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.ob-who-line { color: var(--text-2); font-size: 15px; font-weight: 600; }
.ob-who-link { min-height: 44px; margin-right: -8px; padding: 0 8px; border: 0; background: none; color: var(--brand-deep, var(--brand)); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ob-fams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 4px 0 12px; padding: 4px; border-radius: 16px; background: var(--paper-2); }
.ob-fam { min-height: 44px; min-width: 0; padding: 0 8px; border: 0; border-radius: 12px; background: none; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.ob-fam[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--lift); }

/* The drawn iPhone for Chrome, Firefox and Edge (markup: phoneDrawing() in onboard.js). It loops: Share, Add to Home
   Screen, Add, the home screen with the icon landing. The finger's coordinates match the screen's 220 x 436 pixels.
   Picture sizes are the drawing's own, not layout spacing. A picture of iOS needs iOS's own greys and system colors:
   they are the only hex colors here, kept in this one block. */
.ob-draw { display: flex; justify-content: center; margin: 0 0 16px; }
.hs-phone {
  --hs-ink: #1c1c1e; --hs-sub: #3c3c43; --hs-mute: #8e8e93;
  --hs-sheet: #f2f2f7; --hs-bar: #eef0f3; --hs-sep: #e5e5ea; --hs-grip: #c7c7cc;
  --hs-blue: #0a84ff; --hs-green: #34c759; --hs-mail: #1e90ff; --hs-yellow: #ffd60a;
  --hs-wall-a: #3d6fa8; --hs-wall-b: #1c3159; --hs-wall-c: #0e192f;
  flex: none; width: 236px; height: 452px; box-sizing: border-box; padding: 8px; border-radius: 38px; background: var(--night);
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .95), inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
@media (max-width: 420px) { .hs-phone { transform: scale(.88); transform-origin: 50% 0; } .ob-draw { margin-bottom: -38px; } }
.hs-screen { position: relative; width: 220px; height: 436px; border-radius: 30px; overflow: hidden; background: var(--surface); color: var(--hs-ink); font: 11px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; text-align: left; }
.hs-screen .i { width: 12px; height: 12px; flex: none; }
.hs-island { position: absolute; z-index: 8; top: 9px; left: 50%; width: 62px; height: 18px; margin-left: -31px; border-radius: 10px; background: black; }
.hs-clock { position: absolute; z-index: 8; top: 12px; left: 22px; font-size: 10.5px; font-weight: 700; }
.hs-url { position: absolute; z-index: 3; top: 31px; left: 10px; right: 10px; height: 32px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 16px; background: var(--hs-bar); font-size: 9.5px; }
.hs-host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-page { position: absolute; left: 0; right: 0; top: 70px; bottom: 0; background: var(--paper-2); }
.hs-appbar { box-sizing: border-box; height: 46px; padding: 0 14px 12px; display: flex; align-items: flex-end; gap: 8px; background: var(--brand); color: white; }
.hs-appbar .tally { border-radius: 6px; }
.hs-appbar b { font-size: 13px; }
.hs-appbar span { margin-left: auto; font-size: 10px; opacity: .6; }
.hs-cards { padding: 12px; display: grid; gap: 8px; }
.hs-card { display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: 10px; background: var(--surface); }
.hs-h54 { height: 54px; }
.hs-h70 { height: 70px; }
.hs-card i { display: block; height: 7px; border-radius: 4px; background: var(--mute); }
.hs-card i + i { width: 80%; background: var(--paper-2); }
.hs-card i:first-child { width: 55%; }
.hs-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--hs-sheet); transform: translateY(105%); }
.hs-sheet-a { z-index: 4; height: 262px; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); animation: ob-hs-slide-a 10s ease-in-out infinite; }
.hs-sheet-b { z-index: 5; top: 0; animation: ob-hs-slide-b 10s ease-in-out infinite; }
.hs-grip { position: absolute; top: 7px; left: 50%; width: 32px; height: 4px; margin-left: -16px; border-radius: 2px; background: var(--hs-grip); }
.hs-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hs-who > span { min-width: 0; line-height: 1.25; }
.hs-who .tally { flex: none; border-radius: 6px; }
.hs-who b { display: block; font-size: 10.5px; }
.hs-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; color: var(--hs-mute); }
.hs-sheet-a .hs-who { position: absolute; top: 20px; left: 12px; right: 12px; }
.hs-targets { position: absolute; top: 62px; left: 12px; right: 12px; display: flex; justify-content: space-between; }
.hs-target { display: grid; justify-items: center; gap: 4px; font-size: 7.5px; color: var(--hs-sub); }
.hs-dot { width: 32px; height: 32px; border-radius: 50%; }
.hs-t1 { background: var(--hs-blue); }
.hs-t2 { background: var(--hs-green); }
.hs-t3 { background: var(--hs-mail); }
.hs-t4 { background: var(--hs-yellow); }
.hs-list { position: absolute; top: 122px; left: 10px; right: 10px; overflow: hidden; border-radius: 10px; background: var(--surface); font-size: 10.5px; }
.hs-row { height: 30px; padding: 0 11px; display: flex; align-items: center; gap: 8px; }
.hs-row + .hs-row { border-top: 1px solid var(--hs-sep); }
.hs-row-tap { animation: ob-hs-tap 10s ease-in-out infinite; }
.hs-head { position: absolute; top: 48px; left: 12px; right: 12px; height: 28px; display: flex; align-items: center; justify-content: space-between; }
.hs-head b { font-size: 10.5px; }
.hs-x { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--hs-sep); color: var(--hs-sub); }
.hs-add { width: 44px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--hs-blue); color: white; font-size: 11px; font-weight: 700; }
.hs-who-card { position: absolute; top: 96px; left: 10px; right: 10px; padding: 10px; gap: 12px; border-radius: 10px; background: var(--surface); }
.hs-who-card b { font-size: 11px; }
.hs-who-card .tally { border-radius: 8px; }
.hs-switch { position: absolute; top: 158px; left: 10px; right: 10px; height: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border-radius: 10px; background: var(--surface); font-size: 10.5px; }
.hs-knob { position: relative; width: 32px; height: 19px; border-radius: 10px; background: var(--hs-green); }
.hs-knob::after { content: ''; position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); }
.hs-home { position: absolute; z-index: 7; inset: 0; opacity: 0; background: linear-gradient(170deg, var(--hs-wall-a) 0%, var(--hs-wall-b) 55%, var(--hs-wall-c) 100%); animation: ob-hs-home 10s ease-in-out infinite; }
.hs-grid { position: absolute; top: 56px; left: 20px; right: 20px; display: grid; grid-template-columns: repeat(4, 38px); justify-content: space-between; row-gap: 16px; }
.hs-tile { display: grid; justify-items: center; gap: 4px; }
.hs-tile-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .17); }
.hs-tile-lb { width: 24px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.hs-tile-new { gap: 2px; transform: scale(0); animation: ob-hs-icon 10s ease-in-out infinite; }
.hs-tile-new .tally { border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.hs-new-lb { font-size: 8.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: white; }
.hs-dock { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 58px; display: flex; align-items: center; justify-content: space-around; border-radius: 20px; background: rgba(255, 255, 255, .16); }
.hs-dock-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .22); }
.hs-finger { position: absolute; z-index: 9; left: 150px; top: 470px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--brand) 50%, transparent); border: 2.5px solid var(--surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 4px 14px rgba(0, 0, 0, .4); animation: ob-hs-finger 10s ease-in-out infinite; }
@keyframes ob-hs-slide-a { 0%, 12.5% { transform: translateY(105%); } 16.5% { transform: translateY(0); } 42% { transform: translateY(0); } 42.1%, 100% { transform: translateY(105%); } }
@keyframes ob-hs-slide-b { 0%, 37.5% { transform: translateY(105%); } 41.5% { transform: translateY(0); } 90% { transform: translateY(0); } 90.1%, 100% { transform: translateY(105%); } }
@keyframes ob-hs-home { 0%, 62.5% { opacity: 0; } 67% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ob-hs-icon { 0%, 67% { transform: scale(0); } 72% { transform: scale(1.15); } 75%, 100% { transform: scale(1); } }
@keyframes ob-hs-tap { 0%, 35% { background: rgba(0, 0, 0, 0); } 36%, 38% { background: rgba(0, 0, 0, .08); } 39%, 100% { background: rgba(0, 0, 0, 0); } }
@keyframes ob-hs-finger { 0% { left: 150px; top: 470px; opacity: 0; transform: scale(1); } 3% { opacity: 1; } 9% { left: 194px; top: 47px; transform: scale(1); } 11% { transform: scale(.7); } 13% { transform: scale(1); } 25% { left: 194px; top: 47px; } 34% { left: 110px; top: 371px; transform: scale(1); } 36% { transform: scale(.7); } 38% { transform: scale(1); } 50% { left: 110px; top: 371px; } 59% { left: 186px; top: 62px; transform: scale(1); opacity: 1; } 61% { transform: scale(.7); } 63% { transform: scale(1); opacity: 1; } 67%, 100% { left: 186px; top: 62px; opacity: 0; } }
/* Reduced motion: no loop, just the screen with the page on it. */
@media (prefers-reduced-motion: reduce) { .hs-phone * { animation: none !important; } .hs-sheet, .hs-home, .hs-finger { display: none; } }

.ob-mark-bin { margin-bottom: 22px; }
.ob-mark-bin .bin-logo { display: block; width: 240px; max-width: 100%; height: auto; border-radius: 10px; }

/* The walkthrough card: progress and Skip on one quiet top row, then the
   step, then Back and Next as equals (Next alone on the first step). */
.tour-card { padding: 16px 18px 18px; border-radius: 26px; }
.tour-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tour-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--brand-soft); overflow: hidden; }
.tour-bar span { display: block; height: 100%; border-radius: 2px; background: var(--brand); transition: width .3s ease; }
.tour-card .tour-count { margin: 0; color: var(--text-3); font: 500 13px/1 var(--f-mono); white-space: nowrap; }
.tour-card .tour-skip { margin: -8px -8px -8px 0; padding: 8px; border: 0; background: none; color: var(--text-3); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.tour-card .tour-skip[hidden] { display: none; }
.tour-card h2 { margin-bottom: 6px; }
.tour-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.tour-actions.solo { grid-template-columns: 1fr; }
.tour-actions .btn { min-height: 50px; min-width: 0; width: 100%; border-radius: 16px; }
.tour-actions .btn[hidden] { display: none; }

/* Feel like an app, not a web page: no page pinch or double-tap zoom (pan-x
   pan-y leaves only scrolling; the
   maps keep their own pinch, Leaflet handles it), no rubber-band pull on the
   whole app, no grey tap flash, no long-press callout on the nav, and room
   for the rounded corners and the notch when a phone is turned sideways. */
html { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; }
.leaflet-container { touch-action: none; }
.tabbar, .side, .topbar, .btn, .ob-choice, .ob-step { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, select, textarea { font-size: max(16px, 1em); }
@media (max-width: 899px) { .topbar, #main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }
.tabbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.ob { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
/* The walkthrough card and banners keep clear of the screen's curved corners. */
.tour-card { left: max(14px, env(safe-area-inset-left)) !important; }

/* Texts. Automatic ones are a lighter bubble, signed "System". While typing,
   the box sits on the keyboard (--kb, set from visualViewport), the tab bar
   and the demo note step aside, and the thread keeps room for the box. */
.bubble.us.auto p { background: var(--brand-soft); color: var(--ink, #111114); }
html.typing .tabbar { display: none; }
html.typing .composer {
  position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 30; margin: 0;
  padding: 8px max(12px, env(safe-area-inset-left)) max(8px, calc(var(--safe-b) - var(--kb, 0px) + 8px));
  background: rgba(250, 250, 248, .94); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--line, rgba(17, 17, 20, .08));
}
html.typing .composer .fine, html.typing .composer .omw-btn { display: none; }
html.typing .bubbles { padding-bottom: 96px; }
html.typing #toasts { bottom: calc(var(--kb, 0px) + 76px); }
.composer textarea { overflow-y: auto; }

/* Mile fields say "mi" after the number, the way the money fields lead with $. */
.miles-wrap { position: relative; display: block; }
.miles-wrap::after { content: 'mi'; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.miles-wrap input { padding-right: 38px; }

/* Undo in a toast: the message, then a plain Undo the thumb can hit. */
.toast.has-undo { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.toast-undo { flex: none; margin: -8px -6px -8px auto; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: #9fb0ff; font: inherit; font-weight: 700; cursor: pointer; }

/* No text selection or long-press copy menu on the app's own words, the way
   a native app behaves. Typing, and the texts in a thread (people copy an
   address or a code out of those), still select. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable], .bubble p { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* Team: a person's login, and remove under Cancel */
.sheet .facts { margin: 0 0 12px; }
.invite-msg { white-space: pre-line; margin: 6px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--paper-2); font-size: 15px; line-height: 1.45; user-select: text; -webkit-user-select: text; }
.login-label { margin: 22px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.login-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); }
.login-row { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.login-row span { flex: 1; color: var(--text-3); }
.login-row b { font-weight: 600; font-variant-numeric: tabular-nums; user-select: text; -webkit-user-select: text; }
.login-new { margin-left: 2px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--brand); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.login-send { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; background: var(--brand-soft); color: var(--brand); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.login-send span { flex: 1; }
.login-send svg { width: 20px; height: 20px; flex: none; }
.login-send .row-chev { width: 16px; height: 16px; opacity: .7; }
.sheet-remove { display: block; margin: 10px auto 0; padding: 10px 16px; border: 0; background: none; color: var(--bad); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }