/* castomFLOW — connections. Only what castomo-dashkit does not already draw.
   Connections (js/views/connections.js), Triggers (js/views/triggers.js) and
   the trigger panel the editor shares (js/trigger-panel.js). Every rule here is
   prefixed .cn- so this sheet never meets another area's. */

/* Rows here start their second line past the kit's `.list-icon` (36px wide) and
   the list's gap, so words below a name line up with the name. */
.cn-trows, .cn-creds { --cn-indent: calc(36px + var(--s1)); }

/* ---------- Blocks inside a panel or a card ----------
   A block inside a card marks itself with a rule, never with more room
   (GUIDELINES §0.32): on a phone the card's pad stays the only inset. */
.cn-block + .cn-block { padding-top: var(--s2); border-top: var(--rule-w) solid var(--rule); }
.cn-block h3 { font-size: var(--t1); }
.cn-block .section-head { margin-bottom: 0; }
.cn-block .section-head > h3 { flex: 1 1 14ch; }

/* The trigger's name, its way in and its state on one line; the badge drops
   under the name rather than squeezing it. */
.cn-trigger-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); min-width: 0; }
.cn-trigger-title .list-main { flex: 1 1 14ch; }
.cn-trigger-title h3 { overflow-wrap: anywhere; }

/* ---------- Machine values: the address, the secret, the curl line ----------
   Long unbroken strings break anywhere rather than widen the page. */
.cn-secret code, .cn-trow-address code { word-break: break-all; }
.cn-schemes, .cn-curl { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-1); }

/* ---------- Receipts ---------- */
.cn-receipts > li { align-items: flex-start; }
.cn-receipt-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); }
.cn-receipt-top small { color: var(--ink-3); font-size: var(--t-1); font-variant-numeric: tabular-nums; }
.cn-receipt-said { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.cn-receipt .disclosure { margin-top: var(--s0); }

.cn-skeleton { display: block; height: var(--control-h); }

/* ---------- Credentials ---------- */
.cn-intro { display: grid; gap: var(--s1); }
.cn-intro > p:first-child { color: var(--ink-2); }
.cn-center { text-align: center; }
.cn-creds > li { flex-wrap: wrap; align-items: flex-start; }
.cn-creds .list-main { flex: 1 1 18ch; }
/* A credential's name is what a step types in its sign-in setting: shown in the machine face it is typed in. */
.cn-name { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.cn-row-actions { flex: none; }
/* 560px (the kit's phone step): the actions take a row of their own under the words,
   level with them, instead of pushing the name into a column a word wide. */
@media (max-width: 560px) {
  .cn-row-actions { flex: 1 1 100%; padding-inline-start: var(--cn-indent); }
}

.cn-users { display: grid; gap: var(--s0); margin: 0; padding-inline-start: var(--s3); color: var(--ink-2); }
.cn-users a { overflow-wrap: anywhere; }

/* The add/change dialog: the kind's explanation sits right under its choice. */
.cn-kind { display: grid; gap: var(--s0); margin: 0; padding: 0; border: 0; min-width: 0; }
.cn-kind > legend { padding: 0; margin-bottom: var(--s0); font-weight: 650; }
.cn-kind .segmented { max-width: 100%; }
.cn-kind .hint { margin: 0; }
.cn-dialog .dialog-body > [role="alert"]:empty { display: none; }
.cn-handbook:empty, .cn-plan:empty { display: none; }

/* ---------- The lent session ---------- */
.cn-uses > li { min-height: var(--target); padding-block: var(--s0); }

/* ---------- Triggers page ---------- */
.cn-filter:empty { display: none; }
.cn-filter { margin-bottom: var(--s1); }
.cn-trows > li { display: grid; gap: var(--s1); align-items: stretch; }
.cn-trows > li[hidden] { display: none; }
.cn-trow-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); min-width: 0; }
.cn-trow-line .list-main { flex: 1 1 16ch; }
.cn-trow-line .row-link { overflow-wrap: anywhere; }
.cn-trow-badges { display: flex; flex-wrap: wrap; gap: var(--s0); }
/* The facts line up under the name, past the icon, so the eye reads one column. */
.cn-trow-facts { display: grid; gap: var(--s0); padding-inline-start: var(--cn-indent); min-width: 0; }
.cn-trow-note { display: flex; align-items: flex-start; gap: var(--s0); margin: 0; color: var(--ink-2); font-size: var(--t-1); }
.cn-trow-note .ci { --ci-size: 16px; flex: none; }
.cn-trow-error { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cn-trow-panel { padding-top: var(--s2); border-top: var(--rule-w) solid var(--rule); }
/* 400px (the kit's edge-to-edge step): the icon's indent would be a second inset; the facts start at the card's edge. */
@media (max-width: 400px) {
  .cn-trows, .cn-creds { --cn-indent: 0px; }
}
.cn-trow-note.text-warn { color: var(--warn); }