/* A calm, content-first iOS web application. Scoped to the isolated copy. */
:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --bg: #f3f3f3; --surface: #ffffff; --text: #0d0d0d; --muted: #5d5d5d;
  --hairline: #dfdfe0; --disclosure: #bfbfc0; --journey-icon: 28px; --journey-gap: 14px;
  --accent: #181818; --accent-ink: #fff; --radius: 22px;
}
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; scroll-padding-block: 70px 120px; }
body { font-family: var(--font); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.container { max-width: 640px; padding: calc(40px + env(safe-area-inset-top)) 20px 0; }
.page-title { font-size: 34px; line-height: 1.18; font-weight: 600; letter-spacing: -.025em; margin: 0 0 18px; }
.group-switcher { background: transparent; border: 0; border-radius: 0; margin: 0 0 36px; }
.group-switcher > summary { padding: 0; min-height: 48px; gap: 12px; justify-content: flex-start; }
.group-switcher > summary .gs-logo { display: none; }
.group-switcher > summary .gs-meta { flex: 0 1 auto; }
.gs-name { font-size: 17px; font-weight: 500; color: var(--tone-ink-181818,#181818); }
.gs-sub { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.group-switcher > summary .gs-chev { width: 14px; height: 14px; margin-left: 4px; color: var(--tone-ink-181818,#181818); }
.card { border: 0; border-radius: 26px; padding: 20px; box-shadow: none; }
.card.sched-item { position: relative; padding: 24px 18px; margin-bottom: 28px; }
.occasion-day { color: var(--muted); font-size: 17px; line-height: 22px; font-weight: 400; letter-spacing: normal; text-transform: none; margin-top: 8px; }
.sched-head { display: block; }
.sched-title { padding-right: 36px; font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: normal; color: var(--text); }
.sched-when { display: flex; align-items: baseline; gap: 0; white-space: normal; overflow: visible; font-size: 17px; font-weight: 400; line-height: 22px; letter-spacing: normal; color: var(--muted); margin-top: 8px; }
.sched-item .sched-icons { position: absolute; right: 14px; top: 14px; }
.head-icon { width: 44px; height: 44px; color: var(--tone-ink-181818,#181818); }
.sched-div { border-color: var(--hairline); margin: 28px 0; }
.journey-heading { display: flex; align-items: center; gap: var(--journey-gap); margin-bottom: 24px; }
.journey-heading h3 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.journey-status { font-size: 14px; line-height: 1.4; color: var(--muted); margin: 3px 0 0; }
.journey-arrow { flex: 0 0 var(--journey-icon); width: var(--journey-icon); height: var(--journey-icon); border-radius: 7px; display: grid; place-items: center; color: #fff; background: #28c34d; }
.journey-arrow .mi-arrow { color: inherit; width: 21px; height: 21px; opacity: 1; }
.journey-arrow--home .mi-arrow { transform: rotate(180deg); }
.journey--waiting .journey-arrow { background: #ff8d1a; color: #fff; }
.journey .leg-pill, .journey .forare-badge { display: none; }
.journey .driver-row { gap: 12px; }
.journey .driver-row > .avatar { --s: 40px; background: var(--bg); color: var(--muted); }
.journey .driver-name .dn-text { font-size: 17px; line-height: 1.4; white-space: normal; overflow: visible; font-weight: 500; }
.journey .driver-rel { font-size: 14px; line-height: 1.45; color: var(--muted); }
.journey .leg-note { display: block; margin: 18px 0 0; max-width: 100%; border: 0; padding: 16px; border-radius: 16px; background: var(--bg); font-size: 16px; line-height: 1.5; }
.journey .leg-actions { margin-top: 20px; }
.journey .leg-book { width: 100%; margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
.journey .leg-seats-label { font-size: 15px; font-weight: 400; color: var(--muted); }
.journey .btn.drive-btn { width: 100%; min-height: 50px; padding: 13px 20px; border-radius: 999px; border: 0; color: #fff; background: #181818; font-size: 17px; line-height: 1.4; font-weight: 600; box-shadow: none; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.journey .btn.drive-btn:hover  { background: #0062cc; } }
.journey .btn.drive-btn.also-btn { width: auto; background: transparent; color: var(--tone-ink-181818,#181818); padding: 8px 0; font-size: 15px; font-weight: 500; }
.journey .leg-also { padding: 0 0 16px; margin: 0 0 24px; border-bottom: 1px solid var(--hairline); }
.journey .driver-block + .driver-block { margin-top: 24px; border-top: 1px solid var(--hairline); padding-top: 24px; }
.btn { min-height: 44px; border-radius: 999px; font-size: 16px; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { font-size: 17px; min-height: 48px; }
.install-box { border: 0; border-radius: 20px; background: #e8f2ff; padding: 20px 52px 20px 20px; }
.install-title { font-size: 17px; }
.install-text, .install-steps { font-size: 15px; line-height: 1.5; }
.install-x, .sheet-close, .back-fab { min-width: 44px; min-height: 44px; }
/* Floating navigation is the only translucent surface. */
.tabbar { width: min(calc(100% - 32px), 390px); max-width: 390px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 999px; padding: 5px; background: rgba(250,250,252,.82); border: 1px solid #ffffffd9; box-shadow: inset 0 1px 0 var(--tone-edge-ffffff,#fff), inset 0 -1px 0 #0000000a, 0 8px 28px #1c1c1e1c; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); }
.tabbar .tab { min-height: 58px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-radius: 999px; padding: 6px 10px; color: var(--tone-ink-48484a,#48484a); }
.tabbar .tab.active, .tabbar .tab.active:hover { background: #7676801c; color: var(--tone-ink-181818,#181818); }
.tabbar .tab svg { width: 24px; height: 24px; stroke-width: 1.8; }
.tab-label { font-size: 11px; line-height: 1.2; font-weight: 600; }
.tabbar .tab .avatar { --s: 24px; background: var(--hairline); color: var(--tone-ink-48484a,#48484a); }
.page-end { padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important; }
.navbar { background: transparent; }
body.nav-scrolled .navbar, body.subpage .navbar { background: #f3f3f3f2; backdrop-filter: blur(16px); border-bottom: 1px solid var(--hairline); }
/* Forms use full-width grouped controls and comfortable vertical rhythm. */
.sheet-backdrop { top: var(--visual-top, 0px); bottom: auto; height: var(--visual-height, 100dvh); }
.sheet { padding: 32px 24px max(28px, env(safe-area-inset-bottom)); background: var(--surface); max-height: calc(var(--visual-height, 100dvh) - 12px); border-radius: 28px 28px 0 0; overscroll-behavior: contain; scroll-padding-block: 24px; }
.sheet:focus { outline: none; }
.sheet-title { font-size: 24px; line-height: 1.25; letter-spacing: -.025em; padding-right: 40px; margin-bottom: 28px; }
.sheet-close { top: 16px; right: 12px; border-radius: 50%; color: var(--muted); }
.sheet-field { margin-bottom: 24px; }
.sheet-label { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.sheet-help { font-size: 14px; line-height: 1.5; font-style: normal; margin-bottom: 14px; }
.sheet input:not([type=checkbox]):not([type=radio]), .sheet .stepper, .sheet-opt, .seg2 { background: var(--tone-fill-ffffff,#fff); }
.sheet-opt, .seg2-opt { min-height: 50px; }
.stepper button { min-width: 48px; min-height: 48px; }
.sheet button[type=submit] { border-radius: 999px; min-height: 50px; }
body.keyboard-open .tabbar { visibility: hidden; }
@media (min-width: 560px) { .sheet { border-radius: 28px; max-width: 480px; } }
@media (max-width: 360px) { .container { padding-inline: 16px; } .card.sched-item { padding-inline: 20px; } }
@media (display-mode: standalone) { .install-box { display: none !important; } .tabbar { bottom: calc(10px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-transparency: reduce) { .tabbar, body.nav-scrolled .navbar { background: var(--tone-fill-fafafa,#fafafa); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Progressive disclosure keeps the agenda readable; each journey is a large tap target. */
.card.sched-item { padding-bottom: 0; overflow: hidden; }
.sched-when { margin-bottom: 24px; }
.sched-item > .sched-div { display: none; }
.journey { position: relative; margin: 0; border: 0; }
.journey::before { content: ""; position: absolute; top: 0; left: calc(var(--journey-icon) + var(--journey-gap)); right: 0; height: 1px; background: var(--hairline); pointer-events: none; }
.journey-heading { margin: 0; min-height: 72px; padding: 6px 0; list-style: none; cursor: pointer; }
.journey-heading::-webkit-details-marker { display: none; }
.journey-heading > div { flex: 1; min-width: 0; }
.journey-heading h3, .journey-heading .journey-status { font-family: var(--font); font-size: 17px; line-height: 22px; font-weight: 400; letter-spacing: normal; }
.journey-heading h3 { color: var(--tone-ink-0d0d0d,#0d0d0d); }
.journey-heading .journey-status { color: var(--tone-ink-5d5d5d,#5d5d5d); }
.journey-disclosure { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 24px; color: var(--disclosure); }
.journey-disclosure .disclosure-chevron { width: 18px; height: 18px; transform: rotate(-90deg); }
.journey[open] .journey-disclosure { transform: rotate(90deg); }
.journey-content { padding: 4px 0 24px; }
.journey[open] .journey-heading { padding-bottom: 20px; }
.profile-admin-links { padding: 4px 24px; }
.profile-admin-links a { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-decoration: none; font-size: 17px; }
.profile-admin-links a + a { border-top: 1px solid var(--hairline); }
.field { margin-bottom: 24px; }
.field > label { font-size: 15px; margin-bottom: 8px; }
.card input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), .card textarea { border: 0; box-shadow: none; background: var(--bg); border-radius: 12px; padding: 14px; }
.sheet .btn.primary.block { border-radius: 999px; }

.fam-head { margin: 20px 0 8px; font-size: 13px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.fam-row { background: transparent; border: 0; border-radius: 0; padding: 14px 0; margin: 0; }
.fam-row + .fam-row { border-top: 1px solid var(--hairline); }
.fam-row .name-text { font-size: 17px; font-weight: 500; }
.fam-row .contact { text-decoration: none; font-size: 15px; line-height: 1.5; }

/* Keep the journey label left and driver context right, like an iOS value row. */
.journey-heading { column-gap: 12px; }
.journey-heading > h3 { flex: 0 0 auto; }
.journey-summary { display: grid; gap: 12px; flex: 1; min-width: 0; text-align: right; }
.journey-person { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; }
.journey-person-text { display: grid; gap: 3px; min-width: 0; }
.journey-summary .journey-status { margin: 0; overflow-wrap: anywhere; }
.journey-person > .avatar { --s: 40px; flex-shrink: 0; background: var(--bg); color: var(--muted); font-size: 14px; }
.journey-relation { font-size: 12px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.journey::before { left: calc(var(--journey-icon) + 12px); }
.journey-content > .driver-block:first-child > .leg-note:first-child { margin-top: 0; }
@media (max-width: 360px) {
  .journey-heading { column-gap: 8px; }
  .journey::before { left: calc(var(--journey-icon) + 8px); }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.journey-link, .journey-link:hover { color: inherit; text-decoration: none; }
.journey-link { margin-inline: -8px; padding-inline: 8px; }
.journey-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
body:has(.journey-page-title) .container { padding-top: calc(100px + env(safe-area-inset-top)); }
body:has(.journey-page-title) .navbar { height: calc(76px + env(safe-area-inset-top)); background: var(--bg); border: 0; }
body:has(.journey-page-title) .navbar-title { font-size: 17px; }
body:has(.journey-page-title) .back-fab { left: max(20px, calc(50% - 300px)); width: 44px; height: 44px; min-height: 44px; border-radius: 50%; justify-content: center; background: #ffffffb3; border: 1px solid var(--tone-edge-cdcdcd,#cdcdcd); box-shadow: inset 0 1px 2px var(--tone-edge-ffffff,#fff), 0 3px 12px #00000005; }
body:has(.journey-page-title) .back-fab svg { width: 24px; height: 24px; }
body:has(.journey-page-title) .journey::before { display: none; }
body:has(.journey-page-title) .journey-content { padding-top: 24px; border-top: 1px solid var(--hairline); }
body:has(.journey-page-title) .journey .driver-row > .avatar { --s: 48px; }
body:has(.journey-page-title) .journey .driver-name .dn-text { font-size: 15px; line-height: 20px; }
body:has(.journey-page-title) .journey-driver-panel .driver-rel { margin-top: 0; }


.reaction-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 20px; line-height: 1; }
.reaction-people-sheet { position: fixed; inset: auto 0 0; margin: 0 auto; width: min(100%, 480px); max-height: 70dvh; overflow: auto; padding: 24px 24px max(24px, env(safe-area-inset-bottom)); background: var(--surface); color: var(--text); border: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -4px 32px #00000015; }
.reaction-people-sheet::backdrop { background: #0005; }
.reaction-sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.reaction-sheet-heading h2 { margin: 0; font-size: 20px; font-weight: 600; }
.reaction-sheet-close { display: grid; place-items: center; min-width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg); color: var(--tone-ink-5d5d5d,#5d5d5d); font-size: 28px; cursor: pointer; }
.reaction-people-list { list-style: none; padding: 0; margin: 16px 0 0; }
.reaction-people-list li { display: flex; align-items: center; gap: 12px; min-height: 64px; font-size: 17px; }
.reaction-people-list li + li { border-top: 1px solid var(--hairline); }
.reaction-people-list .avatar { --s: 40px; }
.reaction-sheet-empty { color: var(--tone-ink-5d5d5d,#5d5d5d); font-size: 16px; margin-top: 24px; }
body:has(.reaction-people-sheet[open]) { overflow: hidden; }

/* Conversation: trip facts stay above a single, quiet message stream. */
.journey-chat { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hairline); scroll-margin-top: 90px; }
.chat-heading { margin: 0 0 20px; font-size: 14px; font-weight: 500; color: var(--tone-ink-5d5d5d,#5d5d5d); }
.chat-empty { font-size: 15px; line-height: 1.5; color: var(--tone-ink-5d5d5d,#5d5d5d); margin: 0 0 20px; }
.chat-messages { display: flex; flex-direction: column; gap: 20px; }
.chat-message { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; align-self: flex-start; min-width: 0; }
.chat-message--own { align-items: flex-end; align-self: flex-end; }
.chat-message-meta { display: flex; flex-wrap: wrap; gap: 4px 7px; margin: 0 4px 6px; color: var(--tone-ink-5d5d5d,#5d5d5d); font-size: 12px; line-height: 1.4; }
.chat-message--own .chat-message-meta { justify-content: flex-end; }
.chat-driver-label { font-weight: 600; }
.chat-message-meta time { font-size: 11px; }
.chat-bubble { padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: var(--tone-fill-f3f3f3,#f3f3f3); color: var(--tone-ink-1c1c1e,#1c1c1e); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; min-width: 44px; min-height: 44px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.chat-message--own .chat-bubble { border-radius: 20px 20px 6px 20px; }
.chat-bubble-row { position: relative; max-width: 100%; }
.chat-react-trigger svg { width: 23px; height: 23px; }
.chat-react-trigger { display: grid; place-items: center; position: absolute; left: calc(100% + 2px); top: 50%; transform: translateY(-50%); width: 32px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--tone-ink-5d5d5d,#5d5d5d); font-size: 23px; opacity: 0; cursor: pointer; }
.chat-message--own .chat-react-trigger { left: auto; right: calc(100% + 2px); }
.chat-react-trigger:focus-visible, .chat-message:hover .chat-react-trigger, .chat-message:focus-within .chat-react-trigger { opacity: 1; }
@media (hover: none) { .chat-react-trigger:not(:focus-visible) { opacity: 0; } }
/* A 28px badge on a 44px target, attached to the bubble's lower edge. */
.chat-reactions { position: relative; display: flex; flex-wrap: wrap; gap: 0 4px; max-width: 100%; margin: -16px 4px -8px; }
.chat-message--own .chat-reactions { justify-content: flex-end; }
.chat-reaction-count { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 0; border: 0; border-radius: 999px; color: var(--tone-ink-5d5d5d,#5d5d5d); background: transparent; font: inherit; font-size: 12px; line-height: 1; cursor: pointer; }
.chat-reaction-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; height: 28px; box-sizing: border-box; padding: 0 7px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); }
.chat-reaction-count .reaction-emoji { font-size: 17px; line-height: 1; }
.chat-reaction-count.is-mine .chat-reaction-badge { background: var(--tone-fill-ededed,#ededed); border-color: #b4d2f8; color: #005ec4; }
.chat-reaction-count:focus-visible { outline: 2px solid var(--tone-ink-181818,#181818); outline-offset: 1px; }
.card .chat-compose { display: flex; align-items: flex-end; gap: 6px; margin-top: 24px; padding: 6px; border: 1px solid var(--tone-edge-dfdfdf,#dfdfdf); border-radius: 27px; background: var(--surface); box-shadow: 0 2px 8px #00000004; }
.card .chat-compose textarea { flex: 1; min-width: 0; width: auto; min-height: 44px; max-height: 132px; padding: 11px 8px 11px 12px; margin: 0; background: transparent; border: 0; border-radius: 20px; box-shadow: none; resize: none; font-size: 16px; line-height: 22px; }
.chat-send { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 4px; border: 0; border-radius: 50%; background: #181818; color: #fff; cursor: pointer; }
.chat-send svg { width: 24px; height: 24px; }
.chat-send:disabled { background: var(--tone-fill-dfdfdf,#dfdfdf); color: var(--tone-ink-767676,#767676); cursor: default; }
.chat-picker { position: fixed; inset: 0; width: min(calc(100% - 32px), 350px); max-height: 80dvh; margin: auto; padding: 16px; border: 1px solid #ffffffcc; border-radius: 28px; background: var(--surface); color: var(--text); box-shadow: 0 10px 40px #0002; }
.chat-picker::backdrop { background: #0004; }
.chat-picker h2 { font-size: 17px; }
.chat-emoji-options { display: flex; justify-content: space-between; gap: 4px; margin-top: 12px; }
.chat-emoji-options form { margin: 0; min-width: 0; }
.chat-emoji-option { display: grid; place-items: center; width: 48px; height: 52px; padding: 4px; border: 1px solid transparent; border-radius: 16px; background: transparent; cursor: pointer; }
.chat-emoji-option .reaction-emoji { font-size: 28px; }
.chat-emoji-option[aria-pressed=true] { border-color: #b4d2f8; background: var(--tone-fill-ededed,#ededed); }
body:has(.chat-dialog[open]) { overflow: hidden; }

/* Each car gets its own full-height journey row. */
.journey-link + .journey-link { position: relative; }
.journey-link + .journey-link::before { content: ""; position: absolute; top: 0; left: calc(var(--journey-icon) + 20px); right: 8px; height: 1px; background: var(--hairline); }
.driver-block { scroll-margin-top: 90px; }
@media (max-width: 420px) { .journey-link + .journey-link::before { left: calc(var(--journey-icon) + 16px); } }

/* Passenger avatars match the 48px driver portrait above. */
.journey .leg-book > .av-group { flex: 0 0 auto; padding-inline: 0; }
.journey .leg-book .stack-av .avatar { --s: 48px; }
.journey .leg-book > .leg-seats-label { flex: 0 0 auto; }
.journey .leg-book > .seat-book { flex: 0 0 auto; margin-left: 0; }

.sched-when > span:first-child { flex: 0 0 auto; white-space: nowrap; }
.sched-when > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-when > span:last-child:not(:empty)::before { content: " · "; white-space: pre; }

/* Tinted add control matches the 48px driver and passenger avatars. */
.journey .leg-book > .seat-book { width: 48px; height: 48px; color: var(--tone-ink-181818,#181818); background: transparent; }
.journey .seat-book::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tone-fill-ededed,#ededed); }
.journey .seat-book .seat-ring-plus { width: 22px; height: 22px; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.journey .seat-book:hover::before  { background: #d2e4ff; } }
.journey .seat-book:active::before { background: #bed8ff; }
.journey .seat-book:focus-visible { outline: 2px solid var(--tone-ink-181818,#181818); outline-offset: 2px; }

/* Journey detail uses separate inset groups. */
.card.journey-layout { padding: 0; background: transparent; border: 0; border-radius: 0; }
.journey-layout .journey-panel, .journey-layout .journey-chat { background: var(--surface); border: 0; border-radius: 26px; padding: 24px 18px; margin: 0 0 20px; }
.journey-layout .activity-panel { position: relative; }
.journey-layout .sched-when { margin-bottom: 0; }
body:has(.journey-page-title) .journey-layout .journey-content { padding-top: 0; border: 0; }
.journey-layout .create-journey-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; color: var(--text); font-size: 17px; text-decoration: none; }
.journey-layout .create-journey-link .disclosure-chevron { width: 18px; height: 18px; transform: rotate(-90deg); color: var(--tone-ink-bfbfc0,#bfbfc0); }
.journey-create label { display: block; margin-bottom: 8px; font-size: 15px; color: var(--tone-ink-5d5d5d,#5d5d5d); }
.journey-create select, .journey-create textarea { width: 100%; margin-bottom: 20px; font: inherit; }
.journey-create .own-child { display: flex; align-items: center; gap: 10px; color: var(--text); min-height: 44px; }
.journey-create .own-child input { width: auto; }

.journey-create .create-help { color: var(--tone-ink-5d5d5d,#5d5d5d); font-size: 14px; line-height: 1.4; margin: -8px 0 20px; }

/* One focus boundary for the complete message composer. */
.card .chat-compose:focus-within { border-color: #181818; box-shadow: 0 0 0 1px #181818; }
.card .chat-compose textarea:focus { outline: none; box-shadow: none; caret-color: #181818; }
.card .chat-compose .chat-send:focus-visible { outline: 2px solid var(--tone-ink-181818,#181818); outline-offset: 2px; }

.create-car-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; background: #181818; color: #fff; }
.create-car-icon svg { width: 22px; height: 22px; }
.create-journey-label { flex: 1; }

/* Separate the driver and seats, inset to the text beside the 48px avatar. */
.journey .driver-block > .leg-actions { position: relative; padding-top: 20px; }
.journey .driver-block > .leg-actions::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: var(--hairline); }

.driver-rel .driver-role { font-weight: 600; }

/* Add-seat control continues the overlapping passenger stack. */
.journey .leg-book > .av-group + .seat-book { margin-left: -24px; z-index: 2; }
.journey .leg-book > .av-group + .seat-book::before { box-sizing: border-box; border: 1px solid var(--tone-edge-ffffff,#fff); }

.child-info .ci-label { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.child-info .ci-addr { padding: 4px 0 24px; }
.child-info .ci-parent { border-color: var(--hairline); gap: 12px; }
.child-info .ci-parent-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.child-info .ci-phone { font-size: 15px; }
.child-info a.ci-phone { position: relative; display: inline-block; line-height: 22px; }
.child-info a.ci-phone::after { content: ""; position: absolute; inset: -11px 0; }
.child-info .ci-parent > .avatar { --s: 48px; flex: 0 0 48px; }
.child-info .ci-parent-name { line-height: 22px; }

.journey-layout .create-first-journey { border-radius: 999px; display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 20px; font-size: 17px; font-weight: 600; line-height: 24px; }
/* Grouped controls for creating a journey. */
.journey-create .create-options { padding-block: 8px; }
.journey-create .create-direction { border: 0; padding: 16px 0; margin: 0; min-width: 0; }
.journey-create legend { float: left; width: 100%; margin-bottom: 12px; font-size: 17px; font-weight: 400; }
.direction-segments { clear: both; display: flex; padding: 3px; border-radius: 10px; background: var(--tone-fill-dfdfdf,#dfdfdf); }
.journey-create .direction-segments label { position: relative; flex: 1; margin: 0; color: var(--text); }
.direction-segments input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.direction-segments label > span:not(.sr-only) { display: grid; place-items: center; min-height: 44px; border-radius: 8px; font-size: 15px; }
.direction-segments input:checked + span { background: var(--tone-fill-ffffff,#fff); box-shadow: 0 1px 4px #0002; font-weight: 600; }
.direction-segments input:focus-visible + span { outline: 2px solid var(--accent); }
.direction-segments input:disabled + span { opacity: .4; }
.journey-create .create-help { margin: 0 0 16px; font-size: 13px; }
.journey-create .create-option-row, .journey-create .own-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--hairline); min-height: 72px; margin: 0; padding: 12px 0; }
.journey-create .create-option-row label, .journey-create .own-child { font-size: 17px; font-weight: 400; color: var(--text); margin-bottom: 0; }
.create-option-detail { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.journey-create .own-child > span { order: -1; }
.journey-create .own-child input.create-switch { appearance: none; position: relative; flex: 0 0 51px; width: 51px; height: 31px; min-height: 31px; margin: 6px 0; border: 0; border-radius: 99px; background: var(--tone-fill-cdcdcd,#cdcdcd); cursor: pointer; transition: background .15s; }
.create-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0002; transition: transform .15s; }
.journey-create .own-child input.create-switch:checked { background: #34c759; }
.create-switch:checked::after { transform: translateX(20px); }
.create-switch:disabled { opacity: .45; }
.journey-create .create-message label { display: flex; justify-content: space-between; font-size: 17px; font-weight: 400; color: var(--text); }
.create-message label span { color: var(--muted); font-size: 15px; }
.journey-create .create-message textarea { border: 1px solid var(--tone-edge-dfdfdf,#dfdfdf); border-radius: 14px; background: var(--surface); box-shadow: none; margin: 0; padding: 12px 14px; resize: none; font-size: 17px; line-height: 24px; }
.journey-create button[type=submit] { border-radius: 999px; min-height: 50px; font-size: 17px; }

#load-more { display: block; width: fit-content; max-width: 100%; min-height: 44px; margin: 8px auto 24px; padding: 11px 24px; border: 0; border-radius: 999px; background: var(--surface); color: var(--accent); box-shadow: none; font-size: 17px; font-weight: 500; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
#load-more:hover  { background: var(--tone-fill-ededed,#ededed); } }
#load-more:active { background: var(--tone-fill-ededed,#ededed); }
/* iOS-inspired push/pop transitions for same-origin document navigation. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.22,.7,.2,1); mix-blend-mode: normal; }
html[data-page-direction="forward"]::view-transition-old(root) { animation-name: page-push-out; }
html[data-page-direction="forward"]::view-transition-new(root) { animation-name: page-push-in; }
html[data-page-direction="back"]::view-transition-old(root) { animation-name: page-pop-out; z-index: 2; }
html[data-page-direction="back"]::view-transition-new(root) { animation-name: page-pop-in; z-index: 1; }
@keyframes page-push-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes page-push-out { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@keyframes page-pop-in { from { transform: translateX(-25%); } to { transform: translateX(0); } }
@keyframes page-pop-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
/* Interactive back gesture in installed mobile apps. */
body.edge-back-dragging { transform: translateX(var(--edge-back-x, 0px)); will-change: transform; user-select: none; -webkit-user-select: none; }
body.edge-back-settling { transition: transform 180ms cubic-bezier(.22,.7,.2,1); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.edge-back-dragging { transform: none; } }
/* Keep vertical overscroll contained without disabling browser back gestures. */
html, body { overscroll-behavior-y: none; }
body.sheet-scroll-locked { position: fixed; top: var(--sheet-scroll-top); width: 100%; overflow: hidden; }
.sheet-backdrop { overscroll-behavior: none; }
.sheet, dialog.chat-dialog { overscroll-behavior: contain; padding-top: 40px; }
.sheet-close, .reaction-sheet-close { width: 44px; height: 44px; flex-shrink: 0; background: var(--tone-fill-f3f3f3,#f3f3f3); color: var(--tone-ink-5d5d5d,#5d5d5d); border-radius: 50%; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.sheet-close:hover, .reaction-sheet-close:hover  { background: var(--tone-fill-dfdfe4,#dfdfe4); } }
.sheet-close svg, .reaction-sheet-close svg { width: 18px; height: 18px; }
.sheet-grabber { position: absolute; top: 0; left: calc(50% - 30px); width: 60px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; cursor: grab; touch-action: none; }
.sheet-grabber span { width: 36px; height: 5px; border-radius: 99px; background: var(--tone-fill-cdcdcd,#cdcdcd); }
.sheet-title, .reaction-sheet-heading { touch-action: none; }
.sheet.sheet-dragging, dialog.sheet-dragging { animation: none; transform: translateY(var(--sheet-drag-y, 0px)); will-change: transform; user-select: none; }
.sheet.sheet-settling, dialog.sheet-settling { transition: transform 180ms ease-out; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sheet.sheet-dragging, dialog.sheet-dragging { transform: none; } }
/* Grabbers belong to bottom sheets, not centered modals. */
.chat-picker .sheet-grabber { display: none; }
dialog.chat-picker { padding-top: 16px; }
.chat-picker .reaction-sheet-heading { touch-action: auto; }
@media (min-width: 560px) {
  .sheet-grabber { display: none; }
  .sheet { padding-top: 32px; }
  .sheet-title, .reaction-sheet-heading { touch-action: auto; }
  dialog.reaction-people-sheet { inset: 0; margin: auto; height: fit-content; border-radius: 28px; padding-top: 24px; }
}

.journey .seat-car-placeholder { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: var(--bg); color: var(--muted); }
.seat-car-placeholder svg { width: 24px; height: 24px; }
/* Current group and a shared group picker. */
.group-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 26px; padding: 20px 18px; margin: 0 0 28px; }
.group-card .gs-logo, .group-picker .gs-logo { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background: transparent; color: var(--muted); overflow: hidden; }
.group-card .gs-logo img, .group-picker .gs-logo img { width: 100%; height: 100%; object-fit: contain; }
.group-card .gs-meta, .group-picker .gs-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; text-align: left; }
.group-card .gs-name, .group-picker .gs-name { color: var(--text); font-size: 17px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.group-card .gs-sub, .group-picker .gs-sub { color: var(--muted); font-size: 14px; line-height: 20px; margin-top: 3px; }
.group-card.schedule-group-switcher { display: block; padding: 0; overflow: hidden; }
.schedule-group-switcher summary { display: flex; align-items: center; gap: 12px; padding: 20px 18px; list-style: none; cursor: pointer; }
.schedule-group-switcher summary::-webkit-details-marker { display: none; }
.schedule-group-switcher-chevron { flex: 0 0 18px; width: 18px; height: 18px; color: var(--tone-ink-8f8f8f,#8f8f8f); transform: rotate(90deg); transition: transform 220ms ease; }
.schedule-group-switcher[open] .schedule-group-switcher-chevron { transform: rotate(270deg); }
.schedule-group-switcher-options { display: grid; gap: 4px; margin: 0; padding: 0 10px 10px; }
.schedule-group-switcher-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 14px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background-color 140ms ease; }
.schedule-group-switcher-option:active { background: var(--tone-fill-f3f3f3,#f3f3f3); }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .schedule-group-switcher-option:hover { background: var(--tone-fill-f3f3f3,#f3f3f3); }
}
.schedule-group-switcher-option > svg { flex-shrink: 0; }
.schedule-group-switcher summary:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .schedule-group-switcher-chevron { transition: none; } }
.group-picker-open { flex-shrink: 0; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--tone-fill-ededed,#ededed); color: var(--accent); font-size: 15px; font-weight: 500; cursor: pointer; }
.group-picker-open:active { background: var(--tone-fill-ededed,#ededed); }
.group-picker-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 14px 0; border: 0; background: transparent; cursor: pointer; }
.group-picker-item { margin: 0; }
.group-picker-item + .group-picker-item { border-top: 1px solid var(--hairline); }
.group-picker-row:active { background: var(--bg); }
.group-selected { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); }
.group-picker-help { font-size: 15px; line-height: 22px; color: var(--muted); margin: 20px 0; }
.group-picker .group-create { margin-top: 20px; border-radius: 999px; }

.tabbar .tab-brand-icon { width: 24px; height: 24px; object-fit: cover; border-radius: 6px; }

/* Two navigation choices between brand and profile bubbles. */
.tabbar { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tabbar-items { display: flex; flex: 1; min-width: 0; padding: 5px; border: 1px solid #ffffffd9; border-radius: 999px; background: rgba(250,250,252,.9); box-shadow: 0 8px 28px #1c1c1e1c; -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.tabbar .tab { flex: 1; min-width: 0; padding-inline: 4px; }
.brand-bubble { display: grid; place-items: center; flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%; background: var(--tone-fill-ededed,#ededed); overflow: hidden; box-shadow: 0 8px 28px #1c1c1e1c; }
.brand-bubble img { width: 52px; height: 52px; object-fit: contain; transform: translateY(-4px); }

.about-brand img { border-radius: 17px; }
.about-brand h1 { margin: 16px 0 8px; }
.about-brand p { color: var(--muted); margin: 0 0 24px; }
@media (prefers-reduced-transparency: reduce) { .tabbar { background: transparent; } .tabbar-items { background: var(--tone-fill-fafafa,#fafafa); } }

.profile-bubble { display: grid; place-items: center; flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%; background: rgba(250,250,252,.9); border: 0; overflow: hidden; box-shadow: 0 8px 28px #1c1c1e1c; -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); text-decoration: none; }
.profile-bubble .avatar { --s: 70px; width: 100%; height: 100%; font-size: 24px; }

@media (prefers-reduced-transparency: reduce) { .profile-bubble { background: var(--tone-fill-fafafa,#fafafa); } }

/* Match the middle menu's light edge without insetting the avatar. */
.brand-bubble, .profile-bubble { position: relative; }
.brand-bubble::after, .profile-bubble::after { content: ""; position: absolute; inset: 0; border: 1px solid #ffffffd9; border-radius: inherit; pointer-events: none; }

.brand-bubble[aria-current="page"]::after, .profile-bubble[aria-current="page"]::after { border: 2px solid var(--tone-edge-ffffff,#fff); }
.about-page .page-title { font-size: 32px; line-height: 38px; letter-spacing: -.8px; margin: 0 0 32px; }
.about-page .card { background: var(--surface); padding: 24px 18px; margin: 0 0 20px; border-radius: 26px; }
.about-page h2 { font-size: 20px; line-height: 26px; font-weight: 600; margin: 0 0 12px; }
.about-page .about-brand h2 { margin-top: 16px; }
.about-page p { font-size: 17px; line-height: 25px; margin: 0 0 14px; }
.about-page p:last-child { margin-bottom: 0; }
.about-page .about-brand .btn { margin-top: 24px; border-radius: 999px; background: #181818; }
.about-page .about-author { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline); }
.about-page .about-photo { width: 48px; height: 48px; }
.about-page .about-name { font-size: 17px; line-height: 22px; }
.about-page .about-role { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }

/* Full profile forms retain their normal submission flow inside the sheet. */
.journey-sheet-footer { position: absolute; inset: auto 0 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 24px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: var(--surface); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.journey-sheet-footer[hidden], .journey-sheet-footer .btn[hidden] { display: none; }
.journey-sheet-footer .btn { width: 100%; margin: 0; }
body.journey-sheet-document .container .journey-sheet-main-action,
body.journey-sheet-document .journey-delete:has(.journey-sheet-main-action) { display: none; }
body.journey-sheet-document .journey-layout .journey-chat { border: 0; padding-inline: 0; padding-bottom: 0; margin-bottom: 0; }
body.journey-sheet-document .journey-chat:not(:has(.chat-message)) .chat-compose { margin-top: 0; }
body.journey-sheet-document .journey-content:has(.journey-chat),
body.journey-sheet-document .container > .journey-layout:has(.journey-chat),
body.journey-sheet-document .container > .journey-layout:has(.journey-create) { padding-bottom: 0; margin-bottom: 0; }
body.journey-sheet-document .container { padding-top: 96px; padding-bottom: calc(var(--journey-footer-height, 0px) + var(--journey-footer-gap, 16px)); }
body.journey-sheet-document .container > .journey-layout { padding-top: 0; margin-top: 0; }
body.journey-sheet-document .journey-layout .activity-panel { border: 0; border-radius: 0; background: transparent; padding-top: 0; padding-inline: 0; }
body:has(.journey-page-title) .journey-layout .activity-panel .sched-title { margin: 0; padding-right: 0; font-size: 24px; line-height: 30px; font-weight: 600; }
body.journey-sheet-document .journey-create > form { display: grid; gap: 44px; }
body.journey-sheet-document .journey-create .journey-panel { border: 0; border-radius: 0; background: transparent; padding: 0; margin: 0; }
body.journey-sheet-document .journey-create .create-direction { padding-top: 0; }
body.journey-sheet-document .journey-create legend { padding: 0; }
body.journey-sheet-document .journey-create .create-message textarea { display: block; }
body:has(.journey-page-title) .seat-inline-editor { margin-top: 16px; padding-top: 0; border-top: 0; }
body:has(.journey-page-title) .seat-editor-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 240ms cubic-bezier(.22,1,.36,1), opacity 180ms ease; }
body:has(.journey-page-title) .seat-editor-reveal.is-open { grid-template-rows: 1fr; opacity: 1; }
body:has(.journey-page-title) .seat-editor-reveal[hidden] { display: none; }
body:has(.journey-page-title) .seat-editor-clip { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { body:has(.journey-page-title) .seat-editor-reveal { transition: none; } }
body:has(.journey-page-title) .seat-inline-editor[hidden],
body:has(.journey-page-title) .passenger-edit[hidden],
body:has(.journey-page-title) .seat-inline-editor > :is(.sheet-title, .sheet-close, .sheet-grabber) { display: none; }
body:has(.journey-page-title) .seat-inline-editor .edit-leg { padding: 0; margin: 0; background: transparent; }
body:has(.journey-page-title) .seat-inline-editor .edit-seat-stepper input { width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; line-height: 24px; font-weight: 500; text-align: center; }
body:has(.journey-page-title) .journey-layout .driver-block.journey-panel { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 16px; }
body:has(.journey-page-title) .journey-seat-panel { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hairline); }
body:has(.journey-page-title) .journey-seat-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 8px; }
body:has(.journey-page-title) .journey-driver-panel h3,
body:has(.journey-page-title) .journey-seat-summary h3 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
body:has(.journey-page-title) .journey-driver-panel h3 { margin-bottom: 20px; }
body:has(.journey-page-title) .journey-seat-summary .passenger-edit { --button-bg: var(--button-soft-bg); min-width: 64px; min-height: 44px; padding: 6px 0 !important; border: 0 !important; border-radius: 999px; background: transparent !important; color: var(--text); font-size: 13px !important; line-height: 20px; font-weight: 500; }
body:has(.journey-page-title) .journey-seat-summary .passenger-edit > span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 32px; padding: 6px 12px; border-radius: 999px; background: var(--button-bg); box-sizing: border-box; }
body:has(.journey-page-title) .journey-seat-summary .passenger-edit:active { --button-bg: var(--button-soft-hover); }
/* Offset the 3px white ring so the visible portraits align with the driver. */
body:has(.journey-page-title) .passenger-list { display: flex; flex-wrap: wrap; gap: 8px 0; padding-left: calc(8px - 3px); margin-top: 0; isolation: isolate; }
body:has(.journey-page-title) .passenger-person { position: relative; z-index: var(--seat-layer, 0); display: flex; flex: 0 0 54px; width: 54px; height: 54px; padding: 0; margin: 0 0 0 -8px; border: 3px solid var(--surface); border-radius: 50%; background: var(--surface); box-sizing: border-box; }
body:has(.journey-page-title) .passenger-person .avatar { --s: 48px; }
body:has(.journey-page-title) .passenger-person:focus-visible { z-index: 2; outline: 2px solid var(--text); outline-offset: 2px; }
body:has(.journey-page-title) .available-seats { display: contents; }
body:has(.journey-page-title) .available-seat { position: relative; z-index: var(--seat-layer, 0); display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; margin-left: -8px; border: 3px solid var(--surface); border-radius: 50%; background: var(--seat-free-bg, #d9f4e4); color: var(--seat-free-ink, #008635); font-size: 11px; line-height: 14px; font-weight: 500; box-sizing: border-box; }
body:has(.journey-page-title) .seat-inline-editor.seat-sdk-ready > :not(.seat-sdk-host) { display: none; }
body:has(.journey-page-title) #unbookForm[hidden] { display: none; }
body:has(.journey-page-title) .child-sheet-close { margin-top: 8px; }
.nav-dialog.has-child-sheet::after { content: ''; position: absolute; inset: 0 0 auto; height: 90px; z-index: 4; background: rgba(0,0,0,.35); }
@media (max-width: 559px) { .nav-dialog.has-child-sheet::after { height: 98px; } }
.panel-document .navbar, .panel-document .tabbar, .panel-document .page-end, .panel-document .page-title, .panel-document .back-fab { display: none; }
body.panel-document { padding: 0; background: var(--surface); }
.panel-document .container { padding: 0 18px 24px; margin: 0 auto; }
.panel-document .about-page .card { padding: 20px 0; margin-bottom: 0; border-radius: 0; }
.panel-document .about-section { border-top: 1px solid var(--hairline); }
.nav-dialog { inset: 0; margin: auto; width: min(600px, calc(100% - 40px)); height: min(780px, 90dvh); max-height: 90dvh; padding: 32px 0 0; border: 0; border-radius: 28px; background: var(--surface); overflow: hidden; }
.nav-dialog::backdrop { background: #0006; }
.nav-dialog .sheet-title { margin: 0; padding: 0 70px 20px 24px; font-size: 24px; }
.nav-panel-frame { display: block; width: 100%; height: calc(100% - 52px); border: 0; background: var(--surface); }
@media (max-width: 559px) {
 .nav-dialog { margin: auto 0 0; width: 100%; max-width: 100%; height: 90dvh; padding-top: 44px; border-radius: 28px 28px 0 0; }
}
.nav-dialog .reaction-sheet-close { position: absolute; top: 16px; right: 16px; margin: 0; z-index: 2; }

/* Match the existing 480px sheet surface and remove full-page chrome inside it. */
body.panel-document::before { display: none; }
/* Give embedded sheets their own native scroll layer before they become visible.
   The iframe viewport stays fixed while its body scrolls beneath the toolbar. */
html:has(body.panel-document) { height: 100%; overflow: hidden; }
body.panel-document { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.panel-document .container { padding: 0 24px 28px; max-width: none; }
.panel-document .container > .card { padding: 20px 0; border-radius: 0; box-shadow: none; }
.panel-document .about-page .about-brand { padding-top: 0; }
.nav-dialog { width: min(480px, calc(100% - 40px)); height: auto; max-height: calc(100dvh - 40px); }
.nav-dialog[open] { display: flex; flex-direction: column; }
/* Lay out embedded content before starting the visible opening animation. */
dialog.nav-dialog.is-preparing { display: flex; flex-direction: column; position: fixed; visibility: hidden; pointer-events: none; }
[data-nav-panel][aria-busy=true], .create-journey-link[aria-busy=true] { cursor: progress; }
.nav-dialog .sheet-title { flex-shrink: 0; margin: 0; padding: 0 72px 28px 24px; line-height: 30px; }
.nav-dialog .nav-panel-frame { min-height: 0; flex: 0 1 auto; height: 400px; }
.nav-dialog.has-child-sheet .nav-panel-frame { flex-grow: 1; }
.nav-dialog.has-child-sheet .nav-panel-header { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 559px) {
 .nav-dialog { width: 100%; max-height: calc(100dvh - 12px); height: auto; padding-top: 40px; }
}


/* Continuous sheet surface, including the embedded document canvas. */
html:has(body.panel-document) { background: var(--surface); }
.nav-dialog { height: fit-content; }
.sheet-close svg, .reaction-sheet-close svg { stroke-width: 2.6; }

/* Scroll panel content beneath a fixed frosted header. */
dialog.nav-dialog { padding-top: 0; }
.nav-panel-header { position: absolute; inset: 0 0 auto; height: 90px; z-index: 2; background: rgba(245,246,246,.78); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.nav-dialog .nav-panel-header .sheet-title { padding-top: 32px; padding-bottom: 28px; }
.nav-dialog.journey-page-sheet .nav-panel-header .sheet-title { position: absolute; top: 16px; inset-inline: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 72px 0 24px; }
.journey-page-sheet .nav-panel-header { height: 80px; border-bottom: 1px solid transparent; }
.nav-dialog.journey-page-sheet.has-child-sheet::after { height: 80px; }
.journey-page-sheet.is-scrolled .nav-panel-header { border-bottom-color: var(--hairline); }
.nav-dialog > .sheet-grabber { z-index: 3; }
.panel-document .container { padding-top: 90px; }
@media (max-width: 559px) {
 .nav-panel-header { height: 98px; }
 .nav-dialog .nav-panel-header .sheet-title { padding-top: 40px; }
 .panel-document .container { padding-top: 98px; }
}
@media (prefers-reduced-transparency: reduce) {
 .nav-panel-header, .journey-sheet-footer { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Group choices share one inset list with aligned separators. */
.group-picker-list { background: var(--tone-fill-ededed,#ededed); border-radius: 22px; overflow: hidden; padding: 0 16px; }
.group-picker .group-picker-row { gap: 12px; padding: 16px 0; border-radius: 0; }
.group-picker .group-picker-item + .group-picker-item { border: 0; position: relative; }
.group-picker .group-picker-item + .group-picker-item::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: #ffffffd9; }
.group-picker .gs-logo { background: transparent; }
.group-choice { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border: 1.5px solid var(--tone-edge-b6b6bc,#b6b6bc); border-radius: 7px; }
.group-choice.is-selected { background: #181818; border-color: #181818; color: white; }
.group-choice svg { width: 18px; height: 18px; }
@media (max-width: 559px) { .sheet-backdrop .sheet { max-width: none; width: 100%; } }

/* Profile settings use the same inset groups as the journey forms. */
.profile-page .card { padding: 20px 18px; margin-bottom: 20px; border: 0; border-radius: 22px; box-shadow: none; }
.panel-document .profile-page .card { background: var(--tone-fill-ededed,#ededed); }
.profile-page h2 { font-size: 20px; line-height: 26px; margin: 0 0 18px; }
.profile-page .profile-identity { gap: 16px; padding-bottom: 24px; margin-bottom: 22px; border-bottom: 1px solid var(--tone-edge-dfdfdf,#dfdfdf); }
.profile-page .profile-identity .name { font-size: 22px; line-height: 28px; }
.profile-page .inline-form { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px !important; }
.profile-page .inline-form > .field { flex: none !important; width: 100%; }
.profile-page .field { margin-bottom: 18px; max-width: none !important; }
.profile-page .field > label { display: block; margin-bottom: 7px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--text); }
.profile-page .card input:not([type=hidden]):not([type=checkbox]):not([type=file]):not([type=radio]), .profile-page select { width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--tone-edge-cdcdcd,#cdcdcd); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 17px; box-shadow: none; }
.profile-page .help { display: block; font-size: 13px; line-height: 19px; font-style: normal; color: var(--tone-ink-5d5d5d,#5d5d5d); margin-top: 7px; }
.profile-page .btn { min-height: 44px; border-radius: 999px; font-size: 17px; box-shadow: none; }
.profile-page form > .btn, .profile-page .inline-form > .btn { width: 100%; }
.profile-page .btn:not(.primary):not(.danger) { background: var(--surface); color: var(--accent); border: 0; }
.profile-page .btn.danger { color: #d92d28; background: var(--surface); border: 0; }
.profile-page .child-edit { padding: 14px 0; margin: 0 !important; border: 0; border-bottom: 1px solid var(--tone-edge-dfdfdf,#dfdfdf); border-radius: 0; background: transparent; box-shadow: none; }
.profile-page .child-summary { min-height: 44px; gap: 12px; }
.profile-page .child-summary .name { flex: 1; }
.profile-page .child-edit-toggle { color: var(--accent); font-size: 14px; }
.profile-page .offer-extra { padding: 0; border: 0; background: transparent; }
.profile-page .offer-extra > summary { min-height: 48px; padding: 12px 0; color: var(--accent); font-size: 17px; font-weight: 400; }
.profile-page .switch-row { padding: 14px 0; min-height: 62px; border-bottom: 1px solid var(--tone-edge-dfdfdf,#dfdfdf); }
.profile-page .switch-row .switch-label { font-size: 17px; line-height: 23px; font-weight: 400; margin: 0; color: var(--text); cursor: pointer; }
.profile-page .switch { min-height: 44px; cursor: pointer; }
.profile-page .switch input:checked + .track { background: #28c653; }
.profile-page .switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 3px; }
.profile-page .profile-admin-links { padding: 0 18px; }
.profile-page .profile-admin-links a { min-height: 54px; }
.profile-page .spread { flex-wrap: wrap; gap: 12px; }
.profile-page .muted { overflow-wrap: anywhere; }

/* Editing a drive mirrors its creation controls. */
.edit-sheet .edit-leg { padding: 18px; margin: 0 0 18px; background: var(--tone-fill-ededed,#ededed); border: 0; border-radius: 22px; }
.edit-sheet .edit-leg-head { font-size: 20px; line-height: 26px; margin: 0 0 12px; }
.edit-seats-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 18px; border-bottom: 1px solid var(--tone-edge-dfdfdf,#dfdfdf); }
.edit-seats-row label { font-size: 17px; font-weight: 400; color: var(--text); }
.edit-seats-row .help { font-style: normal; display: block; font-size: 13px; margin-top: 4px; color: var(--muted); }
.edit-sheet .create-stepper { border: 0; border-radius: 0; box-shadow: none; background: transparent; gap: 8px; }
.sheet.edit-sheet .create-stepper input { width: 28px; padding: 0; min-height: 44px; font-size: 17px; font-weight: 400; border: 0; background: transparent; box-shadow: none; }
.edit-sheet .stepper-buttons button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; color: var(--accent); background: transparent; }
.edit-sheet .edit-message { margin: 18px 0; }
.edit-message label { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 400; margin-bottom: 12px; color: var(--text); }
.edit-message label span { color: var(--muted); font-size: 15px; }
.edit-sheet .edit-message textarea { width: 100%; min-height: 100px; padding: 12px; font: inherit; font-size: 17px; line-height: 24px; color: var(--text); background: var(--surface); border: 1px solid var(--tone-edge-cdcdcd,#cdcdcd); border-radius: 14px; box-shadow: none; resize: vertical; }
.edit-sheet .btn { border-radius: 999px; min-height: 48px; }
.edit-sheet .danger-outline { border: 0; background: var(--surface); color: #d92d28; box-shadow: none; font-weight: 500; }
@media (max-width: 360px) { .edit-seats-row { flex-wrap: wrap; } }

.group-picker .group-admin { margin-top: 16px; min-height: 48px; border: 0; border-radius: 999px; background: var(--tone-fill-ededed,#ededed); color: var(--tone-ink-181818,#181818); box-shadow: none; font-size: 17px; font-weight: 600; }

.journey-layout .leg-book { flex: 1; min-width: 0; }
.passenger-edit { margin-left: auto; flex: 0 0 auto; min-height: 44px; padding: 8px 0 8px 12px; border: 0; background: transparent; color: var(--tone-ink-181818,#181818); font: inherit; font-size: 17px; cursor: pointer; }
.journey-delete { margin-top: 24px; }
.journey-delete .btn { min-height: 50px; border: 0; border-radius: 999px; background: #d92d28; color: white; box-shadow: none; }

.edit-sheet .edit-seats-row { border-bottom: 0; padding-bottom: 0; }

/* Destructive confirmation stays compact and distinct from editing sheets. */
dialog.confirm { background: var(--surface); color: var(--text); border-radius: 26px; width: min(380px, calc(100% - 40px)); }
.confirm-box { padding: 24px; }
.confirm-box h2 { font-size: 22px; line-height: 28px; margin: 0 0 12px; }
.confirm-msg { font-size: 16px; line-height: 24px; color: var(--tone-ink-5d5d5d,#5d5d5d); margin-bottom: 24px; }
.confirm-actions { display: flex; flex-direction: column-reverse; gap: 10px; }
.confirm-actions .btn { width: 100%; min-height: 48px; border-radius: 999px; border: 0; box-shadow: none; font-size: 17px; }
.confirm-actions .confirm-ok { background: #d92d28; color: white; }
.confirm-actions [value=cancel] { background: var(--tone-fill-ededed,#ededed); color: var(--tone-ink-181818,#181818); }
.confirm-actions .btn { justify-content: center; text-align: center; }

/* Group administration: overview first, family details on demand. */
.admin-page { --accent: #181818; }
.admin-context { color: var(--muted); font-size: 17px; margin: 0 0 24px; }
.admin-page .card { background: var(--surface); padding: 22px 18px; border-radius: 26px; }
.admin-page .card input:not([type=hidden]):not([type=checkbox]):not([type=file]):not([type=radio]), .admin-page select { background: var(--tone-fill-ffffff,#fff); }
.admin-page .admin-logo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--hairline); }
.admin-logo-row .gs-logo { width: 56px; height: 56px; border-radius: 14px; background: white; }
.admin-logo-row .grow { min-width: 0; }
.admin-logo-row .file { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-logo-row .file-name { font-size: 12px; flex-basis: 100%; }
.admin-page .segment { display: flex; padding: 4px; gap: 2px; border-radius: 12px; background: var(--tone-fill-dfdfdf,#dfdfdf); }
.admin-page .segment label { flex: 1; min-width: 0; }
.admin-page .segment label span { min-height: 44px; display: grid; place-items: center; padding: 8px 4px; border-radius: 9px; font-size: 14px; }
.admin-page .segment label:has(input:checked) span { background: white; }
.admin-page .segment label:has(input:focus-visible) span { outline: 2px solid var(--tone-ink-181818,#181818); }
.admin-families { margin-top: 32px; }
.admin-families > h2 { margin-bottom: 8px; }
.admin-families > .help { margin-bottom: 18px; }
.admin-new-family > summary { color: var(--tone-ink-181818,#181818); min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 17px; list-style: none; }
.admin-new-family > summary::before { content: "+"; font-size: 25px; margin-right: 12px; }
.admin-new-family[open] > summary { margin-bottom: 18px; }
.admin-page .admin-family { padding: 0 18px; overflow: hidden; }
.admin-family-summary { display: flex; align-items: center; gap: 12px; padding: 18px 0; min-height: 80px; cursor: pointer; list-style: none; }
.admin-family-summary::-webkit-details-marker, .admin-new-family > summary::-webkit-details-marker { display: none; }
.admin-family-name { flex: 1; font-size: 17px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.admin-family-name small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--muted); }
.admin-chevron { color: var(--muted); font-size: 26px; }
.admin-family[open] .admin-chevron { transform: rotate(90deg); }
.admin-family-content { padding: 20px 0; border-top: 1px solid var(--hairline); }
.admin-family-content .member { background: transparent; padding: 14px 0; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; }
.admin-family-content .member-head { gap: 12px; }
.admin-family-content .grow { min-width: 0; overflow-wrap: anywhere; }
.admin-family-content .btn-x { min-width: 44px; min-height: 44px; color: #d92d28; }
.admin-family-danger { padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--hairline); }
.admin-page .invite-tip { font-size: 13px; line-height: 19px; padding: 12px; background: var(--tone-fill-ededed,#ededed); border-radius: 12px; color: var(--tone-ink-5d5d5d,#5d5d5d); }
.admin-page .child-summary { flex-wrap: wrap; }
.admin-page .btn:focus-visible, .admin-page summary:focus-visible { outline: 2px solid var(--tone-ink-181818,#181818); outline-offset: 3px; }
.admin-page .admin-logo-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px 14px; }
.admin-logo-row > .btn { grid-column: 2; justify-self: start; }
.admin-logo-row .file { width: 100%; }
.admin-page .btn { justify-content: center; text-align: center; }

/* Normalize legacy form styles within administration, including expanded rows. */
.admin-page .btn:not(.primary):not(.danger) { background: var(--tone-fill-ededed,#ededed); color: var(--tone-ink-181818,#181818); border: 0; }
.admin-page .btn.danger { background: #fbe9e8; color: #c82722; }
.profile-page.admin-page .btn:disabled { background: var(--tone-fill-dfdfdf,#dfdfdf); color: var(--tone-ink-85858b,#85858b); border-color: transparent; box-shadow: none; opacity: 1; cursor: default; }
.admin-page .inline-form { gap: 14px; margin-bottom: 0 !important; }
.admin-page .inline-form > .field { margin: 0 !important; }
.admin-page .inline-form > .btn { margin-top: 4px; }
.admin-page .field { margin-bottom: 16px; }
.admin-page .offer-extra > summary { display: flex; align-items: center; min-height: 48px; width: 100%; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--tone-fill-ededed,#ededed); box-shadow: none; color: var(--tone-ink-181818,#181818); list-style: none; font-size: 17px; line-height: 24px; }
.admin-page .offer-extra > summary::before { margin-right: 8px; }
.admin-page .offer-extra[open] > summary { margin-bottom: 18px; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.admin-page .offer-extra > summary:hover  { border: 0; background: var(--tone-fill-dfdfdf,#dfdfdf); } }
.admin-page .admin-new-family { padding: 0 18px; }
.admin-new-family > summary { min-height: 60px; }
.admin-new-family[open] { padding-bottom: 18px; }
.admin-new-family[open] > summary::before { content: "−"; }
.admin-page .admin-logo-row .file .btn { min-height: 44px; padding: 10px 16px; }
.admin-page .admin-logo-row { gap: 8px 14px; }
.admin-logo-row .gs-logo { align-self: start; grid-row: span 2; }
.admin-logo-row .file-name { margin: 0; }
.admin-page .help { margin-top: 8px; }
.admin-family-content .soft { margin: 24px 0 18px; border: 0; border-top: 1px solid var(--hairline); }
.admin-family-content .member { margin-bottom: 0; }
.admin-family-content .badge { color: var(--tone-ink-5d5d5d,#5d5d5d); background: var(--tone-fill-dfdfdf,#dfdfdf); font-weight: 500; }
.admin-page .switch input:checked + .track { background: #34c759; }
.admin-page .admin-family-danger .btn { width: 100%; }

.admin-page .calendar-save { margin-top: 20px; }

/* Compact logo row with contextual actions. */
.admin-page .admin-logo-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; }
.admin-logo-row .gs-logo { align-self: center; flex: 0 0 56px; }
.admin-logo-label { flex: 1; min-width: 0; font-size: 17px; }
.admin-logo-status { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.admin-logo-menu { position: relative; flex: 0 0 auto; }
.admin-logo-menu > summary { display: flex; align-items: center; min-height: 44px; padding: 8px 0 8px 8px; color: var(--tone-ink-181818,#181818); font-size: 17px; cursor: pointer; list-style: none; }
.admin-logo-menu > summary::-webkit-details-marker { display: none; }
.admin-logo-options { position: absolute; top: 100%; right: 0; z-index: 5; width: 190px; padding: 4px 0; border-radius: 16px; background: var(--tone-fill-ffffff,#fff); box-shadow: 0 8px 28px #0003; overflow: hidden; }
.admin-logo-upload, .admin-logo-remove { position: relative; display: flex; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 12px 16px; border: 0; background: transparent; color: var(--tone-ink-181818,#181818); font: inherit; font-size: 17px; font-weight: 400; cursor: pointer; }
.admin-logo-upload input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.admin-logo-options .admin-logo-remove { border-top: 1px solid var(--hairline); color: #d92d28; }
.admin-logo-upload:focus-within { outline: 2px solid var(--tone-ink-181818,#181818); outline-offset: -3px; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.admin-logo-upload:hover, .admin-logo-remove:hover  { background: var(--tone-fill-f2f2f7,#f2f2f7); } }

.admin-logo-edit { flex: 0 0 auto; min-height: 44px; padding: 8px 0 8px 8px; border: 0; background: transparent; color: var(--tone-ink-181818,#181818); font: inherit; font-size: 17px; cursor: pointer; }
dialog.logo-dialog { inset: 0; margin: auto; width: min(480px, calc(100% - 40px)); max-height: calc(100dvh - 40px); padding: 32px 24px 24px; border: 0; border-radius: 28px; background: var(--surface); color: var(--text); overflow: auto; }
.logo-dialog::backdrop { background: #0006; }
.admin-page .logo-dialog .sheet-title { margin: 0 56px 24px 0; font-size: 24px; line-height: 30px; }
.logo-dialog .reaction-sheet-close { position: absolute; top: 16px; right: 16px; }
.logo-dialog-actions { overflow: hidden; border-radius: 16px; background: var(--tone-fill-ededed,#ededed); }
.logo-dialog-actions .admin-logo-upload, .logo-dialog-actions .admin-logo-remove { min-height: 56px; padding: 16px; }
.logo-dialog-actions .admin-logo-remove { border-top: 1px solid var(--tone-edge-dfdfdf,#dfdfdf); color: #d92d28; }
@media (max-width: 559px) {
 dialog.logo-dialog { inset: auto 0 0; margin: 0; width: 100%; max-width: none; max-height: calc(100dvh - 12px); border-radius: 28px 28px 0 0; padding: 40px 24px calc(24px + env(safe-area-inset-bottom)); }
}

.logo-dialog-actions { display: flex; flex-direction: column; gap: 12px; overflow: visible; border-radius: 0; background: transparent; }
.logo-dialog-actions .admin-logo-upload, .logo-dialog-actions .admin-logo-remove { justify-content: center; min-height: 50px; padding: 12px 18px; border: 0; border-radius: 999px; text-align: center; font-weight: 600; }
.logo-dialog-actions .admin-logo-upload { background: #181818; color: #fff; overflow: hidden; }
.logo-dialog-actions .admin-logo-remove { background: #fbe9e8; color: #c82722; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.logo-dialog-actions .admin-logo-upload:hover  { background: #0069dc; } }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.logo-dialog-actions .admin-logo-remove:hover  { background: #f7dedc; } }

/* The native backdrop remains in the top layer throughout dismissal. */
dialog.chat-dialog[open]::backdrop { animation: sheet-backdrop-in 320ms cubic-bezier(.22,1,.36,1) both; }
dialog.chat-dialog.sheet-backdrop-closing::backdrop { animation: sheet-backdrop-out var(--backdrop-exit-duration, 240ms) cubic-bezier(.4,0,1,1) both; }
@keyframes sheet-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-backdrop-out { from { opacity: var(--backdrop-exit-from, 1); } to { opacity: 0; } }

/* Account settings: consistent controls without changing group administration. */
.account-profile .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 12px 18px; line-height: 24px; }
.profile-page.account-profile .btn:disabled { background: var(--tone-fill-dfdfdf,#dfdfdf); color: var(--tone-ink-85858b,#85858b); border-color: transparent; opacity: 1; box-shadow: none; cursor: default; }
.account-profile .avatar { background: var(--tone-fill-ffffff,#fff); }
.account-profile .avatar.sm { --s: 40px; }
.account-profile .profile-identity { align-items: center; gap: 14px; }
.account-profile .profile-identity .name { font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
.account-profile .profile-photo-upload { position: relative; overflow: hidden; cursor: pointer; margin: 0; }
.account-profile .profile-photo-upload:focus-within { outline: 2px solid var(--tone-ink-181818,#181818); outline-offset: 2px; }
.account-profile .profile-photo-status:empty { display: none; }
.account-profile .profile-field-label { margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.account-profile .offer-extra > summary { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 12px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; line-height: 24px; list-style: none; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.account-profile .offer-extra > summary:hover  { border: 0; background: transparent; } }
.account-profile .offer-extra > summary::before { margin-right: 8px; }
.account-profile .offer-extra[open] > summary { margin-bottom: 12px; }
.account-profile .child-summary { flex-wrap: nowrap; }
.account-profile .child-summary .name { min-width: 0; overflow-wrap: anywhere; }
.account-profile .child-edit-toggle { flex-shrink: 0; }
.account-profile .profile-child-actions { display: flex; flex-direction: column; gap: 12px; }
.account-profile .profile-child-actions .btn { width: 100%; }
.account-profile .switch-row { gap: 16px; }
.account-profile .switch { flex-shrink: 0; }
.account-profile .switch input:checked + .track { background: #34c759; }
.account-profile .inline-form + .inline-form { padding-top: 18px; border-top: 1px solid var(--tone-edge-dfdfdf,#dfdfdf); }
.account-profile .badge { background: var(--tone-fill-ffffff,#fff); color: var(--tone-ink-5d5d5d,#5d5d5d); }

/* Shared action language for the profile's links, selectors and image sheets. */
.account-profile .profile-text-action { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; background: transparent; border: 0; color: var(--tone-ink-181818,#181818); font: inherit; font-size: 17px; cursor: pointer; }
.account-profile .child-edit-toggle, .account-profile .child-edit[open] .child-edit-toggle { display: inline-flex; align-items: center; min-height: 44px; color: var(--tone-ink-181818,#181818); font-size: 17px; font-weight: 400; text-decoration: none; }
.account-profile .btn.primary:not(:disabled) { border: 0; background: #181818; color: #fff; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.account-profile .btn.primary:not(:disabled):hover  { background: #0069dc; } }
.account-profile .btn.danger:not(:disabled) { background: #fbe9e8; color: #c82722; }
.account-profile input:focus-visible, .account-profile select:focus-visible { outline: 2px solid var(--tone-ink-181818,#181818); outline-offset: 1px; }
.account-profile .profile-photo-dialog .sheet-title { margin: 0 48px 24px 0; padding: 0; font-size: 24px; line-height: 30px; }
.account-profile .profile-photo-dialog .sheet-grabber { border: 0; }

/* Group creation stays within the app's regular settings layout. */
.create-group-page .create-intro { margin: 0 0 24px; color: var(--tone-ink-5d5d5d,#5d5d5d); font-size: 17px; line-height: 25px; }
.create-group-page .create-source { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.create-group-page .create-calendar-intro { margin: -6px 0 18px; }
.create-group-page .segment label span { border: 0; font-weight: 600; }
.create-group-page .segment label:has(input:checked) span { box-shadow: 0 1px 4px #00000015; }
.create-group-page .btn.primary { min-height: 50px; border: 0; background: #181818; color: #fff; }
.create-group-page .create-cancel { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; color: var(--tone-ink-181818,#181818); text-decoration: none; font-size: 17px; }
.create-group-page .card > .field:last-child { margin-bottom: 0; }

/* Creation uses a large page heading and the app's circular back control. */
body.subpage:has(:is(.create-group-page, .admin-settings-page)) .navbar { height: calc(76px + env(safe-area-inset-top)); border: 0; background: transparent; backdrop-filter: none; }
body.subpage:has(:is(.create-group-page, .admin-settings-page)) .navbar-title { opacity: 0; }
body.subpage:has(:is(.create-group-page, .admin-settings-page)) .back-fab { left: max(20px, calc(50% - 300px)); width: 44px; height: 44px; justify-content: center; border-radius: 50%; background: #ffffffb3; border: 1px solid var(--tone-edge-cdcdcd,#cdcdcd); box-shadow: inset 0 1px 2px var(--tone-edge-ffffff,#fff), 0 3px 12px #00000005; }
body.subpage:has(:is(.create-group-page, .admin-settings-page)) .back-fab svg { width: 24px; height: 24px; margin: 0; }
body.subpage:has(:is(.create-group-page, .admin-settings-page)) .container { padding-top: calc(88px + env(safe-area-inset-top)); }
body.subpage:is(.nav-scrolled, .scrolled):has(:is(.create-group-page, .admin-settings-page)) .navbar { background: #f3f3f3f2; backdrop-filter: blur(16px); }
body.subpage:is(.nav-scrolled, .scrolled):has(:is(.create-group-page, .admin-settings-page)) .navbar-title { opacity: 1; }

/* Family directory: people and their chosen relationship stay together. */
.families-page .family-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; }
.families-page .sched-div { margin: 20px 0 16px; }
.families-page .fam-head { margin: 0 0 4px; }
.families-page .fam-row .person { align-items: flex-start; }
.families-page .fam-row .avatar { --s: 44px; }
.families-page .family-relation { color: var(--tone-ink-5d5d5d,#5d5d5d); font-size: 15px; line-height: 21px; margin-top: 3px; }
.families-page .name-row { flex-wrap: wrap; gap: 6px; }
.families-page .badge { background: var(--tone-fill-dfdfdf,#dfdfdf); color: var(--tone-ink-5d5d5d,#5d5d5d); }
.families-page .contacts .contact { min-height: 32px; display: flex; align-items: center; }
.families-page .contact .contact-text { white-space: normal; overflow-wrap: anywhere; }

/* One grouped list per family, with contact details on demand. */
.families-page .family-directory { padding: 20px 18px 0; margin-bottom: 24px; overflow: hidden; }
.family-directory .family-title { margin-bottom: 12px; }
.family-people { list-style: none; padding: 0; margin: 0 -18px; }
.family-people > li { position: relative; }
.family-people > li::before { content: ''; position: absolute; top: 0; left: 78px; right: 18px; height: 1px; background: var(--hairline); pointer-events: none; }
.family-person-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 80px; padding: 14px 18px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; text-align: left; }
button.family-person-row { cursor: pointer; }
.family-person-row:focus-visible { outline: 2px solid var(--tone-ink-181818,#181818); outline-offset: -3px; border-radius: 12px; }
.family-person-row .avatar { --s: 48px; }
.family-person-text { flex: 1; min-width: 0; }
.family-person-name { display: block; font-size: 17px; line-height: 23px; font-weight: 500; overflow-wrap: anywhere; }
.family-person-text .family-relation { display: block; margin-top: 3px; }
.family-chevron { flex: 0 0 18px; width: 18px; height: 18px; color: var(--disclosure); }
.family-contact-dialog .sheet-title { margin: 0 48px 24px 0; padding: 0; font-size: 24px; line-height: 30px; }
.family-contact-person { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.family-contact-person > div { min-width: 0; }
.family-contact-links { border-radius: 18px; background: var(--tone-fill-ededed,#ededed); padding: 0 16px; }
.family-contact-links a { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 14px 0; text-decoration: none; gap: 4px; }
.family-contact-links a + a { border-top: 1px solid var(--tone-edge-dfdfdf,#dfdfdf); }
.family-contact-links a > span { font-size: 13px; color: var(--tone-ink-5d5d5d,#5d5d5d); }
.family-contact-links a > strong { font-size: 17px; line-height: 24px; font-weight: 400; color: var(--tone-ink-181818,#181818); overflow-wrap: anywhere; }

.audience-option { display: flex; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; }
.audience-option + .audience-option { border-top: 1px solid var(--hairline); }
.audience-option input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #181818; }
.audience-option strong { display: block; font-size: 17px; font-weight: 500; }
.audience-option small { display: block; margin-top: 5px; font-size: 14px; line-height: 20px; color: var(--tone-ink-5d5d5d,#5d5d5d); }
.adult-admin textarea { width: 100%; border: 1px solid var(--tone-edge-cdcdcd,#cdcdcd); background: white; border-radius: 12px; padding: 12px; font: inherit; }
.adult-form-actions { display: flex; flex-direction: column; gap: 12px; }
.adult-occasion-form { padding-top: 18px; }
.recurrence-fields { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.weekdays { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.weekdays label { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px; border-radius: 10px; background: var(--tone-fill-ededed,#ededed); }
.weekdays input { accent-color: #181818; }
.adult-directory-link { display: flex; align-items: center; min-height: 44px; color: var(--tone-ink-181818,#181818); }
.adult-admin .child-summary { flex-wrap: nowrap; align-items: center; gap: 12px; }
.adult-admin .child-summary .grow { min-width: 0; flex: 1; }
.adult-admin .child-summary .name { display: block; }
.adult-admin .child-edit-toggle { flex-shrink: 0; text-decoration: none; }
.adult-admin .adult-directory-link { text-decoration: none; }
.adult-admin .btn { margin-top: 8px; }

/* Admin-only driving overview, shared by family and adult groups. */
.driving-stats-table { width:100%; border-collapse:collapse; table-layout:fixed; margin:16px 0; }
.driving-stats-table th, .driving-stats-table td { padding:13px 6px; border-bottom:1px solid var(--separator, var(--tone-edge-d8d8dd,#d8d8dd)); text-align:right; font-variant-numeric:tabular-nums; }
.driving-stats-table th:first-child { text-align:left; width:42%; overflow-wrap:anywhere; padding-left:0; }
.driving-stats-table thead th { font-size:12px; font-weight:500; color:var(--muted, var(--tone-ink-5d5d5d,#5d5d5d)); }
.driving-stats-table tbody th { font-size:15px; font-weight:600; }
.driving-stats-table tbody tr:last-child > * { border-bottom:0; }
.driving-stats .driving-stats-note { font-size:12px; line-height:1.5; margin-bottom:0; }

.profile-page .profile-delete-account { margin-top: 24px; }

/* Sign-in shares the application palette and controls. */
html:has(.login-page) { background:var(--surface); }
body:has(.login-page) { display:flex; flex-direction:column; min-height:100svh; background:var(--surface); --font:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-family:var(--font); }
body:has(.login-page)::before { display:none; }
body:has(.login-page) .container { display:flex; flex-direction:column; justify-content:center; flex:1 0 auto; width:100%; max-width:428px; margin:0 auto; padding:calc(40px + env(safe-area-inset-top)) 24px 32px; }
.login-page { width:100%; }
.login-brand { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0; text-align:left; margin-bottom:32px; padding:0; }
.login-mobile-logo { display:none; width:56px; height:56px; border-radius:14px; margin-bottom:20px; }
.login-brand .page-title { font-size:32px; font-weight:500; line-height:1.2; margin:0; }
.login-card { padding:0; background:transparent; border-radius:0; box-shadow:none; border:0; }
.login-form { --field-border:var(--tone-edge-cdcdcd,#cdcdcd); }
.login-form label { font-size:15px; font-weight:500; }
.login-form input[type=email], .login-form .pw-field input { padding:12px; line-height:24px; letter-spacing:normal; }
.login-form .pw-field input { padding-right:54px; }
.login-form input:-webkit-autofill::first-line { font-family:var(--font); font-size:16px; font-weight:400; }
.login-form input:-webkit-autofill { -webkit-text-fill-color:var(--text); -webkit-box-shadow:0 0 0 1000px var(--surface) inset !important; }
.login-form .pw-toggle { width:44px; height:44px; right:4px; color:var(--tone-ink-5d5d5d,#5d5d5d); }
.login-form .pw-toggle.on { color:var(--tone-ink-181818,#181818); }
.login-session-info { margin:16px 0 0; text-align:center; font-size:12px; line-height:18px; color:var(--muted); }
.login-session-info a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.login-form .login-row { position:relative; flex-direction:column; align-items:stretch; gap:0; margin:0 0 16px; }
.login-password-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.login-form .login-password-label label { margin:0; }
.login-form .login-forgot { display:flex; align-items:center; min-height:24px; color:var(--tone-ink-5d5d5d,#5d5d5d); font-size:14px; line-height:20px; font-weight:400; text-decoration:underline; text-underline-offset:3px; }
.login-form .btn.primary { --button-height:54px; --button-font-size:17px; min-height:54px; border-radius:999px; background:#181818; color:#fff; border:0; box-shadow:none; font-size:17px; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.login-form .btn.primary:hover  { background:#181818; transform:none; } }
.login-create { text-align:left; margin:4px 0 0; color:var(--muted); font-size:14px; line-height:24px; }
.login-create a { display:inline-block; padding:10px 0; color:var(--text); text-decoration:underline; text-underline-offset:3px; }
body:has(.login-page) .page-end { position:static; flex:0 0 auto; width:100%; margin:0 auto; max-width:480px; padding:0 20px calc(24px + env(safe-area-inset-bottom)) !important; line-height:2; }


.login-photo { display:block; position:relative; overflow:hidden; background:var(--tone-fill-dce2e6,#dce2e6); }
.login-photo > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.login-photo-content { position:absolute; inset:0; z-index:1; }
.login-photo-brand { display:flex; align-items:center; }
.login-photo-brand img { display:block; width:auto; height:52px; border-radius:0; }
@media (max-width:959px) {
  body:has(.login-page) .container { padding:calc(32px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom)); }
  .login-photo { display:none; }
  .login-page { width:100%; max-width:380px; margin:0 auto; }
  .login-mobile-logo { display:block; }
  .login-brand { align-items:center; text-align:center; }
  .login-create { text-align:center; }
  body:has(.login-page) .page-end { display:none; }
}
@media (min-width:960px) {
  body:has(.login-page) .container { max-width:none; width:50%; margin:0 0 0 50%; padding:32px 36px; }
  .login-page { max-width:380px; margin:0 auto; }
  body:has(.login-page) .page-end { max-width:none; width:50%; margin:0 0 0 50%; }
  .login-photo { display:block; position:fixed; inset:0 50% 0 0; overflow:hidden; background:var(--tone-fill-dce2e6,#dce2e6); }
  .login-photo > img { width:100%; height:100%; object-fit:cover; object-position:56% 55%; }
  .login-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.48),transparent 25%,transparent 48%,rgba(0,0,0,.82)); pointer-events:none; }
  .login-photo-content { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:space-between; gap:32px; padding:clamp(28px,4vw,64px); color:#fff; }
  .login-photo-brand { display:flex; align-items:center; gap:12px; font-size:24px; font-weight:600; letter-spacing:-.02em; }
  .login-photo-brand img { display:block; width:auto; height:52px; border-radius:0; }
  .login-photo-intro { max-width:560px; }
  .login-photo-intro h2 { margin:0 0 18px; font-size:clamp(28px,3.1vw,48px); line-height:1.25; letter-spacing:-.035em; font-weight:500; color:inherit; }
  .login-photo-intro p { margin:0; max-width:460px; font-size:clamp(16px,1.3vw,19px); line-height:1.5; color:inherit; }
}

.login-form .login-remember { min-height:44px; justify-content:flex-start; gap:12px; }
.login-form .login-remember .switch-label { display:flex; align-items:center; min-height:44px; margin:0; font-weight:400; line-height:1.4; cursor:pointer; }

/* Creation uses the same controls for visitors and signed-in members. */
body:has(.create-group-page) { --font:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-family:var(--font); }
.create-group-page .create-intro { font-size:16px; line-height:24px; }
.create-group-page .card h2 { font-size:22px; line-height:1.3; }
.create-group-page .audience-option { position:relative; display:flex; align-items:center; gap:16px; padding:16px 0; margin:0; min-height:64px; }
.create-group-page .audience-option > span { flex:1; min-width:0; }
.create-group-page .audience-option strong { font-size:17px; font-weight:500; }
.create-group-page .audience-option small { display:block; margin-top:4px; font-size:14px; font-weight:400; color:var(--tone-ink-5d5d5d,#5d5d5d); line-height:1.45; }
.create-group-page .audience-option input { order:2; appearance:none; -webkit-appearance:none; width:24px; height:24px; flex:0 0 24px; padding:0; margin:0; border:1.5px solid var(--tone-edge-767676,#767676); border-radius:50%; background:transparent; box-shadow:none; }
.create-group-page .audience-option input:checked { background:#181818; border-color:#181818; }
.create-group-page .audience-option input:checked::after { content:""; display:block; width:6px; height:11px; border:solid white; border-width:0 2px 2px 0; transform:rotate(45deg); margin:3px auto 0; }
.create-group-page .inline-form { margin-bottom:18px !important; gap:18px; }
.create-group-page .field > label { font-size:15px; font-weight:500; margin-bottom:8px; }
.create-group-page .field input:not([type=radio]):not([type=checkbox]) { background:var(--tone-fill-f3f3f3,#f3f3f3); border:1px solid transparent; border-radius:12px; min-height:50px; box-shadow:none; font-size:17px; }
.create-group-page .field input.input-error { border-color:#d92d28; }
.create-group-page .help { color:var(--tone-ink-5d5d5d,#5d5d5d); font-size:14px; line-height:1.45; }
.create-group-page .switch { position:relative; min-width:51px; min-height:44px; }
.create-group-page .switch input { inset:0; width:100%; height:100%; margin:0; z-index:1; }
.create-group-page .segment { min-height:44px; }
.create-group-page .segment label { min-height:44px; }
.create-group-page .segment label span { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 4px; font-size:14px; }
.create-group-page .segment input:focus-visible + span { outline:3px solid var(--tone-ink-181818,#181818); outline-offset:2px; }

/* Self-contained creation form: no profile/admin separators or overrides. */
.create-group-page .card { background:var(--surface); border:0; border-radius:26px; box-shadow:none; padding:22px 18px; margin:0 0 20px; }
.create-group-page .card h2 { margin:0 0 20px; }
.create-group-page .field { margin:0 0 18px; min-width:0; }
.create-group-page .field > label { display:block; color:var(--text); line-height:1.4; }
.create-group-page .inline-form { display:flex; flex-direction:column; align-items:stretch; gap:18px; }
.create-group-page .inline-form > .field { flex:none !important; width:100%; }
.create-group-page .field input:not([type=radio]):not([type=checkbox]) { width:100%; padding:12px; background:var(--tone-fill-f3f3f3,#f3f3f3); color:var(--tone-ink-0d0d0d,#0d0d0d); border:1px solid transparent; border-radius:12px; min-height:50px; font-size:17px; }
.create-group-page .field input.input-error { border-color:#d92d28; }
.create-group-page .help { display:block; margin-top:8px; font-style:normal; }
.create-group-page .pw-field input { padding-right:54px !important; letter-spacing:normal; }
.create-group-page .pw-toggle { width:44px; height:44px; right:4px; color:var(--tone-ink-5d5d5d,#5d5d5d); }
.create-group-page .audience-option { border:0; }
.create-group-page .audience-option + .audience-option { border-top:1px solid var(--tone-edge-dfdfdf,#dfdfdf); }
.create-group-page .create-source { border:0; padding:0; margin:0 0 18px; }
.create-group-page .segment { display:flex; gap:2px; padding:4px; background:var(--tone-fill-dfdfdf,#dfdfdf); border-radius:12px; }
.create-group-page .segment label { flex:1; min-width:0; margin:0; }
.create-group-page .segment label span { border:0; border-radius:9px; color:var(--tone-ink-0d0d0d,#0d0d0d); background:transparent; }
.create-group-page .segment label:has(input:checked) span { background:var(--tone-fill-ffffff,#fff); }
.create-group-page .create-consent { display:flex; gap:12px; align-items:flex-start; border:0; padding:0; margin-top:22px; }
.create-group-page .create-consent > input, .login-form .login-remember > input { appearance:none; -webkit-appearance:none; flex:0 0 22px; width:22px; height:22px; min-height:0; margin:10px 0 0; padding:0; box-shadow:none; border:1px solid var(--tone-edge-cdcdcd,#cdcdcd); border-radius:6px; background:var(--surface); cursor:pointer; }
.login-form .login-remember > input { margin:0; }
.create-group-page .create-consent > input:checked, .login-form .login-remember > input:checked { border-color:#181818; background:#181818 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m5 11 4 4 8-8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
@media (forced-colors:active) { .create-group-page .create-consent > input, .login-form .login-remember > input { appearance:auto; -webkit-appearance:checkbox; } }
.create-group-page .create-consent label { display:flex; align-items:center; min-height:44px; font-size:14px; line-height:1.5; font-weight:400; cursor:pointer; }
.create-group-page .create-consent a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--tone-ink-181818,#181818); }
.create-group-page form > .btn { width:100%; font-size:17px; min-height:50px; border-radius:999px; box-shadow:none; }@media (min-width:768px) and (hover:hover) and (pointer:fine) {
.create-group-page .btn.primary:hover  { background:#181818; transform:none; } }

.create-audience-list { background:var(--tone-fill-ededed,#ededed); border-radius:22px; padding:0 16px; }
.create-audience-list .audience-option + .audience-option { border-top:1px solid #ffffffd9; }
.create-group-page .create-audience-list .audience-option input { border-radius:50%; border-color:var(--tone-edge-767676,#767676); background:transparent; }
.create-group-page .create-audience-list .audience-option input:checked { border-color:#181818; }
.create-group-page .create-audience-list .audience-option input:checked::after { content:""; width:12px; height:12px; margin:4.5px auto 0; border:0; border-radius:50%; background:#181818; transform:none; }
.create-audience-list .audience-option strong { color:var(--tone-ink-0d0d0d,#0d0d0d); font-weight:600; }

/* Release notes: quiet date labels and readable entries, without bullet markers. */
.news-page { max-width:600px; margin:0 auto; }
.news-intro { margin:0 0 32px; color:var(--muted); font-size:16px; line-height:24px; }
.news-release { margin-bottom:32px; }
.news-page .news-date { margin:0 0 12px; font-size:14px; line-height:20px; font-weight:500; color:var(--muted); }
.news-page .news-updates { padding:24px; margin:0; }
.news-item + .news-item { margin-top:20px; padding-top:20px; border-top:1px solid var(--hairline); }
.news-item h3 { margin:0 0 8px; color:var(--text); font-size:17px; line-height:24px; font-weight:600; }
.news-item p { margin:0; color:var(--muted); font-size:15px; line-height:23px; }
.news-feedback { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:22px; }
.news-feedback a { color:var(--text); text-underline-offset:3px; }
@media (max-width:359px) { .news-page .news-updates { padding:20px; } }