/* [coastal] Brevard Coastal Hazards + Space Coast Wind Gusts (staging Oct 25 2026). Own SCW design: navy/teal palette, signal-bar meters. */
.cz-card,.cg-card{--cz-ink:#0b2540;--cz-mut:#5b6670;--cz-line:#d7e2ea;--cz0:#0f9d9a;--cz1:#d9a514;--cz2:#e0592a;--cz3:#a8263e;position:relative;margin:14px 0 18px;padding:18px 20px 14px;border:1px solid var(--cz-line);border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(11,37,64,.07);color:#14181f;min-width:0;overflow:hidden}
.cz-card{border-top:5px solid #0b5cad;background:linear-gradient(180deg,#f2f8fc 0,#fff 120px)}
.cz-card.cz-top-0{border-top-color:var(--cz0)}.cz-card.cz-top-1{border-top-color:var(--cz1)}.cz-card.cz-top-2{border-top-color:var(--cz2)}.cz-card.cz-top-3{border-top-color:var(--cz3)}
.cg-card{border-top:5px solid #3b82c4;background:linear-gradient(180deg,#f2f7fc 0,#fff 120px)}
.cz-sample{margin:-6px 0 12px;padding:8px 12px;border-radius:8px;background:#fff3cd;border:2px dashed #b8860b;color:#5a4300;font-weight:800;font-size:14px;text-align:center;letter-spacing:.02em}
.cz-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px;margin-bottom:12px}
.cz-head h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.15;color:var(--cz-ink)}
.cz-sub{margin:3px 0 0;font-size:13px;color:var(--cz-mut)}
.cz-overall{margin:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.cz-overall span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cz-mut)}
.cz-overall b{font-size:20px;font-weight:800}
.cz-top-0 .cz-overall b{color:var(--cz0)}.cz-top-1 .cz-overall b{color:#a37a00}.cz-top-2 .cz-overall b{color:var(--cz2)}.cz-top-3 .cz-overall b{color:var(--cz3)}
.cz-empty{margin:6px 0;color:var(--cz-mut)}
.cz-alerts{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0}
.cz-alerts li{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;padding:4px 10px;border-radius:6px;font-size:13px;font-weight:700;background:#eef3f8;border:1px solid #cfdbe6;color:var(--cz-ink)}
.cz-alerts li.w{background:#fbeef0;border-color:#e7b3bd;color:#7a1a2e}.cz-alerts li.a{background:#fff3ea;border-color:#f1c3a6;color:#8a3510}
.cz-alerts small{font-weight:500;font-size:12px;opacity:.85}
.cz-rows{list-style:none;margin:0;padding:0;border-top:1px solid #e3eaf0}
.cz-row{display:grid;grid-template-columns:minmax(150px,190px) minmax(150px,210px) minmax(0,1fr);gap:6px 18px;align-items:center;padding:12px 0;border-bottom:1px solid #e3eaf0;min-width:0}
.cz-name{display:flex;align-items:center;gap:10px;min-width:0}
.cz-ic{flex:0 0 auto;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#eef5fc;font-size:19px}
.cz-name h3{margin:0;font-size:16px;font-weight:800;color:var(--cz-ink);line-height:1.2}
.cz-lvl{display:flex;align-items:center;gap:10px;min-width:0}
.cz-meter{display:inline-flex;align-items:flex-end;gap:4px;height:26px;flex:0 0 auto}
.cz-meter i{display:block;width:14px;border-radius:3px;background:#e2e8ee}
.cz-meter .cz-b0{height:8px}.cz-meter .cz-b1{height:14px}.cz-meter .cz-b2{height:20px}.cz-meter .cz-b3{height:26px}
.cz-meter.lv0 i.on{background:var(--cz0)}.cz-meter.lv1 i.on{background:var(--cz1)}.cz-meter.lv2 i.on{background:var(--cz2)}.cz-meter.lv3 i.on{background:var(--cz3)}
.cz-word{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap}
.cz-row.lv0 .cz-word{background:#e6f6f5;color:#0a6f6c}.cz-row.lv1 .cz-word{background:#fdf5d8;color:#7a5c00}.cz-row.lv2 .cz-word{background:#fdebe3;color:#9a3a14}.cz-row.lv3 .cz-word{background:var(--cz3);color:#fff}.cz-row.cz-na .cz-word{background:#eef1f4;color:#6b7480}
.cz-val{min-width:0}
.cz-v{margin:0;font-size:17px;font-weight:800;color:#14181f;line-height:1.3;overflow-wrap:anywhere}
.cz-d{margin:3px 0 0;padding:0;list-style:none;font-size:13.5px;line-height:1.45;color:#3d4652}
.cz-d li{overflow-wrap:anywhere}
.cz-src{margin:4px 0 0;font-size:12px;color:var(--cz-mut);overflow-wrap:anywhere}
.cz-src a{color:#0b5cad}
.cz-basis{display:inline-block;margin-right:4px;padding:1px 7px;border-radius:4px;background:#eef3f8;font-weight:700;color:#3d5168}
.cz-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:13.5px;color:#3d4652}
.cz-facts b{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cz-mut);margin-right:4px}
.cz-fsrc{font-size:12px;color:var(--cz-mut)}
.cz-how{margin:12px 0 0;font-size:13.5px;color:#3d4652}
.cz-how summary{cursor:pointer;font-weight:700;color:#0b5cad}
.cz-how ul{margin:8px 0 6px;padding-left:20px}.cz-how li{margin:4px 0}
.cz-legal{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:#6b7480}
.cz-legal a{color:inherit;text-decoration:underline}
/* Wind gusts map */
.cg-r{position:absolute;opacity:0;pointer-events:none}
.cg-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin:0 0 12px;border-radius:10px;background:#eaf1f8;max-width:100%}
.cg-tabs label{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:40px;padding:5px 14px;border-radius:7px;font-size:14px;font-weight:700;color:#2b4a68;cursor:pointer;line-height:1.15;text-align:center}
.cg-tabs label small{font-size:11px;font-weight:500;color:#5b6670}
#cg-t0:checked~.cg-tabs label[for=cg-t0],#cg-t1:checked~.cg-tabs label[for=cg-t1],#cg-t2:checked~.cg-tabs label[for=cg-t2],#cg-t3:checked~.cg-tabs label[for=cg-t3]{background:#0b2540;color:#fff}
#cg-t0:checked~.cg-tabs label[for=cg-t0] small,#cg-t1:checked~.cg-tabs label[for=cg-t1] small,#cg-t2:checked~.cg-tabs label[for=cg-t2] small,#cg-t3:checked~.cg-tabs label[for=cg-t3] small{color:#cfe0f0}
#cg-t0:focus-visible~.cg-tabs label[for=cg-t0],#cg-t1:focus-visible~.cg-tabs label[for=cg-t1],#cg-t2:focus-visible~.cg-tabs label[for=cg-t2],#cg-t3:focus-visible~.cg-tabs label[for=cg-t3]{outline:3px solid #3b82c4;outline-offset:1px}
.cg-v{display:none}
#cg-t0:checked~.cg-grid .cg-v0,#cg-t1:checked~.cg-grid .cg-v1,#cg-t2:checked~.cg-grid .cg-v2,#cg-t3:checked~.cg-grid .cg-v3{display:inline}
.cg-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:20px;align-items:start}
.cg-map{margin:0;min-width:0}
.cg-map svg{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #d3e0ea}
.cg-map figcaption{margin-top:6px;font-size:12px;color:#6b7480}
.cg-sea{fill:#dcecf7}
.cg-co{fill:#f6f3ec;stroke:#b9c3cc;stroke-width:1;stroke-linejoin:round}
.cg-co.cg-bre{fill:#fffdf7;stroke:#0b2540;stroke-width:1.6}
.cg-sealbl{font:italic 600 18px Georgia,serif;fill:#6d93b3;letter-spacing:.1em}
.cg-colbl{font:800 13px system-ui,sans-serif;fill:#8a96a3;letter-spacing:.25em}
.cg-lead{stroke:#0b2540;stroke-width:1.3;opacity:.55}
.cg-dot{fill:#0b2540;stroke:#fff;stroke-width:2}
.cg-town rect{stroke:#fff;stroke-width:2}
.cg-tn{font:700 13px system-ui,-apple-system,"Segoe UI",sans-serif;fill:currentColor;opacity:.9}
.cg-tv{font:800 23px system-ui,-apple-system,"Segoe UI",sans-serif;fill:currentColor}
.cg-nb .cg-tn{font-style:italic}
g.g0{color:#0b3a40}g.g0 rect{fill:#bfe6e2}
g.g1{color:#fff}g.g1 rect{fill:#0f9d9a}
g.g2{color:#3b2a00}g.g2 rect{fill:#f3c64b}
g.g3{color:#3b1d00}g.g3 rect{fill:#f59a3c}
g.g4{color:#fff}g.g4 rect{fill:#e0592a}
g.g5{color:#fff}g.g5 rect{fill:#a8263e}
g.g6{color:#fff}g.g6 rect{fill:#5b1a7a}
g.gna{color:#5b6670}g.gna rect{fill:#e9edf1}
.cg-side{min-width:0}
.cg-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 12px;margin:0 0 12px;padding:0;font-size:12.5px;color:#3d4652}
.cg-legend li{display:inline-flex;align-items:center;gap:5px}
.cg-legend i{display:inline-block;width:16px;height:12px;border-radius:3px}
.cg-legend .g0 i{background:#bfe6e2}.cg-legend .g1 i{background:#0f9d9a}.cg-legend .g2 i{background:#f3c64b}.cg-legend .g3 i{background:#f59a3c}.cg-legend .g4 i{background:#e0592a}.cg-legend .g5 i{background:#a8263e}.cg-legend .g6 i{background:#5b1a7a}
.cg-tbl{width:100%;border-collapse:collapse;font-size:14px}
.cg-tbl th,.cg-tbl td{padding:6px 6px;border-bottom:1px solid #e3eaf0;text-align:left;vertical-align:middle}
.cg-tbl thead th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5b6670}
.cg-tbl tbody th{font-weight:700;color:#14181f}
.cg-tbl tr.cg-nb th{font-weight:500;font-style:italic;color:#3d4652}
.cg-tbl td small{color:#6b7480;font-size:12px}
.cg-tbl span.cg-v{min-width:2.4em;padding:2px 7px;border-radius:5px;font-weight:800;text-align:center}
#cg-t0:checked~.cg-grid span.cg-v0,#cg-t1:checked~.cg-grid span.cg-v1,#cg-t2:checked~.cg-grid span.cg-v2,#cg-t3:checked~.cg-grid span.cg-v3{display:inline-block}
span.g0{background:#bfe6e2;color:#0b3a40}span.g1{background:#0f9d9a;color:#fff}span.g2{background:#f3c64b;color:#3b2a00}span.g3{background:#f59a3c;color:#3b1d00}span.g4{background:#e0592a;color:#fff}span.g5{background:#a8263e;color:#fff}span.g6{background:#5b1a7a;color:#fff}span.gna{background:#eef1f4;color:#6b7480}
/* tablets */
@media (max-width:1100px){.cz-row{grid-template-columns:minmax(140px,170px) minmax(0,1fr);grid-template-areas:"name lvl" "val val"}.cz-name{grid-area:name}.cz-lvl{grid-area:lvl}.cz-val{grid-area:val;padding-left:46px}}
@media (max-width:900px){.cg-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}}
@media (max-width:700px){.cg-grid{grid-template-columns:minmax(0,1fr)}}
/* phones */
@media (max-width:600px){
.cz-card,.cg-card{padding:14px 12px 12px;margin:10px 0 16px}
.cz-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:11px 0}.cz-val{padding-left:0}
.cz-ic{width:30px;height:30px;font-size:16px}.cz-name h3{font-size:15px}
.cz-meter{height:20px;gap:3px}.cz-meter i{width:10px}.cz-meter .cz-b0{height:6px}.cz-meter .cz-b1{height:11px}.cz-meter .cz-b2{height:15px}.cz-meter .cz-b3{height:20px}
.cz-word{font-size:10.5px;padding:2px 7px}.cz-lvl{gap:6px}
.cz-v{font-size:16px}
.cz-alerts li{font-size:12px;padding:3px 8px}.cz-alerts small{font-size:11px}
.cg-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.cg-tabs label{padding:5px 6px;font-size:13px}
.cg-tn{font-size:15px}.cg-tv{font-size:25px}
.cg-tbl{font-size:13.5px}.cg-tbl th,.cg-tbl td{padding:6px 4px}
}
