/**
 * inspector-stack — drag/reorder affordances + accessibility helpers.
 *
 * Token-only styling for the new primitive bits:
 *   - the grab handle (.inspector-stack__grip)
 *   - drag/drop visual states ([data-dragging], [data-drop-target])
 *   - the visually-hidden aria-live announcer (.inspector-stack__live.sr-only)
 *
 * The collapsible card markup itself (.notebook-insp-widget*) continues to
 * inherit its sizing/typography from notebook-shell.css so existing surfaces
 * keep their look. This stylesheet contributes the NEW affordances only.
 *
 * Brief: research/flywheel/handoffs/briefs/library-inspector-section-stack.md
 */

/* ── Header row (grip + collapse button) ──────────────────────────────── */

.inspector-stack__head {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.inspector-stack__head .notebook-insp-widget__header {
  flex: 1;
  min-width: 0;
}

/* ── Grab handle ──────────────────────────────────────────────────────── */

.inspector-stack__grip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-space-2);
  border: 0;
  background: transparent;
  color: var(--s-color-fg-tertiary);
  cursor: grab;
  touch-action: none;
  border-right: 1px solid var(--s-color-border-subtle);
  border-top-left-radius: var(--s-radius-md);
  transition: background var(--s-duration-fast) ease, color var(--s-duration-fast) ease;
}

.inspector-stack__grip:hover {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-secondary);
}

.inspector-stack__grip:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: -2px;
  color: var(--s-color-fg-secondary);
}

.inspector-stack__grip[aria-grabbed="true"] {
  cursor: grabbing;
  background: var(--s-color-bg-subtle);
  color: var(--s-color-accent-active);
}

/* ── Card states while dragging / receiving ──────────────────────────── */

.inspector-stack__card[data-dragging="true"] {
  opacity: 0.5;
  outline: 2px dashed var(--s-color-accent-active);
  outline-offset: -2px;
}

.inspector-stack__card[data-drop-target="above"] {
  box-shadow: 0 -2px 0 0 var(--s-color-accent-active) inset;
}

.inspector-stack__card[data-drop-target="below"] {
  box-shadow: 0 2px 0 0 var(--s-color-accent-active) inset;
}

/* ── Visually-hidden aria-live announcer ─────────────────────────────── */

.inspector-stack__live.sr-only,
.sr-only.inspector-stack__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}