/* The same app catalogue is used by standard, full and referral signup. */
.onboarding-apps { --skel: #eceef1; --skel-hi: #f7f8fa; }
.screen[data-screen="connect"] .cta-row { position: sticky; bottom: 0; z-index: 4; background: var(--bg); padding: 18px 0; margin-top: 24px; border-top: 1px solid var(--line); }
.onboarding-apps .pane-desc { max-width: 580px; margin-bottom: 26px; }
.onboarding-apps .app-filters { display: flex; gap: 10px; margin-bottom: 18px; }
.onboarding-apps .app-search { flex: 1; position: relative; min-width: 0; }
.onboarding-apps .app-search svg { position: absolute; left: 14px; top: 14px; width: 17px; height: 17px; color: var(--ink-mute); pointer-events: none; }
.onboarding-apps input[type="search"], .onboarding-apps select { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 13px; padding: 0 13px; }
.onboarding-apps input[type="search"] { padding-left: 40px; }
.onboarding-apps .app-category { width: 190px; flex-shrink: 0; }
.onboarding-apps .app-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.onboarding-apps .app-tab { padding: 0 0 11px; font-size: 13px; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onboarding-apps .app-tab[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.onboarding-apps .app-tab span { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--ink-soft); background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; }
.onboarding-apps .app-section-title { font-size: 12px; font-weight: 500; color: var(--ink-soft); margin: 22px 0 10px; }
.onboarding-apps .src-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.onboarding-apps .src-card { min-width: 0; min-height: 84px; padding: 16px; border-radius: 8px; box-shadow: none; gap: 12px; }
.onboarding-apps .src-card:hover { background: var(--bg-soft); border-color: #c9cdd4; }
.onboarding-apps .src-logo { border: 0; background: transparent; width: 32px; height: 32px; border-radius: 0; }
.onboarding-apps .src-logo img { width: 27px; height: 27px; object-fit: contain; }
.onboarding-apps .src-name { font-size: 13px; font-weight: 500; white-space: normal; line-height: 1.4; }
.onboarding-apps .src-sub { font-size: 11.5px; margin-top: 3px; color: var(--ink-soft); }
.onboarding-apps .src-connect { font-size: 11.5px; color: var(--ink); background: transparent; padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px; flex-shrink: 0; }
.onboarding-apps .src-check { display: flex; align-items: center; gap: 5px; width: auto; height: auto; background: transparent; font-size: 11px; color: var(--ok); white-space: nowrap; }
.onboarding-apps .src-check svg { width: 13px; height: 13px; }
.onboarding-apps .src-card.is-soon { opacity: 1; cursor: default; }
.onboarding-apps .src-card.is-soon:hover { border-color: var(--line); background: var(--bg); }
.onboarding-apps .src-soon { max-width: 66px; font-size: 11px; line-height: 1.4; color: var(--ink-mute); text-align: right; }
.onboarding-apps .apps-planned { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 17px; }
.onboarding-apps .apps-planned summary { cursor: pointer; color: var(--ink-soft); font-size: 13px; }
.onboarding-apps .apps-planned p, .onboarding-apps .apps-count { font-size: 12px; color: var(--ink-soft); margin: 12px 0; }
.onboarding-apps .apps-count { margin: 0 0 18px; }
.onboarding-apps .apps-empty { border: 1px solid var(--line); border-radius: 8px; padding: 30px 24px; text-align: center; }
.onboarding-apps .apps-empty strong { font-weight: 500; display: block; margin-bottom: 7px; }
.onboarding-apps .apps-empty p { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; }
.onboarding-apps .apps-empty button { font-size: 13px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 5px; }
.onboarding-apps .app-skeleton { display: flex; align-items: center; gap: 14px; padding: 18px 16px; height: 84px; border: 1px solid var(--line); border-radius: 8px; }
.onboarding-apps .app-skeleton i, .onboarding-apps .app-skeleton b { display: block; background: var(--skel); animation: app-skeleton-pulse 1.5s ease-in-out infinite; }
.onboarding-apps .app-skeleton i { width: 32px; height: 32px; }
.onboarding-apps .app-skeleton span { flex: 1; }
.onboarding-apps .app-skeleton b { height: 10px; width: 65%; margin: 7px 0; }
.onboarding-apps .app-skeleton b + b { width: 42%; height: 8px; }
.onboarding-apps :is(button, input, select, summary):focus-visible, .onboarding-app-dialog :is(button, input, textarea):focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 3px; box-shadow: none; }
.onboarding-app-dialog { padding: 30px; width: 520px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.onboarding-app-dialog .app-dialog-logo { margin-bottom: 16px; }
.onboarding-app-dialog .app-dialog-logo img { width: 32px; height: 32px; object-fit: contain; }
.onboarding-app-dialog .app-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.onboarding-app-dialog .app-dialog-actions button { padding: 9px 15px; font-size: 13px; border-radius: 5px; }
.onboarding-app-dialog .app-dialog-actions .app-cancel { border: 1px solid var(--line); }
.onboarding-app-dialog label.app-field { display: block; margin: 14px 0; font-size: 12px; color: var(--ink-soft); }
.onboarding-app-dialog label.app-field input, .onboarding-app-dialog label.app-field textarea, .onboarding-app-dialog .app-resource-search { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; margin-top: 5px; font-size: 13px; color: var(--ink); }
.onboarding-app-dialog .app-resource-list { max-height: 260px; overflow-y: auto; margin-top: 12px; }
.onboarding-app-dialog .app-resource-row { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 10px 0; }
.onboarding-app-dialog .app-resource-row input { appearance: auto; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--ink); }
.onboarding-app-dialog .app-resource-all { font-size: 12px; margin-top: 10px; text-decoration: underline; }
.onboarding-app-dialog .app-dialog-error { font-size: 12px; color: #a6372c; line-height: 1.5; margin-top: 12px; }
@keyframes app-skeleton-pulse { 50% { background: var(--skel-hi); } }
@media (prefers-reduced-motion: reduce) { .onboarding-apps .app-skeleton :is(i,b) { animation: none; } }
@media (max-width: 600px) {
  body:has(.screen[data-screen="connect"].is-active) .topbar { gap: 20px; padding-inline: 22px; }
  body:has(.screen[data-screen="connect"].is-active) .wordmark { flex-shrink: 0; }
  body:has(.screen[data-screen="connect"].is-active) .topbar-right { text-align: right; }
  body:has(.screen[data-screen="connect"].is-active) .login-link { font-size: 12px; line-height: 1.4; }
  .screen[data-screen="connect"] .cta-row { padding: 14px 0; }
  .onboarding-apps .app-filters { flex-direction: column; }
  .onboarding-apps .app-category { width: 100%; }
  .onboarding-apps .src-grid { grid-template-columns: minmax(0, 1fr); }
  .onboarding-apps .src-card { min-height: 78px; }
  .onboarding-app-dialog { padding: 28px 22px; }
}