/* Add-connection dialog (two steps) + the Data connections list. */

.cxn-modal {
  max-width: 700px;
  width: calc(100vw - 40px);
  padding: 0;                       /* header / body / footer own their insets */
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 760px);
}

/* header — a breadcrumb, so the chosen connector stays on screen through step 2 */
.cxn-modal-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cxn-crumb {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-family: var(--display); font-size: 15px; color: var(--text);
}
.cxn-crumb-back {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--muted);
}
.cxn-crumb-back:hover { color: var(--accent); }
.cxn-crumb-sep { color: var(--faint); }
.cxn-crumb-here { color: var(--text); }
.cxn-crumb-mark {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  border-radius: 5px; background: var(--tile);
}
.cxn-crumb-mark svg { width: 13px; height: 13px; }

.cxn-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }

.cxn-modal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--border);
  background: var(--depth);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.cxn-foot-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.cxn-foot-actions { display: flex; gap: 8px; margin-left: auto; }

/* ── step 1: the connector grid ──────────────────────────────────────────── */

.cxn-lede {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  margin: 0 0 16px; max-width: 56ch;
}
.cxn-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.cxn-tile-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s, transform .15s;
}
.cxn-tile-card:hover {
  border-color: var(--bhi); background: var(--lift); transform: translateY(-1px);
}
.cxn-tile-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cxn-tile-mark {
  width: 30px; height: 30px; margin-bottom: 6px;
  display: grid; place-items: center;
  border-radius: 7px; background: var(--tile);
}
.cxn-tile-name { font-size: 13px; color: var(--text); }
.cxn-tile-cat  { font-family: var(--label-font, var(--mono)); font-size: max(10px, var(--label-min-size, 0px)); letter-spacing: var(--label-tracking, .05em);
                 text-transform: var(--label-case, uppercase); color: var(--faint); }
.cxn-tile-plus {
  position: absolute; top: 10px; right: 12px;
  color: var(--faint); font-size: 15px; line-height: 1;
}
.cxn-tile-card:hover .cxn-tile-plus { color: var(--accent); }

/* ── step 2: the form ────────────────────────────────────────────────────── */

/* what actually breaks a first connection attempt, per connector */
/* Kept neutral on purpose: the primary action is the only accent in the dialog,
   so the guidance informs without competing with it. */
.cxn-preflight {
  background: var(--depth);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 13px 16px; margin-bottom: 20px;
}
.cxn-preflight h4 {
  font-family: var(--label-font, var(--mono)); font-size: max(10.5px, var(--label-min-size, 0px)); letter-spacing: var(--label-tracking, .07em);
  text-transform: var(--label-case, uppercase); color: var(--faint);
  margin: 0 0 7px; font-weight: 500;
}
.cxn-preflight ul { margin: 0; padding-left: 16px; }
.cxn-preflight li {
  font-size: 12.5px; color: var(--muted); line-height: 1.65; margin-bottom: 3px;
}

.cxn-group { margin-bottom: 22px; }
.cxn-group:last-child { margin-bottom: 4px; }
.cxn-group-label {
  font-family: var(--label-font, var(--mono)); font-size: max(10.5px, var(--label-min-size, 0px)); letter-spacing: var(--label-tracking, .07em);
  text-transform: var(--label-case, uppercase); color: var(--faint);
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* label left, control right — reads as a settings sheet, not a signup form */
.cxn-field {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px; align-items: start; margin-bottom: 12px;
}
.cxn-field > label { font-size: 13px; color: var(--text); padding-top: 8px; }
.cxn-req { color: var(--rose); }
.cxn-field input {
  width: 100%;
  background: var(--lift);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text); font-family: var(--sans); font-size: 13px;
  padding: 8px 11px;
}
.cxn-field input:focus { outline: none; border-color: var(--accent); }
.cxn-field input::placeholder { color: var(--faint); }
.cxn-hint { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 5px; }

.cxn-form-error { font-size: 12.5px; color: var(--rose); line-height: 1.5; }

