/* Globe app: the map at city level. The dot buttons the keyboard moves through (invisible until focused, and they
   let every pointer through to the globe), the card a dot shows under the mouse or the keyboard's focus, and the
   rows of cities in the sheet. */

/* a dot under the mouse can be chosen */
.globe.is-over { cursor: pointer; }
.globe.is-over.is-grabbing { cursor: grabbing; }

/* ---------- the keyboard's dots ---------- */
.globe-dots { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.gdot { position: absolute; left: 0; top: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: none; }
.gdot:focus { outline: none; }
.gdot:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring), 0 0 0 6px color-mix(in srgb, var(--cell) 70%, transparent); }
:root[data-stage] .globe-dots, :root[data-stage] .gcard { visibility: hidden; }

/* ---------- the card ---------- */
.gcard { position: fixed; left: 0; top: 0; z-index: 15; min-width: 200px; max-width: 280px; padding: 12px 14px 12px; border-radius: 14px;
  pointer-events: none; opacity: 0; visibility: hidden; scale: 0.96; transform-origin: 50% 100%;
  transition: opacity 140ms ease, scale 180ms var(--ease), visibility 0s linear 160ms; }
.gcard.is-on { opacity: 1; visibility: visible; scale: 1; transition: opacity 140ms ease, scale 180ms var(--ease), visibility 0s; }
.gcard-title { display: flex; align-items: center; flex-wrap: wrap; margin: 0; font-size: var(--s-body); line-height: var(--l-body); font-weight: 600; }
.gcard-sub { margin: 2px 0 10px; font-size: var(--s-sub); line-height: var(--l-sub); color: var(--label-2); }
.gcard .mixbar { margin: 0 0 10px; }
.gcard-list { margin: 0 0 10px; padding: 0; list-style: none; font-size: var(--s-sub); line-height: var(--l-sub); }
.gcard-list li { display: flex; justify-content: space-between; gap: 16px; }
.gcard-list .num { color: var(--label-2); }
.gcard-list .gcard-rest { color: var(--label-2); }
.gcard-faces { --ring-gap: var(--material-strong); display: flex; align-items: center; padding-left: 2px; }
.gcard-faces .av { margin-right: -6px; box-shadow: 0 0 0 2px var(--material-strong); }
.gcard-faces .av.is-me { position: relative; z-index: 1; margin-right: 4px; }
.gcard-more { margin-left: 14px; font-size: var(--s-sub); line-height: var(--l-sub); font-weight: 600; color: var(--label-2); }
.gcard-hint { margin: 10px 0 0; font-size: var(--s-foot); line-height: var(--l-foot); color: var(--label-2); }
@media (prefers-reduced-motion: reduce) { .gcard, .gcard.is-on { scale: 1; transition: opacity 1ms, visibility 0s; } }

/* ---------- cities in the sheet ---------- */
.city-row .mixbar { margin-top: 7px; max-width: 220px; }
.city-row .row-title { display: flex; align-items: center; flex-wrap: wrap; }
.group-branch { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.group-branch .bdot { margin: 0; }
.view.city .view-actions .btn .ph { font-size: 20px; }