/* @mogos/side-rail v1.1.0 — the MOGOS floating sidebar chrome.
   CANONICAL FILE. Sites consume this package (Astro: import; static sites: vendored
   copy verified by check-sync.mjs). Never edit a vendored copy — edit HERE, bump the
   version, resync (bun _packages/side-rail/check-sync.mjs --write).

   The signature: a sticky full-height CARD inset from every viewport edge, zero
   radius, two accent corner marks bleeding 3px outside the frame, square bullets,
   left-border active state, mono uppercase group labels, off-canvas drawer <880px.

   v1.1.0 (2026-07-08): package-ified. Folded the adopter improvements back in:
   .brand .glyph / .brand .ver (liria), theme-btn transition + :active nudge (liria),
   .cmdk-chip command-palette hint (dragons).

   v1.2.0 (2026-07-09): two optional, inert-until-used additions (mogos-co T09).
   .side-social  — a row of icon links (44px tap targets, accent-on-hover, focus ring);
                   the site supplies verified-owned links only, never invented accounts.
   collapse      — a desktop collapse control ([data-rail-collapse] triggers, persisted
                   by side-rail.js); the rail slides off-canvas on transform only (GPU-safe,
                   reduced-motion respected) and a .rail-reopen affordance brings it back.
                   Both are absent unless the site adds the markup — zero effect otherwise.

   CONSUMER CONTRACT — define these tokens on :root (values are yours; names are not):
     --side            rail width                    (default 264px)
     --rail-gap        inset from viewport edges     (default clamp(10px,1.1vw,18px))
     --accent          the brand accent              (required)
     --accent-2        top-right corner mark         (falls back to --accent)
     --accent-3        bottom-left corner mark       (falls back to --accent-2)
     --background --foreground --card --secondary
     --muted-fg --border --border-strong
     --font-display --font-mono
   Markup contract (see README.md): body > aside.side + div.scrim + div.main;
   .side > .side-corner-tr + .side-corner-bl + .side-scroll > .brand, .themebar?,
   nav > .group / a.navlink > span.sq, .side-foot. Mobile bar: .mobile-bar > .menu-btn
   as the FIRST child of .main. Pair with side-rail.js (drawer + theme + active + spy). */

:root {
  --side: 264px;
  --rail-gap: clamp(10px, 1.1vw, 18px);
}

body {
  display: grid;
  grid-template-columns: var(--side) 1fr;
  min-height: 100dvh;
}

/* ── the floating rail ── */
.side {
  position: sticky;
  top: var(--rail-gap);
  z-index: 10;
  margin: var(--rail-gap);
  height: calc(100dvh - 2 * var(--rail-gap));
  background: var(--card);
  border: 1px solid var(--border);
}
.side-scroll {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.side-corner {
  position: absolute;
  width: 6px;
  height: 6px;
  z-index: 11;
  pointer-events: none;
}
.side-corner-tr { top: -3px; right: -3px; background: var(--accent-2, var(--accent)); }
.side-corner-bl { bottom: -3px; left: -3px; background: var(--accent-3, var(--accent-2, var(--accent))); }

/* ── brand block ── */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 20px 14px;
}
.brand .glyph { width: 26px; height: 26px; flex-shrink: 0; display: block; }
.brand .wm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--foreground);
  text-decoration: none;
}
.brand .ver {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  align-self: flex-start;
  margin-top: 3px;
}
.themebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 20px 14px;
}
.tagline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted-fg);
  line-height: 1.6;
}
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-fg);
  background: var(--secondary);
  border: 1px solid var(--border);
  padding: 0 12px;
  cursor: pointer;
  min-height: 36px;
  flex-shrink: 0;
  transition: border-color 0.14s, color 0.14s;
}
.theme-btn:hover { border-color: var(--foreground); color: var(--foreground); }
.theme-btn:active { transform: translateY(1px); }
.theme-btn .sw { width: 9px; height: 9px; background: var(--accent); flex-shrink: 0; }

