/* ── Integrations ─────────────────────────────────────────────────────────────
   Sources, plugins, automations, flow and trace. Loaded after base.css, which
   it overrides.

   base.css and tokens.css are shared with the Story app and kept byte-identical
   between the two repos on purpose — same shell, and a divergence there is a
   bug rather than a customisation.                                          */

/* ── Automation shared ──────────────────────────────────────────────────── */

.automation-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.automation-field-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink4);
  letter-spacing: 0.05em;
}
.automation-field select {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--dark2);
  color: var(--ink2);
  cursor: pointer;
}

/* Toggle switch */
.automation-toggle {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
}
.automation-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.automation-toggle-track {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--dark3);
  border-radius: 9px;
  transition: background 0.2s;
}
.automation-toggle-track::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--ink4);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.automation-toggle input:checked + .automation-toggle-track {
  background: var(--moss-pale);
}
.automation-toggle input:checked + .automation-toggle-track::before {
  transform: translateX(16px);
  background: var(--moss);
}

/* ── Automations view ──────────────────────────────────────────────────── */

.auto-wrap {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* ── Left panel: list ── */
.auto-list-panel {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: var(--seam);
}
.auto-list-header {
  flex-shrink: 0;
  padding: 24px 20px 0;
}
.auto-header { margin-bottom: 16px; }
.auto-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.auto-title {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
  font-weight: 300;
}
.auto-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

/* ── Create button ── */
.auto-create-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--moss);
  background: none;
  border: 1px solid var(--moss);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.auto-create-btn:hover {
  background: var(--moss);
  color: var(--bg);
}

/* ── Global stats bar ── */
.auto-global-bar {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-lt);
}
.auto-global-stat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  letter-spacing: 0.03em;
}
.auto-global-val {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  font-weight: 300;
  margin-right: 3px;
}

/* ── Search + sort toolbar ── */
.auto-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.auto-search {
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink2);
  outline: none;
  flex: 1;
  min-width: 0;
  transition: border-color 0.15s;
}
.auto-search::placeholder { color: var(--ink4); }
.auto-search:focus { border-color: rgba(148,174,136,0.5); }
.auto-sort {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--dark2);
  color: var(--ink3);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Compact automation rows ── */
.auto-list {
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid var(--border-lt);
  padding: 0 4px;
}
.auto-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-lt);
  cursor: pointer;
  transition: background 0.1s;
}
.auto-row:hover { background: rgba(255,255,255,0.02); }
.auto-row.expanded,
.auto-row.selected {
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--moss);
  padding-left: 8px;
}
.auto-row.disabled { opacity: 0.45; }
.auto-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.auto-row-dot.on {
  background: var(--moss);
  box-shadow: 0 0 4px var(--moss);
}
.auto-row-dot.off { background: var(--ink4); }
.auto-row-name-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.auto-row-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-row-desc {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--ink4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.auto-row-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.auto-row-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--dark3);
  color: var(--ink4);
  text-transform: uppercase;
}
.auto-row-badge.built-in {
  background: rgba(90, 107, 72, 0.12);
  color: var(--moss);
}
.auto-row-badge.custom {
  background: rgba(140, 120, 180, 0.12);
  color: #8C78B4;
}
.auto-row-badge.forked {
  background: rgba(160, 140, 100, 0.12);
  color: #A08C64;
}
.auto-row-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
}
.auto-row-toggle {
  flex-shrink: 0;
}

/* ── Right panel: detail ── */
.auto-detail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.auto-detail-header {
  flex-shrink: 0;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border-lt);
}
.auto-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.auto-detail-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 300;
  color: var(--ink);
}
.auto-detail-badges {
  display: flex;
  gap: 4px;
}
.auto-detail-hdesc {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.5;
  margin-bottom: 10px;
  font-style: italic;
}

/* ── Tabs ── */
.auto-detail-tabs {
  display: flex;
  border-bottom: var(--seam);
  flex-shrink: 0;
}
.auto-detail-tab {
  flex: 1;
  padding: 11px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink4);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s;
}
.auto-detail-tab:hover { color: var(--ink3); }
.auto-detail-tab.active {
  color: var(--ink2);
  border-bottom-color: var(--moss);
}
.auto-tab-panel {
  display: none;
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
  padding: 20px 24px 48px;
}
.auto-tab-panel.active { display: flex; }

/* ── Empty state ── */
.auto-detail-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
}
.auto-empty-icon {
  font-size: 22px;
  color: var(--ink4);
  opacity: 0.4;
}
.auto-empty-text {
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink4);
}

/* ── Config tab read-only ── */
.auto-config-section { margin-bottom: 18px; }
.auto-config-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink4);
  margin-bottom: 6px;
}
.auto-config-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.5;
}
.auto-config-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.auto-config-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(148,174,136,0.08);
  color: var(--ink3);
  border: 1px solid var(--border-lt);
}

/* ── Legacy inline detail (kept for compat) ── */
.auto-detail {
  padding: 16px 12px 16px 18px;
  border-bottom: 1px solid var(--border-lt);
  border-left: 2px solid var(--moss);
  background: rgba(90, 107, 72, 0.03);
}
.auto-detail-loading {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  padding: 8px 0;
}

/* ── Pipeline visualization (vertical) ── */
/* (narrative pipeline styles moved to bottom — see .auto-narrative) */
/* ── Detail stats ── */
.auto-detail-stats {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  margin-bottom: 12px;
}

