/**
 * rail-chrome.css — Shared rail-collapse chrome (Brief
 * `library-rail-convergence-and-collapse`, 2026-06-07).
 *
 * Tokens-only — sourced from admin-tokens.css (--shell-rail-collapsed-w,
 * --s-color-*, --s-space-*, --s-radius-*).
 *
 * The notebook surface owns its own bespoke rail+inspector classnames
 * (.notebook-shell__rail-ribbon, .notebook-shell__insp-ribbon) and CSS
 * because those styles were tuned hard across breakpoints (notebook-shell.css
 * lines 36-249, lines 258+ for narrow viewports). The notebook's behavior is
 * the reference spec; the rules in this file MIRROR that pattern for the
 * library surface (and any future consumer of the rail-chrome convention)
 * WITHOUT changing the notebook's existing CSS.
 *
 * Conventions adopted from notebook-shell.css:
 *   - Surface-scoped `data-<surface>-rail-collapsed` / `data-<surface>-
 *     insp-collapsed` attributes broadcast to: rail root, chrome host,
 *     outer panel ([data-chrome-left-panel] / .bilateral-right-rail),
 *     and .admin-shell. The grid widths are driven off `:has(...)` and
 *     direct-attribute selectors on the admin-shell.
 *   - Collapsed rails render an icon ribbon (.rail-chrome__ribbon)
 *     instead of the expanded body; uncollapsed rails hide the ribbon.
 *   - `--shell-rail-collapsed-w` (46px) is the icon-rail width across
 *     all surfaces, including narrow viewports.
 */

/* ── Generic icon-rail ribbon (used by library; notebook keeps its own) ── */

.rail-chrome__ribbon {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-2) 0;
  flex: 1;
  min-height: 0;
}

.rail-chrome__expand-btn,
.rail-chrome__collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--s-radius-sm);
  background: transparent;
  color: var(--s-color-fg-tertiary);
  cursor: pointer;
  padding: 0;
}

.rail-chrome__expand-btn:hover,
.rail-chrome__collapse-btn:hover {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
}

.rail-chrome__ribbon-sep {
  width: 18px;
  height: 1px;
  background: var(--s-color-border-subtle);
  margin: var(--s-space-1) 0;
}

/* ── Library surface — left rail collapse-to-icon-rail ──────────────────
 *
 * Mirrors notebook-shell.css lines 23-73 + 197-249. Uses the same
 * `--shell-sidebar-w` and `--shell-rail-collapsed-w` tokens so the
 * admin-shell grid responds identically to the notebook.
 * ─────────────────────────────────────────────────────────────────────── */

[data-chrome-left-panel][data-library-rail-collapsed=""] {
  --ns-rail-w: var(--shell-rail-collapsed-w);
}

[data-chrome-left-panel][data-library-rail-collapsed=""] .library-sidebar {
  display: none;
}

[data-chrome-left-panel][data-library-rail-collapsed=""] .rail-chrome__ribbon {
  display: flex;
}

[data-chrome-left-panel] .rail-chrome__ribbon {
  display: none;
}

.admin-shell[data-library-rail-collapsed=""]:has([data-chrome-left-panel]),
.admin-shell[data-library-chrome-active=""]:has([data-chrome-left-panel][data-library-rail-collapsed=""]) {
  --shell-sidebar-w: var(--shell-rail-collapsed-w);
}

/* ── Library surface — right rail (inspector) collapse-to-icon-rail ──── */

.bilateral-right-rail[data-library-insp-collapsed=""] {
  --shell-right-rail-w: var(--shell-rail-collapsed-w);
}

.bilateral-right-rail[data-library-insp-collapsed=""] .library-inspector-mount,
.bilateral-right-rail[data-library-insp-collapsed=""] .bilateral-right-rail__v5-region > :not(.rail-chrome__ribbon) {
  display: none !important;
}

.bilateral-right-rail[data-library-insp-collapsed=""] .rail-chrome__ribbon {
  display: flex;
}

.bilateral-right-rail .rail-chrome__ribbon[data-rail-chrome-ribbon="right"] {
  display: none;
}

.admin-shell[data-library-insp-collapsed=""]:has(.bilateral-right-rail),
.admin-shell[data-library-chrome-active=""]:has(.bilateral-right-rail[data-library-insp-collapsed=""]) {
  --shell-right-rail-w: var(--shell-rail-collapsed-w);
}

/* When library inspector is collapsed, the bilateral right rail clamps
 * to the icon-rail width and the inner contents hide; the ribbon shows. */
.bilateral-right-rail[data-library-insp-collapsed=""] {
  width: var(--shell-rail-collapsed-w);
  max-width: var(--shell-rail-collapsed-w);
  flex: 0 0 var(--shell-rail-collapsed-w);
}

/* ── Narrow viewport — same icon-rail width as the notebook surface ───── */

