/* ===================================================================
   BOUNDARY DEMO  -  zip-code-map-boundary-demo.asp
   -------------------------------------------------------------------
   The map workbench only. Everything outside .bd-shell on that page is
   ordinary .zcp5, and this file deliberately adds nothing the rest of
   the site could pick up by accident: every selector is scoped to the
   shell or to .bd-*.

   Kept out of product-system.v5.css because it serves exactly one page
   and would otherwise ship on all twenty-one for no reason.

   The layer colours are the ones the internal boundaries tool uses, on
   purpose - the same geography is the same colour in both places, so a
   screenshot from one reads correctly next to the other.
   =================================================================== */

/* The site container caps at 1020px. Minus two rails that leaves the map
   about 410px wide - taller than it is wide, which is not a map. The demo
   section alone breaks out to the viewport, still inside a gutter, and the
   ordinary container takes over again below the shell. */
.zcp5 .container.bd-wide{ max-width:min(95vw, 1520px); }

.bd-shell{
  --bd-line:#e5e7eb;
  --bd-panel:#f8fafc;
  --bd-ink:#0f172a;
  --bd-mut:#64748b;
  --bd-accent:#3b82f6;

  display:grid;
  grid-template-columns:16rem minmax(0,1fr) 19rem;
  gap:.75rem;
  align-items:stretch;
}

/* ---- the two rails ------------------------------------------------ */
.bd-rail{
  background:#fff; border:1px solid var(--bd-line); border-radius:10px;
  padding:.85rem .9rem; min-width:0;
  display:flex; flex-direction:column; gap:.9rem;
  max-height:41rem; overflow-y:auto;
}
.bd-rail h3{
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bd-mut); margin:0 0 .5rem;
}
.bd-rail section{ margin:0; }

