/* connect.html only. Built from the tokens in site.css and mockup.css; nothing here is shared. */

/* The headline is one sentence in two halves; let it use the width. */
.hero .display { max-width: 22ch; }

/* How a call is governed: an icon and a words, never a pill (the pill shape keeps the spec's section 4 words). */
.c-gate { display: inline-flex; align-items: baseline; gap: 6px; color: var(--white); font: 500 12.5px/1.5 var(--sans); }
.c-gate i { font-size: 12px; line-height: 1; width: 1em; text-align: center; flex: none; }

/* Connector catalog: name, what it does, its tools with how each is governed. Not in the shared kit. */
.c-conns { display: grid; }
.c-conns > li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.7fr); gap: 8px 24px; align-items: start; padding: 16px 18px; border-top: 1px solid var(--hair); }
.c-conns > li:first-child { border-top: 0; }
.c-name { display: grid; gap: 2px; }
.c-name b { font-weight: 600; font-size: 15px; }
.c-name > span { color: var(--soft); font-size: 12.5px; }
.c-does { color: var(--soft); font-size: 13.5px; line-height: 1.45; }
.c-tools { display: grid; gap: 8px; }
.c-tools li { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 2px 16px; align-items: baseline; }
.c-conns .is-other { border-top-style: dashed; border-top-color: var(--edge); background: var(--m-1); }
@container (max-width: 760px) {
  .c-conns > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .c-tools li { grid-template-columns: minmax(0, 1fr); }
}

/* The JSON wraps, so the title and the reason are not hidden behind a scrollbar. */
.c-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* The nine automation points: one line each, so the table scrolls sideways inside its own box on a phone. */
.c-plan .m-table { min-width: 860px; }
.c-plan .m-table th[scope="row"] { white-space: nowrap; }
.c-plan .m-table td { white-space: nowrap; }

/* The calendar trace has a short JSON out and a long title in, so the panes are not equal. */
#gateway .m-io { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 0.7fr); }
@container (max-width: 820px) {
  #gateway .m-io { grid-template-columns: minmax(0, 1fr); }
}

/* Text under a full-width mockup. */
.c-after, .c-below { margin: clamp(28px, 4vw, 48px) 0 0; max-width: 46rem; }
.band-dark .c-after li { color: var(--soft); }

/* A repair order beside the fields read from it. Not in the shared kit. */
.c-doc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 18px; align-items: start; }
.c-page { display: grid; gap: 8px; min-width: 0; }
.c-dealer { font-weight: 600; margin-bottom: 8px; }
.c-lines { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.c-lines li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font: 400 12.5px/1.5 var(--mono); overflow-wrap: anywhere; }
.c-ln { color: var(--ink-2); font-size: 11.5px; text-align: right; padding-top: 1px; }
.c-fields { display: grid; }
.c-fields li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 9px 0; border-top: 1px solid var(--hair); }
.c-fields li:first-child { border-top: 0; padding-top: 0; }
.c-fields .m-sub { grid-column: 1 / -1; }
.c-fields b { font-weight: 500; font-size: 13.5px; line-height: 1.4; }
.c-src { font: 400 12px/1.5 var(--mono); color: var(--soft); white-space: nowrap; align-self: end; }
@container (max-width: 560px) {
  .c-doc-body { grid-template-columns: minmax(0, 1fr); }
}

/* The bank core's menu: an icon, the service domain, what it is for in plain words, and its state in words. */
.c-menu { display: grid; gap: 6px; }
.c-menu li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 9px 12px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 10px; font-size: 13.5px; line-height: 1.4; }
.c-menu li > i { width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--soft); border-radius: 50%; font-size: 11px; line-height: 1; margin-top: 1px; }
.c-menu b { display: block; font-weight: 500; }
.c-menu li > span:nth-child(2) { color: var(--soft); }
.c-menu li > span:nth-child(2) b { color: var(--white); }
@container (max-width: 520px) {
  .c-menu li { grid-template-columns: 20px minmax(0, 1fr); }
}