.wxw{ border-radius:12px; border:1px solid var(--border); overflow:hidden; background:rgba(0,0,0,.2); }
.wxw-chart{ position:relative; }
.wxw-chart svg{ position:absolute; inset:0; width:100%; height:100%; }
.wxw-grid{ display:grid; grid-template-columns:repeat(var(--cols,7),minmax(0,1fr)); }
.wxw-div{ position:absolute; inset:0; }
.wxw-div .l{ border-left:1px solid color-mix(in srgb, var(--border) 60%, transparent); }


.wxw-highs{ position:absolute; inset:0; pointer-events:none; }
.wxw-highs div{ position:relative; }
.wxw-highs span{ position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap;
                 font-size:calc(10px * var(--ts,1)); line-height:1.1; font-weight:600;
                 font-variant-numeric:tabular-nums; color:color-mix(in srgb, var(--text) 85%, transparent); }
.wxw-highs span.lo-l{ font-size:calc(9.5px * var(--ts,1)); font-weight:500; color:var(--text-faint); }


.wxw-pts{ position:absolute; inset:0; pointer-events:none; }
.wxw-pts div{ position:relative; }
.wxw-pt{ position:absolute; left:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(7,11,18,.9); }
.wxw-pt.hi{ background:var(--warn); }
.wxw-pt.lo{ background:var(--accent-cold); }


.wxw-pt.now{ width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--accent);
             box-shadow:0 0 0 1.5px rgba(7,11,18,.9); }
.wxw-tiles{ border-bottom:1px solid var(--border); }
.wxw-tile{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 2px; min-width:0; cursor:pointer; transition:background .2s; -webkit-tap-highlight-color:transparent; }
.wxw-tile:hover{ background:rgba(255,255,255,.04); }
.wxw-tile.on{ background:rgba(79,168,255,.12); box-shadow:inset 0 2px 0 var(--accent); }
.wxw-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.wxw-tile.now{ background:rgba(255,255,255,.03); }
.wxw-tile.now .wd{ color:var(--accent); }
.wxw-tile.now .lo .fl{ font-size:calc(8.5px * var(--ts,1)); color:var(--text-faint); margin-right:2px; letter-spacing:.02em; }
.wxw-tile[data-l="1"]{ border-left:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.wxw-tile .wd{ font-size:calc(11px * var(--ts,1)); font-weight:600; color:var(--text); line-height:1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wxw-tile .md{ font-size:calc(9.5px * var(--ts,1)); color:var(--text-faint); line-height:1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wxw-tile canvas.ic{ margin:2px 0; }


.wxw-tile .hl{ display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap;
               gap:0 4px; line-height:1; max-width:100%; min-width:0; }
.wxw-tile .h{ font-size:calc(14px * var(--ts,1)); font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }
.wxw-tile .lo{ font-size:calc(11px * var(--ts,1)); font-variant-numeric:tabular-nums; color:var(--text-faint); }
.wxw-tile .dets{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:2px; width:100%; min-width:0; }
.wxw-det{ height:calc(11px * var(--ts,1)); line-height:1; font-size:calc(9.5px * var(--ts,1)); font-variant-numeric:tabular-nums; color:var(--text-dim); }
.wxw-det .sfx{ color:var(--text-faint); margin-left:1px; }
.wxw-tile canvas.moon{ display:block; }