.server-flow-status{display:block;color:#25724e;font-size:10px;font-weight:700;margin-top:5px}.server-error{color:#a33b30;white-space:pre-wrap;font-size:12px}.server-guide{font-size:13px;line-height:1.9;padding-left:22px}.server-media{max-height:450px;overflow:auto}.server-media article{padding:18px;border:1px solid #dae5d9;border-radius:9px;margin:10px 0}.server-media input{width:100%}.flow-menu[open]>div{max-height:350px;overflow:auto}.flowrow .row-metric{min-width:70px}.flowrow .row-metric strong{font-size:18px}.server-error:empty{display:none}
.server-connect{max-width:720px}.server-connect input,.server-connect select{width:100%}.server-connect .actions{justify-content:flex-start}.server-connect small{display:block;margin-top:7px}

/* Server controls must stay reachable on narrow screens. */
.server-connect{width:100%;min-width:0}
.server-connect input,.server-connect select{min-width:0;max-width:100%}
.server-connect .actions{flex-wrap:wrap}
.server-connect ~ .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));justify-content:stretch}
.server-connect ~ .actions>button{min-width:0;white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){
  .card:has(>.server-connect){min-width:0;padding:18px}
  .card:has(>.server-connect) .sectionhead{align-items:flex-start;flex-wrap:wrap;gap:10px}
  .server-connect .actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .server-connect .actions>button{width:100%;min-width:0;white-space:normal}
  .server-connect ~ .actions{grid-template-columns:minmax(0,1fr);width:100%;gap:10px}
  .server-connect ~ .actions>button{width:100%;min-height:48px;text-align:left}
  .server-connect ~ .notice,.server-guide{overflow-wrap:anywhere}
  .server-media article{min-width:0;overflow-wrap:anywhere}
}