/* A small bearing illustration beside the existing direction values. */
.distance-card .bearing-overview{grid-template-columns:minmax(0,1fr) 72px;grid-template-rows:auto auto;align-items:center;gap:7px 18px;padding:14px 18px;background:#f3f8fd;border:1px solid #d2e3f1;border-radius:12px;text-align:left}
.bearing-overview .detail-card{padding:0;border:0;border-radius:0;background:transparent;text-align:left;min-width:0}
.bearing-overview .direction-copy{grid-column:1;grid-row:1}
.bearing-overview .bearing-copy{grid-column:1;grid-row:2;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bearing-overview .bearing-copy .result-label{font-size:11px;letter-spacing:.02em}
.bearing-overview .bearing-copy strong{margin:0;font-size:15px}
.bearing-compass{position:relative;grid-column:2;grid-row:1/3;box-sizing:content-box;width:72px;height:72px;border:1px solid #2868a9;border-radius:50%;background:#fff;color:#164b88;font:11px/1 Arial,sans-serif;pointer-events:none}
.bearing-compass .compass-letter{position:absolute;z-index:1;background:#fff;padding:0 1px}
.bearing-compass .compass-n{top:5px;left:50%;transform:translateX(-50%);color:#164b88}
.bearing-compass .compass-s{bottom:5px;left:50%;transform:translateX(-50%)}
.bearing-compass .compass-e{right:5px;top:50%;transform:translateY(-50%)}
.bearing-compass .compass-w{left:5px;top:50%;transform:translateY(-50%)}
.bearing-compass .compass-needle{position:absolute;left:calc(50% - 4px);top:calc(50% - 21px);width:8px;height:42px;transform-origin:50% 50%;transition:transform .95s cubic-bezier(.22,.7,.3,1)}
.bearing-compass .compass-needle:before,.bearing-compass .compass-needle:after{content:"";position:absolute;left:0;width:8px;height:21px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#2868a9}
.bearing-compass .compass-needle:after{top:21px;transform:rotate(180deg);background:#9abedd}
.bearing-compass .compass-pivot{position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#d5b46b;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px #2868a9}
@media(max-width:380px){.distance-card .bearing-overview{padding:13px 12px;column-gap:12px}}
@media(prefers-reduced-motion:reduce){.bearing-compass .compass-needle{transition:none}}

/* Fine dial detail, in the site's blue, white and restrained gold palette. */
.bearing-overview .result-label{color:#527490}
.bearing-overview .detail-card strong{color:#164b88}
.bearing-compass{box-shadow:0 2px 5px #164b8812}
.bearing-compass:before{content:"";position:absolute;inset:3px;border-radius:50%;background:repeating-conic-gradient(from -.5deg,#377fc58c 0deg 1deg,transparent 1deg 15deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));pointer-events:none}
.bearing-compass:after{content:"";position:absolute;inset:19px;border:1px solid #d6e5f1;border-radius:50%;pointer-events:none}
.bearing-compass .compass-needle{z-index:1}
.bearing-compass .compass-needle:before{background:linear-gradient(90deg,#164b88 0 50%,#377fc5 50% 100%)}
.bearing-compass .compass-tail-inset{position:absolute;z-index:1;left:2px;top:24px;width:4px;height:15px;background:#fff;clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(180deg)}
.bearing-compass .compass-pivot{z-index:2}