@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Map basemap */
  --land:        #ECE2CE;   /* light beige/cream land */
  --land-2:      #E5D9C0;   /* slightly deeper terrace */
  --contour:     #C4A882;   /* warm brown contour lines */
  --water:       #8AA6B0;   /* muted slate blue water */
  --water-deep:  #7A9BA8;

  /* UI chrome */
  --paper:       #F5F0E8;   /* off-white sheet bg */
  --paper-2:     #EFE8DA;   /* recessed fills */
  --paper-edge:  #E3D9C6;   /* hairline dividers */
  --border:      #C9B79A;   /* warm brown borders */
  --border-soft: #D9CCB4;

  /* Ink */
  --ink:         #2C1F0E;   /* dark brown text */
  --ink-2:       #5C4A32;   /* stone brown secondary */
  --ink-3:       #8C7355;   /* muted stone */

  /* Brand greens */
  --olive:       #4A5C3A;   /* deep olive — CTA / recommended */
  --olive-2:     #6B7C5A;   /* mid olive — alt routes */
  --olive-soft:  #8C9B79;

  /* Status */
  --ok:          #5E7444;   /* available (olive-green) */
  --ok-dot:      #6B8C3E;
  --warn:        #C2873B;   /* amber — suggested alt */
  --bad:         #B0462F;   /* red — unavailable */

  --r-sheet: 18px;
  --r-card:  14px;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; width: 100%; overflow: hidden; }

/* root paints the manifest paper colour, so if iOS ever leaves a sliver in the
   bottom safe area it blends seamlessly with the paper sheets at the bottom of
   every screen (rather than showing the desktop backdrop gradient). */
html { background: var(--paper); }

body {
  font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  overflow: hidden;
}

/* gray backdrop only on desktop, where the app floats as a phone mockup.
   On mobile the body stays transparent so the paper <html> background shows
   through any safe-area sliver instead of a gray band. */
@media (min-width: 480px) {
  body { background: radial-gradient(circle at 50% 0%, #d8cdb8, #c5baa6); }
}

/* full-bleed mobile stage; constrained to a phone-width column on desktop.
   On mobile the app fills the whole screen — any extra width/height naturally
   goes to the map (which is full-bleed behind the fixed-size sheets). On desktop
   it's capped to a centred phone-width column.

   We pin to the viewport edges with position:fixed + inset:0 rather than
   100vh/100dvh: on an installed iOS PWA those viewport units resolve short of
   the real screen, leaving a gap at the bottom. inset:0 fills the full screen
   (incl. under the home indicator, since the meta viewport uses viewport-fit=cover). */
#app {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;        /* needed for margin:auto to centre once max-width caps it on desktop */
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
}

/* desktop: float the app as a phone mockup, with a soft shadow + status bar */
@media (min-width: 480px) {
  #app {
    max-width: 440px;
    box-shadow: 0 0 60px rgba(44, 31, 14, 0.18);
  }
}

/* faked iOS status bar — only meaningful on desktop, where the app floats as a
   phone mockup. On a real phone the device's own OS status bar is present. */
.sw-statusbar { display: none; }
@media (min-width: 480px) {
  .sw-statusbar { display: block; }
}

.sw {
  font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
.sw-mono { font-family: 'DM Mono', ui-monospace, monospace; }

/* numeric / data accents */
.sw-tnum { font-variant-numeric: tabular-nums; }

button.sw { font-family: 'DM Sans', sans-serif; }

/* pulsing ring for the conflicted / user-location dot */
.sw-pulse {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; border-radius: 50%;
  transform: translate(-50%,-50%);
  background: var(--pc); opacity: 0.45;
  animation: sw-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes sw-pulse {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: 0.5; }
  70%  { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
  100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-pulse { animation: none; opacity: 0.3; }
}

/* route overlay maps linearly to the box (preserveAspectRatio=none) so it stays
   glued to the %-positioned hut icons; keep stroke widths/dashes constant in
   screen px so the non-uniform scale doesn't distort the line thickness */
.sw-route path { vector-effect: non-scaling-stroke; }

/* hide scrollbars inside scroll strips but keep scrollable */
.sw-hscroll { overflow-x: auto; scrollbar-width: none; }
.sw-hscroll::-webkit-scrollbar { display: none; }

/* generic vertical scroll areas: hide bars, keep momentum on iOS */
.sw-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sw-scroll::-webkit-scrollbar { display: none; }