/* ==========================================================================
   worldmap.now — the planet, live
   Night-instrument design system. Two families: Space Grotesk (voice),
   IBM Plex Mono (instruments). One hue per phenomenon, nothing else glows.
   ========================================================================== */

:root {
  --void:   #030710;
  --glass:  rgba(8, 13, 24, 0.72);
  --glass-2:rgba(12, 19, 34, 0.62);
  --ink:    #eaf1fb;
  --muted:  #7f8ea6;
  --faint:  #55627a;
  --line:   rgba(140, 170, 220, 0.14);
  --line-2: rgba(140, 170, 220, 0.26);

  --quake:  #ff5c47;
  --quake-2:#ffb347;
  --fire:   #ff9a3d;
  --radar:  #59d2a4;
  --iss:    #6fe3ff;
  --live:   #4ade80;
  --warn:   #ffb347;

  --r-lg: 18px;
  --r-md: 13px;
  --r-sm: 9px;
  --blur: saturate(1.35) blur(18px);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(.22, .8, .24, 1);

  --dock-w: 22.5rem;
  --pad: 1rem;
}

/* Scale the whole instrument panel with the screen — phones read small,
   TVs across a room read large. Everything below is in rem. */
html { font-size: clamp(14.5px, 0.42vw + 12.2px, 19px); }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--iss); }

:focus-visible {
  outline: 2px solid var(--iss);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: rgba(111, 227, 255, .28); }

/* ==========================================================================
   Stage
   ========================================================================== */

#map { position: fixed; inset: 0; background: var(--void); }

#map canvas { outline: none; }

/* cinematic depth — a quiet radial vignette over the whole stage */
.vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(1, 3, 8, .55) 100%);
  z-index: 1;
}

/* boot spinner until the style loads */
#boot {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--void); z-index: 40;
  transition: opacity .6s var(--ease), visibility .6s;
}
#boot.done { opacity: 0; visibility: hidden; }
.boot-ring {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--iss);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Glass + HUD scaffolding
   ========================================================================== */

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

.hud { position: fixed; z-index: 10; display: flex; gap: .55rem; }

.hud-tl {
  top: calc(env(safe-area-inset-top, 0px) + var(--pad));
  left: calc(env(safe-area-inset-left, 0px) + var(--pad));
  flex-direction: column;
  align-items: flex-start;
}

.hud-bl {
  left: calc(env(safe-area-inset-left, 0px) + var(--pad));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pad));
  align-items: stretch;
}

/* every piece of UI that should dissolve in cinema/idle */
.chrome { transition: opacity .8s var(--ease), transform .8s var(--ease), visibility .8s; }

/* ==========================================================================
   Brand
   ========================================================================== */

.brand {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .62rem .95rem;
  border-radius: var(--r-lg);
}

.brand h1 {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.brand .tld { color: var(--iss); font-weight: 500; }

.live {
  display: inline-flex; align-items: center; gap: .38rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em;
  color: var(--live);
}
.live-dot {
  width: .48rem; height: .48rem; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: ping 2.4s var(--ease) infinite;
}
.live.stale  { color: var(--warn); }
.live.dead   { color: var(--quake); }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  70%  { box-shadow: 0 0 0 .55rem rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.clock {
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Layer chips
   ========================================================================== */

.chips { display: flex; gap: .45rem; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem .5rem .7rem;
  border-radius: 999px;
  font-size: .82rem; font-weight: 500;
  color: var(--muted);
  transition: color .25s, border-color .25s, background .25s, transform .15s var(--ease);
  position: relative;
}
.chip:hover { transform: translateY(-1px); color: var(--ink); }
.chip:active { transform: translateY(0); }
.chip svg { width: 1rem; height: 1rem; display: block; }

.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--line-2); }
.chip[aria-pressed="true"]::after {
  content: "";
  width: .95rem; height: .95rem;
  border-radius: 50%;
  background:
    center / .55rem no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M1 4.2 3.8 7 9 1" fill="none" stroke="%23030710" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'),
    var(--c, var(--live));
}
.chip[data-layer="quakes"] { --c: var(--quake); }
.chip[data-layer="fires"]  { --c: var(--fire); }
.chip[data-layer="radar"]  { --c: var(--radar); }
.chip[data-layer="iss"]    { --c: var(--iss); }
.chip[data-layer="daynight"] { --c: #ffd08a; }
.chip[aria-pressed="true"] svg { color: var(--c); }

/* ==========================================================================
   Bottom-left controls
   ========================================================================== */

.ctl { display: flex; align-items: center; border-radius: var(--r-md); overflow: hidden; }

.ctl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-width: 2.5rem; height: 2.5rem;
  padding: 0 .8rem;
  font-size: 1rem; font-weight: 500; color: var(--muted);
  transition: color .2s, background .2s;
}
.ctl-btn:hover { color: var(--ink); background: rgba(140, 170, 220, .08); }
.ctl-btn svg { width: 1.05rem; height: 1.05rem; }
.ctl-btn.wide { font-size: .82rem; }
.ctl-sep { width: 1px; align-self: stretch; margin: .5rem 0; background: var(--line); }

/* ==========================================================================
   Dock — Happening Now
   ========================================================================== */

#dock {
  position: fixed; z-index: 10;
  top: calc(env(safe-area-inset-top, 0px) + var(--pad));
  right: calc(env(safe-area-inset-right, 0px) + var(--pad));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pad));
  width: var(--dock-w);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.sheet-handle { display: none; background: none; border: 0; }

