/* One reserved reading rail. Its cards never cover the Leaflet viewport. */
.map-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
}
.map-viewport {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
#map-readout-dock {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #13212c;
    border-left: 1px solid #2c3d4a;
    z-index: 900;
}
.readout-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    flex-shrink: 0;
    min-height: 42px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid #2c3d4a;
    border-radius: 0;
    background: #13212c;
    color: #dce6ee;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}
.readout-toggle:hover { background: #1d303e; }
.readout-chevron { font-size: 20px; line-height: 14px; transform: rotate(180deg); color: #afc1ce; }
#map-readout-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #415563 transparent;
}
#map-readout-dock .map-card {
    position: relative;
    inset: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 12px 16px;
    background: #13212c;
    border: 0;
    border-bottom: 1px solid #2c3d4a;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}
#map-readout-dock .legend-heading { margin-bottom: 10px; }
#map-readout-dock .legend-heading strong { font: 600 13px Inter, sans-serif; letter-spacing: 0; }
#map-readout-dock .legend-heading > span { font-size: 12px; color: #afc1ce; }
#map-readout-dock .legend-bar { height: 6px; }
#map-readout-dock .legend-labels { font-size: 11px; color: #afc1ce; }
#map-readout-dock .wave-key { margin-top: 10px; padding-top: 8px; font: 12px Inter, sans-serif; color: #afc1ce; }
#tsunami-legend h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #dce6ee; }
#map-readout-dock #tsunami-key,
#map-readout-dock #wave-key {
    position: static;
    inset: auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    max-width: none;
    font: 12px/1.5 Inter, 'PingFang SC', sans-serif;
    color: #afc1ce;
}
#map-readout-dock #tsunami-key {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
#tsunami-key::before { content: ''; width: 22px; height: 2px; background: #a8cfdd; flex-shrink: 0; }
#map-readout-dock #wave-key strong { font-size: 12px; font-weight: 400; color: #afc1ce; }
#map-readout-dock .wave-marks { font-size: 11px; }
#map-readout-dock .coast-title { margin-top: 12px; font-size: 12px; }
#map-readout-dock .coast-key { gap: 12px; font-size: 12px; flex-wrap: wrap; }
#map-readout-dock #live-widget {
    margin: 10px 12px;
    padding: 10px 10px 10px 15px;
    width: calc(100% - 24px);
    background: linear-gradient(115deg, rgba(var(--live-rgb), .09), transparent 72%), #10202c;
    border: 1px solid rgba(var(--live-rgb), .35);
    box-shadow: inset 0 0 12px rgba(var(--live-rgb), .08);
}
#map-readout-dock .live-val,
#map-readout-dock .live-int-box { font-size: 32px; line-height: 40px; }
#map-readout-dock .live-value-line, #map-readout-dock .live-int-box { height: 40px; }
#map-readout-dock .live-stat-container { margin-top: 8px; }
#map-readout-dock .live-stat { gap: 3px; }
#map-readout-dock .live-micro { height: 24px; }
#map-readout-dock .live-label { font-size: 12px; white-space: normal; }
#map-readout-dock .live-qualifier { margin-top: auto; font-size: 11px; white-space: normal; }
#map-readout-dock #station-panel {
    position: relative;
    inset: auto;
    width: auto;
    max-height: none;
    margin: 0;
    padding: 16px;
    overflow: visible;
    background: #182a37;
    border: 0;
    box-shadow: none;
}
#map-readout-dock .station-grid { gap: 0 12px; }
#map-readout-dock .station-item span { font-size: 12px; }
#map-readout-dock .station-item b { font-size: 12px; }
#map-readout-dock .map-credit {
    position: static;
    display: block;
    margin-top: auto;
    padding: 12px 16px;
    font: 10px/1.6 Inter, 'PingFang SC', sans-serif;
    letter-spacing: 0;
    color: #a1b4c2;
}
.map-stage.readouts-collapsed { grid-template-columns: minmax(0, 1fr); }
.readouts-collapsed #map-readout-dock {
    position: absolute;
    top: 14px;
    right: 14px;
    width: auto;
    border: 1px solid #2c3d4a;
    border-radius: 8px;
    overflow: hidden;
}
.readouts-collapsed .readout-toggle { border: 0; min-height: 38px; padding: 8px 12px; }
.readouts-collapsed .readout-chevron { transform: none; }
.readouts-collapsed .map-credit { display: none !important; }

/* Narrow map workspaces (including tablets with the inspector open) use a
   bottom drawer. Opening it reserves height instead of covering station values. */
.map-stage.readouts-compact { display: flex; flex-direction: column; }
.readouts-compact .map-viewport { flex: 1; }
.readouts-compact #map-readout-dock, .readouts-compact.readouts-collapsed #map-readout-dock {
    position: relative;
    inset: auto;
    width: 100%;
    max-height: 50%;
    flex-shrink: 0;
    border: 0;
    border-top: 1px solid #2c3d4a;
    border-radius: 0;
}
.readouts-compact .readout-toggle { min-height: 36px; padding: 8px 16px; }
.readouts-compact #map-readout-dock .map-card { padding: 12px 16px; }
.readouts-compact #map-readout-dock #live-widget { margin: 12px 16px; width: calc(100% - 32px); }
.readouts-compact #map-readout-dock .live-val, .readouts-compact #map-readout-dock .live-int-box { font-size: 36px; }
.readouts-compact #map-readout-dock .map-credit { display: none; }
body.station-open #map-readout-dock #legend-panel { display: block; }

/* Compact, self-explanatory tsunami key; credit belongs to the map viewport. */
#tsunami-legend .tsunami-legend-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
#tsunami-legend h2{margin:0;font-size:15px;font-weight:700;color:#e6edf3}
.tsunami-legend-info{position:relative;font-size:13px;color:#aabcc9}
.tsunami-legend-info summary{cursor:pointer;list-style:none;padding:2px 5px}
.tsunami-legend-info summary::-webkit-details-marker{display:none}
.tsunami-legend-info p{position:absolute;right:0;top:20px;width:228px;margin:0;padding:12px;background:#213442;border:1px solid #456071;border-radius:6px;color:#dce6ee;line-height:1.6;z-index:5}
#map-readout-dock .coast-title{margin:0 0 12px;font-size:12px;color:#aebec9}
#map-readout-dock .coast-key{display:grid;gap:10px;margin:0}
.coast-legend-row{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;font-size:13px;color:#e6edf3}
.coast-legend-row i{height:4px;border-radius:4px}
.coast-legend-row b{font-weight:400;font-variant-numeric:tabular-nums;color:#c7d5df;font-size:12px}
#map-readout-dock #wave-key .offshore-legend-title{display:block;margin-top:16px;font-size:12px;color:#aebec9}
#map-readout-dock .wave-scale[data-mode=peak]{height:6px;border-radius:3px;background:linear-gradient(90deg,#449bb5 0 25%,var(--tsunami-advisory) 25% 50%,var(--tsunami-warning) 50% 75%,var(--tsunami-major) 75% 100%)}
.map-viewport .map-credit{display:block!important;position:absolute;right:12px;bottom:8px;font:10px/1.4 Inter,'PingFang SC',sans-serif;color:#9aafbd;letter-spacing:0;pointer-events:none;text-shadow:0 1px 3px #06111c;z-index:850}
.map-credit-brand{color:#7f94a3}
#map-readout-dock .coast-legend-row span::before{content:none}
.map-stage:not(.readouts-compact) #map-readout-dock{align-self:start;max-height:100%;border-bottom:1px solid #2c3d4a}