html:is([data-viewport^="mobile-"], [data-viewport^="tablet-"], [data-viewport="desktop-s"])
  .admin-shell[data-library-chrome-active=""] {
  /* Force both rails to the icon-rail width at narrow viewports so the
   * center stays readable. Mirrors notebook-shell.css:283-299. */
  --shell-sidebar-w: var(--shell-rail-collapsed-w);
  --shell-right-rail-w: var(--shell-rail-collapsed-w);
}

/* ── Library left-rail chrome wrapping in the dedicated mount slot ────
 *
 * 2026-06-07 library-left-rail-dedicated-mount — the library left rail
 * moved out of the shared [data-project-nav-mount] into its own
 * sibling region [data-library-nav-mount] inside [data-chrome-left-
 * panel]. The selectors below mirror what used to be scoped to
 * [data-project-nav-mount][data-library-chrome=""] (live in
 * left-chrome-mode.css now). The legacy selectors are retained
 * temporarily for any straggler caller; they're inert now because
 * library DOM no longer paints into [data-project-nav-mount].
 * ─────────────────────────────────────────────────────────────────────── */

[data-library-nav-mount] {
  display: none;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  height: 100%;
  width: 100%;
  position: relative;
}

[data-chrome-left-panel][data-left-chrome-mode="library"]
  [data-library-nav-mount]:not([hidden]) {
  display: flex;
}

[data-library-nav-mount] > .library-sidebar,
[data-library-nav-mount] > .rail-chrome__ribbon {
  width: 100%;
}

[data-library-nav-mount] > .library-sidebar {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Legacy [data-project-nav-mount][data-library-chrome=""] selectors —
 * retired by the dedicated-mount rework. Kept as no-ops in case any
 * straggler caller paints into the old host; library production code
 * stopped writing data-library-chrome onto [data-project-nav-mount] on
 * 2026-06-07. */
[data-project-nav-mount][data-library-chrome=""] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  height: 100%;
  width: 100%;
  position: relative;
}

/* When library chrome owns the left panel, hide the legacy sidebar
 * underneath so the library rail is the only nav-column resident — the
 * same pattern the notebook surface uses
 * (notebook-shell.css:3152 → `.admin-shell > .admin-shell__nav-column >
 * .sidebar { display: none }`). The legacy nav-sibling-body slot for
 * library has been marked `data-library-sidebar-relocated` and hidden by
 * library-destination.js; this rule covers the rest of the sidebar
 * chrome (rail toggle, section-state empty pane). */
[data-chrome-left-panel][data-library-chrome-active=""]
  > .sidebar {
  display: none;
}

/* ── FIX 1 — duplicate open/close affordance ───────────────────────────
 *
 * The library rail-chrome owns the SOLE collapse/expand affordance once
 * library-destination.js mounts (>= 2026-06-07). The chrome-level
 * sidebar toggles (`.sidebar-rail-mode-toggle` at index.html:255 +
 * `.sidebar-project-icon-strip__collapse` at index.html:285) and the
 * chrome-level right-rail edge toggle (`.bilateral-right-rail__chrome`)
 * must be HIDDEN so the user sees exactly one control per rail/state.
 *
 * This mirrors how the notebook surface coordinates it
 * (notebook-shell.css:158-177 hides `.bilateral-right-rail__chrome` /
 * `__inner` / `__v5-region` under `:has([data-notebook-right-chrome])`,
 * and notebook-shell.css:838-841 hides `.sidebar-rail-mode-toggle` +
 * `.admin-shell__nav-column-chrome` under
 * `html[data-guide-project-surface="notebook"]`). The above `> .sidebar`
 * rule already takes care of everything INSIDE `.sidebar` on the left,
 * but the rules below are belt-and-suspenders for any chrome-toggle
 * placement that lives outside `.sidebar` (and they document the intent
 * explicitly so a future refactor doesn't reintroduce the duplicate).
 * ─────────────────────────────────────────────────────────────────────── */

/* LEFT — chrome-level sidebar toggles are doubly hidden whenever library
 * chrome owns the left panel.
 *
 * Root cause of the duplicate `<` edge toggle on Library → Small Molecules
 * (Caitlin, 2026-06-07): `.admin-shell__nav-column-chrome` is a SIBLING
 * of `.sidebar` inside `[data-chrome-left-panel]` (index.html:530, sits
 * AFTER `</aside>` at line 528). The earlier `> .sidebar { display:none }`
 * rule hides everything INSIDE `.sidebar` (the rail-mode-toggle at
 * index.html:255 and the project-icon-strip__collapse at 285), but it
 * does NOT hide its sibling `.admin-shell__nav-column-chrome`, which
 * carries `.admin-shell__sidebar-collapse-handle`
 * (`#sidebarCollapseToggleBtn`, `data-sidebar-collapse-toggle`) — the
 * `<` chevron the user was seeing next to the library rail-chrome
 * ribbon. The notebook surface coordinates this with
 * `html[data-guide-project-surface="notebook"] .admin-shell__nav-column-chrome
 *  { display: none }` (notebook-shell.css:838-841); we mirror that under
 * the library's `[data-library-chrome-active]` attribute. */