.dock-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 1.15rem .35rem;
}
.dock-head h2 {
  margin: 0;
  font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em;
}
.seismo { width: 2.6rem; height: 1rem; color: var(--iss); opacity: .9; }
.seismo path {
  stroke-dasharray: 100;
  animation: trace 3.6s linear infinite;
}
@keyframes trace {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  8%   { opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  80%  { opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.fresh {
  margin: 0 1.15rem .6rem;
  font-size: .66rem; color: var(--faint);
  letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- the feed ---- */

.feed {
  list-style: none; margin: 0; padding: .1rem .6rem .6rem;
  overflow-y: auto; flex: 1;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.feed::-webkit-scrollbar { width: 4px; }
.feed::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }

.feed-item { margin: 0 0 .45rem; }

.feed-btn {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  gap: .8rem;
  width: 100%;
  padding: .7rem .65rem .7rem 0;
  text-align: left;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--glass-2);
  transition: border-color .2s, background .2s, transform .18s var(--ease);
  animation: rise .5s var(--ease) backwards;
}
.feed-item:nth-child(-n+8) .feed-btn { animation-delay: calc(var(--i, 0) * 55ms); }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.feed-btn:hover { border-color: var(--line-2); transform: translateX(2px); }
.feed-btn.active {
  border-color: var(--line-2);
  background: rgba(20, 30, 52, .8);
}

.tick { border-radius: 2px; background: var(--muted); }
.feed-btn[data-type="quake"] .tick { background: linear-gradient(180deg, var(--quake-2), var(--quake)); }
.feed-btn[data-type="fire"]  .tick { background: var(--fire); }
.feed-btn[data-type="iss"]   .tick { background: var(--iss); }
.feed-btn[data-type="radar"] .tick { background: var(--radar); }

.fi-body { min-width: 0; }
.fi-title {
  margin: 0 0 .18rem;
  font-size: .88rem; font-weight: 500; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fi-sub {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fi-impact {
  margin: .2rem 0 0;
  font-size: .68rem; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fi-ago {
  align-self: start;
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem; color: var(--faint);
  padding-top: .12rem; padding-right: .1rem;
  font-variant-numeric: tabular-nums;
}

.feed-empty {
  padding: 2.2rem 1rem; text-align: center;
  color: var(--muted); font-size: .85rem;
}

/* skeletons while connecting */
.skel {
  height: 3.6rem; margin: 0 0 .45rem;
  border-radius: var(--r-sm);
  background: linear-gradient(100deg, var(--glass-2) 40%, rgba(140,170,220,.07) 50%, var(--glass-2) 60%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -120% 0; } }

/* ---- subscribe ---- */

.subscribe {
  padding: .95rem 1.15rem .35rem;
  border-top: 1px solid var(--line);
}
.subscribe label {
  display: block;
  font-size: .88rem; font-weight: 500;
  margin-bottom: .55rem;
}
.sub-row { display: flex; gap: .45rem; }

#email, #place {
  flex: 1; min-width: 0;
  padding: .62rem .75rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  color: var(--ink);
  background: rgba(3, 7, 16, .6);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .2s;
}
#place { width: 100%; margin-bottom: .45rem; }
#email::placeholder, #place::placeholder { color: var(--faint); }
#email:focus, #place:focus { outline: none; border-color: var(--iss); }

#subBtn {
  padding: .62rem 1rem;
  border-radius: var(--r-sm);
  background: var(--iss);
  color: #03222e;
  font-weight: 700; font-size: .82rem;
  transition: transform .15s var(--ease), box-shadow .2s, filter .2s;
  box-shadow: 0 0 0 0 rgba(111, 227, 255, .35);
}
#subBtn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(111, 227, 255, .28); }
#subBtn:active { transform: none; }
#subBtn[disabled] { filter: saturate(.4) brightness(.8); cursor: default; }

#website { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }

.privacy {
  margin: .55rem 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem; color: var(--faint);
}

.subscribe.done label { color: var(--live); }

/* ---- dock footer ---- */

.dock-foot {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1.15rem .95rem;
  font-size: .72rem; color: var(--muted);
}
.dock-foot a { color: var(--muted); }
.dock-foot a:hover { color: var(--ink); }
.linklike {
  padding: 0; color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.linklike:hover { color: var(--ink); text-decoration-color: var(--iss); }
.dot-sep { color: var(--faint); }
.demo-badge {
  margin-left: auto;
  font-size: .6rem; letter-spacing: .08em;
  color: var(--warn);
  border: 1px solid rgba(255, 179, 71, .35);
  border-radius: 999px;
  padding: .12rem .5rem;
}

/* ==========================================================================
   Popups (MapLibre override)
   ========================================================================== */

.wm-pop .maplibregl-popup-content {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  color: var(--ink);
  padding: .8rem .95rem;
  font-family: "Space Grotesk", sans-serif;
  min-width: 13rem;
}
.wm-pop .maplibregl-popup-tip { display: none; }
.pop-title { margin: 0 0 .2rem; font-size: .92rem; font-weight: 700; }
.pop-sub   { margin: 0 0 .2rem; font-family: "IBM Plex Mono", monospace; font-size: .68rem; color: var(--muted); }
.pop-impact{ margin: 0 0 .55rem; font-size: .74rem; color: var(--ink); opacity: .85; line-height: 1.45; }
.pop-row   { display: flex; flex-wrap: wrap; gap: .45rem .9rem; font-size: .72rem; }
.pop-row a, .pop-row button { color: var(--iss); padding: 0; font-size: .72rem; text-decoration: none; }
.pop-row a:hover, .pop-row button:hover { text-decoration: underline; }

/* ==========================================================================
   Cinema mode + idle  — the interface exhales
   ========================================================================== */

body.cinema .chrome,
body.idle .chrome {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
body.cinema .hud-tl, body.idle .hud-tl { transform: translateY(-6px); }
body.cinema #dock,   body.idle #dock   { transform: translateX(10px); }

#wake {
  position: fixed; z-index: 9;
  left: calc(env(safe-area-inset-left, 0px) + var(--pad) + .2rem);
  top:  calc(env(safe-area-inset-top, 0px) + var(--pad) + .2rem);
  font-size: .66rem; letter-spacing: .18em; text-transform: lowercase;
  color: var(--faint);
  opacity: 0; transition: opacity 1.2s var(--ease) .4s;
  pointer-events: none;
}
body.cinema #wake, body.idle #wake { opacity: .8; }

/* lower-third caption */
#lowerThird {
  position: fixed; z-index: 12;
  left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 7vh);
  transform: translate(-50%, 14px);
  display: grid;
  grid-template-columns: 3px 1fr auto;
  gap: .95rem; align-items: center;
  min-width: min(30rem, 86vw);
  max-width: 92vw;
  padding: .85rem 1.15rem .95rem .9rem;
  border-radius: var(--r-md);
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  overflow: hidden;
}
#lowerThird.show { opacity: 1; transform: translate(-50%, 0); }
.lt-tick { align-self: stretch; border-radius: 2px; background: var(--muted); }
#lowerThird[data-type="quake"] .lt-tick { background: linear-gradient(180deg, var(--quake-2), var(--quake)); }
#lowerThird[data-type="fire"]  .lt-tick { background: var(--fire); }
.lt-title { margin: 0 0 .15rem; font-size: 1.02rem; font-weight: 700; }
.lt-sub   { margin: 0; font-size: .7rem; color: var(--muted); }
.lt-time  { font-size: .7rem; color: var(--faint); align-self: start; padding-top: .15rem; }
.lt-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--iss), transparent);
  transform-origin: left;
  transform: scaleX(0);
}
#lowerThird.show .lt-progress { animation: lt-run var(--lt-dur, 14s) linear forwards; }
@keyframes lt-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   Toast
   ========================================================================== */