/* ── Per-automation run history ── */
.auto-detail-runs {
  margin-bottom: 12px;
}
.auto-detail-runs-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 6px;
}
.auto-run-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-lt);
}
.auto-run-row:last-child { border-bottom: none; }
.auto-run-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  min-width: 38px;
  flex-shrink: 0;
}
.auto-run-status {
  font-size: 11px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.auto-run-status.ok { color: var(--moss); }
.auto-run-status.err { color: var(--terra); }
.auto-run-summary {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink3);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-run-duration {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink4);
  flex-shrink: 0;
}
.auto-detail-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  font-style: italic;
  padding: 4px 0;
}

/* ── Detail actions ── */
.auto-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Config panel (hidden by default) ── */
.auto-config-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-lt);
}
.auto-watch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.auto-watch-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--dark3);
  border: 1px solid var(--border);
}
.auto-watch-chip-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink2);
}
.auto-watch-chip-x {
  font-size: 13px;
  line-height: 1;
  color: var(--ink4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 1px;
}
.auto-watch-chip-x:hover { color: var(--terra); }
.auto-watch-add {
  display: flex;
  gap: 6px;
  align-items: center;
}
.auto-watch-input {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--dark2);
  color: var(--ink2);
  width: 180px;
}
.auto-watch-input::placeholder { color: var(--ink4); }

/* ── Output schema badges ── */
.auto-out-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--dark3);
  color: var(--ink4);
}

/* ── Status messages ── */
.auto-status-msg {
  font-family: var(--font-mono);
  font-size: 10px;
  margin-top: 10px;
  min-height: 14px;
}
.auto-status-msg.msg-ok { color: var(--moss); }
.auto-status-msg.msg-err { color: var(--terra); }
.auto-status-msg.msg-info { color: var(--ink4); }

/* ── Create/edit form (popup) ── */
.auto-form-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}
.auto-form {
  border: 1px solid var(--moss);
  border-radius: 14px;
  padding: 28px;
  background: var(--dark2);
  width: 560px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-tile);
}
.auto-form-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  font-weight: 300;
  margin-bottom: 20px;
}
.auto-form-section {
  margin-bottom: 20px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}
.auto-form-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
  font-weight: 500;
  margin-bottom: 4px;
}
.auto-form-section-desc {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink4);
  margin-bottom: 12px;
}
.auto-form-field { margin-bottom: 16px; }
.auto-form-input {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--dark1);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.auto-form-input::placeholder { color: var(--ink4); }
.auto-form-textarea {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--dark1);
  color: var(--ink2);
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 140px;
}
.auto-form-textarea::placeholder { color: var(--ink4); }
.auto-form-prompt-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  margin-bottom: 8px;
  line-height: 1.5;
}
.auto-form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.auto-form-row .auto-form-field {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}
.auto-form-select {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--dark2);
  color: var(--ink2);
}
.auto-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

/* ── Narrative pipeline ────────────────────────────────────────────────── */
.auto-narrative {
  padding: 16px 0;
}
.auto-narrative-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
}
.auto-narrative-step.persona {
  background: rgba(85,107,74,0.08);
  border-left: 2px solid var(--moss);
}
.auto-narrative-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--moss);
  background: rgba(85,107,74,0.12);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.auto-narrative-body {
  flex: 1;
  min-width: 0;
}
.auto-narrative-main {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}
.auto-narrative-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink4);
  margin-top: 2px;
  line-height: 1.4;
}
.auto-narrative-connector {
  width: 1px;
  height: 12px;
  background: var(--border);
  margin-left: 24px;
}

/* ── Prompt transparency ───────────────────────────────────────────────── */
.auto-prompt-section {
  padding: 8px 0 12px;
}
.auto-prompt-toggle {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--moss);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.auto-prompt-toggle:hover {
  color: var(--ink);
}
.auto-prompt-body {
  margin-top: 10px;
  padding: 14px;
  background: var(--dark1);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.auto-prompt-body.hidden { display: none; }
.auto-prompt-summary {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.6;
  margin-bottom: 10px;
}
.auto-prompt-raw-toggle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
}
.auto-prompt-raw-toggle:hover { color: var(--ink2); }
.auto-prompt-raw {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink3);
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}
.auto-prompt-raw.hidden { display: none; }

/* ── Checkbox grid (create form) ───────────────────────────────────────── */
.auto-checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 8px;
}
.auto-checkbox {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink2);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 0;
}
.auto-checkbox input[type="checkbox"] {
  accent-color: var(--moss);
  width: 14px;
  height: 14px;
}

/* ── Schema picker (searchable dropdown) ───────────────────────────────── */
.auto-schema-picker {
  position: relative;
  margin-top: 6px;
}
.auto-pick-input {
  width: 100%;
  box-sizing: border-box;
}
.auto-pick-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--dark3);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 10;
}
.auto-pick-dropdown.hidden { display: none; }
.auto-pick-item {
  padding: 7px 12px;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--ink2);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.auto-pick-item:hover {
  background: var(--surface2);
  color: var(--ink);
}
.auto-pick-group {
  font-size: 10px;
  color: var(--ink4);
  margin-left: 8px;
}

/* ── Capture mode radio cards ──────────────────────────────────────────── */
.auto-capture-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.auto-capture-card {
  flex: 1;
  min-width: 180px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--dark1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s;
}
.auto-capture-card:hover {
  border-color: rgba(148,174,136,0.4);
}
.auto-capture-card.selected {
  border-color: var(--moss);
  background: rgba(85,107,74,0.06);
}
.auto-capture-card input[type="radio"] {
  display: none;
}
.auto-capture-card-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.auto-capture-card-desc {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink4);
  line-height: 1.4;
}

