/* app/set-connect.css — page-local styles for Integrations + Import + Templates.
   Prefix every selector `.e8-set-connect-`. Shared grammar lives in app/set-core.css and must not
   be duplicated here; if a page needs a new shared primitive, that is a core change, not a
   local override. Tokens only — no hex, no raw font sizes.

   THREE THINGS THIS FILE DELIBERATELY BORROWS RATHER THAN REDECLARES
   `--set-card-pad-x`, `--set-line` and `--set-tint` are declared on `.e8-set` in set-core.css and
   inherit down here. Everything that has to line up with a core row — a table row's horizontal
   padding, a divider colour, a header strip's fill — reads those variables instead of a literal,
   so a change to the core rhythm moves these pages with it and they cannot drift apart.

   ONE TABLE ROW, TWO TABLES. `.e8-set-connect-tr` is the single row definition used by the recent-
   imports table on Import and the library table on Templates. Only the column template differs
   (`.is-imp` / `.is-tpl`). Two tables on neighbouring pages with different vertical padding is
   failure mode #1 in docs/SETTINGS-REFERENCE.md, and one shared rule is the only way to be sure.

   CONDITIONAL AT-RULES ARE ALL AT THE BOTTOM. A @media block adds no specificity, so one written
   above the rule it overrides is dead code — that has shipped in this repo three times. Every
   media query in this file sits after every base rule it touches.
   ============================================================================================ */

/* ---------- W6 · provider grid ---------------------------------------------------------------- */

.e8-set-connect-grid {
  display: grid;
  gap: var(--ui-space-3);
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

/* Horizontal padding is `--set-card-pad-x`, the SAME variable a core `.e8-set-row` reads, so a
   tile's content edge lines up with a row's on Features or Templates. It was a flat 16px, which
   put this page's rhythm 4px off every one of its neighbours — the one thing the reference spec's
   §0 names as what makes a page look wrong beside the others. The vertical 16px matches
   `--set-row-pad-y`, but is written as the space token because a tile is not a row. */
.e8-set-connect-tile {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  min-width: 0;
  padding: var(--ui-space-4) var(--set-card-pad-x);
  background: var(--ui-surface);
  border: 1px solid var(--set-line);
  border-radius: var(--ui-radius-card);
}
.e8-set-connect-tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-2);
}
.e8-set-connect-tile-name {
  font-size: var(--ui-text-md);
  font-weight: 600;
  color: var(--ui-text);
  line-height: 1.3;
}
.e8-set-connect-tile-desc {
  margin: 0;
  font-size: var(--ui-text-base);
  line-height: 1.45;
  color: var(--ui-text-secondary);
  overflow-wrap: anywhere;
}
/* THE FOOT IS THE SAME SHAPE IN EVERY TILE, AT EVERY WIDTH.
   It used to be a wrapping row — meta beside the button when the meta was short, meta stacked
   above it when it was long — so `Bullhorn` and `QuickBooks`, side by side in one grid row with
   identical heights, presented their footers differently and put their meta lines 26px apart. The
   only string in the tile was the cause. A column removes the branch, and the two-line reservation
   below removes the last way string length can move anything: `margin-top: auto` pins the foot to
   the bottom of the tile, the foot's own height is now constant, so the meta's first line and the
   action button both land on the same baseline across the whole grid row. */
.e8-set-connect-tile-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-space-2);
  margin-top: auto;
  padding-top: var(--ui-space-2);
}
/* Exactly two lines, reserved (`min-height`) and capped (`line-clamp`). 2.9em is 2 x the 1.45
   line-height declared right here, so the box does not drift if the type token changes. Two lines
   is enough for every meta this page can produce: the longest of the fourteen is 46 characters
   ("Contact waterfall · 12 credits/record · Global", ~290px at 12.5px) against the narrowest
   content column the grid allows, 206px at the 248px track minimum. The clamp is the guard for a
   string longer than any in the dataset, not the normal case. */