@media (max-width: 620px) {
  .cxn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cxn-field { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cxn-field > label { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cxn-tile-card { transition: none; }
  .cxn-tile-card:hover { transform: none; }
}

/* ══ Data connections list ═══════════════════════════════════════════════════
   A record table, modelled on Hex's Data sources screen: one row per
   connection, the config that identifies it sitting under the name, the brand
   mark carrying the type, and actions tucked behind an overflow menu so the
   list reads quietly. Theme tokens only, so it re-skins with every theme.    */

.cxn-body { padding: 22px 28px 34px; }

.cxn-section-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.cxn-section-title {
  font-family: var(--display); font-size: 15px; color: var(--text);
}
.cxn-section-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* ── the table ───────────────────────────────────────────────────────────── */

/* No `overflow: hidden` here, however tempting: the row action menu is absolutely
   positioned inside a row, and clipping it cut off everything below the first
   item. The corners are rounded on the first and last rows instead, which is all
   the clipping was ever doing (containing the header fill and the hover fill). */
.cxn-rows {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.cxn-rows .cxn-row:first-child {
  border-top-left-radius: calc(var(--r) - 1px);
  border-top-right-radius: calc(var(--r) - 1px);
}
.cxn-rows .cxn-row:last-child {
  border-bottom-left-radius: calc(var(--r) - 1px);
  border-bottom-right-radius: calc(var(--r) - 1px);
}

.cxn-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 132px 132px 44px;
  /* the name cell sets the row height; everything else centres against it */
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.cxn-row > .cxn-cell-name { align-self: start; }
.cxn-row:first-child { border-top: 0; }

/* column headers — mono + uppercase, the same register the Data Explorer uses
   for its type sigils, so the two data screens read as one family */
.cxn-head {
  padding: 9px 18px;
  background: var(--depth);
  align-items: center;
}
.cxn-head span {
  font-family: var(--label-font, var(--mono)); font-size: max(10.5px, var(--label-min-size, 0px)); letter-spacing: var(--label-tracking, .07em);
  text-transform: var(--label-case, uppercase); color: var(--faint);
}

.cxn-rows .cxn-row:not(.cxn-head):hover { background: var(--lift); }

.cxn-cell { display: flex; align-items: center; min-height: 22px; font-size: 13px; }
.cxn-cell-name { min-width: 0; }

.cxn-row-name {
  font-size: 13.5px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cxn-row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* the signature: configuration as label/value pairs, so a row is a readable
   record of what this connection actually points at */
.cxn-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 190px));
  gap: 4px 26px; margin-top: 9px;
}
.cxn-facts div { min-width: 0; }
.cxn-facts dt {
  font-size: max(10.5px, var(--label-min-size, 0px)); letter-spacing: var(--label-tracking, .05em); text-transform: var(--label-case, uppercase);
  color: var(--faint); font-family: var(--label-font, var(--mono));
}
.cxn-facts dd {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* type: brand mark + name, the one place colour is allowed in the row */
.cxn-type { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }
.cxn-type-mark {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 5px; background: var(--tile);
}
.cxn-type-mark svg { width: 14px; height: 14px; }

.cxn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: 13px;
}
.cxn-link:hover { text-decoration: underline; }
.cxn-muted { color: var(--faint); font-size: 12.5px; }

.cxn-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.cxn-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cxn-status.is-live { color: var(--emerald); }
.cxn-status.is-down { color: var(--faint); }
.cxn-status.is-busy { color: var(--accent); }

/* ── overflow menu ───────────────────────────────────────────────────────── */

.cxn-cell-menu { position: relative; justify-content: flex-end; }

.cxn-menu-btn {
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--faint); cursor: pointer; padding: 4px 5px;
  display: grid; place-items: center;
}
.cxn-menu-btn:hover { color: var(--text); background: var(--lift); border-color: var(--border); }
.cxn-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Face, edge, corner, shadow, items and hover come from the dropdown system in
   app.css — keep only what's specific to this row menu. */
.cxn-menu {
  top: 30px; right: 0; z-index: 30;
  min-width: 186px;
}
.cxn-menu[hidden] { display: none; }

/* ── empty state ─────────────────────────────────────────────────────────── */

