:root {
    --sidebar-width: 300px;
    --sidebar-gap: 20px;
    --sidebar-total: calc(var(--sidebar-width) + var(--sidebar-gap));
    --ink: #0f172a;
    --ink-soft: rgba(15, 23, 42, 0.6);
    --accent: #1f4fd6;
    --accent-strong: #1438a8;
    --accent-tint: rgba(31, 79, 214, 0.12);
    --accent-tint-strong: rgba(31, 79, 214, 0.25);
    --hairline: rgba(15, 23, 42, 0.08);
    --hairline-strong: rgba(15, 23, 42, 0.12);
    --radius-pill: 999px;
    --radius-card: 8px;     /* crisper, matches etl-studio --radius-lg */
    --radius-control: 6px;  /* matches --radius-md */
    --radius-chip: 6px;
    --transition-default: 0.2s ease;
    --canvas-bg: radial-gradient(circle at 1px 1px, rgba(15,23,42,0.07) 1px, transparent 0) 0 0 / 22px 22px, var(--surface-2, #f6f9fc);
  }

  body.sidebar-collapsed {
    --sidebar-width: 0px;
    --sidebar-gap: 0px;
    --sidebar-total: 0px;
  }

  body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "Space Grotesk", "Garamond", serif;
    color: var(--ink);
    background: radial-gradient(circle at 20% 20%, #ffffff 0%, #f3f5f9 45%, #e8edf4 100%);
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100%;
    color: var(--ink);
    padding: 12px;
    overflow-y: auto;
    z-index: 1000;
    transition: transform 0.25s ease, width 0.25s ease;
    /* visual treatment (background, border, shadow) lives in etl-design-system.css under .sidebar-v2 */
  }

  body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
  }

  .content-wrapper {
    margin-left: var(--sidebar-total);
    width: calc(100% - var(--sidebar-total));
    display: flex;
    flex-direction: column;
    height: 100vh;
    transition: margin-left 0.25s ease, width 0.25s ease;
  }

  .content {
    flex: 1;
    background: transparent;
    /* padding: 20px; */
    overflow: auto;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .pipeline-run {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .pipeline-run button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px; height: 32px; gap: 6px;
    border-radius: var(--radius-control, 6px);
    border: 1px solid transparent;
    background: #fff;
    color: var(--ink-900, #1a1f36);
    font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow-1);
    cursor: pointer;
    outline: none;
    opacity: 1;
    transform: none;
    transition: background 0.12s var(--ease), border-color 0.12s var(--ease), box-shadow 0.12s var(--ease), color 0.12s var(--ease);
  }

  /* Run Flow = filled brand-blue primary (matches the etl-studio prototype). */
  .pipeline-run #run_pipeline {
    background: var(--brand-500, #1f4fd6);
    color: #fff; border-color: var(--brand-500, #1f4fd6);
  }

  .pipeline-run #run_pipeline:hover,
  .pipeline-run #run_pipeline:focus-visible {
    background: var(--brand-600, #1b44b8);
    border-color: var(--brand-600, #1b44b8);
    box-shadow: var(--shadow-2);
  }

  .pipeline-run #run_pipeline:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(31, 79, 214, 0.18);
  }

  .pipeline-run #run_pipeline:focus-visible {
    outline: 3px solid rgba(31, 79, 214, 0.35);
    outline-offset: 2px;
  }

  .pipeline-run svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.2s ease;
  }

  .pipeline-run button:hover svg {
    transform: translateX(1px);
  }

  .pipeline-run button.is-running {
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(220, 38, 38, 0.9);
    color: rgba(220, 38, 38, 0.9);
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.16);
  }

  .pipeline-run button.is-running + .create-trigger-button {
    opacity: 1;
    transform: translateY(0);
  }

#chart_container {
    position: relative;
    overflow: hidden;
    flex: 1;
    width: 100%;
    background:
      radial-gradient(circle at center, rgba(15,23,42,0.06) 1px, transparent 1px) 0 0 / 16px 16px,
      var(--surface-2);
  }

  .create-trigger-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px; height: 32px;
    border-radius: var(--radius-control, 6px);
    border: 1px solid var(--line-strong, #c1c9d2);
    background: #fff;
    color: var(--ink-900, #1a1f36);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    z-index: 7;
    box-shadow: var(--shadow-1);
    transition: background .12s var(--ease), border-color .12s var(--ease), box-shadow .12s var(--ease), color .12s var(--ease);
  }

  .pipeline-run .create-trigger-button {
    border-color: var(--line-strong, #c1c9d2);
    color: var(--ink-900, #1a1f36);
    background: #fff;
    box-shadow: var(--shadow-1);
  }

  .create-trigger-button:hover {
    opacity: 1;
    transform: translateY(0);
    background: var(--surface-3, #fafbfc);
    border-color: var(--brand-300, #8aa6f6);
    color: var(--brand-600, #1438a8);
    box-shadow: var(--shadow-1);
  }

  .create-trigger-button:active {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(59, 130, 246, 0.14);
  }

  .create-trigger-button:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.35);
    outline-offset: 2px;
  }

  .create-trigger-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.2s ease;
  }

  .create-trigger-button:hover .create-trigger-icon {
    transform: rotate(-6deg);
  }

  .create-trigger-button:disabled,
  .create-trigger-button[aria-disabled="true"] {
    border-color: rgba(148, 163, 184, 0.8);
    color: rgba(100, 116, 139, 0.9);
    background: rgba(248, 250, 252, 0.7);
    box-shadow: 0 3px 8px rgba(148, 163, 184, 0.14);
    cursor: not-allowed;
    opacity: 0.6;
    transform: translateY(-6px);
  }

  .create-trigger-button:disabled:hover {
    opacity: 0.6;
    transform: translateY(-6px);
    background: rgba(248, 250, 252, 0.7);
    border-color: rgba(148, 163, 184, 0.8);
    box-shadow: 0 3px 8px rgba(148, 163, 184, 0.14);
  }

  .pipeline-run:hover .create-trigger-button:disabled,
  .pipeline-run:focus-within .create-trigger-button:disabled {
    opacity: 0.7;
    transform: translateY(0);
  }

  .import-placeholder {
    position: absolute;
    top: 50px;
    left: 50px;
    min-width: 200px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 2px dashed rgba(148, 163, 184, 0.6);
    background: rgba(255, 255, 255, 0.7);
    color: #0f172a;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }

  .import-placeholder:hover {
    border-color: rgba(59, 130, 246, 0.7);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
  }

  .trigger-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    transition: opacity 0.2s ease;
  }

  .trigger-modal.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .trigger-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(3px);
  }

  .trigger-modal__panel {
    position: relative;
    width: min(640px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    padding: 18px 20px 20px;
    transform: translateY(-10px) scale(0.98);
    transition: transform 0.2s ease;
  }

  .trigger-modal.is-open .trigger-modal__panel {
    transform: translateY(0) scale(1);
  }

  .trigger-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .trigger-modal__header h2 {
    margin: 0;
    font-size: 18px;
    color: #0f172a;
  }

  .trigger-modal__close {
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: transparent;
    border-radius: 999px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: #64748b;
  }

  .trigger-modal__body {
    display: grid;
    gap: 14px;
  }

  .trigger-modal__body label {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
  }

  .trigger-modal__body input,
  .trigger-modal__body textarea,
  .trigger-modal__body select {
    width: 100%;
    max-width: 520px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #0f172a;
  }

  .trigger-modal__body input:disabled {
    background: rgba(241, 245, 249, 0.9);
    color: rgba(100, 116, 139, 0.9);
    border-color: rgba(148, 163, 184, 0.6);
    cursor: not-allowed;
  }

  .trigger-field-hidden {
    display: none;
  }

  .trigger-recurrence {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 520px;
  }

  .trigger-recurrence input {
    width: 110px;
  }

  .trigger-recurrence select {
    flex: 1;
  }

  .trigger-weekdays {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.8);
    font-size: 13px;
    color: #475569;
  }

  .trigger-weekdays > span {
    grid-column: 1 / -1;
    font-weight: 600;
    color: #0f172a;
  }

  .trigger-weekdays.is-visible {
    display: grid;
  }

  .trigger-weekdays label {
    position: relative;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: #fff;
    cursor: pointer;
    color: #475569;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  }

  .trigger-weekdays label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .trigger-weekdays label span {
    pointer-events: none;
  }

  .trigger-weekdays label input:checked + span {
    color: #1d4ed8;
  }

  .trigger-weekdays label:has(input:checked) {
    border-color: rgba(37, 99, 235, 0.7);
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
  }

  .trigger-hours {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(226, 232, 240, 0.6));
  }

  .trigger-hours .trigger-hours__title {
    font-size: 13px;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .trigger-hours .trigger-hours__hint {
    font-size: 12px;
    font-weight: 500;
    color: rgba(71, 85, 105, 0.9);
  }

  .trigger-hours label {
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  }

  .trigger-hour-value {
    min-width: 24px;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
  }

  .trigger-hour-sep {
    color: rgba(15, 23, 42, 0.5);
  }

  .trigger-hours .trigger-hour-minutes {
    width: 78px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: #fff;
    font-weight: 600;
    color: #0f172a;
  }

  .trigger-hours .trigger-hour-minutes:disabled {
    background: rgba(226, 232, 240, 0.65);
    color: rgba(100, 116, 139, 0.9);
  }

  .trigger-hours label:has(input:checked) {
    border-color: rgba(37, 99, 235, 0.85);
    background: rgba(59, 130, 246, 0.14);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
  }

  .trigger-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
  }

  .trigger-modal__btn {
    border-radius: 999px;
    padding: 8px 16px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: transparent;
    color: #0f172a;
    cursor: pointer;
    font-weight: 600;
  }

  .trigger-modal__btn--primary {
    border-color: rgba(59, 130, 246, 0.9);
    color: #2563eb;
    background: rgba(59, 130, 246, 0.08);
  }

  .select-placeholders {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 6;
  }

  .select-placeholder {
    position: absolute;
    top: 50px;
    left: 50px;
    min-width: 220px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 2px dashed rgba(148, 163, 184, 0.6);
    background: rgba(255, 255, 255, 0.7);
    color: #0f172a;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }

  .select-placeholder:hover {
    border-color: rgba(59, 130, 246, 0.7);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
  }

  /* Activity picker popup — matches the etl-studio ActivityPicker:
     clean popover, eyebrow group labels, item rows (icon box + label). */
  .choose-menu {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 8px;
    min-width: 300px;
    max-width: 340px;
    padding: 8px;
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--line-strong, #c1c9d2);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-3, 0 10px 15px -3px rgba(0,0,0,0.10));
    z-index: 8;
  }

  .choose-menu-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--line-strong, #c1c9d2);
    background: var(--surface, #fff);
  }

  .choose-menu-icon {
    font-size: 0.9rem;
    color: var(--ink-500, #6b7c93);
  }

  .choose-menu-search input {
    border: none;
    outline: none;
    background: transparent;
    color: var(--ink-900, #1a1f36);
    width: 100%;
    font: 400 13px var(--font-ui);
  }

  .choose-menu-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 340px;
    overflow-y: auto;
  }

  .choose-menu-list button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 6px);
    padding: 8px 9px;
    text-align: left;
    color: var(--ink-900, #1a1f36);
    font: 600 12.5px var(--font-ui);
    cursor: pointer;
    transition: background 120ms var(--ease), border-color 120ms var(--ease);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .choose-menu-list button:hover {
    background: var(--surface-2, #f6f9fc);
    border-color: var(--line, #e3e8ee);
    box-shadow: none;
    transform: none;
  }

  .choose-menu-list button .activity-icon {
    width: 28px; height: 28px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-3, #fafbfc); border-radius: var(--radius-sm, 4px);
    color: var(--ink-700, #425466);
  }
  .choose-menu-list button .activity-icon svg { width: 16px; height: 16px; }
  /* group eyebrow inside the picker list */
  .choose-menu-list .activity-group-label {
    font: 700 10px var(--font-ui); color: var(--ink-500, #6b7c93);
    text-transform: uppercase; letter-spacing: 0.07em;
    padding: 8px 8px 3px;
  }

  .link-add-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
  }

  /* Midpoint "+" insert button — matches the etl-studio .kit-link-add:
     a small brand-blue circle that reveals on canvas hover so the canvas
     stays clean, and fills brand on its own hover. */
  .link-add-button {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--brand-200, #b6c8ff);
    background: var(--surface, #ffffff);
    color: var(--brand-500, #1f4fd6);
    font: 600 14px/1 var(--font-ui, 'Space Grotesk', sans-serif);
    box-shadow: var(--shadow-1, 0 1px 2px rgba(15, 23, 42, 0.08));
    cursor: pointer;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 120ms var(--ease, ease), transform 120ms var(--ease, ease),
                background 120ms var(--ease, ease), color 120ms var(--ease, ease),
                border-color 120ms var(--ease, ease);
  }

  #flowchartworkspace:hover .link-add-button {
    opacity: 1;
    transform: scale(1);
  }

  .link-add-button:hover {
    background: var(--brand-500, #1f4fd6);
    color: #ffffff;
    border-color: var(--brand-600, #1b44b8);
  }

  /* Activity picker popup — matches the etl-studio ActivityPicker. */
  .ingest-menu {
    position: absolute;
    top: 100px;
    left: 50px;
    display: none;
    flex-direction: column;
    gap: 1px;
    width: 320px;
    padding: 8px;
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--line-strong, #c1c9d2);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-3, 0 12px 22px rgba(15, 23, 42, 0.18));
    z-index: 7;
  }
  .ingest-menu-head {
    padding: 6px 8px 8px; font: 700 10.5px var(--font-ui);
    color: var(--ink-500, #6b7c93); text-transform: uppercase; letter-spacing: 0.08em;
  }
  .ingest-menu-group {
    padding: 7px 8px 3px; font: 700 10px var(--font-ui);
    color: var(--ink-500, #6b7c93); text-transform: uppercase; letter-spacing: 0.06em;
  }
  .ingest-item-icon {
    width: 30px; height: 30px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-50, #eef2ff); color: var(--brand-500, #1f4fd6);
    border-radius: var(--radius-sm, 4px);
  }
  .ingest-item-icon svg { width: 16px; height: 16px; }
  .ingest-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .ingest-item-label { font: 600 12.5px var(--font-ui); color: var(--ink-900, #1a1f36); }
  .ingest-item-desc { font: 400 11px var(--font-ui); color: var(--ink-500, #6b7c93); }

  .ingest-menu button {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 8px 9px; text-align: left;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-md, 6px);
    color: var(--ink-900, #1a1f36); font-weight: 600; cursor: pointer;
    transition: background 120ms var(--ease), border-color 120ms var(--ease);
  }

  .ingest-menu button:hover {
    background: var(--surface-2, #f6f9fc);
    border-color: var(--line, #e3e8ee);
    box-shadow: none;
  }


#flowchartworkspace {
    position: relative;
  }

.flowchart-selection-box {
    position: absolute;
    border: 2px solid rgba(37, 99, 235, 0.8);
    background: rgba(37, 99, 235, 0.12);
    border-radius: 8px;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
  }


  .footer {
    position: relative;
    color: var(--ink-900);
    height: 500px;
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    z-index: 10;
  }

  /* .resize-handle visual treatment now lives in etl-design-system.css under .ds-resize-handle */
  .resize-handle {
    position: relative;
    width: 100%;
    cursor: ns-resize;
  }

.buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-ui);
    letter-spacing: 0.005em;
    color: var(--ink-900);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: background var(--motion-fast) var(--ease),
                border-color var(--motion-fast) var(--ease),
                box-shadow var(--motion-fast) var(--ease);
}
.buttons:hover {
    background: var(--surface-3);
    border-color: var(--ink-500);
}
.buttons:active {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.buttons:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 79, 214, 0.18);
}

/* Pipeline list rows carry the legacy .buttons class but should stay full-width
   list items — not inline 32px chips. Restore the sidebar-list-row layout. */
.sidebar-v2 .ds-sidebar-list-row.buttons {
    display: flex;
    width: 100%;
    height: auto;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: inherit;
    text-align: left;
    justify-content: flex-start;
    box-shadow: var(--shadow-1);
}

.add-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid rgba(31, 79, 214, 0.22);
  background: var(--brand-50);
  color: var(--brand-500);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease);
}

.add-button:hover {
  background: var(--brand-100);
  border-color: var(--brand-500);
}

.add-button:active {
  background: var(--brand-100);
  box-shadow: inset 0 1px 2px rgba(31, 79, 214, 0.15);
}

.select-column-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  width: fit-content;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.select-column-row:active {
  cursor: grabbing;
}

.select-column-row:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}

.drag-handle {
  width: 22px;
  height: 22px;
  flex: 0 0 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d4ed8;
  border: 1px solid rgba(29, 78, 216, 0.35);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  cursor: inherit;
}

.drag-handle::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M6%207h12M6%2012h12M6%2017h12%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M6%207h12M6%2012h12M6%2017h12%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center / contain no-repeat;
}


.flowchart-example-container {
			width: 100%;
			height: 100%;
			background: var(--canvas-bg);
      transform-origin: 0 0;
		}

.flowchart-pan-ready {
  cursor: grab;
}

.flowchart-pan-ready.flowchart-panning {
  cursor: grabbing;
}

.zoom-controls {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}

.zoom-controls button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #ffffff;
  color: #1f2937;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
}

.zoom-controls button:hover {
  border-color: rgba(37, 99, 235, 0.45);
}


.drag-boundary-outline {
  position: absolute;
  inset: 6px;
  border: none;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

body.zoomed-out #chart_container .drag-boundary-outline {
  opacity: 0;
}

/* Tab strip visuals live in etl-design-system.css under .ds-bottom-tab-strip + .tabs/.tab. */
/* Reset legacy <button class="tablinks"> baseline so design-system .tab styling shows through. */
button.tablinks {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font: inherit;
}

/* tabcontent retains its show/hide behavior; visuals come from .ds-bottom-tab-content */
.tabcontent {
  display: none;
  height: 100%;
  box-sizing: border-box;
}

#tab_settings {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.scheduled-triggers__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(226, 232, 240, 0.7), rgba(248, 250, 252, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.scheduled-triggers__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.scheduled-triggers__controls label {
  font-weight: 600;
  color: #0f172a;
}

.scheduled-triggers__controls select {
  max-width: 320px;
}

.scheduled-triggers__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.scheduled-triggers__toolbar .buttons {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(31, 79, 214, 0.25);
  background: linear-gradient(135deg, #eff4ff 0%, #dbe6ff 100%);
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 8px 14px rgba(31, 79, 214, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.scheduled-triggers__toolbar .buttons:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 18px rgba(31, 79, 214, 0.22);
}

.scheduled-triggers__toolbar .buttons:active {
  transform: translateY(0);
}

.scheduled-triggers__toolbar select {
  padding: 10px 36px 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: #ffffff;
  font-weight: 600;
  color: #0f172a;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.scheduled-triggers__toolbar select:focus {
  border-color: rgba(31, 79, 214, 0.6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.scheduled-triggers__empty {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(226, 232, 240, 0.6);
  color: #475569;
  font-size: 13px;
}

/* #scheduled_trigger_table / #test_runs_table use .table from etl-design-system.css */
/* .status-pill replaced by .pill / .pill-* in etl-design-system.css */

/* --- Base Select Box --- */
select {
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%236b7c93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 0 28px 0 10px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--ink-900);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

/* --- Hover and Focus States --- */
select:hover {
  border-color: var(--ink-500);
}
select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(31, 79, 214, 0.15);
}
/* Multi-select needs to be a list, not a chevron-styled control. */
select[multiple] {
  height: auto;
  padding: 4px;
  background-image: none;
  appearance: auto;
  -webkit-appearance: auto;
}


/* --- Optional container styling --- */
.select-container {
  display: inline-block;
  position: relative;
}

.select-container::after {
  content: "▼";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  color: #555;
  pointer-events: none;
}
/* .text_input_value + #operator_title — visuals come from .input in etl-design-system.css */
.text_input_value, #operator_title { outline: none; }

/* .column-settings*, .combine-section*, .combine-columns-section — visuals from .panel/.stack/.row in etl-design-system.css */

.file-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink-700);
  font-size: 12.5px;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}

.file-dropzone:hover {
  border-color: var(--brand-500);
  background: rgba(31, 79, 214, 0.04);
}

.file-dropzone.is-dragging {
  border-color: var(--brand-500);
  background: var(--brand-50);
}

.file-dropzone.has-file {
  border-style: solid;
  border-color: var(--success);
  background: rgba(4, 120, 87, 0.04);
}

.file-dropzone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-500);
}
.file-dropzone-icon svg { display: block; }

.file-dropzone.has-file .file-dropzone-icon {
  background: rgba(4, 120, 87, 0.10);
  color: var(--success);
}

.file-dropzone-text strong { color: var(--brand-500); font-weight: 600; }
.file-dropzone-text .help { color: var(--ink-500); font-size: 11px; }

.file-dropzone-filename {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-900);
  margin-top: 2px;
  word-break: break-all;
  max-width: 100%;
}
.file-dropzone:not(.has-file) .file-dropzone-filename { display: none; }

.file-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

#selected_activity_settings, #operator_properties {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  gap: 8px;
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: none;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-gutter: stable;
  padding-bottom: 32px;
}

.activity-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#selected_activity_settings label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
}

/* Inputs in static .field rows fill their column. Inside .row containers (rename_settings)
   we want intrinsic widths so the row stays horizontal — see .rename_settings overrides. */
#selected_activity_settings .field > select,
#selected_activity_settings .field > input,
#selected_activity_settings .field > textarea {
  width: 100%;
  max-width: 100%;
}

/* Rename / filter / sort condition rows — each is a calm, breathable
   card. Fields WRAP instead of cramming onto one squished line, so a
   step with many fields stays readable. */
#selected_activity_settings .rename_settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  margin-bottom: 9px;
  border: 1px solid var(--line, rgba(15,23,42,0.12));
  border-radius: 10px;
  background: var(--surface, #fff);
}
#selected_activity_settings .rename_settings:last-child {
  margin-bottom: 0;
}
#selected_activity_settings .rename_settings .item_select,
#selected_activity_settings .rename_settings .text_input_value {
  flex: 1 1 130px;
  min-width: 120px;
  width: auto;
  max-width: none;
  height: 32px;
  font-size: 12.5px;
  padding: 0 9px;
  border-radius: 8px;
}
/* Read-only info fields (e.g. the detected data type) — small + dim,
   they're a readout, not a decision. */
#selected_activity_settings .rename_settings select.item_select:disabled {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  opacity: 0.55;
  font-size: 11px;
}
/* Multi-selects (group-by lists) stay tall even inside rename rows. */
#selected_activity_settings .rename_settings select.item_select[multiple] {
  height: auto;
  padding: 4px;
  flex: 1 1 150px;
}
/* Inline labels (WHERE / AND-OR) become small quiet captions. */
#selected_activity_settings .rename_settings > span {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft, #94a3b8);
}
/* The remove button sits quietly at the end of its row. */
#selected_activity_settings .rename_settings > button.buttons,
#selected_activity_settings .rename_settings > button.btn {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 8px;
  margin-left: auto;
}
/* The "+ Add …" button — a clear, calm primary action. */
#selected_activity_settings .add-button {
  margin-bottom: 12px;
  border-radius: 9px;
  font-weight: 600;
}

/* Settings panels: collapse the giant DS panel padding for nested cards in the bottom drawer. */
#selected_activity_settings .panel {
  padding: 10px 12px;
}
#selected_activity_settings .stack {
  gap: 8px;
}

#selected_activity_settings .CodeMirror {
  width: 100%;
  max-width: 100%;
  min-height: 220px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  font-size: 15px;
  line-height: 1.4;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  resize: vertical;
  overflow: auto;
}

#selected_activity_settings .CodeMirror-gutters {
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
}

#selected_activity_settings .CodeMirror-lines,
#selected_activity_settings .CodeMirror pre,
#selected_activity_settings .CodeMirror-linenumber {
  line-height: 1.4;
}

#selected_activity_settings .CodeMirror-lines {
  padding: 8px 0;
}

#selected_activity_settings .buttons {
  padding: 7px 12px;
  border-radius: 10px;
}

.stream-table-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.stream-table-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.stream-table {
  width: 100%;
  max-width: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  height: 320px;
  display: flex;
  flex-direction: column;
}

.stream-table-title {
  padding: 10px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(120deg, rgba(226, 232, 240, 0.7), rgba(248, 250, 252, 0.9));
}

.stream-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: fixed;
}

.stream-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.stream-table tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  max-height: 240px;
}

.stream-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.stream-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: rgba(15, 23, 42, 0.04);
}

.stream-table-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.stream-table-sort {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
}

.stream-table-sort-indicator {
  font-size: 0.65rem;
  color: var(--ink-soft);
}

.stream-table-filter {
  width: 100%;
  max-width: 180px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  font-size: 0.75rem;
  color: var(--ink);
}

.stream-table-filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}

.stream-table-filter-select,
.stream-table-filter-input {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.8rem;
  color: var(--ink);
}

.stream-table-filter-select {
  min-width: 160px;
}

.stream-table-filter-input {
  flex: 1;
  min-width: 180px;
}

.stream-chart-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.stream-chart-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stream-chart-field-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.stream-chart-select {
  min-width: 140px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.8rem;
  color: var(--ink);
  background: #fff;
}

.stream-chart-filter-input {
  min-width: 160px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.8rem;
  color: var(--ink);
  background: #fff;
}


.stream-chart-panel {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  padding: 12px;
  height: 320px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.stream-chart-canvas {
  width: 100%;
  height: 100%;
}

.stream-auto-fetch-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ink);
}

.stream-auto-fetch-interval {
  width: 90px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.8rem;
  color: var(--ink);
  background: #fff;
}

.stream-table tbody td {
  padding: 10px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--ink);
  vertical-align: top;
  word-break: break-word;
}

.stream-table tbody tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.02);
}

@media (max-width: 900px) {
  .stream-table-grid {
    grid-template-columns: 1fr;
  }
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.general-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
}

.general-panel label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(15, 23, 42, 0.6);
}


.general-panel input,
.general-panel textarea {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  padding: 10px 12px;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 25%;
}

.general-panel input:focus,
.general-panel textarea:focus {
  border-color: rgba(29, 78, 216, 0.6);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
  outline: none;
}

#selected_activity_settings::-webkit-scrollbar {
  width: 10px;
}
#selected_activity_settings::-webkit-scrollbar-thumb {
  background-color: rgba(15, 23, 42, 0.45);
  border-radius: 6px;
}
#selected_activity_settings::-webkit-scrollbar-thumb:hover {
  background-color: rgba(15, 23, 42, 0.65);
}
#selected_activity_settings::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.08);
}

#operator_properties::-webkit-scrollbar {
  width: 10px;
}
#operator_properties::-webkit-scrollbar-thumb {
  background-color: rgba(15, 23, 42, 0.45);
  border-radius: 6px;
}
#operator_properties::-webkit-scrollbar-thumb:hover {
  background-color: rgba(15, 23, 42, 0.65);
}
#operator_properties::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.08);
}

/* body {
  font-family: Arial, sans-serif;
  margin: 10px;
} */