.e8-set-connect-tile-meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  min-height: 2.9em;
  font-size: var(--ui-text-sm);
  line-height: 1.45;
  color: var(--ui-text-tertiary);
  overflow-wrap: anywhere;
}

/* Category tint. The BOX stays exactly the 36px/9px `.e8-set-glyph` set-core draws for a row's
   leading icon — only the fill and the glyph ink change, so an icon box on this page is
   dimensionally identical to one on Accounts or Billing. */
.e8-set-connect-tile.is-cat1 .e8-set-glyph { background: var(--ui-cat-1-bg); border-color: transparent; }
.e8-set-connect-tile.is-cat1 .e8-set-glyph .material-symbols-outlined { color: var(--ui-cat-1-text); }
.e8-set-connect-tile.is-cat2 .e8-set-glyph { background: var(--ui-cat-2-bg); border-color: transparent; }
.e8-set-connect-tile.is-cat2 .e8-set-glyph .material-symbols-outlined { color: var(--ui-cat-2-text); }
.e8-set-connect-tile.is-cat3 .e8-set-glyph { background: var(--ui-cat-3-bg); border-color: transparent; }
.e8-set-connect-tile.is-cat3 .e8-set-glyph .material-symbols-outlined { color: var(--ui-cat-3-text); }
.e8-set-connect-tile.is-cat4 .e8-set-glyph { background: var(--ui-cat-4-bg); border-color: transparent; }
.e8-set-connect-tile.is-cat4 .e8-set-glyph .material-symbols-outlined { color: var(--ui-cat-4-text); }
.e8-set-connect-tile.is-cat5 .e8-set-glyph { background: var(--ui-cat-5-bg); border-color: transparent; }
.e8-set-connect-tile.is-cat5 .e8-set-glyph .material-symbols-outlined { color: var(--ui-cat-5-text); }
.e8-set-connect-tile.is-cat6 .e8-set-glyph { background: var(--ui-cat-6-bg); border-color: transparent; }
.e8-set-connect-tile.is-cat6 .e8-set-glyph .material-symbols-outlined { color: var(--ui-cat-6-text); }
.e8-set-connect-tile.is-cat8 .e8-set-glyph { background: var(--ui-cat-8-bg); border-color: transparent; }
.e8-set-connect-tile.is-cat8 .e8-set-glyph .material-symbols-outlined { color: var(--ui-cat-8-text); }

/* Credit meter. The percentage is DATA, so it arrives as a custom property on the element rather
   than as a stylesheet rule — the one thing an inline style is still the right tool for. */
.e8-set-connect-meterrow {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  flex-wrap: wrap;
  margin-top: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-surface);
  border: 1px solid var(--set-line);
  border-radius: var(--ui-radius-card);
}
.e8-set-connect-meter-txt {
  flex: 1;
  min-width: 220px;
  font-size: var(--ui-text-base);
  color: var(--ui-text-secondary);
}
.e8-set-connect-meter {
  flex: 0 0 168px;
  height: 6px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill);
  overflow: hidden;
}
.e8-set-connect-meter-fill {
  display: block;
  height: 100%;
  width: var(--e8-set-connect-pct, 0%);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
}
.e8-set-connect-meter-val {
  flex: none;
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}

/* ---------- W7 · dropzone --------------------------------------------------------------------- */

/* The wrapper, not the dropzone, is the card's child: the card draws an inset hairline on top of
   every child after the first, and a hairline landing on the dropzone's own dashed border reads
   as a rendering fault. The wrapper takes the divider; the dropzone floats inside its padding. */
.e8-set-connect-dropwrap { padding: var(--ui-space-4) var(--set-card-pad-x); }

