/* =====================================================================
   FIELD KIT MAP · WEATHER LAYER (weather.js). The kit's own fonts and tones (apoc-ui.css tokens, field.css --dev).
   Everything here sits in the map area between the rail and the intel column and never over them.
   ===================================================================== */
.wx-canvas { pointer-events: none; }
#field.sheet-on .wx-ui { display: none; }
/* The Layers panel: Wind flow is Weather's sub-toggle, idle while Weather is off. */
.ly.ly-idle { opacity: .4; cursor: default; }

/* ---------------------------------------------------------------- region chips (DOM, placed by weather.js) */
.wx-chip { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: calc(.5 * var(--kh)); padding: calc(.38 * var(--kh)) calc(.8 * var(--kh)) calc(.38 * var(--kh)) calc(.55 * var(--kh)); white-space: nowrap;
    pointer-events: auto; cursor: url('cursors/pointer.svg') 16 16, pointer;
    background: linear-gradient(180deg, rgba(10, 11, 11, .9), rgba(6, 7, 7, .86)); border-radius: calc(.5 * var(--kh));
    box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .13), 0 calc(.3 * var(--kh)) calc(1.2 * var(--kh)) rgba(0, 0, 0, .5);
    font: 600 calc(1.45 * var(--kh))/1 var(--a-head); letter-spacing: .04em; color: var(--a-white); transition: box-shadow .15s; }
.wx-chip:hover { box-shadow: inset 0 0 0 1px rgba(240, 180, 74, .8), 0 calc(.3 * var(--kh)) calc(1.2 * var(--kh)) rgba(0, 0, 0, .5); }
.wx-i { display: flex; flex: none; width: calc(2.05 * var(--kh)); height: calc(2.05 * var(--kh)); }
.wx-svg { width: 100%; height: 100%; overflow: visible; }
.wx-chip em { font-style: normal; font-weight: 600; font-size: calc(1.22 * var(--kh)); letter-spacing: .12em; text-transform: uppercase; color: var(--a-dim); }
.wx-chip b { font-weight: 700; font-size: calc(1.62 * var(--kh)); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.wx-w { display: flex; align-items: center; gap: calc(.25 * var(--kh)); font: 500 calc(1.08 * var(--kh))/1 var(--a-mono); color: var(--a-dim); }
.wx-arr { width: calc(1.3 * var(--kh)); height: calc(1.3 * var(--kh)); flex: none; color: rgba(232, 238, 244, .9); }
.wx-flake { width: calc(1.25 * var(--kh)); height: calc(1.25 * var(--kh)); flex: none; color: #e8f1ff; }
.wx-chip .pop { font: 500 calc(1.05 * var(--kh)) var(--a-mono); color: #8cc4ee; }
.wx-live { width: calc(.6 * var(--kh)); height: calc(.6 * var(--kh)); margin-left: calc(.1 * var(--kh)); border-radius: 50%; background: var(--dev); box-shadow: 0 0 calc(.7 * var(--kh)) var(--dev); }
.wx-chip.own { box-shadow: inset 0 0 0 1px rgba(127, 214, 194, .6), 0 0 calc(1.4 * var(--kh)) rgba(127, 214, 194, .16), 0 calc(.3 * var(--kh)) calc(1.2 * var(--kh)) rgba(0, 0, 0, .5); }
.wx-chip.own em { color: var(--dev); }
/* Forecast steps: the same chip, dashed, a touch quieter: it's a forecast, not a reading. */
.wx-chip.fc { background: rgba(8, 9, 9, .76); box-shadow: 0 calc(.3 * var(--kh)) calc(1.2 * var(--kh)) rgba(0, 0, 0, .4); outline: 1px dashed rgba(243, 238, 230, .3); outline-offset: -1px; }
.wx-chip.fc.own { outline-color: rgba(127, 214, 194, .6); }
.wx-chip.nr { gap: calc(.55 * var(--kh)); padding: calc(.25 * var(--kh)) calc(.6 * var(--kh)); background: rgba(8, 9, 9, .5); box-shadow: none; opacity: .8; }
.wx-chip.nr:hover { box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .2); }
.wx-chip.nr .nr-t { font: 500 calc(.98 * var(--kh)) var(--a-mono); letter-spacing: .04em; color: rgba(243, 238, 230, .34); }
.wx-chip.nr em { font-size: calc(1.08 * var(--kh)); color: rgba(243, 238, 230, .42); }
.wx-chip.nr .nr-d { width: calc(.9 * var(--kh)); height: 1px; background: rgba(243, 238, 230, .3); }

/* ---------------------------------------------------------------- front labels */
.wx-flab { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: calc(.22 * var(--kh)); padding: calc(.45 * var(--kh)) calc(.8 * var(--kh)) calc(.5 * var(--kh)) calc(.75 * var(--kh)); white-space: nowrap; pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 10, 14, .9), rgba(6, 7, 10, .86)); border-left: 2px solid var(--tc); border-radius: 0 calc(.45 * var(--kh)) calc(.45 * var(--kh)) 0;
    box-shadow: 0 calc(.3 * var(--kh)) calc(1.2 * var(--kh)) rgba(0, 0, 0, .45); }
