/* Keep the public service visually identical to the main map shell. */ .station-navigation-shell .station-summary-strip { display: none; } .station-navigation-shell .station-summary-strip .panel-header { margin-bottom: 8px; } .station-navigation-shell .station-summary-strip .status-glass-grid3 { margin-bottom: 7px; } .station-navigation-shell .station-summary-strip .glass-cell { padding: 6px 9px; } .station-navigation-shell .map-filter-chip { min-height: 27px; padding: 0 9px; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--pill-bg); color: var(--text-muted); font-size: 10px; font-weight: 700; cursor: pointer; } .station-navigation-shell .map-filter-chip.is-active { border-color: rgba(0,113,67,.24); background: rgba(0,113,67,.1); color: var(--accent-primary); } .station-navigation-shell .filter-chip-rail { display: flex; gap: 6px; } .station-navigation-shell .region-picker-trigger { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 0 9px; border: 1px solid var(--glass-border); border-radius: 9px; background: var(--pill-bg); color: var(--text-main); font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; } .station-navigation-shell .region-picker-trigger:hover { border-color: rgba(0,113,67,.32); color: var(--accent-primary); } .station-navigation-shell .region-picker-trigger-icon { color: var(--accent-primary); font-size: 14px; line-height: 1; } .station-navigation-shell .region-picker-trigger b { display: grid; min-width: 15px; height: 15px; place-items: center; border-radius: 99px; background: var(--accent-primary); color: #fff; font-size: 9px; } .region-picker-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.38); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .region-picker-backdrop[hidden] { display: none; } .region-picker-dialog { display: flex; width: min(500px, 100%); max-height: min(720px, calc(100dvh - 40px)); flex-direction: column; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 18px; background: var(--glass-bg); box-shadow: 0 28px 70px rgba(15,23,42,.28); } .region-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 17px 12px; border-bottom: 1px solid var(--glass-border); } .region-picker-eyebrow { display: block; margin-bottom: 3px; color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .07em; } .region-picker-header h2 { margin: 0; color: var(--text-main); font-size: 16px; letter-spacing: -.02em; } .region-picker-header h2 em { margin-left: 5px; color: var(--accent-primary); font-size: 11px; font-style: normal; font-weight: 700; } .region-picker-close { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid var(--glass-border); border-radius: 9px; background: var(--pill-bg); color: var(--text-muted); font: 400 20px/1 -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer; } .region-picker-selected { display: flex; min-height: 38px; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 17px; border-bottom: 1px solid var(--glass-border); scrollbar-width: none; } .region-picker-selected::-webkit-scrollbar { display: none; } .region-picker-selected-label { flex: 0 0 auto; color: var(--text-muted); font-size: 10px; font-weight: 700; } .region-picker-selected-placeholder { color: var(--text-muted); font-size: 11px; } .region-picker-selected-chip { display: inline-flex; min-height: 25px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid rgba(0,113,67,.2); border-radius: 99px; background: rgba(0,113,67,.09); color: var(--accent-primary); font-size: 10px; font-weight: 700; cursor: pointer; } .region-picker-selected-chip b { font: 700 14px/1 -apple-system, BlinkMacSystemFont, sans-serif; } .region-picker-search { display: flex; height: 37px; align-items: center; gap: 8px; margin: 12px 17px 9px; padding: 0 10px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--pill-bg); color: var(--text-muted); } .region-picker-search span { font-size: 17px; line-height: 1; } .region-picker-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-main); font: 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .region-picker-search button { display: grid; width: 19px; height: 19px; place-items: center; border: 0; border-radius: 50%; background: var(--segmented-bg); color: var(--text-muted); font-size: 14px; cursor: pointer; } .region-picker-search button[hidden] { display: none; } .region-picker-path { display: flex; min-height: 28px; align-items: center; gap: 6px; padding: 0 17px 7px; color: var(--text-muted); font-size: 10px; } .region-picker-path button { padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: inherit; cursor: pointer; } .region-picker-path button.is-current { color: var(--text-main); font-weight: 700; cursor: default; } .region-picker-path i { color: var(--text-sub); font-style: normal; } .region-picker-list { min-height: 240px; flex: 1 1 auto; overflow-y: auto; padding: 2px 9px 10px; } .region-picker-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) 32px; min-height: 54px; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 72%, transparent); } .region-picker-row.is-selected { background: rgba(0,113,67,.045); } .region-picker-check { display: grid; width: 19px; height: 19px; margin-left: 6px; place-items: center; border: 1px solid var(--glass-border); border-radius: 5px; background: var(--pill-bg); color: #fff; font-size: 12px; cursor: pointer; } .region-picker-row.is-selected .region-picker-check { border-color: var(--accent-primary); background: var(--accent-primary); } .region-picker-row-main { min-width: 0; padding: 8px 3px; border: 0; background: transparent; color: var(--text-main); text-align: left; cursor: pointer; } .region-picker-row-main strong { display: block; overflow: hidden; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .region-picker-row-main small { display: block; overflow: hidden; margin-top: 2px; color: var(--text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .region-picker-next { display: grid; width: 30px; height: 30px; place-items: center; border: 0; background: transparent; color: var(--text-muted); font: 400 22px/1 -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer; } .region-picker-next:hover { color: var(--accent-primary); } .region-picker-next.is-empty { visibility: hidden; } .region-picker-empty { display: grid; min-height: 170px; place-items: center; color: var(--text-muted); font-size: 11px; } .region-picker-footer { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 17px; border-top: 1px solid var(--glass-border); } .region-picker-footer > span { color: var(--text-muted); font-size: 11px; } .region-picker-footer > div { display: flex; align-items: center; gap: 8px; } .region-picker-text-button, .region-picker-confirm { min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; } .region-picker-text-button { border: 1px solid var(--glass-border); background: var(--pill-bg); color: var(--text-muted); } .region-picker-confirm { border: 1px solid var(--accent-primary); background: var(--accent-primary); color: #fff; } .station-navigation-shell .selected-location-filter-rail { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: min(360px, 30vw); overflow-x: auto; scrollbar-width: none; } .station-navigation-shell .selected-location-filter-rail::-webkit-scrollbar { display: none; } .station-navigation-shell .selected-location-filter-rail[hidden] { display: none; } .station-navigation-shell .selected-location-filter-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 29px; max-width: 132px; padding: 0 8px 0 10px; border: 1px solid rgba(0,113,67,.22); border-radius: 999px; background: rgba(0,113,67,.09); color: var(--accent-primary); font-size: 10px; font-weight: 700; cursor: pointer; } .station-navigation-shell .selected-location-filter-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .station-navigation-shell .selected-location-filter-chip b { font: 700 15px/1 -apple-system, BlinkMacSystemFont, sans-serif; } .station-navigation-shell .province-info-card.is-station-point { min-width: 92px; } .station-navigation-shell .province-info-card.is-station-point .p-total { color: var(--accent-primary); } .station-navigation-shell .province-info-card.is-external .p-total { color: var(--text-muted); } .station-navigation-shell .rank-glass-row { cursor: pointer; } .station-navigation-shell .rank-glass-row.is-selected { background: rgba(0,113,67,.09); border-color: rgba(0,113,67,.2); } .station-navigation-shell .r-name { display: flex; min-width: 0; align-items: flex-start; gap: 5px; line-height: 1.35; } .station-navigation-shell .station-list-name { min-width: 0; overflow-wrap: anywhere; white-space: normal; } .station-navigation-shell .station-list-partner-tag { flex: 0 0 30px; min-width: 30px; margin-top: 1px; padding: 2px 5px; border-radius: 4px; background: rgba(0,113,67,.1); color: var(--accent-primary); font-size: 9px; font-weight: 700; line-height: 1; text-align: center; } .station-navigation-shell .station-list-partner-tag.is-placeholder { visibility: hidden; } .station-navigation-shell .r-value-stack { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 4px; margin-left: auto; } .station-navigation-shell .station-list-price { color: var(--accent-primary); font: 700 9px/1 'JetBrains Mono', monospace; letter-spacing: -.03em; white-space: nowrap; } .station-navigation-shell .detail-phone-link { color: var(--accent-primary); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-primary) 35%, transparent); text-underline-offset: 2px; } .station-navigation-shell .rank-empty { display: grid; min-height: 160px; place-items: center; color: var(--text-muted); font-size: 12px; text-align: center; } .station-navigation-shell .map-detail-card .detail-grid { margin-bottom: 0; } @media (max-width: 760px) { /* Mobile is navigation-first: keep the first screen focused on map, search and the next action, rather than dashboard chrome. */ .station-navigation-shell .liquid-header { position: relative; padding: 9px 10px 10px; gap: 8px; } .station-navigation-shell .header-left { width: calc(100% - 78px); gap: 8px; } .station-navigation-shell .brand-block { flex-basis: 118px; min-width: 96px; } .station-navigation-shell .brand-logo-svg { max-width: 118px; } .station-navigation-shell .brand-divider { height: 18px; } .station-navigation-shell .cockpit-title { font-size: 14px; } .station-navigation-shell .header-controls { position: absolute; top: 8px; right: 8px; width: auto; order: initial; } .station-navigation-shell .theme-switcher-bw { padding: 2px; border-radius: 9px; } .station-navigation-shell .theme-switcher-bw .bw-btn { display: grid; width: 31px; min-height: 28px; padding: 4px; place-items: center; } .station-navigation-shell .theme-switcher-bw .bw-btn span { display: none; } .station-navigation-shell .header-kpi-group, .station-navigation-shell .station-status-card { display: none; } .station-navigation-shell .station-summary-strip { display: block; padding: 9px 11px; border-radius: 14px; flex: 0 0 auto; } .station-navigation-shell .station-summary-strip .panel-header { margin-bottom: 7px; padding-bottom: 5px; } .station-navigation-shell .station-summary-strip .status-glass-grid3 { gap: 5px; margin-bottom: 6px; } .station-navigation-shell .station-summary-strip .glass-cell { padding: 6px; } .station-navigation-shell .map-spatial-container { height: clamp(430px, 58dvh, 540px); min-height: clamp(430px, 58dvh, 540px); } .station-navigation-shell .map-top-bar { display: none; } .station-navigation-shell .map-explore-toolbar { top: 8px; left: 8px; right: 8px; display: grid; grid-template-columns: 36px max-content minmax(0, 1fr); gap: 6px; padding: 5px; border-radius: 14px; } .station-navigation-shell .region-picker-trigger { grid-column: 1 / 3; grid-row: 2; min-height: 30px; padding: 0 9px; border-radius: 9px; } .station-navigation-shell .explore-search-shell { grid-column: 2 / -1; grid-row: 1; min-width: 0; } .station-navigation-shell .locate-btn { grid-column: 1; grid-row: 1; flex-basis: 36px; width: 36px; min-height: 36px; border-radius: 10px; } .station-navigation-shell .entity-search-field { height: 36px; border-radius: 10px; } .station-navigation-shell .entity-search-field input { font-size: 12px; } .station-navigation-shell .selected-location-filter-rail { grid-column: 1 / -1; grid-row: 3; max-width: none; padding: 1px 0 0; } .station-navigation-shell .filter-chip-rail { grid-column: 3; grid-row: 2; min-width: 0; max-width: none; overflow-x: auto; } .station-navigation-shell .map-filter-chip { min-height: 30px; padding: 0 8px; font-size: 10px; } .station-navigation-shell .filter-result-meta { display: none; } .region-picker-backdrop { align-items: end; padding: 0; } .region-picker-dialog { width: 100%; max-height: min(82dvh, 700px); border-radius: 20px 20px 0 0; } .region-picker-header { padding: 14px 15px 10px; } .region-picker-selected { padding: 8px 15px; } .region-picker-search { margin: 10px 15px 7px; } .region-picker-path { padding: 0 15px 6px; } .region-picker-footer { padding: 10px 15px calc(10px + env(safe-area-inset-bottom)); } .station-navigation-shell .explore-suggestions { top: calc(100% + 43px); left: -42px; width: calc(100vw - 32px); max-height: min(280px, calc(100dvh - 250px)); border-radius: 14px; } .station-navigation-shell .map-explore-toolbar:has(.selected-location-filter-rail:not([hidden])) .explore-suggestions { top: calc(100% + 79px); } .station-navigation-shell .map-action-controls { right: 8px; bottom: 31px; } .station-navigation-shell .map-action-controls .glass-btn:nth-child(1), .station-navigation-shell .map-action-controls .glass-btn:nth-child(2) { display: none; } .station-navigation-shell .map-action-controls .glass-btn { min-height: 32px; padding: 6px 10px; border-radius: 10px; font-size: 10px; } .station-navigation-shell .map-detail-card { bottom: 46px; max-height: min(42dvh, 300px); padding: 12px; border-radius: 17px; } .station-navigation-shell .detail-title-wrap h2 { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .station-navigation-shell .detail-navigate-btn, .station-navigation-shell .detail-close-btn { width: 32px; height: 32px; flex-basis: 32px; } .station-navigation-shell .detail-navigate-btn svg { width: 15px; height: 15px; } .station-navigation-shell .sidebar-operations { gap: 8px; } .station-navigation-shell .sidebar-card { padding: 10px 11px; border-radius: 14px; } .station-navigation-shell .status-glass-grid3 { gap: 5px; margin-bottom: 7px; } .station-navigation-shell .glass-cell { padding: 6px; } .station-navigation-shell .rank-glass-row { min-height: 42px; padding: 7px 8px; } .station-navigation-shell .r-value-stack { flex-direction: column; align-items: flex-end; gap: 3px; } .station-navigation-shell .station-list-price { font-size: 8px; } } @media (max-width: 390px) { .station-navigation-shell .header-left { width: calc(100% - 76px); } .station-navigation-shell .brand-block { flex-basis: 104px; min-width: 88px; } .station-navigation-shell .brand-logo-svg { max-width: 104px; } .station-navigation-shell .cockpit-title { font-size: 13px; } .station-navigation-shell .brand-divider { margin-left: -2px; } }