/**
 * SAR sheet — parent container styles.
 *
 * Layout (#95 Phase A.1):
 *   .sar-sheet
 *     .sar-sheet__header                — search + status filter chips
 *     .sar-sheet__content
 *       .sar-sheet__body                — flex-row
 *         .sar-sheet__left              — scatter + table, vertical
 *           .sar-sheet__children
 *             .sar-sheet__row--scatter
 *             .sar-sheet__child-split   — vertical drag handle
 *             .sar-sheet__row--table
 *         .sar-sheet__hsplit            — horizontal drag handle
 *         .sar-sheet__right             — 3D molecule viewer column
 *           .sar-sheet__viewer
 *     .sar-sheet__footer                — single parent footer strip
 *
 * Compound-details rendering moved out of SarSheet into the workspace
 * right column's InfoPanel "Selection" section per #95. See
 * research/specs/SAR_SHEET_3D_AND_DETAILS.md.
 */

.sar-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* .sar-sheet__footer styled via canonical .guide-footer-strip rule
   in page-primitives.css. Caitlin 2026-04-26. */

/* ── Parent header strip ──────────────────────────────────────────── */
/* Search + status filter chips. Sheet-level state — filter and search
   apply to ALL children (coupled-by-default doctrine). */
.sar-sheet__header {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  padding: var(--s-space-2) var(--s-space-3);
  border-bottom: 1px solid var(--s-color-border);
  background: var(--s-color-bg-app);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.sar-sheet__search {
  flex: 1;
  min-width: 140px;
  max-width: 280px;
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-space-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
}
.sar-sheet__search:focus-visible {
  outline: 1px solid color-mix(in oklch, var(--s-color-status-info) 45%, transparent);
  outline-offset: 0;
  border-color: var(--s-color-status-info);
}

.sar-sheet__chips {
  display: flex;
  align-items: center;
  gap: var(--s-space-tight-3);
  flex-wrap: wrap;
}

.sar-sheet__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-tight-3);
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-window);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-muted);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sar-sheet__chip:hover {
  color: var(--s-color-fg-primary);
  border-color: color-mix(in oklch, var(--s-color-fg-muted) 30%, transparent);
}
/* Active chip — strong tint background. */
.sar-sheet__chip--active[data-tint="info"] {
  background: var(--s-color-status-info);
  color: var(--s-color-bg-app);
  border-color: var(--s-color-status-info);
}
.sar-sheet__chip--active[data-tint="warning"] {
  background: var(--s-color-status-warning);
  color: var(--s-color-bg-app);
  border-color: var(--s-color-status-warning);
}
.sar-sheet__chip--active[data-tint="muted"] {
  background: var(--s-color-fg-muted);
  color: var(--s-color-bg-app);
  border-color: var(--s-color-fg-muted);
}
.sar-sheet__chip--active[data-tint="neutral"],
.sar-sheet__chip--active:not([data-tint]) {
  background: var(--s-color-fg-primary);
  color: var(--s-color-bg-app);
  border-color: var(--s-color-fg-primary);
}
.sar-sheet__chip-count {
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.06em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.sar-sheet__chip--active .sar-sheet__chip-count {
  opacity: 0.85;
}

/* Clear button — visually quieter than a state chip. */
.sar-sheet__chip-clear {
  background: transparent;
  border-style: dashed;
  font-style: italic;
}

.sar-sheet__content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
}

.sar-sheet__children {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Each child sits in a flex-row alongside its own per-child dock zone.
   The dock zone collapses to width:0 when empty; expands to 260px when
   the vignette docks there. */
.sar-sheet__row {
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
}
.sar-sheet__row--scatter {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--s-color-border);
}
.sar-sheet__row--table {
  flex: 1 1 0;
  min-height: 0;
}

.sar-sheet__child {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}


.sar-sheet__child-split {
  flex: 0 0 var(--s-space-2);
  height: var(--s-space-2);
  cursor: ns-resize;
  background: transparent;
  position: relative;
  touch-action: none;
}
.sar-sheet__child-split::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: transparent;
  transition: background 0.12s ease;
  transform: translateY(-50%);
}
.sar-sheet__child-split:hover::before,
.sar-sheet__child-split:focus-visible::before {
  background: color-mix(in oklch, var(--s-color-status-info) 50%, transparent);
}

/* ── Phase A.1 (#95) — body row with leftCol | hsplit | rightCol ──── */

/* Body wraps the existing childrenWrap (left) and the new 3D viewer
   (right). The hsplit is a vertical drag handle between them; widths
   are driven by inline flex set from JS (persisted ratio). */
.sar-sheet__body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
}

.sar-sheet__left {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sar-sheet__hsplit {
  flex: 0 0 var(--s-space-2);
  width: var(--s-space-2);
  cursor: ew-resize;
  background: transparent;
  position: relative;
  touch-action: none;
  border-left: 1px solid var(--s-color-border);
  border-right: 1px solid transparent;
}
.sar-sheet__hsplit::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: transparent;
  transition: background 0.12s ease;
  transform: translateX(-50%);
}
.sar-sheet__hsplit:hover::before,
.sar-sheet__hsplit:focus-visible::before {
  background: color-mix(in oklch, var(--s-color-status-info) 50%, transparent);
}

.sar-sheet__right {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--s-color-bg-app);
  position: relative;
}
.sar-sheet__viewer {
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
}
.sar-sheet__viewer-2d {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-3);
}
.sar-sheet__viewer-2d > svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Mode toggle overlay — top-right of the viewer column. */
.sar-sheet__viewer-modebar {
  position: absolute;
  top: var(--s-space-2);
  right: var(--s-space-2);
  display: flex;
  gap: var(--s-space-twohair);
  padding: var(--s-space-twohair);
  background: color-mix(in oklch, var(--s-color-bg-app) 80%, transparent);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  z-index: 4;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
}
.sar-sheet__viewer-modebtn {
  border: 0;
  background: transparent;
  color: var(--s-color-fg-muted);
  padding: var(--s-space-tight-3) var(--s-space-3);
  cursor: pointer;
  border-radius: var(--s-space-1);
  letter-spacing: 0.04em;
}
.sar-sheet__viewer-modebtn:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-hover);
}
.sar-sheet__viewer-modebtn--active {
  color: var(--s-color-fg-primary);
  background: var(--s-color-prominent-bg);
  color: var(--s-color-prominent-fg);
}
.sar-sheet__viewer-modebtn--inactive {
  opacity: 0.4;
}
.sar-sheet__viewer-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  text-align: center;
  padding: var(--s-space-3);
}

/* mountMoleculeViewer3D inline notice (loading / fallback) */
.mv3d__notice,
.mv3d__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  pointer-events: none;
}
.mv3d__fallback-label {
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}
.mv3d__fallback-hint {
  margin-top: var(--s-space-1);
  font-size: var(--s-font-size-condensed);
  opacity: 0.8;
}

/* When SarSheet is in a sheet context (parent/child mounting), make sure
   the children take full height of leftCol. */
.sar-sheet__left .sar-sheet__children {
  flex: 1;
}