/* pipeline-segments.css — layout only for the Segments drawer.
   Components (.sidebar-drawer, .op-table, .op-check, .op-btn, .op-badge, .toolbar) are styled by the
   design system; nothing here restyles them. Tokens only. */
.ps-drawer { margin-top: var(--sp-2); }
.ps-drawer .sidebar-drawer-header { gap: var(--sp-2); }
.ps-summary { margin-left: auto; font: var(--text-caption); color: var(--muted-foreground); }
.ps-loading { display: flex; align-items: center; gap: var(--sp-icon); padding: var(--sp-3) 0; font: var(--text-caption); color: var(--muted-foreground); }

.ps-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) 0; }
.ps-hint { font: var(--text-caption); color: var(--muted-foreground); }

.ps-table-wrap { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.ps-table-wrap-short { max-height: 132px; }
.ps-table-wrap thead th { position: sticky; top: 0; background: var(--well); z-index: var(--z-map); }
.ps-col-check { width: 32px; padding-right: 0; }
.ps-col-check .op-check { min-height: 0; }
.ps-col-num { text-align: right; white-space: nowrap; }
.ps-col-src { text-align: right; white-space: nowrap; }
.ps-muted { color: var(--muted-foreground); }
.ps-empty { color: var(--muted-foreground); text-align: center; padding: var(--sp-4) var(--sp-3); }
.op-table tr.is-selected td { background: var(--accent); }

.ps-actions { margin-top: var(--sp-2); align-items: center; }
.ps-actions .op-btn { flex: 0 0 auto; }
.ps-loose { margin-top: var(--sp-3); }
.ps-loose-title { font: var(--text-label); color: var(--muted-foreground); margin-bottom: var(--sp-1); display: flex; gap: var(--sp-1); }

.ps-detach-panel { max-width: 420px; width: 100%; }
.ps-detach-body-text { font: var(--text-body); color: var(--muted-foreground); margin: 0 0 var(--sp-3); }

/* Durable Undo after a delete: an Alert above the table, stays until undone, dismissed or superseded */
.ps-undo { display: flex; align-items: center; gap: var(--sp-icon); margin-bottom: var(--sp-2); }
.ps-undo-text { flex: 1; }
