/* The Connections page and its three-step wizard (spec 014), drawn after
   tmp/mockups/Connect.dc.html: a compact table of connections under one
   "Connect database" button, and a drawer — Details → Test → Choose schemas —
   anchored to this panel.

   Theme tokens only; sizes read the Imago density tokens (imago.css) with a
   fallback, so the older themes keep a size of their own. Logical properties
   throughout: the page and the drawer mirror under dir="rtl".               */

.cxn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ══ the page ══════════════════════════════════════════════════════════════ */

/* The panel's own column, so `inert` can take everything behind the drawer out
   of reach in one attribute. */
.cxn-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* The mockup's header: no rule, no fill, the button on the title's baseline. */
.cxn-hdr {
  border-bottom: 0;
  background: transparent;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.cxn-hdr .panel-title { margin: 0 0 4px; }
.cxn-hdr-sub { max-width: 560px; margin: 0; }
.cxn-add { flex: none; }
.cxn-add svg { flex: none; }

.cxn-body { padding: var(--page-body-pad, 22px 28px 34px); }

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

/* imago.css (the .im-table rules) loads after this sheet, so every rule here
   that overrides one is scoped through the wrap to outrank it.
   No overflow clipping here, however tempting: the row menu is absolutely
   positioned inside a cell, and `overflow-x: auto` (what .im-table-wrap has)
   cut it off below the first item. Separate borders let the corners round
   without clipping. */
.cxn-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.cxn-table-wrap .cxn-table { border-collapse: separate; border-spacing: 0; }
.cxn-table-wrap .cxn-table th {
  background: transparent;
  font-size: var(--type-body, 13px);
  color: var(--subtle-ink, var(--muted));
}
.cxn-table-wrap .cxn-table td { vertical-align: middle; }
.cxn-table-wrap .cxn-table td:first-child { white-space: normal; width: 100%; }
.cxn-table-wrap .cxn-table td:not(:first-child), .cxn-table-wrap .cxn-table th:not(:first-child) { width: 1%; }
.cxn-table-wrap .cxn-table tbody tr:last-child td:first-child { border-end-start-radius: var(--r-lg); }
.cxn-table-wrap .cxn-table tbody tr:last-child td:last-child { border-end-end-radius: var(--r-lg); }
.cxn-table-wrap .cxn-table tbody tr:hover td { background: var(--accent-bg); }

.cxn-source { display: flex; align-items: center; gap: var(--row-gap, 12px); min-width: 0; }
.cxn-source-text { display: flex; flex-direction: column; min-width: 0; }
.cxn-source-name {
  font-weight: var(--weight-strong, 500); color: var(--text);
  overflow-wrap: anywhere;
}
.cxn-source-sub {
  font-size: var(--type-secondary, 13px); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The vendor's mark on a quiet tile; the accent variant is the picker's. */
.cxn-tile {
  width: var(--row-tile, 36px); height: var(--row-tile, 36px); flex: none;
  display: grid; place-items: center;
  border-radius: var(--r, 10px);
  background: var(--void); color: var(--accent);
}
.cxn-tile--accent { background: var(--accent); color: var(--on-accent, #fff); }
.cxn-tile--sm { width: 28px; height: 28px; border-radius: 8px; }

.cxn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-variant-numeric: tabular-nums;
}
.cxn-link:hover { text-decoration: underline; }
.cxn-link:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 4px; }
.cxn-muted { color: var(--muted); }
.cxn-table-wrap .cxn-table time { color: var(--text); }

/* "Used by" (spec 011): the count, and an unavailable row's Reconnect beside it. */
.cxn-usage { display: inline-flex; align-items: baseline; gap: 12px; }

/* The dialog the count opens: named boards, then what it cannot name. */
.cxn-usage-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.cxn-usage-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 14px; font-size: var(--type-body, 14px);
}
.cxn-usage-list li + li { border-top: 1px solid var(--border); }
.cxn-usage-name { min-width: 0; text-align: start; color: var(--text); overflow-wrap: anywhere; }
button.cxn-usage-name { color: var(--accent); }
.cxn-usage-list time { flex: none; font-size: var(--type-secondary, 13px); }
.cxn-usage-hidden, .cxn-usage-foot {
  margin: 12px 0 0; font-size: var(--type-secondary, 13px); line-height: 1.5;
}
.cxn-usage-hidden { color: var(--text); }
.cxn-usage-foot { color: var(--muted); }
/* Under the table: the boards no row's count includes. */
.cxn-usage-page-note {
  margin: 10px 2px 0; font-size: var(--type-secondary, 13px); line-height: 1.5; color: var(--muted);
}

/* ── the row menu ────────────────────────────────────────────────────────── */

.cxn-col-menu { text-align: end; }
.cxn-num { font-variant-numeric: tabular-nums; }
.cxn-menu-anchor { position: relative; display: inline-flex; }
.cxn-menu-btn {
  width: max(32px, var(--touch-min, 0px)); height: max(32px, var(--touch-min, 0px));
  background: none; border: 1px solid transparent; border-radius: var(--r, 8px);
  color: var(--muted); cursor: pointer;
  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(--focus, 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: calc(100% + 4px); inset-inline-end: 0; z-index: 30;
  min-width: 186px;
}
.cxn-menu[hidden] { display: none; }
.cxn-menu button { text-align: start; }

/* ── loading and empty ───────────────────────────────────────────────────── */

.cxn-loading {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}
.cxn-skel-row {
  display: flex; align-items: center; gap: var(--row-gap, 12px);
  padding: var(--row-pad-y, 12px) var(--row-pad-x, 16px);
  border-top: 1px solid var(--border);
}
.cxn-skel-row:first-child { border-top: 0; }
.cxn-skel-tile { width: var(--row-tile, 36px); height: var(--row-tile, 36px); flex: none; }
.cxn-skel-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cxn-skel-line { height: 12px; width: 40%; }
.cxn-skel-line.is-short { width: 22%; }

.cxn-empty-title { margin: 0; font: 600 var(--type-section, 16px)/1.35 var(--display); color: var(--text); }
.cxn-empty-text { margin: 0; color: var(--muted); max-width: 52ch; line-height: 1.55; }

/* ── phone width: each row a card ────────────────────────────────────────── */

@media (max-width: 820px) {
  .cxn-table-wrap .cxn-table, .cxn-table-wrap .cxn-table tbody, .cxn-table-wrap .cxn-table td { display: block; width: auto; }
  .cxn-table-wrap .cxn-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .cxn-table-wrap .cxn-table tr {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 24px;
    padding: var(--row-pad-y, 12px) var(--row-pad-x, 16px);
    border-bottom: 1px solid var(--border);
  }
  .cxn-table-wrap .cxn-table tbody tr:last-child { border-bottom: 0; }
  .cxn-table-wrap .cxn-table td { padding: 0; border: 0; background: none; }
  .cxn-table-wrap .cxn-table td:first-child { flex: 1 0 100%; padding-inline-end: 44px; }
  .cxn-table-wrap .cxn-table td[data-label]:not(:first-child) {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: auto;
  }
  .cxn-table-wrap .cxn-table td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    font-size: var(--type-meta, 12px); color: var(--muted);
  }
  .cxn-table-wrap .cxn-table td.cxn-col-menu {
    position: absolute; top: var(--row-pad-y, 12px); inset-inline-end: var(--row-pad-x, 16px);
  }
}

/* ══ the wizard drawer ═════════════════════════════════════════════════════
   Anchored to the Connections panel (the .step-panel is its containing block),
   so it opens below the top bar and beside the rail, with a light scrim over
   the page content only — the mockup's side panel, made modal (design 014, A3).
   Under the app's dialogs (.modal-overlay is 500, .dialog-overlay 600). */

.cxn-drawer-scrim {
  position: absolute; inset: 0; z-index: 40;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.cxn-drawer {
  --cxn-slide: 24px;
  position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 41;
  width: min(var(--drawer-w, 560px), 100%);
  display: flex; flex-direction: column; gap: var(--panel-gap, 20px);
  padding: var(--panel-pad, 24px);
  background: var(--lift);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, .35));
  animation: cxnDrawerIn .18s cubic-bezier(.2, .8, .2, 1);
}
[dir="rtl"] .cxn-drawer { --cxn-slide: -24px; }
@keyframes cxnDrawerIn {
  from { transform: translateX(var(--cxn-slide)); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cxn-drawer { animation: none; } }

.cxn-drawer-hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cxn-drawer-hdr-text { min-width: 0; }
.cxn-drawer-title {
  margin: 0; font: 600 var(--drawer-title-size, 17px)/1.3 var(--display); color: var(--text);
  overflow-wrap: anywhere;
}
.cxn-drawer-lede { margin: 2px 0 0; font-size: var(--type-body, 14px); color: var(--muted); }
.cxn-drawer-close {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r, 10px);
  color: var(--muted); cursor: pointer;
  margin-block-start: -8px; margin-inline-end: -8px;
}
.cxn-drawer-close:hover { background: var(--accent-bg); color: var(--text); }
.cxn-drawer-close:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }

