/* 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; }
.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), 0 0 0 7px color-mix(in srgb, var(--brand) 35%, transparent); animation: ob-ping 1.6s ease-in-out infinite; }
@keyframes ob-ping { 50% { box-shadow: 0 0 0 2.5px var(--brand), 0 0 0 10px color-mix(in srgb, var(--brand) 12%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ob-bar-pm { animation: none; } }
.ob-mark-bin { margin-bottom: 22px; }
.ob-mark-bin .bin-logo { display: block; width: 132px; height: auto; }

/* 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; }