/* Zambrero Development — the map.
   The Melbourne Development Plan's look, carried across both countries.
   Every control floats over the map as its own glass element; there is no
   header bar and no panel behind them. The command strip (/shared/strip.css)
   owns the left edge, so every left-anchored control is pushed right by --rg
   to clear it. The additions for the opening, the country choice and
   Australia's states are at the end. */

:root{
  --cream:#F2E7DA;
  --rg:80px;           /* clearance for the command strip on the left edge */
  --e:cubic-bezier(.32,.72,0,1);

  /* Dark is the default. Neutral, not green — a green page tints the
     imagery and the basemap under it, and a map should sit on something
     that gets out of its way. */
  --ink:#F2E7DA;
  --ink-soft:rgba(242,231,218,.62);
  --glass:rgba(13,18,23,.62);
  --glass-solid:rgba(13,18,23,.92);
  --edge:rgba(242,231,218,.2);
  --glass-lift:rgba(242,231,218,.16);
  --glass-lift-hover:rgba(242,231,218,.26);
  --edge-lift:rgba(242,231,218,.42);
  --pill:rgba(242,231,218,.94);
  --pill-ink:#0B1116;
  --page:#0B1116;
  --label:rgba(245,238,229,.94);
  --label-shadow:0 1px 4px rgba(4,20,14,.85);
}

html[data-theme=light]{
  --ink:#08281B;
  --ink-soft:#6B5B49;
  --glass:rgba(255,255,255,.72);
  --glass-solid:rgba(255,255,255,.94);
  --edge:rgba(8,40,27,.16);
  --glass-lift:rgba(8,40,27,.1);
  --glass-lift-hover:rgba(8,40,27,.17);
  --edge-lift:rgba(8,40,27,.4);
  --pill:rgba(8,51,35,.94);
  --pill-ink:#F2E7DA;
  --page:#F2E7DA;
  --label:rgba(10,38,27,.9);
  --label-shadow:0 1px 4px rgba(255,255,255,.8);
}

/* In space nothing is light, and satellite imagery is neither light nor
   dark — it is both, field by field. Light chrome vanishes over it, so both
   cases take the dark treatment whatever the theme is set to. */
body.space,body.sat{
  --ink:#F2E7DA;
  --ink-soft:rgba(242,231,218,.66);
  --glass:rgba(10,16,22,.66);
  --glass-solid:rgba(10,16,22,.9);
  --edge:rgba(242,231,218,.3);
  --glass-lift:rgba(12,18,24,.62);
  --glass-lift-hover:rgba(20,28,36,.76);
  --edge-lift:rgba(242,231,218,.55);
  --pill:rgba(242,231,218,.95);
  --pill-ink:#08121A;
}

/* A soft scrim under the controls. Imagery changes brightness field by
   field, and a border alone cannot guarantee a button stays readable over
   a snowfield or a salt lake. */
body::after{
  content:'';
  position:fixed;inset:auto 0 0 0;height:300px;z-index:600;
  background:linear-gradient(to top,rgba(5,9,13,.7),rgba(5,9,13,.3) 42%,transparent);
  opacity:0;
  transition:opacity .5s var(--e);
  pointer-events:none;
}
body.sat::after,body.space::after{opacity:1}

/* Light and dark change the basemap style, and satellite imagery has no
   light or dark version — so the switch is turned off rather than left
   there doing nothing. */
.seg.off{opacity:.55;pointer-events:none}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:var(--page);
  color:var(--ink);
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.space{background:#05080C}

/* The starfield sits behind the canvas. MapLibre paints the globe's surface
   and its atmosphere, but the empty sky beyond is left transparent while the
   globe is on screen, so these show through. Three layers of dots at
   different sizes and opacities read as depth rather than as a texture. */
.stars{position:fixed;inset:0;z-index:0;overflow:hidden;background:#02040A;
  opacity:0;transition:opacity .8s var(--e);pointer-events:none}
/* The field itself is larger than the screen, so it can drift with the
   planet (app.js) without an edge ever showing. */
.stars i{
  position:absolute;inset:-820px;will-change:transform;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 28% 62%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 31%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 55% 77%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 68% 12%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 76% 48%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.7px 1.7px at 88% 71%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.1px 1.1px at 94% 26%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 6% 82%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 34% 92%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 40%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 19% 45%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 49% 8%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 83% 90%, rgba(255,255,255,.5), transparent 60%),
    transparent;
  background-repeat:repeat;
  background-size:300px 300px,300px 300px,300px 300px,300px 300px,
                  430px 430px,430px 430px,430px 430px,430px 430px,
                  590px 590px,590px 590px,590px 590px,590px 590px,
                  780px 780px,780px 780px,auto;
}
body.space .stars{opacity:1}

#map{position:fixed;inset:0;z-index:1;background:transparent}
.maplibregl-map{font-family:inherit}
canvas{outline:none}

.glass,.titlecard,.seg,.note,.tip,.pill.ghost,button.lgd{
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
}

/* ── Brand, top left, no box ──────────────────────────────────────
   Directly above the index button and sharing its left edge, so the two
   read as one thing: the mark, and the way in. */
.brandmark{
  position:fixed;top:28px;left:calc(26px + var(--rg));z-index:620;
  height:62px;width:auto;display:block;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.6));
  pointer-events:none;
}
html[data-theme=light] body:not(.space) .brandmark{
  filter:drop-shadow(0 1px 5px rgba(255,255,255,.75));
}

/* ── Opening title ──────────────────────────────────────────────── */
.hero{
  position:fixed;
  left:calc(clamp(24px,6vw,96px) + var(--rg));
  top:50%;
  transform:translateY(-50%);
  z-index:615;
  max-width:min(440px,46vw);
  opacity:0;
  visibility:hidden;
  transition:opacity .7s var(--e),visibility .7s var(--e);
  pointer-events:none;
}
body.hero-on .hero{opacity:1;visibility:visible}
.hero .eyebrow{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tan,#C4A384);
  margin-bottom:18px;
}
.hero h1{
  margin:0 0 16px;
  font-size:clamp(30px,4.4vw,54px);
  line-height:1.04;
  font-weight:600;
  letter-spacing:-.025em;
  color:#F5EEE5;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.hero p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:rgba(242,231,218,.66);
  max-width:330px;
}

/* ── Title card, top right, bordered ────────────────────────────── */
/* Hidden while the hero holds the title, so the name is never in two
   places at once. */
body.hero-on .titlecard{opacity:0;visibility:hidden}
.titlecard{
  opacity:1;visibility:visible;
  transition:opacity .5s var(--e),visibility .5s var(--e);
  position:fixed;top:18px;right:20px;z-index:620;
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:14px;
  padding:11px 18px;
  font-size:14px;font-weight:500;letter-spacing:-.005em;
  color:var(--ink);
  box-shadow:0 8px 26px rgba(0,0,0,.4);
}

