/* ============================================================
   PROBUILD+ MODULE (d): project map (pb-project-map.js)
   Self-contained: every rule is scoped to .pbm-map.
   ============================================================ */
.pbm-map{
  --pbm-o:var(--orange,#ff5b00);
  --pbm-ob:var(--orange-bright,#ff9244);
  --pbm-line:var(--line,rgba(255,255,255,.08));
  --pbm-line2:var(--line-strong,rgba(255,255,255,.14));
  --pbm-muted:var(--muted,#9a9aa6);
  --pbm-ease:var(--ease,cubic-bezier(.22,.61,.36,1));
  display:grid; grid-template-columns:1fr; gap:1rem;
}
/* the two panes share one height: their widths follow the two map aspect ratios */
.pbm-map__maps{ display:grid; grid-template-columns:minmax(0,1.774fr) minmax(0,1fr); gap:1rem; align-items:start; }
.pbm-map__pane{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--pbm-line2);
  background:var(--bg-2,#0e0e12);
}
.pbm-map__pane--main{ aspect-ratio:915 / 466; }
.pbm-map__pane--inset{ aspect-ratio:124 / 112; }
.pbm-map__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pbm-map__name{
  position:absolute; left:.8rem; top:.7rem; z-index:3; pointer-events:none;
  font-family:var(--font-mono,monospace); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2,#6c6c78);
}

/* ---- drawing ---- */
.pbm-map__land{ fill:#101015; }
.pbm-map__bay{ fill:#141b24; stroke:rgba(255,255,255,.22); stroke-width:1.2; vector-effect:non-scaling-stroke; }
.pbm-map__river{ fill:none; stroke:#3a5068; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.pbm-map__river--minor{ stroke-width:1.4; opacity:.8; }
.pbm-map__road{ fill:none; stroke:rgba(255,255,255,.2); stroke-width:1.2; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
.pbm-map__grid{ fill:rgba(255,91,0,.07); stroke:rgba(255,146,68,.55); stroke-width:1.1; vector-effect:non-scaling-stroke; }
.pbm-map__grid--in{ fill:none; stroke:rgba(255,146,68,.28); stroke-width:.8; }
.pbm-map__frame{ fill:rgba(255,91,0,.05); stroke:var(--pbm-ob); stroke-width:1.1; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
.pbm-map__lbl{ font-family:var(--font-mono,monospace); font-size:13px; letter-spacing:.14em; fill:rgba(255,255,255,.35); text-transform:uppercase; }
.pbm-map__pane--inset .pbm-map__lbl{ font-size:3.4px; }
.pbm-map__lbl--water{ fill:rgba(140,170,200,.4); font-style:italic; text-transform:none; letter-spacing:.06em; }
.pbm-map__lbl--sm{ font-size:10px; fill:rgba(255,146,68,.75); }

/* ---- pins ---- */
.pbm-map__pin{
  -webkit-appearance:none; appearance:none; font:inherit; cursor:pointer; background:none; border:0; padding:0;
  position:absolute; z-index:2; width:34px; height:34px; margin:-17px 0 0 -17px;
  display:grid; place-items:center; border-radius:50%; color:#fff;
}
.pbm-map__dot{
  position:relative; width:14px; height:14px; border-radius:50%;
  background:#0b0b0e; border:2px solid var(--pbm-o); box-shadow:0 0 0 3px rgba(255,91,0,.18), 0 0 14px rgba(255,91,0,.55);
  transition:transform .25s var(--pbm-ease), background .25s var(--pbm-ease);
}
.pbm-map__tag{                          /* sits above the dot, so it never covers a neighbouring pin */
  position:absolute; left:2px; bottom:calc(50% + 13px);
  white-space:nowrap; pointer-events:none;
  font-family:var(--font-mono,monospace); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  padding:.3rem .55rem; border-radius:999px; background:rgba(7,7,10,.82); border:1px solid rgba(255,91,0,.45);
  opacity:0; transition:opacity .25s var(--pbm-ease);
}
.pbm-map__pin.is-flip .pbm-map__tag{ left:auto; right:2px; }
.pbm-map__pin.is-low .pbm-map__tag{ bottom:auto; top:calc(50% + 13px); }
.pbm-map__pin[aria-selected="true"]{ z-index:4; }
.pbm-map__pin[aria-selected="true"] .pbm-map__dot{ background:var(--pbm-o); transform:scale(1.15); }
.pbm-map__pin[aria-selected="true"] .pbm-map__dot::after{
  content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid rgba(255,91,0,.7);
  animation:pbmMapPulse 2s var(--pbm-ease) infinite;
}
.pbm-map__pin[aria-selected="true"] .pbm-map__tag,
.pbm-map__pin:focus-visible .pbm-map__tag{ opacity:1; }
@media (hover:hover){ .pbm-map__pin:hover .pbm-map__tag{ opacity:1; } .pbm-map__pin:hover .pbm-map__dot{ transform:scale(1.15); } }
.pbm-map__pin:focus-visible{ outline:2px solid var(--pbm-ob); outline-offset:1px; }

/* ---- card ---- */
.pbm-map__card{
  position:relative; border-radius:16px; border:1px solid var(--pbm-line2);
  background:linear-gradient(165deg, var(--surface,#131318), var(--bg-2,#0e0e12));
  padding:1.3rem 1.4rem 1.35rem; min-width:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); column-gap:2.4rem;
  grid-template-areas:"place line" "title line" "chips link"; align-items:start;
}
.pbm-map__card > .pbm-map__place{ grid-area:place; }
.pbm-map__card > .pbm-map__title{ grid-area:title; }
.pbm-map__card > .pbm-map__chips{ grid-area:chips; margin-bottom:0; }
.pbm-map__card > .pbm-map__line{ grid-area:line; align-self:center; }
.pbm-map__card > .pbm-map__link{ grid-area:link; align-self:end; }
.pbm-map__card:focus-visible{ outline:2px solid var(--pbm-ob); outline-offset:3px; }
.pbm-map__card.is-swap > *{ animation:pbmMapIn .45s var(--pbm-ease) both; }
.pbm-map__card.is-swap > *:nth-child(2){ animation-delay:.04s; }
.pbm-map__card.is-swap > *:nth-child(3){ animation-delay:.08s; }
.pbm-map__card.is-swap > *:nth-child(4){ animation-delay:.12s; }
.pbm-map__card.is-swap > *:nth-child(5){ animation-delay:.16s; }
.pbm-map__place{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono,monospace); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pbm-ob); margin-bottom:.55rem; }
.pbm-map__place::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--pbm-o); box-shadow:0 0 8px rgba(255,91,0,.8); }
.pbm-map__title{ font-family:var(--font-display,system-ui); font-weight:700; font-size:1.22rem; line-height:1.15; letter-spacing:-.015em; color:#fff; margin-bottom:.7rem; }
.pbm-map__chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.8rem; }
.pbm-map__chips span{
  font-family:var(--font-mono,monospace); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ember,#ffb47a);
  padding:.28rem .55rem; border-radius:999px; border:1px solid rgba(255,91,0,.3); background:rgba(255,91,0,.07);
}
.pbm-map__line{ color:var(--pbm-muted); font-size:.92rem; line-height:1.5; }
.pbm-map__link{
  display:inline-flex; align-items:center; gap:.45rem; padding-top:.9rem; justify-self:start;
  font-family:var(--font-mono,monospace); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pbm-ob);
}
.pbm-map__link:hover{ color:#fff; }
.pbm-map__link:focus-visible{ outline:2px solid var(--pbm-ob); outline-offset:4px; border-radius:4px; }
.pbm-map__note{
  grid-column:1 / -1; margin:0; font-family:var(--font-mono,monospace); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2,#6c6c78);
}

@keyframes pbmMapPulse{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1.5); opacity:0; } }
@keyframes pbmMapIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:720px){
  .pbm-map__pane--main .pbm-map__lbl{ display:none; }
  .pbm-map__maps{ grid-template-columns:1fr; }
  .pbm-map__pane--inset{ max-width:440px; width:100%; justify-self:center; }
  .pbm-map__card{ grid-template-columns:1fr; grid-template-areas:"place" "title" "chips" "line" "link"; }
  .pbm-map__card > .pbm-map__chips{ margin-bottom:.8rem; }
  .pbm-map__card > .pbm-map__line{ align-self:start; }
}
@media (prefers-reduced-motion:reduce){
  .pbm-map *, .pbm-map *::after{ animation:none !important; transition:none !important; }
}

/* a 44px tap area around each 34px pin */
.pbm-map__pin::after{ content:""; position:absolute; inset:-5px; border-radius:50%; }