.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.filter-container label {
  flex-basis: 100%;
  font-weight: bold;
}

.filter-container select,
.filter-container input {
  flex: 1 1 200px;
  max-width: 300px;
  padding: 8px;
  box-sizing: border-box;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
}

.filter-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-bar label {
  font-weight: 600;
  color: var(--ink-700);
  font-size: 12px;
}

.filter-bar select,
.filter-bar input {
  height: 28px;
  max-width: 220px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  padding: 0 8px;
  font-size: 12px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.filter-bar select:focus,
.filter-bar input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(31, 79, 214, 0.15);
  outline: none;
}

.export-button {
  margin-left: auto;
  height: 28px;
  padding: 0 10px;
  width: auto !important;
  min-width: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface) !important;
  color: var(--ink-900);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.export-button:hover {
  background: var(--surface-3) !important;
  border-color: var(--ink-500);
}

/* Table wrapper: scroll horizontally instead of overflowing */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  margin-top: 6px;
}

#scheduled_trigger_table,
#test_runs_table {
  max-height: 320px;
  overflow-y: auto;
}

/* Plain <table> baseline; .table-classed tables use design-system styling. */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  padding: 6px 10px;
  color: var(--ink-900);
  text-align: left;
  white-space: nowrap;
}

#activity_previews {
  margin-top: 8px;
}

.preview-loading {
  display: flex;
  align-items: center;
  padding: 6px 0 8px;
  color: var(--ink-700);
  font-size: 12px;
}

#activity_previews .table-responsive {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  max-height: 520px;
  overflow: auto;
}

#activity_previews #data_table_container {
  border: none;
  background: transparent;
  max-height: none;
  overflow: visible;
}

#activity_previews table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 0;
  width: max-content;
  font-size: 12px;
  table-layout: auto;
}

#activity_previews th,
#activity_previews td {
  border: none;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#activity_previews th:last-child,
#activity_previews td:last-child {
  border-right: none;
}

#activity_previews th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--ink-700);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 8px 10px;
}

#activity_previews tbody tr:nth-child(even) td {
  background: var(--surface-3);
}

#activity_previews tbody tr:hover td {
  background: rgba(31, 79, 214, 0.04);
}

.table-resizable {
  table-layout: auto;
}

.table-resizable th {
  position: relative;
}

.table-resizable .column-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

.table-resizable .column-resizer::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 2px;
  width: 1px;
  height: 60%;
  background: var(--line-strong);
}

/* Make headings and spacing smaller on phones */
@media (max-width: 600px) {
  .main_section1 {
    width: 95% !important;
    padding: 10px !important;
  }

  .section_title {
    font-size: 24px !important;
  }

  .filter-container {
    flex-direction: column;
  }

  select,
  input {
    max-width: 100% !important;
  }

  table {
    min-width: unset; /* let it shrink */
    font-size: 12px;
  }
}
#data_table {
  width: 100%;
  border-collapse: collapse;
}

#data_table th, #data_table td {
  padding: 6px 10px;
  border: 1px solid var(--line);
  text-align: left;
}
/* Sidebar layout — visuals come from etl-design-system.css (.sidebar-v2) */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.sidebar-header {
    padding: 12px 8px 6px;
}

.sidebar-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 4px 10px;
}

.sidebar-search-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.sidebar-search-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.sidebar-search input {
    outline: none;
    width: 100%;
    padding: 6px 10px;
}

/* Sidebar header toggle buttons (Hide + Collapse/Expand All) */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-700);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: background var(--motion-fast), border-color var(--motion-fast),
                color var(--motion-fast);
    white-space: nowrap;
}
.sidebar-toggle:hover {
    background: var(--surface-3);
    border-color: var(--ink-500);
    color: var(--ink-900);
}
.sidebar-toggle:active {
    background: var(--surface-2);
}

/* Floating "Activities" button — visible only when sidebar is collapsed.
   Brand-tinted pill so it reads as the primary affordance for re-opening the
   sidebar from the canvas. */
.sidebar-toggle--floating {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1200;
    height: 32px;
    padding: 0 14px;
    gap: 6px;
    font-size: 12.5px;
    color: #ffffff;
    background: linear-gradient(180deg, #2858e0 0%, #1f4fd6 100%);
    border-color: var(--brand-700);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), var(--shadow-2);
    opacity: 0;
    pointer-events: none;
}
.sidebar-toggle--floating:hover {
    background: linear-gradient(180deg, #1f4fd6 0%, #1438a8 100%);
    color: #ffffff;
    border-color: var(--brand-700);
}

body.sidebar-collapsed .sidebar-toggle--floating {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.activity-group {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

.activity-group summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.activity-group summary::-webkit-details-marker {
    display: none;
}

.activity-group summary::after {
    content: "▾";
    font-size: 0.9rem;
    color: var(--ink-soft);
    transition: transform 0.2s ease;
}

.activity-group[open] summary::after {
    transform: rotate(-180deg);
}

.activity-group-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(234, 241, 255, 0.6) 100%);
    box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
}

.activity-group-content .create_operator {
    width: 25%;
    min-width: 220px;
    max-width: 420px;
}

@media (max-width: 900px) {
    #selected_activity_settings select,
    #selected_activity_settings input,
    #selected_activity_settings textarea,
    .activity-group-content .create_operator {
        width: 100%;
        max-width: none;
    }
}

.activity-group-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    padding: 6px 6px 2px;
}

.activity-buttons-hidden {
    display: none;
}

.activity-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: #1d4ed8;
    flex-shrink: 0;
}

.activity-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Activity-group buttons (Ingest section etc., still in legacy chrome until Phase 2) */
.activity-group-content .buttons {
    background: linear-gradient(135deg, #ffffff 0%, #eaf1ff 100%);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.activity-settings-button {
    background: linear-gradient(135deg, #ffffff 0%, #eaf1ff 100%);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.activity-settings-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent) 0%, #8fb4ff 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.activity-settings-button:hover {
    border-color: rgba(31, 79, 214, 0.45);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}

.activity-settings-button:hover::before {
    opacity: 1;
}

.activity-settings-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.activity-group-content .buttons::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent) 0%, #8fb4ff 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.activity-group-content .buttons:hover {
    border-color: rgba(31, 79, 214, 0.45);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}

.activity-group-content .buttons:hover::before {
    opacity: 1;
}

.activity-group-content .buttons:active {
    transform: translateY(0);
    box-shadow: none;
}

.google-login-button {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    background: #ffffff;
    color: #111827;
    font-weight: 600;
    cursor: pointer;
    z-index: 30;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.google-login-button.is-loading {
    opacity: 0.7;
    cursor: wait;
}

.google-login-button.is-signed-in {
    background: #f8fafc;
}

.google-login-icon svg {
    width: 18px;
    height: 18px;
}

.google-login-avatar {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
}

/* Sidebar pipeline/notebook/list visuals — moved to etl-design-system.css (.ds-sidebar-list-row, .pill, .btn-ghost). */

.pipeline-options-menu {
    min-width: 160px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 246, 252, 0.98) 100%);
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    padding: 8px;
    display: none;
    z-index: 3000;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.pipeline-options-menu--floating {
    position: fixed;
}

.pipeline-list-item.menu-open {
    z-index: 2001;
}

.pipeline-options-menu.is-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pipeline-options-menu button {
    border: none;
    background: transparent;
    text-align: left;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.pipeline-options-menu button:hover {
    background: rgba(15, 23, 42, 0.08);
    transform: translateX(2px);
}

.pipeline-options-menu button.is-destructive {
    color: #dc2626;
}

.pipeline-options-menu button.is-destructive:hover {
    background: rgba(220, 38, 38, 0.12);
}

/* ============================================================
 * Per-activity live status (parallel-pipeline executor, slice 6).
 * Applied by home-ui.js:paintOperatorStatus to .flowchart-operator
 * when activity_started / activity_completed / activity_skipped
 * events arrive over /etl/pipeline/events/<run_id>.
 * ============================================================ */
.flowchart-operator.op-status-queued {
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.55);
}
.flowchart-operator.op-status-running {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.85);
    animation: op-status-pulse 1.4s ease-in-out infinite;
}
.flowchart-operator.op-status-succeeded {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.85);
}
.flowchart-operator.op-status-failed {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.9);
}
.flowchart-operator.op-status-cancelled {
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.85);
}
.flowchart-operator.op-status-skipped {
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.55);
    opacity: 0.6;
}

.flowchart-operator .op-status-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.18);
    color: #fff;
    vertical-align: middle;
}
.flowchart-operator.op-status-running .op-status-badge { background: #0284c7; }
.flowchart-operator.op-status-succeeded .op-status-badge { background: #16a34a; }
.flowchart-operator.op-status-failed .op-status-badge { background: #dc2626; }
.flowchart-operator.op-status-cancelled .op-status-badge { background: #ca8a04; }
.flowchart-operator.op-status-skipped .op-status-badge { background: #64748b; }

@keyframes op-status-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.85); }
    50%      { box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.45); }
}

/* ============================================================
 * Run history panel (slice 7).
 * ============================================================ */
.pipeline-history-button,
.pipeline-history-exit {
    margin-left: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pipeline-history-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pipeline-history-button:hover,
.pipeline-history-exit:hover {
    background: rgba(15, 23, 42, 0.04);
}
.pipeline-history-button[aria-expanded="true"] {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.5);
}
.pipeline-history-exit {
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.35);
}

.pipeline-history-panel {
    position: absolute;
    top: 56px;
    right: 24px;
    width: 320px;
    max-height: 360px;
    overflow: auto;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    z-index: 1000;
}
.pipeline-history-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.pipeline-history-panel-title {
    font-weight: 600;
    font-size: 13px;
    color: #0f172a;
}
.pipeline-history-panel-close {
    background: transparent;
    border: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}
