/* WEATHER extras (wow/wxx.js): hurricane package. Track time labels on the globe + the storm card in INSPECT. */
#wxx-lb{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.wxx-l{position:absolute;left:0;top:0;margin:-4px 0 0 9px;display:flex;flex-direction:column;gap:0;padding:1px 4px 2px;background:rgba(4,10,18,.72);border-left:2px solid var(--c,#7fd6ff);font:700 9px/1.15 var(--mono,monospace);letter-spacing:.08em;color:var(--m-hi);white-space:nowrap;will-change:transform}
.wxx-l b{font-size:10px;color:var(--c,#7fd6ff)}
.wxx-l i{font-style:normal;font-weight:600;font-size:10px;color:var(--dim,#9aa7b5)}
.wxx-card{border:1px solid var(--line2,#1d3a52);border-left:3px solid var(--c,#7fd6ff);background:var(--panel);padding:8px 10px 6px;margin:0 0 8px}
.wxx-cat{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.wxx-cat b{font:700 15px var(--hd,sans-serif);letter-spacing:.12em;color:var(--c,#7fd6ff)}
.wxx-cat span{font:600 10px var(--mono,monospace);letter-spacing:.12em;color:var(--m-hi)}
.wxx-note{display:block;font-size:10px;line-height:1.35;letter-spacing:.05em;color:var(--dim,#9aa7b5);margin-top:4px}
.wxx-int{width:100%;height:auto;display:block;background:var(--m-well);border:1px solid var(--line2,#1d3a52)}
.wxx-int .g{stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:1;stroke-dasharray:2 3}
.wxx-int text{font:8px var(--mono,monospace);fill:var(--dim,#9aa7b5)}
.wxx-t{width:100%;border-collapse:collapse;font:600 11px var(--mono,monospace);letter-spacing:.06em;margin:0 0 8px}
.wxx-t th{font-size:10px;color:var(--dim,#9aa7b5);text-align:right;padding:2px 6px;font-weight:600}
.wxx-t td{text-align:right;padding:3px 6px;border-top:1px solid var(--line2,#1d3a52);color:var(--m-hi)}
.wxx-t td:first-child,.wxx-t th:first-child{text-align:left}
.wxx-ww{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.wxx-ww span{font:700 10px var(--mono,monospace);letter-spacing:.1em;padding:3px 6px;border:1px solid var(--c);color:var(--c)}
.wxx-acts .btn.on{border-color:var(--cy);color:var(--cy)}
.wxx-acts a.btn{text-decoration:none}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .wxx-l{margin:-3px 0 0 7px;padding:0 3px 1px;font-size:10px}
  .wxx-l b{font-size:10px}
  .wxx-l i{display:none}
  .wxx-cat b{font-size:14px}
  .wxx-acts .btn{min-height:38px;flex:1 1 44%}
}
.wxx-acts .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}
/* FORECAST SCRUB (wow/wxcast.js): same slot as the radar time bar in #bottom */
#wxx-fc{display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--line);border-left:2px solid var(--cy);padding:4px 10px;backdrop-filter:blur(8px);margin:0 auto;width:min(760px,100%)}
#wxx-fc[hidden]{display:none}
#wxx-fc input{flex:1;min-width:0}
#wxx-fc-l{font-size:10px;letter-spacing:.14em;color:var(--cy2);white-space:nowrap;min-width:230px;text-align:right}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  #wxx-fc{position:fixed;left:var(--g);right:var(--g);bottom:calc(var(--botb) + var(--both) + 100px);z-index:8;gap:6px;padding:3px 6px;width:auto;margin:0;flex-wrap:wrap;row-gap:2px}
  #wxx-fc .btn{min-height:30px;padding:0 8px}
  #wxx-fc-l{order:-1;flex:1 0 100%;min-width:0;text-align:left;font-size:10px;letter-spacing:.1em;overflow:hidden;text-overflow:ellipsis}
  #wxx-fc input{order:2}
  body.l-open #wxx-fc,body.r-open #wxx-fc,body.nr-open #wxx-fc{display:none}
}
@media (max-height:500px) and (pointer:coarse){
  /* QA tabs-b: landscape phone, one slim row (the two-row bar ate a third of the 390px height) */
  #wxx-fc{flex-wrap:nowrap;row-gap:0;padding:2px 8px;gap:8px;bottom:calc(var(--botb) + var(--both) + 100px)}
  #wxx-fc #wxx-fc-l{order:3;flex:0 0 auto;min-width:0;max-width:210px;font-size:10px;white-space:nowrap}
  #wxx-fc input{order:2}
}
/* UX sweep tab-extras: 44px touch targets */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .wxx-acts .btn,#wxx-fc .btn{min-height:44px}
}
/* light mode (CJ 10/13 polish): advisory colors are data, pulled toward ink on paper (the globe labels stay a dark island) */
html[data-theme="light"] :is(.wxx-cat b,.wxx-ww span){color:color-mix(in srgb,var(--c) 58%,var(--ink))}
html[data-theme="light"] .wxx-ww span{border-color:color-mix(in srgb,var(--c) 70%,var(--ink))}
/* CJ 10/13 polish: wind radii row color comes in as --c (was an inline color that vanished on light paper) */
.wxx-t td.wr{color:var(--c)}
html[data-theme="light"] .wxx-t td.wr{color:color-mix(in srgb,var(--c) 58%,var(--ink))}

#wxx-fc-now:disabled{opacity:.55} /* CJ 10/13 QA */