/* Scoped to the thematic explorer so other map panels keep their styling. */
#atmoslayer-panel .comparison-raster-status { padding: 0 12px 12px; font-size: 11px; line-height: 1.6; color: #607483; }
#atmoslayer-panel .comparison-raster-status:empty { display: none; }
.map-wrap #btn-atmoslayer {
    width: auto;
    min-width: 180px;
    padding: 0 14px;
    gap: 9px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    white-space: nowrap;
    color: #263f50;
}
#btn-atmoslayer > .ti { font-size: 19px; color: #247c98; }
#btn-atmoslayer .thematic-trigger-chevron { margin-left: auto; font-size: 20px; font-weight: 400; color: #8397a5; }
#atmoslayer-panel {
    width: 360px;
    min-width: 0;
    max-width: calc(100vw - 40px);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 20px;
    background: #f8fafcf5;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px #12334926, 0 2px 8px #1233490d;
    overflow: hidden;
}
#atmoslayer-panel .panel-header {
    padding: 20px;
    margin: 0;
    background: linear-gradient(125deg, #fff, #eef7fa);
    border-bottom: 1px solid #e2eaf0;
    cursor: default;
}
#atmoslayer-panel .thematic-heading { display: flex; align-items: center; gap: 12px; }
#atmoslayer-panel .thematic-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #006994; color: white; font-size: 22px; box-shadow: 0 4px 10px #00699424; }
#atmoslayer-panel .panel-title { font-size: 15px; font-weight: 700; letter-spacing: -.2px; text-transform: none; color: #183749; }
#atmoslayer-panel .thematic-heading p { margin: 3px 0 0; color: #758693; font-size: 11px; }
#atmoslayer-panel .panel-close { width: 30px; height: 30px; border-radius: 9px; border: 1px solid #dce7ed; background: #ffffffb3; color: #627888; font-size: 16px; }
#atmoslayer-panel .panel-close:hover { background: #e7f1f6; color: #006994; border-color: #bed6e2; }
#atmoslayer-panel .layer-panel { padding: 14px; max-height: min(68vh, calc(100dvh - 240px)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c9d8e1 transparent; }
#atmoslayer-panel .layer-group { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
#atmoslayer-panel .layer-group > details { margin-bottom: 8px; border: 1px solid #e0e8ee; border-radius: 12px; background: white; overflow: hidden; }
#atmoslayer-panel .layer-group > details:last-child { margin-bottom: 0; }
#atmoslayer-panel details > summary { position: relative; padding: 14px 32px 14px 12px; gap: 10px; border: 0; border-radius: 0; background: transparent; color: #263f50; font-size: 12px; font-weight: 600; line-height: 1.5; }
#atmoslayer-panel details > summary::before { content: ''; position: absolute; right: 16px; width: 6px; height: 6px; border-right: 1.5px solid #8397a5; border-bottom: 1.5px solid #8397a5; transform: rotate(-45deg); }
#atmoslayer-panel details[open] > summary::before { transform: rotate(45deg); }
#atmoslayer-panel summary::-webkit-details-marker { display: none; }
#atmoslayer-panel summary > .ti { display: grid; place-items: center; flex: 0 0 30px; height: 30px; font-size: 18px; color: #247c98; border-radius: 9px; background: #edf5f8; }
#atmoslayer-panel details > summary:hover { background: #f5f9fb; }
#atmoslayer-panel details[open] > summary { color: #006994; background: #f3f8fa; }
#atmoslayer-panel details details { margin: 4px 10px 8px; border-left: 1px solid #e3edf2; }
#atmoslayer-panel details details > summary { padding: 9px 25px 9px 10px; font-size: 11px; }
#atmoslayer-panel details details > summary > .ti { flex-basis: 24px; height: 24px; font-size: 15px; background: transparent; }
#atmoslayer-panel .variable { margin: 0; padding: 8px 10px 12px; }
#atmoslayer-panel .month-grid { margin: 0; gap: 6px; }
#atmoslayer-panel .month-grid label { gap: 8px; min-height: 38px; padding: 8px; border: 1px solid transparent; border-radius: 8px; color: #607483; font-size: 11px; line-height: 1.4; cursor: pointer; }
#atmoslayer-panel .month-grid label:hover { background: #f2f7fa; }
#atmoslayer-panel .month-grid label:has(input:checked) { color: #006994; background: #eaf5fa; border-color: #c7e1ed; }
#atmoslayer-panel input[type="checkbox"] { flex-shrink: 0; width: 15px; height: 15px; margin: 0; accent-color: #006994; cursor: pointer; }
#atmoslayer-panel summary:focus-visible, #atmoslayer-panel button:focus-visible { outline: 2px solid #1685b0; outline-offset: -3px; }
@media (max-width: 480px) { #atmoslayer-panel { left: 10px; max-width: calc(100vw - 20px); } }
@media (prefers-reduced-motion: reduce) { #atmoslayer-panel * { transition: none; } }