.pipeline-history-list {
    display: flex;
    flex-direction: column;
}
.pipeline-history-row {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pipeline-history-row:hover {
    background: rgba(15, 23, 42, 0.04);
}
.pipeline-history-row.is-active {
    background: rgba(56, 189, 248, 0.12);
}
.pipeline-history-row-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pipeline-history-row-time {
    font-size: 12px;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pipeline-history-row-id {
    font-size: 10px;
    color: #64748b;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pipeline-history-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: #64748b;
}
.pipeline-history-status[data-status="success"],
.pipeline-history-status[data-status="succeeded"] { background: #16a34a; }
.pipeline-history-status[data-status="error"],
.pipeline-history-status[data-status="failed"] { background: #dc2626; }
.pipeline-history-status[data-status="cancelled"] { background: #ca8a04; }
.pipeline-history-status[data-status="in progress"] { background: #0284c7; }
.pipeline-history-empty {
    padding: 16px 12px;
    text-align: center;
    color: #64748b;
    font-size: 12px;
}

/* Import activity — blob-storage tree picker. Lives inside the bottom
   panel's settings tab; stays compact so it doesn't dominate the panel. */
.import-blob-tree {
    margin-top: 6px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    background: #fbfbfd;
    max-height: 220px;
    overflow: auto;
    padding: 4px;
}
.import-blob-branch { padding: 2px 0; }
.import-blob-branch-summary {
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    padding: 4px 6px;
    border-radius: 4px;
    user-select: none;
}
.import-blob-branch-summary:hover { background: rgba(15, 23, 42, 0.04); }
.import-blob-leaves { padding-left: 14px; border-left: 1px dashed rgba(15, 23, 42, 0.08); margin-left: 8px; }
.import-blob-leaf {
    cursor: pointer;
    font-family: "JetBrains Mono", "Menlo", monospace;
    font-size: 11.5px;
    color: #1e293b;
    padding: 3px 6px;
    border-radius: 4px;
}
.import-blob-leaf:hover { background: rgba(15, 23, 42, 0.05); }
.import-blob-leaf.is-selected { background: rgba(31, 79, 214, 0.12); color: #1f4fd6; font-weight: 600; }

/* ===================================================================
   Path picker — reusable blob-storage tree dropdown.
   Used inline in activity settings panels; popover renders to body.
   =================================================================== */

.path-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.path-picker.is-disabled { opacity: 0.55; pointer-events: none; }

.path-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 8px;
  color: #0f172a;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.path-picker-trigger:hover { border-color: rgba(31, 79, 214, 0.45); }
.path-picker-trigger:focus,
.path-picker-trigger[aria-expanded="true"] {
  outline: none;
  border-color: rgba(31, 79, 214, 0.6);
  box-shadow: 0 0 0 2px rgba(31, 79, 214, 0.16);
}
.path-picker-trigger.has-error {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12);
}

.path-picker-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #475569;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12px;
}
.path-picker-trigger.has-value .path-picker-trigger-label { color: #0f172a; }

.path-picker-warn {
  width: 14px; height: 14px;
  color: #b45309;
}
.path-picker-warn svg { width: 100%; height: 100%; }

.path-picker-clear {
  display: none;          /* shown only when value present + not required */
  width: 18px; height: 18px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px;
}
.path-picker-trigger.has-value .path-picker-clear { display: inline-flex; }
.path-picker-clear:hover { background: rgba(15, 23, 42, 0.08); color: #1e293b; }
.path-picker-clear svg { width: 100%; height: 100%; }

.path-picker-caret {
  width: 12px; height: 12px;
  color: #64748b;
  transform: rotate(90deg);
}
.path-picker-caret svg { width: 100%; height: 100%; }

.path-picker-error {
  font-size: 11.5px;
  color: #b91c1c;
  min-height: 0;
}
.path-picker-error.is-active { min-height: 16px; }

/* ---- Popover ----------------------------------------------------- */
.path-picker-popover {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}
.path-picker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  flex-wrap: wrap;
}
.path-picker-zone {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px;
}
.path-picker-zone-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  font-weight: 600;
  font-size: 10.5px;
}
.path-picker-zone .select {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 110px;
}
.path-picker-search {
  flex: 1 1 180px;
  min-width: 140px;
  padding: 5px 10px;
  font-size: 12px;
}

/* ---- Tree -------------------------------------------------------- */
.path-picker-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 6px 4px 6px 0;
  outline: none;
}
.path-picker-tree:focus-visible {
  background: rgba(31, 79, 214, 0.02);
}
.path-picker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  font-size: 12.5px;
  color: #0f172a;
  cursor: pointer;
  border-radius: 4px;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
}
.path-picker-row:hover { background: rgba(15, 23, 42, 0.05); }
.path-picker-row:focus-visible { background: rgba(31, 79, 214, 0.08); }
.path-picker-row.is-selected {
  background: rgba(31, 79, 214, 0.14);
  color: #1f4fd6;
  font-weight: 600;
}
.path-picker-row.is-dim {
  color: #94a3b8;
  cursor: default;
}
.path-picker-row.is-dim:hover { background: transparent; }
.path-picker-row.is-file .path-picker-name {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11.5px;
}

.path-picker-chevron,
.path-picker-chevron-spacer,
.path-picker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.path-picker-chevron-spacer { width: 12px; height: 12px; }
.path-picker-chevron {
  width: 12px; height: 12px;
  color: #94a3b8;
  transition: transform 0.12s ease;
}
.path-picker-chevron svg { width: 100%; height: 100%; }
.path-picker-chevron.is-open { transform: rotate(90deg); color: #475569; }

.path-picker-icon { width: 14px; height: 14px; color: #64748b; }
.path-picker-icon svg { width: 100%; height: 100%; }
.path-picker-row.is-dir .path-picker-icon { color: #d97706; }
.path-picker-row.is-file .path-picker-icon { color: #1f4fd6; }
.path-picker-row.is-dim .path-picker-icon { color: #cbd5e1; }

.path-picker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.path-picker-status {
  padding: 8px 14px;
  font-size: 11.5px;
  color: #64748b;
}
.path-picker-status.is-empty { color: #94a3b8; font-style: italic; }
.path-picker-status.is-error {
  color: #b91c1c;
  display: flex; align-items: center; gap: 8px;
}
.path-picker-status.is-error .buttons {
  padding: 2px 8px;
  font-size: 11px;
}

/* ---- Footer ------------------------------------------------------ */
.path-picker-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: #f8fafc;
}
.path-picker-footer-selected {
  font-size: 11.5px;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
}
.path-picker-footer-selected code {
  font-family: "JetBrains Mono", "Menlo", monospace;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.path-picker-footer-prefix { color: #94a3b8; }
.path-picker-footer-spacer { flex: 1; }

.path-picker-footer .buttons-primary {
  background: #1f4fd6;
  color: #fff;
  border: 1px solid #1f4fd6;
}
.path-picker-footer .buttons-primary:disabled {
  background: #cbd5e1; border-color: #cbd5e1; color: #f8fafc; cursor: not-allowed;
}
.path-picker-footer .buttons-primary:hover:not(:disabled) {
  background: #1d4ed8;
}

/* ===================================================================
   Blob Storage activity — Data Preview tab panel.
   =================================================================== */
.bs-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px 0;
  /* Both flex and explicit height so the panel fills the tab whether
     the tab uses display:flex (current behavior of switchTabPanel) or
     plain block layout. */
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.bs-preview-panel[hidden] { display: none; }

.bs-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bs-preview-path {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12.5px;
  color: #0f172a;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  padding: 3px 10px;
}
.bs-preview-loaded {
  font-size: 11.5px;
  color: #64748b;
  font-style: italic;
}
.bs-preview-spacer { flex: 1; }
.bs-preview-summary {
  font-size: 12px;
  color: #475569;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding-bottom: 6px;
}
.bs-preview-status {
  font-size: 12.5px;
  color: #64748b;
  padding: 4px 2px;
}
.bs-preview-error {
  font-size: 12.5px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #7f1d1d;
  padding: 8px 10px;
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.bs-preview-error[hidden] { display: none; }
.bs-preview-error .buttons {
  align-self: flex-start;
}
.bs-preview-truncation {
  font-size: 11.5px;
  color: #b45309;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
}
.bs-preview-truncation[hidden] { display: none; }
.bs-preview-mount {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bs-preview-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 13px;
}

/* Skeleton loader */
.bs-preview-skeleton {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.bs-preview-skeleton[hidden] { display: none; }
.bs-skel-row {
  height: 14px;
  background: linear-gradient(90deg,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(15, 23, 42, 0.10) 50%,
    rgba(15, 23, 42, 0.06) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: bs-skel-shimmer 1.4s linear infinite;
}
@keyframes bs-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Blob Storage preview — nested-cell click-to-expand modal */
.bs-cell-nested {
  cursor: zoom-in;
  color: #1f4fd6;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11px;
}
.bs-cell-nested:hover { background: rgba(31, 79, 214, 0.08); }
.bs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6000;
}
.bs-modal-dialog {
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.32);
  width: min(720px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}
.bs-modal-pre {
  flex: 1 1 auto;
  overflow: auto;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.bs-modal-dialog .buttons {
  align-self: flex-end;
}

/* Stretch the dataframe card inside the Blob Storage preview mount so
   the table fills the available height instead of being capped at the
   notebook's default 420px max. Mirrors the SQL workspace pattern. */
.bs-preview-mount > .nb-df-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 0;
}
.bs-preview-mount > .nb-df-card > .nb-df-table-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bs-preview-mount > .nb-df-card > .nb-df-table-panel > .nb-df-scroll {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}
.bs-preview-mount > .nb-df-card > .nb-chart-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.bs-preview-mount > .nb-df-card > .nb-chart-panel .nb-chart-canvas-wrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 240px;
}

/* ===================================================================
   HTTP Request activity — modernized settings UI.
   Collapsible sections with badges, color-tinted method dropdown,
   guided pagination wizard, and per-field helper text.
   =================================================================== */

.hr-settings { display: flex; flex-direction: column; gap: 8px; }

.hr-section {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}
.hr-section[open] { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); }
.hr-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}
.hr-summary::-webkit-details-marker { display: none; }
.hr-summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  color: #64748b;
  transition: transform 0.12s ease;
}
.hr-section[open] .hr-summary::before { transform: rotate(90deg); }
.hr-summary-label { font-weight: 600; color: #0f172a; font-size: 13px; }
.hr-summary-badge { color: #64748b; font-size: 11.5px; margin-left: auto; }

.hr-section-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

/* ---- Request section ---- */
.hr-request-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  align-items: center;
}
.hr-method {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 6px;
  padding: 6px 8px;
  background: #ffffff;
}
.hr-method[data-method="GET"]    { background: rgba(34, 197, 94, 0.08); color: #166534; border-color: rgba(34, 197, 94, 0.3); }
.hr-method[data-method="POST"]   { background: rgba(31, 79, 214, 0.08); color: #1f4fd6; border-color: rgba(31, 79, 214, 0.3); }
.hr-method[data-method="PUT"]    { background: rgba(245, 158, 11, 0.10); color: #b45309; border-color: rgba(245, 158, 11, 0.35); }
.hr-method[data-method="PATCH"]  { background: rgba(234, 179, 8, 0.10); color: #854d0e; border-color: rgba(234, 179, 8, 0.35); }
.hr-method[data-method="DELETE"] { background: rgba(239, 68, 68, 0.08); color: #b91c1c; border-color: rgba(239, 68, 68, 0.3); }
.hr-method[data-method="HEAD"], .hr-method[data-method="OPTIONS"] {
  background: rgba(148, 163, 184, 0.10); color: #475569; border-color: rgba(148, 163, 184, 0.35);
}

.hr-url {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12.5px;
}
.hr-url.is-error { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15); }
.hr-url.is-warn  { border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18); }

.hr-helper { font-size: 11.5px; color: #64748b; }
.hr-helper code { font-family: "JetBrains Mono", "Menlo", monospace; background: rgba(15, 23, 42, 0.06); padding: 1px 5px; border-radius: 4px; }
.hr-helper--quiet { color: #94a3b8; }
.hr-helper--error { color: #b91c1c; }
.hr-helper--warn  { color: #b45309; }

.hr-test-row { display: flex; gap: 8px; }
.hr-test-output {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: #334155;
  display: flex; flex-direction: column; gap: 6px;
}
.hr-test-status { font-weight: 600; }
.hr-test-status--ok { color: #166534; }
.hr-test-status--err { color: #b91c1c; }
.hr-test-pre {
  margin: 0;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 4px;
  padding: 6px 8px;
}
.hr-test-details summary { cursor: pointer; font-size: 11.5px; color: #475569; }

/* ---- Headers section ---- */
.hr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-chip { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; }
.hr-headers-list { display: flex; flex-direction: column; gap: 6px; }
.hr-header-row {
  display: grid;
  grid-template-columns: 18px 1fr 1.4fr auto auto;
  gap: 6px;
  align-items: center;
}
.hr-header-drag {
  cursor: grab;
  color: #94a3b8;
  font-size: 14px;
  text-align: center;
  user-select: none;
}
.hr-header-drag:active { cursor: grabbing; }
.hr-header-name {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12px;
}
.hr-header-value { font-family: "JetBrains Mono", "Menlo", monospace; font-size: 12px; }
.hr-header-mask, .hr-header-del {
  width: 30px; padding: 4px 0; font-size: 14px; line-height: 1;
}
.hr-header-del { color: #b91c1c; }

/* ---- Body section ---- */
.hr-body-format-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hr-body-fmt-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.hr-body-fmt-lbl { cursor: pointer; }
.hr-body-textarea {
  width: 100%;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 12px;
  resize: vertical;
}
.hr-body-textarea.is-error { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15); }
.hr-form-body-list { display: flex; flex-direction: column; gap: 6px; }
.hr-form-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; }

/* ---- Pagination wizard ---- */
.hr-pagination { gap: 14px; }
.hr-pg-toggle-row { display: flex; gap: 18px; }
.hr-pg-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12.5px; }
.hr-pg-step {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  padding-top: 6px;
  border-top: 1px dashed rgba(15, 23, 42, 0.08);
}
.hr-pg-cards { display: flex; flex-direction: column; gap: 6px; }
.hr-pg-card {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  align-items: start;
  background: #ffffff;
}
.hr-pg-card:hover { border-color: rgba(31, 79, 214, 0.3); }
.hr-pg-card.is-selected {
  border-color: rgba(31, 79, 214, 0.55);
  background: rgba(31, 79, 214, 0.04);
}
.hr-pg-card-body { display: flex; flex-direction: column; gap: 4px; }
.hr-pg-card-title { font-weight: 600; font-size: 13px; color: #0f172a; }
.hr-pg-card-desc  { font-size: 11.5px; color: #475569; line-height: 1.4; }
.hr-pg-card-example summary {
  cursor: pointer; font-size: 11px; color: #1f4fd6; padding-top: 2px;
}
.hr-pg-card-code {
  margin: 4px 0 0;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11px;
  white-space: pre-wrap;
}

.hr-pg-fields { display: flex; flex-direction: column; gap: 12px; }

.hr-field { display: flex; flex-direction: column; gap: 4px; }
.hr-field-label-row { display: flex; align-items: center; gap: 6px; }
.hr-info-tip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  padding: 0 6px;
  cursor: help;
}
.hr-radio-field .hr-radio-group { display: flex; flex-direction: column; gap: 4px; padding-left: 2px; }
.hr-radio-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; cursor: pointer; }

/* ---- Advanced section ---- */
.hr-toggle-field { gap: 4px; }
.hr-toggle-row { display: inline-flex; align-items: center; gap: 8px; }
.hr-toggle-label { font-size: 12.5px; color: #0f172a; cursor: pointer; }

.hr-reset-wrap { display: flex; justify-content: flex-end; padding: 4px 4px 0; }

/* HTTP Request — footer with validation summary + reset button */
.hr-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px 0;
  border-top: 1px dashed rgba(15, 23, 42, 0.08);
  margin-top: 4px;
}
.hr-validation-summary {
  flex: 1 1 auto;
  font-size: 11.5px;
  color: #b45309;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  display: none;
}
.hr-validation-summary.is-active { display: block; }
.hr-validation-summary strong { display: block; margin-bottom: 4px; }
.hr-validation-list { margin: 0; padding-left: 18px; font-size: 11.5px; }
.hr-validation-list li { margin: 2px 0; }

/* ── Top hover nav ──────────────────────────────────────────────────
   Slim strip pinned to the top-center of the canvas. Collapsed it shows
   only a small grab handle; hovering it (or keyboard-focusing) expands
   it to reveal Run Flow, Trigger and a compact Google sign-in. */
.top-nav {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 20px 0;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Always-visible action bar (was collapse-on-hover) — matches the
     etl-studio design where the top bar is persistent. */
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(.4,0,.2,1), padding-bottom 0.28s ease;
}
.top-nav:hover,
.top-nav:focus-within {
  max-height: 96px;
  padding-bottom: 12px;
}
.top-nav-grip {
  display: none;   /* drag-to-expand indicator no longer needed (bar is always open) */
  gap: 4px;
  padding: 5px 14px;
  flex: none;
}
.top-nav-grip span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.28);
  transition: background 0.2s ease;
}
.top-nav:hover .top-nav-grip span,
.top-nav:focus-within .top-nav-grip span {
  background: rgba(16, 185, 129, 0.7);
}
.top-nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 0 10px;
  opacity: 1;            /* always visible (was revealed on hover) */
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.top-nav:hover .top-nav-inner,
.top-nav:focus-within .top-nav-inner {
  opacity: 1;
  transform: translateY(0);
}
/* Run/Trigger group flows inline inside the nav (override the old
   absolute-positioned floating pill). */
.top-nav .pipeline-run {
  position: static;
  transform: none;
  top: auto;
  left: auto;
}
.top-nav .pipeline-run button {
  opacity: 1;
  transform: none;
  padding: 7px 14px;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
/* Compact Google sign-in inside the nav. */
.top-nav-google { display: flex; align-items: center; }
.top-nav #googleLoginButton {
  position: static;
  top: auto; right: auto;
  padding: 5px 12px;
  font-size: 12px;
  gap: 6px;
}
.top-nav #googleLoginButton .google-login-icon svg,
.top-nav #googleLoginButton .google-login-avatar {
  width: 15px; height: 15px;
}

/* ── HTTP response / error card (shown in an activity's preview panel) ──
   Compact, friendly: a coloured status chip + a toggle to reveal the
   full raw response or error. Errors open expanded; OK starts collapsed. */
.resp-card {
  margin: 0 0 12px;
  border: 1px solid;
  border-radius: 10px;
  overflow: hidden;
}
.resp-card--ok    { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.06); }
.resp-card--error { border-color: rgba(220,38,38,0.40); background: rgba(220,38,38,0.06); }
.resp-card-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 8px 12px;
}
.resp-chip {
  font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  color: #fff; white-space: nowrap;
}
.resp-chip--ok    { background: #16a34a; }
.resp-chip--error { background: #dc2626; }
.resp-msg { font-size: 12.5px; color: #7f1d1d; flex: 1 1 140px; }
.resp-toggle {
  margin-left: auto; cursor: pointer;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 7px;
  border: 1px solid rgba(15,23,42,0.18);
  background: #fff; color: #1f2937;
}
.resp-toggle:hover { background: #f3f4f6; }
.resp-body {
  margin: 0; padding: 10px 12px;
  max-height: 260px; overflow: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  background: rgba(15,23,42,0.04);
  border-top: 1px solid rgba(15,23,42,0.08);
  color: #111827;
}

/* ── Refresh-input bar (top of the activity Settings tab) ──────────────
   Runs the flow branch up to the selected activity so its settings can
   show the real input columns from the previous activity's output. */
.settings-refresh-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 0 8px;
  flex-wrap: wrap;
}
.settings-refresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  color: #0f766e;
  border: 1px solid rgba(16,185,129,0.45);
  background: rgba(16,185,129,0.08);
}
.settings-refresh-btn:hover { background: rgba(16,185,129,0.16); }
.settings-refresh-btn:disabled { opacity: 0.55; cursor: progress; }
.settings-refresh-btn.is-spinning svg { animation: settings-refresh-spin 0.8s linear infinite; }
@keyframes settings-refresh-spin { to { transform: rotate(360deg); } }
.settings-refresh-hint { font-size: 11.5px; color: var(--ink-500, #64748b); }

/* "Sync from peers" — a second refresh action with a distinct colour
   so the user can't confuse it with the input-refresh button. Pulses a
   numeric badge when a collaborator has pushed changes the local panel
   hasn't visually reflected yet (the auto-refresh in collab-canvas.js
   usually does, but the badge gives the user explicit confirmation and
   a manual escape hatch). */
.settings-peer-btn {
  color: var(--brand-700, #1438a8);
  border-color: rgba(31, 79, 214, 0.45);
  background: rgba(31, 79, 214, 0.08);
  position: relative;
}
.settings-peer-btn:hover { background: rgba(31, 79, 214, 0.16); }
.settings-peer-btn.has-peer-change {
  border-color: rgba(31, 79, 214, 0.85);
  background: rgba(31, 79, 214, 0.18);
  animation: settings-peer-pulse 1.6s ease-in-out infinite;
}
@keyframes settings-peer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 79, 214, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(31, 79, 214, 0.20); }
}
.settings-peer-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--brand-500, #1f4fd6);
  color: #fff;
  font: 700 11px/1 var(--font-ui, system-ui, sans-serif);
  border-radius: 9px;
  margin-left: 2px;
}
.settings-peer-badge[hidden] { display: none; }

/* ── Storage Library docs page ──────────────────────────────────────── */
.docs-workspace {
  width: 100%; height: 100%; overflow-y: auto;
  background: var(--surface-2, #f6f7f9);
  padding: 28px 40px 64px;
  font-family: var(--font-ui, system-ui, sans-serif);
  color: #1f2937;
}
.docs-hero {
  max-width: 820px; margin: 0 auto 24px;
  padding: 28px 30px;
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
  color: #fff; border-radius: 16px;
}
.docs-back {
  display: inline-flex; align-items: center;
  margin-bottom: 14px; cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.12); color: #fff;
}
.docs-back:hover { background: rgba(255,255,255,0.22); }
.docs-hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; opacity: 0.85;
}
.docs-hero-title { margin: 6px 0 8px; font-size: 26px; font-weight: 700; }
.docs-hero-sub { margin: 0; font-size: 14px; line-height: 1.6; opacity: 0.95; }
.docs-hero code { background: rgba(255,255,255,0.18); color: #fff; }

.docs-section {
  max-width: 820px; margin: 0 auto 18px;
  background: #fff; border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px; padding: 22px 26px;
}
.docs-section h2 {
  margin: 0 0 12px; font-size: 17px; font-weight: 700; color: #0f172a;
}
.docs-section p { font-size: 13.5px; line-height: 1.65; margin: 8px 0; }

.docs-code {
  margin: 8px 0; padding: 12px 14px;
  background: #0f172a; color: #e2e8f0;
  border-radius: 9px; overflow-x: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; white-space: pre;
}
code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(15,23,42,0.07);
  padding: 1.5px 5px; border-radius: 5px;
}

.docs-fn {
  border: 1px solid rgba(15,23,42,0.10);
  border-left: 3px solid #14b8a6;
  border-radius: 9px; padding: 12px 14px; margin: 10px 0;
  background: #fbfdfc;
}
.docs-fn-sig code {
  background: rgba(20,184,166,0.12); color: #0f766e;
  font-size: 13px; font-weight: 600; padding: 2px 7px;
}
.docs-fn-what { font-size: 13px; line-height: 1.6; margin: 7px 0; }
.docs-warn { color: #b45309; font-weight: 700; }

.docs-table {
  width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px;
}
.docs-table th, .docs-table td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid rgba(15,23,42,0.08); vertical-align: top;
}
.docs-table th { font-weight: 700; color: #0f172a; background: rgba(15,23,42,0.03); }
.docs-list { margin: 8px 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }
.docs-list li { margin: 3px 0; }

/* ── Split / reference panel ────────────────────────────────────────────
   A docked, resizable panel that opens beside any view (canvas, notebook,
   docs, …) so you can keep the Storage Library reference open while you
   work. One toggle button; drag the left edge to resize. */
:root { --split-w: 40%; }

.split-toggle {
  position: fixed; top: 10px; right: 14px; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(15,23,42,0.16);
  background: rgba(255,255,255,0.96); color: #334155;
  box-shadow: 0 2px 10px rgba(15,23,42,0.14);
}
.split-toggle:hover { background: #fff; color: #0f766e; }
body.split-open .split-toggle { display: none; }

.split-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--split-w); min-width: 280px; max-width: 82vw;
  z-index: 56;
  /* Hidden by default. An author `display:` rule beats the [hidden]
     attribute, so visibility is driven by the body.split-open class. */
  display: none;
  flex-direction: column;
  background: var(--surface-2, #f6f7f9);
  border-left: 1px solid rgba(15,23,42,0.16);
  box-shadow: -10px 0 28px rgba(15,23,42,0.12);
}
body.split-open .split-panel { display: flex; }
.split-panel-resizer {
  position: absolute; left: -4px; top: 0; bottom: 0; width: 9px;
  cursor: col-resize; z-index: 1;
}
.split-panel-resizer:hover { background: var(--brand-200, #b6c8ff); }
.split-panel-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line, #e3e8ee);
}
.split-panel-title { font: 600 13px var(--font-ui); color: var(--ink-900, #1a1f36); letter-spacing: -0.003em; }
.split-panel-select {
  flex: 1 1 auto; min-width: 0; margin-right: 8px;
  font: 600 12.5px var(--font-ui); color: var(--ink-900, #1a1f36);
  padding: 6px 9px; border-radius: var(--radius-md, 6px);
  border: 1px solid var(--line-strong, #c1c9d2); background: var(--surface, #fff); cursor: pointer;
}
.split-panel-select:focus { outline: none; border-color: var(--brand-300, #8aa6f6); box-shadow: var(--shadow-input-focus, 0 0 0 3px rgba(31,79,214,0.18)); }
.split-panel-close {
  flex: none;
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(15,23,42,0.14); background: #fff; color: #475569;
  font-size: 12px; line-height: 1;
}
.split-panel-close:hover { background: #fef2f2; color: #dc2626; border-color: rgba(220,38,38,0.4); }

.split-panel-body { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
.split-view { display: none; height: 100%; }
.split-view.is-active { display: block; }
/* Storage Library article — scrolls, padded. */
#split_view_docs.is-active { overflow-y: auto; padding: 14px; }
#split_view_docs .docs-hero { margin-top: 0; }
#split_view_docs .docs-section,
#split_view_docs .docs-hero { max-width: 100%; }
/* Live ETL Studio — a second app instance, fills the panel flush. */
.split-iframe { width: 100%; border: 0; }

/* Inside the embedded pane itself, hide the split toggle (no nesting). */
body.etl-embed .split-toggle { display: none !important; }

/* Make room: shrink the main app area while the panel is open. */
body.split-open .content-wrapper {
  width: calc(100% - var(--sidebar-total) - var(--split-w));
}

/* ── Activity error: node icon + full-error popup ───────────────────────
   A failed activity gets a clickable "!" badge on its node; clicking it
   opens a modal with the exact, full raw error message. */
.op-error-btn {
  margin-left: 6px;
  width: 17px; height: 17px; flex: none;
  border-radius: 50%; cursor: pointer;
  border: 0; background: #dc2626; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 17px;
  padding: 0; text-align: center;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.25);
}
.op-error-btn:hover { background: #b91c1c; }

.aem-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,0.55);
  align-items: center; justify-content: center;
  padding: 24px;
}
.aem-overlay.is-open { display: flex; }
.aem-panel {
  width: min(720px, 94vw); max-height: 80vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.4);
  overflow: hidden;
}
.aem-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #fef2f2; border-bottom: 1px solid rgba(220,38,38,0.25);
}
.aem-title { font-size: 14px; font-weight: 700; color: #b91c1c; }
.aem-close {
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(15,23,42,0.15); background: #fff; color: #475569;
  font-size: 13px; line-height: 1;
}
.aem-close:hover { background: #fee2e2; color: #dc2626; }
.aem-sub {
  padding: 12px 16px 6px; font-size: 13px; font-weight: 600; color: #7f1d1d;
  word-break: break-word;
}
.aem-raw {
  margin: 6px 16px; padding: 12px 14px;
  flex: 1 1 auto; overflow: auto;
  background: #0f172a; color: #e2e8f0;
  border-radius: 9px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.aem-foot { padding: 10px 16px 14px; display: flex; justify-content: flex-end; }
.aem-copy {
  cursor: pointer; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid rgba(15,23,42,0.18); background: #fff; color: #1f2937;
}
.aem-copy:hover { background: #f3f4f6; }

/* ════════════════════════════════════════════════════════════════════
   ETL hash router — activity nav + per-route sidebar + Warehouse view.
   ════════════════════════════════════════════════════════════════════ */

/* ── Activity nav (the sidebar's top-level section "icons") ── */
.etl-activity-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0 4px;
}
.etl-activity-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: var(--radius-chip, 8px);
  border: 1px solid var(--hairline, rgba(15,23,42,0.1));
  background: #fff; color: var(--ink-soft, rgba(15,23,42,0.6));
  font: 600 12px/1 "Space Grotesk", system-ui, sans-serif;
  cursor: pointer; transition: all .15s ease;
}
.etl-activity-nav-btn:hover {
  border-color: var(--accent, #1f4fd6);
  color: var(--accent, #1f4fd6);
}
.etl-activity-nav-btn.is-active {
  background: var(--accent, #1f4fd6); border-color: var(--accent, #1f4fd6);
  color: #fff;
}
.etl-activity-nav-btn svg { flex: none; }

/* ── Per-route sidebar scoping: each route shows only its own list ── */
[data-etl-section] { display: none; }
body[data-etl-route="dataflow"] [data-etl-section="dataflow"],
body[data-etl-route="pipeline"] [data-etl-section="pipeline"],
body[data-etl-route="notebook"] [data-etl-section="notebook"],
body[data-etl-route="notebook"] [data-etl-section="notebook-extra"],
body[data-etl-route="sql"]      [data-etl-section="sql"],
body[data-etl-route="dataflow"] [data-etl-section="flow-extra"],
body[data-etl-route="pipeline"] [data-etl-section="flow-extra"] {
  display: block;
}

/* ── Warehouse mode hides the canvas chrome ── */
body.warehouse-mode #chart_container,
body.warehouse-mode #topNav,
body.warehouse-mode #footer,
body.warehouse-mode .zoom-controls,
body.warehouse-mode #pipeline_history_panel { display: none !important; }

/* ── Warehouse workspace ── */
.whse-workspace {
  position: absolute; inset: 0; overflow: auto;
  background: var(--canvas-bg, #f3f5f9);
  padding: 28px 32px 48px;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.whse-workspace[hidden] { display: none; }
.whse-header {
  display: flex; align-items: flex-start; gap: 20px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.whse-header-text { flex: 1; min-width: 220px; }
.whse-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent, #1f4fd6);
}
.whse-title {
  margin: 4px 0 2px; font-size: 26px; font-weight: 600;
  color: var(--ink, #0f172a);
}
.whse-sub { margin: 0; font-size: 13px; color: var(--ink-soft, #64748b); }
.whse-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wh-btn-primary {
  background: var(--accent, #1f4fd6) !important;
  border-color: var(--accent, #1f4fd6) !important; color: #fff !important;
}

.whse-layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 20px;
  align-items: start;
}
@media (max-width: 720px) { .whse-layout { grid-template-columns: 1fr; } }

.whse-sidebar {
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--radius-card, 12px);
  padding: 14px; position: sticky; top: 14px;
  /* Cap the height to the viewport and allow internal scrolling.
     With 1000+ tree rows the panel used to stretch off-screen with
     no scrollbar — the bulk of the tree was simply invisible below
     the fold and there was no way to reach it. */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 96px);
  min-height: 0;
}
.whse-sidebar > .whse-folder-tree {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.whse-folder-head {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft, #64748b);
  margin-bottom: 8px;
}
/* Sidebar filter input — same chrome as the SQL editor's
   .sql-files-search-wrap so the two panes feel identical. */
.whse-folder-search-wrap { padding: 0 0 8px; }
.whse-folder-search-wrap input {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px; font-size: 12.5px;
  border: 1px solid var(--hairline, rgba(15,23,42,0.14));
  border-radius: 8px;
  font: 500 12.5px/1.2 "Space Grotesk", system-ui, sans-serif;
}
.whse-folder-search-wrap input:focus {
  outline: none; border-color: var(--accent, #1f4fd6);
}
.whse-folder-tree { display: flex; flex-direction: column; gap: 2px; }
.whse-folder-item {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border: 0; background: none; cursor: pointer;
  border-radius: 8px; text-align: left; width: 100%;
  font: 500 13px/1.2 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink, #0f172a);
}
.whse-folder-item:hover { background: var(--accent-tint, rgba(31,79,214,.08)); }
.whse-folder-item.is-active {
  background: var(--accent-tint, rgba(31,79,214,.12));
  color: var(--accent, #1f4fd6); font-weight: 600;
}
.whse-folder-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Folder-row wrapper holds the existing folder button AND a per-row
   delete button. Layout swap from a plain button → flex row keeps the
   navigation click target full-width while making room for the × on
   hover. */
.whse-folder-row-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
}
.whse-folder-row-wrapper .whse-folder-item {
  flex: 1;
  padding-right: 32px;        /* leave room for the absolute-positioned × */
}
.whse-folder-del {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft, #64748b);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.whse-folder-row-wrapper:hover .whse-folder-del { opacity: 1; }
.whse-folder-del:hover {
  background: rgba(185, 28, 28, 0.12);
  color: #b91c1c;
}

/* Collapsible folder rows — nested file/folder tree, matches the SQL
   editor's Data files tree one-to-one. */
.whse-folder-row-wrapper.whse-folder-collapsible {
  display: block;
}
.whse-folder-details { width: 100%; }
.whse-folder-summary {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; cursor: pointer; list-style: none;
  border-radius: 8px;
  font: 500 13px/1.2 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink, #0f172a);
  padding-right: 32px;          /* leave room for the absolute × */
}
.whse-folder-summary::-webkit-details-marker { display: none; }
.whse-folder-summary:hover {
  background: var(--accent-tint, rgba(31,79,214,0.08));
}
.whse-folder-summary.is-active {
  background: var(--accent-tint, rgba(31,79,214,0.12));
  color: var(--accent, #1f4fd6); font-weight: 600;
}
.whse-folder-caret {
  flex: none; width: 0; height: 0;
  border-left: 5px solid var(--ink-soft, #94a3b8);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .12s ease;
}
.whse-folder-details[open] > .whse-folder-summary .whse-folder-caret {
  transform: rotate(90deg);
}
.whse-folder-body {
  display: flex; flex-direction: column; gap: 2px;
}
/* File leaves nested inside a folder — same chrome as the folder
   rows but with a format chip on the right. */
.whse-folder-item.whse-folder-file {
  padding-right: 10px;
}
.whse-folder-file .whse-folder-fmt {
  flex: none; font-size: 10px; font-weight: 600;
  text-transform: uppercase; color: var(--ink-soft, #94a3b8);
  letter-spacing: .04em; margin-left: 4px;
}
/* Plain blob-storage tables (raw / processed) — slightly muted so the
   user knows they aren't warehouse-managed. They're visible for parity
   with the SQL editor's tree but they aren't deletable/movable from
   the warehouse tab. */
.whse-folder-file.whse-folder-file--blob {
  color: var(--ink-soft, #64748b);
  cursor: default;
}
.whse-folder-file.whse-folder-file--blob:hover {
  background: rgba(15, 23, 42, 0.04);
  color: var(--ink-soft, #64748b);
}
.whse-quota {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--hairline, rgba(15,23,42,0.08));
}
.whse-quota-label { font-size: 11px; color: var(--ink-soft, #64748b); }
.whse-quota-bar {
  margin-top: 6px; height: 6px; border-radius: 999px;
  background: rgba(15,23,42,0.08); overflow: hidden;
}
.whse-quota-fill {
  height: 100%; background: var(--accent, #1f4fd6); border-radius: 999px;
}

.whse-main {
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--radius-card, 12px);
  padding: 16px 18px 22px; min-height: 360px;
}
.whse-main.is-dragover {
  outline: 2px dashed var(--accent, #1f4fd6); outline-offset: -6px;
}
.whse-toolbar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.whse-toolbar-spacer { flex: 1; }
.whse-breadcrumb { display: flex; align-items: center; gap: 4px; }
.whse-crumb {
  border: 0; background: none; cursor: pointer; padding: 3px 5px;
  font: 600 13px "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-soft, #64748b); border-radius: 6px;
}
.whse-crumb:hover { color: var(--accent, #1f4fd6); }
.whse-crumb.is-current { color: var(--ink, #0f172a); }
.whse-crumb-sep { color: var(--ink-soft, #94a3b8); font-size: 13px; }
.whse-search {
  padding: 7px 11px; border-radius: var(--radius-control, 10px);
  border: 1px solid var(--hairline, rgba(15,23,42,0.14));
  font-size: 13px; min-width: 180px;
}

.whse-uploads { display: flex; flex-direction: column; gap: 5px; }
.whse-upload-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 11px; border-radius: 8px; font-size: 12px;
  background: var(--accent-tint, rgba(31,79,214,.08));
}
.whse-upload-row.is-done { background: rgba(4,120,87,0.1); }
.whse-upload-row.is-error { background: rgba(185,28,28,0.1); }
.whse-upload-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--ink, #0f172a);
}
.whse-upload-stat { flex: none; color: var(--ink-soft, #64748b); }

.whse-grid {
  margin-top: 12px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.whse-tile {
  position: relative; text-align: left; cursor: pointer;
  border: 1px solid var(--hairline, rgba(15,23,42,0.1));
  border-radius: var(--radius-control, 10px);
  background: #fff; padding: 14px 12px; min-height: 116px;
  font-family: inherit; transition: all .15s ease;
}
.whse-tile:hover {
  border-color: var(--accent, #1f4fd6);
  box-shadow: 0 4px 14px rgba(15,23,42,0.08);
}
.whse-tile--folder { background: var(--surface-2, #f6f9fc); }
.whse-tile-ico { font-size: 26px; line-height: 1; }
.whse-tile-name {
  margin-top: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.whse-tile-meta {
  margin-top: 3px; font-size: 11px; color: var(--ink-soft, #64748b);
}
.whse-tile-date { margin-top: 1px; }
.whse-tile-del {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 6px; border: 0;
  background: rgba(15,23,42,0.06); color: var(--ink-soft, #64748b);
  cursor: pointer; font-size: 11px; line-height: 1;
  opacity: 0; transition: opacity .15s ease;
}
.whse-tile:hover .whse-tile-del { opacity: 1; }
.whse-tile-del:hover {
  background: rgba(185,28,28,0.12); color: #b91c1c;
}

/* Multi-select checkbox in the tile's top-left corner. Mirrors the
   delete-X opacity behavior — hidden until hover OR when something is
   selected, so the grid stays clean when not in selection mode. */
.whse-tile-check {
  position: absolute; top: 8px; left: 8px;
  width: 16px; height: 16px;
  margin: 0; cursor: pointer; accent-color: var(--brand-500, #1f4fd6);
  opacity: 0; transition: opacity .15s ease;
}
.whse-tile:hover .whse-tile-check,
.whse-tile--selected .whse-tile-check { opacity: 1; }
.whse-tile--selected {
  outline: 2px solid var(--brand-500, #1f4fd6);
  outline-offset: -2px;
  background: rgba(31, 79, 214, 0.04);
}

/* Bulk-action bar above the grid. Only appears when ≥1 file is selected. */
.whse-selection-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: rgba(31, 79, 214, 0.10);
  border: 1px solid rgba(31, 79, 214, 0.25);
  border-radius: 10px;
  font: 13px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-900, #0f172a);
}
.whse-selection-bar[hidden] { display: none; }
.whse-select-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600;
  color: var(--brand-700, #1438a8);
  cursor: pointer;
  user-select: none;
}
.whse-select-all input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--brand-500, #1f4fd6);
  cursor: pointer;
}
.whse-selection-count {
  font-weight: 600;
  flex: 1;
  color: var(--brand-700, #1438a8);
}
.whse-selection-btn[disabled] {
  opacity: 0.45; cursor: not-allowed;
}
.whse-selection-btn[disabled]:hover {
  background: #fff; border-color: rgba(15, 23, 42, 0.18);
}
.whse-selection-btn {
  padding: 7px 14px;
  font: 600 12px var(--font-ui, system-ui, sans-serif);
  background: #fff;
  color: var(--ink-900, #0f172a);
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.whse-selection-btn:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.28);
}
.whse-selection-btn--danger {
  color: #b91c1c; border-color: rgba(185, 28, 28, 0.45);
}
.whse-selection-btn--danger:hover {
  background: rgba(185, 28, 28, 0.10); border-color: rgba(185, 28, 28, 0.75);
}
.whse-selection-btn--ghost {
  background: transparent; border-color: transparent;
  color: var(--ink-500, #64748b);
}
.whse-selection-btn--ghost:hover {
  background: rgba(15, 23, 42, 0.04); border-color: transparent;
}
.whse-empty {
  grid-column: 1 / -1; padding: 36px 16px; text-align: center;
  font-size: 13px; color: var(--ink-soft, #64748b);
}

/* ── Preview modal ── */
.whse-preview-modal { position: fixed; inset: 0; z-index: 4000; }
.whse-preview-modal[hidden] { display: none; }
.whse-preview-backdrop {
  position: absolute; inset: 0; background: rgba(15,23,42,0.45);
}
.whse-preview-panel {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 92vw); max-height: 86vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius-card, 12px);
  box-shadow: 0 24px 60px rgba(15,23,42,0.3); overflow: hidden;
}
.whse-preview-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--hairline, #e3e8ee);
}
.whse-preview-title {
  flex: 1; font-size: 15px; font-weight: 600;
  color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.whse-preview-close {
  border: 0; background: none; cursor: pointer; font-size: 16px;
  color: var(--ink-soft, #64748b);
}
.whse-preview-body { padding: 16px 18px; overflow: auto; }
.whse-preview-frame { width: 100%; height: 64vh; border: 0; }
.whse-preview-img { max-width: 100%; max-height: 64vh; display: block;
  margin: 0 auto; }
.whse-preview-text {
  margin: 0; font: 12px/1.5 "JetBrains Mono", ui-monospace, monospace;
  white-space: pre-wrap; word-break: break-word;
  color: var(--ink, #0f172a);
}
.whse-preview-tablewrap { overflow: auto; max-height: 64vh; }
.whse-preview-table { border-collapse: collapse; width: 100%;
  font-size: 12px; }
.whse-preview-table th, .whse-preview-table td {
  border: 1px solid var(--hairline, #e3e8ee);
  padding: 6px 9px; text-align: left; white-space: nowrap;
}
.whse-preview-table th {
  background: var(--surface-2, #f6f9fc); font-weight: 600;
  position: sticky; top: 0;
}
.whse-preview-note {
  margin-top: 8px; font-size: 11px; color: var(--ink-soft, #64748b);
}

/* ── Toast ── */
.wh-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 5000;
  background: var(--ink, #0f172a); color: #fff;
  padding: 10px 16px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.25);
  opacity: 0; transform: translateY(10px);
  transition: all .25s ease;
}
.wh-toast.is-in { opacity: 1; transform: translateY(0); }
.wh-toast--error { background: #b91c1c; }

/* ════════════════════════════════════════════════════════════════════
   ETL shell — icon rail replaces the old Activities sidebar chrome.
   The sidebar is now [ icon rail | per-route list panel ]. The old
   header (Activities / Hide / Collapse All / search) is gone.
   ════════════════════════════════════════════════════════════════════ */

/* The sidebar is the icon rail and nothing else. */
body { --sidebar-width: 386px; --sidebar-gap: 0px; --sidebar-total: 386px; }
body.no-filesidebar { --sidebar-width: 96px; --sidebar-total: 96px; }

/* ════════════ Persistent file-loading sidebar (etl-studio prototype) ════════════
   The rail (96px) + a 290px Workspace panel with collapsible
   Dataflows / Pipelines / Notebooks / SQL sections. */
.sidebar.sidebar-v2 .etl-rail { width: 96px; flex: none; border-right: 1px solid var(--line); }
.etl-file-sidebar {
  width: 290px; flex: none; height: 100%;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-2); border-right: 1px solid var(--line);
}
body.no-filesidebar .etl-file-sidebar { display: none; }
.efs-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); flex: none; }
.efs-head h3 { margin: 0 0 2px; font: 600 15px var(--font-ui); color: var(--ink-900); letter-spacing: -0.005em; }
.efs-head p { margin: 0 0 10px; font: 400 11.5px var(--font-ui); color: var(--ink-500); }
.efs-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.efs-search svg { width: 14px; height: 14px; color: var(--ink-500); flex: none; }
.efs-search input { border: 0; background: none; outline: none; width: 100%; font: 400 12.5px var(--font-ui); color: var(--ink-900); }
.efs-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px;
  /* thin styled scrollbar (Firefox + WebKit) */
  scrollbar-width: thin; scrollbar-color: var(--ink-300, #c1ccd6) transparent; }
.efs-scroll::-webkit-scrollbar { width: 8px; }
.efs-scroll::-webkit-scrollbar-track { background: transparent; }
.efs-scroll::-webkit-scrollbar-thumb { background: var(--ink-300, #c1ccd6); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box; }
.efs-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-500, #6b7c93); background-clip: content-box; }
/* Sections must keep their natural height — without flex:none the column
   flex shrinks them to fit, and .efs-section's overflow:hidden then clips
   the item lists (the "cut off" bug) instead of letting .efs-scroll scroll. */
.efs-section { flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.efs-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; cursor: pointer; user-select: none; }
.efs-sec-head:hover { background: var(--surface-3); }
.efs-sec-label { display: flex; align-items: center; gap: 7px; font: 700 10.5px var(--font-ui); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-700); }
.efs-chev { display: inline-block; transition: transform 140ms var(--ease); font-size: 10px; color: var(--ink-500); }
.efs-section.is-open .efs-chev { transform: rotate(90deg); }
.efs-sec-right { display: inline-flex; align-items: center; gap: 7px; }
.efs-count { min-width: 18px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-4); color: var(--ink-500); border-radius: 999px; font: 600 10.5px var(--font-mono); }
.efs-new { border: 1px solid rgba(31,79,214,0.16); background: rgba(31,79,214,0.06); color: var(--brand-500);
  border-radius: var(--radius-sm); padding: 3px 8px; font: 600 11px var(--font-ui); cursor: pointer; }
.efs-new:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-600); }
.efs-drawer { padding: 0 6px 6px; display: none; flex-direction: column; gap: 2px; }
.efs-section.is-open .efs-drawer { display: flex; }
.efs-tile { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--radius-md);
  background: none; cursor: pointer; text-align: left; width: 100%; transition: background 120ms var(--ease), border-color 120ms var(--ease); }
.efs-tile:hover { background: var(--surface-2); border-color: var(--line); }
.efs-tile.is-active { background: var(--brand-50); border-color: var(--brand-200); }
.efs-tile.is-active .efs-tile-label { color: var(--brand-700); }
.efs-tile svg { width: 16px; height: 16px; color: var(--ink-500); flex: none; }
.efs-tile-label { flex: 1 1 auto; min-width: 0; font: 600 12.5px var(--font-ui); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efs-tile-meta { font: 400 10.5px var(--font-mono); color: var(--ink-500); flex: none; }
.efs-empty { padding: 6px 9px 8px; font: 400 11.5px var(--font-ui); color: var(--ink-300); }
/* Collapse / reopen arrows for the Workspace sidebar */
.efs-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.efs-collapse {
  /* Centered edge handle on the OPEN sidebar's right border, mirroring the
     reopen arrow on the left edge. */
  position: fixed; top: 50%; left: calc(var(--sidebar-total) - 13px); transform: translateY(-50%);
  z-index: 1001;
  width: 26px; height: 26px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1); color: var(--ink-700); cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease), left 0.25s ease;
}
.efs-collapse:hover { background: var(--surface-3); color: var(--brand-600); border-color: var(--brand-300); }
body.no-filesidebar .efs-collapse { display: none; }
.efs-reopen {
  position: fixed; top: 50%; left: 104px; transform: translateY(-50%); z-index: 1001;
  width: 26px; height: 26px; display: none;
  align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-1);
  color: var(--ink-700); cursor: pointer;
}
.efs-reopen:hover { color: var(--brand-600); border-color: var(--brand-300); }
body.no-filesidebar .efs-reopen { display: inline-flex; }

/* ════════════ Canvas: activity nodes + links match etl-studio ════════════ */
/* Node title bar → clean white header with a category eyebrow above the
   name (SOURCE / TRANSFORM / SINK / CONTROL), like the prototype. */
.flowchart-operator .flowchart-operator-title {
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line, #e3e8ee);
  color: var(--ink-900, #1a1f36);
  padding: 9px 13px 9px;
}
.flowchart-operator:not(.for-loop-tile) .flowchart-operator-title::before {
  display: block; content: "ACTIVITY";
  font: 700 9px var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-500, #6b7c93); margin-bottom: 3px;
}
.flowchart-operator.op-cat-source:not(.for-loop-tile)    .flowchart-operator-title::before { content: "SOURCE";    color: var(--brand-500, #1f4fd6); }
.flowchart-operator.op-cat-transform:not(.for-loop-tile) .flowchart-operator-title::before { content: "TRANSFORM"; color: #425466; }
.flowchart-operator.op-cat-sink:not(.for-loop-tile)      .flowchart-operator-title::before { content: "SINK";      color: var(--success, #047857); }
.flowchart-operator.op-cat-control:not(.for-loop-tile)   .flowchart-operator-title::before { content: "CONTROL";   color: var(--warn, #b45309); }
/* Left accent bar tinted per activity (etl-studio DF_KINDS palette).
   jquery.flowchart.css loads after home.css and resets `border: 1px`, so the
   3px width is declared on the op-cat selectors (specificity 0,2,0 > 0,1,0)
   to win it back. Colour follows category; selection still highlights blue. */
.flowchart-operator { border-left: 3px solid var(--line, #e3e8ee); }
.flowchart-operator.op-cat-source,
.flowchart-operator.op-cat-transform,
.flowchart-operator.op-cat-sink,
.flowchart-operator.op-cat-control   { border-left-width: 3px; }
.flowchart-operator.op-cat-source    { border-left-color: var(--brand-500, #1f4fd6); }
.flowchart-operator.op-cat-transform { border-left-color: #425466; }
.flowchart-operator.op-cat-sink      { border-left-color: var(--success, #047857); }
.flowchart-operator.op-cat-control   { border-left-color: var(--warn, #b45309); }

/* Node icon box (etl-studio): category-tinted square left of the title. */
.flowchart-operator-icon {
  position: absolute;
  top: 10px; left: 11px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm, 6px);
  pointer-events: none;
  z-index: 1;
}
.flowchart-operator-icon svg { width: 15px; height: 15px; }
.op-icon-source    { background: rgba(31, 79, 214, 0.10); color: #1f4fd6; }
.op-icon-transform { background: rgba(66, 84, 102, 0.10); color: #425466; }
.op-icon-sink      { background: rgba(4, 120, 87, 0.10);  color: #047857; }
.op-icon-control   { background: rgba(180, 83, 9, 0.10);  color: #b45309; }
/* make room for the icon in the title row */
.flowchart-operator.op-cat-source    .flowchart-operator-title,
.flowchart-operator.op-cat-transform .flowchart-operator-title,
.flowchart-operator.op-cat-sink      .flowchart-operator-title,
.flowchart-operator.op-cat-control   .flowchart-operator-title { padding-left: 48px; }

/* Dark mode: the transform slate (#425466) is too dark on the dark card —
   lift it to a lighter slate for the eyebrow, left edge, connector nub and
   icon so transform nodes stay legible. (Source/sink/control use brand/
   green/amber, which read fine on dark.) */
html[data-theme="dark"] .flowchart-operator.op-cat-transform .flowchart-operator-title::before,
html[data-theme="dark"] .op-icon-transform { color: #93a4b8; }
html[data-theme="dark"] .flowchart-operator.op-cat-transform { border-left-color: #93a4b8; }
html[data-theme="dark"] .op-icon-transform { background: rgba(147, 164, 184, 0.16); }
html[data-theme="dark"] .flowchart-operator.op-cat-transform .flowchart-operator-connector-arrow {
  border-left-color: #93a4b8;
}
/* Links → clean, light bezier curves (drop the heavy stacked shadow) */
.flowchart-link path { filter: none; }
@media (max-width: 1100px) { body:not(.no-filesidebar) { --sidebar-width: 386px; } }

/* The rail fills the sidebar corner to corner — the old .sidebar rule
   adds 12px padding all round, which both inset the rail (blank gap)
   and shrank its usable width below the buttons. Zero it out here. */
.sidebar.sidebar-v2 {
  flex-direction: row; gap: 0; overflow: hidden;
  padding: 0 !important;
}
.sidebar-header, .sidebar-toggle--floating { display: none !important; }
.etl-activity-nav { display: none !important; }

/* ── Icon rail — one button per ETL section, full height ── */
.etl-rail {
  width: 100%; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 14px 8px 12px;
  background: var(--surface, #fff);
  border-right: 1px solid var(--line, #e3e8ee);
  overflow-y: auto;
}
.etl-rail-spacer { flex: 1 1 auto; min-height: 14px; }
/* Re-skinned to match the etl-studio design: sleek light-blue active
   pill (not a solid blue button), tighter spacing, 20px icons. */
.etl-rail-btn {
  width: 100%; max-width: 72px;
  padding: 8px 4px; border: 1px solid transparent; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: var(--radius-md, 6px); cursor: pointer;
  color: var(--ink-500, #6b7c93);
  font: 500 10.5px/1.2 var(--font-ui, "Space Grotesk", system-ui, sans-serif);
  letter-spacing: .005em;
  transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
}
.etl-rail-btn svg { width: 20px; height: 20px; flex: none; }
.etl-rail-btn:hover {
  background: var(--surface-3, #fafbfc);
  color: var(--ink-900, #1a1f36);
}
.etl-rail-btn.is-active {
  background: var(--brand-50, #eef2ff); color: var(--brand-500, #1f4fd6);
  border-color: var(--brand-200, #b6c8ff); font-weight: 600;
}

/* The old expanding side panel is gone entirely. */
.sidebar-scroll { display: none !important; }

/* ── "Saved" tab — a clean, spacious, route-specific list. Dataflows
   and Pipelines are separate; each route shows only its own kind. ── */
.etl-saved-tab { padding: 18px 20px; overflow-y: auto; }
.etl-saved-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.etl-saved-title {
  margin: 0; font: 600 19px "Space Grotesk", system-ui, sans-serif;
  color: var(--ink, #0f172a); letter-spacing: -0.01em;
}
.etl-saved-new {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--brand-700, #102b85);
  border-radius: var(--radius-control, 6px); cursor: pointer;
  background: linear-gradient(180deg, #2858e0 0%, #1f4fd6 100%); color: #fff;
  font: 600 13px "Space Grotesk", system-ui, sans-serif;
  box-shadow: var(--shadow-1);
  transition: background .15s ease, transform .1s ease;
}
.etl-saved-new:hover { background: var(--accent-strong, #1438a8); }
.etl-saved-new:active { transform: scale(0.97); }
.etl-saved-new span { font-size: 17px; font-weight: 700; line-height: 1; }
.etl-saved-list {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.etl-saved-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; cursor: pointer; text-align: left; width: 100%;
  border: 1px solid var(--line, #e3e8ee);
  border-radius: var(--radius-card, 8px); background: var(--surface, #fff);
  box-shadow: var(--shadow-1);
  font-family: "Space Grotesk", system-ui, sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease,
              transform .1s ease;
}
.etl-saved-card:hover {
  border-color: var(--brand-300, #8aa6f6);
  box-shadow: var(--shadow-2);
}
.etl-saved-card:active { transform: scale(0.99); }
.etl-saved-card-icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-md, 6px);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50, #eef2ff); color: var(--brand-500, #1f4fd6); font-size: 20px;
}
.etl-saved-card-text {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.etl-saved-card-name {
  font-size: 15px; font-weight: 600; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.etl-saved-card-sub { font-size: 12px; color: var(--ink-soft, #64748b); }
.etl-saved-card-open {
  flex: none; font-size: 12.5px; font-weight: 600;
  color: var(--accent, #1f4fd6);
  opacity: 0; transition: opacity .15s ease;
}
.etl-saved-card:hover .etl-saved-card-open { opacity: 1; }
.etl-saved-empty {
  grid-column: 1 / -1; padding: 40px 20px; text-align: center;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft, #64748b);
}

/* ── Motion polish: gentle hover-lift for a smoother, premium feel
   (additive — pairs with existing border/shadow hover states). ── */
.home-card, .etl-saved-card {
  transition: transform 140ms var(--ease, ease),
              box-shadow 140ms var(--ease, ease),
              border-color 140ms var(--ease, ease);
}
.home-card:hover, .etl-saved-card:hover { transform: translateY(-2px); }
.home-card:active, .etl-saved-card:active { transform: translateY(0) scale(0.995); }

/* ════════════════ DARK MODE ════════════════
   Theme override — re-points the design tokens to dark values. Most of
   the app is tokenized, so this flips surfaces/text/lines globally.
   Toggled by setting data-theme="dark" on <html> (see home.html). */
html[data-theme="dark"] {
  --surface:    #121821;   /* cards / panels */
  --surface-2:  #0c111a;   /* workspace background */
  --surface-3:  #1a212c;   /* hover surfaces */
  --surface-4:  #222b38;
  --ink-900: #e8edf4;      /* headings / primary text */
  --ink-700: #c2cdda;      /* body */
  --ink-500: #8d9aac;      /* muted */
  --ink-300: #5e6b7b;      /* placeholders */
  --ink:      #e8edf4;
  --ink-soft: rgba(232, 237, 244, 0.62);
  --line:        #283243;
  --line-strong: #3a4658;
  --line-soft:   rgba(255, 255, 255, 0.05);
  --hairline:        rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.15);
  --brand-50:  rgba(56, 110, 232, 0.18);   /* active pill / tint on dark */
  --brand-100: rgba(56, 110, 232, 0.26);
  --brand-200: #34508f;
  --accent-tint:        rgba(56, 110, 232, 0.22);
  --accent-tint-strong: rgba(56, 110, 232, 0.34);
  --canvas-bg: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0) 0 0 / 22px 22px, #0c111a;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 4px 10px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 28px rgba(0,0,0,0.55);
  color-scheme: dark;
}
/* nudge a few common hardcoded-white surfaces in dark mode */
html[data-theme="dark"] body { background: var(--surface-2); }
html[data-theme="dark"] .etl-rail,
html[data-theme="dark"] .top-nav { background: var(--surface); }

/* Theme toggle button in the rail footer */
.etl-rail-theme {
  width: 100%; max-width: 72px; margin-bottom: 2px;
  padding: 8px 4px; border: 1px solid transparent; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: var(--radius-md, 6px); cursor: pointer;
  color: var(--ink-500, #6b7c93);
  font: 500 10.5px/1.2 var(--font-ui, "Space Grotesk", system-ui, sans-serif);
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.etl-rail-theme:hover { background: var(--surface-3); color: var(--ink-900); }

/* ── Richer motion: gentle entrance for card grids on screen mount ── */
@keyframes etl-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.home-cards, .home-card-grid, .etl-saved-list {
  animation: etl-fade-up 0.32s var(--ease, cubic-bezier(0.2,0.8,0.2,1)) both;
}
@media (prefers-reduced-motion: reduce) {
  .home-cards, .home-card-grid, .etl-saved-list,
  .home-card, .etl-saved-card { animation: none !important; transition: none !important; }
}

/* ── Split-screen toggle, relocated into the top bar ── */
#topNav .split-toggle {
  position: static; inset: auto; margin: 0;
  /* Far left of the bar so it never sits right of Run Flow (the prototype's
     far-right primary action). */
  order: -1;
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer; box-shadow: none;
  border: 1px solid var(--hairline, rgba(15,23,42,0.14));
  background: #fff; color: var(--ink-soft, #64748b);
}
#topNav .split-toggle:hover {
  border-color: var(--accent, #1f4fd6); color: var(--accent, #1f4fd6);
}

/* ════════════════════════════════════════════════════════════════════
   Top bar — a fixed full-width bar mirroring the justgotalead
   /dashboard topbar. Replaces the old hover-expand popup nav.
   ════════════════════════════════════════════════════════════════════ */
:root { --etl-topbar-h: 56px; }

#topNav.top-nav {
  position: absolute; top: 0; left: 0; right: 0;
  width: 100%; box-sizing: border-box; transform: none;
  z-index: 30; display: flex;
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 24px;
  min-height: var(--etl-topbar-h); max-height: none; overflow: visible;
  cursor: default;
  background: var(--surface, #fff);
  border: 0; border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.1));
  border-radius: 0; box-shadow: 0 1px 2px rgba(15,23,42,0.05);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#topNav .top-nav-grip { display: none !important; }
#topNav .top-nav-inner {
  opacity: 1 !important; transform: none !important;
  padding-top: 0; gap: 12px; flex: none;
}
.etl-topbar-title {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font: 600 18px/1.2 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink, #0f172a); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Views begin below the bar so their content never tucks under it. */
.home-workspace, .settings-workspace, .docs-workspace {
  padding-top: calc(var(--etl-topbar-h) + 14px);
}

/* The notebook keeps its own toolbar as its top bar — hide the global topbar
   whenever a notebook is showing so the "Dataflow" header never sits over it.
   Keyed on BOTH the route and body.notebook-mode (the class showNotebookView
   always sets), so opening a notebook from the sidebar while the route is
   still "dataflow" still hides the global bar. */
body[data-etl-route="notebook"] #topNav,
body.notebook-mode #topNav { display: none !important; }

/* ── SQL route placeholder — sql_ui.js / sql.css aren't bundled on
   this branch, so the route shows a clean notice, not a raw shell. ── */
body.sql-mode #chart_container,
body.sql-mode #footer,
body.sql-mode .zoom-controls { display: none !important; }
.etl-placeholder {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  padding: 40px; background: var(--canvas-bg, #f3f5f9);
}
.etl-placeholder[hidden] { display: none; }
.etl-placeholder-card {
  max-width: 440px; text-align: center;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.1));
  border-radius: var(--radius-card, 12px);
  padding: 36px 32px; box-shadow: 0 8px 28px rgba(15,23,42,0.08);
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.etl-placeholder-icon { font-size: 34px; }
.etl-placeholder-card h2 {
  margin: 12px 0 8px; font-size: 19px; color: var(--ink, #0f172a);
}
.etl-placeholder-card p {
  margin: 0; font-size: 13.5px; line-height: 1.6;
  color: var(--ink-soft, #64748b);
}

/* ── Load dropdown (notebook "Load" button) ── */
.etl-load-menu {
  position: fixed; z-index: 6000; min-width: 220px; max-height: 340px;
  overflow-y: auto; padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.14));
  border-radius: 12px; box-shadow: 0 14px 36px rgba(15,23,42,0.18);
}
.etl-load-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: none; cursor: pointer;
  border-radius: 8px; font: 500 13px "Space Grotesk", system-ui, sans-serif;
  color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.etl-load-item:hover { background: var(--accent-tint, rgba(31,79,214,.1)); }
.etl-load-empty {
  padding: 14px 10px; font-size: 12.5px; color: var(--ink-soft, #64748b);
}

/* ── Loading splash ── */
/* Splash — matches the etl-studio prototype: a centered card with logo,
   animated bar, and caption on a flat surface. */
.etl-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, #f6f9fc);
  font-family: "Space Grotesk", system-ui, sans-serif;
  transition: opacity .35s ease;
}
.etl-splash.is-hiding { opacity: 0; pointer-events: none; }
.etl-splash[hidden] { display: none; }
.etl-splash-inner {
  width: 320px; text-align: center;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e3e8ee);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-3);
  padding: 28px 36px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.etl-splash-logo {
  display: flex; align-items: center; gap: 9px;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-900, #1a1f36); margin: 0;
}
.etl-splash-logo::before {
  content: ""; width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: linear-gradient(135deg, var(--brand-500, #1f4fd6), var(--brand-700, #102b85));
}
.etl-splash-bar {
  width: 100%; height: 4px; border-radius: 999px; overflow: hidden;
  background: var(--surface-4, #edf1f7);
}
.etl-splash-bar-fill {
  height: 100%; width: 38%; border-radius: 999px;
  background: var(--brand-500, #1f4fd6);
  animation: etl-splash-slide 1.3s var(--ease, ease-in-out) infinite;
}
@keyframes etl-splash-slide {
  0%   { margin-left: -45%; }
  100% { margin-left: 100%; }
}
.etl-splash-text {
  margin: 0; font-size: 12.5px; color: var(--ink-500, #6b7c93);
}

/* ════════════════════════════════════════════════════════════════════
   Dashboards + pinned library (#dashboard)
   ════════════════════════════════════════════════════════════════════ */
body.dashboard-mode #chart_container,
body.dashboard-mode #topNav,
body.dashboard-mode #footer,
body.dashboard-mode .zoom-controls { display: none !important; }

.dbx-workspace {
  position: absolute; inset: 0; overflow: auto;
  background: var(--canvas-bg, #f3f5f9);
  padding: 26px 30px 48px;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.dbx-workspace[hidden] { display: none; }
.dbx-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.dbx-head-left { display: flex; align-items: center; gap: 12px; }
.dbx-head-actions { display: flex; gap: 8px; }
.dbx-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent, #1f4fd6);
}
.dbx-title {
  margin: 4px 0 0; font-size: 25px; font-weight: 600;
  color: var(--ink, #0f172a);
}
.dbx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--hairline, rgba(15,23,42,0.14));
  background: #fff; color: var(--ink, #0f172a);
  font: 600 13px "Space Grotesk", system-ui, sans-serif;
  transition: border-color .15s ease, background .15s ease;
}
.dbx-btn:hover {
  border-color: var(--accent, #1f4fd6); color: var(--accent, #1f4fd6);
}
.dbx-btn-primary {
  background: var(--accent, #1f4fd6); color: #fff;
  border-color: var(--accent, #1f4fd6);
  box-shadow: 0 2px 8px rgba(31,79,214,0.3);
}
.dbx-btn-primary:hover {
  background: var(--accent-strong, #1438a8); color: #fff;
  border-color: var(--accent-strong, #1438a8);
}
.dbx-name {
  padding: 8px 11px; font-size: 17px; font-weight: 600;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--ink, #0f172a); min-width: 220px;
}
.dbx-name:hover { border-color: var(--hairline, rgba(15,23,42,0.14)); }
.dbx-name:focus {
  outline: none; background: #fff; border-color: var(--accent, #1f4fd6);
}
.dbx-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft, #64748b);
  margin: 22px 0 10px;
}
.dbx-cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.dbx-card {
  position: relative; cursor: pointer; text-align: left;
  border: 1px solid var(--hairline, rgba(15,23,42,0.1));
  border-radius: 14px; background: #fff; padding: 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dbx-card:hover {
  border-color: var(--accent, #1f4fd6);
  box-shadow: 0 6px 18px rgba(15,23,42,0.1);
}
.dbx-card-ico {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint, rgba(31,79,214,0.1)); font-size: 20px;
  color: var(--accent, #1f4fd6);
}
.dbx-card-ico svg { width: 20px; height: 20px; }
.dbx-card-name {
  margin-top: 10px; font-size: 14.5px; font-weight: 600;
  color: var(--ink, #0f172a);
}
.dbx-card-meta {
  margin-top: 2px; font-size: 12px; color: var(--ink-soft, #64748b);
}
.dbx-card-del, .dbx-pin-del {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: rgba(15,23,42,0.06); color: var(--ink-soft, #64748b);
  cursor: pointer; font-size: 11px; opacity: 0;
  transition: opacity .15s ease;
}
.dbx-card:hover .dbx-card-del, .dbx-pin:hover .dbx-pin-del { opacity: 1; }
.dbx-card-del:hover, .dbx-pin-del:hover {
  background: rgba(185,28,28,0.12); color: #b91c1c;
}
.dbx-pins { display: flex; flex-direction: column; gap: 6px; }
.dbx-pin {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px; background: #fff;
  border: 1px solid var(--hairline, rgba(15,23,42,0.1));
}
.dbx-pin-name {
  flex: 1 1 auto; font-size: 13.5px; font-weight: 600;
  color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dbx-pin-type {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  color: var(--ink-soft, #94a3b8);
  background: var(--surface-3, #f6f9fc); padding: 3px 8px;
  border-radius: 999px; margin-right: 22px;
}
.dbx-empty {
  grid-column: 1 / -1; padding: 30px 16px; text-align: center;
  font-size: 13px; color: var(--ink-soft, #64748b);
}
.dbx-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.dbx-tile {
  border: 1px solid var(--hairline, rgba(15,23,42,0.1));
  border-radius: 14px; background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
}
.dbx-tile-wide { grid-column: span 2; }
.dbx-tile-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px; cursor: grab;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.08));
}
.dbx-tile-title {
  font-size: 13px; font-weight: 600; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dbx-tile-tools { display: flex; gap: 4px; flex: none; }
.dbx-tile-w, .dbx-tile-x {
  width: 24px; height: 24px; border: 0; border-radius: 6px;
  background: rgba(15,23,42,0.05); color: var(--ink-soft, #64748b);
  cursor: pointer; font-size: 12px;
}
.dbx-tile-w:hover {
  background: var(--accent-tint, rgba(31,79,214,0.12));
  color: var(--accent, #1f4fd6);
}
.dbx-tile-x:hover { background: rgba(185,28,28,0.12); color: #b91c1c; }
.dbx-tile-body {
  height: 240px; position: relative; padding: 12px; box-sizing: border-box;
}
.dbx-tile-msg {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 12.5px; color: var(--ink-soft, #64748b);
  text-align: center;
}
.dbx-tile-err { color: #b91c1c; }
.dbx-tile-tablewrap { height: 100%; overflow: auto; }
.dbx-tile-table {
  border-collapse: collapse; width: 100%; font-size: 11.5px;
}
.dbx-tile-table th, .dbx-tile-table td {
  border: 1px solid var(--hairline, rgba(15,23,42,0.1));
  padding: 4px 8px; text-align: left; white-space: nowrap;
}
.dbx-tile-table th {
  background: var(--surface-3, #f6f9fc); position: sticky; top: 0;
  font-weight: 600;
}
.dbx-picker {
  position: fixed; z-index: 6000; width: 280px; max-height: 340px;
  overflow-y: auto; padding: 6px; background: #fff; border-radius: 12px;
  border: 1px solid var(--hairline, rgba(15,23,42,0.14));
  box-shadow: 0 14px 36px rgba(15,23,42,0.18);
}
.dbx-picker-head {
  padding: 8px 10px 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft, #94a3b8);
}
.dbx-picker-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border: 0; background: none; cursor: pointer;
  border-radius: 8px; text-align: left;
  font: 500 13px "Space Grotesk", system-ui, sans-serif;
  color: var(--ink, #0f172a);
}
.dbx-picker-item:hover {
  background: var(--accent-tint, rgba(31,79,214,0.1));
}
.dbx-picker-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sql-results-pin {
  border: 1px solid var(--hairline, rgba(15,23,42,0.16));
  background: #fff; color: var(--ink, #0f172a); cursor: pointer;
  padding: 5px 12px; border-radius: 8px; font-size: 11.5px;
  font-weight: 600;
}
.sql-results-pin:hover {
  border-color: var(--accent, #1f4fd6); color: var(--accent, #1f4fd6);
}

/* ── Dashboard tile — drag grip, viz button, viz editor popover ── */
.dbx-tile-title { flex: 1 1 auto; min-width: 0; }
.dbx-tile-grip {
  flex: none; cursor: grab; user-select: none; touch-action: none;
  color: var(--ink-soft, #94a3b8); font-size: 13px; padding: 0 2px;
}
.dbx-tile-head button { cursor: pointer; }
.dbx-tile-viz {
  width: 24px; height: 24px; border: 0; border-radius: 6px;
  background: rgba(15,23,42,0.05); color: var(--ink-soft, #64748b);
  cursor: pointer; font-size: 12px;
}
.dbx-tile-viz:hover {
  background: var(--accent-tint, rgba(31,79,214,0.12));
}
.dbx-tile.is-dragging {
  position: fixed; z-index: 6000; margin: 0;
  pointer-events: none; opacity: 0.95;
  outline: 2px solid var(--accent, #1f4fd6);
  box-shadow: 0 18px 44px rgba(15,23,42,0.32);
}
body.dbx-dragging { cursor: grabbing; user-select: none; }
body.dbx-dragging .dbx-tile-head,
body.dbx-dragging .dbx-tile-grip { cursor: grabbing; }

/* draggable tile resize */
.dbx-tile { position: relative; }
.dbx-tile-head { touch-action: none; }
.dbx-tile-resize {
  position: absolute; right: 0; bottom: 0;
  width: 20px; height: 20px; cursor: nwse-resize;
  touch-action: none; z-index: 3;
  background: linear-gradient(135deg, transparent 45%,
    rgba(15,23,42,0.28) 45%, rgba(15,23,42,0.28) 60%, transparent 60%);
}
.dbx-tile-resize:hover {
  background: linear-gradient(135deg, transparent 45%,
    var(--accent, #1f4fd6) 45%, var(--accent, #1f4fd6) 60%,
    transparent 60%);
}
.dbx-tile.is-resizing {
  outline: 2px solid var(--accent, #1f4fd6);
  z-index: 4;
}
.dbx-viz-pop {
  position: fixed; z-index: 6500; width: 230px;
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px; background: #fff; border-radius: 12px;
  border: 1px solid var(--hairline, rgba(15,23,42,0.14));
  box-shadow: 0 14px 36px rgba(15,23,42,0.2);
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.dbx-viz-pop label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft, #94a3b8);
}
.dbx-viz-pop select {
  padding: 6px 8px; border-radius: 7px; font-size: 12.5px;
  border: 1px solid var(--hairline, rgba(15,23,42,0.16));
  color: var(--ink, #0f172a);
  font-family: "Space Grotesk", system-ui, sans-serif;
}

/* Pipeline / dataflow canvas "Run on" Spark-session picker */
.flow-session-pick {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 8px;
}
.flow-session-lbl {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: #94a3b8;
}
.flow-session-pick select {
  padding: 5px 8px; border-radius: 7px; font-size: 12px;
  border: 1px solid rgba(15,23,42,0.18); background: #fff; color: #0f172a;
  font-family: "Space Grotesk", system-ui, sans-serif;
}

/* Flow parameters — button + modal */
.flow-params-btn {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(15,23,42,0.18); background: #fff;
  color: #334155; font: 600 12.5px "Space Grotesk", system-ui, sans-serif;
  margin-right: 6px;
}
.flow-params-btn:hover { background: #f4f6fb; }
.flowp-overlay {
  position: fixed; inset: 0; z-index: 7400;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; background: rgba(15,23,42,0.44);
}
.flowp-card {
  width: min(540px, 93vw); display: flex; flex-direction: column;
  gap: 13px; padding: 22px; background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.32);
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.flowp-title { font-size: 18px; font-weight: 700; color: #0f172a; }
.flowp-help { font-size: 12.5px; line-height: 1.55; color: #64748b; }
.flowp-help code {
  background: rgba(31,79,214,0.1); color: #1f4fd6;
  padding: 1px 5px; border-radius: 5px; font-size: 11.5px;
}
.flowp-rows { display: flex; flex-direction: column; gap: 7px; }
.flowp-row { display: flex; align-items: center; gap: 7px; }
.flowp-eq { color: #94a3b8; font-weight: 700; }
.flowp-row input {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px;
  border: 1px solid rgba(15,23,42,0.18); border-radius: 8px;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.flowp-row input:focus {
  outline: none; border-color: #1f4fd6;
  box-shadow: 0 0 0 3px rgba(31,79,214,0.14);
}
.flowp-del {
  flex: none; width: 28px; height: 28px; border-radius: 7px;
  border: 0; background: #fdecec; color: #b4232a; cursor: pointer;
  font-size: 15px;
}
.flowp-add {
  align-self: flex-start; border: 1px dashed rgba(15,23,42,0.25);
  background: none; border-radius: 8px; padding: 7px 12px;
  cursor: pointer; font: 600 12.5px "Space Grotesk", system-ui, sans-serif;
  color: #1f4fd6;
}
.flowp-actions {
  display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px;
}
.flowp-btn {
  padding: 9px 16px; border-radius: 9px; cursor: pointer;
  font: 600 13px "Space Grotesk", system-ui, sans-serif;
  border: 1px solid rgba(15,23,42,0.18); background: #fff; color: #0f172a;
}
.flowp-btn-primary {
  background: #1f4fd6; border-color: transparent; color: #fff;
}

/* Free-positioning dashboard canvas — tiles move/resize anywhere */
.dbx-grid-free { display: block; position: relative; gap: 0; }
.dbx-grid-free .dbx-tile { position: absolute; margin: 0; }
.dbx-grid-free .dbx-tile.is-dragging {
  position: absolute; z-index: 60; opacity: 0.96; cursor: grabbing;
  box-shadow: 0 18px 44px rgba(15,23,42,0.32);
  outline: 2px solid var(--accent, #1f4fd6);
}
.dbx-grid-free .dbx-tile.is-resizing {
  z-index: 60; outline: 2px solid var(--accent, #1f4fd6);
}

/* Flow parameters belong to dataflows and pipelines ONLY — never the
   SQL workspace (or notebook / warehouse / dashboard / settings). */
/* Top-bar "Parameters" button — fully removed per user request. The
   per-Dataflow-activity Parameters field (see dataflow.js
   _build_params_field) replaces it: parameters now live on the
   specific dataflow step that consumes them, so two dataflow
   activities in the same pipeline can pass different values to the
   same underlying dataflow blob without colliding on a single
   global modal. The button stays in the DOM and its modal code path
   stays intact for back-compat with any saved bookmarks / external
   triggers that may still invoke openFlowParams() — but the user
   never sees it. */
/* Parameters button is shown again to match the etl-studio prototype top bar
   (Collaborate · Shared engine · Parameters · Trigger · Run Flow). openFlowParams
   is still wired, so the button is functional. */
#flow_params_btn { display: inline-flex !important; }

/* ===================================================================
   Per-Dataflow-activity parameters field (dataflow.js).
   =================================================================== */
.df-params-field {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line, rgba(15, 23, 42, 0.10));
  display: flex; flex-direction: column;
  gap: 8px;
}
.df-params-hint {
  font-size: 11.5px;
  color: var(--ink-soft, #64748b);
  line-height: 1.45;
}
.df-params-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  padding: 1px 5px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 4px;
  color: var(--ink-900, #0f172a);
}
.df-params-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 24px;
}
.df-params-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31, 79, 214, 0.30);
  background: var(--brand-50, #eef2ff);
  color: var(--brand-700, #1438a8);
  font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}
.df-params-chip:hover {
  background: var(--brand-100, #dbe4ff);
}
.df-params-chip--copied {
  background: #dcfce7;
  border-color: rgba(22, 101, 52, 0.35);
  color: #166534;
  transform: scale(1.04);
}
.df-params-chip--copied::after {
  content: " ✓ copied";
  margin-left: 4px;
  font-weight: 700;
}
.df-params-rows {
  display: flex; flex-direction: column;
  gap: 6px;
}
.df-params-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) auto minmax(160px, 1fr) 28px;
  align-items: center;
  gap: 6px;
}
.df-params-row .df-params-name,
.df-params-row .df-params-value {
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.df-params-row .df-params-name:focus,
.df-params-row .df-params-value:focus {
  outline: none;
  border-color: var(--brand-500, #1f4fd6);
  box-shadow: 0 0 0 3px rgba(31, 79, 214, 0.10);
}
.df-params-eq {
  font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-soft, #64748b);
  text-align: center;
}
.df-params-row .df-params-del {
  height: 26px; width: 26px; padding: 0;
  border-radius: 999px;
  font-size: 13px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  color: var(--ink-500, #475569);
}
.df-params-row .df-params-del:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.df-params-add {
  align-self: flex-start;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--brand-50, #eef2ff);
  color: var(--brand-500, #1f4fd6);
  border: 1px solid rgba(31, 79, 214, 0.30);
}

/* ===================================================================
   Param autocomplete popup — triggered by typing "{" in any text input
   inside an activity settings panel. Anchors below the input.
   =================================================================== */
.param-autocomplete {
  position: fixed;
  z-index: 9100;
  min-width: 220px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--line-strong, rgba(15, 23, 42, 0.18));
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
  padding: 6px;
  font: 13px/1.4 "Space Grotesk", system-ui, sans-serif;
}
.param-autocomplete-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft, #64748b);
  padding: 6px 8px 4px;
}
.param-autocomplete-empty {
  padding: 6px 8px 8px;
  font-size: 11.5px;
  color: var(--ink-soft, #64748b);
  line-height: 1.45;
}
.param-autocomplete-row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.param-autocomplete-row:hover,
.param-autocomplete-row:focus-visible {
  background: var(--brand-50, #eef2ff);
}
.param-autocomplete-name {
  font: 600 12.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--brand-700, #1438a8);
}
.param-autocomplete-value {
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-soft, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
}

/* Dashboard scheduled auto-refresh control */
.dbx-autorefresh {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-soft, #94a3b8);
  text-transform: uppercase; letter-spacing: .04em;
}
.dbx-autorefresh select {
  padding: 6px 8px; border-radius: 8px; font-size: 12px;
  text-transform: none; letter-spacing: 0; font-weight: 500;
  border: 1px solid var(--hairline, rgba(15,23,42,0.18));
  background: #fff; color: var(--ink, #0f172a);
  font-family: "Space Grotesk", system-ui, sans-serif;
}

/* Activity-level presence — a collaborator is editing this operator. */
.flowchart-operator.collab-activity-occupied {
  outline: 2px solid var(--collab-act-color, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
}
.collab-activity-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 1px 8px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ─── Warehouse activity settings panel ──────────────────────────────
   Modern SaaS aesthetic: clean rows, subtle borders, deliberate spacing.
   The whole panel is scrollable vertically; nothing relies on absolute
   positioning. Fields stack; folder tree gets a max-height with its own
   scrollbar so it can't shove the columns preview off-screen. */
.warehouse-settings {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 2px 12px;
  font: 13px/1.4 var(--font-ui, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--ink-900, #0f172a);
}
.warehouse-settings .wh-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.warehouse-settings .wh-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.warehouse-settings .wh-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-700, #334155);
  text-transform: none;
}
.warehouse-settings .wh-hint {
  font-size: 11px;
  color: var(--ink-500, #64748b);
  line-height: 1.3;
}

/* Filename input + suffix chip */
.warehouse-settings .wh-input-wrap {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.warehouse-settings .wh-input-wrap:focus-within {
  border-color: var(--brand-500, #1f4fd6);
  box-shadow: 0 0 0 3px rgba(31, 79, 214, 0.15);
}
.warehouse-settings .wh-input {
  flex: 1;
  border: 0;
  padding: 9px 12px;
  font: inherit;
  background: transparent;
  outline: none;
  color: inherit;
}
.warehouse-settings .wh-input-suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-500, #64748b);
  background: rgba(15, 23, 42, 0.04);
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}
.warehouse-settings .wh-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  /* Override the global `select { height: 32px }` (home.css ~1011) — that
     fixed height clipped this control because our padding + font-size add
     up to ~38px. Using line-height + padding instead lets the control size
     itself naturally and keeps the chevron centered. */
  height: auto;
  min-height: 38px;
  box-sizing: border-box;
  padding: 9px 36px 9px 12px;
  line-height: 1.4;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>")
    no-repeat right 12px center / 14px,
    #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;       /* clear the global select's inset shadow */
}
.warehouse-settings .wh-select:focus {
  outline: none;
  border-color: var(--brand-500, #1f4fd6);
  box-shadow: 0 0 0 3px rgba(31, 79, 214, 0.15);
}

/* Selected-folder pill */
.warehouse-settings .wh-folder-selected {
  display: block;
}
.warehouse-settings .wh-folder-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(31, 79, 214, 0.08);
  border: 1px solid rgba(31, 79, 214, 0.18);
  border-radius: 999px;
  color: var(--brand-700, #1438a8);
  font-size: 12px;
  font-weight: 600;
}
.warehouse-settings .wh-folder-pill-icon {
  font-size: 14px;
}

/* Folder tree */
.warehouse-settings .wh-folder-tree {
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  padding: 4px 0;
}
.warehouse-settings .wh-folder-loading,
.warehouse-settings .wh-folder-empty,
.warehouse-settings .wh-folder-error {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--ink-500, #64748b);
  text-align: left;
}
.warehouse-settings .wh-folder-error {
  color: #b91c1c;
}
.warehouse-settings .wh-folder-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  margin: 1px 4px;
  user-select: none;
  transition: background-color 0.1s ease;
}
.warehouse-settings .wh-folder-row:hover {
  background: rgba(15, 23, 42, 0.04);
}
.warehouse-settings .wh-folder-row.wh-folder-selected-row {
  background: rgba(31, 79, 214, 0.12);
  color: var(--brand-700, #1438a8);
  font-weight: 600;
}
.warehouse-settings .wh-folder-toggle {
  width: 14px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-400, #94a3b8);
  flex-shrink: 0;
}
.warehouse-settings .wh-folder-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.warehouse-settings .wh-folder-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Per-row "+ subfolder" button — hidden until the row is hovered or
   selected, so the tree stays calm at rest but the affordance is one
   move away when the user wants to extend the hierarchy. */
.warehouse-settings .wh-folder-add {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--brand-500, #1f4fd6);
  font: 700 14px/1 "Space Grotesk", system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease,
              border-color 120ms ease;
}
.warehouse-settings .wh-folder-row:hover .wh-folder-add,
.warehouse-settings .wh-folder-row.wh-folder-selected-row .wh-folder-add,
.warehouse-settings .wh-folder-add:focus-visible {
  opacity: 1;
}
.warehouse-settings .wh-folder-add:hover {
  background: var(--brand-50, #eef2ff);
  border-color: var(--brand-500, #1f4fd6);
}

.warehouse-settings .wh-folder-actions {
  display: flex;
  gap: 8px;
}
.warehouse-settings .wh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 7px;
  font: 600 12px/1 var(--font-ui, system-ui, sans-serif);
  color: var(--ink-700, #334155);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.warehouse-settings .wh-btn:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.18);
  color: var(--ink-900, #0f172a);
}
.warehouse-settings .wh-btn-ghost {
  background: transparent;
}
.warehouse-settings .wh-btn-sm {
  padding: 4px 8px;
  font-size: 11px;
}

/* Columns preview */
.warehouse-settings .wh-columns-list {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  padding: 6px 0;
  max-height: 200px;
  overflow-y: auto;
}
.warehouse-settings .wh-columns-loading,
.warehouse-settings .wh-columns-empty {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--ink-500, #64748b);
}
.warehouse-settings .wh-column-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-size: 12px;
  line-height: 1.4;
}
.warehouse-settings .wh-column-bullet {
  color: var(--brand-500, #1f4fd6);
  font-size: 16px;
  line-height: 1;
}
.warehouse-settings .wh-column-name {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-900, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warehouse-settings .wh-column-type {
  flex-shrink: 0;
  padding: 1px 6px;
  font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
  color: var(--ink-500, #64748b);
  background: rgba(15, 23, 42, 0.04);
  border-radius: 4px;
}
.warehouse-settings .wh-columns-footer {
  padding: 6px 14px 2px;
  font-size: 11px;
  color: var(--ink-400, #94a3b8);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  margin-top: 4px;
}

/* ===================================================================
   Activity-settings panel — unified modern restyle (May 2026).

   Scope: everything rendered into #selected_activity_settings — filter,
   join, http_request, http_sink, sheets_read, sheets_write,
   blob_storage, warehouse, warehouse_read, import, notebook, pipeline,
   dataflow, etc.

   Goals (per user request, "more modern, NOT 100% width of everything"):
     1. Constrain input widths — no more inputs stretching to fill the
        whole panel. Form controls cap at a sensible max-width and align
        left, with the panel acting as a column of cards rather than a
        wall of full-bleed fields.
     2. Group with proper card boundaries — each activity's outer
        container gets a card chrome (surface + hairline + radius),
        and labelled sub-sections (.field, .section) get their own
        breathing room inside.
     3. Tighten spacing + typography — smaller labels, denser row gaps,
        modern font weights.
     4. Buttons become pills — chip-shaped, branded, no more grey
        full-width rectangles.

   Specificity strategy: prefix everything with #selected_activity_settings
   so we beat the earlier rules in this file without `!important`. The
   modern http_request UI (.hr-settings) already has its own polish; we
   only add light width-constraints to its inputs.
   =================================================================== */

/* ── 1. Outer-container card chrome — every activity's root div gets
       a calm card around it, so the panel reads as a stack of grouped
       sections instead of one continuous blob. .hr-settings is excluded
       because its own .hr-section children already render as cards;
       wrapping THEM in another card would nest two card chromes. */
#selected_activity_settings > div[id]:not(.activity-settings-row):not(.hr-settings) {
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  border-radius: 12px;
  padding: 12px 14px;
}
#selected_activity_settings .column-settings {
  background: transparent;          /* outer div already has the card */
  border: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}

/* ── 2. Width constraint — the core "no more 100%-of-everything" fix.
       Inputs/selects/textareas inside .field rows used to stretch full
       width. Cap them at a sensible reading width; let multi-line
       textareas breathe a bit wider but still bounded. */
#selected_activity_settings .field > select,
#selected_activity_settings .field > input,
#selected_activity_settings .field > textarea {
  width: 100%;
  max-width: 360px;
}
#selected_activity_settings .field > textarea {
  max-width: 520px;
  min-height: 64px;
}
/* The legacy URL bar in http_sink, sheets_write URL pickers, blob
   storage path inputs, etc. Same cap. */
#selected_activity_settings .select-column-row input[type="text"],
#selected_activity_settings .select-column-row input[type="url"],
#selected_activity_settings .select-column-row input[type="email"],
#selected_activity_settings .select-column-row input[type="password"],
#selected_activity_settings .select-column-row input[type="search"] {
  max-width: 360px;
}
#selected_activity_settings .select-column-row textarea {
  max-width: 520px;
}

/* ── 3. Field rows — modest stacked layout with quiet labels. */
#selected_activity_settings .field {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 8px;
}
#selected_activity_settings .field > label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft, #64748b);
  margin-bottom: 0;
}

/* Section sub-headers inside an activity (e.g. "Source", "Columns",
   "Auth" — anything that uses .activity-section-title / h4 / h5 inside
   the panel). Render as small uppercase eyebrow labels. */
#selected_activity_settings .activity-section-title,
#selected_activity_settings h4,
#selected_activity_settings h5 {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft, #64748b);
  margin: 4px 0 6px;
}

/* ── 4. Pill / chip buttons. The existing .buttons class is already
       inline-flex with 32px height, but inside the activity panel we
       want a softer pill shape and brand-tinted primary action.
       Higher specificity = override 1287's #selected_activity_settings .buttons. */
#selected_activity_settings .buttons,
#selected_activity_settings button.buttons {
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;       /* pill */
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line-strong, rgba(15, 23, 42, 0.18));
  background: var(--surface-2, #f8fafc);
  color: var(--ink-900, #0f172a);
  box-shadow: none;
}
#selected_activity_settings .buttons:hover,
#selected_activity_settings button.buttons:hover {
  background: var(--surface-3, #f1f5f9);
  border-color: var(--ink-500, #475569);
}
/* + Add … buttons get the brand pill treatment. */
#selected_activity_settings .add-button {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(31, 79, 214, 0.30);
  background: var(--brand-50, #eef2ff);
  color: var(--brand-500, #1f4fd6);
  margin-bottom: 8px;
}
#selected_activity_settings .add-button:hover {
  background: var(--brand-100, #dbe4ff);
  border-color: var(--brand-500, #1f4fd6);
}

/* DROP / × / destructive secondary buttons inside rows go quieter and
   pill-shaped. */
#selected_activity_settings .rename_settings > button.buttons,
#selected_activity_settings .rename_settings > button.btn,
#selected_activity_settings .hr-header-del,
#selected_activity_settings .whse-folder-del {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  color: var(--ink-500, #475569);
}
#selected_activity_settings .rename_settings > button.buttons:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* ── 5. Tighten the legacy http_sink / sheets_write per-row layout.
       The base/url row was using 100% grid-template-columns earlier; cap
       it. */
#selected_activity_settings .select-column-row {
  width: fit-content;
  max-width: 100%;
}

/* ── 6. Modern http_request UI (.hr-settings) — already styled; just
       apply the input width cap so URL / body / header value fields
       don't span the full panel. */
#selected_activity_settings .hr-settings input[type="text"],
#selected_activity_settings .hr-settings input[type="url"],
#selected_activity_settings .hr-settings input[type="password"],
#selected_activity_settings .hr-settings input[type="search"],
#selected_activity_settings .hr-settings select {
  max-width: 360px;
}
#selected_activity_settings .hr-settings .hr-header-value,
#selected_activity_settings .hr-settings .hr-header-name {
  max-width: none;            /* these live in a grid; the grid sizes them */
}
#selected_activity_settings .hr-settings textarea {
  max-width: 520px;
}
/* Section summaries inside hr-settings already have rounded chrome —
   nudge their internal density to match the new tightness. */
#selected_activity_settings .hr-section {
  border-radius: 12px;
  background: var(--surface, #fff);
  margin-bottom: 8px;
}
#selected_activity_settings .hr-summary {
  padding: 8px 12px;
  font-size: 12.5px;
}

/* ── 7. Panel itself — gentler gap between cards, lighter padding. */
#selected_activity_settings {
  gap: 10px;
  padding: 10px 12px 32px;
  background: var(--surface-1, #fbfbfd);
}

/* ===================================================================
   Run Details panel — table view of per-activity outcomes for the
   current pipeline run. Lives in #tab_run_details, populated by
   runDetailsRecord* helpers in home-ui.js.
   =================================================================== */

#tab_run_details {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  padding: 10px 12px 16px;
  gap: 10px;
  background: var(--surface-1, #fbfbfd);
}

.run-details-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 10px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  border-radius: 12px;
}
.run-details-summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px;
}
.run-details-summary-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft, #64748b);
}
.run-details-summary-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  border: 1px solid transparent;
}
.run-details-summary-pill--idle    {
  background: #f1f5f9; color: #475569;
  border-color: rgba(15, 23, 42, 0.08);
}
.run-details-summary-pill--running {
  background: #dbeafe; color: #1e40af;
  border-color: rgba(30, 64, 175, 0.18);
}
.run-details-summary-pill--ok      {
  background: #dcfce7; color: #166534;
  border-color: rgba(22, 101, 52, 0.18);
}
.run-details-summary-pill--failed  {
  background: #fee2e2; color: #991b1b;
  border-color: rgba(153, 27, 27, 0.20);
}
.run-details-summary-meta {
  font-size: 12.5px; color: var(--ink-soft, #64748b);
}
.run-details-actions { display: flex; gap: 8px; }
.run-details-actions .buttons {
  height: 28px; padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
}

.run-details-table-wrap {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  border-radius: 12px;
  position: relative;
}
.run-details-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: 500 13px/1.4 "Space Grotesk", system-ui, sans-serif;
}
.run-details-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #f8fafc;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft, #64748b);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.10));
}
.run-details-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  color: var(--ink-900, #0f172a);
  vertical-align: middle;
}
.run-details-table tbody tr {
  cursor: pointer;
  transition: background 120ms ease;
}
.run-details-table tbody tr:hover { background: #f8fafc; }
.run-details-table tbody tr:last-child td { border-bottom: 0; }

.run-details-col-name     { width: 20%; font-weight: 600; }
.run-details-col-type     { width: 12%; color: var(--ink-soft, #64748b);
                            font-size: 12px; }
.run-details-col-status   { width: 12%; }
.run-details-col-rows     { width: 8%; text-align: right;
                            font-variant-numeric: tabular-nums; }
.run-details-col-time     { width: 10%; text-align: right;
                            font-variant-numeric: tabular-nums;
                            color: var(--ink-soft, #64748b); }
.run-details-col-progress { width: 22%; font-size: 12px;
                            color: var(--ink-700, #334155); }
.run-details-col-note     { width: 16%; }
.run-details-progress {
  display: inline-block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(30, 64, 175, 0.06);
  color: #1e40af;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

/* Eye button (Detail column) — small round outline button. Pressing
   it opens the per-row details modal. */
.run-details-eye-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--ink-700, #334155);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.run-details-eye-btn:hover {
  background: #eef2ff;
  border-color: var(--brand-500, #1f4fd6);
  color: var(--brand-500, #1f4fd6);
}
.run-details-eye-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 79, 214, 0.20);
}
.run-details-eye-hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.run-details-eye-hint--err {
  background: #fee2e2; color: #991b1b;
  border: 1px solid rgba(153, 27, 27, 0.25);
}

/* ===================================================================
   Run Details — per-row details modal (opened by the 👁 button).
   =================================================================== */
.run-details-modal[hidden] { display: none; }
.run-details-modal {
  position: fixed; inset: 0; z-index: 9050;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.run-details-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.run-details-modal-panel {
  position: relative; z-index: 1;
  width: min(720px, 100%);
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.20);
  overflow: hidden;
}
.run-details-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  background: var(--surface-1, #fbfbfd);
}
.run-details-modal-titles {
  flex: 1 1 auto; min-width: 0;
}
.run-details-modal-title {
  font: 700 15px/1.3 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-900, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.run-details-modal-subtitle {
  font-size: 12px;
  color: var(--ink-soft, #64748b);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.run-details-modal-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.run-details-modal-close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  background: var(--surface, #fff);
  color: var(--ink-700, #334155);
  cursor: pointer;
  font-size: 14px;
}
.run-details-modal-close:hover {
  background: #f1f5f9;
  border-color: var(--ink-500, #475569);
}
.run-details-modal-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 18px;
  display: flex; flex-direction: column;
  gap: 14px;
}

/* Metadata grid at top of body. */
.run-details-modal-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px;
  background: var(--surface-1, #fbfbfd);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 10px;
}
.run-details-modal-meta-cell {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.run-details-modal-meta-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft, #64748b);
}
.run-details-modal-meta-value {
  font: 600 14px/1.3 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-900, #0f172a);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Section titles inside the modal body. */
.run-details-modal-section { display: flex; flex-direction: column; gap: 6px; }
.run-details-modal-section-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft, #64748b);
}

/* Error section — red-tinted card with summary + traceback. */
.run-details-modal-section--error {
  background: rgba(254, 226, 226, 0.45);
  border: 1px solid rgba(153, 27, 27, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
}
.run-details-modal-section--error .run-details-modal-section-title {
  color: #991b1b;
}
.run-details-modal-error-summary {
  font: 600 13px/1.4 "Space Grotesk", system-ui, sans-serif;
  color: #7f1d1d;
}
.run-details-modal-traceback {
  margin: 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(153, 27, 27, 0.18);
  border-radius: 8px;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7f1d1d;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
}

/* Current-step block (running activities). */
.run-details-modal-progress-now {
  padding: 8px 12px;
  background: rgba(30, 64, 175, 0.06);
  border: 1px solid rgba(30, 64, 175, 0.18);
  border-radius: 8px;
  font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #1e40af;
}

/* Progress timeline — one row per activity_progress event. */
.run-details-modal-timeline {
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 10px;
  background: #fbfbfd;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
}
.run-details-modal-tl-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.06);
}
.run-details-modal-tl-row:last-child { border-bottom: 0; }
.run-details-modal-tl-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-soft, #64748b);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.run-details-modal-tl-msg {
  color: var(--ink-900, #0f172a);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.run-details-modal-tl-tag {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  font-size: 10.5px; font-weight: 600;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink-soft, #64748b);
  white-space: nowrap;
}

.run-details-modal-empty {
  padding: 24px;
  text-align: center;
  color: var(--ink-soft, #64748b);
  font-size: 12.5px;
  background: var(--surface-1, #fbfbfd);
  border: 1px dashed rgba(15, 23, 42, 0.10);
  border-radius: 10px;
}

/* Synced-to section — destination path the activity wrote to. */
.run-details-modal-section--dest .run-details-modal-section-title {
  color: #047857;     /* emerald — matches "wrote successfully" signal */
}
.run-details-modal-destination {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.20);
  border-radius: 10px;
}
.run-details-modal-dest-line {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.run-details-modal-dest-icon {
  font-size: 16px;
  line-height: 1;
}
.run-details-modal-dest-path {
  font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #065f46;
  word-break: break-all;
  flex: 1 1 auto; min-width: 0;
}
.run-details-modal-dest-url {
  font: 500 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-soft, #64748b);
  word-break: break-all;
}
.run-details-modal-dest-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.run-details-modal-dest-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.20);
}

/* Request section — the exact wire request. */
.run-details-modal-request {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #fbfbfd;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
}
.run-details-modal-req-line {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.run-details-modal-req-method {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font: 700 11px/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: 0.04em;
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid rgba(30, 64, 175, 0.18);
}
.run-details-modal-req-url {
  font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-900, #0f172a);
  word-break: break-all;
  flex: 1 1 auto; min-width: 0;
}
.run-details-modal-req-subtitle {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft, #64748b);
  margin-top: 4px;
}
.run-details-modal-req-block {
  margin: 0;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-900, #0f172a);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow: auto;
}

/* The pill in the Status column — green/red/grey/blue. */
.run-details-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.run-details-pill--succeeded {
  background: #dcfce7; color: #166534;
  border-color: rgba(22, 101, 52, 0.20);
}
.run-details-pill--failed {
  background: #fee2e2; color: #991b1b;
  border-color: rgba(153, 27, 27, 0.25);
}
.run-details-pill--skipped {
  background: #f1f5f9; color: #475569;
  border-color: rgba(15, 23, 42, 0.10);
}
.run-details-pill--running {
  background: #dbeafe; color: #1e40af;
  border-color: rgba(30, 64, 175, 0.18);
}
.run-details-pill--pending {
  background: #fef9c3; color: #854d0e;
  border-color: rgba(133, 77, 14, 0.18);
}

.run-details-spinner {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(30, 64, 175, 0.25);
  border-top-color: #1e40af;
  animation: run-details-spin 700ms linear infinite;
}
@keyframes run-details-spin { to { transform: rotate(360deg); } }

.run-details-error {
  font-size: 12px;
  color: #991b1b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.run-details-empty {
  padding: 40px 14px;
  text-align: center;
  color: var(--ink-soft, #64748b);
  font-size: 13px;
}

/* Row tints — subtle bg-tint matching the status pill so the table
   scans top-to-bottom by colour without needing to read each pill. */
.run-details-row--failed    td { background: rgba(254, 226, 226, 0.35); }
.run-details-row--running   td { background: rgba(219, 234, 254, 0.35); }
.run-details-row--succeeded td { background: rgba(220, 252, 231, 0.25); }
.run-details-row--skipped   td { background: rgba(241, 245, 249, 0.50); }

/* ===================================================================
   Simplify activity settings — "5-year-old level" pass (per user).

   We keep every setting (the user asked for less noise, not less
   functionality) but visually demote the verbose hints so the user
   only sees them when they want them.

   Strategy: ALL `.hr-helper` text (the inline tooltips that read like
   "How many records per page. Most APIs allow 50–200. Check the API's
   documentation for the maximum.") gets compressed to ~11px, and the
   "Learn more" / "Show example" toggles get a softer, less shouty
   look. Section headers get tighter padding. Pagination's 3-step
   layout gets tighter step blocks. Field labels stay readable but
   stop dominating the row.
   =================================================================== */

#selected_activity_settings .hr-settings {
  font-size: 13px;
}
#selected_activity_settings .hr-section {
  margin-bottom: 6px;
}
#selected_activity_settings .hr-summary {
  padding: 7px 12px;
  font-size: 12px;
}
#selected_activity_settings .hr-summary-label {
  font-size: 12.5px;
  font-weight: 600;
}
#selected_activity_settings .hr-section-body {
  padding: 10px 12px 12px;
  gap: 8px;
}
#selected_activity_settings .hr-field { gap: 3px; }
#selected_activity_settings .hr-field > label,
#selected_activity_settings .hr-field .label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-700, #334155);
  margin-bottom: 0;
}
#selected_activity_settings .hr-helper {
  font-size: 11px;
  line-height: 1.45;
  color: #94a3b8;
}
#selected_activity_settings .hr-helper--quiet {
  font-size: 10.5px;
  color: #cbd5e1;
}
#selected_activity_settings .hr-helper code {
  font-size: 10.5px;
  padding: 0 4px;
}
#selected_activity_settings .hr-chip {
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  border-radius: 999px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.10));
}
#selected_activity_settings .hr-chips { gap: 6px; }

/* Pagination's "Step 1 — …" / "Step 2 — …" headings: smaller eyebrows
   instead of full-weight headlines. */
#selected_activity_settings .hr-pagination-step,
#selected_activity_settings .hr-pagination-step-label,
#selected_activity_settings .hr-step,
#selected_activity_settings .hr-step-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft, #64748b);
  margin: 8px 0 4px;
}

/* Strategy radio cards — were ~big oversized cards. Compact them. */
#selected_activity_settings .hr-pagination-strategy,
#selected_activity_settings .hr-strategy-card {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  background: var(--surface, #fff);
  font-size: 12px;
}
#selected_activity_settings .hr-pagination-strategy + .hr-pagination-strategy,
#selected_activity_settings .hr-strategy-card + .hr-strategy-card {
  margin-top: 4px;
}
#selected_activity_settings .hr-strategy-card-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

/* The "Show example" expandable inside each strategy — quieter still. */
#selected_activity_settings details.hr-example > summary {
  font-size: 11px;
  color: var(--brand-500, #1f4fd6);
  cursor: pointer;
  padding: 2px 0;
}
#selected_activity_settings details.hr-example pre,
#selected_activity_settings details.hr-example code {
  font-size: 10.5px;
}

/* Toggle rows + radio groups inside Advanced — tighter. */
#selected_activity_settings .hr-toggle-row {
  font-size: 12px;
  padding: 4px 0;
}
#selected_activity_settings .hr-toggle-label {
  font-size: 12px;
  font-weight: 600;
}
#selected_activity_settings .hr-radio-group {
  gap: 6px;
}
#selected_activity_settings .hr-radio-group label {
  font-size: 11.5px;
}

/* Test Request button — pill, not chunky block. */
#selected_activity_settings .hr-test-row .buttons {
  height: 26px;
  padding: 0 12px;
  font-size: 11.5px;
  border-radius: 999px;
}

/* Validation summary + Reset to saved — small footer, not a banner. */
#selected_activity_settings .hr-footer {
  padding: 8px 10px 0;
  gap: 8px;
  font-size: 11.5px;
}
#selected_activity_settings .hr-validation-summary {
  font-size: 11px;
  color: #b91c1c;
}

/* Legacy activities (filter / join / etc.) — match the same density. */
#selected_activity_settings .rename_settings {
  padding: 8px 10px;
  margin-bottom: 6px;
  gap: 6px;
}
#selected_activity_settings .rename_settings .item_select,
#selected_activity_settings .rename_settings .text_input_value {
  height: 28px;
  font-size: 12px;
  padding: 0 8px;
}

/* ===================================================================
   Copy Data activity panel (copy_data.js). Two-section layout —
   source (HTTP) on top, sink (warehouse) below. Reuses .wh-folder-*
   styles for the folder picker so the look matches the warehouse
   activity. Otherwise self-contained under #selected_activity_settings.
   =================================================================== */
#selected_activity_settings .cd-settings {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.cd-header { padding: 4px 2px 2px; }
.cd-helper {
  font-size: 11.5px;
  color: var(--ink-soft, #64748b);
  line-height: 1.45;
}
.cd-helper--quiet {
  font-size: 10.5px;
  color: #94a3b8;
}
.cd-helper code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  padding: 1px 5px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 4px;
  color: var(--ink-900, #0f172a);
}
.cd-section {
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  border-radius: 12px;
  padding: 0;
  margin-bottom: 0;
}
.cd-section[open] { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); }
.cd-summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  user-select: none;
}
.cd-summary::-webkit-details-marker { display: none; }
.cd-summary::before {
  content: "›";
  display: inline-block;
  font-weight: 800;
  transition: transform 120ms ease;
  color: var(--ink-soft, #64748b);
}
.cd-section[open] .cd-summary::before { transform: rotate(90deg); }
.cd-summary-label {
  font-weight: 600;
  color: var(--ink-900, #0f172a);
  font-size: 12.5px;
}
.cd-summary-badge {
  color: var(--ink-soft, #64748b);
  font-size: 11px;
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cd-body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.cd-row {
  display: flex; align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cd-row--url .cd-method {
  width: 80px; flex: 0 0 auto;
}
.cd-row--url .cd-url {
  flex: 1 1 auto; min-width: 0;
}
.cd-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #64748b);
  flex: 0 0 auto;
  width: 110px;
}
.cd-row .input {
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
}
.cd-row .input[type="number"] { max-width: 120px; }
.cd-row select.input,
.cd-row select { height: 30px; }
.cd-subsection {
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 10px;
  padding: 0;
  margin-top: 4px;
  background: var(--surface-1, #fbfbfd);
}
.cd-subsection > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-soft, #64748b);
}
.cd-subsection > summary::-webkit-details-marker { display: none; }
.cd-subsection > summary::before {
  content: "›"; font-weight: 800;
  color: var(--ink-soft, #64748b);
  transition: transform 120ms ease;
}
.cd-subsection[open] > summary::before { transform: rotate(90deg); }
.cd-sub-badge {
  color: var(--ink-400, #94a3b8);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-left: auto;
}
.cd-headers-body { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.cd-headers-list { display: flex; flex-direction: column; gap: 4px; }
.cd-header-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(160px, 1fr) 28px;
  gap: 6px;
  align-items: center;
}
.cd-header-row .input {
  height: 28px;
  font-size: 12px;
  padding: 0 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cd-h-del {
  width: 26px; height: 26px; padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  background: var(--surface, #fff);
  color: var(--ink-500, #475569);
}
.cd-h-del:hover { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.cd-headers-add {
  align-self: flex-start;
  height: 26px;
  padding: 0 12px;
  font-size: 11.5px;
  border-radius: 999px;
}

/* Pagination wizard inside the source section. */
.cd-pagination .cd-sub-head {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft, #64748b);
  padding: 6px 10px 0;
}
.cd-pagination .cd-row { padding: 0 10px; }
.cd-pagination .cd-row:last-child { padding-bottom: 10px; }
.cd-pg-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  cursor: pointer;
}
.cd-pg-fields {
  display: flex; flex-direction: column; gap: 6px;
}

/* Sink folder picker — reuses .wh-folder-* styles. */
.cd-row--folder {
  align-items: flex-start;
}
.cd-folder-selected {
  flex: 1 1 100%;
}
.cd-folder-tree {
  flex: 1 1 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  border-radius: 10px;
  padding: 4px;
}

/* Write mode + format. */
.cd-row--mode .cd-mode-group {
  display: flex; flex-wrap: wrap; gap: 8px;
  flex: 1 1 auto;
}
.cd-mode-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  font-size: 12px;
  cursor: pointer;
}

/* Actions row + test/preview output. */
.cd-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 4px 2px;
}
.cd-action-btn {
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
  border-radius: 999px;
}
.cd-action-btn--primary {
  background: var(--brand-50, #eef2ff);
  color: var(--brand-500, #1f4fd6);
  border-color: rgba(31, 79, 214, 0.30);
}
.cd-test-out {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.cd-test-ok {
  font-size: 11.5px;
  color: #065f46;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 8px;
  padding: 6px 10px;
}
.cd-test-err {
  font-size: 12px;
  color: #991b1b;
  background: rgba(254, 226, 226, 0.5);
  border: 1px solid rgba(153, 27, 27, 0.22);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}
.cd-test-loading {
  font-size: 11.5px;
  color: var(--ink-soft, #64748b);
  padding: 6px 10px;
  font-style: italic;
}
.cd-test-sample {
  margin: 0;
  padding: 8px 10px;
  background: #fbfbfd;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-900, #0f172a);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
}

/* ===================================================================
   For Loop activity panel (for_loop.js). Container with four Qs:
   list source · concurrency · error mode · inner activities.
   =================================================================== */
#selected_activity_settings .fl-settings {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.fl-helper {
  font-size: 11.5px;
  color: var(--ink-soft, #64748b);
  line-height: 1.45;
}
.fl-helper--quiet { color: #94a3b8; font-size: 11px; }
.fl-helper code,
.fl-q code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  padding: 1px 5px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 4px;
  color: var(--ink-900, #0f172a);
}
.fl-section {
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.fl-section--inner {
  background: var(--surface-1, #fbfbfd);
  border: 1px dashed rgba(15, 23, 42, 0.16);
}
.fl-q {
  font-size: 13px; font-weight: 700;
  color: var(--ink-900, #0f172a);
  line-height: 1.3;
}
.fl-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.fl-row--radio { flex-direction: column; align-items: flex-start; gap: 4px; }
.fl-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft, #64748b);
  width: 110px;
  flex: 0 0 auto;
}
.fl-section .input {
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
  flex: 1 1 auto;
}
.fl-section textarea.input {
  height: auto;
  padding: 8px 10px;
  font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}
.fl-radio-opt {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--surface-1, #fbfbfd);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  cursor: pointer;
  width: 100%;
}
.fl-radio-opt:hover { background: var(--surface-2, #f8fafc); }
.fl-radio-label { font-size: 12.5px; font-weight: 600; color: var(--ink-900, #0f172a); }
.fl-radio-desc {
  font-size: 11px;
  color: var(--ink-soft, #64748b);
  margin-left: auto;
}

/* Concurrency slider. */
.fl-row--slider { align-items: center; gap: 12px; }
.fl-slider {
  flex: 1 1 auto;
  -webkit-appearance: none; appearance: none;
  height: 6px;
  background: var(--surface-3, #e2e8f0);
  border-radius: 999px;
  outline: none;
}
.fl-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--brand-500, #1f4fd6);
  cursor: pointer;
  border: 2px solid var(--surface, #fff);
}
.fl-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--brand-500, #1f4fd6);
  cursor: pointer;
  border: 2px solid var(--surface, #fff);
}
.fl-slider-val {
  font: 700 13px/1 "Space Grotesk", system-ui, sans-serif;
  color: var(--brand-500, #1f4fd6);
  min-width: 80px; text-align: right;
}

/* Variable chips. */
.fl-vars {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 10px;
  background: rgba(31, 79, 214, 0.05);
  border: 1px dashed rgba(31, 79, 214, 0.18);
  border-radius: 8px;
  align-items: center;
}
.fl-vars-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--brand-700, #1438a8);
}
.fl-var-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31, 79, 214, 0.30);
  background: var(--brand-50, #eef2ff);
  color: var(--brand-700, #1438a8);
  font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
}
.fl-var-chip:hover { background: var(--brand-100, #dbe4ff); }
.fl-var-chip--copied {
  background: #dcfce7; color: #166534;
  border-color: rgba(22, 101, 52, 0.35);
}
.fl-var-chip--copied::after { content: " ✓"; margin-left: 2px; }

/* Inner-activity cards. */
.fl-inner-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.fl-inner-empty {
  padding: 16px;
  text-align: center;
  color: var(--ink-soft, #64748b);
  font-size: 12.5px;
  font-style: italic;
}
.fl-inner-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  border-radius: 10px;
  overflow: hidden;
}
.fl-inner-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2, #f8fafc);
  border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  font-size: 12.5px; font-weight: 600;
}
.fl-inner-title { color: var(--ink-900, #0f172a); }
.fl-inner-warn {
  font-size: 11px;
  color: #854d0e;
  background: #fef9c3;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(133, 77, 14, 0.20);
}
.fl-inner-del {
  margin-left: auto;
  width: 24px; height: 24px;
  padding: 0;
  border-radius: 999px;
  font-size: 14px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  background: var(--surface, #fff);
}
.fl-inner-del:hover {
  background: #fef2f2; color: #b91c1c; border-color: #fca5a5;
}
.fl-inner-body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.fl-add-inner-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.fl-add-btn {
  height: 28px; padding: 0 12px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--brand-50, #eef2ff);
  color: var(--brand-500, #1f4fd6);
  border: 1px solid rgba(31, 79, 214, 0.30);
}
.fl-count { padding-top: 2px; }

/* ===================================================================
   Run Details modal — Phase 7 For Loop iteration table.
   =================================================================== */
.run-details-modal-section--iters {
  background: var(--surface-1, #fbfbfd);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 10px;
  padding: 10px 12px;
}
.run-details-modal-iter-meta {
  font-size: 11px;
  color: var(--ink-soft, #64748b);
  margin-top: -2px;
  margin-bottom: 6px;
}
.run-details-modal-iter-failed-count {
  color: #991b1b;
  font-weight: 700;
}
.run-details-modal-iter-table {
  display: flex; flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
}
.run-details-modal-iter-row {
  display: grid;
  grid-template-columns: 20px 1fr 70px auto;
  gap: 10px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
}
.run-details-modal-iter-row--succeeded { background: rgba(220, 252, 231, 0.40); }
.run-details-modal-iter-row--failed    { background: rgba(254, 226, 226, 0.40); }
.run-details-modal-iter-row--running   { background: rgba(219, 234, 254, 0.40); }
.run-details-modal-iter-row--skipped   { background: rgba(241, 245, 249, 0.50); }
.run-details-modal-iter-icon {
  text-align: center;
  font-weight: 700;
}
.run-details-modal-iter-row--succeeded .run-details-modal-iter-icon { color: #166534; }
.run-details-modal-iter-row--failed    .run-details-modal-iter-icon { color: #991b1b; }
.run-details-modal-iter-row--running   .run-details-modal-iter-icon { color: #1e40af; }
.run-details-modal-iter-row--skipped   .run-details-modal-iter-icon { color: #64748b; }
.run-details-modal-iter-item {
  font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-900, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.run-details-modal-iter-time {
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-soft, #64748b);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.run-details-modal-iter-err {
  font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #991b1b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 180px;
}
.run-details-modal-retry-btn {
  margin-top: 10px;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-50, #eef2ff);
  color: var(--brand-500, #1f4fd6);
  border: 1px solid rgba(31, 79, 214, 0.30);
  font: 600 12px/1 "Space Grotesk", system-ui, sans-serif;
  cursor: pointer;
}
.run-details-modal-retry-btn:hover {
  background: var(--brand-100, #dbe4ff);
}
.run-details-modal-retry-btn:disabled {
  opacity: 0.6; cursor: wait;
}

/* ===================================================================
   Palette scope — Copy Data + For Loop are PIPELINE-only activities.
   Hide them in the ingest menu when the user is on the dataflow canvas.
   The body attribute is set by setActivePipelineType in home-ui.js.
   =================================================================== */
/* Use `data-etl-route` (set by applyRoute in home-ui.js — fires on
   navigation AND initial page load) rather than the volatile
   `data-etl-canvas` so the buttons are shown by default and only
   hidden on a confirmed Dataflow route. */
body[data-etl-route="dataflow"] #ingestMenu button[data-ingest="copy_data"],
body[data-etl-route="dataflow"] #ingestMenu button[data-ingest="for_loop"] {
    display: none !important;
}

/* Same scope for the bottom-panel Activities tab buttons. The
   `data-pipeline-only` attribute marks them at author-time, so a future
   pipeline-only activity inherits the rule without a CSS change. */
body[data-etl-route="dataflow"] #tab_activities button[data-pipeline-only="true"] {
    display: none !important;
}

/* ===================================================================
   For Loop canvas tile — wider container with dashed boundary and a
   body that shows items + concurrency + inner-activity list. Matches
   the "big div outline where I can add activities in there" spec.
   =================================================================== */
.flowchart-operator.for-loop-tile {
  /* Grow with content. min-width keeps it readable when empty; the
     width: max-content lets it expand as inner-activity chips are
     added so the tile visibly stretches with each + Add. */
  min-width: 320px;
  width: max-content;
  max-width: 800px;
  background: rgba(31, 79, 214, 0.04);
  border: 2px dashed rgba(31, 79, 214, 0.35);
}
.flowchart-operator.for-loop-tile .flowchart-operator-title {
  background: rgba(31, 79, 214, 0.10);
  border-bottom: 1px dashed rgba(31, 79, 214, 0.30);
  font-weight: 700;
}
.flowchart-operator.for-loop-tile .flowchart-operator-title::before {
  content: "⟲ ";
  color: var(--brand-500, #1f4fd6);
}
/* Hide the legacy text body if it slipped in; our HTML tile body
   .fl-tile-body owns this space now. */
.flowchart-operator.for-loop-tile .flowchart-operator-body-content:not(.fl-tile-body),
.flowchart-operator.for-loop-tile .flowchart-operator-description {
  display: none;
}
.fl-tile-body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.fl-tile-summary {
  font: 11px/1.5 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-soft, #64748b);
  white-space: nowrap;
}
.fl-tile-chips {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.fl-tile-empty {
  font: italic 11.5px/1.4 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-soft, #94a3b8);
  padding: 4px 0;
}
.fl-tile-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface, #fff);
  color: var(--ink-900, #0f172a);
  border: 1px solid rgba(31, 79, 214, 0.25);
  border-radius: 999px;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden; text-overflow: ellipsis;
}
.fl-tile-add {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  font: 700 11px/1.3 "Space Grotesk", system-ui, sans-serif;
  background: var(--brand-50, #eef2ff);
  color: var(--brand-500, #1f4fd6);
  border: 1px dashed rgba(31, 79, 214, 0.4);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.fl-tile-add:hover {
  background: var(--brand-100, #dbe4ff);
  border-style: solid;
}

/* Inline picker that pops next to the + Add button. */
.fl-inline-picker {
  position: fixed;
  z-index: 9200;
  min-width: 160px;
  background: var(--surface, #fff);
  border: 1px solid var(--line-strong, rgba(15, 23, 42, 0.18));
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
  padding: 4px;
  display: flex; flex-direction: column;
  gap: 2px;
}
.fl-inline-picker-item {
  text-align: left;
  padding: 8px 12px;
  border: 0;
  background: none;
  border-radius: 6px;
  font: 500 12.5px/1.3 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-900, #0f172a);
  cursor: pointer;
}
.fl-inline-picker-item:hover {
  background: var(--brand-50, #eef2ff);
  color: var(--brand-500, #1f4fd6);
}

/* ── AI-Suggest Insights modal + cards (SQL editor) ─────────────────
   Activated by the 💡 Suggest Insights button in the SQL toolbar.
   See sql_ui.js suggestInsights() / renderInsightsModal(). */
.sql-insights-btn {
  background: linear-gradient(135deg,
    var(--violet-50, #f5f0ff) 0%,
    var(--brand-50, #eef2ff) 100%);
  border: 1px solid var(--violet-300, #c4b5fd);
  color: var(--violet-700, #6d28d9);
  font-weight: 600;
}
.sql-insights-btn:hover {
  background: linear-gradient(135deg,
    var(--violet-100, #ede9fe) 0%,
    var(--brand-100, #e0e7ff) 100%);
  border-color: var(--violet-400, #a78bfa);
}
.sql-insights-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 24px 24px;
  overflow-y: auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: sql-insights-fade-in 0.14s ease-out;
}
@keyframes sql-insights-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sql-insights-panel {
  background: var(--surface, #fff);
  border-radius: 14px;
  width: min(840px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25),
              0 2px 6px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--ink-faint, #e5e7eb);
  overflow: hidden;
  animation: sql-insights-pop-in 0.16s cubic-bezier(0.4, 1.6, 0.6, 1);
}
@keyframes sql-insights-pop-in {
  from { transform: translateY(8px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0)    scale(1);     opacity: 1; }
}
.sql-insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 4px;
}
.sql-insights-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.sql-insights-spark {
  font-size: 19px;
  line-height: 1;
}
.sql-insights-subtitle {
  padding: 0 22px 14px;
  font-size: 12.5px;
  color: var(--ink-soft, #64748b);
}
.sql-insights-close {
  background: transparent;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--ink-soft, #64748b);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sql-insights-close:hover {
  background: var(--ink-faint, #f1f5f9);
  color: var(--ink, #0f172a);
}
.sql-insights-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 22px 22px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .sql-insights-body {
    grid-template-columns: 1fr 1fr;
  }
}
.sql-insight-card {
  text-align: left;
  background: var(--surface, #fff);
  border: 1px solid var(--ink-faint, #e5e7eb);
  border-radius: 11px;
  padding: 14px 14px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s;
  font: inherit;
  color: inherit;
}
.sql-insight-card:hover {
  border-color: var(--violet-400, #a78bfa);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.12);
  transform: translateY(-1px);
}
.sql-insight-card:active {
  transform: translateY(0);
}
.sql-insight-card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #0f172a);
  line-height: 1.35;
}
.sql-insight-card-rationale {
  font-size: 12.5px;
  color: var(--ink-soft, #64748b);
  line-height: 1.45;
}
.sql-insight-card-sql {
  margin: 0;
  padding: 9px 11px;
  background: var(--ink-faint, #f8fafc);
  border-radius: 7px;
  border: 1px solid var(--ink-faint, #e5e7eb);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink, #0f172a);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 130px;
  overflow-y: auto;
}
.sql-insight-card-foot {
  display: flex;
  justify-content: flex-end;
  font-size: 11.5px;
  color: var(--violet-600, #7c3aed);
  font-weight: 500;
}
.sql-insight-run-hint {
  opacity: 0;
  transition: opacity 0.12s;
}
.sql-insight-card:hover .sql-insight-run-hint {
  opacity: 1;
}

/* ── SQL tree file row: query button + edit-description pencil ──────
   Old layout was a single <button class="sql-tree-file">. New layout
   splits into a row container holding the main query button plus a
   small ✏️ that PATCHes the warehouse doc's description. */
.sql-tree-file-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  /* The original padding-left is set inline per depth; let it through. */
  padding-right: 4px;
}
.sql-tree-file-row:hover {
  background: var(--brand-50, #eef2ff);
}
.sql-tree-file-q {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 5px 8px 5px 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;            /* let .sql-files-name truncate */
  overflow: hidden;
}
.sql-tree-file-q .sql-files-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sql-tree-file-edit {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--ink-soft, #64748b);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sql-tree-file-row:hover .sql-tree-file-edit,
.sql-tree-file-row.sql-tree-file-has-desc .sql-tree-file-edit {
  /* Always reveal when the row has a description so the user knows
     where to edit; otherwise show on hover only. */
  opacity: 0.85;
}
.sql-tree-file-row.sql-tree-file-has-desc .sql-tree-file-edit {
  color: var(--violet-600, #7c3aed);
}
.sql-tree-file-edit:hover {
  background: var(--ink-faint, #f1f5f9);
  opacity: 1 !important;
}

/* Run Details modal — per-iteration inner-activity detail + live counts.
   Shown next to each iteration row so the user can see, at a glance,
   that 10 concurrent threads are each running their own Copy Data /
   HTTP Request with distinct targets — not just 10 spinners. */
.run-details-modal-iter-inner {
  font: 500 11.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--brand-700, #1e3a8a);
  background: var(--brand-50, #eef2ff);
  border: 1px solid rgba(31, 79, 214, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.run-details-modal-iter-live {
  font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-soft, #64748b);
  white-space: nowrap;
}

/* Pending iteration row — queued but not yet started. Distinguish from
   running with muted color so the user can quickly scan which workers
   the ThreadPoolExecutor has picked up. */
.run-details-modal-iter-row--pending {
  opacity: 0.55;
}
.run-details-modal-iter-row--pending .run-details-modal-iter-icon {
  color: var(--ink-soft, #94a3b8);
}

/* For Loop inline iteration progress in the Run Details tab — visible
   without opening the 👁 modal. Stacks: headline ("Items processed:
   X of Y (PCT%)") → segmented progress bar → counts breakdown. */
.run-details-iter-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
}
.run-details-iter-headline {
  font: 600 12.5px/1.3 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-900, #0f172a);
}
.run-details-iter-bar {
  display: flex;
  width: 100%;
  height: 8px;
  background: var(--ink-faint, #e5e7eb);
  border-radius: 4px;
  overflow: hidden;
}
.run-details-iter-bar > span {
  display: block;
  height: 100%;
  transition: width 0.3s ease;
}
.run-details-iter-bar-ok   { background: var(--green-500, #16a34a); }
.run-details-iter-bar-fail { background: var(--rose-500,  #ef4444); }
.run-details-iter-bar-skip { background: var(--amber-400, #fbbf24); }
.run-details-iter-bar-run  { background: var(--brand-500, #1f4fd6);
                             animation: rd-iter-bar-pulse 1.6s ease-in-out infinite; }
@keyframes rd-iter-bar-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.run-details-iter-detail {
  font: 500 11.5px/1.4 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-soft, #64748b);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.run-details-iter-ok   { color: var(--green-700, #15803d); font-weight: 600; }
.run-details-iter-run  { color: var(--brand-700, #1e3a8a); font-weight: 600; }
.run-details-iter-pend { color: var(--ink-soft,  #94a3b8); }
.run-details-iter-fail { color: var(--rose-600,  #dc2626); font-weight: 600; }
.run-details-iter-skip { color: var(--amber-700, #b45309); }
.run-details-progress--sub {
  font-size: 11px;
  color: var(--ink-soft, #94a3b8);
  margin-top: 2px;
}

/* For Loop iteration sub-rows — every iteration of a For Loop gets an
   indented row directly under the parent For Loop row in the Run
   Details tab, showing its file/resource, live record count, and
   status. Left-border color reflects status so you can scan for what's
   running (blue), done (green), failed (red), or pending (grey). */
.run-details-subrow {
  border-left: 3px solid var(--ink-faint, #cbd5e1);
}
.run-details-subrow.run-details-row--running {
  background: rgba(219, 234, 254, 0.45);
  border-left-color: var(--brand-500, #1f4fd6);
}
.run-details-subrow.run-details-row--succeeded {
  background: rgba(220, 252, 231, 0.30);
  border-left-color: var(--green-500, #16a34a);
}
.run-details-subrow.run-details-row--failed {
  background: rgba(254, 226, 226, 0.40);
  border-left-color: var(--rose-500, #ef4444);
  cursor: pointer;
}
.run-details-subrow.run-details-row--failed:hover {
  background: rgba(254, 226, 226, 0.60);
}
.run-details-subrow.run-details-row--pending {
  opacity: 0.6;
}
.run-details-col-subname {
  padding-left: 28px !important;
  font-size: 12px;
}
.run-details-subname-prefix {
  color: var(--ink-soft, #64748b);
  font-weight: 600;
  margin-right: 6px;
  font: 600 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.run-details-subname-item {
  color: var(--ink-900, #0f172a);
  font-weight: 500;
}

/* Cancel button on running activity / iteration rows in Run Details. */
.run-details-cancel-btn {
  font: 600 11px/1 "Space Grotesk", system-ui, sans-serif;
  color: var(--rose-600, #dc2626);
  background: var(--surface, #fff);
  border: 1px solid var(--rose-300, #fca5a5);
  border-radius: 6px;
  padding: 4px 9px;
  margin-left: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s;
}
.run-details-cancel-btn:hover {
  background: var(--rose-50, #fef2f2);
  border-color: var(--rose-500, #ef4444);
}
.run-details-cancel-btn.is-cancelling,
.run-details-cancel-btn:disabled {
  opacity: 0.6;
  cursor: default;
  color: var(--ink-soft, #94a3b8);
  border-color: var(--ink-faint, #e5e7eb);
}

/* Run Details pagination footer (100 rows/page). */
.run-details-pager-row td {
  background: var(--surface-2, #f8fafc);
  border-top: 1px solid var(--ink-faint, #e5e7eb);
}
.run-details-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 12px;
}
.run-details-pager-btn {
  font: 600 12px/1 "Space Grotesk", system-ui, sans-serif;
  color: var(--brand-700, #1e3a8a);
  background: var(--surface, #fff);
  border: 1px solid var(--brand-200, #c7d2fe);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.run-details-pager-btn:hover:not(:disabled) {
  background: var(--brand-50, #eef2ff);
  border-color: var(--brand-500, #1f4fd6);
}
.run-details-pager-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.run-details-pager-info {
  font: 500 11.5px/1.3 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-soft, #64748b);
}

/* SQL editor file tree — schema dropdown per file ─────────────────── */
.sql-tree-file-wrap {
  display: flex;
  flex-direction: column;
}
.sql-tree-schema-caret {
  flex: 0 0 auto;
  width: 16px;
  height: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft, #94a3b8);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 0;
  margin-right: 2px;
  transition: color 0.1s;
}
.sql-tree-schema-caret:hover { color: var(--brand-600, #2540a8); }
.sql-tree-schema-caret.is-open { color: var(--brand-700, #1e3a8a); }
.sql-tree-file-schema {
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-700, #334155);
  background: rgba(241, 245, 249, 0.55);
  border-left: 2px solid var(--brand-200, #c7d2fe);
  padding: 6px 10px 8px;
  margin: 2px 0 4px;
}
.sql-tree-schema-head {
  font: 600 11px/1.4 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-soft, #64748b);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sql-tree-schema-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sql-tree-schema-col {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.08s;
}
.sql-tree-schema-col:hover {
  background: var(--brand-50, #eef2ff);
}
.sql-tree-schema-col-name {
  font-weight: 500;
  color: var(--ink-900, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sql-tree-schema-col-type {
  color: var(--brand-700, #1e3a8a);
  font-size: 10.5px;
  margin-left: 8px;
  flex-shrink: 0;
}
.sql-tree-schema-loading,
.sql-tree-schema-empty {
  font: italic 11px/1.4 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-soft, #94a3b8);
  padding: 2px 0;
}


/* For Loop side panel — full inner-activity editor view.
   Toggled in place of the main view when the user clicks a chip
   on the canvas or "⚙ Configure" on an inner-card. Contains the
   complete settings panel of a Copy Data / HTTP Request activity,
   identical to what's shown for a top-level operator. */
.fl-inner-edit-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fl-inner-edit-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--ink-faint, #e5e7eb);
}
.fl-inner-back-btn {
  font: 600 12.5px/1 "Space Grotesk", system-ui, sans-serif;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--brand-50, #eef2ff);
  color: var(--brand-700, #1e3a8a);
  border: 1px solid var(--brand-200, #c7d2fe);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.fl-inner-back-btn:hover {
  background: var(--brand-100, #e0e7ff);
  border-color: var(--brand-400, #818cf8);
}
.fl-inner-edit-title {
  font: 600 14px/1.3 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-900, #0f172a);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.fl-inner-edit-sub {
  font: 400 11.5px/1.3 "Space Grotesk", system-ui, sans-serif;
  color: var(--ink-soft, #64748b);
}

/* Configure button on each inner-card head. */
.fl-inner-configure {
  font: 600 11.5px/1 "Space Grotesk", system-ui, sans-serif;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--brand-700, #1e3a8a);
  border: 1px solid var(--brand-300, #a5b4fc);
  cursor: pointer;
  margin-left: auto;
  margin-right: 6px;
}
.fl-inner-configure:hover {
  background: var(--brand-50, #eef2ff);
  border-color: var(--brand-500, #1f4fd6);
}


/* ── Modern prompt modal (replaces window.prompt for Ask AI + descr) ──
   Reuses the .sql-insights-overlay / .sql-insights-panel chrome from
   the insights modal so the visual family stays consistent. */
.sql-prompt-panel {
  width: min(560px, 100%);
  max-height: none;
}
.sql-prompt-subtitle {
  padding-bottom: 4px;
}
.sql-prompt-body {
  padding: 6px 22px 8px;
}
.sql-prompt-input {
  width: 100%;
  box-sizing: border-box;
  font: 14px/1.5 "Space Grotesk", system-ui, -apple-system, sans-serif;
  color: var(--ink, #0f172a);
  background: var(--surface, #fff);
  border: 1.5px solid var(--ink-faint, #e5e7eb);
  border-radius: 10px;
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  resize: vertical;
  min-height: 44px;
}
textarea.sql-prompt-input {
  min-height: 84px;
  font-family: inherit;
}
.sql-prompt-input::placeholder {
  color: var(--ink-soft, #94a3b8);
}
.sql-prompt-input:focus {
  border-color: var(--violet-400, #a78bfa);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}
.sql-prompt-input-empty {
  border-color: var(--rose-400, #fb7185);
  animation: sql-prompt-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes sql-prompt-shake {
  10%, 90%   { transform: translateX(-1px); }
  20%, 80%   { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60%   { transform: translateX(4px); }
}
.sql-prompt-suggestions {
  margin-top: 14px;
}
.sql-prompt-suggest-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #64748b);
  margin-bottom: 8px;
}
.sql-prompt-suggest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sql-prompt-chip {
  font: 12.5px/1 "Space Grotesk", system-ui, sans-serif;
  background: var(--ink-faint, #f1f5f9);
  border: 1px solid var(--ink-faint, #e5e7eb);
  color: var(--ink-700, #334155);
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.sql-prompt-chip:hover {
  background: var(--violet-50, #f5f0ff);
  border-color: var(--violet-300, #c4b5fd);
  color: var(--violet-700, #6d28d9);
}
.sql-prompt-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--ink-faint, #f1f5f9);
  margin-top: 14px;
}
.sql-prompt-btn {
  font: 600 13.5px/1 "Space Grotesk", system-ui, sans-serif;
  padding: 10px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
  border: 1px solid transparent;
}
.sql-prompt-btn:active {
  transform: translateY(1px);
}
.sql-prompt-cancel {
  background: transparent;
  border-color: var(--ink-faint, #e5e7eb);
  color: var(--ink-700, #334155);
}
.sql-prompt-cancel:hover {
  background: var(--ink-faint, #f8fafc);
  border-color: var(--ink-soft, #cbd5e1);
}
.sql-prompt-submit {
  background: linear-gradient(135deg,
    var(--violet-600, #7c3aed) 0%,
    var(--brand-500, #1f4fd6) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.25);
}
.sql-prompt-submit:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32);
}

/* ── Insights modal — "Insert all into editor" button in the header ── */
.sql-insights-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sql-insights-insert-all {
  font: 600 12.5px/1 "Space Grotesk", system-ui, sans-serif;
  color: var(--violet-700, #6d28d9);
  background: var(--violet-50, #f5f0ff);
  border: 1px solid var(--violet-200, #ddd6fe);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.sql-insights-insert-all:hover {
  background: var(--violet-100, #ede9fe);
  border-color: var(--violet-400, #a78bfa);
}
.sql-insights-insert-all:active {
  transform: translateY(1px);
}

/* For Loop canvas chip — clickable variant. Clicking jumps to the
   inner-activity card in the side panel and focuses its first input.
   Standard .fl-tile-chip stays a static span; this is the button
   variant rendered by the new _render_canvas_body. */
.fl-tile-chip-clickable {
  font: inherit;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, transform 0.05s;
}
.fl-tile-chip-clickable:hover {
  background: var(--brand-50, #eef2ff);
  border-color: rgba(31, 79, 214, 0.55);
}
.fl-tile-chip-clickable:active {
  transform: translateY(1px);
}

/* Inner-activity card flash — applied briefly after the user clicks a
   canvas chip, so they can see which side-panel card matches. */
.fl-inner-card--flash {
  animation: fl-inner-flash 1.1s ease-out;
}
@keyframes fl-inner-flash {
  0%   { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.55); }
  100% { box-shadow: 0 0 0 0   rgba(124, 58, 237, 0);    }
}

/* ===================================================================
   Activity settings panel — etl-studio ActivitySettings (.kit-fs) look.
   The per-activity fields injected into #selected_activity_settings use a
   mix of markup across ~25 activities and are functionally wired, so this
   re-skins their APPEARANCE only (no width/layout overrides that could break
   functional widgets) to match the prototype's clean sectioned form.
   =================================================================== */
#selected_activity_settings {
  gap: 16px !important;
  font-family: var(--font-ui, "Space Grotesk", system-ui, sans-serif);
}
/* Section titles → quiet uppercase eyebrow (kit-fs-section-title). */
#selected_activity_settings .settings-title,
#selected_activity_settings .settings-header,
#selected_activity_settings .settings-section-title {
  font: 700 11px var(--font-ui); color: var(--ink-700, #425466);
  text-transform: uppercase; letter-spacing: 0.06em; margin: 0;
}
#selected_activity_settings .settings-subtitle,
#selected_activity_settings .settings-hint,
#selected_activity_settings .settings-section-hint {
  font: 400 11.5px var(--font-ui); color: var(--ink-500, #6b7c93);
}
/* Cards/sections → borderless stacks like the prototype. */
#selected_activity_settings .settings-card,
#selected_activity_settings .settings-section {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
/* Field wrappers + labels. */
#selected_activity_settings .field,
#selected_activity_settings .settings-field { display: flex; flex-direction: column; gap: 4px; }
#selected_activity_settings .label,
#selected_activity_settings .field > label,
#selected_activity_settings .settings-field > label {
  font: 600 12px var(--font-ui); color: var(--ink-700, #425466);
}
/* Inputs / selects / textareas — appearance only (no forced width, so flex
   rows + chip editors keep their shape). */
#selected_activity_settings input[type="text"],
#selected_activity_settings input[type="number"],
#selected_activity_settings input[type="password"],
#selected_activity_settings input.input,
#selected_activity_settings .input,
#selected_activity_settings select,
#selected_activity_settings .select,
#selected_activity_settings .activity-settings-select,
#selected_activity_settings textarea,
#selected_activity_settings .textarea {
  padding: 8px 10px; border-radius: var(--radius-control, 6px);
  border: 1px solid var(--line, #e3e8ee);
  background: var(--surface, #fff); color: var(--ink-900, #1a1f36);
  font: 400 13px var(--font-ui, "Space Grotesk", sans-serif);
  transition: border-color 0.12s var(--ease, ease), box-shadow 0.12s var(--ease, ease);
}
#selected_activity_settings input:focus,
#selected_activity_settings select:focus,
#selected_activity_settings textarea:focus {
  outline: none; border-color: var(--brand-500, #1f4fd6);
  box-shadow: 0 0 0 3px rgba(31, 79, 214, 0.15);
}
/* Stacked fields fill the column; inline (flex-row) ones are left alone. */
#selected_activity_settings .field > input,
#selected_activity_settings .field > select,
#selected_activity_settings .field > textarea,
#selected_activity_settings .settings-field > input,
#selected_activity_settings .settings-field > select,
#selected_activity_settings .settings-field > textarea {
  width: 100%; box-sizing: border-box;
}
/* Code-ish single-line inputs (URLs, expressions) read better monospace. */
#selected_activity_settings input.input_value,
#selected_activity_settings .df-params-value,
#selected_activity_settings .df-params-name {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
}
/* Settings buttons → brand-tinted like the prototype's add/AI buttons. */
#selected_activity_settings .settings-button,
#selected_activity_settings button.buttons {
  border: 1px solid var(--line, #e3e8ee);
  background: var(--surface, #fff); color: var(--ink-900, #1a1f36);
  border-radius: var(--radius-control, 6px); padding: 7px 12px;
  font: 600 12.5px var(--font-ui); cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
#selected_activity_settings .settings-button:hover,
#selected_activity_settings button.buttons:hover {
  border-color: var(--brand-300, var(--brand-200, #b6c8ff)); color: var(--brand-600, #1b44b8);
  background: var(--brand-50, #eef3ff);
}

/* ===================================================================
   Phase A — HTTP Request settings → etl-studio flat eyebrow sections.
   Flatten the collapsible hr cards (card border + gradient header + bold
   label) into the prototype's FormSection look: no card chrome, an uppercase
   section eyebrow, brand badge pill, flat body. Collapsible behaviour stays.
   =================================================================== */
#selected_activity_settings .hr-section {
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none !important; overflow: visible;
  margin: 0; border-top: 1px solid var(--line, #e3e8ee); padding-top: 8px;
}
#selected_activity_settings .hr-settings > .hr-section:first-child {
  border-top: 0; padding-top: 0;
}
#selected_activity_settings .hr-summary {
  background: transparent; padding: 4px 0; gap: 8px;
}
#selected_activity_settings .hr-summary::before {
  color: var(--ink-300, #aab7c4); font-size: 10px;
}
#selected_activity_settings .hr-summary-label {
  font: 700 11px var(--font-ui, "Space Grotesk", sans-serif);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-700, #425466);
}
#selected_activity_settings .hr-summary-badge {
  font: 600 10px var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--brand-600, #1b44b8); background: var(--brand-50, #eef3ff);
  padding: 2px 7px; border-radius: 999px; margin-left: auto;
}
#selected_activity_settings .hr-section-body { padding: 8px 0 4px; gap: 10px; }
#selected_activity_settings .hr-field > label,
#selected_activity_settings .hr-field .label {
  font: 600 12px var(--font-ui); color: var(--ink-700, #425466);
}

/* Ad-hoc activity labels: several transforms emit <label style="color:black">
   inline. Re-point them to the prototype's slate label colour (and fix dark
   mode — inline black was unreadable on the dark settings panel). Scoped to
   inline-coloured labels so intentionally-styled labels are left alone. */
#selected_activity_settings label[style*="color"] {
  color: var(--ink-700, #425466) !important;
}
html[data-theme="dark"] #selected_activity_settings label[style*="color"] {
  color: var(--ink-700, #93a4b8) !important;
}

/* ===================================================================
   Phase A/B — shared activity settings chrome (activity-settings-*).
   Used by dataflow, pipeline, notebook, stream and sql activities; it was
   unstyled, so map it onto the etl-studio FormSection: uppercase eyebrow
   title, hint subtitle, flat hairline-separated sections, clean fields.
   =================================================================== */
#selected_activity_settings .activity-settings-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--line, #e3e8ee);
}
#selected_activity_settings .activity-settings-card:first-child {
  border-top: 0; padding-top: 2px;
}
#selected_activity_settings .activity-settings-header {
  display: flex; flex-direction: column; gap: 2px;
}
#selected_activity_settings .activity-settings-title {
  font: 700 11px var(--font-ui, "Space Grotesk", sans-serif);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-700, #425466);
}
#selected_activity_settings .activity-settings-subtitle {
  font: 400 11.5px var(--font-ui); color: var(--ink-500, #6b7c93);
}
#selected_activity_settings .activity-settings-field {
  display: flex; flex-direction: column; gap: 4px;
}
#selected_activity_settings .activity-settings-field > label {
  font: 600 12px var(--font-ui); color: var(--ink-700, #425466);
}

/* ===================================================================
   Empty-canvas placeholder — etl-studio EmptyCanvasPlaceholder.
   Shown centered in the workspace when a section is opened with no activity
   to restore (no last-opened item), instead of a blank canvas / launcher.
   =================================================================== */
.etl-empty-canvas {
  position: absolute; left: 0; right: 0; top: var(--etl-topbar-h, 56px); bottom: 0;
  z-index: 8; display: flex; align-items: center; justify-content: center;
  /* Solid plain background so the dotted canvas + "+ Import" placeholder
     behind it are hidden — the card reads as a popup on a normal background,
     not over the live canvas. (Sits below the bottom panel, z-index 10.) */
  background: var(--surface-2, #f6f9fc);
  pointer-events: auto;
}
.etl-empty-canvas[hidden] { display: none; }
.etl-empty-card {
  pointer-events: auto; max-width: 380px; padding: 28px 32px 24px;
  margin-bottom: 90px;   /* lift above the bottom inspector panel */
  background: var(--surface, #fff); border: 1px solid var(--line, #e3e8ee);
  border-radius: var(--radius-lg, 8px); box-shadow: var(--shadow-2);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.etl-empty-illu { position: relative; width: 180px; height: 60px; margin-bottom: 4px; }
.etl-empty-illu svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.etl-empty-node {
  position: absolute; width: 56px; height: 32px;
  background: var(--surface, #fff); border: 1px solid var(--line, #e3e8ee);
  border-radius: var(--radius-md, 6px); box-shadow: var(--shadow-1);
}
.etl-empty-node--brand { border-color: var(--brand-200, #b6c8ff); background: var(--brand-50, #eef3ff); }
.etl-empty-title { margin: 0; font: 600 17px/1.3 var(--font-ui); color: var(--ink-900, #1a1f36); }
.etl-empty-sub { margin: 0; font: 400 12.5px/1.5 var(--font-ui); color: var(--ink-500, #6b7c93); max-width: 320px; }
.etl-empty-cta {
  height: 36px; padding: 0 18px; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-500, #1f4fd6); color: #fff;
  border: 1px solid var(--brand-700, #1438a8); border-radius: var(--radius-md, 6px);
  font: 600 13px var(--font-ui); cursor: pointer; box-shadow: var(--shadow-2);
}
.etl-empty-cta:hover { background: var(--brand-600, #1b44b8); }
.etl-empty-tips {
  display: flex; gap: 16px; padding-top: 6px;
  font: 400 11px var(--font-ui); color: var(--ink-500, #6b7c93);
}
.etl-empty-tips kbd {
  display: inline-block; padding: 1px 5px;
  font: 600 10px var(--font-mono, monospace); color: var(--ink-700, #425466);
  background: var(--surface-2, #f6f9fc); border: 1px solid var(--line, #e3e8ee); border-radius: 3px;
}

/* ===================================================================
   Phase B — Copy Data settings → etl-studio flat eyebrow sections
   (mirrors the HTTP Request re-skin; cd-* uses the same collapsible pattern).
   =================================================================== */
#selected_activity_settings .cd-section {
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none !important; overflow: visible;
  margin: 0; border-top: 1px solid var(--line, #e3e8ee); padding-top: 8px;
}
#selected_activity_settings .cd-section:first-of-type { border-top: 0; padding-top: 2px; }
#selected_activity_settings .cd-summary { background: transparent; padding: 4px 0; gap: 8px; }
#selected_activity_settings .cd-summary::before {
  color: var(--ink-300, #aab7c4); font-size: 10px;
}
#selected_activity_settings .cd-summary-label {
  font: 700 11px var(--font-ui, "Space Grotesk", sans-serif);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-700, #425466);
}
#selected_activity_settings .cd-summary-badge {
  font: 600 10px var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--brand-600, #1b44b8); background: var(--brand-50, #eef3ff);
  padding: 2px 7px; border-radius: 999px; margin-left: auto;
}

/* ===================================================================
   Phase B — For Loop settings → etl-studio flat eyebrow sections.
   Flatten the fl-section cards (border/radius) into flat hairline sections
   and turn the fl-q question into an uppercase slate eyebrow. The nested
   "--inner" group keeps a subtle box; radio options are untouched.
   =================================================================== */
#selected_activity_settings .fl-section {
  background: transparent; border: 0; border-radius: 0; padding: 0;
  border-top: 1px solid var(--line, #e3e8ee); padding-top: 10px; gap: 8px;
}
#selected_activity_settings .fl-section:first-of-type { border-top: 0; padding-top: 2px; }
#selected_activity_settings .fl-section--inner {
  background: var(--surface-2, #f6f9fc); border: 1px solid var(--line, #e3e8ee);
  border-radius: 8px; padding: 10px 12px;
}
#selected_activity_settings .fl-q {
  font: 700 11px var(--font-ui, "Space Grotesk", sans-serif);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-700, #425466);
}

/* ===================================================================
   Nested tabs for the selected-activity settings (etlTabifyVisibleSettings).
   Each activity's top-level sections become a tab strip; only one section's
   2-3 fields show at a time, so the panel is never overwhelming.
   =================================================================== */
#selected_activity_settings .etl-settings-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 2px 0 14px; padding: 3px;
  background: var(--surface-2, #f6f9fc);
  border: 1px solid var(--line, #e3e8ee); border-radius: 8px;
}
#selected_activity_settings .etl-settings-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 12px; border-radius: 6px;
  font: 600 11.5px var(--font-ui, "Space Grotesk", sans-serif);
  color: var(--ink-500, #6b7c93);
  transition: background 0.12s var(--ease, ease), color 0.12s var(--ease, ease);
}
#selected_activity_settings .etl-settings-tab:hover { color: var(--ink-900, #1a1f36); }
#selected_activity_settings .etl-settings-tab.is-active {
  background: var(--surface, #fff); color: var(--brand-600, #1b44b8);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(15, 23, 42, 0.08));
}
/* A tabified section: the tab IS its header, so drop the section's own
   header/caret/hairline. */
#selected_activity_settings .etl-tab-section {
  border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important;
}
#selected_activity_settings .etl-tab-section > summary { display: none !important; }

/* Remove the "Saved" tab from the bottom inspector panel everywhere — the
   left workspace sidebar is the saved-files list now, so it's redundant.
   (Hidden, not deleted, so the JS that references #tabSaved/#tab_saved stays
   null-safe; General remains the default tab.) */
#tabSaved, #tab_saved { display: none !important; }

/* ===================================================================
   Workspace sidebar — 3-dots options menu + folders (dataflows / pipelines
   / notebooks). Tokens throughout, so dark-mode safe.
   =================================================================== */
.efs-tile-row { display: flex; align-items: center; gap: 2px; }
.efs-tile-row .efs-tile { flex: 1 1 auto; min-width: 0; }
.efs-kebab {
  flex: none; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-sm, 6px);
  color: var(--ink-500, #6b7c93); opacity: 0;
  transition: opacity 0.12s var(--ease, ease), background 0.12s, color 0.12s;
}
.efs-tile-row:hover .efs-kebab, .efs-kebab:focus-visible { opacity: 1; }
.efs-kebab:hover { background: var(--surface-3, #eef2f7); color: var(--ink-900, #1a1f36); }

/* folders */
.efs-folder { display: flex; flex-direction: column; }
.efs-folder-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; cursor: pointer;
  border-radius: var(--radius-md, 6px); user-select: none;
  font: 600 12px var(--font-ui, "Space Grotesk", sans-serif); color: var(--ink-700, #425466);
}
.efs-folder-head:hover { background: var(--surface-3, #eef2f7); }
.efs-folder-head .efs-chev { display: inline-block; transition: transform 140ms var(--ease, ease); font-size: 10px; color: var(--ink-500, #6b7c93); }
.efs-folder.is-open > .efs-folder-head .efs-chev { transform: rotate(90deg); }
.efs-folder-ico { font-size: 13px; }
.efs-folder-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efs-folder-del { flex: none; width: 18px; height: 18px; border: 0; background: transparent; color: var(--ink-300, #aab7c4); cursor: pointer; border-radius: 4px; font-size: 14px; line-height: 1; opacity: 0; }
.efs-folder-head:hover .efs-folder-del { opacity: 1; }
.efs-folder-del:hover { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
.efs-folder-body { display: none; flex-direction: column; gap: 2px; padding-left: 12px; }
.efs-folder.is-open > .efs-folder-body { display: flex; }
.efs-newfolder {
  border: 1px solid var(--line, #e3e8ee); background: var(--surface, #fff); color: var(--ink-500, #6b7c93);
  border-radius: var(--radius-sm, 6px); padding: 3px 7px; font: 600 11px var(--font-ui); cursor: pointer; line-height: 1;
}
.efs-newfolder:hover { border-color: var(--brand-200, #b6c8ff); color: var(--brand-600, #1b44b8); }

/* 3-dots options menu */
.efs-menu {
  position: fixed; z-index: 9000; min-width: 170px; max-width: 240px;
  background: var(--surface, #fff); border: 1px solid var(--line, #e3e8ee);
  border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-2);
  padding: 5px; display: flex; flex-direction: column; gap: 1px;
}
.efs-menu[hidden] { display: none; }
.efs-menu-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 7px 9px; border-radius: var(--radius-sm, 6px);
  font: 500 12.5px var(--font-ui, "Space Grotesk", sans-serif); color: var(--ink-900, #1a1f36);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.efs-menu-item:hover { background: var(--brand-50, #eef3ff); color: var(--brand-700, #1438a8); }
.efs-menu-item.is-active { color: var(--brand-600, #1b44b8); font-weight: 600; }
.efs-menu-del { color: #b91c1c; }
.efs-menu-del:hover { background: rgba(185, 28, 28, 0.1); color: #b91c1c; }
.efs-menu-sep { height: 1px; background: var(--line, #e3e8ee); margin: 4px 2px; }
.efs-menu-label { font: 700 9.5px var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500, #6b7c93); padding: 4px 9px 2px; }
.efs-menu-new { color: var(--brand-600, #1b44b8); }

/* ===================================================================
   Dark mode — bottom inspector panel form fields + global form controls,
   and a CodeMirror dark theme (notebook + SQL + activity-settings editors).
   These hardcode (or resolve to) white surfaces; force them dark.
   =================================================================== */
/* Bottom panel panels/cards + form controls */
html[data-theme="dark"] .general-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card-shell {
  background: var(--surface, #121821) !important;
  border-color: var(--line, #283243) !important;
}
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] #footer input[type="text"],
html[data-theme="dark"] #footer input[type="number"],
html[data-theme="dark"] #footer input:not([type]),
html[data-theme="dark"] #footer textarea,
html[data-theme="dark"] #footer select {
  background: var(--surface, #121821) !important;
  color: var(--ink-900, #e8edf4) !important;
  border-color: var(--line-strong, #3a4658) !important;
}
html[data-theme="dark"] .label { color: var(--ink-700, #c2cdda); }

/* CodeMirror dark theme — the code cells (notebook), SQL editor, and any
   in-settings code editors render white otherwise. */
html[data-theme="dark"] .CodeMirror {
  background: #0f1626 !important; color: #e8edf4 !important;
}
html[data-theme="dark"] .CodeMirror-gutters {
  background: #0b101a !important; border-right-color: var(--line, #283243) !important;
}
html[data-theme="dark"] .CodeMirror-linenumber { color: #586379 !important; }
html[data-theme="dark"] .CodeMirror-cursor { border-left: 1px solid #e8edf4 !important; }
html[data-theme="dark"] div.CodeMirror-selected { background: rgba(31, 79, 214, 0.35) !important; }
html[data-theme="dark"] .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.04) !important; }
html[data-theme="dark"] .cm-keyword { color: #c792ea !important; }
html[data-theme="dark"] .cm-atom,
html[data-theme="dark"] .cm-number { color: #f78c6c !important; }
html[data-theme="dark"] .cm-string,
html[data-theme="dark"] .cm-string-2 { color: #c3e88d !important; }
html[data-theme="dark"] .cm-comment { color: #6b7c93 !important; }
html[data-theme="dark"] .cm-def,
html[data-theme="dark"] .cm-variable,
html[data-theme="dark"] .cm-variable-2,
html[data-theme="dark"] .cm-variable-3,
html[data-theme="dark"] .cm-property { color: #e8edf4 !important; }
html[data-theme="dark"] .cm-operator { color: #89ddff !important; }
html[data-theme="dark"] .cm-builtin,
html[data-theme="dark"] .cm-tag,
html[data-theme="dark"] .cm-attribute,
html[data-theme="dark"] .cm-meta { color: #82aaff !important; }

/* ===================================================================
   Dark mode — make ALL secondary buttons + toolbar selects dark, re-assert
   the colored primary buttons, and fix the selected workspace item label.
   Many buttons hardcode white/light surfaces and stayed white in dark.
   =================================================================== */
html[data-theme="dark"] .nb-btn,
html[data-theme="dark"] .buttons,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .flow-params-btn,
html[data-theme="dark"] .create-trigger-button,
html[data-theme="dark"] .split-toggle,
html[data-theme="dark"] .sql-insights-btn,
html[data-theme="dark"] .whse-selection-btn,
html[data-theme="dark"] .sql-view-btn,
html[data-theme="dark"] .sql-results-csv,
html[data-theme="dark"] .sql-results-filter,
html[data-theme="dark"] .zoom-controls button,
html[data-theme="dark"] .google-login-button,
html[data-theme="dark"] .import-placeholder {
  background: var(--surface, #121821) !important;
  color: var(--ink-900, #e8edf4) !important;
  border-color: var(--line-strong, #3a4658) !important;
}
/* toolbar / modal selects */
html[data-theme="dark"] .pipeline-run select,
html[data-theme="dark"] .flow-session-pick select,
html[data-theme="dark"] .sql-session-pick select,
html[data-theme="dark"] .sql-toolbar select,
html[data-theme="dark"] .nb-toolbar select,
html[data-theme="dark"] .nb-spark-row select,
html[data-theme="dark"] #pipeline_session_pick,
html[data-theme="dark"] #sql_session_pick,
html[data-theme="dark"] #trigger_recurrence_unit,
html[data-theme="dark"] .trigger-modal select,
html[data-theme="dark"] .trigger-modal input,
html[data-theme="dark"] .sql-modal select,
html[data-theme="dark"] .sql-modal input {
  background: var(--surface, #121821) !important;
  color: var(--ink-900, #e8edf4) !important;
  border-color: var(--line-strong, #3a4658) !important;
}
/* hover for the secondary buttons */
html[data-theme="dark"] .nb-btn:hover,
html[data-theme="dark"] .buttons:hover,
html[data-theme="dark"] .flow-params-btn:hover,
html[data-theme="dark"] .create-trigger-button:hover,
html[data-theme="dark"] .split-toggle:hover,
html[data-theme="dark"] .sql-insights-btn:hover,
html[data-theme="dark"] .whse-selection-btn:hover {
  background: var(--surface-3, #1a212c) !important;
  border-color: var(--brand-500, #1f4fd6) !important;
  color: var(--ink-900, #e8edf4) !important;
}
/* re-assert the COLORED primary buttons so they keep their accent in dark */
html[data-theme="dark"] .nb-btn-run { background: #157a3a !important; color: #fff !important; border-color: #157a3a !important; }
html[data-theme="dark"] .nb-btn-run:hover { background: #1a934a !important; }
html[data-theme="dark"] .nb-btn-primary { background: var(--brand-500, #1f4fd6) !important; color: #fff !important; border-color: var(--brand-500, #1f4fd6) !important; }
html[data-theme="dark"] .nb-btn-stop { background: #7f1d1d !important; color: #fee2e2 !important; border-color: #7f1d1d !important; }
html[data-theme="dark"] .nb-btn-ai,
html[data-theme="dark"] .sql-ai-btn { background: rgba(31, 79, 214, 0.22) !important; color: #cdd9ff !important; border-color: var(--brand-500, #1f4fd6) !important; }
html[data-theme="dark"] #run_pipeline { background: var(--brand-500, #1f4fd6) !important; color: #fff !important; border-color: var(--brand-500, #1f4fd6) !important; }

/* G: selected workspace item — its brand-50 highlight + dark text blended in
   dark mode. Use a dark brand tint with a light brand label so it reads. */
html[data-theme="dark"] .efs-tile.is-active { background: rgba(31, 79, 214, 0.28) !important; border-color: var(--brand-500, #1f4fd6) !important; }
html[data-theme="dark"] .efs-tile.is-active .efs-tile-label { color: #d7e2ff !important; }
html[data-theme="dark"] .efs-tile:hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .efs-folder-head:hover { background: rgba(255, 255, 255, 0.06); }

/* ===================================================================
   Dark mode — bottom-panel tabbed content (Settings / Run details /
   Activities / Data preview). Several nested panels, tables and result
   boxes hardcode white; force them all dark.
   =================================================================== */
html[data-theme="dark"] #selected_activity_settings { background: transparent !important; }
html[data-theme="dark"] #tab_run_details,
html[data-theme="dark"] .run-details-toolbar,
html[data-theme="dark"] .run-details-summary,
html[data-theme="dark"] .run-details-table-wrap,
html[data-theme="dark"] .run-details-table,
html[data-theme="dark"] .run-details-table tbody tr {
  background: var(--surface-2, #0c111a) !important;
  color: var(--ink-900, #e8edf4) !important;
}
html[data-theme="dark"] .run-details-table thead th {
  background: var(--surface-3, #1a212c) !important;
  color: var(--ink-900, #e8edf4) !important;
  border-color: var(--line, #283243) !important;
}
html[data-theme="dark"] .run-details-table tbody td {
  color: var(--ink-700, #c2cdda) !important;
  border-color: var(--line, #283243) !important;
}
html[data-theme="dark"] .run-details-table tbody tr:hover { background: rgba(255, 255, 255, 0.05) !important; }
html[data-theme="dark"] .hr-test-output,
html[data-theme="dark"] .hr-test-pre,
html[data-theme="dark"] .hr-test-details {
  background: var(--surface, #121821) !important;
  color: var(--ink-900, #e8edf4) !important;
  border-color: var(--line, #283243) !important;
}
/* run-details modal */
html[data-theme="dark"] .run-details-modal-panel,
html[data-theme="dark"] .run-details-modal-section,
html[data-theme="dark"] .run-details-modal-traceback,
html[data-theme="dark"] .run-details-modal-req-block {
  background: var(--surface, #121821) !important;
  color: var(--ink-900, #e8edf4) !important;
  border-color: var(--line, #283243) !important;
}
/* broad catch — any remaining tables/panels in the bottom panel */
html[data-theme="dark"] #footer table { background: var(--surface-2, #0c111a) !important; }
html[data-theme="dark"] #footer thead th { background: var(--surface-3, #1a212c) !important; color: var(--ink-900, #e8edf4) !important; }
html[data-theme="dark"] #footer tbody td { color: var(--ink-700, #c2cdda) !important; }
html[data-theme="dark"] #footer .panel,
html[data-theme="dark"] #footer .settings-card,
html[data-theme="dark"] #footer .card,
html[data-theme="dark"] #footer [class*="-card"] {
  background: var(--surface, #121821) !important;
  border-color: var(--line, #283243) !important;
}

/* In the PIPELINE view, the bottom panel drops the Activities + Scheduled
   triggers tabs (data-etl-canvas is set to "pipeline" by setActivePipelineType).
   Hide the buttons + their content so a stale active tab can't linger. */
body[data-etl-canvas="pipeline"] #tabActivities,
body[data-etl-canvas="pipeline"] #tabScheduledTriggers,
body[data-etl-canvas="pipeline"] #tab_activities,
body[data-etl-canvas="pipeline"] #scheduled_triggers { display: none !important; }

/* Run details tab only appears after the current flow has actually run (both
   dataflow + pipeline). body.etl-has-run is toggled in _renderRunDetailsNow
   based on whether the flow has run entries. */
#tabRunDetails { display: none !important; }
body.etl-has-run #tabRunDetails { display: block !important; }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARDS — re-skin of the live #dashboard view to the etl-studio
   prototype (DashboardWorkspace.jsx): header + 3-pane body
   [ dashboard list | tile grid | tile inspector ]. Real data/charts/
   collab are preserved; only the chrome is the kit. Tokens (--brand-*,
   --ink-*, --surface-*, etc.) come from etl-design-system.css.
   ════════════════════════════════════════════════════════════════════ */
#dashboard_workspace { height: 100%; min-height: 0; }
#dashboard_workspace #dbx_root { height: 100%; }

.kit-eyebrow { font: 700 11px var(--font-ui); color: var(--brand-500); text-transform: uppercase; letter-spacing: 0.08em; }
.kit-wh-sep { color: var(--ink-300); font: 400 14px var(--font-ui); }

.kit-dash { height: 100%; display: flex; flex-direction: column; background: var(--surface-2); }
.kit-dash-head {
  flex-shrink: 0; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px; padding: 14px 22px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.kit-dash-breadcrumb { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.kit-dash-name { font: 600 17px var(--font-ui); color: var(--ink-900); letter-spacing: -0.005em; }
.kit-dash-name-meta { font: 400 11.5px var(--font-mono); color: var(--ink-500); white-space: nowrap; }
.kit-dash-actions { display: inline-flex; gap: 8px; justify-self: end; }
.kit-dash-filters {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-md); justify-self: start;
}
.kit-dash-filters-label { font: 700 9.5px var(--font-ui); color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.08em; }
.kit-dash-filters select {
  height: 26px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink-900); font: 500 12px var(--font-ui); padding: 0 6px;
}

.kit-dash-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr 340px; overflow: hidden; }

.kit-wh-zones { background: #fff; border-right: 1px solid var(--line); padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.kit-wh-zones-head { padding: 6px 10px 8px; font: 700 10.5px var(--font-ui); color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.08em; }
.kit-wh-zone { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-align: left; width: 100%; transition: background 120ms var(--ease), border-color 120ms var(--ease); }
.kit-wh-zone:hover { background: var(--surface-2); border-color: var(--line); }
.kit-wh-zone.is-active { background: var(--brand-50); border-color: var(--brand-200); }
.kit-wh-zone.is-active strong { color: var(--brand-700); }
.kit-wh-zone-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.kit-wh-zone-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.2; overflow: hidden; }
.kit-wh-zone-text strong { font: 600 13px var(--font-ui); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-wh-zone-text .dim { font: 500 11px var(--font-mono); color: var(--ink-500); }
.kit-dash-newdash { margin: 10px 4px 4px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; background: transparent; border: 1px dashed var(--brand-200); color: var(--brand-500); border-radius: var(--radius-md); font: 600 12px var(--font-ui); cursor: pointer; }
.kit-dash-newdash:hover { background: var(--brand-50); border-style: solid; }

.kit-dash-canvas { background: var(--surface-2); overflow: auto; padding: 18px 22px 22px; }
.kit-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.kit-dash-empty { grid-column: 1 / -1; padding: 60px 12px; text-align: center; color: var(--ink-500); font: 400 13px var(--font-ui); }
.kit-dash-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); display: flex; flex-direction: column; cursor: pointer; transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease); min-height: 220px; overflow: hidden; }
.kit-dash-tile:hover { border-color: var(--brand-200); box-shadow: var(--shadow-2); }
.kit-dash-tile.is-selected { border-color: var(--brand-500); box-shadow: 0 0 0 1px var(--brand-500), var(--shadow-2); }
.kit-dash-tile--wide { grid-column: span 2; }
.kit-dash-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 6px; }
.kit-dash-tile-title { font: 600 11.5px var(--font-ui); color: var(--ink-700); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-dash-tile-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.kit-dash-tile-type { font: 700 9px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); padding: 1px 5px; background: var(--surface-2); border-radius: 3px; }
.kit-dash-tile-more { width: 22px; height: 22px; background: transparent; border: none; border-radius: 3px; color: var(--ink-500); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
.kit-dash-tile-more:hover { background: var(--surface-3); color: var(--ink-900); }
.kit-dash-tile-body { flex: 1; padding: 6px 12px 12px; min-height: 0; position: relative; }
.kit-dash-tile-body canvas { max-width: 100%; }

.kit-wh-details { background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: auto; padding: 18px 18px 22px; gap: 14px; }
.kit-wh-no-sel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 12px; color: var(--ink-500); font: 400 12.5px var(--font-ui); text-align: center; }
.kit-wh-det-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.kit-wh-det-path { font: 500 11px var(--font-mono); color: var(--ink-500); margin-bottom: 2px; }
.kit-wh-det-name { margin: 0; font: 600 15px var(--font-ui); color: var(--ink-900); letter-spacing: -0.005em; word-break: break-all; }
.kit-wh-det-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.kit-wh-det-meta > div { display: flex; flex-direction: column; gap: 2px; font: 500 12.5px var(--font-ui); color: var(--ink-900); }
.kit-wh-det-meta .dim { font: 700 9.5px var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); }
.kit-wh-det-meta .mono { font-family: var(--font-mono); font-size: 12px; }
.kit-wh-det-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.kit-wh-det-section { display: flex; flex-direction: column; gap: 6px; }
.kit-fs-section-head { display: flex; align-items: baseline; gap: 10px; }
.kit-fs-section-title { font: 700 11px var(--font-ui); color: var(--ink-700); text-transform: uppercase; letter-spacing: 0.06em; }
.kit-fs-section-hint { font: 400 11.5px var(--font-ui); color: var(--ink-500); }
.kit-fs-test { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); color: var(--ink-700); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 600 12px var(--font-ui); cursor: pointer; }
.kit-fs-test:hover { background: var(--brand-50); color: var(--brand-500); border-color: var(--brand-200); }
.kit-dash-query { margin: 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 400 11.5px/1.55 var(--font-mono); color: var(--ink-900); white-space: pre-wrap; max-height: 220px; overflow: auto; }

.kit-flow-toolbar-btn { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); font: 600 12px var(--font-ui); color: var(--ink-700); cursor: pointer; transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease); }
.kit-flow-toolbar-btn:hover { background: var(--surface-2); color: var(--ink-900); border-color: var(--line-strong, var(--line)); }
.kit-flow-toolbar-btn--primary { color: var(--brand-600); background: var(--brand-50); border-color: var(--brand-200); }
.kit-flow-toolbar-btn--primary:hover { background: var(--brand-100); color: var(--brand-600); border-color: var(--brand-300, var(--brand-200)); }

/* dark-mode: tokens flip automatically, but the kit hardcodes a few #fff */
html[data-theme="dark"] .kit-dash-head,
html[data-theme="dark"] .kit-wh-zones,
html[data-theme="dark"] .kit-wh-details,
html[data-theme="dark"] .kit-dash-tile,
html[data-theme="dark"] .kit-dash-filters select,
html[data-theme="dark"] .kit-flow-toolbar-btn { background: var(--surface, #121821); }
html[data-theme="dark"] .kit-flow-toolbar-btn--primary { background: var(--brand-50); }

/* ════════════════════════════════════════════════════════════════════
   MOBILE (monitor & view) — all rules gated on body.etl-mobile, which the
   mobile shell JS sets only at <=768px. Desktop never gets the class, so
   the desktop layout is completely unaffected.
   ════════════════════════════════════════════════════════════════════ */
#etlMobileTabs, #etlMobileDrawer, #etlMobileScrim, #etlMobileFallback { display: none; }

body.etl-mobile #etlRail,
body.etl-mobile #etlFileSidebar,
body.etl-mobile #efsReopen,
body.etl-mobile #sidebar,
body.etl-mobile #sidebarToggleFloating,
body.etl-mobile #topNav { display: none !important; }

body.etl-mobile .content-wrapper { margin-left: 0 !important; width: 100% !important; }
body.etl-mobile .content { padding-bottom: 60px; }

/* bottom tab bar */
body.etl-mobile #etlMobileTabs {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--surface, #fff); border-top: 1px solid var(--line, #e3e8ee);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}
.etl-mtab {
  flex: 1; border: 0; background: transparent; display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 7px 0; border-radius: 12px;
  color: var(--ink-500, #6b7c93); font: 600 10.5px var(--font-ui, system-ui, sans-serif);
}
.etl-mtab .ic { font-size: 20px; line-height: 1; }
.etl-mtab.is-active { color: var(--brand-600, #1a43b8); background: var(--brand-50, #eef3ff); }

/* slide-in "More" drawer */
body.etl-mobile #etlMobileScrim {
  display: block; position: fixed; inset: 0; z-index: 1001; background: rgba(20,30,60,.4);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
body.etl-mobile #etlMobileScrim.show { opacity: 1; pointer-events: auto; }
body.etl-mobile #etlMobileDrawer {
  display: block; position: fixed; top: 0; bottom: 0; right: 0; width: 76%; max-width: 320px; z-index: 1002;
  background: var(--surface, #fff); padding: 18px 14px; overflow-y: auto;
  transform: translateX(110%); transition: transform .25s cubic-bezier(.2,.7,.2,1);
  box-shadow: -8px 0 30px rgba(20,30,60,.25);
}
body.etl-mobile #etlMobileDrawer.show { transform: translateX(0); }
.etl-md-t { font: 700 10.5px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); margin: 14px 6px 4px; }
.etl-md-i { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; text-align: left;
  padding: 12px 10px; border-radius: 11px; font: 600 14.5px var(--font-ui); color: var(--ink-900); }
.etl-md-i:active { background: var(--surface-2); }
.etl-md-i .ic { font-size: 18px; width: 22px; text-align: center; }
.etl-md-i .bd { margin-left: auto; font: 600 9.5px var(--font-ui); color: var(--ink-500); background: var(--surface-3); border-radius: 6px; padding: 2px 7px; }

/* "best on desktop" fallback overlay */
body.etl-mobile #etlMobileFallback {
  display: flex; position: fixed; left: 0; right: 0; top: 0; bottom: 60px; z-index: 900;
  align-items: center; justify-content: center; padding: 24px; background: var(--surface-2, #f6f9fc);
  opacity: 0; pointer-events: none;
}
body.etl-mobile #etlMobileFallback.show { opacity: 1; pointer-events: auto; }
.etl-mf-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 280px; }
.etl-mf-ico { font-size: 46px; }
.etl-mf-card h3 { margin: 0; font: 600 18px var(--font-ui); color: var(--ink-900); }
.etl-mf-card p { margin: 0; font: 400 13.5px/1.5 var(--font-ui); color: var(--ink-500); }
.etl-mf-btn { margin-top: 6px; border: 1px solid var(--brand-200); background: var(--brand-50); color: var(--brand-600);
  border-radius: 10px; padding: 10px 16px; font: 600 13px var(--font-ui); }

/* Dashboards → single column (zones become a horizontal strip, inspector hidden) */
body.etl-mobile .kit-dash-body { display: flex; flex-direction: column; }
body.etl-mobile .kit-wh-details { display: none; }
body.etl-mobile .kit-wh-zones {
  flex: none; flex-direction: row; gap: 8px; overflow-x: auto; border-right: 0;
  border-bottom: 1px solid var(--line); padding: 10px;
}
body.etl-mobile .kit-wh-zones .kit-wh-zones-head, body.etl-mobile .kit-dash-newdash { display: none; }
body.etl-mobile .kit-wh-zone { flex: none; white-space: nowrap; }
body.etl-mobile .kit-dash-canvas { padding: 14px; }
body.etl-mobile .kit-dash-grid { grid-template-columns: 1fr !important; }
body.etl-mobile .kit-dash-tile--wide { grid-column: auto !important; }
body.etl-mobile .kit-dash-head { grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px; }
body.etl-mobile .kit-dash-filters { display: none; }

/* Warehouse / SQL → fill width, hide side panels, tables scroll sideways */
body.etl-mobile #sql_files_panel, body.etl-mobile #nb_vars_panel { display: none !important; }
body.etl-mobile #sql_workspace table, body.etl-mobile .content table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }

/* ── Re-skin mobile fixes: the workspaces use whse-*/sql-*/CodeMirror
   classes the original mobile layer didn't target, so they overflowed. ── */
/* Never let the page itself scroll sideways. */
body.etl-mobile,
body.etl-mobile .content,
body.etl-mobile .content-wrapper { overflow-x: hidden; max-width: 100vw; }

/* Warehouse: collapse the 2-column grid to a single stacked column. */
body.etl-mobile .whse-layout { grid-template-columns: 1fr !important; }
body.etl-mobile .whse-sidebar,
body.etl-mobile .whse-main,
body.etl-mobile .whse-workspace { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
/* Warehouse toolbars/rows wrap instead of running off-screen. */
body.etl-mobile .whse-bulkbar,
body.etl-mobile .whse-selection-bar,
body.etl-mobile .whse-files-head,
body.etl-mobile .whse-toolbar { flex-wrap: wrap !important; gap: 8px; }

/* SQL: wrap the toolbar buttons; keep the editor within the screen. */
body.etl-mobile .sql-toolbar,
body.etl-mobile .sql-toolbar-actions { flex-wrap: wrap !important; row-gap: 8px; }
body.etl-mobile .sql-main-area,
body.etl-mobile .CodeMirror { max-width: 100% !important; width: 100% !important; }

/* Dashboard header: let the title + action buttons wrap, not overlap. */
body.etl-mobile .kit-dash-head { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; }
body.etl-mobile .kit-dash-head > * { min-width: 0; }