/* Briefing pages: a compact masthead, the storm EKG and its bedside readouts. Tokens come from fr.css. */
.bmast{border-top:6px solid var(--rule);padding-block:18px 6px}
.bmast .home{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:26px;line-height:1;color:var(--ink);text-decoration:none}
.bmast .home span{background:linear-gradient(92deg,var(--v1),var(--v2) 30%,var(--v3) 58%,var(--v4) 82%,var(--v5));-webkit-background-clip:text;background-clip:text;color:transparent}
.crumbs{font-family:var(--display);font-size:var(--s2);font-weight:600;color:var(--ink-3);margin-top:10px}
.crumbs a{color:var(--ink-2)}
.bhead{padding-block:14px 8px}
.bhead h1{font-size:clamp(34px,5vw,60px);font-weight:900;letter-spacing:-.02em;line-height:1.02}
.bhead .where{font-family:var(--display);font-size:var(--s2);color:var(--ink-2);font-weight:600;margin-top:8px}
#brief{padding-bottom:56px}
#words{max-width:72ch;margin:14px 0 20px}
#words p{margin:0 0 .6em}
#words p:first-child{font-size:clamp(19px,1.7vw,22px);line-height:1.45}
#words p:last-child{font-family:var(--display);font-size:var(--s2);color:var(--ink-3)}
#readouts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
@media (max-width:1100px){#readouts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){#readouts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ro{position:relative;background:var(--card);border:1px solid rgba(150,120,100,.28);border-radius:8px;padding:10px 12px 9px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ro::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:2px;background:var(--c,var(--ink))}
.ro-l{font-family:var(--mono);font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--ink-3)}
.ro-v{font-family:var(--display);font-weight:900;font-size:clamp(20px,2vw,27px);line-height:1.1;color:var(--ink)}
.ro-s{font-family:var(--display);font-size:13px;line-height:1.3;color:var(--ink-2)}
.ro.alarm{background:var(--c);border-color:var(--c)}
.ro.alarm .ro-l,.ro.alarm .ro-v,.ro.alarm .ro-s{color:#fff}
.ro-hist{display:flex;gap:3px;align-items:flex-end;height:32px;margin-top:4px}
.ro-hist i{flex:1;border-radius:2px 2px 0 0;min-width:6px}
.ro.alarm .ro-hist i{outline:1px solid rgba(255,255,255,.7)}
.ctl{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:0 0 10px;font-family:var(--display);font-size:var(--s2)}
.ctl .grp-l{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:6px}
.segm{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--card)}
.segm button{font:inherit;font-weight:700;border:0;background:none;color:var(--ink);padding:4px 12px 2px;cursor:pointer}
.segm button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.ctl label{display:inline-flex;gap:6px;align-items:center;font-weight:600;color:var(--ink-2);cursor:pointer}
#legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.lg{font-family:var(--display);font-size:var(--s2);display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--hair);background:var(--card);border-radius:8px;padding:5px 12px 3px 10px;cursor:pointer;color:var(--ink)}
.lg i{width:24px;height:0;border-top:3px solid var(--c)}
.lg.det i{border-top:2px dashed var(--c)}
.lg span{color:var(--ink-3);font-family:var(--mono);font-size:12.5px}
.lg[aria-pressed="false"]{opacity:.5}
.lg[aria-pressed="false"] b{text-decoration:line-through}
.lg:disabled{cursor:default}
.ekg{position:relative;background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:10px 8px 6px}
.ekg canvas{display:block;width:100%;touch-action:pan-y}
#brief.loading .ekg canvas{opacity:.55}
#ekgTip{position:absolute;pointer-events:none;background:rgba(255,255,255,.97);border:1px solid rgba(15,34,54,.25);border-radius:6px;padding:7px 10px 5px;font-family:var(--display);font-size:13.5px;line-height:1.35;box-shadow:0 4px 14px rgba(15,34,54,.12);max-width:min(430px,92%);z-index:2}
#ekgTip .tt-h{font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--ink-2);margin-bottom:3px}
#ekgTip .tt-r{color:var(--ink-2)}
#ekgTip .tt-r b{color:var(--ink);font-weight:800;font-family:var(--mono)}
#ekgTip .tt-r i{display:inline-block;width:14px;height:3px;background:var(--ink);vertical-align:middle;margin-right:6px}
#ekgTip .tt-r i.dash{height:2px;background-image:linear-gradient(90deg,transparent 0 40%,#fff 40% 60%,transparent 60%)}
#status{font-family:var(--display);font-weight:700;background:var(--card);border:1.5px solid var(--ink);border-radius:8px;padding:12px 16px;margin:12px 0}
.fine{font-family:var(--display);font-size:var(--s1);color:var(--ink-3);margin-top:8px;max-width:95ch;line-height:1.45}
.how{max-width:72ch;margin-top:34px}
.how h2{font-size:var(--s5);margin-bottom:10px}
.how p{margin-bottom:.8em}
details.tblwrap{margin-top:22px;font-family:var(--display)}
details.tblwrap summary{cursor:pointer;font-weight:800}
.tscroll{overflow-x:auto;margin-top:10px}
table.data{border-collapse:collapse;font-family:var(--display);font-size:var(--s2);min-width:100%}
table.data th,table.data td{padding:6px 12px 4px;border-bottom:1px solid var(--hair-2);text-align:right;white-space:nowrap}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-bottom:1.5px solid var(--ink)}
table.data tbody th{font-weight:700}
table.data tr.region th{font-size:var(--s3);font-weight:900;padding-top:22px;border-bottom:1.5px solid var(--hair);text-align:left}
table.data a{color:var(--ink);font-weight:700}
.mini-rank{display:inline-block;min-width:38px;text-align:center;color:#fff;font-weight:900;font-size:12.5px;border-radius:4px;padding:2px 6px 0;margin-right:4px}
.near{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.near a{font-family:var(--display);font-weight:700;font-size:var(--s2);text-decoration:none;color:var(--ink);border:1.5px solid var(--hair);border-radius:999px;padding:4px 13px 2px;background:var(--card)}
.near a:hover{border-color:var(--ink)}
#pointForm{display:flex;flex-wrap:wrap;gap:10px;align-items:end;font-family:var(--display);font-size:var(--s2);margin-top:10px}
#pointForm label{display:flex;flex-direction:column;gap:3px;font-weight:700;color:var(--ink-2)}
#pointForm input{font:inherit;padding:6px 9px 4px;border:1.5px solid var(--ink-3);border-radius:6px;width:11ch;background:var(--card);color:var(--ink)}
#pointForm input[name=name]{width:20ch}
#pointForm button{font:inherit;font-weight:800;padding:7px 16px 5px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);cursor:pointer}