/* Small custom tweaks on top of Tailwind CDN. */

.tabular-nums { font-variant-numeric: tabular-nums; }

a { transition: color 0.08s; }

/* Safe-area insets for iPhones with home indicator / notch. */
.pb-safe { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
.pt-safe { padding-top: max(0.25rem, env(safe-area-inset-top)); }

/* Body scroll-lock when the item modal or filter sheet is open. Without
 * this, iOS Safari and desktop Chrome both allow the page behind to keep
 * scrolling despite the <dialog> being "modal". */
body.modal-open,
body.filters-open {
  overflow: hidden;
}

/* HTMX loading indicator: any element tagged with hx-indicator gets the
 * `htmx-request` class added during an in-flight request and removed on
 * completion. Paired with `htmx-indicator` on the element so the base
 * state is invisible. */
.htmx-indicator { opacity: 0; }
.htmx-request.htmx-indicator,
.htmx-request  .htmx-indicator { opacity: 1; }

/* --- App-like behavior on touch devices ------------------------------------
 * Goal: feel like a native app when launched from Home Screen on iOS, and
 * minimize web-y artifacts (text selection on UI, blue tap flash, rubber-
 * band overscroll, accidental double-tap zoom) on regular mobile Safari.
 * ------------------------------------------------------------------------- */
html, body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Disable text selection on chrome-y UI: buttons, links, headers, nav. */
button, [role="button"], .store-row, header, nav, label {
  -webkit-user-select: none;
  user-select: none;
}
/* Re-enable selection on the actual content (descriptions, prices, etc.). */
main p, main span, main h1, main h2, main h3, main td, main li {
  -webkit-user-select: auto;
  user-select: auto;
}

/* touch-action: manipulation disables iOS's 300ms double-tap-zoom delay
 * on tappable controls. Apply broadly to anything click-y. */
a, button, [role="button"], input, select, textarea {
  touch-action: manipulation;
}

/* Standalone-mode polish — when launched from Home Screen on iOS the
 * status bar is translucent and we need top padding equal to the safe-
 * area inset so headers don't tuck under the notch. */
@media (display-mode: standalone) {
  body { -webkit-touch-callout: none; }       /* no long-press menu */
  header { padding-top: env(safe-area-inset-top); }
}

/* Item-modal sticky header — this is the row with the title + ★/✓/✕
 * buttons. !important is necessary because Tailwind's `.py-*` utilities
 * have equal specificity and Tailwind's CSS is injected after our app.css
 * by the CDN script, so it would otherwise win the cascade.
 *
 * Floors (used when env(safe-area-inset-top) is 0):
 *   - non-standalone mobile : 1rem  → matches the original py-4 look
 *   - standalone PWA on iOS : 3rem  → keeps the X clear of the dynamic
 *     island + battery on every notched iPhone, even when env() comes
 *     back as 0 (which has been observed inside <dialog> on iOS Safari). */
.modal-sticky-header {
  padding-top: max(env(safe-area-inset-top), 1rem) !important;
}
@media (display-mode: standalone) {
  .modal-sticky-header {
    padding-top: max(env(safe-area-inset-top), 3rem) !important;
  }
}

/* --- Filter rail: mobile bottom sheet --------------------------------
 * On phones the rail (#filter-rail, .filter-rail-mobile) becomes a
 * fixed bottom sheet that slides up when body.filters-open is set.
 * On md+ these rules disappear and Tailwind's responsive classes put
 * it back as a sticky left sidebar.
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .filter-rail-mobile {
    position: fixed;
    inset: auto 0 0 0;           /* left/right 0, stuck to bottom */
    z-index: 50;
    width: auto;                  /* override Tailwind's md:w-64 on mobile */
    height: 88dvh;                /* take most of the screen, not shrink-to-content */
    overflow-y: auto;             /* scroll inside when content is tall */
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -12px 40px -8px rgb(15 23 42 / 0.25);
    padding: 0 1rem max(1rem, env(safe-area-inset-bottom)) 1rem;
    transform: translateY(100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.filters-open .filter-rail-mobile {
    transform: translateY(0);
  }
  body.filters-open #filter-backdrop {
    display: block;
  }
  body.filters-open {
    overflow: hidden;             /* prevent scroll-bleed behind the sheet */
  }
  /* Swipe gesture: when the rail's transform is being driven by JS
     (a finger drag), remove the CSS transition so it tracks the finger. */
  .filter-rail-mobile.is-dragging {
    transition: none;
  }
}