/* Close-up street diagram (js/parkpay-baydiagram.js). Bay fills use the --pp-bay-* tokens so light/dark follow the theme. */
.pp-bd { --pp-bd-road: #4B5563; --pp-bd-road-line: #F9FAFB; --pp-bd-path: #E5E7EB; --pp-bd-kerb: #9CA3AF; --pp-bd-lines: #FFFFFF; --pp-bd-car: rgba(17, 24, 39, .55);
    display: grid; gap: .45rem; min-width: 0; }
[data-bs-theme=dark] .pp-bd { --pp-bd-road: #111318; --pp-bd-road-line: #9CA3AF; --pp-bd-path: #272C35; --pp-bd-kerb: #4B5563; --pp-bd-lines: #F3F4F6; --pp-bd-car: rgba(15, 17, 21, .6); }
.pp-bd[hidden] { display: none; }
.pp-bd__canvas { width: 100%; overflow: hidden; border-radius: var(--pp-radius, .75rem); border: 1px solid var(--pp-border); background: var(--pp-surface-2); line-height: 0; }
.pp-bd__svg { display: block; max-width: 100%; height: auto; touch-action: manipulation; }
.pp-bd__ground { fill: var(--pp-surface-2); }
.pp-bd__road { fill: var(--pp-bd-road); }
.pp-bd__path { fill: var(--pp-bd-path); }
.pp-bd__kerb { stroke: var(--pp-bd-kerb); stroke-width: 4; }
.pp-bd__centre { stroke: var(--pp-bd-road-line); stroke-width: 2; stroke-dasharray: 14 10; opacity: .7; }
.pp-bd__street { fill: var(--pp-bd-road-line); font: 600 11px var(--pp-font-sans, sans-serif); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.pp-bd__fill { fill: rgb(var(--pp-bay-rgb)); stroke: var(--pp-bd-lines); stroke-width: 2.5; stroke-linejoin: round; }
.pp-bd__car { fill: var(--pp-bd-car); stroke: none; display: none; pointer-events: none; }
.pp-bd__space { --pp-bay-rgb: var(--pp-bay-offline-rgb); outline: none; }
.pp-bd__space--vacant { --pp-bay-rgb: var(--pp-bay-vacant-rgb); }
.pp-bd__space--paid { --pp-bay-rgb: var(--pp-bay-paid-rgb); }
.pp-bd__space--paid .pp-bd__car { display: inline; }
/* "occupied" = a car with no paid time (public), the lab's staff states too (grace/alert/overstay/clamped). */
.pp-bd__space--occupied, .pp-bd__space--grace { --pp-bay-rgb: var(--pp-bay-grace-rgb); }
.pp-bd__space--alert { --pp-bay-rgb: var(--pp-bay-alert-rgb); }
.pp-bd__space--overstay { --pp-bay-rgb: var(--pp-bay-overstay-rgb); }
.pp-bd__space--clamped { --pp-bay-rgb: var(--pp-bay-clamped-rgb); }
.pp-bd__space--occupied .pp-bd__car, .pp-bd__space--grace .pp-bd__car, .pp-bd__space--alert .pp-bd__car,
.pp-bd__space--overstay .pp-bd__car, .pp-bd__space--clamped .pp-bd__car { display: inline; }
.pp-bd__code { fill: #fff; font: 700 11px var(--pp-font-sans, sans-serif); pointer-events: none; paint-order: stroke; stroke: rgba(17, 24, 39, .55); stroke-width: 3px; }
.pp-bd__space--offline .pp-bd__fill { fill: rgba(var(--pp-bay-rgb), .45); stroke-dasharray: 5 4; }
.pp-bd__space[role=button] { cursor: pointer; }
.pp-bd__space[role=button]:hover .pp-bd__fill { stroke: var(--pp-primary); }
.pp-bd__space:focus-visible .pp-bd__fill { stroke: var(--pp-primary); stroke-width: 4; }
.pp-bd__ring { fill: none; stroke: var(--pp-primary); stroke-width: 5; stroke-linejoin: round; pointer-events: none; }
.pp-bd__north circle { fill: var(--pp-surface); stroke: var(--pp-border); stroke-width: 1; opacity: .92; }
.pp-bd__north polygon { fill: var(--pp-primary); stroke: var(--pp-surface); stroke-width: 1; }
.pp-bd__north text { fill: var(--pp-heading); font: 700 11px var(--pp-font-sans, sans-serif); }
.pp-bd__caption { line-height: 1.35; font-size: .9rem; color: var(--pp-text-muted); }
.pp-bd__caption:empty { display: none; }
.pp-bd__caption strong { font-family: var(--pp-font-display); color: var(--pp-heading); font-size: 1rem; }
.pp-bd__caption i { color: var(--pp-primary); }
.pp-bd__site { color: var(--pp-text-muted); }
.pp-finder__diagram { grid-column: 1 / -1; }
.pp-spacemap .pp-bd__caption { display: none; } /* the card prints the label just above */