.e8-set-connect-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-6) var(--ui-space-4);
  text-align: center;
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-card);
  background: color-mix(in srgb, var(--ui-fill) 45%, transparent);
  transition: border-color 140ms ease, background 140ms ease;
}
.e8-set-connect-drop.is-over {
  border-color: var(--ui-accent);
  background: var(--ui-wash);
}
.e8-set-connect-drop-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  border: 1px solid var(--set-line);
}
.e8-set-connect-drop-mark .material-symbols-outlined {
  font-size: var(--ui-icon-lg);
  color: var(--ui-icon-quiet);
}
.e8-set-connect-drop-t {
  font-size: var(--ui-text-md);
  font-weight: 500;
  color: var(--ui-text);
}
.e8-set-connect-drop-d {
  margin-bottom: var(--ui-space-1);
  font-size: var(--ui-text-base);
  color: var(--ui-text-secondary);
}

.e8-set-connect-file {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3);
  border: 1px solid var(--set-line);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
}
.e8-set-connect-file-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--ui-cat-2-bg);
}
.e8-set-connect-file-mark .material-symbols-outlined {
  font-size: var(--ui-icon-md);
  color: var(--ui-cat-2-text);
}
.e8-set-connect-file-txt { flex: 1; min-width: 0; }
.e8-set-connect-file-name {
  display: block;
  font-size: var(--ui-text-md);
  font-weight: 500;
  color: var(--ui-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.e8-set-connect-file-meta {
  display: block;
  margin-top: 2px;
  font-size: var(--ui-text-base);
  color: var(--ui-text-secondary);
}

/* The card's own action strip. Same tinted fill as `.e8-set-cardhead`, so a footer reads as the
   header's counterpart rather than as a fourth kind of row. */
.e8-set-connect-foot {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--set-card-pad-x);
  background: var(--set-tint);
}
.e8-set-connect-foot-txt {
  flex: 1;
  min-width: 0;
  font-size: var(--ui-text-base);
  color: var(--ui-text-secondary);
}

/* ---------- the shared table ------------------------------------------------------------------ */

.e8-set-connect-th,
.e8-set-connect-tr {
  display: grid;
  align-items: center;
  gap: var(--ui-space-3);
  min-width: 0;
  padding: 11px var(--set-card-pad-x);
  color: inherit;
  text-decoration: none;
}
.e8-set-connect-th { background: var(--set-tint); }
.e8-set-connect-thc {
  min-width: 0;
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text-secondary);
}
.e8-set-connect-tr.is-link { cursor: pointer; }
.e8-set-connect-tr.is-link:hover { background: color-mix(in srgb, var(--ui-fill) 45%, transparent); }

.e8-set-connect-tr.is-tpl { grid-template-columns: minmax(0, 1fr) 122px 128px 62px 92px; }
.e8-set-connect-tr.is-imp { grid-template-columns: minmax(0, 1fr) 148px 116px 84px 40px; }

