.home-ai-connections { width: min(100% - 2rem, 36rem); margin: 0 auto 2rem; text-align: left; }
.home-ai-connections h2 { font: inherit; font-size: 1rem; font-weight: 500; color: var(--ink-muted); margin: 0 0 .5rem; }
.home-ai-connections .ai-connection-note { color: var(--ink-muted); font-size: .875rem; line-height: 1.5; margin: .4rem 0 .8rem; }
.ai-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.ai-provider { border: 1px solid var(--line); border-radius: .8rem; padding: 1rem; min-width: 0; }
.ai-provider h3 { font: inherit; font-weight: 500; margin: 0 0 .3rem; }
.ai-connection-status { font-size: .875rem; color: var(--ink-muted); margin: 0 0 .6rem; }
.ai-connect-link, .ai-manage-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--clay); text-decoration: none; text-underline-offset: .25em; }
.ai-connect-link { display: flex; font-size: .9rem; gap: .3rem; }
.ai-connect-label { min-width: 0; }
.ai-connect-link [aria-hidden] { flex-shrink: 0; }
.ai-manage-link { margin-top: .5rem; font-size: .875rem; }
.ai-connect-link:hover, .ai-manage-link:hover { text-decoration: underline; }
.ai-connect-link:focus-visible, .ai-manage-link:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: .2rem; }
/* Make both assistants discoverable without scrolling past the decorative mark.
   Keep the original home composition when AI connections are disabled. */
.home-logo-stage:has(.home-ai-connections:not([hidden])) { gap: 1.5rem; padding-top: 1.5rem; }
.home-logo-stage:has(.home-ai-connections:not([hidden])) .home-ember { width: 10rem; flex-shrink: 0; }
.home-logo-stage:has(.home-ai-connections:not([hidden])) .home-shortcuts { margin-top: 0; }
@media (max-width: 600px) {
  .home-logo-stage:has(.home-ai-connections:not([hidden])) { justify-content: flex-start; gap: 1.25rem; }
  .home-logo-stage:has(.home-ai-connections:not([hidden])) .home-ember { width: 7rem; }
  .ai-provider { padding: .75rem; }
  .ai-connect-link { column-gap: .2rem; }
}
@media (max-width: 340px) { .ai-provider-grid { grid-template-columns: minmax(0,1fr); } }