/* "Set up Avori on this Mac", the Mac app's first-run setup
   (public/ai-accounts.js openOnboarding), and the vendor marks on the AI
   accounts rows. Grayscale; green only for a finished step. The vendors'
   marks take the text colour (their monochrome versions). */

/* AI accounts rows (Settings › AI subscriptions): Claude's and ChatGPT's marks. */
.ai-account-mark.logo { color:var(--ink); }
.ai-account-mark.logo svg { width:16px; height:16px; }

.modal.dialog.ai-setup-modal { max-width:560px; }
:root .ai-setup-modal .dialog-body.ai-setup { display:flex; flex-direction:column; gap:var(--space-6); min-height:0; overflow-y:auto;
  padding:var(--space-7) var(--space-7) var(--space-5); }

.ai-setup-hero { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); text-align:center; }
.ai-setup-logo { display:grid; place-items:center; width:52px; height:52px; margin-bottom:var(--space-2); border-radius:14px; background:var(--quiet); color:var(--ink); }
.ai-setup-logo svg { width:22px; height:28px; }
.ai-setup-hero h2 { margin:0; color:var(--ink); font-size:var(--text-2xl); font-weight:600; letter-spacing:-.015em; line-height:var(--leading-tight); }
.ai-setup-hero p { margin:0; color:var(--ink-3); font-size:var(--text-md); line-height:var(--leading); }

.ai-setup-list { margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ai-setup-row { display:flex; align-items:center; gap:var(--space-3); min-height:72px; padding:var(--space-4); border-top:1px solid var(--line); }
.ai-setup-row:first-child { border-top:0; }
.ai-setup-row:focus { outline:none; }
.ai-setup-row:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }

.ai-mark { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--quiet); color:var(--ink); }
.ai-mark svg { width:22px; height:22px; }
.ai-mark-claude svg, .ai-mark-chatgpt svg { width:20px; height:20px; }
.ai-setup-row[data-state="soon"] .ai-mark { color:var(--ink-3); }

.ai-setup-text { flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ai-setup-title { color:var(--ink); font-size:var(--text-md); font-weight:600; line-height:var(--leading-tight); }
.ai-setup-detail { color:var(--ink-3); font-size:var(--text-sm); line-height:1.45; overflow-wrap:anywhere; }

.ai-setup-side { flex:none; display:flex; align-items:center; gap:var(--space-2); }
.ai-setup-status { display:inline-flex; align-items:center; gap:6px; color:var(--ink-3); font-size:var(--text-sm); white-space:nowrap; }
.ai-setup-status svg { flex:none; width:14px; height:14px; }
.ai-setup-row[data-state="done"] .ai-setup-status { color:var(--green); font-weight:550; }
.ai-setup-row[data-state="working"] .ai-setup-status { color:var(--ink-2); }
.ai-setup-spinner { flex:none; width:14px; height:14px; border:2px solid var(--line-2); border-top-color:var(--ink); border-radius:50%; animation:ai-setup-spin .9s linear infinite; }
@keyframes ai-setup-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-setup-spinner { animation-duration:2.4s; } }
.ai-setup-choices { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
:root .ai-setup-choices .btn.subtle { min-height:24px; height:auto; padding:2px 4px; border:0; background:transparent; color:var(--ink-3); font-size:var(--text-xs); font-weight:450; }
:root .ai-setup-choices .btn.subtle:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

:root .ai-setup-modal .dialog-actions.ai-setup-actions { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-2) var(--space-7) var(--space-6); }
:root .ai-setup-modal .btn.ai-setup-credits { padding:0 var(--space-1); border:0; background:transparent; color:var(--ink-3); font-weight:450; }
:root .ai-setup-modal .btn.ai-setup-credits:hover { background:transparent; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
:root .ai-setup-modal .ai-setup-actions .btn:not(.ai-setup-credits) { min-width:96px; justify-content:center; }

@media (max-width: 560px) {
  .modal.dialog.ai-setup-modal { max-height:calc(100dvh - 32px); }
  :root .ai-setup-modal .dialog-body.ai-setup { gap:var(--space-4); padding:var(--space-5) var(--space-4) var(--space-3); }
  .ai-setup-logo { width:44px; height:44px; margin-bottom:var(--space-1); border-radius:12px; }
  .ai-setup-logo svg { width:19px; height:24px; }
  .ai-setup-hero h2 { font-size:var(--text-xl); }
  .ai-setup-hero p { font-size:var(--text-sm); }
  .ai-setup-row { flex-wrap:wrap; align-items:flex-start; row-gap:var(--space-2); min-height:0; padding:var(--space-3); }
  .ai-setup-text { flex-basis:calc(100% - 52px); }
  .ai-setup-side { width:100%; padding-left:52px; justify-content:flex-start; }
  .ai-setup-choices { flex-direction:row; align-items:center; gap:var(--space-2); }
  :root .ai-setup-modal .dialog-actions.ai-setup-actions { flex-direction:column-reverse; align-items:stretch; padding:var(--space-2) var(--space-4) var(--space-4); }
  :root .ai-setup-modal .ai-setup-actions .btn { justify-content:center; }
}