:root {
  --ink: #14211d;
  --muted: #66736e;
  --paper: rgba(250, 252, 249, .96);
  --line: #dce3de;
  --accent: #196c54;
}
* { box-sizing: border-box; }
html, body, #map { width: 100%; height: 100%; margin: 0; }
body { color: var(--ink); font: 14px/1.4 Inter, "Segoe UI", sans-serif; overflow: hidden; }
#map { background: #e8ede9; }
#sidebar {
  position: absolute; z-index: 1000; top: 12px; left: 12px; bottom: 12px;
  width: min(390px, calc(100vw - 24px)); overflow: auto;
  border: 1px solid rgba(30, 60, 48, .12); border-radius: 18px;
  background: var(--paper); box-shadow: 0 16px 48px rgba(25, 45, 37, .22);
  backdrop-filter: blur(12px);
}
header { padding: 22px 22px 14px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 4px 0 5px; font-size: 23px; line-height: 1.15; }
header p { margin: 0; color: var(--muted); font-size: 13px; }
.next-summary { margin: 0 22px 11px; padding: 10px 11px; border-radius: 10px; color: #eaf8f2; background: #174f40; font-size: 11px; }
.next-summary:empty { display: none; }
.next-summary strong { color: white; }
.next-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.next-row span:last-child { white-space: nowrap; color: #bfe4d5; }
.timeline { padding: 0 0 12px; }
.timeline-nav { display: grid; grid-template-columns: 38px 1fr 1fr 38px; gap: 5px; margin-bottom: 6px; }
.timeline-nav button { min-height: 31px; padding: 0 6px; color: var(--ink); background: #edf3ef; border-color: transparent; font-size: 11px; }
.timeline-days { display: grid; grid-template-columns: repeat(7, minmax(42px,1fr)); gap: 4px; }
.timeline-day { min-width: 0; padding: 6px 2px; color: var(--ink); background: #edf3ef; border-color: transparent; font-size: 9px; line-height: 1.2; }
.timeline-day strong { display: block; margin-top: 2px; color: var(--accent); font-size: 15px; }
.timeline-day.active { color: white; background: var(--accent); }
.timeline-day.active strong { color: white; }
.timeline-day.today:not(.active) { box-shadow: inset 0 0 0 2px #4b9b80; }
.timeline-day.outside { opacity: .35; }
.panel-stack { padding: 0 12px 10px; }
.panel-section { margin: 7px 0; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.72); overflow: visible; }
.panel-section > summary { padding: 11px 13px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 800; user-select: none; }
.panel-section > summary::-webkit-details-marker { display: none; }
.panel-section > summary::after { content: "⌄"; float: right; color: var(--muted); transition: transform .15s; }
.panel-section:not([open]) > summary::after { transform: rotate(-90deg); }
.panel-section[open] > summary { border-bottom: 1px solid var(--line); }
.section-body { padding: 12px 13px; }
label, legend { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 750; }
.search-row, .date-row { display: flex; gap: 6px; margin-bottom: 13px; }
.search-row { position: relative; margin-bottom: 0; }
.search-row .star-button { width: 40px; flex: none; padding: 0; color: #896b00; background: #fff8cf; border-color: #e9d983; font-size: 21px; }
.search-row .star-button:disabled { color: #9ba49f; background: #edf1ee; border-color: #d7dfda; cursor: default; }
.search-row .star-button.active { color: #8b6500; background: #ffe98a; }
input, button { min-height: 38px; border: 1px solid #bdc9c2; border-radius: 9px; font: inherit; }
input { min-width: 0; flex: 1; padding: 0 10px; background: white; }
button { padding: 0 12px; color: white; background: var(--accent); cursor: pointer; font-weight: 700; }
button:hover { filter: brightness(.94); }
button.secondary, .date-row button { color: var(--ink); background: #eef3ef; }
.date-row button { padding-inline: 10px; }
fieldset { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; border: 0; }
fieldset legend { width: 100%; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: #eef2ef; font-size: 11px; }
.filter-chip input { min-height: 0; width: 14px; height: 14px; margin: 0; flex: none; accent-color: var(--chip); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chip); }
.suggestions { position: relative; z-index: 20; margin: 2px 0 13px; border-radius: 9px; background: white; box-shadow: 0 8px 24px rgba(24,45,36,.18); overflow: hidden; }
.suggestions:empty { display: none; }
.suggestion-row { display: flex; border-bottom: 1px solid #eef2ef; }
.suggestion-row:last-child { border-bottom: 0; }
.suggestion { display: block; flex: 1; width: auto; min-height: 36px; padding: 6px 10px; color: var(--ink); background: white; border: 0; border-radius: 0; text-align: left; font-weight: 600; }
.suggestion:hover { background: #edf4ef; }
.suggestion-star { width: 38px; min-height: 36px; padding: 0; color: #806200; background: white; border: 0; border-left: 1px solid #eef2ef; border-radius: 0; font-size: 18px; }
.suggestion-star.active { background: #fff5bf; }
.favorite-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.favorite-list:empty { display: none; }
.favorite-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 8px; color: #604c00; background: #fff4b8; border-color: #e5d26e; font-size: 11px; }
.favorite-chip .remove { font-size: 15px; opacity: .65; }
.point-toggle { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--muted); font-weight: 600; }
.point-toggle input { flex: none; min-height: 0; width: 15px; height: 15px; accent-color: #d34236; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 4px; }
.legend-line { width: 16px; height: 4px; border-radius: 3px; background: var(--legend); }
.legend-point { width: 9px; height: 9px; border: 2px solid #d34236; border-radius: 50%; background: rgba(211,66,54,.35); }
.status { padding: 9px 22px; color: var(--muted); background: #f0f5f1; font-size: 12px; }
.details { padding: 14px 22px 24px; }
.empty { color: var(--muted); padding: 18px 0; text-align: center; }
.section-title { margin: 0 0 8px; font-size: 16px; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.favorite-button { min-height: 34px; padding: 0 9px; color: #365247; background: #edf3ef; border-color: #d4dfd8; }
.favorite-button.active { color: #765800; background: #fff4b8; border-color: #ead56c; }
.favorites { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.favorites h3 { margin: 0 0 5px; font-size: 12px; }
.event { margin-bottom: 9px; padding: 10px 11px; border: 1px solid var(--line); border-left: 4px solid var(--event-color); border-radius: 9px; background: white; }
.event-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; }
.event-meta, .event-source { margin-top: 3px; color: var(--muted); font-size: 11px; }
.dates { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.date-chip { min-height: 25px; padding: 2px 7px; color: var(--ink); border: 0; border-radius: 6px; background: #edf2ee; font-size: 11px; font-weight: 650; }
.date-chip:hover { color: white; background: var(--event-color); }
.date-chip.selected { color: white; background: var(--event-color); }
.region-button { min-height: 25px; padding: 2px 7px; color: #315f50; background: #e6f1ec; border-color: #c9ded4; font-size: 11px; }
.region-button:hover { color: white; background: var(--accent); }
.type-pill { display: inline-flex; align-items: center; min-height: 23px; padding: 2px 8px; color: white; border-radius: 999px; background: var(--pill); font-size: 11px; font-weight: 800; }
.street-tooltip-title { margin-bottom: 4px; font-weight: 850; }
.street-tooltip-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; font-weight: 550; }
.tooltip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tip); }
.street-link { width: 100%; margin: 3px 0; padding: 8px 10px; color: var(--ink); background: white; border-color: var(--line); text-align: left; font-weight: 600; }
.street-link span { float: right; color: var(--muted); font-weight: 400; }
.leaflet-interactive:focus { outline: none; }
.leaflet-tooltip { border: 0; border-radius: 7px; box-shadow: 0 5px 18px rgba(0,0,0,.18); font-weight: 700; }
#sidebar-toggle {
  display: block; position: absolute; z-index: 1100; top: 18px; left: 414px;
  width: 42px; padding: 0; transition: left .2s ease; box-shadow: 0 5px 18px rgba(20,40,32,.2);
}
#sidebar-toggle.panel-closed { left: 16px; }
#sidebar.collapsed { display: none; }
#mobile-date-nav, #mobile-next-card { display: none; }
.map-legend {
  position: absolute; z-index: 900; right: 12px; bottom: 24px; display: flex; flex-direction: column; gap: 4px;
  padding: 8px 9px; border: 1px solid rgba(25,55,44,.14); border-radius: 10px;
  background: rgba(250,252,249,.9); box-shadow: 0 5px 18px rgba(20,40,32,.14); backdrop-filter: blur(8px);
  color: #33443d; font-size: 10px;
}
.map-legend-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-legend-dot { width: 10px; height: 10px; border: 2px solid var(--map-color); border-radius: 50%; background: var(--map-color); opacity: .72; }
.map-popup-title { margin-bottom: 6px; font-size: 13px; font-weight: 850; }
.map-popup-types { display: flex; flex-wrap: wrap; gap: 4px; max-width: 230px; }
.map-popup-meta { margin-top: 6px; color: var(--muted); font-size: 10px; }
@media (max-width: 650px) {
  #sidebar { top: 58px; left: 8px; width: calc(100vw - 16px); max-height: calc(100% - 66px); bottom: auto; border-radius: 14px; }
  #sidebar.collapsed { display: none; }
  #sidebar-toggle { left: 12px; right: auto; }
  #sidebar-toggle.panel-closed { left: 12px; right: auto; }
  header { padding: 17px 17px 11px; }
  .next-summary { margin-inline: 17px; }
  .details { padding-inline: 17px; }
  .status { padding-inline: 17px; }
  body.panel-collapsed #mobile-date-nav {
    display: grid; position: absolute; z-index: 1050; top: 10px; left: 58px; right: 58px;
    grid-template-columns: 34px 1fr 34px; align-items: stretch; height: 42px;
    border: 1px solid rgba(25,55,44,.18); border-radius: 10px; overflow: hidden;
    background: rgba(250,252,249,.94); box-shadow: 0 5px 18px rgba(20,40,32,.18); backdrop-filter: blur(10px);
  }
  #mobile-date-nav button { min-height: 0; padding: 0; color: var(--ink); background: transparent; border: 0; border-radius: 0; font-size: 24px; font-weight: 400; }
  #mobile-date-label { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 90px; padding: 0 7px; border-inline: 1px solid var(--line); text-align: center; line-height: 1.05; }
  #mobile-date-label strong { font: 800 13px/1.05 "Segoe UI", sans-serif; text-transform: capitalize; }
  #mobile-date-label span { margin-top: 2px; color: var(--muted); font: 650 10px/1 "Segoe UI", sans-serif; }
  body.panel-collapsed #mobile-next-card:not(:empty) {
    display: block; position: absolute; z-index: 1050; left: 10px; right: 10px; bottom: 12px;
    min-height: 48px; padding: 7px 12px; color: white; background: rgba(20,63,51,.94);
    border: 1px solid rgba(255,255,255,.2); border-radius: 12px; box-shadow: 0 7px 22px rgba(14,35,27,.25);
    text-align: left; font-size: 11px; font-weight: 500; backdrop-filter: blur(10px);
  }
  #mobile-next-card strong { display: block; font-size: 12px; }
  #mobile-next-card span { float: right; color: #c9ebdd; }
  .map-legend { display: none; }
  body.panel-collapsed .map-legend { display: flex; top: 59px; right: 8px; bottom: auto; gap: 2px; padding: 5px 7px; border-radius: 8px; font-size: 8px; }
  body.panel-collapsed .map-legend-item { gap: 4px; }
  body.panel-collapsed .map-legend-dot { width: 8px; height: 8px; border-width: 1px; }
  .leaflet-popup-content-wrapper { border-radius: 10px; }
  .leaflet-popup-content { margin: 10px 12px; }
}

/* ─── GPS tracking button ─── */
#gps-track-btn {
  display: none; position: absolute; z-index: 950;
  top: 14px; right: 14px;
  width: 44px; height: 44px; min-height: 0;
  padding: 0; border: 1px solid rgba(25,55,44,.18);
  border-radius: 50%; cursor: pointer;
  background: rgba(250,252,249,.94);
  box-shadow: 0 4px 14px rgba(20,40,32,.18);
  backdrop-filter: blur(8px);
  font-size: 20px; line-height: 44px; text-align: center;
  transition: background .2s, box-shadow .2s, transform .15s;
}
#gps-track-btn:hover {
  background: rgba(240,248,244,1);
  box-shadow: 0 6px 20px rgba(20,40,32,.25);
}
#gps-track-btn:active { transform: scale(.93); }
#gps-track-btn.gps-active {
  background: rgba(52,152,219,.15);
  border-color: rgba(52,152,219,.4);
  box-shadow: 0 4px 14px rgba(52,152,219,.25);
  animation: gps-pulse 2s ease-in-out infinite;
}
@keyframes gps-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(52,152,219,.25); }
  50% { box-shadow: 0 4px 22px rgba(52,152,219,.45); }
}

/* GPS marker on map */
.gps-marker { background: none !important; border: none !important; }
.gps-pin {
  width: 32px; height: 32px;
  filter: drop-shadow(0 0 6px rgba(255,20,147,.8)) drop-shadow(0 0 12px rgba(255,20,147,.5));
  transition: transform 0.3s ease;
}

/* GPS toggle bar — under header, always visible */
.gps-toggle-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 22px 0; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.6); cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.gps-toggle-bar input[type="checkbox"] {
  min-height: 0; width: 18px; height: 18px; flex: none;
  accent-color: #3498db; cursor: pointer;
}
.gps-toggle-text { color: var(--ink); }

/* GPS toggle in settings (legacy) */
.gps-toggle-label {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.gps-toggle-label input[type="checkbox"] {
  min-height: 0; width: 18px; height: 18px; flex: none;
  accent-color: #3498db; cursor: pointer;
}
.gps-toggle-text { color: var(--ink); }

/* ─── Mobile GPS adjustments ─── */
@media (max-width: 650px) {
  .gps-toggle-bar { margin: 4px 17px 0; padding: 7px 10px; font-size: 12px; }
  #gps-track-btn {
    top: 10px; right: 10px;
    width: 40px; height: 40px; line-height: 40px;
    font-size: 18px;
  }
}