.admin-shell[data-library-chrome-active=""] .admin-shell__nav-column-chrome,
[data-chrome-left-panel][data-library-chrome-active=""] > .admin-shell__nav-column-chrome,
.admin-shell[data-library-chrome-active=""] [data-sidebar-collapse-toggle],
.admin-shell[data-library-chrome-active=""] .sidebar-rail-mode-toggle,
.admin-shell[data-library-chrome-active=""] .sidebar-project-icon-strip__collapse,
.admin-shell[data-library-chrome-active=""] [data-sidebar-rail-toggle],
.admin-shell[data-library-chrome-active=""] [data-sidebar-collapse-arrow] {
  display: none !important;
}

/* RIGHT — when the library inspector is mounted (right-rail.js sets
 * `data-library-insp-active` on .bilateral-right-rail in
 * ensureLibraryRightRailChrome), hide the legacy chrome-level edge
 * toggle so the rail-chrome ribbon + library-inspector__rail-collapse
 * are the sole right-rail affordances. Same pattern as notebook's
 * `.bilateral-right-rail:has([data-notebook-right-chrome])
 *   > .bilateral-right-rail__chrome { display: none }`. */
.bilateral-right-rail[data-library-insp-active=""]
  > .bilateral-right-rail__chrome {
  display: none !important;
}

/* ── FIX 2 — drag-to-resize handles on library rails ───────────────────
 *
 * Same convention as the notebook/project workspace (resize-handle.ts).
 * A 4px draggable strip at the rail edge drives `--shell-sidebar-w` /
 * `--shell-right-rail-w` on `.admin-shell`. Handles are hidden when the
 * rail is collapsed to an icon ribbon (no point dragging at 46px).
 *
 * Positioned absolutely INSIDE the rail container so the handle's hit
 * area straddles the rail's right edge (left rail) / left edge (right
 * rail) — same UX as the project workspace's [data-resize-handle].
 * ─────────────────────────────────────────────────────────────────────── */

.library-rail-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background: transparent;
  cursor: ew-resize;
  z-index: 5;
  /* Disable text selection while dragging. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.library-rail-resize-handle:focus-visible {
  outline: 2px solid var(--s-color-focus-border);
  outline-offset: -2px;
}

.library-rail-resize-handle:hover {
  background: var(--s-color-border-default, rgba(0, 0, 0, 0.08));
}

/* Left rail handle sits on the chrome host's RIGHT edge. The host has
 * position:relative (set above) so absolute positioning is local.
 * Scoped to [data-library-nav-mount] for the dedicated-mount design;
 * the legacy [data-project-nav-mount][data-library-chrome=""] variant
 * is retained below as a no-op for any straggler caller. */
[data-library-nav-mount] .library-rail-resize-handle--left {
  right: -3px;
}

[data-project-nav-mount][data-library-chrome=""] .library-rail-resize-handle--left {
  right: -3px;
}

/* Right rail handle sits on the bilateral right rail's LEFT edge. Make
 * the rail a positioning context only when the library inspector is
 * mounted — keep the rail's default static position elsewhere so other
 * surfaces (notebook etc.) are unaffected. */
.bilateral-right-rail[data-library-insp-active=""] {
  position: relative;
}

.bilateral-right-rail[data-library-insp-active=""] .library-rail-resize-handle--right {
  left: -3px;
}

/* When the rail is collapsed to an icon ribbon, dragging makes no sense
 * (icon-rail is 46px). Hide the handle until the user expands the rail. */
[data-chrome-left-panel][data-library-rail-collapsed=""] .library-rail-resize-handle--left,
.bilateral-right-rail[data-library-insp-collapsed=""] .library-rail-resize-handle--right {
  display: none;
}

/* Narrow-viewport: both rails are forced to icon-rail; resize is off. */
html:is([data-viewport^="mobile-"], [data-viewport^="tablet-"], [data-viewport="desktop-s"])
  .library-rail-resize-handle {
  display: none;
}

/* Constraint-flash pulse — share the project-workspace token if it exists.
 * resize-handle.ts adds `.pw-project__grid--constraint-flash` to the grid
 * (which is `.admin-shell` here) when a clamp is hit. The class lives on
 * a temporary span so we scope the visual to a thin border pulse instead
 * of flashing the entire admin-shell. */
.admin-shell.pw-project__grid--constraint-flash .library-rail-resize-handle {
  background: var(--s-color-status-danger-border, #d97757);
}