/* Connections — layout unique to this page: the at-a-glance strip, the rack-network schematic and the address map. */
@layer page {
  /* One line of jump links, one per section below (no KPI tiles). */
  .nw-strip { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); font-size: var(--t-data); }
  .nw-strip > a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); min-height: 32px; padding: 4px 0; color: var(--text-2); text-decoration: none; min-width: 0; }
  .nw-strip > a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .nw-strip b { font-weight: 650; color: var(--text); }
  @media (pointer: coarse) { .nw-strip > a { min-height: 44px; align-items: center; } }

  /* Rack network schematic: server port → switch → devices. Status squares only; detail lives in the table. */
  .nw-net { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s6); align-items: stretch; }
  .nw-sch { display: grid; grid-template-columns: max-content 36px max-content 36px minmax(0, 1fr); align-items: center; }
  .nw-node { display: grid; gap: 2px; padding: var(--s2) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r3); background: var(--sheet); font-size: var(--t-small); color: var(--text-2); }
  .nw-node b { color: var(--text); font-size: var(--t-data); font-weight: 650; }
  .nw-wire { height: 2px; background: var(--ok-dot); }
  .nw-fan { position: relative; display: grid; gap: 6px; padding-left: 28px; }
  .nw-fan::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--ok-dot); }
  .nw-ep { position: relative; display: flex; align-items: center; gap: var(--s2); height: 28px; font-size: var(--t-small); color: var(--text-2); white-space: nowrap; }
  .nw-ep::before { content: ''; position: absolute; left: -28px; width: 22px; top: 13px; height: 2px; background: var(--ok-dot); }
  .nw-ep b { color: var(--text); font-weight: 600; font-family: var(--font-mono); font-size: 13px; }
  /* A wire that is not a working link is dashed, in its tone (bad: no answer, info: reconnecting or in setup, idle: not set up). */
  .nw-ep[data-wire]::before { background: repeating-linear-gradient(90deg, var(--wire) 0 4px, transparent 4px 8px); }
  .nw-ep[data-wire="bad"] { --wire: var(--bad-dot); }
  .nw-ep[data-wire="info"] { --wire: var(--info-dot); }
  .nw-ep[data-wire="idle"] { --wire: var(--ink-300); }

  /* Server ports: the status column reads from the end. */
  .nw-portact { justify-items: end; text-align: end; }

  /* Address pool: one square per address. */
  .nw-pool { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s6); align-items: start; }
  .nw-addr { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
  .nw-addr > i { height: 32px; border-radius: 3px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 12px/32px var(--font-mono); font-style: normal; text-align: center; color: var(--text-3); }
  .nw-addr > i[data-state="used"] { background: var(--info-bg); color: var(--info-fg); box-shadow: inset 0 0 0 1px var(--info-line); }
  .nw-addr > i[data-state="offered"] { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-text); }

  @media (max-width: 1180px) { .nw-net { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 760px) {
    .nw-sch { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .nw-sch > .nw-wire { width: 2px; height: 20px; margin-left: 24px; }
    .nw-sch > .nw-fan { margin-left: 24px; }
    .nw-pool { grid-template-columns: minmax(0, 1fr); }
    .nw-addr { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .nw-portact { justify-items: start; text-align: start; }
  }
}