/* Warning and observed-inundation panels, coordinated with the navy weather UI. */
#alerts-panel,.alerts-panel{scroll-margin-top:20px;border-top:4px solid #164f91;background:linear-gradient(180deg,#f4f9ff 0,white 250px)}
#alerts-panel .sectionhead,.alerts-panel .sectionhead{margin-bottom:18px}
#alerts-panel .controls,.alerts-panel .controls,.alert-controls{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px}
#alerts-scope,#alerts-type{min-width:155px;background:#fff;border-color:#bfd3ea;color:#14395f}
#alerts-notify{border-color:#174f8d;background:#113d70;color:#fff;font-size:12px;font-weight:650;min-height:42px}
#alerts-notify:hover{background:#1b538e;border-color:#4a93d7}
#alerts-notify:disabled{background:#e7edf5;color:#5f7390;border-color:#c9d6e7;cursor:default;opacity:1}
#alerts-summary{margin:18px 0 20px}
#alerts-summary>.note{margin:11px 0 0;color:#526e8e;line-height:1.7}
.alert-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #173f72;border-radius:13px;background:linear-gradient(115deg,#0b2a53,#144a81);box-shadow:0 7px 20px rgba(16,51,91,.1);overflow:hidden}
.alert-metrics>span{display:flex;flex-direction:column;gap:5px;padding:17px 19px;color:#c4ddf6;font-size:11px;font-weight:550;border-right:1px solid rgba(176,211,246,.2);line-height:1.5}
.alert-metrics>span:last-child{border-right:0}
.alert-metrics b{color:white;font-size:31px;font-weight:750;line-height:1.1;letter-spacing:-.8px}
#alerts-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.alert-card{--alert-accent:#287cbf;--alert-soft:#eaf4ff;--alert-text:#235a86;min-width:0;border:1px solid #d3e2f2;border-left:5px solid var(--alert-accent);border-radius:12px;background:linear-gradient(110deg,#fbfdff,white 55%);padding:18px 19px;box-shadow:0 4px 14px rgba(21,60,103,.035);overflow-wrap:anywhere}
.alert-card.alert-high{--alert-accent:#c34252;--alert-soft:#fff0f2;--alert-text:#a52f40}
.alert-card.alert-warning{--alert-accent:#d27724;--alert-soft:#fff1e3;--alert-text:#905017}
.alert-card.alert-watch{--alert-accent:#b58a13;--alert-soft:#fff8df;--alert-text:#7e6111}
.alert-card.alert-info{--alert-accent:#287cbf;--alert-soft:#eaf4ff;--alert-text:#235a86}
.alert-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.alert-card-head .badge{display:inline-flex;line-height:1.4;white-space:normal;border:1px solid #ccdeef;font-size:10px;font-weight:650;background:#eaf3fd;color:#255783}
.alert-card-head .badge:last-child{color:var(--alert-text);background:var(--alert-soft);border-color:transparent;text-transform:capitalize;font-size:10px}
.alert-card h3{font-size:17px;letter-spacing:-.25px;line-height:1.45;margin:7px 0;color:#143a63}
.alert-card p{font-size:12px;line-height:1.75;margin:9px 0;color:#526a85}
.alert-card .alert-scope{font-size:11px;color:#275f95;font-weight:650;margin:7px 0 10px}
.alert-card>small{display:block;border-top:1px solid #e2ebf5;margin-top:13px;padding-top:11px;color:#647d99;font-size:10px;line-height:1.75}
.alert-card .alert-guidance{padding:10px 12px;border-radius:7px;background:#f1f6fc;border:1px solid #e2ecf7;font-size:11px;line-height:1.65;color:#305780;margin:12px 0}
.alert-card>a{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#1a63a6;margin:1px 0 2px}
#alerts-status{margin-top:18px;padding:13px 16px;border:1px solid #d6e4f3;border-radius:10px;background:#f2f7fd}
#alerts-status p{font-size:11px;line-height:1.7;margin:6px 0;color:#58718d}
#alerts-status .feed-error{color:#98502b;border-left:2px solid #d5a377;padding-left:9px}
#alerts-status p:first-child{margin-top:0}
#alerts-status p:last-child{margin-bottom:0}
.observed-panel{margin:18px 0;border:1px solid #c9dced;border-top:3px solid #17528f;border-radius:11px;padding:17px 18px;background:linear-gradient(125deg,#edf6ff,#f8fbff);min-width:0}
.observed-panel h3{font-size:15px;color:#173c65;margin:0 0 10px}
.observed-panel p{font-size:11px;line-height:1.7;margin:9px 0;color:#527191}
.observed-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:12px 0 13px}
.observed-controls>div,.observed-controls>label{display:grid;gap:7px;flex:1 1 190px;min-width:0}
.observed-controls label{font-size:10px;letter-spacing:.8px;color:#496c90}
.observed-controls select{width:100%;min-width:0;max-width:100%;border-color:#bbd2e8;background:white;font-size:12px;padding:10px 11px;color:#1b4878;min-height:40px}
.observed-controls input[type=checkbox]{margin:0;flex-shrink:0}
.observed-controls .checkbox-label{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:0;font-weight:550}
.observed-legend{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:11px 12px;border:1px solid #d4e5f5;border-radius:8px;background:#fff;font-size:11px;color:#3f6386;line-height:1.5}
.observed-legend>span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.observed-legend i,.observed-legend .swatch,.observed-legend .observed-swatch{display:inline-block;width:15px;height:12px;flex:0 0 15px;border-radius:3px;border:1px solid rgba(19,58,98,.24)}
.observed-legend .flood-swatch,.observed-legend .observed-flood{background:#36b9ef;border-color:#156cbb}
.observed-legend .water-swatch,.observed-legend .permanent-water{background:#235399;border-color:#173c73}
.observed-legend .cloud-swatch,.observed-legend .no-observation{background:repeating-linear-gradient(135deg,#f1f5f9 0,#f1f5f9 3px,#c8d3df 4px,#c8d3df 5px);border-color:#a6b9cd}
.observed-status,#observed-status{border-left:3px solid #7aaedf;padding:9px 12px;background:#e6f0fc;border-radius:0 7px 7px 0;color:#466a8e;font-size:11px;line-height:1.75;margin:12px 0 0;overflow-wrap:anywhere}
.observed-status a,#observed-status a{font-weight:650;color:#175da0}
.observed-status small,#observed-status small{color:#5c7b99}
@media(max-width:900px){.alert-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.alert-metrics>span:nth-child(2){border-right:0}.alert-metrics>span:nth-child(-n+2){border-bottom:1px solid rgba(176,211,246,.2)}.alert-metrics>span{padding:16px 18px}#alerts-list{grid-template-columns:1fr}.observed-controls{gap:10px}}
@media(max-width:600px){#alerts-panel .sectionhead,.alerts-panel .sectionhead{align-items:flex-start}.alert-controls,#alerts-panel .controls,.alerts-panel .controls{width:100%;gap:9px}#alerts-scope,#alerts-type{flex:1 1 140px;min-width:0;max-width:100%}#alerts-notify{flex:1 1 100%;width:100%}.alert-metrics>span{padding:14px 13px;font-size:10px}.alert-metrics b{font-size:27px}.alert-card{padding:15px 14px}.alert-card h3{font-size:16px}.alert-card-head{align-items:flex-start;gap:6px}.alert-card-head .badge{font-size:9px}.observed-panel{padding:14px 13px}.observed-controls{align-items:stretch;gap:11px}.observed-controls>div,.observed-controls>label{flex-basis:100%}.observed-legend{gap:9px 13px;font-size:10px;padding:10px}#alerts-status{padding:11px 12px}}
@media print{#alerts-notify{display:none}.alert-card,.observed-panel{break-inside:avoid;box-shadow:none}.alert-metrics{background:white;border-color:#b7c9db}.alert-metrics b,.alert-metrics>span{color:#173d64}.alert-card{background:white}}