/* ---- sample switcher ---------------------------------------------- */
.bd-samples{ display:flex; flex-direction:column; gap:.35rem; }
.bd-sample{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--bd-line); border-radius:.5rem;
  padding:.5rem .6rem; font-size:.82rem; color:#374151; line-height:1.3;
  transition:border-color .12s, background .12s;
}
.bd-sample:hover{ border-color:var(--bd-accent); background:#f6fbff; }
.bd-sample[aria-pressed="true"]{
  border-color:var(--bd-accent); background:#f0f7ff; color:var(--bd-ink); font-weight:700;
}
.bd-sample small{
  display:block; font-weight:400; color:var(--bd-mut); font-size:.72rem; margin-top:.1rem;
}

/* ---- layer list ---------------------------------------------------
   A checkbox, a colour chip and a count. The chip is the legend - there
   is no separate legend box, because a legend that repeats the control
   is just a second thing to keep in sync. */
.bd-layers{ display:flex; flex-direction:column; gap:.25rem; }
.bd-layer{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.38rem .45rem; border-radius:.4rem; font-size:.82rem; color:#374151;
  border:1px solid transparent; transition:background .12s, border-color .12s;
}
.bd-layer:hover{ background:#f6fbff; border-color:#dbeafe; }
.bd-layer input{ flex:none; width:.95rem; height:.95rem; margin:0; accent-color:var(--bd-accent); }
.bd-layer .chip{
  flex:none; width:.85rem; height:.85rem; border-radius:3px;
  background:var(--c,#94a3b8); border:1px solid rgba(0,0,0,.18);
}
.bd-layer .nm{ flex:1 1 auto; min-width:0; }
.bd-layer .ct{
  flex:none; font-size:.7rem; color:var(--bd-mut);
  font-variant-numeric:tabular-nums;
}
.bd-layer.is-busy .ct::after{ content:" \2026"; }
.bd-layer.is-locked{ opacity:.75; cursor:default; }
.bd-layer.is-locked:hover{ background:transparent; border-color:transparent; }

/* ---- sliders and switches ----------------------------------------- */
.bd-ctl{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:#374151; }
.bd-ctl label{ margin:0; flex:1 1 auto; }
.bd-ctl input[type="range"]{ flex:0 0 6.5rem; accent-color:var(--bd-accent); }
.bd-ctl input[type="checkbox"]{ width:.95rem; height:.95rem; margin:0; accent-color:var(--bd-accent); }
.bd-ctl output{
  flex:none; width:2.4rem; text-align:right; color:var(--bd-mut);
  font-variant-numeric:tabular-nums; font-size:.72rem;
}

.bd-btn{
  display:inline-block; width:100%; text-align:center; cursor:pointer;
  background:#fff; border:1px solid var(--bd-line); border-radius:.5rem;
  padding:.45rem .6rem; font-size:.78rem; font-weight:700; color:#374151;
  transition:border-color .12s, background .12s, color .12s;
}
.bd-btn:hover{ border-color:var(--bd-accent); background:#f6fbff; color:var(--bd-accent); }

/* ---- the map ------------------------------------------------------ */
/* An explicit height, not grid stretch. MapTiler sizes its canvas once at
   construction, and a container that is still settling gave it a 300px
   canvas inside a 656px box - so the map drew into the top half and
   fitBounds zoomed for the wrong aspect. */
.bd-map-wrap{
  position:relative; border:1px solid var(--bd-line); border-radius:10px;
  overflow:hidden; background:var(--bd-panel); height:41rem;
}
/* Two classes, deliberately. The MapTiler stylesheet is injected into
   <head> AFTER this file and sets .maplibregl-map{position:relative},
   which at equal specificity won on source order - the container lost
   its absolute positioning and collapsed to the SDK's 300px fallback
   inside a 656px box. */
.bd-map-wrap > .bd-map{ position:absolute; inset:0; width:100%; height:100%; }
/* The pre-load state. The map is ~900 KB of SDK plus a sample, so it is
   not fetched until asked for. */
.bd-idle{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.75rem; text-align:center;
  padding:2rem 1.5rem; background:var(--bd-panel);
}
.bd-idle p{ margin:0; font-size:.85rem; color:var(--bd-mut); max-width:26rem; line-height:1.6; }
.bd-idle i{ font-size:2rem; color:#cbd5e1; }
.bd-status{
  position:absolute; left:.6rem; bottom:.6rem; z-index:2;
  background:rgba(255,255,255,.94); border:1px solid var(--bd-line);
  border-radius:.4rem; padding:.25rem .5rem;
  font-size:.7rem; color:var(--bd-mut); pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.bd-status[hidden]{ display:none; }

/* ---- the detail rail ---------------------------------------------- */
.bd-hint{ font-size:.78rem; color:var(--bd-mut); line-height:1.6; margin:0; }
.bd-zip{
  font-size:1.35rem; font-weight:700; color:var(--bd-ink); margin:0;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.bd-zip-sub{ font-size:.8rem; color:var(--bd-mut); margin:.1rem 0 0; }
.bd-badge{
  display:inline-block; margin-top:.45rem;
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.15rem .45rem; border-radius:3px;
  background:#eef6ff; border:1px solid #bfdbfe; color:#1d4ed8;
}
.bd-badge.is-point{ background:#fdf6e8; border-color:#f2ddb0; color:#8a5f10; }

.bd-attrs{ margin:0; }
.bd-attrs > div{
  display:grid; grid-template-columns:6.2rem 1fr; gap:.6rem;
  padding:.28rem 0; border-bottom:1px solid #f1f5f9;
}
.bd-attrs > div:last-child{ border-bottom:0; }
.bd-attrs dt{
  font-size:.7rem; color:var(--bd-mut); font-weight:400;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.bd-attrs dd{
  margin:0; font-size:.78rem; color:#374151; line-height:1.45;
  overflow-wrap:anywhere; font-variant-numeric:tabular-nums;
}

/* Where the ZIP actually lands. This is the part the internal tool
   exists for, so it gets the emphasis rather than the attribute dump. */
.bd-cross{ display:flex; flex-direction:column; gap:.6rem; }
.bd-cross-grp > h4{
  display:flex; align-items:center; gap:.4rem;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bd-mut); margin:0 0 .3rem;
}
.bd-cross-grp > h4 .chip{
  flex:none; width:.7rem; height:.7rem; border-radius:2px;
  background:var(--c,#94a3b8); border:1px solid rgba(0,0,0,.18);
}
.bd-hit{
  display:grid; grid-template-columns:1fr auto; gap:.4rem; align-items:baseline;
  padding:.22rem 0; font-size:.76rem; color:#374151;
}
.bd-hit .nm{ min-width:0; overflow-wrap:anywhere; }
.bd-hit .pc{
  font-weight:700; color:var(--bd-ink); font-variant-numeric:tabular-nums;
}
.bd-hit.is-minor{ color:var(--bd-mut); }
.bd-hit.is-minor .pc{ font-weight:400; color:var(--bd-mut); }
/* the share bar sits under the row and is the fastest read of the lot */
.bd-bar{
  grid-column:1 / -1; height:3px; border-radius:2px; background:#eef2f7; overflow:hidden;
}
.bd-bar > i{ display:block; height:100%; background:var(--c,#94a3b8); }
.bd-cross-note{ font-size:.7rem; color:var(--bd-mut); line-height:1.5; margin:.2rem 0 0; }

/* ---- responsive ---------------------------------------------------
   Below 1200 the detail rail moves under the map rather than squeezing
   it; below 900 the controls go too. The map keeps the full width in
   both cases, because a half-width map is not a demo. */
@media (max-width:1199.98px){
  .bd-shell{ grid-template-columns:15rem minmax(0,1fr); }
  .bd-rail.bd-detail{ grid-column:1 / -1; max-height:none; }
}
@media (max-width:899.98px){
  .bd-shell{ grid-template-columns:1fr; }
  .bd-rail{ max-height:none; }
  .bd-rail.bd-controls{
    flex-direction:row; flex-wrap:wrap; gap:1rem;
  }
  .bd-rail.bd-controls > section{ flex:1 1 13rem; min-width:0; }
  .bd-samples{ flex-direction:row; flex-wrap:wrap; }
  .bd-sample{ flex:1 1 8rem; width:auto; }
}
@media (max-width:575.98px){
  .bd-map-wrap{ height:28rem; }
  .bd-attrs > div{ grid-template-columns:5.4rem 1fr; }
}

/* ---- the buy strip -------------------------------------------------
   Directly under the map, because that is where interest peaks: someone
   who has just watched a city boundary disagree with a ZIP is as close to
   buying as they will get. Price first - the product had no price signal
   anywhere before the configurator, and "how much is this" is the question
   that sends people away. */
.bd-buy{
  display:grid; grid-template-columns:1fr auto; gap:1rem 1.5rem; align-items:center;
  margin-top:.75rem; padding:1rem 1.25rem;
  background:#fff; border:1px solid var(--bd-line); border-left:4px solid #AB2827;
  border-radius:10px;
}
.bd-buy h3{
  font-size:1rem; font-weight:700; color:var(--bd-ink); margin:0 0 .25rem;
  letter-spacing:-.01em;
}
.bd-buy p{ font-size:.82rem; line-height:1.6; color:#475569; margin:0; }
.bd-buy .prices{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:.55rem 0 0; padding:0; list-style:none;
}
.bd-buy .prices li{
  font-size:.76rem; color:#374151;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:.4rem;
  padding:.2rem .5rem; font-variant-numeric:tabular-nums;
}
.bd-buy .prices b{ color:var(--bd-ink); }
.bd-buy .acts{ display:flex; flex-direction:column; gap:.45rem; min-width:13rem; }
@media (max-width:767.98px){
  .bd-buy{ grid-template-columns:1fr; }
  .bd-buy .acts{ min-width:0; }
}

/* The quiet close in the detail rail. It only ever appears after someone
   has clicked a ZIP, so it is earned rather than shouted. */
.bd-sell{
  margin-top:.2rem; padding:.7rem .8rem;
  background:#fff8f8; border:1px solid #f3d5d5; border-radius:.5rem;
}
.bd-sell p{ font-size:.76rem; line-height:1.55; color:#475569; margin:0 0 .5rem; }
.bd-sell b{ color:var(--bd-ink); }
.bd-sell .zcp-btn{ width:100%; text-align:center; }

/* ---- the explanation blocks under the map -------------------------
   .zcp-keynote already carries the tone treatments; these are the
   plain technical notes that sit between them. */
.bd-notes{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
}
.bd-note{
  background:#fff; border:1px solid var(--bd-line); border-radius:10px;
  border-left:4px solid var(--c,#94a3b8); padding:1rem 1.15rem;
}
.bd-note h3{
  font-size:.95rem; font-weight:700; color:var(--bd-ink); margin:0 0 .45rem;
  letter-spacing:-.01em;
}
.bd-note p{ font-size:.83rem; line-height:1.65; color:#475569; margin:0 0 .6rem; }
.bd-note p:last-child{ margin-bottom:0; }
.bd-note code{
  background:#f1f5f9; color:#0f172a; padding:.05rem .3rem; border-radius:3px; font-size:.76rem;
}
@media (max-width:767.98px){ .bd-notes{ grid-template-columns:1fr; } }

/* -----------------------------------------------------------------
   COMPACT HERO
   The mini-hero idea wearing the boundary product's own clothes: the
   same nested-boundary art and the same .zcp-veil as the three
   sibling pages, just short and centred. H1 and one line only - the
   map is the content here, and everything above it is delay.

   The veil is re-angled. The full-height hero runs its gradient at
   100deg to protect a left-aligned column against a wide image; this
   hero is centred and a fifth the height, so that would drop its
   densest corner right where the art needs to read. Vertical instead:
   lighter up top where the boundary lines show, denser behind type.
   ----------------------------------------------------------------- */
.zcp5 .bd-hero-compact{ padding:46px 0 40px; text-align:center; }

.zcp5 .bd-hero-compact .zcp-veil{
  background:linear-gradient(180deg,
    rgba(9,17,34,.70) 0%, rgba(9,17,34,.85) 52%, rgba(9,17,34,.92) 100%);
}

.zcp5 .bd-hero-compact h1{ margin-bottom:.5rem; }

.zcp5 .bd-hero-compact .bd-hero-sub{
  margin:0 auto; max-width:46rem;
  font-size:1.02rem; line-height:1.55; color:#cbd5e1;
}

/* Under the Load the map button, where the hesitation is. */
.zcp5 .bd-idle-note{
  margin:.7rem 0 0; font-size:.8rem; opacity:.72;
}

@media (max-width:768px){
  .zcp5 .bd-hero-compact{ padding:30px 0 26px; }
  .zcp5 .bd-hero-compact .bd-hero-sub{ font-size:.94rem; }
}

/* ---- cursor readout ------------------------------------------------
   Same furniture as .bd-note - white card, hairline border, a colour
   bar keyed to the layer - shrunk to something that can sit under a
   moving cursor. One row per geography under the pointer, each row
   carrying its own layer colour so the readout, the sidebar chip and
   the shape on the map all agree.

   pointer-events:none matters: the card follows the cursor, so without
   it the card would sit between the cursor and the map and the hover
   it is describing would flicker off.
   -------------------------------------------------------------------- */
.bd-tip{
  position:absolute; z-index:5; pointer-events:none;
  background:#fff; border:1px solid var(--bd-line); border-radius:8px;
  box-shadow:0 6px 18px rgba(15,23,42,.16);
  padding:.42rem .55rem; min-width:9.5rem; max-width:16rem;
}
.bd-tip .r{
  display:flex; align-items:baseline; gap:.5rem;
  border-left:3px solid var(--c,#94a3b8);
  padding:.16rem .1rem .16rem .45rem;
}
.bd-tip .r + .r{ margin-top:.18rem; }
.bd-tip .k{
  font-size:.68rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--c,#64748b); white-space:nowrap;
}
.bd-tip .v{
  font-size:.8rem; color:var(--bd-ink); margin-left:auto;
  text-align:right; line-height:1.3;
}