/* System · Health & backups — page layout only: the site diagram, the backup path, the phone-access topology,
   and the state-driven words of the certificate and phone-access dialogs. Every block is a kit component. */
@layer page {
  /* Site in miniature: this server, the networks it serves, and the things on them — health drawn on each object */
  .sy-site { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
  .sy-srv { padding: var(--s5); display: grid; gap: var(--s3); align-content: start; border-right: 1px solid var(--line); background: var(--sheet-2); border-radius: var(--r4) 0 0 var(--r4); }
  .sy-srv__n { display: flex; gap: var(--s2); align-items: center; margin: 0; font-weight: 650; }
  .sy-lanes { display: grid; min-width: 0; }
  .sy-lane { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); }
  .sy-lane + .sy-lane { border-top: 1px solid var(--line-soft); }
  .sy-lane::before { content: ''; position: absolute; left: 0; top: 50%; width: var(--s4); height: 2px; background: var(--line-2); }
  .sy-lane__k { display: grid; gap: 2px; margin: 0; font-size: var(--t-small); color: var(--text-3); }
  .sy-lane__k b { font-size: var(--t-data); font-weight: 650; color: var(--text); }
  .sy-objs { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: flex-end; margin: 0; padding: 0; list-style: none; min-width: 0; }
  .sy-obj { display: grid; gap: 4px; justify-items: start; min-height: 44px; padding: var(--s1); margin: calc(var(--s1) * -1); border-radius: var(--r2); color: inherit; text-decoration: none; }
  .sy-obj:hover { background: var(--hover); }
  .sy-obj:hover .sy-obj__n { text-decoration: underline; text-underline-offset: 3px; }
  .sy-obj__n { font-weight: 650; font-size: var(--t-small); }

  /* Backups: the path each copy takes */
  .sy-hops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin: 0; padding: 0; list-style: none; }
  .sy-hop { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px var(--s3); align-content: start; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r3); background: var(--sheet); }
  .sy-hop > * { grid-column: 2; }
  .sy-hop > .sy-hop__i { grid-column: 1; grid-row: 1 / span 4; margin-top: 2px; color: var(--text-3); }
  .sy-hop + .sy-hop::before { content: ''; position: absolute; right: 100%; top: 50%; width: var(--s6); height: 2px; background: var(--line-2); }
  .sy-hop__path { overflow-wrap: anywhere; }
  .sy-narrow { max-width: 720px; }
  /* Server and support: each part rests as one line with its state (rule 3) */
  .sy-fold__t { font-weight: 650; }

  /* Phone access: this computer wired to its networks, then the address to open */
  .sy-topo { display: grid; grid-template-columns: 170px 44px minmax(0, 1fr); align-items: stretch; }
  .sy-topo__pc { display: grid; gap: var(--s1); align-content: center; padding: var(--s4); border: 1px solid var(--line-2); border-radius: var(--r3); background: var(--sheet-2); }
  .sy-topo__wire { position: relative; }
  .sy-topo__wire::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line-2); }
  .sy-topo__ifs { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
  .sy-ifc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r3); background: var(--sheet); }
  .sy-ifc[data-state="off"] { background: var(--sheet-sunk); color: var(--text-2); }
  .sy-ifc__sub { grid-column: 1 / -1; }
  .sy-reach { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s5); align-items: center; }
  .sy-url { font-family: var(--font-mono); font-size: 19px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }

  /* Allowed networks: the hint shows until a tick differs from what is saved (the opener is gated on the ticks: data-gate-scope). */
  #wa-edit:has(input[data-was="1"]:not(:checked), input[data-was="0"]:checked) #wr-hint { display: none; }
  /* The review reads the ticks: a newly allowed Public network, no network at all, or another change. */
  #web-review :is(.v-pub, .v-none) { display: none; }
  body:has(#wa-edit input[data-public][data-was="0"]:checked) #web-review .v-pub { display: revert; }
  body:has(#wa-edit input[data-public][data-was="0"]:checked) #web-review .v-change { display: none; }
  body:not(:has(#wa-edit input[name="net"]:checked)) #web-review .v-none { display: revert; }
  body:not(:has(#wa-edit input[name="net"]:checked)) #web-review :is(.v-change, .v-pub, .v-allow) { display: none; }
  #wr-rows :is(.v-on, .v-off) { display: none; }
  body:has(#net-office:checked) #wr-rows [data-net="office"] .v-on, body:has(#net-office:not(:checked)) #wr-rows [data-net="office"] .v-off,
  body:has(#net-wifi:checked) #wr-rows [data-net="wifi"] .v-on, body:has(#net-wifi:not(:checked)) #wr-rows [data-net="wifi"] .v-off { display: contents; }

  @media (max-width: 1180px) {
    .sy-site { grid-template-columns: minmax(0, 1fr); }
    .sy-srv { border-right: 0; border-bottom: 1px solid var(--line); border-radius: var(--r4) var(--r4) 0 0; }
    .sy-lane::before { display: none; }
  }
  @media (max-width: 900px) {
    .sy-hops { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
    .sy-hop + .sy-hop::before { right: auto; left: 28px; top: auto; bottom: 100%; width: 2px; height: var(--s3); }
  }
  @media (max-width: 700px) {
    .sy-lane { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s4); }
    .sy-topo { grid-template-columns: minmax(0, 1fr); }
    .sy-topo__wire { height: 20px; }
    .sy-topo__wire::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
    .sy-reach { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  }
}