.e8-set-connect-cell {
  position: relative;
  min-width: 0;
  font-size: var(--ui-text-base);
  color: var(--ui-text-secondary);
}
.e8-set-connect-cv {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.e8-set-connect-c-main { min-width: 0; }
.e8-set-connect-c-t {
  display: block;
  font-size: var(--ui-text-base);
  font-weight: 500;
  color: var(--ui-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.e8-set-connect-c-d {
  display: block;
  margin-top: 1px;
  font-size: var(--ui-text-sm);
  color: var(--ui-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.e8-set-connect-c-uses { font-variant-numeric: tabular-nums; }
/* A pill is taller than the line box it sits in, and the cell clips its text by default — which
   would shave the pill's rounded ends. These two cells opt out of the clip; they hold a chip, not
   a string that can run long. */
.e8-set-connect-c-status .e8-set-connect-cv,
.e8-set-connect-c-type .e8-set-connect-cv { overflow: visible; }
.e8-set-connect-c-act {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* The row action is a glyph-only button whose label is screen-reader-only. `.e8-set-btn`'s 13px
   side padding plus its 6px icon gap would make it 40px wide and overflow a 40px grid track, so
   the icon-only case tightens both — the 34px height, and therefore the hit target, is unchanged. */
.e8-set-connect-c-act .e8-set-btn { gap: 0; padding: 0 var(--ui-space-2); }
.e8-set-connect-quiet { color: var(--ui-text-tertiary); }

/* Column names stay in the accessibility tree at every width. At desktop the header row carries
   them visually and this copy is clipped; at 640 the header row is gone and this is what tells a
   reader which value is which. `display: none` would have hidden it from screen readers too,
   leaving a desktop row that reads as five unlabelled values. */
.e8-set-connect-lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.e8-set-connect-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text-secondary);
}
.e8-set-connect-sort:hover { color: var(--ui-text); }
.e8-set-connect-sorti {
  font-size: var(--ui-icon-xs);
  color: var(--ui-text-tertiary);
}

.e8-set-connect-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px var(--set-card-pad-x);
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--ui-text-base);
  font-weight: 500;
  color: var(--ui-accent);
}
.e8-set-connect-more:hover { background: color-mix(in srgb, var(--ui-fill) 45%, transparent); }

/* A card's own toolbar strip: a count on the left, controls on the right, wrapping to a second
   line before either gets squeezed. Left on the card surface rather than tinted, because the
   column header immediately below it IS tinted and two stacked grey strips read as a mistake. */
.e8-set-connect-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  flex-wrap: wrap;
  padding: var(--ui-space-3) var(--set-card-pad-x);
}
.e8-set-connect-toolbar-t {
  flex: 1;
  min-width: 140px;
  font-size: var(--ui-text-md);
  font-weight: 600;
  color: var(--ui-text);
}

/* ---------- shared bits ----------------------------------------------------------------------- */

.e8-set-connect-filters {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  flex-wrap: wrap;
}

/* An inline link inside a row description. Underlined, not colour-only, so it is distinguishable
   without relying on hue. The focus ring comes from `.e8-set :focus-visible` in set-core. */
.e8-set-connect-link {
  color: var(--ui-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.e8-set-connect-link:hover { text-decoration-thickness: 2px; }

/* Not `display: none`: the file input is clicked programmatically by the visible button, and it
   stays out of the tab order via tabIndex/-1 rather than by being removed from the box tree. */
.e8-set-connect-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- narrow ----------------------------------------------------------------------------
   Two breakpoints only, both AFTER every rule they override. 840 is where the settings rail
   becomes a drawer and the content column loses its gutters; 640 is where a five-column table
   stops fitting at all and the rows have to stack. */

@media (max-width: 840px) {
  .e8-set-connect-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
  .e8-set-connect-tr.is-tpl { grid-template-columns: minmax(0, 1fr) 110px 108px 56px 84px; }
  .e8-set-connect-tr.is-imp { grid-template-columns: minmax(0, 1fr) 128px 108px 72px 40px; }
}

@media (max-width: 640px) {
  .e8-set-connect-grid { grid-template-columns: minmax(0, 1fr); }
  .e8-set-connect-meter { flex: 1 1 100%; }

  /* The header row cannot survive a stacked row, so it goes and each cell names itself instead.
     Written as a COMPOUND selector because the header element carries both classes: a plain
     `.e8-set-connect-th { display: none }` would lose to the `.e8-set-connect-tr` rule below on
     source order alone, and the header would come back at exactly the width it must not. */
  .e8-set-connect-tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--ui-space-2);
    padding-top: var(--ui-space-3);
    padding-bottom: var(--ui-space-3);
  }
  .e8-set-connect-tr.e8-set-connect-th { display: none; }
  .e8-set-connect-tr .e8-set-connect-c-main { display: block; flex: 1 1 100%; }
  .e8-set-connect-tr .e8-set-connect-c-act { flex: 1 1 auto; }
  .e8-set-connect-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ui-text-sm);
  }
  .e8-set-connect-cv { white-space: normal; }
  .e8-set-connect-lbl {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--ui-text-tertiary);
  }

  /* The tile foot needs nothing here any more: it is a column at every width now, by design. */
  .e8-set-connect-foot { flex-wrap: wrap; }
  .e8-set-connect-foot-txt { flex: 1 1 100%; }
  .e8-set-connect-filters { width: 100%; }
  .e8-set-connect-drop { padding: var(--ui-space-5) var(--ui-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .e8-set-connect-drop { transition: none; }
}