/* CokeTag POC. Same token system as CokeTrack so the two read as one family,
   and the same rule: KO brand in the chrome, semantic colour in the data. */
/* D136: always light -- the approved KO light style. The dark palette that
   followed the computer's setting is gone on purpose: one look, the one that
   was approved, whatever the machine is set to. The login page keeps its own
   black styling below. */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(vendor/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(vendor/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(vendor/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(vendor/fonts/inter-latin-700-normal.woff2) format('woff2')}
:root{
  color-scheme: light;
  --surface-0:#f3f4f6; --surface-1:#ffffff; --surface-2:#eef0f3;
  --ink-1:#111318; --ink-2:#565b66; --ink-3:#8b909b;
  --line:#e7e8ec;
  --blue:#2f6fe4; --aqua:#12a579; --yellow:#e39b00; --red:#e61d2b;
  --ko-red:#CC0000; --ko-black:#000;
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-0);color:var(--ink-1);font-size:14px;
  font-family:Inter,ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* ── D136: black rail on the left, white header on top ───────────────────────
   The rail is the tab bar (#tabs): same buttons, same data-tab, drawn as icons
   with their name in the tooltip. Fixed, so it stays while the page scrolls. */
.rail{position:fixed;left:0;top:0;bottom:0;width:64px;background:#0b0b0c;z-index:1100;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;overflow-y:auto}
.rail button{width:40px;height:40px;border:none;border-radius:10px;background:transparent;
  color:#fff;opacity:.9;display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.rail button:hover{background:rgba(255,255,255,.12);opacity:1}
.rail button.active{background:#fff;color:#0b0b0c;opacity:1}
.rail button[hidden]{display:none}
.rail .ic{width:20px;height:20px}
.rail-sep{width:24px;border-top:1px solid rgba(255,255,255,.22);margin:8px 0;flex:none}
.rail-sep[hidden]{display:none}
.topbar{margin-left:64px;background:#fff;border-bottom:1px solid var(--line);padding:14px 32px 22px}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.brand-logo{height:34px;width:auto;display:block;flex:none}
.topbar h1{font-size:34px;font-weight:700;letter-spacing:-.025em;margin:0;color:var(--ink-1);line-height:1.1}
.topbar .sub{font-size:13px;color:var(--ink-3);margin-top:8px}
.tabs{display:flex;gap:3px;background:var(--surface-0);border:1px solid var(--line);
  border-radius:9px;padding:3px}
.tabs button{border:none;background:transparent;padding:6px 12px;border-radius:6px;
  font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.tabs button.active{background:var(--surface-1);color:var(--ink-1);font-weight:600}

main{margin-left:64px;padding:22px 32px 40px}
.card{background:var(--surface-1);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-bottom:16px}
.card h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--surface-1);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.kpi .v{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.kpi .r{font-size:12px;color:var(--ink-2);margin-top:3px}
.kpi .n{font-size:11px;color:var(--ink-3);margin-top:5px;line-height:1.45}
.notice{background:var(--surface-2);border-left:3px solid var(--yellow);padding:10px 12px;
  border-radius:6px;font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid #f0f1f4}
.scroll{max-height:460px;overflow:auto}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
button.primary{background:var(--blue);border:1px solid var(--blue);color:#fff;font-weight:600;
  border-radius:8px;padding:7px 12px;font:inherit;font-weight:600;cursor:pointer}
button.ghost{background:var(--surface-0);border:1px solid var(--line);color:inherit;
  border-radius:8px;padding:7px 12px;font:inherit;cursor:pointer}
button.danger{color:var(--red)}
input,select{font:inherit;color:inherit;background:var(--surface-0);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px}
#map{height:520px;border-radius:10px;border:1px solid var(--line)}
/* The home map gets the room. The fences column is a list of short lines, so it
   is given a fixed, narrow width instead of a share of the grid -- a proportional
   column grows with the window and takes the space from the only thing on the
   page that can use it. */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:18px;align-items:start;margin-bottom:18px}
@media (max-width:1040px){ .home-grid{grid-template-columns:1fr} }
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hint{font-size:12px;color:var(--ink-3);line-height:1.5}
.hidden{display:none!important}

/* ── who is signed in ─────────────────────────────────────────────────────── */
/* D136: in the white header now, so dark text; the initial in a red circle. */
.who{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
.who .av{width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12px}
.who b{color:var(--ink-1);font-weight:600}
.who .role{color:var(--ink-3);font-size:11.5px;text-transform:capitalize}
.who button{background:#fff;border:1px solid var(--line);color:var(--ink-1);
  border-radius:8px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer}
.who button:hover{border-color:var(--ink-3)}

/* ── login ────────────────────────────────────────────────────────────────── */
/* Black ground, white logo, gradient rule, #CC0000 submit -- the identity from
   04_UI_brand_change_spec.md, applied to the one screen everyone sees first. */
.login-body{background:var(--ko-black);min-height:100vh;display:flex;
  align-items:center;justify-content:center;padding:24px}
.login-wrap{width:100%;max-width:380px}
.login-card{background:#0e0e0d;border:1px solid #2a2a27;border-radius:14px;
  padding:26px 24px 22px;display:flex;flex-direction:column}
.login-logo{height:34px;width:auto;align-self:flex-start;margin-bottom:14px}
.login-rule{height:4px;border-radius:2px;margin-bottom:18px;
  background:url(brand/Color_Bar_Horizontal.jpg) center left/100% 4px no-repeat}
.login-card h1{font-size:19px;color:#fff;margin:0;letter-spacing:-.01em}
.login-sub{font-size:12px;color:#96958c;margin:4px 0 20px;line-height:1.5}
.login-card label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:#96958c;margin-bottom:5px}
.login-card input{background:#161615;border:1px solid #33332f;color:#fff;
  border-radius:8px;padding:9px 11px;font:inherit;margin-bottom:14px}
.login-card input:focus{outline:none;border-color:#5a5a54}
.login-submit{background:var(--ko-red);border:1px solid var(--ko-red);color:#fff;
  border-radius:8px;padding:10px 12px;font:inherit;font-weight:600;cursor:pointer;
  margin-top:4px}
.login-submit:hover{background:#b30000;border-color:#b30000}
.login-submit:disabled{opacity:.55;cursor:default}
.login-error{margin-top:12px;font-size:12.5px;color:#fff;line-height:1.5;
  background:rgba(204,0,0,.16);border-left:3px solid var(--ko-red);
  padding:9px 11px;border-radius:6px}
.login-policy{font-size:11.5px;color:#7d7b74;line-height:1.5;margin:14px 0 0}
.login-foot{font-size:11.5px;color:#7d7b74;line-height:1.55;margin:16px 4px 0;
  text-align:center}

/* ── zone drawing ─────────────────────────────────────────────────────────── */
.drawhint{font-size:12px;color:var(--ink-3);line-height:1.7;margin-top:10px}
.drawhint b{color:var(--ink-1)}
.drawhint kbd{font:inherit;font-size:11px;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:var(--surface-0);
  color:var(--ink-2)}
.drawhint .warn{color:var(--red);font-weight:600}
/* The vertex handles are the affordance -- without a cursor change they read as
   decoration rather than something you can grab. */
.leaflet-container .vertex{cursor:grab}
.leaflet-container .vertex:active{cursor:grabbing}
.leaflet-container .midpoint{cursor:copy}

/* ── zones screen ─────────────────────────────────────────────────────────── */
.zone-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:18px;align-items:start;margin-bottom:18px}
@media (max-width:1040px){ .zone-grid{grid-template-columns:1fr} }
#map2{height:430px;border-radius:10px;border:1px solid var(--line)}
/* DIRECT children only. Without the `>` this also matched the checkboxes inside
   .assetrow -- and because an ID beats a class, `.assetrow input{width:auto}`
   lost, so every checkbox was 100% wide and shoved the name and serial out of
   the row. */
#zone-panel > input{width:100%}
#zone-panel h2{margin-bottom:8px}

/* Kind as a segmented control rather than a <select>: the choice changes what
   the zone MEANS, and a dropdown hides two thirds of that behind a click. */
.segmented{display:flex;border:1px solid var(--line);border-radius:9px;
  overflow:hidden;width:fit-content;margin-top:12px}
.segmented button{border:none;background:var(--surface-0);padding:7px 13px;
  font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;
  display:flex;align-items:center;gap:7px}
.segmented button + button{border-left:1px solid var(--line)}
.segmented button.active{background:var(--ink-1);color:var(--surface-1);font-weight:600}
.segmented button.active .dot{box-shadow:0 0 0 2px var(--surface-1)}

.assetlist{border:1px solid var(--line);border-radius:9px;max-height:210px;
  overflow-y:auto;overflow-x:hidden;margin-top:8px;background:var(--surface-0)}
.assetrow{display:flex;align-items:center;gap:9px;padding:7px 10px;
  border-bottom:1px solid var(--line);font-size:13px}
.assetrow:last-child{border-bottom:none}
.assetrow input{width:auto;margin:0;flex:none}
/* The name takes the slack; without this it gets shoved right by the serial's
   margin-left:auto and wraps onto two lines in a narrow panel. */
.assetrow .name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.assetrow .meta{margin-left:auto;color:var(--ink-3);font-size:11px;
  letter-spacing:.03em;font-variant-numeric:tabular-nums}
.assetlist .empty{padding:10px;color:var(--ink-3);font-size:12px}

/* The measurement is the one thing on this panel that can stop a mistake, so it
   is a coloured block, not a line of hint text. */
.measure{margin-top:14px;font-size:12.5px;line-height:1.6;padding:9px 12px;
  border-left:3px solid var(--line);border-radius:6px;background:var(--surface-0);
  color:var(--ink-2)}
.measure b{color:var(--ink-1)}
.measure.ok{border-left-color:var(--aqua)}
.measure.tight{border-left-color:var(--yellow)}
.measure.too_small{border-left-color:var(--red)}

/* Label for an asset picked into the zone being drawn. Permanent, so you can
   see which cooler you are fencing without hovering it. */
.leaflet-tooltip.asset-label{background:var(--ink-1);color:var(--surface-1);
  border:none;box-shadow:none;font-size:11px;font-weight:600;padding:2px 6px}
.leaflet-tooltip.asset-label::before{display:none}

/* ── webhook ──────────────────────────────────────────────────────────────── */
pre.raw{background:var(--surface-0);border:1px solid var(--line);border-radius:8px;
  padding:10px;font-size:11.5px;line-height:1.5;max-height:280px;overflow:auto;
  margin:8px 0 0;white-space:pre-wrap;word-break:break-word}
#wh-endpoint code{background:var(--surface-0);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;font-size:12px}
#wh-table td{vertical-align:top}
#wh-table details summary{cursor:pointer}

/* ── zone list (ported from CokeTrack's Zones screen) ─────────────────────── */
.zonelist{display:flex;flex-direction:column;gap:2px}
.zoneitem{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;
  border-radius:9px;cursor:pointer}
.zoneitem:hover{background:var(--surface-0)}
.zoneitem > i{width:3px;align-self:stretch;border-radius:2px;flex:none;min-height:34px}
.zi-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.zi-main b{font-size:13.5px}
.zi-acts{display:flex;gap:10px;align-items:flex-start;flex:none}
.zi-acts .linkish{text-decoration:none;font-weight:600}
.zoneitem.is-off{opacity:.55}
/* D132: the zone whose fence is the only one on the map */
.zoneitem.is-picked{background:var(--surface-0);box-shadow:inset 0 0 0 1px var(--line)}
.minor{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.minor.mono{font-variant-numeric:tabular-nums;color:var(--ink-3)}
/* A coordinate is meant to be selected and pasted, so it gets tabular figures
   and the user-select the Leaflet popup would otherwise not encourage. */
.leaflet-popup-content .mono{font-variant-numeric:tabular-nums;user-select:all;
  color:var(--ink-2)}
.minor .warn{color:var(--red);font-weight:600}
button.linkish{background:none;border:none;padding:1px 0;font:inherit;font-size:12px;
  color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
button.linkish:hover{color:var(--ink-1)}
.notice.notice-bad{border-left-color:var(--red)}
.notice.notice-ok{border-left-color:var(--aqua)}

/* The CSV drop zone. Dashed and roomy on purpose: this is the fallback channel,
   used rarely and under pressure, so it has to read as a target at a glance. */
.drop{border:2px dashed var(--line);border-radius:10px;padding:22px 16px;
  text-align:center;background:var(--surface-2);transition:border-color .12s,background .12s}
.drop b{display:block;margin-bottom:4px}
.drop.over{border-color:var(--blue);background:rgba(42,120,214,.06)}
#uploads-table a{color:var(--blue);text-decoration:none}
#uploads-table a:hover{text-decoration:underline}

/* Cluster marker on the home map: one circle per LOCATION, carrying the count.
   Sized by magnitude, coloured by the worst tag in it. */
.cluster{border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:13px;border:2.5px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.cllist{margin-top:8px;max-height:260px;overflow-y:auto;display:flex;
  flex-direction:column;gap:1px}
button.clrow{display:flex;align-items:center;gap:7px;width:100%;text-align:left;
  background:none;border:none;padding:4px 6px;border-radius:6px;font:inherit;
  font-size:12px;cursor:pointer;color:var(--ink-1)}
button.clrow:hover{background:var(--surface-0)}
.clname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clage{color:var(--ink-3);font-size:11.5px;flex:none}

/* Analytics: the day picker and the heat legend. */
#map3{height:700px;border-radius:10px;border:1px solid var(--line)}
#an-days{max-height:620px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
label.dayrow{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;
  font-size:12.5px;cursor:pointer}
label.dayrow:hover{background:var(--surface-0)}
label.dayrow input{flex:none;margin:0}
.dayname{flex:1;font-variant-numeric:tabular-nums}
.daynum{color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}
.heatbar{display:inline-block;width:74px;height:9px;border-radius:5px;
  vertical-align:-1px;border:1px solid var(--line);
  background:linear-gradient(90deg,#2a78d6,#17b3b3,#1baf7a,#eda100,#e34948)}

/* Detections per day, under the Analytics map. */
#an-chart{margin-top:12px}
.chart-head{display:flex;align-items:baseline;gap:10px;font-size:12.5px;
  margin-bottom:4px;flex-wrap:wrap}
.chart-head .muted{font-size:11.5px}
svg.daychart{width:100%;height:190px;display:block;overflow:visible}
svg.daychart .grid{stroke:var(--line);stroke-width:1}
svg.daychart .yl{fill:var(--ink-3);font-size:10px;text-anchor:end}
svg.daychart .xl{fill:var(--ink-3);font-size:10px;text-anchor:middle}
svg.daychart .val{fill:var(--ink-2);font-size:10px;text-anchor:middle;
  font-variant-numeric:tabular-nums}
svg.daychart .mean{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
/* The average sits over the bars, so it gets a halo painted behind the glyphs
   rather than a box -- it collided with the last bar's value otherwise. */
svg.daychart .ml{fill:var(--ink-3);font-size:10px;text-anchor:end;
  paint-order:stroke;stroke:var(--surface-1);stroke-width:3px;stroke-linejoin:round}
svg.daychart .hit{fill:transparent;cursor:pointer}
svg.daychart .fill{fill:var(--blue);cursor:pointer}
svg.daychart .bar:hover .fill{fill:var(--ink-1)}
svg.daychart .bar.off .fill{fill:var(--line)}
svg.daychart .fill.zero{fill:var(--red);opacity:.55}

/* ── horizontal bars ──────────────────────────────────────────────────────────
   Seven vertical bars squeezed into a 290 px column were unreadable: the labels
   collided and the values sat on top of each other. Turned on their side the
   same seven rows are legible at ANY width, the name has a whole column of its
   own, and the value never overlaps the bar. Divs rather than SVG -- there is
   no axis to draw and no scale to place. */
.hbars{display:flex;flex-direction:column;gap:7px}
.hbar{display:grid;grid-template-columns:82px minmax(0,1fr) 46px;gap:10px;
  align-items:center;font-size:13px}
.hbar .k{color:var(--ink-2)}
.hbar .t{height:14px;background:var(--surface-2);border-radius:7px;overflow:hidden}
.hbar .t i{display:block;height:100%;background:var(--blue);border-radius:7px}
.hbar .t i.top{background:var(--aqua)}
.hbar .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-1)}
.hbar.none .k,.hbar.none .v{color:var(--ink-3)}

/* ── the "i" ──────────────────────────────────────────────────────────────────
   D39 sent the caveats off the screen. D74 adds the only door they may come
   back through, and it is 15 px wide: the screen carries a LABEL AND A NUMBER,
   and anything that wanted a sentence either becomes a chart or lives in here.
   inline-flex rather than inline-block so the glyph centres in the circle at
   any font size, and middle alignment so it sits on the label's midline
   instead of hanging off its baseline. */
.info{appearance:none;border:1px solid var(--ink-3);background:none;color:var(--ink-3);
  width:15px;height:15px;min-width:15px;border-radius:50%;padding:0;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 9px/1 ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;vertical-align:middle;margin-left:6px}
.info:hover,.info[aria-expanded="true"]{border-color:var(--blue);color:var(--blue)}
.info:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.infopop{position:fixed;z-index:9999;max-width:300px;padding:12px 14px;
  background:var(--surface-1);color:var(--ink-1);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 34px -12px rgba(0,0,0,.45);
  font-size:13px;line-height:1.5;white-space:pre-line}
.infopop[hidden]{display:none}
.infopop b{display:block;margin-bottom:5px;font-size:12.5px}

/* ── vertical bars, in CSS rather than SVG ────────────────────────────────────
   The first version reused `svg.daychart`, which carries preserveAspectRatio
   ="none" so the drawing fills its box. On a 24-bar chart that is a defect: the
   horizontal scale becomes width/1000, so the hour labels stretch wider the
   wider the window gets, and past 1900 px they are nearly twice as wide as they
   are tall. Flex bars have no viewBox and therefore no scaling -- the bars
   reflow and the type stays type. */
.vchart{position:relative;padding-left:28px}
.vgrid{position:absolute;left:28px;right:0;top:0;pointer-events:none}
.vgrid i{position:absolute;left:0;right:0;border-top:1px solid var(--line);display:block}
.vgrid b{position:absolute;left:-28px;transform:translateY(-50%);font-size:10px;
  font-weight:400;color:var(--ink-3);width:22px;text-align:right}
.vbars{display:flex;align-items:flex-end;gap:3px;height:150px;
  border-bottom:1px solid var(--ink-3);position:relative}
.vbars .vb{flex:1;display:flex;align-items:flex-end;justify-content:center;min-width:0}
/* Capped, as the SVG version capped it at 38: uncapped, a 17-bar chart on a
   1900 px screen draws 100 px slabs, which reads as a block diagram rather than
   a distribution. */
.vbars .vb i{display:block;width:100%;max-width:44px;background:var(--blue);
  border-radius:3px 3px 0 0;min-height:2px}
.vbars .vb.dim i{opacity:.3}
.vlabels{display:flex;gap:3px;margin-top:7px}
.vlabels span{flex:1;text-align:center;font-size:10px;color:var(--ink-3);min-width:0}

/* ── section rule ─────────────────────────────────────────────────────────────
   The map was the only block on the screen with no heading, so it arrived out
   of nowhere directly under the weekday bars and read as a different page. A
   label and a hairline fix the cause rather than the symptom: the eye gets a
   stop, and the block finally says what it is. Same uppercase treatment the
   cards already use (`.card h2`), so this adds a position rather than a style. */
.sect{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin:26px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
.vchart.pick .vb{cursor:pointer}
.vbars .vb{position:relative}
.vbars .vb.off i{opacity:.22}
.vbars .vb em{position:absolute;left:0;right:0;text-align:center;font-style:normal;
  font-size:10px;color:var(--ink-2);font-variant-numeric:tabular-nums;pointer-events:none}
.vgrid u{position:absolute;left:0;right:0;border-top:1px dashed var(--ink-3);
  opacity:.7;display:block}

/* users -- an inactive account stays in the list, greyed rather than hidden:
   its audit history is still real and reactivating it is one click. */
tr.us-off td{color:var(--ink-3)}
.us-actions{white-space:nowrap}
.us-actions button{margin-right:10px}
.us-actions button.danger{color:var(--red)}

/* lab -- insight cards. Bigger number than a KPI, one mono line under it, the
   state as a pill and the reason behind the i. A stripe carries the state colour
   so the card reads before the number does. */
.insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.insights{grid-template-columns:1fr}}
.insight{background:var(--surface-1);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  position:relative;display:flex;flex-direction:column;min-height:168px}
.insight .stripe{position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0}
.insight .l{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.insight .v{font-size:40px;font-weight:660;letter-spacing:-.03em;line-height:1;margin:12px 0 6px}
.insight .v small{font-size:16px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-left:5px}
.insight .s{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.insight .foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center}
.pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;padding:4px 9px;border-radius:999px}
.pill.ok{background:rgba(27,175,122,.15);color:var(--aqua)}
.pill.warn{background:rgba(237,161,0,.2);color:var(--yellow)}
.pill.bad{background:rgba(227,73,72,.15);color:var(--red)}
.pill.mute{background:var(--surface-2);color:var(--ink-3)}

/* registry drop zones, side by side; one column on a narrow screen */
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.reg-grid{grid-template-columns:1fr}}

/* one card on its own row, same width as one column above it */
.insights-one{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}

/* ── lab: confirmation map (D89) ──────────────────────────────────────────── */
.lab-map-wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;align-items:stretch}
@media (max-width:800px){.lab-map-wrap{grid-template-columns:minmax(0,1fr)}}
#map4{height:520px;border-radius:10px;border:1px solid var(--line)}
.lab-map-list{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto}
.lab-map-list .cooler{background:var(--surface-1);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.lab-map-list .cooler:hover{border-color:var(--ink-3)}
.lab-map-list .cooler.active{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 25%,transparent)}
.lab-map-list .cooler .id{font-weight:600;font-size:13px}
.lab-map-list .cooler .cl{color:var(--ink-2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab-map-list .cooler .m{margin-top:6px;font-size:12px;color:var(--ink-2)}
.lab-map-list .empty{color:var(--ink-3);font-size:12.5px;padding:10px 12px}
.lab-legend{position:absolute;right:10px;bottom:10px;z-index:500;background:var(--surface-1);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:11.5px;line-height:1.7;color:var(--ink-2)}
.lab-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.lab-legend i.ring{background:transparent;border:2px dashed var(--ink-3)}

/* Commercial insights (D109) */
.co-kpis .kpi{cursor:pointer;transition:border-color .12s}
.co-kpis .kpi:not(.is-empty):hover{border-color:var(--ink-3)}
.co-kpis .kpi.is-on{border-color:var(--ink-1);box-shadow:inset 0 0 0 1px var(--ink-1)}
.co-kpis .kpi.is-empty{cursor:default}
.co-kpis .kpi.is-empty .v{color:var(--ink-3)}
.co-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:4px;align-items:start}
/* One column on a narrow window: the map goes first, so it is not pushed below a long list (D110). */
@media (max-width:900px){.co-wrap{grid-template-columns:minmax(0,1fr)} .co-wrap > .card:last-child{order:-1}}
#map5{height:560px;border-radius:10px;border:1px solid var(--line)}
#co-list tr[data-serial]{cursor:pointer}
#co-list tr[data-serial]:hover td{background:var(--surface-2,rgba(0,0,0,.03))}

/* Presence (D125) */
.pr-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:start}
@media (max-width:900px){.pr-wrap{grid-template-columns:minmax(0,1fr)} #map6{order:-1}}
#map6{height:560px;border-radius:10px;border:1px solid var(--line);position:sticky;top:10px}


.pr-detail .pr-model{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:10px 0}
.pr-detail .pr-model .v{font-size:17px;font-weight:640}
.pr-detail .pr-model .r{font-size:11.5px;color:var(--ink-3)}
.pr-detail tr[data-serial]{cursor:pointer}
.pr-list{padding:0;overflow:hidden}
.pr-list-head{display:flex;justify-content:space-between;padding:10px 14px;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line)}
.pr-row{border-bottom:1px solid var(--line)}
.pr-row:last-child{border-bottom:none}
.pr-line{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer}
.pr-line:hover{background:var(--surface-2)}
.pr-row.is-open .pr-line{background:var(--surface-2)}
.pr-caret{width:12px;color:var(--ink-3);font-size:12px}
.pr-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pr-flags{display:flex;gap:10px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.pr-score{font-size:16px;font-weight:650;min-width:64px;text-align:right}
.pr-detail{padding:4px 14px 14px}
.pr-health{margin:6px 0 4px}
.pr-verdict{display:inline-block;color:#fff;font-weight:650;font-size:12.5px;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pr-verdict.sm{font-size:11px;padding:2px 8px}
.pr-sub{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px}
/* Presence views (D129) */
.pr-views{display:flex;gap:6px;margin:0 0 12px}
.pr-view{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink-2)}
.pr-view.on{background:var(--ink-1);color:var(--surface-1);border-color:var(--ink-1)}
.pr-badge{background:var(--red);color:#fff;border-radius:999px;font-size:10.5px;padding:1px 6px;margin-left:4px}
.md-table{width:100%}.md-table td,.md-table th{padding:10px 14px}
.md-row{cursor:pointer}
.md-row:hover,.md-row.is-open{background:var(--surface-2)}
.md-drawer td{background:var(--surface-2);padding:6px 18px 16px}
.pr-model{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:10px 0}
.pr-model .v{font-size:17px;font-weight:640}
.pr-model .r{font-size:11.5px;color:var(--ink-3)}

/* Lab cards, compact, in one grid (D130): the four containers become one grid
   through display:contents, so the cards fill rows instead of leaving a single
   card on a row of three. */
.insights-all{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.insights-all>.insights{display:contents}
.insights-all .insight{padding:12px 14px;min-height:0}
.insights-all .insight .stripe{top:12px;bottom:12px}
.insights-all .insight .l{font-size:10.5px}
.insights-all .insight .v{font-size:28px;margin:8px 0 4px}
.insights-all .insight .v small{font-size:13px}
.insights-all .insight .s{font-size:12px;line-height:1.4}
.insights-all .insight .foot{padding-top:8px}

/* Admin > Log (D133) */
#lg-table td{vertical-align:top}
#lg-table .lg-action{font-size:12px;word-break:break-all;max-width:320px}
#lg-table .lg-detail{white-space:pre-wrap;word-break:break-word;max-width:560px;margin:0}

/* Pager under every list (D135): Show 10 · 25 · 50, the range, ‹ › */
.pager{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin:10px 0 2px;
  font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.pager .pg{background:transparent;border:1px solid var(--line);color:var(--ink-2);border-radius:7px;
  padding:3px 9px;font-size:12px;line-height:1.4;cursor:pointer;min-width:30px}
.pager .pg:hover:not(:disabled){background:var(--surface-0)}
.pager .pg.on{background:var(--ink-1);border-color:var(--ink-1);color:var(--surface-1);font-weight:600}
.pager .pg:disabled{opacity:.35;cursor:default}
.pager .pg-range{margin:0 6px 0 10px;font-variant-numeric:tabular-nums}

/* ── D137: Home, Zones and Commercial insights, as approved ───────────────────
   The layouts of the approved KO light mockups: the header carries the Zones
   buttons, the Home numbers are one strip, the layer switches float
   over the map, tables run edge to edge inside their cards, states are pills,
   and the three maps are grey so the markers carry the colour. */
.topbar-right{display:flex;align-items:center;gap:14px}
.head-main{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.head-acts{display:flex;gap:10px;flex:none}
.head-acts[hidden]{display:none}
.topbar .sub b{color:var(--ink-1)}
.hbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);color:var(--ink-1);
  padding:9px 14px;border-radius:9px;font:inherit;font-weight:600;font-size:13px;background:#fff;cursor:pointer}
.hbtn:hover{border-color:var(--ink-3)}
.hbtn.solid{background:#0b0b0c;color:#fff;border-color:#0b0b0c}
.hbtn:disabled{opacity:.55;cursor:default}
.cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.meta-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;
  color:var(--ink-3);font-size:11.5px}
/* D143: the weekly PDF control, at the right of the first row of Commercial insights */
.co-wk{display:flex;align-items:center;gap:8px}
.co-wk select,.co-wk .hbtn{font-size:12.5px;padding:6px 10px;border-radius:8px}
.co-wk select{color:var(--ink-1)}
.co-wk-msg{font-size:11.5px;color:var(--ink-3)}
.co-wk-msg.bad{color:var(--red)}
.lnk{background:none;border:none;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--blue);cursor:pointer}
.lnk:hover{color:var(--ink-1)}
.lnk[hidden]{display:none}
.of{color:var(--ink-3);font-size:.62em;font-weight:600;letter-spacing:0}
/* the Home strip */
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--surface-1);
  border:1px solid var(--line);border-radius:14px;margin-bottom:18px}
.strip>div{padding:18px 20px;border-left:1px solid var(--line);min-width:0}
.strip>div:first-child{border-left:0}
.strip .v{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
.strip .l,.co-kpis .kpi .l{margin-top:8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;display:flex;align-items:center}
@media (max-width:1100px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip>div:nth-child(4){border-left:0} .strip>div:nth-child(n+4){border-top:1px solid var(--line)}}
/* card headers */
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-h2{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-h h3,.card-h2 h3,.card-t{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink-1);display:flex;align-items:center}
.card-t{margin:0 0 6px}
.card-h h3 small,.card-t small{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-left:8px}
.card.flush{padding:0;overflow:hidden}
.card.flush .card-h{padding:16px 18px 0}
.card.flush .drawhint{padding:0 18px 14px;margin-top:-6px}
.card.flush .drawhint:empty{display:none}
.flush-pad{padding:0 18px 12px}
/* maps in a frame, with the controls floating on them */
.mapwrap{position:relative;margin:14px 18px 18px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.mapwrap>#map,.mapwrap>#map2,.mapwrap>#map5{border:0;border-radius:0}
#map .leaflet-tile-pane,#map2 .leaflet-tile-pane,#map5 .leaflet-tile-pane{filter:grayscale(1) brightness(1.05) contrast(.92)}
#map5 .lab-legend{right:auto;left:10px}
.layers{position:absolute;left:12px;top:12px;z-index:500;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;box-shadow:0 6px 20px rgba(17,19,24,.10);min-width:190px;max-width:260px}
.layers .t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12.5px;margin-bottom:6px}
.layers .t .n{background:var(--red);color:#fff;border-radius:99px;font-size:10.5px;padding:1px 7px}
.layers label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);padding:3px 0;cursor:pointer}
.layers input{accent-color:var(--red);width:14px;height:14px;margin:0;padding:0}
.layers .lg-cap{margin:10px 0 4px}
.lg-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);padding:3px 0}
.count{position:absolute;right:12px;top:12px;z-index:500;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;box-shadow:0 6px 20px rgba(17,19,24,.10)}
.count b{font-size:22px;font-weight:700;display:block;letter-spacing:-.02em}
.count span{font-size:11.5px;color:var(--ink-3)}
.count[hidden]{display:none}
/* Home, right column */
.side-col{display:flex;flex-direction:column;gap:18px}
.big{font-size:40px;font-weight:700;letter-spacing:-.03em;margin-top:10px;line-height:1.1}
.sbar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--surface-2);margin:14px 0 12px}
.sbar i{display:block;height:100%}
.sleg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-2)}
.sleg b{color:var(--ink-1);font-weight:700;margin-left:4px}
.sleg .dot{width:8px;height:8px;margin-right:6px}
.sleg[hidden]{display:none}
#co-leg{padding:12px 18px 0}
/* tables edge to edge; the second line of a cell in grey */
table.flush-t{margin-top:10px}
table.flush-t th:first-child,table.flush-t td:first-child{padding-left:18px}
table.flush-t th:last-child,table.flush-t td:last-child{padding-right:18px}
table.flush-t td{padding-top:11px;padding-bottom:11px;vertical-align:top}
table.flush-t tr:last-child td{border-bottom:0}
table.flush-t td .s{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px}
table.flush-t td b{font-weight:600}
table.flush-t .r{text-align:right}
table.flush-t td.acts{white-space:nowrap}
table.flush-t td.acts .lnk+.lnk{margin-left:10px}
table.flush-t .linkish{font-size:11.5px}
.card.flush .pager{margin:0;padding:12px 16px;border-top:1px solid var(--line)}
#co-list tr[data-serial]:hover td{background:#f7f8fa}
/* states as pills */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;
  border-radius:999px;border:1px solid;white-space:nowrap}
.badge .dot{width:7px;height:7px;background:currentColor;margin:0}
.b-red{color:#c3121f;background:#fdecee;border-color:#f7c9ce}
.b-blue{color:#1f58c7;background:#eaf1ff;border-color:#cadcff}
.b-amber{color:#9a6700;background:#fff4e0;border-color:#f3dfb5}
.b-orange{color:#b4561a;background:#fdf0e6;border-color:#f6d4bb}
.b-green{color:#0b7a58;background:#e6f6f0;border-color:#bfe8d8}
.b-grey{color:#555b66;background:#f1f2f4;border-color:#e2e4e8}
.b-plain{color:var(--ink-2);background:#fff;border-color:#e2e4e8}
/* Commercial cards */
.co-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
@media (max-width:900px){.co-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.co-kpis .kpi{position:relative}
.co-kpis .kpi .v{font-size:32px}
.co-kpis .kpi .dash{display:inline-block;width:32px;height:3px;background:#c5c8cf;border-radius:2px;vertical-align:middle}
.showing{position:absolute;right:14px;top:14px;font-size:10.5px;font-weight:600;color:#fff;
  background:var(--ink-1);border-radius:99px;padding:2px 8px}

/* ── D138: the cooler page ───────────────────────────────────────────────────
   The approved page: in the header a breadcrumb instead of the title; back
   button, name and states; the registry and tag facts in one row; why it
   matters now; the map of its stays beside its history. */
.topbar-left{display:flex;align-items:center;gap:22px;min-width:0}
.crumb{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb b{color:var(--ink-1);font-weight:600}
.crumb[hidden]{display:none}
.topbar.is-cooler{padding-bottom:14px}
.topbar.is-cooler .topbar-row{margin-bottom:0}
.topbar.is-cooler .head-main{display:none}
.cl-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 0 18px;flex-wrap:wrap}
.cl-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cl-title h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.cl-back{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;
  background:#fff;color:var(--ink-2);cursor:pointer;padding:0}
.cl-back:hover{border-color:var(--ink-3);color:var(--ink-1)}
.cl-back .ic{width:18px;height:18px}
.cl-badges{display:flex;gap:8px;flex-wrap:wrap}
.cl-id{display:flex;gap:16px;align-items:center;padding:18px 18px 0}
.cl-icon{width:54px;height:54px;border-radius:12px;background:#fdecee;color:var(--red);display:grid;place-items:center;flex:none}
.cl-icon img{display:block;height:44px;width:auto}   /* D142: the flat cooler illustration replaces the line icon */
/* D142: stay-map markers are the cooler itself (drawCoolerMap). .ck-d = grey disc, .ck-tear = black pin; the
   glyph is inline SVG built in app.js. .lg-mk is a legend swatch: 9px wide like .dot so the text lines up,
   the bigger marker overflows evenly on both sides. */
.ck{position:relative;box-sizing:border-box}
.ck-d{border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);display:grid;place-items:center}
.ck-tear svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.lg-mk{display:inline-flex;align-items:center;justify-content:center;width:9px;flex:none;overflow:visible}
.lg-mk>*{flex:none}
.lg-mk svg{display:block}
.cl-nm{font-size:17px;font-weight:700}
.cl-nm2{color:var(--ink-3);font-size:12.5px;margin-top:2px}
.cl-fields{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px;padding:18px}
@media (max-width:1100px){.cl-fields{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cl-fields .cap{margin-bottom:6px}
.cl-fields b{font-size:14px;font-weight:600;display:block;overflow-wrap:anywhere}
.cl-fields span{color:var(--ink-3);font-size:12px}
.cl-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:12px 18px 18px}
@media (max-width:900px){.cl-why{grid-template-columns:1fr}}
.cl-wcard{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.cl-wcard b{font-size:18px;font-weight:700;display:block;margin:6px 0 2px;letter-spacing:-.01em}
.cl-wcard span{color:var(--ink-3);font-size:12px}
.cl-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;align-items:start}
@media (max-width:1040px){.cl-grid{grid-template-columns:1fr}}
#map7{height:470px}
.mapwrap>#map7{border:0;border-radius:0}
#map7 .leaflet-tile-pane{filter:grayscale(1) brightness(1.05) contrast(.92)}
.cl-far{font-size:11.5px;color:var(--ink-3);margin-top:6px;max-width:200px}
.cl-far:empty{display:none}
.lg-row[hidden]{display:none}
.cl-tl{padding:6px 18px 18px}
.cl-tl .it{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;position:relative;padding:10px 0}
.cl-tl .it::before{content:"";position:absolute;left:8px;top:28px;bottom:-10px;width:2px;background:#eceef1}
.cl-tl .it:last-child::before{display:none}
.cl-tl .pin{width:18px;height:18px;border-radius:50%;border:2px solid #cfd3da;background:#fff;margin-top:2px}
.cl-tl .pin.home{border-color:var(--aqua);background:#e6f6f0}
.cl-tl .pin.away{border-color:var(--red);background:#fdecee}
.cl-tl .pin.now{border-color:var(--ink-1);background:var(--ink-1)}
.cl-tl b{font-weight:600}
.cl-tl span{color:var(--ink-3);font-size:12px;display:block;margin-top:2px}
.cl-tl .r{text-align:right;font-size:12px;color:var(--ink-2)}
.cl-more{padding:8px 0 0 30px}
/* the ways in: a cooler's name on Zones, a row of All coolers */
a.clink{font-weight:600;color:var(--ink-1);text-decoration:underline;text-decoration-color:#c5c8cf;text-underline-offset:3px}
a.clink:hover{color:var(--blue);text-decoration-color:var(--blue)}
#co-list td.chev{color:var(--ink-3);text-align:right;width:20px}

/* ── D139: EN | PT ─────────────────────────────────────────────────────────── */
.lang{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:2px}
.lang button{border:0;background:transparent;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-3);
  padding:3px 8px;border-radius:6px;cursor:pointer;letter-spacing:.03em}
.lang button.on{background:#fff;color:var(--ink-1);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.login-wrap .lang{position:absolute;top:16px;right:16px;background:#161615;border-color:#2a2a27}
.login-wrap .lang button{color:#96958c}
.login-wrap .lang button.on{background:#2a2a27;color:#fff;box-shadow:none}

/* ── D140: the owner's screens in the approved look ──────────────────────────
   Analytics, Tag fleet, Webhook, Admin, Lab and Presence (`section.own`): the
   same card titles, section labels, numbers, pills, buttons and grey maps as
   Home, Zones and Commercial insights (D137). Layout and content unchanged. */
.own .card h2{font-size:16px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink-1);margin:0 0 12px}
.own .row > h2{margin:0}
.own .sect{border-top:0;padding-top:0;margin:22px 0 10px;font-size:11px}
.own .kpi{padding:16px 18px}
.own .kpi .v{font-size:32px}
.own .kpi .r{margin-top:8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;display:flex;align-items:center}
.own td{padding-top:11px;padding-bottom:11px}
.own td .chip{border:1px solid #e2e4e8;background:#fff;border-radius:999px;padding:3px 9px;font-size:11.5px;
  color:var(--ink-2);white-space:nowrap}
.own button.primary{background:#0b0b0c;border-color:#0b0b0c}
.own button.ghost{background:#fff}
.own button.ghost:hover{border-color:var(--ink-3)}
#map3 .leaflet-tile-pane,#map4 .leaflet-tile-pane,#map6 .leaflet-tile-pane{filter:grayscale(1) brightness(1.05) contrast(.92)}
#map4 .lab-legend,#map6 .lab-legend{right:auto;left:10px}