/* ════════════════════════════════════════════════════════════════════
   library-mode — 左面板 Library ↔ Measurements 视图切换。
   2026-06-22 (user)：左面板左上角加切换钮，左面板获得"统计测量器件"第二
   功能。切到 Measurements → 画布上的浮动 #panel-measurements 强制隐藏，
   3D mini chips 正常显示（chip 在 overhead-stack 上独立挂载）。
   v2.7.11 (user)：① 模式切换钮 / filter / draggable 三件挪到 .lib-header
   同一行；② 筛选 drawer 折叠且无 chip 时整张 .lib-filter 卡片彻底消失
   （不留 padding/边/底色）。
   DESIGN.md：单色 token 驱动 (§3.5)、行高 ≥28 (§8.1 U1)、active 形式同
   顶栏 .topbar-menu-btn[aria-expanded=true]（v2.7.08 hover token 系统）。
   ════════════════════════════════════════════════════════════════════ */

/* ── Mode switch (v2.7.14) — segmented toggle with sliding ink pill ────────
   Track: rounded 1px line-1 frame, surface-1 bg. Two flush 28×28 icon buttons
   sit on top of a single absolutely-positioned thumb that glides between
   slots via transform. The thumb is the **inverted color** (--ink-1 solid);
   the active icon swaps to --surface (theme-aware reverse per DESIGN §3.3),
   the inactive icon stays at --ink-3. Sliding driven by #library[data-mode]
   so JS only flips the attribute; CSS does the 160ms glide
   (--dur-enter / --ease-out, §10.2 motion tokens). */
.lib-mode-switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: 6px;
  isolation: isolate;   /* keep the thumb's z-stack local */
}

.lib-mode-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 26px;
  height: 24px;
  border-radius: 5px;
  background: var(--ink-1);
  z-index: 0;
  transform: translateX(0);
  transition: transform var(--dur-enter, 160ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  pointer-events: none;
}
#library[data-mode="measurements"] .lib-mode-thumb {
  /* slot 2 origin = slot 1 + button width (28) - 2px (the 1px frame on each
     side of the track so the pill stays inset). */
  transform: translateX(28px);
}

.lib-mode-switch .lib-mode-btn {
  appearance: none;
  position: relative;
  z-index: 1;          /* sit over the thumb */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--ink-3-v1, var(--ink-3));
  cursor: pointer;
  /* Only the color crossfades — position is owned by the thumb. Match the
     thumb's duration so icon inversion and pill arrive together. */
  transition: color var(--dur-enter, 160ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.lib-mode-switch .lib-mode-btn:hover { color: var(--ink-2-v1, var(--ink-2)); }
.lib-mode-switch .lib-mode-btn.is-active {
  /* Inverted color over the ink pill (DESIGN.md §3.3 "实心填充上的前景反色":
     ink → surface so dark mode stays readable). The icon uses currentColor so
     stroke + fill inherit. */
  color: var(--surface-1);
}
.lib-mode-switch .lib-mode-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--overlay-2);
}

@media (prefers-reduced-motion: reduce) {
  .lib-mode-thumb,
  .lib-mode-switch .lib-mode-btn { transition: none; }
}

/* Library-only header items hide when sidebar is in Measurements mode — back
   button, breadcrumb, filter/draggable controls don't apply when there's no
   accordion to navigate. The mode toggle stays. */
#library[data-mode="measurements"] .lib-header .lib-only { display: none; }

/* The two views — only one visible at a time. .lib-view is a flex column that
   fills the remaining sidebar height; data-mode on #library swaps them. */
#library .lib-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#library[data-mode="library"] #lib-view-measurements { display: none; }
#library[data-mode="measurements"] #lib-view-library { display: none; }

/* Measurements view header — eyebrow + live count. Mirrors the floating-panel
   header's information density but stays inline (no drag/pin/close chrome
   needed here — the sidebar IS the container). */
.lib-meas-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 14px 4px;
  border-bottom: 1px solid var(--line-soft, var(--line-1));
  font-family: var(--font-ui);
}
.lib-meas-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2-v1, var(--ink-2));
}
.lib-meas-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3-v1, var(--ink-3));
}

/* Sidebar readings list scrolls internally; trimmed top padding vs the
   floating-panel mount since the header above already provides separation. */
#sidebar-readings.ins-readings {
  padding: 8px 12px 12px;
}

/* ── Empty filter card vanishes completely (v2.7.11, user) ────────────────
   The render in library-filter.js always emits a .lf-drawer element (so its
   grid-rows transition has somewhere to animate to). When the drawer is closed
   AND no .lf-chips row is present, the .lib-filter wrapper still sat there
   with padding + border + bg, leaving a ghost card. :has() lets us collapse
   it to nothing without touching the JS render.
   Browser support: Chrome 105+, Safari 15.4+, Firefox 121+ (target met). */
.lib-filter:not(:has(.lf-chips)):not(:has(.lf-drawer[data-open="true"])) {
  display: none;
}