/*
 * 806ai.ai — Rail System Foundation (Slice 21.5: Adaptive Intelligence Command Center)
 * ──────────────────────────────────────────────────────────────────────────
 * Shared primitives for the ONE rail behavior system every contextual
 * control in the shell now uses — bottom command rail, top signal rail,
 * left view rail, right action rail, My 806 rail, system rail. See
 * docs/navigation-command-center.md for the interaction law this codifies.
 *
 * Every rail is one of three states, named identically everywhere:
 *   PARKED    — almost invisible. A trigger/handle, nothing else.
 *   PEEK      — shows enough to suggest capability, doesn't take over.
 *   DEPLOYED  — fully usable (a native <dialog>.ui-sheet/.ui-dialog for
 *               anything that needs focus-trapping, or an in-flow expanded
 *               region for anything that must coexist with page content).
 *
 * State lives on a `data-rail-state="parked|peek|deployed"` attribute,
 * set by js/rail-system.js. This file only defines the motion contract for
 * that attribute — component visual design (colors, sizing, layout) stays
 * with each component's own CSS (index.html's inline <style>, close to the
 * markup it skins), exactly like styles/tokens.css vs. index.html today.
 *
 * Motion law (§4 of the slice brief): restrained, fast, tactile, mechanical.
 * transform/opacity only — no layout-thrashing properties, no spring
 * bounce, no blur stacks.
 */

.rail-trigger{
  -webkit-tap-highlight-color: transparent;
}

/* Generic expand/collapse transition for in-flow (non-dialog) rail panels —
   the top signal rail's PEEK/DEPLOYED body and the bottom command rail's
   secondary row both animate height+opacity this way. Dialog-based rails
   (View/Action/System sheets) get native <dialog> open/close semantics
   instead and don't need this. */
.rail-panel{
  overflow: hidden;
  transition:
    grid-template-rows var(--duration-normal, 250ms) var(--ease-standard, cubic-bezier(.16,1,.3,1)),
    opacity var(--duration-normal, 250ms) var(--ease-standard, cubic-bezier(.16,1,.3,1));
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
}
.rail-panel > *{ min-height: 0; overflow: hidden; }
.rail-panel[data-rail-state="peek"],
.rail-panel[data-rail-state="deployed"]{
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Rail chevron/handle — the visible+tappable equivalent every gesture in
   this system also has (§6/§35 of the slice brief: no gesture-only
   affordances). Hit area stays >=44px even where the visual mark is a
   restrained 3px line (§54 — subtle visual, generous hit area). */
.rail-handle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.rail-handle-mark{
  width: 32px;
  height: 3px;
  border-radius: 99px;
  background: currentColor;
  opacity: .5;
  transition: opacity var(--duration-micro, 150ms) var(--ease-standard, cubic-bezier(.16,1,.3,1)),
              transform var(--duration-micro, 150ms) var(--ease-standard, cubic-bezier(.16,1,.3,1));
}
.rail-handle:hover .rail-handle-mark,
.rail-handle[aria-expanded="true"] .rail-handle-mark{ opacity: .9; }
.rail-handle[aria-expanded="true"] .rail-handle-chevron{ transform: rotate(180deg); }
.rail-handle-chevron{
  transition: transform var(--duration-micro, 150ms) var(--ease-standard, cubic-bezier(.16,1,.3,1));
}

@media (prefers-reduced-motion: reduce){
  .rail-panel{ transition: none; }
  .rail-handle-mark, .rail-handle-chevron{ transition: none; }
}