/* Pipeline designer (09 §6): layout, Drawflow theming (overrides vendor/drawflow.min.css). */
.pk-designer { display: grid; grid-template-rows: auto 1fr auto; height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); min-height: 560px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.pk-designer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); }
.pk-designer__title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: var(--weight-semibold); }
.pk-designer__title a { color: var(--color-text-muted); }
.pk-designer__save { font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; }
.pk-designer__save[data-state="error"] { color: var(--color-danger); }
.pk-designer__actions { display: flex; gap: var(--space-2); margin-left: auto; }
.pk-designer__body { display: grid; grid-template-columns: 240px 1fr 360px; min-height: 0; }
.pk-designer__drawer { border-top: 1px solid var(--color-border); min-height: 0; }
.pk-designer__drawer[data-open="true"] { height: 34vh; display: grid; grid-template-rows: auto 1fr; }
.pk-designer__drawer-tabs { display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); }
.pk-designer__drawer-tabs button { padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm); color: var(--color-text-muted); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.pk-designer__drawer-tabs button[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.pk-designer__drawer-body { overflow: auto; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }

/* Palette */
.pk-palette { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.pk-palette__search { padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
.pk-palette__list { overflow: auto; padding: var(--space-2) var(--space-3) var(--space-4); }
.pk-palette__group { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-subtle); }
.pk-palette__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2); font: inherit; font-size: var(--text-sm); text-align: left; color: var(--color-text); background: none; border: 1px solid transparent; border-radius: var(--radius-md); cursor: grab; }
.pk-palette__item:hover { background: var(--color-surface-2); border-color: var(--color-border); }
.pk-palette__item[disabled] { opacity: 0.45; cursor: not-allowed; }
.pk-palette__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cat-color, var(--cat-control)); }

/* Canvas */
.pk-canvas { position: relative; min-width: 0; min-height: 0; overflow: hidden; background-color: var(--canvas-bg); background-image: radial-gradient(var(--canvas-grid) 1px, transparent 1px); background-size: 20px 20px; }
.pk-canvas .drawflow { width: 100%; height: 100%; }
.pk-canvas__tools { position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 5; display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pk-canvas__hint[hidden], .pk-designer__drawer-body[hidden] { display: none; }
.pk-canvas__hint { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--color-text-subtle); font-size: var(--text-sm); }
.pk-designer[data-readonly="true"] .pk-palette__item { cursor: not-allowed; }

.drawflow .drawflow-node { width: 200px; padding: 0; color: var(--color-text); background: var(--node-bg); border: 1px solid var(--node-border); border-left: 4px solid var(--cat-color, var(--cat-control)); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.drawflow .drawflow-node.selected { background: var(--node-bg); border-color: var(--node-selected); box-shadow: 0 0 0 2px var(--node-selected); }
.drawflow .drawflow-node:hover { cursor: move; }
.drawflow .drawflow-node .drawflow_content_node { width: 100%; }
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { width: 14px; height: 14px; background: var(--node-bg); border: 2px solid var(--edge-color); }
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { background: var(--edge-active); border-color: var(--edge-active); }
.drawflow .drawflow-node .inputs { left: -8px; }
.drawflow .drawflow-node .outputs { right: -8px; }
.drawflow .drawflow-node .input[data-label]::after { content: attr(data-label); position: absolute; left: 16px; top: -3px; font-size: 10px; color: var(--color-text-subtle); white-space: nowrap; }
.drawflow .connection .main-path { stroke: var(--edge-color); stroke-width: 2px; }
.drawflow .connection .main-path:hover, .drawflow .connection .main-path.selected { stroke: var(--edge-active); }
.drawflow .connection.pk-edge--failure .main-path { stroke: var(--color-danger); stroke-dasharray: 6 4; }
.drawflow .connection.pk-edge--always .main-path { stroke-dasharray: 2 4; }
.drawflow-delete { display: grid; place-items: center; width: 22px; height: 22px; line-height: 1; font-family: var(--font-sans, inherit); font-size: 14px; color: var(--color-text-inverse); background: var(--color-danger); border: 0; border-radius: 50%; }
.drawflow > .drawflow-delete { margin-left: -11px; margin-top: 12px; }
.parent-node .drawflow-node .drawflow-delete { right: -11px; top: -11px; }

.pk-node { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); }
.pk-node__head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.pk-node__head .pk-icon { color: var(--cat-color, var(--cat-control)); flex: none; }
/* Drawflow positions every svg on the canvas absolutely (its connection lines); not our icons. */
.drawflow .pk-node svg.pk-icon { position: static; z-index: auto; }
.pk-node__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-node__kind { font-size: var(--text-xs); color: var(--color-text-subtle); }
.pk-node__badge { position: absolute; top: -9px; right: 10px; padding: 1px 6px; font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-text-inverse); background: var(--color-danger); border-radius: 999px; }
.pk-node__badge[data-severity="warning"] { background: var(--color-warning); }
.pk-node__cols { font-size: 11px; color: var(--color-text-subtle); }

