/* Hallmark · component: connection settings · genre: modern-minimal · theme: Quiet Instrument
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P5 H4 E4 S5 R5 V4 */
.connections-page{max-width:980px;width:100%;margin-inline:auto;gap:var(--space-2xl);padding:var(--space-xl);overflow-wrap:anywhere;min-width:0}
.connections-page>section,.connection-form{min-width:0}
.connection-intro h2{font-size:var(--text-2xl);margin:0 0 var(--space-md)}
.connection-intro p{max-width:68ch;line-height:1.7}
.connection-form,.connection-secret,.connection-list-section,.connection-setup{padding-block:var(--space-xl);border-top:var(--rule-width) solid var(--color-rule)}
.connections-page h2{font-size:var(--text-xl);font-style:normal;margin:0 0 var(--space-lg)}
.connections-page h3{font-size:var(--text-base);font-style:normal;margin:0}
.connection-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-lg)}
.connection-fields label{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}
.connection-fields input,.connection-fields select,.connection-secret>input{min-height:44px;width:100%;min-width:0;border:var(--rule-width) solid var(--color-rule);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font:inherit;background:var(--color-paper);color:var(--color-ink)}
.connection-scope{margin:var(--space-xl) 0;border:0;padding:0;min-width:0}
.connection-scope legend{font-weight:600}
.connection-write-label{display:flex;align-items:center;gap:var(--space-sm);min-height:44px}
.connection-write-label input{width:18px;height:18px;accent-color:var(--color-accent)}
.connections-page button,.connections-page summary{min-height:44px;white-space:nowrap}
.connections-page :focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.connections-page :disabled{opacity:.55;cursor:not-allowed}
.connections-page button:active{transform:translateY(1px)}
.connection-secret{border-color:var(--color-success)}
.connection-secret>input{font-family:var(--font-code)}
.connection-secret-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-md)}
.connection-section-heading,.connection-row-title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.connection-section-heading h2{margin:0}
.connection-list{margin-top:var(--space-md)}
.connection-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl);padding-block:var(--space-lg);border-bottom:var(--rule-width) solid var(--color-rule)}
.connection-row>div{min-width:0}
.connection-row-title{justify-content:flex-start;flex-wrap:wrap}
.connection-row p{margin:var(--space-xs) 0}
.connection-badge{font-size:var(--text-xs);color:var(--color-muted)}
.connection-badge.active,.connection-feedback,.connections-page [data-state=success]{color:var(--color-success)}
.connection-revoke{color:var(--color-danger);flex-shrink:0}
.connection-command{margin-block:var(--space-lg);min-width:0}
.connection-command pre{white-space:pre-wrap;overflow-wrap:anywhere;border:var(--rule-width) solid var(--color-rule);padding:var(--space-lg);border-radius:var(--radius-sm);background:var(--color-subtle);color:var(--color-ink);font:var(--text-sm)/1.7 var(--font-code);margin:var(--space-sm) 0}
.connection-endpoint{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-md);font-size:var(--text-sm)}
.connection-endpoint dd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin:0;font-family:var(--font-code)}
.connection-endpoint dd span{min-width:0}
.connection-guides{margin-top:var(--space-md)}
.connection-guide{border-bottom:var(--rule-width) solid var(--color-rule);padding-block:var(--space-md)}
.connection-guide:last-child{border-bottom:0}
.connection-guide>summary{font-size:var(--text-base)}
.connection-notes{margin:var(--space-md) 0 0;padding-inline-start:1.2em;display:grid;gap:var(--space-xs)}
.connection-notes li{line-height:1.6}
.connection-secret-next{margin-top:var(--space-lg)}
.connection-setup summary,.connection-secret-next>summary{display:flex;align-items:center;cursor:pointer;color:var(--color-accent);font-weight:500}
.run-usage{font-size:var(--text-xs);line-height:1.6;color:var(--color-muted);margin-top:var(--space-md)}
#app.employee-workspace .panel-toggle,#app.employee-workspace .customer-panel,#app.employee-workspace .legacy-nav,#app.employee-workspace .bottom-nav{display:none!important}
@media(hover:hover){.connection-fields input:hover,.connection-fields select:hover{background:var(--color-subtle)}.connections-page button:hover{filter:brightness(.96)}}
@media(max-width:700px){.connections-page{padding:var(--space-lg);gap:var(--space-xl)}.connection-fields{grid-template-columns:minmax(0,1fr)}.connection-row{align-items:flex-start;gap:var(--space-sm);flex-direction:column}.connection-endpoint{grid-template-columns:minmax(0,1fr);gap:var(--space-xs)}.connection-secret-actions{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.connections-page button:active{transform:none}}

#app.employee-workspace.assistant-open .sidebar nav{display:grid}