/* Connect your compute: the Connections page (pages/connections.css draws its lists, its Claude Code block and its
   sheet, under .conn-page) on a first-run measure, narrower than the console's, so a row's facts stay close to its
   name on a page read top to bottom; the way on (Skip for now, Done) sits at the head's end, in view from the start,
   as a page's actions do. Every rule is under the page, so nothing here reaches another page or a dialog. Tokens
   from styles.css only. */

.page[data-page="connect"] { max-width: 920px; gap: 32px; }
.page[data-page="connect"] .page-head { align-items: center; }
/* a phone has no room beside the title for Skip for now: the way on sits under it, Done in the same place */
@media (max-width: 599px) {
  .page[data-page="connect"] .page-head .page-actions { flex-basis: 100%; }
}

/* Give this to your coding agent, first: its title on the rule's line with the agents' marks at the head's end, the
   line in the dark bar the landing and the Connect dialog draw (styles.css .home-setup-line), as wide as the rows
   under it, then one sentence. A container, so the bar's narrow rules (styles.css) follow the page's width. */
.page[data-page="connect"] .conn-handoff { container-type: inline-size; }
.page[data-page="connect"] .conn-handoff-note { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }