/* Tuner Directory globe (js/tuner-globe.js): a canvas dot globe with HTML markers, beside a panel of locations. */
.tuner-globe { position:relative; display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); gap:clamp(1.5rem,3.4vw,3.75rem); align-items:center; margin-bottom:.85rem; padding:clamp(.75rem,1.6vw,1.5rem) clamp(1.25rem,3vw,3rem) clamp(.75rem,1.6vw,1.5rem) clamp(.75rem,1.6vw,1.5rem); border:1px solid #1e272e; border-radius:16px; background:radial-gradient(70% 90% at 28% 50%,#ff642812,transparent 62%),linear-gradient(160deg,#10171c,#0b0f12 70%); overflow:hidden; }
.tuner-globe::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(#ffffff0d 1px,transparent 1.4px) 0 0/22px 22px; mask-image:linear-gradient(90deg,#000,transparent 55%); -webkit-mask-image:linear-gradient(90deg,#000,transparent 55%); opacity:.6; }
/* The directory's results line sits just under the globe, as the heading of the cards. */
.tuner-globe + .directory-results-bar { min-height:40px; margin-bottom:.6rem; }

/* Stage: the canvas fills it; markers, zoom buttons and the tooltip sit over it in CSS pixels. At the whole-globe view
   vertical swipes scroll the page and a pinch zooms the globe; zoomed in, every gesture on the stage moves the map
   (except on a phone on its side, below). */
.tuner-globe-stage { position:relative; width:100%; aspect-ratio:1/1; max-height:560px; margin-inline:auto; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; cursor:grab; border-radius:14px; outline:none; }
/* Until the script runs nothing zooms the globe, so a pinch on the stage still zooms the page (plain pan-y first, for an
   engine that rejects the pair). */
.tuner-globe:not(.is-ready) .tuner-globe-stage { touch-action:pan-y; touch-action:pan-y pinch-zoom; }
.tuner-globe-stage:focus-visible { box-shadow:0 0 0 2px var(--orange); }
.tuner-globe-stage.is-zoomed { touch-action:none; }
/* Zoomed in, a thin orange ring: the stage's last box, so it is drawn over the canvas and markers, under the buttons and
   the tooltip. */
.tuner-globe-stage.is-zoomed::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px #ff642840; pointer-events:none; }
.tuner-globe-stage.is-dragging { cursor:grabbing; }
/* Until the script draws, the same sphere in CSS keeps the space and the look. */
.tuner-globe-stage::before { content:""; position:absolute; inset:0; margin:auto; width:min(84%,470px); aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle at 31% 29%,#1e2a32,#111a20 45%,#080c0f 82%); box-shadow:0 0 0 1px #ffffff14,0 0 60px #ff642824; }
.tuner-globe.is-ready .tuner-globe-stage::before { display:none; }
/* Rounded like the stage, so a zoomed-in sphere never fills its square corners. */
.tuner-globe-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; border-radius:inherit; }
.tuner-globe-markers { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }

/* Markers: a 30px (44px on touch) button around a smaller glowing dot; clusters show their tuner count. */
.tuner-globe-marker { position:absolute; left:0; top:0; display:grid; place-items:center; width:30px; height:30px; margin:-15px 0 0 -15px; padding:0; border:0; border-radius:50%; background:none; color:#1a0d06; cursor:pointer; pointer-events:auto; will-change:transform; -webkit-tap-highlight-color:transparent; }
.tuner-globe-marker.is-behind { visibility:hidden; pointer-events:none; }
/* Out of sight (too faint near the edge, panned past the stage or under a zoom button), so not something to click either. */
.tuner-globe-marker.is-faint { pointer-events:none; }
.tuner-globe-marker:focus-visible { outline:2px solid #fff; outline-offset:1px; }
.tuner-globe-dot { --dot:12px; position:relative; display:grid; place-items:center; width:var(--dot); height:var(--dot); border-radius:50%; background:radial-gradient(circle at 34% 30%,#ffc2a6,#ff6428 52%,#d2481b); box-shadow:0 0 0 2px #0b1014,0 0 16px 3px #ff64287a; font:800 .72rem/1 var(--body); font-variant-numeric:tabular-nums; transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s,box-shadow .2s; }
.tuner-globe-dot::after { content:""; position:absolute; inset:-2px; border:1.5px solid #ff6428; border-radius:50%; opacity:0; pointer-events:none; }
.tuner-globe-marker.is-pulsing .tuner-globe-dot::after { animation:tuner-globe-pulse 2.8s cubic-bezier(.22,1,.36,1) var(--pulse-delay,0s) infinite; }
.tuner-globe-marker.is-dimmed .tuner-globe-dot { background:#3e4a53; box-shadow:0 0 0 2px #0b1014; color:#c3ccd3; }
.tuner-globe-marker.is-selected .tuner-globe-dot { transform:scale(1.18); box-shadow:0 0 0 2px #0b1014,0 0 0 4px #fff,0 0 26px 6px #ff6428a6; }
/* A place known only to its region or country: a hollow ring, never a precise-looking dot. */
.tuner-globe-marker.is-approximate .tuner-globe-dot { background:#0b1014; box-shadow:0 0 0 2px #ff6428,0 0 14px 2px #ff642859; color:#ffc2a6; }
.tuner-globe-marker.is-approximate.is-dimmed .tuner-globe-dot { box-shadow:0 0 0 2px #3e4a53; color:#c3ccd3; }
.tuner-globe-marker.is-approximate.is-selected .tuner-globe-dot { box-shadow:0 0 0 2px #ff6428,0 0 0 4px #fff,0 0 26px 6px #ff6428a6; }
@keyframes tuner-globe-pulse { 0% { transform:scale(1); opacity:.8; } 70%, 100% { transform:scale(2.7); opacity:0; } }

/* Tooltip card: above its marker, or below it near the top edge; the script keeps it inside the stage. It stays under
   the zoom buttons, so a selected place's card never hides them or their focus ring. */
.tuner-globe-tooltip { position:absolute; left:0; top:0; z-index:2; width:max-content; max-width:min(250px,calc(100% - 16px)); padding:.7rem .85rem .75rem; translate:-50% calc(-100% - 22px); border:1px solid #3b4852; border-radius:10px; background:#0f161bf0; box-shadow:0 18px 50px #0009; pointer-events:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.tuner-globe-tooltip.is-below { translate:-50% 22px; }
.tuner-globe-tooltip.is-away { visibility:hidden; }
.tuner-globe-tooltip p { margin:0; }
.tuner-globe-tip-place { color:#f1f4f6; font-size:.82rem; font-weight:700; line-height:1.35; }
.tuner-globe-tip-count { color:var(--orange); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:.15rem !important; }
.tuner-globe-tooltip ul { list-style:none; margin:.5rem 0 0; padding:.5rem 0 0; border-top:1px solid #2c363e; }
.tuner-globe-tooltip li { color:#c7d0d7; font-size:.78rem; line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tuner-globe-tooltip li.tuner-globe-tip-more { color:#8d9aa5; }

/* Zoom buttons, clear of the whole globe at every width: a column at the bottom right with a mouse, minus and plus in
   the bottom corners on phones and touch screens. Hidden until the script runs. */
.tuner-globe-zoom { position:absolute; inset:0; z-index:3; pointer-events:none; }
.tuner-globe:not(.is-ready) .tuner-globe-zoom { display:none; }
.tuner-globe-zoom-button { position:absolute; right:12px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid #3b4852; border-radius:10px; background:#0f161be6; color:#e8edf0; box-shadow:0 8px 24px #0006; cursor:pointer; pointer-events:auto; -webkit-tap-highlight-color:transparent; }
.tuner-globe-zoom-button[hidden] { display:none; }
.tuner-globe-zoom-button svg { width:18px; height:18px; }
.tuner-globe-zoom-out { bottom:12px; }
.tuner-globe-zoom-in { bottom:54px; }
.tuner-globe-zoom-reset { bottom:96px; }
.tuner-globe-zoom-button[aria-disabled="true"] { opacity:.4; cursor:default; }
.tuner-globe-zoom-button:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }

/* Panel */
.tuner-globe-panel { position:relative; align-self:start; min-width:0; padding-top:clamp(0rem,3vw,2.5rem); }
.tuner-globe-kicker { display:flex; align-items:center; gap:.6rem; margin:0 0 .85rem; color:var(--orange); font:600 .72rem/1.6 var(--body); letter-spacing:.12em; text-transform:uppercase; }
.tuner-globe-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px #ff642824,0 0 12px #ff6428; }
.tuner-globe-panel > h3 { margin:0 0 1.35rem; font:400 clamp(1.45rem,2.1vw,1.9rem)/1.2 var(--brand); letter-spacing:-.01em; text-transform:uppercase; }
.tuner-globe-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 0 1.4rem; border-block:1px solid #26313a; }
.tuner-globe-stats > div { display:flex; flex-direction:column-reverse; gap:.1rem; padding:.95rem 0; }
.tuner-globe-stats > div + div { padding-left:1.25rem; border-left:1px solid #26313a; }
.tuner-globe-stats dt { color:#8f9ca7; font-size:.7rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
.tuner-globe-stats dd { margin:0; color:#f4f6f7; font:400 clamp(1.8rem,2.6vw,2.3rem)/1.1 var(--brand); font-variant-numeric:tabular-nums; }
.tuner-globe-locations { display:grid; gap:.25rem; max-height:20rem; margin:0 0 1.1rem; padding:0 .35rem 0 0; overflow-y:auto; list-style:none; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#3c4851 transparent; }
.tuner-globe-location { display:flex; align-items:center; gap:.7rem; width:100%; min-height:36px; padding:.4rem .7rem; border:1px solid transparent; border-radius:8px; background:none; color:#d5dde3; font:600 .85rem/1.35 var(--body); text-align:left; cursor:pointer; }
.tuner-globe-location::before { content:""; width:6px; height:6px; flex:none; border-radius:50%; background:#ff6428b3; }
.tuner-globe-location > span:first-child { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tuner-globe-location-count { min-width:2rem; padding:.1rem .5rem; border-radius:20px; background:#1a232a; color:#b9c4cc; font-size:.75rem; font-variant-numeric:tabular-nums; text-align:center; }
.tuner-globe-location[aria-pressed="true"] { border-color:#ff642866; background:#ff642817; color:#fff; }
.tuner-globe-location[aria-pressed="true"] .tuner-globe-location-count { background:var(--orange); color:#160b06; }
.tuner-globe-location:focus-visible, .tuner-globe-back:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }

.tuner-globe-place { margin:0 0 1.1rem; }
.tuner-globe-place-head { display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem; }
.tuner-globe-place-head h4 { margin:0; color:#f4f6f7; font-size:1.05rem; line-height:1.3; }
.tuner-globe-place-head p { margin:.1rem 0 0; color:var(--orange); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.tuner-globe-back { display:inline-grid; place-items:center; width:38px; height:38px; flex:none; padding:0; border:1px solid #45515a; border-radius:50%; background:#161d22; color:#f3f5f6; cursor:pointer; }
.tuner-globe-back svg { width:18px; height:18px; }
.tuner-globe-place ul { display:grid; gap:.45rem; max-height:15.6rem; margin:0; padding:0 .35rem 0 0; overflow-y:auto; list-style:none; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#3c4851 transparent; }
.tuner-globe-place li.is-dimmed { opacity:.5; }
/* Each tuner at a picked place opens its directory card. */
.tuner-globe-person { display:flex; align-items:center; gap:.75rem; width:100%; padding:.6rem .7rem; border:1px solid #26313a; border-radius:9px; background:linear-gradient(130deg,#151c22,#10161b); color:inherit; font:inherit; text-align:left; cursor:pointer; }
.tuner-globe-person > span:last-child { display:grid; flex:1; min-width:0; }
.tuner-globe-person::after { content:""; flex:none; width:7px; height:7px; margin-right:.35rem; border-top:1.5px solid #8f9ca7; border-right:1.5px solid #8f9ca7; transform:rotate(45deg); }
.tuner-globe-person strong { color:#eef2f4; font-size:.86rem; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tuner-globe-person strong + span { color:#93a1ab; font-size:.75rem; line-height:1.45; }
.tuner-globe-person:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.tuner-globe-avatar { display:grid; place-items:center; width:34px; height:34px; flex:none; overflow:hidden; border-radius:50%; background:linear-gradient(145deg,#ff7134,#ba3a11); color:#fff; font:400 .9rem/1 var(--brand); }
.tuner-globe-avatar img { width:100%; height:100%; object-fit:cover; background:#fff; }
/* A tuner's card takes the list's place; the panel's heading and totals step aside to make room. */
.tuner-globe.is-tuner :is(.tuner-globe-panel > h3, .tuner-globe-stats, .tuner-globe-hint) { display:none; }
.tuner-globe-tuner { outline:none; }

.tuner-globe-note { margin:0 0 1.1rem; padding:.85rem 1rem; border:1px dashed #384751; border-radius:9px; background:#12191e; color:#a7b1ba; font-size:.85rem; line-height:1.6; }
.tuner-globe-note strong { color:#eef2f4; font-weight:700; }
.tuner-globe-hint { display:flex; align-items:center; gap:.55rem; margin:0 0 .35rem; color:#a7b1ba; font-size:.78rem; line-height:1.5; }
.tuner-globe-hint svg { width:18px; height:18px; flex:none; color:var(--orange); }
.tuner-globe-hint-touch { display:none; }
.tuner-globe-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

@media (hover:hover) and (pointer:fine) {
  .tuner-globe-marker:hover .tuner-globe-dot { transform:scale(1.18); }
  .tuner-globe-location:hover { background:#151d23; border-color:#2b363f; }
  .tuner-globe-location[aria-pressed="true"]:hover { background:#ff642824; border-color:#ff642880; }
  .tuner-globe-back:hover { filter:brightness(1.2); }
  .tuner-globe-person:hover { border-color:#3a4752; background:linear-gradient(130deg,#19222a,#121a20); }
  .tuner-globe-zoom-button:not([aria-disabled="true"]):hover { background:#18222a; border-color:#566571; }
}
@media (min-width:1200px) { .tuner-globe-locations { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:.5rem; } }
@media (max-width:1100px) { .tuner-globe { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
/* Tablets: the globe on top, then the panel in two columns with the locations on the right. */
@media (max-width:900px) and (min-width:761px) {
  .tuner-globe { grid-template-columns:minmax(0,1fr); gap:1rem; padding:.5rem 1.75rem 1.75rem; }
  .tuner-globe-stage { max-height:480px; }
  .tuner-globe-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); grid-template-rows:repeat(4,auto) 1fr; grid-template-areas:"kicker list" "title list" "stats list" "hint list" ". list"; column-gap:2rem; padding-top:0; }
  .tuner-globe-kicker { grid-area:kicker; }
  .tuner-globe-panel > h3 { grid-area:title; }
  .tuner-globe-stats { grid-area:stats; }
  .tuner-globe-hint { grid-area:hint; }
  .tuner-globe-locations, .tuner-globe-place, .tuner-globe-note { grid-area:list; align-self:start; margin-bottom:0; }
  .tuner-globe-stats dd { font-size:1.7rem; }
}
/* Phones: the globe on top, the panel below with the locations as a swipeable row of chips. */
@media (max-width:760px) {
  .tuner-globe { grid-template-columns:minmax(0,1fr); gap:.5rem; margin-bottom:.75rem; padding:.25rem 1rem 1.25rem; border-radius:14px; }
  .tuner-globe-place { scroll-margin-top:130px; }
  .tuner-globe::before { mask-image:linear-gradient(180deg,#000,transparent 45%); -webkit-mask-image:linear-gradient(180deg,#000,transparent 45%); }
  .tuner-globe-stage { max-height:none; }
  .tuner-globe-panel > h3 { margin-bottom:1rem; }
  .tuner-globe-stats { margin-bottom:1rem; }
  .tuner-globe-stats > div { padding:.75rem 0; }
  .tuner-globe-locations { display:flex; gap:.5rem; max-height:none; margin:0 -1rem 1rem; padding:.15rem 1rem .5rem; overflow:auto hidden; overscroll-behavior-x:contain; scroll-padding-inline:1rem; scroll-snap-type:x proximity; scrollbar-width:none; }
  .tuner-globe-locations::-webkit-scrollbar { display:none; }
  .tuner-globe-locations li { flex:none; scroll-snap-align:start; }
  .tuner-globe-location { width:auto; min-height:38px; padding:.35rem .45rem .35rem .8rem; border-color:#2b363f; border-radius:20px; background:#121a1f; }
  .tuner-globe-location > span:first-child { flex:none; max-width:13rem; }
  .tuner-globe-place ul { max-height:none; padding:0; }
  /* A picked place's list comes up under the globe in place of the heading and totals. */
  .tuner-globe.is-place :is(.tuner-globe-kicker, .tuner-globe-panel > h3, .tuner-globe-stats) { display:none; }
}
@media (max-width:760px), (pointer:coarse) {
  .tuner-globe-hint-pointer { display:none; }
  .tuner-globe-hint-touch { display:inline; }
  .tuner-globe-zoom-in { right:6px; bottom:6px; }
  .tuner-globe-zoom-out { right:auto; left:6px; bottom:6px; }
  .tuner-globe-zoom-reset { top:6px; right:6px; bottom:auto; }
}
/* Phones on their side: the stage is taller than the screen, so even zoomed in a swipe that starts up or down scrolls
   the page; sideways drags and pinches still move the map (the script's `sideways` query is the same). */
@media (orientation:landscape) and (max-width:760px), (orientation:landscape) and (max-height:600px) {
  .tuner-globe-stage.is-zoomed { touch-action:pan-y; }
}
/* Touch: 44px targets; the marker button grows around the same dot. */
@media (pointer:coarse) {
  .tuner-globe-marker { width:44px; height:44px; margin:-22px 0 0 -22px; }
  .tuner-globe-location { min-height:44px; }
  .tuner-globe-person { min-height:44px; }
  .tuner-globe-back { width:44px; height:44px; }
  .tuner-globe-zoom-button { width:44px; height:44px; border-radius:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .tuner-globe-dot, .tuner-globe-dot::after { transition:none !important; animation:none !important; }
}