/* BRBA3D viewer chrome: everything brba3d.js draws inside a map frame.
   Light only. Colours are tokens on bare :root and nothing here reads
   prefers-color-scheme. Every rule is under .b3, the component's own root, so
   it cannot reach the page around the frame.

   The tokens read the brand tokens site.css defines (--ink, --surface-raised,
   --font-sans and the rest, from deliverables/brand/tokens.json), each with
   the brand's light value as a literal fallback, so the overlays keep the
   brand look on a page that loads this file without site.css.

   The scene's own colours (sky, relief ramp, prism ramps, score bins) live in
   brba3d.js and brba3d-region.js, because they are validated against each
   other inside the lit scene. --b3-sky is the frame's ground: the county
   scene clears to the same white, and the regional scene clears transparent
   over it, so the frame is white before the first frame lands, under the
   regional map, and while a lost context is being restored. */
:root{
  --b3-ink:var(--ink,#0e1f22);
  --b3-ink-2:var(--ink-muted,#4c6164);
  /* Secondary text: axis labels and neighbouring towns' names. ink-muted,
     because line-strong is only 3.4:1 on white and these are 9-11 px. */
  --b3-grey:var(--ink-muted,#4c6164);
  /* Non-text marks: the height key's bars, neighbouring towns' dots, the
     hatch chip's edge. */
  --b3-grey-2:var(--line-strong,#788f92);
  --b3-rule:var(--line,#dce5e5);
  --b3-paper:var(--surface-raised,#ffffff);
  --b3-sky:#ffffff;
  --b3-focus:var(--focus,#1a6b68);
  /* The legend's hatch chip imitates the scene: dark diagonals over pale
     relief. The ground is the old #d6d5cf moved to the relief ramp's cool
     neutral (line hue, OKLab chroma 0.002) at the same lightness. */
  --b3-hatch:rgba(14,31,34,.50);
  /* #d3d5d5 darkened by the scene's 0.15 urban fill. */
  --b3-hatch-ground:#b3b5b5;
  --b3-hatch-edge:rgba(14,31,34,.80);
  /* The gesture hint is a night band, the brand's one dark surface. */
  --b3-hint-bg:rgba(11,27,30,.86);
  --b3-hint-ink:var(--on-night,#e4efee);
  --b3-shadow-sm:var(--shadow-sm,0 1px 2px rgba(11,27,30,0.06));
  --b3-shadow-md:var(--shadow-md,0 8px 24px rgba(11,27,30,0.14));
  --b3-radius:var(--radius-md,6px);
  --b3-mono:var(--font-mono,"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace);
  --b3-sans:var(--font-sans,"Inter",system-ui,-apple-system,"Segoe UI",sans-serif);
  --b3-display:var(--font-display,"Space Grotesk","Inter",system-ui,sans-serif);
}

.b3{
  position:absolute; inset:0; overflow:hidden;
  background:var(--b3-sky);
  touch-action:none; cursor:grab;
  user-select:none; -webkit-user-select:none;
  container-type:inline-size;
  font-family:var(--b3-sans); color:var(--b3-ink);
}
.b3.b3-dragging{cursor:grabbing}
/* Cooperative gestures: a one-finger vertical swipe scrolls the page. Two
   fingers are handled in brba3d.js. */
.b3.b3-coop{touch-action:pan-y}
.b3-gl{display:block;width:100%;height:100%}

/* An overlay box: a white card with a hairline and the faint resting shadow,
   as the brand's cards are. The map ground is white too, so the hairline is
   what separates the two. 6 px corners, the control radius: the full 10 px
   card radius reads as rounded on a box this small. */
.b3-ovl{
  position:absolute; background:var(--b3-paper); border:1px solid var(--b3-rule);
  border-radius:var(--b3-radius); box-shadow:var(--b3-shadow-sm);
  padding:8px 10px; text-align:left;
  font:400 11.5px/1.45 var(--b3-sans); color:var(--b3-ink);
  cursor:auto; user-select:text; -webkit-user-select:text;
}
.b3-ovl b{font-weight:600}
.b3-ovl a{color:var(--b3-focus)}
.b3 a:focus-visible,.b3 button:focus-visible{outline:2px solid var(--b3-focus);outline-offset:2px}

/* Attribution: fixed bottom right inside the frame. At 600 px of frame width
   and over it is in every screenshot and export of the map; below that it is
   the (i) button, and the text shows once opened. */
.b3-attr{right:12px;bottom:12px;max-width:min(290px,calc(100% - 24px));font-size:11px;color:var(--b3-ink-2)}
.b3-attr b{color:var(--b3-ink)}
/* Below 600 px of frame width brba3d.js folds the credits to an (i) button in
   this corner (class b3-attr-fold) and the text opens above it (b3-attr-open).
   The text is in the DOM in both states. Above that width the button is
   hidden and the box is as before. */
.b3-attr-tog{appearance:none;margin:0;padding:0;border:0;background:none;color:var(--b3-ink);
  cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--b3-radius)}
.b3-attr-tog[hidden],.b3-attr-body[hidden]{display:none}
.b3-attr.b3-attr-fold{padding:0;max-width:none}
.b3-attr.b3-attr-fold .b3-attr-body{position:absolute;right:-1px;bottom:calc(100% + 6px);
  width:max-content;max-width:min(290px,calc(100cqw - 16px));box-sizing:border-box;
  background:var(--b3-paper);border:1px solid var(--b3-rule);border-radius:var(--b3-radius);
  box-shadow:var(--b3-shadow-md);padding:8px 10px;font-size:11px;line-height:1.45;color:var(--b3-ink-2)}
.b3-attr.b3-attr-open .b3-attr-tog{background:var(--b3-rule)}

.b3-legend{left:12px;bottom:12px;max-width:min(300px,calc(100% - 24px))}
.b3-legend[hidden]{display:none}
/* Legend titles are the brand eyebrow: mono caps, 11 px, tracked. */
.b3-lt{font:500 11px/16px var(--b3-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--b3-ink-2)}
.b3-ld{color:var(--b3-ink-2);margin-top:2px;line-height:1.4}
.b3-gap{margin-top:8px}
.b3-sw{display:flex;gap:2px;margin:6px 0 2px}
.b3-sw i{display:block;width:30px;height:10px}
.b3-sw i:first-child{border-radius:3px 0 0 3px}
.b3-sw i:last-child{border-radius:0 3px 3px 0}
.b3-ax{display:flex;width:94px;font:400 9.5px/1 var(--b3-mono);font-variant-numeric:tabular-nums;color:var(--b3-grey)}
.b3-ax span{flex:1 0 0}
.b3-ax span:last-child{flex:0 0 auto}
.b3-hk{display:flex;align-items:flex-end;gap:9px;height:28px;margin:4px 0 2px}
/* Bar heights are percentages of this box, set in brba3d.js, so they fit
   both the 28 px box here and the 20 px one in a narrow frame. */
.b3-hk i{display:block;width:22px;min-height:3px;background:var(--b3-grey-2)}
.b3-hl{display:flex;gap:9px;font:400 9.5px/1 var(--b3-mono);font-variant-numeric:tabular-nums;color:var(--b3-grey)}
.b3-hl span{width:22px;text-align:center}
.b3-keys{display:grid;gap:4px}
.b3-key{display:flex;align-items:center;gap:6px;line-height:1.35}
.b3-kdot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--b3-ink);
  box-shadow:0 0 0 1.25px var(--b3-paper),0 0 0 2.25px var(--b3-rule)}
.b3-kdot-nb{width:5px;height:5px;background:var(--b3-grey-2)}
/* Drawn like the scene: dark diagonals over a darkened fill, with a dark edge. */
.b3-khatch{flex:0 0 auto;width:14px;height:10px;border:1px solid var(--b3-hatch-edge);border-radius:2px;
  background:repeating-linear-gradient(45deg,var(--b3-hatch) 0 1.5px,transparent 1.5px 5px),var(--b3-hatch-ground)}

/* Towns: an SVG over the canvas that never takes the pointer, so hover and
   drag go to the scene underneath. */
.b3-towns{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;
  font-family:var(--b3-sans)}
.b3-towns circle{fill:var(--b3-ink);stroke:var(--b3-paper);stroke-width:1.25}
.b3-towns circle.on{stroke-width:2.5}
.b3-towns text{font-size:11px;font-weight:500;fill:var(--b3-ink);
  paint-order:stroke;stroke:var(--b3-paper);stroke-width:3px;stroke-linejoin:round}
.b3-towns text.big{font-weight:600;font-size:12px}
/* Neighbouring counties' towns on the dimmed collar: quieter, like the ground. */
.b3-towns circle.nb{fill:var(--b3-grey-2)}
.b3-towns text.nb{fill:var(--b3-grey)}

/* The hover tooltip: a floating layer, so it takes the brand's raised shadow.
   The name is a heading line; the facts under it are numbers, in mono. */
.b3-tip{position:absolute;z-index:4;pointer-events:none;background:var(--b3-paper);border:1px solid var(--b3-rule);
  border-radius:var(--b3-radius);box-shadow:var(--b3-shadow-md);padding:6px 9px;
  font:400 11.5px/1.45 var(--b3-mono);font-variant-numeric:tabular-nums;color:var(--b3-ink-2);
  display:grid;gap:1px;white-space:nowrap;max-width:min(360px,calc(100% - 8px));box-sizing:border-box}
.b3-tip[hidden]{display:none}
.b3-tip > b{font:600 13px/1.3 var(--b3-sans);color:var(--b3-ink)}
.b3-tip span b{font-weight:600;color:var(--b3-ink)}
/* The provider line can name many filers. It wraps rather than running out
   of the frame, so no name is cut off. */
.b3-tip .b3-tip-wrap{white-space:normal}

/* The legend's toggle shows only in a narrow frame (see below). */
.b3-ltoggle{display:none;appearance:none;margin:0;padding:0;border:0;background:none;
  font:500 12px/1.4 var(--b3-sans);color:var(--b3-ink);cursor:pointer}
.b3-ltoggle::after{content:" +"}
.b3-open .b3-ltoggle::after{content:" \2212"}

/* Read by screen readers only: the details of a clicked or tapped hexagon. */
.b3-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* Cooperative-gesture hint: centred, brief, and never in the way of the pointer. */
.b3-hint{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);
  max-width:calc(100% - 32px);padding:8px 12px;border-radius:var(--b3-radius);
  background:var(--b3-hint-bg);color:var(--b3-hint-ink);font:500 13px/1.4 var(--b3-sans);
  text-align:center;pointer-events:none;opacity:0;transition:opacity .2s ease}
.b3-hint.b3-hint-on{opacity:1}

/* Shown only when the view cannot start or loses its context. */
.b3-notice{left:12px;right:12px;top:12px;max-width:52ch;margin-inline:auto;
  font-size:12px;line-height:1.5;z-index:2}
.b3-notice b{display:block;margin-bottom:4px}
.b3-notice span{color:var(--b3-ink-2)}

/* Narrow frames: a 390 px phone gives a ~358 px square. The legend's prose line
   goes first, as it did on the full-page viewer, and the two bottom boxes share
   the width instead of covering each other. */
@container (max-width:560px){
  .b3-ovl{font-size:10.5px;padding:6px 8px}
  .b3-legend{left:8px;bottom:8px;max-width:calc(56% - 12px)}
  .b3-attr{right:8px;bottom:8px;max-width:calc(44% - 12px);font-size:10px}
  /* The prose lines go first: the swatches, the count and the height key
     still read without them, and in a ~358 px square the full legend covered
     half the county. */
  .b3-legend .b3-desc,.b3-legend .b3-absent{display:none}
  /* Collapsed to its button until opened. */
  .b3-ltoggle{display:block}
  .b3-legend:not(.b3-open) .b3-lbody{display:none}
  .b3-legend.b3-open .b3-ltoggle{margin-bottom:4px}
  .b3-hk{height:20px;margin:3px 0 2px;gap:6px}
  .b3-hk i{width:16px}
  .b3-hl{gap:6px}
  .b3-hl span{width:16px}
  .b3-sw i{width:24px}
  .b3-ax{width:76px}
  .b3-tip{font-size:10.5px}
  .b3-tip > b{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .b3 *{animation:none!important;transition:none!important}
}