/* ── Effect cards (pipeline steps) ────────────────────────────────────── */
.auto-effects-list {
  display: flex;
  flex-direction: column;
}
.auto-effect-card {
  position: relative;
  border: 1px solid var(--border);
  border-left: 3px solid var(--moss);
  border-radius: 6px;
  background: var(--dark1);
  padding: 0;
  margin-bottom: 0;
}
.auto-effect-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: var(--seam);
  background: rgba(85,107,74,0.04);
}
.auto-effect-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--moss);
  color: var(--moss);
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auto-effect-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink3);
  flex: 1;
}
.auto-effect-type-select {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink2);
  padding: 3px 6px;
  cursor: pointer;
}
.auto-effect-type-select:focus { border-color: var(--moss); outline: none; }
.auto-effect-type-select option:disabled { color: var(--ink4); font-style: italic; }
.auto-effect-delete {
  background: none;
  border: none;
  color: var(--ink4);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.auto-effect-delete:hover { color: var(--terra); }
.auto-effect-body {
  padding: 14px;
}
.auto-effect-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  margin-bottom: 10px;
  font-style: italic;
}
.auto-effect-body .auto-form-field { margin-bottom: 12px; }
.auto-effect-body .auto-form-field:last-child { margin-bottom: 0; }
.auto-effect-body .auto-capture-cards { gap: 6px; }
.auto-effect-body .auto-capture-card { min-width: 120px; padding: 8px 10px; }

.auto-effect-connector {
  width: 1px;
  height: 14px;
  background: var(--border);
  margin: 0 auto;
}
.auto-effect-add {
  margin-top: 10px;
  align-self: flex-start;
}

/* ── Inline run result ─────────────────────────────────────────────────── */
.auto-run-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
}
.auto-run-result.hidden { display: none; }
.auto-run-result.ok {
  background: rgba(85,107,74,0.08);
  border: 1px solid rgba(85,107,74,0.2);
  color: var(--ink);
}
.auto-run-result.empty {
  background: var(--dark1);
  border: 1px solid var(--border);
  color: var(--ink3);
}
.auto-result-icon {
  font-size: 14px;
  color: var(--moss);
}
.auto-result-text {
  flex: 1;
}
.auto-result-review {
  font-size: 11px;
  flex-shrink: 0;
}

/* ── Absorber view ────────────────────────────────────────────────────── */

.absorber-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Portal (drop zone) ──
   BRUTALIST. The page IS the target: no card, no dashed frame, no rings, no
   hint copy — the statement stands alone on a flush slate, hard left against
   the page margin. Everything the old portal drew was decoration around an
   affordance that never needed it; a drop target the size of the page is a
   bigger target than a 340px box.

   Type is NOT spelled here: the statement wears the kit's .text-display role
   (display face, fluid 28→140px, uppercase) and the button is the kit's
   .ofself-btn — this block only lays them out. */

.absorber-portal {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* hard left, not centred */
  justify-content: center;
  gap: 28px;
  padding: 0 clamp(32px, 6vw, 96px);
  position: relative;
  transition: background var(--dur-fade, 0.2s) ease;
}
/* The whole slate answers the drag — a flat wash, no border, no radius. */
.absorber-portal.dragover { background: rgba(90, 107, 72, 0.07); }

.absorber-statement {
  margin: 0;
  color: var(--ink);
  max-width: 18ch;           /* let the loud face wrap into a block, not a line */
}

/* The kit's button, at the statement's own left edge — BARE. The outline
   modifier is gone (a box next to a 140px display statement reads as
   furniture): the control is the paperclip and the words, standing at soft
   ink, and hover answers with a COLOR EASE to full ink — no wash, no
   underline, just the words waking up. The base .ofself-btn already lays the
   glyph and label on one inline-flex line with its own gap. */
.absorber-choose-btn {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 14px 0;
  gap: 10px;
  color: rgb(var(--ofself-ink-rgb) / 0.6);
  font-size: var(--ofself-text-base);
  font-weight: var(--ofself-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--dur-fast, 0.15s) var(--ofself-ease-settle, ease);
}

.absorber-choose-btn svg { flex: none; }

.absorber-choose-btn:hover:not(:disabled),
.absorber-choose-btn:focus-visible {
  background: none;             /* the base skin's wash stands down too */
  color: rgb(var(--ofself-ink-rgb) / 1);
}

.absorber-history-link {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink3);
  letter-spacing: 0.5px;
}
.absorber-history-link:hover { color: var(--moss); }

/* ── Session (split: chat + proposals) ── */

.absorber-session-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: var(--seam);
  flex-shrink: 0;
}
.absorber-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink3);
  padding: 4px 0;
}
.absorber-back-btn:hover { color: var(--moss); }

.absorber-file-chips {
  display: flex;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
}
.absorber-file-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--dark3);
  color: var(--ink2);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.absorber-add-file-btn { flex-shrink: 0; }

.absorber-session-split {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.absorber-chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: var(--seam);
}
.absorber-proposals-panel {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.absorber-proposals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-lt);
  flex-shrink: 0;
}
.absorber-proposals-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink3);
}
.absorber-proposals-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Chat ── */

