/* Beat 15 #tech, "Technical overview" (spec r3 7.6): the street becomes the
   architecture map. The stage draws the routes per stop on the real block;
   this file styles the stops, the stepper, the readouts and B's own fallback
   diagram (six boxes, seven arrows), which steps aside visually once the
   stage renders the map (data-stage-bound="true"). */
.sh-beat--tech { --b-step-h: 38svh; }
.sh-beat--tech .b-frame { grid-template-columns: minmax(0, min(500px, 38vw)) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: clamp(24px, 4vw, 72px); }
.sh-beat--tech .b-head, .sh-beat--tech .b-stops, .sh-beat--tech .b-stepper { grid-column: 1; }
.sh-beat--tech .b-head h2 { font-size: clamp(30px, 3vw, 48px); }
.b-map { grid-column: 2; grid-row: 1 / 4; align-self: center; position: relative; margin: 0; width: 100%; max-width: 820px; justify-self: center; }
.b-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.b-map__grid { fill: none; stroke: rgb(255 255 255 / 5%); stroke-width: .6; }
.b-map__road { fill: none; stroke: rgb(255 255 255 / 14%); stroke-width: 1; stroke-dasharray: 6 5; }
.b-map__zebra { fill: none; stroke: rgb(255 255 255 / 10%); stroke-width: 4; }
.b-lot { fill: rgb(95 212 196 / 3%); stroke: rgb(95 212 196 / 38%); stroke-width: 1; transition: fill .5s ease, stroke .5s ease; }
.b-lot.is-core { fill: rgb(212 175 55 / 6%); stroke: rgb(229 198 92 / 60%); }
.b-lot.is-verify { stroke: rgb(243 242 238 / 45%); fill: rgb(243 242 238 / 3%); }
.b-lot.is-lit { fill: rgb(95 212 196 / 10%); stroke: var(--sh-teal); }
.b-lot.is-core.is-lit { fill: rgb(212 175 55 / 16%); stroke: var(--sh-gold-hi); }
.b-lot.is-verify.is-lit { fill: rgb(243 242 238 / 10%); stroke: var(--sh-fg); }
.b-route { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.b-route.is-money { stroke: var(--sh-gold-hi); filter: drop-shadow(0 0 4px rgb(229 198 92 / 60%)); }
.b-route.is-data { stroke: var(--sh-teal); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgb(95 212 196 / 50%)); }
.b-route.is-verify { stroke: var(--sh-fg); stroke-width: 1.6; }
html.b-live .b-route { stroke-dashoffset: 1; opacity: .25; transition: stroke-dashoffset 1.2s cubic-bezier(.45, 0, .2, 1), opacity .3s ease; }
html.b-live .b-route.is-on { stroke-dashoffset: 0; opacity: 1; }
.b-map__labels { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 520 / 306; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.b-at { position: absolute; transform: translate(-50%, -50%); padding: 5px 8px; border: 1px solid var(--sh-line-2); border-radius: 6px; background: rgb(7 8 10 / 82%); color: var(--sh-fg-2); font: 600 10px/1.2 var(--sh-font-mono); letter-spacing: .14em; white-space: nowrap; transition: color .4s ease, border-color .4s ease, box-shadow .4s ease; }
.b-at.is-lit { color: var(--sh-fg); border-color: rgb(95 212 196 / 70%); box-shadow: 0 0 18px -4px rgb(95 212 196 / 60%); }
.b-at--bank.is-lit { border-color: rgb(229 198 92 / 80%); box-shadow: 0 0 18px -4px rgb(229 198 92 / 70%); }
.b-at--crossing { left: 84%; top: 84%; }
.b-at--bank { left: 50%; top: 22%; }
.b-at--market { left: 21%; top: 36%; }
.b-at--west { left: 20%; top: 7%; }
.b-at--maison { left: 79%; top: 36%; }
.b-at--plinth { left: 50%; top: 90%; }
.b-map__legend { display: flex; gap: 18px; justify-content: flex-end; margin-top: 30px; color: var(--sh-fg-3); font: 600 10px/1 var(--sh-font-mono); letter-spacing: .18em; }
.b-map__legend span::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: 3px; background: var(--sh-gold-hi); }
.b-map__legend .is-data::before { background: var(--sh-teal); }
.b-map__legend .is-verify::before { background: var(--sh-fg); }
.sh-beat--tech[data-stage-bound="true"] .b-map { opacity: 0; pointer-events: none; }

