/* Pin the country. Builds on /visited/visited.css. */
.pin { margin-top: 1rem; }
.pin-sets { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; padding: 0; border: 0; }
.pin-sets legend { padding: 0; margin-bottom: .6rem; color: var(--ink); font-weight: 700; }
.pin-sets label { position: relative; cursor: pointer; }
.pin-sets input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pin-sets span { display: inline-flex; align-items: center; min-height: 48px; padding: .4rem 1.1rem; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; }
.pin-sets input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--sand); }
.pin-sets input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.pin-start { min-width: 10rem; font-size: 1.15rem; }
.pin-best:empty { display: none; }

.pin-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; padding: .9rem 1.25rem; border-radius: 18px; background: var(--dusk); color: var(--on-dusk); }
.pin-ask { color: var(--on-dusk); font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.3rem); outline: none; }
.pin-name { color: var(--star); }
.pin-meta { display: flex; gap: 1.25rem; color: var(--dusk-muted); font-weight: 600; }
.pin-total { color: var(--star); font-size: 1.2em; }
.pin-map { margin-top: .75rem; padding: clamp(.4rem, 1.5vw, 1rem); border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.pin-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 12px; }
.pin-svg { display: block; width: 100%; min-width: 880px; height: auto; cursor: crosshair; touch-action: pan-x pan-y pinch-zoom; }
.pin-svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pin-area path, .pin-area circle { fill: var(--map-empty); stroke: var(--card); stroke-width: .8; stroke-linejoin: round; }
.pin-area.is-wrong path, .pin-area.is-wrong circle { fill: var(--cov-2); }
.pin-area.is-target path, .pin-area.is-target circle { fill: var(--sun); stroke: var(--ink); stroke-width: 1.4; }
.pin-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 4 4; stroke-linecap: round; pointer-events: none; }
.pin-mark { display: none; pointer-events: none; fill: var(--danger); }
.pin-mark.on { display: block; }
.pin-ring { fill: none; stroke: var(--danger); stroke-width: 2; }
.pin-cross { display: none; fill: none; stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.pin-svg:focus-visible .pin-cross { display: block; }
.pin-swipe { display: none; margin-top: .5rem; color: var(--muted); font-size: .9rem; }
@media (max-width: 960px) { .pin-swipe { display: block; } }
.pin-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; min-height: 64px; margin-top: .75rem; }
.pin-result { color: var(--ink); font-size: 1.15rem; font-weight: 600; }
@media (max-width: 760px) {
  .pin-foot { position: sticky; bottom: 0; z-index: 2; margin-inline: calc(-1 * var(--gutter)); padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: var(--sand); border-top: 1px solid var(--line); }
  .pin-foot .btn { width: 100%; }
  .pin-foot:has(.pin-result:empty) { border-top-color: transparent; }
}

.pin-end { padding: 1.5rem; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.pin-score { color: var(--muted); font-size: 1.3rem; font-weight: 600; line-height: 1; }
.pin-final { color: var(--gold-text); font-size: clamp(3.5rem, 2.5rem + 6vw, 5.5rem); font-weight: 700; letter-spacing: -.03em; outline: none; }
.pin-verdict { margin-top: .6rem; color: var(--ink); font-size: 1.15rem; }
.pin-end .vis-buttons { margin-top: 1rem; }
.pin-log { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 2rem; margin-top: 1.25rem; }
.pin-log li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; border-top: 1px solid var(--line); color: var(--text); }
.pin-log b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .pin-area.is-target path { animation: pin-pulse .9s ease-out 2; }
  @keyframes pin-pulse { 50% { stroke-width: 4; } }
}
@media (forced-colors: active) {
  .pin-area path, .pin-area circle { fill: Canvas; stroke: CanvasText; }
  .pin-area.is-target path, .pin-area.is-target circle { fill: Highlight; }
  .pin-sets span, .pin-end, .pin-bar { border: 2px solid CanvasText; }
  .pin-sets input:checked + span { background: Highlight; color: HighlightText; }
}