.absorber-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.absorber-msg {
  display: flex;
  max-width: 85%;
}
.absorber-msg.user {
  align-self: flex-end;
}
.absorber-msg.assistant {
  align-self: flex-start;
}
.absorber-bubble {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--dark3);
}
.absorber-msg.user .absorber-bubble {
  background: var(--moss);
  color: #fff;
  border-radius: 12px 12px 4px 12px;
}
.absorber-msg.assistant .absorber-bubble {
  border-radius: 12px 12px 12px 4px;
}
.absorber-bubble.streaming::after {
  content: '\u258C';
  animation: blink 0.8s step-end infinite;
  color: var(--ink3);
}
@keyframes blink { 50% { opacity: 0; } }

.absorber-phase {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  flex-shrink: 0;
}
.absorber-phase-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss);
  animation: absorber-pulse-dot 1.2s ease-in-out infinite;
}
@keyframes absorber-pulse-dot {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.absorber-phase-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink3);
  letter-spacing: 0.5px;
}

.absorber-input-wrap {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-lt);
  flex-shrink: 0;
}
.absorber-input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--dark2);
  color: var(--ink);
  outline: none;
}
.absorber-input:focus { border-color: var(--moss); }
.absorber-send-btn { flex-shrink: 0; }

/* ── Proposal cards ── */

.absorber-proposal-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--dark2);
  transition: opacity 0.2s;
}
.absorber-proposal-card.applied,
.absorber-proposal-card.rejected {
  opacity: 0.5;
}
.absorber-proposal-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.absorber-proposal-schema {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--moss);
  background: rgba(90,107,72,0.08);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.absorber-proposal-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.absorber-proposal-edit-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--terra);
  background: rgba(176,78,40,0.08);
  padding: 1px 5px;
  border-radius: 3px;
}
.absorber-proposal-desc {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: 6px;
  line-height: 1.4;
}
.absorber-proposal-entities {
  margin-bottom: 6px;
}
.absorber-proposal-entity {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink3);
  padding: 2px 0;
}
.absorber-proposal-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Data preview ──
   The card is a summary; this is what it summarises. Lives in the main panel as
   a second tab rather than a modal, so the data and the conversation about it
   can be read together. */

.absorber-panel-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-lt);
  flex-shrink: 0;
}
.absorber-panel-tabs[hidden] { display: none; }

.absorber-panel-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink4);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 10px 10px 8px;
  cursor: pointer;
}
.absorber-panel-tab:hover { color: var(--ink2); }
/* The active tab is marked by weight and an underline on the edge it shares
   with its pane, not by a fill — the strip sits directly on the content. */
.absorber-panel-tab.is-active {
  color: var(--ink1);
  border-bottom-color: var(--ink1);
}
.absorber-panel-tab-close {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--ink4);
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
}
.absorber-panel-tab-close:hover { color: var(--ink1); }

/* Both panes are mounted at once and toggled, so this has to beat the flex
   display it would otherwise inherit. */
.absorber-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.absorber-pane[hidden] { display: none; }

.absorber-preview-pane { overflow-y: auto; }

.absorber-preview-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-lt);
  flex-shrink: 0;
}
.absorber-preview-headline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.absorber-preview-title {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink1);
}
.absorber-preview-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.5;
  margin: 8px 0 0;
}
.absorber-preview-count {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink4);
  margin-top: 8px;
}

.absorber-preview-body { padding: 4px 20px 24px; }

.absorber-preview-entity {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-lt);
}
.absorber-preview-entity:last-child { border-bottom: none; }

.absorber-preview-entity-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
/* Numbered because the card said "+6 more" and the first question is which. */
.absorber-preview-idx {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  min-width: 18px;
}
.absorber-preview-entity-title {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink1);
}
.absorber-preview-schema {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink4);
  letter-spacing: 0.5px;
}

/* Two columns so keys line up down the pane and a row can be scanned for the
   one field that matters. Wraps to stacked when there is no room for both. */
.absorber-preview-fields {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr;
  gap: 4px 14px;
  margin: 0 0 0 26px;
}
.absorber-preview-key {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  padding-top: 2px;
  overflow-wrap: anywhere;
}
.absorber-preview-val {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink2);
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.absorber-preview-scalar { font-family: var(--font-mono); font-size: 11px; }
.absorber-preview-null { color: var(--ink4); font-style: italic; }

/* Nested values keep their shape rather than being flattened — what is being
   approved is the structure, not a prettied summary of it. */
.absorber-preview-json {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink2);
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
  padding: 8px 10px;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
}

.absorber-preview-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  padding: 12px 0;
}

@media (max-width: 720px) {
  .absorber-preview-fields { grid-template-columns: 1fr; gap: 2px; margin-left: 0; }
}

/* The overflow line is a button now — it is the thing naming what the card is
   hiding, so it is what people click first. Styled as text, because it sits in
   a list of titles and a button chrome there would read as a fourth entity. */
.absorber-proposal-more {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 2px 0;
  font: inherit;
  color: var(--ink4);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.absorber-proposal-more:hover { color: var(--ink1); }

/* Which card the open pane belongs to. An outline rather than a fill or a bar,
   so it reads on the card that is already bordered. */
.absorber-proposal-card.is-previewing {
  outline: 1px solid var(--ink3);
  outline-offset: -1px;
}
.absorber-proposal-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  letter-spacing: 0.5px;
}

/* ── The file's own heading ──
   Was the process dialog's; the dialog is gone and the mapping review kept the
   type, because "check what this becomes" and the filename underneath are the
   same two lines doing the same job on a page instead of over one. */

.absorber-process-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 6px;
}
.absorber-process-file {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: 20px;
}
.absorber-process-field {
  margin-bottom: 16px;
}
/* Shown in place of the mapping table when the schema's shape can't be read —
   the file still processes, the absorber just reads it instead. */
