/* ---- Fonts ---- */
@font-face {
  font-family: "Basel Classic";
  src: url("assets/Basel-Classic-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Basel Grotesk";
  src: url("assets/Basel-Grotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Basel Grotesk";
  src: url("assets/Basel-Grotesk-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Brand variables ---- */
:root {
  --brand-text: #715B4B;
  --brand-bg: #D1C4BA;
  --brand-card: #E5DCD4;
  --brand-soft: #C2B3A6;
}

/* ---- Base ---- */
* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "Basel Grotesk", system-ui, -apple-system, sans-serif;
  color: var(--brand-text);
  background: #1c1916;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

input, button { font-family: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* ---- App shell: mobile-first, centered on desktop ---- */
.app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--brand-bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (min-height: 760px) and (min-width: 500px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
  }
  .app-shell {
    height: min(900px, calc(100vh - 48px));
    min-height: 720px;
    border-radius: 36px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.55);
  }
}

/* hide scrollbar on inner scrolling regions while keeping scroll behavior */
.scrollarea { scrollbar-width: none; -ms-overflow-style: none; }
.scrollarea::-webkit-scrollbar { display: none; }

/* ---- Page transitions ---- */
/* Opacity-only fade — no vertical translation. A translateY here would
   replay on every render() and cause the page to "jump" while typing
   in search fields or pressing back. */
.page {
  animation: pageIn 180ms ease both;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
@keyframes pageIn {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

/* ---- Logo: SVG re-tinted using CSS mask ---- */
.logo {
  width: 240px;
  height: 64px;
  background-color: var(--brand-text);
  -webkit-mask: url("assets/logo.svg") no-repeat center / contain;
          mask: url("assets/logo.svg") no-repeat center / contain;
}
/* Inverted variant (splash on brown bg): paint the logo in the surface color. */
.logo.logo-light { background-color: var(--brand-bg); }

/* Subtle topographic contour-line background for the splash screen. */
.topo-bg {
  background-image: url("assets/topo.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* ---- Bottom nav active indicator dot ---- */
.nav-tab .nav-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand-text);
  opacity: 0;
  transition: opacity 160ms;
}
.nav-tab.active .nav-dot { opacity: 1; }

/* Press feedback: use opacity, NOT transform.
   Any `transform: translateY(1px)` here replaces sibling transforms like
   `-translate-x-1/2` on centered FABs or `-translate-y-1/2` on back-arrows,
   which causes those elements to visibly jump while held. */
.press { transition: opacity 100ms ease; }
.press:active { opacity: 0.7; }

/* ---- Form controls ---- */
input[type="checkbox"] {
  accent-color: var(--brand-text);
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

/* hide number spinners for a cleaner mobile look */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* ---- Leaflet inside the rounded mobile shell ---- */
.leaflet-container {
  font-family: inherit;
  background: #d8d0c5;
}
.map-wrap {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(113, 91, 75, 0.15);
}

/* ---- Status badges ---- */
.badge {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-done    { background: var(--brand-text); color: var(--brand-bg); }
.badge-pending { background: transparent; color: var(--brand-text); box-shadow: inset 0 0 0 1px rgba(113, 91, 75, 0.45); }

/* ---- Chat ---- */
.bubble {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  word-break: break-word;
  line-height: 1.35;
}
.bubble-in  { background: #F0E8DF; color: var(--brand-text); border-bottom-left-radius: 6px; }
.bubble-out { background: var(--brand-text); color: #FAF4EB;  border-bottom-right-radius: 6px; }

.chat-bg {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.18), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(113,91,75,0.06), transparent 40%),
    var(--brand-bg);
}

/* unread pill */
.unread-pill {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand-text);
  color: var(--brand-bg);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
}

/* dropdown menu in chat header */
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
}
.menu-item:hover { background: rgba(113, 91, 75, 0.07); }

/* modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 12, 0.45);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: backdropIn 200ms ease both;
}
@media (min-width: 500px) {
  .modal-backdrop { align-items: center; }
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: var(--brand-bg);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  animation: sheetIn 280ms cubic-bezier(.2,.7,.2,1) both;
}
@media (min-width: 500px) {
  .modal-card { border-radius: 24px; max-height: 80vh; }
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetIn {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* search input pill */
.search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-card);
  border-radius: 999px;
  padding: 10px 14px;
}
.search-pill input {
  flex: 1;
  background: transparent;
  outline: none;
  font-size: 14px;
}
.search-pill input::placeholder { color: var(--brand-text); opacity: 0.45; }