/* Take a Hike Rentals — custom layer on top of Tailwind */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }

/* Hide scrollbars on horizontal chip rows */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Frosted glass cards (hero search) */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(6, 27, 14, 0.12);
}

/* Material symbol baseline tuning */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none;
  vertical-align: middle;
}
.ms-fill { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }

/* Page transition — soft fade + lift */
.view-enter { animation: viewEnter 0.35s var(--ease-out) both; }
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered card reveal */
.reveal { animation: reveal 0.5s var(--ease-out) both; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal */
.modal-backdrop { animation: fade 0.25s ease both; }
.modal-sheet { animation: sheetUp 0.35s var(--ease-out) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast */
.toast { animation: toastIn 0.3s var(--ease-out) both; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero — layered Utah landscape built from CSS + SVG, no external images */
.hero-sky {
  background:
    radial-gradient(120% 90% at 80% -10%, #ffd9a8 0%, rgba(255,217,168,0) 45%),
    linear-gradient(180deg, #2b4a57 0%, #3c6168 38%, #6e8f6f 100%);
}

/* Gear "photo" tile gradient by category accent */
.gear-tile { background: radial-gradient(120% 120% at 30% 20%, #ffffff 0%, #f0eded 70%); }

/* Calendar day in selected range */
.cal-day { transition: background-color .15s ease, color .15s ease, transform .1s ease; }
.cal-day:active { transform: scale(0.92); }

/* Range fill */
.cal-mid { background: #ffe1d3; color: #5d1900; }
.cal-end { background: #fe6a34; color: #1b1c1c; font-weight: 700; }

/* Pretty checkbox tick */
.tick:checked { background-color: #ab3500; border-color: #ab3500; }

/* Subtle press feedback utility */
.press { transition: transform .12s ease; }
.press:active { transform: scale(0.96); }

/* Bottom-nav safe area */
.safe-bottom { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

/* Backcountry Tactile design system utilities */
.hero-gradient {
  background: linear-gradient(180deg, rgba(6,27,14,0.4) 0%, rgba(6,27,14,0.9) 100%);
}
.inner-shadow-stamped {
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);
}
.pressed-state {
  box-shadow: 2px 2px 0px 0px #061B0E;
}
.active-tab-indicator {
  border-bottom: 4px solid #AB3500;
}
.card-elevation {
  box-shadow: 2px 2px 0px 0px rgba(6,27,14,0.08);
}

/* ---- Print: work order only ---- */
@media print {
  body { background: #fff !important; }
  .no-print, #toast-root, #modal-root, nav, header { display: none !important; }
  #work-order-sheet { box-shadow: none !important; margin: 0 !important; max-width: none !important; }
  @page { margin: 0.5in; }
}