.absorber-schema-unavailable {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink4);
  line-height: 1.5;
}

/* ── History ── */

.absorber-history {
  max-width: 600px;
  margin: 0 auto;
  padding: 48px 24px;
}
.absorber-history-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.absorber-history-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
}
.absorber-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.absorber-history-item {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.absorber-history-item:hover {
  border-color: var(--moss);
}
.absorber-history-files {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}
.absorber-history-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink3);
}

.absorber-empty {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink4);
  font-style: italic;
  padding: 24px;
  text-align: center;
}

/* ── Integrations View ───────────────────────────────────────────────────── */

/* ── Plugins: the block register ──────────────────────────────────────────
   BRUTALIST. No page frame, no centred column, no cards. Every plugin is one
   full-width band divided into three full-height cells by hairline seams:
   the icon, the name, the action. The bands stack flush — the seam between
   two rows IS the only separation, so there are no gaps and no radii.

   The badge row is gone. INTEGRATION / NOT CONNECTED / BUILT IN / RUNNABLE all
   restated what the action cell already says in the one place you act on it. */
.int-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Not the old subtitle — this says whose graph the writes land in, and only
   appears when that is not you. */
.int-actingbar {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink3);
  background: var(--moss-pale);
  border-bottom: var(--seam);
  padding: 10px clamp(16px, 3vw, 32px);
}
.int-actingbar strong { color: var(--moss); font-weight: 500; }

.int-rows { display: flex; flex-direction: column; }
.int-rows-note {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink4);
  padding: 14px clamp(16px, 3vw, 32px);
  border-bottom: var(--seam);
}

/* ONE number drives the band. The icon cell takes its WIDTH from the same
   variable the row takes its HEIGHT from, and the row's height is fixed rather
   than a minimum — so the icon block is square by construction and cannot be
   pulled into a rectangle by a long description. Change --int-row-h alone to
   resize the whole register. */
.int-row-group {
  --int-row-h: 132px;
  border-bottom: var(--seam);
}

.int-row {
  display: flex;
  align-items: stretch;      /* every cell runs the full band height */
  height: var(--int-row-h);
}

/* the icon, in its own square cell, divided from the name by a seam */
.int-row__icon {
  flex: 0 0 var(--int-row-h);   /* = the row height, so the block is square */
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--seam);
  color: var(--ink3);
}
/* the glyphs are authored at 18px; in a 132px block they need to carry it */
.int-row__icon svg { width: 46px; height: 46px; }
.int-row.is-connected .int-row__icon { color: var(--moss); }

/* the name — the band's own body, and the hit area that opens the detail */
.int-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 clamp(24px, 3.5vw, 44px);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  overflow: hidden;          /* text can never push the band off square */
  transition: background var(--dur-fade, 0.2s) ease;
}
.int-row__body.is-static { cursor: default; }
.int-row__body:not(.is-static):hover { background: rgb(var(--ofself-ink-rgb, 17 17 17) / 0.03); }

/* THE BAND SPEAKS THE DISPLAY FACE (owner call 2026-08-23). Space Grotesk —
   --font-serif is the kit's display face here (tokens.css), the ecosystem's
   brutalist voice — for BOTH lines, so the row reads as one register instead
   of a grotesk name over a UI-sans gloss. The NAME goes uppercase: at this
   size the caps are the register's mark, and the tracking is what keeps them
   from setting solid. The DESCRIPTION stays sentence case — it is prose, and
   prose in caps is a headline pretending to be a sentence. */
.int-row__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.2;
}
.int-row__desc {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink4);
  line-height: 1.35;
}

/* the action, a full-height block at the right edge */
.int-row__action {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  border-left: var(--seam);
}
.int-row__act {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 0 36px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink2);
  text-decoration: none;
  transition: background var(--dur-fade, 0.2s) ease, color var(--dur-fade, 0.2s) ease;
}
.int-row__act:hover:not(:disabled) { background: var(--ink); color: var(--ink-inv); }
.int-row__act:disabled { cursor: not-allowed; opacity: 0.45; }

/* connected reads as a STATE, not an invitation — moss, and it stays moss on
   hover rather than inviting a click that would look like "connect again" */
.int-row__act.is-connected { color: var(--moss); background: var(--moss-pale); }
.int-row__act.is-connected:hover { background: var(--moss); color: var(--ink-inv); }

/* Narrow windows: one variable resizes the band, and the icon block stays
   square on its own because its width is that same variable. */
@media (max-width: 1100px) {
  .int-row-group { --int-row-h: 104px; }
  .int-row__icon svg { width: 36px; height: 36px; }
  .int-row__act,
  .int-row__state { min-width: 160px; padding: 0 24px; font-size: 11.5px; }
  .int-row__title { font-size: 17px; }
}

/* the unfolded panel — indented past the icon cell so the seam still reads */
.int-row__detail {
  padding: 20px clamp(16px, 3vw, 28px) 24px;
  margin-left: var(--int-row-h);
  border-top: var(--seam);
  background: rgb(var(--ofself-ink-rgb, 17 17 17) / 0.015);
}

/* A connection that exists but must not be used until it is fixed. */
.int-card-blocked {
  font-family: var(--font-sans); font-size: 11px; line-height: 1.5;
  color: var(--ink3); background: var(--terra-pale);
  border: 1px solid var(--terra-lt); border-radius: 6px;
  padding: 8px 10px; margin-top: 8px;
}

/* The connection, as the connection describes itself. Every rule here is
   generic: the fields it lays out come from a declared template, so a provider
   that adds one needs no CSS. */