#toast {
  position: fixed; z-index: 30;
  left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.4rem);
  transform: translate(-50%, 12px);
  padding: .65rem 1.05rem;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line-2);
  font-size: .8rem;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  max-width: 86vw; text-align: center;
}
#toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.noscript {
  position: fixed; inset: auto 1rem 1rem; z-index: 50;
  padding: 1rem; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line-2);
}

/* ==========================================================================
   Attribution (keep it, keep it quiet)
   ========================================================================== */

.maplibregl-ctrl-attrib {
  background: rgba(3, 7, 16, .55) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 8px 0 0 0;
  font-size: .58rem;
}
.maplibregl-ctrl-attrib a { color: var(--faint) !important; }
body.cinema .maplibregl-ctrl-bottom-right,
body.idle   .maplibregl-ctrl-bottom-right { opacity: 0; transition: opacity .8s; }

/* ==========================================================================
   Mobile — the dock becomes a bottom sheet
   ========================================================================== */

@media (max-width: 740px) {
  :root { --pad: .7rem; }

  .hud-tl { right: calc(env(safe-area-inset-right, 0px) + var(--pad)); }
  .brand { width: 100%; justify-content: space-between; padding: .55rem .8rem; }
  .brand h1 { font-size: 1.05rem; }
  .chips { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }

  .hud-bl { bottom: auto; top: 50%; left: var(--pad); flex-direction: column; transform: translateY(-80%); }
  .ctl-label { display: none; }                          /* icon-only on phones */
  .ctl-btn.wide { padding: 0; min-width: 2.75rem; min-height: 2.75rem; }

  #email, #place, #placeQuery { font-size: 16px; }       /* stop iOS focus-zoom */

  #dock {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    height: 52vh;
    max-height: 52vh;
    transform: translateY(var(--sheet-y, 0));
    transition: transform .35s var(--ease);
    touch-action: pan-y;                                  /* feed scroll works */
  }
  #dock.dragging { transition: none; }
  #dock.peek { --sheet-y: calc(52vh - 8.2rem); }
  .feed { touch-action: pan-y; }

  .sheet-handle {
    display: grid; place-items: center;
    width: 100%;
    min-height: 44px;
    padding: .55rem 0 .2rem;
    cursor: grab;
    touch-action: none;                                   /* drag lives here only */
    background: none; border: 0;
  }
  .sheet-handle i {
    width: 2.6rem; height: .28rem; border-radius: 999px;
    background: var(--line-2);
  }

  .dock-head { padding-top: .2rem; }
  .subscribe { padding-top: .75rem; }
  .privacy { display: none; }

  #lowerThird { bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem); }
}

