/* ==========================================================================
   REACH / MAP
   Drawn from real boundary + route data. No tile server, no API key.
   ========================================================================== */

.reach{
  position:relative;
  background:var(--ink-deep);
  background-image:var(--geo-a);
  background-size:cover; background-position:center;
  border-top:1px solid var(--rule-soft);
  padding:clamp(5rem,11vw,8rem) clamp(20px,5vw,60px);
}

.reach__grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
}

.reach__map{ margin:0; }
.reach__map svg{ width:100%; height:auto; display:block; overflow:visible; }

.reach__cap{
  margin-top:.9rem;
  font-size:.76rem;
  color:var(--paper-faint);
}

/* ---------------------------------------------------------------- svg marks */

.mp-land{ fill:rgba(23,23,23,.055); stroke:rgba(23,23,23,.28); stroke-width:1; }
.mp-land--nsw{ fill:rgba(23,23,23,.025); }

/* urban footprint — a size cue, not a boundary */
.mp-blob{ fill:rgba(23,23,23,.10); }

/* Solid colour, not alpha: shared highway segments overlap, and alpha
   strokes stack into a darker line wherever two routes share a road. */
.mp-route{
  fill:none;
  stroke:#9a9894;
  stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .3s var(--ease), stroke-width .3s var(--ease);
}
.mp-route.is-on{ stroke:var(--green); stroke-width:4.4; }

.mp-dot{
  fill:var(--ink);
  stroke:rgba(23,23,23,.55);
  stroke-width:1.6;
  transition:fill .3s var(--ease), stroke .3s var(--ease);
}
.mp-label{
  fill:var(--paper-faint);
  font-family:var(--font);
  font-size:12.5px; font-weight:500;
  transition:fill .3s var(--ease);
  pointer-events:none;
}
.mp-town.is-on .mp-dot{ fill:var(--green); stroke:var(--green); }
.mp-town.is-on .mp-label{ fill:var(--paper); }

.mp-qdot{ fill:var(--green); }
.mp-pulse{
  fill:none; stroke:var(--green); stroke-width:1.3;
  transform-origin:center; transform-box:fill-box;
  animation:mpPulse 3.6s var(--ease) infinite;
}
@keyframes mpPulse{
  0%   { transform:scale(.5);  opacity:.8; }
  70%  { transform:scale(1.6); opacity:0; }
  100% { transform:scale(1.6); opacity:0; }
}
.mp-qlabel{
  fill:var(--paper);
  font-family:var(--font);
  font-size:12.5px; font-weight:700; letter-spacing:.04em;
}
.mp-qsub{
  fill:var(--paper-faint);
  font-family:var(--font);
  font-size:11px; font-weight:500; letter-spacing:.04em;
}
.mp-lead{ fill:none; stroke:var(--green); stroke-width:1.2; }

/* ---------------------------------------------------------------- side panel */

.reach__side{ display:flex; flex-direction:column; gap:1.4rem; }

.reach__readout{
  min-height:5.6rem;
  display:flex; flex-direction:column; justify-content:center; gap:.25rem;
}
.ro__km{
  font-size:2.9rem; font-weight:700; color:var(--paper);
  line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.ro__km i{
  font-style:normal; font-size:1rem; font-weight:500;
  color:var(--paper-faint); margin-left:.3rem;
}
.ro__to{ font-size:.92rem; color:var(--paper-soft); }
.ro__to b{ color:var(--paper); font-weight:600; }

.reach__list{ list-style:none; margin:0; padding:0; }
.reach__list li + li{ border-top:1px solid var(--rule-soft); }

.rw{
  width:100%;
  display:grid;
  grid-template-columns:7.5rem minmax(0,1fr) auto;
  align-items:center; gap:.9rem;
  padding:.7rem 0;
  color:var(--paper-soft);
  transition:color .25s var(--ease);
}
.rw.is-on{ color:var(--paper); }
.rw__name{ font-size:.92rem; font-weight:500; }

.rw__bar{ height:2px; width:100%; background:var(--rule-soft); display:block; }
.rw__bar span{
  display:block; height:100%;
  background:rgba(23,23,23,.22);
  transition:background .25s var(--ease);
}
.rw.is-on .rw__bar span{ background:var(--green); }

.rw__km{
  font-size:.92rem; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--paper);
}
.rw__km i{
  font-style:normal; font-size:.7rem; font-weight:500;
  color:var(--paper-faint); margin-left:.18rem;
}

@media (max-width:900px){
  .reach__grid{ grid-template-columns:1fr; }
  .rw{ grid-template-columns:6.5rem minmax(0,1fr) auto; }
}

@media (prefers-reduced-motion:reduce){
  .mp-pulse{ animation:none; opacity:.45; }
}