/* Integrations — layout unique to this page: the flow map, the waiting-messages seam and the editor's frame. */
@layer page {
  /* Flow map: what Janus tells outside systems, and what they ask of Janus (boxes and wires; the words carry the state). */
  .ig-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ig-lane { display: grid; gap: var(--s3); align-content: start; min-width: 0; padding: var(--s5); }
  .ig-lane + .ig-lane { border-left: 1px solid var(--line); }
  .ig-fl { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1.15fr) 22px minmax(0, .9fr); align-items: center; }
  .ig-fl__b { min-width: 0; padding: 6px var(--s3); border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--sheet); font-size: var(--t-small); line-height: 1.35; }
  .ig-fl__b > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ig-fl__b > b { font-weight: 600; }
  .ig-fl__b > span { color: var(--text-3); font-size: var(--t-cap); }
  .ig-fl__b[data-kind="janus"] { background: var(--sheet-sunk); border-color: var(--line); }
  .ig-fl__b[data-tone] { border-color: color-mix(in oklab, var(--tone-line) 55%, transparent); background: var(--tone-surface); }
  .ig-fl__b[data-tone="idle"] { color: var(--text-2); background: var(--sheet-sunk); border-color: var(--line-2); }
  .ig-wire { position: relative; height: 2px; background: var(--wire, var(--ok-dot)); }
  .ig-wire::after { content: ''; position: absolute; right: 0; top: -3px; border: 4px solid transparent; border-left: 5px solid var(--wire, var(--ok-dot)); border-right: 0; }
  .ig-wire[data-tone] { --wire: var(--tone-dot); }
  .ig-wire[data-tone="idle"] { --wire: var(--line-2); }

  /* The 12 waiting messages as a seam: recorded in Janus, sent, acknowledged by the receiver. */
  .ig-ms { display: grid; grid-template-columns: minmax(0, 1.6fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; }
  .ig-ms__lane { display: grid; gap: var(--s2); align-content: start; min-width: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r3); background: var(--sheet); }
  .ig-ms__lane[data-tone] { border-color: color-mix(in oklab, var(--tone-line) 55%, transparent); background: var(--tone-surface); }
  .ig-ms__lane[data-tone="idle"] { background: var(--sheet-sunk); color: var(--text-2); border-color: var(--line); }
  .ig-ms__w { position: relative; }
  .ig-ms__w::before { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: var(--ok-dot); }
  .ig-ms__w[data-tone="bad"]::before { background: var(--bad-dot); }
  .ig-ms__w[data-tone="idle"]::before { background: var(--line-2); }

  /* An automation's rule on one line: When · Only · Then. */
  .ig-rule { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
  .ig-rule > span { display: inline-flex; gap: var(--s2); align-items: baseline; }

  /* The editor: title row, section anchors beside the groups. */
  .ig-edhead { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line); }
  .ig-edbody { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
  .ig-edanchors { padding: var(--s5) var(--s3); border-right: 1px solid var(--line); }
  .ig-edanchors > nav { position: sticky; top: calc(var(--top-h) + var(--s4)); }
  .ig-edmain { min-width: 0; padding: 0 var(--s6); }
  .ig-edmain > * { scroll-margin-top: calc(var(--top-h) + var(--s4)); }
  .ig-req { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s4); }
  .ig-kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--s2); align-items: center; }

  @media (max-width: 1280px) {
    .ig-flow { grid-template-columns: minmax(0, 1fr); }
    .ig-lane + .ig-lane { border-left: 0; border-top: 1px solid var(--line); }
  }
  @media (max-width: 1100px) {
    .ig-edbody { grid-template-columns: minmax(0, 1fr); }
    .ig-edanchors { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s2) var(--s4); }
    .ig-edanchors > nav { position: static; }
  }
  @media (max-width: 900px) {
    .ig-ms { grid-template-columns: minmax(0, 1fr); }
    .ig-ms__w { height: 16px; }
    .ig-ms__w::before { left: 24px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  }
  @media (max-width: 760px) {
    .ig-fl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .ig-fl > .ig-wire { width: 2px; height: 12px; margin-left: var(--s4); }
    .ig-fl > .ig-wire::after { display: none; }
    .ig-edhead { padding-inline: var(--s4); }
    .ig-edmain { padding: 0 var(--s4); }
    .ig-req, .ig-kv { grid-template-columns: minmax(0, 1fr); }
  }
}