/* short landscape phones */
@media (max-height: 460px) {
  #dock { height: 72vh; max-height: 72vh; }
}

/* ==========================================================================
   Reduced motion — stillness is a valid way to watch a planet
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .live-dot, .seismo path, .skel { animation: none; }
  .feed-btn { animation: none; }
  #lowerThird.show .lt-progress { animation-duration: 0.01s; transform: scaleX(1); }
  .chrome, #dock, #toast, #lowerThird { transition-duration: .01s; }
}

/* ==========================================================================
   Launch-hardening additions: connection banner, popup meta, places, search
   ========================================================================== */

#connBanner {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 60;
  margin-top: calc(env(safe-area-inset-top, 0px) + .6rem);
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  max-width: min(92vw, 34rem);
  padding: .55rem .9rem;
  border: 1px solid rgba(255, 92, 71, .5);
  border-radius: var(--r);
  background: rgba(24, 8, 8, .82);
  backdrop-filter: blur(12px);
  font-size: .8rem; color: var(--ink);
}
#connBanner strong { color: var(--quake); font-weight: 600; }
#connRetry {
  margin-left: auto;
  padding: .3rem .7rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: none; color: var(--ink);
  font: 500 .72rem/1 "IBM Plex Mono", monospace;
  cursor: pointer;
}
#connRetry:hover { border-color: var(--iss); color: var(--iss); }

