/* Placement tool. Theme colours are set as custom properties on the tool element from the city theme. */
.pt { display: grid; gap: 10px; font-family: inherit; }
.pt-search { display: flex; gap: 8px; }
.pt-postcode {
    flex: 1; min-width: 0; min-height: 44px; padding: .5em .8em; font: inherit;
    border: 2px solid var(--black); border-radius: 10px; background: var(--white); color: var(--black);
    text-transform: uppercase;
}
.pt-find {
    min-height: 44px; padding: 0 1.1em; font-family: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
    border: 2px solid var(--black); border-radius: 10px; background: var(--black); color: var(--white);
}
.pt-map { height: 420px; border: 3px solid var(--black); border-radius: 10px; overflow: hidden; background: var(--cream); }
.pt.is-busy .pt-map { cursor: progress; }
.pt-message { margin: 0; min-height: 1.4em; font-size: .95rem; padding: 0; }
.pt-message--ok { color: var(--black); }
.pt-message--warn, .pt-message--error { padding: .55em .8em; border-radius: 8px; border: 2px solid var(--accent); background: var(--white); color: var(--black); }
.pt-message--error { border-color: var(--black); border-style: dashed; }
.pt-pin span {
    display: block; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    background: var(--accent); border: 3px solid var(--black); box-shadow: 0 0 0 2px var(--white);
}
.pt-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt .map-label { pointer-events: none; }
.pt .map-label span { display: block; transform: translate(-50%, -50%); width: max-content; font-weight: 700; font-size: 13px; color: var(--black); text-shadow: 0 0 3px var(--cream), 0 0 3px var(--cream); white-space: nowrap; }
.pt .map-glyph { pointer-events: none; }
.pt .map-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pt .map-glyph__label { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -3px); width: max-content; font-weight: 700; font-size: 12px; color: var(--black); text-shadow: 0 0 3px var(--cream), 0 0 3px var(--cream); }
.pt .map-glyph .g-k { fill: var(--black); }
.pt .map-glyph .g-w { fill: var(--white); }
.pt .map-glyph .g-a { fill: var(--accent); }
.pt .map-glyph .g-ks { stroke: var(--black); stroke-width: 2.5; }
.pt .map-glyph .g-line, .pt .map-glyph .g-hand { fill: none; stroke: var(--black); stroke-width: 2.5; }
.pt .map-glyph .g-arc { fill: none; stroke: var(--accent); stroke-width: 3; }