/* Honey Creek Disposal — Driver Delivery App (Phase 1 clickable prototype)
   Design tokens + styles recreated from the Claude Design handoff. */
@import url('/shared/fonts.css');

:root {
  --blue-50:#eceefe; --blue-100:#d3d6fc; --blue-400:#3a44ec; --blue-500:#1519de;
  --blue-600:#1013c0; --blue-700:#0d0f9c; --blue-800:#0b0c78;
  --yellow-400:#fff200;
  --white:#ffffff; --neutral-100:#eceef4; --neutral-200:#dce0ea; --neutral-300:#c3c9d8;
  --neutral-400:#9aa2b8; --neutral-500:#6f778e; --neutral-700:#3b4256; --neutral-800:#262b3a; --neutral-900:#141826;
  --green-500:#17922f; --green-100:#d8f2dd; --amber-500:#e08a00; --amber-100:#fcecc9;
  --surface-page:#f6f7fb; --surface-sunken:var(--neutral-100);
  --text-strong:var(--neutral-900); --text-body:var(--neutral-700); --text-muted:var(--neutral-500);
  --text-link:var(--blue-600); --border-subtle:var(--neutral-200); --border-default:var(--neutral-300);
  --success:var(--green-500); --success-surface:var(--green-100); --amber:var(--amber-500); --warning-surface:var(--amber-100);
  --focus-ring:var(--blue-400);
  --font-script:'Kaushan Script','Brush Script MT',cursive;
  --font-display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 2px 6px rgba(11,12,120,.10); --shadow-md:0 6px 18px rgba(11,12,120,.12); --shadow-lg:0 16px 40px rgba(11,12,120,.18);
  --shadow-sticker:4px 4px 0 var(--blue-700); --shadow-sticker-sm:3px 3px 0 var(--blue-700);
  --dur-fast:120ms; --dur:200ms; --ease-standard:cubic-bezier(.2,0,.1,1); --ease-out:cubic-bezier(.16,1,.3,1);
}

* { box-sizing:border-box; }
body { margin:0; background:var(--surface-page); font-family:var(--font-body); color:var(--text-body); }
button { font-family:inherit; }
.hcx-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; }
.hcx-scroll::-webkit-scrollbar { width:0; }

/* Phone frame (prototype chrome for desktop preview) */
/* Default: the app fills the whole screen on phones AND tablets (Galaxy Tab, iPad, etc.).
   dvh keeps it correct as the mobile browser bars show/hide. */
.stage { min-height:100vh; min-height:100dvh; display:flex; background:var(--surface-page); }
.phone { width:100vw; height:100vh; height:100dvh; background:var(--white);
  overflow:hidden; position:relative; display:flex; flex-direction:column; }

.statusbar { height:40px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:var(--blue-500); color:#fff; font-size:14px; font-weight:700; z-index:4; }
.homebar { flex:none; height:22px; display:flex; align-items:center; justify-content:center; background:var(--white); z-index:5; }
.homebar > div { width:126px; height:5px; border-radius:3px; background:var(--neutral-900); opacity:.85; }
.screen { flex:1; display:flex; flex-direction:column; min-height:0; }

/* The app runs edge-to-edge (viewport-fit=cover), so on an iPhone the top bar would sit
   UNDER the status bar / notch and clip the back button, and the bottom button would sit
   under the home indicator. These keep the controls clear of the phone's own UI.
   env() is 0 on devices without insets, so nothing changes elsewhere. */
.appbar  { padding-top:calc(14px + env(safe-area-inset-top, 0px)) !important; }
.appfoot { padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
/* Apple's minimum comfortable tap target is 44px — the old 34px was hard to hit in a truck. */
.navbtn { width:44px; height:44px; flex:none; border-radius:var(--radius-md);
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.navbtn:active { background:rgba(255,255,255,.3); }

/* On real devices, hide the phone-mockup chrome (fake clock/battery + home indicator). */
.statusbar, .homebar { display:none; }
/* Large desktop screens only: show the decorative phone frame as a preview. */
@media (min-width:1400px) {
  .stage { align-items:center; justify-content:center; padding:24px; }
  .phone { width:390px; height:844px; border-radius:46px; border:11px solid var(--neutral-900); box-shadow:var(--shadow-lg); }
  .statusbar, .homebar { display:flex; }
}

@keyframes hcx-scan { 0%{top:10%} 50%{top:82%} 100%{top:10%} }
@keyframes hcx-spin { to{transform:rotate(360deg)} }
@keyframes hcx-pop { 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
@keyframes hcx-rise { 0%{transform:translateY(12px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes hcx-pulse { 0%,100%{opacity:.35} 50%{opacity:.9} }