.wx-flab b { font: 700 calc(1.2 * var(--kh))/1 var(--a-head); letter-spacing: .2em; text-transform: uppercase; color: var(--tc); }
.wx-flab small { font: 500 calc(1.02 * var(--kh))/1.1 var(--a-mono); letter-spacing: .02em; color: var(--a-dim); }
.wx-flab span { font: 600 calc(1.3 * var(--kh))/1.1 var(--a-head); letter-spacing: .04em; color: var(--a-white); }
.wx-flab span i { font-style: normal; color: var(--a-dim); }
.wx-flab.cold { --tc: #6eaeff; } .wx-flab.warm { --tc: #ff7a66; } .wx-flab.storm { --tc: #c9b8ff; } .wx-flab.plain { --tc: #cfd3ce; }
.wx-flab.fc { border-left-style: dashed; background: rgba(8, 10, 14, .78); }

/* ---------------------------------------------------------------- the dock: one column at the map's left edge, forecast over key */
#wx-dock { position: absolute; z-index: 606; left: calc(calc(2 * var(--kw)) + calc(13.5 * var(--kw)) + calc(1.2 * var(--kw))); bottom: calc(10.4 * var(--kh)); width: calc(27 * var(--kh)); max-height: calc(calc(100 * var(--kh)) - calc(14 * var(--kh)) - calc(10.4 * var(--kh)));
    display: flex; flex-direction: column; justify-content: flex-end; gap: calc(.8 * var(--kh)); pointer-events: none; }
#wx-dock.hidden, #wx-card.hidden { display: none; }
.wx-legend, .wx-bar { pointer-events: auto; background: linear-gradient(180deg, rgba(5, 6, 6, .95), rgba(5, 6, 6, .88)); box-shadow: inset 0 0 0 1px var(--dev-line); transform: translateZ(0); }

