/* GoGreenOnWheel — Mobile App (PWA) styles */
:root{
  --forest:#2C5F2D; --forest-dark:#1B3F1C; --moss:#97BC62; --moss-light:#C9DCAE;
  --cream:#F7F6F1; --white:#FFFFFF; --ink:#1F2A1F; --ink-soft:#5A6B5A; --gold:#D4A437;
  --line:#E5E7DD; --danger:#c0392b;
  --shadow-sm:0 2px 6px rgba(28,63,28,.06);
  --shadow-md:0 8px 22px rgba(28,63,28,.12);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--cream); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100dvh}
button,input,select,textarea{font:inherit}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:Georgia,serif; color:var(--forest); margin:0 0 .35em; font-weight:700; line-height:1.2}
a{color:var(--forest)}

/* App container — phone-like max width on desktop */
.app{
  max-width:480px; margin:0 auto; min-height:100dvh;
  background:var(--cream); position:relative; padding-bottom:84px;
  box-shadow:0 0 40px rgba(0,0,0,.06);
}

/* ===== Top bar ===== */
.topbar{
  position:sticky; top:0; z-index:30; background:var(--cream);
  display:flex; align-items:center; justify-content:space-between; padding:14px 20px 6px;
}
.topbar h1{font-size:1.3rem; margin:0; color:var(--forest)}
.topbar .greeter{font-size:.78rem; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; font-weight:700}
.icon-btn{width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--line); display:grid; place-items:center; cursor:pointer; color:var(--ink)}
.icon-btn:hover{background:var(--moss-light)}
.icon-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ===== Cards ===== */
.card{background:#fff; border-radius:18px; padding:18px; margin:0 16px 12px; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 4px; font-size:1.05rem}
.card p{margin:0; color:var(--ink-soft); font-size:.9rem}
.card.dark{background:var(--forest); color:#fff; border-color:var(--forest-dark)}
.card.dark h3, .card.dark h4{color:#fff}
.card.dark p{color:#dde5d5}
.card-row{display:flex; align-items:center; gap:12px}
.card-row.between{justify-content:space-between}

/* Pills */
.pill{display:inline-block; padding:3px 10px; border-radius:999px; background:var(--moss-light); color:var(--forest-dark); font-size:.7rem; font-weight:700; letter-spacing:.04em}
.pill.gold{background:#FBE9B5; color:#7A5800}
.pill.dark{background:var(--forest); color:#fff}
.pill.danger{background:#fde4e0; color:var(--danger)}

/* Buttons */
.btn{display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  padding:14px; background:var(--forest); color:#fff; border:0; border-radius:14px;
  font-weight:700; font-size:.95rem; cursor:pointer; transition:transform .1s, background .15s}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--forest); border:1.5px solid var(--moss); font-weight:600}
.btn.gold{background:var(--gold); color:#1B3F1C}
.btn.danger{background:var(--danger)}
.btn.sm{padding:9px 14px; width:auto; font-size:.85rem}

/* Form fields */
.field{display:flex; align-items:center; gap:8px; padding:11px 14px;
  background:#fff; border:1px solid var(--line); border-radius:12px; margin:0 16px 8px}
.field svg{width:16px; height:16px; stroke:var(--ink-soft); fill:none; stroke-width:2}
.field .lbl{color:var(--ink-soft); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-right:6px}
.field input,.field select{border:0; outline:0; flex:1; background:transparent; color:var(--ink); width:100%}

/* Eyebrow */
.eyebrow{padding:0 20px; color:var(--ink-soft); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin:14px 0 8px}

/* Map */
.map{
  height:180px; margin:0 16px 14px; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(circle at 25% 30%, #cbd9b0 0%, transparent 35%),
    radial-gradient(circle at 75% 65%, #b6cf90 0%, transparent 40%),
    linear-gradient(135deg,#dfe9c8 0%, #c2d59a 100%);
  position:relative; border:1px solid var(--line);
}
.map svg.route{position:absolute; inset:0; width:100%; height:100%}
.map .pin{position:absolute; transform:translate(-50%,-100%)}
.map .pin svg{width:30px; height:30px; stroke:var(--forest-dark); fill:#fff; stroke-width:1.5}
.map .pin.dest svg{stroke:#fff; fill:var(--gold)}

/* Stat tiles */
.stats-row{display:flex; gap:10px; margin:0 16px 12px}
.stat-tile{flex:1; background:var(--forest); color:#fff; padding:14px; border-radius:16px}
.stat-tile .v{font-family:Georgia,serif; color:var(--gold); font-size:1.5rem; font-weight:700; line-height:1}
.stat-tile .l{color:#dde5d5; font-size:.75rem; margin-top:6px}

/* Avatars */
.avatar{width:44px; height:44px; border-radius:50%; background:var(--moss); color:var(--forest-dark);
  display:grid; place-items:center; font-weight:700; flex:none; font-family:Georgia,serif}
.avatar.lg{width:60px; height:60px; font-size:1.2rem}

/* Bottom tab bar */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; max-width:480px; margin:0 auto;
  background:#fff; border-top:1px solid var(--line);
  padding:8px 6px max(8px,env(safe-area-inset-bottom)) 6px;
  display:flex; justify-content:space-around; z-index:20;
  box-shadow:0 -4px 16px rgba(28,63,28,.07);
}
.tabbar button{background:none; border:0; cursor:pointer; padding:6px 8px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ink-soft); font-size:.66rem; font-weight:600}
.tabbar button.on{color:var(--forest)}
.tabbar svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* Result rows (search results) */
.result{background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; margin:0 16px 10px; cursor:pointer}
.result:active{background:#fafaf3}
.result .price{font-family:Georgia,serif; color:var(--forest); font-weight:700; font-size:1.25rem}
.result .green{color:var(--moss); font-weight:700; font-size:.78rem}
.result .meta{font-size:.84rem; color:var(--ink-soft)}

/* Auth screen */
.auth-shell{display:flex; flex-direction:column; gap:14px; padding:60px 24px 24px}
.auth-shell h2{font-size:1.6rem}
.auth-shell .field{margin:0}
.auth-shell .actions{display:grid; gap:10px; margin-top:8px}
.auth-shell .toggle{text-align:center; color:var(--ink-soft); font-size:.9rem}
.auth-shell .toggle a{color:var(--forest); font-weight:600; cursor:pointer}
.auth-shell .err{color:var(--danger); font-size:.85rem; min-height:1em}
.auth-shell .demo{background:#FBE9B5; color:#7A5800; padding:10px 14px; border-radius:10px; font-size:.8rem}

/* Toast */
.toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%);
  background:var(--forest); color:#fff; padding:10px 18px; border-radius:999px;
  font-size:.88rem; box-shadow:var(--shadow-md); z-index:100; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translate(-50%,-6px)}

/* Hide */
.hide{display:none !important}

/* Splash */
.splash{position:fixed; inset:0; background:var(--forest); color:#fff; display:grid; place-items:center; z-index:999; transition:opacity .4s}
.splash.gone{opacity:0; pointer-events:none}
.splash .mark{width:96px; height:96px; border-radius:50%; background:var(--moss); display:grid; place-items:center; margin-bottom:18px}
.splash .mark svg{width:54px; height:54px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.splash h1{color:#fff; font-size:1.8rem; margin:0 0 6px}
.splash p{color:#bcc8b6; margin:0; font-size:.95rem}

/* Trip progress */
.progress{height:6px; background:var(--moss-light); border-radius:999px; overflow:hidden; margin:6px 16px 12px}
.progress > div{height:100%; background:var(--moss); transition:width .4s}

/* Empty state */
.empty{padding:40px 24px; text-align:center; color:var(--ink-soft)}
.empty svg{width:48px; height:48px; stroke:var(--moss); fill:none; stroke-width:1.5; margin-bottom:10px}

/* Section utility */
section.screen{display:none}
section.screen.on{display:block; animation:fade .3s}
@keyframes fade{from{opacity:.0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* Larger screens (desktop preview) */
@media (min-width:520px){
  .app{margin-top:24px; margin-bottom:24px; border-radius:32px; min-height:calc(100dvh - 48px)}
}