.cxn-stepper { flex: none; }
.cxn-step-h { margin: 0; font: inherit; }
.cxn-step-h:focus { outline: none; }
.cxn-step-h:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 4px; }

.cxn-drawer-form { display: flex; flex-direction: column; gap: var(--panel-gap, 20px); flex: 1; min-height: 0; }
.cxn-drawer-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--panel-gap, 20px);
  /* room for the focus rings at the scroll edge */
  margin: -4px; padding: 4px;
}
.cxn-drawer-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; flex: none; }

.cxn-text-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: var(--type-body, 14px);
}
.cxn-text-btn:hover { text-decoration: underline; }
.cxn-text-btn:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 4px; }

/* ── step 1: the source picker ───────────────────────────────────────────── */

.cxn-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cxn-type {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px; min-width: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  font: inherit; text-align: start; cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.cxn-type:hover { border-color: var(--accent-dim, var(--accent)); background: var(--accent-bg); }
.cxn-type:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.cxn-type[aria-checked="true"] { border: 2px solid var(--accent); padding: 13px; }
.cxn-type-text { display: flex; flex-direction: column; min-width: 0; }
.cxn-type-name { font-size: var(--type-body, 15px); font-weight: var(--weight-strong, 500); }
.cxn-type-blurb { font-size: var(--type-secondary, 13px); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .cxn-type { transition: none; } }

.cxn-chosen { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cxn-chosen-name { font-weight: var(--weight-strong, 500); }
.cxn-chosen-note { font-size: var(--type-secondary, 13px); color: var(--muted); }
.cxn-chosen .cxn-text-btn { margin-inline-start: auto; }

/* ── the fields ──────────────────────────────────────────────────────────── */

.cxn-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cxn-span-2 { grid-column: 1 / -1; }
.cxn-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cxn-field > label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--type-body, 14px); font-weight: var(--weight-strong, 500); color: var(--text);
}
.cxn-input {
  width: 100%; min-width: 0;
  height: max(var(--control-h, 38px), var(--touch-min, 0px));
  padding: 0 12px;
  background: var(--field-bg, var(--surface));
  border: 1px solid var(--field-border, var(--border));
  border-radius: var(--control-r, var(--r));
  color: var(--text); font: 400 var(--type-body, 14px) var(--sans);
}
.cxn-input::placeholder { color: var(--faint); }
.cxn-input:hover { border-color: var(--accent-dim, var(--bhi)); }
.cxn-input:focus { outline: none; border-color: var(--focus, var(--accent)); box-shadow: 0 0 0 1px var(--focus, var(--accent)); }
.cxn-field.is-invalid .cxn-input { border-color: var(--rose); }
.cxn-field-error { font-size: var(--type-secondary, 13px); color: var(--rose); }
.cxn-hint { font-size: var(--type-meta, 12px); color: var(--muted); line-height: 1.5; }
.cxn-set { padding: 0 8px; font-size: var(--type-meta, 12px); font-weight: 500; }

