/* My Snow Life — camada de marca do Mapa (carrega depois de brand.css). Guia: Branding/BRAND.md */
:root {
    --font-display: 'Archivo', sans-serif;
    --font-body: 'Archivo', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --accent-primary: #3FA9F5;
    --accent-secondary: #3FA9F5;
    --text-secondary: rgba(244, 247, 250, 0.62);
    --text-muted: rgba(244, 247, 250, 0.42);
    --msl-signal: #FF5B2E;
    --msl-glacier: #3FA9F5;
}
h1, h2, h3, .popup-card-header h2, .rp-head h2, .map-title { font-stretch: 112%; }
.map-title span { background: none; -webkit-text-fill-color: var(--msl-signal); color: var(--msl-signal); }
.map-logo img { height: 30px; }
.map-logo img.msl-simbolo { height: 30px; width: 30px; }
/* dados em Plex Mono, tabulares */
.rp-stat strong, .rp-day strong, .rp-info strong, .rp-weather td, .tooltip-line2, .snow-total-summary strong {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.rp-label, .card-title { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.14em; }
/* botões: Glacier = previsão e 3D (info); Signal = ação principal (login/gravar) */
.login-btn { background: var(--msl-signal); border-color: var(--msl-signal); color: #0C1A2A; border-radius: 14px; }
.login-btn:hover { background: #ff7249; border-color: #ff7249; color: #0C1A2A; }
.forecast-button { border-radius: 14px; font-stretch: 110%; color: #0C1A2A !important; }
.forecast-button.btn-3d { background: transparent; color: #F4F7FA !important; border: 1.5px solid #3A5068; box-shadow: none; }
.forecast-button.btn-3d:hover { border-color: var(--msl-glacier); box-shadow: none; }
/* selo 3D: chip Glacier com texto Ink */
.badge-3d, .leaflet-container a.badge-3d, a.badge-3d { background: var(--msl-glacier); color: #0C1A2A; border-radius: 6px; font-stretch: 110%; }
.leaflet-container a.badge-3d:hover, a.badge-3d:hover { color: #0C1A2A; }
.pin-only3d span { background: var(--msl-glacier); color: #0C1A2A; border-radius: 6px; border: 2px solid #F4F7FA; }
.leaflet-popup-content a { color: var(--msl-glacier); }
.badge-visited { color: var(--msl-signal); text-shadow: none; }
.badge-powder { color: var(--msl-glacier); }
/* balão do resort */
.custom-resort-tooltip-modern { background: rgba(22, 41, 61, 0.96); border-radius: 12px; box-shadow: 0 8px 24px rgba(12, 26, 42, .25); }
.custom-resort-tooltip-modern:before { border-top-color: rgba(22, 41, 61, 0.96); }
/* pin: sombra da marca */
.leaflet-marker-icon.msl-pin { filter: drop-shadow(0 3px 4px rgba(12, 26, 42, .25)); }
.msl-voce { position: relative; }
.msl-voce::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #FF5B2E; opacity: .35; animation: msl-halo 2s ease-out infinite; }
@keyframes msl-halo { from { transform: scale(1); opacity: .35; } to { transform: scale(1.6); opacity: 0; } }
.msl-voce img { position: relative; width: 100%; height: 100%; }

/* menu My Snow Life (gaveta do ☰) */
.msl-drawer { position: fixed; top: 0; right: -320px; width: 300px; height: 100dvh; background: #16293D; border-left: 1px solid #3A5068;
    box-shadow: -12px 0 40px rgba(12, 26, 42, .5); padding: 76px 1.25rem 2rem; z-index: 3000; display: flex; flex-direction: column; gap: 4px;
    transition: right .3s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; }
.msl-drawer.open { right: 0; }
.msl-drawer a { display: block; padding: .8rem 1rem; border-radius: 12px; color: #F4F7FA; text-decoration: none; font-weight: 600; font-stretch: 105%; }
.msl-drawer a:hover, .msl-drawer a.on { background: #22384F; color: #3FA9F5; }
.msl-drawer .msl-sep { height: 1px; background: #3A5068; margin: 10px 0; }
.msl-drawer .msl-partner { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; color: #8FA3B8; padding: 4px 1rem; text-transform: uppercase; }
.msl-drawer .msl-cta { background: #FF5B2E; color: #0C1A2A; text-align: center; font-weight: 700; }
.msl-drawer .msl-cta:hover { background: #ff7249; color: #0C1A2A; }
.msl-scrim { position: fixed; inset: 0; background: rgba(12, 26, 42, .55); z-index: 2999; display: none; }
.msl-scrim.open { display: block; }
.map-menu-btn { display: flex; }

/* abas Forecast · Mapa · 3DMaps (/assets/msl-sys.css) no lugar do título: no tablet a busca encolhe para a barra caber */
@media (min-width: 769px) and (max-width: 1100px) {
    .map-toolbar .search-container { flex: 0 1 200px; min-width: 120px; }
    .map-toolbar #searchResort { width: 100%; }
}

/* iPhone: o Safari dá zoom na página inteira ao focar campo com letra < 16 px, e o zoom fica depois (31/10) */
@media (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { font-size: 16px !important; }
}

/* celular: logado, logo + 4 botões deixavam ~20 px para a busca (31/10). Logo menor e, ao tocar na busca,
   ela ocupa a barra toda até fechar a lista (o resto volta ao sair do campo) */
@media (max-width: 768px) {
    .msl-bar .msl-logo img { height: 24px; }
    .msl-bar .search-container { min-width: 40px; }
    #searchResort { box-sizing: border-box; min-width: 0; padding-right: 10px; }
    .msl-bar:has(.search-container:focus-within) > :not(.search-container),
    .msl-bar:has(.autocomplete-items:not(:empty)) > :not(.search-container) { display: none; }
    .msl-bar:has(.search-container:focus-within) .search-container,
    .msl-bar:has(.autocomplete-items:not(:empty)) .search-container { flex: 1; }
}