/* ── nav ── */
.side nav { padding: 4px 12px 28px; flex: 1; }
.group {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-fg);
  padding: 16px 8px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.group::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.navlink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  font-size: 13.5px;
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.navlink:hover { background: var(--secondary); }
.navlink .sq { width: 7px; height: 7px; background: var(--border-strong); flex-shrink: 0; }
.navlink[aria-current="page"],
.navlink[data-spy-active] {
  border-left-color: var(--accent);
  background: var(--secondary);
}
.navlink[aria-current="page"] .sq,
.navlink[data-spy-active] .sq { background: var(--accent); }

/* ── ⌘K command-palette hint chip (optional; behavior is the site's) ── */
.cmdk-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 2px 0 4px;
  padding: 9px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted-fg);
  background: var(--secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, color 0.12s;
}
.cmdk-chip:hover { border-color: var(--border-strong); color: var(--foreground); }
.cmdk-chip .cmdk-chip-sq { width: 7px; height: 7px; background: var(--accent); flex-shrink: 0; }
.cmdk-chip .cmdk-chip-keys {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.cmdk-chip kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border-strong);
  padding: 3px 5px;
}

/* keyboard focus (WCAG 2.4.7) — zero-radius accent outline */
.navlink:focus-visible,
.theme-btn:focus-visible,
.menu-btn:focus-visible,
.cmdk-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── footer ── */
.side-foot {
  padding: 14px 20px 20px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted-fg);
  line-height: 1.7;
  border-top: 1px solid var(--border);
}
.side-foot a { color: var(--muted-fg); text-decoration: underline; text-underline-offset: 2px; }
.side-foot a:hover { color: var(--accent); }
.side-foot-legal { display: block; margin-bottom: 10px; }

/* ── social row (optional) ── the site supplies verified-owned links only ── */
.side-social {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 2px 12px 12px;
}
.side-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--muted-fg);
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
}
.side-social a:hover { color: var(--accent); background: var(--secondary); }
.side-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-social svg { width: 18px; height: 18px; display: block; }

/* ── collapse (optional; desktop) ── transform-only slide, persisted by side-rail.js ── */
.rail-collapse {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 2px 0 4px;
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-fg);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.12s;
}
.rail-collapse:hover { color: var(--foreground); }
.rail-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail-collapse .chev { width: 7px; height: 7px; background: var(--accent); flex-shrink: 0; }
.rail-reopen {
  position: fixed;
  top: var(--rail-gap);
  left: var(--rail-gap);
  z-index: 12;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  cursor: pointer;
}
.rail-reopen:hover { border-color: var(--accent); }
.rail-reopen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── main column ── */
.main { min-width: 0; position: relative; }

/* ── mobile: off-canvas drawer ── */
@media (max-width: 880px) {
  body { grid-template-columns: 1fr; }
  .side {
    position: fixed; top: 0; left: 0; margin: 0;
    width: var(--side); height: 100dvh;
    border: 0; border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
  }
  .side-corner { display: none; }
  body.nav-open .side { transform: none; }
  .mobile-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    position: relative;
    z-index: 4;
  }
  .mobile-bar .wm {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--foreground);
    text-decoration: none;
  }
  .menu-btn {
    min-width: 44px; min-height: 44px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .scrim {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 5;
  }
  body.nav-open .scrim { display: block; }
  /* collapse is a desktop affordance; the drawer already collapses under 880px */
  .rail-collapse { display: none; }
  .rail-reopen { display: none !important; }
}
@media (min-width: 881px) {
  .mobile-bar { display: none; }
  .scrim { display: none; }
  /* ── collapsed: rail slides off-canvas, main takes the full width ── */
  body.rail-collapsed { grid-template-columns: 1fr; }
  body.rail-collapsed .side {
    position: fixed;
    top: var(--rail-gap);
    left: 0;
    width: var(--side);
    height: calc(100dvh - 2 * var(--rail-gap));
    margin: var(--rail-gap) 0;
    transform: translateX(calc(-100% - var(--rail-gap) - 8px));
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.rail-collapsed .rail-reopen { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
  .navlink { transition: none; }
  body.rail-collapsed .side { transition: none; }
}