.cxn-rows-empty {
  border: 1px dashed var(--border);
  border-radius: var(--r);
  padding: 44px 26px;
  text-align: center;
  color: var(--muted); font-size: 13px;
}
.cxn-empty-title {
  font-family: var(--display); font-size: 15px; color: var(--text); margin-bottom: 6px;
}
.cxn-rows-empty p { max-width: 460px; margin: 0 auto 18px; line-height: 1.65; }

@media (max-width: 1100px) {
  .cxn-row { grid-template-columns: minmax(0, 1fr) 150px 44px; }
  .cxn-row > .cxn-cell:nth-child(3),
  .cxn-head > span:nth-child(3) { display: none; }
}
@media (max-width: 820px) {
  .cxn-row { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 10px; }
  .cxn-head { display: none; }
  .cxn-row > .cxn-cell:nth-child(2) { grid-column: 1; }
  .cxn-facts { grid-template-columns: minmax(0, 1fr); }
}

/* ══ Imago (spec 005b) ═══════════════════════════════════════════════════════
   The add/edit dialog becomes a drawer from the right with a two-step stepper
   and stacked fields; the list reads quieter; a catalogue of the real
   connectors sits under it. Theme tokens only. */

#cxn-overlay { justify-content: flex-end; align-items: stretch; padding: 0; }
.cxn-modal {
  width: min(560px, 100vw);
  max-width: none;
  max-height: none;
  height: 100%;
  border-radius: var(--r-sheet, 16px) 0 0 var(--r-sheet, 16px);
  animation: cxnDrawerIn .18s cubic-bezier(.2, .8, .2, 1);
}
@keyframes cxnDrawerIn { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.cxn-modal-hdr { padding: 18px 22px; }
.cxn-crumb { font-size: 17px; font-weight: 600; }
.cxn-steps { padding: 14px 22px 4px; }
.cxn-modal-body { padding: 20px 22px; }
.cxn-modal-foot { border-radius: 0 0 0 var(--r-sheet, 16px); padding: 14px 22px; }
.cxn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cxn-tile-card { min-height: 96px; border-radius: var(--r-lg); padding: 16px; }
.cxn-tile-name { font-size: 14.5px; font-weight: 500; }

.cxn-field { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 14px; }
.cxn-field > label { padding-top: 0; font-size: 14px; font-weight: 500; }
.cxn-field input {
  min-height: var(--control-h, 0px);
  background: var(--field-bg, var(--lift));
  border: 1px solid var(--field-border, var(--border));
  border-radius: var(--control-r, var(--r));
  font-size: 14.5px;
  padding: 9px 12px;
}
.cxn-field input:focus { border-color: var(--focus, var(--accent)); box-shadow: 0 0 0 1px var(--focus, var(--accent)); }
.cxn-hint { font-size: 12.5px; }
.cxn-preflight li { font-size: 13.5px; }

/* the list */
.cxn-body { padding: 26px 32px 40px; }
.cxn-section-title { font-size: 17px; font-weight: 600; }
.cxn-section-sub { font-size: 13.5px; }
.cxn-rows { border-radius: var(--r-lg); }
.cxn-head { background: var(--lift); padding: 11px 20px; }
.cxn-row { padding: 16px 20px; }
.cxn-row-name { font-size: 15px; }
.cxn-row-sub { font-size: 13px; }
.cxn-cell, .cxn-link { font-size: 14px; }
.cxn-type-mark { width: 30px; height: 30px; border-radius: 8px; }
.cxn-type-mark svg { width: 17px; height: 17px; }
.cxn-menu-btn { width: 36px; height: 36px; }
.cxn-rows-empty { padding: 56px 28px; border-radius: var(--r-lg); background: var(--surface); }
.cxn-empty-title { font-size: 19px; font-weight: 600; }

/* the catalogue under the list */
.cxn-catalog { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.cxn-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cxn-catalog-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 112px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.cxn-catalog-tile:hover { border-color: var(--accent-dim); background: var(--accent-bg); }
.cxn-catalog-tile:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.cxn-catalog-tile .cxn-tile-mark { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 8px; }
.cxn-catalog-name { font-size: 15px; font-weight: 500; }
.cxn-catalog-cat { font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .cxn-modal { animation: none; } }