/* ==========================================================================
   INTEGRATIONS — the platform's government-integration screen
   --------------------------------------------------------------------------
   Rules for this file: design TOKENS only, LOGICAL properties only, nothing that
   cannot survive dir="rtl" and dir="ltr" alike. Classes are prefixed .int-.
   ========================================================================== */

.int-adapter { display: block; margin-block-start: var(--space-2); }

.int-verdict {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.int-verdict.is-open { color: var(--color-success); }

.int-conditions,
.int-checklist { margin: 0; }

.int-condition,
.int-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  text-align: start;
}

/* The wording grows to fill the row and the badge or button sits at its end. */
.int-condition > span:nth-child(2),
.int-item > span:nth-child(2) { flex: 1 1 auto; min-inline-size: 0; }

.int-condition strong { display: block; }

.int-mark { display: inline-flex; flex: none; color: var(--color-text-subtle); }
.int-mark.is-met { color: var(--color-success); }

.int-actions { margin-block-start: var(--space-4); align-items: center; }

.int-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {
  .int-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

.int-current { margin: var(--space-3) 0; }

.int-pad { margin: 0; padding: var(--space-4) var(--space-5) var(--space-2); }

/* A table cannot be read at 375px: under 48rem every row becomes a card of labelled cells. */
@media (max-width: 47.99rem) {
  .int-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .int-table,
  .int-table tbody { display: block; }

  .int-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-hairline);
  }

  .int-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    text-align: start;
  }

  .int-table td::before {
    content: attr(data-label);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
  }

  .int-table td[data-label=''] ::before,
  .int-table td:not([data-label])::before { content: none; }
}