/* Brand surfaces are opaque. Texture belongs to the illustrations, never controls. */
:root {
  color-scheme:light;
  --panel:var(--color-ivory);--surface:#EAF1DF;--text:var(--color-forest);
  --muted:var(--color-muted);--edge:#063B2B26;--accent:var(--color-forest);
  --shadow:0 3px 12px #063B2B0D;--route-color:var(--color-forest);
  --header-height:144px;--ease:cubic-bezier(.22,.8,.25,1);--drawer:cubic-bezier(.22,.8,.25,1);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
}
body,body[data-theme='light'] {--panel:var(--color-ivory);--surface:#EAF1DF;--text:var(--color-forest);--muted:var(--color-muted);--edge:#063B2B26;--shadow:0 3px 12px #063B2B0D;color:var(--text);background:var(--panel);font:400 16px/24px var(--font-body)}
body[data-theme='dark'] {color-scheme:dark;--panel:#0B3025;--surface:#164637;--text:var(--color-ivory);--muted:#B8C9BB;--edge:#83E5A433;--accent:var(--color-mint);--shadow:0 3px 12px #0002}
button,input {font-family:var(--font-body)}
button:focus-visible,input:focus-visible,a:focus-visible {outline:3px solid var(--color-free);outline-offset:3px}
button:disabled {cursor:default}
button,input[type='range'] {touch-action:manipulation}
.brand-header {position:fixed;z-index:640;inset:0 0 auto;height:calc(var(--header-height) + env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) 20px 80px;background:var(--color-mint);color:var(--color-forest);display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #063B2B12}
.brand-logo {display:block;width:166px;height:46px;object-fit:contain;object-position:left center}
.brand-city {font-size:14px;line-height:20px;font-weight:600;text-align:right}
.brand-city span {display:block;font-size:12px;line-height:16px;font-weight:400}
#map {top:calc(var(--header-height) + env(safe-area-inset-top));height:calc(100% - var(--header-height) - env(safe-area-inset-top));background:#E5EAD4}
.map-vignette {display:none}
.icon-button {width:48px;height:48px;padding:12px;border-radius:16px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--shadow);transition:transform 140ms ease,background 140ms ease}
.icon-button:active {transform:scale(.96)}
.icon-button img,.route-chip>img,.search-capsule>img,#search-trigger img,.result-chevron {filter:brightness(0) saturate(100%) invert(16%) sepia(23%) saturate(1602%) hue-rotate(108deg) brightness(94%) contrast(99%)}
body[data-theme='dark'] .icon-button img,body[data-theme='dark'] .route-chip>img,body[data-theme='dark'] .result-chevron {filter:brightness(0) invert(94%) sepia(16%) saturate(320%) hue-rotate(342deg)}
.icon-button .motion-svg {width:24px;height:24px;color:var(--text)}
#theme {position:relative;overflow:hidden}
.theme-symbol {position:absolute;inset:11px;display:grid;place-items:center;pointer-events:none;opacity:0;transform:rotate(-65deg) scale(.6);transition:opacity 180ms ease,transform 240ms var(--ease)}
.theme-symbol img {display:block;width:24px;height:24px}
#theme[data-theme='dark'] .theme-sun,#theme[data-theme='light'] .theme-moon {opacity:1;transform:rotate(0deg) scale(1)}
body {transition:background-color 200ms ease,color 200ms ease}
.vehicle-sheet,.route-chip,.search-results,.zoom-buttons,#notice {transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.map-actions {top:calc(var(--header-height) + 20px + env(safe-area-inset-top));right:20px;gap:8px;align-items:flex-end;pointer-events:none}
.map-actions button,.map-actions .zoom-buttons {pointer-events:auto}
.zoom-buttons {border-radius:16px;box-shadow:var(--shadow);background:var(--panel)}
.zoom-buttons .icon-button {border-radius:0}
.route-chip {top:calc(var(--header-height) + 20px + env(safe-area-inset-top));left:20px;max-width:calc(100% - 100px);padding:8px 8px 8px 12px;border-radius:16px;gap:8px;background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--edge);animation:chip-in 180ms ease-out}
.route-chip strong {font:700 16px/24px var(--font-heading);letter-spacing:-.4px}
.route-chip span {font-size:12px;line-height:16px;display:block}
.route-chip span::before {display:none}
.route-chip>img {width:24px;height:24px}
.route-chip .icon-button {width:48px;height:48px;padding:12px;margin:0;background:transparent}
.route-demo {display:block;font:400 12px/16px var(--font-body);margin-top:4px}
.search-panel {left:20px;right:20px;top:calc(76px + env(safe-area-inset-top));bottom:auto;max-width:none;width:auto;transform:none;z-index:660;transition:opacity 180ms ease}
.search-capsule {height:52px;padding:0 4px 0 16px;border-radius:16px;background:var(--color-ivory);color:var(--color-forest);border:1px solid #063B2B22}
.search-capsule::before,.search-aura {display:none}
#search-trigger {inset:0;width:100%;transform:none;border-radius:16px;font:400 16px/24px var(--font-body);justify-content:flex-start}
#search-trigger img {left:16px;width:24px;height:24px;opacity:1}
#compact-search-hint {left:52px;right:12px}
.map-guidance {position:fixed;z-index:630;left:20px;right:20px;bottom:calc(var(--nav-space,90px) + 20px);max-width:420px;padding:16px 20px;border:1px solid var(--edge);border-radius:16px;background:var(--panel);color:var(--text);box-shadow:var(--shadow);pointer-events:none}
.map-guidance strong {font-size:18px;line-height:24px}
.map-guidance p {font-size:14px;line-height:20px;margin:6px 0 0;color:var(--muted)}
.map-guidance[hidden],.search-active .map-guidance,.lines-open .map-guidance,.profile-open .map-guidance,.line-picking .map-guidance,.vehicle-open .map-guidance {display:none}
.searching .search-results .search-coverage {padding:4px 12px 12px;margin:0;color:#D5E3D8}
.search-capsule>img {width:24px;height:24px}
.search-capsule input {height:48px;font-size:16px;letter-spacing:0;color:var(--color-forest)}
.search-capsule input::placeholder {font-size:14px;color:var(--color-muted)}
.search-capsule input:focus-visible {outline:none}
.search-capsule:focus-within {border-color:var(--color-forest);box-shadow:0 0 0 1px var(--color-forest)}
.search-capsule .icon-button {width:48px;height:48px;padding:12px;background:transparent;border-radius:12px}
.searching .search-capsule>img,.searching .search-capsule input,.searching .search-capsule .icon-button {transition-delay:0ms}
.search-capsule .icon-button img {filter:brightness(0) saturate(100%) invert(16%) sepia(23%) saturate(1602%) hue-rotate(108deg) brightness(94%) contrast(99%)}
.search-results {top:64px;bottom:auto;max-height:calc(var(--visible-height,100dvh) - 168px - env(safe-area-inset-top));padding:8px;border-radius:24px;background:var(--panel);box-shadow:var(--shadow);transform:translateY(-6px);transform-origin:50% 0;transition:opacity 180ms ease,transform 180ms ease}
.searching .search-results {transition-delay:0ms}
.search-results p {font:400 14px/20px var(--font-body);padding:16px 12px}
.search-results .results-heading {font:600 12px/16px var(--font-body);letter-spacing:.5px;padding:12px;text-transform:uppercase}
.search-result {min-height:80px;padding:12px;gap:12px;border-radius:16px}
.search-result+.search-result {border-top:1px solid var(--edge);border-radius:0}
.search-result strong {font:600 16px/24px var(--font-body);letter-spacing:0}
.search-result small {font:400 14px/20px var(--font-body);white-space:normal;overflow-wrap:anywhere}
.route-badge {width:48px;height:48px;border-radius:16px;background:var(--color-forest)!important;color:var(--color-ivory);font:700 22px/28px var(--font-heading);box-shadow:none}
.search-all {min-height:64px;background:var(--surface);border-radius:16px}
.search-all strong {font-weight:600}
.result-chevron {width:20px;height:20px;opacity:.7}
#search-backdrop {background:#063B2B20;backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity 180ms ease}
.vehicle-open .search-panel {opacity:1;pointer-events:auto}
.vehicle-open .search-panel[inert] {opacity:.65;pointer-events:none}
.vehicle-sheet {display:flex;flex-direction:column;max-width:480px;height:min(740px,calc(100dvh - var(--header-height) - 24px - env(safe-area-inset-top)));padding:0 20px calc(16px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:var(--panel);box-shadow:0 -4px 16px #063B2B0C;border:1px solid var(--edge);border-bottom:0;bottom:0;left:0}
.sheet-handle {height:48px;min-height:48px;flex-shrink:0}
.sheet-handle span {width:40px;background:var(--text);opacity:.25}
.sheet-summary {gap:12px;flex-shrink:0}
.sheet-summary h1 {font:700 22px/28px var(--font-heading);letter-spacing:-.65px;overflow-wrap:anywhere}
.sheet-summary .icon-button {order:2;align-self:flex-start;width:48px;height:48px;padding:12px;background:transparent}
#vehicle-subtitle {font:400 14px/20px var(--font-body);white-space:normal;overflow:visible;text-overflow:clip;margin:8px 0 0}
.vehicle-moving {margin-top:12px;gap:12px;flex-wrap:wrap;font:400 12px/16px var(--font-body);flex-shrink:0}
#vehicle-speed {padding:4px 8px;background:var(--surface);border-radius:8px;font-weight:600}
#vehicle-state::before {background:var(--color-free);width:6px;height:6px;flex-shrink:0}
.sheet-content {flex:1;min-height:0;margin-top:20px;max-height:none;overflow-y:auto;overflow-x:hidden;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
.section-label {align-items:flex-start;gap:8px}
h2,.occupancy-preview h2 {font:700 20px/28px var(--font-heading);letter-spacing:-.65px;overflow-wrap:anywhere}
.section-label span {font:600 12px/16px var(--font-body);color:var(--text);background:var(--surface);padding:4px 8px;border-radius:999px;white-space:nowrap;border:0}
.occupancy-reading {justify-content:flex-start;gap:12px;margin:20px 0 0}
.occupancy-reading output {font:700 40px/48px var(--font-heading);letter-spacing:-1.5px;color:var(--text)}
.occupancy-reading span {font:400 14px/20px var(--font-body)}
.bus-illustration {width:100%;height:auto;aspect-ratio:2.5;display:grid;place-items:center;margin:8px 0}
.bus-illustration img {width:100%;height:100%;object-fit:contain}
.bus-illustration img[data-level='unknown'],.bus-illustration img[src$='mark.svg'] {width:56px;height:56px;opacity:.45}
.occupancy-dots {display:flex;gap:3px;width:100%;padding:0;margin:12px 0;background:transparent;border-radius:0}
.occupancy-dots i {height:5px;flex:1;min-width:0;border-radius:2px}
.occupancy p {font:400 12px/16px var(--font-body);margin:12px 0 0}
#occupancy-quality {font:600 14px/20px var(--font-body);color:var(--text)}
.data-source-credit {font:400 12px/16px var(--font-body);color:var(--muted);margin:16px 0}
.data-source-credit a {display:inline-flex;min-height:48px;align-items:center}
.occupancy-preview {padding-top:24px;margin-top:24px;font:400 14px/20px var(--font-body)}
.occupancy-preview h2 {margin-bottom:12px}
.occupancy-preview p {font:400 14px/20px var(--font-body);margin:0 0 16px}
.occupancy-preview label {font-weight:600;font-size:14px}
.occupancy-preview input {min-height:48px;margin:4px 0;accent-color:var(--color-free)}
.occupancy-preview output {font:600 14px/20px var(--font-body);color:var(--text)}
.report-illustration {float:right;width:96px;height:40px;margin-top:-8px}
.report-illustration img {display:block;width:100%;height:100%;object-fit:contain}
#report-submit {min-height:52px;border:1px solid var(--color-forest);border-radius:16px;background:var(--color-forest);color:var(--color-ivory);font:600 16px/24px var(--font-body);margin-top:20px;transition:transform 140ms ease}
body[data-theme='dark'] #report-submit {background:var(--color-mint);color:var(--color-forest);border-color:var(--color-mint)}
#report-submit:active {transform:scale(.98)}
#report-feedback {min-height:20px;margin-top:12px;font-size:14px}
#report-feedback[data-state='success'] {color:var(--color-free)}
#report-feedback[data-state='error'] {color:var(--color-full)}
body[data-theme='dark'] #report-feedback[data-state='success'] {color:var(--color-mint)}
body[data-theme='dark'] #report-feedback[data-state='error'] {color:#FFB4AD}
.vehicle-details {font:400 12px/16px var(--font-body);padding-top:16px;margin-top:16px;flex-wrap:wrap}
.tram-label {width:56px;height:36px;display:grid;grid-template-columns:20px 22px;place-content:center;align-items:center;justify-items:center;padding:4px;gap:3px;border-radius:11px;border:1.5px solid var(--vehicle-color);background:var(--color-ivory);color:var(--color-forest);font:600 14px/1 var(--font-body);box-shadow:0 1px 4px #063B2B22}
.tram-number {display:grid;place-items:center;width:22px;height:24px;line-height:24px;letter-spacing:0;font-variant-numeric:tabular-nums}
.tram-pictogram {display:grid;place-items:center;height:24px;width:20px;padding:2px;border-radius:6px;background:var(--color-forest)}
.tram-pictogram .motion-svg {display:block;width:16px;height:20px;color:var(--color-ivory)}
.tram-marker {height:36px}
.tram-icon::before {inset:-6px}
.tram-label::after {border-radius:14px}
.tram-label.gps-uncertain {background:var(--color-unknown-surface);color:var(--color-forest)}
.user-position {background:var(--color-forest);border-color:var(--color-ivory);box-shadow:0 0 0 6px #83E5A460}
#locate[aria-pressed='true'],#choose-position[aria-pressed='true'] {background:var(--color-mint);box-shadow:none;border-color:var(--color-forest)}
#locate[aria-pressed='true'] .motion-svg,#choose-position[aria-pressed='true'] .motion-svg {color:var(--color-forest)}
.stop-name {padding:8px 12px;border-radius:12px;font:400 14px/20px var(--font-body)}
#notice {font:400 14px/20px var(--font-body);border-radius:16px;right:80px;max-width:calc(100% - 100px)}
#notice[data-placement='search'] {top:calc(var(--header-height) + 12px + env(safe-area-inset-top));bottom:auto}
.leaflet-control-attribution {background:var(--panel)!important;padding:2px 6px!important;opacity:1;font:400 10px/14px var(--font-body)!important;max-width:100%;white-space:normal}
.icon-button,.zoom-buttons,.route-chip,.search-results,.vehicle-sheet,#notice,.search-capsule::before {backdrop-filter:none;-webkit-backdrop-filter:none}
@media(min-width:600px){.brand-header{width:460px;border-radius:0 0 24px 0;border-right:1px solid #063B2B22}.search-panel{right:auto;width:420px}.search-results{max-height:calc(var(--visible-height,100dvh) - 168px - env(safe-area-inset-top))}#map{inset:0;height:100%}.map-actions{top:20px}.route-chip{top:calc(var(--header-height) + 20px + env(safe-area-inset-top))}.vehicle-sheet{left:20px;bottom:20px;border-radius:24px;border-bottom:1px solid var(--edge);height:min(740px,calc(100dvh - var(--header-height) - 60px - env(safe-area-inset-top)))}}
@media(max-width:359px){.brand-header{padding-left:16px;padding-right:16px}.brand-logo{width:140px}.brand-city{font-size:12px}.search-panel{left:16px;right:16px}.map-actions{right:12px}.route-chip{left:12px;max-width:calc(100% - 84px)}.sheet-summary{gap:8px}.sheet-summary h1{font-size:18px;line-height:26px}.vehicle-sheet{padding-left:16px;padding-right:16px}.section-label h2,.occupancy-preview h2{font-size:18px;line-height:26px}.route-chip strong{font-size:14px}}
@media(max-width:599px) and (max-height:650px){.map-actions{gap:4px;top:calc(var(--header-height) + 12px + env(safe-area-inset-top))}}
@media(max-height:500px) and (orientation:landscape){.brand-header{width:360px;--header-height:128px}.search-panel{left:16px;right:auto;width:328px;top:72px;transform:none}.map-actions{top:16px}.vehicle-sheet{left:16px;bottom:16px;max-width:420px;height:calc(100dvh - 160px)}.route-chip{top:150px}.sheet-summary h1{font-size:18px;line-height:24px}}
@media(prefers-contrast:more){body,body[data-theme='light']{--muted:#30483C;--edge:#063B2B80}body[data-theme='dark']{--muted:#DEE9DE;--edge:#83E5A480}}
.vehicle-sheet {overflow:hidden;z-index:680}
#sheet-backdrop {position:fixed;z-index:670;inset:0;opacity:0;visibility:hidden;pointer-events:none;background:#FFF8E74D;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity 200ms ease,visibility 200ms}
body[data-theme='dark'] #sheet-backdrop {background:#0B30254D}
.details-open #sheet-backdrop {opacity:1;visibility:visible;pointer-events:auto}
.sheet-expanded {display:flex;flex-direction:column;min-height:0;height:100%;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity 180ms ease,transform 240ms var(--ease)}
.expanded .sheet-expanded {opacity:1;pointer-events:auto;transform:none}
.sheet-compact {position:absolute;top:0;left:20px;right:20px;padding:24px 0 calc(20px + env(safe-area-inset-bottom));opacity:1;transition:opacity 140ms ease,transform 220ms var(--ease)}
.expanded .sheet-compact {opacity:0;pointer-events:none;transform:translateY(-8px)}
.sheet-compact h2 {font:700 22px/28px var(--font-heading);margin:0;overflow-wrap:anywhere}
#compact-vehicle-subtitle {font:400 14px/20px var(--font-body);color:var(--muted);margin:8px 0 0;overflow-wrap:anywhere}
.compact-occupancy {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0;font:400 14px/20px var(--font-body)}
.compact-occupancy strong {font-weight:600}
#compact-load-score {color:var(--muted)}
.compact-load-dot {width:10px;height:10px;flex:none;border-radius:50%;background:var(--load-color)}
#sheet-details {width:100%;min-height:52px;position:relative;padding:12px 44px;border:0;border-radius:16px;background:var(--color-mint);color:var(--color-forest);font:600 16px/24px var(--font-body);transition:transform 140ms ease}
#sheet-details:active {transform:scale(.98)}
#sheet-details svg {position:absolute;right:16px;top:14px;width:24px;height:24px}
#sheet-details svg,.sheet-handle svg {fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sheet-handle {display:flex;justify-content:center;align-items:center;gap:8px;color:var(--text);font:600 14px/20px var(--font-body);margin-bottom:8px}
.sheet-handle svg {width:24px;height:24px}
.sheet-expanded .sheet-content {margin-top:16px;opacity:1;transform:none;transition:none}
.sheet-expanded .occupancy-reading {margin:0;flex-wrap:wrap;gap:4px 12px}
#occupancy-label {font:600 20px/28px var(--font-body);margin:4px 0 0}
.occupancy .forecast-caption {margin:0;color:var(--muted);font:400 14px/20px var(--font-body)}
.occupancy-dots {gap:6px;margin:12px 0 16px}
.occupancy-dots i {height:12px;border-radius:999px}
.occupancy .forecast-note {font:400 14px/20px var(--font-body);color:var(--muted)}
.tram-arrow img {left:calc(50% - 12px);top:-36px;width:24px;height:20px}
.tram-load-icon {pointer-events:none!important;background:none;border:0}
.tram-occupancy {left:0;top:0;width:44px;height:12px;padding:2px;border:2px solid var(--color-ivory);border-radius:999px;background:#DDE5D8;box-shadow:0 0 0 1px var(--color-forest),0 2px 4px #063B2B35;overflow:hidden}
.tram-occupancy-fill {inset:1px;border-radius:999px;background:none;transition:clip-path 180ms ease}
.tram-occupancy.is-obscured {visibility:hidden}
@media(max-width:359px){.sheet-compact{left:16px;right:16px}.sheet-compact h2{font-size:18px;line-height:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Tram details and the existing passenger report as a focused page. */
.route-chip {min-height:64px;padding:4px 6px 4px 12px;gap:12px;max-width:calc(100% - 100px)}
.route-chip strong {font:700 16px/22px var(--font-heading)}
.route-chip span {font:400 13px/18px var(--font-body);margin-top:2px}
#route-count {min-height:18px}
.route-chip .route-demo {display:none}
.sheet-expanded .sheet-summary h1 {font-size:28px;line-height:36px}
.sheet-expanded #vehicle-subtitle {margin-top:12px;font-size:16px;line-height:24px}
.sheet-expanded .sheet-content {margin-top:24px}
.occupancy-reading output {font-size:44px;line-height:56px}
#occupancy-label {display:flex;align-items:center;gap:8px;font:600 16px/24px var(--font-body);margin:0;letter-spacing:0}
#occupancy-label::before {content:'';width:10px;height:10px;border-radius:50%;background:var(--load-color);flex:none}
.occupancy .forecast-caption {margin-top:4px;font-size:16px;line-height:24px}
.bus-illustration {margin:20px 0 4px}
.report-invite {border-top:1px solid var(--edge);padding-top:20px;margin-top:24px}
.report-invite h2 {font:700 22px/30px var(--font-heading);margin:0}
.report-invite p {font:400 16px/24px var(--font-body);color:var(--muted);margin:12px 0 16px}
.mint-button {width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;border:0;border-radius:16px;background:var(--color-mint);color:var(--color-forest);font:600 16px/24px var(--font-body);transition:transform 140ms ease}
.mint-button:active {transform:scale(.98)}
.mint-button svg,.report-back svg {width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.mint-button svg {margin-left:auto}
.report-view {position:fixed;z-index:700;inset:0;display:flex;flex-direction:column;background:var(--panel);color:var(--text);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(24px);transition:opacity 220ms ease,transform 260ms var(--ease),visibility 260ms}
.report-open .report-view {opacity:1;visibility:visible;pointer-events:auto;transform:none}
.report-open #vehicle-sheet {opacity:0;pointer-events:none}
#vehicle-sheet {transition:opacity 200ms ease,background-color 200ms ease}
.report-header {flex:none;background:var(--color-mint);padding:calc(12px + env(safe-area-inset-top)) 20px 12px}
.report-header img {display:block;width:166px;height:46px;object-fit:contain}
.report-scroll {display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 20px calc(20px + env(safe-area-inset-bottom));max-width:560px;width:100%;margin:0 auto}
.report-back {display:flex;align-items:center;gap:8px;align-self:flex-start;min-height:48px;padding:0;border:0;background:none;color:var(--text);font:600 16px/24px var(--font-body)}
#report-vehicle {margin:8px 0 16px;color:var(--muted);font:400 16px/24px var(--font-body)}
#report-title {font:700 34px/40px var(--font-heading);letter-spacing:-1px;margin:0}
#report-title:focus {outline:none}
.report-instruction {font:400 16px/24px var(--font-body);color:var(--muted);margin:16px 0 0}
.report-view .report-illustration {width:100%;max-width:none;aspect-ratio:2.5;height:auto;margin:28px 0 20px;flex-shrink:0}
#occupancy-preview-value {display:block;text-align:center;font:700 24px/32px var(--font-heading);letter-spacing:-.5px}
.report-range {margin-top:16px}
#occupancy-preview {display:block;width:100%;height:48px;min-height:48px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:pan-y}
#occupancy-preview::-webkit-slider-runnable-track {height:14px;border-radius:999px;background:linear-gradient(to right,var(--slider-color) 0 var(--slider-value),var(--surface) var(--slider-value) 100%)}
#occupancy-preview::-moz-range-track {height:14px;border-radius:999px;background:var(--surface)}
#occupancy-preview::-moz-range-progress {height:14px;border-radius:999px;background:var(--slider-color)}
#occupancy-preview::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:36px;height:36px;margin-top:-11px;border:2px solid var(--color-forest);border-radius:50%;background:var(--color-ivory);box-shadow:0 1px 4px #063B2B33}
#occupancy-preview::-moz-range-thumb {width:32px;height:32px;border:2px solid var(--color-forest);border-radius:50%;background:var(--color-ivory)}
.range-ticks,.range-labels {display:flex;justify-content:space-between;padding:0 4px;color:var(--muted);font:400 14px/20px var(--font-body)}
.range-ticks {margin-bottom:8px}
.range-ticks i {height:8px;width:1px;background:var(--muted)}
.report-footer {margin-top:auto;padding-top:36px}
.report-footer #report-submit {margin-top:0;background:var(--color-mint);color:var(--color-forest);border-color:var(--color-mint);font-size:18px;min-height:56px}
.report-footer>p {font:400 14px/20px var(--font-body);color:var(--muted);margin:12px 0 0}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.tram-marker {height:42px}
.tram-label {width:56px;height:42px;grid-template-columns:18px 22px;padding:3px 4px 12px;gap:3px;border-radius:11px;font-size:14px}
.tram-number {width:22px;font-size:14px}
.tram-pictogram {background:transparent;width:18px;height:22px;padding:0}
.tram-pictogram .motion-svg {width:18px;height:22px;color:var(--color-forest)}
.tram-arrow img {left:calc(50% - 10px);top:-34px;width:20px;height:16px}
.tram-occupancy {position:absolute;left:6px;right:6px;bottom:5px;top:auto;display:flex;gap:2px;width:auto;height:5px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.tram-occupancy i {flex:1;min-width:0;height:5px;border-radius:3px;transition:background-color 160ms ease}
.tram-icon.selected .tram-label {border-color:var(--color-mint);box-shadow:0 0 0 2px var(--color-forest),0 0 0 4px var(--color-mint)}
.tram-icon.selected .tram-label::after {opacity:0}
@media(min-width:600px){.route-chip{max-width:340px}.report-view{inset:20px auto 20px 20px;width:480px;border-radius:24px;overflow:hidden}.report-header{padding-top:12px}}
@media(max-width:359px){.sheet-expanded .sheet-summary h1{font-size:24px;line-height:32px}.occupancy-reading output{font-size:36px;line-height:48px}.report-invite h2{font-size:20px;line-height:28px}.report-scroll{padding-left:16px;padding-right:16px}#report-title{font-size:28px;line-height:34px}#occupancy-preview-value{font-size:20px;line-height:28px}.report-footer #report-submit{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.bus-illustration,.report-illustration {position:relative}

#occupancy-preview::-webkit-slider-thumb {background:linear-gradient(#063B2B,#063B2B) calc(50% - 3px) center/2px 14px no-repeat,linear-gradient(#063B2B,#063B2B) calc(50% + 3px) center/2px 14px no-repeat,#FFF8E7}
#occupancy-preview::-moz-range-thumb {background:linear-gradient(#063B2B,#063B2B) calc(50% - 3px) center/2px 14px no-repeat,linear-gradient(#063B2B,#063B2B) calc(50% + 3px) center/2px 14px no-repeat,#FFF8E7}

@media(max-width:359px){.route-chip{gap:8px;padding-left:10px}.route-chip strong{font-size:14px;line-height:20px}.route-chip>img{width:20px;height:20px}}

@media(max-width:599px){
 .vehicle-sheet {height:calc(100dvh - 12px - env(safe-area-inset-top))}
 .sheet-content,.report-scroll {scrollbar-width:none;-ms-overflow-style:none}
 .sheet-content::-webkit-scrollbar,.report-scroll::-webkit-scrollbar {display:none;width:0;height:0}
 .sheet-expanded .sheet-content {margin-top:16px}
}
@media(max-width:599px) and (max-height:700px){
 .sheet-expanded .sheet-summary h1 {font-size:24px;line-height:32px}
 .sheet-expanded #vehicle-subtitle {margin-top:8px;font-size:14px;line-height:20px}
 .sheet-handle {margin-bottom:0}
 .sheet-expanded .sheet-content {margin-top:12px}
 .occupancy-reading output {font-size:38px;line-height:48px}
 .occupancy .forecast-caption {font-size:14px;line-height:20px}
 .bus-illustration {margin-top:12px;margin-bottom:0;max-height:130px}
 .report-invite {margin-top:16px;padding-top:16px}
 .report-invite h2 {font-size:20px;line-height:26px}
 .report-invite p {font-size:14px;line-height:20px;margin:8px 0 12px}
}
@media(max-width:599px) and (max-height:620px){
 .sheet-expanded .sheet-summary h1 {font-size:22px;line-height:28px}
 .sheet-expanded .sheet-content {margin-top:8px}
 .bus-illustration {margin-top:8px}
 .report-invite {margin-top:12px;padding-top:12px}
 .report-invite p {margin-top:6px;margin-bottom:10px}
}
/* Focused search screen; the compact map field remains the entry point. */
.search-heading {display:none}
.search-panel::before,.search-panel::after {content:'';position:absolute;pointer-events:none;z-index:-1;opacity:0;transition:opacity 220ms ease}
.search-panel::before {inset:0;background:var(--color-forest)}
.search-panel::after {inset:0 0 auto;height:calc(136px + env(safe-area-inset-top));background:var(--color-mint)}
.search-panel.searching {isolation:isolate;z-index:800;left:0;right:0;top:0;bottom:auto;width:100%;height:var(--visible-height,100dvh);max-width:none;display:flex;flex-direction:column;padding:calc(12px + env(safe-area-inset-top)) 20px env(safe-area-inset-bottom);color:var(--color-ivory);transform:none}
.search-panel.search-visible::before,.search-panel.search-visible::after {opacity:1}
.searching .search-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;flex:none;color:var(--color-forest)}
.search-heading h1 {margin:0;font:700 20px/28px var(--font-body);letter-spacing:-.4px}
#cancel-search {min-height:48px;padding:0 0 0 8px;border:0;background:transparent;color:var(--color-forest);font:400 16px/24px var(--font-body)}
.searching .search-capsule {width:100%;height:52px;min-height:52px;flex:none;margin-top:4px;margin-bottom:20px;border:0;box-shadow:none;background:var(--color-ivory)}
.searching .search-capsule input::placeholder {font-size:16px}
.searching .search-capsule:focus-within {box-shadow:none}
.searching .search-results {position:relative;top:auto;bottom:auto;flex:1;min-height:0;width:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;scrollbar-width:none;animation:search-results-in 260ms 40ms var(--ease) both}
.searching .search-results::-webkit-scrollbar {display:none;width:0;height:0}
.searching .search-result {min-height:82px;padding:16px 0;gap:16px;border-radius:0;border-bottom:1px solid #83E5A429;color:var(--color-ivory);background:transparent}
.searching .search-result+.search-result {border-top:0}
.searching .search-result:active {background:#83E5A418}
.searching .route-badge {width:48px;height:48px;border-radius:12px;background:var(--color-mint)!important;color:var(--color-forest);font:700 26px/32px var(--font-body)}
.searching .search-result strong {font:600 16px/22px var(--font-body);color:var(--color-ivory)}
.searching .search-result small {font:400 14px/20px var(--font-body);color:#B8C9BB;margin-top:4px}
.searching .search-result mark {background:none;color:var(--color-mint);font-weight:600}
.searching .result-chevron {width:20px;height:20px;margin-left:auto;filter:brightness(0) invert(1);opacity:.7}
.searching .search-all {min-height:58px;padding:12px 0;gap:16px}
.searching .search-all strong {flex:1;min-width:0}
.search-all-icon {width:32px;height:32px;flex:none;filter:brightness(0) saturate(100%) invert(84%) sepia(25%) saturate(770%) hue-rotate(85deg) brightness(98%) contrast(99%)}
.searching .search-results .results-heading {padding:20px 0 4px;font:600 12px/16px var(--font-body);letter-spacing:.6px;color:#B8C9BB}
.searching .search-results .results-count {padding:18px 0 4px;font:400 14px/20px var(--font-body);color:#B8C9BB}
.searching .search-results .search-empty {padding:20px 0;font:400 16px/24px var(--font-body);color:#B8C9BB}
#search-backdrop {z-index:790;background:#063B2B26;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity 200ms ease}
@keyframes search-results-in {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:600px){.search-panel.searching{left:20px;right:auto;top:20px;width:460px;height:calc(var(--visible-height,100dvh) - 40px);border-radius:24px;overflow:hidden}.search-panel.searching::after{border-radius:24px 24px 0 0}}
@media(max-width:359px){.search-panel.searching{padding-left:16px;padding-right:16px}.search-heading h1{font-size:18px;line-height:26px}.searching .search-result{gap:12px}.searching .route-badge{width:44px;height:48px}.searching .search-result strong{font-size:15px;line-height:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.search-panel.search-closing {pointer-events:none}


/* The map launcher and search input keep independent, stable geometry. */
.map-search {position:fixed;z-index:660;left:20px;right:20px;top:calc(76px + env(safe-area-inset-top));height:52px;border:1px solid #063B2B22;border-radius:16px;background:var(--color-ivory);color:var(--color-forest)}
.search-active .map-search {visibility:hidden}
.vehicle-open .map-search[inert] {opacity:.65}
.search-panel.searching {visibility:hidden;opacity:0;pointer-events:none;transition:none}
.search-panel.search-visible {visibility:visible;opacity:1;pointer-events:auto}
.search-panel.search-closing {pointer-events:none}
.search-panel .search-capsule {transform-origin:top left}
.search-panel.search-closing::before,.search-panel.search-closing::after {opacity:0}
.search-panel.search-closing .search-results {animation:none;opacity:0;transition:opacity 180ms ease}
.search-panel:not(.search-visible) .search-results {animation:none}
.search-active #search-backdrop {inset:-100lvh 0;height:auto;background:var(--color-forest);backdrop-filter:none;-webkit-backdrop-filter:none;overscroll-behavior:none}
.search-panel.searching {overflow:hidden;overscroll-behavior:none}
.search-panel::before {min-height:100lvh}
.searching .search-results {overscroll-behavior-y:none;-webkit-overflow-scrolling:touch}
body.search-active {overscroll-behavior:none;background:var(--color-forest)}
.route-direction {display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:600px){.map-search {right:auto;width:420px}}
@media(max-width:359px){.map-search {left:16px;right:16px}}
@media(max-height:500px) and (orientation:landscape){.map-search {left:16px;right:auto;width:328px;top:72px}}