.pop-note {
  margin: .35rem 0 0; font-size: .66rem; line-height: 1.45;
  color: var(--faint);
}
.pop-meta {
  margin: .4rem 0 0; font-size: .62rem; letter-spacing: .02em;
  color: var(--faint);
}

/* live badge extra state */
.live.dead .live-dot { background: var(--quake); box-shadow: 0 0 8px rgba(255,92,71,.6); animation: none; }
.live.dead #liveLabel, .live.dead { color: var(--quake); }

/* ---- places you follow ---- */
#placesSection { margin-bottom: .35rem; }
#placesSection .dock-head { padding-bottom: .3rem; }
.mini-btn {
  padding: .28rem .6rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: none; color: var(--dim);
  font: 500 .68rem/1 "IBM Plex Mono", monospace;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.mini-btn:hover, .mini-btn:focus-visible { color: var(--iss); border-color: var(--iss); }

.places { list-style: none; margin: 0 0 .3rem; padding: 0; display: grid; gap: .35rem; }
.place-empty, .geo-none {
  font-size: .7rem; color: var(--faint); padding: .2rem .1rem .4rem;
}
.place {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(10, 16, 28, .45);
}
.place-main {
  display: grid; gap: .12rem; text-align: left;
  padding: .5rem .6rem;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  min-height: 44px;
}
.place-name { font-weight: 500; font-size: .78rem; }
.place-ok { font-size: .66rem; color: var(--faint); }
.place-event { font-size: .66rem; color: var(--quake); }
.place-event[data-type="thermal"] { color: var(--fire); }
.place-edit {
  padding: .4rem .6rem; min-width: 40px; min-height: 44px;
  background: none; border: 0; color: var(--faint);
  font-size: .95rem; cursor: pointer;
}
.place-edit:hover, .place-edit:focus-visible { color: var(--ink); }
.place-editor {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center;
  padding: .45rem .6rem .55rem;
  border-top: 1px solid var(--line);
  font-size: .66rem; color: var(--dim);
}
.place-editor label { display: inline-flex; align-items: center; gap: .3rem; }
.place-editor select {
  background: var(--void); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: .35rem;
  font: inherit; padding: .15rem .25rem;
}
.place-editor .chk input { accent-color: var(--iss); }
.place-remove {
  margin-left: auto;
  background: none; border: 0; color: var(--quake);
  font: inherit; cursor: pointer; padding: .2rem .3rem;
}

#placeSearch { margin-bottom: .45rem; }
#placeQuery {
  width: 100%;
  padding: .5rem .65rem;
  background: rgba(6, 11, 22, .8);
  border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--ink); font: inherit; font-size: .8rem;
}
#placeQuery:focus { outline: none; border-color: var(--iss); }
#placeResults { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: 2px; }
#placeResults button {
  width: 100%; text-align: left;
  padding: .45rem .6rem; min-height: 40px;
  background: rgba(10, 16, 28, .5);
  border: 1px solid var(--line); border-radius: .45rem;
  color: var(--ink); font-size: .74rem; cursor: pointer;
}
#placeResults button:hover, #placeResults button:focus-visible {
  border-color: var(--iss);
}
.geo-credit { margin: .3rem 0 0; font-size: .58rem; color: var(--faint); }

#turnstileSlot { margin-top: .45rem; }
#turnstileSlot:empty { display: none; }

.dot-sep { color: var(--faint); }