/* Shared kit of the storm, hail and data pages in the v4 shell (round 4, team "storm and hail"). Prefix wx-. A template loads it from
   its head block; page-only rules live in css/v4-<key>.css. Tokens and components come from v4.css and v4-components.css. */
.wx-head{background:var(--pale);border-bottom:1px solid var(--line);padding:48px 0 32px}
.wx-head h1{font-size:clamp(34px,4.6vw,52px);font-weight:620;margin-bottom:16px;max-width:none}
.wx-head .sub{font-size:20px;line-height:1.5;color:var(--ink);max-width:46em;margin-bottom:22px}
.wx-head .wx-note{max-width:52em}
.wx-facts{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:12px 36px}
.wx-facts li{display:flex;flex-direction:column}
.wx-facts b{font:650 34px/1.1 var(--head);color:var(--navy)}
.wx-facts span{font-size:16px;color:var(--muted)}
.wx-jump{list-style:none;margin:0;padding:0}
.wx-sec{padding-top:56px;padding-bottom:56px}
.wx-alt{background:var(--sand)}
.wx-sec .section-head{margin-bottom:24px}
.wx-sec h2{margin-bottom:14px}
.wx-note{font-size:16px;line-height:1.55;color:var(--muted)}
.wx-read{margin-top:18px;max-width:52em;color:var(--ink)}
.wx-table th,.wx-table td{padding:6px 14px;vertical-align:middle;text-align:left}
.wx-table th[scope=row]{font-weight:650}
.wx-table caption{text-align:left;padding:0 0 10px;font:600 18px/1.3 var(--head);color:var(--navy)}
.wx-table td.n,.wx-table th.n{text-align:right}
.wx-table a{display:inline-flex;align-items:center;min-height:44px}
.wx-pill{display:inline-block;padding:1px 10px;border:1px solid var(--navy);border-radius:999px;font-size:14px;line-height:1.5;color:var(--navy);white-space:nowrap}
.wx-pill.fill{background:var(--navy);color:#fff}
.wx-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 20px}
.wx-cards a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;height:100%;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--navy)}
.wx-cards a:hover{border-color:var(--navy)}
.wx-cards b{font-weight:650;font-size:17px;line-height:1.3}
.wx-cards small{font-size:15px;line-height:1.4;color:var(--muted)}
.wx-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:var(--radius);padding:20px 22px}
.wx-card h3{font-size:22px;margin-bottom:8px}
.wx-card p{font-size:17px;line-height:1.55;color:var(--ink);margin-bottom:10px}
.wx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.wx-links{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.wx-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.tr-cite{max-width:68ch;margin:0 0 20px}
.tr-cite label{display:flex;align-items:center;min-height:44px;font-weight:650;font-size:17px;color:var(--navy);margin-bottom:6px}
.tr-cite textarea{display:block;width:100%;min-height:96px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
.tr-cite .button{margin-top:8px;min-height:44px;padding:8px 20px;font-size:16px}
.wx-map{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.wx-map svg,.wx-map img{display:block;width:100%;height:auto}
.wx-map figcaption{margin-top:8px;font-size:15px;color:var(--muted)}
.wx-end{background:var(--pale);border-top:1px solid var(--line);padding:48px 0}
.wx-end-row{display:flex;align-items:center;gap:24px}
.wx-end-row h2{font-size:clamp(26px,2.6vw,34px)}
.wx-end-row p{margin-top:8px;max-width:58ch;color:var(--ink)}
.wx-end-actions{margin-left:auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.wx-end-actions .text-link{display:inline-flex;align-items:center;min-height:44px}
/* bar lists: label, an SVG bar (width = share of the biggest value), the number */
.wx-bars{list-style:none;margin:0 0 10px;padding:0}
.wx-bars li{display:grid;grid-template-columns:minmax(64px,38%) minmax(0,1fr) auto;align-items:center;gap:10px;min-height:30px;font-size:16px;color:var(--ink)}
.wx-bar{display:block;width:100%;height:12px}
.wx-bar rect{fill:var(--navy-2)}
.wx-bars li.hot .wx-bar rect{fill:var(--navy)}
.wx-bars li.hot .wx-bar-l,.wx-bars li.hot b{font-weight:700;color:var(--navy)}
.wx-bars b{font-weight:600;min-width:2ch;text-align:right}
.wx-src{font-size:15px;color:var(--muted);margin:8px 0 0}
.wx-card h4{font-size:20px;margin-bottom:8px}
@media (max-width:700px){
 .wx-head{padding:32px 0 24px}
 .wx-head .sub{font-size:18px}
 .wx-sec{padding-top:40px;padding-bottom:40px}
 .wx-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
 .wx-facts b{font-size:28px}
 .wx-end-row{flex-direction:column;align-items:flex-start}
 .wx-end-actions{margin-left:0;width:100%}
 .wx-end-actions .button{width:100%}
}