/*
 * 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).
 *
 * 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);
}

/* ── 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;
}