.loc-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  cursor: default;
  white-space: nowrap;
}

.loc-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e9d5b;
  flex: none;
}

.loc-tag[data-day=night] .loc-dot { background: #9c86ee; }

.loc-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: loc-pulse 2s infinite;
}

@keyframes loc-pulse {
  from { transform: scale(1); opacity: .5; }
  to { transform: scale(2.6); opacity: 0; }
}

.loc-swap {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  height: 1.25em;
}

.loc-place,
.loc-time {
  grid-area: 1 / 1;
  line-height: 1.25em;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
}

.loc-time { transform: translateY(100%); opacity: 0; }

.loc-tag:hover .loc-place,
.loc-tag:focus-visible .loc-place { transform: translateY(-100%); opacity: 0; }

.loc-tag:hover .loc-time,
.loc-tag:focus-visible .loc-time { transform: translateY(0); opacity: 1; }

.loc-tag:focus-visible {
  outline: 3px solid rgba(91,63,176,.25);
  outline-offset: 3px;
}

.loc-tag--dark { border-color: #f3f1e933; color: #f3f1e9; }

html.motion-paused .loc-dot::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .loc-dot::after { animation: none; opacity: 0; }
}

@media (hover: none) {
  .loc-tag { white-space: normal; max-width: 100%; box-sizing: border-box; border-radius: 14px; padding: 10px 16px 10px 12px; }
  .loc-swap {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
    height: auto;
    overflow: visible;
  }
  .loc-tag .loc-place { transform: none; opacity: 1; }
  .loc-tag .loc-time { transform: none; opacity: .7; font-size: 12px; }
}