.ip-on #app>.pagehead{display:none}

.ip{display:grid;gap:var(--s-4);margin:0 0 var(--s-4);min-width:0}
.ip>*{min-width:0}
.ip-slot:empty{display:none}

.ip-ph{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3) var(--s-4);flex-wrap:wrap;
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.ip-tl{min-width:0}
.ip-tl h1{font-family:var(--display);font-size:var(--fs-page);font-weight:var(--fw-semi);color:var(--navy);
  line-height:var(--lh-tight);letter-spacing:var(--tr-tighter);margin:0}
.ip-sub{margin:var(--s-2) 0 0;font-size:var(--fs-meta);color:var(--mut)}

.ip-ban{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);align-items:center;
  background:var(--status-alert-bg);border:1px solid var(--status-alert-line);border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);color:var(--status-alert-txt);font-size:var(--fs-meta)}
.ip-ban b{display:block;font-family:var(--display);font-size:var(--fs-body);font-weight:var(--fw-semi)}
.ip-ban button{white-space:nowrap}

.ip-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);min-width:0}
.ip-sh{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.ip-sh h2{font-family:var(--display);font-size:var(--fs-title);font-weight:var(--fw-semi);color:var(--navy);
  line-height:var(--lh-snug);margin:0}

.ip-flow{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,.8fr) 40px minmax(0,1fr);gap:var(--s-2);
  align-items:stretch;margin-top:var(--s-3)}
.ip-hold{grid-column:1 / -1;min-height:220px;border-radius:var(--r-md);background:var(--n-25)}
.ip-col{border:1px solid var(--n-100);border-radius:var(--r-md);padding:var(--s-3);display:grid;gap:var(--s-2);
  align-content:start;background:var(--bg);min-width:0}
.ip-col h3{font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-semi);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--faint);margin:0}
.ip-node{display:flex;gap:var(--s-3);align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s-2) var(--s-3);min-width:0;width:100%;text-align:left;
  font-family:var(--sans);font-size:var(--fs-body);color:var(--ink)}
.ip-node>div{min-width:0;flex:1}
.ip-node b{display:block;font-family:var(--display);font-weight:var(--fw-semi);color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-node small{display:block;font-size:var(--fs-meta);color:var(--faint)}
.ip-node.bad{border-color:var(--status-alert-line);background:var(--status-alert-bg)}
.ip-node.bad small{color:var(--status-alert-txt)}
button.ip-node{cursor:pointer}
button.ip-node:hover{border-color:var(--navy)}
.ip-node.off{border-style:dashed;background:transparent}
.ip-node.off b{color:var(--mut)}
.ip-node.add{justify-content:center;border-style:dashed;font-family:var(--display);font-weight:var(--fw-semi);
  font-size:var(--fs-meta);color:var(--navy)}
.ip-mark{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:var(--navy);color:var(--n-0);font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-bold)}
.ip-mark.off{background:var(--n-100);color:var(--mut)}
.ip-more{font-family:var(--display);font-size:var(--fs-meta);font-weight:var(--fw-semi);color:var(--mut)}
.ip-hub{display:grid;place-items:center;align-content:center;gap:var(--s-1);text-align:center;background:var(--navy);
  color:var(--n-0);border-radius:var(--r-md);padding:var(--s-4)}
.ip-hub b{font-family:var(--display);font-size:var(--fs-title);font-weight:var(--fw-semi)}
.ip-hub span{font-family:var(--display);font-size:var(--fs-meta);font-weight:var(--fw-semi);color:var(--n-200)}
.ip-arrow{display:grid;place-items:center;color:var(--n-300)}

@media (max-width:900px){
  .ip-flow{grid-template-columns:minmax(0,1fr)}
  .ip-arrow{transform:rotate(90deg);height:28px}
}
@media (max-width:640px){
  .ip-ban{grid-template-columns:minmax(0,1fr)}
  .ip-ban button,.ip-ph>button{width:100%}
  .ip-col h3,.ip-mark{font-size:var(--fs-meta)}
}
@media (pointer:coarse){
  button.ip-node{min-height:44px}
}