/*
 * Platform template — /integrations/{platform}/, 11 pages.
 *
 * The pair template needed two new layouts; this one needs one, plus a width
 * hint for the capability table. Everything else is already in shared.css,
 * fx.css and p-shared.css, and it should stay that way — a per-page stylesheet
 * that grows past a screenful means a component belongs in the shared layer.
 */

/* The hero's answer-in-one-object, for a page about a single channel. The pair
   template can lock two marks either side of the QuickSync tile and be done;
   with one channel there is no relationship to draw, so the mark carries the
   summary of the capability table instead. */
.solo-mark {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); box-shadow: var(--shadow-md);
}
.solo-mark__top { display: flex; align-items: center; gap: var(--s-4); }
.solo-mark__top img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.solo-mark__id { display: flex; flex-direction: column; min-width: 0; }
.solo-mark__name { font-size: var(--t-xl); font-weight: 800; color: var(--ink); letter-spacing: -.025em; }

.solo-mark__facts {
  list-style: none; margin: var(--s-5) 0 0; padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s-3);
}
/* baseline, not center — these facts wrap at narrow widths and centre would
   strand the dot between the lines. See .chan-card__lat in fx.css. */
.solo-mark__facts li { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--t-sm); color: var(--body); }

/* Three columns of very unequal content: a short label, a two-word verdict and
   a sentence. Left to itself the browser gives the sentence almost everything
   and wraps "Create and update" onto three lines. */
.cap--jobs th:first-child { width: 20%; }
.cap--jobs thead th:nth-child(2) { width: 22%; }
@media (max-width: 720px) {
  .cap--jobs th:first-child,
  .cap--jobs thead th:nth-child(2) { width: auto; }
  /* The shared collapse puts the repeated column header beside its value, which
     works for a one-word channel name. "What that means" against a full
     sentence leaves the label wrapped to three lines and the sentence in a
     column two words wide, so this one cell stacks instead. */
  .cap--jobs td:last-child { display: block; }
  .cap--jobs td:last-child::before { display: block; margin-bottom: var(--s-1); }
}