/* Connection progress and account controls extend the existing OF API design tokens. */
.connection-layout,.settings-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:24px;margin-bottom:24px}
.connection-card{padding:28px;margin-bottom:24px;min-width:0}
.connection-layout>.connection-card,.settings-grid>.connection-card{margin-bottom:0}
.connection-card h2{margin-bottom:12px}.connection-card>p{margin-bottom:22px}
.connection-card form{margin-top:24px}.connection-card hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.connection-title,.connection-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.connection-title code{font-size:10px;overflow-wrap:anywhere}.connection-actions{justify-content:flex-start;margin-top:24px}
.connection-progress{display:flex;align-items:flex-start;gap:18px;margin:38px 0 24px}
.progress-symbol{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--pale);color:var(--blue);font-size:23px}
.progress-symbol.in-progress{box-shadow:0 0 0 6px var(--canvas)}
.connection-progress h2{font-size:23px}.connection-progress p{max-width:48ch}
.status-reason{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere;margin-top:8px}
.password-field{position:relative;margin-bottom:22px}.password-field .field{margin-bottom:7px}.password-field .inline-link{display:block;margin-left:auto}
.reconnect-card{max-width:660px}.reconnect-card form{max-width:460px}
.connection-history,.session-list{list-style:none;padding:0;margin:20px 0 0}
.connection-history li,.session-list li{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;border-top:1px solid var(--line);padding:15px 0}
.connection-history small,.session-list small,.staff-workspace{display:block;color:var(--muted);font-size:11px;margin-top:4px;overflow-wrap:anywhere}
.connection-history time{font-size:11px;color:var(--muted);text-align:right;flex-shrink:0}
.staff-actions{min-width:170px}.staff-actions .button{margin-right:15px}.danger-zone{border-color:#eccfd2}.danger-zone form{max-width:460px}
@media(max-width:1050px){.connection-layout,.settings-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.connection-card{padding:22px 18px}.connection-progress{gap:12px;margin-top:28px}.connection-progress h2{font-size:21px}.connection-history li{flex-direction:column;gap:6px}.connection-history time{text-align:left}.connection-title{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.progress-symbol{transition:none}}

/* Advanced credentials stay inside the existing form layout on narrow screens. */
fieldset[data-connection-kind], .reconnect-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.advanced-connection { margin: 20px 0; border-top: 1px solid var(--line); padding-top: 16px; }
.advanced-connection summary { cursor: pointer; font-weight: 600; }
.advanced-connection .field { margin-top: 16px; }
.advanced-connection textarea { width: 100%; min-width: 0; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 6px; font: 12px/1.6 monospace; }
.advanced-connection code { overflow-wrap: anywhere; }

/* A gentle pulse signals work in progress; only the verified result gets a checkmark. */
.setup-steps li.complete{color:#438464}.setup-steps li.complete>span{border-color:#cce5d7;background:#edf7f1}
.setup-progress{text-align:center;padding-top:16px}.setup-progress h2{margin-top:26px;margin-bottom:12px}
.setup-progress .muted{max-width:48ch;margin:0 auto}.setup-progress .form-footer{text-align:left;margin-top:38px}
.setup-phase{font-weight:600;margin:0 0 14px;color:var(--ink)}
.setup-signal{display:inline-flex;align-items:center;justify-content:center;position:relative;width:76px;height:76px;border-radius:50%;background:#edf7f1;color:#438464;font-size:36px}
.setup-signal i{width:20px;height:20px;border-radius:50%;background:#4e9b79}
.setup-signal.pending::after{content:'';position:absolute;inset:0;border:2px solid #4e9b79;border-radius:50%;animation:setup-pulse 1.8s ease-out infinite}
.setup-signal.attention{background:#fff5df;color:#936820}.setup-signal.error{background:#fcecec;color:#ae4444}
@keyframes setup-pulse{0%{transform:scale(.75);opacity:.65}100%{transform:scale(1.35);opacity:0}}
@media(prefers-reduced-motion:reduce){.setup-signal.pending::after{animation:none;opacity:.35}}

/* Team access pairs a compact invite form with explicit role permissions. */
.team-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.team-permissions>div{border-top:1px solid var(--line);padding:16px 0}.team-permissions p{margin:6px 0 0}
.team-roster{margin-bottom:24px}.team-invite-actions{white-space:nowrap}.team-invite-actions .button{margin-right:12px}
.team-roster td{overflow-wrap:anywhere}.team-roster .panel-heading{gap:16px;flex-wrap:wrap}
@media(max-width:800px){.team-layout{grid-template-columns:minmax(0,1fr);gap:0}}
@media(max-width:600px){
  .team-roster table{min-width:0;width:100%}.team-roster thead{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
  .team-roster tbody,.team-roster tr,.team-roster td{display:block;width:100%}
  .team-roster tr{padding:16px 18px;border-top:1px solid var(--line)}
  .team-roster td{padding:6px 0;border:0;white-space:normal}
  .team-roster td[data-label]::before{content:attr(data-label);display:inline-block;min-width:100px;color:var(--muted);font-weight:400}
  .sidebar nav{flex-wrap:wrap;overflow:visible}
}