:root {
    /* Color tokens (light + dark) live in etl-design-system.css — only
       layout/shape vars belong here. */

    /* ── Stacking layers ────────────────────────────────────────────────
       Anything that opens ON TOP of the app belongs to one of these, so a
       new overlay never has to guess a number. The bottom panel (.footer)
       is z-index 10 and the top nav is 25 — every overlay must clear both,
       which is exactly what the schedule modal (z-index 20) did not.
         canvas-pop  menus anchored to the canvas (add-a-step, ingest)
         modal       full-screen dialogs + their backdrop
       Values above these (popovers ~9000, toasts) are left as they are. */
    --z-canvas-pop: 1200;
    --z-modal: 2000;

    --sidebar-width: 300px;
    --sidebar-gap: 20px;
    --sidebar-total: calc(var(--sidebar-width) + var(--sidebar-gap));
    --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;
  }

  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: var(--app-bg);
  }

  .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);
  }

  /* Per-view canvas tint — Pipeline (blue) vs Dataflow (teal) are distinguishable
     at a glance even before reading the header. Grounded (ui-ux-bot / Information
     Architecture for the Web and Beyond): colour is a legitimate DIFFERENTIATION
     cue but must be REDUNDANT (never the sole signal — here it reinforces the
     header title + icon) and kept low-saturation so it never harms node/edge
     legibility or figure-ground. The dot-grid dots carry the hue; the tint stays
     barely-there. `data-flow-kind` is set by syncFab() and removed on other
     views, so mode-specific canvas backgrounds (warehouse/sql/…) still win. */
  #chart_container[data-flow-kind="pipeline"] {
    background:
      radial-gradient(circle at center, rgba(31,79,214,0.10) 1px, transparent 1px) 0 0 / 16px 16px,
      linear-gradient(rgba(31,79,214,0.035), rgba(31,79,214,0.035)),
      var(--surface-2);
  }
  #chart_container[data-flow-kind="dataflow"] {
    background:
      radial-gradient(circle at center, rgba(15,118,110,0.11) 1px, transparent 1px) 0 0 / 16px 16px,
      linear-gradient(rgba(15,118,110,0.045), rgba(15,118,110,0.045)),
      var(--surface-2);
  }
  html[data-theme="dark"] #chart_container[data-flow-kind="pipeline"] {
    background:
      radial-gradient(circle at center, rgba(96,140,240,0.16) 1px, transparent 1px) 0 0 / 16px 16px,
      linear-gradient(rgba(56,110,232,0.06), rgba(56,110,232,0.06)),
      var(--surface-2);
  }
  html[data-theme="dark"] #chart_container[data-flow-kind="dataflow"] {
    background:
      radial-gradient(circle at center, rgba(45,212,191,0.16) 1px, transparent 1px) 0 0 / 16px 16px,
      linear-gradient(rgba(45,212,191,0.05), rgba(45,212,191,0.05)),
      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: var(--surface);
    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: var(--surface);
    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 var(--line-strong);
    background: var(--surface);
    color: var(--ink-900);
    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: var(--z-modal, 2000);   /* was 20 — under the bottom panel (10 stacks
                                        above it only until the panel's own
                                        children raise it) and under the top nav
                                        (25), so the schedule dialog opened
                                        behind the chrome. */
    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: var(--surface);
    border: 1px solid var(--line-strong);
    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: var(--ink-900);
  }

  .trigger-modal__close {
    border: 1px solid var(--line-strong);
    background: transparent;
    border-radius: 999px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: var(--ink-500);
  }

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

  .trigger-modal__body label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
  }

  .trigger-modal__body input,
  .trigger-modal__body textarea,
  .trigger-modal__body select {
    width: 100%;
    max-width: 520px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink-900);
  }

  .trigger-modal__body input:disabled {
    background: var(--surface-3);
    color: var(--ink-500);
    /* Browsers fade disabled text further via -webkit-text-fill-color/opacity —
       pin them so the value renders at the intended color, not a ghosted gray. */
    -webkit-text-fill-color: var(--ink-500);
    opacity: 1;
    border-color: var(--line-strong);
    cursor: not-allowed;
  }

  /* "What to run" is a read-only DISPLAY of the selected pipeline/dataflow — its
     value is the point of the field, so keep it full-contrast (not muted). */
  #trigger_pipeline_name:disabled {
    color: var(--ink-900);
    -webkit-text-fill-color: var(--ink-900);
    font-weight: 600;
    cursor: default;
  }

  .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 var(--line-strong);
    background: transparent;
    color: var(--ink-900);
    cursor: pointer;
    font-weight: 600;
  }

  .trigger-modal__btn--primary {
    border-color: var(--brand-400);
    color: var(--accent-text);
    background: var(--accent-tint);
  }

  .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 var(--line-strong);
    background: var(--surface);
    color: var(--ink-900);
    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: 380px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Group eyebrows stick, so you always know which bucket you're scrolling. */
  .choose-menu-list .activity-group-label {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface, #fff);
  }

  .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: 11px;
  }

  .choose-menu-list button:hover {
    background: var(--surface-2, #f6f9fc);
    border-color: var(--line, #e3e8ee);
    box-shadow: none;
    transform: none;
  }
  /* "Add as new flow" is not a step — same left rail, but it sits apart. */
  .choose-menu-list button[data-action="new-row"] {
    justify-content: flex-start; height: auto; min-height: 34px;
    border-bottom: 1px solid var(--line, #e3e8ee);
    border-radius: 0; margin-bottom: 4px; padding-bottom: 8px;
  }

  /* Label + one-line description, mirroring .ingest-item-* exactly so the two
     canvas dropdowns read as ONE system. Grounded: MECLABS "6 template traits"
     #1 (headline + sub-headline) and #4 (easy to scan); UIUX2.pdf found
     consistency among the most influential principles. */
  /* Two `.buttons` defaults broke this list:
     • `height: 32px` clipped two-line items, so descriptions overlapped the
       NEXT item's title and roughly every other row was unreadable.
     • `justify-content: center` centred each row's content, so short items sat
       further right than long ones and the icon rail wobbled — destroying the
       single "primary information column" that MECLABS trait #3 relies on to
       "create linear flow ... and minimize confusion".
     `.buttons` is defined LATER in this file, so an equal-specificity override
     loses the cascade. Qualify with the list to outrank it. */
  .choose-menu-list button.choose-menu-item {
    align-items: center;
    justify-content: flex-start;
    height: auto;
    min-height: 40px;
    padding: 7px 9px;
  }
  .choose-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .choose-item-label { font: 600 12.5px var(--font-ui); color: var(--ink-900, #1a1f36); }
  .choose-item-desc {
    font: 400 11px/1.35 var(--font-ui); color: var(--ink-500, #6b7c93);
    white-space: normal;
  }

  .choose-menu-list button .activity-icon {
    width: 30px; height: 30px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-50, #eef2ff); border-radius: var(--radius-sm, 4px);
    color: var(--brand-500, #1f4fd6);
  }
  .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;
    /* Flex column so the active tab pane gets whatever is LEFT after the
       resize handle and tab strip, instead of its own 100%. With
       `.tabcontent { height: 100% }` the pane resolved to the footer's full
       height while sitting 44px down inside it, so its last 44px fell past
       the footer's `overflow-y: hidden` and was clipped away unreachably
       (scrollHeight 544 vs clientHeight 500). Measured, not theorised. */
    display: flex;
    flex-direction: column;
  }

  /* .resize-handle visual treatment now lives in etl-design-system.css under .ds-resize-handle */
  .resize-handle {
    flex: 0 0 auto;          /* fixed chrome in the footer's flex column */
    position: relative;
    width: 100%;
    cursor: ns-resize;
  }

/* Bottom-panel open/close toggle. It is docked in the panel's OWN tab strip
   (right-aligned), not floated over the canvas: a fixed-position button in the
   viewport's bottom-right corner sat underneath the Feedback pill (.fb-btn,
   z-index 1400) and was unclickable. Docking it in the strip also means it
   survives collapse for free — the strip is exactly what stays visible — and
   it sits next to the thing it controls. */
.ds-bottom-tab-strip { display: flex; align-items: stretch; overflow: hidden; }
/* The tab row still scrolls when the tabs overflow, but the scrollbar itself is
   chrome the user never asked for — it sat as a grey bar across the top of the
   bottom panel. Hide the bar, keep the scrolling. */
.ds-bottom-tab-strip > .tabs {
  flex: 1; min-width: 0; border-bottom: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* legacy Edge */
}
.ds-bottom-tab-strip > .tabs::-webkit-scrollbar { display: none; }

.footer-toggle {
  flex: 0 0 auto; align-self: center;
  width: 28px; height: 28px; margin: 0 8px 0 4px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-sm, 6px);
  background: transparent; color: var(--ink-500, #6b7c93);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.footer-toggle:hover {
  background: var(--surface-2, #f6f9fc); color: var(--ink-900, #1a1f36);
  border-color: var(--line, #e3e8ee);
}
.footer-toggle:focus-visible {
  outline: 2px solid var(--brand-500, #2563eb); outline-offset: 1px;
}
.footer-toggle svg { transition: transform .18s ease; display: block; }
.footer.is-collapsed .footer-toggle svg { transform: rotate(180deg); }
/* Docked in the strip, the button is icon-only — the strip gives it context. */
.footer-toggle-label { display: none; }

/* COLLAPSED: the strip drops to the bottom of the viewport, where the fixed
   Feedback pill would sit on top of it again. So while collapsed the toggle
   leaves the strip and floats as a labelled pill directly ABOVE the Feedback
   pill, sharing its quiet surface treatment (no brand fill — this is a
   secondary control and must not compete with Run Flow for emphasis).
   The label is what makes the affordance self-evident rather than a bare
   chevron floating over the canvas. */
.footer.is-collapsed .footer-toggle {
  position: fixed;
  right: 18px;
  bottom: 62px;            /* clears the 33px-tall Feedback pill at bottom:18px */
  z-index: 1401;           /* one above .fb-btn */
  width: auto; height: 33px;
  gap: 7px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line, #e3e8ee);
  background: var(--surface, #fff);
  color: var(--ink-600, #4b5563);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  font: 600 12.5px var(--font-ui, system-ui);
}
.footer.is-collapsed .footer-toggle:hover {
  background: var(--surface-2, #f6f9fc);
  color: var(--ink-900, #1a1f36);
  border-color: var(--line-strong, #c1c9d2);
}
.footer.is-collapsed .footer-toggle-label { display: inline; }

.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%;
			/* Edgeless canvas: the dot-grid/tint lives ONLY on the fixed viewport
			   (#chart_container, overflow:hidden). This element is the DRAGGABLE
			   inner surface — panning translates it, so any background painted here
			   is a FINITE box whose outer edge scrolls into view (the visible
			   rectangular border the user saw). Keeping it transparent lets the
			   fixed viewport grid read as one seamless, borderless canvas at every
			   pan offset. (ui-ux-bot F3: keep the per-view colour subtle and never
			   let it harm figure-ground / node legibility.) */
			background: transparent;
      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 var(--line-strong);
    background: var(--surface);
    color: var(--ink-900);
  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);
}

/* ── Pipeline "Add activity" — floating button, slide-in panel, right-click
   menu. Live inside #chart_container (position:relative, overflow:hidden), so
   the panel is clipped to the canvas; the context menu is fixed on <body>. ── */
/* Left cluster of the top toolbar: DataPilot brand + (in flow views) the
   compact view identity. Grows to fill the left region so the identity sits
   right beside the brand while the action cluster stays on the right. */
.nav-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-left .etl-topbar-title { flex: 0 1 auto; }

/* View IDENTITY in the CHROME (round-3): a calm, self-evident TITLE
   ("Pipeline" / "Dataflow") in the top toolbar — NOT a colour-filled pill on
   the canvas. Grounded (ui-ux-bot): F1 — a colour-filled pill reads as a
   STATUS/TAG ("DRAFT"), not a view name, and raises cognitive load, so use a
   self-evident text label (recognition over recall); Guidelines-for-Human-AI-
   Interaction.pdf p.13-14 — identity belongs in the chrome so the work surface
   stays uncluttered. Inline in the toolbar surface: no card/background/shadow. */
.nav-view-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.nav-view-identity[hidden] { display: none !important; }
.pl-canvas-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-900, #1a1f36);
}
.pl-canvas-badge-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Kind COLOUR is a redundant, subtle cue only — carried on the ICON, paired
   with the text title, never a colour-filled tag (colour is never the sole
   signal; colour-alone fails colour-blind users). */
#plCanvasHead[data-kind="pipeline"] .pl-canvas-badge-ic { color: var(--accent, #1f4fd6); }
#plCanvasHead[data-kind="dataflow"] .pl-canvas-badge-ic { color: #0f766e; }
.pl-canvas-desc {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--ink-soft, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Below a narrow toolbar the one-line description is the first thing to drop —
   keep it unobtrusive; the icon + kind title carry the identity on their own. */
@media (max-width: 1100px) { .pl-canvas-desc { display: none; } }

/* "Add step" in the toolbar (round-3): pipeline-only, secondary accent-tinted
   OUTLINE. Discoverable but visually SUBORDINATE to the single filled primary
   action (Run Flow), so it never competes for emphasis. Grounded (ui-ux-bot
   F5 visual hierarchy / clutter reduction; Guidelines-for-Human-AI-Interaction
   p.13-14 secondary subordinate-but-discoverable). Height matches the toolbar
   buttons (Schedule / Run Flow). */
.nav-add-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px 0 10px;
  border-radius: var(--radius-control, 6px);
  border: 1px solid var(--accent, #1f4fd6);
  background: var(--accent-tint, rgba(31, 79, 214, 0.10));
  color: var(--accent, #1f4fd6);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-add-step[hidden] { display: none !important; }
.nav-add-step:hover,
.nav-add-step.is-open { background: var(--accent, #1f4fd6); color: #fff; }
.nav-add-step svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Add-step menu — drops straight down under the button it belongs to
   (proximity: the menu obviously belongs to "Add step"). */
/* Empty-pipeline hint — centred on the canvas viewport, non-blocking (only the
   button takes clicks) so the user can still pan/right-click the empty canvas. */
.pl-canvas-hint {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; pointer-events: none; z-index: 30; padding: 20px;
}
.pl-canvas-hint[hidden] { display: none; }
.pl-canvas-hint-illu { display: flex; align-items: center; gap: 10px; opacity: .8; }
.pl-canvas-hint-node {
  width: 26px; height: 18px; border-radius: 5px;
  background: var(--surface-2, #eef1f6); border: 1.5px solid var(--hairline-strong, rgba(15,23,42,.14));
}
.pl-canvas-hint-node--brand { background: var(--accent-tint, rgba(31,79,214,.12)); border-color: var(--accent, #1f4fd6); }
.pl-canvas-hint-text { margin: 0; font-size: 0.92rem; color: var(--ink-soft, #64748b); font-weight: 500; }
.pl-canvas-hint-btn {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 9px; cursor: pointer;
  background: var(--accent, #1f4fd6); color: #fff; border: none;
  font: 600 0.9rem var(--font-ui, inherit); box-shadow: 0 6px 16px rgba(31,79,214,.28);
  transition: background .15s ease, transform .15s ease;
}
.pl-canvas-hint-btn:hover { background: var(--accent-strong, #1438a8); transform: translateY(-1px); }
html[data-theme="dark"] .pl-canvas-hint-node { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.3); }
html[data-theme="dark"] .pl-canvas-hint-node--brand { background: rgba(96,140,240,.22); border-color: #608cf0; }

/* Ask chat-history search — filters the conversation list in the ask rail. */
.ask-conv-search { position: relative; padding: 6px 12px 8px; }
.ask-conv-search-ic {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-soft, #94a3b8); pointer-events: none;
}
.ask-conv-search-input {
  width: 100%; box-sizing: border-box; padding: 8px 12px 8px 32px;
  border: 1px solid var(--hairline-strong, rgba(15,23,42,.12)); border-radius: 9px;
  background: var(--surface-2, #f1f5f9); color: var(--ink, #0f172a);
  font: 500 0.86rem var(--font-ui, inherit); outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.ask-conv-search-input::placeholder { color: var(--ink-soft, #94a3b8); }
.ask-conv-search-input:focus {
  border-color: var(--accent, #1f4fd6); background: var(--surface, #fff);
}
.ask-conv-search-input::-webkit-search-cancel-button { cursor: pointer; }
html[data-theme="dark"] .ask-conv-search-input {
  background: rgba(226,232,240,.06); border-color: rgba(226,232,240,.14); color: var(--ink, #e8edf4);
}
html[data-theme="dark"] .ask-conv-search-input:focus {
  border-color: var(--accent, #608cf0); background: rgba(226,232,240,.1);
}

.nav-add-wrap { position: relative; display: inline-flex; }
.pl-add-panel {
  position: absolute;
  top: calc(100% + 8px);   /* drop directly UNDER the Add-step button */
  left: 0;
  right: auto;
  width: 300px;
  max-width: min(300px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline-strong, rgba(15, 23, 42, 0.12));
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.18s ease, opacity 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.pl-add-panel.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
/* Dark: lighten the dataflow teal so the icon + accent bar stay legible on a
   dark surface. */
html[data-theme="dark"] #plCanvasHead[data-kind="dataflow"] .pl-canvas-badge-ic { color: #2dd4bf; }
html[data-theme="dark"] #plCanvasHead[data-kind="pipeline"] .pl-canvas-badge-ic { color: #608cf0; }
.pl-add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline, rgba(15, 23, 42, 0.08));
}
.pl-add-title { font-weight: 600; font-size: 0.95rem; color: var(--ink, #0f172a); }
.pl-add-close {
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft, #64748b);
}
.pl-add-close:hover { color: var(--ink, #0f172a); }
.pl-add-list { padding: 10px; overflow-y: auto; display: grid; gap: 8px; }

.pl-add-card,
.pl-ctx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--hairline, rgba(15, 23, 42, 0.08));
  border-radius: 10px;
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pl-add-card:hover,
.pl-ctx-item:hover {
  border-color: var(--accent, #1f4fd6);
  background: var(--accent-tint, rgba(31, 79, 214, 0.1));
}
.pl-add-ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-tint, rgba(31, 79, 214, 0.12));
  color: var(--accent, #1f4fd6);
}
.pl-add-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.pl-add-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-add-name { font-weight: 600; font-size: 0.9rem; color: var(--ink, #0f172a); }
.pl-add-desc { font-size: 0.76rem; color: var(--ink-soft, #64748b); }

.pl-ctx-menu {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  padding: 6px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline-strong, rgba(15, 23, 42, 0.12));
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  display: none;
}
.pl-ctx-menu.is-open { display: block; }
.pl-ctx-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft, #64748b);
  padding: 4px 10px 6px;
}
.pl-ctx-item { border: none; border-radius: 8px; padding: 8px 10px; }
.pl-ctx-item .pl-add-ic { width: 26px; height: 26px; }
.pl-ctx-item .pl-add-desc { display: none; }

.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;
  /* No height:100% — the footer is a flex column, so the visible pane takes
     the remaining space. min-height:0 is required or the flex item refuses to
     shrink below its content and re-creates the overflow it just fixed. */
  flex: 1 1 auto;
  min-height: 0;
  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: var(--surface-2);
  border: 1px solid var(--line);
}

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

.scheduled-triggers__controls label {
  font-weight: 600;
  color: var(--ink-900);
}

.scheduled-triggers__heading {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
}

.all-triggers__actions {
  white-space: nowrap;
}

.all-triggers__actions .buttons {
  padding: 5px 12px;
  margin-right: 6px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-900);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

.all-triggers__actions .buttons:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.all-triggers__actions .buttons.is-destructive {
  border-color: var(--error-border);
  color: var(--error-text);
}

.all-triggers__actions .buttons.is-destructive:hover {
  background: var(--error-bg);
}

.all-triggers__actions .buttons:disabled {
  opacity: 0.5;
  cursor: default;
}

.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 var(--brand-200);
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%);
  color: var(--ink-900);
  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 var(--line-strong);
  background: var(--surface);
  font-weight: 600;
  color: var(--ink-900);
  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: var(--surface-3);
  color: var(--ink-500);
  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;
}
/* `.stack` is a column flexbox, so its default `align-items: stretch` blew the
   add-button out to the panel's full width in Filter while the identical
   button in Sort/Join stayed hugged. Same affordance, same shape everywhere:
   consistency is one of the two principles UIUX2.pdf found most influential
   ("Prioritize clarity and consistency in layouts and navigation"). */
#selected_activity_settings .stack > .add-button { align-self: flex-start; }

/* 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 var(--hairline);
    background: var(--surface);
    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;
}

/* Data-preview cells: keep every cell single-line and ellipsis-clipped.
 * The hard guarantee is the JS char-truncation in renderRows (MAX_CELL_CHARS);
 * this is cosmetic — it stops even short-but-wide values from forcing a tall
 * reflow and keeps the preview table compact. */
.table-resizable td,
.whse-preview-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.preview-cell-truncated {
  cursor: help;
}

.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 var(--line-strong);
    background: var(--surface);
    color: var(--ink-900);
    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: var(--surface-3);
}

.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: var(--ink-900); }

.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: var(--ink-faint); color: var(--ink-700); }
.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: var(--ink-500); }

.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: var(--ink-900);
  background: var(--surface-3);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  padding: 3px 10px;
}
.bs-preview-loaded {
  font-size: 11.5px;
  color: var(--ink-500);
  font-style: italic;
}
.bs-preview-spacer { flex: 1; }
.bs-preview-summary {
  font-size: 12px;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px;
}
.bs-preview-status {
  font-size: 12.5px;
  color: var(--ink-500);
  padding: 4px 2px;
}
.bs-preview-error {
  font-size: 12.5px;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  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: var(--warn-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  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: var(--ink-500); 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: var(--ink-900); 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: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.hr-method[data-method="POST"]   { background: var(--accent-tint); color: var(--accent-text); border-color: var(--brand-300); }
.hr-method[data-method="PUT"]    { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.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: var(--error-bg); color: var(--error-text); border-color: var(--error-border); }
.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: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--ink-700);
  display: flex; flex-direction: column; gap: 6px;
}
.hr-test-status { font-weight: 600; }
.hr-test-status--ok { color: var(--ok-text); }
.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: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 6px 8px;
}
.hr-test-details summary { cursor: pointer; font-size: 11.5px; color: var(--ink-500); }

/* ---- 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: var(--ink-900); }
.hr-pg-card-desc  { font-size: 11.5px; color: var(--ink-500); 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: var(--ink-900); 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: var(--surface);
  border: 1px solid var(--hairline);
  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;
}
/* Both toolbar buttons are SECONDARY maintenance actions, so both are quiet
   neutral chips. They were a green chip next to a blue chip, which spent the
   panel's two strongest emphasis cues on the two least important controls.
   MECLABS' color findings are about emphasis, not hue: color "guide[s]
   customer thinking ... by placing stronger emphasis on particular elements
   in your offer, and less emphasis on others". Emphasis is reserved for the
   panel's single primary action. */
.settings-refresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-lg, 8px); cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-700, #425466);
  border: 1px solid var(--line, #e3e8ee);
  background: var(--surface, #fff);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.settings-refresh-btn:hover {
  background: var(--surface-2, #f6f9fc);
  border-color: var(--line-strong, #c1c9d2);
  color: var(--ink-900, #1a1f36);
}
.settings-refresh-btn:disabled { opacity: 0.55; cursor: progress; }
/* `display:inline-flex` above beats the `hidden` attribute, so state it. */
.settings-refresh-btn[hidden] { display: none; }
.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); }

/* ===================================================================
   STEP GUIDE — headline + sub-headline on every activity Settings page.

   Grounding (DataPilot UIUX corpus, verified against source text):
   • MECLABS, "6 common traits of a template that works" — trait #1: "a
     clearly visible headline and sub-headline communicating the value of
     continuing to the next step"; trait #3: a primary information column to
     "help create linear flow through the page and minimize confusion";
     trait #4: "easy to scan body copy".
   • MECLABS, "Clarity trumps persuasion" — the principle, verbatim.
   • UIUX2.pdf (Srimurugan 2025, n=40): the minimalist interface beat the
     feature-rich one on task time (4.5 vs 7.2 min), errors (1.2 vs 3.5 per
     task) and satisfaction (4.6 vs 3.2 / 5).

   No hard-coded colors: every value is a token, so dark mode inverts for
   free (see the html[data-theme="dark"] token block).
   =================================================================== */
.act-guide {
  border-left: 3px solid var(--brand-500);
  padding: 2px 0 2px 12px;
  margin: 0 0 8px;
  max-width: 68ch;               /* scannable measure, not a full-width wall */
  /* Title and description share ONE line instead of stacking. The header was
     66px + 14px margin of the ~500px drawer, before a single editable control.
     Nothing is removed — it re-flows — because the "what/how" text is what a
     first-time user needs; the vertical stacking is what they don't. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}
.act-guide-how, .act-guide-need { flex-basis: 100%; }   /* own line, after the title row */
.act-guide-title {
  font: 600 14px var(--font-ui, system-ui);
  color: var(--ink-900);
  letter-spacing: -0.005em;
  margin: 0;
}
.act-guide-sub {
  font: 400 13px/1.45 var(--font-ui, system-ui);
  color: var(--ink-700);
  margin: 0;
}
.act-guide-how {
  font: 400 12px/1.4 var(--font-ui, system-ui);
  color: var(--ink-500);
  margin: 2px 0 0;
}
/* "Next step" guidance when a step is missing its required input — high
   contrast + actionable (grounded: Guidelines for Human-AI Interaction). */
.act-guide-need {
  font: 600 12px/1.45 var(--font-ui, system-ui);
  color: #b45309;
  background: rgba(217, 119, 6, .1);
  border-left: 3px solid #d97706;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 6px 0 0;
}
html[data-theme="dark"] .act-guide-need { color: #fbbf24; background: rgba(217, 119, 6, .16); }

/* "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). */
/* At rest it inherits the neutral chip above — it only earns color when it
   actually has something to tell you (has-peer-change). Color as signal. */
.settings-peer-btn { position: relative; }
.settings-peer-btn.has-peer-change {
  color: var(--accent-text-strong);
  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-section h3 { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: var(--ink-900); }
/* DataPilot API section */
.docs-api .docs-apikey-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.docs-api .docs-apikey-out {
  flex: 1; min-width: 220px; padding: 8px 11px; font-size: 12.5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-3); color: var(--ink-900);
}
.docs-api .docs-apikey-msg { font-size: 12.5px; color: var(--ink-soft, #64748b); margin: 4px 0 0; }
.docs-note {
  margin: 14px 0 0; padding: 10px 13px; font-size: 12.5px; line-height: 1.6;
  background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: 9px; color: var(--accent-text-strong);
}

.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; }

/* ── Help rebuild: outcomes, flow, page cards, developer disclosure ────── */
/* Why-use-it outcome bullets */
.docs-why { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.docs-why li {
  position: relative; padding: 11px 14px 11px 40px;
  font-size: 13.5px; line-height: 1.55;
  background: var(--brand-50, #f0fdfa); border: 1px solid var(--brand-200, #99f6e4);
  border-radius: 10px; color: var(--ink-900, #0f172a);
}
.docs-why li strong { color: var(--accent-text-strong, #0f766e); }
.docs-why li::before {
  content: "✓"; position: absolute; left: 12px; top: 11px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #14b8a6; color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* Simple input → system → output flow */
.docs-flow {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 12px 0 4px;
}
.docs-flow-step {
  flex: 1 1 150px; min-width: 130px;
  padding: 13px 14px; border-radius: 11px;
  background: #fbfdfc; border: 1px solid rgba(15,23,42,0.10); border-top: 3px solid #14b8a6;
}
.docs-flow-step b { display: block; font-size: 13px; color: #0f766e; margin-bottom: 3px; }
.docs-flow-step span { font-size: 12.5px; line-height: 1.5; color: var(--ink-700, #334155); }
.docs-flow-arrow { align-self: center; color: #14b8a6; font-size: 18px; font-weight: 800; }
@media (max-width: 620px) { .docs-flow-arrow { display: none; } }

/* Page cards — one per nav item */
.docs-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-soft, #64748b); margin: 16px 0 8px;
}
.docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.docs-card {
  padding: 13px 15px; border-radius: 11px;
  background: #fbfdfc; border: 1px solid rgba(15,23,42,0.10);
}
.docs-card-name { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0 0 4px; }
.docs-card-name .docs-card-ico { margin-right: 6px; }
.docs-card-what { font-size: 12.8px; line-height: 1.55; color: var(--ink-700, #334155); margin: 0 0 6px; }
.docs-card-when { font-size: 12px; line-height: 1.5; color: var(--ink-soft, #64748b); margin: 0; }
.docs-card-when b { color: var(--accent-text-strong, #0f766e); font-weight: 700; }

/* Developer section — progressive disclosure, de-emphasized */
.docs-adv {
  max-width: 820px; margin: 6px auto 18px;
  background: var(--surface-2, #f6f7f9); border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px; overflow: hidden;
}
.docs-adv > summary {
  cursor: pointer; list-style: none; padding: 16px 26px;
  font-size: 15px; font-weight: 700; color: var(--ink-700, #334155);
  display: flex; align-items: center; gap: 8px;
}
.docs-adv > summary::-webkit-details-marker { display: none; }
.docs-adv > summary::before { content: "▸"; color: #14b8a6; font-size: 13px; transition: transform .15s; }
.docs-adv[open] > summary::before { transform: rotate(90deg); }
.docs-adv > summary .docs-adv-sub { font-size: 12.5px; font-weight: 500; color: var(--ink-soft, #64748b); }
.docs-adv .docs-section { margin-left: 0; margin-right: 0; max-width: 100%; box-shadow: none; }
.docs-adv-inner { padding: 0 12px 10px; }

/* Dark theme — the docs cards default to hardcoded #fff; re-tone for dark */
html[data-theme="dark"] .docs-section {
  background: var(--surface-2, #0c111a); border-color: var(--line, #1f2937);
}
html[data-theme="dark"] .docs-section h2,
html[data-theme="dark"] .docs-section h3,
html[data-theme="dark"] .docs-card-name,
html[data-theme="dark"] .docs-table th { color: var(--ink-900, #e8edf4); }
html[data-theme="dark"] .docs-section p,
html[data-theme="dark"] .docs-list,
html[data-theme="dark"] .docs-fn-what { color: var(--ink-700, #c2cad6); }
html[data-theme="dark"] .docs-fn,
html[data-theme="dark"] .docs-flow-step,
html[data-theme="dark"] .docs-card { background: var(--surface-3, #1a212c); border-color: var(--line, #1f2937); }
html[data-theme="dark"] .docs-why li { background: rgba(20,184,166,0.10); border-color: rgba(20,184,166,0.35); color: var(--ink-900, #e8edf4); }
html[data-theme="dark"] .docs-table th { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .docs-table td { color: var(--ink-700, #c2cad6); }
html[data-theme="dark"] code { background: rgba(255,255,255,0.10); color: #e8edf4; }
html[data-theme="dark"] .docs-adv { background: var(--surface, #0c111a); border-color: var(--line, #1f2937); }

/* ── 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 var(--line-strong);
  background: var(--surface); color: var(--ink-700);
  box-shadow: 0 2px 10px rgba(15,23,42,0.14);
}
.split-toggle:hover { background: var(--surface-3); color: var(--success); }
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"],
/* Triggers is a global section — reveal it on EVERY workspace route (so it shows in
   the sidebar alongside SQL scripts / Dataflows / etc., wherever you are). */
body[data-etl-route="dataflow"] [data-etl-section="trigger"],
body[data-etl-route="pipeline"] [data-etl-section="trigger"],
body[data-etl-route="notebook"] [data-etl-section="trigger"],
body[data-etl-route="sql"]      [data-etl-section="trigger"] {
  display: block;
}

/* ── Warehouse / Ask 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,
body.ask-mode #chart_container,
body.ask-mode #topNav,
body.ask-mode #footer,
body.ask-mode .zoom-controls,
body.ask-mode #pipeline_history_panel { display: none !important; }

/* The Monitor section is a reading surface, not the flow canvas: hide the
   canvas, its zoom controls and the flow toolbar, same as Ask does. */
body.monitor-mode #chart_container,
body.monitor-mode #topNav,
body.monitor-mode #footer,
body.monitor-mode .zoom-controls,
body.monitor-mode #pipeline_history_panel { display: none !important; }

/* Public Pages is a full focused section — hide the bottom tab panel and the
   dataflow-canvas chrome that don't belong here. */
body[data-etl-route="mypages"] #footer,
body[data-etl-route="mypages"] #chart_container,
body[data-etl-route="mypages"] .zoom-controls,
body[data-etl-route="mypages"] #pipeline_history_panel { display: none !important; }

/* SQL editor is a focused page with its OWN toolbar (Untitled SQL · Run · Save) —
   hide the dataflow/pipeline identity strip (#topNav: "Dataflow · Run Flow ·
   Schedule") that otherwise bleeds onto this route and confuses it. The SQL editor
   opens as an overlay without changing data-etl-route, so gate on body.sql-mode
   (mirrors body.cxn-mode for Connections). */
body.sql-mode #topNav { display: none !important; }

/* Connections is a full focused page — hide all dataflow-canvas chrome (the Run-Flow
   topbar, the dotted canvas, zoom controls, footer, history panel). */
body[data-etl-route="connections"] #topNav,
body[data-etl-route="connections"] #chart_container,
body[data-etl-route="connections"] #footer,
body[data-etl-route="connections"] .zoom-controls,
body[data-etl-route="connections"] #pipeline_history_panel,
body.cxn-mode #topNav,
body.cxn-mode #chart_container,
body.cxn-mode #footer,
body.cxn-mode .zoom-controls,
body.cxn-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; }

/* ═══ Connections page (token-driven → light + dark; mobile rules at the end) ═══ */
.cxn-workspace { background: var(--canvas-bg, #f3f5f9); }
.cxn-shell { max-width: 880px; margin: 0 auto; }
.cxn-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.cxn-title { font: 700 24px/1.2 "Space Grotesk", system-ui, sans-serif; color: var(--ink-900); margin: 0 0 5px; }
.cxn-sub { font: 400 14px/1.5 "Space Grotesk", system-ui, sans-serif; color: var(--ink-500); margin: 0; max-width: 540px; }
.cxn-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-700);
  border-radius: 10px; padding: 9px 14px; font: 600 13.5px "Space Grotesk", system-ui, sans-serif; cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s; }
.cxn-btn svg { width: 16px; height: 16px; }
.cxn-btn:hover { border-color: var(--brand-200, #c7d2fe); color: var(--brand-500, #1f4fd6); }
.cxn-btn-primary { background: var(--brand-500, #1f4fd6); color: #fff; border-color: var(--brand-500, #1f4fd6); }
.cxn-btn-primary:hover { background: var(--brand-600, #1841b8); color: #fff; box-shadow: var(--shadow-2); }
.cxn-btn-ghost { background: transparent; }
.cxn-btn[disabled] { opacity: .55; pointer-events: none; }
/* list + cards */
.cxn-list { display: flex; flex-direction: column; gap: 10px; }
.cxn-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; cursor: pointer; transition: border-color .14s, box-shadow .14s, transform .12s; }
.cxn-card:hover { border-color: var(--brand-200, #c7d2fe); box-shadow: var(--shadow-2); }
.cxn-card-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3, #eef2f7); color: var(--brand-500, #1f4fd6); }
.cxn-card-ic svg { width: 22px; height: 22px; }
.cxn-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cxn-card-name { font: 600 15px "Space Grotesk", system-ui, sans-serif; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxn-card-sub { font: 400 12.5px "Space Grotesk", system-ui, sans-serif; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxn-badge { flex: none; font: 700 10.5px "Space Grotesk", system-ui, sans-serif; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; }
.cxn-badge.is-sql { background: rgba(31,79,214,.12); color: var(--brand-500, #1f4fd6); }
.cxn-badge.is-api { background: rgba(16,185,129,.14); color: #0a9e6e; }
.cxn-card-del { flex: none; border: 0; background: transparent; color: var(--ink-300, #94a3b8); cursor: pointer; font-size: 14px; padding: 6px 8px; border-radius: 8px; }
.cxn-card-del:hover { color: #d6303b; background: rgba(214,48,59,.10); }
/* states */
.cxn-empty { text-align: center; padding: 56px 20px; }
.cxn-empty-ic { display: inline-flex; width: 56px; height: 56px; border-radius: 16px; background: var(--surface-3, #eef2f7); color: var(--brand-500, #1f4fd6);
  align-items: center; justify-content: center; margin-bottom: 14px; }
.cxn-empty-ic svg { width: 30px; height: 30px; }
.cxn-empty h2 { font: 700 18px "Space Grotesk", system-ui, sans-serif; color: var(--ink-900); margin: 0 0 6px; }
.cxn-empty p { font: 400 14px "Space Grotesk", system-ui, sans-serif; color: var(--ink-500); margin: 0 0 18px; }
.cxn-loading, .cxn-msg { color: var(--ink-500); font: 500 14px "Space Grotesk", system-ui, sans-serif; padding: 18px; display: flex; align-items: center; gap: 9px; }
.cxn-msg-err { color: #d6303b; }
.cxn-msg-ok { color: #0a9e6e; }
.cxn-test-result { font: 600 12.5px "Space Grotesk", system-ui, sans-serif; }
.cxn-api-preview { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cxn-api-prev-head { font: 600 11.5px "Space Grotesk", system-ui, sans-serif; color: var(--ink-500); padding: 8px 12px; background: var(--surface-3, #f1f5f9); border-bottom: 1px solid var(--line); }
.cxn-api-preview pre { margin: 0; padding: 12px; font: 400 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-900); overflow: auto; max-height: 280px; white-space: pre-wrap; word-break: break-word; }
.cxn-routes-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 4px; }
.cxn-routes-title { font: 700 14px "Space Grotesk", system-ui, sans-serif; color: var(--ink-900); }
.cxn-routes-sub { font: 400 12px "Space Grotesk", system-ui, sans-serif; color: var(--ink-500); margin-bottom: 10px; }
.cxn-routes-list { display: flex; flex-direction: column; gap: 8px; }
.cxn-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cxn-route .cxn-input, .cxn-route .cxn-select { padding: 8px 10px; font-size: 13px; }
.cxn-route-name { flex: 1 1 110px; min-width: 0; }
.cxn-route-method { flex: 0 0 90px; }
.cxn-route-path { flex: 2 1 170px; min-width: 0; }
.cxn-route-test { flex: none; padding: 8px 12px; }
.cxn-route-del { flex: none; padding: 8px 10px; color: var(--ink-300, #94a3b8); }
.cxn-route-del:hover { color: #d6303b; }
.cxn-route-res { flex: 1 1 100%; font: 600 12px "Space Grotesk", system-ui, sans-serif; padding-left: 2px; min-height: 0; }
.cxn-route-res:empty { display: none; }
.cxn-spin { width: 15px; height: 15px; border: 2px solid var(--line-strong, #cbd5e1); border-top-color: var(--brand-500, #1f4fd6); border-radius: 50%; animation: cxn-spin .7s linear infinite; }
@keyframes cxn-spin { to { transform: rotate(360deg); } }
/* new-connection type picker (sheet) */
.cxn-sheet-back { position: fixed; inset: 0; z-index: 100000; background: rgba(8,12,20,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cxn-sheet { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-3); }
.cxn-sheet-title { font: 700 18px "Space Grotesk", system-ui, sans-serif; color: var(--ink-900); }
.cxn-sheet-sub { font: 400 13px "Space Grotesk", system-ui, sans-serif; color: var(--ink-500); margin: 3px 0 16px; }
.cxn-type-row { display: flex; gap: 12px; }
.cxn-type { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 13px; cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s; }
.cxn-type:hover { border-color: var(--brand-500, #1f4fd6); background: var(--brand-50, #f5f8ff); box-shadow: var(--shadow-2); }
.cxn-type-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3, #eef2f7); color: var(--brand-500, #1f4fd6); margin-bottom: 4px; }
.cxn-type-ic svg { width: 20px; height: 20px; }
.cxn-type-t { font: 600 14.5px "Space Grotesk", system-ui, sans-serif; color: var(--ink-900); }
.cxn-type-d { font: 400 11.5px/1.35 "Space Grotesk", system-ui, sans-serif; color: var(--ink-500); }
/* editor / forms (used by F2–F4) */
.cxn-editor { margin-top: 8px; }
.cxn-form { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.cxn-form-title { font: 700 17px "Space Grotesk", system-ui, sans-serif; color: var(--ink-900); margin: 0 0 16px; display: flex; align-items: center; gap: 9px; }
.cxn-form-title svg { width: 20px; height: 20px; flex: none; color: var(--brand-500, #1f4fd6); }
.cxn-field { margin-bottom: 14px; }
.cxn-field.row { display: flex; gap: 12px; }
.cxn-field.row > .cxn-field { flex: 1 1 0; margin-bottom: 0; }
.cxn-label { display: block; font: 600 12px "Space Grotesk", system-ui, sans-serif; color: var(--ink-700); margin-bottom: 6px; }
.cxn-input, .cxn-select { width: 100%; box-sizing: border-box; min-height: 46px; border: 1px solid var(--line); background: var(--surface-2, #fff); color: var(--ink-900);
  border-radius: 10px; padding: 11px 12px; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; outline: none; transition: border-color .14s, box-shadow .14s; }
.cxn-select { height: 46px; }
.cxn-input:focus, .cxn-select:focus { border-color: var(--brand-500, #1f4fd6); box-shadow: 0 0 0 3px var(--brand-50, #eef4ff); }
.cxn-input::placeholder { color: var(--ink-300, #94a3b8); }
.cxn-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.cxn-form-actions .cxn-spacer { flex: 1 1 auto; }
.cxn-preview { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: auto; max-height: 320px; }
.cxn-preview table { border-collapse: collapse; width: 100%; font: 400 12.5px "Space Grotesk", system-ui, sans-serif; }
.cxn-preview th, .cxn-preview td { border-bottom: 1px solid var(--line); padding: 7px 11px; text-align: left; color: var(--ink-900); white-space: nowrap; }
.cxn-preview th { background: var(--surface-3, #f1f5f9); position: sticky; top: 0; font-weight: 700; }
@media (max-width: 760px) {
  .cxn-workspace { padding: 16px 12px 60px; }
  .cxn-header { flex-direction: column; gap: 12px; }
  .cxn-header .cxn-btn-primary { width: 100%; justify-content: center; }
  .cxn-type-row { flex-direction: column; }
  .cxn-form { padding: 16px; }
  .cxn-field.row { flex-direction: column; gap: 14px; }
  .cxn-sheet { border-radius: 16px 16px 0 0; align-self: flex-end; max-width: none; }
  .cxn-sheet-back { align-items: flex-end; padding: 0; }
}

/* ── Public Pages section ──────────────────────────────────────────────
   Refined "product settings" surface, aligned to the app tokens
   (--ink / --accent #1f4fd6 / --hairline / --radius-card). */
/* The "Share pages" list inherits the app-shell overflow lock (whse-workspace:
   height 100vh; overflow hidden), so a list taller than the viewport was clipped
   and unscrollable — you couldn't see all your pages. Let this view scroll. */
.whse-workspace.mypages-workspace:not(.ask-workspace):not([hidden]) {
  overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.mypages-shell { max-width: 1080px; margin: 0 auto; padding: 44px 24px 48px; }

/* Header — a compact, finished bar: eyebrow + tight title + one muted line,
   the primary action aligned right, a hairline underneath to anchor it. */
.mypages-header {
  display: flex; align-items: flex-start; gap: 16px 20px;
  margin-bottom: 22px; padding-bottom: 18px; flex-wrap: nowrap;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.09));
}
/* nowrap + a shrinkable title block keeps the actions on the H1 baseline
   (upper-right) at every desktop width; below ~760px the app swaps to its
   dedicated mobile layout, so the actions never wrap to a detached row. The
   title block (flex-grow) fills the gap and pushes the actions flush-right. */
.mypages-header > div:first-child { flex: 1 1 auto; min-width: 0; }
.mypages-header-actions { flex: 0 0 auto; }
.mypages-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 4px;
}
.mypages-title { font-size: 21px; font-weight: 650; line-height: 1.15; margin: 0; color: var(--ink, #0f172a); letter-spacing: -0.01em; }
.mypages-sub { margin: 5px 0 0; color: var(--ink-soft, rgba(15,23,42,0.72)); font-size: 13px; line-height: 1.5; max-width: 56ch; }
html[data-theme="dark"] .mypages-sub { color: #aab4c2; }   /* raise dark-mode contrast (agent: ≥Lc 60 target) */
.mypages-header .mypages-btn-primary { flex: none; align-self: center; }

.mypages-list { display: flex; flex-direction: column; gap: 12px; }

/* Empty state — an inviting card, not a bare sentence. */
.mypages-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 52px 28px;
  border: 1px dashed var(--hairline-strong, rgba(15,23,42,0.14));
  border-radius: var(--radius-card, 8px);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(31,79,214,0.04), transparent 60%),
    var(--surface, #fff);
  color: var(--ink-soft, rgba(15,23,42,0.6));
}
.mypages-empty.is-plain { /* loading / inline states: keep it quiet */
  display: block; border: 0; background: none; padding: 18px 4px;
  text-align: left; font-size: 14px;
}
.mypages-empty-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 8px; border-radius: 14px;
  background: var(--accent-tint, rgba(31,79,214,0.12)); color: var(--accent, #1f4fd6);
}
.mypages-empty-ico svg { width: 26px; height: 26px; }
.mypages-empty-title { font-size: 17px; font-weight: 650; color: var(--ink, #0f172a); margin: 0; }
.mypages-empty-text { font-size: 13.5px; margin: 0 0 14px; max-width: 42ch; line-height: 1.5; }

/* Page cards. */
.mypages-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface, #fff); border: 1px solid var(--hairline, rgba(15,23,42,0.09));
  border-radius: var(--radius-card, 8px); padding: 14px 16px;
  transition: border-color var(--transition-default, .2s ease), box-shadow var(--transition-default, .2s ease), transform var(--transition-default, .2s ease);
}
.mypages-row:hover {
  border-color: var(--accent-tint-strong, rgba(31,79,214,0.25));
  box-shadow: 0 6px 20px -10px rgba(15,23,42,0.22);
  transform: translateY(-1px);
}
.mypages-row-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-tint, rgba(31,79,214,0.12)); color: var(--accent, #1f4fd6);
}
.mypages-row-ico svg { width: 19px; height: 19px; }
.mypages-row-main { min-width: 0; flex: 1 1 auto; }
.mypages-row-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mypages-row-name { font-weight: 650; font-size: 15px; color: var(--ink, #0f172a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Visibility pill — icon + TEXT (never colour alone); colour is a supplementary
   tint only. Public reads calm-positive; Private reads quiet/restricted (NOT
   danger-red, which is reserved for destructive actions). */
.mp-badge {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 11px; font-weight: 650; line-height: 1; letter-spacing: .01em;
  padding: 4px 8px 4px 6px; border-radius: 999px; border: 1px solid transparent;
}
.mp-badge svg { width: 12px; height: 12px; }
.mp-badge-public {
  color: var(--accent-text, #1438a8);
  background: var(--accent-tint, rgba(31,79,214,0.10));
  border-color: var(--accent-tint-strong, rgba(31,79,214,0.20));
}
.mp-badge-private {
  color: var(--ink-soft, rgba(15,23,42,0.62));
  background: var(--hairline, rgba(15,23,42,0.06));
  border-color: var(--hairline-strong, rgba(15,23,42,0.14));
}
.mypages-row-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 5px; font-size: 12.5px; color: var(--ink-soft, rgba(15,23,42,0.6));
}
.mp-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.mp-meta-item svg { width: 13px; height: 13px; opacity: .8; }
.mp-meta-dot { color: var(--ink-soft, rgba(15,23,42,0.35)); }
.mypages-row-link {
  display: inline-block; margin-top: 4px; max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  color: var(--ink-soft, rgba(15,23,42,0.45)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mypages-row-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

/* Buttons — secondary by default, with primary + quiet-danger variants. */
.mypages-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14)); background: var(--surface, #fff);
  color: var(--ink, #0f172a); border-radius: var(--radius-control, 6px); padding: 7px 13px;
  font-size: 13px; font-weight: 600; font-family: inherit; text-decoration: none;
  line-height: 1; white-space: nowrap;
  transition: background var(--transition-default, .15s ease), border-color var(--transition-default, .15s ease), color var(--transition-default, .15s ease);
}
.mypages-btn:hover { background: var(--accent-tint, rgba(31,79,214,0.10)); border-color: var(--accent-tint-strong, rgba(31,79,214,0.28)); color: var(--accent-strong, #1438a8); }
.mypages-btn:disabled { opacity: .55; cursor: default; }
.mypages-btn svg { width: 14px; height: 14px; }
.mypages-btn-primary { background: var(--accent, #1f4fd6); border-color: var(--accent, #1f4fd6); color: #fff; box-shadow: 0 1px 2px rgba(20,56,168,0.25); }
.mypages-btn-primary:hover { background: var(--accent-strong, #1438a8); border-color: var(--accent-strong, #1438a8); color: #fff; }
/* Per-card PRIMARY = Open (the main thing you do with a page): tinted, so it
   leads the row's action cluster without shouting like the page-level New. */
.mypages-btn-open {
  color: var(--accent-text, #1438a8);
  background: var(--accent-tint, rgba(31,79,214,0.10));
  border-color: var(--accent-tint-strong, rgba(31,79,214,0.22));
}
.mypages-btn-open:hover {
  color: #fff; background: var(--accent, #1f4fd6); border-color: var(--accent, #1f4fd6);
}
/* Icon-only, quiet button for the SUBORDINATE destructive action so Delete no
   longer competes visually with the safe actions. [ledger F6] */
.mypages-btn.mp-icon { padding: 7px; color: var(--ink-soft, rgba(15,23,42,0.5)); }
.mypages-btn.mp-icon svg { width: 15px; height: 15px; }
.mypages-row-actions .mp-del { margin-left: 3px; }
.mypages-btn.mp-del:hover { background: rgba(179,38,30,0.08); border-color: rgba(179,38,30,0.4); color: #b3261e; }

/* ── Table ⇄ Tile toggle + views ───────────────────────────────────────
   Default = table (scan/compare a long homogeneous list); tile = recognition
   browse. Toggle persisted in localStorage['etl_mypages_view']. [ledger F8]
   Reuses the existing theme tokens (--surface/--hairline/--ink/--accent…) so
   dark mode inherits automatically; a few explicit dark overrides below cover
   table chrome + the floating overflow menu (avoid the white-card trap). */
.mypages-header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }

/* Segmented view toggle — icon + TEXT; active segment via shading (100 Things #7). */
.mp-viewtoggle {
  display: inline-flex; align-items: stretch; padding: 3px; gap: 2px;
  background: var(--hairline, rgba(15,23,42,0.06));
  border: 1px solid var(--hairline-strong, rgba(15,23,42,0.12));
  border-radius: var(--radius-control, 8px);
}
.mp-vt-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 0; background: transparent; color: var(--ink-soft, rgba(15,23,42,0.6));
  border-radius: 6px; padding: 6px 11px; font: inherit; font-size: 12.5px; font-weight: 600;
  line-height: 1; transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.mp-vt-btn svg { width: 15px; height: 15px; }
.mp-vt-btn:hover { color: var(--ink, #0f172a); }
.mp-vt-btn.is-on {
  background: var(--surface, #fff); color: var(--accent-text, #1438a8);
  box-shadow: 0 1px 2px rgba(15,23,42,0.14);
}
.mp-vt-btn:focus-visible { outline: 2px solid var(--accent, #1f4fd6); outline-offset: 1px; }

/* Grid uses the existing list container; table view widens it a touch. */
.mypages-list.mp-view-table, .mypages-list.mp-view-grid { display: block; gap: 0; }

/* Table */
.mp-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hairline, rgba(15,23,42,0.09));
  border-radius: var(--radius-card, 10px); background: var(--surface, #fff);
}
.mp-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.mp-table thead th {
  text-align: left; padding: 10px 14px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft, rgba(15,23,42,0.55));
  border-bottom: 1px solid var(--hairline-strong, rgba(15,23,42,0.12));
  background: color-mix(in srgb, var(--surface, #fff) 100%, var(--ink, #0f172a) 2%);
}
.mp-table thead th.mp-num { text-align: right; }
.mp-th-sort { cursor: pointer; user-select: none; }
.mp-th-in { display: inline-flex; align-items: center; gap: 3px; }
.mp-num .mp-th-in { justify-content: flex-end; }
.mp-th-sort:hover { color: var(--ink, #0f172a); }
.mp-th-sort:focus-visible { outline: 2px solid var(--accent, #1f4fd6); outline-offset: -2px; }
.mp-th-sort.is-sorted { color: var(--accent-text, #1438a8); }
.mp-caret { display: inline-flex; opacity: 0; transition: opacity .12s ease; }
.mp-caret svg { width: 13px; height: 13px; }
.mp-th-sort:hover .mp-caret { opacity: .45; }
.mp-caret.is-active { opacity: 1; }
.mp-table tbody td {
  padding: 10px 14px; vertical-align: middle;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.07));
  color: var(--ink, #0f172a);
}
.mp-table tbody tr:last-child td { border-bottom: 0; }
.mp-tr { transition: background .12s ease; }
.mp-tr:hover td { background: var(--accent-tint, rgba(31,79,214,0.05)); }

/* ── Custom-domain page = Premium: gold highlight + gold link + "Custom domain"
      chip. Gold is the product's Premium accent (matches the Premium tier badge).
      Light + dark tuned; the chip carries TEXT so it isn't colour-alone. ── */
/* Built-in agents in table view — indigo tint + left accent so they read as
   the seeded "family" (distinct from the gold custom-domain rows). */
.mp-tr.mp-tr-builtin td { background: rgba(79,70,229,0.055); }
.mp-tr.mp-tr-builtin:hover td { background: rgba(79,70,229,0.10); }
.mp-tr.mp-tr-builtin td.mp-td-name { box-shadow: inset 3px 0 0 #6366f1; }
html[data-theme="dark"] .mp-tr.mp-tr-builtin td { background: rgba(99,102,241,0.14); }
html[data-theme="dark"] .mp-tr.mp-tr-builtin td.mp-td-name { box-shadow: inset 3px 0 0 #818cf8; }
.mp-builtin-cap-table { margin: 2px 2px 14px; }
.mp-tr.mp-premium td { background: rgba(230,194,92,0.10); }
.mp-tr.mp-premium:hover td { background: rgba(230,194,92,0.16); }
.mp-tr.mp-premium td.mp-td-name { box-shadow: inset 3px 0 0 #d9a441; }   /* gold left accent */
.mp-tile.mp-premium {
  background: linear-gradient(180deg, rgba(230,194,92,0.10), transparent 70%);
  border-color: rgba(217,164,65,0.55);
  box-shadow: 0 1px 3px rgba(184,134,43,0.16);
}
.mp-domain-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  color: #7a5a12; background: linear-gradient(135deg, #fdf4d8, #f2dd99 60%, #e6c25c);
  border: 1px solid rgba(184,134,43,0.45);
}
.mp-domain-chip svg { width: 12px; height: 12px; }
.mp-tile-top .mp-domain-chip { margin-left: 6px; }
.mp-link.mp-link-custom, .mp-tile-link.mp-link-custom { color: #9a6b12; font-weight: 700; }
html[data-theme="dark"] .mp-tr.mp-premium td { background: rgba(230,194,92,0.12); }
html[data-theme="dark"] .mp-tr.mp-premium:hover td { background: rgba(230,194,92,0.18); }
html[data-theme="dark"] .mp-tr.mp-premium td.mp-td-name { box-shadow: inset 3px 0 0 #e6c25c; }
html[data-theme="dark"] .mp-tile.mp-premium {
  background: linear-gradient(180deg, rgba(230,194,92,0.14), transparent 70%);
  border-color: rgba(230,194,92,0.5);
}
html[data-theme="dark"] .mp-domain-chip {
  color: #241a06; background: linear-gradient(135deg, #f6e39a, #e6c25c 55%, #c99a34);
  border-color: rgba(230,194,92,0.5);
}
html[data-theme="dark"] .mp-link.mp-link-custom,
html[data-theme="dark"] .mp-tile-link.mp-link-custom { color: #f0d886; }
.mp-td-name { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 300px; }
.mp-td-act { width: 1%; white-space: nowrap; }
.mp-ico-sm { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.mp-ico-sm svg { width: 15px; height: 15px; }
.mp-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mp-table td.mp-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft, rgba(15,23,42,0.7)); }
.mp-td-upd { color: var(--ink-soft, rgba(15,23,42,0.62)); white-space: nowrap; }
.mp-td-link { max-width: 240px; }
.mp-link {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  color: var(--accent-text, #1438a8); text-decoration: none; vertical-align: middle;
}
.mp-link:hover { text-decoration: underline; }
.mp-td-act { text-align: right; }
.mp-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.mp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kebab (icon-only ⋯). aria-label supplies the accessible name. */
.mypages-btn.mp-kebab { padding: 7px; color: var(--ink-soft, rgba(15,23,42,0.55)); }
.mypages-btn.mp-kebab svg { width: 16px; height: 16px; }
.mypages-btn.mp-kebab.is-open { background: var(--accent-tint, rgba(31,79,214,0.10)); border-color: var(--accent-tint-strong, rgba(31,79,214,0.28)); color: var(--accent-text, #1438a8); }

/* Overflow menu (floating, viewport-positioned). */
.mp-menu {
  position: fixed; z-index: 80; min-width: 168px; padding: 5px;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14));
  border-radius: 10px; box-shadow: 0 16px 40px -14px rgba(15,23,42,0.4);
  animation: mpFadeIn .12s ease;
}
.mp-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  border: 0; background: transparent; text-align: left; font: inherit; font-size: 13px; font-weight: 550;
  color: var(--ink, #0f172a); padding: 8px 10px; border-radius: 7px;
}
.mp-menu-item svg { width: 15px; height: 15px; opacity: .8; }
.mp-menu-item:hover, .mp-menu-item:focus-visible { background: var(--accent-tint, rgba(31,79,214,0.10)); color: var(--accent-strong, #1438a8); outline: none; }
.mp-menu-item.is-danger { color: #b3261e; }
.mp-menu-item.is-danger:hover, .mp-menu-item.is-danger:focus-visible { background: rgba(179,38,30,0.08); color: #b3261e; }
.mp-menu-sep { height: 1px; margin: 4px 6px; background: var(--hairline, rgba(15,23,42,0.1)); }

/* Tile / grid — real responsive card grid: 3 / 2 / 1 columns. [ledger F8] */
.mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mp-grid { grid-template-columns: 1fr; } }
.mp-tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  background: var(--surface, #fff); border: 1px solid var(--hairline, rgba(15,23,42,0.09));
  border-radius: var(--radius-card, 12px); padding: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mp-tile:hover {
  border-color: var(--accent-tint-strong, rgba(31,79,214,0.25));
  box-shadow: 0 6px 20px -10px rgba(15,23,42,0.22); transform: translateY(-1px);
}
.mp-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
/* ── P2 first visit: highlight the user's OWN agent tile (the one thing they
   recognize) with a single suggested action — no tour, no modal. ── */
.mp-tile-yours { border-color: var(--accent, #1f4fd6); box-shadow: 0 0 0 3px var(--accent-tint, rgba(31,79,214,.12)), 0 8px 24px -12px rgba(15,23,42,.25); }
.mp-yours-cap { font: 700 11.5px/1.3 var(--font-ui, system-ui, sans-serif); color: var(--accent, #1f4fd6);
  letter-spacing: .02em; text-transform: none; margin: -2px 0 6px; }
html[data-theme="dark"] .mp-tile-yours { box-shadow: 0 0 0 3px rgba(120,150,255,.18), 0 8px 24px -12px rgba(0,0,0,.5); }
/* P2 note: opacity-dimming of secondary nav was REJECTED by the grounded UI/UX
   review (a 0.62-dimmed label lands in the disabled/placeholder contrast tier
   and reads as unclickable; WCAG 1.4.3 / APCA Lc-30 band). The corpus-licensed
   demotion is STRUCTURAL — the "Data tools" dropdown + "More" menu already do
   it — so first-visit calming is carried by routing + the single tile highlight
   above, with no contrast reduction. */

/* ══ First-visit Share-pages audit fixes (2026-07-19, graded 4.1/10 for the
   first-visit audience). All scoped to html.etl-first-visit so returning
   users see the full management hub unchanged. ══ */
/* #2 One emphasized action: demote the "Connect to your AI" hero to a quiet
   outline — the newcomer's correct next step is asking THEIR agent, so the
   highlighted tile's Ask stays the only loud element (MECLABS Trait #5). */
html.etl-first-visit .mp-team-cta-hero,
html.etl-preconnect .mp-team-cta-hero {
  background: var(--surface, #fff); color: var(--ink, #0f172a);
  border: 1px solid var(--hairline, rgba(15,23,42,.14));
  box-shadow: none; filter: none; }
html[data-theme="dark"].etl-first-visit .mp-team-cta-hero,
html[data-theme="dark"].etl-preconnect .mp-team-cta-hero {
  background: var(--surface-3, #1a212c); color: var(--ink, #e6ecf5);
  border-color: var(--line, #2a3648); }
/* #3 Jargon sweep for a low-AI-literacy first visit (NN/g new-AI-users):
   "Use with LLM" buttons and the raw ask/<handle>/<slug> path lines are
   power-user/system language — hidden until visit two (all still reachable
   through Connect + tile menus). */
html.etl-first-visit .mp-tile .mp-uwl-inline,
html.etl-first-visit .mp-tile .uwl-btn,
html.etl-first-visit .mp-tile .mp-tile-link { display: none; }
/* #3c The New-page padlock gets a visible label (hover-only tooltips are
   undiscoverable for newcomers). 12px = above the 9pt hard floor (HHS 11:8);
   inherits the button's full-contrast ink, never a muted tier. */
html.etl-first-visit #mpNewBtn.is-locked .mp-newlock::after {
  content: "Founder"; font: 700 12px/1 var(--font-ui, system-ui, sans-serif);
  margin-left: 4px; letter-spacing: .03em; color: inherit; }
/* Residual #1 (re-grade): differential emphasis — the OWN agent's Ask must
   out-rank the three identical built-in Asks (emphasis is relative; bigger
   target also = Fitts). First visit only. */
html.etl-first-visit .mp-tile-yours .mp-open-primary {
  padding: 10px 22px; font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 14px -4px rgba(31,79,214,.5); }
/* #4 Choice-overload: collapse the built-in family to ONE row + "Show all"
   (collapse, don't remove — visible availability matters; corpus counter-
   evidence shows full removal of choices cut conversion ~40%). */
/* PERMANENT once own agents exist (JS adds .mp-collapsed) — HHS 13:17: the
   counted expander must be unmissable, so it's full-width and bordered. */
.mp-builtin-group.mp-collapsed .mp-grid .mp-tile:nth-child(n+4) { display: none; }
/* Unmissable full-width expander bar directly under the visible row — states
   the HIDDEN count ("Show 6 more…"). HHS 13:17 + user feedback 2026-07-19. */
.mp-showall-btn { display: none; width: 100%; margin: 14px 0 2px; padding: 13px 16px;
  font: 700 14px/1 var(--font-ui, system-ui, sans-serif);
  color: var(--accent, #1f4fd6); background: var(--accent-tint, rgba(31,79,214,.08));
  border: 1.5px dashed var(--accent-tint-strong, rgba(31,79,214,.45)); border-radius: 10px; cursor: pointer;
  transition: background .15s, border-color .15s; }
.mp-showall-btn:hover { background: var(--accent-tint, rgba(31,79,214,.16));
  border-color: var(--accent, #1f4fd6); }
.mp-builtin-group.mp-collapsed .mp-showall-btn { display: block; }
html[data-theme="dark"] .mp-showall-btn { color: #9db4f5; background: rgba(80,120,255,.1);
  border-color: rgba(120,150,255,.45); }
html[data-theme="dark"] .mp-showall-btn:hover { background: rgba(80,120,255,.18); }

.mp-tile-name { font-weight: 650; font-size: 14.5px; color: var(--ink, #0f172a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-tile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--ink-soft, rgba(15,23,42,0.6)); }
.mp-tile-link {
  margin: 2px 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--ink-soft, rgba(15,23,42,0.45)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hairline, rgba(15,23,42,0.07)); }
/* One-line agent description (grounded UI/UX spec): sits directly below the
   name, above the meta line. Keyword-first copy, clamped to 2 lines so a tile
   never becomes a wall of prose (HHS 6:1/16:7). Contrast held ≥4.5:1 — a step
   stronger than the muted meta grey, NOT placeholder grey (WCAG 1.4.3). */
.mp-tile-desc {
  font-size: 13px; line-height: 1.4; color: var(--ink-600, #475569);
  margin: 3px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-theme="dark"] .mp-tile-desc { color: #c3cdda; }
/* Table view: name + description stack in one column beside the icon. */
.mp-name-wrap { display: flex; flex-direction: column; min-width: 0; }
.mp-row-desc {
  font-size: 12px; line-height: 1.35; color: var(--ink-600, #475569);
  margin-top: 1px; max-width: 300px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme="dark"] .mp-row-desc { color: #c3cdda; }

/* Dark-mode chrome for table + floating menu (tokens above already flip; these
   cover surfaces/hover that need an explicit dark value). */
html[data-theme="dark"] .mp-viewtoggle { background: rgba(255,255,255,0.05); border-color: var(--line, #1f2937); }
html[data-theme="dark"] .mp-vt-btn.is-on { background: var(--surface-3, #1a212c); color: var(--ink-900, #e8edf4); }
html[data-theme="dark"] .mp-table-wrap { background: var(--surface-2, #0c111a); border-color: var(--line, #1f2937); }
html[data-theme="dark"] .mp-table thead th { background: var(--surface-3, #1a212c); color: var(--ink-500, #94a3b8); border-bottom-color: var(--line, #1f2937); }
html[data-theme="dark"] .mp-table tbody td { color: var(--ink-900, #e8edf4); border-bottom-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .mp-tr:hover td { background: rgba(96,140,240,0.10); }
html[data-theme="dark"] .mp-td-upd, html[data-theme="dark"] .mp-table td.mp-num { color: var(--ink-500, #94a3b8); }
html[data-theme="dark"] .mp-th-sort.is-sorted, html[data-theme="dark"] .mp-link { color: #93b4ff; }
html[data-theme="dark"] .mp-menu { background: var(--surface-3, #1a212c); border-color: var(--line, #1f2937); box-shadow: 0 18px 46px -14px rgba(0,0,0,0.7); }
html[data-theme="dark"] .mp-menu-item { color: var(--ink-900, #e8edf4); }
html[data-theme="dark"] .mp-menu-item:hover, html[data-theme="dark"] .mp-menu-item:focus-visible { background: rgba(96,140,240,0.16); color: #cdd8ff; }
html[data-theme="dark"] .mp-menu-item.is-danger { color: #ff8a80; }
html[data-theme="dark"] .mp-menu-item.is-danger:hover { background: rgba(255,138,128,0.14); color: #ff8a80; }
html[data-theme="dark"] .mp-menu-sep { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .mp-tile { background: var(--surface-3, #1a212c); border-color: var(--line, #1f2937); }
html[data-theme="dark"] .mp-tile-name { color: var(--ink-900, #e8edf4); }
/* NOTE: no phone (<560px) restack for this table. At ≤768px the app enters
   body.etl-mobile (home-ui.js) and hides the whole desktop workspace, serving a
   dedicated mobile Pages surface (#etlMobileSurface, mobile.js) instead — so any
   narrow-width table CSS here is shadowed and never renders. The table/grid
   toggle + persisted sort are scoped to the >768px workspace. [ledger F8] */

/* Editor — a calm card. */
/* Editor is a FIXED, viewport-centered panel (dimmed backdrop) so the create
   flow never scrolls the page — the steps fade in place inside one card. */
.mypages-editor {
  position: fixed; inset: 0; z-index: var(--z-modal, 2000); padding: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,0.34);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: mpFadeIn .2s ease;
}
.mypages-editor[hidden] { display: none; }
@keyframes mpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpEditorIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

.mpw {
  width: min(760px, 100%); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface, #fff); border: 1px solid var(--hairline, rgba(15,23,42,0.10));
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(15,23,42,0.5);
  animation: mpEditorIn .3s cubic-bezier(.2,.75,.25,1);
}
.mpw-top { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.08)); }
.mpw-x { order: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; padding: 0; cursor: pointer; border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14)); background: var(--surface, #fff); border-radius: 8px; color: var(--ink, #0f172a); transition: background .15s ease, border-color .15s ease; }
.mpw-x svg { width: 16px; height: 16px; }
.mpw-x:hover { background: var(--accent-tint, rgba(31,79,214,0.10)); border-color: var(--accent-tint-strong, rgba(31,79,214,0.28)); }
.mpw-title { order: 2; margin-right: auto; font-size: 14px; font-weight: 650; color: var(--ink, #0f172a); }
.mpw-dots { order: 3; display: flex; gap: 4px; }
.mpw-tab { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ink-soft, rgba(15,23,42,0.55)); transition: background .15s ease, color .15s ease; }
.mpw-tab:hover { color: var(--ink, #0f172a); background: var(--accent-tint, rgba(31,79,214,0.08)); }
.mpw-tab.is-on { color: var(--accent, #1f4fd6); background: var(--accent-tint, rgba(31,79,214,0.12)); }

.mpw-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
.mpw-step[hidden] { display: none; }
.mpw-anim { animation: mpStepIn .26s ease; }
@keyframes mpStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mpw-h { font-size: 17px; font-weight: 650; margin: 0 0 4px; color: var(--ink, #0f172a); letter-spacing: -0.01em; }
.mpw-help { font-size: 13px; color: var(--ink-soft, rgba(15,23,42,0.6)); margin: 0 0 16px; line-height: 1.45; }
.mpw-optional { font-weight: 500; color: var(--ink-soft, rgba(15,23,42,0.48)); }
.mpw-sublabel { font-size: 12px; font-weight: 650; color: var(--ink, #0f172a); margin: 16px 0 8px; }
.mpw-big { font-size: 15px; padding: 11px 13px; margin-bottom: 0; }
.mpw-tfilter { margin-bottom: 0; font-size: 13px; padding: 8px 11px; }
.mpw-tables { max-height: 230px; }

/* ── Data-source mode switch: "All my data" vs "Choose tables" ── */
.mpw-datamode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.mpw-mode { display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  padding: 13px 14px; border: 1.5px solid var(--hairline-strong, rgba(15,23,42,0.12)); border-radius: 12px;
  background: var(--surface, #fff); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.mpw-mode:hover { border-color: var(--accent-tint-strong, rgba(31,79,214,0.32)); }
.mpw-mode.is-on { border-color: var(--accent, #1f4fd6); background: var(--accent-tint, rgba(31,79,214,0.06));
  box-shadow: 0 0 0 3px var(--accent-tint, rgba(31,79,214,0.10)); }
.mpw-mode-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: var(--surface-2, #f1f5f9); color: var(--ink-soft, #64748b); transition: background .15s ease, color .15s ease; }
.mpw-mode-ic svg { width: 19px; height: 19px; }
.mpw-mode.is-on .mpw-mode-ic { background: var(--accent, #1f4fd6); color: #fff; }
.mpw-mode-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mpw-mode-txt strong { font-size: 13.5px; font-weight: 650; color: var(--ink, #0f172a); }
.mpw-mode-txt small { font-size: 11.5px; color: var(--ink-soft, #64748b); line-height: 1.3; }

/* The "everything" summary card shown in All-data mode. (display:flex would
   beat the [hidden] UA rule, so guard the hidden state explicitly.) */
.mpw-allcard[hidden], .mpw-pick[hidden] { display: none !important; }
.mpw-allcard { display: flex; align-items: center; gap: 13px; padding: 16px 16px;
  border: 1px solid var(--accent-tint-strong, rgba(31,79,214,0.22)); border-radius: 12px;
  background: linear-gradient(180deg, var(--accent-tint, rgba(31,79,214,0.07)), transparent); }
.mpw-allcard-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px;
  background: var(--accent, #1f4fd6); color: #fff; }
.mpw-allcard-ic svg { width: 22px; height: 22px; }
.mpw-allcard-txt { display: flex; flex-direction: column; gap: 3px; }
.mpw-allcard-txt strong { font-size: 14px; font-weight: 650; color: var(--ink, #0f172a); }
.mpw-allcard-txt small { font-size: 12px; color: var(--ink-soft, #64748b); line-height: 1.35; }

/* Targeted-mode toolbar: filter + live count + select-all / clear. */
.mpw-pick-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.mpw-pick-bar .mpw-tfilter { flex: 1 1 auto; min-width: 0; }
.mpw-pick-count { flex: none; font-size: 12px; font-weight: 600; color: var(--ink-soft, #64748b); white-space: nowrap; }
.mpw-linkbtn { flex: none; border: 0; background: none; cursor: pointer; padding: 4px 4px;
  font-size: 12px; font-weight: 600; color: var(--accent, #1f4fd6); }
.mpw-linkbtn:hover { text-decoration: underline; }

/* ── Knowledge base — folders & files tree picker ── */
.mpw-kb { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline, rgba(15,23,42,0.08)); }
.mpw-kb-h { margin-top: 0; }
.mpw-kb-summary { font-size: 12.5px; font-weight: 600; color: var(--ink-soft, #64748b);
  margin: -6px 0 10px; }
.mpw-kb-note { font-size: 12px; color: #b45309; background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.28); border-radius: 8px; padding: 7px 10px; margin: 0 0 10px; line-height: 1.4; }
.mpw-kb-note[hidden] { display: none; }
.mpw-kb-filter { margin-bottom: 10px; width: 100%; }
.mpw-kb-tree { max-height: 260px; overflow: auto; padding: 6px;
  border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14)); border-radius: 10px;
  background: var(--surface, #fff); }
/* ── Simplified Edit Page (research-grounded: one task per tab, KB is the default
   hero, calm neutrals + single accent, big card targets). ── */
.mpw-kb-hero { margin-top: 14px; padding-top: 0; border-top: 0; }   /* KB is the primary content, not a secondary section */
.mpw-kb-hero .mpw-kb-tree { max-height: min(54vh, 480px); }         /* room to browse files easily (the main task) */
.mpw-vis-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; max-width: 520px; }
.mpw-vis-cards .mpw-vis-opt { display: flex; align-items: flex-start; gap: 11px; margin: 0;
  padding: 13px 15px; border: 1.5px solid var(--hairline-strong, rgba(15,23,42,0.14));
  border-radius: 12px; cursor: pointer; background: var(--surface, #fff);
  transition: border-color .14s, box-shadow .14s, background .14s; }
.mpw-vis-cards .mpw-vis-opt:hover { border-color: var(--brand-400, #6b7cff); }
.mpw-vis-cards .mpw-vis-opt:has(input:checked) {         /* single accent marks the chosen state */
  border-color: var(--brand-500, #1f4fd6); background: var(--brand-050, #eef2ff);
  box-shadow: 0 0 0 3px rgba(31,79,214,0.10); }
.mpw-vis-cards .mpw-vis-opt input { margin-top: 2px; accent-color: var(--brand-500, #1f4fd6); flex: none; }
.mpw-vis-txt { display: flex; flex-direction: column; gap: 2px; }
.mpw-vis-txt strong { font-size: 14px; font-weight: 700; color: var(--ink, #0f172a); }
.mpw-vis-txt small { font-size: 12.5px; color: var(--ink-soft, #64748b); }
/* ── LOCKED visibility option (PUBLIC is Pro/Premium-only). Must READ as locked:
   dimmed text, no hover highlight, not-allowed cursor, + a styled "Pro" pill
   (mirrors .gnav-backup.is-locked / .mp-newlock). ── */
.mpw-vis-cards .mpw-vis-opt.is-locked { cursor: not-allowed; position: relative;
  background: var(--surface-1, #f8fafc); border-color: var(--hairline, rgba(15,23,42,0.09)); }
.mpw-vis-cards .mpw-vis-opt.is-locked:hover { border-color: var(--hairline, rgba(15,23,42,0.09)); }
.mpw-vis-cards .mpw-vis-opt.is-locked .mpw-vis-txt strong { color: var(--ink-400, #94a3b8); }
.mpw-vis-cards .mpw-vis-opt.is-locked .mpw-vis-txt small { color: var(--ink-400, #b0bac9); }
.mpw-vis-cards .mpw-vis-opt.is-locked input { opacity: .5; cursor: not-allowed; }
.mpw-vis-lock { margin-left: auto; align-self: center; display: inline-flex; align-items: center;
  gap: 5px; padding: 4px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1;
  color: var(--brand-700, #3730a3); background: var(--brand-050, #eef2ff);
  border: 1px solid var(--brand-200, #c7d2fe); cursor: pointer; transition: background .12s, color .12s; }
.mpw-vis-lock:hover { background: var(--brand-500, #1f4fd6); color: #fff; border-color: var(--brand-500, #1f4fd6); }
.mpw-vis-lock:focus-visible { outline: 2px solid var(--brand-500, #1f4fd6); outline-offset: 2px; }
.mpw-vis-lock svg { width: 13px; height: 13px; }
html[data-theme="dark"] .mpw-vis-cards .mpw-vis-opt.is-locked {
  background: var(--surface-3, #1a212c); border-color: var(--line, #232b3a); }
html[data-theme="dark"] .mpw-vis-cards .mpw-vis-opt.is-locked:hover { border-color: var(--line, #232b3a); }
html[data-theme="dark"] .mpw-vis-lock { color: var(--brand-300, #9db9f7);
  background: rgba(99,102,241,0.16); border-color: rgba(99,102,241,0.34); }
html[data-theme="dark"] .mpw-vis-lock:hover { background: var(--brand-400, #6f96f2); color: #0f1420; }

/* ── Account popover (profile chip → sign-out menu). WAS un-styled + never
   position:fixed, so it rendered in normal flow at the page bottom. ── */
.account-popover { position: fixed; z-index: 9000; min-width: 220px; max-width: 280px;
  padding: 6px; border-radius: 14px; background: var(--surface, #fff);
  border: 1px solid var(--hairline-strong, rgba(15,23,42,0.12));
  box-shadow: 0 12px 34px rgba(15,23,42,0.18), 0 2px 8px rgba(15,23,42,0.08);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right;
  transition: opacity .13s ease, transform .13s ease; }
.account-popover.is-open { opacity: 1; transform: translateY(0) scale(1); }
.account-popover__head { display: flex; align-items: center; gap: 11px; padding: 10px 12px 11px; }
.account-popover__avatar { flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-weight: 700; font-size: 15px; color: #fff; background: var(--brand-500, #1f4fd6); }
.account-popover__avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-popover__id { min-width: 0; }
.account-popover__name { font-size: 14px; font-weight: 650; color: var(--ink, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-popover__email { font-size: 12.5px; color: var(--ink-soft, #64748b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-popover__divider { height: 1px; margin: 4px 6px; background: var(--hairline, rgba(15,23,42,0.09)); }
.account-popover__action { display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 10px 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--ink, #0f172a); font-size: 13.5px; font-weight: 550;
  text-align: left; text-decoration: none; transition: background .12s; }
.account-popover__action:hover { background: var(--surface-2, #f1f5f9); }
.account-popover__action:focus-visible { outline: 2px solid var(--brand-500, #1f4fd6); outline-offset: -2px; }
.account-popover__action svg { flex: none; color: var(--ink-soft, #64748b); }
html[data-theme="dark"] .account-popover { background: var(--surface, #121821);
  border-color: var(--line, #283243); box-shadow: 0 14px 40px rgba(0,0,0,0.5); }
html[data-theme="dark"] .account-popover__name { color: var(--ink-900, #e8edf4); }
html[data-theme="dark"] .account-popover__divider { background: var(--line, #283243); }
html[data-theme="dark"] .account-popover__action { color: var(--ink-900, #e8edf4); }
html[data-theme="dark"] .account-popover__action:hover { background: var(--surface-3, #1a212c); }
@media (prefers-reduced-motion: reduce) {
  .account-popover { transition: opacity .01s; transform: none; }
  .account-popover.is-open { transform: none; }
}
/* ── Invite-by-email (Private pages): grouped card, modern pill chips, clear
   accent input — legible and obviously interactive. ── */
.mpw-invite { margin-top: 14px; max-width: 520px; padding: 14px 15px 15px;
  border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14)); border-radius: 12px;
  background: var(--surface-1, #f8fafc); }
.mpw-invite .mpw-sublabel { font-size: 12px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-soft, #64748b); margin: 0 0 9px; }
.mpw-invite .mpw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mpw-invite .mpw-chips:empty { display: none; }
.mpw-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 12px;
  font-size: 13px; font-weight: 600; color: var(--brand-700, #3730a3);
  background: var(--brand-050, #eef2ff); border: 1px solid var(--brand-200, #c7d2fe);
  border-radius: 999px; line-height: 1.2; }
.mpw-chip button { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 0; border-radius: 50%; cursor: pointer; font-size: 11px;
  color: var(--brand-600, #4f46e5); background: rgba(79,70,229,0.12); transition: background .12s, color .12s; }
.mpw-chip button:hover { background: var(--brand-500, #1f4fd6); color: #fff; }
#mpInviteInput { width: 100%; padding: 11px 13px; font-size: 14px; border-radius: 10px;
  border: 1.5px solid var(--hairline-strong, rgba(15,23,42,0.16)); background: var(--surface, #fff);
  color: var(--ink, #0f172a); transition: border-color .14s, box-shadow .14s; }
#mpInviteInput::placeholder { color: var(--ink-soft, #94a3b8); }
#mpInviteInput:focus { outline: none; border-color: var(--brand-500, #1f4fd6);
  box-shadow: 0 0 0 3px rgba(31,79,214,0.12); }
.mpw-invite .mpw-help { margin-top: 8px; font-size: 12px; color: var(--ink-soft, #64748b); }
/* Dark mode: brand-050 is a LIGHT-only token, so the selected card + chips
   rendered as bright light blocks on a dark page. Dark-safe indigo tints +
   light text (theme-independent rgba, so no white-card bug). */
html[data-theme="dark"] .mpw-vis-cards .mpw-vis-opt {
  background: var(--surface-2, #161c28); border-color: var(--line, #232b3a); }
html[data-theme="dark"] .mpw-vis-cards .mpw-vis-opt:has(input:checked) {
  background: rgba(99,102,241,0.16); border-color: var(--brand-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.20); }
html[data-theme="dark"] .mpw-vis-txt strong { color: var(--ink-900, #e8edf4); }
html[data-theme="dark"] .mpw-vis-txt small { color: var(--ink-500, #94a3b8); }
html[data-theme="dark"] .mpw-invite {
  background: var(--surface-2, #161c28); border-color: var(--line, #232b3a); }
html[data-theme="dark"] .mpw-invite .mpw-sublabel { color: var(--ink-500, #94a3b8); }
html[data-theme="dark"] .mpw-chip {
  background: rgba(99,102,241,0.20); border-color: rgba(99,102,241,0.42); color: #c7d2fe; }
html[data-theme="dark"] .mpw-chip button { background: rgba(99,102,241,0.28); color: #c7d2fe; }
html[data-theme="dark"] .mpw-chip button:hover { background: var(--brand-500, #3b82f6); color: #fff; }
html[data-theme="dark"] #mpInviteInput {
  background: var(--surface-1, #0f1420); border-color: var(--line, #232b3a); color: var(--ink-900, #e8edf4); }
html[data-theme="dark"] #mpInviteInput::placeholder { color: var(--ink-500, #64748b); }
html[data-theme="dark"] #mpInviteInput:focus { border-color: var(--brand-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.22); }
.mpw-kb-kids[hidden] { display: none; }
.mpw-kb-row { display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 8px; border-radius: 7px; font-size: 13.5px; color: var(--ink, #0f172a);
  cursor: pointer; transition: background var(--transition-default, .12s ease); }
.mpw-kb-row:hover { background: var(--accent-tint, rgba(31,79,214,0.08)); }
.mpw-kb-cb { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--accent, #1f4fd6); cursor: pointer; }
.mpw-kb-caret { flex: none; width: 14px; text-align: center; font-size: 10px; line-height: 1;
  color: var(--ink-soft, #64748b); cursor: pointer; user-select: none; transition: color .12s ease; }
.mpw-kb-caret:hover { color: var(--accent, #1f4fd6); }
.mpw-kb-ic { flex: none; font-size: 14px; line-height: 1; }
.mpw-kb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpw-kb-folder .mpw-kb-name { font-weight: 600; }
.mpw-kb-count { flex: none; font-size: 11px; font-weight: 600; color: var(--ink-soft, #94a3b8);
  background: var(--accent-tint, rgba(31,79,214,0.08)); border-radius: 999px; padding: 1px 8px; }
.mpw-kb-file { padding-right: 8px; }

.mpw-layouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mpw-lc { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; padding: 12px 8px 9px; border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14)); border-radius: 10px; background: var(--surface, #fff); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.mpw-lc:hover { border-color: var(--accent-tint-strong, rgba(31,79,214,0.3)); }
.mpw-lc.is-on { border-color: var(--accent, #1f4fd6); background: var(--accent-tint, rgba(31,79,214,0.08)); box-shadow: 0 0 0 2px var(--accent-tint, rgba(31,79,214,0.18)); }
.mpw-lc-art { color: var(--ink-soft, rgba(15,23,42,0.5)); }
.mpw-lc.is-on .mpw-lc-art { color: var(--accent, #1f4fd6); }
.mpw-lc-art svg { width: 40px; height: 30px; }
.mpw-lc-label { font-size: 12px; font-weight: 600; color: var(--ink, #0f172a); }

.mpw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .mpw-grid2 { grid-template-columns: 1fr; } }
.mpw-accent { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mpw-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--hairline-strong, rgba(15,23,42,0.18)); cursor: pointer; padding: 0; transition: transform .12s ease, box-shadow .12s ease; }
.mpw-swatch:hover { transform: scale(1.12); }
.mpw-swatch.is-on { box-shadow: 0 0 0 2px var(--accent, #1f4fd6); }
.mpw-accent .mypages-color { width: 30px; height: 26px; margin: 0; }

.mpw-assets { display: flex; gap: 12px; }
.mpw-asset { position: relative; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.mpw-asset-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0; border: 2px solid var(--surface, #fff); border-radius: 50%; background: #b3261e; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.mpw-asset-x[hidden] { display: none; }
.mpw-asset-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mpw-asset-thumb { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; border: 1px dashed var(--hairline-strong, rgba(15,23,42,0.22)); background: var(--accent-tint, rgba(31,79,214,0.05)); color: var(--ink-soft, rgba(15,23,42,0.4)); transition: border-color .15s ease, color .15s ease; }
.mpw-asset:hover .mpw-asset-thumb { border-color: var(--accent, #1f4fd6); color: var(--accent, #1f4fd6); }
.mpw-asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mpw-asset-plus { font-size: 22px; line-height: 1; }
.mpw-asset-label { font-size: 11px; color: var(--ink-soft, rgba(15,23,42,0.6)); }
.mpw-bg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mpw-bg-color { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--ink-soft, rgba(15,23,42,0.6)); }
.mpw-bg-color .mypages-color { margin: 0; }
.mpw-tstyle { display: inline-flex; border: 1px solid var(--hairline-strong, rgba(15,23,42,0.16)); border-radius: 8px; overflow: hidden; }
.mpw-seg { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 7px 15px; border: 0; background: var(--surface, #fff); color: var(--ink-soft, rgba(15,23,42,0.6)); transition: background .15s ease, color .15s ease; }
.mpw-seg + .mpw-seg { border-left: 1px solid var(--hairline-strong, rgba(15,23,42,0.16)); }
.mpw-seg:hover { color: var(--ink, #0f172a); }
.mpw-seg.is-on { background: var(--accent-tint, rgba(31,79,214,0.12)); color: var(--accent, #1f4fd6); }

.mpw-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--hairline, rgba(15,23,42,0.08)); background: var(--surface, #fff); }
.mpw-foot[hidden] { display: none; }
.mpw-foot-sp { flex: 1; }

.mpw-done { text-align: center; padding: 16px 8px 10px; }
.mpw-done-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(22,128,72,0.12); color: #15803d; margin-bottom: 12px; animation: mpPop .35s cubic-bezier(.2,1.3,.4,1); }
@keyframes mpPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mpw-done-ico svg { width: 28px; height: 28px; }
.mpw-done-link { margin: 12px 0 18px; }
.mpw-url { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--ink, #0f172a); background: var(--accent-tint, rgba(31,79,214,0.08)); border: 1px solid var(--hairline, rgba(15,23,42,0.1)); border-radius: 8px; padding: 8px 12px; }
.mpw-done-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Step 1 reads better narrow; step 2 uses the full width for controls + preview. */
.mpw-step[data-step="1"] { max-width: 470px; margin: 0 auto; }
.mpw-style-cols { display: grid; grid-template-columns: 1fr 232px; gap: 22px; align-items: start; }
.mpw-style-controls { min-width: 0; }
.mpw-style-controls .mpw-sublabel:first-child { margin-top: 0; }
@media (max-width: 660px) { .mpw-style-cols { grid-template-columns: 1fr; } .mpw-preview { display: none; } }

.mpw-preview { position: sticky; top: 0; }
.mpw-pv-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft, rgba(15,23,42,0.5)); margin-bottom: 7px; }
.mpw-pv-frame { border: 1px solid var(--hairline-strong, rgba(15,23,42,0.16)); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px -16px rgba(15,23,42,0.5); }
/* The mock mirrors public-ask.css (dark canvas, accent title/controls). */
.mpw-pv-screen { --pv-accent: #1f4fd6; position: relative; height: 320px; padding: 16px; overflow: hidden;
  background: #0b1020; background-size: cover; background-position: center;
  color: #e7ecf5; font-size: 10px; line-height: 1.3; }
.pv-center { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; text-align: center; }
.pv-title-lg { font-size: 18px; }
.pv-bar-lg { width: 94%; padding: 9px 11px; }
.pv-chat { display: flex; flex-direction: column; height: 100%; gap: 9px; }
.pv-chat .pv-head-min { justify-content: center; }
/* light-background preview: dark text + light cards (mirrors body.pa-light) */
.mpw-pv-screen.pv-light { color: #0f172a; }
.mpw-pv-screen.pv-light .pv-bar, .mpw-pv-screen.pv-light .pv-chip, .mpw-pv-screen.pv-light .pv-bubble { background: #eef1f6; border-color: rgba(15,23,42,.14); color: #0f172a; }
.pv-logo { height: 16px; width: auto; }
.pv-hero { max-width: 78%; max-height: 78px; border-radius: 7px; object-fit: cover; }
.pv-hero-ph { width: 100%; height: 56px; background: #141a2e; border-radius: 7px; }
.pv-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--pv-accent); }
.pv-title-grad { background: linear-gradient(90deg, #e7ecf5, var(--pv-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pv-title-sm { font-size: 12px; }
.pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 84%;
  background: #141a2e; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; padding: 7px 9px; color: #9aa6bf; }
.pv-send { flex: none; width: 16px; height: 16px; border-radius: 5px; background: var(--pv-accent); }
.pv-chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.pv-chip { background: #141a2e; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 3px 8px; font-size: 9px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-head-min { display: flex; align-items: center; gap: 7px; }
.pv-bubbles { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.pv-bubble { height: 16px; width: 62%; background: #141a2e; border-radius: 9px; }
.pv-bubble-r { align-self: flex-end; width: 48%; background: var(--pv-accent); opacity: .85; }
.pv-foot { position: absolute; left: 16px; right: 16px; bottom: 16px; }
.pv-foot .pv-bar { width: 100%; }
.pv-split { display: flex; gap: 12px; height: 100%; }
.pv-split-l { flex: 1; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.pv-split-r { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
/* Professional layout previews */
.pv-split2 { display: flex; height: 100%; gap: 0; margin: -16px; }
.pv-split2-l { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: flex-start; padding: 16px; text-align: left; }
.pv-split2-l .pv-title { text-align: left; }
.pv-split2-l .pv-bar { width: 100%; }
.pv-split2-l .pv-chips { justify-content: flex-start; }
.pv-split2-r { width: 42%; background-size: cover !important; background-position: center !important; }
.pv-cover .pv-title:not(.pv-title-grad) { color: #fff; }
.pv-side { display: flex; height: 100%; margin: -16px; }
.pv-side-brand { width: 38%; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px; background-size: cover !important; background-position: center !important; }
.pv-side-title { color: #fff !important; text-align: left; }
.pv-side-main { flex: 1; display: flex; flex-direction: column; gap: 9px; justify-content: center; padding: 16px; }
.pv-side-main .pv-bar { width: 100%; }
.pv-side-main .pv-chips { justify-content: flex-start; }
.mypages-editor-head { display: flex; align-items: center; gap: 12px; margin: -2px 0 22px; }
.mypages-editor-title { font-size: 18px; font-weight: 650; margin: 0; color: var(--ink, #0f172a); }
.mp-back { padding: 5px 11px; }
.mypages-field { margin-bottom: 20px; }
.mypages-label { display: block; font-weight: 650; font-size: 12.5px; margin-bottom: 8px; color: var(--ink, #0f172a); letter-spacing: .005em; }
.mypages-field-hint { font-weight: 400; color: var(--ink-soft, rgba(15,23,42,0.55)); }
.mypages-sublabel { width: 130px; flex-shrink: 0; font-size: 13px; color: var(--ink-soft, rgba(15,23,42,0.6)); }
.mypages-input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14));
  border-radius: var(--radius-control, 6px); padding: 9px 12px; font-size: 14px; font-family: inherit;
  background: var(--surface, #fff); color: var(--ink, #0f172a); margin-bottom: 8px;
  transition: border-color var(--transition-default, .15s ease), box-shadow var(--transition-default, .15s ease);
}
.mypages-input::placeholder { color: rgba(15,23,42,0.38); }
.mypages-input:last-child { margin-bottom: 0; }
/* Recommended-questions editor: dynamic rows + add / AI-regenerate + inline msg. */
.mp-ex-list { display: flex; flex-direction: column; gap: 8px; }
.mp-ex-row { display: flex; align-items: center; gap: 8px; }
.mp-ex-row .mp-ex { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.mp-ex-del { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14)); background: var(--surface, #fff);
  color: var(--ink-soft, #64748b); border-radius: var(--radius-control, 6px); cursor: pointer; font-size: 18px; line-height: 1; }
.mp-ex-del:hover { background: rgba(179,38,30,0.08); border-color: rgba(179,38,30,0.4); color: #b3261e; }
.mp-ex-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mp-ex-gen { color: var(--accent, #1f4fd6); }
.mp-ex-msg { min-height: 15px; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft, #64748b); }
.mp-ex-msg.is-ok { color: #0f766e; }
.mp-ex-msg.is-err { color: #b3261e; }
.mypages-input:focus { outline: none; border-color: var(--accent, #1f4fd6); box-shadow: 0 0 0 3px var(--accent-tint, rgba(31,79,214,0.15)); }
.mypages-select { width: auto; min-width: 190px; margin-bottom: 0; }
.mypages-checklist {
  border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14)); border-radius: var(--radius-control, 6px);
  padding: 8px; max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 2px;
}
.mypages-check {
  display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer;
  padding: 7px 9px; border-radius: var(--radius-control, 6px); color: var(--ink, #0f172a);
  transition: background var(--transition-default, .12s ease);
}
.mypages-check:hover { background: var(--accent-tint, rgba(31,79,214,0.08)); }
.mypages-check input { accent-color: var(--accent, #1f4fd6); width: 15px; height: 15px; }
/* Theme controls — tidy aligned grid. */
.mypages-theme-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.mypages-theme-row:last-child { margin-bottom: 0; }
.mypages-color { width: 46px; height: 32px; padding: 0; border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14)); border-radius: var(--radius-control, 6px); cursor: pointer; background: none; }
.mypages-file {
  font-size: 13px; color: var(--ink-soft, rgba(15,23,42,0.6));
  max-width: 230px;
}
.mypages-file::file-selector-button {
  margin-right: 10px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--hairline-strong, rgba(15,23,42,0.14)); background: var(--surface, #fff);
  color: var(--ink, #0f172a); border-radius: var(--radius-control, 6px); padding: 6px 12px;
  transition: background var(--transition-default, .15s ease), border-color var(--transition-default, .15s ease);
}
.mypages-file::file-selector-button:hover { background: var(--accent-tint, rgba(31,79,214,0.10)); border-color: var(--accent-tint-strong, rgba(31,79,214,0.28)); }
.mypages-thumb { font-size: 12px; color: var(--ink-soft, rgba(15,23,42,0.55)); }
.mypages-thumb-img { height: 38px; width: auto; max-width: 96px; border-radius: var(--radius-control, 6px); border: 1px solid var(--hairline, rgba(15,23,42,0.1)); object-fit: cover; vertical-align: middle; }
.mypages-actions-bar {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--hairline, rgba(15,23,42,0.08));
}
.mypages-err {
  background: rgba(179,38,30,0.07); border: 1px solid rgba(179,38,30,0.28); color: #b3261e;
  border-radius: var(--radius-control, 6px); padding: 10px 13px; font-size: 13px; margin-bottom: 18px;
}
.mypages-err[hidden] { display: none; }
.mypages-savedlink {
  background: rgba(22,128,72,0.08); border: 1px solid rgba(22,128,72,0.28); color: #15803d;
  border-radius: var(--radius-control, 6px); padding: 12px 14px; font-size: 13px; margin-top: 18px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mypages-savedlink[hidden] { display: none; }
.mypages-savedlink a { color: #15803d; font-weight: 650; word-break: break-all; }
.mypages-savedlink a { color: #1d6b34; font-weight: 600; word-break: break-all; }
.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-text);
}
.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; align-items: flex-start; }
.wh-btn-primary {
  background: var(--accent, #1f4fd6) !important;
  border-color: var(--accent, #1f4fd6) !important; color: #fff !important;
}

/* ── Consolidated "Connect" dropdown (replaces Train a URL /
   Connect a source / Connect a Git repo as separate buttons) ── */
.wh-connect-dd { position: relative; display: inline-block; }
.wh-connect-trigger {
  background: var(--accent-tint, rgba(31, 79, 214, 0.12));
  border-color: transparent;
  color: var(--accent-text, #1f4fd6);
}
.wh-connect-trigger:hover {
  background: var(--accent-tint-strong, rgba(31, 79, 214, 0.25));
  border-color: transparent;
  color: var(--accent-text-strong, #1438a8);
}
.wh-dd-caret { font-size: 10px; transition: transform var(--motion-fast, .15s) var(--ease, ease); }
.wh-connect-trigger[aria-expanded="true"] .wh-dd-caret { transform: rotate(180deg); }

.wh-connect-menu {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto;
  min-width: 300px; max-width: min(340px, 92vw); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-2, 0 8px 24px rgba(15, 23, 42, .14));
  padding: 6px; z-index: 40;
}
.wh-connect-menu[hidden] { display: none; }
/* The .buttons class sets an explicit `display`, which otherwise beats the
   UA [hidden] rule at equal specificity (source order). #wh_train_url_btn
   and #wh_connect_repo_btn stay in the DOM (hidden) purely so their
   existing wiring/paint logic keeps working — force them invisible. */
#wh_train_url_btn[hidden], #wh_connect_repo_btn[hidden] { display: none !important; }

.wh-connect-item {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 44px; padding: 8px 10px; border-radius: var(--radius-sm, 8px);
  cursor: pointer;
}
.wh-connect-item:hover, .wh-connect-item:focus-visible {
  background: var(--surface-2, #f6f9fc);
  outline: none;
}
.wh-dd-icon { font-size: 16px; line-height: 1.4; flex: none; }
.wh-dd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wh-dd-name {
  font-size: 13px; font-weight: 600; color: var(--ink-900, #1a1f36);
  display: inline-flex; align-items: center; gap: 6px;
}
.wh-dd-desc { font-size: 12px; color: var(--ink-soft, #64748b); line-height: 1.35; }
.wh-dd-pro {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 999px;
  background: var(--brand-100, #dbe6ff); color: var(--brand-600, #1438a8);
}
html[data-theme="dark"] .wh-connect-trigger {
  background: var(--brand-50, rgba(56, 110, 232, 0.18));
  color: var(--accent-text, #8aa6f6);
}
html[data-theme="dark"] .wh-connect-trigger:hover {
  background: var(--brand-100, rgba(56, 110, 232, 0.26));
  color: var(--accent-text-strong, #b6c8ff);
}
html[data-theme="dark"] .wh-connect-menu {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .wh-dd-pro {
  background: var(--brand-200, #34508f); color: #dbe6ff;
}

/* ── Live indexing badge + dropdown ── */
.wh-indexing-wrap { position: relative; }
/* :not([hidden]) so the JS `hidden` attribute actually hides the badge — a bare
   `display:inline-flex` (author class) overrides the UA `[hidden]{display:none}`,
   which kept the "Indexing" badge on screen even when nothing was indexing. */
.wh-indexing-btn:not([hidden]) { display: inline-flex; align-items: center; gap: 7px; }
.wh-indexing-spin {
  width: 11px; height: 11px; border-radius: 999px; flex: none;
  border: 2px solid var(--line-strong, #c1c9d2); border-top-color: var(--brand-500, #1f4fd6);
}
.wh-indexing-btn.is-active .wh-indexing-spin { animation: wh-idx-spin 0.8s linear infinite; }
@keyframes wh-idx-spin { to { transform: rotate(360deg); } }
.wh-indexing-count:not([hidden]) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--brand-500, #1f4fd6); color: #fff; font-size: 11px; font-weight: 700;
}
.wh-indexing-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  width: 340px; max-height: 60vh; overflow-y: auto;
  background: var(--surface, #fff); border: 1px solid var(--line-strong, #c1c9d2);
  border-radius: var(--radius-lg, 10px); box-shadow: var(--shadow-2, 0 8px 28px rgba(16,24,40,.16));
  padding: 10px;
}
.wh-idx-head { font-size: 12px; font-weight: 700; color: var(--ink-500, #475467);
  text-transform: uppercase; letter-spacing: .04em; margin: 2px 2px 8px; }
.wh-idx-list { display: flex; flex-direction: column; gap: 10px; }
.wh-idx-row { display: flex; flex-direction: column; gap: 4px; }
.wh-idx-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wh-idx-title { font-size: 13px; font-weight: 600; color: var(--ink-900, #101828);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-idx-pct { font-size: 12px; font-weight: 700; color: var(--brand-500, #1f4fd6); flex: none; font-variant-numeric: tabular-nums; }
.wh-idx-bar { height: 6px; border-radius: 999px; background: var(--surface-3, #eef1f5); overflow: hidden; }
.wh-idx-bar-fill { height: 100%; width: 0; border-radius: 999px;
  background: var(--brand-500, #1f4fd6); transition: width .6s ease; }
.wh-idx-sub { font-size: 11.5px; color: var(--ink-500, #475467); }
.wh-idx-row.is-ready .wh-idx-bar-fill { background: var(--success, #047857); }
.wh-idx-row.is-ready .wh-idx-pct { color: var(--success, #047857); }
.wh-idx-row.is-error .wh-idx-bar-fill { background: var(--error, #b91c1c); }
.wh-idx-row.is-error .wh-idx-pct { color: var(--error, #b91c1c); }
.wh-idx-empty { font-size: 12.5px; color: var(--ink-500, #475467); padding: 6px 2px; }

/* ── Warehouse "Ask" panel ── */
.whse-ask { margin: 0 0 18px; }
.whse-ask-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.whse-ask-bar:focus-within { border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50); }
.whse-ask-ico { color: var(--brand-500); font-size: 15px; flex: none; }
.whse-ask-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none; font: 400 14px var(--font-ui); color: var(--ink-900); }
.whse-ask-result { margin-top: 14px; }
.whse-ask-loading { padding: 14px 4px; color: var(--ink-500); font: 400 13px var(--font-ui); }
.whse-ask-answer { font: 500 15px/1.55 var(--font-ui); color: var(--ink-900);
  padding: 14px 16px; background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--radius-md); }
.whse-ask-sqlwrap { margin-top: 10px; }
.whse-ask-sqlwrap summary { cursor: pointer; font: 600 12px var(--font-ui); color: var(--ink-500); }
.ask-source { margin-top: 8px; font: 500 11.5px var(--font-ui); color: var(--ink-500, #64748b); }
.ask-source-tbl { font-family: var(--font-mono); color: var(--ink-700, #334155); background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--line, #e2e8f0); border-radius: 5px; padding: 1px 6px; }
.whse-ask-sql { margin: 6px 0 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font: 400 12px var(--font-mono); color: var(--ink-700); overflow: auto; white-space: pre-wrap; }
.whse-ask-chartwrap { margin-top: 14px; max-width: 760px; position: relative; height: 280px; }
.whse-ask-chartwrap canvas { display: block; width: 100% !important; height: 100% !important; }
.whse-ask-tablewrap { margin-top: 14px; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.whse-ask-table { border-collapse: collapse; width: 100%; font: 400 12.5px var(--font-ui); }
.whse-ask-table th { text-align: left; padding: 7px 10px; background: var(--surface-2); color: var(--ink-700);
  font-weight: 600; border-bottom: 1px solid var(--line); position: sticky; top: 0; white-space: nowrap; }
.whse-ask-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink-900); white-space: nowrap; }
.whse-ask-more { padding: 6px 10px; font: 400 11.5px var(--font-ui); color: var(--ink-500); }
.whse-ask-err { padding: 12px 14px; background: #fdecea; border: 1px solid #f5c6c2; border-radius: var(--radius-md);
  color: #a33a31; font: 400 13px var(--font-ui); }
/* Multi-tile report ("Build report") */
.whse-report-head { font: 600 16px var(--font-ui); color: var(--ink-900); margin: 4px 0 12px; }
/* Compact 2-up grid (JGAL): 6 visuals fit as 2 columns x 3 rows, each card
   small with a height-capped chart/table. */
.whse-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.whse-report-tile { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow-1); padding: 11px 13px; min-width: 0; }
.whse-report-tile-title { font: 600 13px var(--font-ui); color: var(--ink-900); margin-bottom: 8px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.whse-report-tile .whse-ask-tablewrap { max-height: 210px; margin-top: 8px; }
.whse-report-tile .whse-ask-chartwrap { max-width: none; height: 210px; margin-top: 4px; }
.whse-report-tile .whse-ask-chartwrap canvas { height: 100% !important; }
.whse-tile-refine-err { font: 500 11.5px var(--font-ui); color: #a33a31; background: #fdecea;
  border: 1px solid #f5c6c2; border-radius: 6px; padding: 6px 9px; margin-bottom: 6px; }
/* Dashboard pager (lazy pages). */
.ask-dash-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.ask-dash-pager:empty { display: none; }
.ask-dash-pageinfo { font: 600 12px var(--font-ui); color: var(--ink-500, #64748b); }
.ask-dash-pager button { border: 1px solid var(--line-200, #cbd5e1); background: var(--surface-1, #fff); color: var(--ink-600, #334155); font: 600 12px var(--font-ui); padding: 5px 14px; border-radius: 999px; cursor: pointer; }
.ask-dash-pager button:disabled { opacity: 0.4; cursor: default; }
/* ── Ask section: JGAL-style two-pane chat ── */
.ask-workspace { padding: 0 !important; height: 100%; min-height: 0; overflow: hidden; }
.ask-shell { display: flex; height: 100%; }
.ask-rail { flex: 0 0 320px; border-right: 1px solid var(--line); background: var(--surface-2); display: flex; flex-direction: column; min-height: 0; }
.ask-rail-head { padding: 16px 16px 10px; flex: none; display: flex; align-items: center; gap: 8px; }
.ask-new { flex: 1 1 auto; min-width: 0; border: 1px solid var(--brand-200); background: var(--surface); color: var(--accent-text-strong);
  border-radius: var(--radius-md); padding: 9px 12px; font: 600 13px var(--font-ui); cursor: pointer; transition: background .12s, color .12s; }
.ask-new:hover { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.ask-conv-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px 16px; min-height: 0; }
.ask-conv-empty { padding: 10px 12px; font: 400 12px var(--font-ui); color: var(--ink-500); }
.ask-conv-item { padding: 9px 11px; border-radius: 8px; font: 400 13px var(--font-ui); color: var(--ink-700); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.ask-conv-item:hover { background: var(--surface-3); }
.ask-conv-item.is-active { background: var(--brand-50); color: var(--accent-text-strong); font-weight: 600; }
.ask-conv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-conv-rename { opacity: 0; border: 0; background: transparent; color: var(--ink-500, #94a3b8); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 6px; flex-shrink: 0; }
.ask-conv-item:hover .ask-conv-rename { opacity: 1; }
.ask-conv-rename:hover { background: var(--surface-1, #fff); color: var(--brand-600, #4338ca); }
/* ── Chat-history add-ons: per-row ⋯ menu, floating popover, inline rename, clear-all ── */
.ask-conv-menu-btn { opacity: .38; border: 0; background: transparent; color: var(--ink-500, #94a3b8);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
  transition: opacity .12s, background .12s, color .12s; }
.ask-conv-item:hover .ask-conv-menu-btn, .ask-conv-menu-btn:focus-visible { opacity: 1; }
.ask-conv-menu-btn:hover { background: var(--surface-3, #f1f5f9); color: var(--brand-600, #1f4fd6); }
.ask-conv-menu-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-100, #dbe6ff); }
.ask-conv-menu { position: fixed; z-index: 9999; min-width: 136px; background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e8f0); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.16);
  padding: 5px; display: flex; flex-direction: column; }
.ask-conv-menu-item { text-align: left; border: 0; background: transparent; color: var(--ink-700, #334155);
  font: 500 13px var(--font-ui); padding: 8px 10px; border-radius: 7px; cursor: pointer; transition: background .1s, color .1s; }
.ask-conv-menu-item:hover { background: var(--surface-3, #f1f5f9); }
.ask-conv-menu-item.is-danger { color: var(--error-text, #dc2626); }
.ask-conv-menu-item.is-danger:hover { background: var(--error-bg, rgba(220,38,38,.08)); }
.ask-conv-rename-input { flex: 1; min-width: 0; font: 600 13px var(--font-ui); color: var(--ink-800, #1e293b);
  background: var(--surface-1, #fff); border: 1.5px solid var(--brand-500, #1f4fd6); border-radius: 6px;
  padding: 3px 7px; outline: none; box-shadow: 0 0 0 3px var(--brand-100, #dbe6ff); }
.ask-conv-item.is-editing { background: var(--surface-3); cursor: default; }
.ask-conv-clearall-wrap { margin: 0 10px 8px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ask-conv-clearall-wrap.is-armed { padding: 6px 8px; border-radius: 8px; background: var(--error-bg, rgba(220,38,38,.08)); }
.ask-conv-clearall { margin: 0; border: 0; background: transparent; color: var(--ink-500, #94a3b8);
  font: 500 11.5px var(--font-ui); text-align: left; padding: 6px 5px; cursor: pointer; border-radius: 6px;
  transition: color .12s, background .12s; }
.ask-conv-clearall:hover { color: var(--error-text, #dc2626); }
/* armed inline confirm — the "Clear all" confirm is a SEPARATE, offset target */
.ask-conv-clear-q { font: 600 11.5px var(--font-ui); color: var(--error-text, #dc2626); }
.ask-conv-clear-yes { border: 0; background: var(--error-text, #dc2626); color: #fff; font: 600 11.5px var(--font-ui);
  padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.ask-conv-clear-yes:hover { filter: brightness(.93); }
.ask-conv-clear-no { border: 0; background: transparent; color: var(--ink-500, #94a3b8); font: 500 11.5px var(--font-ui);
  padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.ask-conv-clear-no:hover { background: var(--surface-3); color: var(--ink-700); }
/* Dark: deepen the popover shadow and firm up the danger tint so it reads. */
html[data-theme="dark"] .ask-conv-menu { box-shadow: 0 10px 30px rgba(0,0,0,.55); }
html[data-theme="dark"] .ask-conv-menu-item.is-danger:hover,
html[data-theme="dark"] .ask-conv-clearall-wrap.is-armed { background: rgba(248,113,113,.16); }
.ask-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
/* Collapse / expand the chat-history rail. */
.ask-rail-toggle { flex: none; width: 28px; height: 28px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-500); border-radius: var(--radius-md); cursor: pointer; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.ask-rail-toggle:hover { color: var(--brand-600); border-color: var(--brand-200); }
.ask-rail-open { display: none; position: absolute; left: 10px; top: 12px; z-index: 5; width: 28px; height: 28px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-500); border-radius: var(--radius-md); cursor: pointer; font-size: 16px; line-height: 1; align-items: center; justify-content: center; box-shadow: var(--shadow-1); }
.ask-rail-open:hover { color: var(--brand-600); border-color: var(--brand-200); }
.ask-shell.rail-collapsed .ask-rail { display: none; }
.ask-shell.rail-collapsed .ask-rail-open { display: inline-flex; }
/* Nudge the chat header/content right so the reopen arrow doesn't overlap. */
.ask-shell.rail-collapsed .ask-chat-inner { padding-left: 46px; }
.ask-chat { flex: 1 1 auto; overflow-y: auto; padding: 26px 24px 12px; min-height: 0; }
.ask-chat-inner { max-width: 860px; margin: 0 auto; }
.ask-empty { text-align: center; color: var(--ink-700); padding: 56px 16px; }
.ask-empty h1 { font: 800 1.5rem var(--font-ui); color: var(--ink-900); margin: 0 0 8px; letter-spacing: -0.02em; }
.ask-empty p { margin: 0 0 22px; color: var(--ink-500); }
.ask-examples { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ask-honesty { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-500); }
.ask-example { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 14px; font: 400 13px var(--font-ui); color: var(--ink-700); cursor: pointer; }
.ask-example:hover { border-color: var(--brand-300); color: var(--brand-600); }
.ask-msg { margin: 0 0 18px; display: flex; }
.ask-msg.user { justify-content: flex-end; }
.ask-msg.assistant { flex-direction: column; align-items: flex-start; }
.ask-bubble { max-width: 100%; padding: 12px 15px; border-radius: 14px; font: 400 14px/1.55 var(--font-ui); }
.ask-msg.user .ask-bubble { background: var(--brand-500); color: #fff; border-bottom-right-radius: 4px; max-width: 80%; }
.ask-msg.assistant .ask-bubble { background: var(--surface); border: 1px solid var(--line); color: var(--ink-900); border-bottom-left-radius: 4px; width: 100%; box-sizing: border-box; }
.ask-answer { font: 500 14.5px/1.55 var(--font-ui); color: var(--ink-900); }
.ask-composer { flex: none; border-top: 1px solid var(--line); padding: 12px 16px 16px; background: var(--surface); }
.ask-composer-inner { max-width: 860px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 7px 7px 7px 14px; background: var(--surface); }
.ask-composer-inner:focus-within { border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50); }
#askInput { flex: 1 1 auto; min-width: 0; border: 0; outline: none; resize: none; background: none; font: 400 14px var(--font-ui); color: var(--ink-900); max-height: 160px; line-height: 1.5; padding: 4px 0; }
.ask-btn { flex: none; border: 0; border-radius: var(--radius-md); padding: 9px 13px; font: 600 13px var(--font-ui); cursor: pointer; }
.ask-send { background: var(--brand-500); color: #fff; }
.ask-send:hover { background: var(--brand-600); }
.ask-build { background: var(--surface-3); color: var(--ink-700); border: 1px solid var(--line); }
.ask-build:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }
/* Answer-quality pill (Pro+ only) — sits inline in the composer next to Deep research. */
.ask-model-wrap { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 0 4px 0 9px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-3);
  color: var(--ink-500); cursor: pointer; align-self: stretch; transition: border-color .15s, color .15s; }
.ask-model-wrap:hover { border-color: var(--brand-200); color: var(--brand-600); }
.ask-model-sel { border: 0; outline: none; background: none; cursor: pointer; color: var(--ink-700);
  font: 600 12.5px var(--font-ui); padding: 8px 2px; -webkit-appearance: none; appearance: none; }
.ask-model-sel option { color: var(--ink-900); background: var(--surface); }
.ask-kpi { font: 800 2rem var(--font-ui); color: var(--brand-600); padding: 6px 0 0; letter-spacing: -0.02em; }
.ask-kpi-label { font: 500 12px var(--font-ui); color: var(--ink-500); margin-bottom: 6px; }
.ask-composer-hint { display: none; margin-bottom: 8px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-200); font: 500 12.5px var(--font-ui); }
.ask-composer-hint.show { display: block; }
/* Blinking caret on an assistant bubble while its answer streams (JGAL parity). */
.ask-cursor::after { content: "▍"; color: var(--ink-400, #94a3b8); animation: ask-blink 1s steps(2) infinite; margin-left: 1px; }
@keyframes ask-blink { 50% { opacity: 0; } }
/* Loading spinner (the "spiral") — JGAL parity for the dashboard build. */
.spinner { width: 16px; height: 16px; border: 2px solid var(--brand-200, #c7d2fe); border-top-color: var(--brand-500, #4338ca); border-radius: 50%; display: inline-block; animation: ask-spin .7s linear infinite; vertical-align: -3px; }
@keyframes ask-spin { to { transform: rotate(360deg); } }
.ask-build-status { display: flex; align-items: center; gap: 9px; color: var(--ink-600, #475569); font: 500 13.5px var(--font-ui); padding: 4px 2px; }
.ask-viz-loading { display: flex; align-items: center; gap: 8px; color: var(--ink-500, #94a3b8); font-size: 12.5px; padding: 12px 2px; }
.ask-conv-loading { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 500 12.5px var(--font-ui); color: var(--ink-500, #94a3b8); }
.ask-loading-msg { display: flex; align-items: center; gap: 10px; padding: 22px 8px; font: 500 14px var(--font-ui); color: var(--ink-500, #94a3b8); }
.ask-dash-summary { margin: 2px 0 12px; padding: 11px 14px; border-left: 3px solid var(--brand-400, #6b7cff); background: var(--brand-50, #f5f7ff); border-radius: 8px; color: var(--ink-700, #334155); font: 14px/1.55 var(--font-ui); }
.ask-dash-summary:empty { display: none; }
.ask-dash-summary p { margin: 0 0 6px; } .ask-dash-summary p:last-child { margin-bottom: 0; }
.ask-dash-head { margin: 10px 0 4px; }
/* Per-tile header + chart-type switcher (JGAL ask-viz-select). */
.whse-report-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ask-viz-select { font: 500 11.5px var(--font-ui); color: var(--ink-600, #475569); background: var(--surface-1, #fff); border: 1px solid var(--line-200, #e2e8f0); border-radius: 7px; padding: 3px 6px; cursor: pointer; }
.whse-report-tile-tools { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.whse-tile-btn { border: 1px solid var(--line-200, #e2e8f0); background: var(--surface-1, #fff); border-radius: 7px; padding: 2px 6px; cursor: pointer; font-size: 12px; line-height: 1.4; }
.whse-tile-btn:hover { border-color: var(--brand-400, #6b7cff); }
.whse-tile-refine { display: flex; gap: 6px; margin: 0 0 8px; }
.whse-tile-refine input { flex: 1; border: 1px solid var(--line-200, #e2e8f0); border-radius: 7px; padding: 5px 8px; font: 400 12px var(--font-ui); }
.whse-tile-refine button { border: 1px solid var(--brand-300, #a5b4fc); background: var(--brand-50, #eef2ff); color: var(--brand-600, #4338ca); border-radius: 7px; padding: 4px 10px; font: 600 11.5px var(--font-ui); cursor: pointer; }
/* Run footer: spinner + label + ✕ stop under a streaming bubble. */
.ask-run-footer { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; color: var(--ink-500, #94a3b8); font: 500 12px var(--font-ui); }
.ask-msg-stop { margin-left: auto; border: 1px solid var(--line-200, #e2e8f0); background: var(--surface-1, #fff); color: var(--ink-500, #94a3b8); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; line-height: 1; padding: 0; }
.ask-msg-stop:hover { border-color: #dc2626; color: #dc2626; }
/* "Build a dashboard from this" under an answer. */
.ask-build-from { display: inline-block; margin: 8px 0 2px; border: 1px solid var(--brand-200, #c7d2fe); background: var(--brand-50, #f5f7ff); color: var(--brand-600, #4338ca); border-radius: var(--radius-md, 8px); padding: 7px 12px; font: 600 12.5px var(--font-ui); cursor: pointer; }
.ask-build-from:hover:not(:disabled) { background: var(--brand-500, #4338ca); color: #fff; border-color: var(--brand-500, #4338ca); }
.ask-build-from:disabled { opacity: 0.6; cursor: default; }
/* Markdown in answers. */
.ask-answer p { margin: 0 0 6px; } .ask-answer p:last-child { margin-bottom: 0; }
.ask-answer ul { margin: 4px 0 6px; padding-left: 20px; }
.ask-answer h2, .ask-answer h3, .ask-answer h4, .ask-answer h5, .ask-answer h6 { margin: 6px 0 4px; font-size: 1em; font-weight: 700; }
.ask-answer code { background: var(--brand-50, #f1f5f9); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.ask-answer a { color: var(--brand-600, #4338ca); text-decoration: underline; }
/* Image Q&A: thumbnail rows + lightbox. */
.ask-inline-images, .ask-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ask-images-wrap { margin-top: 10px; }
.ask-images-label { font-size: 12px; opacity: .7; margin-bottom: 4px; }
.ask-img-thumb { padding: 0; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; overflow: hidden; cursor: zoom-in; background: none; line-height: 0; }
.ask-img-thumb img { width: 120px; height: 120px; object-fit: cover; display: block; }
.ask-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 9999; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.ask-lightbox img { max-width: 92vw; max-height: 92vh; box-shadow: 0 4px 32px rgba(0,0,0,.5); border-radius: 8px; }
/* Interactive Q&A result card (JGAL renderResultCard): switcher + CSV + pin + pager. */
.ask-result { margin-top: 12px; border: 1px solid var(--line-200, #e6e9ef); border-radius: 12px; overflow: hidden; }
.ask-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line-200, #e6e9ef); background: var(--surface-2, #f8fafc); }
.ask-result-actions { display: flex; align-items: center; gap: 8px; }
.ask-result-csv, .ask-result-pin { border: 1px solid var(--line-200, #cbd5e1); background: var(--surface-1, #fff); color: var(--ink-600, #334155); font: 700 11.5px var(--font-ui); padding: 5px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.ask-result-pin { border-color: var(--brand-200, #c7d2fe); background: var(--brand-50, #eef2ff); color: var(--brand-600, #4338ca); }
.ask-result-csv:hover, .ask-result-pin:hover:not(:disabled) { border-color: var(--brand-500, #185fa5); color: var(--brand-600, #185fa5); }
.ask-result-pin:disabled { opacity: 0.7; cursor: default; }
.ask-result-body { padding: 10px; }
.ask-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; color: var(--ink-500, #64748b); font: 600 12px var(--font-ui); }
.ask-pager button { border: 1px solid var(--line-200, #cbd5e1); background: var(--surface-1, #fff); color: var(--ink-600, #334155); font: 600 11.5px var(--font-ui); padding: 3px 11px; border-radius: 7px; cursor: pointer; }
.ask-pager button:disabled { opacity: 0.4; cursor: default; }
.ask-save-dash { border: 1px solid var(--brand-200); background: var(--brand-50); color: var(--brand-600); border-radius: var(--radius-md); padding: 7px 12px; font: 600 12.5px var(--font-ui); cursor: pointer; }
.ask-save-dash:hover:not(:disabled) { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.ask-save-dash:disabled { opacity: 0.85; cursor: default; }

.whse-layout {
  display: grid; grid-template-columns: 320px 1fr; gap: 20px;  /* = .ask-rail width */
  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-text); 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;
}

/* Footer storage bar colour states — ≥80% amber, 100% red so the cap is
   visible before an upload is rejected (colour rides on the numeric label). */
.whse-quota.is-near .whse-quota-fill { background: #d97706; }
.whse-quota.is-near .whse-quota-label { color: #b45309; }
.whse-quota.is-full .whse-quota-fill { background: #dc2626; }
.whse-quota.is-full .whse-quota-label { color: #b91c1c; font-weight: 600; }

.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: var(--surface); padding: 14px 12px; min-height: 116px;
  font-family: inherit; transition: all .15s ease;
}
.whse-tile:hover {
  border-color: var(--accent-text);
  box-shadow: 0 4px 14px rgba(15,23,42,0.08);
}
.whse-tile--folder { background: var(--surface-2, #f6f9fc); }
/* Curated (admin-seeded, shared) folder tiles — neutral grey tint + left rail
   so built-in library folders read apart from the user's own uploads. Kept
   distinct from the blue hover/selection accent. */
/* 10-21 Dario "remove the built in grey thing": built-in (curated) tiles now look exactly
   like every other tile, same as /research. The class stays (JS gates read-only on it). */
.whse-tile--curated { }
.whse-tile-builtin { display: none !important; }
.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; }
/* Page-embedding coverage: unread (image-only) pages badge on a PDF tile */
.whse-cov-badge {
  display: inline-block; margin-top: 6px; cursor: pointer;
  font-size: 10.5px; font-weight: 600; line-height: 1;
  padding: 4px 7px; border-radius: 999px;
  border: 1px solid var(--warn-300, #fcd9a6);
  background: var(--warn-50, #fff7ed); color: var(--warn-700, #b45309);
}
.whse-cov-badge:hover { background: var(--warn-100, #ffedd5); }
.whse-cov-badge.is-scanning { opacity: .7; cursor: default; }
/* Informational badge — scan-on-click removed; don't advertise clickability. */
.whse-cov-badge.is-static { cursor: default; }
.whse-cov-badge.is-static:hover { background: var(--warn-50, #fff7ed); }
.whse-cov-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 9px 13px; border-radius: 9px;
  font-size: 12.5px; color: var(--warn-700, #b45309);
  background: var(--warn-50, #fff7ed); border: 1px solid var(--warn-200, #fed7aa);
}
.whse-cov-banner-msg { flex: 1; }
.whse-cov-scanall { font-size: 12px; padding: 6px 11px; }
.whse-tile-del {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 6px; border: 0;
  background: var(--line-soft); 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: var(--rose-50); color: var(--error-text);
}

/* 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(--accent-text-strong);
  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(--accent-text-strong);
}
.whse-selection-btn[disabled] {
  opacity: 0.45; cursor: not-allowed;
}
.whse-selection-btn[disabled]:hover {
  background: var(--surface); border-color: var(--line-strong);
}
.whse-selection-btn {
  padding: 7px 14px;
  font: 600 12px var(--font-ui, system-ui, sans-serif);
  background: var(--surface);
  color: var(--ink-900, #0f172a);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.whse-selection-btn:hover {
  background: var(--surface-3);
  border-color: var(--ink-500);
}
.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: var(--surface); 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; }
/* ◀ ▶ prev/next file navigation on the preview modal */
.whse-preview-nav { position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hairline, #e3e8ee);
  background: var(--surface-raised); color: var(--ink, #0f172a); font-size: 26px; line-height: 1;
  cursor: pointer; z-index: 4; box-shadow: 0 2px 10px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center; padding-bottom: 3px; }
.whse-preview-nav:hover { background: var(--surface-4); }
.whse-preview-nav.prev { left: 12px; }
.whse-preview-nav.next { right: 12px; }
/* image preview: picture + caption/description side by side */
.whse-img-view { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.whse-img-pane { flex: 1 1 320px; min-width: 280px; display: flex; justify-content: center;
  background: rgba(0,0,0,.18); border-radius: 10px; padding: 10px; }
.whse-img-pane .whse-preview-img { max-height: 60vh; border-radius: 6px; }
.whse-img-desc { flex: 1 1 260px; min-width: 240px; max-width: 420px; }
.whse-img-desc-h { font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft, #64748b); margin-bottom: 8px; }
.whse-img-desc-b { font-size: 14px; line-height: 1.6; white-space: pre-wrap;
  word-break: break-word; color: var(--ink, #0f172a); }
.whse-img-desc-empty { color: var(--ink-soft, #64748b); font-style: italic; }
.whse-img-meta { margin-top: 14px; font-family: ui-monospace, monospace; font-size: 12px;
  color: var(--ink-soft, #94a3b8); word-break: break-all; }
@media (max-width: 640px) { .whse-img-view { flex-direction: column; } }
.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-3); 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; }

/* Owner-only: right-click folder context menu + "featured on landing" star. */
.wh-ctx-menu {
  position: fixed; z-index: 6000;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.12));
  border-radius: var(--radius-control, 10px);
  box-shadow: 0 12px 30px rgba(15,23,42,0.20);
  padding: 4px; min-width: 200px;
}
.wh-ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; background: transparent;
  border-radius: 7px; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; color: var(--ink, #0f172a);
}
.wh-ctx-item:hover { background: var(--surface-2, #f1f5f9); }
.wh-ctx-star { color: #f59e0b; font-size: 14px; line-height: 1; }
.folder-featured-star {
  position: absolute; top: 6px; right: 8px;
  color: #f59e0b; font-size: 15px; line-height: 1;
  text-shadow: 0 1px 2px rgba(15,23,42,0.25);
  pointer-events: none;
}
.folder-featured-star[hidden] { display: none; }
/* On file tiles the top corners hold the delete-X / select checkbox, so the
   featured star sits bottom-right to avoid overlapping them on hover. */
.whse-tile--file .folder-featured-star { top: auto; bottom: 8px; right: 8px; }

/* ════════════════════════════════════════════════════════════════════
   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: 290px; --sidebar-gap: 0px; --sidebar-total: 290px; }
body.no-filesidebar { --sidebar-width: 0px; --sidebar-total: 0px; }

/* ════════════ 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); }
/* ── Consolidated panel nav + footer (replaces the old icon rail) ── */
.efs-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); flex: none; }
.efs-nav .etl-rail-btn { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; max-width: none;
  padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: none;
  color: var(--ink-700); font: 600 12.5px var(--font-ui); text-align: left; cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease); }
.efs-nav .etl-rail-btn svg { width: 18px; height: 18px; flex: none; color: var(--ink-500); }
.efs-nav .etl-rail-btn:hover { background: var(--surface-3); color: var(--ink-900); }
.efs-nav .etl-rail-btn:hover svg { color: var(--ink-900); }
.efs-nav .etl-rail-btn.is-active { background: var(--brand-50); color: var(--accent-text-strong); border-color: var(--brand-200); }
.efs-nav .etl-rail-btn.is-active svg { color: var(--brand-500); }
/* Information scent: a 2nd-level preview under the group label so users can
   predict what's inside without clicking (IA 4th ed. p.387; Pirolli & Card,
   information scent; Kalbach — descriptive over vague labels). */
.efs-adv-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.efs-adv-preview { font: 400 10px var(--font-ui); color: var(--ink-400); letter-spacing: .01em; margin-top: 1px; }
.efs-adv-toggle[aria-expanded="true"] .efs-adv-preview { display: none; }
.efs-foot { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--line); flex: none; margin-top: auto; }
.efs-foot .etl-rail-btn, .efs-foot .etl-rail-theme { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: auto; max-width: none; padding: 9px 4px; border: 1px solid transparent; border-radius: var(--radius-md); background: none;
  color: var(--ink-500); font: 500 10.5px var(--font-ui); cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease); }
.efs-foot .etl-rail-btn svg, .efs-foot .etl-rail-theme svg { width: 18px; height: 18px; flex: none; }
.efs-foot .etl-rail-btn:hover, .efs-foot .etl-rail-theme:hover { background: var(--surface-3); color: var(--ink-900); }
.efs-foot .etl-rail-btn.is-active { background: var(--brand-50); color: var(--brand-600); }
.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(--accent-text);
  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(--accent-text-strong); }
.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(--accent-text-strong); }
.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 {
  /* Edge handle on the panel's OUTER (right) border — outside the content,
     not over it. Tracks the panel edge via --sidebar-total. */
  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);
}
.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: 8px; 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;
}
/* Needs-input signifier: an operator missing a required upstream input gets a
   dashed amber outline + a "⚠ needs input" chip pinned to it, so the gap is
   obvious on the canvas without selecting the node. Cleared once connected. */
.flowchart-operator.df-needs-input {
  outline: 2px dashed #d97706; outline-offset: 2px;
  border-left-color: #d97706 !important;
}
.flowchart-operator .df-need-badge {
  position: absolute; top: -11px; left: 8px; z-index: 6;
  font: 700 9.5px/1 var(--font-ui); letter-spacing: .02em;
  color: #fff; background: #d97706; border-radius: 999px;
  padding: 3px 7px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 1px 3px rgba(15,23,42,.28);
}
/* Ware similarity: a categorical GLYPH leads the eyebrow (triangle = source,
   diamond = transform, square = sink, loop = control). The SHAPE carries the
   role colourblind-safe; colour is a redundant second channel, not the cue. */
.flowchart-operator.op-cat-source:not(.for-loop-tile)    .flowchart-operator-title::before { content: "\25B6  SOURCE";    color: var(--brand-500, #1f4fd6); }
.flowchart-operator.op-cat-transform:not(.for-loop-tile) .flowchart-operator-title::before { content: "\25C6  TRANSFORM"; color: var(--cat-transform-text); }
.flowchart-operator.op-cat-sink:not(.for-loop-tile)      .flowchart-operator-title::before { content: "\25A0  SINK";      color: var(--success, #047857); }
.flowchart-operator.op-cat-control:not(.for-loop-tile)   .flowchart-operator-title::before { content: "\27F3  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: var(--cat-transform-text); }
.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: var(--cat-transform-tint); color: var(--cat-transform-text); }
.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; }

/* Transform-category accents are tokenized (--cat-transform-*): the slate
   lifts automatically in dark via etl-design-system.css. */
.flowchart-operator.op-cat-transform .flowchart-operator-connector-arrow {
  border-left-color: var(--cat-transform-text);
}

/* ══════════════ Ware perceptual node-link encoding ══════════════
 * (Colin Ware, "Information Visualization: Perception for Design")
 *
 *  1. ROLE BY SHAPE (similarity — shape beats colour for categorical): the
 *     three data-flow classes get a distinguishable SILHOUETTE so the eye
 *     reads source vs transform vs sink at a glance without relying on colour
 *     (colour is reserved for the user's cog-dim tags). Source = rounded-LEFT
 *     (an intake), sink = rounded-RIGHT (an outlet), transform = plain box,
 *     control = pill. Redundant with the eyebrow glyph + left accent above.
 *  2. FIGURE-GROUND: a stronger node outline (≥3:1 vs the canvas in BOTH
 *     themes) so white-on-near-white (light) / dark-on-dark (dark) nodes
 *     separate cleanly from the background instead of dissolving into it.
 *
 * All selectors carry an op-cat class (specificity 0,2,0) so they win over
 * jquery.flowchart.css's base `.flowchart-operator` (0,1,0) but still LOSE to
 * its later `.selected` / `.hover` (0,2,0, later file) — selection/hover
 * highlight is preserved. The cog-dim colour ribbon (::before, radius:inherit)
 * follows the new corner radii automatically, so tags stay intact. */

/* Node-outline token: ~3.3:1 vs the canvas so the figure reads as a figure. */
:root { --op-outline: #7d8ca0; }        /* vs light canvas #f6f9fc ≈ 3.3:1 */
html[data-theme="dark"] { --op-outline: #5a6a80; }  /* vs dark canvas #0c111a ≈ 3.3:1 */

/* Figure-ground: strengthen the three non-accent borders (leave border-left to
   the category-tinted accent above). Selected/hover still recolour all four. */
.flowchart-operator.op-cat-source,
.flowchart-operator.op-cat-transform,
.flowchart-operator.op-cat-sink,
.flowchart-operator.op-cat-control {
  border-top-color: var(--op-outline);
  border-right-color: var(--op-outline);
  border-bottom-color: var(--op-outline);
}

/* Role silhouettes. `.for-loop-tile` (the wide control tile) keeps its own
   shape, so exclude it from the per-category radii. */
.flowchart-operator.op-cat-source:not(.for-loop-tile)    { border-radius: 16px 5px 5px 16px; }
.flowchart-operator.op-cat-transform:not(.for-loop-tile) { border-radius: 6px; }
.flowchart-operator.op-cat-sink:not(.for-loop-tile)      { border-radius: 5px 16px 16px 5px; }
.flowchart-operator.op-cat-control:not(.for-loop-tile)   { border-radius: 13px; }

/* The title bar sits at the top and has its OWN top corner radii — match them
   to the node silhouette so the header doesn't cut a smaller corner inside a
   larger one (and so the colour-tag ribbon lines up on both top corners). */
.flowchart-operator.op-cat-source:not(.for-loop-tile)    .flowchart-operator-title { border-top-left-radius: 16px; border-top-right-radius: 5px; }
.flowchart-operator.op-cat-transform:not(.for-loop-tile) .flowchart-operator-title { border-top-left-radius: 6px;  border-top-right-radius: 6px; }
.flowchart-operator.op-cat-sink:not(.for-loop-tile)      .flowchart-operator-title { border-top-left-radius: 5px;  border-top-right-radius: 16px; }
.flowchart-operator.op-cat-control:not(.for-loop-tile)   .flowchart-operator-title { border-top-left-radius: 13px; border-top-right-radius: 13px; }

/* 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(--accent-text);
  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 ════════════════
   The dark token re-point block moved to etl-design-system.css (the one
   canonical `html[data-theme="dark"]` set). Components in this file must
   use tokens; do NOT add per-component dark overrides here. */

/* 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: var(--surface); 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;
  display: inline-flex; align-items: center; gap: 9px;
}
/* DataPilot mark — brand-blue tile with the white paper-airplane SVG
   inside. Same identity on the loading splash and the workspace topbar. */
.dp-mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; border-radius: 7px;
  background: linear-gradient(135deg, var(--brand-500, #1f4fd6), var(--brand-700, #102b85));
  color: #fff;
}
.etl-topbar-title .dp-mark { width: 28px; height: 28px; }
.etl-splash-logo .dp-mark { width: 30px; height: 30px; }
/* 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; }

/* The dataflow/pipeline canvas does NOT belong on the notebook route. Hide its
   chrome (canvas, bottom settings drawer, zoom + add-activity controls, run-
   history panel) so it can't bleed through behind the notebook view or the
   "Create a notebook" placeholder — the bug where switching to Notebooks left
   the "General / PIPELINE NAME" drawer showing underneath. Keyed on the ROUTE
   (always set) so it also covers the empty state, where notebook-mode (which
   showNotebookView sets) isn't applied. Mirrors the warehouse/sql/dashboard
   canvas-hide rules. */
body[data-etl-route="notebook"] #chart_container,
body[data-etl-route="notebook"] #footer,
body[data-etl-route="notebook"] .zoom-controls,
body[data-etl-route="notebook"] .pl-add-fab,
body[data-etl-route="notebook"] #plCanvasHead,
body[data-etl-route="notebook"] #pipeline_history_panel { 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;
}
/* (Old etl-splash-logo::before gradient-square removed — the .dp-mark inline
   SVG above is the splash logo now.) */
.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)
   ════════════════════════════════════════════════════════════════════ */
/* Dashboard edit is a full focused surface — hide ALL dataflow chrome: the
   canvas, top nav, the bottom tab dock (#footer), zoom controls, the activities
   sidebar (the "dataflow nav bar"), and the pipeline-history panel. Scoped to
   BOTH the mode class and the route attribute so nothing flashes/lingers on
   first load regardless of which is applied first. */
body.dashboard-mode #chart_container,
body.dashboard-mode #topNav,
body.dashboard-mode #footer,
body.dashboard-mode .zoom-controls,
body.dashboard-mode #pipeline_history_panel,
body[data-etl-route="dashboard"] #chart_container,
body[data-etl-route="dashboard"] #topNav,
body[data-etl-route="dashboard"] #footer,
body[data-etl-route="dashboard"] .zoom-controls,
body[data-etl-route="dashboard"] #pipeline_history_panel { display: none !important; }

.dbx-workspace {
  /* Start BELOW the floating top-nav (z-index 25, --etl-topbar-h tall) so the
     dashboard header + tiles never sit under it. */
  position: absolute; top: var(--etl-topbar-h, 56px); left: 0; right: 0; bottom: 0; overflow: auto;
  background: var(--canvas-bg, #f3f5f9);
  padding: 18px 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-text);
}
.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: var(--rose-50); color: var(--error-text);
}
.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: var(--rose-50); color: var(--error-text); }
.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 var(--line-strong); background: var(--surface); color: var(--ink-900);
  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 var(--line-strong); background: var(--surface);
  color: var(--ink-700); font: 600 12.5px "Space Grotesk", system-ui, sans-serif;
  margin-right: 6px;
}
.flow-params-btn:hover { background: var(--surface-3); }
.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: var(--ink-900); }
.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 var(--line-strong); background: var(--surface); color: var(--ink-900);
}
.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 {
  /* 220px of a ~300px content area left no room for the label, status line and
     Refresh button below it — they rendered past the bottom of the window. The
     tree scrolls internally either way, so capping it costs one scroll gesture
     inside a list and buys first-screen visibility for the controls around it
     (HHS 5:7: information not in the first screenful "may be missed
     altogether"). */
  max-height: 150px;
  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);
}
/* Per-row destructive action ("Remove", formerly a shouting red "DROP").
   `.buttons` (this file) beats `.btn-danger` (etl-design-system.css) at equal
   specificity because it loads later, so the danger color never applied once
   the inline `color:red` was removed. State it explicitly, scoped to the panel:
   quiet at rest so it doesn't out-shout the panel's real work, unmistakably
   destructive on hover/focus. */
#selected_activity_settings .buttons.btn-danger,
#selected_activity_settings button.buttons.btn-danger {
  color: var(--ink-500, #5f7189);
  background: transparent;
  border-color: var(--line, #e3e8ee);
}
#selected_activity_settings .buttons.btn-danger:hover,
#selected_activity_settings button.buttons.btn-danger:hover,
#selected_activity_settings .buttons.btn-danger:focus-visible {
  color: var(--error, #b91c1c);
  border-color: var(--error, #b91c1c);
  background: rgba(185, 28, 28, 0.06);
}

/* + 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: var(--surface-3); color: var(--ink-700);
  border-color: var(--hairline);
}
.run-details-summary-pill--running {
  background: var(--info-bg); color: var(--info-text);
  border-color: var(--info-border);
}
.run-details-summary-pill--ok      {
  background: var(--ok-bg); color: var(--ok-text);
  border-color: var(--ok-border);
}
.run-details-summary-pill--failed  {
  background: var(--error-bg); color: var(--error-text);
  border-color: var(--error-border);
}
.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: var(--surface-3);
  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 var(--line-soft);
  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: var(--surface-3); }
.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: var(--surface);
  border: 1px solid var(--error-border);
  border-radius: 8px;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--error-text);
  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: var(--surface);
  border: 1px solid var(--hairline);
  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: var(--error-bg); color: var(--error-text); border-color: var(--error-border); }
.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;
}

/* ===================================================================
   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;
  /* AUTO MARGINS, not align-items:center (08-14). The card is ~283px tall
     and this box shrinks to ~92px when the bottom inspector is open, so
     centering pushed the card 140px ABOVE the top edge - clipped, and
     overlapping the toolbar. Auto margins centre it when there is room and
     collapse to 0 when there is not, so the top is never unreachable; the
     overflow then scrolls instead of hiding. */
  z-index: 8; display: flex; overflow: auto;
  padding: 12px 12px 96px;   /* the 96 clears the bottom inspector panel */
  /* 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; }
/* An empty SECTION has no flow to inspect, and the 500px bottom panel was
   covering the placeholder card entirely (08-14: card at y=120, panel top
   at y=210, so the owner saw two half-drawn placeholders stacked). The
   panel stands down while the card is up and comes straight back after -
   a body class, so nothing about the panel's own collapse state is
   touched. */
body.etl-empty-section .footer { display: none; }
.etl-empty-card {
  pointer-events: auto; max-width: 380px; padding: 28px 32px 24px;
  margin: auto;   /* centres with room; never clips the top without it */
  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(--accent-text-strong);
  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(--accent-text-strong); }

/* 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); }

/* ===================================================================
   KEPT dark overrides — legacy #footer form fields carry inline JS styles
   (no light CSS rule to tokenize), and a CodeMirror dark syntax theme
   (a deliberate dark-only palette, not a token re-point).
   =================================================================== */
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;
}

/* 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; }

/* ===================================================================
   KEPT dark overrides — notebook.css / sql.css components whose LIGHT
   rules live in those sheets (out of scope for the home.css token
   consolidation). Remove each selector once its own sheet is tokenized.
   =================================================================== */
html[data-theme="dark"] .nb-btn,
html[data-theme="dark"] .sql-view-btn,
html[data-theme="dark"] .sql-results-csv,
html[data-theme="dark"] .sql-results-filter {
  background: var(--surface, #121821) !important;
  color: var(--ink-900, #e8edf4) !important;
  border-color: var(--line-strong, #3a4658) !important;
}
/* toolbar / modal selects styled by sql.css / notebook.css or inline JS */
html[data-theme="dark"] .pipeline-run 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"] .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;
}
html[data-theme="dark"] .nb-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 (notebook.css) 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: transparent !important; color: #94a3b8 !important; border-color: var(--line, #334155) !important; }
html[data-theme="dark"] .nb-btn-stop:hover { background: rgba(248,113,113,0.14) !important; color: #f87171 !important; border-color: rgba(248,113,113,0.4) !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; }
/* SQL toolbar: keep Save SUBORDINATE in dark too (the global dark
   .nb-btn-primary above paints it a filled brand blue — that would make it
   compete with the primary Run). Scope-override to a neutral outline so Run
   stays dominant (ledger F6). */
html[data-theme="dark"] .sql-toolbar .nb-btn-primary {
  background: var(--surface, #121821) !important;
  color: var(--ink-900, #e8edf4) !important;
  border-color: var(--line-strong, #3a4658) !important;
}
html[data-theme="dark"] .sql-toolbar .nb-btn-primary:hover {
  background: var(--surface-3, #1a212c) !important;
  color: #cdd9ff !important; border-color: var(--brand-500, #1f4fd6) !important;
}
/* SQL results "Pin" pill was a light-only white card — dark-mode fix. */
html[data-theme="dark"] .sql-results-pin {
  background: var(--surface, #121821); color: var(--ink-900, #e8edf4);
  border-color: var(--line-strong, #3a4658);
}
html[data-theme="dark"] .sql-results-pin:hover {
  border-color: var(--brand-500, #1f4fd6); color: #cdd9ff;
}
/* Friendly error callout — dark equivalent (was a glaring light-pink card
   in dark; light-only-token bug). Calm dark-red tint, legible light text. */
html[data-theme="dark"] .sql-results-error {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(248, 113, 113, 0.35);
  border-left-color: #f87171;
}
html[data-theme="dark"] .sql-results-error-ico { color: #f87171; }
html[data-theme="dark"] .sql-results-error-head { color: var(--ink-900, #e8edf4); }
html[data-theme="dark"] .sql-results-error-msg { color: var(--ink-700, #c2ccd8); }

/* KEPT: legacy bottom-panel (#footer) tables/cards/inputs are styled by
   inline JS styles, not by light CSS rules — there is no light rule to
   tokenize, so these dark equivalents stay (with !important to beat the
   inline styles). */
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(--accent-text); 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: var(--surface); 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: var(--surface); 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: var(--surface); 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); }
/* Row wrapper + 3-dot kebab. The open-button keeps its full-row hit area;
   the kebab sits at the right and only reveals on hover. */
.kit-wh-zone-row { position: relative; display: flex; align-items: stretch; gap: 2px; }
.kit-wh-zone-row.is-active .kit-wh-zone { background: var(--brand-50); border-color: var(--brand-200); }
.kit-wh-zone-row.is-active .kit-wh-zone strong { color: var(--brand-700); }
.kit-wh-zone-row .kit-wh-zone-open { flex: 1 1 auto; }
.kit-wh-zone-kebab { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; border: 1px solid transparent; background: transparent; border-radius: var(--radius-md);
  color: var(--ink-500); cursor: pointer; opacity: 0;
  transition: opacity 120ms var(--ease), background 120ms var(--ease), color 120ms var(--ease); }
.kit-wh-zone-kebab svg { display: block; }
.kit-wh-zone-row:hover .kit-wh-zone-kebab,
.kit-wh-zone-row:focus-within .kit-wh-zone-kebab { opacity: 1; }
.kit-wh-zone-kebab:hover { background: var(--surface-2); color: var(--ink-900); }
.kit-wh-zone-kebab:focus-visible { opacity: 1; outline: 2px solid var(--brand-300); outline-offset: 1px; }
/* Popup menu shown when the kebab is clicked. */
.kit-wh-zone-menu { min-width: 156px; background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius-md, 8px); box-shadow: 0 10px 28px rgba(15,23,42,.16), 0 2px 4px rgba(15,23,42,.06);
  padding: 4px; z-index: 2500; }
.kit-wh-zone-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  font: 500 13px var(--font-ui); color: var(--ink-900, #0f172a); text-align: left; }
.kit-wh-zone-menu-item:hover { background: var(--surface-2, #f8fafc); }
.kit-wh-zone-menu-item.is-danger { color: #b91c1c; }
.kit-wh-zone-menu-item.is-danger:hover { background: #fef2f2; }
.kit-wh-zone-menu-item svg { flex: none; color: currentColor; }
.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; }
/* ── Insights page (flat pins grid + collapsible Dashboards section) ── */
.kit-insights .kit-insights-body { padding: 16px 24px 32px; display: flex; flex-direction: column; gap: 20px;
  background: var(--surface); overflow-y: auto; }
.kit-pins-section { display: block; }
.kit-pins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.kit-pin-card { position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 14px -10px rgba(15,23,42,.10);
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); }
.kit-pin-card:hover { transform: translateY(-1px); border-color: var(--brand-200);
  box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 12px 24px -10px rgba(31,79,214,.18); }
.kit-pin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kit-pin-type { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font: 600 10.5px var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-500); background: var(--brand-50); border: 1px solid var(--brand-200); }
.kit-pin-kebab { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--ink-500); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.kit-pin-kebab svg { display: block; }
.kit-pin-card:hover .kit-pin-kebab, .kit-pin-card:focus-within .kit-pin-kebab { opacity: 1; }
.kit-pin-kebab:hover { background: var(--surface-2); color: var(--ink-900); }
.kit-pin-title { font: 700 14px/1.3 var(--font-ui); color: var(--ink-900); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kit-pin-sql { font: 500 11.5px/1.45 var(--font-mono); color: var(--ink-500); margin: 0;
  padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-pin-foot { display: flex; justify-content: space-between; font: 500 11px var(--font-ui); color: var(--ink-500); }
/* Task 14, Step 3 — the pins empty-state (.kit-pins-empty*) went with the
   retired Pins rail: `pinsHtml` was its only producer. Removed rather than
   left orphaned. .kit-pins-grid / .kit-pin-card-head / .kit-pin-viz STAY —
   the report cards still use them. */
/* Dashboards section — collapsible <details> under the pins grid. */
.kit-dash-section { border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); }
.kit-dash-section > summary { cursor: pointer; padding: 12px 16px;
  font: 600 13px var(--font-ui); color: var(--ink-900); list-style: none; }
.kit-dash-section > summary::-webkit-details-marker { display: none; }
.kit-dash-section > summary::before { content: "▸"; display: inline-block; width: 14px;
  color: var(--ink-500); transition: transform .15s var(--ease); }
.kit-dash-section[open] > summary::before { transform: rotate(90deg); }
.kit-dash-section .dim { font-weight: 500; color: var(--ink-500); margin-left: 6px; }
.kit-dash-section .kit-dash-list { padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 4px; }

/* ════════ Reports landing ════════
   Report cards reuse .kit-pin-card; the grid also holds the dashed
   "+ New report" create-tile. (The pins <details> section that used to sit
   below was retired in Task 14, Step 3.) */
.kit-dash-card { cursor: pointer; }
.kit-dash-card:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }
/* "‹ Insights" back button in the open-dashboard header. */
.kit-dash-back { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 6px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink-500); font: 600 12px var(--font-ui); cursor: pointer;
  transition: color .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease); }
.kit-dash-back:hover { color: var(--brand-500); border-color: var(--brand-200); background: var(--brand-50); }
.kit-dash-card--new { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 240px; border: 1.5px dashed var(--line); border-radius: var(--radius-lg);
  background: transparent; color: var(--ink-500); font: 600 13px var(--font-ui); cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease); }
.kit-dash-card--new:hover { border-color: var(--brand-300); color: var(--brand-500); background: var(--brand-50); }
.kit-dash-card--new-plus { font: 700 22px/1 var(--font-ui); }
.kit-dash-viz-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; padding: 0 14px; text-align: center;
  color: var(--ink-500); font: 500 12px/1.4 var(--font-ui); }
.kit-dash-viz-empty svg { color: var(--brand-300); }
/* Mini chart content — shared by mosaic tiles AND pin-library thumbnails. */
.kit-mini canvas { width: 100% !important; height: 100% !important; display: block; }
.kit-mini.is-blank { background: var(--surface-2); border-style: dashed; }
.kit-mini.is-kpi { display: flex; align-items: center; justify-content: center;
  padding: 2px 4px; font: 700 11px var(--font-mono); color: var(--ink-900); white-space: nowrap; }
.kit-mini.is-table { display: flex; flex-direction: column; gap: 3px;
  justify-content: center; padding: 4px 5px; }
.kit-mini.is-table i { display: block; height: 3px; border-radius: 2px; background: var(--line); }
/* Mini-mosaic dashboard preview: tiles at their real (scaled) layout. */
.kit-dash-mini { position: absolute; overflow: hidden; box-sizing: border-box;
  padding: 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
.kit-dash-mini-more { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px;
  border-radius: 999px; background: rgba(15,23,42,.65); color: #fff; font: 700 10px var(--font-mono); }
/* Task 14, Step 3 — the .kit-pins-details* "raw material" overrides styled the
   retired Pins <details> rail (`pinsSection`, deleted). Nothing emits that
   markup now, so the whole block is removed. */
/* Skeleton shimmer while a preview chart loads. */
.kit-pin-viz-skel { position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(100deg, var(--surface-2) 40%, var(--surface) 50%, var(--surface-2) 60%);
  background-size: 200% 100%; animation: kit-pin-skel 1.2s linear infinite; }
@keyframes kit-pin-skel { from { background-position: 120% 0; } to { background-position: -80% 0; } }
/* Pin's 3-dot menu — same shape as the dashboard kebab menu. */
.kit-pin-menu { min-width: 156px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(15,23,42,.16), 0 2px 4px rgba(15,23,42,.06);
  padding: 4px; z-index: 2500; }
.kit-pin-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  font: 500 13px var(--font-ui); color: var(--ink-900); text-align: left; }
.kit-pin-menu-item:hover { background: var(--surface-2); }
.kit-pin-menu-item.is-danger { color: #b91c1c; }
.kit-pin-menu-item.is-danger:hover { background: #fef2f2; }
.kit-pin-menu-item svg { flex: none; color: currentColor; }

.kit-dash-canvas { background: var(--surface-2); overflow: auto; padding: 18px 22px 22px; }
/* position:relative is REQUIRED — tiles are position:absolute, so without it
   they anchor to .dbx-workspace and escape the canvas (overlapping the rail +
   top nav). With it they position inside the canvas grid as intended. */
.kit-dash-grid { position: relative; 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); }
/* Read-only report-page strip (canvas viewer). Distinct from the builder's
   editable .ib-tabs — this one only switches pages. It is the last child of
   the scrolling .kit-dash-canvas and sticks to its bottom edge, Power-BI
   style; the negative margins let it span the canvas padding full-bleed.
   Overflow beyond 8 tabs goes to a <select>, never a second row and never a
   horizontal scroller ("horizontal scrolling isn't readily discoverable"). */
/* The canvas becomes a flex column ONLY when a strip is present, so the strip
   sits on the canvas's bottom edge instead of floating just under the last
   tile. :has() is supported everywhere this UI runs; browsers without it fall
   back to the sticky positioning below, which is still correct once the
   canvas scrolls. */
.kit-dash-canvas:has(> .dbx-tabs) { display: flex; flex-direction: column; }
.kit-dash-canvas:has(> .dbx-tabs) > .kit-dash-grid { flex: 0 0 auto; }
.kit-dash-canvas:has(> .dbx-tabs) > .dbx-tabs { margin-top: auto; }
.dbx-tabs { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 2px;
  margin: 16px -22px -22px; padding: 5px 22px; overflow: hidden;
  background: var(--surface); border-top: 1px solid var(--line); }
/* role="tablist" lives on .dbx-tablist, not .dbx-tabs — a tablist's children
   must all be tabs, so the overflow <select> is a sibling of this container. */
.dbx-tablist { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.dbx-tab { flex: 0 1 auto; min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 12px; border: 0; border-radius: 6px 6px 0 0; background: transparent; cursor: pointer;
  font: 500 12.5px var(--font-ui); color: var(--ink-500);
  border-bottom: 2px solid transparent; transition: color 120ms var(--ease), background 120ms var(--ease); }
.dbx-tab:hover { color: var(--ink-900); background: var(--surface-2); }
.dbx-tab.is-active { color: var(--brand-600, var(--ink-900)); background: var(--surface-2); border-bottom-color: var(--brand-500); }
.dbx-tab-overflow { flex: 0 0 auto; margin-left: 4px; max-width: 150px;
  padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink-500); font: 500 12px var(--font-ui); cursor: pointer; }
.kit-dash-tile { background: var(--surface); 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; overflow: hidden; }
.kit-dash-tile-body canvas { max-width: 100%; }

.kit-wh-details { background: var(--surface); 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: var(--surface); 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(--accent-text-strong); background: var(--brand-50); border-color: var(--brand-200); }
.kit-flow-toolbar-btn--primary:hover { background: var(--brand-100); color: var(--accent-text-strong); border-color: var(--brand-300, var(--brand-200)); }

/* dark-mode: tokens flip automatically, but the kit hardcodes a few #fff */

/* ════════════════════════════════════════════════════════════════════
   MOBILE MODE — all rules gated on body.etl-mobile, set by the mobile
   shell JS only at <=768px. Desktop never gets the class, so the desktop
   layout is completely unaffected. Mobile renders TWO surfaces
   (Dashboards, Pipelines) into a fixed full-screen #etlMobileSurface
   owned by mobile.js, above a hidden desktop .content.
   ════════════════════════════════════════════════════════════════════ */
#etlMobileTabs, #etlMobileSurface { display: none; }

/* Hide every desktop chrome + workspace; the mobile surface replaces them. */
body.etl-mobile #etlRail,
body.etl-mobile #etlFileSidebar,
body.etl-mobile #efsReopen,
body.etl-mobile #sidebar,
body.etl-mobile #sidebarToggleFloating,
body.etl-mobile #topNav,
body.etl-mobile .content-wrapper { display: none !important; }

/* The AI builder FAB lives on the (unreachable) dataflow canvas — hide it. */
body.etl-mobile .pl-add-fab,
body.etl-mobile #plAddFab,
body.etl-mobile #plCanvasHead,
body.etl-mobile .ai-compose,
body.etl-mobile .pl-add-panel { display: none !important; }

/* Never let the page scroll sideways. */
body.etl-mobile { overflow-x: hidden; max-width: 100vw; }

/* ── ported-feature chrome (phones) ─────────────────────────────────────
   Kill the leaking desktop global nav + the floating feedback pill: the
   gnav exposes the data-tools drop (intentionally OFF mobile) and its
   utility row overflows a 390px viewport; the fb pill overlaps the bottom
   tab bar. Both are replaced by the mobile top bar + account sheet below.
   Grounded: hide non-essential, no horizontal overflow, simplicity. */
body.etl-mobile .etl-gnav { display: none !important; }
body.etl-mobile .fb-btn { display: none !important; }

/* Mobile TOP bar — brand identity (left) + Upgrade CTA / account overflow
   (right). Primary nav stays the bottom tab bar; every secondary/owner
   action (plan, admin, feedback, theme, search) lives in a bottom sheet
   opened from the account button (progressive disclosure, thumb-reachable). */
#etlMobileTop { display: none; }
body.etl-mobile #etlMobileTop {
  display: flex; align-items: center; gap: 8px; position: fixed; top: 0; left: 0; right: 0;
  height: calc(52px + env(safe-area-inset-top, 0px)); z-index: 1000;
  padding: env(safe-area-inset-top, 0px) 12px 0; box-sizing: border-box;
  background: var(--surface, #fff); border-bottom: 1px solid var(--line, #e3e8ee);
}
.etlm-brand { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0;
  cursor: pointer; padding: 6px 6px 6px 0; color: var(--ink-900); font: 700 16px var(--font-ui, system-ui); }
.etlm-brand .dp-mark { color: #fff; display: inline-flex; width: 26px; height: 26px; border-radius: 7px;
  background: var(--brand-500, #2563eb); align-items: center; justify-content: center; }
.etlm-brand .dp-mark svg { width: 15px; height: 15px; }
.etlm-top-spacer { flex: 1; }
.etlm-upgrade { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 8px 15px;
  border-radius: 999px; border: 0; cursor: pointer; font: 700 13px var(--font-ui, system-ui);
  background: var(--brand-500, #2563eb); color: #fff; text-decoration: none; white-space: nowrap; }
/* Outline, not gold fill: persistent chrome must never outshine each view's
   primary CTA (UIUX audit — the saturated gold pill dominated every screen). */
.etlm-upgrade.premium { background: transparent; color: #a07416;
  border: 1.5px solid #d9b45c; box-shadow: none; }
html[data-theme="dark"] .etlm-upgrade.premium { color: #e6c25c; border-color: #8a6d2a; }
html[data-theme="dark"] .etlm-upgrade.premium { background: linear-gradient(135deg,#f6e39a,#e6c25c 45%,#c99a34); color: #241a06; }
.etlm-acct { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; border: 1px solid var(--line, #e3e8ee); background: var(--surface-2, #f6f9fc);
  color: var(--ink-700); cursor: pointer; flex: 0 0 auto; }
.etlm-acct svg { width: 22px; height: 22px; }

/* Account / overflow bottom sheet — plan header, usage bars, rich rows */
body.etl-mobile .etlm-acct-head { padding: 4px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
body.etl-mobile .etlm-acct-plan { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px var(--font-ui, system-ui);
  padding: 5px 11px; border-radius: 999px; background: var(--brand-50, #eef3ff); color: var(--accent-text-strong); }
body.etl-mobile .etlm-acct-plan.premium { background: linear-gradient(135deg,#f6e39a,#e6c25c 45%,#b8862b); color: #241a06; }
body.etl-mobile .etlm-acct-use { margin-top: 12px; }
body.etl-mobile .etlm-acct-use .row { display: flex; justify-content: space-between; margin: 10px 0 4px;
  color: var(--ink-700); font: 600 12.5px var(--font-ui, system-ui); }
body.etl-mobile .etlm-acct-use .bar { height: 6px; border-radius: 999px; background: var(--surface-3, #e9eef5); overflow: hidden; }
body.etl-mobile .etlm-acct-use .bar > i { display: block; height: 100%; background: var(--brand-500, #2563eb); border-radius: 999px; }
body.etl-mobile .etlm-sheet-item.rich { display: flex; align-items: center; gap: 13px; }
body.etl-mobile .etlm-sheet-item.rich .si-ic { font-size: 19px; width: 24px; text-align: center; flex: 0 0 auto; }
body.etl-mobile .etlm-sheet-item.rich .si-tx { flex: 1; min-width: 0; }
body.etl-mobile .etlm-sheet-item.rich .si-sub { display: block; font-size: 12.5px; color: var(--ink-500); font-weight: 400; margin-top: 1px; }
body.etl-mobile .etlm-sheet-item.cta { background: var(--brand-500, #2563eb); color: #fff; font-weight: 700; }
body.etl-mobile .etlm-sheet-item.cta.premium { background: linear-gradient(135deg,#f6e39a,#e6c25c 45%,#b8862b); color: #241a06; }
body.etl-mobile .etlm-sheet-item.cta .si-sub { color: rgba(255,255,255,.85); }
body.etl-mobile .etlm-sheet-item.cta.premium .si-sub { color: rgba(36,26,6,.7); }

/* Search-your-data overlay (typeahead ported to a full-screen sheet) */
body.etl-mobile .etlm-search-back { position: fixed; inset: 0; z-index: 100001; background: var(--surface-2, #f6f9fc);
  display: flex; flex-direction: column; }
body.etl-mobile .etlm-search-bar { display: flex; align-items: center; gap: 8px; background: var(--surface);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; border-bottom: 1px solid var(--line); }
body.etl-mobile .etlm-search-bar input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 12px; font-size: 16px; background: var(--surface-2); color: var(--ink-900); }
body.etl-mobile .etlm-search-bar .cancel { background: none; border: 0; color: var(--accent-text); font: 600 15px var(--font-ui); padding: 8px 4px; min-height: 44px; }
body.etl-mobile .etlm-search-res { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0; }
body.etl-mobile .etlm-search-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); padding: 15px 14px; min-height: 48px; }
body.etl-mobile .etlm-search-item .si-file { color: var(--ink-400); flex: 0 0 auto; }
body.etl-mobile .etlm-search-item .fn { flex: 1; min-width: 0; font-size: 15px; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.etl-mobile .etlm-search-item .fd { font-size: 12px; color: var(--ink-500); flex: 0 0 auto; }
body.etl-mobile .etlm-search-empty { text-align: center; color: var(--ink-500); padding: 44px 16px; font-size: 14px; }

/* Feedback modal — larger NPS targets (≥40px, Fogg) + roomy card on phones */
body.etl-mobile .fb-n { width: 40px; height: 40px; }
body.etl-mobile .fb-card { width: 94vw; padding: 20px 18px; }
body.etl-mobile .fb-modal { z-index: 100002; }

/* ── bottom tab bar (exactly two tabs) ─────────────────────────────── */
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; justify-content: center; gap: 3px; min-height: 48px; padding: 7px 0;
  border-radius: 12px; color: var(--ink-500, #6b7c93);
  font: 600 11px var(--font-ui, system-ui, sans-serif);
}
.etl-mtab .ic { font-size: 20px; line-height: 1; }
.etl-mtab.is-active { color: var(--accent-text-strong); background: var(--brand-50, #eef3ff); }

/* ── the mobile surface (fills the screen above the tab bar) ───────── */
body.etl-mobile #etlMobileSurface {
  display: block; position: fixed; left: 0; right: 0;
  top: calc(52px + env(safe-area-inset-top, 0px));
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  z-index: 900; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface-2, #f6f9fc);
  font: 400 14px var(--font-ui, system-ui, sans-serif); color: var(--ink-900, #1a2230);
}

/* ── Ask (mobile chat over the warehouse Ask) ──────────────────────────── */
.etlm-ask { display: flex; flex-direction: column; height: 100%; }
/* Ask header — reach past chats (history) + start fresh. ≥40px tap targets. */
.etlm-ask-head { flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-bottom: 1px solid var(--line, #e3e8ee);
  background: var(--surface, #fff); }
.etlm-ask-head-sp { flex: 1 1 auto; }
/* Icon buttons, borderless — the chat header should disappear into the
   page the way it does in Claude and ChatGPT, not sit as two outlined
   pills competing with the brand bar above (Dario 08-23). */
.etlm-ask-hist, .etlm-ask-newchat {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 12px; background: none;
  color: var(--ink-700, #334155); font: 600 13.5px var(--font-ui, system-ui);
  cursor: pointer; transition: background .15s ease; }
.etlm-ask-hist svg, .etlm-ask-newchat svg { width: 20px; height: 20px; }
.etlm-ask-hist span, .etlm-ask-newchat span { display: none; }
.etlm-ask-hist:active, .etlm-ask-newchat:active { background: var(--surface-2, #f1f5f9); }
.etlm-ask-newchat { color: var(--brand-600, #1a43b8); }
.etlm-ask-loading { margin: auto; color: var(--ink-400, #94a3b8); font-size: 14px; }
/* Bottom sheet — full-height list of past chats (rises from the reachable bottom edge). */
.etlm-drawer { position: fixed; inset: 0; z-index: 4000; }
.etlm-drawer[hidden] { display: none; }
.etlm-drawer-scrim { position: absolute; inset: 0; background: rgba(15,23,42,0.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .26s cubic-bezier(.32,.72,0,1); }
/* the page must not scroll behind an open drawer */
html.etlm-noscroll, html.etlm-noscroll body { overflow: hidden; overscroll-behavior: none; }
.etlm-drawer.open .etlm-drawer-scrim { opacity: 1; }
/* Side drawer — slides in from the LEFT, mirroring the desktop chat-history rail. */
.etlm-drawer-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 86%; max-width: 360px;
  display: flex; flex-direction: column; background: var(--surface, #fff);
  border-right: 1px solid var(--line, #e3e8ee); border-radius: 0 16px 16px 0;
  box-shadow: 10px 0 44px rgba(15,23,42,0.32);
  transform: translateX(-100%);
  /* the iOS sheet curve: fast out of the gate, settling at the end - a
     linear slide reads as machinery (Dario 08-23) */
  transition: transform .34s cubic-bezier(.32,.72,0,1);
  will-change: transform; touch-action: pan-y;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.etlm-drawer.open .etlm-drawer-panel { transform: translateX(0); }
.etlm-drawer-grip { display: none; }   /* side drawer closes via ✕ / scrim, not a bottom grab handle */
.etlm-drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 10px; }
.etlm-drawer-title { font: 700 16px var(--font-ui, system-ui); color: var(--ink-900, #1a2230); }
.etlm-drawer-close { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--ink-500, #64748b); font-size: 18px; border-radius: 10px; }
.etlm-drawer-close:active { background: var(--surface-2, #f1f5f9); }
/* search + a quiet New chat row: both Claude and ChatGPT put finding a
   chat above starting one, and neither shouts with a filled slab. */
.etlm-drawer-search { display: flex; align-items: center; gap: 8px;
  margin: 0 12px 10px; padding: 9px 12px; border-radius: 12px;
  background: var(--surface-2, #f1f5f9); color: var(--ink-500, #64748b); }
.etlm-drawer-search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.etlm-drawer-search input { flex: 1 1 auto; min-width: 0; border: 0;
  background: none; outline: none; font-size: 16px; padding: 0;
  color: var(--ink-900, #1a2230); }
.etlm-drawer-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.etlm-drawer-new { flex: none; display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px;
  margin: 0 12px 8px; padding: 12px 14px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--brand-50, #eef2ff); color: var(--brand-600, #1a43b8);
  font: 600 15px var(--font-ui, system-ui); }
.etlm-drawer-new svg { width: 18px; height: 18px; }
.etlm-drawer-new:active { background: var(--brand-100, #dfe6ff); }
html[data-theme=dark] .etlm-drawer-new { background: rgba(255,255,255,.07);
  color: #9fb6f5; }
.etlm-drawer-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 10px 14px; }
.etlm-drawer-empty { padding: 24px 14px; text-align: center; color: var(--ink-400, #94a3b8); font-size: 14px; }
.etlm-hist-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 52px; padding: 11px 12px; margin-bottom: 2px; border: 0; border-radius: 12px;
  background: none; cursor: pointer; text-align: left; }
.etlm-hist-item:active { background: var(--surface-2, #f1f5f9); }
.etlm-hist-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 14.5px var(--font-ui, system-ui); color: var(--ink-900, #1a2230); }
.etlm-hist-time { flex: none; font-size: 12px; color: var(--ink-400, #94a3b8); }
.etlm-ask-thread {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* Keep scroll INSIDE the chat: scrolling up to older messages must not chain
     to the page/surface and fire pull-to-refresh (which re-rendered the chat). */
  overscroll-behavior: contain;
  padding: 14px 12px 10px; display: flex; flex-direction: column; gap: 12px;
}
.etlm-ask-empty { margin: auto; text-align: center; color: var(--ink-500, #64748b);
  font-size: 14px; line-height: 1.7; padding: 0 24px; }
/* Heading was low-contrast grey-on-grey (UI/UX-agent: clarity/contrast) — make it a
   legible prominent title. */
.etlm-ask-empty b { display: block; margin-bottom: 5px; font-size: 18px; color: var(--ink-900, #0f172a); }
.etlm-ask-msg.user {
  align-self: flex-end; max-width: 85%; background: var(--brand-600, #1a43b8); color: #fff;
  padding: 9px 13px; border-radius: 16px 16px 4px 16px; font-size: 14px; line-height: 1.45;
  word-break: break-word;
}
.etlm-ask-msg.bot { align-self: stretch; max-width: 100%; }
.etlm-ask-msg.bot .ask-bubble {
  background: var(--surface, #fff); border: 1px solid var(--line, #e3e8ee);
  border-radius: 4px 16px 16px 16px; padding: 12px 14px; font-size: 14px; line-height: 1.55;
  overflow-x: auto;
}
.etlm-ask-typing { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-400, #94a3b8); font-size: 13px; }
.etlm-ask-err { color: #b4232a; font-size: 13px; }
/* Composer = the same rounded pill as the public Ask: [@] input [Send]. */
.etlm-ask-bar {
  flex: 0 0 auto; display: flex; gap: 7px; align-items: center;
  margin: 7px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 6px 6px 6px 7px; border: 1px solid var(--line-strong, #cdd6e2);
  border-radius: 26px; background: var(--surface, #fff);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.etlm-ask-bar:focus-within { border-color: var(--brand-500, #1f4fd6); }
.etlm-ask-bar input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  padding: 9px 4px; font-size: 16px; color: var(--ink-900, #1a2230);
}
.etlm-ask-send {
  flex: 0 0 auto; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand-600, #1a43b8); color: #fff;
  font: 700 14px/1 var(--font-ui, system-ui); padding: 12px 18px;
  min-height: 40px; transition: transform .12s ease, background .15s ease;
}
.etlm-ask-send:active { transform: scale(.96); }
/* NOTHING floats over the composer on a phone. The consultant pill and
   the help bubble sat directly on top of Send (Dario 08-23: "pills over
   covering") - on the Ask tab they are simply not there. */
@media (max-width: 640px) {
  body.etlm-on-ask .nh-consult,
  body.etlm-on-ask .nh-fab,
  body.etlm-on-ask #helpFab,
  body.etlm-on-ask .etl-help-fab { display: none !important; }
}
.etlm-ask-send:active { background: var(--brand-700, #16357f); }
/* The @ button (shared .arf-btn) sits at the left of the pill — same as public. */
.etlm-ask-bar .arf-btn { width: 32px; height: 32px; font-size: 15px; }
/* mobile GPU-cluster strip */
.etlm-ask-cluster { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 6px 10px 0; }
.etlm-cbox {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.05); color: var(--ink-400, #94a3b8);
  font: 700 9px/1 var(--font-ui, system-ui); text-transform: uppercase; letter-spacing: .02em;
}
.etlm-cdot { width: 5px; height: 5px; border-radius: 50%; background: #cbd5e1; }
.etlm-cbox.busy { background: #16a34a; color: #fff; }
.etlm-cbox.busy .etlm-cdot { background: #fff; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.3); }
.etlm-cbox.offline { opacity: .4; }
.etlm-cbox.offline .etlm-cdot { background: #ef4444; }

/* header bar */
.etlm-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  position: sticky; top: 0; z-index: 5;
  background: var(--surface, #fff); border-bottom: 1px solid var(--line, #e3e8ee);
}
.etlm-head h1 { margin: 0; flex: 1; font: 700 18px var(--font-ui); color: var(--ink-900, #1a2230); }
.etlm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.etlm-btn {
  min-height: 44px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--line, #e3e8ee);
  background: var(--surface, #fff); color: var(--ink-900, #1a2230);
  font: 600 14px var(--font-ui); cursor: pointer;
}
.etlm-btn-primary { background: var(--brand-600, #1a43b8); border-color: var(--brand-600, #1a43b8); color: #fff; }
.etlm-iconbtn {
  min-width: 44px; min-height: 44px; border: 0; background: transparent;
  font-size: 24px; line-height: 1; color: var(--ink-700, #44516a); cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
}
.etlm-iconbtn:active { background: var(--surface-2, #f0f4f9); }
.etlm-link { border: 0; background: transparent; color: var(--brand-600, #1a43b8); font: inherit; text-decoration: underline; cursor: pointer; }

/* generic list / rows */
.etlm-list { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
/* redesign 08-21: rows are a divided list now - the 10px gap between them
   was pure scroll cost (HHS 6:11: separation forces unnecessary scrolling) */
body.etl-mobile .etlm-list { gap: 0; padding: 4px 0 12px; }
.etlm-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 12px 14px; border: 1px solid var(--line, #e3e8ee); border-radius: 14px;
  background: var(--surface, #fff); text-align: left; cursor: pointer;
}
.etlm-row:active { background: var(--surface-2, #f0f4f9); }
.etlm-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.etlm-row-title { font: 600 15px var(--font-ui); color: var(--ink-900, #1a2230); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etlm-row-sub { font: 400 12.5px var(--font-ui); color: var(--ink-500, #6b7c93); }
.etlm-row-chev { color: var(--ink-400, #9aa7ba); font-size: 22px; line-height: 1; }

.etlm-loading, .etlm-empty, .etlm-error {
  padding: 32px 18px; text-align: center; color: var(--ink-500, #6b7c93);
  font: 400 14px/1.6 var(--font-ui);
}
.etlm-error { color: var(--danger-600, #c0392b); }

/* ── Dashboard list — preview cards (mini mosaic of the real tiles) ──── */
.etlm-dash-cards { gap: 14px; }
.etlm-dash-card {
  display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden;
  border: 1px solid var(--line, #e3e8ee); border-radius: 16px;
  background: var(--surface, #fff); text-align: left; cursor: pointer;
}
.etlm-dash-card:active { background: var(--surface-2, #f0f4f9); }
.etlm-dash-prev {
  position: relative; height: 150px; padding: 10px;
  background: var(--surface-2, #f6f9fc); border-bottom: 1px solid var(--line, #e3e8ee);
}
.etlm-dash-grid { display: grid; gap: 6px; width: 100%; height: 100%; }
.etlm-dash-mini {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface, #fff); border: 1px solid var(--line, #eef1f5); border-radius: 8px;
}
.etlm-dash-mini canvas { width: 100% !important; height: 100% !important; padding: 4px; box-sizing: border-box; }
.etlm-dash-mini.is-blank { background: var(--surface-2, #f0f4f9); }
.etlm-dash-mini.is-kpi { font: 800 17px var(--font-ui); color: var(--brand-700, #1a43b8); }
.etlm-dash-mini.is-table { flex-direction: column; gap: 4px; padding: 9px; align-items: stretch; }
.etlm-dash-mini.is-table i { display: block; height: 5px; border-radius: 3px; background: var(--brand-200, #c7d6f5); }
.etlm-dash-mini.is-table i:nth-child(2) { width: 72%; }
.etlm-dash-mini.is-table i:nth-child(3) { width: 52%; }
.etlm-dash-more {
  position: absolute; right: 12px; bottom: 12px; padding: 2px 9px; border-radius: 999px;
  background: rgba(20,30,60,.72); color: #fff; font: 700 11px var(--font-ui);
}
.etlm-dash-prev-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--ink-400, #9aa7ba); font: 500 13px var(--font-ui);
}
.etlm-dash-foot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }

/* ── pull-to-refresh ───────────────────────────────────────────────── */
body.etl-mobile #etlMobileSurface { will-change: transform; }
.etlm-ptr {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px)); z-index: 899;
  width: 40px; height: 40px; border-radius: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
  background: var(--surface, #fff); color: var(--ink-500, #6b7c93);
  box-shadow: 0 4px 16px rgba(20,30,60,.20);
}
.etlm-ptr.is-armed { color: var(--brand-600, #1a43b8); }
.etlm-ptr-spin { display: flex; transition: transform .05s linear; }
.etlm-ptr.is-refreshing .etlm-ptr-spin { animation: etlm-ptr-rot .8s linear infinite; }
@keyframes etlm-ptr-rot { to { transform: rotate(360deg); } }

/* ── Dashboard VIEW — full-width stacked tiles ─────────────────────── */
.etlm-tilecol { padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.etlm-tile {
  width: 100%; border: 1px solid var(--line, #e3e8ee); border-radius: 16px;
  background: var(--surface, #fff); overflow: hidden;
}
.etlm-tile-head { padding: 12px 14px; border-bottom: 1px solid var(--line, #e3e8ee); }
.etlm-tile-title { font: 600 14.5px var(--font-ui); color: var(--ink-900, #1a2230); }
.etlm-tile-body { padding: 12px 14px; }
.etlm-chartwrap { position: relative; width: 100%; height: 240px; }
.etlm-chartwrap canvas { width: 100% !important; height: 100% !important; }
.etlm-tile-msg { padding: 18px 4px; text-align: center; color: var(--ink-500, #6b7c93); font: 500 13.5px/1.5 var(--font-ui); }
.etlm-tile-note { display: block; margin-top: 6px; font: 400 12px var(--font-ui); color: var(--ink-400, #9aa7ba); }
.etlm-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.etlm-table { border-collapse: collapse; width: 100%; font: 400 12.5px var(--font-ui); }
.etlm-table th, .etlm-table td { padding: 6px 10px; border-bottom: 1px solid var(--line, #eef1f5); text-align: left; white-space: nowrap; }
.etlm-table th { color: var(--ink-500, #6b7c93); font-weight: 600; }

/* ── Dashboard BUILDER — stacked editable tiles ────────────────────── */
.etlm-buildcol { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.etlm-buildtile {
  position: relative; border: 1px solid var(--line, #e3e8ee); border-radius: 14px;
  background: var(--surface, #fff);
}
.etlm-buildtile.etlm-dragging { opacity: .65; box-shadow: 0 10px 30px rgba(20,30,60,.2); }
.etlm-bt-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.etlm-drag {
  font-size: 20px; color: var(--ink-400, #9aa7ba); min-width: 36px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; cursor: grab;
  touch-action: none; user-select: none;
}
.etlm-bt-title { flex: 1; font: 600 15px var(--font-ui); color: var(--ink-900, #1a2230); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 0; }
.etlm-renameinput { flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid var(--brand-300, #93a8e6); border-radius: 9px; font: 600 15px var(--font-ui); }
.etlm-bt-menu { font-size: 22px; }
.etlm-tilemenu {
  position: absolute; right: 10px; top: 52px; z-index: 10; background: var(--surface, #fff);
  border: 1px solid var(--line, #e3e8ee); border-radius: 12px; box-shadow: 0 12px 30px rgba(20,30,60,.18);
  overflow: hidden; min-width: 140px;
}
.etlm-tilemenu button { display: block; width: 100%; min-height: 44px; padding: 0 16px; border: 0; background: transparent; text-align: left; font: 500 14px var(--font-ui); color: var(--danger-600, #c0392b); cursor: pointer; }
.etlm-tilemenu button:active { background: var(--surface-2, #f0f4f9); }
.etlm-addbtn {
  margin: 4px 12px 18px; min-height: 50px; width: calc(100% - 24px); border: 1.5px dashed var(--brand-300, #93a8e6);
  border-radius: 14px; background: var(--brand-50, #eef3ff); color: var(--brand-600, #1a43b8);
  font: 600 15px var(--font-ui); cursor: pointer;
}

/* ── bottom-sheet of pinned insights ──────────────────────────────── */
.etlm-sheetscrim { position: fixed; inset: 0; z-index: 1100; background: rgba(20,30,60,.4); display: flex; align-items: flex-end; }
.etlm-sheet {
  width: 100%; max-height: 72vh; background: var(--surface, #fff);
  border-radius: 20px 20px 0 0; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px); animation: etlmSheetUp .22s ease;
}
@keyframes etlmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.etlm-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; font: 700 16px var(--font-ui); color: var(--ink-900, #1a2230); }
.etlm-sheet-body { overflow-y: auto; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.etlm-pinrow {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--line, #e3e8ee); border-radius: 12px; background: var(--surface, #fff);
  text-align: left; cursor: pointer;
}
.etlm-pinrow:active { background: var(--surface-2, #f0f4f9); }
.etlm-pinrow-title { flex: 1; font: 600 14.5px var(--font-ui); color: var(--ink-900, #1a2230); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etlm-pinrow-add { font-size: 22px; color: var(--brand-600, #1a43b8); }

/* ── Pipelines monitor — status dots + per-step detail ─────────────── */
.etlm-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: 14px; flex: none;
}
.etlm-dot-ok { background: #e6f6ed; color: #1e9e57; }
.etlm-dot-run { background: #fff4e0; color: #d98a00; }
.etlm-dot-err { background: #fdecec; color: #c0392b; }
.etlm-dot-none { background: var(--surface-2, #eef1f5); color: var(--ink-400, #9aa7ba); }

.etlm-detail { padding: 14px; }
.etlm-runsummary { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.etlm-run-status { font: 600 15px var(--font-ui); color: var(--ink-900, #1a2230); text-transform: capitalize; }
.etlm-steps { display: flex; flex-direction: column; gap: 8px; }
.etlm-step {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--line, #e3e8ee); border-radius: 12px; background: var(--surface, #fff);
}
.etlm-step-name { flex: 1; font: 600 14px var(--font-ui); color: var(--ink-900, #1a2230); text-transform: capitalize; }
.etlm-step-ms { font: 500 12.5px var(--font-ui); color: var(--ink-500, #6b7c93); }
.etlm-step-err { margin: -2px 0 4px 38px; padding: 8px 12px; border-radius: 10px; background: #fdecec; color: #c0392b; font: 400 12.5px/1.5 var(--font-ui); }

/* ── mobile Warehouse / Pages surfaces ───────────────────────────── */
/* Bottom padding ≥ FAB extent (84px offset + 48px FAB + margin): the last list
   row's ⋯ action must scroll clear of the floating Help button (UIUX audit). */
body.etl-mobile .etlm-wrap { padding: 12px 12px 150px; }
body.etl-mobile .etlm-shead { display:flex; align-items:center; gap:8px; margin:4px 0 12px; }
body.etl-mobile .etlm-shead h2 { font-size:18px; font-weight:700; margin:0; flex:1; }
body.etl-mobile .etlm-act { border:1px solid var(--line,#d7dbe3); background:var(--surface); color:var(--ink-900);
  border-radius:10px; padding:9px 12px; font-size:14px; font-weight:600; }
body.etl-mobile .etlm-act.primary { background:#1f4fd6; color:#fff; border-color:#1f4fd6; }
body.etl-mobile .etlm-crumb { font-size:13px; color:var(--ink-500); margin-bottom:10px; word-break:break-word; }
/* Comfortable tap target for breadcrumb links (Fitts) — was bare 13px text. */
body.etl-mobile .etlm-crumb a { color:var(--accent-text); text-decoration:none;
  display:inline-block; padding:6px 4px; margin:-6px -4px; }
body.etl-mobile .etlm-row { display:flex; align-items:center; gap:12px; padding:14px 8px;
  border-bottom:1px solid var(--line,#eceef2); min-height:56px; }
body.etl-mobile .etlm-row .ic { font-size:22px; flex:0 0 auto; }
body.etl-mobile .etlm-row .nm { flex:1; min-width:0; font-size:15px; color:var(--ink-900);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.etl-mobile .etlm-row .sub { font-size:12px; color:var(--ink-500); }
body.etl-mobile .etlm-row .dots { font-size:20px; color:var(--ink-500); padding:6px 10px; }
/* Share-pages (mypages) rows on phone — parity with desktop: Public/Private badge
   (text+icon, not colour-alone), source + updated scent line. The row's .nm is a
   nowrap ellipsis block by default; page rows need a 2-line column instead. */
body.etl-mobile .etlm-pagerow .nm { display:flex; flex-direction:column; gap:3px;
  white-space:normal; overflow:visible; }
body.etl-mobile .etlm-pg-top { display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
/* Title is the scent-carrier — let it wrap to 2 lines before ellipsizing instead
   of truncating at ~14 chars when badges share the line (UIUX audit). */
body.etl-mobile .etlm-pg-name { font-weight:600; min-width:0;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
body.etl-mobile .etlm-pg-badge { flex:0 0 auto; font-size:11px; font-weight:600;
  line-height:1; padding:3px 8px; border-radius:999px; }
body.etl-mobile .etlm-pg-badge.is-public  { color:#1d4ed8; background:rgba(37,99,235,.10); }
body.etl-mobile .etlm-pg-badge.is-private { color:#475569; background:rgba(100,116,139,.14); }
html[data-theme="dark"] body.etl-mobile .etlm-pg-badge.is-public  { color:#93c5fd; background:rgba(96,140,240,.18); }
html[data-theme="dark"] body.etl-mobile .etlm-pg-badge.is-private { color:#cbd5e1; background:rgba(148,163,184,.16); }
/* Custom domain = Premium — gold chip + gold left-accent on the row + the domain
   URL shown in gold, so the premium state is visible on mobile (was invisible). */
body.etl-mobile .etlm-pg-badge.is-custom { color:#9a6b12; background:rgba(230,194,92,.20); }
body.etl-mobile .etlm-pagerow.etlm-premium { box-shadow: inset 3px 0 0 #d9a441; background:rgba(230,194,92,.05); border-radius:8px; }
body.etl-mobile .etlm-pg-domain { color:#9a6b12; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme="dark"] body.etl-mobile .etlm-pg-badge.is-custom { color:#f0d886; background:rgba(230,194,92,.16); }
html[data-theme="dark"] body.etl-mobile .etlm-pagerow.etlm-premium { box-shadow: inset 3px 0 0 #e6c25c; background:rgba(230,194,92,.07); }
html[data-theme="dark"] body.etl-mobile .etlm-pg-domain { color:#f0d886; }
body.etl-mobile .etlm-empty { text-align:center; color:var(--ink-500); padding:48px 16px; font-size:14px; }
body.etl-mobile .etlm-sheet-back { position:fixed; inset:0; background:rgba(0,0,0,.4);
  z-index:100000; display:flex; align-items:flex-end; }
body.etl-mobile .etlm-sheet { background:var(--surface); width:100%; border-radius:16px 16px 0 0; padding:8px; }
body.etl-mobile .etlm-sheet-title { font-weight:700; padding:12px; color:var(--ink-900); }
body.etl-mobile .etlm-sheet-item { display:block; width:100%; text-align:left; background:none;
  border:0; padding:15px 12px; font-size:16px; color:var(--ink-900); border-radius:10px; }
body.etl-mobile .etlm-sheet-item.is-danger { color:#d6303b; }
body.etl-mobile .etlm-sheet-cancel { text-align:center; font-weight:600; color:var(--ink-500);
  margin-top:4px; border-top:1px solid var(--line); }
body.etl-mobile .etlm-row:active, body.etl-mobile .etlm-sheet-item:active { background: var(--surface-3); }

/* AI dataflow composer — centered card on empty canvas */
.ai-compose {
  position: fixed;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: 640px;
  max-width: calc(100vw - 48px);
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), var(--shadow-1);
  font: 400 14px var(--font-ui);
}
.ai-compose-title {
  font: 600 18px var(--font-ui);
  margin: 0 0 18px;
  color: var(--ink-900);
}
.ai-compose-label {
  display: block;
  font: 500 12px var(--font-ui);
  color: var(--ink-700);
  margin: 12px 0 4px;
}
.ai-compose-url,
.ai-compose-instr,
.ai-compose-auth {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 400 13px var(--font-mono, monospace);
  background: var(--surface-1, #fcfcfd);
  color: var(--ink-900);
}
.ai-compose-instr { resize: vertical; min-height: 64px; font-family: var(--font-ui); }
.ai-compose-auth-toggle {
  background: transparent;
  border: none;
  color: var(--brand-600);
  cursor: pointer;
  padding: 8px 0 4px;
  font: 500 12px var(--font-ui);
}
.ai-compose-auth-wrap { margin-top: 4px; }
.ai-compose-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.ai-compose-build {
  background: var(--brand-600, #4f46e5);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font: 600 13px var(--font-ui);
  cursor: pointer;
  transition: background .12s ease;
}
.ai-compose-build:hover { background: var(--brand-700, #4338ca); }
.ai-compose-build:disabled { opacity: .6; cursor: progress; }
.ai-compose-status {
  margin-top: 12px;
  color: var(--ink-500);
  font: 400 12px var(--font-ui);
  min-height: 16px;
}
/* "Settings needed" badge on a step that the translator couldn't
 * resolve. Sits in the same row as the step's title. */
.kit-dash-tile.needs-settings::after,
.dbx-operator.needs-settings::after {
  content: "Settings needed";
  position: absolute;
  top: 6px; right: 6px;
  background: #fff8eb;
  border: 1px solid #f5c97a;
  color: #8a4b00;
  font: 500 10px var(--font-ui);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
 * AI builder — natural-language chat assistant
 * ----------------------------------------------------------------------
 * A ✨ FAB floats at chart_container's top-right and opens a single-mode
 * CHAT panel (no source picker / no repeater / no Build|Insights buttons).
 * Calm, product-grade surface: a warm ivory thread on a soft slate frame,
 * indigo reserved as an accent for the user's voice + the send action.
 * Tokens (set locally so the widget is self-contained):
 *   --aic-accent  deep indigo  · --aic-ink  near-black slate
 *   --aic-surface panel white  · --aic-thread warm ivory thread bg
 * ════════════════════════════════════════════════════════════════════════ */
.ai-chat-root {
  --aic-accent: #4f46e5;
  --aic-accent-2: #6366f1;
  --aic-accent-soft: #eef0ff;
  --aic-ink: #14182b;
  --aic-ink-2: #51566b;
  --aic-ink-3: #8a8fa3;
  --aic-line: #e7e7ef;
  --aic-line-soft: #f0f0f6;
  --aic-surface: #ffffff;
  --aic-thread: #fbfbfd;
  --aic-user-bubble: #4f46e5;
  --aic-assistant-bubble: #f4f4f8;
  --aic-radius: 20px;
  --aic-raised: #ffffff;
  --aic-input: #fbfbfe;
  --aic-th: #f6f6fb;
  --aic-head-grad: linear-gradient(180deg, #ffffff 0%, #fafaff 100%);
  --aic-thread-grad: radial-gradient(140% 70% at 50% 0%, #f8f8fc 0%, var(--aic-thread, #fbfbfd) 58%);
  --aic-note-bg: #fff7ed;
  --aic-note-line: #fed7aa;
  --aic-note-ink: #51566b;
  --aic-shadow: 0 38px 70px -24px rgba(20, 24, 43, 0.42), 0 14px 30px -14px rgba(20, 24, 43, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.ai-widget-root {
  position: fixed;
  right: 28px;
  top: 96px;
  z-index: 200;
  pointer-events: none;
  font: 400 14px var(--font-ui);
}
.ai-widget-root .ai-fab,
.ai-widget-root .ai-chat-panel.ai-chat-panel-open,
.ai-widget-root .ai-fab-tip {
  /* Only the OPEN panel + FAB capture pointer events; the closed panel
     keeps its fixed box but stays transparent + click-through so it never
     swallows clicks in the top-right viewport region. */
  pointer-events: auto;
}

/* ── FAB ── */
.ai-fab {
  position: absolute;
  right: 0; top: 0;
  width: 50px; height: 50px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  background:
    radial-gradient(120% 120% at 28% 22%, #7c83ff 0%, #5b54e6 45%, #4338ca 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 10px 22px -8px rgba(79, 70, 229, 0.55),
    0 3px 8px -2px rgba(15, 23, 42, 0.18);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1),
              box-shadow 200ms ease, opacity 200ms ease;
}
.ai-fab:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.36) inset,
    0 16px 30px -8px rgba(79, 70, 229, 0.6),
    0 5px 12px -3px rgba(15, 23, 42, 0.22);
}
.ai-fab:active { transform: translateY(0) scale(0.96); }
.ai-fab:focus-visible {
  outline: 2px solid rgba(99,102,241,.55); outline-offset: 3px;
}
.ai-fab-icon {
  font-size: 21px; line-height: 1; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.28));
}
.ai-fab-hidden { opacity: 0; transform: scale(.7); pointer-events: none; }
.ai-fab-tip {
  position: absolute;
  right: 62px; top: 14px;
  white-space: nowrap;
  background: var(--aic-ink, #14182b);
  color: #fff;
  font: 500 12px var(--font-ui);
  letter-spacing: .1px;
  padding: 6px 11px;
  border-radius: 9px;
  opacity: 0; transform: translateX(4px);
  transition: opacity 160ms ease, transform 160ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  box-shadow: 0 6px 16px -6px rgba(15,23,42,.4);
}
.ai-widget-root:hover .ai-fab-tip,
.ai-fab:focus-visible + .ai-fab-tip { opacity: 1; transform: translateX(0); }
.ai-widget-root:has(.ai-chat-panel-open) .ai-fab-tip { opacity: 0; }

/* ── Panel ── */
.ai-chat-panel {
  position: fixed;
  right: 28px; top: 158px;
  z-index: 205;
  width: 460px;
  max-width: calc(100vw - 32px);
  height: 720px;
  max-height: calc(100vh - 110px);
  background: var(--aic-surface);
  border: 1px solid var(--aic-line);
  border-radius: var(--aic-radius);
  box-shadow:
    0 32px 64px -20px rgba(20, 24, 43, 0.30),
    0 12px 28px -12px rgba(20, 24, 43, 0.16),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-14px) scale(.985);
  transform-origin: top right;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
  pointer-events: none;
}
.ai-chat-panel-open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}

/* ── Header ── */
.ai-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 14px 18px;
  border-bottom: 1px solid var(--aic-line-soft);
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%);
  flex: 0 0 auto;
}
.ai-chat-brand {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.ai-chat-spark {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-size: 15px; line-height: 1;
  background:
    radial-gradient(120% 120% at 30% 20%, #7c83ff 0%, #5b54e6 50%, #4338ca 100%);
  box-shadow: 0 4px 10px -3px rgba(79,70,229,.5),
              0 1px 0 rgba(255,255,255,.3) inset;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.ai-chat-title {
  font: 600 14px var(--font-ui);
  color: var(--aic-ink);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 230px;
}
.ai-chat-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.ai-chat-iconbtn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 9px;
  color: var(--aic-ink-2);
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease, transform 120ms ease;
}
.ai-chat-iconbtn:hover { background: var(--aic-line-soft); color: var(--aic-ink); }
.ai-chat-iconbtn:active { transform: scale(.92); }
.ai-chat-iconbtn:focus-visible {
  outline: 2px solid rgba(99,102,241,.5); outline-offset: 1px;
}
.ai-chat-new:hover { color: var(--aic-accent); }

/* ── Thread ── */
.ai-chat-thread {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 18px 8px;
  overflow-y: auto;
  scroll-behavior: smooth;
  background:
    radial-gradient(120% 60% at 50% 0%, #f7f7fb 0%, var(--aic-thread) 60%);
  scrollbar-width: thin;
  scrollbar-color: #d7d7e2 transparent;
}
.ai-chat-thread::-webkit-scrollbar { width: 9px; }
.ai-chat-thread::-webkit-scrollbar-thumb {
  background: #dcdce6; border-radius: 99px; border: 3px solid transparent;
  background-clip: content-box;
}
.ai-chat-thread::-webkit-scrollbar-thumb:hover { background: #c7c7d6; background-clip: content-box; }

/* Empty state */
.ai-chat-empty {
  margin: auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 24px 28px;
  max-width: 340px;
  animation: ai-empty-in 420ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ai-empty-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-chat-empty-orb {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  font-size: 26px; line-height: 1;
  margin-bottom: 18px;
  background:
    radial-gradient(120% 120% at 30% 22%, #8d92ff 0%, #5b54e6 52%, #4338ca 100%);
  box-shadow: 0 12px 26px -10px rgba(79,70,229,.6),
              0 1px 0 rgba(255,255,255,.3) inset;
  animation: ai-orb-float 4.5s ease-in-out infinite;
}
@keyframes ai-orb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.ai-chat-empty-title {
  font: 600 17px var(--font-ui);
  color: var(--aic-ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.ai-chat-empty-sub {
  font: 400 13.5px var(--font-ui);
  color: var(--aic-ink-2);
  line-height: 1.55;
}

/* Message rows */
.ai-msg-row {
  display: flex; align-items: flex-end; gap: 9px;
  max-width: 100%;
  animation: ai-msg-in 260ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ai-msg-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-msg-row-user { flex-direction: row-reverse; }
.ai-msg-row-assistant { flex-direction: row; }
.ai-msg-avatar {
  width: 28px; height: 28px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-size: 14px; line-height: 1;
  background:
    radial-gradient(120% 120% at 30% 20%, #8d92ff 0%, #5b54e6 52%, #4338ca 100%);
  box-shadow: 0 3px 8px -3px rgba(79,70,229,.5),
              0 1px 0 rgba(255,255,255,.25) inset;
  margin-bottom: 2px;
}
.ai-msg-bubble {
  max-width: 78%;
  padding: 11px 14px;
  border-radius: 16px;
  font: 400 14px var(--font-ui);
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ai-msg-bubble-user {
  background:
    linear-gradient(180deg, #5b54e6 0%, #4f46e5 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 6px 16px -8px rgba(79,70,229,.55);
}
.ai-msg-bubble-assistant {
  background: var(--aic-assistant-bubble);
  color: var(--aic-ink);
  border: 1px solid var(--aic-line-soft);
  border-bottom-left-radius: 6px;
}
/* System status line — quieter than a normal assistant bubble. */
.ai-msg-bubble-system {
  background: transparent;
  border: 1px dashed var(--aic-line);
  color: var(--aic-ink-2);
  font-size: 12.5px;
  font-weight: 500;
}
.ai-msg-time {
  font: 400 10.5px var(--font-ui);
  color: var(--aic-ink-3);
  align-self: flex-end;
  margin-bottom: 3px;
  flex: 0 0 auto;
}

/* Markdown inside assistant bubbles */
.ai-msg-md > :first-child { margin-top: 0; }
.ai-msg-md > :last-child { margin-bottom: 0; }
.ai-msg-md p { margin: 0 0 8px; }
.ai-msg-md h1, .ai-msg-md h2, .ai-msg-md h3, .ai-msg-md h4 {
  margin: 12px 0 6px; line-height: 1.3; font-weight: 650;
  color: var(--aic-ink); letter-spacing: -0.01em;
}
.ai-msg-md h1 { font-size: 17px; }
.ai-msg-md h2 { font-size: 15.5px; }
.ai-msg-md h3, .ai-msg-md h4 { font-size: 14px; }
.ai-msg-md ul, .ai-msg-md ol { margin: 6px 0 8px; padding-left: 20px; }
.ai-msg-md li { margin: 3px 0; }
.ai-msg-md a { color: var(--aic-accent); text-decoration: underline; text-underline-offset: 2px; }
.ai-msg-md code {
  font: 12.5px var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  background: #ecedf4; color: #3a3f57;
  padding: 1px 5px; border-radius: 5px;
}
.ai-msg-md pre {
  margin: 8px 0; padding: 12px 13px;
  background: #1c2030; color: #e7e9f5;
  border-radius: 11px; overflow-x: auto;
  font: 12.5px var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  line-height: 1.5;
}
.ai-msg-md pre code { background: none; color: inherit; padding: 0; }
.ai-msg-md table {
  border-collapse: collapse; margin: 8px 0; font-size: 12.5px; width: 100%;
}
.ai-msg-md th, .ai-msg-md td {
  border: 1px solid var(--aic-line); padding: 5px 9px; text-align: left;
}
.ai-msg-md th { background: #f4f4f8; font-weight: 600; }
.ai-msg-md blockquote {
  margin: 8px 0; padding: 2px 12px;
  border-left: 3px solid var(--aic-accent-2); color: var(--aic-ink-2);
}

/* Typing indicator */
.ai-msg-bubble-loading { padding: 13px 15px; }
.ai-typing { display: inline-flex; align-items: center; gap: 5px; }
.ai-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--aic-accent-2);
  animation: ai-typing 1.3s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .16s; }
.ai-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes ai-typing {
  0%, 65%, 100% { opacity: .28; transform: translateY(0) scale(.85); }
  32% { opacity: 1; transform: translateY(-3px) scale(1); }
}

/* ── Composer ── */
.ai-chat-composer {
  flex: 0 0 auto;
  padding: 12px 14px 12px;
  border-top: 1px solid var(--aic-line-soft);
  background: var(--aic-surface);
}
.ai-chat-inputwrap {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 7px 7px 7px 14px;
  border: 1px solid var(--aic-line);
  border-radius: 16px;
  background: #fafafc;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.ai-chat-inputwrap:focus-within {
  border-color: var(--aic-accent-2);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}
.ai-chat-input {
  flex: 1 1 auto; min-width: 0;
  border: none; outline: none; resize: none;
  background: transparent;
  font: 400 14px var(--font-ui);
  color: var(--aic-ink);
  line-height: 1.5;
  max-height: 160px;
  padding: 6px 0;
}
.ai-chat-input::placeholder { color: var(--aic-ink-3); }
.ai-chat-send {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 12px;
  cursor: pointer;
  color: #fff;
  background:
    radial-gradient(120% 120% at 30% 20%, #6d72ff 0%, #5046e3 55%, #4338ca 100%);
  box-shadow: 0 6px 14px -5px rgba(79,70,229,.6),
              0 1px 0 rgba(255,255,255,.25) inset;
  transition: transform 130ms cubic-bezier(.2,.8,.2,1),
              box-shadow 130ms ease, opacity 130ms ease;
  position: relative;
}
.ai-chat-send:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 10px 20px -6px rgba(79,70,229,.7);
}
.ai-chat-send:active:not(:disabled) { transform: scale(.94); }
.ai-chat-send:focus-visible { outline: 2px solid rgba(99,102,241,.55); outline-offset: 2px; }
.ai-chat-send:disabled { cursor: default; opacity: .9; }
.ai-send-plane { transition: opacity 120ms ease, transform 120ms ease; }
.ai-send-spin {
  position: absolute; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: ai-spin .7s linear infinite;
}
.ai-chat-send-busy .ai-send-plane { opacity: 0; transform: scale(.6); }
.ai-chat-send-busy .ai-send-spin { opacity: 1; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-chat-hint {
  margin: 8px 4px 0;
  font: 400 11px var(--font-ui);
  color: var(--aic-ink-3);
  text-align: center;
  letter-spacing: .01em;
}

/* ── History panel (slides over the thread) ── */
.ai-hist-panel {
  position: absolute;
  inset: 0;
  background: var(--aic-surface);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
  z-index: 3;
  box-shadow: -20px 0 40px -28px rgba(20,24,43,.4);
}
.ai-chat-hist-open .ai-hist-panel { transform: translateX(0); }
.ai-hist-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 12px 16px 18px;
  border-bottom: 1px solid var(--aic-line-soft);
  flex: 0 0 auto;
}
.ai-hist-head-title {
  font: 600 14px var(--font-ui); color: var(--aic-ink);
  letter-spacing: -0.01em;
}
.ai-hist-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin; scrollbar-color: #d7d7e2 transparent;
}
.ai-hist-loading, .ai-hist-empty {
  padding: 28px 16px; text-align: center;
  font: 400 13px var(--font-ui); color: var(--aic-ink-3);
}
.ai-hist-item {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 130ms ease;
}
.ai-hist-item:hover { background: var(--aic-line-soft); }
.ai-hist-item-active {
  background: var(--aic-accent-soft);
  box-shadow: inset 3px 0 0 var(--aic-accent);
}
.ai-hist-item-active:hover { background: var(--aic-accent-soft); }
.ai-hist-item-body { flex: 1 1 auto; min-width: 0; }
.ai-hist-item-title {
  font: 500 13.5px var(--font-ui); color: var(--aic-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-hist-item-meta {
  margin-top: 3px;
  font: 400 11.5px var(--font-ui); color: var(--aic-ink-3);
}
.ai-hist-del {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px;
  background: transparent; color: var(--aic-ink-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity 130ms ease, background 130ms ease, color 130ms ease;
}
.ai-hist-item:hover .ai-hist-del { opacity: 1; }
.ai-hist-del:hover { background: #fdecec; color: #d23b3b; }
.ai-hist-del:focus-visible { opacity: 1; outline: 2px solid rgba(99,102,241,.5); }

/* ── Confirm-first insight CANDIDATES (preview → pick → build) ──
 * A candidates panel lives inside one assistant bubble: a status line, a
 * stack of cards (chart preview + title + table + collapsible SQL + a
 * select toggle), and a "Build selected (N)" CTA. Same calm, indigo-accent
 * language as the rest of the chat. */
/* The candidates panel wants the full message column (not the 78% chat
 * bubble cap) and no grey bubble chrome — the cards carry their own. */
.ai-msg-bubble-assistant:has(.ai-cand-panel) {
  max-width: 100%; width: 100%;
  background: transparent; border: none; padding: 2px 0;
}
.ai-msg-row-assistant:has(.ai-cand-panel) { align-items: stretch; }
.ai-msg-row-assistant:has(.ai-cand-panel) .ai-msg-bubble { flex: 1 1 auto; }
.ai-cand-panel { display: flex; flex-direction: column; gap: 12px; min-width: 260px; }
.ai-cand-status {
  font: 600 13px var(--font-ui);
  color: var(--aic-ink);
  letter-spacing: -0.01em;
}
.ai-cand-cards { display: flex; flex-direction: column; gap: 11px; }

.ai-cand-card {
  position: relative;
  border: 1px solid var(--aic-line);
  border-radius: 15px;
  background: var(--aic-surface);
  padding: 13px 14px 12px;
  box-shadow: 0 1px 2px rgba(20,24,43,.04);
  transition: border-color 150ms ease, box-shadow 150ms ease,
              background 150ms ease, opacity 150ms ease;
  animation: ai-cand-in 280ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ai-cand-in {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.ai-cand-card.ai-cand-selected {
  border-color: var(--aic-accent);
  box-shadow: 0 0 0 1px var(--aic-accent) inset,
              0 6px 18px -10px rgba(79,70,229,.42);
  background:
    linear-gradient(180deg, var(--aic-accent-soft) 0%, #ffffff 38%);
}
.ai-cand-card:not(.ai-cand-selected) { opacity: .82; }
.ai-cand-card:not(.ai-cand-selected):hover { opacity: 1; border-color: #d4d4e0; }

.ai-cand-head {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
}
.ai-cand-titlewrap { flex: 1 1 auto; min-width: 0; }
.ai-cand-title {
  font: 600 13.5px var(--font-ui);
  color: var(--aic-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.ai-cand-rationale {
  margin-top: 3px;
  font: 400 11.5px var(--font-ui);
  color: var(--aic-ink-2);
  line-height: 1.4;
}
.ai-cand-toggle {
  flex: 0 0 auto;
  width: 22px; height: 22px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--aic-line);
  border-radius: 7px;
  background: #fff;
  color: transparent;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease,
              color 130ms ease, transform 120ms ease;
}
.ai-cand-toggle:hover { border-color: var(--aic-accent-2); }
.ai-cand-toggle:active { transform: scale(.9); }
.ai-cand-toggle:focus-visible {
  outline: 2px solid rgba(99,102,241,.5); outline-offset: 1px;
}
.ai-cand-selected .ai-cand-toggle {
  background: var(--aic-accent);
  border-color: var(--aic-accent);
  color: #fff;
}
.ai-cand-toggle:disabled { cursor: default; opacity: .65; }

.ai-cand-chartbox {
  margin-top: 11px;
  height: 138px;
  border-radius: 11px;
  background: #fcfcff;
  border: 1px solid var(--aic-line-soft);
  padding: 8px 9px;
  position: relative;
}
.ai-cand-chartbox-table {
  height: auto; padding: 0; overflow: hidden;
}
.ai-cand-canvas { width: 100% !important; height: 100% !important; display: block; }
.ai-cand-previewlabel {
  margin-top: 6px;
  font: 500 10px var(--font-ui);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--aic-ink-3);
}

.ai-cand-table-wrap { overflow-x: auto; }
.ai-cand-table {
  width: 100%; border-collapse: collapse;
  font: 400 11.5px var(--font-ui); color: var(--aic-ink);
}
.ai-cand-table th, .ai-cand-table td {
  padding: 5px 9px; text-align: left;
  border-bottom: 1px solid var(--aic-line-soft);
  white-space: nowrap;
}
.ai-cand-table th {
  background: #f6f6fb; font-weight: 600; color: var(--aic-ink-2);
  position: sticky; top: 0;
}
.ai-cand-table tr:last-child td { border-bottom: none; }
.ai-cand-table-more {
  padding: 5px 9px; font: 400 10.5px var(--font-ui); color: var(--aic-ink-3);
  background: #f9f9fc;
}

.ai-cand-table-target {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px;
  padding: 3px 9px 3px 7px;
  border-radius: 7px;
  background: var(--aic-line-soft);
  font: 500 11px var(--font-ui); color: var(--aic-ink-2);
}
.ai-cand-table-ico { font-size: 12px; color: var(--aic-accent-2); line-height: 1; }
.ai-cand-table-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; color: var(--aic-ink);
}

.ai-cand-sql { margin-top: 9px; }
.ai-cand-sql-summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11.5px var(--font-ui); color: var(--aic-accent);
  user-select: none;
}
.ai-cand-sql-summary::-webkit-details-marker { display: none; }
.ai-cand-sql-summary::before {
  content: "›"; font-size: 14px; line-height: 1;
  transition: transform 140ms ease; display: inline-block;
}
.ai-cand-sql[open] .ai-cand-sql-summary::before { transform: rotate(90deg); }
.ai-cand-sql-pre {
  margin: 7px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: #14182b;
  color: #e6e8ff;
  font: 400 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap; word-break: break-word;
}
.ai-cand-sql-pre code { background: none; color: inherit; padding: 0; }

.ai-cand-actions {
  display: flex; align-items: center; gap: 9px;
  padding-top: 2px;
}
.ai-cand-build {
  flex: 1 1 auto;
  height: 38px;
  border: none; border-radius: 11px;
  background:
    radial-gradient(140% 140% at 30% 0%, #6366f1 0%, #4f46e5 55%, #4338ca 100%);
  color: #fff;
  font: 600 13px var(--font-ui); letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(79,70,229,.6);
  transition: filter 130ms ease, transform 120ms ease, box-shadow 130ms ease;
}
.ai-cand-build:hover:not(:disabled) { filter: brightness(1.06); }
.ai-cand-build:active:not(:disabled) { transform: scale(.98); }
.ai-cand-build:focus-visible { outline: 2px solid rgba(99,102,241,.6); outline-offset: 2px; }
.ai-cand-build:disabled, .ai-cand-build-empty {
  background: #e7e7ef; color: var(--aic-ink-3);
  box-shadow: none; cursor: default;
}
.ai-cand-dismiss {
  flex: 0 0 auto;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--aic-line); border-radius: 11px;
  background: #fff; color: var(--aic-ink-2);
  font: 500 12.5px var(--font-ui);
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}
.ai-cand-dismiss:hover { background: var(--aic-line-soft); color: var(--aic-ink); }
.ai-cand-dismiss:focus-visible { outline: 2px solid rgba(99,102,241,.5); outline-offset: 1px; }

.ai-cand-built .ai-cand-card, .ai-cand-dismissed .ai-cand-card { animation: none; }
.ai-cand-locked { opacity: .92; }
.ai-cand-dismissed .ai-cand-card { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .ai-chat-panel, .ai-hist-panel, .ai-msg-row, .ai-chat-empty,
  .ai-chat-empty-orb, .ai-fab, .ai-chat-send { transition: none; animation: none; }
  .ai-cand-card { animation: none; }
}
/* "Add Authorization" badge variant — same place, red accent. */
.dbx-operator.auth-required::after {
  content: "Add Authorization";
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
  font: 500 10px var(--font-ui);
}
/* "Wrap in For Loop" affordance on the http_request settings panel.
 * Shown after a test-run when the response carries a next-page marker. */
.http-paginate-banner {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f0f7ff;
  border: 1px solid #bdd9ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.http-paginate-text {
  font: 500 12px var(--font-ui);
  color: #1e40af;
}
.http-paginate-wrap {
  background: var(--brand-600, #4f46e5);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font: 500 12px var(--font-ui);
  cursor: pointer;
}

/* ─── AI Guided Build: the fake cursor, click ripple, narration chip ───
 * A soft-shadowed pointer with a subtle purple glow matching the FAB
 * gradient (#6366f1 → #8b5cf6 → #a855f7), a quick click pulse + ripple,
 * and a dark narration pill with white text that rides the cursor. */
.ai-cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 99999;
  pointer-events: none;
  width: 26px; height: 26px;
  transform: translate(-3px, -2px);
  transition: left 420ms cubic-bezier(.4,0,.2,1),
              top 420ms cubic-bezier(.4,0,.2,1),
              opacity 320ms ease;
  filter: drop-shadow(0 3px 6px rgba(124, 58, 237, 0.45))
          drop-shadow(0 1px 2px rgba(15, 23, 42, 0.25));
  will-change: left, top, transform;
}
.ai-cursor svg { display: block; }
/* Phase 2 — concurrent per-source cursors. Each lane's cursor carries its
 * own accent (via the --ai-cursor-accent custom property set inline) so two
 * builds running at once are visually distinct, plus an optional "Source N"
 * label that only appears when more than one build is live. */
.ai-cursor[style*="--ai-cursor-accent"] {
  filter: drop-shadow(0 3px 6px var(--ai-cursor-accent, rgba(124,58,237,.45)))
          drop-shadow(0 1px 2px rgba(15, 23, 42, 0.25));
}
.ai-cursor .ai-cursor-label {
  position: absolute;
  left: 20px; top: 14px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
}
.ai-cursor-ripple[style*="--ai-cursor-accent"] {
  border-color: var(--ai-cursor-accent, #a855f7);
}
/* Stacked per-build controls bars (one per concurrent lane). */
.ai-build-controls.ai-build-controls-multi { left: 16px; transform: none; }
.ai-build-controls .ai-bc-srclabel {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 8px;
  margin-right: 6px;
}
.ai-cursor .ai-cursor-spark {
  position: absolute;
  right: -8px; top: -10px;
  font-size: 12px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.8));
  animation: aiCursorTwinkle 1.6s ease-in-out infinite;
}
@keyframes aiCursorTwinkle {
  0%, 100% { opacity: 0.55; transform: scale(0.9) rotate(-8deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(8deg); }
}
.ai-cursor.ai-cursor-click {
  animation: aiCursorClick 220ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes aiCursorClick {
  0%   { transform: translate(-3px, -2px) scale(1); }
  45%  { transform: translate(-3px, -2px) scale(0.72); }
  100% { transform: translate(-3px, -2px) scale(1); }
}

.ai-cursor-ripple {
  position: fixed;
  left: 0; top: 0;
  z-index: 99998;
  pointer-events: none;
  width: 14px; height: 14px;
  margin-left: -7px; margin-top: -7px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.85);
  opacity: 0;
  transition: opacity 320ms ease;
}
.ai-cursor-ripple.ai-cursor-ripple-go {
  animation: aiRipple 480ms cubic-bezier(.2,.6,.2,1);
}
@keyframes aiRipple {
  0%   { opacity: 0.9;  transform: scale(0.4); }
  100% { opacity: 0;    transform: scale(3.4); }
}

.ai-narration-chip {
  position: fixed;
  left: 0; top: 0;
  z-index: 99999;
  pointer-events: none;
  max-width: 260px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.96) 0%,
              rgba(49, 26, 90, 0.96) 100%);
  color: #fff;
  font: 600 12.5px/1.3 var(--font-ui, system-ui, sans-serif);
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 18px -6px rgba(124, 58, 237, 0.6),
              0 2px 6px -1px rgba(15, 23, 42, 0.35),
              0 0 0 1px rgba(168, 85, 247, 0.35) inset;
  opacity: 0;
  transform: translateY(2px) scale(0.96);
  transition: left 420ms cubic-bezier(.4,0,.2,1),
              top 420ms cubic-bezier(.4,0,.2,1),
              opacity 200ms ease,
              transform 200ms ease;
}
.ai-narration-chip.ai-narration-chip-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Brief highlight ring when the cursor "lands" on a field it's about to
 * fill, so the typing target is unmistakable. */
.ai-field-flash {
  animation: aiFieldFlash 600ms ease-out;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35) !important;
}
@keyframes aiFieldFlash {
  0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55); }
  100% { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0); }
}
/* ── Build-controls bar (Interactive AI Builder) ──
 * Floating pill bar, bottom-center of the viewport over #chart_container.
 * Kept clear of the top-right AI widget. Purple FAB palette, ~44px tall. */
.ai-build-controls {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(14px);
  z-index: 99996;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.97) 0%,
              rgba(49, 26, 90, 0.97) 100%);
  box-shadow: 0 12px 30px -8px rgba(124, 58, 237, 0.55),
              0 4px 12px -2px rgba(15, 23, 42, 0.4),
              0 0 0 1px rgba(168, 85, 247, 0.4) inset;
  font: 600 13px var(--font-ui, system-ui, sans-serif);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,0,0,1);
  user-select: none;
}
.ai-build-controls.ai-build-controls-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.ai-bc-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  letter-spacing: 0.1px;
  transition: background 140ms ease, transform 120ms ease, opacity 140ms ease;
}
.ai-bc-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}
.ai-bc-btn:active:not(:disabled) {
  transform: scale(0.96);
}
.ai-bc-btn:disabled {
  opacity: 0.38;
  cursor: default;
}
.ai-bc-btn.ai-bc-on {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #a855f7 100%);
  box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.6);
}
.ai-bc-playpause {
  font-weight: 700;
}
.ai-bc-ico {
  font-size: 13px;
  line-height: 1;
}
.ai-bc-step b { font-weight: 800; }
.ai-bc-sep {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
}
.ai-bc-count {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 46px;
  justify-content: center;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
}
.ai-bc-count b {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}
.ai-build-controls.ai-build-controls-error {
  box-shadow: 0 12px 30px -8px rgba(220, 38, 38, 0.5),
              0 4px 12px -2px rgba(15, 23, 42, 0.4),
              0 0 0 1px rgba(248, 113, 113, 0.55) inset;
}

/* ── Issue 4: DONE bar (Replay / Close) ──────────────────────────────── */
.ai-build-controls.ai-build-controls-done {
  box-shadow: 0 12px 30px -8px rgba(16, 185, 129, 0.5),
              0 4px 12px -2px rgba(15, 23, 42, 0.4),
              0 0 0 1px rgba(52, 211, 153, 0.5) inset;
}
.ai-bc-done-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 6px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #fff;
}
.ai-bc-done-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: #06281d;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.7);
}
.ai-bc-replay {
  font-weight: 700;
}
.ai-bc-close {
  font-weight: 700;
}
.ai-bc-close:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.28);
}

/* ── Facet 2: error card (chat + inline) ─────────────────────────────── */
.ai-err-card {
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.42);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.96) 0%,
              rgba(255, 255, 255, 0.98) 100%);
  box-shadow: 0 6px 18px -6px rgba(220, 38, 38, 0.28);
  padding: 12px 13px;
  font: 13px var(--font-ui, system-ui, sans-serif);
  color: #3f1212;
  max-width: 340px;
}
.ai-err-card-chat { width: 100%; }
.ai-err-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  color: #b91c1c;
  margin-bottom: 6px;
}
.ai-err-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.ai-err-interp {
  color: #7f1d1d;
  line-height: 1.4;
  margin-bottom: 8px;
}
.ai-err-raw {
  margin: 0 0 10px 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.08);
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #334155;
  max-height: 84px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-err-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-err-btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: #fff;
  color: #334155;
  font: 600 12px var(--font-ui, system-ui, sans-serif);
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 130ms ease, transform 110ms ease,
              box-shadow 130ms ease;
}
.ai-err-btn:hover { background: #f1f5f9; }
.ai-err-btn:active { transform: scale(0.96); }
.ai-err-btn:disabled { opacity: 0.5; cursor: default; }
.ai-err-btn-rec {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #a855f7 100%);
  box-shadow: 0 3px 10px -3px rgba(124, 58, 237, 0.6);
}
.ai-err-btn-rec:hover {
  background: linear-gradient(135deg, #5457e6 0%, #7c43e6 60%, #9a3fe6 100%);
}
.ai-err-btn-abort { color: #b91c1c; }

/* Inline error card pinned to the failed operator on the canvas. */
.ai-err-inline-float {
  position: fixed;
  z-index: 99997;
  max-width: 300px;
  animation: ai-err-pop 200ms cubic-bezier(.2, 0, 0, 1);
}
@keyframes ai-err-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Red state on the failed operator node. */
.dbx-operator.ai-op-error,
.flowchart-operator.ai-op-error {
  box-shadow: 0 0 0 2px #dc2626, 0 0 0 6px rgba(220, 38, 38, 0.18) !important;
  border-radius: 8px;
}

/* AI-fix proposal bubble (chat). */
.ai-fix-proposal {
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.35);
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.96) 0%,
              rgba(255, 255, 255, 0.98) 100%);
  padding: 11px 12px;
  font: 13px var(--font-ui, system-ui, sans-serif);
  color: #2e1065;
}
.ai-fix-line {
  font-weight: 700;
  margin-bottom: 9px;
  line-height: 1.4;
}
.ai-fix-accept {
  appearance: none;
  cursor: pointer;
  border: 0;
  color: #fff;
  font: 700 12px var(--font-ui, system-ui, sans-serif);
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #a855f7 100%);
  box-shadow: 0 3px 10px -3px rgba(124, 58, 237, 0.6);
  transition: transform 110ms ease, box-shadow 130ms ease;
}
.ai-fix-accept:hover { box-shadow: 0 5px 14px -3px rgba(124, 58, 237, 0.7); }
.ai-fix-accept:active { transform: scale(0.96); }
.ai-fix-accept:disabled { opacity: 0.55; cursor: default; }

/* ════════════════════════════════════════════════════════════════════════
 * Master Ask — the global "✨ Quick Ask" popover (ask_widget.js).
 * A docked, chat-style message box anchored off the icon rail, reusing the
 * composer's --aic-* tokens for a native feel. Self-namespaced (mask-*) so it
 * never collides with the data-route="ask" view or the dataflow AI chat.
 * ════════════════════════════════════════════════════════════════════════ */
.mask-rail-btn .mask-build-ic { display: none; }
/* The rail trigger glows faintly when its popover is open. */
.mask-rail-btn.is-active { color: var(--aic-accent, #4f46e5); }
.mask-rail-btn.is-active svg {
  filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.55));
}

.mask-root {
  position: fixed;
  inset: 0;
  z-index: 4000;
  pointer-events: none;
}
/* The panel anchors to the lower-left, just off the rail, like a docked
   assistant. On narrow screens it spans more of the viewport. */
.mask-panel {
  position: fixed;
  left: 84px;
  bottom: 22px;
  width: 432px;
  max-width: calc(100vw - 104px);
  height: min(680px, calc(100vh - 60px));
  display: flex;
  flex-direction: column;
  background: var(--aic-surface, #fff);
  border: 1px solid var(--aic-line, #e7e7ef);
  border-radius: 22px;
  box-shadow: var(--aic-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transform-origin: bottom left;
  transition: transform 280ms cubic-bezier(.18,.9,.22,1), opacity 200ms ease;
  pointer-events: none;
  font: 400 14px var(--font-ui, system-ui);
}
.mask-root.mask-open .mask-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── header ── */
.mask-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 14px 18px;
  border-bottom: 1px solid var(--aic-line-soft, #f0f0f6);
  background: var(--aic-head-grad);
}
.mask-head-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mask-spark {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: #fff; font-size: 16px;
  background: radial-gradient(120% 120% at 28% 22%, #7c83ff 0%, #5b54e6 48%, #4338ca 100%);
  box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.6),
              0 1px 0 rgba(255,255,255,0.3) inset;
  animation: maskSparkPulse 3.4s ease-in-out infinite;
}
@keyframes maskSparkPulse {
  0%, 100% { box-shadow: 0 6px 16px -6px rgba(79,70,229,0.6), 0 1px 0 rgba(255,255,255,0.3) inset; }
  50% { box-shadow: 0 8px 22px -6px rgba(99,102,241,0.78), 0 1px 0 rgba(255,255,255,0.4) inset; }
}
.mask-head-text { min-width: 0; }
.mask-title {
  font: 650 15px var(--font-ui, system-ui);
  color: var(--aic-ink, #14182b);
  letter-spacing: -0.01em;
}
.mask-sub {
  font-size: 12px; color: var(--aic-ink-3, #8a8fa3);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mask-x {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: none; background: transparent;
  border-radius: 9px; cursor: pointer;
  color: var(--aic-ink-3, #8a8fa3); font-size: 15px;
  display: grid; place-items: center;
  transition: background 130ms ease, color 130ms ease;
}
.mask-x:hover { background: var(--aic-line-soft, #f0f0f6); color: var(--aic-ink, #14182b); }

/* ── thread ── */
.mask-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 16px 8px;
  background: var(--aic-thread-grad);
  scroll-behavior: smooth;
}
.mask-thread::-webkit-scrollbar { width: 9px; }
.mask-thread::-webkit-scrollbar-thumb { background: #dcdce6; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }

.mask-empty {
  text-align: center;
  padding: 30px 14px 14px;
  color: var(--aic-ink-2, #51566b);
}
.mask-empty-mark {
  font-size: 30px; color: var(--aic-accent, #4f46e5);
  margin-bottom: 6px;
}
.mask-empty h2 {
  margin: 0 0 6px; font: 700 19px var(--font-ui, system-ui);
  color: var(--aic-ink, #14182b); letter-spacing: -0.02em;
}
.mask-empty p { margin: 0 auto 16px; max-width: 280px; font-size: 13px; line-height: 1.5; }
.mask-chips { display: flex; flex-direction: column; gap: 8px; }
.mask-chip {
  border: 1px solid var(--aic-line, #e7e7ef);
  background: var(--aic-raised);
  color: var(--aic-ink-2, #51566b);
  border-radius: 12px;
  padding: 10px 13px;
  font: 500 13px var(--font-ui, system-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}
.mask-chip:hover {
  border-color: var(--aic-accent-2, #6366f1);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -10px rgba(79,70,229,0.5);
}

/* ── messages ── */
.mask-msg { display: flex; margin-bottom: 14px; }
.mask-msg-user { justify-content: flex-end; }
.mask-msg-ai { justify-content: flex-start; }
.mask-bubble {
  max-width: 92%;
  border-radius: 16px;
  padding: 11px 14px;
  line-height: 1.55;
  font-size: 13.5px;
  word-wrap: break-word;
}
.mask-msg-user .mask-bubble {
  background: var(--aic-user-bubble, #4f46e5);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 6px 16px -8px rgba(79,70,229,0.55);
}
.mask-msg-ai .mask-bubble {
  background: var(--aic-assistant-bubble, #f4f4f8);
  color: var(--aic-ink, #14182b);
  border: 1px solid var(--aic-line-soft, #f0f0f6);
  border-bottom-left-radius: 5px;
  width: 100%;
}
.mask-answer p { margin: 0 0 7px; }
.mask-answer p:last-child { margin-bottom: 0; }
.mask-answer h2, .mask-answer h3, .mask-answer h4 {
  margin: 8px 0 4px; font-size: 14px; color: var(--aic-ink, #14182b);
}
.mask-answer ul { margin: 4px 0 8px; padding-left: 18px; }
.mask-answer code {
  background: rgba(99,102,241,0.10); color: #4338ca;
  padding: 1px 5px; border-radius: 5px; font-size: 12px;
}
.mask-caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--aic-accent, #4f46e5);
  margin-left: 1px; vertical-align: text-bottom;
  animation: maskBlink 1s step-end infinite;
}
@keyframes maskBlink { 50% { opacity: 0; } }

/* typing dots */
.mask-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.mask-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--aic-ink-3, #8a8fa3);
  animation: maskBounce 1.2s infinite ease-in-out both;
}
.mask-typing span:nth-child(2) { animation-delay: 0.16s; }
.mask-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes maskBounce {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* View SQL */
.mask-sqlwrap { margin-top: 9px; }
.mask-sqlwrap > summary {
  cursor: pointer; font: 600 12px var(--font-ui, system-ui);
  color: var(--aic-accent, #4f46e5); list-style: none;
  display: inline-flex; align-items: center; gap: 5px;
  user-select: none;
}
.mask-sqlwrap > summary::-webkit-details-marker { display: none; }
.mask-sqlwrap > summary::before { content: "‹ ›"; font-size: 11px; opacity: 0.7; }
.mask-sql {
  margin: 7px 0 0;
  background: #0f1222; color: #d6dbf5;
  padding: 11px 13px; border-radius: 10px;
  font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap; overflow-x: auto;
}

/* result card (chart + table) */
.mask-result { margin-top: 10px; }
.mask-chartwrap {
  position: relative; height: 190px;
  background: var(--aic-raised); border: 1px solid var(--aic-line, #e7e7ef);
  border-radius: 12px; padding: 8px; margin-bottom: 8px;
}
.mask-kpi {
  font: 800 30px var(--font-ui, system-ui);
  color: var(--aic-accent, #4f46e5); letter-spacing: -0.02em;
}
.mask-kpi-label { font-size: 12px; color: var(--aic-ink-3, #8a8fa3); margin-top: 2px; }
.mask-tablewrap {
  border: 1px solid var(--aic-line, #e7e7ef);
  border-radius: 10px; overflow: auto; max-height: 230px;
}
.mask-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mask-table th {
  position: sticky; top: 0;
  background: var(--aic-th); color: var(--aic-ink-2, #51566b);
  text-align: left; padding: 7px 10px; font-weight: 650;
  border-bottom: 1px solid var(--aic-line, #e7e7ef);
}
.mask-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--aic-line-soft, #f0f0f6);
  color: var(--aic-ink, #14182b); white-space: nowrap;
}
.mask-more { font-size: 11px; color: var(--aic-ink-3, #8a8fa3); padding: 6px 2px 0; }

.mask-err {
  color: #b91c1c; font-size: 13px;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 10px; padding: 10px 12px;
}

/* Build dataflow action */
.mask-build-row { margin-top: 12px; }
.mask-build {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; cursor: pointer;
  background: linear-gradient(120% 120% at 28% 22%, #7c83ff 0%, #5b54e6 48%, #4338ca 100%);
  color: #fff;
  font: 650 13px var(--font-ui, system-ui);
  padding: 9px 15px; border-radius: 11px;
  box-shadow: 0 8px 20px -8px rgba(79,70,229,0.6), 0 1px 0 rgba(255,255,255,0.25) inset;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms ease, opacity 140ms ease;
}
.mask-build .mask-build-ic { font-size: 13px; }
.mask-build:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(79,70,229,0.68), 0 1px 0 rgba(255,255,255,0.3) inset;
}
.mask-build:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.mask-build:disabled { opacity: 0.78; cursor: default; }
.mask-build-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  display: inline-block; animation: maskSpin 0.7s linear infinite;
}
@keyframes maskSpin { to { transform: rotate(360deg); } }
.mask-build-note {
  margin-top: 9px; font-size: 12.5px; line-height: 1.5;
  color: var(--aic-note-ink);
  background: var(--aic-note-bg); border: 1px solid var(--aic-note-line);
  border-radius: 10px; padding: 9px 12px;
}

/* ── composer ── */
.mask-composer {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 9px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--aic-line-soft, #f0f0f6);
  background: var(--aic-surface);
}
.mask-input {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--aic-line, #e7e7ef);
  border-radius: 14px;
  padding: 11px 13px;
  font: 400 13.5px var(--font-ui, system-ui);
  color: var(--aic-ink, #14182b);
  background: var(--aic-input);
  max-height: 120px; min-height: 44px;
  line-height: 1.45;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.mask-input:focus {
  outline: none;
  border-color: var(--aic-accent-2, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14);
}
.mask-input:disabled { opacity: 0.7; }
.mask-send {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: none; cursor: pointer;
  border-radius: 13px;
  color: #fff;
  background: radial-gradient(120% 120% at 28% 22%, #7c83ff 0%, #5b54e6 48%, #4338ca 100%);
  box-shadow: 0 8px 20px -8px rgba(79,70,229,0.6), 0 1px 0 rgba(255,255,255,0.25) inset;
  display: grid; place-items: center;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms ease, opacity 140ms ease;
}
.mask-send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(79,70,229,0.7);
}
.mask-send:active:not(:disabled) { transform: translateY(0) scale(0.94); }
.mask-send:disabled { opacity: 0.55; cursor: default; }

/* KEPT (single scoped re-point): the AI-chat widget is self-contained on
   --aic-* tokens; dark just re-points them here. Components must use the
   tokens — never add per-component dark rules for this widget. */
html[data-theme="dark"] .ai-chat-root {
  --aic-surface: #161a26;
  --aic-thread: #12141d;
  --aic-ink: #e8edf4;
  --aic-ink-2: #aab3c2;
  --aic-ink-3: #7e879a;
  --aic-line: #2a3142;
  --aic-line-soft: #232838;
  --aic-assistant-bubble: #1d2230;
  --aic-raised: #1d2230;
  --aic-input: #1d2230;
  --aic-th: #1d2230;
  --aic-head-grad: linear-gradient(180deg, #1a1f2e 0%, #161a26 100%);
  --aic-thread-grad: radial-gradient(140% 70% at 50% 0%, #181c28 0%, #12141d 58%);
  --aic-note-bg: #2a2110;
  --aic-note-line: #5a4418;
  --aic-note-ink: #e8c98a;
  --aic-shadow: 0 38px 70px -24px rgba(0,0,0,0.6), 0 14px 30px -14px rgba(0,0,0,0.5);
}

@media (max-width: 640px) {
  .mask-panel { left: 12px; right: 12px; width: auto; max-width: none; bottom: 12px; height: min(78vh, 620px); }
}

/* On-canvas AI builder removed — Master Ask (navbar) is the entry point. */
.ai-fab, .ai-fab-tip, .ai-widget-root { display: none !important; }

/* ── Quick Ask (Master Ask) — neutral, professional palette ──────────────
   Overrides the indigo/purple accent with a calm slate. Appended last so it
   wins by source order; self-scoped to .mask-* so nothing else changes. */
.mask-root, .mask-rail-btn {
  --aic-accent: #334155;        /* slate-700 */
  --aic-accent-2: #475569;      /* slate-600 */
  --aic-user-bubble: #334155;
}
.mask-rail-btn.is-active { color: #334155; }
.mask-rail-btn.is-active svg { filter: drop-shadow(0 0 4px rgba(51,65,85,0.40)); }
.mask-spark {
  background: linear-gradient(135deg, #64748b 0%, #475569 55%, #334155 100%);
  box-shadow: 0 5px 14px -7px rgba(30,41,59,0.45), 0 1px 0 rgba(255,255,255,0.18) inset;
  animation: none;              /* drop the pulse — keep it calm/professional */
}
.mask-build, .mask-send {
  background: linear-gradient(135deg, #475569 0%, #334155 60%, #1e293b 100%);
  box-shadow: 0 6px 16px -8px rgba(30,41,59,0.45), 0 1px 0 rgba(255,255,255,0.16) inset;
}
.mask-msg-user .mask-bubble { box-shadow: 0 6px 16px -8px rgba(30,41,59,0.40); }
.mask-answer code { background: rgba(100,116,139,0.12); color: #334155; }

/* History-sidebar color rail in the live preview mock. */
.pv-sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; z-index: 5;
  border-right: 1px solid rgba(255,255,255,.14); border-radius: 10px 0 0 10px; }
.mpw-pv-screen.pv-light .pv-sidebar { border-right-color: rgba(15,23,42,.12); }

/* ── .mypages editor: dashboard library section ───────────────────────── */
.mpw-library { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto;
  border: 1px solid var(--border, rgba(15,23,42,.12)); border-radius: 10px; padding: 8px; }
.mpw-lib-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px; }
.mpw-lib-row:hover { background: var(--accent-tint, rgba(31,79,214,0.08)); }
.mpw-lib-pub { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; font-size: 13.5px; }
.mpw-lib-pub input { accent-color: var(--accent, #1f4fd6); width: 15px; height: 15px; flex: 0 0 auto; }
.mpw-lib-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpw-lib-row .mp-lib-cad { min-width: 110px; margin-bottom: 0; padding: 4px 8px; font-size: 12.5px; }
.mpw-lib-sub { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted, #64748b); cursor: pointer; white-space: nowrap; }
.mpw-lib-sub input { accent-color: var(--accent, #1f4fd6); width: 14px; height: 14px; }

/* ════════ Dashboard / pin-library layout fixes ════════
   Bounded previews (no overflow/overlap), a Power-BI-style snap grid on the
   canvas, and clean tile sizing. Pairs with .kit-dash-grid{position:relative}
   and .dbx-workspace top offset above. */
.kit-pin-viz { position: relative; height: 150px; overflow: hidden; border-radius: 8px; background: var(--surface-2); }
.kit-pin-viz canvas { max-width: 100% !important; }
.kit-dash-tile { box-sizing: border-box; }
.kit-dash-tile-body canvas { max-width: 100%; }
/* Subtle 20px dotted grid so free-form tiles read as deliberately placed. */
.kit-dash-grid { background-image: radial-gradient(rgba(15,23,42,.055) 1px, transparent 1px); background-size: 20px 20px; background-position: 0 0; }

/* ════════ Dashboard editor: full-width canvas + readable pin library ════════ */
/* The inspector column was removed in markup but the grid still reserved 340px,
   leaving the canvas at ~half width. Two columns → canvas fills the rest. */
.kit-dash--no-inspector .kit-dash-body { grid-template-columns: 264px 1fr; }
.kit-dash.is-lib-collapsed .kit-dash-body { grid-template-columns: 0 1fr; }
.kit-dash.is-lib-collapsed .kit-wh-pinlib { display: none; }

/* Pin library: each pin a clear, distinct, draggable card (was unstyled text). */
.kit-wh-zones.kit-wh-pinlib { gap: 7px; padding: 12px 11px; }

/* Pin library header — was plain inline flow (no flex), so the collapse
   chevron button had no box of its own and rendered on top of the trailing
   letters of the (uppercase, letter-spaced) "PIN LIBRARY" label. Give every
   piece its own flex slot so nothing overlaps at any sidebar width. */
.kit-wh-zones-head--lib {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 4px 8px;
}
.kit-wh-zones-head--lib .kit-wh-zones-back {
  flex: none; text-transform: none; text-decoration: none;
  font: 600 15px/1 var(--font-ui); color: var(--ink-500);
}
.kit-wh-zones-head--lib .kit-wh-zones-back:hover { color: var(--ink-900); }
.kit-wh-zones-head--lib .kit-wh-zones-head-label {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.kit-wh-zones-head--lib .kit-wh-zones-head-count { flex: none; text-transform: none; }
.kit-wh-zones-head--lib .kit-wh-zones-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; margin-left: 2px; border-radius: 6px;
  border: none; background: transparent; color: var(--ink-500); cursor: pointer;
}
.kit-wh-zones-head--lib .kit-wh-zones-toggle:hover { background: var(--brand-50); color: var(--ink-900); }
/* The pin-library empty state stretches to the panel's width instead of
   shrink-to-fit centering its text (which could strand the last word/period
   alone on its own centered line in the narrow 240px sidebar). */
.kit-wh-pinlib .kit-wh-no-sel { align-items: stretch; text-align: center; }
.kit-pinlib-row { display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  padding: 8px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface, #fff); cursor: grab; user-select: none;
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease); }
.kit-pinlib-row:hover { border-color: var(--brand-200); box-shadow: var(--shadow-1); background: var(--brand-50); }
/* Chart thumbnail at the top of each library card (painted from the pin's
   snapshot — see renderPinLibPreviews). */
.kit-pinlib-viz { position: relative; height: 72px; overflow: hidden; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface-2); flex: none; }
/* Text block under the thumbnail: dot + title on the first row, the
   type/status line beneath the title. */
.kit-pinlib-row .kit-pinlib-text { display: grid; grid-template-columns: auto 1fr;
  column-gap: 7px; row-gap: 1px; align-items: center; }
.kit-pinlib-row .kit-pinlib-dot { grid-row: 1; }
.kit-pinlib-row .kit-pinlib-text .dim { grid-column: 2; }
.kit-pinlib-row:active { cursor: grabbing; }
.kit-pinlib-dot { flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--brand-400, #6366f1); }
.kit-pinlib-dot--bar { background: #2563eb; }
.kit-pinlib-dot--line { background: #16a34a; }
.kit-pinlib-dot--donut, .kit-pinlib-dot--pie { background: #d97706; }
.kit-pinlib-dot--kpi { background: #9333ea; }
.kit-pinlib-dot--table { background: #64748b; }
.kit-pinlib-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kit-pinlib-text strong { font: 600 12.5px var(--font-ui); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-pinlib-text .dim { font: 500 10.5px var(--font-ui); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ════════ Report canvas → FREE-FORM surface (Task 16, fix round 1) ════════
   This canvas is where a report is CONSUMED. The builder (.ib-canvas-free)
   lets the user place every visual absolutely and stores x/y/w/h on each tile,
   so this surface honours those coordinates EXACTLY — overlap included. Power
   BI allows overlap and the builder permits it deliberately, so a viewer that
   pushed tiles apart would be a defect, not a safeguard.

   ⚠ This block used to do the OPPOSITE, and it silently defeated the absolute
   positioning code in home-ui.js because it came later in the cascade:
     .kit-dash-grid { display:grid !important;
       grid-template-columns: repeat(auto-fit, minmax(360px,1fr)) !important; }
     .kit-dash-grid > .kit-dash-tile { position:static !important;
       left/top/width:auto !important; height:340px !important; }
   A tile stored at left:700px top:40px 400x300 computed to static/0/0/770x340:
   every saved report re-flowed into a uniform two-column grid the moment it
   was opened or shared, losing position, size AND overlap at the point of
   consumption — and a table tile sized for 19 rows showed 340px worth.
   Do not reintroduce a flow override here. smoke_task4_viewer_export now
   asserts stored geometry survives into this canvas, tile by tile.

   Padding is 16px to match the builder's own .ib-canvas, so a coordinate means
   the same pixel on both surfaces (an absolutely positioned child's left/top
   are measured from the containing block's PADDING box). .dbx-tabs's
   full-bleed negative margins follow it below. */
.kit-dash-canvas { padding: 16px; }
.kit-dash-grid {
  display: block; position: relative;
  /* No snap-dot background: the builder canvas the user drew on has none, and
     a 20px dot grid would advertise a snap step that is 8px. */
  background-image: none;
}
/* Placed by renderTiles / commitTileGeometry — the only writers of
   left/top/width/height. min-height:0 so a stored height below the flow-era
   220px floor is honoured (the builder's own floor is IB_MIN_H = 180). */
.kit-dash-grid > .kit-dash-tile {
  position: absolute; margin: 0; max-width: none; min-height: 0; z-index: 1;
}
/* Z-ORDER FOLLOWS SELECTION — twin of .ib-canvas-free's rules in
   insights_builder.css. Overlap is allowed, but an overlapped tile must never
   become unreachable, so the selected tile comes to the front and the one
   being moved sits above that. */
.kit-dash-grid > .kit-dash-tile.is-selected { z-index: 5; }
.kit-dash-grid > .kit-dash-tile.is-dragging,
.kit-dash-grid > .kit-dash-tile.is-resizing {
  z-index: 9; box-shadow: 0 8px 24px rgba(16,24,40,.18); }
/* The resize grip is real again — it was display:none for as long as tiles
   were fixed 340px boxes. 18px, bottom-right, twin of .ib-resize-handle. */
.kit-dash-tile-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; z-index: 6;
  cursor: nwse-resize; touch-action: none; display: flex;
  align-items: flex-end; justify-content: flex-end; color: var(--ink-700); }
.kit-dash-tile-resize:hover { color: var(--ink-900); }
/* The page strip's full-bleed margins track the canvas padding set above. */
.dbx-tabs { margin: 16px -16px -16px; padding: 5px 16px; }
.kit-dash-tile-body { overflow: hidden; }
.kit-dash-tile-body .dbx-tile-tablewrap { max-height: 100%; overflow: auto; }
/* Paged table (Task 17) — twin of .ib-tbl in insights_builder.css. The table
   is a BOUNDED box: scroll region flexes, pager bar pinned under it, so a
   100-row result can never stretch the tile. */
.kit-dash-tile-body .dbx-tbl { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.kit-dash-tile-body .dbx-tbl .dbx-tile-tablewrap { flex: 1 1 auto; min-height: 0; height: auto; }
/* No grip to clear here: .kit-dash-tile-resize has exactly one rule in this
   tree — `display:none` above, unscoped — and .kit-dash-grid > .kit-dash-tile
   is height:340px !important, so the viewer never paints a resize handle over
   this bar. (The BUILDER's .ib-tbl-pager does reserve 22px, because
   .ib-resize-handle is real there.) Round-1 review, Minor 2: this used to
   reserve 20px on a premise that is not true in this template. */
.dbx-tbl-pager { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; padding: 3px 4px 0 4px; margin-top: 3px;
  border-top: 1px solid var(--hairline, rgba(15,23,42,0.1)); }
.dbx-tbl-pg { display: flex; align-items: center; gap: 4px; }
/* Body-text contrast, not --ink-soft: this readout is what tells the user
   there is data off-screen. Token-based, so light and dark both hold. */
.dbx-tbl-pgpos { font-size: 11px; color: var(--ink); white-space: nowrap; }
.dbx-tbl-pgbtn { border: 1px solid var(--hairline, rgba(15,23,42,0.14)); border-radius: 4px;
  background: var(--surface, #fff); color: var(--ink); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 2px 7px; min-width: 22px; }
.dbx-tbl-pgbtn:hover:not(:disabled) { border-color: var(--accent-text); color: var(--accent-text); }
.dbx-tbl-pgbtn:disabled { opacity: .38; cursor: default; }
.dbx-tbl-pgbtn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.kit-dash-tile-body .dbx-tile-chartwrap { height: 100%; }
.kit-dash-tile-body canvas { max-width: 100% !important; }

/* ════════ Dashboard body: bulletproof 2-col (flex, not grid-template) ════════
   grid-template-columns depended on the exact child count / the no-inspector
   class and kept leaving the canvas narrow or behind the pin library. Flex is
   forgiving: pin library fixed width, canvas takes ALL the rest. */
.kit-dash-body { display: flex !important; grid-template-columns: none !important; }
.kit-dash-body > .kit-wh-pinlib { flex: 0 0 240px; width: 240px; }
.kit-dash-body > .kit-dash-canvas { flex: 1 1 auto !important; min-width: 0; width: auto; }
.kit-dash.is-lib-collapsed .kit-dash-body > .kit-wh-pinlib { display: none; }

/* Import activity — saved-connection preview table */
.import-cxn-preview { margin-top: 12px; }
.import-cxn-err { color: #d6303b !important; }
.import-cxn-rowcount { margin-bottom: 6px; }
.import-cxn-table-wrap { border: 1px solid var(--line, #e3e8ee); border-radius: 8px; overflow: auto; max-height: 260px; }
.import-cxn-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.import-cxn-table th, .import-cxn-table td { border-bottom: 1px solid var(--line, #e3e8ee); padding: 6px 9px; text-align: left; white-space: nowrap; color: var(--ink-900, #1a1f36); }
.import-cxn-table th { background: var(--surface-3, #f1f5f9); position: sticky; top: 0; font-weight: 700; }

/* Connections inside the mobile surface — static (not the desktop absolute fill). */
body.etl-mobile .cxn-workspace-mobile { position: static; inset: auto; background: transparent; padding: 4px 0 88px; font-family: "Space Grotesk", system-ui, sans-serif; }
body.etl-mobile .cxn-workspace-mobile .cxn-shell { max-width: none; margin: 0; }
body.etl-mobile .cxn-workspace-mobile .cxn-title { font-size: 20px; }

/* ============================================================================
   DARK-MODE READABILITY PASS
   Fixes elements that hardcode light surfaces (#fff) or dark-blue accent text
   that only works on a light background. Grouped so it's easy to extend as the
   audit (dark_audit.js) surfaces more. All scoped to html[data-theme="dark"].
   ========================================================================== */

/* --- Accent text / icons on dark: the base --accent/--brand-* stay dark
   because they double as button FILLS with white text, so lift just the
   `color` here to a light blue (--accent-text). --------------------------- */

/* Active nav/tab tinted fills: --brand-50 is a translucent blue in dark mode,
   which can read muddy. Give a slightly stronger, clearly "active" tint. */

/* --- Warehouse record tiles + controls: hardcoded #fff -> dark surface. --- */

/* --- Trigger modal (rendered into every view's body): light -> dark. ----- */

/* --- ai-compose card on empty canvas. ----------------------------------- */

/* --- Mobile bottom-sheet / list surface (etlm-*): all hardcoded light. --- */

/* --- Remaining accent-text + injected-style buttons. -------------------- */
/* Trigger modal footer buttons: hardcoded dark text -> light. */
/* Warehouse: active folder name + selection-bar labels (brand text on tint). */
/* Dashboard "+ New dashboard" primary toolbar button — keep tint, lift text. */
/* SQL "Convert to dataflow" pill (.s2d-trigger) is injected with inline
   light styles in sql_to_dataflow_widget.js; override here (higher specificity). */
html[data-theme="dark"] .s2d-trigger { background: rgba(56,110,232,0.16) !important; color: var(--accent-text, #8fb3ff) !important; }
html[data-theme="dark"] .s2d-trigger:hover { background: rgba(56,110,232,0.26) !important; }

/* --- Warehouse file-preview modal (#fff panel + nav buttons). ----------- */

/* ============================================================================
   DARK MODE — dataflow BOTTOM PANEL (#footer) + per-activity settings.
   The tab strip, settings refresh bar, Run-details pills/table and the
   Scheduled-triggers panel hardcode brand-on-light text and #fff/pastel
   surfaces. Re-point them for dark.
   ========================================================================== */
/* Active bottom-panel (and any) tab label: brand-500 -> light accent. */

/* Settings tab refresh bar — "Sync from peers" brand-700 text on dark. */

/* Run-details status pills: pastel-on-dark-text -> dark translucent tint. */

/* Scheduled-triggers panel: light gradient toolbar, #0f172a text, #fff
   buttons/selects, light empty state — all to dark. */

/* --- Per-activity settings forms: hardcoded dark text on the now-dark
   settings panel. Copy-Data path picker, HTTP-Request panel, flow props. -- */

/* --- Warehouse-file preview in the bottom panel (Data preview tab,
   #blob_storage_preview_panel / .bs-preview-*): hardcoded light. ---------- */

/* In-panel activity settings tab strip (e.g. HTTP Request: Request/Auth/Body)
   — active tab is brand-600 on dark surface; lift to a readable accent. */

/* ── Mobile warehouse FILE PICKER (add files from warehouse to a page) ── */
.etlm-fp-scrim { position: fixed; inset: 0; z-index: 10000; background: rgba(8,12,22,.5);
  display: flex; align-items: flex-end; justify-content: center; animation: etlmFpIn .18s ease; }
@keyframes etlmFpIn { from { background: rgba(8,12,22,0); } to { background: rgba(8,12,22,.5); } }
.etlm-fp { width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface, #fff); border-radius: 22px 22px 0 0; overflow: hidden;
  box-shadow: 0 -10px 44px rgba(8,12,22,.45); animation: etlmFpUp .22s cubic-bezier(.2,.8,.2,1); }
@keyframes etlmFpUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.etlm-fp-head { padding: 16px 16px 11px; border-bottom: 1px solid var(--line, #e7ebf0); }
.etlm-fp-title { font: 700 16.5px/1.2 var(--font-ui, system-ui, sans-serif); color: var(--ink-900, #0f172a); margin-bottom: 11px; }
.etlm-fp-search { width: 100%; box-sizing: border-box; font: 500 16px var(--font-ui, system-ui, sans-serif);
  padding: 12px 14px; border: 1px solid var(--line-strong, #cbd5e1); border-radius: 12px;
  background: var(--surface-2, #f8fafc); color: var(--ink-900, #0f172a); -webkit-appearance: none; }
.etlm-fp-search:focus { outline: none; border-color: var(--brand-400, #5a86f0); background: var(--surface, #fff); }
.etlm-fp-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 9px; }
.etlm-fp-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 12px; margin-bottom: 7px; cursor: pointer; font: inherit;
  background: var(--surface, #fff); border: 1px solid var(--line, #e7ebf0); border-radius: 14px;
  transition: border-color .12s, background .12s; }
.etlm-fp-row.is-on { border-color: var(--brand-500, #3b6df0); background: var(--brand-50, #eef2ff); }
.etlm-fp-ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; font-size: 24px;
  display: flex; align-items: center; justify-content: center; background: var(--surface-2, #eef2f8); }
.etlm-fp-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.etlm-fp-nm { font: 600 14.5px var(--font-ui, system-ui, sans-serif); color: var(--ink-900, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etlm-fp-meta { font: 600 11px var(--font-ui, system-ui, sans-serif); color: var(--ink-500, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.etlm-fp-chk { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
  border: 2px solid var(--line-strong, #cbd5e1); }
.etlm-fp-row.is-on .etlm-fp-chk { background: var(--brand-500, #3b6df0); border-color: var(--brand-500, #3b6df0); }
.etlm-fp-empty { padding: 40px; text-align: center; color: var(--ink-500, #64748b); font: 500 14px var(--font-ui, system-ui, sans-serif); }
.etlm-fp-foot { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line, #e7ebf0);
  padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.etlm-fp-cancel, .etlm-fp-done { flex: 1; font: 700 15px var(--font-ui, system-ui, sans-serif);
  padding: 13px; border-radius: 13px; cursor: pointer; border: 1px solid var(--line-strong, #cbd5e1); }
.etlm-fp-cancel { background: var(--surface, #fff); color: var(--ink-700, #334155); }
.etlm-fp-done { background: var(--brand-500, #3b6df0); color: #fff; border-color: var(--brand-500, #3b6df0); }

/* ── Train-a-URL modal (warehouse workspace): scan a site, pick routes with a
   hierarchical, mobile-friendly, dark-mode checklist. ─────────────────────── */
.wht-modal { position: fixed; inset: 0; z-index: 4200; }
.wht-modal[hidden] { display: none; }
.wht-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.5); }
.wht-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(600px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface, #fff); color: var(--ink, #0f172a);
  border: 1px solid var(--hairline, #e3e8ee); border-radius: var(--radius-card, 14px);
  box-shadow: 0 24px 70px rgba(15,23,42,0.34); overflow: hidden;
}
.wht-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--hairline, #e3e8ee); }
.wht-title { flex: 1; font-size: 15px; font-weight: 700; }
.wht-close { border: 0; background: none; cursor: pointer; font-size: 17px;
  color: var(--ink-soft, #64748b); padding: 4px; line-height: 1; }
.wht-urlrow { display: flex; gap: 8px; padding: 14px 18px 6px; }
.wht-url { flex: 1; min-width: 0; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--line-strong, #cbd5e1); border-radius: 10px;
  background: var(--surface, #fff); color: var(--ink, #0f172a); }
.wht-status { margin: 4px 18px 0; font-size: 13px; color: var(--ink-soft, #64748b); }
.wht-status.ok { color: var(--success-600, #15803d); }
.wht-status.err { color: var(--danger-600, #dc2626); }
.wht-status.warn { color: var(--warn-600, #b45309); }
.wht-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--hairline, #e3e8ee); }
.wht-count { font-size: 12px; color: var(--ink-soft, #64748b); margin-right: auto; }
.wht-filter { padding: 7px 10px; font-size: 13px; border: 1px solid var(--line-strong, #cbd5e1);
  border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #0f172a); min-width: 130px; }
.wht-tree { overflow: auto; padding: 6px 10px 10px; }
.wht-node { padding-left: calc(var(--d, 0) * 16px); }
.wht-row { display: flex; align-items: center; gap: 9px; padding: 9px 8px;
  border-radius: 9px; cursor: pointer; min-height: 40px; }
.wht-row:hover { background: var(--brand-50); }
.wht-row.wht-parent .wht-label { font-weight: 600; }
.wht-cb { width: 18px; height: 18px; flex: none; cursor: pointer;
  accent-color: var(--accent, #2563eb); }
.wht-box { display: none; }
.wht-label { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.wht-urlhint { font-size: 12px; color: var(--ink-soft, #94a3b8); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wht-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-top: 1px solid var(--hairline, #e3e8ee); }
.wht-foot-msg { flex: 1; font-size: 13px; color: var(--ink-soft, #64748b); }
.wht-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* Auto-refresh schedule */
.wht-sched { padding: 4px 18px 12px; border-top: 1px solid var(--hairline, #e3e8ee); }
.wht-sched-toggle { padding: 10px 0 2px; font-weight: 600; }
.wht-sched-body { margin: 6px 0 2px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-3); display: flex; flex-direction: column; gap: 10px; }
.wht-sched-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-soft, #475569); }
.wht-sched-num { width: 64px; padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--line-strong, #cbd5e1); border-radius: 7px; }
.wht-sched-sel, .wht-sched-dt { padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--line-strong, #cbd5e1); border-radius: 7px; background: var(--surface); }
.wht-dow { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  margin-right: 6px; cursor: pointer; }
.wht-dow input { accent-color: var(--accent, #2563eb); }
.wht-sched-list { padding: 0 18px 14px; }
.wht-sched-list-head { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft, #64748b); margin: 6px 0 8px; }
.wht-sched-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--hairline, #e3e8ee); border-radius: 9px; margin-bottom: 7px; }
.wht-sched-item-meta { flex: 1; min-width: 0; }
.wht-sched-item-name { font-size: 13.5px; font-weight: 600; }
.wht-sched-item-sub { font-size: 12px; color: var(--ink-soft, #64748b); margin-top: 2px; }
.wht-sched-off { font-size: 11px; color: var(--warn-600, #b45309); font-weight: 600; }
.wht-sched-item-acts { display: flex; gap: 6px; flex: none; }
.wht-sched-btn { font-size: 12px; padding: 5px 9px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line-strong, #cbd5e1); background: var(--surface); color: var(--ink-700, #334155); }
.wht-sched-btn:hover { background: var(--surface-2, #f1f5f9); }
.wht-sched-del:hover { border-color: var(--danger-600, #dc2626); color: var(--danger-600, #dc2626); }

/* Dark theme */

/* Mobile: bottom-sheet, bigger tap targets */
@media (max-width: 640px) {
  .wht-panel { top: auto; bottom: 0; left: 0; transform: none;
    width: 100vw; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .wht-row { min-height: 46px; padding: 11px 8px; }
  .wht-cb { width: 22px; height: 22px; }
  .wht-label { max-width: 50%; }
  .wht-urlrow { flex-wrap: wrap; }
}

/* Train-a-URL: collapsible tree, counts, lazy descriptions */
.wht-rowline { display: flex; align-items: center; gap: 2px; }
.wht-arrow { flex: none; width: 22px; height: 30px; border: 0; background: none; cursor: pointer;
  color: var(--ink-soft, #94a3b8); font-size: 10px; line-height: 1; padding: 0;
  transition: transform .15s ease; }
.wht-arrow.is-leaf { visibility: hidden; }
.wht-node.is-open > .wht-rowline > .wht-arrow { transform: rotate(90deg); }
.wht-row { flex: 1; min-width: 0; }
.wht-kids { display: none; }
.wht-node.is-open > .wht-kids { display: block; animation: whtFade .14s ease; }
@keyframes whtFade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.wht-count-badge { flex: none; margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-soft, #64748b); }
.wht-desc { display: block; font-size: 11.5px; color: var(--ink-soft, #8a98a8); line-height: 1.3;
  padding: 1px 12px 5px calc(var(--d, 0) * 16px + 52px); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.wht-expand { border: 0; background: none; cursor: pointer; font-size: 12px;
  color: var(--accent, #2563eb); padding: 4px 6px; }
@media (max-width: 640px) { .wht-arrow { width: 30px; height: 38px; font-size: 12px; } }

/* ── Warehouse drag-and-drop file move (animated) ─────────────────────────── */
.whse-tile--file[draggable="true"] { cursor: grab; }
.whse-tile--file[draggable="true"]:active { cursor: grabbing; }
.whse-tile.is-dragging { opacity: .4; transform: scale(.96); transition: opacity .12s ease, transform .12s ease; }
body.wh-dragging .whse-folder-summary,
body.wh-dragging .whse-folder-item,
body.wh-dragging .whse-tile--folder { transition: background .12s ease, box-shadow .12s ease, transform .12s ease; }
body.wh-dragging .whse-tile--folder { outline: 1px dashed var(--brand-300, #9db8ff); outline-offset: -3px; }
.whse-folder-summary.drop-hover,
.whse-folder-item.drop-hover,
.whse-tile--folder.drop-hover {
  background: var(--brand-50, #eef3ff) !important;
  box-shadow: inset 0 0 0 2px var(--brand-500, #1f4fd6);
  transform: scale(1.03);
}
@keyframes whDropPulse { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }
.wh-drop-pulse { animation: whDropPulse .42s cubic-bezier(.34,1.56,.64,1); }
.wh-tile-leave { transition: opacity .25s ease, transform .25s ease; opacity: 0; transform: scale(.78); pointer-events: none; }

/* ── W6 first-run checklist card ─────────────────────────────────────────── */
.fr-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  background: var(--surface); margin: 4px 0 8px; }
.fr-head { display: flex; align-items: center; gap: 12px; }
.fr-head strong { font: 700 0.95rem var(--font-ui); color: var(--ink-900); flex: 1; }
.fr-progress { font-size: 12px; color: var(--ink-500); }
.fr-dismiss { border: 0; background: none; color: var(--ink-400); font-size: 12px;
  cursor: pointer; padding: 2px 6px; }
.fr-dismiss:hover { color: var(--ink-700); text-decoration: underline; }
.fr-bar { height: 6px; border-radius: 999px; background: var(--line); margin: 10px 0 12px; overflow: hidden; }
.fr-bar span { display: block; height: 100%; border-radius: 999px;
  background: var(--brand-500, #6366f1); transition: width .4s ease; }
.fr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fr-step { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 9px; font-size: 13.5px; color: var(--ink-800); }
.fr-step[data-frgo]:not(.fr-on) { cursor: pointer; }
.fr-step[data-frgo]:not(.fr-on):hover { background: var(--brand-50, #eef2ff); }
.fr-step .fr-tick { width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line); display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; color: #fff; }
.fr-step.fr-on .fr-tick { background: var(--brand-500, #6366f1); border-color: var(--brand-500, #6366f1); }
.fr-step.fr-on .fr-label { color: var(--ink-400); text-decoration: line-through; }
.fr-step .fr-label em { font-style: normal; color: var(--ink-400); font-size: 12px; }
.fr-step .fr-go { margin-left: auto; color: var(--brand-600, #4f46e5); }
.fr-done { text-align: center; font: 600 1rem var(--font-ui); color: var(--ink-900); padding: 18px 8px; }

/* ── W3.4 UMUX-LITE quarterly micro-survey (design-system tokens; both themes) ── */
.umux-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  padding: 14px 16px; margin: 12px auto 6px; max-width: 560px; box-shadow: var(--shadow-1, none); }
.umux-head { display: flex; align-items: center; gap: 12px; }
.umux-head strong { flex: 1; font: 700 0.9rem var(--font-ui); color: var(--ink-900); }
.umux-dismiss { border: 0; background: none; color: var(--ink-400); font-size: 12px;
  cursor: pointer; padding: 2px 6px; }
.umux-dismiss:hover { color: var(--ink-700); text-decoration: underline; }
.umux-row { margin-top: 12px; }
.umux-q { font-size: 13.5px; color: var(--ink-700); margin-bottom: 6px; }
.umux-scale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.umux-end { font-size: 11px; color: var(--ink-400); }
.umux-pts { display: inline-flex; gap: 4px; }
.umux-pt { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-700); font: 600 12.5px var(--font-ui); cursor: pointer; }
.umux-pt:hover { border-color: var(--brand-300, #a5b4fc); }
.umux-pt.umux-on { background: var(--brand-500, #6366f1); border-color: var(--brand-500, #6366f1); color: #fff; }
.umux-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.umux-send { border: 0; border-radius: 9px; padding: 7px 16px; background: var(--brand-500, #6366f1);
  color: #fff; font: 600 13px var(--font-ui); cursor: pointer; }
.umux-send:disabled { opacity: .45; cursor: default; }
.umux-note { font-size: 11.5px; color: var(--ink-400); }
.umux-thanks { text-align: center; font: 600 0.95rem var(--font-ui); color: var(--ink-900); padding: 12px 6px; }

/* ── Berger N1 one-question NPS (rides the umux-card look; 0–10 row) ─────── */
.nps-card { max-width: 640px; }
.nps-scale { margin-top: 12px; }
.nps-pts { flex-wrap: wrap; }
.nps-pt { width: 34px; height: 32px; }
.nps-pt:hover { background: var(--brand-500, #6366f1); border-color: var(--brand-500, #6366f1); color: #fff; }
.nps-share-link { color: var(--brand-600, #4f46e5); font-weight: 700; text-decoration: none; }
.nps-share-link:hover { text-decoration: underline; }

/* ── Admin scorecard tiles (Home) ────────────────────────────────────────── */
.asc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.asc-tile { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.asc-val { font: 800 1.35rem var(--font-ui); color: var(--ink-900); }
.asc-label { font-size: 12.5px; color: var(--ink-700); margin-top: 2px; }
.asc-sub { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.asc-chip { display: inline-block; margin-top: 6px; font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--warn-bg, #fffbeb); color: var(--warn-text, #b45309); border: 1px solid var(--warn-border, #fcd34d); }
.asc-insuf .asc-val { color: var(--ink-500); }

/* Admin users roster table */
.asc-users { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.asc-users th { text-align: left; font-size: 11.5px; color: var(--ink-500); font-weight: 600;
  padding: 4px 10px 6px 0; border-bottom: 1px solid var(--line); }
.asc-users td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); color: var(--ink-800); }
.asc-users tr.asc-new td { background: var(--ok-bg, #f0fdf4); }
html[data-theme="dark"] .asc-users tr.asc-new td { background: rgba(52, 211, 153, .1); }

/* Visual audit: Home Ask hero — the dominant element (Garrett follow-the-eye) */
.home-hero-ask { text-align: center; padding: 40px 16px 26px; }
.home-hero-ask .home-hero-title { font: 800 2rem var(--font-ui); color: var(--ink-900);
  letter-spacing: -0.02em; margin: 6px 0 20px; }
.home-ask { display: flex; gap: 8px; max-width: 640px; margin: 0 auto; }
.home-ask-input { flex: 1; font: 500 15px var(--font-ui); color: var(--ink-900);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-xl, 12px);
  padding: 14px 18px; box-shadow: var(--shadow-1, 0 1px 3px rgba(15,23,42,.06)); transition: border-color .15s, box-shadow .15s; }
.home-ask-input:focus { outline: none; border-color: var(--brand-500, #6366f1);
  box-shadow: 0 0 0 3px var(--brand-100, #e0e7ff); }
.home-ask-btn { font: 700 15px var(--font-ui); color: #fff; background: var(--brand-600, #4f46e5);
  border: 0; border-radius: var(--radius-xl, 12px); padding: 0 22px; cursor: pointer; white-space: nowrap;
  transition: background .15s; }
.home-ask-btn:hover { background: var(--brand-700, #4338ca); }
.home-hero-ask .home-hero-sub { max-width: 620px; margin: 16px auto 0; color: var(--ink-500); font-size: 13.5px; }

/* Collaborators + split-screen are only meaningful in the editors — show them
   only on dataflow / pipeline / notebook routes (hidden everywhere else,
   incl. the Ask home). Keyed on the existing body[data-etl-route]. */
#collab_btn, #split_toggle { display: none; }
body[data-etl-route="dataflow"] #split_toggle,
body[data-etl-route="pipeline"] #split_toggle,
body[data-etl-route="notebook"] #split_toggle { display: inline-flex; }
body[data-etl-route="dataflow"] #collab_btn,
body[data-etl-route="pipeline"] #collab_btn,
body[data-etl-route="notebook"] #collab_btn { display: inline-flex; }

/* ── W9 grouped sidebar (nav-ia-audit.md) — task-language, ≤4-item clusters ── */
.efs-group-label { font: 700 10px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-400); padding: 14px 12px 5px; user-select: none; }
.efs-nav .efs-group-label:first-child { padding-top: 6px; }
.efs-adv-sub[hidden] { display: none; }
.efs-adv-sub { display: flex; flex-direction: column; }
.efs-adv-toggle .efs-adv-caret { transition: transform .15s; }
.efs-sub-btn { padding-left: 26px !important; opacity: .92; }
.efs-sub-btn svg { width: 15px; height: 15px; }
.efs-adv-toggle .efs-adv-caret { margin-left: auto; font-size: 11px; color: var(--ink-400); }

/* Saved-files browser (dataflows/pipelines/notebooks list + its search) is
   editor clutter for everyday users — show it ONLY in technical routes, not on
   Ask / My data / Sources. Keyed on the existing body[data-etl-route]. */
.efs-search { display: none !important; }
#efsScopeNote { display: none !important; }
#efsScroll { display: none; }
body[data-etl-route="dataflow"] #efsScroll,
body[data-etl-route="pipeline"] #efsScroll,
body[data-etl-route="notebook"] #efsScroll,
body[data-etl-route="sql"] #efsScroll,


/* Remove the activity-palette "Search for an activity" top bar + jargon subtitle
   from the Prep data (dataflow) view — clutter for the simplified experience. */
.sidebar-search { display: none !important; }
.sidebar-subtitle { display: none !important; }

/* Yellow unread-pages banner above "Select all" removed per Dario. */
#wh_cov_banner { display: none !important; }

/* ── Nav anchored to TOP of the rail (Bernard 2001: users expect navigation in
   the upper region). Overrides the earlier centered layout so expanding "Data
   tools" grows DOWNWARD instead of shoving items up. ── */
.efs-nav { gap: 14px; padding: 14px 12px 8px; margin-top: 0; border-bottom: 0; }
/* nav sits at the top; the footer keeps its own margin-top:auto to stay pinned
   at the bottom, so the free space falls BETWEEN nav and footer (stable). */
.efs-nav .etl-rail-btn {
  gap: 12px;
  padding: 13px 12px;
  font: 600 14.5px var(--font-ui);
}
.efs-nav .etl-rail-btn svg { width: 22px; height: 22px; }
.efs-nav .efs-adv-sub { gap: 8px; display: flex; }
.efs-nav .efs-sub-btn { font: 600 13px var(--font-ui); padding: 10px 12px; }
.efs-nav .efs-sub-btn svg { width: 18px; height: 18px; }
.efs-adv-sub[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL TOP NAV BAR — research-grounded (Bernard 2001 positions; Kalbach
   global-vs-local + 7±2 + descriptive labels; Pirolli&Card scent; Fitts targets)
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --gnav-h: 52px; }
.etl-gnav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--gnav-h); z-index: 1200;
  /* Three-region grid: equal 1fr side rails put the CENTER column at the true
     viewport midpoint regardless of how heavy either rail is, so the primary
     tabs stay centered even after the util cluster changes size. Grounded:
     "balanced elements ... clear eye path, easily scannable" (MECLABS conversion
     factors) + Gestalt grouping/whitespace (100 Things #3). */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--surface, #fff); border-bottom: 1px solid var(--line, #e3e8ee);
  font-family: var(--font-ui);
}
/* shift the whole app down so nothing hides beneath the fixed bar */
.sidebar { top: var(--gnav-h) !important; height: calc(100% - var(--gnav-h)) !important; }
.content-wrapper { margin-top: var(--gnav-h); height: calc(100vh - var(--gnav-h)) !important; }

/* brand — upper LEFT (Bernard), clickable to home/Ask */
.gnav-brand { grid-column: 1; justify-self: start; flex: none; display: flex; align-items: center; gap: 8px; background: none; border: 0;
  cursor: pointer; padding: 6px 10px 6px 4px; color: var(--ink-900); font: 700 15px var(--font-ui);
  border-radius: 8px; letter-spacing: -.01em; }
.gnav-brand:hover { background: var(--surface-3); }
.gnav-brand .dp-mark { color: #fff; display: inline-flex; }

/* primary GLOBAL nav — CENTER (Bernard) */
.gnav-primary { grid-column: 2; justify-self: center; display: flex; align-items: center; justify-content: center; gap: 2px; }
.gnav-item { background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  padding: 8px 14px; color: var(--ink-700); font: 600 13.5px var(--font-ui); white-space: nowrap;
  transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease); }
.gnav-item:hover { background: var(--surface-3); color: var(--ink-900); }

/* active "you are here" state (Kalbach/IA: show current location) */
body[data-etl-route="ask"] .gnav-item[data-route="ask"],
body[data-etl-route="warehouse"] .gnav-item[data-route="warehouse"],
body[data-etl-route="dataflow"] .gnav-item[data-route="dataflow"],
body[data-etl-route="pipeline"] .gnav-item[data-route="dataflow"],
body[data-etl-route="sql"] .gnav-item[data-route="sql"],
body[data-etl-route="notebook"] .gnav-item[data-route="notebook"],
body[data-etl-route="triggers"] .gnav-item[data-route="triggers"],
body[data-etl-route="mypages"] .gnav-item[data-route="mypages"] {
  background: var(--brand-50); color: var(--accent-text-strong); border-color: var(--brand-200); font-weight: 700;
}

/* account / search / utility — RIGHT (Bernard) */
.gnav-util { grid-column: 3; justify-self: end; flex: none; display: flex; align-items: center; gap: 6px; }
.gnav-search { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; color: var(--ink-500); }
.gnav-search svg { width: 15px; height: 15px; flex: none; }
.gnav-search input { border: 0; background: none; outline: none; font: 400 13px var(--font-ui); color: var(--ink-900); width: 150px; }

/* Collapsed/progressive search: magnifier-only by default, expands inline on
   focus. No overlay/pop-up (MECLABS "no pop ups"); persistent + one-click so it
   stays findable (MECLABS search "easy to find"); reveal-when-needed keeps the
   right rail light so the primary tabs stay centered (100 Things p.6). */
.gnav-search--min { width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center; cursor: text;
  overflow: hidden; transition: width 160ms var(--ease), padding 160ms var(--ease); }
.gnav-search--min svg { transition: margin 160ms var(--ease); }
.gnav-search--min input { width: 0; padding: 0; margin: 0; opacity: 0; pointer-events: none;
  transition: width 160ms var(--ease), opacity 120ms var(--ease); }
.gnav-search--min:focus-within { width: 214px; padding: 6px 10px; gap: 6px; justify-content: flex-start; }
.gnav-search--min:focus-within input { width: 160px; opacity: 1; pointer-events: auto; }

/* Overflow "More" menu: a subordinate ⋯ trigger + right-anchored dropdown that
   holds the demoted secondary chrome as full-width menu rows. */
.gnav-more { position: relative; display: inline-flex; }
.gnav-more-btn[aria-expanded="true"] { background: var(--surface-3); color: var(--ink-900); }
.gnav-more-drop { left: auto; right: 0; transform: none; min-width: 232px; }
/* Demoted pills render as full-width, left-aligned menu rows inside the drop
   (grouping/consistency — 100 Things #3/#9). Neutralize their in-bar spacing
   and the space-saving @900px hide (they no longer crowd the bar). */
.gnav-more-drop .gnav-admin,
.gnav-more-drop .gnav-model,
.gnav-more-drop .gnav-backup { width: 100%; margin: 0; justify-content: flex-start; border-color: transparent;
  background: none; border-radius: 8px; padding: 8px 10px; }
.gnav-more-drop .gnav-admin:hover,
.gnav-more-drop .gnav-model:hover,
.gnav-more-drop .gnav-backup:hover { background: var(--surface-3, #eef1f5); border-color: transparent; }
.gnav-more-drop .gnav-model:not([hidden]),
.gnav-more-drop .gnav-backup:not([hidden]) { display: inline-flex !important; }
.gnav-more-drop .gnav-model select { flex: 1; }
.gnav-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink-600); cursor: pointer; }
.gnav-icon:hover { background: var(--surface-3); color: var(--ink-900); }
.gnav-icon svg { width: 18px; height: 18px; }

/* Rail becomes CONTEXTUAL/local nav (Kalbach global-vs-local): global nav +
   utility now live in the top bar, so hide the redundant rail primary nav,
   footer, and the duplicate DataPilot title in the content top bar. */
.etl-file-sidebar .efs-nav { display: none !important; }
.etl-file-sidebar .efs-foot { display: none !important; }
#topNav .etl-topbar-title { display: none !important; }

/* The legacy "Workspace" left rail is now vestigial: global nav + utility moved
   to the top bar, and every view renders its own contextual panel (chat history
   on Ask, Data Files on SQL) INSIDE the content area. It was empty on all 7
   views, so remove it and give content the full width (reclaims ~290px). A
   persistent empty rail is pure cost — nothing to navigate, nothing to earn it. */
#sidebar { display: none !important; }
.content-wrapper { margin-left: 0 !important; width: 100% !important; }

/* ═══ Sidebar profile footer + smooth rail toggle (research-grounded) ═══════
   Bernard: account/profile expected bottom-center of a side panel; DataPilot-
   confirmed: toggle should be LARGE, highly visible, clear icon + smooth anim. */

/* modern profile pinned at the BOTTOM of the side panel */
.ask-profile, .whse-profile, .efs-profile {
  flex: none; display: flex; align-items: center; gap: 10px; width: auto;
  margin: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer; text-align: left;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease); }
.ask-profile:hover, .whse-profile:hover, .efs-profile:hover {
  background: var(--surface-3); border-color: var(--line-strong); box-shadow: 0 1px 8px rgba(15,23,42,.07); }
/* Account chip at the foot of the workspace (dataflow/pipeline/SQL) file sidebar */
.efs-profile { margin: 4px 10px 8px; }
.ask-profile-av {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: linear-gradient(135deg, var(--brand-500,#1f4fd6), var(--brand-700,#4338ca));
  color: #fff; font: 700 13px var(--font-ui); text-transform: uppercase; overflow: hidden; }
.ask-profile-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ask-profile-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ask-profile-name { font: 600 13px var(--font-ui); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-profile-sub { font: 400 11px var(--font-ui); color: var(--ink-500); }
.ask-profile-caret { width: 16px; height: 16px; flex: none; color: var(--ink-400); }

/* My data folders panel as a flex column so its profile pins to the bottom */
.whse-sidebar { display: flex; flex-direction: column; min-height: 0; }
.whse-folder-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* toggle: LARGE + visible + clear chevron icon */
.ask-rail-toggle { width: 34px !important; height: 34px !important; border-radius: 9px !important;
  color: var(--ink-600) !important; font-size: 0 !important; }
.ask-rail-toggle:hover { background: var(--brand-50) !important; color: var(--brand-600) !important; border-color: var(--brand-200) !important; }
.ask-rail-toggle svg { width: 18px; height: 18px; }

/* Reopen toggle sits at the SAME top-left spot as the collapse toggle, so the
   button never moves between open/closed — toggle in place, no mouse movement.
   The collapse toggle stays IN-FLOW (first child of .ask-rail-head → naturally
   at the head's top-left ~16,16, and scoped INSIDE .ask-rail so it never leaks
   onto other views). The reopen toggle is absolute at the same (16,16). */
.ask-rail-toggle { flex: none; }
.ask-rail-open { width: 34px !important; height: 34px !important; padding: 0 !important;
  left: 16px !important; top: 16px !important; border: 1px solid var(--line) !important;
  border-radius: 9px !important; background: var(--surface) !important; color: var(--ink-600) !important;
  box-shadow: var(--shadow-1) !important; }
.ask-rail-open:hover { background: var(--brand-50) !important; color: var(--brand-600) !important; border-color: var(--brand-200) !important; }
.ask-shell.rail-collapsed .ask-rail-open { display: inline-flex !important; align-items: center; justify-content: center; }
.ask-rail-open svg { width: 18px; height: 18px; flex: none; }
.ask-rail-open-label { line-height: 1; }

/* SMOOTH open/close — animate flex-basis + fade instead of display:none */
.ask-rail { transition: flex-basis 240ms var(--ease), opacity 200ms var(--ease), padding 240ms var(--ease); }
.ask-shell.rail-collapsed .ask-rail {
  display: flex !important; flex: 0 0 0 !important; opacity: 0; overflow: hidden;
  pointer-events: none; border-right: 0; }

/* Deep research composer button (replaces Build dashboard + Compare styles) */
.ask-btn.ask-deep { display: inline-flex; align-items: center; gap: 5px; }
/* "Build an idea" sits beside Deep research in the composer; armed state uses
   the same shading language as the deep toggle (active = filled, not colour
   alone — a label is always present). */
.ask-btn.ask-idea { display: inline-flex; align-items: center; gap: 5px; }
.ask-btn.ask-idea.ask-idea-on { background: var(--brand-500, #1f4fd6); color: #fff; }
/* The explicit display above beats the [hidden] attribute's UA display:none —
   the "hidden" Deep-research button kept rendering. Guard it. */
.ask-btn.ask-deep[hidden] { display: none !important; }
.ask-btn.ask-deep.ask-deep-on {
  background: var(--brand-50) !important; color: var(--brand-600) !important;
  border-color: var(--brand-300) !important; box-shadow: 0 0 0 2px var(--brand-100, #e0e7ff); }

/* Honesty line now sits UNDER the subtitle — give it breathing room (not too
   close above, clear gap before the example chips). */
.ask-empty .ask-honesty { margin: 14px 0 26px !important; }

/* Safeguard: the My data folder tree must SCROLL inside the capped sidebar, never
   balloon the page (Ask-style overflow). Cap the sidebar to the area below the
   top bar. */
/* Cap the folders panel to the space BELOW the page header ("Your files &
   tables" + toolbar, ~120px) plus the top bar — otherwise an expanded folder
   tree pushes the panel (and its profile footer) below the fold and forces a
   scroll. The tree itself scrolls internally (overflow-y:auto), keeping the
   profile pinned + visible. */
.whse-sidebar { max-height: calc(100vh - 200px) !important; }
.whse-folder-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.whse-folder-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* My Data = app-layout: the PAGE never scrolls (no page-level scrollbar that
   looks like nothing is overflowing). The header stays fixed; the folders panel
   and the file area each scroll INTERNALLY only when their own content exceeds.
   CRITICAL: scope to :not([hidden]) so display:flex never overrides the [hidden]
   attribute (hideAskView / view-switching set .hidden to hide a view — without
   this guard the flex !important kept every whse-workspace, incl. the Ask view,
   permanently visible and other tabs' canvases never showed). Also exclude the
   Ask view (.ask-workspace shares the class but has its own layout). */
.whse-workspace:not(.ask-workspace):not([hidden]) { overflow: hidden !important; display: flex !important; flex-direction: column; }
/* Your Apps is exempt from the overflow lock — goals + usage run taller than
   a small window (same escape Share pages needed; must sit AFTER the lock). */
.whse-workspace.mon-workspace:not([hidden]) {
  overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  display: block !important; }
/* Columns size to their CONTENT (align-items:start) — stretch forced both the
   folders panel and the files card to full viewport height even when nearly
   empty. Each card instead CAPS at the viewport and scrolls internally past it. */
.whse-workspace:not(.ask-workspace):not([hidden]) .whse-layout { flex: 1 1 auto !important; min-height: 0; align-items: start !important; }
/* Only the FILE GRID scrolls — the toolbar (breadcrumb + search + refresh) and
   upload/coverage strips stay pinned at the top of the card. Scrolling the whole
   .whse-main hid the search bar as soon as the list was long. */
.whse-workspace:not(.ask-workspace):not([hidden]) .whse-main {
  min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  /* content-sized, viewport-capped — matches the sidebar's cap */
  max-height: calc(100vh - 200px); }
.whse-workspace:not(.ask-workspace):not([hidden]) .whse-toolbar,
.whse-workspace:not(.ask-workspace):not([hidden]) .whse-uploads,
.whse-workspace:not(.ask-workspace):not([hidden]) .whse-cov-banner { flex: none; }
.whse-workspace:not(.ask-workspace):not([hidden]) #wh_grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding-right: 4px;   /* scrollbar breathing room inside the card */ }
/* Pinned view-switch bar (Files ⇄ Map) sits between toolbar and the scroll area. */
.whse-workspace:not(.ask-workspace):not([hidden]) .md-viewbar { flex: none; }
/* Persistent thin scrollbar (UIUX audit HHS 8:2): the scroll affordance must not
   depend on a lucky partially-cut row at the fold. */
#wh_grid { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.45) transparent; }
#wh_grid::-webkit-scrollbar { width: 8px; }
#wh_grid::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 8px; }
#wh_grid::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.6); }

/* The chat-rail toggle must NEVER appear outside the Ask view (it was leaking to
   the top-left of My Data / other routes). Scope both toggles to the Ask route. */
body:not([data-etl-route="ask"]) #askRailClose,
body:not([data-etl-route="ask"]) #askRailOpen { display: none !important; }

/* ═══ Prep-data FILE RAIL — same style/position as the Ask chat-history rail,
   but lists the user's saved files to bring into a flow. Research-grounded:
   grouped by folder w/ bold labels + indented files (Bernard hierarchy),
   Recent surfaced at top (information scent), search when the list is long
   (Kalbach 7±2 / Larson), single-click to add + selected-state feedback
   (Fitts / DataPilot). Only visible on the dataflow (Prep data) route. ═══ */
.prep-file-rail { display: none; }
body[data-etl-route="dataflow"] .prep-file-rail,
body[data-etl-route="pipeline"] .prep-file-rail {
  display: flex; flex-direction: column; position: fixed; left: 0; top: var(--gnav-h);
  bottom: 0; width: 340px; z-index: 45; background: var(--surface-2); border-right: 1px solid var(--line);
  min-height: 0; }
body[data-etl-route="dataflow"].prep-rail-collapsed .prep-file-rail,
body[data-etl-route="pipeline"].prep-rail-collapsed .prep-file-rail { display: none; }
/* shift the flow toolbar + canvas right to make room for the rail */
body[data-etl-route="dataflow"]:not(.prep-rail-collapsed) .content-wrapper,
body[data-etl-route="pipeline"]:not(.prep-rail-collapsed) .content-wrapper { margin-left: 340px !important; width: calc(100% - 340px) !important; }

.prep-rail-head { padding: 14px 14px 8px; flex: none; display: flex; align-items: center; gap: 10px; }
.prep-rail-head .ask-rail-toggle { flex: none; }
.prep-rail-title { font: 700 13px var(--font-ui); color: var(--ink-900); }
.prep-rail-search { padding: 0 12px 10px; flex: none; }
.prep-rail-search input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 10px; font: 400 13px var(--font-ui); color: var(--ink-900); background: var(--surface); outline: none; }
.prep-rail-search input:focus { border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50); }
.prep-file-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 8px 14px; }
.prep-file-empty { padding: 14px; color: var(--ink-500); font: 400 12.5px var(--font-ui); text-align: center; }
.prep-file-group { font: 700 10.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-400); padding: 12px 8px 4px; }
.prep-file-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid transparent;
  border-radius: 8px; cursor: pointer; color: var(--ink-800); font: 500 13px var(--font-ui);
  transition: background 120ms var(--ease), border-color 120ms var(--ease); }
.prep-file-item:hover { background: var(--surface-3); }
.prep-file-item.is-added { background: var(--brand-50); border-color: var(--brand-200); color: var(--accent-text-strong); }
/* Currently-OPEN record — a clear, visible active state so the user always knows
   which dataflow/pipeline is loaded on the canvas (grounded: ui-ux-bot /
   Information Architecture for the Web and Beyond — visible active state +
   feedback; selection must NOT rely on colour alone, so this uses THREE cues:
   tinted background, a left accent bar, and bold text). Tokens flip in dark
   (--brand-50 → translucent blue), so it stays visible in both themes. */
.prep-file-item.is-active { background: var(--brand-50); border-color: var(--brand-200);
  color: var(--accent-text-strong); font-weight: 700; }
.prep-file-item.is-active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-500); }
.prep-file-item.is-active .prep-file-ico { color: var(--brand-500); }
.prep-file-ico { flex: none; width: 15px; height: 15px; color: var(--ink-500); }
.prep-file-item.is-added .prep-file-ico { color: var(--brand-500); }
.prep-file-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prep-file-check { flex: none; color: var(--brand-500); font-size: 13px; }
/* reopen button when collapsed — same look/spot as the Ask rail toggle */
/* The sidebar toggle now lives INLINE in the flow toolbar, where the login pill
   used to be (that pill is hidden on the flow routes — its identity moved into
   the rail's profile footer). Always visible on the flow routes; it toggles the
   rail open/closed. */
.prep-rail-open { display: none; width: 32px; height: 32px; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink-700);
  cursor: pointer; flex: none; }
/* Show the toolbar toggle ONLY when the rail is collapsed — when open, the rail
   has its own close button in the head, so a toolbar copy is a duplicate. */
body[data-etl-route="dataflow"].prep-rail-collapsed .prep-rail-open,
body[data-etl-route="pipeline"].prep-rail-collapsed .prep-rail-open { display: inline-flex; }
.prep-rail-open:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }
.prep-rail-open svg { width: 18px; height: 18px; }
/* Hide the login pill on the flow routes (replaced by the toggle above). */
body[data-etl-route="dataflow"] #googleLoginSlot,
body[data-etl-route="pipeline"] #googleLoginSlot { display: none !important; }

/* Prep-rail profile footer — same treatment as the Ask/My-data rail profile. */
.prep-file-rail .prep-profile { flex: none; display: flex; align-items: center; gap: 10px; margin-top: auto;
  padding: 12px 12px; border-top: 1px solid var(--line); cursor: pointer; background: var(--surface-2);
  transition: background 120ms var(--ease); }
.prep-file-rail .prep-profile:hover { background: var(--surface-3); }
.prep-profile-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font: 700 14px var(--font-ui); color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); }
.prep-profile-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.prep-profile-meta { flex: 1 1 auto; min-width: 0; }
.prep-profile-name { display: block; font: 600 13px var(--font-ui); color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prep-profile-sub { display: block; font: 400 11px var(--font-ui); color: var(--ink-500); }
.prep-profile-chev { flex: none; color: var(--ink-400); }

/* Prep-rail: "+ New" button + per-item ⋯ menu + shared popup. */
.prep-new-btn { margin-left: auto; flex: none; border: 1px solid var(--brand-200); background: var(--brand-50);
  color: var(--brand-700); font: 600 12px var(--font-ui); border-radius: 8px; padding: 5px 10px; cursor: pointer;
  transition: background 120ms var(--ease); }
.prep-new-btn:hover { background: var(--brand-100); }
.prep-file-item { position: relative; }
.prep-file-menu { flex: none; opacity: 0; border: none; background: transparent; color: var(--ink-500);
  cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 5px; border-radius: 6px; }
.prep-file-item:hover .prep-file-menu, .prep-file-menu:focus-visible { opacity: 1; }
.prep-file-menu:hover { background: var(--surface); color: var(--ink-900); }
.prep-menu { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-2); padding: 5px; min-width: 132px; display: flex; flex-direction: column; }
.prep-menu-item { text-align: left; border: none; background: transparent; color: var(--ink-800);
  font: 500 13px var(--font-ui); padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.prep-menu-item:hover { background: var(--surface-3); }
.prep-menu-item.is-danger { color: #dc2626; }
.prep-menu-item.is-danger:hover { background: #fef2f2; }
/* Create menu: two-line items ("Dataflow" / "Pipeline" + when-to-use) */
.prep-menu--create { min-width: 244px; padding: 6px; gap: 2px; }
.prep-menu-item.has-sub { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 11px; }
.prep-menu-item.has-sub .prep-menu-label { font: 600 13px var(--font-ui); color: var(--ink-900); }
.prep-menu-item.has-sub .prep-menu-sub { font: 400 11.5px var(--font-ui); color: var(--ink-500); line-height: 1.35; }
.prep-menu-item.has-sub:hover .prep-menu-sub { color: var(--ink-600, var(--ink-500)); }

/* ─── Prep-data flow toolbar layout ───────────────────────────────────────
   Remove the split-screen (reference panel) button; CENTER the Schedule + Run
   Flow group; RIGHT-align Collaborate. Keep #topNav full-width even when the
   file rail is open (counter the content-wrapper shift) so these actions never
   move when the rail opens/closes. */
body[data-etl-route="dataflow"] #split_toggle,
body[data-etl-route="pipeline"] #split_toggle { display: none !important; }

body[data-etl-route="dataflow"] #topNav,
body[data-etl-route="pipeline"] #topNav { position: relative; }
body[data-etl-route="dataflow"]:not(.prep-rail-collapsed) #topNav,
body[data-etl-route="pipeline"]:not(.prep-rail-collapsed) #topNav {
  margin-left: -340px !important; width: calc(100% + 340px) !important; }

body[data-etl-route="dataflow"] #topNav .top-nav-inner,
body[data-etl-route="pipeline"] #topNav .top-nav-inner { position: static; }
body[data-etl-route="dataflow"] #topNav .pipeline-run,
body[data-etl-route="pipeline"] #topNav .pipeline-run {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
body[data-etl-route="dataflow"] #topNav .collab-btn,
body[data-etl-route="pipeline"] #topNav .collab-btn {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

/* Round-3: the LEFT cluster (view identity + Add step) is placed absolutely so
   it sits in the VISIBLE toolbar AFTER the activities sidebar — otherwise the
   #topNav margin-left:-340px (which lets the centered Run cluster centre on the
   viewport) would tuck this cluster behind the 340px rail. Mirrors the absolute
   placement of the centered Run cluster + right-aligned Collaborate. When the
   rail is collapsed there's no sidebar to clear, so it hugs the left edge. */
body[data-etl-route="dataflow"] #topNav .nav-left,
body[data-etl-route="pipeline"] #topNav .nav-left {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  flex: 0 0 auto; width: auto; gap: 10px; z-index: 8;
}
body[data-etl-route="dataflow"]:not(.prep-rail-collapsed) #topNav .nav-left,
body[data-etl-route="pipeline"]:not(.prep-rail-collapsed) #topNav .nav-left {
  left: 356px;
}
/* When the rail is COLLAPSED the reopen button appears inline at the toolbar
   left — but .nav-left is absolutely pinned at left:20px too, so the button and
   the "Dataflow"/"Pipeline" identity stacked on top of each other. Give the
   button the far-left slot and shift the identity right to clear it. */
body[data-etl-route="dataflow"].prep-rail-collapsed #topNav .prep-rail-open,
body[data-etl-route="pipeline"].prep-rail-collapsed #topNav .prep-rail-open {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%); margin: 0; z-index: 9;
}
body[data-etl-route="dataflow"].prep-rail-collapsed #topNav .nav-left,
body[data-etl-route="pipeline"].prep-rail-collapsed #topNav .nav-left {
  left: 66px;
}
/* Compact toolbar identity: drop the one-line description in this dense toolbar
   — the coloured icon + kind title are self-evident (ui-ux-bot F1) and the bar
   stays calm (F5 clutter reduction). Kept in the DOM for its aria/label value. */
body[data-etl-route="dataflow"] #topNav .pl-canvas-desc,
body[data-etl-route="pipeline"] #topNav .pl-canvas-desc { display: none; }

/* Share pages: the secondary flow toolbar (#topNav) isn't relevant there. */
body[data-etl-route="mypages"] #topNav { display: none !important; }

/* ── Top-nav "Data tools" dropdown (4-item condense per Garrett) ── */
.gnav-tools { position: relative; display: inline-flex; }
.gnav-tools-btn { display: inline-flex; align-items: center; gap: 5px; }
.gnav-caret { transition: transform 120ms var(--ease); opacity: .7; }
.gnav-tools-btn[aria-expanded="true"] .gnav-caret { transform: rotate(180deg); }
/* active when the current route is one of the tools */
body[data-etl-route="dataflow"] .gnav-tools-btn,
body[data-etl-route="pipeline"] .gnav-tools-btn,
body[data-etl-route="sql"] .gnav-tools-btn,
body[data-etl-route="notebook"] .gnav-tools-btn,
body[data-etl-route="triggers"] .gnav-tools-btn {
  background: var(--brand-50); color: var(--accent-text-strong); border-color: var(--brand-200);
}
.gnav-drop {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  min-width: 220px; z-index: 60; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface, #fff); border: 1px solid var(--line, #e3e8ee);
  border-radius: 12px; box-shadow: var(--shadow-2, 0 10px 30px rgba(16,24,40,.16));
}
.gnav-drop[hidden] { display: none; }
.gnav-drop-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: none; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
  padding: 8px 10px; color: var(--ink-800, #1d2939); font: 600 13.5px var(--font-ui); width: 100%;
}
.gnav-drop-item small { font: 400 11.5px var(--font-ui); color: var(--ink-400, #98a2b3); }
.gnav-drop-item:hover { background: var(--surface-3, #eef1f5); }

/* Workspace top-nav "Upgrade" pill — plan/upgrade reachable from the app (pricing logic
   lives in-app too, not just the landing). Distinct/brand color (Von-Restorff, 134287). */
.gnav-upgrade { display: inline-flex; align-items: center; padding: 6px 13px; margin-right: 6px;
  border-radius: 8px; background: var(--brand-500, #2563eb); color: #fff; font: 600 13px var(--font-ui);
  text-decoration: none; white-space: nowrap; transition: filter 120ms var(--ease); }
.gnav-upgrade:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }

/* Global answer-model selector in the top nav (Pro+). Minimal pill next to the
   plan pill; neutral by default so it doesn't compete with the plan badge. */
.gnav-model { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; padding: 0 6px 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2, #f8fafc);
  color: var(--ink-500, #64748b); white-space: nowrap; transition: border-color 120ms var(--ease), color 120ms var(--ease); }
/* `display:inline-flex` above beats the `hidden` attribute, so on Free the JS
   left it hidden but the empty pill (icon, no options) still showed. State it. */
.gnav-model[hidden] { display: none !important; }

/* Admin-only cloud-backup toggle in the top nav. */
.gnav-backup { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2, #f8fafc); color: var(--ink-500, #64748b);
  font: 600 12px var(--font-ui, system-ui); cursor: pointer; white-space: nowrap;
  transition: background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease); }
.gnav-backup:hover { border-color: var(--brand-300, #93b4f6); color: var(--ink-700, #334155); }
.gnav-backup.is-on { background: rgba(4,120,87,0.10); border-color: rgba(4,120,87,0.4);
  color: var(--success, #047857); }
.gnav-backup svg { width: 14px; height: 14px; }
.gnav-backup[hidden] { display: none !important; }
.gnav-backup-lock { margin-left: 1px; opacity: .85; }
.gnav-backup-lock[hidden] { display: none !important; }
.gnav-backup.is-locked { color: var(--ink-400, #94a3b8); }
.gnav-backup.is-locked:hover { border-color: var(--brand-300, #93b4f6); color: var(--ink-600, #475569); }
@media (max-width: 900px) { .gnav-backup { display: none; } }

/* ── Token-usage meter (all plans) ─────────────────────────────────────────
   A compact horizontal progress bar + exact "used / cap" count in the nav.
   Fills smoothly (width transition) so a jump after an ask reads as filling. */
.gnav-usage { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2, #f8fafc); color: var(--ink-600, #475569);
  white-space: nowrap; cursor: default; }
.gnav-usage[hidden] { display: none !important; }
.gnav-usage-track { position: relative; width: 84px; height: 6px; flex: none;
  border-radius: 999px; background: var(--line, #e3e8ee); overflow: hidden; }
.gnav-usage-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  border-radius: 999px; background: var(--brand-500, #2563eb);
  transition: width 600ms var(--ease, cubic-bezier(.4,0,.2,1)), background 200ms var(--ease); }
.gnav-usage-txt { font: 600 12px var(--font-ui, system-ui); color: var(--ink-700, #334155);
  font-variant-numeric: tabular-nums; }
/* State cues: amber near the cap, red when used up. */
.gnav-usage.is-warn .gnav-usage-fill { background: var(--warn, #d97706); }
.gnav-usage.is-warn .gnav-usage-txt { color: var(--warn, #b45309); }
.gnav-usage.is-full .gnav-usage-fill { background: var(--danger, #dc2626); }
.gnav-usage.is-full .gnav-usage-txt { color: var(--danger, #dc2626); }
/* Unlimited (owner/admin): no meter track, just the count + label. */
.gnav-usage.is-unlimited .gnav-usage-track { display: none; }
.gnav-usage.is-unlimited .gnav-usage-txt { color: var(--ink-600, #475569); }
.gnav-usage-up { margin-left: 2px; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-50, #eef2ff); color: var(--brand-600, #1d4ed8);
  font: 700 11px var(--font-ui, system-ui); text-decoration: none; }
.gnav-usage-up[hidden] { display: none !important; }
.gnav-usage.is-full .gnav-usage-up { background: rgba(220,38,38,.10); color: var(--danger, #dc2626); }
.gnav-usage-up:hover { filter: brightness(.96); }
html[data-theme="dark"] .gnav-usage-track { background: rgba(148,163,184,.22); }
/* Compact for the centered bar: slimmer track, and DROP the inline "Upgrade"
   link — the always-visible plan button sits right beside it, so a second
   identical CTA is redundant clutter (F5 clutter reduction / de-duplication).
   The plan button remains the single upgrade entry point. */
.gnav-usage-track { width: 52px; }
.gnav-usage-up { display: none !important; }
/* Keep the right rail light enough that the three-region grid stays centered on
   narrower desktops: below 1200px hide the numeric read-out (the fill bar is the
   at-a-glance status; exact "used / cap" stays in the tooltip — F12 visibility
   of system status preserved on hover). */
@media (max-width: 1200px) { .etl-gnav .gnav-usage-txt { display: none; } }
/* Narrow nav: keep the exact count (primary), drop the bar; never overflow. */
@media (max-width: 900px) {
  .gnav-usage { padding: 4px 8px; margin-right: 4px; }
  .gnav-usage-track { display: none; }
  .gnav-usage-txt { display: inline !important; }
}

/* Free-tier upgrade prompt for the locked cloud-backup button. */
.backup-upsell { position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; }
.backup-upsell[hidden] { display: none; }
.backup-upsell-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.backup-upsell-card { position: relative; z-index: 1; width: min(92vw, 380px);
  background: var(--surface, #fff); border: 1px solid var(--line, #e3e8ee);
  border-radius: 16px; padding: 26px 24px 22px; text-align: center;
  box-shadow: 0 24px 60px rgba(15,23,42,.28); }
.backup-upsell-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px;
  border: 0; background: transparent; color: var(--ink-400, #94a3b8); font-size: 15px;
  cursor: pointer; border-radius: 8px; }
.backup-upsell-x:hover { background: var(--surface-2, #f6f9fc); color: var(--ink-700, #334155); }
.backup-upsell-ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: var(--brand-50, #eef2ff); color: var(--brand-500, #2563eb); }
.backup-upsell-card h3 { margin: 0 0 8px; font: 700 18px var(--font-ui, system-ui); color: var(--ink-900, #1a1f36); }
.backup-upsell-card p { margin: 0 0 18px; font: 400 13.5px/1.5 var(--font-ui, system-ui); color: var(--ink-700, #425466); }
.backup-upsell-cta { display: inline-flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box; padding: 11px 16px; border-radius: 10px;
  background: linear-gradient(180deg, #2858e0 0%, #1f4fd6 100%); color: #fff;
  font: 600 14px var(--font-ui, system-ui); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.backup-upsell-cta:hover { background: linear-gradient(180deg, #1f4fd6 0%, #1438a8 100%); }
.backup-upsell-anx { margin-top: 10px; font: 400 11.5px var(--font-ui, system-ui); color: var(--ink-500, #64748b); }

/* ── Plans popup (in-workspace upgrade; replaces /pricing) ──────────────── */
.plans-ov { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; }
.plans-ov[hidden] { display: none; }
.plans-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.plans-card { position: relative; z-index: 1; width: min(94vw, 920px); max-height: 92vh; overflow: auto;
  background: var(--surface, #fff); border-radius: 18px; padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.plans-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-500, #64748b); font-size: 16px; cursor: pointer; }
.plans-x:hover { background: var(--surface-2, #f1f5f9); }
.plans-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.plans-head h3 { margin: 0; font: 700 19px var(--font-ui, system-ui); color: var(--ink-900, #1a1f36); }
.plans-bill { display: inline-flex; background: var(--surface-2, #eef2f7); border-radius: 999px; padding: 3px; }
.plans-bill button { border: 0; background: transparent; color: var(--ink-500, #64748b); font: 600 12.5px/1 var(--font-ui); padding: 7px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.plans-bill button.on { background: var(--brand-500, #2563eb); color: #fff; }
.plans-save { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(16, 185, 129, .16); color: #059669; }
.plans-bill button.on .plans-save { background: rgba(255, 255, 255, .22); color: #fff; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.plan-tier { position: relative; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 16px 15px; display: flex; flex-direction: column; }
/* Current plan: a QUIET marker (the badge + "current plan" footer carry it) — not
   the modal's loudest object. The Recommended upgrade gets the emphasis instead. */
.plan-tier.is-current { border-color: var(--border, #e2e8f0); background: var(--surface-2, #f8fafc); }
.plan-tier.is-reco { border: 1.6px solid var(--brand-500, #2563eb); box-shadow: 0 10px 26px rgba(37, 99, 235, .16); }
.plan-reco { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--brand-500, #2563eb); color: #fff; font: 700 10px/1.6 var(--font-ui); padding: 2px 11px; border-radius: 999px; letter-spacing: .03em; }
.plan-tier.is-premium { border-color: var(--border, #e2e8f0); }
.plan-reassure { margin-top: 7px; text-align: center; font: 400 10.5px/1.3 var(--font-ui); color: var(--ink-500, #64748b); }
.plan-name { font: 700 15px var(--font-ui); color: var(--ink-900, #1a1f36); display: flex; align-items: center; gap: 8px; }
.plan-badge { font: 700 9.5px/1.6 var(--font-ui); padding: 1px 7px; border-radius: 999px; background: var(--brand-500, #2563eb); color: #fff; letter-spacing: .03em; }
.plan-price { font: 800 24px var(--font-ui); color: var(--ink-900, #1a1f36); margin: 8px 0 0; }
.plan-sub { font: 500 11.5px var(--font-ui); color: var(--ink-500, #64748b); margin-top: 2px; }
.plan-feats { list-style: none; margin: 12px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.plan-feats li { position: relative; padding-left: 20px; font: 400 12.5px/1.4 var(--font-ui); color: var(--ink-700, #334155); }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #059669; font-weight: 800; }
.plan-cta { width: 100%; border: 0; border-radius: 10px; background: var(--brand-500, #2563eb); color: #fff; font: 700 13px var(--font-ui); padding: 11px 12px; cursor: pointer; }
.plan-cta:hover { background: var(--brand-600, #1d4ed8); }
.plan-cta:disabled { opacity: .7; cursor: default; }
/* One dominant CTA: Pro (the recommended upgrade) keeps the solid brand fill;
   Premium is a quieter outlined secondary so attention isn't split. */
.plan-cta.is-premium-cta { background: transparent; color: #8a6a1c; border: 1.5px solid #cdaf5e; }
.plan-cta.is-premium-cta:hover { background: rgba(205, 175, 94, .12); }
.plan-cur { text-align: center; font: 700 12.5px var(--font-ui); color: var(--brand-600, #2563eb); padding: 11px 0; }
.plan-lower { text-align: center; font: 500 11.5px var(--font-ui); color: var(--ink-400, #94a3b8); padding: 11px 0; }
.plans-foot { margin-top: 14px; text-align: center; font: 400 11.5px var(--font-ui); color: var(--ink-500, #64748b); }
/* Comfortable touch/hit targets — Fitts's Law: larger targets are acquired faster
   with fewer errors (ledger doc_37a1e2819ad1, Fitts-Law.pdf). The close ✕ and the
   billing toggle were ~30px; the primary CTA ~40px — raised to a ≥44px hit area. */
.plans-x { width: 44px; height: 44px; }
.plan-cta { min-height: 44px; }
.plans-bill button { min-height: 40px; }
/* Visible focus indicator ≥3:1 vs the adjacent surface — WCAG 1.4.11 non-text
   contrast (ledger doc_fa5c569aecc3): brand-600 on the modal surface clears 3:1 in
   both themes. Keyboard users get an unambiguous ring the UA default doesn't grant. */
.plans-card .plans-x:focus-visible,
.plans-card .plans-bill button:focus-visible,
.plans-card .plan-cta:focus-visible {
  outline: 3px solid var(--brand-600, #1d4ed8); outline-offset: 2px; border-radius: 10px;
}
/* No entrance animation is used (hard hidden-toggle), but guard motion defensively
   for reduced-motion users (Heer2007 animated-transitions: animation must be optional). */
@media (prefers-reduced-motion: reduce) { .plans-ov, .plans-card { animation: none !important; transition: none !important; } }
@media (max-width: 720px) { .plans-grid { grid-template-columns: 1fr; } }

/* ── Custom-domain wizard modal + Share-pages button ─────────────────────── */
.dw-card { width: min(94vw, 620px); }
.dw-sub { margin: 4px 0 16px; font: 400 13px/1.5 var(--font-ui, system-ui); color: var(--ink-600, #475569); }
.dw-step { border-top: 1px solid var(--border, #e2e8f0); padding: 16px 0 4px; }
.dw-step:first-of-type { border-top: none; padding-top: 0; }
.dw-step-h { display: flex; align-items: center; gap: 9px; font: 700 13.5px var(--font-ui); color: var(--ink-900, #1a1f36); margin-bottom: 10px; }
.dw-step-n { width: 22px; height: 22px; border-radius: 999px; background: var(--brand-500, #2563eb); color: #fff; font: 700 12px/22px var(--font-ui); text-align: center; }
.dw-hostrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dw-in { flex: 0 0 110px; padding: 9px 11px; border: 1px solid var(--border, #cbd5e1); border-radius: 9px; font: 500 13px var(--font-ui); background: var(--surface, #fff); color: var(--ink-900, #1a1f36); }
.dw-in-root { flex: 1 1 180px; }
.dw-dot { color: var(--ink-500, #64748b); font-weight: 700; }
.dw-add { padding: 9px 18px; border: 0; border-radius: 9px; background: var(--brand-500, #2563eb); color: #fff; font: 700 13px var(--font-ui); cursor: pointer; }
.dw-add:disabled { opacity: .5; cursor: default; }
.dw-preview { margin-top: 8px; font: 400 12.5px var(--font-ui); color: var(--ink-600, #475569); }
.dw-msg { margin-top: 6px; font: 500 12.5px var(--font-ui); color: var(--ink-600, #475569); min-height: 1em; }
.dw-msg.ok { color: #059669; } .dw-msg.err { color: #dc2626; }
.dw-empty { font: 400 12.5px var(--font-ui); color: var(--ink-500, #64748b); }
.dw-item { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 13px 14px; margin-bottom: 10px; }
.dw-item-head { display: flex; align-items: center; gap: 9px; }
.dw-item-host { font: 700 13.5px var(--font-ui); color: var(--brand-600, #2563eb); text-decoration: none; }
.dw-sp { flex: 1; }
.dw-badge { font: 700 10px var(--font-ui); padding: 2px 9px; border-radius: 999px; }
.dw-pending { background: #fef3c7; color: #b45309; } .dw-verified, .dw-active { background: #dcfce7; color: #059669; }
.dw-verify { padding: 6px 12px; border: 0; border-radius: 8px; background: var(--brand-500, #2563eb); color: #fff; font: 700 12px var(--font-ui); cursor: pointer; }
.dw-rm { padding: 6px 11px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; background: transparent; color: var(--ink-500, #64748b); font: 600 12px var(--font-ui); cursor: pointer; }
.dw-rec { margin: 11px 0; padding: 11px 12px; background: var(--surface-2, #f8fafc); border-radius: 9px; }
.dw-rec-h { font: 600 12px var(--font-ui); color: var(--ink-700, #334155); margin-bottom: 7px; }
.dw-rec-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font: 400 12.5px var(--font-ui); color: var(--ink-700, #334155); align-items: center; }
.dw-rec-grid span { color: var(--ink-500, #64748b); }
.dw-rec-grid b { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; }
.dw-copy { margin-left: 8px; padding: 1px 8px; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; background: var(--surface, #fff); color: var(--ink-600, #475569); font: 600 10.5px var(--font-ui); cursor: pointer; }
.dw-item-page { margin-top: 11px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dw-item-page label { font: 500 12px var(--font-ui); color: var(--ink-600, #475569); }
.dw-pagesel { flex: 1 1 200px; padding: 7px 9px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; font: 500 12.5px var(--font-ui); background: var(--surface, #fff); color: var(--ink-900, #1a1f36); }
.dw-item-msg { min-height: 0; }
.dw-item-msg:empty { display: none; }
.dw-studio { display: block; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border, #e2e8f0); border-radius: 11px; text-decoration: none; font: 600 13px var(--font-ui); color: var(--ink-800, #1e293b); background: var(--surface-2, #f8fafc); }
.dw-studio:hover { border-color: var(--brand-400, #60a5fa); }
/* Share-pages "Custom domain" button (+ Premium lock) */
.etl-domain-btn.is-locked { color: var(--ink-500, #64748b); }
.etl-domain-btn .etl-dm-pro { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--brand-50, #eef2ff); color: var(--brand-600, #2563eb); font: 700 10px var(--font-ui); letter-spacing: .02em; }
/* ── Team & seats popup ──────────────────────────────────────────────────── */
.tp-card { width: min(94vw, 520px); }
.tp-seats { font: 600 13px var(--font-ui); color: var(--ink-500, #64748b); margin-left: 8px; }
.tp-sub { margin: 4px 0 16px; font: 400 13px/1.5 var(--font-ui); color: var(--ink-600, #475569); }
.tp-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.tp-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; font: 500 13.5px var(--font-ui); }
.tp-email { flex: 1; color: var(--ink-900, #1a1f36); }
.tp-pending { color: var(--ink-500, #64748b); }
.tp-role { font: 600 10px var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--brand-600, #2563eb); background: var(--brand-50, #eff6ff); border-radius: 999px; padding: 3px 9px; }
.tp-rm { border: 0; background: transparent; color: var(--ink-400, #94a3b8); cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; }
.tp-rm:hover { color: #dc2626; background: rgba(220,38,38,.08); }
.tp-invite { display: flex; gap: 8px; }
.tp-invite input { flex: 1; padding: 10px 13px; border: 1px solid var(--border, #cbd5e1); border-radius: 10px; font: 500 13.5px var(--font-ui); background: var(--surface, #fff); color: var(--ink-900, #1a1f36); }
.tp-invite button { padding: 10px 18px; border: 0; border-radius: 10px; background: var(--brand-500, #2563eb); color: #fff; font: 700 13px var(--font-ui); cursor: pointer; }
.tp-invite button:disabled { opacity: .5; cursor: default; }
.tp-msg { margin-top: 10px; font: 500 12.5px var(--font-ui); color: var(--ink-600, #475569); }
.tp-msg:empty { display: none; }
.tp-msg a, .tp-upsell a { color: var(--brand-600, #2563eb); font-weight: 700; }
.tp-upsell { margin-top: 10px; font: 500 13px var(--font-ui); color: var(--ink-600, #475569); }



/* ── Schedules (triggers) lock — Free plan ─────────────────────────────────
   Scheduling is a paid feature; the backend returns 402 upgrade_required.
   This is the pre-emptive UI lock so a Free user sees "premium" BEFORE the
   402. Reuses the cloud-backup vocabulary: a line-style padlock glyph on the
   entry points + the shared `.backup-upsell` modal (so light/dark parity and
   visual language are identical). Entry points stay clickable (→ upsell), so
   they're dimmed slightly, never fully disabled. */
.sched-lock { width: 12px; height: 12px; flex: 0 0 auto; margin-left: 5px;
  opacity: .82; vertical-align: middle; pointer-events: none; }
.is-sched-locked { position: relative; }
.gnav-drop-item.is-sched-locked { color: var(--ink-500, #64748b); padding-right: 60px; }
/* In the Data-tools dropdown, make "Schedules" clearly read as a locked/upgrade
   row: dim the title, pin the padlock to the right, and tag it "Pro". */
.gnav-drop-item.is-sched-locked > span { opacity: .75; }
.gnav-drop-item.is-sched-locked .sched-lock { color: var(--brand-500, #2563eb);
  position: absolute; right: 40px; top: 14px; margin: 0; opacity: 1; }
.gnav-drop-item.is-sched-locked::after { content: "Founder"; position: absolute;
  right: 10px; top: 10px; padding: 1px 7px; border-radius: 999px;
  background: var(--brand-50, #eef2ff); color: var(--brand-600, #2563eb);
  font: 700 10px/1.5 var(--font-ui); letter-spacing: .02em; }
.etl-rail-btn.is-sched-locked .sched-lock,
.new-btn.is-sched-locked .sched-lock { color: var(--brand-500, #2563eb); }
/* The workspace "+ New schedule" is a filled primary button — keep the lock
   white so it reads on the brand fill (currentColor inherits the button ink). */
.btn-primary.is-sched-locked .sched-lock,
.create-trigger-button.is-sched-locked .sched-lock { color: currentColor; opacity: .9; }
/* Collaborate (top-nav) locked on Free — padlock + "Pro" tag, decorative avatars
   dimmed so the button clearly reads as an upgrade entry point (matches the
   scheduling lock's visual language). */
.collab-btn.is-collab-locked { position: relative; }
/* The padlock + "Pro" pill carry the locked state; avoid dimming the decorative
   avatars (reduced opacity reads as "disabled/broken" — an ambiguous cue). */
.collab-btn.is-collab-locked .sched-lock { color: currentColor; opacity: .95; }
.collab-btn.is-collab-locked::after { content: "Founder"; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px; background: var(--brand-50, #eef2ff);
  color: var(--brand-600, #2563eb); font: 700 10px/1.5 var(--font-ui);
  letter-spacing: .02em; }
/* Pipeline creation locked on Free — the "Pipelines" section "+ New" button and
   the "+ New" menu's Pipeline row. Reuses the shared padlock + "Pro" pill. */
.new-btn.is-pipeline-locked .sched-lock { color: var(--brand-500, #2563eb); }
.prep-menu-item.is-locked { color: var(--ink-500, #64748b); }
.prep-menu-item.is-locked .prep-menu-label { display: inline-flex; align-items: center; gap: 6px; }
.prep-menu-item.is-locked .sched-lock { color: var(--brand-500, #2563eb); }
.prep-menu-pro { padding: 1px 7px; border-radius: 999px; background: var(--brand-50, #eef2ff);
  color: var(--brand-600, #2563eb); font: 700 10px/1.5 var(--font-ui); letter-spacing: .02em; }
/* Connect a Git repo locked on Free — the "＋ Connect a Git repo" button on the
   My data page. Reuses the shared padlock + "Pro" pill vocabulary. */
.md-repo-btn.is-repo-locked { color: var(--ink-500, #64748b); position: relative; }
.md-repo-btn.is-repo-locked .sched-lock { color: var(--brand-500, #2563eb); }
.md-repo-btn.is-repo-locked::after { content: "Founder"; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px; background: var(--brand-50, #eef2ff);
  color: var(--brand-600, #2563eb); font: 700 10px/1.5 var(--font-ui);
  letter-spacing: .02em; }
.gnav-model:hover { border-color: var(--brand-300, #93b4f6); color: var(--ink-700, #334155); }
.gnav-model select { border: 0; outline: none; background: none; cursor: pointer; color: var(--ink-900, #0f172a);
  font: 600 13px var(--font-ui); padding: 6px 2px; -webkit-appearance: none; appearance: none; }
.gnav-model select option { color: var(--ink-900); background: var(--surface); }
@media (max-width: 900px) { .gnav-model { display: none; } }

/* First-run ACTIVATION nudge — Foubert & Gijsbrechts: usage intensity during free
   use predicts conversion; PLG reduction/tunneling: get to first value fast. */
.etl-activate{position:fixed;left:20px;bottom:20px;z-index:1500;width:320px;background:var(--surface,#fff);border:1px solid var(--line-strong,var(--line));border-radius:14px;box-shadow:var(--shadow-2,0 12px 40px rgba(15,23,42,.2));padding:16px 18px;animation:eaIn .28s var(--ease,ease)}
/* Mobile: the floating onboarding card overlaps the composer + bottom tabs (UI/UX-agent:
   no pop-ups over navigation/input). The mobile Ask empty-state already onboards — hide it. */
@media (max-width: 768px){ .etl-activate{ display:none !important; } }
/* Never over a dialog. The plans popup is nested in a container, so its
   z-index is scoped there and this fixed card paints on top of it - covering
   the session box and its button. A nudge that hides the thing you opened is
   worse than no nudge. */
body.plans-open .etl-activate{display:none !important}
@keyframes eaIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.etl-activate .ea-body b{font:600 14px var(--font-ui);color:var(--ink-900)}
.etl-activate p{margin:6px 0 13px;font-size:13px;color:var(--ink-600);line-height:1.5}
.ea-actions{display:flex;gap:8px;align-items:center}
.ea-go{background:var(--brand-500,#2563eb);color:#fff;border:none;border-radius:8px;padding:8px 14px;font:600 13px var(--font-ui);cursor:pointer}
.ea-go:hover{filter:brightness(1.06)}
.ea-skip{background:none;border:none;color:var(--ink-500);font:500 13px var(--font-ui);cursor:pointer}
.ea-skip:hover{color:var(--ink-800)}

/* Plan-based premium treatment in the workspace (ECM status signaling — a paid
   user should SEE their status). Free → blue "Upgrade" pill; paid → gold badge. */
/* Distinct per-tier badges on the Free→Pro(deep indigo)→Premium(metallic gold)
   escalation. Deep saturated indigo + a real gold sheen read premium (Weinschenk
   p.40); dark text on gold keeps high contrast (p.35, no red/blue clash). */
body.plan-pro .gnav-upgrade.premium{background:linear-gradient(135deg,#f6e39a,#e6c25c 45%,#b8862b);color:#241a06;box-shadow:0 3px 12px rgba(184,134,43,.35)}
body.plan-team .gnav-upgrade.premium{background:linear-gradient(135deg,#f6e39a,#e6c25c 45%,#b8862b);color:#241a06;box-shadow:0 3px 12px rgba(184,134,43,.35)}
html[data-theme="dark"] body.plan-pro .gnav-upgrade.premium{background:linear-gradient(135deg,#f6e39a,#e6c25c 45%,#c99a34);color:#241a06}
html[data-theme="dark"] body.plan-team .gnav-upgrade.premium{background:linear-gradient(135deg,#f6e39a,#e6c25c 45%,#c99a34);color:#241a06}
/* Light mode: SOFT pale-gold pill (the full-saturation gold was overwhelming on a light nav). Dark mode unchanged. */
html[data-theme="light"] body.plan-pro .gnav-upgrade.premium,
html[data-theme="light"] body.plan-team .gnav-upgrade.premium{background:linear-gradient(135deg,#fdf4d8,#f2dd99 55%,#e6c25c);color:#7a5a12;box-shadow:0 2px 10px rgba(184,134,43,.20)}
body.plan-pro .etl-gnav{box-shadow:inset 0 -2px 0 rgba(217,119,6,.30)}
body.plan-team .etl-gnav{box-shadow:inset 0 -2px 0 rgba(217,119,6,.30)}

/* "Search your data" typeahead — live dropdown of matching data files. */
.gnav-search{position:relative}
.gnav-ac{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:300px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 44px rgba(15,23,42,.20);z-index:1600;max-height:360px;overflow:auto;padding:5px}
.gnav-ac[hidden]{display:none}
.gnav-ac-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px}
.gnav-ac-item:hover,.gnav-ac-item.sel{background:var(--brand-050,rgba(37,99,235,.09))}
.gnav-ac-item svg{flex:none;color:var(--ink-500,#64748b)}
.gnav-ac-item .fn{font-weight:600;color:var(--ink-900,#0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gnav-ac-item .fd{margin-left:auto;color:var(--ink-500,#64748b);font-size:11.5px;white-space:nowrap;padding-left:8px}
.gnav-ac-empty{padding:10px 12px;color:var(--ink-500,#64748b);font-size:12.5px}
html[data-theme="dark"] .gnav-ac{background:#161c28;border-color:#232b3a}
html[data-theme="dark"] .gnav-ac-item .fn{color:#e8edf4}

/* Owner-only Admin nav pill (revealed by the plan fetch when is_admin). */
.gnav-admin{display:inline-flex;align-items:center;gap:4px;font:600 13px var(--font-ui,system-ui);color:var(--brand-700,#1d4ed8);text-decoration:none;padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:transparent;white-space:nowrap}
.gnav-admin:hover{border-color:var(--brand-500,#1f4fd6);color:var(--brand-500,#1f4fd6)}
/* Dark mode: --brand-700 (#102b85) is a dark navy → ~1.5:1 on the dark nav = near
   invisible (UI/UX-agent compatibility flag). Use the lighter accent text (~8.8:1). */
html[data-theme="dark"] .gnav-admin{color:var(--accent-text,#8fb3ff)}
html[data-theme="dark"] .gnav-admin:hover{color:#c2d6ff;border-color:var(--accent-text,#8fb3ff)}

/* My Data — "Connect a Git repo" modal + connected-repo chip (my_data_lanes.js) */
.md-repo-btn{padding:8px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-weight:600;cursor:pointer}
.md-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal,2000)}
.md-modal-card{background:var(--surface,#fff);color:var(--ink,#0f172a);border-radius:14px;padding:22px;width:min(460px,92vw);max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.md-modal-card label{display:flex;flex-direction:column;gap:5px;font:600 .82rem inherit;color:var(--muted,var(--ink-500,#5f7189))}
.md-modal-card input{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:var(--ink,inherit)}
.md-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;position:sticky;bottom:-22px;background:var(--surface,#fff);padding:12px 0;margin-bottom:-22px}
.rc-subtitle{margin:-4px 0 2px;font-size:.85rem;line-height:1.4;color:var(--muted,var(--ink-500,#5f7189))}
.rc-msg{font-size:.85rem;color:var(--muted,var(--ink-500,#5f7189));min-height:1.2em}
.md-repo-chip{display:inline-flex;gap:6px;align-items:center;font:600 .74rem inherit;color:var(--muted,var(--ink-500,#5f7189));background:var(--surface-2,#f5f7fb);border-radius:999px;padding:3px 9px}
.md-repo-chip--cloning,.md-repo-chip--indexing{color:var(--brand-600,#4338ca);background:var(--brand-50,#eef1ff)}
.md-repo-chip--error{color:var(--danger-600,#b42318);background:var(--danger-50,#fef2f2)}

/* ---- Branch switcher (connected-repo chip) — grounded spec, tokens only, never --panel ---- */
.md-branch{position:relative;display:inline-flex}
.md-branch-trigger{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:3px 9px;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:600;line-height:1;cursor:pointer}
.md-branch-trigger:hover{border-color:var(--brand-500,#1f4fd6)}
.md-branch-trigger:focus-visible{outline:2px solid var(--brand-500,#1f4fd6);outline-offset:1px}
.md-branch-ico{opacity:.7}
.md-branch-caret{font-size:10px;opacity:.6}
.md-branch--switching .md-branch-trigger,.md-branch-trigger[disabled]{opacity:.6;cursor:default;pointer-events:none}
.md-branch-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:220px;max-width:280px;padding:6px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16)}
.md-branch-pop[hidden],.md-branch-pop-list[hidden],.md-branch-pop-confirm[hidden],.md-branch-msg[hidden]{display:none}
.md-branch-pop-head{margin:0;padding:6px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted,var(--ink-500,#5f7189))}
.md-branch-opts{list-style:none;margin:0;padding:0;max-height:240px;overflow-y:auto}
.md-branch-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:6px 8px;border-radius:6px;font-size:13px;color:var(--ink);cursor:pointer}
.md-branch-opt:hover,.md-branch-opt.is-active{background:var(--surface-2)}
.md-branch-opt.is-current{cursor:default}
.md-branch-opt-name{font-weight:600}
.md-branch-opt-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--good,#15803d)}
.md-branch-pop-confirm{padding:8px}
.md-branch-confirm-q{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--ink)}
.md-branch-confirm-note{margin:0 0 10px;font-size:12px;line-height:1.4;color:var(--muted,var(--ink-500,#5f7189))}
.md-branch-confirm-actions{display:flex;justify-content:flex-end;gap:8px}
.md-branch-btn{min-height:30px;padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--line)}
.md-branch-btn--ghost{background:transparent;color:var(--ink)}
.md-branch-btn--ghost:hover{background:var(--surface-2)}
.md-branch-btn--go{background:var(--brand-500,#1f4fd6);color:#fff;border-color:var(--brand-500,#1f4fd6)}
.md-branch-btn--go:hover{filter:brightness(1.05)}
.md-branch-btn[disabled]{opacity:.6;cursor:default;pointer-events:none}
.md-branch-msg{display:flex;align-items:flex-start;gap:6px;margin:4px 0 0;padding:8px;font-size:12px;line-height:1.4;color:var(--danger-600,#b42318);background:var(--surface-2);border-left:3px solid var(--danger-600,#b42318);border-radius:6px}
.md-branch-msg-ico{flex:0 0 auto}
html[data-theme="dark"] .md-branch-pop{box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ---- Reconnect (update token & resume) — error-chip recovery, grounded spec, tokens only ---- */
.md-repo-reconnect{background:var(--surface);color:var(--brand-500,#1f4fd6);border:1px solid var(--brand-500,#1f4fd6);font-size:12px;font-weight:600;padding:5px 12px;border-radius:6px;cursor:pointer}
.md-repo-reconnect:hover{background:var(--surface-2)}
.md-repo-reconnect:disabled{opacity:.6;cursor:default}
.md-reconnect-pop{display:flex;flex-direction:column;gap:9px;margin-top:10px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.md-reconnect-pop[hidden]{display:none}
.md-reconnect-sub{margin:0;color:var(--muted,var(--ink-500,#5f7189));font-size:12px;line-height:1.4}
.md-reconnect-label{color:var(--ink);font-size:12px;font-weight:600}
.md-reconnect-input{width:100%;box-sizing:border-box;padding:8px 10px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;font-size:13px;font-family:inherit}
.md-reconnect-input:focus{outline:none;border-color:var(--brand-500,#1f4fd6)}
.md-reconnect-input.is-invalid{border-color:var(--danger-600,#b42318);background:var(--surface-2)}
.md-reconnect-help{margin:0;color:var(--muted,var(--ink-500,#5f7189));font-size:11.5px;line-height:1.4}
.md-reconnect-hint{align-self:flex-start;color:var(--brand-500,#1f4fd6);font-size:11.5px;text-decoration:underline;cursor:pointer}
.md-reconnect-error{display:flex;gap:6px;align-items:center;background:var(--surface-2);border:1px solid var(--danger-600,#b42318);border-radius:6px;padding:6px 8px}
.md-reconnect-error[hidden]{display:none}
.md-reconnect-error-ico{color:var(--danger-600,#b42318);font-size:12px;line-height:1}
.md-reconnect-error-txt{color:var(--ink);font-size:12px;line-height:1.4}
.md-reconnect-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
.md-reconnect-cancel{background:transparent;color:var(--muted,var(--ink-500,#5f7189));border:1px solid var(--line);border-radius:6px;font-size:12px;padding:5px 12px;cursor:pointer}
.md-reconnect-cancel:hover{background:var(--surface-2)}
.md-reconnect-cancel:disabled{opacity:.6;cursor:default}
.md-reconnect-submit{background:var(--surface);color:var(--brand-500,#1f4fd6);border:1px solid var(--brand-500,#1f4fd6);border-radius:6px;font-size:12px;font-weight:600;padding:5px 12px;cursor:pointer}
.md-reconnect-submit:hover{background:var(--surface-2)}
.md-reconnect-submit:disabled{opacity:.6;cursor:default}
html[data-theme="dark"] .md-reconnect-pop{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .md-reconnect-error,html[data-theme="dark"] .md-reconnect-input.is-invalid{background:var(--surface-2);border-color:var(--danger-600,#b42318)}

/* ---- View-as-user perspective mode (grounded UI/UX spec) ---- */
.gnav-viewas{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted,var(--ink-500,#5f7189));font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.gnav-viewas:hover{background:var(--surface-2);color:var(--ink)}
.gnav-viewas:focus-visible{outline:2px solid var(--brand-500,#1f4fd6);outline-offset:2px}
.gnav-viewas-ico{width:16px;height:16px;flex:none}
.viewas-pill{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:2147483000;display:inline-flex;align-items:center;gap:9px;padding:8px 8px 8px 14px;border-radius:999px;background:var(--brand-500,#1f4fd6);color:#fff;border:1px solid var(--brand-500,#1f4fd6);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.28);animation:viewasIn .35s ease}
@keyframes viewasIn{from{transform:translateX(-50%) translateY(8px) scale(.92);opacity:0}}
.viewas-pill-dot{width:8px;height:8px;border-radius:50%;flex:none;background:#fff;animation:viewasDot 2.4s ease-in-out infinite}
@keyframes viewasDot{0%,100%{opacity:1}50%{opacity:.35}}
.viewas-pill-exit{border:0;border-radius:999px;padding:5px 12px;cursor:pointer;background:rgba(255,255,255,.22);color:#fff;font:inherit;font-size:12.5px;font-weight:700}
.viewas-pill-exit:hover{background:rgba(255,255,255,.34)}
.viewas-pill-exit:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.viewas-pill,.viewas-pill-dot{animation:none}}
html[data-theme="dark"] .viewas-pill{box-shadow:0 4px 18px rgba(0,0,0,.55);border-color:rgba(255,255,255,.18)}
.md-repo-spinner{width:11px;height:11px;border-width:2px;vertical-align:-1px}

/* ---- Connect progress: percentage + slim bar (instead of a per-file counter) ---- */
.md-repo-badge--busy{display:inline-flex;flex-direction:column;gap:4px;min-width:120px}
.md-repo-badge-top{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--brand-600,#4338ca)}
.md-repo-progress{position:relative;display:block;width:100%;height:4px;background:var(--surface-2,#eef1f6);border-radius:999px;overflow:hidden}
.md-repo-progress-fill{position:absolute;left:0;top:0;height:100%;background:var(--brand,#4338ca);border-radius:999px;transition:width .35s ease}
.md-repo-progress--indet .md-repo-progress-fill{animation:md-repo-indet 1.1s ease-in-out infinite}
@keyframes md-repo-indet{0%{left:-40%}100%{left:100%}}
html[data-theme="dark"] .md-repo-progress{background:var(--surface-2)}
/* connected-repo sync-mode indicator + real-time status */
.md-repo-mode{display:inline-flex;align-items:center;gap:3px;font-weight:700;padding:1px 7px;border-radius:999px;margin-right:2px}
.md-repo-mode--live{color:var(--good,#059669);background:rgba(5,150,105,.12)}
.md-repo-mode--auto{color:var(--muted,#5f7189);background:var(--surface-2,#f1f5f9)}
html[data-theme="dark"] .md-repo-mode--live{color:#34d399;background:rgba(5,150,105,.20)}
html[data-theme="dark"] .md-repo-mode--auto{color:var(--muted,#94a3b8);background:rgba(148,163,184,.14)}
.md-rt-status{margin:0 0 4px;font-size:.76rem;line-height:1.4}
.md-rt-status--live{color:var(--good,#059669)}
.md-rt-status--off{color:var(--muted,var(--ink-500,#5f7189))}
html[data-theme="dark"] .md-rt-status--live{color:#34d399}

html[data-theme="dark"] .md-repo-chip--cloning,html[data-theme="dark"] .md-repo-chip--indexing{color:var(--brand-200,#c7d2fe);background:rgba(67,56,202,.22)}
html[data-theme="dark"] .md-repo-chip--error{color:#fca5a5;background:rgba(180,35,24,.22)}

/* My Data — repo-connect subpath/branch picker + file-count preview (my_data_lanes.js) */
.md-modal-card select{padding:9px 12px;min-height:40px;line-height:1.5;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:var(--ink,inherit);font:inherit}
.rc-step2{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
/* An explicit display: (flex on .rc-step2/.rc-tree-children, flex on modal
   labels) overrides the UA [hidden]{display:none}, which defeated the
   "hidden until scan" gating AND the collapse-by-default tree. Re-assert it,
   scoped to the modal so nothing else is affected. */
.md-modal [hidden]{display:none !important}
.rc-folder-list{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:4px}
.rc-folder-row{display:flex !important;flex-direction:row !important;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font:500 .84rem inherit !important;color:inherit !important;cursor:pointer}
.rc-folder-row:hover{background:var(--surface-2,#f5f7fb)}
.rc-folder-row input{flex:0 0 auto;padding:0;border:none}
.rc-count{margin:0;font-size:.85rem;font-weight:600;color:var(--brand-600,#4338ca)}
.rc-dest{margin:0;font-size:.8rem;color:var(--muted,var(--ink-500,#5f7189))}
.rc-warn{margin:0;font-size:.8rem;line-height:1.4;color:var(--danger-600,#b42318);background:var(--danger-50,#fef2f2);border-radius:8px;padding:6px 10px}
html[data-theme="dark"] .md-modal-card select{background:var(--surface,#1a2233)}
html[data-theme="dark"] .rc-folder-row:hover{background:rgba(148,163,184,.12)}
html[data-theme="dark"] .rc-count{color:var(--brand-200,#c7d2fe)}
html[data-theme="dark"] .rc-warn{color:#fca5a5;background:rgba(180,35,24,.22)}

/* My Data — hierarchical file/folder TREE picker (replaces the flat
   rc-folder-list radio picker above; rc-folder-* rules kept for any stale
   cached HTML during a rolling deploy). Tri-state checkboxes: checking a
   folder checks every descendant; partially-checked folders show the
   native `indeterminate` dash. */
.rc-tree-toolbar{display:flex;gap:8px;margin:2px 0 6px}
.rc-tree-btn{padding:4px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface,#fff);color:inherit;font:600 .76rem inherit;cursor:pointer}
.rc-tree-btn:hover{background:var(--surface-2,#f5f7fb)}
.rc-tree{max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:4px;font:500 .84rem inherit;background:var(--surface-2,#f6f9fc);color-scheme:light dark;accent-color:var(--brand,#4338ca)}
.rc-tree-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px}
.rc-tree-row:hover{background:var(--surface-2,#f5f7fb)}
.rc-tree-caret{flex:0 0 auto;width:24px;height:24px;margin:-4px 0;padding:0;border:none;background:none;color:var(--muted,var(--ink-500,#5f7189));font-size:.7rem;line-height:1;cursor:pointer;transition:transform .12s ease;display:flex;align-items:center;justify-content:center}
.rc-tree-caret--open{transform:rotate(90deg)}
.rc-tree-caret-spacer{flex:0 0 auto;width:16px;height:16px;display:inline-block}
.rc-tree-row input[type="checkbox"]{flex:0 0 auto;padding:0;border:none;margin:0}
.rc-tree-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.rc-tree-children{display:flex;flex-direction:column}
html[data-theme="dark"] .rc-tree-btn{background:var(--surface,#1a2233)}
html[data-theme="dark"] .rc-tree-btn:hover{background:rgba(148,163,184,.12)}
html[data-theme="dark"] .rc-tree-row:hover{background:rgba(148,163,184,.12)}

/* My Data — "Real-time updates" webhook expander (my_data_lanes.js) */
.md-rt-details{margin-top:6px;font-size:.8rem}
.md-rt-summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--muted,var(--ink-500,#5f7189));padding:2px 0;user-select:none}
.md-rt-summary::-webkit-details-marker{display:none}
.md-rt-summary:hover{color:var(--ink,#1a2332)}
.md-rt-body{display:flex;flex-direction:column;gap:8px;padding:8px 0 2px}
.md-rt-row{display:flex;flex-direction:column;gap:3px}
.md-rt-label{font-size:.72rem;font-weight:600;color:var(--muted,var(--ink-500,#5f7189))}
.md-rt-field{display:flex;gap:6px;align-items:center}
.md-rt-input{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2,#f5f7fb);font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink,#1a2332)}
.md-rt-btn{flex:0 0 auto;padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface,#fff);font-size:.72rem;font-weight:600;cursor:pointer;color:var(--ink,#1a2332)}
.md-rt-btn:hover{background:var(--surface-2,#f5f7fb)}
.md-rt-help{margin:2px 0 0;font-size:.74rem;line-height:1.4;color:var(--muted,var(--ink-500,#5f7189))}
html[data-theme="dark"] .md-rt-input{background:var(--surface-2,#1b2432);border-color:var(--line,#2b3548);color:var(--ink,#e7ecf5)}
html[data-theme="dark"] .md-rt-btn{background:var(--surface,#141b28);border-color:var(--line,#2b3548);color:var(--ink,#e7ecf5)}
html[data-theme="dark"] .md-rt-btn:hover{background:var(--surface-2,#1b2432)}

/* Plan-specific DataPilot brand icon (Pro purple / Premium gold) in the top-nav.
   The rounded app-icon PNG replaces the default paper-plane SVG on paid plans. */
.dp-mark-img { width: 22px; height: 22px; border-radius: 6px; display: block; object-fit: contain; }
body.brand-paid .gnav-brand .dp-mark { background: transparent; box-shadow: none; padding: 0; }

/* ---- Starter-agent onboarding (W36) — Use-with-your-LLM ---- */
.uwl-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--brand-600,#1a43b5);background:var(--surface,#fff);border:1px solid var(--line,#e3e8f0);border-radius:999px;padding:5px 12px;cursor:pointer}
.uwl-btn:hover{border-color:var(--brand-500,#1f4fd6);background:var(--surface-2,#f5f7fb)}
.uwl-ic{width:16px;height:16px;flex:none}
.mp-tile.uwl-src{box-shadow:0 0 0 2px var(--brand-500,#1f4fd6)}
.uwl-panel{position:fixed;top:56px;right:0;bottom:0;width:min(520px,calc(100vw - 24px));background:var(--surface,#fff);border-left:1px solid var(--line,#e3e8f0);box-shadow:-12px 0 32px rgba(22,35,58,.14);z-index:60;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .18s ease}
.uwl-panel.is-open{transform:none}
@media (prefers-reduced-motion:reduce){.uwl-panel{transition:none}}
.uwl-head{position:relative;padding:16px 18px 10px;border-bottom:1px solid var(--line,#e3e8f0)}
.uwl-eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5f7189);margin:0 0 2px}
/* Purpose-first line under the Connect title (research: value before mechanics).
   Explicit light grey — the panel is dark; a theme muted token could fall into
   the sub-Lc60 band (audit flag). */
.uwl-why{margin:6px 0 0;font:400 13px/1.55 var(--font-ui,system-ui,sans-serif);color:#a9b4c6;max-width:52ch}
/* Inline reassurance at the anxiety point (paste link / click Allow). */
.uwl-reassure-inline{display:flex;gap:7px;align-items:flex-start;margin:10px 0 0;
  font:500 12.5px/1.5 var(--font-ui,system-ui,sans-serif);color:#a9b4c6}
.uwl-reassure-inline .uwl-reassure-ic{flex:none}
.uwl-title{font-size:16px;font-weight:700;color:var(--ink,#16233a);margin:0;outline:none}
.uwl-close{position:absolute;top:14px;right:14px;background:none;border:1px solid var(--line,#e3e8f0);border-radius:8px;padding:4px 10px;font-size:12.5px;color:var(--muted,#5f7189);cursor:pointer}
.uwl-close:hover{color:var(--ink,#16233a);background:var(--surface-2,#f5f7fb)}
.uwl-tabs{display:flex;gap:4px;padding:10px 18px;border-bottom:1px solid var(--line,#e3e8f0)}
.uwl-tab{flex:1;font-size:12.5px;font-weight:600;color:var(--muted,#5f7189);background:var(--surface-2,#f5f7fb);border:1px solid var(--line,#e3e8f0);border-radius:8px;padding:6px 0;cursor:pointer}
.uwl-tab[aria-selected="true"]{color:#fff;background:var(--brand-500,#1f4fd6);border-color:var(--brand-500,#1f4fd6)}
.uwl-body{overflow-y:auto;padding:16px 18px;flex:1}
.uwl-block{margin:0 0 20px}
.uwl-block-head{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.uwl-step{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:700;color:#fff;background:var(--brand-500,#1f4fd6)}
.uwl-block-title{font-size:14px;font-weight:700;color:var(--ink,#16233a);margin:0}
.uwl-code{background:var(--surface-2,#f5f7fb);border:1px solid var(--line,#e3e8f0);border-radius:10px;padding:12px;font-size:12px;line-height:1.55;color:var(--ink,#16233a);overflow-x:auto;margin:0 0 8px;white-space:pre}
.uwl-copy{font-size:12.5px;font-weight:600;color:var(--brand-600,#1a43b5);background:var(--surface,#fff);border:1px solid var(--brand-500,#1f4fd6);border-radius:8px;padding:5px 14px;cursor:pointer}
.uwl-copy[data-copied]{color:var(--good,#178a4c);border-color:var(--good,#178a4c)}
.uwl-note{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--muted,#5f7189);background:var(--surface-2,#f5f7fb);border:1px solid var(--line,#e3e8f0);border-radius:8px;padding:8px 10px;margin:8px 0 0}
.uwl-note-ic{flex:none;margin-top:1px}
.uwl-finish{font-size:13.5px;font-weight:600;color:var(--ink,#16233a);border-top:1px solid var(--line,#e3e8f0);padding-top:14px;margin:0}
.uwl-intro{font-size:13.5px;line-height:1.55;color:var(--muted,#5f7189);margin:0 0 16px}
.uwl-install{display:inline-flex;align-items:center;gap:8px;margin:2px 0 0;font:650 14px/1 var(--font-ui,inherit);color:#fff;background:var(--brand-500,#4f46e5);border:0;border-radius:9px;padding:11px 18px;text-decoration:none;box-shadow:0 6px 14px -6px rgba(79,70,229,.6);transition:transform .12s,box-shadow .12s}
.uwl-install::before{content:"⚡";font-size:14px}
.uwl-install:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(79,70,229,.7);text-decoration:none}
.uwl-fallback{font-size:12px;color:var(--muted,#5f7189);margin:12px 0 2px}
.uwl-verify{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--muted,#5f7189);margin:14px 0 0}
.uwl-verify-ic{flex:none;color:#16a34a;font-weight:700}
/* ── simplified connect panel ─────────────────────────────────────────────── */
.uwl-choose-label{font:700 12px/1.3 var(--font-ui,inherit);letter-spacing:.02em;color:var(--ink,#16233a);margin:2px 0 10px}
.uwl-choose{margin:0 0 4px}
.uwl-choices{display:flex;flex-wrap:wrap;gap:8px}
.uwl-choice{font:600 13px/1 var(--font-ui,inherit);color:var(--ink-2,#33415a);background:var(--surface,#fff);
  border:1px solid var(--line,#e3e8f0);border-radius:9px;padding:9px 14px;cursor:pointer;transition:.12s}
.uwl-choice:hover{border-color:var(--line-strong,#c8cede)}
.uwl-choice[aria-pressed="true"]{background:var(--brand-500,#4f46e5);color:#fff;border-color:var(--brand-500,#4f46e5);box-shadow:0 4px 10px -4px rgba(79,70,229,.5)}
.uwl-stepsbox{margin-top:18px;padding-top:16px;border-top:1px solid var(--line,#e3e8f0)}
.uwl-stepsbox > .uwl-choose-label{margin-bottom:12px}
.uwl-sub-label{font-size:13px;color:var(--muted,#5f7189);margin:0 0 10px}
.uwl-subbox{margin-top:12px}
.uwl-mini{margin-top:12px}
.uwl-mini-sum{cursor:pointer;font:600 12.5px/1.4 var(--font-ui,inherit);color:var(--muted,#5f7189);list-style:none;padding:2px 0}
.uwl-mini-sum::-webkit-details-marker{display:none}
.uwl-mini-sum::before{content:"▸ ";color:var(--ink-400,#94a3b8)}
.uwl-mini[open] .uwl-mini-sum::before{content:"▾ "}
.uwl-lead{font-size:15px;line-height:1.5;color:var(--ink,#16233a);font-weight:600;margin:2px 0 14px}
.uwl-connect-card{background:var(--surface-2,#f5f7fb);border:1px solid var(--line,#e3e8f0);border-radius:12px;padding:14px}
.uwl-primary{display:block;width:100%;margin-top:10px;font:650 15px/1 var(--font-ui,inherit);color:#fff;
  background:var(--brand-500,#4f46e5);border:0;border-radius:10px;padding:13px;cursor:pointer;transition:background .12s}
.uwl-primary:hover{background:var(--brand-600,#4338ca)}
.uwl-primary[data-copied]{background:#16a34a}
.uwl-reassure{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--muted,#5f7189);margin:12px 0 0}
.uwl-reassure-ic{flex:none}
.uwl-foot{display:flex;gap:7px;align-items:center;font-size:12px;line-height:1.4;color:var(--muted,#5f7189);margin:16px 0 2px;padding-top:12px;border-top:1px solid var(--line-2,#eef1f6)}
.uwl-steps{margin:16px 0 0;padding-left:22px;color:var(--ink-2,#33415a);font-size:13.5px;line-height:1.7}
.uwl-steps li{margin:0 0 8px}
.uwl-steps li .uwl-connect-card{margin-top:8px}
.uwl-tip{margin:14px 0 0;font-size:12.5px;color:var(--muted,#5f7189)}
.uwl-next{display:inline-flex;align-items:center;gap:6px;margin:18px 0 0;font:600 13.5px/1 var(--font-ui,inherit);
  color:var(--brand-600,#4338ca);background:none;border:1px solid var(--line,#e3e8f0);border-radius:9px;padding:10px 14px;cursor:pointer}
.uwl-next:hover{border-color:var(--line-strong,#c8cede);background:var(--surface-2,#f5f7fb)}
.uwl-step2{margin-top:16px;padding-top:16px;border-top:1px solid var(--line,#e3e8f0)}
.uwl-adv{margin-top:18px;border-top:1px solid var(--line,#e3e8f0);padding-top:12px}
.uwl-adv-sum{cursor:pointer;font:600 13px/1.4 var(--font-ui,inherit);color:var(--muted,#5f7189);list-style:none;padding:4px 0}
.uwl-adv-sum::-webkit-details-marker{display:none}
.uwl-adv-sum::before{content:"▸ ";color:var(--ink-400,#94a3b8)}
.uwl-adv[open] .uwl-adv-sum::before{content:"▾ "}
.uwl-adv[open] .uwl-adv-sum{color:var(--ink,#16233a)}
.uwl-advbody{margin-top:10px}
.uwl-howto{font-size:13px;line-height:1.55;color:var(--ink,#16233a);margin:0 0 9px;background:var(--surface-2,#f5f7fb);border-left:3px solid var(--brand-500,#4f46e5);border-radius:0 6px 6px 0;padding:8px 11px}
html[data-theme="dark"] .uwl-panel{box-shadow:-12px 0 32px rgba(0,0,0,.5)}

/* ── Admin "Shared library" card (dpl-*) — UIUX-agent spec 2026-07-12 ── */
.dpl-card { margin: 28px 0 12px; padding: 18px 20px; border: 1px solid var(--border-200, #e3e8f0);
  border-radius: 12px; background: var(--surface-0, #fff); }
.dpl-title-wrap { display: flex; align-items: center; gap: 10px; }
.dpl-title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--text-900, #17233b); }
.dpl-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-200, #e3e8f0);
  color: var(--text-muted, #5d6b85); background: var(--surface-50, #f7f9fc); }
.dpl-sub { margin: 4px 0 0; font-size: .82rem; color: var(--text-muted, #5d6b85); }
.dpl-list { margin: 12px 0 0; border: 1px solid var(--border-200, #e3e8f0); border-radius: 10px; overflow: hidden; }
.dpl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-top: 1px solid var(--border-200, #e3e8f0); }
.dpl-row:first-child { border-top: 0; }
.dpl-row-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dpl-folder-name { font-weight: 600; font-size: .88rem; color: var(--text-900, #17233b); }
.dpl-chip { font-size: .7rem; font-weight: 600; color: var(--good-600, #1a7f4e);
  border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; }
.dpl-count { font-size: .8rem; color: var(--text-muted, #5d6b85); white-space: nowrap; }
.dpl-added { font-size: .74rem; font-weight: 600; color: var(--good-600, #1a7f4e); }
.dpl-row-new { background: var(--surface-50, #f4f9f6); }
.dpl-empty { margin: 0; padding: 14px; font-size: .84rem; color: var(--text-muted, #5d6b85); }
.dpl-add-btn { margin-top: 12px; font-size: .84rem; font-weight: 600; padding: 7px 14px;
  border-radius: 8px; border: 1px solid var(--border-200, #e3e8f0); cursor: pointer;
  background: var(--surface-50, #f7f9fc); color: var(--text-900, #17233b); }
.dpl-add-btn:hover { border-color: var(--brand-500, #1f4fd6); color: var(--brand-500, #1f4fd6); }
.dpl-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--border-200, #e3e8f0);
  border-radius: 10px; background: var(--surface-50, #f7f9fc); }
.dpl-label { display: block; font-size: .78rem; font-weight: 600; margin: 10px 0 4px;
  color: var(--text-900, #17233b); }
.dpl-label:first-child { margin-top: 0; }
.dpl-input { width: 100%; max-width: 380px; display: block; padding: 7px 10px; font-size: .86rem;
  border: 1px solid var(--border-200, #cfd8e6); border-radius: 8px;
  background: var(--surface-0, #fff); color: var(--text-900, #17233b); }
.dpl-input:focus { outline: 2px solid var(--brand-500, #1f4fd6); outline-offset: 1px; }
.dpl-input-ex { margin-top: 6px; }
.dpl-help { margin: 4px 0 0; font-size: .74rem; color: var(--text-muted, #5d6b85); }
.dpl-error { margin: 8px 0 0; font-size: .78rem; font-weight: 600; color: var(--danger-600, #c02537); }
.dpl-error::before { content: "⚠ "; }
.dpl-chk-wrap { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; cursor: pointer; }
.dpl-chk { margin-top: 3px; }
.dpl-chk-text { font-size: .84rem; font-weight: 600; color: var(--text-900, #17233b); }
.dpl-chk-sub { display: block; font-weight: 400; font-size: .76rem; color: var(--text-muted, #5d6b85); }
.dpl-page-fields { margin: 10px 0 0 26px; }
.dpl-actions { display: flex; gap: 10px; margin-top: 16px; }
.dpl-submit { background: var(--brand-500, #1f4fd6); color: #fff; border: 0; border-radius: 8px;
  font-size: .84rem; font-weight: 700; padding: 8px 16px; cursor: pointer; }
.dpl-submit:disabled { opacity: .6; cursor: default; }
.dpl-cancel { background: transparent; border: 0; color: var(--text-muted, #5d6b85);
  font-size: .84rem; font-weight: 600; cursor: pointer; }
html[data-theme="dark"] .dpl-card, html[data-theme="dark"] .dpl-panel {
  background: var(--surface-800, #141b2b); border-color: var(--border-700, #2a3550); }
html[data-theme="dark"] .dpl-list, html[data-theme="dark"] .dpl-row { border-color: var(--border-700, #2a3550); }
html[data-theme="dark"] .dpl-title, html[data-theme="dark"] .dpl-folder-name,
html[data-theme="dark"] .dpl-chk-text, html[data-theme="dark"] .dpl-label { color: var(--text-100, #e8edf7); }
html[data-theme="dark"] .dpl-add-btn, html[data-theme="dark"] .dpl-pill,
html[data-theme="dark"] .dpl-input { background: var(--surface-900, #0d1320);
  color: var(--text-100, #e8edf7); border-color: var(--border-700, #2a3550); }
html[data-theme="dark"] .dpl-row-new { background: rgba(38, 166, 106, .08); }

/* Custom-domain entry inside the page editor (Settings step) */
.mpw-domain-row { margin-top: 18px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mpw-domain-btn { display: inline-flex; align-items: center; gap: 8px; }
.mpw-domain-btn .etl-dm-pro { font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: linear-gradient(120deg,#f6c453,#e8a020); color: #4a3305; }
.mpw-domain-sub { color: var(--text-muted, #5d6b85); font-size: .76rem; }

/* ── Built-in agent tiles (UIUX-agent spec, corpus-cited: HHS 6:5/11:6 one
   restrained emphasis; 16:9 color-for-grouping; 3:3 badge = non-color cue;
   Ware luminance contrast). One grouping treatment: accent border + 5% tint
   + text badge. No shadow/size change — user tiles stay the figure. ── */
.mp-tile[data-seeded="1"] {
  border: 2px solid color-mix(in srgb, var(--brand-500, #1f4fd6) 55%, #fff);
  border-width: 2px;
  background: color-mix(in srgb, var(--brand-500, #1f4fd6) 5%, var(--surface, #fff));
}
.mp-builtin-badge {
  margin-left: auto; font-size: .68rem; font-weight: 700; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  color: var(--brand-600, #17419c);
  background: color-mix(in srgb, var(--brand-500, #1f4fd6) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-500, #1f4fd6) 35%, #fff);
}
.mp-tile[data-seeded="1"] .mp-tile-top .mp-builtin-badge + * { margin-left: 6px; }

html[data-theme="dark"] .mp-tile[data-seeded="1"] {
  border-color: color-mix(in srgb, var(--brand-400, #6f96f2) 70%, #cfd8e6);
  background: color-mix(in srgb, var(--brand-400, #6f96f2) 7%, var(--surface-3, #1a212c));
}
html[data-theme="dark"] .mp-builtin-badge {
  color: #cfe0ff;
  background: color-mix(in srgb, var(--brand-400, #6f96f2) 28%, var(--surface-3, #1a212c));
  border-color: color-mix(in srgb, var(--brand-400, #6f96f2) 60%, var(--surface-3, #1a212c));
}


/* Shared curated-library files in My Data — read-only, subtly marked */
.whse-tile--sharedlib { border-style: dashed; }
.whse-tile--sharedlib .whse-tile-meta::after { content: " · Shared library"; color: var(--brand-500, #1f4fd6); font-weight: 600; }


/* Built-in agents grouped in ONE dotted-outline container with a single caption */
.mp-builtin-group {
  border: 1.5px dashed color-mix(in srgb, var(--brand-500, #1f4fd6) 45%, transparent);
  border-radius: 14px; padding: 14px 14px 16px; margin: 4px 0 20px;
  background: color-mix(in srgb, var(--brand-500, #1f4fd6) 3%, transparent);
}
.mp-builtin-cap { display: flex; flex-direction: column; gap: 2px; margin: 2px 4px 12px; }
.mp-builtin-cap-title { font-weight: 700; font-size: .9rem; color: var(--brand-600, #17419c); }
.mp-builtin-cap-sub { font-size: .8rem; line-height: 1.45; color: var(--text-muted, #5d6b85); }
/* Modern modal primitives (whModalInput / Confirm / PickFolder — no window.prompt). */
.whm { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 22px; }
.whm-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); }
.whm-card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--surface, #fff);
  border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(15,23,42,.55); padding: 24px 24px 20px; }
.whm-h { margin: 0 0 6px; font: 700 18px/1.3 var(--font-ui, system-ui, sans-serif); color: var(--ink-900, #0f172a); letter-spacing: -.01em; }
.whm-p { margin: 0 0 14px; font: 400 13.5px/1.55 var(--font-ui, system-ui, sans-serif); color: var(--text-muted, #5d6b85); }
.whm-input { width: 100%; box-sizing: border-box; padding: 12px 14px; font: 400 14px/1.3 var(--font-ui, system-ui, sans-serif);
  color: var(--ink-900, #0f172a); background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 10px; }
.whm-input:focus { outline: none; border-color: var(--brand-300, #93b0f6); box-shadow: 0 0 0 3px var(--brand-50, #eef2fb); }
.whm-actions { display: flex; gap: 10px; margin-top: 16px; }
.whm-go { flex: 1; padding: 12px 18px; font: 700 14px/1 var(--font-ui, system-ui, sans-serif); color: #fff;
  background: var(--accent, #1f4fd6); border: 0; border-radius: 10px; cursor: pointer; }
.whm-go:hover { filter: brightness(1.08); }
.whm-go.whm-danger { background: #dc2626; }
.whm-cancel { padding: 12px 18px; font: 600 14px/1 var(--font-ui, system-ui, sans-serif); color: var(--ink-700, #334155);
  background: none; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; cursor: pointer; }
.whm-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.whm-opt { text-align: left; padding: 11px 13px; font: 500 13.5px/1.3 var(--font-ui, system-ui, sans-serif);
  color: var(--ink-900, #0f172a); background: none; border: 1px solid var(--line, #e2e8f0); border-radius: 9px; cursor: pointer; }
.whm-opt:hover { background: var(--accent-tint, rgba(31,79,214,.07)); border-color: var(--accent-tint-strong, rgba(31,79,214,.3)); }
html[data-theme="dark"] .whm-card { background: var(--surface-3, #1a212c); }
html[data-theme="dark"] .whm-h { color: var(--ink, #e6ecf5); }
html[data-theme="dark"] .whm-input, html[data-theme="dark"] .whm-opt { background: var(--surface-2, #121826); color: var(--ink, #e6ecf5); border-color: var(--line, #2a3648); }
html[data-theme="dark"] .whm-cancel { color: var(--ink, #cbd5e1); border-color: var(--line, #2a3648); }
/* Sidebar ⋯ options button — visible on row hover/focus. */
.wh-side-kebab { margin-left: auto; padding: 2px 7px; border-radius: 6px; color: var(--text-muted, #8494ab);
  font: 700 14px/1 var(--font-ui, system-ui, sans-serif); opacity: 0; cursor: pointer; flex: none; }
.whse-folder-item:hover .wh-side-kebab, .whse-folder-summary:hover .wh-side-kebab,
.wh-side-kebab:focus, .wh-side-kebab:hover { opacity: 1; background: rgba(100,116,139,.14); }

/* Right-click context menu (My Data files & folders, sidebar + grid). */
.wh-ctx { position: fixed; z-index: 4000; min-width: 220px; padding: 6px;
  background: var(--surface, #fff); border: 1px solid var(--line-strong, var(--line, #e2e8f0));
  border-radius: 10px; box-shadow: var(--shadow-2, 0 12px 40px rgba(15,23,42,.22)); }
.wh-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 12px;
  font: 500 13px/1.3 var(--font-ui, system-ui, sans-serif); color: var(--ink-900, #0f172a);
  background: none; border: 0; border-radius: 7px; cursor: pointer; }
.wh-ctx-item:hover { background: var(--surface-3, rgba(15,23,42,.06)); }
.wh-ctx-item.is-danger { color: #dc2626; }
.wh-ctx-item.is-danger:hover { background: rgba(220,38,38,.08); }
/* Delete = last + visually separated (audit fix #3). */
.wh-ctx-item.is-danger { margin-top: 4px; border-top: 1px solid var(--line, #e2e8f0); border-radius: 0 0 7px 7px; }
html[data-theme="dark"] .wh-ctx-item.is-danger { border-top-color: var(--line, #2a3648); color: #f87171; }
/* Non-interactive hint line ("Built-in — read-only"). */
.wh-ctx-head { padding: 6px 12px 4px; font: 700 10.5px/1.3 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted, #8494ab); }
.whse-preview-pos { font: 600 12px/1 var(--font-ui, system-ui, sans-serif); color: var(--text-muted, #8494ab);
  margin: 0 10px; flex: none; font-variant-numeric: tabular-nums; }
/* Preview-modal Ask button — the primary action in the header row. */
.whse-preview-ask { color: #fff !important; background: var(--accent, #1f4fd6) !important;
  border-color: var(--accent, #1f4fd6) !important; font-weight: 700 !important; }
html[data-theme="dark"] .wh-ctx { background: var(--surface-3, #1a212c); border-color: var(--line, #2a3648); }
html[data-theme="dark"] .wh-ctx-item { color: var(--ink, #e6ecf5); }
html[data-theme="dark"] .wh-ctx-item:hover { background: rgba(255,255,255,.07); }
/* Accent variant on the selection bar (create-agent). */
.whse-selection-btn--accent { color: #fff !important; background: var(--accent, #1f4fd6) !important;
  border-color: var(--accent, #1f4fd6) !important; }
.whse-selection-btn--accent:disabled { opacity: .5; }

/* "Add your own file" line under the wizard's KB tree. */
.mpw-kb-addown { margin-top: 8px; font: 500 12.5px/1.5 var(--font-ui, system-ui, sans-serif); color: var(--text-muted, #5d6b85); }
.mpw-kb-addown .mpw-linkbtn { font: inherit; font-weight: 700; }
.mp-connect-link { font: inherit; color: var(--brand-600, #1f4fd6); font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.mp-connect-link:hover { color: var(--brand-700, #1b45c0); }
html[data-theme="dark"] .mp-connect-link { color: var(--brand-300, #93b0f6); }
.mp-team-cta { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center;
  gap: 6px; padding: 7px 14px; border-radius: 9px; cursor: pointer;
  font-size: .82rem; font-weight: 650; line-height: 1;
  color: #fff; background: var(--brand-600, #17419c);
  border: 1px solid color-mix(in srgb, var(--brand-600, #17419c) 80%, #000 20%); }
.mp-team-cta:hover { background: var(--brand-700, #0f3080); }
.mp-team-cta:focus-visible { outline: 2px solid var(--brand-400, #6f96f2); outline-offset: 2px; }
html[data-theme="dark"] .mp-team-cta { background: var(--brand-500, #2f5fe0);
  border-color: color-mix(in srgb, var(--brand-400, #6f96f2) 60%, transparent); }
html[data-theme="dark"] .mp-team-cta:hover { background: var(--brand-400, #6f96f2); }
/* Header (hero) variant: the SINGLE primary action in the top-right zone. Per the
   UI/UX audit, emphasis is differential — one solid primary, everything else
   demoted — so this is the app's solid accent (NOT a second/competing hue), and
   "New page" drops to an outline. Resets the caption-only stacking props. */
.mp-team-cta-hero { align-self: center; margin-top: 0; padding: 9px 15px; font-size: .86rem;
  background: var(--accent, #1f4fd6); border: 1px solid var(--accent, #1f4fd6); color: #fff;
  box-shadow: 0 1px 2px rgba(20,56,168,0.25); }
.mp-team-cta-hero:hover { background: var(--accent-strong, #1438a8); border-color: var(--accent-strong, #1438a8); color: #fff; }
.mp-files-btn { display: inline-flex; align-items: center; gap: 5px; }
/* Inside the group the individual tiles drop their own outline — the group carries it */
.mp-builtin-group .mp-tile[data-seeded="1"] { border-width: 1px; border-style: solid;
  border-color: var(--hairline, rgba(15,23,42,0.09)); background: var(--surface, #fff); }
html[data-theme="dark"] .mp-builtin-group {
  border-color: color-mix(in srgb, var(--brand-400, #6f96f2) 75%, transparent);
  background: color-mix(in srgb, var(--brand-400, #6f96f2) 10%, transparent);
}
html[data-theme="dark"] .mp-builtin-cap-title { color: var(--brand-300, #9db9f7); }
html[data-theme="dark"] .mp-builtin-cap-sub { color: var(--text-muted, #93a1b8); }
html[data-theme="dark"] .mp-builtin-group .mp-tile[data-seeded="1"] {
  border-color: var(--line, #1f2937); background: var(--surface-3, #1a212c); }

/* ── Page-tile action row (UIUX deep-research redesign): 1 solid-accent
   primary + 1 neutral ghost + kebab pushed right. One accent per card. ── */
.mp-open-primary {
  background: var(--accent, #1f4fd6); border-color: var(--accent, #1f4fd6);
  color: #fff; box-shadow: 0 1px 2px rgba(20,56,168,0.25); font-weight: 600;
}
.mp-open-primary:hover { background: var(--accent-strong, #1438a8); border-color: var(--accent-strong, #1438a8); color: #fff; }
.mp-uwl-inline {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-soft, #47506b);
  background: transparent;
  border: 1px solid var(--hairline, rgba(15,23,42,0.14));
}
.mp-uwl-inline:hover { color: var(--ink-900, #17233b); border-color: var(--ink-soft, rgba(15,23,42,0.35)); background: var(--surface-50, #f7f9fc); }
.mp-tile-foot .mp-kebab { margin-left: auto; }   /* overflow to the low-attention corner */
html[data-theme="dark"] .mp-open-primary { background: var(--brand-500, #1f4fd6); border-color: var(--brand-500, #1f4fd6); color: #fff; }
html[data-theme="dark"] .mp-uwl-inline { color: var(--text-muted, #93a1b8); border-color: var(--line, #2a3550); }
html[data-theme="dark"] .mp-uwl-inline:hover { color: var(--text-100, #e8edf7); background: var(--surface-900, #0d1320); border-color: var(--text-muted, #93a1b8); }

/* ── One-shot MCP nudge (after first answer) ── */
.mcp-nudge { position: fixed; right: 20px; bottom: 86px; z-index: 9998; width: 342px;
  max-width: calc(100vw - 32px); display: flex; gap: 12px; padding: 14px 16px 15px;
  background: var(--surface, #fff); color: var(--ink, #16233a);
  border: 1px solid var(--line, #e3e8f0); border-radius: 14px;
  box-shadow: 0 14px 36px rgba(15,23,42,.18);
  transform: translateY(14px); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
.mcp-nudge.is-in { transform: none; opacity: 1; }
.mcp-nudge-x { position: absolute; top: 8px; right: 10px; background: none; border: 0;
  font-size: 18px; line-height: 1; color: var(--muted, #5f7189); cursor: pointer; padding: 2px 6px; }
.mcp-nudge-x:hover { color: var(--ink, #16233a); }
.mcp-nudge-ic { flex: none; font-size: 22px; line-height: 1.2; }
.mcp-nudge-title { font: 700 14px var(--font-ui); margin: 0 0 3px; }
.mcp-nudge-sub { font: 400 12.5px/1.5 var(--font-ui); color: var(--muted, #5f7189); margin: 0 0 11px; }
.mcp-nudge-actions { display: flex; gap: 8px; align-items: center; }
.mcp-nudge-go { font: 700 12.5px var(--font-ui); color: #fff; background: var(--brand-500, #1f4fd6);
  border: 0; border-radius: 9px; padding: 8px 14px; cursor: pointer; }
.mcp-nudge-go:hover { filter: brightness(1.05); }
.mcp-nudge-later { font: 600 12.5px var(--font-ui); color: var(--muted, #5f7189);
  background: none; border: 0; cursor: pointer; padding: 8px 4px; }
.mcp-nudge-later:hover { color: var(--ink, #16233a); }
html[data-theme="dark"] .mcp-nudge { background: var(--surface, #121821); border-color: var(--line, #283243);
  box-shadow: 0 14px 36px rgba(0,0,0,.45); }

/* Workspace switcher in the account popover. */
.account-popover__wslabel { padding: 6px 14px 2px; font: 700 10.5px/1.3 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted, #8494ab); }
.account-popover__ws .ws-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--text-muted, #8494ab); }
.account-popover__ws.is-current .ws-dot { background: var(--accent, #1f4fd6); border-color: var(--accent, #1f4fd6); }
.account-popover__ws.is-current { font-weight: 700; }

/* Highlight & Ask entry on PDF previews (My data) */
.whse-preview-hlask { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.whse-hlask-btn { font: 600 13px/1 system-ui, sans-serif; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #2858e0, #1f4fd6); border: 1px solid #102b85;
  border-radius: 8px; padding: 0 16px; min-height: 38px; }
.whse-hlask-btn:hover { background: #1438a8; }
.whse-hlask-btn:focus-visible { outline: 3px solid #1a1f36; outline-offset: 2px; }
.whse-hlask-hint { font: 500 12px/1.4 system-ui, sans-serif; color: var(--ink-500, #6b7c93); }
html[data-theme="dark"] .whse-hlask-hint { color: #9aa5b5; }

/* ── Selectable PDF viewer (pdfx) ─────────────────────────────────────── */
.pdfx { position: relative; max-height: 74vh; overflow-y: auto; background: #eceff3;
  border: 1px solid var(--line, #e3e8ee); border-radius: 10px; padding: 14px; }
html[data-theme="dark"] .pdfx { background: #141b28; }
.pdfx-status { font: 500 13px/1.5 system-ui, sans-serif; color: var(--ink-500, #6b7c93); padding: 18px; }
.pdfx-page { position: relative; width: 100%; height: 0; margin: 0 0 14px;
  background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.08); }
.pdfx-inner { position: absolute; inset: 0; }
.pdfx-img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; pointer-events: none; border-radius: 6px; }
.pdfx-text { position: absolute; inset: 0; }
.pdfx-text span { position: absolute; color: transparent; white-space: pre;
  overflow: hidden; cursor: text; font-family: sans-serif; }
.pdfx-text span::selection { background: rgba(31, 79, 214, .32); color: transparent; }
.pdfx-tip { position: absolute; z-index: 8; font: 600 12px/1 system-ui, sans-serif;
  color: #fff; cursor: pointer; background: linear-gradient(180deg, #2858e0, #1f4fd6);
  border: 1px solid #102b85; border-radius: 8px; padding: 9px 14px; min-height: 34px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .3); }
.pdfx-tip:hover { background: #1438a8; }
.pdfx-tip:focus-visible { outline: 3px solid #1a1f36; outline-offset: 2px; }
.whse-hlask-orig { margin-left: auto; font: 500 12px/1 system-ui, sans-serif; color: var(--ink-500, #6b7c93); }

/* ── Shorts feed (warehouse-wide vertical video) ─────────────────────────── */
.wh-shorts { position: fixed; inset: 0; z-index: 6000; background: #000;
  display: flex; flex-direction: column; }
.wh-shorts-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); pointer-events: none; }
.wh-shorts-title { color: #fff; font: 600 15px/1 system-ui, -apple-system, sans-serif; letter-spacing: .01em; }
.wh-shorts-title b { color: #ffca5f; font-weight: 700; margin-left: 3px; }
.wh-shorts-mute, .wh-shorts-x { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 16px; cursor: pointer;
  display: grid; place-items: center; transition: background .12s; }
.wh-shorts-mute { margin-left: auto; }
.wh-shorts-mute:hover, .wh-shorts-x:hover { background: rgba(255,255,255,.28); }
.wh-shorts-mute:focus-visible, .wh-shorts-x:focus-visible { outline: 2px solid #ffca5f; outline-offset: 2px; }
.wh-shorts-scroll { flex: 1 1 auto; min-height: 0; overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* Phone-shaped stage: a centered 9:16 column (like YouTube Shorts on desktop).
     Width follows the viewport HEIGHT so the column is always portrait; on real
     phones the min() collapses to full width, so mobile still fills the screen. */
  width: min(100%, calc(100vh * 0.5625)); margin: 0 auto; }
.wh-short-vid { border-radius: 14px; }
@media (max-aspect-ratio: 3/4) { .wh-short-vid { border-radius: 0; } }
.wh-shorts-scroll::-webkit-scrollbar { display: none; }
.wh-short { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-items: center; background: #000; }
.wh-short-vid { width: 100%; height: 100%; object-fit: cover; background: #000; }
.wh-short-cap { position: absolute; left: 18px; right: 66px; bottom: 26px; z-index: 2;
  color: #fff; font: 600 15px/1.3 system-ui, -apple-system, sans-serif;
  text-shadow: 0 1px 6px rgba(0,0,0,.75); pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; }
.wh-short-cap:hover { text-decoration: underline; text-underline-offset: 3px; }
.wh-short-cap:focus-visible { outline: 2px solid #ffca5f; outline-offset: 3px; border-radius: 4px; }
.wh-short-folder { font-weight: 500; font-size: 12.5px; color: #cbd3e0; opacity: .9; }
.wh-short-play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.42); color: #fff; font-size: 28px; padding-left: 4px;
  cursor: pointer; opacity: 0; transition: opacity .15s; pointer-events: none; }
.wh-short.is-paused .wh-short-play { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wh-shorts-scroll { scroll-behavior: auto; } }
.wh-short-dl { position: absolute; right: 14px; bottom: 92px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16); color: #fff; font-size: 19px; text-decoration: none;
  transition: background .12s, transform .12s; }
.wh-short-dl:hover { background: rgba(255,255,255,.3); transform: scale(1.06); }
.wh-short-dl:focus-visible { outline: 2px solid #ffca5f; outline-offset: 2px; }

/* Canvas menus re-anchored to the viewport by popOverCanvas() — see home-ui.js.
   They leave the canvas's stacking context, so they need an explicit layer or
   they land under the bottom panel they were just freed from. */
.is-canvas-pop {
  z-index: var(--z-canvas-pop, 1200);
}

/* Inspect tab — columns in/out of the selected step, no compute. Dense on
   purpose: HHS 6:11 found higher density scans faster with no cost to accuracy
   or preference, and this pane exists to be read at a glance. */
.inspect-body { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
  overflow: auto; min-height: 0; flex: 1 1 auto; }
.inspect-side { min-width: 220px; flex: 1 1 260px; }
.inspect-side-head { font: 600 12px var(--font-ui, system-ui); color: var(--ink-700);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; }
.inspect-table { border-collapse: collapse; width: 100%; }
.inspect-table td { padding: 2px 8px 2px 0; font: 400 12px/1.5 var(--font-ui, system-ui);
  border-bottom: 1px solid var(--line); }
.inspect-col { color: var(--ink-900); }
.inspect-type { color: var(--ink-500); text-align: right; white-space: nowrap; }
.inspect-empty { font: 400 12px/1.5 var(--font-ui, system-ui); color: var(--ink-500); margin: 0; }

/* Failed-row count beside the success count in Run details. Amber, not red:
   the step SUCCEEDED, some rows didn't — a red badge would misreport the
   step's own status. (Colour is never the only cue — the word "failed" is
   there too, per the standing rule that colour must not carry meaning alone.) */
.run-details-badrows { color: #b45309; font-weight: 600; }
html[data-theme="dark"] .run-details-badrows { color: #fbbf24; }

/* Flow parameters (General tab): name · default · value-for-this-run · remove.
   One line per parameter so the set is scannable at a glance in a short drawer. */
.param-hint { font: 400 11.5px/1.45 var(--font-ui, system-ui); color: var(--ink-500); margin: 0 0 6px; }
.param-hint code { background: rgba(15,23,42,.06); border-radius: 4px; padding: 0 4px; }
html[data-theme="dark"] .param-hint code { background: rgba(226,232,240,.1); }
.param-empty { font: 400 12px var(--font-ui, system-ui); color: var(--ink-500); margin: 0 0 6px; }
.flow-params { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.flow-param-row { display: flex; gap: 6px; align-items: center; }
.flow-param-row .input { flex: 1 1 0; min-width: 0; font-size: 12px; padding: 5px 8px; }
.flow-param-row .flow-param-name { font-family: var(--font-mono, ui-monospace, monospace); }
.flow-param-del { flex: 0 0 auto; padding: 4px 8px; line-height: 1; }

/* Invalid parameter name: the border alone would be colour-carrying-meaning, so
   the message beside it does the actual telling. */
.flow-param-row .input.is-invalid { border-color: #d97706; }
.param-error { font: 400 11.5px/1.4 var(--font-ui, system-ui); color: #b45309;
  margin: -2px 0 2px 2px; }
html[data-theme="dark"] .param-error { color: #fbbf24; }
.param-empty code { background: rgba(15,23,42,.06); border-radius: 4px; padding: 0 4px; }
html[data-theme="dark"] .param-empty code { background: rgba(226,232,240,.1); }

/* Column headers for the parameter rows. Small and quiet — they exist so a
   FILLED row is still readable, not to compete with the values. */
.flow-param-head { display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }
.flow-param-hcell { flex: 1 1 0; min-width: 0; font: 600 10.5px var(--font-ui, system-ui);
  color: var(--ink-500); text-transform: uppercase; letter-spacing: .05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-param-hspacer { flex: 0 0 auto; width: 30px; }

/* Parameter strip — the declared parameters, shown where they get USED.
   One quiet line: it must not compete with the step's own controls, but it must
   be present, because its whole job is to stop the user having to remember a
   name from another tab. */
.param-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 4px 0 6px; margin: 0 0 4px; border-bottom: 1px dashed var(--line); }
.param-strip-label { font: 600 10.5px var(--font-ui, system-ui); color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .05em; }
/* Chips are BUTTONS and now look like it — filled with the app's one accent
   so they register as clickable at a glance (audit: the grey pill had lower
   visual weight than every real control around it). Grounded on importance/
   salience, not hue meaning: HHS 6:5 "Establish Level of Importance" + 11:10
   "Emphasize Importance" license raising an element the user must notice;
   Elliot & Maier 2015 says hue-meaning claims are unsettled, so the color's
   job here is only "this is an action", carried by the SAME accent the app
   already uses for actions — and per HHS 3:3 color is never the only cue:
   the @param. text and button affordance carry the meaning too. Kept a step
   quieter than a primary CTA: the step's own controls are the page's purpose
   (6:5), the chips are a helper. */
.param-chip { font: 600 11.5px var(--font-mono, ui-monospace, monospace);
  color: #fff; background: var(--brand-600, #4f46e5);
  border: 1px solid var(--brand-600, #4f46e5); border-radius: 999px;
  padding: 3px 10px; cursor: pointer; line-height: 1.5; }
.param-chip:hover { background: var(--brand-500, #6366f1); border-color: var(--brand-500, #6366f1); }
.param-chip:focus-visible { outline: 2px solid var(--brand-500, #6366f1); outline-offset: 2px; }
.param-strip-none { font: 400 11.5px var(--font-ui, system-ui); color: var(--ink-500); }
.param-strip-warn { font: 600 11.5px var(--font-ui, system-ui); color: #b45309; }
html[data-theme="dark"] .param-chip { background: var(--brand-500, #6366f1); border-color: var(--brand-500, #6366f1); color: #fff; }
html[data-theme="dark"] .param-chip:hover { background: var(--brand-400, #818cf8); border-color: var(--brand-400, #818cf8); }
html[data-theme="dark"] .param-strip-warn { color: #fbbf24; }

/* GCS connection badge — same treatment as is-api/is-sql, its own hue. */
.cxn-badge.is-gcs { background: rgba(66,133,244,.12); color: #1a63c9; }
html[data-theme="dark"] .cxn-badge.is-gcs { background: rgba(66,133,244,.2); color: #8ab4f8; }

/* Collapsed stream sections. The summary reads as a section header, not a link. */
.stream-details { margin-top: 8px; }
.stream-details > summary { cursor: pointer; font: 600 12px var(--font-ui, system-ui);
  color: var(--ink-700); padding: 4px 0; list-style-position: inside; user-select: none; }
.stream-details > summary:hover { color: var(--ink-900); }

/* Cap EVERY folder tree, not just the one inside .warehouse-settings — the
   warehouse SINK's tree missed the scoped cap and rendered all ~65 folder rows
   open (+422px of scroll before the Save controls). The tree scrolls inside
   itself; the panel's own controls stay reachable. */
.wh-folder-tree { max-height: 150px; overflow-y: auto; }

/* Path picker (blob-storage zones). Same visual family as the folder tree. */
.pp-picker { display: flex; flex-direction: column; gap: 6px; }
.pp-label { font: 600 12px var(--font-ui, system-ui); color: var(--ink-700); }
.pp-selected-pill { font: 500 12px var(--font-mono, ui-monospace, monospace); color: var(--ink-900);
  background: rgba(31,79,214,.08); border: 1px solid rgba(31,79,214,.25); border-radius: 6px; padding: 2px 8px; }
.pp-selected-none { font: 400 12px var(--font-ui, system-ui); color: var(--ink-500); }
.pp-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pp-zone { width: auto; font-size: 12px; padding: 3px 6px; }
.pp-crumb { background: none; border: none; color: var(--ink-700); cursor: pointer;
  font: 500 12px var(--font-ui, system-ui); padding: 2px 3px; border-radius: 4px; }
.pp-crumb:hover { background: rgba(15,23,42,.06); color: var(--ink-900); }
.pp-crumb-sep { color: var(--ink-500); font-size: 12px; }
.pp-list { max-height: 150px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); display: flex; flex-direction: column; }
.pp-row { display: flex; gap: 8px; align-items: center; text-align: left; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--line); cursor: pointer;
  padding: 5px 10px; font: 400 12.5px var(--font-ui, system-ui); color: var(--ink-900); }
.pp-row:last-child { border-bottom: none; }
.pp-row:hover { background: rgba(15,23,42,.05); }
.pp-row-ic { color: var(--ink-500); }
.pp-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-row-size { color: var(--ink-500); font-size: 11px; }
.pp-msg { padding: 12px; font: 400 12px var(--font-ui, system-ui); color: var(--ink-500); }
html[data-theme="dark"] .pp-row:hover { background: rgba(226,232,240,.07); }
html[data-theme="dark"] .pp-crumb:hover { background: rgba(226,232,240,.09); }

/* "More/Less" disclosure toggle on a settings row — quiet text affordance,
   subordinate to the row's real controls (HHS 6:5). */
.row-adv-toggle { background: none; border: none; cursor: pointer;
  font: 600 11px var(--font-ui, system-ui); color: var(--brand-500, #1f4fd6);
  padding: 3px 6px; border-radius: 5px; justify-self: start; }
.row-adv-toggle:hover { background: rgba(31,79,214,.08); }

/* Compact the settings refresh bar (audit fix #5): 38px of chrome for one
   helper action. Hint moves to the button title. */
.settings-refresh-bar { padding: 2px 0; }
.settings-refresh-bar .settings-refresh-hint { display: none; }
.settings-refresh-btn { font-size: 11.5px; padding: 3px 8px; }

/* Trigger kind radio row + watch fields */
.trigger-kind { display: flex; gap: 14px; margin: 2px 0 6px; }
.trigger-kind label { display: flex; gap: 6px; align-items: center;
  font: 500 13px var(--font-ui, system-ui); cursor: pointer; }
.trigger-watch-hint { font: 400 11.5px/1.5 var(--font-ui, system-ui); color: var(--ink-500); margin: 4px 0 0; }
.trigger-watch-hint code { background: rgba(15,23,42,.06); border-radius: 4px; padding: 0 4px; }
html[data-theme="dark"] .trigger-watch-hint code { background: rgba(226,232,240,.1); }


/* ═══ Your Apps on the phone ══════════════════════════════════════════
   One column, 44px+ targets (thumb-sized), no hover-only affordances,
   long titles wrap instead of truncating — a phone has the height. */
body.etl-mobile .etlm-h { font: 700 21px/1.25 var(--font-ui); margin: 4px 0 2px; color: var(--ink-900); }
body.etl-mobile .etlm-h3 { font: 700 18px/1.3 var(--font-ui); margin: 10px 0 8px; color: var(--ink-900); }
body.etl-mobile .etlm-sub { font: 500 14px/1.5 var(--font-ui); color: var(--ink-500); margin: 0 0 10px; }
body.etl-mobile .etlm-next { font: 500 14px/1.55 var(--font-ui); color: var(--ink-700);
  background: rgba(31,79,214,.07); border-radius: 10px; padding: 11px 13px; margin: 4px 0 12px; }
body.etl-mobile .etlm-back { background: none; border: none; padding: 10px 2px;
  font: 600 14px var(--font-ui); color: var(--ink-500); min-height: 44px; }
/* shrink, never scroll: 3 short labels fit at 375px once flex-shrink is
   allowed, and a hidden tab behind an invisible scroll strip is worse than
   a tight one (HHS 8:1 Eliminate Horizontal Scrolling) */
body.etl-mobile .etlm-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line);
  margin: 6px 0 14px; }
body.etl-mobile .etlm-tab { flex: 1 1 0; min-width: 0; background: none; border: none;
  min-height: 46px; font: 700 14.5px var(--font-ui); color: var(--ink-500);
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; padding: 0 6px; }
body.etl-mobile .etlm-tab.is-on { color: var(--brand-600, #1b45c0); border-bottom-color: var(--brand-500, #1f4fd6); }
body.etl-mobile .etlm-cards { display: flex; flex-direction: column; gap: 10px; }
body.etl-mobile .etlm-card { display: block; width: 100%; text-align: left;
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 13px;
  padding: 14px; font: inherit; color: inherit; }
body.etl-mobile .etlm-approw, body.etl-mobile .etlm-frow {
  display: grid; grid-template-columns: 12px minmax(0,1fr) 14px; gap: 12px;
  align-items: center; min-height: 62px; }
body.etl-mobile .etlm-dot { width: 11px; height: 11px; border-radius: 50%; }
body.etl-mobile .etlm-approw-t { min-width: 0; }
body.etl-mobile .etlm-built { color: #15803d; font: 800 13px var(--font-ui); letter-spacing: .04em; }
body.etl-mobile .etlm-approw-t b { display: block; font: 700 16px/1.3 var(--font-ui); color: var(--ink-900); }
body.etl-mobile .etlm-approw-t span { display: block; font: 500 13px/1.45 var(--font-ui); color: var(--ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.etl-mobile .etlm-approw-t em { display: block; font: 600 12.5px var(--font-ui);
  color: var(--brand-600, #1b45c0); font-style: normal; margin-top: 2px; }
body.etl-mobile .etlm-chev { color: var(--ink-500); font-size: 20px; line-height: 1; }
body.etl-mobile .etlm-goal { margin-bottom: 10px; }
body.etl-mobile .etlm-goal-h { display: grid; grid-template-columns: 11px minmax(0,1fr);
  gap: 10px; align-items: baseline; }
body.etl-mobile .etlm-goal-h b { font: 700 16px/1.35 var(--font-ui); color: var(--ink-900); }
body.etl-mobile .etlm-goal-s { font: 600 13px var(--font-ui); color: var(--ink-500); margin: 4px 0 8px 21px; }
body.etl-mobile .etlm-task { display: grid; grid-template-columns: 22px minmax(0,1fr);
  gap: 11px; align-items: start; min-height: 44px; padding: 6px 0 6px 21px;
  font: 500 15px/1.45 var(--font-ui); color: var(--ink-700); }
body.etl-mobile .etlm-task input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--brand-500, #1f4fd6); }
body.etl-mobile .etlm-task .is-done { color: var(--ink-500); text-decoration: line-through; }
body.etl-mobile .etlm-copy { display: block; width: 100%; min-height: 46px; margin-top: 12px;
  background: var(--surface, #fff); border: 1.5px solid var(--brand-500, #1f4fd6); border-radius: 11px;
  font: 700 15px var(--font-ui); color: var(--brand-600, #1b45c0); }
body.etl-mobile .etlm-copy.is-wide { margin: 4px 0 14px; }
body.etl-mobile .etlm-copy.is-ok { border-color: #15803d; color: #15803d; }
body.etl-mobile .etlm-src b { display: block; font: 600 15px/1.4 var(--font-ui); color: var(--ink-900); }
body.etl-mobile .etlm-src span { font: 500 12.5px var(--font-ui); color: var(--ink-500); text-transform: capitalize; }
body.etl-mobile .etlm-src { display: block; min-height: 62px; text-decoration: none; }
body.etl-mobile .etlm-src-go { display: block; margin-top: 7px; min-height: 26px;
  font: 700 13px var(--font-ui); color: var(--brand-600, #1b45c0); }
body.etl-mobile .etlm-stat { text-align: center; }
body.etl-mobile .etlm-stat b { display: block; font: 700 26px var(--font-ui); color: var(--ink-900); }
body.etl-mobile .etlm-stat span { font: 500 13px var(--font-ui); color: var(--ink-500); }

/* the Help FAB is fixed above the scroll surface: without a gutter it sits
   on the last row of every list */
body.etl-mobile #etlMobileSurface { padding-bottom: 84px; }

/* ── The floating buttons must not sit ON the mobile tab bar ─────────────
   Measured on an iPhone 13 (390x664) signed in on Dev: #etlMobileTabs
   occupies y=600-664, and .nh-consult rendered at y=604, x=192-378 with
   z-index 2147483000 - covering the right half of the bar, which is the
   Warehouse and Pages tabs. The Help FAB and the dev plan pill stack into
   the same corner. need-help.js injects its own <style> at runtime and
   only knows about a 768px breakpoint, not about this bar existing, so the
   override has to happen here (this stylesheet is workspace-only, which is
   exactly where the bar exists) and it has to be !important to beat an
   injected style block.

   Reachability, not decoration: NN/g's touch guidance says a target must be
   big enough AND spaced well enough, and Hoober's N=1,333 observation is
   that grips SWITCH mid-task - so a control that overlaps the primary nav is
   mis-tapped in some grips no matter how large it is. */
body.etl-mobile .nh-consult {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  right: 12px !important;
  max-width: calc(100vw - 24px);
}
body.etl-mobile .nh-fab,
body.etl-mobile.nh-has-consult .nh-fab {
  bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
}
body.etl-mobile .nh-cpanel { bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important; }
body.etl-mobile .nh-menu   { bottom: calc(192px + env(safe-area-inset-bottom, 0px)) !important; }
/* Dev-only badge, same corner, same problem. */
body.etl-mobile #etlDevPlanPill {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  left: 12px !important;
}
/* The scroll surface already reserves 84px for the FAB; the consultant pill
   now stacks above the bar too, so the last row needs a little more room. */
body.etl-mobile #etlMobileSurface { padding-bottom: 140px; }

/* ══ MOBILE REDESIGN 08-21 — every rule below cites the ui-ux corpus
   research of the same date (ledger: ui-ux-findings.md).
   - Rows: grouped LIST, not floating cards. HHS 12:3 says borders/white
     space make items read as a discrete list; HHS 6:11 says higher density
     scans FASTER and "too much separation ... may require users to scroll
     unnecessarily". Card-per-row was one border+shadow+radius per item -
     chrome repeated N times is clutter (HHS 6:1, Srimurugan n=40).
   - One emphasized action per screen (MECLABS "one almost always costs
     less than two"); the Warehouse header's three equal boxes become two
     quiet text buttons + one solid Upload.
   - Tab labels 12px (HHS 11:8 floor), active = color + weight + fill
     (HHS 3:3 never color alone).
   - Whitespace between GROUPS, not around every row (6:11 vs 6:1). */

/* rows: hairline-divided list group */
body.etl-mobile .etlm-row {
  border: 0; border-radius: 0; background: transparent;
  padding: 13px 16px; min-height: 52px; gap: 12px;
}
body.etl-mobile .etlm-row + .etlm-row { border-top: 1px solid var(--line-soft, rgba(15,23,42,.07)); }
body.etl-mobile .etlm-row:active { background: var(--surface-2, #f0f4f9); }
body.etl-mobile .etlm-row .ic { display: flex; color: var(--ink-400, #9aa7ba); }
body.etl-mobile .etlm-cards { gap: 0; border: 1px solid var(--line-soft, rgba(15,23,42,.08));
  border-radius: 14px; background: var(--surface, #fff); overflow: hidden; }
body.etl-mobile .etlm-card { border: 0; border-radius: 0; box-shadow: none; }
body.etl-mobile .etlm-card + .etlm-card { border-top: 1px solid var(--line-soft, rgba(15,23,42,.08)); }

/* screen headers: consistent side padding (the Your-apps h2 sat at x=0) */
body.etl-mobile .etlm-listhead, body.etl-mobile .etlm-shead { padding: 0 16px; }
body.etl-mobile .etlm-wrap .etlm-shead { padding: 0; }

/* header actions: quiet text, ONE solid primary */
body.etl-mobile .etlm-act {
  border: 0; background: transparent; color: var(--ink-500, #6b7c93);
  font: 600 13px var(--font-ui); padding: 10px 10px; border-radius: 10px;
}
body.etl-mobile .etlm-act:active { background: var(--surface-2, #f0f4f9); }
body.etl-mobile .etlm-act.primary {
  background: var(--brand-500, #1f4fd6); color: #fff; padding: 10px 16px;
}

/* tab bar: 12px labels (HHS 11:8), active adds weight + fill, never color
   alone (HHS 3:3); positions never change (HHS 6:2) */
.etl-mtab { font-size: 12px; }
.etl-mtab .ic { font-size: 0; }
.etl-mtab .ic svg { display: block; }
.etl-mtab.is-active { font-weight: 700; }

/* the app row's status DOT was colour-only signalling (HHS 3:3) and the
   words "building: …" already say it (11:11 one coding) - hide the dot */
body.etl-mobile .etlm-card .etlm-dot { display: none; }
/* the row is a GRID templated around that dot - hiding it alone shifted
   every column (text landed in the 10px dot track, 08-21 grade: F).
   The template must lose the track with it. */
body.etl-mobile .etlm-approw { grid-template-columns: 1fr auto; }

/* ONE emphasized action per SCREEN, header included: the solid Upgrade
   pill fought every tab's own primary (doc_0e8e3e0f7c43 "one almost
   always costs less than two", 08-21 grade). Outline, not fill. */
body.etl-mobile .etlm-upgrade {
  background: transparent; color: var(--brand-600, #1438a8);
  border: 1.5px solid var(--brand-200, #c7d5f8); box-shadow: none;
}

/* Tab labels 13px: HHS 11:8's 12pt standard would be ~16px, which wraps
   "Warehouse" at this width - so this stays BELOW the reading standard on
   purpose and is recorded as a taste call, not an 11:8 pass (08-21). */
.etl-mtab { font-size: 13px; }

/* Chat mode: the surface's 140px FAB reservation pushed the composer to
   mid-screen - 206px of dead space between the bar and the tab bar, the
   "why is the chat bar so high up" report (08-21). The chat owns its own
   bottom edge; the composer sits on the tab bar like every messenger. */
body.etl-mobile.ask-mode #etlMobileSurface { padding-bottom: 0; }

/* the dev-only plan pill sat ON the chat composer once the composer
   dropped to the bottom - lift it above the bar in ask-mode */
body.etl-mobile.ask-mode #etlDevPlanPill {
  bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
}

/* the pages privacy pill is the ONE privacy signal (HHS 11:11) */
body.etl-mobile .etlm-pagerow .nm { margin-left: 0; }

/* ── "+ New idea" on the phone ───────────────────────────────────────────
   The mobile shell renders its own Your-Apps list and never had the
   "+ New idea" action the desktop list header carries (#monNewIdx), so a
   signed-in phone user could read their apps and start nothing. Sized to
   the 1cm touch minimum (NN/g) and full-width in the empty state, where it
   is the only thing to do on the screen. */
body.etl-mobile .etlm-listhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 8px;
}
body.etl-mobile .etlm-listhead .etlm-h { margin: 0; }
body.etl-mobile .etlm-newidea {
  border: 0; border-radius: 11px; background: var(--brand-500, #1f4fd6); color: #fff;
  font: 700 15px var(--font-ui); padding: 12px 16px; min-height: 44px;
  cursor: pointer; white-space: nowrap;
}
body.etl-mobile .etlm-newidea.is-ghost {
  background: transparent; color: var(--ink-500, #64748b);
  border: 1px solid var(--line, #e3e8ee);
}
body.etl-mobile .etlm-newidea-wrap { padding: 0 16px 24px; }
body.etl-mobile .etlm-newidea-wrap .etlm-newidea { width: 100%; }
body.etl-mobile .etlm-newidea-actions {
  display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
}
body.etl-mobile .etlm-newidea-actions .etlm-newidea { width: 100%; }
body.etl-mobile .etlm-sub {
  font: 400 14.5px/1.5 var(--font-ui); color: var(--ink-500, #64748b); margin: 2px 0 12px;
}
body.etl-mobile .etlm-idea {
  width: 100%; box-sizing: border-box; min-height: 140px; padding: 14px;
  border: 1px solid var(--line, #e3e8ee); border-radius: 12px;
  font: 400 16px/1.45 var(--font-ui);   /* 16px keeps iOS from zooming the page */
  resize: vertical; background: var(--surface, #fff); color: var(--ink-900);
}
body.etl-mobile .etlm-note { font: 600 13.5px var(--font-ui); color: #c02537; margin: 8px 0 0; }

/* Stop a running build. Deliberately quiet - it sits after the timer in
   the card header, reads as a link, and only firms up on hover. A red
   button beside a progress bar reads as "something went wrong". */
.bs-stop { margin-top: 8px; display: inline-flex; align-items: center;
  gap: 6px; padding: 5px 12px; border: 1px solid var(--line-200, #e2e8f0);
  border-radius: 999px; background: var(--surface-1, #fff);
  font: 500 12px var(--font-ui); color: var(--ink-700, #334155);
  cursor: pointer; line-height: 1; }
.bs-stop::before { content: "\25A0"; font-size: 9px; opacity: .7; }
.bs-stop:hover { border-color: var(--line-300, #cbd5e1);
  background: var(--surface-2, #f8fafc); color: var(--ink-900); }
.bs-stop:disabled { cursor: default; opacity: .55; }
.bs-card.is-stopped .bs-bar i { background: var(--ink-300, #cbd5e1); }

/* Studio Pilot — visible top-nav door (all signed-in users) */
.gnav-pilot{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#e7e9fd;color:#4f46e5;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;line-height:1}
.gnav-pilot:hover{background:#dcdffb;color:#4338ca}
.gnav-pilot-new{background:#4f46e5;color:#fff;font-size:9.5px;font-weight:700;border-radius:999px;padding:2px 6px;letter-spacing:.03em}
@media (max-width:860px){.gnav-pilot span.gnav-pilot-new{display:none}}