/* Stops. */
.b-stop { padding: 24px 24px 20px; border: 1px solid var(--b-panel-line); border-radius: 18px; background: rgb(9 11 15 / 70%); }
html[data-tier="full"] .b-stop { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgb(9 11 15 / 54%); }
.b-stop__no { color: var(--sh-teal); font: 600 11px/1 var(--sh-font-mono); letter-spacing: .2em; }
.b-stop h3 { margin: 12px 0 10px; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; letter-spacing: -.035em; }
.b-stop p:not(.b-stop__no) { color: var(--sh-fg-2); font-size: 15.5px; line-height: 1.6; }
.b-stop [data-amt-fixed] { color: var(--sh-fg); }
.sh-beat--tech .b-stops { align-self: center; }
.b-stepper { display: none; }
html.b-live .b-stepper { display: flex; align-items: center; gap: 2px; margin-top: 12px; }
.b-stepper button { display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 0; background: none; color: var(--sh-fg-2); cursor: pointer; }
.b-stepper__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--sh-fg-3); transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.b-stepper__dot[aria-current]::before { background: var(--sh-teal); border-color: var(--sh-teal); transform: scale(1.25); box-shadow: 0 0 10px var(--sh-teal); }
.b-stepper .b-stepper__nav { width: 44px; border: 1px solid var(--sh-line-2); border-radius: 50%; }
.b-stepper__nav::before { content: "←"; font: 500 16px/1 var(--sh-font-sans); }
.b-stepper__nav.is-next::before { content: "→"; }
.b-stepper .b-stepper__nav:hover { color: var(--sh-fg); border-color: var(--sh-fg-2); }
.b-stepper__nav.is-prev { margin-right: 6px; }
.b-stepper__nav.is-next { margin-left: 6px; }

/* Readouts. */
.b-readouts { max-width: min(70vw, 1180px); padding: clamp(22px, 2.4vw, 36px); border: 1px solid var(--b-panel-line); border-radius: 22px; background: rgb(9 11 15 / 72%); }
html[data-tier="full"] .b-readouts { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: rgb(9 11 15 / 58%); }
.b-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.b-grid li { padding: 14px 16px 16px; border-top: 1px solid var(--sh-line); border-left: 1px solid var(--sh-line); }
.b-grid li:nth-child(5n + 1) { border-left: 0; padding-left: 0; }
.b-grid__num { -webkit-text-stroke: .4px currentColor; font: 400 clamp(30px, 2.3vw, 42px)/1 var(--sh-font-num); letter-spacing: -.03em; color: var(--sh-fg); white-space: nowrap; }
.b-grid li:nth-child(4) .b-grid__num { color: var(--sh-teal); }
.b-grid li p + p { margin-top: 8px; color: var(--sh-fg-3); font-size: 12.5px; line-height: 1.45; }
.b-cert { position: relative; margin: 22px 0 18px; padding-left: 16px; color: var(--sh-fg-2); font-size: 14px; line-height: 1.55; max-width: 64em; }
.b-cert::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; background: var(--sh-gold-hi); }

@media (max-width: 1023px) {
  .b-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-grid li:nth-child(5n + 1) { border-left: 1px solid var(--sh-line); padding-left: 16px; }
  .b-grid li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .b-readouts { max-width: none; }
}
@media (max-width: 767px) {
  .sh-beat--tech { --b-step-h: 56svh; }
  .sh-beat--tech .b-frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  .b-map { grid-column: 1; grid-row: 2; margin: 8px 0 20px; }
  .b-at { padding: 3px 5px; font-size: 7.5px; letter-spacing: .06em; }
  .b-map__legend { margin-top: 18px; font-size: 8.5px; justify-content: flex-start; }
  .sh-beat--tech .b-stops { grid-row: 3; align-self: end; }
  .sh-beat--tech .b-stepper { grid-row: 4; justify-content: center; }
  .b-stop { padding: 16px 16px 14px; }
  .b-stop h3 { font-size: 26px; margin: 8px 0 6px; }
  .b-stop p:not(.b-stop__no) { font-size: 14px; }
  .b-grid { grid-template-columns: 1fr 1fr; }
  .b-grid li, .b-grid li:nth-child(3n + 1), .b-grid li:nth-child(5n + 1) { padding: 12px 10px 12px 0; border-left: 0; }
  .b-grid__num { font-size: 32px; }
}
@media (max-height: 559px) and (orientation: landscape) {
  .sh-beat--tech .b-frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .b-map { grid-row: 1 / 3; }
}