/* ── Segmented switches ─────────────────────────────────────────── */
.switches{
  position:fixed;top:70px;right:20px;z-index:620;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.seg{
  display:flex;gap:2px;padding:3px;
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.seg button{
  font:inherit;font-size:12.5px;font-weight:500;
  color:var(--ink-soft);
  background:transparent;border:0;border-radius:999px;
  padding:6px 13px;cursor:pointer;
  transition:background .18s var(--e),color .18s var(--e);
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--pill);color:var(--pill-ink)}
.seg button:focus-visible{outline:2px solid #4ED6A1;outline-offset:1px}

/* ── Controls, bottom left ──────────────────────────────────────── */
/* ── Stage rail ─────────────────────────────────────────────────── */
.rail{
  display:flex;
  align-items:center;
  gap:14px;
  list-style:none;
  margin:0 0 4px;
  padding:0;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.rail li{
  display:flex;
  align-items:center;
  gap:7px;
  opacity:.6;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  transition:opacity .35s var(--e),color .35s var(--e);
}
.rail li::before{
  content:'';
  width:5px;height:5px;border-radius:50%;
  background:currentColor;
  flex:none;
}
.rail li.done{opacity:.7}
.rail li.now{opacity:1;color:var(--ink)}
.rail li.now::before{box-shadow:0 0 0 4px rgba(242,231,218,.16)}

.controls{
  position:fixed;left:calc(clamp(24px,6vw,96px) + var(--rg));bottom:30px;z-index:620;
  display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  max-width:min(640px,calc(100% - 48px - var(--rg)));
}
.bar{display:flex;gap:9px;flex-wrap:wrap}

/* Glass, not a solid slug. The primary reads brighter than the secondary
   through its border and a little more light in the fill, rather than by
   switching to an opaque colour. */
.pill{
  position:relative;
  font:inherit;font-size:14px;font-weight:500;
  color:var(--ink);
  background:var(--glass-lift);
  border:1px solid var(--edge-lift);
  border-radius:999px;
  padding:12px 24px;cursor:pointer;
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 8px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .18s var(--e),background .18s var(--e),border-color .18s var(--e);
}
.pill:hover{background:var(--glass-lift-hover);border-color:var(--ink)}
.pill:active{transform:translateY(1px)}
.pill.ghost{
  background:var(--glass);
  color:var(--ink-soft);
  border-color:var(--edge);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.pill.ghost:hover{color:var(--ink)}
.pill:focus-visible{outline:2px solid #4ED6A1;outline-offset:2px}
.pill[hidden]{display:none}

/* The call to action breathes rather than blinks — a strobe on a dark
   page is unpleasant and reads as an error state. */
.pill.pulse::after{
  content:'';
  position:absolute;inset:-3px;
  border-radius:999px;
  border:2px solid var(--pill);
  opacity:0;
  animation:breathe 2.6s var(--e) infinite;
  pointer-events:none;
}
@keyframes breathe{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.13);opacity:0}
  100%{transform:scale(1.13);opacity:0}
}

/* ── Layer switches ─────────────────────────────────────────────── */
/* Bottom right, clear of the stage controls on the left. Sits above the
   zoom buttons and the attribution strip rather than over them. */
.layers{
  position:fixed;right:20px;bottom:104px;z-index:620;
  display:none;flex-direction:column;
  width:250px;padding:12px 6px 6px;
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.36);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
}
.layers.on{display:flex}
.lhead{
  display:block;width:100%;text-align:left;font-family:inherit;background:none;border:0;cursor:default;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:0 10px 8px;
}
.lrows{display:flex;flex-direction:column}

button.lyr{
  display:flex;align-items:center;gap:9px;
  width:100%;
  font:inherit;font-size:12.5px;
  text-align:left;
  color:var(--ink);
  background:transparent;border:0;border-radius:9px;
  padding:7px 10px;cursor:pointer;
  transition:background .18s var(--e);
}
button.lyr:hover{background:rgba(242,231,218,.09)}
button.lyr i{
  width:9px;height:9px;border-radius:50%;display:block;flex:none;
  background:currentColor;
  opacity:.4;
  transition:opacity .18s var(--e);
}
button.lyr[aria-checked=true] i{opacity:1;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
button.lyr .lname{flex:1;color:var(--ink)}
button.lyr .lcount{
  font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
/* The switch itself. */
button.lyr .ltrack{
  width:32px;height:18px;border-radius:999px;flex:none;
  background:rgba(242,231,218,.16);
  box-shadow:inset 0 0 0 1px rgba(242,231,218,.22);
  position:relative;
  transition:background .2s var(--e),box-shadow .2s var(--e);
}
button.lyr .lknob{
  position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;
  background:var(--ink);
  opacity:.65;
  transition:transform .2s var(--e),opacity .2s var(--e);
}
button.lyr[aria-checked=true] .ltrack{
  background:currentColor;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
button.lyr[aria-checked=true] .lknob{transform:translateX(14px);opacity:1;background:#0B1116}
button.lyr:focus-visible{outline:2px solid #4ED6A1;outline-offset:-2px}
/* Nothing loaded for this layer yet — still a working switch, just honest
   about having nothing to draw. */
button.lyr.empty .lname{color:var(--ink-soft)}

/* ── Store pins ─────────────────────────────────────────────────── */
/* A cream chip with the green monogram,
   a dark ring and a shadow. One appearance that survives cream paper, the
   dark theme and satellite imagery — a marker that vanishes on the
   background you most need it on is no marker at all. */
.storepin{background:none;border:0;padding:0;cursor:pointer}
.zpin{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:999px;
  background:#F7F1E9;border:1.5px solid #0B4A33;
  box-shadow:0 1px 3px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.35);
}
.zpin img{width:13px;height:13px;display:block;pointer-events:none}
.storepin:hover .zpin,.storepin.on .zpin{
  box-shadow:0 2px 7px rgba(0,0,0,.5),0 0 0 2.5px rgba(11,74,51,.4);
  animation:tremble .32s ease-in-out;
}
.storepin.on .zpin{border-width:2px}

/* Trading stores glow white. The other three layers each carry their own
   light — neon green, electric blue, purple — and the network they are all
   being read against was the one thing on the map with none. White because
   it is the only colour left that is not already saying something else. */
.storepin.stores .zpin{
  box-shadow:
    0 1px 3px rgba(0,0,0,.5),
    0 0 11px 2px rgba(255,255,255,.75),
    0 0 28px 8px rgba(255,255,255,.35);
}
.storepin.stores:hover .zpin,.storepin.stores.on .zpin{
  box-shadow:
    0 2px 9px rgba(0,0,0,.55),
    0 0 0 3px rgba(255,255,255,.55),
    0 0 20px 6px rgba(255,255,255,.7),
    0 0 40px 14px rgba(255,255,255,.4);
}
/* White on cream is nothing. Over a light basemap the same pin takes the
   brand green instead, so it still lifts off the page. */
html[data-theme=light] body:not(.sat):not(.space) .storepin.stores .zpin{
  box-shadow:
    0 1px 3px rgba(0,0,0,.35),
    0 0 10px 2px rgba(11,74,51,.5),
    0 0 24px 7px rgba(11,74,51,.22);
}
html[data-theme=light] body:not(.sat):not(.space) .storepin.stores:hover .zpin,
html[data-theme=light] body:not(.sat):not(.space) .storepin.stores.on .zpin{
  box-shadow:
    0 2px 9px rgba(0,0,0,.4),
    0 0 0 3px rgba(11,74,51,.4),
    0 0 18px 5px rgba(11,74,51,.6);
}
/* Excluded from the workbook's analysis: still on the map, visibly set
   apart — pale chip, dashed edge, and dimmed until you go looking. */
.storepin.excl .zpin{
  background:rgba(247,241,233,.62);border-style:dashed;border-color:#8A7F6E;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.storepin.excl{opacity:.62}
.storepin.excl:hover,.storepin.excl.on{opacity:1}
.storepin.excl img{opacity:.7}

/* Pipeline: the same monogram on a neon green chip — a Zambrero that is
   not open yet, lit up. The mark stays dark because cream disappears on a
   colour this bright, and the chip colour alone carries the difference from
   a trading store's cream one. Never the trading pin in another colour: a
   site under negotiation read as a trading store is the one mistake this
   map must not let anyone make. */
.storepin.pipe .zpin{
  background:#2BFF88;border-color:#0B4A33;
  box-shadow:0 1px 3px rgba(0,0,0,.5),0 0 12px 2px rgba(43,255,136,.55);
}
.storepin.pipe:hover .zpin,.storepin.pipe.on .zpin{
  box-shadow:0 2px 9px rgba(0,0,0,.55),0 0 0 3px rgba(43,255,136,.45),
             0 0 18px 4px rgba(43,255,136,.6);
}
/* Placed from an address that would not resolve to a street number. The
   ring says the position is an estimate before anyone opens the card. */
.storepin.loose .zpin{border-style:dashed}

/* Outside the selected territory. Grey and well back, so the territory is
   plainly the subject — but still there, because a store just over the line
   is exactly what you want to see when you are looking at a territory.
   Pointing at one brings it far enough forward to read. */
/* Dimmed on the GLYPH, not on the button. MapLibre writes an inline
   opacity onto every marker element for terrain occlusion, and an inline
   style beats a class — which is why dimming the button did nothing at
   all on the live map. */
.storepin.out .zpin{
  opacity:.14;filter:grayscale(1);
  transition:opacity .25s var(--e),filter .25s var(--e);
  animation:none;
}
.storepin.out .zpin{box-shadow:0 1px 2px rgba(0,0,0,.3)}
.storepin.out .zpin::after{opacity:0;animation:none}
.storepin.out:hover .zpin{opacity:.9;filter:grayscale(.4)}
.storepin.out.on .zpin{opacity:1;filter:none}
@keyframes tremble{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-1.5px)}
  40%{transform:translateX(1.5px)}
  60%{transform:translateX(-1px)}
  80%{transform:translateX(1px)}
}
/* The pipeline pulses on its own — a slow breath and a ring going out from
   it, staggered per pin so a cluster reads as several separate things
   rather than one block. A heartbeat says "coming" in a way a static pin
   cannot, without the jitter of a shake. */
@keyframes pulseChip{
  0%,100%{transform:scale(1)}
  48%{transform:scale(1.1)}
}
@keyframes pulseRing{
  0%{transform:scale(.72);opacity:.6}
  72%,100%{transform:scale(2);opacity:0}
}
.storepin.pipe .zpin{
  position:relative;
  animation:pulseChip 2.4s ease-in-out var(--d,0s) infinite;
}
.storepin.pipe .zpin::after{
  content:'';position:absolute;inset:-2px;border-radius:999px;
  border:2px solid rgba(43,255,136,.95);
  animation:pulseRing 2.4s ease-out var(--d,0s) infinite;
  pointer-events:none;
}
.storepin.pipe:hover .zpin,.storepin.pipe.on .zpin{animation-play-state:paused}

/* ── Store card ─────────────────────────────────────────────────── */
/* Not a drawer. It opens beside the pin you are pointing at, because the
   question a pin raises is "what is that one" and an answer that appears
   at the far edge of the screen makes you look away from it to read it.
   Hovering floats it; clicking freezes it exactly where it stood. */
.scard{
  position:fixed;left:0;top:0;z-index:700;
  width:330px;max-width:calc(100vw - 24px);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(var(--x),var(--y)) scale(.97);
  transform-origin:var(--ox,0) var(--oy,50%);
  transition:opacity .16s var(--e),transform .18s var(--e),visibility 0s .18s;
  background:var(--glass-solid);
  border:1px solid var(--edge);border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  color:var(--ink);overflow:hidden;
}
.scard.on{
  opacity:1;visibility:visible;
  transform:translate(var(--x),var(--y)) scale(1);
  transition:opacity .16s var(--e),transform .18s var(--e);
}
/* Only a pinned card takes the pointer. A hover card that swallowed clicks
   would block the pin underneath it and the map behind that. */
.scard.pinned{pointer-events:auto;box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 0 1px var(--edge)}
.scard .sx{display:none}
.scard.pinned .sx{
  display:grid;place-items:center;
  position:absolute;top:13px;right:13px;z-index:3;
  width:26px;height:26px;border-radius:8px;
  background:transparent;color:var(--ink-soft);
  border:1px solid var(--edge);cursor:pointer;
  transition:color .18s var(--e),border-color .18s var(--e);
}
.scard.pinned .sx:hover{color:var(--ink);border-color:var(--ink)}

.sh{padding:16px 18px 14px;position:relative}
.sst{
  font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:#4ED6A1;margin-bottom:7px;
}
.sst.warn{color:#DCAE5C}
.sst.bad{color:#D98A6E}
.sh h3{
  margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.15;
  color:var(--ink);padding-right:30px;
}
.ssub{font-size:11px;color:var(--ink-soft);margin-top:5px;line-height:1.4}
.stags{display:flex;gap:5px;margin-top:11px;flex-wrap:wrap}
.stag{
  font-size:9.5px;letter-spacing:.04em;
  padding:3px 8px;border-radius:999px;
  background:rgba(242,231,218,.1);
  border:1px solid var(--edge);color:var(--ink-soft);
}
.stag.warn{background:rgba(220,174,92,.14);border-color:rgba(220,174,92,.5);color:#DCAE5C}
.stag.good{background:rgba(78,214,161,.13);border-color:rgba(78,214,161,.45);color:#4ED6A1}

/* The shopfront. A pin on a national map tells you nothing about what the
   site actually is; this does, and the Street View link does the rest. */
.smap{position:relative;height:132px;background:#0C2A33;border-block:1px solid var(--edge)}
.smap #smini{position:absolute;inset:0}
.smap .maplibregl-canvas{outline:none}
.sbase{
  position:absolute;left:8px;bottom:8px;z-index:2;display:none;gap:1px;
  padding:2px;border-radius:999px;
  background:rgba(8,12,16,.6);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.scard.pinned .sbase{display:flex}
.sbase button{
  font:inherit;font-size:9px;letter-spacing:.05em;
  padding:3px 9px;border-radius:999px;border:0;cursor:pointer;
  background:transparent;color:var(--ink-soft);
}
.sbase button[aria-pressed=true]{background:rgba(242,231,218,.16);color:var(--ink)}
.smini-pin{
  width:11px;height:11px;border-radius:999px;
  background:#4ED6A1;border:2px solid #03160F;
  box-shadow:0 0 0 3px rgba(78,214,161,.3);
}

.sb{padding:13px 18px 4px;max-height:36vh;overflow-y:auto}
/* The browser's default bar is a white slab down the side of a dark card.
   Give it the card's own materials instead: no track, a thumb the colour
   of the text at low opacity. */
.sb{scrollbar-width:thin;scrollbar-color:rgba(242,231,218,.24) transparent}
.sb::-webkit-scrollbar{width:9px}
.sb::-webkit-scrollbar-track{background:transparent}
.sb::-webkit-scrollbar-thumb{
  background:rgba(242,231,218,.24);
  border-radius:999px;
  border:2.5px solid transparent;background-clip:content-box;
}
.sb::-webkit-scrollbar-thumb:hover{
  background:rgba(242,231,218,.42);background-clip:content-box;
}
html[data-theme=light] body:not(.sat):not(.space) .sb{
  scrollbar-color:rgba(8,40,27,.24) transparent;
}
html[data-theme=light] body:not(.sat):not(.space) .sb::-webkit-scrollbar-thumb{
  background:rgba(8,40,27,.24);background-clip:content-box;
}
html[data-theme=light] body:not(.sat):not(.space) .sb::-webkit-scrollbar-thumb:hover{
  background:rgba(8,40,27,.4);background-clip:content-box;
}
.scard:not(.pinned) .sb{max-height:none;overflow:visible}
.ssec{margin-bottom:13px}
.ssec .slb{
  font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;
  color:var(--ink-soft);margin-bottom:6px;
}
.srow{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:4px 0;border-bottom:1px solid rgba(242,231,218,.08);
  font-size:11.5px;
}
.srow:last-child{border-bottom:0}
.srow .k{color:var(--ink-soft);flex:none}
.srow .v{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.srow .v.pos{color:#4ED6A1}
.srow .v.neg{color:#D98A6E}
.snone{font-size:11.5px;color:var(--ink-soft);padding-bottom:10px}
.snote{font-size:11.5px;color:var(--ink);line-height:1.5}
.swarn{
  font-size:11px;line-height:1.5;color:#DCAE5C;
  background:rgba(220,174,92,.1);border:1px solid rgba(220,174,92,.35);
  border-radius:9px;padding:8px 10px;
}
/* The greens and corals are tuned for a dark card. On cream they wash out,
   so light gets its own pair — same meaning, enough contrast to carry it. */
html[data-theme=light] body:not(.sat):not(.space) .sst{color:#1B6B4E}
html[data-theme=light] body:not(.sat):not(.space) .srow .v.pos{color:#1B6B4E}
html[data-theme=light] body:not(.sat):not(.space) .srow .v.neg{color:#A8452A}
/* Hovering shows the shape of the record; the detail is a click away, and
   saying so beats letting someone wonder whether that is all there is. */
.smore{
  font-size:10px;color:var(--ink-soft);letter-spacing:.03em;
  padding:9px 18px 12px;border-top:1px solid var(--edge);
}
.scard.pinned .smore{display:none}
.sf{display:none;gap:6px;padding:10px 18px 14px;border-top:1px solid var(--edge);flex-wrap:wrap}
.scard.pinned .sf{display:flex}
.sf a{
  font-size:10px;letter-spacing:.03em;text-decoration:none;
  padding:5px 10px;border-radius:999px;
  border:1px solid var(--edge);color:var(--ink-soft);
  transition:color .18s var(--e),border-color .18s var(--e);
}
.sf a:hover{color:var(--ink);border-color:var(--ink)}

@media (max-width:620px){
  .scard{width:calc(100vw - 24px)}
  .smap{height:112px}
}

/* ── Territory list ─────────────────────────────────────────────── */
/* A proper list, not a row of chips. Hovering a line spotlights that
   territory on the map and drops the others back. */
.tlist{
  display:none;
  flex-direction:column;
  width:300px;
  padding:5px;
  max-height:calc(100vh - 330px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(242,231,218,.24) transparent;
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
}
.tlist.on{display:flex}
button.trow{
  display:flex;align-items:center;gap:10px;
  width:100%;
  font:inherit;font-size:13.5px;
  text-align:left;
  color:var(--ink);
  background:transparent;
  border:0;border-radius:9px;
  padding:5px 10px;cursor:pointer;
  transition:background .18s var(--e),opacity .25s var(--e);
}
button.trow:hover,button.trow.on{background:rgba(242,231,218,.1)}
html[data-theme=light] body:not(.sat) button.trow:hover,
html[data-theme=light] body:not(.sat) button.trow.on{background:rgba(8,40,27,.07)}
button.trow.off{opacity:.45}
button.trow i{width:10px;height:10px;border-radius:2px;display:block;flex:none}
button.trow .tname{flex:1;font-weight:600;letter-spacing:-.005em;font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.trow .tno{font-size:10.5px;color:var(--ink-soft);width:24px;flex:none;
  font-variant-numeric:tabular-nums}
button.trow .tnum{
  font-size:11.5px;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
button.trow:focus-visible{outline:2px solid #4ED6A1;outline-offset:-2px}

.rlab.faded{opacity:.25;transition:opacity .25s var(--e)}

/* ── Region labels, drawn as markers ────────────────────────────── */
.rlab{
  font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--label);
  text-shadow:var(--label-shadow);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}
body.sat .rlab{color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.9)}

/* ── Search ─────────────────────────────────────────────────────── */
.sbox{
  position:relative;
  width:min(340px,calc(100vw - 720px));min-width:220px;
  display:flex;align-items:center;gap:9px;
  padding:0 14px;height:40px;
  background:var(--glass);border:1px solid var(--edge);border-radius:999px;
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:border-color .18s var(--e),box-shadow .18s var(--e);
}
.sbox:focus-within{border-color:rgba(78,214,161,.55);
  box-shadow:0 8px 28px rgba(0,0,0,.34),0 0 0 3px rgba(78,214,161,.14)}
.sicon{color:var(--ink-soft);flex:none}
.sbox input{
  flex:1;min-width:0;font:inherit;font-size:12.5px;
  background:transparent;border:0;outline:none;color:var(--ink);
}
.sbox input::placeholder{color:var(--ink-soft);opacity:.8}
.sbox input::-webkit-search-cancel-button{-webkit-appearance:none}

.sres{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  display:none;flex-direction:column;padding:5px;
  background:var(--glass-solid);border:1px solid var(--edge);border-radius:13px;
  box-shadow:0 16px 38px rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  max-height:min(60vh,420px);overflow-y:auto;
}
.sres.on{display:flex}
.sres-row{
  display:flex;align-items:center;gap:9px;width:100%;
  font:inherit;font-size:12.5px;text-align:left;color:var(--ink);
  background:transparent;border:0;border-radius:9px;
  padding:8px 10px;cursor:pointer;
}
.sres-row:hover,.sres-row.on{background:rgba(242,231,218,.11)}
html[data-theme=light] body:not(.sat):not(.space) .sres-row:hover,
html[data-theme=light] body:not(.sat):not(.space) .sres-row.on{background:rgba(8,40,27,.07)}
.srn{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srl{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);flex:none}
.sdot{width:8px;height:8px;border-radius:999px;flex:none}
.sdot.stores{background:#4ED6A1}
.sdot.pipeline{background:#2BFF88}
.sdot.territories{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-soft);border-radius:2px}
.snil{font-size:12px;color:var(--ink-soft);padding:10px 12px}

/* ── Index ──────────────────────────────────────────────────────── */
.ibtn{
  position:fixed;top:108px;left:calc(26px + var(--rg));z-index:660;
  width:38px;height:38px;border-radius:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--glass);border:1px solid var(--edge);cursor:pointer;
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  transition:border-color .18s var(--e),background .18s var(--e);
}
.ibtn span{display:block;width:16px;height:1.8px;border-radius:2px;
  background:var(--ink);transition:transform .2s var(--e),opacity .2s var(--e)}
.ibtn:hover{border-color:var(--ink)}
body.index-open .ibtn{opacity:0;pointer-events:none;transition:opacity .2s var(--e)}
/* Behind the drawer, not in front of it. */
body.index-open .brandmark{opacity:0;transition:opacity .2s var(--e)}

.idrawer{
  position:fixed;top:0;left:0;bottom:0;z-index:650;
  width:340px;max-width:88vw;
  transform:translateX(-103%);
  transition:transform .34s var(--e);
  background:var(--glass-solid);
  border-right:1px solid var(--edge);
  box-shadow:24px 0 56px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  display:flex;flex-direction:column;color:var(--ink);
}
.idrawer.on{transform:none}
.ih{display:flex;align-items:center;justify-content:space-between;
  padding:20px 18px 14px;flex:none}
.ih h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.ix{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:transparent;color:var(--ink-soft);border:1px solid var(--edge);
  cursor:pointer;transition:color .18s var(--e),border-color .18s var(--e)}
.ix:hover{color:var(--ink);border-color:var(--ink)}
.itabs{display:flex;gap:5px;padding:0 14px 12px;flex-wrap:wrap;flex:none}
.itab{
  font:inherit;font-size:11px;letter-spacing:.01em;
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--ink-soft);
  border:1px solid var(--edge);
}
.itab span{font-size:9.5px;opacity:.7;font-variant-numeric:tabular-nums}
.itab:hover{color:var(--ink)}
.itab.on{background:rgba(242,231,218,.14);color:var(--ink);border-color:var(--ink-soft)}
html[data-theme=light] body:not(.sat):not(.space) .itab.on{background:rgba(8,40,27,.09)}
.itab.empty{opacity:.45}
.ilist{flex:1;overflow-y:auto;padding:4px 12px 24px;
  scrollbar-width:thin;scrollbar-color:rgba(242,231,218,.24) transparent}
.ilist::-webkit-scrollbar{width:9px}
.ilist::-webkit-scrollbar-track{background:transparent}
.ilist::-webkit-scrollbar-thumb{background:rgba(242,231,218,.24);border-radius:999px;
  border:2.5px solid transparent;background-clip:content-box}
.irow{
  display:flex;flex-direction:column;gap:2px;width:100%;
  font:inherit;text-align:left;color:var(--ink);
  background:transparent;border:0;border-radius:9px;
  padding:9px 10px;cursor:pointer;
  border-bottom:1px solid rgba(242,231,218,.07);
}
.irow:hover{background:rgba(242,231,218,.1)}
html[data-theme=light] body:not(.sat):not(.space) .irow:hover{background:rgba(8,40,27,.07)}
.irn{font-size:12.5px;font-weight:500}
.irs{font-size:10.5px;color:var(--ink-soft);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

@media (max-width:760px){
  .ibtn{top:62px;left:calc(12px + var(--rg))}
}

/* ── Territory panel ────────────────────────────────────────────── */
/* Docked above the Layers panel, same width, same right edge — one column
   of readouts rather than two things sharing a corner. */
.tcard{
  position:fixed;right:20px;bottom:114px;z-index:620;
  width:250px;max-width:calc(100vw - 40px);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .16s var(--e),transform .18s var(--e),visibility 0s .18s;
  background:var(--glass);
  border:1px solid var(--edge);border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.36);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  color:var(--ink);padding:13px 14px 11px;pointer-events:none;
}
.tcard.on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .16s var(--e),transform .18s var(--e);
}
.th{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-bottom:11px;flex-wrap:wrap}
.th h4{margin:0;font-size:14px;font-weight:600;letter-spacing:-.015em}
.th span{font-size:10px;color:var(--ink-soft);letter-spacing:.02em}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.tm{min-width:0}
.tmv{font-size:15px;font-weight:600;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.tmv.pos{color:#4ED6A1}
.tmv.neg{color:#D98A6E}
.tml{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:3px}
.tmn{font-size:10px;color:var(--ink-soft);opacity:.75;margin-top:2px}
.tproj{
  margin-top:13px;padding:11px 12px;border-radius:11px;
  background:rgba(78,214,161,.09);border:1px solid rgba(78,214,161,.28);
}
.tfoot{margin-top:12px;padding-top:10px;border-top:1px solid var(--edge);
  font-size:10.5px;color:var(--ink-soft)}
.tsrc{margin-top:6px;font-size:9px;letter-spacing:.06em;
  color:var(--ink-soft);opacity:.6}
html[data-theme=light] body:not(.sat):not(.space) .tmv.pos{color:#1B6B4E}
html[data-theme=light] body:not(.sat):not(.space) .tmv.neg{color:#A8452A}
html[data-theme=light] body:not(.sat):not(.space) .tproj{
  background:rgba(27,107,78,.08);border-color:rgba(27,107,78,.25)}
@media (max-width:900px){ .tcard:not(.sel){display:none} }
@media (max-height:760px){ .tcard .tfoot,.tcard .tsrc{display:none} }

/* An outlet belongs to someone else — its eyebrow is neither our green nor
   the amber of something of ours in flight. */
.sst.cool{color:#8FB8C9}

/* ── Hover readout ──────────────────────────────────────────────── */
.tip{
  position:fixed;top:0;left:0;z-index:640;
  background:var(--glass-solid);
  border:1px solid var(--edge);
  border-radius:9px;
  padding:6px 10px;
  font-size:12.5px;font-weight:500;
  color:var(--ink);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  white-space:nowrap;pointer-events:none;
}
.tip span{display:block;font-weight:400;font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.tip[hidden]{display:none}

/* Only shown when something is wrong, e.g. the basemap is refused. */
.note{
  position:fixed;left:calc(26px + var(--rg));top:158px;z-index:620;
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:999px;
  padding:7px 14px;font-size:12px;color:var(--ink-soft);
}
.note[hidden]{display:none}

/* ── MapLibre chrome ────────────────────────────────────────────── */
.maplibregl-ctrl-group{
  background:var(--glass-solid) !important;
  border:1px solid var(--edge) !important;
  border-radius:10px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.28) !important;
  overflow:hidden;
}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--edge) !important}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(var(--icon-invert,1))}
html[data-theme=light] body:not(.space) .maplibregl-ctrl-group button .maplibregl-ctrl-icon{
  filter:invert(0);
}
.maplibregl-ctrl-attrib{
  background:var(--glass) !important;
  color:var(--ink-soft) !important;
  font-size:10.5px !important;
  border-radius:6px 0 0 0;
}
.maplibregl-ctrl-attrib a{color:var(--ink) !important}
.maplibregl-ctrl-attrib.maplibregl-compact{background:var(--glass-solid) !important}

.failbox{
  position:relative;z-index:5;
  margin:20vh auto 0;max-width:430px;text-align:center;color:#F2E7DA;
}
.failbox p{color:rgba(242,231,218,.7);font-size:14px;line-height:1.55}

@media (max-width:760px){
  :root{--rg:62px}
  .brandmark{top:14px;left:calc(12px + var(--rg));height:34px}
  /* At this width the title card and the wordmark were colliding, so the
     card drops below the switches instead of sitting beside the logo. */
  /* The view pill takes the top right on a phone, so the title card goes:
     the wordmark and the tab title carry the name. */
  .titlecard{display:none}
  .switches{top:auto;bottom:150px;right:12px;gap:6px}
  .seg button{padding:5px 10px;font-size:11.5px}
  .controls{left:calc(10px + var(--rg));right:12px;bottom:34px;max-width:none}
  .tlist{width:100%;max-height:34vh}
  .pill{padding:11px 18px;font-size:13.5px}
  .hero{left:calc(10px + var(--rg));right:16px;top:auto;bottom:30%;transform:none;max-width:none}
  .hero h1{font-size:clamp(26px,8vw,38px)}
  .hero p{font-size:14px;max-width:none}
  .rail{gap:9px;font-size:9.5px;flex-wrap:wrap}
  .note{top:auto;bottom:118px;left:calc(10px + var(--rg));font-size:11px}
  .tip{display:none !important}
  /* Three lines of attribution over the controls is a mess; the compact
     form keeps the credit without eating the corner. */
  .maplibregl-ctrl-attrib{font-size:9px !important;max-width:62vw;
                          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media (prefers-reduced-motion:reduce){
  .pill.pulse::after{animation:none;opacity:.4}
  .storepin .zpin{animation:none !important}
  .storepin .zpin::after{animation:none;opacity:0}
}

/* ════════════════════════════════════════════════════════════════════
   United Kingdom additions
   ════════════════════════════════════════════════════════════════════ */

/* ── Top centre: view pill, search, count cards ─────────────────────
   One column, centred: what the map is showing, how to find a thing you
   can name, and the numbers for whatever is in view. */
.topc{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:660;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:calc(100vw - 2 * var(--rg) - 560px);min-width:min(640px,100vw);
  pointer-events:none;
}
.topc > *{pointer-events:auto}
.toprow{display:flex;align-items:center;gap:10px}
.viewhost{display:flex}
/* The shared pill is tuned for dark glass. Over a light basemap it takes
   the shared light variant, switched here rather than rebuilt. */
.viewhost .zs-seg{box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px 1px rgba(0,0,0,.12)}

/* ── Count cards ─────────────────────────────────────────────────── */
.counts{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:1;visibility:visible;
  transition:opacity .5s var(--e),visibility .5s var(--e);
}
body.hero-on .counts{opacity:0;visibility:hidden}
.counts[hidden]{display:none}
.cscope{
  display:flex;align-items:center;gap:10px;
  font-size:10.5px;letter-spacing:.04em;color:var(--ink-soft);
  background:var(--glass);border:1px solid var(--edge);border-radius:999px;padding:4px 6px 4px 12px;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
}
.cscope:not(:has(button)){padding-right:12px}
html[data-theme=light] body:not(.sat):not(.space) .cscope{text-shadow:none}
.cscope b{color:var(--ink);font-weight:600;letter-spacing:0}
.cscope .clive{display:inline-flex;align-items:center;gap:5px}
.cscope .clive::before{content:'';width:6px;height:6px;border-radius:50%;background:#3DDC84;
  box-shadow:0 0 0 3px rgba(61,220,132,.18)}
.cscope .clive.stale::before{background:#FFC24D;box-shadow:0 0 0 3px rgba(255,194,77,.2)}
.cscope button{
  font:inherit;font-size:10.5px;color:var(--ink);cursor:pointer;
  background:var(--glass);border:1px solid var(--edge);border-radius:999px;padding:3px 9px;
}
.cscope button:hover{border-color:var(--ink)}
.crow{display:flex;gap:6px;align-items:stretch}
.chead{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  min-width:84px;padding:8px 11px;text-align:left;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  border-radius:12px;border:1px dashed var(--edge);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
}
html[data-theme=light] body:not(.sat):not(.space) .chead{text-shadow:none}
.chead b{display:block;font-size:12px;letter-spacing:-.01em;text-transform:none;color:var(--ink);
  font-weight:600;margin-top:2px}
button.ccard{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  min-width:86px;max-width:118px;padding:8px 11px 8px 12px;
  font:inherit;text-align:left;color:var(--ink);cursor:pointer;
  background:var(--glass);border:1px solid var(--edge);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.26);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  transition:border-color .18s var(--e),opacity .25s var(--e),transform .18s var(--e);
}
button.ccard:hover{border-color:var(--edge-lift)}
button.ccard:active{transform:translateY(1px)}
button.ccard:focus-visible{outline:2px solid #4ED6A1;outline-offset:2px}
/* The stage colour runs down the left edge, like a tab on a file. */
button.ccard::before{
  content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:var(--c,#888);
}
button.ccard.avail::before{
  width:5px;background:repeating-linear-gradient(135deg,var(--c) 0 2px,transparent 2px 4px);
}
.ccard .cn{font-size:19px;font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.ccard .cn small{font-size:11px;font-weight:500;color:var(--ink-soft);letter-spacing:0;margin-left:3px}
.ccard .cl{font-size:10px;line-height:1.2;color:var(--ink-soft)}
.ccard .ctag{
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--c);margin-top:1px;
}
button.ccard.zero .cn{opacity:.45}
button.ccard[aria-pressed=true]{border-color:var(--c);box-shadow:0 8px 24px rgba(0,0,0,.26),0 0 0 1px var(--c)}
.crow.filtering button.ccard[aria-pressed=false]{opacity:.5}
/* Stores opened (Australia): the one card larger than the rest. */
button.ccard.nr{min-width:132px;max-width:none;padding:10px 16px 10px 17px;gap:4px;justify-content:center}
button.ccard.nr::before{width:4px;top:10px;bottom:10px}
.ccard.nr .cn{font-size:38px;letter-spacing:-.04em}
.ccard.nr .cl{font-size:11px;color:var(--ink);font-weight:600}
.ccard.nr .ctag{margin:0}
.cnote{font-size:10.5px;color:var(--ink-soft);text-shadow:0 1px 3px rgba(0,0,0,.45)}
html[data-theme=light] body:not(.sat):not(.space) .cnote{text-shadow:none}

/* ── Pipeline pin: stage badge ───────────────────────────────────── */
/* The chip stays neon green whatever the stage — the chip colour is what
   separates a site in the pipeline from a trading store, and that one
   difference must never be diluted. The stage rides on a small badge. */
.zpin .sbadge{
  position:absolute;right:-4px;top:-4px;width:10px;height:10px;border-radius:50%;
  background:var(--sc,#888);border:1.5px solid #0B1116;pointer-events:none;
}

/* ── Territory labels ────────────────────────────────────────────── */
.rlab{font-size:11px;letter-spacing:.06em}
.rlab i{font-style:normal;display:inline-block;padding:2px 6px;border-radius:6px;
  background:rgba(8,12,16,.55);color:#F2E7DA;text-shadow:none}
html[data-theme=light] body:not(.sat):not(.space) .rlab i{background:rgba(255,255,255,.8);color:#08281B}

/* ── Territory list additions ────────────────────────────────────── */
button.trow i.avail{background:repeating-linear-gradient(135deg,var(--c) 0 2px,transparent 2px 4px) !important;
  box-shadow:inset 0 0 0 1px var(--c)}
button.trow .tnum{min-width:58px;text-align:right}
.tlist::-webkit-scrollbar{width:8px}
.tlist::-webkit-scrollbar-thumb{background:rgba(242,231,218,.24);border-radius:999px;
  border:2px solid transparent;background-clip:content-box}

/* ── DA panel (the territory card) ───────────────────────────────── */
.tcard{width:280px}
.tcard .tno{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.tcard .tstat{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--c);
  padding:3px 9px 3px 7px;border-radius:999px;border:1px solid var(--c);
  background:color-mix(in srgb,var(--c) 14%,transparent);
}
.tcard .tstat i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.tcard .tstat.avail i{background:repeating-linear-gradient(135deg,var(--c) 0 2px,transparent 2px 4px);
  box-shadow:inset 0 0 0 1px var(--c)}
.tcard .tstat em{font-style:normal;font-weight:500;opacity:.8}
.tcard .srow{font-size:11.5px}
.tcard .srow .v{max-width:170px}
.tcard .tgrid{grid-template-columns:1fr 1fr 1fr;margin-top:11px}
.tsched{display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:6px}
.tsched span{flex:1;background:var(--ink-soft);opacity:.55;border-radius:2px 2px 0 0;min-height:2px}
.tsched-l{display:flex;justify-content:space-between;font-size:8.5px;color:var(--ink-soft);opacity:.7;margin-top:3px}
.tcard.sel{pointer-events:auto}

/* ── Notes and banners ───────────────────────────────────────────── */
.note.live{top:196px}
.note.live.bad{color:#FFC24D;border-color:rgba(255,194,77,.45)}
.banner{
  position:fixed;z-index:630;left:calc(26px + var(--rg));top:236px;max-width:320px;
  padding:12px 14px;border-radius:12px;font-size:12px;line-height:1.5;
  background:var(--glass-solid);border:1px solid rgba(255,138,76,.55);color:var(--ink);
  box-shadow:0 12px 34px rgba(0,0,0,.36);
}
.banner b{display:block;color:#FF8A4C;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.banner code{font-size:11px;background:rgba(242,231,218,.1);padding:1px 5px;border-radius:5px}
.banner[hidden]{display:none}
.banner.dev{top:auto;bottom:16px;left:50%;transform:translateX(-50%);max-width:none;
  padding:6px 12px;border-radius:999px;font-size:11px;white-space:nowrap}
.banner.dev b{display:inline;margin:0 8px 0 0}

/* Index rows for sites with no position yet. */
.irow[disabled]{cursor:default;opacity:.55}
.irow .irs em{font-style:normal;color:#FFC24D}
button.lyr.muted{opacity:.5}

/* ── Narrower desktops ───────────────────────────────────────────── */
@media (max-width:1280px){
  .topc{max-width:calc(100vw - 2 * var(--rg) - 360px)}
  button.ccard{min-width:74px;padding:7px 9px 7px 11px}
  .ccard .cn{font-size:17px}
  .chead{min-width:64px}
  button.ccard.nr{min-width:112px}
  .ccard.nr .cn{font-size:32px}
}
@media (max-width:1100px){
  .toprow{flex-direction:column;gap:8px}
  .sbox{width:min(340px,70vw)}
  .crow{flex-wrap:wrap;justify-content:center}
  .chead{flex-basis:100%;align-items:center;justify-content:center;flex-direction:row;gap:8px;padding:5px 10px}
  .chead b{margin:0}
}

/* ── Phone ───────────────────────────────────────────────────────
   Row one: wordmark, view pill. Row two: index, search. Then the numbers,
   scrolling sideways. The stage controls hold the bottom; the Layers panel
   folds to one button (which also carries the basemap switches), and a
   chosen territory's DA panel takes the list's place. */
@media (max-width:760px){
  .brandmark{height:26px;top:18px}
  .topc{top:12px;left:auto;right:12px;transform:none;align-items:flex-end;
    width:auto;max-width:none;min-width:0}
  .toprow{flex-direction:column;align-items:flex-end;gap:8px}
  .sbox{position:fixed;top:58px;left:calc(58px + var(--rg));right:12px;width:auto;min-width:0;height:38px}
  .ibtn{top:58px}
  .counts{position:fixed;top:106px;left:calc(10px + var(--rg));right:0;align-items:flex-start}
  .cscope{font-size:10px;max-width:calc(100% - 12px);flex-wrap:wrap;row-gap:2px}
  .crow{max-width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:0 12px 2px 0;
    scrollbar-width:none}
  .crow::-webkit-scrollbar{display:none}
  .chead{flex-basis:auto;flex-direction:column;align-items:flex-start;justify-content:center;min-width:62px;flex:none;padding:6px 8px}
  button.ccard{min-width:68px;flex:none;padding:6px 8px 6px 10px}
  .ccard .cn{font-size:16px}
  .ccard .cl{font-size:9.5px}
  .ccard .ctag{font-size:7px}
  button.ccard.nr{min-width:96px;padding:6px 10px 6px 12px}
  .ccard.nr .cn{font-size:26px}
  .banner{left:calc(10px + var(--rg));right:12px;top:auto;bottom:130px;max-width:none}
  .banner.dev{left:calc(10px + var(--rg));right:12px;transform:none;bottom:6px;font-size:9px;padding:4px 10px;
    overflow:hidden;text-overflow:ellipsis}
  .maplibregl-ctrl-group{display:none}
  /* The scope line already says "Offline · 14:05"; on a phone that is the
     whole message, and the basemap note is dropped as Melbourne did. */
  .note,.note.live{display:none !important}

  .controls{bottom:30px}
  .tlist{max-height:30vh}
  body.tsel .tlist{display:none}

  .layers{right:12px;bottom:104px;width:200px;padding:6px}
  .layers .lhead{cursor:pointer;padding:6px 8px;display:flex;justify-content:space-between;align-items:center}
  .layers .lhead::after{content:'+';font-size:14px;letter-spacing:0}
  .layers.open .lhead::after{content:'–'}
  .layers:not(.open) .lrows{display:none}
  .layers:not(.open){width:auto}
  body.stage-territories .layers{display:none}
  .switches{display:none;top:auto;right:12px;bottom:auto;gap:6px}
  body.layers-open .switches{display:flex}

  .tcard{display:block}
  .tcard:not(.sel){display:none}
  .tcard.sel{left:calc(10px + var(--rg));right:12px;width:auto;top:auto;bottom:132px !important;
    max-height:calc(100vh - 400px);overflow-y:auto;padding:11px 12px 9px}
  .tcard.sel .tfoot,.tcard.sel .tsrc,.tcard.sel .tsched,.tcard.sel .tsched-l{display:none}
  .tcard.sel .tgrid{margin-top:8px}
}
@media (max-width:900px) and (min-width:761px){ .tcard:not(.sel){display:none} .tcard.sel{display:block} }
.tlist .thead{display:flex;justify-content:space-between;padding:6px 10px 4px 44px;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* Layer switches on a light surface: Melbourne's cream track vanished on
   cream. Same switch, ink-coloured track. */
html[data-theme=light] body:not(.sat):not(.space) button.lyr .ltrack{
  background:rgba(8,40,27,.12);box-shadow:inset 0 0 0 1px rgba(8,40,27,.22)}
html[data-theme=light] body:not(.sat):not(.space) button.lyr:hover{background:rgba(8,40,27,.06)}
html[data-theme=light] body:not(.sat):not(.space) button.lyr[aria-checked=true] .ltrack{background:currentColor}
html[data-theme=light] body:not(.sat):not(.space) button.lyr[aria-checked=true] .lknob{background:#FFFFFF}
html[data-theme=light] body:not(.sat):not(.space) .rail li{text-shadow:none}
html[data-theme=light] body:not(.sat):not(.space) .rail li.now{color:var(--ink)}

/* ════════════════════════════════════════════════════════════════════
   Zambrero Development additions
   ════════════════════════════════════════════════════════════════════ */

:root{
  --neon:#2BFF88;
  --trade:#F2E7DA;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── The opening ────────────────────────────────────────────────────
   Pure black, the name typed out in cream with a caret, and a quiet
   prompt once it has finished. It lifts off the globe rather than
   cutting to it: the black fades, the type rises and softens, and the
   planet (already turning underneath) settles in. */
.intro{
  position:fixed;inset:0;z-index:9000;background:#000;overflow:hidden;cursor:default;
  transition:opacity 1.5s cubic-bezier(.4,0,.2,1),visibility 0s 1.5s;
}
.zi3-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.zi3-hud{position:absolute;left:max(28px,env(safe-area-inset-left));top:max(26px,env(safe-area-inset-top));pointer-events:none;color:#F2E7DA}
.zi3-k{font:500 10px/1 var(--mono,ui-monospace),monospace;letter-spacing:2.4px;color:#C4A384;opacity:.9}
.zi3-cap{margin-top:10px;font-size:15px;font-weight:500;letter-spacing:.2px;min-height:20px;transition:opacity .5s}
.zi3-sub{margin-top:6px;font:400 11px/1.5 var(--mono,ui-monospace),monospace;color:rgba(242,231,218,.55);max-width:320px;transition:opacity .5s}
.zi3-clock{position:absolute;right:max(28px,env(safe-area-inset-right));top:max(26px,env(safe-area-inset-top));font:500 10px/1 var(--mono,ui-monospace),monospace;letter-spacing:2px;color:rgba(242,231,218,.5)}
.zi3-bar{position:absolute;left:0;bottom:0;height:2px;background:#C4A384;width:0;opacity:.7}
.intro-skip{position:absolute;z-index:2;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));
  font:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,231,218,.78);
  background:rgba(242,231,218,.06);border:1px solid rgba(242,231,218,.2);border-radius:999px;padding:9px 16px;cursor:pointer;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:color .2s,background .2s,border-color .2s}
.intro-skip:hover,.intro-skip:focus-visible{color:#F2E7DA;background:rgba(242,231,218,.12);border-color:rgba(242,231,218,.4);outline:none}
.intro.out{opacity:0;visibility:hidden;pointer-events:none}

body.booting .brandmark,body.booting .ibtn,body.booting .hero,body.booting .topc,body.booting .switches,
body.booting .controls,body.booting .layers,body.booting .zs-rail,body.booting .maplibregl-ctrl-bottom-right,
body.booting .titlecard{opacity:0 !important;pointer-events:none}
.brandmark,.ibtn,.switches,.controls,.zs-rail,.maplibregl-ctrl-bottom-right{transition:opacity .9s var(--e) .35s}

/* A vignette in space: the frame darkens toward its corners, so the lit
   planet reads as lit. */
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1s var(--e);
  background:radial-gradient(120% 90% at 62% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
body.space .vignette{opacity:1}
@media (max-width:900px){ .vignette{background:radial-gradient(130% 80% at 50% 36%,transparent 50%,rgba(0,0,0,.55) 100%)} }

/* ── The globe's copy and the choice of country ──────────────────── */
.hero{pointer-events:none;max-width:min(470px,44vw)}
body.hero-on .hero{pointer-events:auto}
.hero .eyebrow{color:#C4A384;font-size:10.5px;letter-spacing:.22em;margin-bottom:20px}
.hero h1{font-size:clamp(34px,4.8vw,64px);letter-spacing:-.04em;line-height:.98;font-weight:500;margin-bottom:18px}
.hero p{font-size:15px;line-height:1.6;max-width:360px}
.choices{display:flex;flex-direction:column;gap:10px;margin-top:30px;max-width:380px}
.choices .checking{font-size:12.5px;color:rgba(242,231,218,.55);letter-spacing:.02em}
button.choice{
  position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;
  align-items:center;column-gap:16px;text-align:left;width:100%;
  font:inherit;color:#F5EEE5;cursor:pointer;
  padding:15px 20px 14px;border-radius:18px;
  background:linear-gradient(180deg,rgba(242,231,218,.12),rgba(242,231,218,.05));
  border:1px solid rgba(242,231,218,.24);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 14px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .35s var(--e),border-color .25s var(--e),background .25s var(--e),opacity .5s var(--e);
  animation:rise .9s var(--e) both;
}
button.choice:nth-child(2){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
button.choice:hover{transform:translateX(4px);border-color:rgba(242,231,218,.6);
  background:linear-gradient(180deg,rgba(242,231,218,.18),rgba(242,231,218,.08))}
button.choice:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
button.choice .ck{grid-column:1;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,231,218,.55)}
button.choice .cname{grid-column:1;font-size:21px;font-weight:500;letter-spacing:-.02em;margin-top:3px}
button.choice .csub{grid-column:1;font-size:11.5px;color:rgba(242,231,218,.6);margin-top:6px;font-variant-numeric:tabular-nums}
button.choice .carrow{grid-column:2;grid-row:1/4;opacity:.7;transition:transform .35s var(--e),opacity .25s}
button.choice:hover .carrow{transform:translateX(3px);opacity:1}
.choices.leaving button.choice{opacity:.35;pointer-events:none}
i.dp,i.dt{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 5px 0 0;vertical-align:.5px}
i.dp{background:var(--neon);box-shadow:0 0 6px rgba(43,255,136,.7)}
i.dt{background:var(--trade);box-shadow:0 0 6px rgba(255,255,255,.5)}
button.choice .csub i.dp{margin-left:10px}
.cfail{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:16px 18px;border-radius:16px;
  background:rgba(10,16,22,.7);border:1px solid rgba(255,138,76,.5);font-size:13px;line-height:1.5;color:rgba(242,231,218,.8)}
.cfail b{color:#F5EEE5;font-weight:600}
.cfail .pill{margin-top:6px;padding:9px 18px;font-size:13px}

/* ── Title card: the name, and where you are ─────────────────────── */
.titlecard{display:flex;align-items:baseline;gap:10px}
.titlecard em{font-style:normal;color:var(--ink-soft);font-weight:400;margin-left:10px;padding-left:10px;border-left:1px solid var(--edge)}

/* ── Stage rail ──────────────────────────────────────────────────── */
.rail:empty{display:none}
.rail li{font-variant-numeric:tabular-nums}

/* ── Australia: the state list ───────────────────────────────────── */
.slist{
  display:none;flex-direction:column;width:320px;padding:5px;
  background:var(--glass);border:1px solid var(--edge);border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
}
.slist.on{display:flex}
.slist .thead,.tlist .thead.au{display:flex;justify-content:space-between;align-items:center;padding:6px 10px 5px;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.slist .thead .thr{display:flex;align-items:center;gap:2px;letter-spacing:.1em}
.slist .thead .thr i{margin-left:8px}
button.srow2{
  display:flex;align-items:center;gap:10px;width:100%;
  font:inherit;text-align:left;color:var(--ink);background:transparent;border:0;border-radius:9px;
  padding:6px 10px;cursor:pointer;transition:background .18s var(--e),opacity .25s var(--e);
}
button.srow2:hover,button.srow2.on{background:rgba(242,231,218,.1)}
button.srow2.off{opacity:.45}
button.srow2:focus-visible{outline:2px solid #4ED6A1;outline-offset:-2px}
button.srow2 .scode{font-family:var(--mono);font-size:10.5px;font-weight:500;width:32px;flex:none;color:var(--ink-soft);letter-spacing:.04em}
button.srow2 .tname{flex:1;font-size:12.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.srow2 .tname em{font-style:normal;font-weight:400;font-size:10px;color:var(--ink-soft);margin-left:4px}
button.srow2 .tname em.dev{color:#FF8A4C;letter-spacing:.08em;text-transform:uppercase;font-size:8.5px}
button.srow2 .tnum{display:flex;gap:12px;font-size:11.5px;font-variant-numeric:tabular-nums}
button.srow2 .tnum b{font-weight:500;min-width:22px;text-align:right}
button.srow2 .tnum b.p{color:var(--neon)}
button.srow2 .tnum b.t{color:var(--ink)}

/* On the map: a chip per state with its code and our two numbers. */
.schip{
  display:flex;align-items:center;gap:8px;padding:6px 10px 6px 9px;border-radius:11px;cursor:pointer;
  font:inherit;font-size:11px;color:#F5EEE5;font-variant-numeric:tabular-nums;
  background:rgba(8,12,16,.62);border:1px solid rgba(242,231,218,.26);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:border-color .2s,opacity .25s,background .2s,box-shadow .2s;
}
.schip b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.05em;padding-right:2px}
.schip span{display:inline-flex;align-items:center}
.schip:hover,.schip.on{border-color:rgba(242,231,218,.8);background:rgba(8,12,16,.84);box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 3px rgba(242,231,218,.14)}
.schip.off{opacity:.45}
.schip:focus-visible{outline:2px solid var(--neon);outline-offset:2px}

/* ── A state whose territories are not built ─────────────────────── */
.notbuilt{
  max-width:380px;padding:13px 15px;border-radius:14px;font-size:12px;line-height:1.5;color:var(--ink);
  background:var(--glass-solid);border:1px solid rgba(255,194,77,.45);
  box-shadow:0 12px 34px rgba(0,0,0,.36);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.notbuilt b{display:block;font-weight:600;margin-bottom:3px}
.notbuilt p{margin:0 0 8px;color:var(--ink-soft)}
.notbuilt code{display:block;white-space:pre;font-family:var(--mono);font-size:10.5px;line-height:1.6;
  padding:8px 10px;border-radius:9px;background:rgba(242,231,218,.08);border:1px solid var(--edge);overflow-x:auto}
.notbuilt[hidden]{display:none}

/* ── Search areas and site opportunities (Melbourne's two lists) ─── */
.apin{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px}
.apin b{position:absolute;inset:-8px;border-radius:999px;background:radial-gradient(circle,var(--c-a) 0%,transparent 70%);opacity:.6;pointer-events:none}
.apin i{display:block;border-radius:999px}
.apin.search{
  --c:#29A8FF;--c-a:rgba(41,168,255,.85);width:29px;height:29px;
  border:3px dashed var(--c);background:rgba(41,168,255,.25);
  box-shadow:0 0 0 1.5px rgba(8,12,16,.55),0 0 12px 2px rgba(41,168,255,.6),0 2px 9px rgba(0,0,0,.5);
}
.apin.search i{width:8px;height:8px;background:var(--c);box-shadow:0 0 0 2px #F7F1E9,0 0 0 3px rgba(8,12,16,.5)}
.apin.sites{
  --c:#8257C8;--c-a:rgba(130,87,200,.9);width:26px;height:26px;background:var(--c);border:3px solid #F7F1E9;
  box-shadow:0 0 0 1px rgba(8,12,16,.45),0 0 10px 2px rgba(130,87,200,.85),0 0 26px 8px rgba(130,87,200,.5),0 2px 9px rgba(0,0,0,.5);
  animation:glowPulse 2.8s ease-in-out var(--d,0s) infinite;
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(8,12,16,.45),0 0 10px 2px rgba(130,87,200,.8),0 0 26px 8px rgba(130,87,200,.45),0 2px 9px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 1px rgba(8,12,16,.45),0 0 16px 4px rgba(130,87,200,1),0 0 40px 14px rgba(130,87,200,.65),0 2px 9px rgba(0,0,0,.5)}
}
.apin.sites i{width:7px;height:7px;border-radius:1.5px;background:#F7F1E9;transform:rotate(45deg)}
.apin.sites b{inset:-14px}
.storepin.loose .apin{border-style:dashed}
.sdot.search{background:#29A8FF}
.sdot.sites{background:#8257C8}
.sdot.state{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-soft);border-radius:50%}
.scc{font-family:var(--mono);font-size:9px;letter-spacing:.06em;padding:1px 5px;border-radius:5px;
  border:1px solid var(--edge);color:var(--ink-soft);flex:none;margin-right:2px}
.irn .scc{margin-right:7px;vertical-align:1px}
.irow.istate .irn{font-weight:600}

/* ── Territory labels, Australia (names, as Melbourne) ───────────── */
.rlab.au{font-size:10.5px;letter-spacing:.12em}
.rlab.faded{opacity:.22}

/* ── The territory panel, Australia ──────────────────────────────── */
.tcard .tno i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:6px;vertical-align:0}
.tcard .tgrid.tours{grid-template-columns:1fr 1fr;margin:0 0 12px;padding-bottom:11px;border-bottom:1px solid var(--edge)}
.tcard .tgrid.tours .tm:first-child .tmv{color:var(--neon)}
.tcard .tgrid:not(.tours){grid-template-columns:1fr 1fr}
body.uk .tcard .tgrid{grid-template-columns:1fr 1fr 1fr}

/* The trading card's tab is cream in both countries — the chip colour
   of a trading pin, never the neon of one in the pipeline. */
button.ccard.trade::before{box-shadow:0 0 0 1px rgba(0,0,0,.25)}

/* ── Refinements to the shared chrome ────────────────────────────── */
.pill{letter-spacing:-.005em}
.cscope b{font-weight:600}
.ccard .cn{font-feature-settings:'tnum' 1}
.sbox{transition:border-color .18s var(--e),box-shadow .18s var(--e),width .35s var(--e)}
.viewhost[hidden]{display:none}
.rlab i{font-family:var(--mono);font-weight:500}
.tlist .thead.au .thr{letter-spacing:.1em}

@media (max-width:900px){
  .hero{max-width:none}
}
@media (max-width:760px){
  .zi3-sub{display:none}
  .hero{bottom:auto;top:auto;bottom:34px}
  .hero h1{font-size:clamp(30px,10vw,42px);margin-bottom:10px}
  .hero p{font-size:13px}
  .hero .eyebrow{margin-bottom:12px}
  .choices{margin-top:18px;gap:8px;max-width:none}
  button.choice{padding:12px 16px 11px;border-radius:15px}
  button.choice .cname{font-size:18px}
  .slist{width:100%;max-height:34vh;overflow-y:auto}
  .slist .thead .thr{display:none}
  button.srow2{padding:5px 8px}
  .schip{padding:4px 7px;gap:5px;font-size:10px}
  .schip span:last-child{display:none}
  .notbuilt{max-width:none}
  .titlecard em{display:none}
  .scc{display:none}
}
@media (prefers-reduced-motion:reduce){
  .intro{transition:opacity .2s linear !important}
  button.choice{animation:none}
  .apin.sites{animation:none}
  .brandmark,.ibtn,.hero,.switches,.controls,.zs-rail{transition:none}
}
button.lyr[hidden]{display:none}
/* The card is the thing being read: above the command strip, never under it. */
.scard{z-index:4100}
@media (max-width:760px){
  .titlecard{display:none !important}
  /* At the Australia stage the state list is the control; the layers wait
     for a state (the pins are on by default and the rest need one). */
  body.stage-australia .layers{display:none}
  .slist{max-height:30vh}
  button.srow2 .scode{width:28px}
}

/* The stage rail and the counts' footnote sit over the spotlight's dim, not
   over the page, so they carry their own glass: legible on imagery, in
   space and on a dimmed light basemap alike. */
.rail{
  align-self:flex-start;padding:6px 14px 6px 12px;margin-bottom:2px;border-radius:999px;
  background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
}
.rail li{opacity:.72;text-shadow:none}
.rail li.done{opacity:.8}
.cnote{max-width:min(640px,80vw);white-space:normal;text-align:center;padding:3px 11px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);text-shadow:none !important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cnote:empty{display:none}
html[data-theme=light] body:not(.sat):not(.space) .pill{background:rgba(255,255,255,.9);border-color:rgba(8,40,27,.28)}
html[data-theme=light] body:not(.sat):not(.space) .pill:hover{background:#fff;border-color:rgba(8,40,27,.6)}
html[data-theme=light] body:not(.sat):not(.space) .pill.ghost{background:rgba(255,255,255,.72);color:#3E4A44}
@media (max-width:760px){ .rail{padding:5px 10px;row-gap:3px} }
/* The index opens over the command strip, not under it; it has a close of its own. */
.idrawer{z-index:4050}
html[data-theme=light] body:not(.sat):not(.space) .tcard .tgrid.tours .tm:first-child .tmv{color:#0E9A55}

/* ════════════════════════════════════════════════════════════════════
   Fixes: steps, overlaps, panels
   ════════════════════════════════════════════════════════════════════ */

/* A step already taken on the rail is a way back to it. */
.rail li.done button{
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  background:none;border:0;padding:2px 4px;margin:-2px -4px;border-radius:6px;cursor:pointer;
  transition:color .18s var(--e),background .18s var(--e);
}
.rail li.done button:hover{color:var(--ink);background:rgba(242,231,218,.12);text-decoration:underline;text-underline-offset:3px}
html[data-theme=light] body:not(.sat):not(.space) .rail li.done button:hover{background:rgba(8,40,27,.08)}
.rail li.done button:focus-visible{outline:2px solid #4ED6A1;outline-offset:1px}
.rail li.done:has(button:hover){opacity:1}

/* The notes are placed from app.js (under the index button, or under the
   count cards when those reach across). */

/* The territory panel scrolls when it is taller than the room it has. */
.tcard{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(242,231,218,.24) transparent}
/* A site card open is the thing being read; the territory panel steps back. */
body.card-on .tcard{opacity:0;visibility:hidden;pointer-events:none}

/* The dev banner owns the bottom strip; the stage controls sit above it. */
@media (min-width:761px){ body.has-dev .controls{bottom:58px} }

/* The mini map's basemap switch gets the hover everything else has. */
.sbase button{transition:color .18s var(--e),background .18s var(--e)}
.sbase button:hover{color:var(--ink);background:rgba(242,231,218,.1)}

/* ── Tablet and narrow desktop ─────────────────────────────────────
   The centred column (pill, search, count cards) no longer fits between
   the wordmark and the title card. The pill and search share a row
   between the index button and the basemap switches; the count cards run
   full width under all of it. */
@media (min-width:761px) and (max-width:1180px){
  .topc{top:96px;left:calc(var(--rg) + 78px);right:190px;transform:none;min-width:0;max-width:none;align-items:flex-start}
  .toprow{flex-direction:row;width:100%;gap:10px}
  .sbox{flex:1;width:auto;min-width:180px;max-width:360px}
  .counts{position:fixed;top:154px;left:calc(var(--rg) + 16px);right:16px;align-items:center}
  .crow{flex-wrap:wrap;justify-content:center}
  .chead{flex-basis:auto;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:6px 9px;min-width:62px}
  .chead b{margin-top:2px}
  button.ccard{min-width:70px;padding:6px 8px 6px 11px}
  .ccard .cn{font-size:16px}
}
.note.low{left:50%;transform:translateX(-50%);white-space:nowrap}
/* Up to tablet width the Layers panel folds to one button, as on a phone. */
@media (min-width:761px) and (max-width:1100px){
  .layers .lhead{cursor:pointer;padding:6px 8px;display:flex;justify-content:space-between;align-items:center;gap:10px}
  .layers .lhead::after{content:'+';font-size:14px;letter-spacing:0}
  .layers.open .lhead::after{content:'–'}
  .layers:not(.open) .lrows{display:none}
  .layers:not(.open){width:auto;padding:6px}
  .layers .lhead:hover{color:var(--ink)}
}

/* Update 22 · a state's areas: its capital, then every regional area. */
.slist.alist{max-height:min(62vh,560px);overflow-y:auto;overscroll-behavior:contain}
button.srow2.arow{align-items:flex-start;padding:7px 10px}
button.srow2.arow .tname{display:flex;flex-direction:column;gap:1px;white-space:normal}
button.srow2.arow .tname em{margin-left:0;font-size:10.5px;line-height:1.3}
button.srow2.arow.cap{border-bottom:1px solid var(--edge);border-radius:9px 9px 0 0;margin-bottom:3px}
button.srow2.arow.cap .tname{font-size:13.5px}
button.srow2.arow .tnum{padding-top:2px}
.alist .aload{padding:6px 10px 8px;font-size:11px;color:var(--ink-soft)}
@media (max-width:760px){.slist.alist{max-height:34vh}}

/* ── update 23 · competitor brands under the Competitors layer ── */
.lbrands{flex:none;margin:2px 4px 6px 22px;padding:4px 0 2px;border-left:1px solid rgba(242,231,218,.14);max-height:min(46vh,340px);overflow:auto;overscroll-behavior:contain}
.lbrands[hidden]{display:none}
button.lbgrp{display:block;width:100%;text-align:left;font:inherit;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);background:none;border:0;padding:7px 10px 4px;cursor:pointer}
button.lbgrp:hover{color:var(--ink)}
.lbrow{display:grid;grid-template-columns:1fr 1fr;gap:1px 2px;padding:0 4px}
button.lbrand{display:flex;align-items:center;gap:6px;min-width:0;font:inherit;font-size:11.5px;color:var(--ink);background:transparent;border:0;border-radius:7px;padding:4px 6px;cursor:pointer;text-align:left;transition:background .18s var(--e),opacity .18s var(--e)}
button.lbrand:hover{background:rgba(242,231,218,.09)}
button.lbrand i{flex:none;min-width:22px;height:16px;padding:0 3px;border-radius:4px;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.02em;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
button.lbrand span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.lbrand em{font-style:normal;font-size:10px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
button.lbrand[aria-pressed=false]{opacity:.38}
button.lbrand[aria-pressed=false] i{filter:grayscale(1)}
.layers:has(.lbrands:not([hidden])){width:316px}
/* several brand lists open at once: the panel scrolls rather than running off the screen */
.layers{max-height:calc(100vh - 270px)}
.layers .lrows{overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin}
.lbrands{max-height:none;overflow:visible}

/* ── Demographics card (update 24) ──────────────────────────────── */
/* Same dock as the territory card; it stands in for it whenever no
   territory is being pointed at. */
.dcard{width:280px;overflow:auto;scrollbar-width:none}
.dcard::-webkit-scrollbar{display:none}
.dcard > *{transition:opacity .22s var(--e),transform .22s var(--e)}
.dcard.swap > *{opacity:0;transform:translateY(3px);transition:none}
.dhero{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;margin:2px 0 12px}
.dhero > div{min-width:0}
.dhero .dn{display:block;font-size:24px;font-weight:650;letter-spacing:-.035em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.dhero em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:4px}
.dhero .pos .dn{color:#4ED6A1}
.dhero .neg .dn{color:#D98A6E}
html[data-theme=light] body:not(.sat):not(.space) .dhero .pos .dn{color:#1B6B4E}
html[data-theme=light] body:not(.sat):not(.space) .dhero .neg .dn{color:#A8452A}
.dages{display:flex;height:8px;border-radius:5px;overflow:hidden;gap:2px;background:transparent}
.dages i{display:block;height:100%;min-width:2px;transition:width .65s cubic-bezier(.2,.7,.2,1)}
.dages i:nth-child(1){background:#7FD1AE}
.dages i:nth-child(2){background:#4ED6A1}
.dages i:nth-child(3){background:#2FA77B}
.dages i:nth-child(4){background:#E8C07A}
.dages i:nth-child(5){background:#D98A6E}
.dages i:nth-child(6){background:#B36A55}
.dagel{display:flex;justify-content:space-between;gap:6px;margin-top:6px;
  font-size:10px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dagel .dn{color:var(--ink);font-weight:600}
.tcard.dcard .tgrid.dgrid{grid-template-columns:1fr 1fr 1fr;gap:9px 10px;margin-top:13px}
.dcard .dgrid .tmv{font-size:14px}
@media (max-height:820px){ .dcard .dgrid .tm:nth-child(n+7){display:none} }

/* ── Two places: choose, route, compare (update 26) ─────────────── */
body.pair-arming .maplibregl-canvas,body.pair-arming .storepin{cursor:crosshair}
.sf .spair + .spair{margin-left:0}
.spair{font:inherit;font-size:10px;letter-spacing:.03em;padding:5px 10px;border-radius:999px;cursor:pointer;
  border:1px solid color-mix(in srgb,#4DF0A0 55%,transparent);background:color-mix(in srgb,#4DF0A0 12%,transparent);color:var(--ink)}
.spair:hover{background:color-mix(in srgb,#4DF0A0 22%,transparent)}
.pairpick{position:fixed;z-index:4300;width:236px;padding:12px;border-radius:14px;background:var(--glass-solid,rgba(12,17,22,.96));
  border:1px solid var(--edge);box-shadow:0 18px 44px rgba(0,0,0,.45);color:var(--ink);display:grid;gap:6px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:ppin .18s var(--e)}
@keyframes ppin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pairpick[hidden]{display:none}
.pairpick p{margin:0 0 4px;font-size:12px;line-height:1.4;color:var(--ink-soft)}
.pairpick p b{color:var(--ink);font-weight:600}
.pairpick button{font:inherit;font-size:13px;font-weight:550;text-align:left;padding:9px 12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--edge);background:rgba(242,231,218,.05);color:var(--ink)}
.pairpick button:hover:not([disabled]){background:rgba(242,231,218,.12)}
.pairpick button[disabled]{opacity:.45;cursor:not-allowed}
.pairpick .pp-x{border:0;background:none;color:var(--ink-soft);font-weight:500;padding:6px 12px}
.tripmark{font:600 12px/1 'Geist',sans-serif;color:#05080C}
.tripmark.a,.tripmark.b{width:28px;height:28px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;
  background:#4DF0A0;box-shadow:0 4px 10px rgba(0,0,0,.45);border:2px solid #05080C}
.tripmark.b{background:#F2E7DA}
.tripmark.a b,.tripmark.b b{transform:rotate(45deg);font-size:12px}
.tripmark.mid{padding:5px 9px;border-radius:999px;background:#05080C;color:#4DF0A0;border:1px solid rgba(77,240,160,.5);white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.trip{position:fixed;z-index:4200;left:50%;bottom:22px;width:min(560px,calc(100vw - 32px));transform:translate(-50%,16px);opacity:0;visibility:hidden;
  transition:opacity .2s var(--e),transform .25s var(--e),visibility 0s .25s;padding:14px 16px 12px;border-radius:16px;
  background:var(--glass-solid,rgba(12,17,22,.96));border:1px solid var(--edge);box-shadow:0 20px 50px rgba(0,0,0,.45);color:var(--ink);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.trip.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s var(--e),transform .25s var(--e)}
.trip header{display:grid;grid-template-columns:1fr auto 1fr auto;gap:12px;align-items:center;margin-bottom:8px}
.trip header small{display:block;font-size:10.5px;color:var(--ink-soft)}
.trip header b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trip header > span{color:var(--ink-soft)}
.tx{border:0;width:30px;height:30px;border-radius:50%;background:rgba(242,231,218,.08);color:var(--ink);cursor:pointer;font-size:18px;line-height:1}
.tcrow{font-size:12px;color:var(--ink-soft);margin-bottom:6px}
.trow{display:grid;grid-template-columns:14px 1fr auto auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--edge)}
.trow i{width:12px;height:4px;border-radius:2px;background:#4DF0A0}
.trow.walk i{background:repeating-linear-gradient(90deg,#F2E7DA 0 3px,transparent 3px 6px)}
.trow.pt i{background:#7FA7FF}
.trow b{display:block;font-size:13px;font-weight:600}
.trow small{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.trow em{font-style:normal;font-size:18px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.trow a{font-size:11px;color:var(--ink-soft);text-decoration:none;border:1px solid var(--edge);padding:4px 9px;border-radius:999px}
.trow a:hover{color:var(--ink);border-color:var(--ink)}
.tnote{margin:8px 0 0;font-size:11.5px;color:#FFC24D}
.pairdrawer{position:fixed;z-index:4400;top:16px;right:16px;bottom:16px;width:min(720px,calc(100vw - 32px));overflow:auto;padding:18px 22px 24px;
  border-radius:20px;background:rgba(8,12,16,.94);border:1px solid var(--edge);box-shadow:0 30px 80px rgba(0,0,0,.55);color:var(--chalk);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transform:translateX(calc(100% + 40px));transition:transform .45s var(--e);visibility:hidden}
html[data-theme=light] .pairdrawer{background:rgba(250,245,237,.96)}
.pairdrawer.on{transform:none;visibility:visible}
.pairdrawer header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pairdrawer h2{margin:0;flex:1;font-size:24px;font-weight:700;letter-spacing:-.03em}
.pd-open{font-size:13px;font-weight:600;text-decoration:none;color:var(--deck2);background:var(--chalk);padding:8px 14px;border-radius:999px}
.pd-load{padding:40px 0;text-align:center;color:var(--chalk3)}
.pd-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;justify-items:center;margin-bottom:8px}
.pd-cards .vs-side h3{font-size:16px;max-width:240px}
.pd-cards .fut.mid{--w:min(240px,40vw);cursor:pointer}
.pd-mid{margin:4px 0 18px}
.pd-mid .vs-row{grid-template-columns:44px 1fr 110px 1fr 44px}
.pairdrawer .vs-why{margin-top:0}
.pairdrawer .vs-line,.pairdrawer .vs-head{grid-template-columns:1fr 110px 110px}
.pd-note{margin:14px 0 0;font-size:12px;color:var(--chalk3)}
@media (prefers-reduced-motion:reduce){.pairdrawer,.trip{transition:none}}

/* Picking the second place (update 27) */
.pairbar{position:fixed;z-index:4300;left:50%;bottom:24px;transform:translate(-50%,10px);opacity:0;visibility:hidden;
  display:flex;align-items:center;gap:12px;padding:8px 8px 8px 12px;border-radius:999px;max-width:calc(100vw - 32px);
  background:var(--glass-solid,rgba(12,17,22,.96));border:1px solid var(--edge);box-shadow:0 16px 40px rgba(0,0,0,.4);color:var(--ink);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:opacity .2s var(--e),transform .25s var(--e),visibility 0s .25s}
.pairbar.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s var(--e),transform .25s var(--e)}
.pairbar i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:700;margin-right:7px;color:#05080C;flex:none}
.pb-a,.pb-b{display:flex;align-items:center;font-size:13px;font-weight:600;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.pb-a i{background:#4DF0A0}
.pb-b i{background:rgba(242,231,218,.25);color:var(--ink)}
.pb-b em{font-style:normal;font-weight:450;color:var(--ink-soft)}
.pb-b.lit i{background:#F2E7DA;color:#05080C}
.pb-arrow{width:22px;height:1px;background:var(--ink-soft);position:relative;flex:none}
.pb-arrow::after{content:'';position:absolute;right:0;top:-3px;border:3.5px solid transparent;border-left:5px solid var(--ink-soft);border-right:0}
.pb-mode{font-size:11px;color:var(--ink-soft);padding:3px 8px;border-radius:999px;border:1px solid var(--edge)}
.pairbar button{font:inherit;font-size:12.5px;font-weight:600;border:0;border-radius:999px;padding:7px 13px;cursor:pointer;background:rgba(242,231,218,.1);color:var(--ink)}
.pairbar button:hover{background:rgba(242,231,218,.18)}
.storepin.pair-hover{z-index:5!important}
.storepin.pair-hover .zpin{box-shadow:0 0 0 3px #F2E7DA,0 0 18px rgba(242,231,218,.7)}
.tripmark.pulse{animation:apulse 1.6s ease-in-out infinite}
@keyframes apulse{0%,100%{box-shadow:0 4px 10px rgba(0,0,0,.45),0 0 0 0 rgba(77,240,160,.55)}50%{box-shadow:0 4px 10px rgba(0,0,0,.45),0 0 0 10px rgba(77,240,160,0)}}
.pd-a .vs-side h3::before,.pd-b .vs-side h3::before{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-right:8px;font-size:11px;font-weight:700;color:#05080C;vertical-align:2px}
.pd-a .vs-side h3::before{content:'A';background:#4DF0A0}
.pd-b .vs-side h3::before{content:'B';background:#F2E7DA}
@media (max-width:760px){.pairbar{bottom:76px}.pb-mode{display:none}}
@media (prefers-reduced-motion:reduce){.tripmark.pulse{animation:none}}

/* A site held open is the thing being read: the list on the left steps
   back the way the population card does, and returns when it closes. */
.slist,.tlist,.alist{transition:opacity .2s var(--e),transform .25s var(--e),visibility 0s 0s}
body.site-pinned .slist,body.site-pinned .tlist,body.site-pinned .alist{opacity:0;visibility:hidden;transform:translateX(-10px);pointer-events:none;
  transition:opacity .2s var(--e),transform .25s var(--e),visibility 0s .25s}
/* Update 30: the Site tools button on a pinned place leads the row. */
.spair.stools{background:#4DF0A0;color:#05080C;border-color:#4DF0A0;font-weight:600}
.spair.stools:hover{background:#7DF5BB}

/* Update 30: tool buttons beside the zoom buttons (Australia only). The rest
   of the site-tools styles load with /au/sitetools.css on first use. */
.toolbtns{position:fixed;bottom:22px;right:66px;z-index:620;display:none;flex-direction:row;gap:6px;align-items:center}
.toolbtns.on{display:flex}
.toolbtns button{font:500 12px/1 'Geist',sans-serif;display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;cursor:pointer;
  color:var(--ink);background:var(--glass);border:1px solid var(--edge);box-shadow:0 6px 20px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.toolbtns button:hover{border-color:var(--ink)}
.toolbtns svg{width:14px;height:14px;flex:none}
body.st-open .toolbtns,body.st-open .layers,body.st-open .slist,body.st-open .tlist,body.st-open .alist{opacity:0;visibility:hidden;pointer-events:none}
body.st-drawing .storepin,body.st-drawing .schip,body.st-drawing .rlab{pointer-events:none}
body.st-drawing .scard{display:none}
@media (max-width:760px){.toolbtns{bottom:auto;top:240px;right:12px}}
/* Update 32: a docked card with no room above the Layers panel steps aside. */
.tcard.squeezed{opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
/* …and the Layers panel itself stops below the numbers strip. */
@media (min-width:761px){.layers{max-height:calc(100vh - 330px)}}
/* Update 34: a softer glow on trading stores — where many sit together the
   old one ran into a white blob. */
.storepin.stores .zpin{box-shadow:0 1px 3px rgba(0,0,0,.5),0 0 6px 1px rgba(255,255,255,.45),0 0 14px 3px rgba(255,255,255,.12)}
.storepin.stores:hover .zpin,.storepin.stores.on .zpin{box-shadow:0 2px 9px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.5),0 0 14px 4px rgba(255,255,255,.45)}