.int-conn-summary {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink3);
}
.int-conn-summary strong { color: var(--ink2); font-weight: 500; }
.int-conn-kind {
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink4);
}
.int-conn-sep { color: var(--ink4); }
.int-conn-note {
  font-family: var(--font-sans); font-size: 11px; line-height: 1.45;
  color: var(--ink4); margin-top: 6px;
}

.int-conn-fields {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-lt);
}
.int-conn-field { display: flex; flex-direction: column; gap: 4px; }
.int-conn-field-label {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink4);
}
.int-conn-control, .int-conn-values {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.int-conn-select, .int-conn-input {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink3);
  background: none; border: 1px solid var(--border-lt); border-radius: 5px;
  padding: 3px 7px; min-width: 170px;
}
.int-conn-select:focus, .int-conn-input:focus {
  outline: none; border-color: var(--moss); color: var(--ink2);
}
.int-conn-select:disabled, .int-conn-input:disabled { opacity: 0.55; }
.int-conn-mini {
  background: none; border: 1px solid var(--border-lt); border-radius: 4px;
  padding: 2px 7px; cursor: pointer;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink4);
}
.int-conn-mini:hover { color: var(--ink2); border-color: var(--border); }
.int-conn-mini:disabled { cursor: default; opacity: 0.55; }
.int-conn-hint {
  font-family: var(--font-sans); font-size: 11.5px; color: var(--ink3);
}

/* Custom sync start date — an escape hatch beside the default window. */
.int-since {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border-lt);
}
.int-since-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink4);
}
.int-since-input {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink3); background: none;
  border: 1px solid var(--border-lt); border-radius: 5px;
  padding: 3px 7px;
}
.int-since-input:focus { outline: none; border-color: var(--moss); color: var(--ink2); }
.int-since-hint { font-family: var(--font-sans); font-size: 11px; color: var(--ink4); }

/* Tabs */
.int-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-lt);
  margin-bottom: 24px;
}

.int-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.int-tab:hover { color: var(--ink3); }

/* Content */
.int-content { min-height: 200px; }

.int-empty {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink4);
  font-style: italic;
  text-align: center;
  padding: 48px 24px;
}

.int-section-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink4);
  margin: 28px 0 12px;
}

/* The card dress (.int-card / .int-grid / .int-card-head / .int-card-icon /
   .int-card-name / .int-card-desc / .int-badge*) retired 2026-08-16 with the
   badge row — the block register above replaced all of it. */

.int-card-identity {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink3);
  margin: 0 0 8px;   /* the 44px icon indent went with the card */
}

/* Services / sync rows */
.int-services {
  margin: 12px 0 0 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.int-sync-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.int-svc-name {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink3);
  min-width: 64px;
}

.int-svc-meta {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink4);
}

.int-sync-btn {
  font-size: 10px !important;
  padding: 2px 10px !important;
}

.int-progress-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--moss);
}

.int-progress-bar {
  height: 3px;
  background: var(--dark3);
  border-radius: 2px;
  margin: 2px 0 4px 44px;
  overflow: hidden;
}

.int-progress-fill {
  height: 100%;
  background: var(--moss);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Actions */
.int-card-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 44px;
}

.int-unlink-btn {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--terra);
  cursor: pointer;
  padding: 2px 4px;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.15s;
}

.int-unlink-btn:hover { opacity: 1; }

.int-connect-btn {
  font-size: 11px !important;
  padding: 5px 16px !important;
  text-decoration: none;
}

.int-goto-btn {
  font-size: 10px !important;
}

/* Username link form */
.int-username-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.int-username-input {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink2);
  width: 140px;
  outline: none;
  transition: border-color 0.15s;
}

.int-username-input:focus { border-color: var(--moss); }

/* Takeout */
.int-takeout {
  margin: 12px 0 0 44px;
  padding-top: 10px;
  border-top: 1px solid var(--border-lt);
}

.int-takeout-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink4);
  margin-bottom: 6px;
}

.int-takeout-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.int-takeout-upload {
  cursor: pointer;
  font-size: 10px !important;
}

.int-takeout-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--moss);
}

/* ── plugins tab ── */
.int-plugin-contract {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-lt);
}

.int-plugin-contract-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.int-plugin-contract-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink3);
  min-width: 46px;
}

.int-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink2);
  background: var(--dark3);
  border-radius: 4px;
  padding: 2px 8px;
}

.int-chip-muted { color: var(--ink4); }

.int-plugin-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.int-plugin-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  flex: 1;
}

.int-plugin-field-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink3);
}

.int-plugin-input {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink2);
  background: var(--dark3);
  border: 1px solid var(--border-lt);
  border-radius: 6px;
  padding: 6px 8px;
}

.int-plugin-result {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink2);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-lt);
}

.int-plugin-result-err { color: var(--rust, var(--ink3)); }

.int-plugin-result-wait { color: var(--ink2); }

.int-plugin-result-wait a {
  color: var(--moss);
  text-decoration: underline;
}

.int-plugin-result-sub {
  font-size: 10px;
  color: var(--ink4);
  margin-top: 4px;
}


/* one-list plugin cards */
.int-plugin-run {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-lt);
}


.auto-run-status.wait { color: var(--ink4); }

.auto-run-params {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  margin-top: 2px;
}

/* card sections: what it's connected to, then what you can run */
.int-card-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-lt);
}

.int-card-section-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink3);
  margin-bottom: 10px;
}

