/**
 * tribeShell rails — TRIBE-SHELL-RAILS-2026-10 (lane shell-rails-1)
 *
 * Three things, all desktop-only (md+, >=768px — phone layout is the orb +
 * dock charter's and is never touched here):
 *
 * 1. 125% rails. Both rails' CONTENTS are scaled by one token
 *    (--tcrails-zoom) with CSS zoom, so every icon, label, chip and gap
 *    grows together without rewriting each px rule in index.html and
 *    right-rail.css. The rails' OUTER widths stay plain px tokens, because
 *    .tcnav-main's sibling margins (index.html, right-rail.css) and the
 *    dock's paneBounds() read them. Collapsed width 64 -> 80 = 64 x 1.25,
 *    so the icon-only column lays out exactly as before, just larger.
 *
 * 2. Draggable dividers (.tcrails-divider, created by
 *    js/tribeshell-rails.mjs). The module writes the member's width into
 *    --tcnav-w-expanded / --tcrr-w on <html>; these defaults lose to that
 *    inline style. Shown only beside an EXPANDED rail.
 *
 * 3. Drag state. While a divider is held, html.tcrails-dragging turns off
 *    the rails' and the pane's width/margin transitions so the reflow
 *    tracks the pointer 1:1 (motion doctrine rule 1: the transitions stay
 *    for collapse/expand state changes; rule 3: one engine per element).
 */

@media (min-width: 768px) {
  :root {
    --tcrails-zoom: 1.25;
    --tcnav-w-expanded: 340px;
    --tcnav-w-collapsed: 80px;
    --tcrr-w: 320px;
    --tcrr-w-collapsed: 80px;
  }

  /* The beam is the rail's edge line, not content — it keeps its 1px. */
  #tc-rail > :not(.tcnav-rail-beam),
  .tcrr-rail[data-tcrr-mode="C"] > * {
    zoom: var(--tcrails-zoom);
  }

  .tcrails-divider {
    position: fixed;
    top: 64px;
    bottom: 0;
    width: 9px;
    z-index: 45;
    display: none;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
    border: 0;
    padding: 0;
  }
  .tcrails-divider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 1px;
    background: rgba(255, 122, 41, 0);
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }
  .tcrails-divider:hover::after,
  .tcrails-divider:focus-visible::after,
  .tcrails-divider.is-dragging::after {
    background: rgba(255, 122, 41, 0.85);
    box-shadow: 0 0 10px rgba(255, 122, 41, 0.6);
  }
  .tcrails-divider:focus-visible {
    outline: none;
  }

  /* Centered on the seam. The right one is anchored with `right`, like
     .tcrr-rail itself, so a page scrollbar can't offset it. */
  .tcrails-divider[data-side="left"] {
    left: calc(var(--tcnav-w-expanded) - 4px);
  }
  .tcrails-divider[data-side="right"] {
    right: calc(var(--tcrr-w) - 5px);
  }
  html[data-tcrails-left="expanded"] .tcrails-divider[data-side="left"],
  html[data-tcrails-right="expanded"] .tcrails-divider[data-side="right"] {
    display: block;
  }

  html.tcrails-dragging,
  html.tcrails-dragging * {
    cursor: col-resize !important;
    user-select: none !important;
  }
  html.tcrails-dragging #tc-rail,
  html.tcrails-dragging .tcrr-rail,
  html.tcrails-dragging .tcnav-main {
    transition: none !important;
  }
  /* The center-pane iframe would swallow pointermove mid-drag. */
  html.tcrails-dragging iframe {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcrails-divider::after {
    transition: none;
  }
}