/* Inspector */
.pk-inspector { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--color-border); background: var(--color-surface); }
.pk-inspector__head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.pk-inspector__body { overflow: auto; padding: var(--space-4); }
.pk-inspector .pk-tabs__list { padding: 0 var(--space-4); }
.pk-list { display: flex; flex-direction: column; gap: var(--space-3); }
.pk-list__item { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); background: var(--color-surface-2); border-radius: var(--radius-md); }
.pk-list__tools { display: flex; justify-content: flex-end; gap: var(--space-1); margin-top: calc(-1 * var(--space-1)); }
.pk-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pk-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-1) 2px var(--space-2); font-size: var(--text-xs); background: var(--color-surface-3); border-radius: var(--radius-sm); }
.pk-chip button { padding: 0 2px; font: inherit; color: var(--color-text-muted); background: none; border: 0; cursor: pointer; }
.pk-chip[data-missing="true"] { color: var(--color-danger); background: var(--color-danger-soft); }

/* Expression editor */
.pk-expr { display: flex; flex-direction: column; gap: var(--space-1); }
.pk-expr textarea { font-family: var(--font-mono); font-size: var(--text-sm); }
.pk-expr__tools { display: flex; gap: var(--space-1); }
.pk-expr__status { font-size: var(--text-xs); color: var(--color-text-muted); }
.pk-expr__status[data-state="ok"] { color: var(--color-success); }
.pk-expr__status[data-state="error"] { color: var(--color-danger); }

/* Problems & code */
.pk-problems { margin: 0; padding: 0; list-style: none; }
.pk-problems li { display: flex; gap: var(--space-2); align-items: baseline; padding: var(--space-1) 0; font-size: var(--text-sm); }
.pk-problems button { padding: 0; font: inherit; text-align: left; color: var(--color-text); background: none; border: 0; cursor: pointer; }
.pk-problems button:hover { text-decoration: underline; }
.pk-sql { margin: 0; padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.55; white-space: pre; color: var(--color-text); background: var(--color-surface-2); border-radius: var(--radius-md); overflow: auto; }
.pk-sql .k { color: var(--color-primary); font-weight: var(--weight-semibold); }
.pk-sql .s { color: var(--color-success); }
.pk-sql .c { color: var(--color-text-subtle); font-style: italic; }
.pk-sql .i { color: var(--color-running); }
.pk-code-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-4); min-height: 0; }
.pk-code-nav { display: flex; flex-direction: column; gap: 2px; }
.pk-code-nav button { padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--text-sm); text-align: left; color: var(--color-text); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.pk-code-nav button[aria-current="true"] { color: var(--color-accent); background: var(--color-accent-soft); }

/* Mode cards (new pipeline) */
.pk-mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pk-mode-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); font: inherit; text-align: left; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; }
.pk-mode-card[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.pk-mode-card strong { font-size: var(--text-md); }

@media (max-width: 1100px) {
  .pk-designer__body { grid-template-columns: 200px 1fr 300px; }
}
@media (max-width: 860px) {
  .pk-designer__body { grid-template-columns: 1fr; }
  .pk-palette, .pk-inspector { display: none; }
}

/* Data preview (M6) */
.pk-preview .pk-table-wrap { max-height: 320px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pk-table--compact th { position: sticky; top: 0; background: var(--color-surface); z-index: 1; }
.pk-table--compact td, .pk-table--compact th { height: 30px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.pk-table--compact td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); }
.pk-upload { display: flex; flex-direction: column; gap: var(--space-2); }
.pk-upload__file { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pk-upload__file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-preview__type { margin-left: var(--space-1); font-weight: var(--weight-regular); text-transform: none; letter-spacing: 0; color: var(--color-text-subtle); }