/* Shared Gregle app launcher. The links also work without JavaScript. */
.gregle-menu-header { position: relative; z-index: 1100; overflow: visible; }
.gregle-menu-actions { display: flex; align-items: center; gap: 10px; }
.gregle-legacy-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.gregle-legacy-header > a { color: inherit; text-decoration: none; font-size: 24px; font-weight: 700; }
.gregle-app-menu {
  --gm-bg: #faf9f6; --gm-ink: #252525; --gm-muted: #65616d; --gm-line: #e6e2eb;
  --gm-hover: #eeebf5; --gm-active: #ece0ff; --gm-accent: #7637cc;
  position: relative; flex: 0 0 auto; width: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--gm-ink);
  font: 14px/1.4 Arial, Helvetica, sans-serif; text-align: left;
}
.dark-mode .gregle-app-menu {
  --gm-bg: #29272e; --gm-ink: #faf9f6; --gm-muted: #bdb7c9; --gm-line: #45404d;
  --gm-hover: #3a3443; --gm-active: #49345f; --gm-accent: #c698ff;
}
.gregle-app-menu > .gregle-menu-toggle {
  display: grid; place-items: center; list-style: none; width: 44px; height: 44px;
  box-sizing: border-box; margin: 0; padding: 0;
  border: 1px solid var(--border, var(--line, var(--gm-line))); border-radius: 999px;
  background: var(--panel-strong, var(--panel, var(--gm-bg)));
  color: var(--text, var(--gm-ink)); cursor: pointer; user-select: none;
  box-shadow: var(--shadow-soft, none); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .18s;
}
.gregle-menu-toggle > svg { width: 20px; height: 20px; transition: color .2s; }
.gregle-app-menu > .gregle-menu-toggle:hover > svg,
.gregle-app-menu[open] > .gregle-menu-toggle > svg { color: #9850ff; }
.nav-tools .gregle-menu-toggle { width: 42px; height: 42px; }
.nav-tools .gregle-menu-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.gregle-menu-toggle::-webkit-details-marker { display: none; }
.gregle-app-menu > .gregle-menu-toggle:hover,
.gregle-app-menu[open] > .gregle-menu-toggle { background: var(--soft, var(--panel-strong, var(--gm-hover))); }
.gregle-app-menu .gregle-menu-toggle:focus-visible,
.gregle-app-menu a:focus-visible { outline: 3px solid var(--gm-accent); outline-offset: 2px; }
.gregle-app-menu .gregle-menu-panel {
  display: flex; flex-direction: column;
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 1101;
  width: 340px; max-width: calc(100vw - 24px); max-height: calc(100dvh - var(--gregle-menu-top, 84px) - 12px);
  box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 14px 14px; border: 1px solid var(--gm-line); border-radius: 25px;
  background: var(--gm-bg); box-shadow: 0 12px 40px #0003, 0 2px 8px #0001;
  color: var(--gm-ink);
}
.gregle-app-menu:not([open]) > .gregle-menu-panel { display: none; }
.gregle-app-menu .gregle-menu-heading { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; margin: 0 10px 12px; }
.gregle-app-menu h2 { margin: 0; color: var(--gm-muted); font: 600 13px/1.4 Arial, sans-serif; letter-spacing: .02em; }
:is(.gregle-app-menu, .map-live-toggles) .gregle-theme-switch {
  position: relative; flex: 0 0 var(--gregle-switch-width, 34px); width: var(--gregle-switch-width, 34px); height: var(--gregle-switch-height, 1.4em); box-sizing: border-box;
  margin: 0; padding: 0; border: 1px solid var(--gm-muted); border-radius: 999px;
  background: var(--gm-line) var(--gregle-switch-off-icon, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2365616d%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M12%202v2m0%2016v2M2%2012h2m16%200h2M4.93%204.93l1.42%201.42m11.3%2011.3%201.42%201.42M4.93%2019.07l1.42-1.42m11.3-11.3%201.42-1.42%22%2F%3E%3C%2Fsvg%3E")) right 3px center / 10px 10px no-repeat;
  color: var(--gm-ink); font: 13px/1.4 Arial, sans-serif;
  cursor: pointer; transition: background .2s, border-color .2s;
}
/* Extend the hit area while keeping the visible track as tall as the heading. */
.gregle-theme-switch::before { content: ''; position: absolute; inset: -13px -5px; }
.gregle-theme-switch::after {
  content: ''; position: absolute; top: 50%; left: 3px; width: var(--gregle-switch-thumb, 12px); height: var(--gregle-switch-thumb, 12px);
  border-radius: 50%; background: var(--gm-muted); transform: translateY(-50%);
  transition: transform .2s, background .2s;
}
:is(.gregle-app-menu, .map-live-toggles) .gregle-theme-switch[aria-checked="true"] {
  background: var(--gm-accent) var(--gregle-switch-on-icon, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%2329272e%22%3E%3Cpath%20d%3D%22M20.9%2013A9%209%200%200%201%2011%203.1%209%209%200%201%200%2020.9%2013Z%22%2F%3E%3C%2Fsvg%3E")) left 3px center / 10px 10px no-repeat;
  border-color: var(--gm-accent);
}
.gregle-theme-switch[aria-checked="true"]::after { background: #fff; transform: translate(var(--gregle-switch-travel, 14px), -50%); }
:is(.gregle-app-menu, .map-live-toggles) .gregle-theme-switch:focus-visible { outline: 3px solid var(--gm-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  :is(.gregle-app-menu, .map-live-toggles) .gregle-theme-switch, .gregle-theme-switch::after { transition: none; }
}
.gregle-app-menu .gregle-app-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 97px;
  align-content: start; gap: 6px; flex: 0 1 303px; min-height: 97px; max-height: 303px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--gm-line) transparent;
}
.gregle-app-menu .gregle-app {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-width: 0; min-height: 97px; box-sizing: border-box; padding: 10px 2px;
  border-radius: 18px; text-decoration: none; color: var(--gm-ink); font-size: 12px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y;
}
.gregle-app-menu .gregle-app:hover { background: var(--gm-hover); }
.gregle-app-menu .gregle-app[aria-current="page"] { background: var(--gm-active); color: var(--gm-accent); font-weight: 600; }
.gregle-app-menu .gregle-app img { display: block; width: 44px; height: 44px; max-width: none; object-fit: contain; border-radius: 12px; }
.gregle-app-grid .gregle-app:focus-visible { outline-offset: -3px; }
.gregle-app-grid .gregle-app[draggable="true"] { cursor: grab; }
.gregle-app-grid .gregle-app.gregle-app-dragging { opacity: .35; }
.gregle-app-menu .gregle-drag-preview {
  position: fixed; z-index: 1200; margin: 0; pointer-events: none;
  background: var(--gm-hover); box-shadow: 0 6px 20px #0003; opacity: .95;
}
.gregle-menu-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.gregle-app-menu .gregle-menu-more { flex-shrink: 0; margin-top: 14px; padding: 16px 4px 2px; border-top: 1px solid var(--gm-line); }
.gregle-app-menu .gregle-menu-more h3 { margin: 0 6px 8px; color: var(--gm-muted); font: 600 12px/1.4 Arial, sans-serif; }
.gregle-menu-more > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.gregle-app-menu .gregle-menu-more a { display: block; padding: 8px 10px; border-radius: 10px; color: var(--gm-ink); text-decoration: none; font-size: 13px; }
.gregle-app-menu .gregle-menu-more a:hover { background: var(--gm-hover); }
@media (max-width: 480px) {
  .gregle-app-menu .gregle-menu-panel { position: fixed; top: var(--gregle-menu-top, 76px); right: 12px; max-height: calc(100dvh - var(--gregle-menu-top, 76px) - 12px); }
}