/* ===== Design tokens — from the Fruits and Roots UI mockup ===== */
:root {
  /* This site has no dark theme. Without this, natively-rendered
     elements (including third-party widgets like Google's address
     autocomplete) fall back to the OS's prefers-color-scheme and can
     render dark against our always-light design. */
  color-scheme: light;
  --forest: #1B4332;
  --forest-dark: #12301F;
  --shell: #F8F9FA;
  --shell-warm: #EEF0EA;
  --sage: #A3B18A;
  --sage-light: #EEF1E8;
  --gold: #B08D57;
  --gold-light: #F3EAE0;
  --ink: #1A1F1C;
  --ink-soft: #5C655F;
  --danger: #B3452D;
  --danger-light: #FBEDE8;
  --white: #FFFFFF;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 2px 14px rgba(27, 67, 50, 0.07);
  --shadow-lift: 0 14px 36px rgba(27, 67, 50, 0.16);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--shell);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; line-height: 1.55; color: var(--ink-soft); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 460px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

/* ===== Buttons — fully-rounded pills ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--forest); color: var(--white); }
.btn-primary:hover { background: var(--forest-dark); }
.btn-primary:disabled { background: #C3CCC6; color: var(--white); cursor: not-allowed; }
.btn-secondary { background: var(--white); color: var(--forest); border-color: var(--forest); }
.btn-secondary:hover { background: var(--shell-warm); }
.btn-block { width: 100%; }
.btn-text { background: none; padding: 8px 0; color: var(--forest); font-weight: 600; font-size: 14px; border-radius: 0; white-space: nowrap; }

/* ===== Forms ===== */
.field { margin-bottom: 18px; text-align: left; }
.field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink); margin-bottom: 7px;
}
.field input, .field select {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #DDE2D8;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 15px;
  background: var(--white);
  color: var(--ink);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--forest);
}
.field-hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }
.field-error { font-size: 12.5px; color: var(--danger); margin-top: 5px; display: none; }
.field.has-error input { border-color: var(--danger); }
.field.has-error .field-error { display: block; }

.form-banner {
  background: var(--danger-light); border: 1px solid #E5B7A6; color: var(--danger);
  padding: 13px 15px; border-radius: var(--radius-sm); font-size: 14px;
  margin-bottom: 18px; display: none;
}
.form-banner.visible { display: block; }

/* ===== Nav ===== */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
}
.nav-logo { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--forest); letter-spacing: 0.06em; text-transform: uppercase; }
.nav-logo-img { height: 46px; width: auto; display: block; }
.nav-logo-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--forest); flex-shrink: 0; }
.nav-right { display: flex; align-items: center; gap: 18px; }

.user-menu { position: relative; }
.user-trigger {
  display: flex; align-items: center; gap: 9px;
  background: var(--white); border: 1.5px solid var(--sage);
  border-radius: var(--radius-pill); padding: 6px 16px 6px 6px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--forest);
}
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sage); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); min-width: 180px;
  padding: 6px; display: none; z-index: 20;
}
.user-dropdown.open { display: block; }
.user-dropdown a, .user-dropdown button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 14px; background: none; border: none;
  font-family: var(--font); cursor: pointer; color: var(--ink);
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--shell-warm); }

/* ===== Cards ===== */
.card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px;
}

/* ===== Points meter ===== */
.points-bar-track {
  height: 8px; background: rgba(255,255,255,0.18); border-radius: var(--radius-pill); overflow: hidden;
}
.points-bar-fill {
  height: 100%; background: var(--gold); border-radius: var(--radius-pill);
  transition: width 0.2s ease;
}
.points-bar-fill.over { background: var(--danger); }

/* ===== Status / points pills ===== */
.pill {
  display: inline-flex; align-items: center;
  padding: 5px 13px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.pill-light { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.pill-forest { background: var(--forest); color: var(--white); }
.pill-gold { background: var(--gold); color: var(--white); }
.pill-sage { background: var(--sage-light); color: var(--forest); }

/* ===== Utility ===== */
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.loading-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.error-state { text-align: center; padding: 60px 20px; color: var(--danger); }

/* ===== Phones: Galaxy S20 (360px) through iPhone 17 Pro Max (440px), also checked at 320px =====
   Rules: nothing wider than the screen, side margins on every page, tap targets of at least 44px,
   text boxes of at least 16px (smaller makes iPhone Safari zoom in when you tap them). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }
/* Page-level rules that set padding must not wipe the side margins, so these use a stronger selector. */
body .container, body .container-narrow {
  padding-left: max(var(--gutter, 24px), env(safe-area-inset-left));
  padding-right: max(var(--gutter, 24px), env(safe-area-inset-right));
}

@media (max-width: 820px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
  .btn { min-height: 44px; }
  .btn-text { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-logo { min-height: 44px; }
  .user-trigger { min-height: 44px; }
  .user-dropdown a, .user-dropdown button { min-height: 44px; display: flex; align-items: center; }
  .field input, .field select { min-height: 48px; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-left: 20px; padding-right: 20px; }
  .card { padding: 18px 16px; }
  .nav-right { gap: 10px; }
  .user-trigger { max-width: 52vw; }
  .user-trigger #user-name-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-logo { font-size: 13px; letter-spacing: 0.04em; }
  .nav-logo-img { height: 38px; }
  h1 { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}