/* FON viewer — Tidtam design system: teal/salmon/slate, Kanit + Share Tech Mono,
   Material Symbols only, white surfaces on a pale-teal ground, borderless chips. */
:root {
  --teal:    #0D9488;
  --teal-md: #14B8A6;
  --teal-lt: #CCFBF1;
  --teal-bd: #99F6E4;
  --salmon:  #F43F5E;
  --amber:   #F59E0B;
  --bg:      #F0FDFA;
  --surface: #FFFFFF;
  --border:  #E2E8F0;
  --text:    #134E4A;
  --dim:     #64748B;
  --hdr:     60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Kanit', sans-serif; background: var(--bg); color: var(--text); }
button, input { font-family: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.msi {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 13px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  display: inline-block; vertical-align: -2px;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
.msi.lg { font-size: 16px; }
.msi.xl { font-size: 18px; }

.app { display: flex; flex-direction: column; height: 100%; height: 100dvh; }

/* ── header (Tidtam #hdr) ── */
#hdr {
  flex: none; position: relative; z-index: 1001;
  height: calc(var(--hdr) + var(--safe-top)); padding: var(--safe-top) 6px 0;
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border-bottom: 2px solid var(--teal-bd);
  box-shadow: 0 2px 10px rgba(13,148,136,.10);
}
.logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 6px; line-height: 1; flex-shrink: 0; }
.logo-icon { display: block; width: 28px; height: 28px; }
.logo-text { font-size: .68rem; font-weight: 800; letter-spacing: 1px; }
.logo-text .lg { color: var(--teal); }
.logo-text .lp { color: var(--salmon); }
.hdr-title { font-size: 1rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.hdr-latest { margin-left: auto; font-family: 'Share Tech Mono', monospace; font-size: .72rem; color: var(--dim); white-space: nowrap; }
.rbtn {
  flex-shrink: 0; font-size: .9rem; padding: 6px 11px; border-radius: 9px;
  border: none; background: transparent; color: var(--teal); cursor: pointer;
  font-family: 'Kanit', sans-serif; font-weight: 600; transition: background .15s;
}
.rbtn:hover { background: rgba(13,148,136,.08); }

/* ── map ── */
.map-wrap { position: relative; flex: 1; min-height: 0; }
#map { position: absolute; inset: 0; background: #E6ECD9; }
.leaflet-container { font-family: 'Kanit', sans-serif; }
.leaflet-control-attribution { font-size: 9px; }

/* bottom-left: zoom + attribution own the bottom-right corner, as in Tidtam */
.map-chips { position: absolute; left: 10px; bottom: 10px; z-index: 500; display: flex; align-items: center; gap: 6px; }
.map-time, .mode-pill {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(13,148,136,.12);
}
.map-time { padding: 7px 10px; font-family: 'Share Tech Mono', monospace; font-size: .9rem; color: #0F172A; }
body[data-mode="animated"] .map-time { display: none; }
.mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; cursor: pointer;
  color: var(--teal); font-size: .9rem; font-weight: 600;
}
.mode-pill .msi { font-size: 20px; vertical-align: 0; }
.mode-pill:hover { background: #F0FDFA; }

.toast {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 900;
  max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 10px;
  background: var(--text); color: #fff; font-size: .8rem;
  box-shadow: 0 2px 10px rgba(15,23,42,.2);
}
.toast.is-error { background: #B91C1C; }

/* user-location marker — same as Tidtam: pulsing blue dot */
@keyframes userPulse { 0% { transform: scale(.7); opacity: .9 } 100% { transform: scale(2.6); opacity: 0 } }
.user-marker { background: transparent !important; border: none !important; }
.user-pulse-ring {
  position: absolute; inset: -10px; border-radius: 50%;
  background: rgba(59,130,246,.25);
  animation: userPulse 2s ease-out infinite;
}
.user-dot {
  position: absolute; inset: 0; border-radius: 50%;
  background: #3B82F6; border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* re-center control — a Leaflet bar button stacked above the zoom buttons */
.recenter a { display: flex; align-items: center; justify-content: center; color: var(--teal); }
.recenter .msi { font-size: 20px; vertical-align: 0; }
.recenter a.busy { color: var(--dim); }
.recenter a.busy .msi { animation: recenterBlink 1s ease-in-out infinite; }
@keyframes recenterBlink { 50% { opacity: .35 } }

/* ── bottom sheet ── */
.sheet {
  flex: none; position: relative; z-index: 1001;
  padding: 8px 10px calc(8px + var(--safe-bottom));
  background: var(--surface); border-top: 2px solid var(--teal-bd);
}
.sheet-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }

/* player — same parts as Tidtam's history playback bar */
.player { display: none; align-items: center; gap: 6px; }
body[data-mode="animated"] .player { display: flex; }
.play-btn {
  width: 40px; height: 40px; flex-shrink: 0; border: none; background: transparent;
  border-radius: 10px; cursor: pointer; color: var(--teal);
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background .15s;
}
.play-btn .msi { font-size: 26px; vertical-align: 0; }
.play-btn:hover, .play-btn.playing { background: rgba(13,148,136,.10); }
.play-time { font-family: 'Share Tech Mono', monospace; font-size: .9rem; color: #0F172A; min-width: 44px; flex-shrink: 0; }
.play-scrub { flex: 1; min-width: 0; height: 8px; cursor: pointer; accent-color: var(--teal); }
.play-speeds { display: flex; gap: 2px; flex-shrink: 0; }
.psp {
  border: none; background: transparent; padding: 6px 8px; border-radius: 8px;
  font-size: .72rem; font-weight: 700; color: var(--dim); cursor: pointer; letter-spacing: .3px;
  transition: background .15s, color .15s;
}
.psp:hover { background: rgba(13,148,136,.08); }
.psp.active { color: var(--teal); background: rgba(13,148,136,.10); }

.legend { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.legend-title { flex-shrink: 0; font-size: .72rem; font-weight: 600; color: var(--dim); }
.legend-title .msi { color: var(--teal); }
.legend-body { flex: 1; min-width: 0; }
.legend-bar {
  height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #96e47d 0%, #50d241 14%, #5fda2d 26%, #c3ec2d 40%, #f2e82d 50%,
    #fac428 60%, #f58c23 70%, #e84623 80%, #cd192d 88%, #a528c8 100%);
}
.legend-labels { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 2px; font-size: .68rem; color: var(--dim); text-align: center; white-space: nowrap; }
.legend-labels span:first-child { text-align: left; }
.legend-labels span:last-child { text-align: right; }

.status { font-size: .72rem; color: var(--dim); text-align: center; }
.status.is-stale { color: #B45309; }

@media (max-width: 480px) {
  .hdr-title { font-size: .9rem; }
  .legend-title { display: none; }
  .psp { padding: 6px 6px; }
}