/* Each desktop column flows independently; no empty row below the shorter card. */
:root body.observatory-interface .ob-flow-upgrade.ob-reading-upgrade.ob-design-system.ob-gis-upgrade .ob-workspace-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, 1fr);
    grid-template-areas: none;
    align-items: start;
    gap: 12px;
    margin: 0 0 12px;
}
.ob-workspace-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ob-workspace-column > :is(section,aside) { width: 100%; min-width: 0; margin: 0; }
:root body.observatory-interface .ob-flow-upgrade .analysis-trend { padding: 14px; }
:root body.observatory-interface .ob-flow-upgrade .analysis-heading { gap: 10px; flex-wrap: wrap; }
:root body.observatory-interface .ob-flow-upgrade .analysis-heading h2 { font-size: 20px; line-height: 1.45; }
:root body.observatory-interface .ob-flow-upgrade .analysis-trend .chart { margin-top: 10px; }
.ob-context-overview { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ob-context-title { min-width: 0; }
:root body.observatory-interface .ob-flow-upgrade .ob-context-title h2 { font-size: 20px; margin: 6px 0; }
:root body.observatory-interface .ob-flow-upgrade .ob-context-title p { font-size: 12px; line-height: 1.6; margin: 0; }
:root body.observatory-interface .ob-flow-upgrade.ob-reading-upgrade.ob-design-system.ob-gis-upgrade .ob-data-coverage { flex-shrink: 0; display: block; text-align: right; margin: 0; }
:root body.observatory-interface .ob-flow-upgrade .ob-data-coverage > span { display: block; font-size: 11px; line-height: 1.5; }
.ob-context-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 10px 0 4px; }
:root body.observatory-interface .ob-flow-upgrade.ob-reading-upgrade.ob-design-system.ob-gis-upgrade .ob-context-facts .context-row { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 5px; padding: 11px 12px; border: 1px solid #dce5f4; border-radius: 9px; background: #ffffffa8; min-width: 0; }
:root body.observatory-interface .ob-flow-upgrade .ob-context-facts .context-row :is(span,strong) { display: block; max-width: none; text-align: left; margin: 0; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
:root body.observatory-interface .ob-flow-upgrade .ob-context-facts .context-row strong { font-size: 15px; font-weight: 650; color: #254b7d; font-variant-numeric: tabular-nums; }

/* Clear map hierarchy: geography, station source, then water alert severity. */
:root body.observatory-interface .gis-beacon-map.water-alert-map { padding: 12px; }
:root body.observatory-interface .gis-beacon-map.water-alert-map .river-header h3 { font-size: 21px; }
:root body.observatory-interface .gis-beacon-map.water-alert-map .river-header :is(p,.river-instruction) { font-size: 12px; }
:root body.observatory-interface .gis-beacon-map.water-alert-map .river-canvas { height: 480px; border-color: #d7e3f4; border-radius: 10px; }
:root body.observatory-interface .gis-beacon-map.water-alert-map #geographic-map { height: 480px !important; background: #e8f2fa; }
:root body.observatory-interface .gis-beacon-map.water-alert-map .map-situation {
    background: linear-gradient(105deg,#f0f5ff,#f9fbff);
    color: #1c365d;
    border: 1px solid #dbe5f4;
    border-left: 3px solid var(--point-color);
    flex-wrap: wrap;
    padding: 9px 10px;
    gap: 8px;
}
:root body.observatory-interface .gis-beacon-map.water-alert-map .map-situation > div:first-of-type { flex: 1; min-width: 180px; }
:root body.observatory-interface .gis-beacon-map.water-alert-map .map-situation strong { font-size: 14px; }
:root body.observatory-interface .gis-beacon-map.water-alert-map .map-situation p { color: #617594; font-size: 12px; }
:root body.observatory-interface .gis-beacon-map.water-alert-map .map-mode { display: none; }
.gis-status-counts { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.gis-status-counts > span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid color-mix(in srgb,var(--count-color) 24%,white); background: white; padding: 4px 7px; border-radius: 7px; color: var(--count-color); font-size: 11px; white-space: nowrap; }
.gis-status-counts i { width: 6px; height: 6px; border-radius: 50%; background: var(--count-color); }
.gis-status-counts b { font-size: 14px; }
:root body.observatory-interface .gis-beacon-map .gis-layer-toolbar > span { font-size: 11px; }
:root body.observatory-interface .gis-beacon-map .map-floating-tools button { display: inline-flex; align-items: center; gap: 6px; color: #245eac; font-size: 12px; border-color: #cfddf0; border-radius: 8px; }
.gis-beacon-map .map-floating-tools svg { width: 17px; height: 17px; }
:root body.observatory-interface .gis-beacon-map .map-compass { border-radius: 9px; color: #225ea8; }
:root body.observatory-interface .gis-beacon-map .gis-location-bar { padding: 9px 10px; margin-top: 8px; }
:root body.observatory-interface .gis-beacon-map .map-level-legend { padding: 9px 0; gap: 6px 11px; }
:root body.observatory-interface .gis-beacon-map .map-level-legend > span { font-size: 11px; }
:root body.observatory-interface .gis-beacon-map .river-footer { padding: 8px 0 6px; flex-wrap: wrap; gap: 8px; }
:root body.observatory-interface .gis-beacon-map .gis-map-notes { padding-top: 6px; }

/* The geographic anchor is fixed. Only rings and the small status badge animate. */
:root body.observatory-interface .gis-beacon-map .alert-map-pin.gis-beacon {
    position: relative;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    outline: none;
    color: var(--point-color);
    --beacon-duration: 3.2s;
}
:root body.observatory-interface .gis-beacon-map .gis-beacon svg { animation: none; }
:root body.observatory-interface .gis-beacon-map .gis-beacon > .beacon-core {
    position: absolute;
    inset: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: white;
    border: 2px solid var(--point-color);
    color: var(--point-color);
    border-radius: 14px;
    box-shadow: 0 4px 14px #20365430,0 0 0 3px #ffffffc9;
}
:root body.observatory-interface .gis-beacon-map .gis-beacon.measured > .beacon-core { background: var(--point-color); color: white; border-color: white; }
:root body.observatory-interface .gis-beacon-map .gis-beacon.estimated > .beacon-core { border-style: dashed; border-radius: 12px; }
:root body.observatory-interface .gis-beacon-map .gis-beacon.selected > .beacon-core { box-shadow: 0 0 0 3px #fff,0 0 0 5px #2563eb,0 5px 16px #16428535; }
:root body.observatory-interface .gis-beacon-map .gis-beacon > .beacon-core svg { width: 27px; height: 27px; }
.gis-beacon .beacon-status { position: absolute; right: -7px; top: -7px; display: grid; place-items: center; width: 23px; height: 23px; background: var(--point-color); color: white; border: 2px solid white; border-radius: 50%; box-shadow: 0 2px 6px #18314d20; }
:root body.observatory-interface .gis-beacon-map .gis-beacon .beacon-status svg { width: 14px; height: 14px; }
.gis-beacon .beacon-wave { position: absolute; inset: -4px; border: 2px solid var(--point-color); border-radius: 50%; pointer-events: none; animation: gis-beacon-ripple var(--beacon-duration) ease-out infinite; }
.gis-beacon .wave-second { animation-delay: calc(var(--beacon-duration) / -2); }
.gis-beacon[data-alert-level="2"] { --beacon-duration: 2.6s !important; }
.gis-beacon[data-alert-level="3"] { --beacon-duration: 2.1s !important; }
.gis-beacon[data-alert-level="4"] { --beacon-duration: 1.7s !important; }
.gis-beacon:is([data-alert-level="3"],[data-alert-level="4"]) .beacon-status { animation: gis-beacon-alert 1.4s ease-in-out infinite; }
@keyframes gis-beacon-ripple { 0% { transform: scale(.9); opacity: .65; } 85%,100% { transform: scale(1.85); opacity: 0; } }
@keyframes gis-beacon-alert { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
:root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label {
    width: 108px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb,var(--point-color) 35%,white);
    border-left: 3px solid var(--point-color);
    border-radius: 8px;
    background: #fffffffa;
    box-shadow: 0 4px 14px #14325a20;
    bottom: 56px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.45;
}
:root body.observatory-interface .gis-beacon-map .gis-beacon.label-below .map-pin-label { top: 56px; bottom: auto; }
:root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label:after { height: 13px; left: 50%; }
:root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label[data-label-side="above"]:after { left: var(--leader-x); height: var(--leader-length); top: 100%; bottom: auto; }
:root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label[data-label-side="below"]:after { left: var(--leader-x); height: var(--leader-length); bottom: 100%; top: auto; }
:root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label[data-label-side="left"]:after { width: 13px; height: 1px; left: 100%; top: 50%; bottom: auto; }
:root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label[data-label-side="right"]:after { width: 13px; height: 1px; left: -14px; top: 50%; bottom: auto; }
:root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label > strong { font-size: 13px; color: #1e3655; }
:root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label > small { font-size: 11px; margin: 2px 0; }
:root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label > span { display: block; font-size: 9px; color: #687b94; }
.gis-beacon-map.labels-hidden .gis-beacon .map-pin-label { display: none; }
:root body.observatory-interface .gis-beacon-map.expanded .river-canvas,
:root body.observatory-interface .gis-beacon-map.expanded #geographic-map { height: max(480px,calc(100dvh - 310px)) !important; }

@media (max-width: 1200px) and (min-width: 901px) {
    :root body.observatory-interface .ob-flow-upgrade.ob-reading-upgrade.ob-design-system.ob-gis-upgrade .ob-workspace-columns { grid-template-columns: minmax(0,1fr) minmax(400px,1fr); }
}
@media (max-width: 900px) {
    :root body.observatory-interface .ob-flow-upgrade.ob-reading-upgrade.ob-design-system.ob-gis-upgrade .ob-workspace-columns { grid-template-columns: minmax(0,1fr); grid-template-areas: "map" "readings" "trend" "context"; }
    .ob-workspace-column { display: contents; }
    .ob-workspace-columns #ob-map { grid-area: map; }
    .ob-workspace-columns .station-instrument { grid-area: readings; }
    .ob-workspace-columns .analysis-trend { grid-area: trend; }
    .ob-workspace-columns .data-context { grid-area: context; }
}
@media (max-width: 600px) {
    .ob-context-overview { gap: 10px; }
    .ob-context-facts { grid-template-columns: minmax(0,1fr); gap: 5px; }
    :root body.observatory-interface .ob-flow-upgrade.ob-reading-upgrade.ob-design-system.ob-gis-upgrade .ob-context-facts .context-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 12px; padding: 10px 12px; }
    :root body.observatory-interface .ob-flow-upgrade .ob-context-facts .context-row strong { font-size: 14px; }
    :root body.observatory-interface .gis-beacon-map.water-alert-map .river-canvas,
    :root body.observatory-interface .gis-beacon-map.water-alert-map #geographic-map { height: 390px !important; }
    :root body.observatory-interface .gis-beacon-map.water-alert-map .map-situation > div:first-of-type { min-width: 150px; }
    .gis-status-counts { padding-left: 38px; width: 100%; }
    :root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label { width: 84px; padding: 5px 6px; }
    :root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label > strong { font-size: 12px; }
    :root body.observatory-interface .gis-beacon-map .gis-beacon .map-pin-label > span { display: none; }
    :root body.observatory-interface .gis-beacon-map .gis-view-coordinate { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .gis-beacon .beacon-wave { animation: none; opacity: .22; }
    .gis-beacon .wave-second { display: none; }
    .gis-beacon .beacon-status { animation: none !important; }
}