/* «Qoşulmalar» (spec docs/integrations-tech.md): the links to the outside as cards in five groups — on in green, off quiet
   with the way to switch it on, coming in the ink of a note. */
.int-head { margin-bottom: 16px; }
.int-head__title { font: var(--display-weight) 22px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.int-head .muted { margin-top: 4px; max-width: 64ch; font-size: 14px; }
.int-group + .int-group { margin-top: 22px; }
.int-group__title { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.int-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.int-card__head { display: flex; align-items: center; gap: 10px; }
.int-card__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface); color: var(--ink-2); }
.int-card.is-on .int-card__icon { background: color-mix(in srgb, var(--ok) 13%, var(--bg)); color: var(--ok); }
.int-card__name { flex: 1; min-width: 0; font-weight: 650; font-size: 15px; }
.int-card__status { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--ink-2); }
.int-card__status.is-on { background: color-mix(in srgb, var(--ok) 13%, var(--bg)); color: color-mix(in srgb, var(--ok) 80%, var(--ink)); }
.int-card__status.is-soon { background: color-mix(in srgb, var(--warn) 12%, var(--bg)); color: var(--warn); }
.int-card__text { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.int-card__stat { font-size: 13px; font-weight: 600; color: var(--ink); }
.int-card__go { align-self: flex-start; margin-top: auto; }
.int-card.is-soon { background: var(--surface); }