/* ─────────────────────────────────────────────────────────────────────────
   Thila Hotels — Design Primitives
   ─────────────────────────────────────────────────────────────────────────

   Cross-cutting behaviour rules. Loaded after tokens.css on every surface.

   Per the council verdict (AUDIT_COUNCIL_VERDICT.md, Refactor I), this
   single file retires:
     - 26 ungated `:hover` rules in pms.html (Reviewer D)
     - 41 ungated `:hover` rules in website.html (Reviewer D)
     - missing :focus-visible across all 6 surfaces (Reviewer C + D)
     - missing prefers-reduced-motion across pms/owner/guest-request/
       upload-passport (Reviewer C + D)
     - "press feedback missing on every pressable" (Reviewer C, top
       compounding fix in the audit)

   Surfaces opt in by adding `class="pressable"` to anything pressable.
   The :hover gate is global so existing :hover rules just stop applying
   on touch — no markup change needed.
   ───────────────────────────────────────────────────────────────────── */

/* ── Press feedback — opt-in via .pressable class ─────────────────────
   Apply `class="pressable"` (or use the JS helper that adds it on first
   pointer-down). Subtle scale matches Emil's 0.95–0.98 range. The
   transition is GPU-only so it won't trigger layout/paint. */
.pressable {
  transition: transform var(--duration-fast, 160ms) var(--ease-out, ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;       /* eliminate 300ms tap delay on iOS */
}
.pressable:active {
  transform: scale(0.97);
}

/* Convenience: every <button>, [role="button"], and common .btn classes
   get press feedback for free. Override by removing the .pressable class
   or by setting transform manually on :active. */
button:not(.no-pressable),
[role="button"]:not(.no-pressable),
a.btn,
.btn,
.icon-btn,
.close-btn,
.nav-item,
.tab,
.cms-tab,
.room-card,
.user-card,
.agent-card {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--duration-fast, 160ms) var(--ease-out, ease-out),
              background-color var(--duration-fast, 160ms),
              border-color var(--duration-fast, 160ms),
              color var(--duration-fast, 160ms);
}
button:not(.no-pressable):active,
[role="button"]:not(.no-pressable):active,
a.btn:active,
.btn:active,
.icon-btn:active,
.close-btn:active,
.nav-item:active,
.tab:active,
.cms-tab:active,
.room-card:active,
.user-card:active,
.agent-card:active {
  transform: scale(0.97);
}

/* ── Focus rings — :focus-visible only ────────────────────────────────
   Use :focus-visible (not :focus) so mouse clicks don't show focus ring
   but keyboard tab does. The default browser ring is hidden first; we
   draw a custom gold ring scoped to actually focusable targets. */
*:focus { outline: none; }
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-400, #C9A84C);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

/* ── Hover gating — touch devices skip hover styles ───────────────────
   Browsers without true hover (touch) currently get *all* of the site's
   :hover rules permanently sticky after a tap. Wrap is impractical on
   100+ existing rules, so we use this nuclear approach: on touch, kill
   transitions on :hover so the visual flash is invisible. */
@media (hover: none), (pointer: coarse) {
  /* Opt EVERY :hover rule out of animating on touch — the rule still
     applies but transitions instantly so users can't see the stuck
     state. Combined with `:active` press feedback above, touch users
     get fast crisp interaction without any of the sticky-hover weirdness. */
  *:hover {
    transition-property: transform !important;
  }
}

/* ── Reduced motion — honour OS-level pref ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Skeleton primitive ──────────────────────────────────────────────
   Replaces the inconsistent "Loading..." text and per-surface skeleton
   inventions (Reviewer C). Apply `.skeleton` to a sized div; or chain
   widths with `.skeleton.skeleton-line.w-1/2` etc. */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm, 4px);
  animation: skeleton-shimmer 1.4s var(--ease-in-out, ease-in-out) infinite;
  pointer-events: none;
}
.skeleton-line { height: 12px; }
.skeleton-text { height: 14px; }
.skeleton-bar  { height: 24px; }
.skeleton.w-1\/4 { width: 25%; }
.skeleton.w-1\/2 { width: 50%; }
.skeleton.w-3\/4 { width: 75%; }
.skeleton.w-full { width: 100%; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* On cream surfaces the dark-mode skeleton gradient looks wrong; this
   override picks warmer tones. */
[data-theme="light"] .skeleton,
.cream-surface .skeleton {
  background: linear-gradient(
    90deg,
    var(--cream-100, #F4ECDB) 0%,
    var(--cream-200, #E8DEC6) 50%,
    var(--cream-100, #F4ECDB) 100%
  );
  background-size: 200% 100%;
}

/* ── Visually-hidden helper (a11y) ─────────────────────────────────── */
.sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible-on-focus skip link — uses tokens for consistent gold ring. */
.skip-link {
  position: fixed;
  top: var(--space-3, 12px);
  left: var(--space-3, 12px);
  z-index: var(--z-system, 2000);
  padding: var(--space-3, 12px) var(--space-5, 20px);
  background: var(--gold-400, #C9A84C);
  color: var(--ink, #0E0A06);
  font-family: var(--font-ui, sans-serif);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  letter-spacing: var(--tracking-wide, 1px);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm, 4px);
  transform: translateY(-200%);
  transition: transform var(--duration-fast, 160ms) var(--ease-out, ease-out);
}
.skip-link:focus {
  transform: translateY(0);
}

/* ── Touch-target floor ──────────────────────────────────────────────
   Apple HIG / Material guidelines: 44×44 minimum interactive surface.
   Reviewer D flagged steppers (40), calendar cells (32-36), nav
   hamburger (~26) under floor. This rule is a backstop; surfaces should
   declare explicit sizing where layout demands it. */
@media (pointer: coarse) {
  button,
  [role="button"],
  a.btn,
  .btn,
  .icon-btn,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width:  44px;
  }
}

/* ── Inputmode sanity ────────────────────────────────────────────────
   No CSS for this — call it out as a contract: every numeric input
   in source MUST set `inputmode="numeric"` (integers) or
   `inputmode="decimal"` (floats) so iOS shows the right keyboard.
   The audit flagged the booking form pax steppers + amount fields as
   missing this. Search for `<input type="number"` and add inputmode. */