/* Swipe compare (ui/comparePanel.js): panel controls + map overlay. */
.compare-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.compare-options { display: flex; flex-direction: column; gap: 8px; }
/* display:flex above would otherwise beat the UA's [hidden] rule, leaving the
   controls open even with compare off. */
.compare-options[hidden] { display: none; }
.compare-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.compare-status { font-size: 12px; opacity: 0.85; min-height: 0; }
.compare-status:empty { display: none; }

/* Match-valid-times checkbox (ui/modelSyncControl.js). .weather-subcontent sets
   display:flex, which would beat the UA [hidden] rule. */
#model-sync-container[hidden] { display: none; }
.model-sync { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* The overlay covers the map but lets clicks through except on the divider. */
.compare-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.compare-overlay[hidden] { display: none; }
.compare-line { position: absolute; pointer-events: auto; cursor: col-resize; background: transparent; }
.compare-overlay[data-orientation="vertical"] .compare-line { top: 0; bottom: 0; width: 44px; margin-left: -22px; }
.compare-overlay[data-orientation="horizontal"] .compare-line { left: 0; right: 0; height: 44px; margin-top: -22px; cursor: row-resize; }
.compare-line::before { content: ""; position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.compare-overlay[data-orientation="vertical"] .compare-line::before { left: 21px; width: 2px; top: 0; bottom: 0; }
.compare-overlay[data-orientation="horizontal"] .compare-line::before { top: 21px; height: 2px; left: 0; right: 0; }
.compare-handle {
    position: absolute; width: 28px; height: 28px; border-radius: 50%;
    background: #fff; border: 2px solid rgba(0, 0, 0, 0.7); box-sizing: border-box;
}
.compare-overlay[data-orientation="vertical"] .compare-handle { left: 8px; top: calc(50% - 14px); }
.compare-overlay[data-orientation="horizontal"] .compare-handle { top: 8px; left: calc(50% - 14px); }
.compare-handle:focus-visible { outline: 3px solid #4da3ff; outline-offset: 2px; }

.compare-chip {
    position: absolute; max-width: 46%; padding: 4px 8px; font-size: 12px; line-height: 1.3;
    color: #fff; background: rgba(15, 20, 30, 0.82); border-radius: 4px; pointer-events: auto;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.compare-overlay[data-orientation="vertical"] .compare-chip-a { top: 8px; left: 8px; }
.compare-overlay[data-orientation="vertical"] .compare-chip-b { top: 8px; right: 8px; }
.compare-overlay[data-orientation="horizontal"] .compare-chip-a { top: 8px; left: 8px; }
.compare-overlay[data-orientation="horizontal"] .compare-chip-b { bottom: 8px; left: 8px; }
.compare-chip-side { font-weight: 700; }
.compare-chip-kind { font-weight: 700; font-size: 10px; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.04em; }
.compare-kind-observed { background: #1f7a4d; }
.compare-kind-model { background: #6b46c1; }
.compare-warning {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    padding: 4px 10px; font-size: 12px; font-weight: 600; color: #1b1300; background: #ffc233;
    border-radius: 4px; pointer-events: none;
}
.compare-warning[hidden] { display: none; }