/* =====================================================================================================
   AI Systems Group — Shell layout (shared, product-neutral)
   -----------------------------------------------------------------------------------------------------
   The reusable responsive shell: desktop left rail, mobile bottom navigation, drawer + scrim. Uses only
   --aisg-* tokens + the product overlay hooks (--product-accent / --product-accent-text). Pairs with
   shell.js (behavior) and DOM_CONTRACT.md (required DOM). A product styles WITHIN this contract; it does
   not redefine the structure. No product-specific routes or names live here.
   ===================================================================================================== */

/* --- desktop left rail (reusable; a product may theme colors via tokens) --- */
.aisg-rail {
  position: fixed; z-index: 70; left: 0; top: calc(52px + env(safe-area-inset-top)); bottom: 0;
  width: var(--aisg-nav-w); background: var(--aisg-surface-1); border-right: 1px solid var(--aisg-border);
  padding: 8px; overflow-y: auto; transform: translateX(-100%); transition: transform var(--aisg-motion);
}
.aisg-rail.open { transform: translateX(0); box-shadow: var(--aisg-elev-3); }
.aisg-rail .nav { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px;
  border: 0; border-radius: var(--aisg-radius-md); color: var(--aisg-text-2); text-decoration: none;
  font-weight: 700; min-height: var(--aisg-touch-min); }
.aisg-rail .nav:hover { background: var(--aisg-surface-2); color: var(--aisg-text); }
.aisg-rail .nav[aria-current="page"] { color: var(--aisg-text); background:
  linear-gradient(90deg, color-mix(in srgb, var(--product-accent) 18%, var(--aisg-surface-1)), var(--aisg-surface-1)); }
.aisg-rail .nav:focus-visible { outline: none; box-shadow: var(--aisg-focus-ring); }

/* --- scrim behind the drawer (phone) --- */
.rail-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 65; display: none; }
.rail-scrim.open { display: block; }

/* --- mobile bottom navigation: the SAME ≤4 destinations as the rail --- */
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 64; display: flex;
  height: calc(var(--aisg-bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--aisg-surface-2); border-top: 1px solid var(--aisg-border); }
.bottomnav .bn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--aisg-space-1); min-height: var(--aisg-touch-min);
  text-decoration: none; color: var(--aisg-text-3); font-size: .66rem; font-weight: 700; letter-spacing: .02em; }
.bottomnav .bn .bn-i { font-size: 1.15rem; line-height: 1; }
.bottomnav .bn[aria-current="page"], .bottomnav .bn.active { color: var(--product-accent-text); }
.bottomnav .bn:focus-visible { outline: none; box-shadow: var(--aisg-focus-ring); border-radius: 8px; }

/* desktop: the persistent rail is the nav; the bottom bar hides */
@media (min-width: 900px) { .bottomnav { display: none; } .aisg-rail { transform: none; transition: none; } .rail-scrim { display: none !important; } }