/* ============================================================================
   /integrations in the sub page system (9 Oct 2026): a plain page, no instrument.
   The directory is the page's figure: one ruled row per category (its name and its
   own count, then the systems in columns), the filter above it. The class names and
   data-int-* hooks are the ones global/js/integrations.js already finds; this sheet
   only gives them the new look. Tokens only (no hex outside tos-site.css).
   ============================================================================ */

/* the filter (revealed by integrations.js, so a control that cannot work is never shown) */
.sp .int-filter { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; max-width: 560px; }
.sp .int-filter-label { color: var(--lp-muted); }
.sp .int-filter-input { display: block; width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--lp-ink); border-radius: 2px; background: var(--lp-paper); color: var(--lp-ink); font: 400 17px/1.4 var(--tos-font-body); font-weight: inherit; }
.sp .int-filter-input::placeholder { color: var(--lp-muted); opacity: 1; }
.sp .int-filter-input:focus { outline: 2px solid var(--lp-accent); outline-offset: -1px; }
.sp .int-filter-count { min-height: 18px; color: var(--lp-muted); }

/* hidden means hidden: the filter sets the attribute, and a display rule below would win over it */
.sp .int-filter[hidden], .sp .int-cat[hidden], .sp .int-item[hidden], .sp .int-empty[hidden] { display: none; }

/* the directory: an ink rule on top, one category per row */
.sp .int-dir { border-top: 1px solid var(--lp-ink); }
.sp .int-cat { display: grid; grid-template-columns: minmax(0, 1fr); padding: 18px 0 22px; border-bottom: 1px solid var(--lp-rule); }
.sp .int-cat-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 19px; line-height: 1.3; }
.sp .int-cat-n { flex: none; color: var(--lp-muted); }
.sp .int-list { columns: 2; column-gap: 20px; margin-top: 12px; }
.sp .int-item { break-inside: avoid; padding: 3px 0; font-size: 15px; line-height: 1.45; color: var(--lp-ink-2); overflow-wrap: anywhere; }

/* nothing found */
.sp .int-empty { padding: 18px 0; border-bottom: 1px solid var(--lp-rule); font-size: 16px; line-height: 1.55; color: var(--lp-ink); max-width: 40em; }

@media (min-width: 600px) {
  .sp .int-list { columns: 3; }
}
@media (min-width: 1180px) {
  /* the name and count hold a left column; the systems read across the right */
  .sp .int-cat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 40px; padding: 22px 0 26px; }
  .sp .int-cat-h { font-size: 20px; flex-direction: column; justify-content: flex-start; gap: 6px; }
  .sp .int-list { margin-top: 0; columns: 3; column-gap: 28px; }
  .sp .int-item { font-size: 16px; }
}