/* Catppuccin Mocha palette mapped to Material 3 system tokens.
   Accent: Lavender (--ctp-lavender), per the project's standing theme
   convention. Shared by every screen; loaded once from index.html. */
:root {
  /* Catppuccin Mocha core */
  --ctp-base:     #1e1e2e;
  --ctp-mantle:   #181825;
  --ctp-crust:    #11111b;
  --ctp-text:     #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-surface0: #313244;
  --ctp-surface1: #45475a;
  --ctp-surface2: #585b70;
  --ctp-overlay0: #6c7086;
  --ctp-overlay1: #7f849c;

  /* Accents */
  --ctp-lavender: #b4befe;  /* Material 3 primary / active tab */
  --ctp-mauve:    #cba6f7;
  --ctp-green:    #a6e3a1;  /* success/status */
  --ctp-peach:    #fab387;  /* warning / highlight */
  --ctp-red:      #f38ba8;  /* error */
  --ctp-yellow:   #f9e2af;

  /* Material 3 system tokens mapped to Mocha */
  --md-sys-color-background:    var(--ctp-base);
  --md-sys-color-on-background: var(--ctp-text);
  --md-sys-color-surface:        var(--ctp-surface0);
  --md-sys-color-surface-variant: var(--ctp-surface1);
  --md-sys-color-on-surface:     var(--ctp-text);
  --md-sys-color-on-surface-variant: var(--ctp-subtext0);
  --md-sys-color-primary:        var(--ctp-lavender);
  --md-sys-color-on-primary:     var(--ctp-crust);
  --md-sys-color-secondary:      var(--ctp-mauve);
  --md-sys-color-on-secondary:   var(--ctp-crust);
  --md-sys-color-tertiary:       var(--ctp-peach);
  --md-sys-color-on-tertiary:    var(--ctp-crust);
  --md-sys-color-error:          var(--ctp-red);
  --md-sys-color-on-error:       var(--ctp-crust);
  --md-sys-color-outline:        var(--ctp-surface2);
  --md-sys-color-outline-variant: var(--ctp-surface1);
  --md-sys-color-shadow:         #000000;

  --radius: 14px;
  --radius-sm: 12px;
  --radius-lg: 16px;

  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

button { font-family: inherit; }

/* Very little text, generous whitespace, rounded cards, no heavy shadows. */
.card {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.05rem;
}

/* Bottom tab bar */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 72px;
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(30, 30, 46, 0.92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--ctp-surface1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 100;
}
.bottom-nav a, .bottom-nav button.tab {
  color: var(--ctp-subtext0);
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
  background: none; border: none; cursor: pointer; padding: 0;
}
.bottom-nav a.active, .bottom-nav button.tab.active { color: var(--ctp-lavender); }

/* Input tokens */
input, textarea, select {
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  font-family: inherit; font-size: 0.95rem;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--ctp-lavender); }
input::placeholder { color: var(--ctp-overlay0); }

/* Map: MapLibre controls, user dot and restaurant pins in Mocha. */
.maplibregl-ctrl-group {
  background: rgba(30, 30, 46, 0.9) !important;
  border: 1px solid var(--ctp-surface1);
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--ctp-surface1) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(0.85); }
.maplibregl-ctrl-attrib {
  background: rgba(30, 30, 46, 0.8) !important;
  color: var(--ctp-overlay1);
  font-size: 0.65rem;
}
.maplibregl-ctrl-attrib a { color: var(--ctp-subtext0) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(0.85); }

.winnie-me { position: relative; width: 18px; height: 18px; }
.winnie-me-dot {
  position: absolute; inset: 3px;
  background: var(--ctp-lavender);
  border: 2px solid var(--ctp-base);
  border-radius: 50%;
}
.winnie-me-pulse {
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: rgba(180, 190, 254, 0.25);
  animation: winnie-pulse 2.4s ease-out infinite;
}
@keyframes winnie-pulse {
  from { transform: scale(0.4); opacity: 1; }
  to   { transform: scale(1.4); opacity: 0; }
}

.winnie-pin {
  position: relative;
  width: 14px; height: 14px;
  padding: 0;
  background: var(--ctp-peach);
  border: 2px solid var(--ctp-base);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(250, 179, 135, 0.25);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.winnie-pin:hover, .winnie-pin.is-active { transform: scale(1.35); }
.winnie-pin.is-active { background: var(--ctp-lavender); box-shadow: 0 0 0 4px rgba(180, 190, 254, 0.3); }
.winnie-pin-label {
  position: absolute;
  left: 50%; bottom: calc(100% + 5px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.68rem; font-weight: 600;
  color: var(--ctp-text);
  background: rgba(30, 30, 46, 0.88);
  border: 1px solid var(--ctp-surface1);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  pointer-events: none;
}

/* Small error banner */
.error-banner {
  background: rgba(243, 139, 168, 0.12);
  color: var(--ctp-red);
  border: 1px solid rgba(243, 139, 168, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  margin: 0.6rem 1rem 0;
}