/* Deliberately NOT the house dark-blue theme used by gym/meal/fpm/budget -
   lp asked for a modern, unique, "aventurier" look specific to this service:
   warm expedition charcoal + sunset orange + deep jungle teal, condensed
   display type for headings. */

:root { color-scheme: dark; }
* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: -apple-system, system-ui, 'Segoe UI', sans-serif;
  background: #15110d;
  color: #f3ece1;
}

body {
  min-height: 100vh;
  padding: calc(20px + env(safe-area-inset-top)) 16px calc(88px + env(safe-area-inset-bottom));
}

h1 {
  font-family: 'Oswald', -apple-system, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 4px;
  color: #f3ece1;
}
.sub { color: #a89a8a; font-size: 0.82rem; margin-bottom: 18px; }

a { color: #ff8a4c; }

/* ── Bottom tab bar ───────────────────────────────────────────────────────── */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: #1f1711;
  border-top: 1px solid #3a2f24;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 10;
}
.tabbar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none;
  color: #a89a8a;
  font-size: 0.68rem;
  padding: 6px 2px;
  border-radius: 10px;
}
.tabbar a .icon { font-size: 1.15rem; line-height: 1; }
.tabbar a.active { color: #ff8a4c; }

/* ── Shared surfaces ──────────────────────────────────────────────────────── */
.card {
  background: #221a13;
  border: 1px solid #3a2f24;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.card-title {
  font-family: 'Oswald', -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  color: #f3ece1;
}
.card-sub { font-size: 0.78rem; color: #a89a8a; margin-bottom: 10px; }

.pill { font-size: 0.68rem; padding: 3px 9px; border-radius: 999px; background: #15110d; border: 1px solid #3a2f24; color: #d8c9b8; }
.pill.safety-very_high { background: rgba(45,184,142,0.18); border-color: transparent; color: #4fd8a8; }
.pill.safety-high { background: rgba(45,184,142,0.12); border-color: transparent; color: #4fc994; }
.pill.safety-moderate { background: rgba(255,170,64,0.15); border-color: transparent; color: #ffb648; }
.pill.safety-caveat { background: rgba(255,92,74,0.15); border-color: transparent; color: #ff6a52; }

button {
  font-family: inherit;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #ff8a4c, #e8571f);
  color: #1a120a;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(232,87,31,0.3);
}
.btn-primary:disabled { background: #3a2f24; color: #a89a8a; box-shadow: none; }
.btn-secondary {
  background: #221a13;
  border: 1px solid #3a2f24;
  color: #d8c9b8;
  font-size: 0.85rem;
  padding: 12px 14px;
}

.empty { color: #a89a8a; font-size: 0.85rem; text-align: center; padding: 30px 0; }

/* ── Image gallery ────────────────────────────────────────────────────────── */
.gallery { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.gallery img { width: 140px; height: 100px; object-fit: cover; border-radius: 12px; flex: none; background: #15110d; }

.link-row { display: flex; flex-direction: column; gap: 6px; }
.link-row a { font-size: 0.85rem; }