/*
 * 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:
 *
 *   - 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).
 *   - `--install-banner-offset` + `.bottom-action-bar` so the PWA install
 *     coach never covers thumb-zone chrome (#689 / #655).
 *
 * 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 {
  /* 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);

  /* PWA install-coach height (#689 / #655). 0px until
     install_prompt_controller measures a visible banner; bottom-anchored
     action bars and main padding add this on top of the bottom-nav slot. */
  --install-banner-offset: 0px;
}

/* Shared by every mobile bottom-anchored action bar so the PWA install
   banner (fixed z-40, sits above the bottom-nav) never covers their
   controls. z-45: above the banner (40) and nav (30), below modal sheets
   (50). Do not drop this below 40 (nav pointer-events regression) or raise
   it to 50 (would paint over capture sheets). */
.bottom-action-bar {
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + var(--install-banner-offset, 0px));
  z-index: 45;
}

/* ── Portería hub — tab panels (issue dominum-sys#202; tabs 2026-07) ───────
   Each tab PANEL (and its inner Turbo stream-target id) is ALWAYS in the DOM
   so create/close/package streams still land (see _lane.html.erb). Visibility
   is driven by the section's `data-primary-open` via CSS — NOT the HTML
   `hidden` attribute (Tailwind v4 preflight pins `[hidden]` to
   `display:none!important` in @layer base). Exactly one tab is open at every
   breakpoint (no desktop multi-column). */

.porteria-lane[data-primary-open="false"] {
  display: none;
}

.porteria-lane[data-primary-open="true"] {
  display: block;
}