.cxn-note {
  display: flex; gap: 10px; margin: 0; padding: 12px;
  font-size: var(--type-secondary, 13px); color: var(--muted); line-height: 1.5;
  background: var(--void); border-radius: var(--r, 10px);
}
.cxn-note svg { flex: none; color: var(--accent); }

/* A phone: the drawer is the whole panel; two columns still fit down to ~400px. */
@media (max-width: 620px) {
  .cxn-drawer { width: 100%; border-inline-start: 0; }
}
@media (max-width: 400px) {
  .cxn-fields, .cxn-types { grid-template-columns: minmax(0, 1fr); }
}

/* ── step 2: the test ────────────────────────────────────────────────────── */

.cxn-test {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.cxn-test-hdr { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.cxn-test-hdr strong { font-weight: 500; }
.cxn-test-stale { font-size: var(--type-secondary, 13px); color: var(--muted); }
.cxn-test-idle { margin: 0; color: var(--muted); font-size: var(--type-body, 14px); }
/* scoped through the panel: imago.css's .im-checks rules load after this sheet */
.cxn-drawer .cxn-checks li { align-items: flex-start; }
.cxn-drawer .cxn-checks svg { margin-top: 2px; }
/* the line being worked on turns, so a slow database reads as "working", not stuck */
.cxn-drawer .cxn-checks .is-wait:first-child svg { animation: cxnTurn 1.6s linear infinite; }
@keyframes cxnTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cxn-drawer .cxn-checks .is-wait:first-child svg { animation: none; } }
.cxn-checks.is-stale { opacity: .6; }
.cxn-check-text { display: flex; flex-direction: column; min-width: 0; }
.cxn-check-detail {
  font-size: var(--type-secondary, 13px); color: var(--text);
  overflow-wrap: anywhere; line-height: 1.45;
}

/* ── step 3: schemas ─────────────────────────────────────────────────────── */

.cxn-schemas { display: flex; flex-direction: column; gap: 12px; }
.cxn-schemas-bulk { display: flex; gap: 16px; justify-content: flex-end; }
.cxn-schema-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.cxn-schema-list li + li { border-top: 1px solid var(--border); }
.cxn-schema {
  display: flex; align-items: center; gap: 12px;
  min-height: max(40px, var(--touch-min, 0px)); padding: 0 12px;
  cursor: pointer;
}
.cxn-schema input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
.cxn-schema-name { min-width: 0; overflow-wrap: anywhere; }
.cxn-schema-count {
  margin-inline-start: auto; flex: none;
  font-size: var(--type-secondary, 13px); color: var(--muted); font-variant-numeric: tabular-nums;
}
.cxn-schema-none { padding: 10px 12px; color: var(--muted); font-size: var(--type-secondary, 13px); }
.cxn-schemas-intro { margin: 0; font-size: var(--type-body, 14px); color: var(--muted); }
.cxn-schemas-sum { margin: 0; font-size: var(--type-body, 14px); }
.cxn-schemas-order { margin: 0; font-size: var(--type-secondary, 13px); color: var(--muted); }
.cxn-schema-notes:empty { display: none; }
.cxn-single { margin: 0; font-size: var(--type-body, 14px); line-height: 1.55; }
.cxn-save-error-text { margin: 4px 0 8px; font-size: var(--type-secondary, 13px); overflow-wrap: anywhere; }

/* ── service-account key field (spec 013) ─────────────────────────────────────
   KeyFileField: a stored key shows who it acts as; choosing one is a file
   button or a paste area. The paste area is monospace and never spell-checked. */
.cxn-keyfile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cxn-keyfile-state,
.cxn-keyfile-pick {
  display: grid; align-items: center; gap: 8px 10px;
  min-height: max(var(--control-h, 0px), var(--touch-min, 0px));
  padding: 6px 6px 6px 12px;
  background: var(--field-bg, var(--lift));
  border: 1px solid var(--field-border, var(--border));
  border-radius: var(--control-r, var(--r));
  font-size: var(--type-secondary, 13.5px); color: var(--text);
}
/* dot | who the key acts as (wraps inside its column) | action — a long service
   account e-mail must never push the dot or the button onto lines of their own */
.cxn-keyfile-state { grid-template-columns: auto minmax(0, 1fr) auto; }
.cxn-keyfile-state > span:not(.cxn-keyfile-dot) { min-width: 0; overflow-wrap: anywhere; }
.cxn-keyfile-pick { grid-template-columns: auto minmax(0, 1fr); padding-left: 6px; }
.cxn-keyfile-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); flex: none; }
.cxn-keyfile-who { font-family: var(--mono); font-size: var(--type-meta, 12.5px); }
.cxn-keyfile-name { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.cxn-keyfile-paste {
  width: 100%; resize: vertical; min-height: 120px;
  background: var(--field-bg, var(--lift));
  border: 1px solid var(--field-border, var(--border));
  border-radius: var(--control-r, var(--r));
  color: var(--text); font-family: var(--mono); font-size: var(--type-meta, 12.5px); line-height: 1.5;
  padding: 9px 12px;
}
.cxn-keyfile-paste:focus { outline: none; border-color: var(--focus, var(--accent)); box-shadow: 0 0 0 1px var(--focus, var(--accent)); }
.cxn-keyfile-links { display: flex; gap: 16px; }
.cxn-keyfile-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: var(--type-meta, 12.5px);
}
.cxn-keyfile-link:hover { text-decoration: underline; }
.cxn-keyfile-link:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.cxn-keyfile-error { color: var(--rose); }