/* Local experiment. Values from OpenAI Apps SDK UI design tokens, 2026-09-26.
   Existing component geometry and behavior are retained. */
:root {
  --bg:#f3f3f3; --surface:#fff; --text:#0d0d0d; --muted:#5d5d5d;
  --border:#dfdfdf; --hairline:#ededed; --separator:var(--hairline);
  --accent:#181818; --accent-ink:#fff; --fill:#ededed; --fill-border:#dfdfdf;
  --type-page:30px; --type-section:20px; --type-body:16px; --type-detail:14px;
  --border-card:#e9e9e9; --avatar-fill:#f3f3f3;
  --app-header-height:56px;
  --sheet-material:rgba(255,255,255,.68);
  --seat-free-bg:#d9f4e4; --seat-free-ink:#008635;
  --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2368686e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body, body:has(.login-page), body:has(.create-group-page) {
  --font:"Inter", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  font-family:var(--font); font-weight:400;
}
h1, h2, h3, h4, .page-title, .sheet-title, .sched-title { font-weight:600; }
button, .btn, .login-form .btn.primary, .journey .btn.drive-btn { font-weight:500; }
.login-brand .page-title { font-weight:500; letter-spacing:-.02em; }
.login-form label, .field > label { font-weight:400; }
.login-form .switch input:checked + .track, .switch input:checked + .track { background:#181818; }
.login-form .btn.primary, .login-form .btn.primary:hover { background:#181818; }
.login-form .login-row a { color:var(--tone-ink-181818,#181818); }
.tabbar, .tabbar .tabbar-items { backdrop-filter:none; -webkit-backdrop-filter:none; }

/* Component skin: SDK visual proportions with generous touch targets. */
body .card:not(.group-switcher):not(.journey-layout),
body .journey-layout .journey-panel, body .journey-layout .journey-chat {
  border-radius:16px; border:1px solid rgba(13,13,13,.06); box-shadow:none;
}
body :is(.profile-section,.create-audience-list,.group-list,.admin-family,.profile-child-card) {
  border-radius:12px;
}
body .btn, body .admin-page .btn, body .account-profile .btn,
body .journey .btn.drive-btn, body .create-group-page form > .btn {
  min-height:48px; padding:12px 20px; border-radius:999px;
  font-size:16px; line-height:24px; font-weight:500; box-shadow:none;
}
body .btn:not(.primary):not(.danger), body .admin-page .btn:not(.primary):not(.danger) {
  background:var(--tone-fill-ededed,#ededed); color:var(--tone-ink-0d0d0d,#0d0d0d); border:1px solid transparent;
}
body .btn.primary:not(:disabled), body .account-profile .btn.primary:not(:disabled):hover {
  background:#181818; color:#fff; border:1px solid transparent;
}
body .btn.danger:not(:disabled), body .admin-page .btn.danger:not(:disabled) {
  background:#ffd9d9; color:#ba2623; border:1px solid transparent;
}
body .btn:disabled, body .profile-page .btn:disabled,
body .profile-page.admin-page .btn:disabled, body .profile-page.account-profile .btn:disabled {
  background:var(--tone-fill-ededed,#ededed); color:var(--tone-ink-767676,#767676); border-color:transparent; opacity:1; cursor:default;
}
body :is(.card,.sheet,.create-group-page,.account-profile,.admin-page,.login-form) input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.edit-seat-stepper input),
body :is(.card,.sheet,.create-group-page,.account-profile,.admin-page) :is(select,textarea) {
  min-height:50px; border:1px solid var(--field-border,rgba(13,13,13,.16)); border-radius:10px;
  background-color:var(--tone-fill-ffffff,#fff); color:var(--tone-ink-0d0d0d,#0d0d0d); box-shadow:none; font-size:16px; font-weight:400;
}
body :is(input,textarea)::placeholder { color:var(--tone-ink-767676,#767676); opacity:1; }
/* Shared arrow and text clearance for every single-choice dropdown. */
body select:not([multiple]):not([size]) {
  appearance:none; -webkit-appearance:none; padding-right:32px;
  background-image:var(--select-chevron);
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px;
}
body :is(button,a,input,textarea,select,summary):focus-visible {
  outline:2px solid var(--tone-ink-181818,#181818); outline-offset:3px;
}
body :is(.card,.sheet) :is(input,textarea,select):focus-visible { border-color:var(--tone-edge-767676,#767676); }
body .input-error, body [aria-invalid=true] { border-color:#e02e2a !important; }
body .card .chat-compose { position:relative; flex-direction:column; align-items:stretch; gap:0; min-height:120px; border-radius:24px; padding:10px; box-shadow:none; border-color:var(--tone-edge-dfdfdf,#dfdfdf); }
body .card .chat-compose:focus-within { border-color:#181818; box-shadow:none; }
html[data-input-mode=pointer] body .card .chat-compose:focus-within { border-color:var(--tone-edge-dfdfdf,#dfdfdf); }
body .card .chat-compose textarea { flex:none; width:100%; min-height:98px; padding:6px 58px 6px 8px; border:0; background:transparent; }
body .card .chat-compose .chat-send { position:absolute; right:10px; bottom:10px; flex:none; }
body .login-form .pw-field input { padding-right:54px; }
body .pw-toggle { min-width:44px; min-height:44px; }
body .switch, body .login-form .switch, body .create-group-page .switch {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; width:44px; min-height:44px; height:44px; flex:0 0 44px;
}
body .switch input { position:absolute; inset:0; width:44px; height:44px; margin:0; opacity:0; z-index:1; cursor:pointer; }
body .switch .track { width:44px; height:26px; background:var(--tone-fill-dfdfdf,#dfdfdf); border:0; }
body .switch .track::after { width:20px; height:20px; top:3px; left:3px; box-shadow:0 1px 2px #0003; }
body .switch input:checked + .track { background:#181818; }
body .switch input:checked + .track::after { transform:translateX(18px); }
body .switch input:disabled + .track { background:var(--tone-fill-ededed,#ededed); }
body .switch input:disabled:checked + .track { background:var(--tone-fill-afafaf,#afafaf); }
body .switch-row { min-height:48px; }
body .segment, body .create-group-page .segment { padding:4px; gap:2px; background:var(--tone-fill-ededed,#ededed); border:0; border-radius:12px; }
body .segment label, body .segment label span, body .create-group-page .segment label span { min-height:44px; }
body .segment label span, body .create-group-page .segment label span {
  display:flex; align-items:center; justify-content:center; border:0; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--tone-ink-5d5d5d,#5d5d5d);
}
body .segment label:has(input:checked) span, body .create-group-page .segment label:has(input:checked) span {
  color:var(--tone-ink-0d0d0d,#0d0d0d); background:var(--tone-fill-ffffff,#fff); box-shadow:0 1px 3px #00000014;
}
body .create-group-page .create-audience-list { background:var(--tone-fill-ffffff,#fff); border:1px solid var(--tone-edge-dfdfdf,#dfdfdf); }
body .create-group-page .audience-option { min-height:64px; }
body .create-group-page .audience-option + .audience-option { border-color:var(--tone-edge-ededed,#ededed); }
body .create-group-page .create-audience-list .audience-option input { width:20px; height:20px; flex-basis:20px; border:1.5px solid var(--tone-edge-8f8f8f,#8f8f8f); }
body .create-group-page .create-audience-list .audience-option input:checked { border-color:#181818; background:var(--tone-fill-ffffff,#fff); }
body .create-group-page .create-audience-list .audience-option input:checked::after { width:10px; height:10px; margin:3.5px auto 0; background:#181818; }
body .stepper { border:1px solid var(--tone-edge-dfdfdf,#dfdfdf); border-radius:10px; background:var(--tone-fill-ffffff,#fff); box-shadow:none; }
body .stepper button { min-width:48px; min-height:48px; color:var(--tone-ink-181818,#181818); background:var(--button-soft-bg); }
body :is(.reaction-sheet-close,.sheet-close,.btn-x,.chat-send,.nav-back) { min-width:44px; min-height:44px; }
body :is(.profile-text-action,.journey-edit,.admin-logo-menu > summary) { min-height:44px; }
body :is(.chat-picker,.reaction-sheet,.logo-dialog,.confirm-box) { border-radius:16px; border:1px solid var(--tone-edge-dfdfdf,#dfdfdf); background:var(--tone-fill-ffffff,#fff); box-shadow:0 8px 28px #00000014; }
body .sheet { border-radius:24px 24px 0 0; background:var(--tone-fill-ffffff,#fff); }
body .tabbar { background:transparent; border:0; box-shadow:none; }
body .tabbar .tabbar-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; padding:5px; border-radius:999px; background:var(--tone-fill-ffffff,#fff); border:1px solid var(--tone-edge-e9e9e9,#e9e9e9); box-shadow:none; }
body .tabbar { width:min(calc(100% - 32px),390px); }
@media (max-width:639px) { body .tabbar { width:calc(100% - 32px); max-width:none; } }
@media (max-width:360px) { body .tabbar { width:calc(100% - 24px); } }
body .tabbar .tab { display:flex; align-items:center; min-height:58px; padding:6px 4px; gap:4px; border-radius:999px; color:var(--tone-ink-5d5d5d,#5d5d5d); }
body .tabbar .tab svg { width:24px; height:24px; }
body .tabbar .tabbar-items { position:relative; isolation:isolate; --tab-index:0; }
body .tabbar .tabbar-items:has(.tab:nth-child(2).active) { --tab-index:1; }
body .tabbar .tabbar-items:has(.tab:nth-child(3).active) { --tab-index:2; }
body .tabbar .tabbar-indicator {
  position:absolute; top:5px; bottom:5px; left:5px; width:calc((100% - 32px) / 3);
  border-radius:999px; background:var(--tone-fill-ededed,#ededed); pointer-events:none;
  transform:translateX(calc(var(--tab-index) * (100% + 11px))); z-index:0;
}
body .tabbar .tabbar-items:not(:has(.tab.active)) .tabbar-indicator { display:none; }
body .tabbar .tab { position:relative; z-index:1; }
body .tabbar .tab-label { font-size:13px; line-height:18px; font-weight:500; }
body .tabbar .tab-profile .avatar { --s:24px; width:24px; height:24px; font-size:10px; line-height:24px; background:var(--tone-fill-ffffff,#fff); color:var(--tone-ink-0d0d0d,#0d0d0d); border:0; box-shadow:none; box-sizing:border-box; }
body .header-brand { position:absolute; right:max(16px,calc(50% - 300px)); top:calc(8px + env(safe-area-inset-top)); display:grid; place-items:center; width:44px; height:44px; pointer-events:auto; border-radius:12px; }
body .header-brand img { width:32px; height:32px; object-fit:contain; }
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
  body .tabbar .tab:not(.active):hover, body .header-brand:hover { background:var(--tone-fill-f9f9f9,#f9f9f9); color:var(--tone-ink-0d0d0d,#0d0d0d); }
}
body .tabbar .tab.active, body .tabbar .tab.active:hover { background:transparent; color:var(--tone-ink-0d0d0d,#0d0d0d); }
body .chat-reaction { min-width:44px; min-height:44px; }
@media (min-width:560px) { body .sheet { border-radius:24px; } }
@media (prefers-reduced-motion:reduce) { body .switch .track, body .switch .track::after { transition:none; } }

/* The tighter corner faces the author label above each message. */
body .chat-message-meta > span { color:var(--tone-ink-404040,#404040); font-weight:500; }
body .chat-message-meta time { color:var(--tone-ink-767676,#767676); }
body .chat-bubble { border-radius:6px 20px 20px 20px; }
body .chat-message--own .chat-bubble { border-radius:20px 6px 20px 20px; }
body .group-card { border-radius:16px; border:1px solid rgba(13,13,13,.06); box-shadow:none; }

/* ArrowRight/ChevronRight paths and semantic colors from Apps SDK UI. */
body .journey-arrow { background:#00a240; color:#fff; }
body .journey--waiting .journey-arrow { background:#e02e2a; color:#fff; }
body .journey-arrow .mi-arrow { width:24px; height:24px; }
body .journey-disclosure .disclosure-chevron,
body .journey-layout .create-journey-link .disclosure-chevron { transform:none; color:var(--tone-ink-8f8f8f,#8f8f8f); width:18px; height:18px; }
body .journey-heading h3, body .create-journey-label { font-weight:500; }
body #load-more { min-height:44px; padding:10px 20px; border:1px solid var(--tone-edge-dfdfdf,#dfdfdf); background:transparent; color:var(--tone-ink-0d0d0d,#0d0d0d); font-size:14px; line-height:22px; font-weight:500; }
body #load-more:hover { background:transparent; }
body #load-more:active { background:var(--tone-fill-ededed,#ededed); }
body .chat-reaction-count { min-width:44px; min-height:44px; font-size:12px; font-weight:500; }
body .chat-reaction-badge { background:var(--tone-fill-f9f9f9,#f9f9f9); border-color:var(--tone-edge-dfdfdf,#dfdfdf); color:var(--tone-ink-5d5d5d,#5d5d5d); border-radius:8px; }
body .chat-reaction-count.is-mine .chat-reaction-badge { background:var(--tone-fill-ededed,#ededed); border-color:var(--tone-edge-767676,#767676); color:var(--tone-ink-0d0d0d,#0d0d0d); }

body .journey-delete .btn.danger:not(:disabled), body .account-profile .btn.danger:not(:disabled), body .logo-dialog-actions .admin-logo-remove { background:#ffd9d9; color:#ba2623; }

/* Reactions use a bottom sheet with the same header scale as journey sheets. */
body .chat-picker { inset:auto 0 0; width:min(100%,480px); max-width:100%; max-height:calc(100dvh - 12px); margin:0 auto; border:0; border-radius:40px 40px 0 0; padding:16px 24px max(24px,env(safe-area-inset-bottom)); box-shadow:0 -4px 32px #0000001f; }
body .chat-picker .sheet-grabber { display:grid; }
body .chat-picker .reaction-sheet-heading { touch-action:none; }
body .chat-picker h2 { font-size:18px; font-weight:600; line-height:24px; }
body .chat-picker .reaction-sheet-close { width:44px; height:44px; border:0; border-radius:8px; background:transparent; color:var(--tone-ink-5d5d5d,#5d5d5d); font-size:24px; font-weight:400; }
body .chat-picker .chat-emoji-options { margin-top:20px; }
body .chat-picker .chat-emoji-option { width:48px; height:48px; border:0; border-radius:50%; background:transparent; }
body .chat-picker .chat-emoji-option[aria-pressed=true] { box-shadow:inset 0 0 0 1px var(--tone-edge-cdcdcd,#cdcdcd); }
body .chat-picker .chat-emoji-option:active { opacity:.7; }
html[data-input-mode=pointer] body .chat-picker :focus { outline:none; }

/* Native single-choice controls, omitted when there is nothing to switch. */
body .group-picker-form { margin:0; }
body .group-picker-row--static { cursor:default; }
body .group-picker-row--static:active { background:transparent; }
/* Group actions belong to the page heading, leaving the card free for its identity. */
body .schedule-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
body .schedule-heading .page-title { flex:0 0 auto; margin:0; }
body .schedule-heading .group-picker-open { flex:0 1 auto; min-width:0; }
body .group-card :is(.gs-name,.gs-sub) { white-space:normal; overflow-wrap:anywhere; }
body .group-picker .group-picker-radio { appearance:none; -webkit-appearance:none; width:20px; height:20px; min-height:20px; flex:0 0 20px; padding:0; margin:0 0 0 auto; border:1.5px solid var(--tone-edge-8f8f8f,#8f8f8f); border-radius:50%; background:var(--tone-fill-ffffff,#fff); cursor:pointer; }
body .group-picker .group-picker-radio:checked { border-color:#181818; background:radial-gradient(circle,#181818 0 5px,var(--tone-fill-ffffff,#fff) 5.5px); }

/* Seat editor: compact typography and one continuous number control. */
body .edit-sheet .sheet-title { font-size:20px; line-height:28px; font-weight:600; margin-bottom:24px; }
body .edit-sheet .edit-leg { padding:16px; border-radius:12px; background:var(--tone-fill-f9f9f9,#f9f9f9); margin-bottom:20px; }
body .edit-sheet .edit-seats-row { padding:0; border:0; flex-wrap:wrap; gap:16px; }
body .edit-sheet .edit-seats-row label { font-family:inherit; font-size:16px; line-height:24px; font-weight:500; }
body .edit-sheet .edit-seats-row .help { font-size:14px; line-height:20px; margin-top:2px; }
body .edit-sheet .edit-seat-stepper { flex-shrink:0; gap:0; border:1px solid var(--tone-edge-dfdfdf,#dfdfdf); border-radius:10px; background:var(--tone-fill-ffffff,#fff); }
body .sheet.edit-sheet .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-family:inherit; font-size:16px; line-height:24px; font-weight:500; text-align:center; }
body .edit-sheet .edit-seat-stepper button { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; background:transparent; font-family:inherit; font-size:22px; font-weight:400; }
body .edit-sheet .edit-seat-stepper button:active { background:var(--tone-fill-ededed,#ededed); }

body .journey-create .direction-segments { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:4px; border-radius:999px; background:var(--tone-fill-ededed,#ededed); }
body .journey-create .direction-segments::before { content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 3); border-radius:999px; background:var(--tone-fill-ffffff,#fff); box-shadow:0 1px 4px #0002; pointer-events:none; transform:translateX(0); transition:transform 240ms cubic-bezier(.22,1,.36,1); }
body .journey-create .direction-segments:has(input[value="hem"]:checked)::before { transform:translateX(100%); }
body .journey-create .direction-segments:has(input[value="both"]:checked)::before { transform:translateX(200%); }
body .journey-create .direction-segments label { z-index:1; min-width:0; }
body .journey-create .direction-segments label > span:not(.sr-only) { border-radius:999px; font-size:14px; font-weight:500; }
body .journey-create .direction-segments input:checked + span { background:transparent; box-shadow:none; }
@media (prefers-reduced-motion:reduce) { body .journey-create .direction-segments::before { transition:none; } }
body .journey-create .create-option-row { flex-wrap:wrap; }
body .journey-create .seat-control { width:160px; max-width:100%; flex-shrink:0; }
body .journey-create .seat-control.seat-sdk-ready > input { display:none; }
body .journey-create .own-child { font-size:16px; line-height:24px; font-weight:500; }
body .journey-create .create-option-detail { font-size:14px; line-height:20px; font-weight:400; }
body .journey-create .own-child input.create-switch { flex:0 0 44px; width:44px; height:26px; min-height:26px; padding:0; margin:9px 0; background:var(--tone-fill-dfdfdf,#dfdfdf); }
body .journey-create .own-child input.create-switch::after { width:20px; height:20px; left:3px; top:3px; }
body .journey-create .own-child input.create-switch:checked { background:#181818; }
body .journey-create .own-child input.create-switch:checked::after { transform:translateX(18px); }

body .edit-sheet .edit-seat-stepper button { display:grid; place-items:center; border:0; border-radius:0; cursor:pointer; }
body .edit-seat-stepper button svg { display:block; width:24px; height:24px; }
body .journey-create .create-message label span { font-size:14px; font-weight:400; }
body .journey-create .create-message textarea { border:1px solid rgba(13,13,13,.16); border-radius:10px; padding:12px; font-family:inherit; font-size:16px; line-height:24px; background:var(--tone-fill-ffffff,#fff); }
body .journey-create .create-message textarea:focus { border-color:var(--tone-ink-181818,#181818); outline:none; box-shadow:none; }
html[data-input-mode=pointer] body .journey-create .create-message textarea:focus { border-color:rgba(13,13,13,.16); }

/* Shared form labels; headings inside the driver/passenger card have their own style. */
body .journey-create .journey-form-label { font-size:16px; line-height:24px; font-weight:500; color:var(--text); }

/* Supporting information uses the smaller body scale; touch targets stay intact. */
body .sched-item .occasion-day,
body .sched-item .sched-when,
body .sched-item .journey-summary .journey-status {
  font-size:14px; line-height:20px; font-weight:400; color:var(--tone-ink-5d5d5d,#5d5d5d);
}

/* Match the page and status bar: solid at the top, fading into frosted glass. */
body:has(> .navbar)::before { display:none; }
html body .navbar::before, html body .navbar::after { content:none; display:none; }
html body .navbar {
  --header-progress:1;
  background:linear-gradient(to bottom,
    var(--bg) env(safe-area-inset-top,0px),
    color-mix(in srgb,var(--bg) calc(var(--header-progress) * 92%),transparent) calc(env(safe-area-inset-top,0px) + 14px),
    color-mix(in srgb,var(--bg) calc(var(--header-progress) * 72%),transparent) 100%) !important;
  -webkit-backdrop-filter:blur(calc(var(--header-progress) * 16px)) !important;
  backdrop-filter:blur(calc(var(--header-progress) * 16px)) !important;
  border-bottom:0 !important;
  box-shadow:none;
  isolation:isolate;
}
/* The 5px inner padding + 1px border may extend below the safe area; tab targets stay above it. */
body .tabbar { --tabbar-bottom:max(4px,calc(env(safe-area-inset-bottom,0px) - 6px)); bottom:var(--tabbar-bottom); }
body .tabbar::before { content:""; position:absolute; z-index:-1; pointer-events:none; left:50%; width:100vw; top:-18px; bottom:calc(-1 * var(--tabbar-bottom)); transform:translateX(-50%); background:linear-gradient(to top,rgb(0 0 0 / 16%),rgb(0 0 0 / 6%) 55%,transparent); }
@media (prefers-reduced-transparency:reduce) {
  html body .navbar {
    background:var(--bg) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
}

body .admin-family-summary .admin-chevron { width:18px; height:18px; flex:0 0 18px; color:var(--tone-ink-8f8f8f,#8f8f8f); }

body .admin-families > h2 { font-size:20px; line-height:26px; font-weight:600; color:var(--tone-ink-0d0d0d,#0d0d0d); }
body .admin-families > .help { font-size:14px; line-height:20px; font-weight:400; color:var(--tone-ink-5d5d5d,#5d5d5d); }

/* Date, time and place form a single flowing metadata row. */
body .sched-item .occasion-meta { display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px; margin-top:8px; margin-bottom:24px; }
body .sched-item .occasion-meta .occasion-day { margin:0; white-space:nowrap; }
body .sched-item .occasion-meta .sched-when { display:contents; margin:0; }
body .sched-item .occasion-meta .sched-when > span { font-size:14px; line-height:20px; font-weight:400; color:var(--tone-ink-5d5d5d,#5d5d5d); white-space:normal; overflow:visible; }
body .sched-item .occasion-meta .sched-when > span::before { content:none; }
body .sched-item .occasion-meta .occasion-day::after,
body .sched-item .occasion-meta .sched-when > span:first-child:has(+ span:not(:empty))::after { content:" ·"; white-space:pre; }
body .sched-item .occasion-meta .sched-when > span:first-child { white-space:nowrap; }
body .sched-item .occasion-meta .sched-when > span:last-child { overflow-wrap:anywhere; }
body .sched-item.journey-layout .occasion-meta { margin-bottom:0; }
body .sched-item .occasion-meta .sched-when > span:empty { display:none; }

body .family-chevron { color:var(--tone-ink-8f8f8f,#8f8f8f); }

/* Driver details follow the same type scale as list and form content. */
html body .journey .driver-name .dn-text { font-size:16px; line-height:24px; font-weight:500; color:var(--tone-ink-0d0d0d,#0d0d0d); }
body .journey .driver-rel, body .journey .leg-seats-label { font-size:14px; line-height:20px; font-weight:400; color:var(--tone-ink-5d5d5d,#5d5d5d); }
body .journey .driver-role { font-weight:500; }
body .journey .driver-row > .avatar,
body .journey .leg-book .stack-av .avatar { background:var(--tone-fill-f3f3f3,#f3f3f3); color:var(--tone-ink-5d5d5d,#5d5d5d); font-size:16px; line-height:24px; font-weight:500; }
body button.seat-child .avatar,
body button.seat-child:is(:hover,:active) .avatar { border-width:1px; box-shadow:none; }
body .passenger-edit svg { width:18px; height:18px; flex:0 0 18px; }
body .chat-reaction-badge,
body .chat-reaction-count.is-mine .chat-reaction-badge { background:var(--tone-fill-ffffff,#fff); border:1px solid var(--tone-edge-cdcdcd,#cdcdcd); border-radius:999px; color:var(--tone-ink-0d0d0d,#0d0d0d); box-shadow:0 1px 2px rgb(0 0 0 / 5%); }

body .journey .seat-book, body .journey .seat-book:hover { background:transparent; }
body .journey .seat-book::before, body .journey .seat-book:hover::before { background:var(--button-soft-bg); }
body .journey .seat-book:active::before { background:var(--button-soft-hover); }

/* About content uses one continuous dialog surface, not border-only nested cards. */
body .about-page h2 { font-size:20px; line-height:26px; font-weight:600; color:var(--tone-ink-0d0d0d,#0d0d0d); }
body .about-page p { font-size:16px; line-height:24px; font-weight:400; color:var(--tone-ink-5d5d5d,#5d5d5d); margin-bottom:16px; }
body .about-page p a { color:var(--tone-ink-0d0d0d,#0d0d0d); text-underline-offset:3px; }
body.panel-document .about-page .card { padding:24px 0; margin:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
body.panel-document .about-page .about-brand { padding-top:0; }
body.panel-document .about-page .about-section { border-top:1px solid var(--hairline); }
body .about-page .about-brand img { display:block; width:56px; height:56px; border-radius:12px; }
body .about-page .about-brand h2 { margin-top:20px; }
body .about-page .about-brand .btn { margin-top:8px; }
body .nav-dialog { border:0; border-radius:16px; background:var(--tone-fill-ffffff,#fff); }
body .nav-dialog.journey-page-sheet { --journey-sheet-radius:40px; border-radius:var(--journey-sheet-radius); }
/* Keep the previous journey visible while a new ride slides in above it. */
body .nav-dialog.journey-page-sheet { transform-origin:top center; transition:scale 320ms cubic-bezier(.22,1,.36,1), translate 320ms cubic-bezier(.22,1,.36,1); }
body .nav-dialog.journey-sheet-behind { scale:.94; translate:0 var(--journey-stack-shift,0px); clip-path:inset(0 0 var(--journey-stack-clip,0px) round var(--journey-sheet-clip-radius,var(--journey-sheet-radius))); }
body .nav-dialog.journey-sheet-behind .nav-panel-header > *, body .nav-dialog.journey-sheet-behind > .sheet-grabber { visibility:hidden; }
body .nav-dialog.journey-stack-sheet { inset:44px 0 20px; height:fit-content; max-height:calc(100dvh - 64px); }
body .nav-dialog.journey-stack-sheet::backdrop { background:rgba(0,0,0,.16); }
@media (max-width:559px) {
  body .nav-dialog.journey-page-sheet { --journey-sheet-clip-radius:var(--journey-sheet-radius) var(--journey-sheet-radius) 0 0; }
  body .nav-dialog.journey-stack-sheet { inset:36px 0 0; max-height:calc(100dvh - 36px); }
}
@media (prefers-reduced-motion:reduce) {
  body .nav-dialog.journey-page-sheet { transition:none; }
}
body .nav-panel-header, body .journey-sheet-footer { background:var(--sheet-material); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); }
@media (min-width:560px) {
  body .journey-sheet-footer { padding:24px 24px max(24px,env(safe-area-inset-bottom)); }
}
body .nav-dialog .nav-panel-header .sheet-title { font-size:20px; line-height:26px; font-weight:600; color:var(--tone-ink-0d0d0d,#0d0d0d); }
body .nav-dialog.journey-page-sheet .nav-panel-header .sheet-title { font-size:18px; line-height:24px; }
html[data-input-mode=pointer] body .nav-dialog .reaction-sheet-close:focus { outline:none !important; }
@media (max-width:559px) { body .nav-dialog { border-radius:24px 24px 0 0; } }
@media (max-width:559px) { body .nav-dialog.journey-page-sheet { border-radius:var(--journey-sheet-radius) var(--journey-sheet-radius) 0 0; } }
@media (prefers-reduced-transparency:reduce) { body .nav-panel-header, body .journey-sheet-footer { background:var(--tone-fill-ffffff,#fff); -webkit-backdrop-filter:none; backdrop-filter:none; } }

@media (max-width:559px) {
  body dialog.reaction-people-sheet { left:0; right:0; bottom:0; width:100%; max-width:100%; margin:0; box-sizing:border-box; border-radius:24px 24px 0 0; }
}
html[data-input-mode=pointer] body .sheet-grabber:focus { outline:none !important; }

@media (max-width:767px) {
  body .chat-message:hover .chat-react-trigger:not(:focus-visible) { opacity:0; }
}

body .sched-item .sched-title { font-size:18px; line-height:26px; font-weight:600; }
body .container:has(.group-card) > .page-title { font-size:30px; line-height:36px; font-weight:500; }

/* Outlined groups within a white surface; page cards use the gray canvas for separation. */
body .group-picker-list { background:var(--tone-fill-ffffff,#fff); border:1px solid var(--tone-edge-e9e9e9,#e9e9e9); }
body .card:not(.group-switcher):not(.journey-layout),
body .journey-layout .journey-panel,
body .journey-layout .journey-chat,
body .group-card,
body :is(.profile-section,.create-audience-list,.group-list,.admin-family,.profile-child-card) {
  background:var(--tone-fill-ffffff,#fff); border:1px solid var(--tone-edge-e9e9e9,#e9e9e9); box-shadow:none;
}
body:not(.panel-document) .container :is(.card,.group-card,.profile-section,.group-list,.admin-family,.profile-child-card):not(.journey-layout):not(.card *, .group-card *, .profile-section *, .group-list *, .admin-family *, .sheet *, dialog *) {
  border-color:transparent;
}
/* Keep inset dialogs continuous and avatars distinct from the white canvas. */
body.panel-document .about-page .card { border:0; background:transparent; }
body.panel-document .about-page .about-section { border-top:1px solid var(--hairline); }
body .journey-person > .avatar,
body .journey .driver-row > .avatar { background:var(--tone-fill-f3f3f3,#f3f3f3); }

/* Profile settings share the beta's typography and neutral controls. */
body .account-profile { font-size:16px; line-height:24px; color:var(--text); }
body:has(.account-profile) .page-title { font-size:30px; line-height:36px; }
body .account-profile h2 { font-size:20px; line-height:26px; font-weight:600; color:var(--text); }
body .account-profile .name { font-size:16px; line-height:24px; font-weight:500; }
body .login-form .field > label,
body .login-form .login-password-label > label,
body .account-profile .field > label,
body .account-profile .profile-field-label { font-size:14px; line-height:20px; font-weight:500; color:var(--text); }
body .account-profile :is(.help,p.muted) { font-size:14px; line-height:20px; font-weight:400; color:var(--muted); }
body .account-profile input:not([type=hidden]):not([type=checkbox]):not([type=file]),
body .account-profile select { font-family:var(--font); font-size:16px; line-height:24px; font-weight:400; }
body .account-profile .avatar { background:var(--tone-fill-f3f3f3,#f3f3f3); color:var(--muted); font-weight:500; }
body .account-profile .avatar.sm { font-size:14px; }
body .account-profile .profile-subheading { font-size:14px; line-height:20px; font-weight:500; color:var(--text); margin:24px 0 8px; }
body .account-profile :is(.profile-identity,.child-edit,.switch-row,.inline-form + .inline-form) { border-color:var(--hairline); }
body .account-profile .switch-row .switch-label { font-size:16px; line-height:24px; font-weight:400; }
body .account-profile .switch input:checked + .track { background:#181818; }
body .account-profile .offer-extra > summary { gap:10px; font-size:16px; line-height:24px; font-weight:500; color:var(--text); }
body .account-profile .offer-extra > summary::before { display:none; }
body .account-profile .profile-add-icon { flex:0 0 20px; width:20px; height:20px; }
body .account-profile .offer-extra[open] .profile-add-icon .plus-vertical { display:none; }
body .account-profile .child-edit-toggle { font-size:14px; line-height:20px; font-weight:500; color:var(--text); }
body .account-profile .child-edit-toggle { gap:6px; }
body .account-profile .child-edit-toggle svg { width:18px; height:18px; flex:0 0 18px; }
body .account-profile .child-edit[open] .child-edit-toggle svg { display:none; }
body .account-profile .badge:not(.amber) { background:var(--tone-fill-f3f3f3,#f3f3f3); color:var(--muted); font-size:12px; line-height:18px; font-weight:500; }

/* Cross-page consistency pass: keep legacy page styles from changing the scale. */
html body .container .page-title { font-size:var(--type-page); line-height:36px; font-weight:500; color:var(--text); }
body .container .login-brand .page-title { font-size:32px; line-height:39px; }
body :is(.admin-page,.create-group-page,.families-page,.prose,.about-page) h2,
body .create-group-page .card h2,
body :is(.family-contact-dialog,.group-picker,.edit-sheet,.nav-dialog) .sheet-title {
  font-size:var(--type-section); line-height:26px; font-weight:600; color:var(--text);
}
body :is(.admin-page,.create-group-page) .field > label,
body .admin-page .segment label { font-size:var(--type-detail); line-height:20px; font-weight:500; color:var(--text); }
body :is(.admin-page,.create-group-page) .help { font-size:var(--type-detail); line-height:20px; color:var(--muted); }
body :is(.admin-page,.create-group-page) :is(input,select,textarea):not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=file]) { font-family:var(--font); font-size:var(--type-body); line-height:24px; font-weight:400; }
body .admin-page :is(.name,.admin-family-summary),
body .families-page .family-person-name,
body .create-group-page .audience-option strong { font-size:var(--type-body); line-height:24px; font-weight:500; color:var(--text); }
body .families-page .family-relation,
body .family-contact-links a > span { font-size:var(--type-detail); line-height:20px; color:var(--muted); }
body .family-contact-links a > strong { font-size:var(--type-body); line-height:24px; color:var(--text); }
body .family-contact-links { background:var(--tone-fill-ffffff,#fff); border:1px solid var(--border); border-radius:16px; }
body .family-contact-links a + a { border-color:var(--hairline); }
body :is(.families-page,.admin-page) .avatar { background:var(--avatar-fill); color:var(--muted); font-weight:500; }
body .admin-page .avatar.sm { font-size:14px; }
body .admin-page .badge:not(.amber) { background:var(--avatar-fill); color:var(--muted); }
body .admin-page .profile-subheading { font-size:var(--type-detail); line-height:20px; font-weight:500; color:var(--text); margin:0 0 10px; }
body .driving-stats-table tbody th { font-size:14px; line-height:20px; font-weight:500; }
body .driving-stats-table td { font-size:14px; line-height:20px; }
body .driving-stats .driving-stats-note { font-size:14px; line-height:20px; }
body .prose { font-size:16px; line-height:24px; color:var(--text); }
body .prose strong { font-weight:600; }
body .prose h2 { margin-top:24px; }

/* Profile card headings and photo action. */
body .account-profile > .card h2:not(.sheet-title),
body .account-profile > .profile-form > .card h2:not(.sheet-title) { font-size:18px; line-height:26px; font-weight:600; }
body .account-profile .profile-identity { display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; padding:0; margin:0; border:0; }
body .account-profile .profile-identity .profile-photo-control { justify-self:end; }
body .account-profile .profile-text-action { gap:6px; white-space:nowrap; }
body .account-profile .profile-text-action svg { width:18px; height:18px; flex:none; }
/* Contact and photo sheets share the journey header geometry. */
body .account-profile .profile-photo-dialog,
body .family-contact-dialog { border:0; border-radius:40px; padding:80px 24px 24px; }
body .account-profile .profile-photo-dialog .sheet-title,
body .family-contact-dialog .sheet-title { position:absolute; inset:16px 72px auto 24px; display:flex; align-items:center; min-height:44px; margin:0; padding:0; font-size:18px; line-height:24px; font-weight:600; }
@media(max-width:559px) {
  body .account-profile .profile-photo-dialog,
  body .family-contact-dialog { border-radius:40px 40px 0 0; padding-bottom:max(24px,env(safe-area-inset-bottom)); }
}
@media(max-width:420px) {
  body .account-profile .profile-identity { grid-template-columns:48px minmax(0,1fr); gap:10px; }
  body .account-profile .profile-identity > .avatar { width:48px; height:48px; }
}

body .header-brand img { width:32px; height:32px; object-fit:contain; mix-blend-mode:multiply; }
.install-guide { box-sizing:border-box; width:calc(100% - 32px); max-width:440px; max-height:calc(100dvh - 32px); overflow:auto; padding:28px; border:1px solid var(--tone-edge-e9e9e9,#e9e9e9); border-radius:24px; background:var(--tone-fill-ffffff,#fff); color:var(--tone-ink-181818,#181818); font-family:var(--font); }
.install-guide::backdrop { background:rgb(0 0 0 / .35); }
.install-guide .reaction-sheet-close { position:absolute; top:16px; right:16px; }
.install-guide-icon { display:block; border:1px solid var(--tone-edge-ededed,#ededed); border-radius:16px; margin-bottom:20px; }
.install-guide h2 { font-size:24px; line-height:30px; font-weight:500; margin:0 0 12px; }
.install-guide p,.install-guide li { font-size:16px; line-height:24px; }
.install-guide p { color:var(--muted); }
.install-guide ol { padding-left:22px; margin:20px 0; }
.install-guide li + li { margin-top:12px; }
.install-guide .btn { margin-top:12px; }
.install-guide [hidden] { display:none !important; }

.install-guide .reaction-sheet-close { display:grid; place-items:center; padding:0 !important; width:44px; height:44px; }
.install-guide .reaction-sheet-close svg { display:block; }

body .header-brand { background:transparent; border-radius:0; }
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
  body .header-brand:hover { background:transparent; }
}

body .about-logo-tile { display:inline-flex; width:72px; height:72px; background:var(--tone-fill-ededed,#ededed); border-radius:18px; overflow:hidden; }
body .about-page .about-brand .about-logo-tile img { width:72px; height:72px; margin:0; mix-blend-mode:normal; }

/* Shared header geometry, with or without a back action. */
html body .navbar { height:calc(var(--app-header-height) + env(safe-area-inset-top)) !important; }
html body .navbar-title { font-size:17px; line-height:22px; font-weight:600; }
html body .header-brand,
html body .back-fab { top:calc(env(safe-area-inset-top) + (var(--app-header-height) - 44px) / 2); }
html body .header-brand img { width:44px; height:44px; transform:none; }
html body.subpage:has(.back-fab) .navbar { padding-inline:72px; }

/* A fixed direction still submits its checked value, without a redundant selector. */
body .journey-create .create-direction[hidden] { display:none; }
body .journey-create .create-direction[hidden] ~ .create-option-row { border-top:0; }

/* Let the large title leave naturally before the compact header fades in. */
html body.scroll-header .navbar { --header-progress:0; }
html body.scroll-header .navbar .navbar-title {
  opacity:var(--header-progress,0); transform:none; transition:none;
}

html body .account-profile .account-sections { padding:0; overflow:hidden; }
body .account-sections a { position:relative; display:flex; align-items:center; gap:12px; min-height:72px; padding:6px 18px; text-decoration:none; }
body :is(.account-sections,.profile-admin-links) a { color:var(--text); font-size:17px; line-height:22px; font-weight:500; }
body .account-sections a + a::before { content:""; position:absolute; top:0; left:58px; right:18px; height:1px; background:var(--hairline); }
body .account-section-icon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:7px; background:#181818; color:#fff; }
body .account-section-icon svg { width:21px; height:21px; }
body .account-section-chevron { width:18px; height:18px; flex:0 0 18px; margin-left:auto; color:var(--tone-ink-8f8f8f,#8f8f8f); }
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
 body .account-sections a:hover { background:var(--tone-fill-f5f5f5,#f5f5f5); }
 body .account-sections a:hover::before, body .account-sections a:hover + a::before { opacity:0; }
}

body .account-section-icon--familj { background:#0169cc; }
body .account-section-icon--aviseringar { background:#e25507; }
body .account-section-icon--losenord { background:#8046d9; }
body .account-section-icon--administration { background:#00a240; }
body .account-section-icon--kontohantering { background:#e04c91; }

/* Account detail pages use the same compact header as a journey. */
html body .back-fab { left:max(20px, calc(50% - 300px)); }
html body:has(.account-page-title) .container { padding-top:calc(var(--app-header-height) + 24px + env(safe-area-inset-top)); }
html body:has(.account-page-title) .navbar-title { opacity:1; transform:none; font-size:17px; }
@media (max-width:360px) { html body .back-fab { left:16px; } }

body .sched-item .sched-title { white-space:normal; overflow-wrap:anywhere; }

body .journey-chat .chat-empty { font-size:18px; line-height:26px; font-weight:500; color:var(--text); margin:0 0 16px; }

/* Dialog typography follows the lighter section-heading scale. */
html body .sheet-title, html body .confirm-box h2 { font-size:22px; line-height:28px; font-weight:500; color:var(--text); }
html body .sheet-text, html body .confirm-msg { font-size:16px; line-height:24px; font-weight:400; color:var(--muted); }

body .sched-item .sched-icons { right:12px; top:12px; }
body .sched-item .head-icon { width:44px; height:44px; border-radius:999px; color:var(--text); }
body .sched-item .head-icon svg { width:20px; height:20px; }

/* OpenAI Alert soft danger, inset where the journey rows normally appear. */
body .sched-item :is(.occasion-cancelled-alert,.occasion-change-alert) { display:flex; align-items:center; gap:12px; padding:16px; margin:0 0 24px; border-radius:12px; background:rgb(250 66 62 / 8%); box-shadow:inset 0 0 0 1px rgb(250 66 62 / 8%); color:#ba2623; font-size:14px; line-height:20px; }
body :is(.occasion-cancelled-alert,.occasion-change-alert) > svg { flex:0 0 20px; width:20px; height:20px; }
body :is(.occasion-cancelled-alert,.occasion-change-alert) > div { min-width:0; }
body .occasion-cancelled-title { font-weight:600; }
body .occasion-cancelled-description { margin-top:2px; font-weight:400; }

/* OpenAI Alert soft info uses blue-a25 and blue-600. */
body .sched-item .occasion-change-alert { background:rgb(2 133 255 / 4%); box-shadow:inset 0 0 0 1px rgb(2 133 255 / 4%); color:#004f99; }
body .journey-layout .activity-panel .occasion-change-alert { margin:24px 0 0; }
body .admin-page .invite-tip { background:rgb(2 133 255 / 4%); border-color:rgb(2 133 255 / 4%); color:#004f99; }
body .admin-page .invite-tip :is(svg,strong) { color:inherit; }


body .group-picker-open svg { flex-shrink:0; }

/* Back navigation always uses a compact, centered header title. */
html body.subpage:not(.panel-document):has(.back-fab) .navbar-title { opacity:1; transform:none; font-size:17px; line-height:22px; }
html body.subpage:not(.panel-document):has(.back-fab) .container { padding-top:calc(var(--app-header-height) + 24px + env(safe-area-inset-top)); }
html body.subpage:not(.panel-document):has(.back-fab) h1.page-title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

body .sched-item .occasion-change-alert { align-items:flex-start; }
body .occasion-change-alert > svg { margin-top:2px; }
body .occasion-info-content { flex:1; overflow-wrap:anywhere; }

/* Superadministration shares the account and journey presentation. */
body .super-page h2 { font-size:20px; line-height:28px; font-weight:500; margin:0 0 16px; }
body .super-page .card { padding:20px 18px; margin-bottom:20px; }
body .super-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
body .super-stats > div { display:flex; flex-direction:column; gap:4px; }
body .super-stats strong { font-size:28px; line-height:34px; font-weight:500; }
body .super-stats span { font-size:13px; color:var(--muted); }
body .super-mail { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--hairline); padding-top:16px; margin-bottom:16px; font-size:14px; }
body .super-page .super-navigation { display:flex; align-items:center; justify-content:space-between; min-height:72px; color:var(--text); font-size:17px; font-weight:500; text-decoration:none; }
body .super-navigation svg, body .super-chevron { color:var(--tone-ink-8f8f8f,#8f8f8f); flex-shrink:0; }
body .super-page .super-group-list { padding:0; overflow:hidden; }
body .super-group-row { display:block; padding:20px 18px; text-decoration:none; color:var(--text); }
body .super-group-row + .super-group-row { border-top:1px solid var(--hairline); }
body .super-group-name { font-size:17px; line-height:24px; font-weight:500; }
body .super-section-title { margin-top:28px; }
body .super-group-heading { font-size:20px; line-height:28px; font-weight:500; margin:0 0 24px; overflow-wrap:anywhere; }
body .super-page .member-head { flex-wrap:wrap; gap:12px; }
body .super-page .grow { min-width:0; overflow-wrap:anywhere; }
body .super-page .member-head > .grow { flex:1 1 160px; }
body .super-page .name { font-size:17px; line-height:24px; font-weight:500; }
body .super-page .btn.sm { --button-font-size:14px; --button-line-height:20px; --button-height:44px; }
body .super-page .row { flex-wrap:wrap; }
@media (hover:hover) and (pointer:fine) {
 body .super-group-row:hover, body .super-page .super-navigation:hover { background:var(--tone-fill-f5f5f5,#f5f5f5); }
}
body .super-group-row:active { opacity:.8; }

body .super-icon { flex-shrink:0; }
body .super-stats span, body .super-mail > span, body .super-navigation > span { display:flex; align-items:center; gap:8px; }
body .super-navigation > .super-icon, body .super-group-row .card-link-body > .super-icon { color:var(--tone-ink-8f8f8f,#8f8f8f); width:18px; height:18px; }

body .journey-person > .avatar { --s:32px; font-size:12px; }

/* Fixed columns keep the count and people aligned on one row in every car. */
body .journey-heading { display:grid; grid-template-columns:var(--journey-icon) 80px minmax(0,1fr) 18px; column-gap:12px; }
body .journey-summary { display:grid; grid-template-columns:24px 98px; justify-content:end; align-items:center; gap:12px; }
body .journey-summary > .journey-people,
body .journey-summary > .journey-person,
body .journey-summary > .journey-status { grid-column:2; grid-row:1; justify-self:end; }
body .journey-summary > .journey-status { grid-column:1 / -1; }
.journey-comment-count { position:relative; display:grid; place-items:center; grid-column:1; grid-row:1; width:24px; height:24px; color:var(--tone-ink-8f8f8f,#8f8f8f); }
.journey-comment-count svg { display:block; width:22px; height:22px; }
.journey-comment-count text { fill:var(--muted); font-size:9.625px; font-weight:600; font-variant-numeric:proportional-nums; }
.journey-comment-count .journey-comment-number--multiple { letter-spacing:-.3px; }

/* Keep each car together, with the driver above the overlapping passengers. */
.journey-people { display:flex; align-items:center; justify-content:flex-end; isolation:isolate; padding-block:5px; }
.journey-people .journey-person { position:relative; z-index:var(--person-layer,0); flex:0 0 32px; }
.journey-people .journey-person + .journey-person { margin-left:-10px; }
.journey-people .avatar { box-shadow:0 0 0 2px var(--surface); }
body .journey-person--more > .avatar { padding-right:6px; box-sizing:border-box; }
.journey-driver-badge { position:absolute; top:-3px; right:-2px; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--surface); color:var(--text); box-shadow:0 0 0 2px var(--surface); box-sizing:border-box; }
.journey-driver-badge svg { width:16px; height:16px; }
@media (max-width:400px) { body .journey-heading { column-gap:8px; } }
@media (max-width:360px) {
  body .journey-heading { grid-template-columns:var(--journey-icon) 74px minmax(0,1fr) 18px; column-gap:3px; }
  body .journey-summary { grid-template-columns:24px 70px; }
  body .journey-heading h3 { font-size:16px; white-space:nowrap; }
  body .journey-person > .avatar { --s:25px; font-size:10px; }
  .journey-comment-count text { font-size:8.3125px; }
  .journey-people .journey-person { flex-basis:25px; }
}

/* Parent-managed child accounts use the existing cards and ride sheets. */
.child-account-controls { margin-top:24px; padding-top:20px; border-top:1px solid var(--hairline); }
.child-account-controls h3 { margin:0 0 8px; font-size:16px; }
.child-account-controls form + form { margin-top:12px; }
.child-passenger-list { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px; }
.child-passenger-list li { display:flex; align-items:center; gap:12px; }
.journey-driver-panel .child-driver-call { margin-top:20px; }
.child-profile-details { display:grid; gap:16px; margin:24px 0; }
.child-profile-details dt { color:var(--muted); font-size:14px; margin-bottom:4px; }
.child-profile-details dd { margin:0; overflow-wrap:anywhere; }
.page-end { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; }