:root {
  --integrations-gap: var(--space-5);
  --integrations-grid-gap: var(--space-4);
  --integrations-control-gap: var(--space-3);
  --integrations-title-font: var(--font-type-heading-large);
  --integrations-heading-font: var(--font-type-heading-small);
  --integrations-note-font: var(--font-type-body-small);
  --integrations-row-font: var(--font-type-label);
  --integrations-category-width: var(--size-164);
  --integrations-choice-width: var(--size-188);
  --integrations-search-width: var(--size-300);
  --integrations-filter-width: var(--size-178);
  --integrations-name-width: var(--size-240);
  --integrations-row-height: var(--size-56);
  --integrations-category-padding: var(--space-3);
  --integrations-small-gap: var(--space-2);
  --integrations-issue-spacing: var(--space-1);
  --integrations-row-padding: var(--space-1-5) var(--space-4);
  --integrations-row-border: var(--border-1) solid var(--color-border);
  --integrations-group-padding: var(--space-2) 0;
  --integrations-focus-outline: var(--focus-width) solid var(--color-focus-ring);
  --integration-setup-field-gap: var(--space-4);
  --integration-setup-instruction-gap: var(--space-2);
  --integration-setup-list-indent: var(--space-6);
  --integration-setup-port-width: var(--size-120);
}

#page-content:has(> .integrations-page) { padding: 0; }
.application-shell:has(.integrations-page) { background: var(--color-background); }
.integrations-page { min-inline-size: 0; }
.integrations-page > .index-layout {
  --index-layout-title-font: var(--integrations-title-font);
  --index-layout-gap: var(--integrations-gap);
}
.integrations-page .index-layout__body,
.integrations-page__section,
.integrations-page__permissions,
.integrations-page__catalog { display: grid; gap: var(--integrations-gap); min-inline-size: 0; }
.integrations-page__section { margin: 0; }
.integrations-page__section > h2 { margin: 0; font: var(--integrations-heading-font); }
.integrations-page__connections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--integrations-grid-gap);
  padding: 0;
  margin: 0;
  list-style: none;
}
.integrations-page__connections li { min-inline-size: 0; }
.integrations-page__connections .tile { --tile-width: 100%; }
.integrations-page__issue { margin: 0; color: var(--color-error); font: var(--integrations-note-font); }
.integrations-page__connections .integrations-page__issue { margin-block-start: var(--integrations-issue-spacing); }
.integrations-page__search,
.integrations-page__choices { display: flex; flex-wrap: wrap; align-items: center; gap: var(--integrations-control-gap); }
.integrations-page__search > .input-field { flex: 1 1 var(--integrations-search-width); min-inline-size: 0; }
.integrations-page__link { color: var(--color-link); }
.integrations-page__link:focus-visible { outline: var(--integrations-focus-outline); outline-offset: var(--focus-offset); }
.integrations-page__category { display: grid; grid-template-columns: var(--integrations-category-width) minmax(0, 1fr); align-items: start; gap: var(--integrations-control-gap); margin: 0; }
.integrations-page__category > h3 { margin: 0; padding-block: var(--integrations-category-padding); color: var(--color-muted-foreground); font: var(--integrations-note-font); }
.integrations-page__choices > * { max-inline-size: 100%; min-inline-size: 0; }
.integrations-page__choices .button-control { --button-foreground: var(--color-link); }
.integrations-page__note { margin: 0; color: var(--color-muted-foreground); font: var(--integrations-note-font); }
.integrations-page__permission-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--integrations-gap); }
.integrations-page__permission-tools > .input-field { flex: 1 1 var(--integrations-search-width); min-inline-size: 0; }
.integrations-page__permission-tools > .select-field { flex: 0 1 var(--integrations-filter-width); min-inline-size: 0; }
.integrations-page__permission-group {
  --details-border: var(--details-default-border);
  --details-radius: var(--details-default-radius);
  --details-summary-height: var(--size-44);
  --details-font: var(--integrations-row-font);
  --details-description-font: var(--integrations-row-font);
  --details-description-align: end;
  --details-muted: var(--color-accent-foreground);
  --details-foreground: var(--color-accent-foreground);
  --details-content-font: var(--integrations-row-font);
  --details-content-padding: var(--integrations-group-padding);
}
.integrations-page__permission-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--integrations-control-gap); min-block-size: var(--integrations-row-height); padding: var(--integrations-row-padding); border-block-end: var(--integrations-row-border); color: var(--color-surface-foreground); }
.integrations-page__permissions turbo-frame:last-child .integrations-page__permission-row { border-block-end: 0; }
.integrations-page__permission-name { display: flex; align-items: center; gap: var(--integrations-small-gap); flex: 1 1 var(--integrations-name-width); min-inline-size: 0; }
.integrations-page__permission-name > span { min-inline-size: 0; overflow-wrap: anywhere; }
.integrations-page__permission-choice { flex: 0 1 var(--integrations-choice-width); min-inline-size: 0; }
.integrations-page__save-status { flex-basis: 100%; margin: 0; font: var(--integrations-note-font); color: var(--color-muted-foreground); }
.integrations-page__save-status:empty { display: none; }
.integrations-page__permission-row > [role="alert"] { flex-basis: 100%; }
.integrations-page__permission-row > [role="alert"]:empty { display: none; }
.integrations-page [hidden] { display: none; }

@container (max-width: 760px) {
  .integrations-page__connections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integrations-page__category { grid-template-columns: minmax(0, 1fr); gap: var(--integrations-small-gap); }
}
@container (max-width: 480px) {
  .integrations-page__connections { grid-template-columns: minmax(0, 1fr); }
  .integrations-page__permission-choice { flex: 1 1 100%; }
}

/* Setup pages compose the shared settings surface and native controls. */
.integration-setup__fieldset { min-inline-size: 0; padding: 0; border: 0; }
.integration-setup__fieldset > legend { padding: 0; margin-block-end: var(--integration-setup-field-gap); }
.integration-setup__host-port { display: grid; grid-template-columns: minmax(0, 1fr) var(--integration-setup-port-width); gap: var(--integration-setup-field-gap); }
.integration-setup__instructions { margin: 0; padding-inline-start: var(--integration-setup-list-indent); }
.integration-setup__instructions > li + li { margin-block-start: var(--integration-setup-instruction-gap); }
@media (max-width: 600px) {
  .integration-setup__host-port { grid-template-columns: minmax(0, 1fr); }
}