/* Connect and Gateway: setup spaces in the application frame. Calm, complete; alive only where a state is live. */

/* ─── alive where state is live: a reporting device's or gateway's dot breathes, out of step with its neighbours ─── */
.st[data-live]::before { animation: ring 2.6s ease-in-out infinite; }
tr:nth-child(3n + 2) .st[data-live]::before { animation-delay: -.9s; }
tr:nth-child(3n) .st[data-live]::before { animation-delay: -1.8s; }
.app[data-motion="paused"] .st[data-live]::before { animation: none; }

/* ─── the space: the fleet table needs the width; the setup actions take what a side column needs ─── */
.space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]):has(.cn-main) { grid-template-columns: minmax(0, 8.6fr) minmax(300px, 3fr); }
@media (max-width: 1099px) {
  .space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]):has(.cn-main) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ─── the fleet: a waiting device carries the accent edge; a silent one the warning edge (from the frame) ─── */
.space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) .t tbody tr[data-tone="accent"] { box-shadow: inset 2px 0 0 var(--accent-fill); }
.space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) .t tbody tr[data-tone="accent"]:hover { box-shadow: inset 2px 0 0 var(--accent-fill); background: var(--raised); }

/* ─── setup actions: the thing, a word on it, the verb — no paragraph ─── */
.cn-acts { display: grid; }
.cn-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.cn-act:last-child { border-bottom: 0; }
.cn-act .n { min-width: 0; font-weight: 500; color: var(--ink); }
.cn-act .n small { display: block; font-weight: 400; font-size: 12px; color: var(--quiet); }
.cn-act .n .st { margin-top: 3px; font-size: 12px; }

/* ─── the organization's facts and the roles, as fragments ─── */
.cn-roles dt { font-weight: 500; color: var(--ink-2); }
.cn-roles dd { color: var(--quiet); }

/* ─── the gateway lane ─── */
.gw-lane dd small { display: block; color: var(--quiet); font-size: 12px; }
.gw-row { display: grid; gap: 1px; padding: 2px 0; }
.gw-row b { font-weight: 500; }
.gw-row small { color: var(--quiet); font-size: 12px; }

@media (max-width: 899px) {
  .cn-act { grid-template-columns: minmax(0, 1fr); }
  .cn-act .tb { justify-self: start; }
  /* the fleet keeps the device and its state; last contact, platform, reporter, enrolment and the verb are in the details sheet */
  .space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) .t .cn-wide, .space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) .t .cn-mid, .space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) .t .cn-verb { display: none; }
  .space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) .pane[data-pane="c-devices"] .t td.two b { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) .pane[data-pane="c-devices"] .t td.two .sub.blk { max-width: 170px; }
}