/* the run block sits inside its section, not as a card of its own */
.int-plugin-run { margin-top: 0; padding-top: 0; border-top: none; }


.auto-run-approve {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--moss);
  text-decoration: underline;
  margin-left: 6px;
}

.auto-run-expired {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink4);
  margin-left: 6px;
}


.auto-params-heading, .int-params-heading {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink3);
  margin: 10px 0 6px;
}

/* ── Template picker ──────────────────────────────────────────────────────
   The ten built-ins were rows on the list until they stopped pretending to be
   automations. This is where they went: a starting point for a create. */
.auto-pick {
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: min(560px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.auto-pick-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3);
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--border-lt);
}
.auto-pick-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; }
.auto-pick-item {
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-lt);
  padding: 12px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--ink);
  font: inherit;
}
.auto-pick-item:last-child { border-bottom: 0; }
.auto-pick-item:hover:not(:disabled) { background: var(--dark3); }
.auto-pick-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.auto-pick-item.is-used { cursor: default; opacity: 0.5; }
.auto-pick-item.is-busy { opacity: 0.6; }
.auto-pick-name { font-size: 14px; }
.auto-pick-desc { font-size: 12px; color: var(--ink3); line-height: 1.45; }
.auto-pick-used {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--ink4);
}
.auto-pick-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border-lt);
}
.auto-pick-blank {
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  margin-right: auto;
}
.auto-pick-err { color: var(--terra); font-size: 12px; margin-right: auto; }

/* Reachable for the first time now that templates no longer pad the list. */
.auto-list-empty { padding: 34px 22px; text-align: center; }
.auto-list-empty-title {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink2);
}
.auto-list-empty-body {
  font-size: 12.5px;
  color: var(--ink4);
  margin-top: 5px;
  line-height: 1.5;
}
/* ── Schedule on a plugin card ────────────────────────────────────────────
   The card said what the plugin IS and never whether it was running. */
.int-sched {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0 2px;
}
.int-sched-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink2);
}
.int-sched-off { color: var(--ink4); font-style: italic; }
.int-sched-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink4); flex: none; }
.int-sched-dot.on { background: var(--moss-mid, var(--accent)); }
.int-sched-cron {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink4);
  background: var(--dark3);
  padding: 1px 5px;
  border-radius: 3px;
}
.int-sched-last { font-size: 11.5px; color: var(--ink4); }

/* ── Run sheet: once, or repeating ────────────────────────────────────── */
.int-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}
.int-sheet {
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: min(430px, 92vw);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.int-sheet-head {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
}
.int-sheet-opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.int-sheet-repeat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 0 2px 24px;
  border-left: 1px solid var(--border-lt);
  margin-left: 6px;
}
.int-sheet-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.int-sheet-at { font-size: 12.5px; color: var(--ink3); }
.int-sheet-select, .int-sheet-time, .int-sheet-cron {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 5px 7px;
}
.int-sheet-cron { font-family: var(--font-mono); font-size: 12px; flex: 1; min-width: 150px; }
.int-sheet-tz { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink4); }
/* The sentence is the validation: if it does not say what you meant, the
   expression is wrong. */
.int-sheet-words { font-size: 12.5px; color: var(--moss-mid, var(--accent)); min-height: 17px; }
.int-sheet-foot { display: flex; align-items: center; gap: 9px; justify-content: flex-end; margin-top: 4px; }
.int-sheet-err { color: var(--terra); font-size: 12px; margin-right: auto; }
.int-sheet-cancel { background: none; border: 0; color: var(--ink3); cursor: pointer; font: inherit; font-size: 13px; }

/* ── Cursor position ──────────────────────────────────────────────────────
   last_synced is where the sync has GOT TO, not when it last ran. Rendered as
   "synced 2h ago" it read as the latter, and a draining backlog looked stalled. */
.int-cursor { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.int-cursor-none { color: var(--ink4); }
.int-cursor-kind {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink4);
}
.int-cursor-current { color: var(--moss-mid, var(--accent)); }
/* When it last RAN, next to where the data got to. Same treatment as the other
   kind labels deliberately — it is a peer fact, not a subtitle of the cursor. */
.int-cursor-ran {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink4);
}
.int-cursor-behind { color: var(--terra-lt); }

/* Disconnect belongs to the account, and sat under the scope fields reading as
   an action on the organisation picker above it. Pinned to the connection block
   and set apart by a rule, so what it ends is unambiguous. */
.int-card-actions-conn {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-lt);
  justify-content: flex-start;
}
/* ── Create an automation ─────────────────────────────────────────────────
   A plugin, its declared inputs, a schedule, a name. The form lives here
   rather than on the plugin card because there are several of these per
   connection and a card is singular. */
.at-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
  backdrop-filter: blur(2px); padding: 20px;
}
.at-form {
  background: var(--dark2); border: 1px solid var(--border); border-radius: 6px;
  width: min(480px, 94vw); max-height: 88vh; overflow-y: auto;
  padding: 20px; display: flex; flex-direction: column; gap: 11px;
}
.at-form-head { font-family: var(--font-serif); font-size: 18px; color: var(--ink); }
.at-field { display: flex; flex-direction: column; gap: 4px; }
.at-label {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink3);
}
.at-label-sm { font-size: 12px; color: var(--ink3); }
.at-section { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border-lt); }
.at-input {
  background: var(--dark); border: 1px solid var(--border); border-radius: 4px;
  color: var(--ink); font: inherit; font-size: 13.5px; padding: 6px 8px; width: 100%;
}
.at-input-sm { width: auto; }
.at-cron { font-family: var(--font-mono); font-size: 12.5px; }
.at-row-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.at-at { font-size: 12.5px; color: var(--ink3); }
/* The sentence under the field IS the validation. */
.at-words { font-size: 12.5px; color: var(--moss-mid, var(--accent)); min-height: 17px; }
.at-form-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.at-cancel { background: none; border: 0; color: var(--ink3); cursor: pointer; font: inherit; font-size: 13px; }
.at-err { color: var(--terra); font-size: 12px; margin-right: auto; }