.wx-legend { width: 100%; }
.wx-leg-h { display: flex; align-items: center; gap: calc(.8 * var(--kh)); width: 100%; padding: calc(.9 * var(--kh)) calc(1.1 * var(--kh)); font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .3em; text-transform: uppercase; color: var(--dev); }
.wx-leg-h em { margin-left: auto; font-style: normal; letter-spacing: .08em; color: var(--dev-dim); }
.wx-chev { width: calc(.7 * var(--kh)); height: calc(.7 * var(--kh)); border: solid var(--dev-dim); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(calc(-.2 * var(--kh))); transition: transform .2s var(--a-ease); }
.wx-legend.folded .wx-chev, .wx-bar.folded .wx-chev { transform: rotate(-135deg) translateY(calc(-.1 * var(--kh))); }
.wx-leg-b { padding: 0 calc(1.1 * var(--kh)) calc(1 * var(--kh)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(.55 * var(--kh)) calc(1.4 * var(--kh)); }
.wx-leg-n { grid-column: 1 / -1; margin-top: calc(.3 * var(--kh)); font: 500 calc(.98 * var(--kh))/1.4 var(--a-mono); color: var(--a-mute); }
.wx-legend.folded .wx-leg-b { display: none; }
.wx-leg-r { display: grid; grid-template-columns: calc(2.8 * var(--kh)) 1fr; gap: calc(.7 * var(--kh)); align-items: center; font: 600 calc(1.22 * var(--kh))/1.1 var(--a-head); letter-spacing: .06em; color: var(--a-white); white-space: nowrap; }
.wx-leg-r small { display: block; font: 500 calc(1 * var(--kh))/1.2 var(--a-mono); letter-spacing: .02em; color: var(--a-mute); }
.wx-sw { display: block; width: calc(2.8 * var(--kh)); height: calc(1.1 * var(--kh)); border-radius: calc(.6 * var(--kh)); }
.sw-rain { background: linear-gradient(90deg, rgba(132, 190, 228, .55), rgba(86, 150, 222, .75), rgba(138, 104, 230, .85)); filter: blur(.5px); }
.sw-snow { background: rgba(238, 244, 255, .65); filter: blur(.5px); }
.sw-fog { background: rgba(214, 218, 214, .45); filter: blur(.5px); }
.sw-haze { background: rgba(214, 164, 92, .5); filter: blur(.5px); }
.sw-cloud { background: rgba(150, 158, 166, .35); filter: blur(.5px); }
.sw-cold, .sw-warm, .sw-storm, .sw-wind { border-radius: 0; background-repeat: no-repeat; background-position: center; background-size: contain; height: calc(1.6 * var(--kh)); }
.sw-cold { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M1 11h38' stroke='%234f9dff' stroke-width='2.4'/%3E%3Cpath d='M6 11l4.5-7 4.5 7zM24 11l4.5-7 4.5 7z' fill='%234f9dff'/%3E%3C/svg%3E"); }
.sw-warm { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M1 11h38' stroke='%23ff5b47' stroke-width='2.4'/%3E%3Cpath d='M6 11a4.5 4.5 0 0 1 9 0zM24 11a4.5 4.5 0 0 1 9 0z' fill='%23ff5b47'/%3E%3C/svg%3E"); }
.sw-storm { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Ccircle cx='20' cy='7' r='6' fill='none' stroke='%23beaaff' stroke-width='1.2' stroke-dasharray='2 2'/%3E%3Cpath d='M20.8 3l-2.8 4h1.8l-1 4 3-4.6h-1.8z' fill='%23d9ccff'/%3E%3C/svg%3E"); }
.sw-wind { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M2 5h22M8 9h26M4 12.5h14' stroke='%23e2eaf2' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

.wx-bar { width: 100%; }
.wx-bar-b { display: flex; flex-direction: column; align-items: stretch; gap: calc(.6 * var(--kh)); padding: 0 calc(1.1 * var(--kh)) calc(1 * var(--kh)); }
.wx-bar.folded .wx-bar-b { display: none; }
.wx-here { display: flex; align-items: center; gap: calc(.6 * var(--kh)); min-height: calc(2 * var(--kh)); font: 600 calc(1.2 * var(--kh))/1.15 var(--a-head); letter-spacing: .04em; color: var(--a-white); }
.wx-here .wx-h-k { flex: none; font: 500 calc(.95 * var(--kh)) var(--a-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--dev); }
.wx-here i { display: flex; flex: none; width: calc(1.8 * var(--kh)); height: calc(1.8 * var(--kh)); }
.wx-here b { flex: none; font-size: calc(1.6 * var(--kh)); font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-here .wx-h-l { min-width: 0; color: var(--a-dim); }
.wx-steps { display: flex; gap: calc(.25 * var(--kh)); padding: calc(.25 * var(--kh)); background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px var(--dev-line); }
.wx-steps button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(.22 * var(--kh)); padding: calc(.45 * var(--kh)) calc(.2 * var(--kh)) calc(.4 * var(--kh)); color: var(--a-dim); transition: color .15s, background .15s; }
.wx-steps button b { font: 700 calc(1.12 * var(--kh))/1 var(--a-head); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.wx-steps button small { font: 500 calc(.9 * var(--kh))/1 var(--a-mono); letter-spacing: .02em; color: var(--a-mute); }
.wx-steps button:hover:not(:disabled) { color: var(--a-white); background: rgba(127, 214, 194, .08); }
.wx-steps button.on { color: var(--a-ink); background: var(--dev); }
.wx-steps button.on small { color: rgba(10, 9, 8, .7); }
.wx-steps button:disabled { cursor: default; opacity: .35; }
.wx-src { font: 500 calc(.95 * var(--kh))/1.4 var(--a-mono); letter-spacing: .02em; color: var(--a-mute); }
.wx-src b { margin-right: calc(.5 * var(--kh)); padding: calc(.1 * var(--kh)) calc(.5 * var(--kh)); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dev); box-shadow: inset 0 0 0 1px var(--dev-line); }
.wx-src b.warn { color: var(--a-amber); box-shadow: inset 0 0 0 1px rgba(240, 180, 74, .35); }
.wx-src b.fc { color: #8cc4ee; box-shadow: inset 0 0 0 1px rgba(140, 196, 238, .35); }

/* ---------------------------------------------------------------- the region card: docked over the intel column (never the map) */
#wx-card { position: absolute; z-index: 612; top: calc(14 * var(--kh)); right: calc(2 * var(--kw)); width: calc(21 * var(--kw)); max-height: calc(76 * var(--kh)); overflow-y: auto; padding: calc(1.6 * var(--kh)) calc(1.1 * var(--kw)) calc(1.5 * var(--kh));
    background: linear-gradient(180deg, #0a0b0b, #070808); box-shadow: inset 0 0 0 1px var(--dev-line), inset 0 2px 0 var(--dev), 0 calc(2 * var(--kh)) calc(5 * var(--kh)) rgba(0, 0, 0, .6);
    animation: wxCardIn .22s var(--a-ease); }
@keyframes wxCardIn { from { transform: translateX(calc(1 * var(--kw))); } }
.wx-c-x { position: absolute; right: calc(.9 * var(--kh)); top: calc(.7 * var(--kh)); width: calc(2.8 * var(--kh)); height: calc(2.8 * var(--kh)); font-size: calc(2.1 * var(--kh)); line-height: 1; color: var(--a-mute); }
.wx-c-x:hover { color: var(--a-white); }
.wx-c-k { padding-right: calc(3 * var(--kh)); font: 500 calc(1.05 * var(--kh))/1.4 var(--a-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dev); }
#wx-card h3 { margin: calc(.5 * var(--kh)) 0 calc(.9 * var(--kh)); font: 700 calc(2.5 * var(--kh))/1.05 var(--a-head); letter-spacing: .08em; text-transform: uppercase; }
.wx-c-now { font: 500 calc(1.35 * var(--kh))/1.45 var(--a-body); color: var(--a-dim); margin-bottom: calc(1.1 * var(--kh)); }
.wx-c-t { width: 100%; border-collapse: collapse; font: 600 calc(1.4 * var(--kh))/1.1 var(--a-head); letter-spacing: .03em; }
.wx-c-t td { padding: calc(.7 * var(--kh)) calc(.35 * var(--kh)); border-top: 1px solid var(--a-line); vertical-align: middle; white-space: nowrap; }
.wx-c-t td:first-child { padding-left: 0; }
.wx-c-t tr.hd td { padding: 0 calc(.35 * var(--kh)) calc(.5 * var(--kh)); border-top: 0; font: 500 calc(.95 * var(--kh)) var(--a-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a-mute); }
.wx-c-t td.st b { display: block; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wx-c-t td.st small { display: block; margin-top: calc(.2 * var(--kh)); font: 500 calc(.98 * var(--kh)) var(--a-mono); color: var(--a-mute); }
.wx-c-t td.sky { white-space: normal; }
.wx-c-t td.sky i { display: inline-flex; width: calc(2 * var(--kh)); height: calc(2 * var(--kh)); vertical-align: middle; margin-right: calc(.5 * var(--kh)); }
.wx-c-t td.sky span { vertical-align: middle; }
.wx-c-t td.t { text-align: right; font-weight: 700; font-size: calc(1.6 * var(--kh)); font-variant-numeric: tabular-nums; }
.wx-c-t td.w { text-align: right; font: 500 calc(1.12 * var(--kh)) var(--a-mono); color: var(--a-dim); }
.wx-c-t td.w .wx-arr { display: inline-block; vertical-align: calc(-.15 * var(--kh)); margin-right: calc(.3 * var(--kh)); }
.wx-c-t td.p { text-align: right; font: 500 calc(1.12 * var(--kh)) var(--a-mono); color: #8cc4ee; }
.wx-c-t tr.fc td { color: rgba(243, 238, 230, .84); }
.wx-c-t tr.fc td.p { color: #8cc4ee; }
.wx-c-t tr.on td { background: rgba(127, 214, 194, .07); }
.wx-c-t tr.on td:first-child { box-shadow: inset 2px 0 0 var(--dev); padding-left: calc(.7 * var(--kh)); }
.wx-conf { display: block; margin-top: calc(.45 * var(--kh)); width: calc(4.4 * var(--kh)); height: calc(.3 * var(--kh)); background: linear-gradient(90deg, var(--dev) var(--c), rgba(243, 238, 230, .12) var(--c)); }
.wx-c-front { margin-top: calc(1.1 * var(--kh)); padding: calc(.8 * var(--kh)) calc(1 * var(--kh)); font: 500 calc(1.3 * var(--kh))/1.45 var(--a-body); color: var(--a-white); border-left: 2px solid #6eaeff; background: rgba(79, 157, 255, .08); }
.wx-c-front.warm { border-color: #ff7a66; background: rgba(255, 91, 71, .08); }
.wx-c-front.storm { border-color: #c9b8ff; background: rgba(190, 170, 255, .08); }
.wx-c-front.none { border-color: var(--a-line); background: none; color: var(--a-mute); }
.wx-c-front b { font-weight: 600; }
.wx-c-hi { margin-top: calc(.9 * var(--kh)); font: 500 calc(1.25 * var(--kh))/1.45 var(--a-body); color: #dfe9f7; }
.wx-c-note { margin-top: calc(1.1 * var(--kh)); font: 500 calc(1.02 * var(--kh))/1.5 var(--a-mono); color: var(--a-mute); }