/* ══════════════════════════════════════════════════════════════════════════ Map Type Picker — prompt-box control + selection modal. Self-contained tokens: the modal is portalled to , and on the landing page the palette lives on .landing-hero-bg (not :root), so nothing here may depend on inherited custom properties. ══════════════════════════════════════════════════════════════════════════ */ /* ── Toolbar trigger ────────────────────────────────────────────────────── Inherits .aspect-ratio-btn from the page it sits on; only the "Map" label, truncation and width behaviour live here. Width is deliberately NOT capped in layouts whose parent already stretches the controls to equal widths (detail modal always, floating prompt + landing on small screens) — a cap there would leave one odd-sized button in the row. ───────────────────────────────────────────────────────────────────────── */ .map-type-btn { max-width: 150px; overflow: hidden; } .map-type-btn .mtp-btn-label { flex-shrink: 0; color: var(--gray-500, #6C7688); font-weight: 500; } .map-type-btn .ratio-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-dropdowns-container .map-type-btn { max-width: none; } /* Floating prompt on mobile: below 640px project.css stretches every control to width:100% and four of them share the row — so drop the word "Map" (the icon carries it) and release the cap so this button matches its siblings. Above that the toolbar is content-width and the label stays. */ @media (max-width: 640px) { .prompt-toolbar-left .map-type-btn { max-width: none; } .prompt-toolbar-left .map-type-btn .mtp-btn-label { display: none; } } /* Landing hero on mobile: controls stack full-width, so there is room to keep the label — only the cap has to go. */ @media (max-width: 640px) { .prompt-actions .map-type-btn { max-width: none; } } .mtp-overlay { --mtp-white: #FFFFFF; --mtp-gray-50: #FAFBFC; --mtp-gray-100: #F5F7FA; --mtp-gray-200: #E8ECF0; --mtp-gray-300: #D7DCE3; --mtp-gray-400: #A0A8B5; --mtp-gray-500: #6C7688; --mtp-gray-700: #2D3748; --mtp-gray-900: #0F1419; --mtp-accent: #3B82F6; --mtp-accent-soft: rgba(59, 130, 246, 0.12); position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(15, 20, 25, 0.55); backdrop-filter: blur(3px); } .mtp-overlay.mtp-open { display: flex; } .mtp-panel { width: 100%; max-width: 560px; max-height: min(86vh, 720px); max-height: min(86dvh, 720px); display: flex; flex-direction: column; background: var(--mtp-white); border: 1px solid var(--mtp-gray-200); border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22); overflow: hidden; animation: mtpPanelIn 180ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes mtpPanelIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } /* ── Header ── */ .mtp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem 1rem; } .mtp-title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--mtp-gray-900); } .mtp-subtitle { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--mtp-gray-500); } .mtp-close { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mtp-gray-200); border-radius: 10px; background: var(--mtp-white); color: var(--mtp-gray-500); cursor: pointer; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .mtp-close:hover { background: var(--mtp-gray-100); color: var(--mtp-gray-900); } /* ── Tile grid ── */ .mtp-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .mtp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; } .mtp-tile { display: flex; flex-direction: column; gap: 0.4rem; padding: 0; border: none; background: transparent; cursor: pointer; text-align: center; } .mtp-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; border: 2px solid var(--mtp-gray-200); overflow: hidden; background: var(--mtp-gray-100); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .mtp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mtp-tile:hover .mtp-thumb { border-color: var(--mtp-gray-300); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .mtp-tile.mtp-selected .mtp-thumb { border-color: var(--mtp-accent); box-shadow: 0 0 0 3px var(--mtp-accent-soft); } .mtp-check { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; display: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--mtp-accent); color: #fff; font-size: 0.6875rem; line-height: 1; } .mtp-tile.mtp-selected .mtp-check { display: inline-flex; } /* Style names are MapTiler's own and include long unbreakable tokens ("OpenStreetMap"). At the default root size they fit every column, but a reader running the browser at a larger font would have them spill out of the tile — break inside the word instead. */ .mtp-name { font-size: 0.75rem; font-weight: 500; color: var(--mtp-gray-700); line-height: 1.2; overflow-wrap: break-word; min-width: 0; } .mtp-tile.mtp-selected .mtp-name { color: var(--mtp-accent); font-weight: 600; } /* Auto tile — no thumbnail to show, so it gets a glyph plate. */ .mtp-auto-plate { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%); color: var(--mtp-accent); font-size: 1.25rem; } .mtp-auto-plate span { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mtp-gray-500); } /* ── Hover preview ── */ .mtp-preview { position: fixed; z-index: 10060; display: none; width: 232px; padding: 0.5rem; background: var(--mtp-white, #fff); border: 1px solid #E8ECF0; border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24); pointer-events: none; } .mtp-preview.mtp-preview-visible { display: block; } .mtp-preview img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; } .mtp-preview-caption { margin-top: 0.4rem; font-size: 0.75rem; font-weight: 600; color: #2D3748; text-align: center; } /* ── Responsive ────────────────────────────────────────────────────────── The hover preview is gated on the POINTER, not the viewport: a narrow desktop window still has a mouse and should keep it, while a large tablet should not. Touch users get the tile itself as the preview. ───────────────────────────────────────────────────────────────────────── */ @media (hover: none), (pointer: coarse) { .mtp-preview { display: none !important; } } /* Phones — bottom sheet: full width, anchored to the bottom edge, thumb-reachable. */ @media (max-width: 640px) { .mtp-overlay { align-items: flex-end; padding: 0; } .mtp-panel { max-width: none; max-height: 88vh; max-height: 88dvh; border-radius: 20px 20px 0 0; border-bottom: none; animation: mtpSheetIn 200ms cubic-bezier(0.4, 0, 0.2, 1); } .mtp-header { padding: 1rem 1.125rem 0.75rem; } .mtp-body { padding: 1rem 1.125rem calc(1.25rem + env(safe-area-inset-bottom)); } .mtp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .mtp-preview { display: none !important; } } @keyframes mtpSheetIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* Very narrow phones — two columns keep the names readable. */ @media (max-width: 360px) { .mtp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Short viewports (landscape phones): trade panel chrome for grid height. */ @media (max-height: 480px) { .mtp-panel { max-height: 94vh; max-height: 94dvh; } .mtp-subtitle { display: none; } } /* Large desktops — a wider panel keeps tiles from getting oversized at 4 across. */ @media (min-width: 1280px) { .mtp-panel { max-width: 620px; } } @media (prefers-reduced-motion: reduce) { .mtp-panel { animation: none; } .mtp-tile, .mtp-thumb, .mtp-close { transition: none; } .mtp-tile:hover .mtp-thumb { transform: none; } }