/* ── What connecting needs ────────────────────────────────────────────────
   Revealed by the row's own "connect", so the list stays scannable and the
   requirement appears when you act on it rather than sitting under every row
   that happens to have one. */
.int-connect-need { display: flex; flex-direction: column; gap: 8px; }
.int-connect-need-label { font-size: 12.5px; color: var(--ink3); }

/* ── The mapping review ───────────────────────────────────────────────────
   A thousand rows are a thousand copies of four decisions. These are the four,
   checked against real rows, before a node exists. */
.absorber-map { max-width: 620px; }
.absorber-map-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0 10px; }
.absorber-map-table th {
  text-align: left; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink4);
  font-weight: 400; padding-bottom: 5px;
}
.absorber-map-table td { padding: 4px 8px 4px 0; border-top: 1px solid var(--border-lt); color: var(--ink2); }
.absorber-map-arrow { color: var(--ink4); }
.absorber-map-field {
  background: var(--dark); border: 1px solid var(--border); border-radius: 4px;
  color: var(--ink); font: inherit; font-size: 12px; padding: 3px 5px; max-width: 170px;
}
/* A column going nowhere is stated, not silently dropped. */
.absorber-map-dropped { color: var(--ink4); text-decoration: line-through; }
.absorber-map-quiet { color: var(--ink4); }
/* The declared type, beside the field rather than discovered by a rejection. */
.absorber-map-type { font-size: 11px; color: var(--ink4); white-space: nowrap; }
/* "60 ← 1 min": the value that gets written, and the text it was read from.
   Shown only where they differ — a string field converts nothing and says so by
   staying quiet. */
.absorber-map-from { color: var(--ink4); font-size: 11.5px; }
/* A cell its field cannot hold, and the reason, on the row it happens on. */
.absorber-map-bad { color: var(--terra); }
.absorber-map-because { font-size: 11.5px; opacity: 0.85; }
/* A required field nothing points at is a row of the table: the hole is where
   the mapping is, not in a sentence underneath it. */
.absorber-map-missing td { background: rgba(176,78,40,0.06); }
.absorber-map-nothing { font-family: var(--font-mono); color: var(--terra); }
.absorber-map-missing-field { color: var(--ink2); }
.absorber-map-note { font-size: 12px; color: var(--ink3); margin: 4px 0 8px; }
.absorber-map-samplehead {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink4); margin: 12px 0 6px;
}
.absorber-map-sample {
  border: 1px solid var(--border-lt); border-radius: 4px;
  padding: 7px 9px; margin-bottom: 5px; background: var(--dark);
}
.absorber-map-sample-title { font-size: 13px; color: var(--ink); }
.absorber-map-sample-json { font-size: 11px; color: var(--ink3); margin-top: 2px; word-break: break-all; }
.absorber-map-status { font-size: 12.5px; color: var(--ink3); margin-top: 8px; }
/* Whose proposal you are looking at — the absorber's reading, or the fallback
   string match while it is still thinking. */
.absorber-map-by { font-size: 12px; color: var(--ink3); margin: 2px 0 10px; }

/* ── The mapping review, as a page ────────────────────────────────────────
   It was a dialog laid over an empty drop zone — spending the whole screen to
   dim nothing, while the work itself (a table, three samples, a set of
   corrections) was squeezed into 620px. */
.absorber-map-page { max-width: 860px; margin: 0 auto; padding: 26px 30px 90px; }
.absorber-map-head { margin-bottom: 18px; }
.absorber-map-lede {
  font-size: 14px; color: var(--ink2); line-height: 1.55;
  max-width: 64ch; margin: 10px 0 18px;
}
.absorber-map-page .absorber-map-table { font-size: 13px; }
.absorber-map-page .absorber-map-field { max-width: 220px; font-size: 12.5px; }

/* Two paths, each saying what it does rather than what it is called. */
.absorber-map-choice {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: var(--seam);
}
.absorber-map-option { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.absorber-map-option-why { font-size: 12.5px; color: var(--ink3); line-height: 1.5; max-width: 44ch; }

/* The schema choice and the way out of it, on one line. "Is this a plain table
   at all?" is worth asking before someone reads five mappings and three sample
   rows — at the bottom of the page they have already done the work it undoes. */
.absorber-map-schema-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.absorber-map-schema-row .auto-form-select { flex: 0 1 320px; }
.absorber-map-schema-row .surface-action-btn { margin-bottom: 1px; white-space: nowrap; }

/* Values a field cannot hold. Stated where the count of unused columns is
   stated, in the same voice — the page's job is to say what will happen. */
.absorber-map-typewarn {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  background: var(--warn-bg, rgba(176, 122, 46, 0.09));
  color: var(--ink2); font-size: 12.5px; line-height: 1.6;
  display: flex; flex-direction: column; gap: 6px;
}

/* Said where the consequence is, not in a label. A window set on a scheduled run
   looks like it is working — it reports nodes every time — so the note has to be
   legible rather than a footnote. */
.int-params-note {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink2);
  font-style: italic;
  margin: 6px 0 10px;
}