/* ============================================================ * Theme tokens (Everforest medium — dark + light) * * Every surface color comes from these variables so toggling * `data-theme` on flips the whole UI without touching a * single rule. The map basemap lives in JS; see `map.js` for its * parallel palette keyed off the same theme attribute. * ============================================================ */ :root, [data-theme="dark"] { /* Everforest – dark, medium (canonical values from sainnhe/everforest) */ --ef-bg-dim: #232a2e; --ef-bg0: #2d353b; --ef-bg1: #343f44; --ef-bg2: #3d484d; --ef-bg3: #475258; --ef-bg4: #4f585e; --ef-bg5: #56635f; --ef-bg-visual: #543a48; --ef-bg-red: #514045; --ef-bg-green: #425047; --ef-bg-yellow: #4d4c43; --ef-bg-blue: #3a515d; --ef-fg: #d3c6aa; --ef-grey0: #7a8478; --ef-grey1: #859289; --ef-grey2: #9da9a0; --ef-red: #e67e80; --ef-orange: #e69875; --ef-yellow: #dbbc7f; --ef-green: #a7c080; --ef-aqua: #83c092; --ef-blue: #7fbbb3; --ef-purple: #d699b6; /* Semantic slots */ --color-bg: var(--ef-bg0); --color-surface: var(--ef-bg1); --color-surface-alt: var(--ef-bg2); --color-surface-sunken:var(--ef-bg2); --color-surface-hover: var(--ef-bg3); --color-border: var(--ef-bg3); --color-border-strong: var(--ef-bg4); --color-divider: var(--ef-bg2); --color-text: var(--ef-fg); --color-text-strong: #e8dcc0; --color-text-muted: var(--ef-grey2); --color-text-dim: var(--ef-grey1); --color-accent: var(--ef-blue); --color-accent-strong: #a8d3ce; --color-accent-bg: var(--ef-bg-blue); --color-accent-contrast: #1e2529; --color-success: var(--ef-green); --color-success-bg: var(--ef-bg-green); --color-warning: var(--ef-orange); --color-warning-bg: #4a3e36; --color-danger: var(--ef-red); --color-danger-bg: var(--ef-bg-red); --color-chip-building-fg: #a8c7f0; --color-chip-building-bg: var(--ef-bg-blue); --color-chip-path-fg: var(--ef-orange); --color-chip-path-bg: var(--ef-bg-yellow); --color-chip-poi-fg: var(--ef-green); --color-chip-poi-bg: var(--ef-bg-green); --color-chip-room-fg: var(--ef-aqua); --color-chip-room-bg: var(--ef-bg-green); --color-chip-entrance-fg: var(--ef-yellow); --color-chip-entrance-bg: var(--ef-bg-yellow); --color-marker-building: #5a90e0; --color-marker-room: var(--ef-green); --color-marker-entrance: var(--ef-orange); --color-marker-path: var(--ef-orange); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.55); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35); --marker-halo: rgba(30, 36, 42, 0.9); color-scheme: dark; } [data-theme="light"] { /* Everforest – light, medium (canonical values from sainnhe/everforest) */ --ef-bg-dim: #efebd4; --ef-bg0: #fdf6e3; --ef-bg1: #f4f0d9; --ef-bg2: #efebd4; --ef-bg3: #e6e2cc; --ef-bg4: #e0dcc7; --ef-bg5: #bdc3af; --ef-bg-visual: #eaedc8; --ef-bg-red: #fbe3da; --ef-bg-green: #f0f1d2; --ef-bg-yellow: #faedcd; --ef-bg-blue: #e9f0e9; --ef-fg: #5c6a72; --ef-grey0: #a6b0a0; --ef-grey1: #939f91; --ef-grey2: #829181; --ef-red: #f85552; --ef-orange: #f57d26; --ef-yellow: #dfa000; --ef-green: #8da101; --ef-aqua: #35a77c; --ef-blue: #3a94c5; --ef-purple: #df69ba; --color-bg: var(--ef-bg0); --color-surface: #ffffff; --color-surface-alt: var(--ef-bg1); --color-surface-sunken:var(--ef-bg2); --color-surface-hover: var(--ef-bg3); --color-border: var(--ef-bg4); --color-border-strong: var(--ef-bg5); --color-divider: var(--ef-bg3); --color-text: var(--ef-fg); --color-text-strong: #384045; --color-text-muted: var(--ef-grey2); --color-text-dim: var(--ef-grey1); --color-accent: var(--ef-blue); --color-accent-strong: #1f7aa8; --color-accent-bg: var(--ef-bg-blue); --color-accent-contrast: #ffffff; --color-success: var(--ef-green); --color-success-bg: var(--ef-bg-green); --color-warning: var(--ef-orange); --color-warning-bg: var(--ef-bg-yellow); --color-danger: var(--ef-red); --color-danger-bg: var(--ef-bg-red); --color-chip-building-fg: #1f4d8a; --color-chip-building-bg: var(--ef-bg-blue); --color-chip-path-fg: #8a4a10; --color-chip-path-bg: var(--ef-bg-yellow); --color-chip-poi-fg: #4f6a02; --color-chip-poi-bg: var(--ef-bg-green); --color-chip-room-fg: #256f56; --color-chip-room-bg: var(--ef-bg-green); --color-chip-entrance-fg: #8a4a10; --color-chip-entrance-bg: var(--ef-bg-yellow); --color-marker-building: #174ea6; --color-marker-room: #137333; --color-marker-entrance: #8a4a10; --color-marker-path: #8a4a10; --shadow-1: 0 1px 2px rgba(60, 64, 67, 0.18); --shadow-2: 0 2px 6px rgba(60, 64, 67, 0.18), 0 1px 2px rgba(60, 64, 67, 0.20); --shadow-card: 0 1px 2px rgba(60, 64, 67, 0.28), 0 2px 6px rgba(60, 64, 67, 0.14); --marker-halo: rgba(255, 255, 255, 0.95); color-scheme: light; } /* ============================================================ * Base * ============================================================ */ html, body { background: var(--color-bg); color: var(--color-text); } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 1rem; line-height: 1.4; } header { margin-bottom: 1rem; } header a, header span, header form { margin-right: 0.75rem; color: var(--color-text); } header .inline-form { display: inline; } main { max-width: 40rem; } form label { display: block; margin-bottom: 0.5rem; } form input { margin-left: 0.25rem; } ul.flash { list-style: square; padding-left: 1.25rem; } .flash .error { color: var(--color-danger); } .flash .ok { color: var(--color-success); } /* App shell: full-viewport maps-style layout */ body.app-shell { margin: 0; min-height: 100vh; min-height: 100dvh; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body.app-shell header.app-topbar { flex-shrink: 0; margin: 0; padding: 0.625rem 1rem; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); padding-top: max(0.625rem, env(safe-area-inset-top)); display: flex; align-items: center; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-1); } body.app-shell main { flex: 1; max-width: none; margin: 0; padding: 0; position: relative; min-height: 0; display: flex; flex-direction: column; } body.app-shell--map header.app-topbar { display: none; } body.app-shell--map main { flex: 1; min-height: 0; } body.app-shell--map .flash { position: fixed; top: max(0.5rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 20; margin: 0; max-width: min(36rem, calc(100vw - 2rem)); } /* Map fills main */ .map-viewport { position: absolute; inset: 0; background: var(--color-bg); } .map-viewport #map { position: absolute; inset: 0; } /* ============================================================ * Search card * ============================================================ */ .search-overlay { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); z-index: 1000; max-width: min(28rem, 100%); pointer-events: none; } .search-card { pointer-events: auto; background: var(--color-surface); color: var(--color-text); border-radius: 8px; box-shadow: var(--shadow-card); overflow: hidden; } .search-bar-row { display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0 0.75rem; } .search-form { margin: 0; width: 100%; } .search-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; } .search-input-wrap .search-input { position: relative; z-index: 1; width: 100%; border: none; padding: 0.5rem 0.25rem; margin: 0; font-size: max(16px, 1rem); outline: none; background: transparent; box-shadow: none; color: var(--color-text-strong); } .search-input-wrap--faux-empty .search-input { color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; } .search-input-wrap .search-input:focus { box-shadow: none; color: var(--color-text-strong); -webkit-text-fill-color: var(--color-text-strong); caret-color: auto; } .search-placeholder-cycle { position: absolute; left: 0.25rem; right: 0.25rem; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; color: var(--color-text-muted); font-size: max(16px, 1rem); line-height: 1.3; transition: opacity 0.45s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-placeholder-cycle--exit { opacity: 0; } .search-placeholder-cycle--off { opacity: 0; visibility: hidden; } .search-icon-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: none; background: transparent; color: var(--color-text-muted); cursor: default; border-radius: 50%; } .search-icon-btn:hover { background: var(--color-surface-hover); color: var(--color-text-strong); } .search-icon-btn.search-voice-btn--recording { color: var(--color-danger); background: var(--color-danger-bg); cursor: pointer; } .search-icon-btn.search-voice-btn--recording:hover { background: var(--color-danger-bg); filter: brightness(1.1); } #search-voice-btn { position: relative; } .search-voice-btn__spinner { display: none; width: 18px; height: 18px; border: 2px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: search-voice-spin 0.8s linear infinite; } #search-voice-btn.search-voice-btn--processing { cursor: progress; background: var(--color-surface-hover); color: var(--color-accent); } #search-voice-btn.search-voice-btn--processing .search-voice-btn__icon { display: none; } #search-voice-btn.search-voice-btn--processing .search-voice-btn__spinner { display: inline-block; } @keyframes search-voice-spin { to { transform: rotate(360deg); } } .search-results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-divider); overflow-x: hidden; overflow-y: visible; background: var(--color-surface); } .search-result { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; border: none; background: var(--color-surface); color: var(--color-text); width: 100%; min-width: 0; box-sizing: border-box; text-align: left; font: inherit; } .search-result:hover, .search-result:focus { background: var(--color-surface-hover); } .search-result--empty { cursor: default; color: var(--color-text-muted); font-size: 0.875rem; } .search-result__icon { flex-shrink: 0; margin-top: 0.4rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-text-muted); color: var(--color-text-muted); } .search-result__text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .search-result__title { font-size: 0.9375rem; color: var(--color-text-strong); line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; } .search-result__title strong { font-weight: 600; } .search-result__sub { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; } /* Kind chips on result rows. */ .search-result__kind { align-self: flex-start; margin-top: 0.125rem; margin-left: auto; flex-shrink: 0; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); background: var(--color-surface-alt); border-radius: 999px; padding: 0.125rem 0.5rem; } .search-result__kind--building { background: var(--color-chip-building-bg); color: var(--color-chip-building-fg); } .search-result__kind--path { background: var(--color-chip-path-bg); color: var(--color-chip-path-fg); } .search-result__kind--poi { background: var(--color-chip-poi-bg); color: var(--color-chip-poi-fg); } .search-result__kind--room { background: var(--color-chip-room-bg); color: var(--color-chip-room-fg); } .search-result__kind--entrance { background: var(--color-chip-entrance-bg); color: var(--color-chip-entrance-fg); } /* Small colored dot markers for result rows. */ .search-result__icon--building { background: var(--color-marker-building); border-radius: 2px; } .search-result__icon--room { background: var(--color-marker-room); } .search-result__icon--entrance { background: var(--color-marker-entrance); border-radius: 0; } .search-result__icon--poi { background: var(--color-marker-room); } .search-result__icon--path { background: var(--color-marker-path); border-radius: 1px; } /* Rooms nested under a matched building render one level indented. */ .search-result--child { padding-left: 2rem; background: var(--color-surface-alt); } .search-result--child:hover, .search-result--child:focus { background: var(--color-surface-hover); } .search-result--child .search-result__icon { opacity: 0.85; } .search-result--more { cursor: default; padding: 0.4rem 1rem 0.6rem 2rem; font-size: 0.75rem; color: var(--color-text-muted); background: var(--color-surface-alt); } /* Bare standalone map page. */ body.map-view { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; } body.map-view header.app-topbar { display: none; } body.map-view main { max-width: none; margin: 0; padding: 0; height: 100%; } body.map-view #map { position: absolute; inset: 0; } /* ============================================================ * MapLibre popup + controls * * `maplibre-gl.css` is loaded from the child template's `{% block head %}` * block and therefore lands in the cascade AFTER our style.css, so we * pin every override to the `[data-theme]` attribute on . That * gives us specificity `0,2,0` (attr + class) vs their `0,1,0`, beating * them cleanly without having to sprinkle `!important`. * ============================================================ */ [data-theme] .maplibregl-popup-content { font: 13px/1.35 system-ui, sans-serif; padding: 0.5rem 0.7rem; max-width: 22rem; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-2); border-radius: 6px; } [data-theme] .maplibregl-popup-close-button { color: var(--color-text-muted); background: transparent; font-size: 18px; line-height: 1; padding: 2px 6px; } [data-theme] .maplibregl-popup-close-button:hover { background: var(--color-surface-hover); color: var(--color-text-strong); } /* The popup tip is a CSS-triangle built from borders; the side pointing at the anchor inherits the content background and must be kept in sync. */ [data-theme] .maplibregl-popup-anchor-top .maplibregl-popup-tip, [data-theme] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, [data-theme] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--color-surface); } [data-theme] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, [data-theme] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, [data-theme] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--color-surface); } [data-theme] .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--color-surface); } [data-theme] .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--color-surface); } [data-theme] .maplibregl-popup-content strong { display: block; margin-bottom: 0.35rem; font-size: 14px; color: var(--color-text-strong); } [data-theme] .maplibregl-popup-content .tag { color: var(--color-text-muted); font-size: 11px; } [data-theme] .maplibregl-popup-content table.attrs { border-collapse: collapse; width: 100%; font-size: 12px; } [data-theme] .maplibregl-popup-content .popup-actions { display: flex; gap: 0.4rem; margin-top: 0.55rem; } [data-theme] .maplibregl-popup-content .popup-action { flex: 1 1 auto; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-accent); border-radius: 6px; padding: 0.35rem 0.55rem; font: 600 12px/1.2 system-ui, sans-serif; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } [data-theme] .maplibregl-popup-content .popup-action:hover, [data-theme] .maplibregl-popup-content .popup-action:focus-visible { background: var(--color-accent-bg); border-color: var(--color-accent); outline: none; } [data-theme] .maplibregl-popup-content .popup-action--to { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); } [data-theme] .maplibregl-popup-content .popup-action--to:hover, [data-theme] .maplibregl-popup-content .popup-action--to:focus-visible { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--color-accent-contrast); } [data-theme] .maplibregl-popup-content table.attrs th, [data-theme] .maplibregl-popup-content table.attrs td { text-align: left; vertical-align: top; padding: 2px 6px 2px 0; border-bottom: 1px solid var(--color-divider); } [data-theme] .maplibregl-popup-content table.attrs th { font-weight: 500; color: var(--color-text-muted); white-space: nowrap; } [data-theme] .maplibregl-popup-content table.attrs td { color: var(--color-text); word-break: break-word; } [data-theme] .maplibregl-popup-content table.attrs td.popup-addr { white-space: pre-line; line-height: 1.4; } /* MapLibre nav controls */ [data-theme] .maplibregl-ctrl-group { background: var(--color-surface); box-shadow: var(--shadow-2); border-radius: 6px; overflow: hidden; } [data-theme] .maplibregl-ctrl-group button { background-color: var(--color-surface); color: var(--color-text); } [data-theme] .maplibregl-ctrl-group button + button { border-top: 1px solid var(--color-divider); } [data-theme] .maplibregl-ctrl-group button:hover { background-color: var(--color-surface-hover); } /* Flip the stock icon sprite to be legible on dark surfaces. */ [data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(0.88) hue-rotate(180deg); } /* Custom 3D / tilt toggle that sits with the nav controls. */ .pitch-toggle button { width: 29px; height: 29px; font: 600 11px/1 system-ui, sans-serif; letter-spacing: 0.5px; background: var(--color-surface); color: var(--color-text); border: 0; cursor: pointer; } .pitch-toggle button:hover { background: var(--color-surface-hover); } .pitch-toggle.active button, .pitch-toggle button.active { background: var(--color-accent); color: var(--color-accent-contrast); } /* ============================================================ * Directions mode (inside the search card) * ============================================================ */ .directions-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem 0.25rem; } .directions-header__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text-strong); } .directions-fields { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.3rem 0.4rem; padding: 0.25rem 0.75rem 0.5rem; align-items: stretch; } .directions-field { grid-column: 1; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.35rem; background: var(--color-surface-sunken); border-radius: 6px; min-height: 2.25rem; } .directions-field:focus-within { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-accent); } .directions-marker { flex-shrink: 0; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: currentColor; color: var(--color-text-muted); } .directions-marker--from { color: var(--color-success); } .directions-marker--to { color: var(--color-danger); } .directions-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: max(16px, 0.9375rem); color: var(--color-text-strong); padding: 0.25rem 0; } .directions-input::placeholder { color: var(--color-text-muted); } .directions-field-clear { flex-shrink: 0; border: none; background: transparent; color: var(--color-text-muted); border-radius: 50%; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.6; } .directions-field-clear:hover { opacity: 1; background: var(--color-surface-hover); } .directions-swap-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; } .directions-swap-btn:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text-strong); } .directions-swap-btn:disabled { color: var(--color-text-dim); cursor: default; opacity: 0.5; } .search-results--directions { border-top: 1px solid var(--color-divider); max-height: 18rem; overflow-y: auto; } .directions-summary { padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--color-text-strong); border-top: 1px solid var(--color-divider); } .directions-actions { display: flex; gap: 0.4rem; padding: 0.5rem 0.75rem 0.75rem; border-top: 1px solid var(--color-divider); } .directions-actions button { flex: 1; min-width: 5rem; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-accent); border-radius: 6px; font: inherit; font-weight: 500; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .directions-actions button:hover:not(:disabled) { background: var(--color-accent-bg); border-color: var(--color-accent); } .directions-actions button:disabled { color: var(--color-text-dim); cursor: default; background: var(--color-surface); opacity: 0.6; } .directions-actions button#directions-gpx-btn { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); } .directions-actions button#directions-gpx-btn:hover:not(:disabled) { background: var(--color-accent-strong); border-color: var(--color-accent-strong); } .directions-actions button#directions-gpx-btn:disabled { background: var(--color-accent-bg); border-color: var(--color-accent-bg); color: var(--color-accent-contrast); opacity: 0.6; } /* "prefer elevator" chip */ .directions-pref { margin-right: auto; margin-left: 0.5rem; font-size: 0.75rem; color: var(--color-text-muted); } .directions-pref input { margin: 0; accent-color: var(--color-accent); } .directions-endpoint { grid-column: 1; display: flex; flex-direction: column; gap: 0.3rem; } /* Scope chip */ .directions-scope { display: inline-flex; align-items: center; gap: 0.2rem; flex-shrink: 0; max-width: 55%; padding: 0.15rem 0.2rem 0.15rem 0.5rem; background: var(--color-chip-building-bg); color: var(--color-chip-building-fg); font-size: 0.8125rem; font-weight: 500; border-radius: 4px; line-height: 1.2; } .directions-scope[hidden] { display: none; } .directions-scope__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .directions-scope__clear { flex-shrink: 0; border: none; background: transparent; color: inherit; border-radius: 50%; width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.7; } .directions-scope__clear:hover { opacity: 1; background: rgba(127, 187, 179, 0.18); } /* Autocomplete dropdown under indoor input */ .search-results--indoor { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1100; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; box-shadow: var(--shadow-2); max-height: 18rem; overflow-y: auto; } .indoor-result { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; color: var(--color-text); } .indoor-result__icon { flex-shrink: 0; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-text-muted); } .indoor-result--building .indoor-result__icon { background: var(--color-marker-building); border-radius: 2px; } .indoor-result--room .indoor-result__icon { background: var(--color-marker-room); } .indoor-result--entrance .indoor-result__icon { background: var(--color-marker-entrance); border-radius: 0; } /* ============================================================ * Map right-click context menu * ============================================================ */ .map-context-menu { position: fixed; z-index: 1200; background: var(--color-surface); color: var(--color-text); border-radius: 6px; box-shadow: var(--shadow-card); padding: 0.25rem 0; min-width: 12rem; display: flex; flex-direction: column; font: 13px/1.35 system-ui, sans-serif; } .map-context-menu[hidden] { display: none; } .map-context-menu button { border: none; background: transparent; text-align: left; padding: 0.5rem 0.85rem; font: inherit; color: var(--color-text); cursor: pointer; } .map-context-menu button:hover, .map-context-menu button:focus-visible { background: var(--color-surface-hover); outline: none; } /* ============================================================ * Step-by-step turn list * ============================================================ */ .directions-steps { list-style: none; margin: 0; padding: 0.5rem 0; border-top: 1px solid var(--color-divider); max-height: 22rem; overflow-y: auto; } .step { padding: 0.45rem 0.85rem; font-size: 0.875rem; line-height: 1.35; color: var(--color-text); display: flex; align-items: flex-start; gap: 0.5rem; } .step--phase-header { background: var(--color-surface-alt); color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 0.4rem 0.85rem; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); margin: 0.25rem 0; align-items: center; } .step--phase-header:first-child { margin-top: 0; border-top: none; } .step__chip { flex-shrink: 0; font-size: 0.625rem; padding: 0.05rem 0.45rem; border-radius: 999px; color: var(--color-accent-contrast); letter-spacing: 0.03em; font-weight: 700; } .step__chip--indoor { background: var(--color-success); color: var(--color-accent-contrast); } .step__chip--outdoor { background: var(--color-accent); color: var(--color-accent-contrast); } .step__summary, .step__text { flex: 1; min-width: 0; } .step__turn { flex-shrink: 0; font-size: 0.625rem; padding: 0.05rem 0.4rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-contrast); background: var(--color-text-muted); } .step__turn--left { background: var(--color-accent); } .step__turn--right { background: var(--color-warning); } .step__turn--straight { background: var(--color-text-muted); } .step__turn--back { background: var(--color-danger); } .phase-badge { display: inline-block; margin-left: 0.3rem; font-size: 0.625rem; padding: 0.05rem 0.35rem; border-radius: 3px; background: var(--color-chip-path-bg); color: var(--color-chip-path-fg); font-weight: 600; letter-spacing: 0.02em; } .step--change_floor { background: var(--color-warning-bg); } .step--exit_connector { background: var(--color-warning-bg); } .step--arrive { font-weight: 500; } .step--enter_building, .step--exit_building { background: var(--color-accent-bg); } /* ============================================================ * On-map markers for connectors/doors * ============================================================ */ .step__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin-top: -0.1rem; border-radius: 4px; } .step__icon svg { display: block; } .mm-route-marker { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--marker-halo); border-radius: 50%; box-shadow: var(--shadow-1), 0 0 0 2px var(--marker-halo); pointer-events: auto; cursor: help; color: var(--color-text-strong); } .mm-route-marker--door { box-shadow: var(--shadow-1), 0 0 0 2px #5a9fff; } .mm-route-marker--stairs { box-shadow: var(--shadow-1), 0 0 0 2px #daa520; } .mm-route-marker--elevator { box-shadow: var(--shadow-1), 0 0 0 2px #e74c3c; } /* ============================================================ * Theme toggle * ============================================================ */ .theme-toggle { --tt-track-w: 2.6rem; --tt-track-h: 1.4rem; --tt-gap: 0.15rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0; border: 0; background: transparent; color: var(--color-text); cursor: pointer; font: inherit; user-select: none; } .theme-toggle__track { position: relative; display: inline-block; width: var(--tt-track-w); height: var(--tt-track-h); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px; transition: background 180ms ease, border-color 180ms ease; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); flex-shrink: 0; } [data-theme="dark"] .theme-toggle__track { background: var(--ef-bg3); } .theme-toggle__thumb { position: absolute; top: var(--tt-gap); left: var(--tt-gap); width: calc(var(--tt-track-h) - 2 * var(--tt-gap) - 2px); height: calc(var(--tt-track-h) - 2 * var(--tt-gap) - 2px); background: var(--color-surface); color: var(--color-text-strong); border-radius: 50%; box-shadow: var(--shadow-1); display: grid; place-items: center; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background 180ms ease, color 180ms ease; transform: translateX( calc(var(--tt-track-w) - var(--tt-track-h)) ); } [data-theme="light"] .theme-toggle__thumb { transform: translateX(0); color: var(--color-warning); } .theme-toggle__icon { width: 0.85rem; height: 0.85rem; } /* Sun shown in light mode, moon in dark — driven by the theme attr. */ [data-theme="light"] .theme-toggle__icon--moon { display: none; } [data-theme="dark"] .theme-toggle__icon--sun { display: none; } .theme-toggle--floating { position: absolute; z-index: 1100; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); padding: 0.35rem 0.55rem; background: var(--color-surface); color: var(--color-text); border-radius: 999px; box-shadow: var(--shadow-2); border: 1px solid var(--color-border); } .theme-toggle--floating:hover { background: var(--color-surface-hover); } .theme-toggle--floating:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ============================================================ * Mobile + small-viewport tweaks * ============================================================ */ @media (max-width: 640px) { .search-overlay { max-width: none; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); } .search-bar-row { min-height: 2.75rem; padding: 0 0.5rem; } .search-icon-btn { width: 2.75rem; height: 2.75rem; } .directions-fields { gap: 0.3rem 0.3rem; padding: 0.25rem 0.5rem 0.5rem; } .directions-field { min-height: 2.6rem; padding: 0.3rem 0.5rem; } .directions-field-clear { width: 2rem; height: 2rem; } .directions-swap-btn { width: 2.4rem; height: 2.4rem; } .directions-steps { max-height: min(18rem, 38vh); max-height: min(18rem, 38dvh); } .step { padding: 0.5rem 0.7rem; } .directions-actions button { padding: 0.6rem 0.6rem; min-height: 2.5rem; } .search-results { max-height: min(22rem, 55vh); max-height: min(22rem, 55dvh); overflow-y: auto; } .mm-route-marker { width: 24px; height: 24px; } .mm-route-marker svg { width: 18px; height: 18px; } .theme-toggle--floating { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); } } @media (max-width: 380px) { .directions-pref span { display: none; } .directions-header__title { font-size: 0.875rem; } } @media (orientation: landscape) and (max-height: 500px) { .directions-steps { max-height: min(10rem, 45vh); max-height: min(10rem, 45dvh); } .directions-field { min-height: 2.1rem; } } @media (pointer: coarse) { .map-context-menu button { padding: 0.75rem 1rem; font-size: 0.9rem; } .directions-actions button { min-height: 2.75rem; } .search-result { padding: 0.85rem 1rem; } .indoor-result { padding: 0.7rem 0.8rem; } }