/*
 * application.css — Propshaft manifest + cross-cutting overrides.
 *
 * Tailwind utility classes do 99% of the styling. This file holds the few
 * rules that are NOT expressible as utilities on each element:
 *
 *   - CSS custom properties consumed from ERB (`--header-h` for sticky
 *     offsets; see `_minimap.html.erb` and slice 7 follow-up #48).
 *   - prefers-reduced-motion respect for hover transitions baked into
 *     Tailwind defaults (Tailwind already honors the media query for
 *     transitions, but a scroll-behavior override lives here).
 *   - Focus ring colour token, kept in sync with the amber accent used
 *     for `focus:ring-amber-*` utilities (so any custom focus targets
 *     match the chrome).
 *
 * Issue #59 — kept as a sibling of the tailwindcss-rails build output
 * (`app/assets/builds/tailwind.css`). Both ship to /assets/ via Propshaft.
 * The application layout loads them together as `:tailwind, :application`.
 */

/* ── Cross-cutting design tokens ────────────────────────────────────── */
:root {
  /* Sticky header height. Consumed by `_minimap.html.erb` (slice 7 follow-up
     #48 — replaces the previously hardcoded `top-20`). Mobile keeps the top
     bar at 56 px; on lg the layout has no fixed top bar, so the timeline
     header takes over — the value tracks the timeline's own padding-top
     plus the counts strip. Tweaks here propagate everywhere `top:
     var(--header-h)` is used. */
  --header-h: 5rem;

  /* Focus-ring accent token (matches `focus:ring-amber-400` utility). Custom
     focus rings (e.g. SVG anchors that can't pick up Tailwind ring utilities
     directly) reference this so the accent stays in sync. */
  --focus-ring: oklch(0.83 0.18 80);
}

/* ── Reduced-motion respect ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* The timeline minimap and load-more anchors smooth-scroll; honor the
     user's preference by clamping to instant scroll. Tailwind doesn't ship
     a reduced-motion variant for scroll-behavior yet (Tailwind v4). */
  html {
    scroll-behavior: auto;
  }
}

/* ── Sticky header offset helper ────────────────────────────────────── */
/* Utility class used by the timeline minimap so the offset can be tuned
   from one place via the --header-h custom property. */
.sticky-header-offset {
  position: sticky;
  top: var(--header-h, 5rem);
}

/* ── Floor-map active polygon highlight ─────────────────────────────── */
/* Set by `floor_map_controller#activatePolygon` on the polygon under the
   user's tap so the user sees which zone the drawer is showing. The
   class is cleared in three places: (1) tapping a different polygon —
   the previous active is deactivated first; (2) tapping the SAME
   polygon again — toggle behavior closes the drawer; (3) the drawer
   closes via Cerrar / Escape / backdrop — drawer_controller dispatches
   `floor-map:zone-deactivate` which the floor-map listens for.

   stroke + stroke-width override the polygon's default border without
   touching the cleaning-overlay fill colours that share the same
   element (slice 11). */
.floor-map-active {
  stroke: rgb(15 23 42);           /* slate-900 — high contrast on every fill */
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: fill stroke markers;
}