/* Connections settings tab — builds on styles.css tokens (.card, .btn, .field, .option-card, .result). */
.conn-prefs { margin: 2rem 0 1rem; max-width: 34rem; }
.conn-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.conn-h { font-size: var(--t-cap); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); margin: 2.5rem 0 .75rem; }
.conn-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.conn-list:empty::before { content: "Nothing connected yet."; display: block; padding: 1rem 0; color: var(--fg-muted); font-size: var(--t-small); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.conn-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.5rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.conn-item:last-child { border-bottom: 1px solid var(--rule); }
.conn-item strong { font-weight: 400; }
.conn-item p { margin: .25rem 0 0; }
.conn-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.conn-group { margin-top: 1rem; }
.conn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.5rem; align-items: start; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.conn-row:last-child { border-bottom: 1px solid var(--rule); }
.conn-row strong { font-weight: 400; }
.conn-row p { margin: .375rem 0 0; max-width: 40rem; }
.conn-meta { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.conn-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 .75rem; border-radius: var(--r-loop); corner-shape: var(--q-shape);
  background: var(--tint); font: 400 var(--t-cap)/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.conn-tag[data-status="available"], .conn-tag[data-status="active"] { color: var(--allow); }
.conn-tag[data-status="needs-setup"], .conn-tag[data-status="degraded"], .conn-tag[data-status="pending"] { color: var(--stepup); }
.conn-tag[data-status="not-possible"], .conn-tag[data-status="error"], .conn-tag[data-status="reauth_required"], .conn-tag[data-status="revoked"] { color: var(--deny); }
.conn-form { grid-column: 1 / -1; margin-top: 1rem; max-width: 34rem; }
.conn-form .field { margin-bottom: 1.25rem; }
@media (max-width: 640px) {
  .conn-row, .conn-item { grid-template-columns: minmax(0, 1fr); }
  .conn-row > .btn, .conn-item > .btn { justify-self: start; }
  .conn-hours { grid-template-columns: minmax(0, 1fr); }
}