/* ============================================================================
 * Zed PN1 — Panel shell + section system (CT-313)
 * ALL rules gated behind html.zed-ux (default OFF => ZERO regression).
 * Scope: left panel (.sidePanel) + right inspector (.inspectorPanel) chrome,
 * section headers, and a reusable collapsible section primitive.
 * (Floating/gap layout = Phase UX2; card/search/slider = later PN steps.)
 * ==========================================================================*/

html.zed-ux .sidePanel,
html.zed-ux .inspectorPanel {
  background: var(--zed-bg-panel);
  color: var(--zed-text);
}

/* --- Section header consistency --- */
html.zed-ux .panelSectionHeader,
html.zed-ux .paneHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zed-space-2);
  padding: var(--zed-space-3) var(--zed-space-4) var(--zed-space-2);
}
html.zed-ux .panelKicker {
  font-size: var(--zed-fs-xs);
  font-weight: var(--zed-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zed-text-faint);
  line-height: var(--zed-lh-tight);
}

/* --- Media library header --- */
html.zed-ux .mediaLibraryHeader {
  padding: var(--zed-space-3) var(--zed-space-4);
  border-bottom: 1px solid var(--zed-border);
}
html.zed-ux .mediaTitleRow h1 {
  font-size: var(--zed-fs-lg);
  font-weight: var(--zed-fw-semibold);
  color: var(--zed-text);
  line-height: var(--zed-lh-tight);
}

/* --- Reusable collapsible section primitive (PN1 foundation) ---
 * New classes; no existing markup uses them yet => additive & safe.
 * Later PN/inspector steps opt in by wrapping content in these. */
html.zed-ux .zed-panel-section {
  border-bottom: 1px solid var(--zed-border);
}
html.zed-ux .zed-panel-section__header {
  display: flex;
  align-items: center;
  gap: var(--zed-space-2);
  padding: var(--zed-space-3) var(--zed-space-4);
  font-size: var(--zed-fs-sm);
  font-weight: var(--zed-fw-semibold);
  color: var(--zed-text);
  cursor: pointer;
  user-select: none;
  transition: background var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .zed-panel-section__header:hover {
  background: var(--zed-bg-hover);
}
html.zed-ux .zed-panel-section__chevron {
  margin-left: auto;
  color: var(--zed-text-faint);
  transition: transform var(--zed-dur-normal) var(--zed-ease);
}
html.zed-ux .zed-panel-section__body {
  padding: var(--zed-space-1) var(--zed-space-4) var(--zed-space-4);
}
html.zed-ux .zed-panel-section[data-collapsed="true"] .zed-panel-section__body {
  display: none;
}
html.zed-ux .zed-panel-section[data-collapsed="true"] .zed-panel-section__chevron {
  transform: rotate(-90deg);
}

/* --- Inspector tab row: light spacing token pass --- */
html.zed-ux .inspectorTabs {
  gap: var(--zed-space-1);
}