/* Shared layout and interaction states; visual tokens and components live in brand.css. */
* {box-sizing:border-box}
html,body {position:fixed;inset:0;height:100%;width:100%;margin:0;overflow:hidden;overscroll-behavior:none}
html {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button,input {font:inherit;color:inherit}
button {cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button:disabled {opacity:.45;cursor:default}
[hidden] {display:none!important}
#map {position:fixed;inset:0;width:100%;height:100%}
.icon-button {display:grid;place-items:center;flex-shrink:0}
.icon-button img,.icon-button .motion-svg {width:24px;height:24px;pointer-events:none}
.map-actions {position:absolute;z-index:600;display:flex;flex-direction:column}
.zoom-buttons {overflow:hidden;border:1px solid var(--edge)}
.zoom-buttons .icon-button {border:0;background:transparent;box-shadow:none}
.zoom-buttons .icon-button+button {border-top:1px solid var(--edge)}
.route-chip {position:absolute;z-index:600;display:flex;align-items:center;min-height:62px}
.route-chip>img {flex-shrink:0}
.route-chip>div {min-width:0}
.route-chip strong {display:block}
.route-chip .icon-button {border:0;box-shadow:none}
@keyframes chip-in {from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.search-panel {position:fixed;z-index:650}
.search-capsule {display:flex;align-items:center;position:relative;isolation:isolate}
#search-trigger {position:absolute;display:flex;align-items:center;gap:10px;background:transparent;border:0;z-index:2;opacity:1;transition:opacity 140ms ease}
#search-trigger img {position:absolute}
#compact-search-hint {position:absolute;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.searching #search-trigger {opacity:0;pointer-events:none}
.search-capsule>img,.search-capsule input,.search-capsule .icon-button {position:relative;opacity:0;pointer-events:none;transition:opacity 160ms ease}
.search-capsule>img {flex-shrink:0}
.search-capsule input {width:100%;min-width:0;background:transparent;border:0;padding:0 8px 0 10px;-webkit-appearance:none}
.search-capsule input::-webkit-search-cancel-button {display:none}
#search-hint {display:none}
.search-capsule .icon-button {box-shadow:none;border:0}
.searching .search-capsule>img,.searching .search-capsule input,.searching .search-capsule .icon-button {opacity:1;pointer-events:auto}
.search-results {position:absolute;width:100%;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--edge);opacity:0;pointer-events:none;scrollbar-width:thin}
.searching .search-results {opacity:1;transform:none;pointer-events:auto}
.search-results p {margin:0;color:var(--muted)}
.search-result {display:flex;align-items:center;width:100%;border:0;text-align:left;background:transparent;transition:transform 140ms ease,background-color 140ms ease}
.search-result:active {transform:scale(.98);background:var(--surface)}
.route-badge {display:grid;place-items:center;flex-shrink:0}
.search-result>span:nth-child(2) {flex:1;min-width:0}
.search-result strong,.search-result small {display:block}
.search-result small {color:var(--muted);margin-top:4px}
.result-chevron {flex-shrink:0}
#search-backdrop {position:fixed;z-index:620;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;pointer-events:none}
.search-open #search-backdrop {opacity:1;pointer-events:auto}
.search-open #notice {z-index:600}
.vehicle-sheet {position:absolute;z-index:650;width:100%;transform:translateY(110%);visibility:hidden}
.vehicle-sheet.visible {visibility:visible}
.sheet-handle {width:100%;border:0;background:transparent;display:grid;place-items:center;touch-action:none;cursor:grab}
.sheet-handle span {height:4px;border-radius:4px}
.sheet-summary {display:flex;align-items:center}
.sheet-summary>div {flex:1;min-width:0}
h1,h2 {margin:0}
#vehicle-subtitle {color:var(--muted)}
.sheet-summary .icon-button {border:0;box-shadow:none}
.vehicle-moving {display:flex;align-items:center}
#vehicle-speed {font-variant-numeric:tabular-nums}
#vehicle-state {color:var(--muted);display:flex;align-items:center;gap:6px}
#vehicle-state::before {content:'';border-radius:50%}
.vehicle-sheet[data-stale='true'] #vehicle-state::before {background:var(--color-orange)}
.sheet-content {overscroll-behavior:contain;opacity:0;transform:translateY(6px);transition:opacity 200ms ease,transform 240ms var(--ease)}
.expanded .sheet-content {opacity:1;transform:none}
.section-label {display:flex;justify-content:space-between}
.occupancy-reading {display:flex;align-items:baseline}
.occupancy-reading output {font-variant-numeric:tabular-nums}
.occupancy-reading span,.occupancy p {color:var(--muted)}
.occupancy-dots i {display:block;transition:opacity 160ms ease,background-color 160ms ease}
.occupancy-preview {border-top:1px solid var(--edge)}
.occupancy-preview p {color:var(--muted)}
.occupancy-preview label,.occupancy-preview output {display:block}
.occupancy-preview input {width:100%}
#report-submit {width:100%;cursor:pointer}
#report-submit:disabled {opacity:.5;cursor:default}
.vehicle-details {display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--edge);color:var(--muted);font-variant-numeric:tabular-nums}
.data-source-credit a {color:var(--text);text-decoration:underline;text-underline-offset:3px}
.tram-icon {background:transparent;border:0;transition:opacity 180ms ease}
.tram-icon::before {content:'';position:absolute;border-radius:16px}
.tram-marker {position:relative;display:block;height:28px}
.tram-label {--vehicle-color:#606B66;position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.tram-number,.tram-pictogram {position:relative;z-index:2}
.tram-number {min-width:9px;font-variant-numeric:tabular-nums}
.tram-pictogram {display:flex}
.tram-occupancy {position:absolute;left:-3px;top:-30px;z-index:3;width:44px;height:7px;padding:0;overflow:hidden;border-radius:5px;pointer-events:none}
.tram-occupancy-fill {position:absolute;inset:0}
.tram-occupancy.is-obscured {visibility:hidden}
.tram-arrow {position:absolute;inset:0;pointer-events:none;transform-origin:50% 50%}
.tram-arrow img {position:absolute;left:calc(50% - 7px);top:-17px;width:14px;height:9px}
.tram-label::after {content:'';position:absolute;inset:-5px;border:2px solid var(--vehicle-color);opacity:0;transform:scale(.9);transition:opacity 160ms ease,transform 180ms ease;pointer-events:none}
.tram-icon.selected {z-index:1000!important}
.tram-icon.selected .tram-label::after {opacity:.55;transform:scale(1)}
.tram-label.gps-uncertain {border-style:dashed}
.tram-icon[data-motion-mode='stale-fix'],.tram-icon[data-motion-mode='stale-source'] {opacity:.65}
.tram-icon:focus-visible {outline:3px solid var(--accent);outline-offset:6px;border-radius:14px}
.user-position {width:18px;height:18px;border:3px solid;border-radius:50%}
.route-line {animation:route-in 180ms ease}
@keyframes route-in {from{opacity:0}to{opacity:1}}
.stop-name {background:var(--panel);border:1px solid var(--edge);color:var(--text)}
#notice {position:absolute;z-index:750;padding:12px 16px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--shadow);opacity:0;transform:translateX(8px);transition:opacity 160ms ease,transform 180ms ease;pointer-events:none}
#notice.visible {opacity:1;transform:none}
#notice[data-placement='search'] {position:fixed;left:50%;right:auto;width:max-content;text-align:center;transform:translate(-50%,6px)}
#notice[data-placement='search'].visible {transform:translateX(-50%)}
.leaflet-control-attribution {color:var(--muted);box-shadow:none}
.leaflet-control-attribution a {color:var(--muted)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip {background:var(--panel);color:var(--text)}
body[data-theme='dark'].raster-fallback .leaflet-tile-pane {filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(.8)}
@media(hover:hover) and (pointer:fine){.icon-button:hover{border-color:var(--muted)}.search-result:hover{background:var(--surface)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}