/* ===== Model Onboarding Modal ===== */

.model-onboarding-modal {
  /*
  FNXC:Onboarding 2026-06-22-04:16:
  First-time provider/GitHub onboarding should visually match new-project onboarding, including spacing, button treatment, contrast, and persistent Discord help access.
  */
  /* Resizable via the native CSS grip. The user's chosen size is persisted
     by useModalResizePersist. Min/max keep the dimensions sane so a value
     saved on a 4K display still renders on a laptop. */
  min-width: 640px;
  min-height: 480px;
  max-width: calc(100vw - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
}

.model-onboarding-modal:not([style*="width"]) {
  width: min(960px, calc(100vw - 40px));
}
.model-onboarding-modal:not([style*="height"]) {
  height: min(85vh, calc(100dvh - 40px));
}

/*
FNXC:Onboarding 2026-08-17-23:47:
Hosted in FloatingWindow, this modal MUST fill its host exactly — the window paints its own bordered
surface, so any part the child does not cover shows through as unexplained blank space around the
content. FloatingWindow.css already sets `width/height: 100%` for this caller, but the two standalone
sizing rules above carry equal specificity (0,2,0 — the `:not([style*=…])` attribute test counts) and
won last on source order, so the panel rendered at 85vh inside a taller window and left ~60px of dead
surface under the footer, plus the matching right-edge strip the operator reported. Re-assert the fill
under the host class with the same `:not()` guards, so a user-resized window still wins via its inline
style. `resize`/`min-*` are the standalone dialog's affordances; inside the window the FRAME resizes,
and a 640px floor would push content under the east edge in a narrow window.
*/
.floating-window--model-onboarding .model-onboarding-modal:not([style*="width"]),
.floating-window--model-onboarding .model-onboarding-modal:not([style*="height"]) {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  resize: none;
}

.model-onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl) var(--space-xl) 0;
  gap: var(--space-md);
}

.model-onboarding-header .modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}

.model-onboarding-header .modal-close:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.model-onboarding-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  line-height: 1.1;
}

.model-onboarding-title svg {
  color: var(--accent);
}

.onboarding-optional-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-hover);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Step indicator */
.model-onboarding-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.onboarding-step-wrapper {
  display: flex;
  align-items: center;
}

.model-onboarding-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  /* Reset browser <button> defaults — done/skipped steps render as buttons
     (clickable to review) and would otherwise pick up the OS button
     chrome (white background, system border, etc). */
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
}

.model-onboarding-step-indicator.active {
  color: var(--accent);
}

.model-onboarding-step-indicator.active .step-number {
  background: var(--accent);
  color: var(--cta-text);
}

.model-onboarding-step-indicator.done .step-number {
  background: var(--color-success);
  border: 1px solid var(--color-success);
  color: var(--cta-text);
}

.model-onboarding-step-indicator.done {
  cursor: pointer;
}

.model-onboarding-step-indicator.done:hover {
  opacity: 0.85;
}

.model-onboarding-step-indicator.done:focus-visible {
  outline: var(--focus-ring-strong);
  border-radius: var(--radius-sm);
}

.model-onboarding-step-indicator.skipped {
  opacity: 0.7;
  border-color: var(--color-muted);
}

.model-onboarding-step-indicator .step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-hover);
  font-weight: 600;
  font-size: 12px;
}

.model-onboarding-step-indicator .step-label {
  font-weight: 500;
}

.onboarding-step-skip-mark {
  font-size: var(--space-lg);
  color: var(--text-muted);
  line-height: 1;
}

.model-onboarding-step-connector {
  width: 30px;
  height: 2px;
  background: var(--border);
  margin: 0 var(--space-sm);
  transition: background-color var(--transition-fast);
}

.model-onboarding-step-connector.done {
  background: var(--done);
}

/* Content area */
.model-onboarding-content {
  padding: var(--space-md) var(--space-xl);
  overflow-y: auto;
  flex: 1;
}

.model-onboarding-description {
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.5;
}

.onboarding-helper-text {
  color: var(--text-muted);
  font-size: 12px;
  margin: 4px 0 0 0;
  line-height: 1.4;
}

.onboarding-helper-text--error {
  color: var(--color-error);
}

/* === Skip-state informational banners === */
.onboarding-skip-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}

.onboarding-skip-banner strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.onboarding-skip-banner p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}


.model-onboarding-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  justify-content: center;
  color: var(--text-muted);
}

.model-onboarding-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.model-onboarding-providers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Provider rows in onboarding */
.onboarding-provider-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  gap: 12px;
  flex-wrap: wrap;
}

/* === Provider Summary (FN-1901) === */
.onboarding-provider-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12px;
  color: var(--text-muted);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}

.onboarding-provider-summary--connected {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success);
}

.onboarding-provider-summary--skipped {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  color: var(--color-warning);
}

.onboarding-provider-summary--none {
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
}

/* === Readiness Summary (FN-1939) === */
.onboarding-readiness-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.onboarding-readiness-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-xs) 0;
}

.onboarding-readiness-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border-left: calc(var(--space-xs) - 1px) solid transparent;
}

.onboarding-readiness-item--connected {
  border-left-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 6%, transparent);
}

.onboarding-readiness-item--missing {
  border-left-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 6%, transparent);
}

.onboarding-readiness-item--skipped {
  border-left-color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 6%, transparent);
}

.onboarding-readiness-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: calc(var(--space-lg) + var(--space-xs));
  text-align: center;
}

.onboarding-readiness-item--connected .onboarding-readiness-icon {
  color: var(--color-success);
}

.onboarding-readiness-item--missing .onboarding-readiness-icon {
  color: var(--color-warning);
}

.onboarding-readiness-item--skipped .onboarding-readiness-icon {
  color: var(--text-muted);
}

.onboarding-readiness-content {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  min-width: 0;
}

.onboarding-readiness-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.onboarding-readiness-detail {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: var(--space-xs);
}

.onboarding-readiness-all-connected {
  font-size: 13px;
  color: var(--color-success);
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-md) 0;
}

/* Provider cards in onboarding - enhanced card layout for AI setup step.
   flex-wrap lets the API-key form drop to a full-width row beneath the
   icon+body header instead of being crammed into a fixed side column,
   which was the root of the squished layout at narrow modal widths. */
.onboarding-provider-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-wrap: wrap;
  min-width: 0;
}

.onboarding-provider-card:hover {
  border-color: var(--todo);
  background: var(--card-hover);
}

.onboarding-provider-card--connected {
  border-left: 3px solid var(--color-success);
}

.onboarding-provider-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.onboarding-provider-card__body {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  overflow-wrap: anywhere;
}

.onboarding-provider-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
}

.onboarding-provider-card__description {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Status badge sits in a flex-column body — keep it sized to its text
   instead of stretching the full row width. */
.onboarding-provider-card__body > .auth-status-badge,
.onboarding-provider-card__body > .auth-key-hint {
  align-self: flex-start;
}

.onboarding-provider-card__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-end;
}

.onboarding-provider-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.onboarding-provider-info strong {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.onboarding-provider-key-icon {
  margin-right: var(--space-xs);
}

.onboarding-provider-card__actions--api-key {
  align-items: stretch;
  /* Force the API-key form onto its own full-width row beneath the
     icon+body header so the input has space to breathe. */
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
}

.auth-provider-card--cli .auth-provider-info {
  gap: 8px;
}

.auth-provider-card--cli .auth-provider-info strong {
  font-size: 13px;
}

.auth-provider-cli-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.auth-provider-cli-details {
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.auth-provider-cli-details > summary {
  cursor: pointer;
  user-select: none;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-muted);
  list-style: revert;
}

.auth-provider-cli-details > summary:hover {
  color: var(--text);
}

.auth-provider-cli-details-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0 16px 12px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .auth-provider-card--cli .auth-provider-info {
    flex-wrap: wrap;
  }

  .auth-provider-cli-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .auth-provider-cli-actions .btn {
    flex: 1;
    min-width: 0;
  }

  .auth-provider-cli-details > summary {
    padding: 8px 14px;
  }

  .auth-provider-cli-details-body {
    padding: 0 14px 12px;
  }
}

/* === Onboarding API Key Form === */
.onboarding-apikey-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.onboarding-apikey-connected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.onboarding-apikey-field-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.onboarding-apikey-input-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
}

.onboarding-apikey-input-row .btn {
  align-self: flex-end;
}

.onboarding-apikey-input {
  width: 100%;
  min-height: 36px;
  font-family: var(--font-mono);
}

.onboarding-apikey-input:focus {
  box-shadow: var(--focus-ring);
}

/* API key input validation states */
.onboarding-apikey-input--error {
  border-color: var(--color-error);
  box-shadow: var(--glow-danger);
}

.onboarding-apikey-input--success {
  border-color: var(--color-success);
  box-shadow: var(--glow-success);
}

/* Inline validation feedback for API key entry */
.onboarding-apikey-success {
  font-size: var(--space-md);
  color: var(--color-success);
  margin-top: var(--space-xs);
}

.onboarding-apikey-hint {
  font-size: var(--space-md);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.onboarding-apikey-instructions {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.onboarding-apikey-dashboard-link {
  color: var(--color-info);
  font-size: 12px;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.onboarding-apikey-dashboard-link:hover {
  text-decoration: underline;
}

.onboarding-apikey-dashboard-link:focus-visible {
  outline: var(--focus-ring-strong);
  border-radius: var(--radius-sm);
}

.onboarding-apikey-usage {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
}

/* Model selector in onboarding */
.onboarding-model-selector {
  margin-bottom: 12px;
}

.onboarding-model-preview {
  padding: 8px 0;
}

/* AI Setup section */
.model-onboarding-ai-setup {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.onboarding-model-section {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.onboarding-section-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text);
}

/* GitHub optional step */
.model-onboarding-github {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/*
FNXC:Onboarding 2026-07-10-10:45:
First-run review: the GitHub step mixed tiny bold micro-headers with helper-text bullets in one flat
list. The with/without comparison now renders as two labeled groups on a single consistent type scale
(font-size-sm headings + font-size-sm items), side by side on desktop and stacked on mobile.
*/
.onboarding-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  line-height: 1.5;
}

.onboarding-feature-list__group h4 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text);
}

.onboarding-feature-list__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.onboarding-feature-list__group li {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  padding-left: var(--space-md);
  position: relative;
}

.onboarding-feature-list__group li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* === Onboarding GitHub Step === */
.onboarding-github-git-prerequisite {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-muted);
  line-height: 1.5;
}

.onboarding-github-git-prerequisite--ready {
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--border));
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
}

.onboarding-github-git-prerequisite--missing {
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--border));
  border-left: var(--space-xs) solid var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

.onboarding-github-git-prerequisite__heading {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text);
}

.onboarding-github-git-prerequisite__heading svg {
  flex: 0 0 auto;
  color: var(--color-info);
}

.onboarding-github-git-prerequisite--missing .onboarding-github-git-prerequisite__heading svg {
  color: var(--color-warning);
}

.onboarding-github-git-prerequisite p,
.onboarding-github-git-prerequisite ul {
  margin: 0;
}

/*
FNXC:Onboarding 2026-07-18-02:30:
Anchors in the GitHub setup step had layout-only rules, so they rendered the
user-agent default blue, which ignores the dashboard theme (unreadable link on
the dark theme's install card). Links must use the themed info token; .btn
anchors keep their button styling untouched.
*/
.onboarding-github-git-prerequisite a,
.onboarding-github-setup-card a:not(.btn) {
  color: var(--color-info);
}

.onboarding-github-git-prerequisite a:hover,
.onboarding-github-setup-card a:not(.btn):hover {
  text-decoration: underline;
}

.onboarding-github-git-prerequisite a {
  align-self: flex-start;
}

.onboarding-github-git-install-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding-left: var(--space-xl);
}

.onboarding-github-benefits {
  margin: 0;
  padding-left: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--text-muted);
}

.onboarding-github-benefits li {
  line-height: 1.5;
}

.onboarding-github-benefits li strong {
  color: var(--text);
}

.onboarding-github-connect-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid color-mix(in srgb, var(--todo) 35%, var(--border));
  border-left: var(--space-xs) solid var(--todo);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--todo) 10%, transparent);
}

.onboarding-github-connect-cta:focus-within {
  box-shadow: var(--focus-ring);
}

.onboarding-github-connect-cta .btn {
  align-self: flex-start;
}

.onboarding-github-connect-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.onboarding-github-connect-feedback {
  margin: 0;
}

.onboarding-github-setup-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-muted);
  line-height: 1.5;
}

.onboarding-github-setup-card--warning {
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--border));
  border-left: var(--space-xs) solid var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

.onboarding-github-setup-card--info {
  border-color: color-mix(in srgb, var(--color-info) 35%, var(--border));
  background: color-mix(in srgb, var(--color-info) 8%, transparent);
}

.onboarding-github-setup-card__heading {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text);
}

.onboarding-github-setup-card p {
  margin: 0;
}

.onboarding-github-setup-card a {
  align-self: flex-start;
}

.onboarding-github-setup-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
  padding-left: var(--space-xl);
}

.onboarding-github-command {
  align-self: flex-start;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-mono);
}

/*
FNXC:Onboarding 2026-07-10-10:50:
Inline command fragments (`gh`, `brew install gh`, `sudo apt install git`) in git/gh install guidance
render as real <code> elements (see renderWithInlineCode) instead of raw backtick literals.
*/
.onboarding-github-setup-card p code,
.onboarding-github-setup-card li code,
.onboarding-github-git-prerequisite p code,
.onboarding-github-git-prerequisite li code {
  padding: 1px var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* === GitHub Connection Status Feedback (FN-1934) === */
.onboarding-github-feedback {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
}

.onboarding-github-feedback p {
  margin: 0;
}

.onboarding-github-feedback--success {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success);
}

.onboarding-github-feedback--error {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  color: var(--color-error);
}

.onboarding-github-feedback--info {
  background: color-mix(in srgb, var(--color-info) 8%, transparent);
  color: var(--text-muted);
}

.onboarding-github-feedback-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.model-onboarding-github-optional {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
}

.model-onboarding-github-optional .optional-icon {
  color: var(--text-muted);
  opacity: 0.5;
}

.model-onboarding-github-optional .optional-icon--github {
  color: var(--text);
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ProviderIcon caps at lg=24px — scale up so the GitHub mark reads as the
   hero of this section. */
.model-onboarding-github-optional .optional-icon--github svg {
  width: 64px;
  height: 64px;
}

.model-onboarding-github-optional__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.model-onboarding-github-optional__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.model-onboarding-github-optional p {
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
}

/* Project Setup step */
.model-onboarding-project-setup {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.onboarding-project-ready {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--color-success) 35%, var(--border));
  border-left: var(--space-xs) solid var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, var(--surface));
}

.onboarding-project-ready p {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
}

/* First Task step */
.model-onboarding-first-task {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xl) - var(--space-xs));
}

.model-onboarding-agent-step .setup-wizard-agent-intro {
  color: var(--text);
}

.model-onboarding-agent-step .setup-wizard-agent-preset-description,
.model-onboarding-agent-step .setup-wizard-agent-preview-title-row p {
  color: var(--text-muted);
}

.model-onboarding-agent-step .setup-wizard-agent-preview-list dd {
  color: var(--text);
}

/* === Onboarding First Task Inline Form === */
.onboarding-first-task-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.onboarding-first-task-form__label {
  font-size: var(--space-md);
  font-weight: 600;
  color: var(--text);
}

.onboarding-first-task-form__input {
  width: 100%;
  min-height: calc(var(--space-xl) * 3);
  resize: vertical;
}

.onboarding-first-task-form__actions {
  display: flex;
  justify-content: flex-end;
}

/* === Onboarding Project Prerequisite === */
.onboarding-project-prerequisite {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--todo) 35%, var(--border));
  background: color-mix(in srgb, var(--todo) 10%, var(--surface));
}

.onboarding-project-prerequisite .onboarding-helper-text {
  margin: 0;
  color: var(--text);
  line-height: calc(var(--space-lg) + (var(--space-xs) / 2));
}

.onboarding-project-prerequisite .btn {
  align-self: flex-start;
}

/* === Onboarding Task Error === */
.onboarding-task-error {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
}

.onboarding-task-error .field-error {
  margin: 0;
}

.onboarding-task-error .onboarding-helper-text {
  margin: var(--space-xs) 0 0;
}

.onboarding-cta-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.onboarding-cta-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  width: 100%;
}

.onboarding-cta-card:hover {
  border-color: var(--accent);
  background: var(--card-hover);
}

.onboarding-cta-card:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.onboarding-cta-card.primary {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.onboarding-cta-card.primary:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

.onboarding-cta-card .cta-icon {
  width: calc(var(--space-xl) * 2);
  height: calc(var(--space-xl) * 2);
  border-radius: var(--radius-lg);
  background: var(--surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.onboarding-cta-card.primary .cta-icon {
  background: var(--accent);
  color: var(--cta-text);
}

.onboarding-cta-card .cta-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.onboarding-cta-card .cta-content strong {
  font-size: 15px;
  color: var(--text);
}

.onboarding-cta-card .cta-content span {
  font-size: 13px;
  color: var(--text-muted);
}

.onboarding-cta-card--disabled {
  opacity: 0.6;
}

.onboarding-cta-card--disabled,
.onboarding-cta-card:disabled {
  cursor: not-allowed;
}

.onboarding-cta-card:disabled:hover {
  border-color: var(--border);
  background: var(--surface);
  transform: none;
}

.onboarding-cta-card:disabled:focus,
.onboarding-cta-card:disabled:focus-visible {
  outline: none;
  box-shadow: none;
}

.onboarding-cta-note {
  display: block;
  font-size: calc(var(--space-md) - (var(--space-xs) / 4));
  color: var(--text-dim);
  margin-top: calc(var(--space-xs) / 2);
}

.onboarding-skip-note {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}

.onboarding-skip-note code {
  background: var(--surface-hover);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* === Onboarding Task Created Success === */
.onboarding-task-created {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  padding: var(--space-xl) 0;
}

.onboarding-task-created .success-icon {
  color: var(--color-success);
  filter: drop-shadow(var(--glow-success));
  width: calc(var(--space-xl) + var(--space-2xl));
  height: calc(var(--space-xl) + var(--space-2xl));
}

.onboarding-task-created__title {
  margin: 0;
  font-size: calc(var(--space-lg) + (var(--space-xs) / 2));
  font-weight: 600;
  color: var(--text);
}

.onboarding-task-created__task-id {
  font-family: var(--font-mono);
  font-size: calc(var(--space-md) + (var(--space-xs) / 2));
  color: var(--text-muted);
  background: var(--surface);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.onboarding-task-created__description {
  margin: 0;
  font-size: calc(var(--space-md) + (var(--space-xs) / 4));
  color: var(--text-muted);
  max-width: calc(var(--space-xl) * 15);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-task-created__hint {
  margin: 0;
  font-size: calc(var(--space-md) + (var(--space-xs) / 4));
  color: var(--text-dim);
  line-height: 1.5;
}

.onboarding-task-created__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  width: 100%;
}



/* Complete step */
.model-onboarding-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 24px 0;
}

.model-onboarding-complete .success-icon {
  color: var(--color-success);
}

.model-onboarding-complete p {
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 380px;
}

/* Footer */
.model-onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/*
FNXC:Onboarding 2026-07-10-10:55:
First-run review: footer buttons had wildly different sizes ("Next →" much larger than the skip
buttons). Every footer control shares the same 38px height and 14px type; the primary action keeps
its filled emphasis and wider padding only.
*/
.model-onboarding-footer .btn,
.model-onboarding-footer .onboarding-skip-step-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 38px;
  padding: 8px 16px;
  font-size: 14px;
}

.model-onboarding-footer .btn-primary {
  padding: 8px 24px;
  font-weight: 600;
}

.model-onboarding-help-link {
  margin-right: auto;
  text-decoration: none;
}

.onboarding-skip-step-link {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.onboarding-skip-step-link:hover {
  color: var(--text);
  background: var(--surface-hover);
}

@media (max-width: 768px) {
  .model-onboarding-modal {
    /* Reset the desktop min-width/min-height — they pin the modal at 640×480
       and force horizontal overflow on phones (≤414px). The fullscreen
       width/height below then take effect normally.
       !important is required because useModalResizePersist writes inline
       width/height from previously-saved desktop sessions, and inline styles
       would otherwise win over the media query and re-pin the modal at e.g.
       1100px on a 375px phone. */
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    border-radius: 0;
    /* Disable the desktop resize grip on mobile — it's useless at fullscreen
       and the resize handle bleeds outside the safe area. */
    resize: none;
  }

  .model-onboarding-header {
    padding: var(--space-md) var(--space-md) calc(var(--space-sm) + var(--space-xs) / 2);
  }

  .model-onboarding-steps {
    padding: var(--space-md);
  }

  .model-onboarding-step-connector {
    width: 20px;
    margin: 0 6px;
  }

  .model-onboarding-content {
    padding: var(--space-md);
  }

  .onboarding-provider-row {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .onboarding-readiness-item {
    align-items: flex-start;
    min-height: calc(var(--space-md) * 3);
  }

  .onboarding-readiness-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .onboarding-readiness-detail {
    margin-left: 0;
  }

  .onboarding-readiness-all-connected {
    min-height: calc(var(--space-md) * 3);
    display: flex;
    align-items: center;
  }

  .onboarding-github-feedback-actions .btn,
  .onboarding-github-feedback-actions .onboarding-skip-step-link {
    min-height: 36px;
  }

  .onboarding-github-git-prerequisite a,
  .onboarding-github-setup-card a,
  .onboarding-github-command {
    align-self: stretch;
  }

  .onboarding-github-setup-card {
    padding: var(--space-sm);
  }

  .onboarding-github-setup-card__heading {
    align-items: flex-start;
  }

  /* Compact provider card on mobile.
     Earlier rule forced flex-direction: column so the icon, body, and
     actions each took their own full-width row — combined with --space-lg
     padding that made every card ~140px tall on a phone. Keep the icon
     inline beside the name + description (the row layout the desktop
     already uses, just tighter), and rely on flex-wrap so the
     API-key/actions block still drops to its own row underneath. */
  .onboarding-provider-card {
    /* Inherits flex-direction: row from the base rule. */
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    align-items: center;
    row-gap: var(--space-xs);
  }

  /* Shrink the leading icon container so it reads as a list-item bullet
     rather than a hero image. */
  .onboarding-provider-card__icon {
    width: calc(var(--space-lg) + var(--space-xs));
    height: calc(var(--space-lg) + var(--space-xs));
    align-self: center;
  }

  .onboarding-provider-card__icon svg {
    width: var(--space-lg);
    height: var(--space-lg);
  }

  /* Drop the name's bottom margin and tighten line-heights so
     name + description + status fit in ~3 short lines. */
  .onboarding-provider-card__body {
    flex: 1 1 0;
    gap: calc(var(--space-xs) / 2);
  }

  .onboarding-provider-card__name {
    font-size: 13px;
  }

  .onboarding-provider-card__description {
    font-size: 11px;
    line-height: 1.35;
  }

  /* Actions row collapses below the icon+body header on its own line and
     stretches its buttons full-width — easier to tap on a phone. */
  .onboarding-provider-card__actions {
    align-items: stretch;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    flex: 1 0 100%;
    min-width: 0;
  }

  /* Bleed the API-key form past the card's horizontal padding so the input
     and the Save button span the full width of the card on mobile. Without
     this the form sat inside the 12px card padding (and on Safari sometimes
     inherited the icon-row's start indent), which read as a chunky left
     margin on phones. Width = 100% + 2*card-padding cancels the padding
     out; matching negative inline margins re-anchor it to the card edges.
     A tiny --space-xs inline padding keeps the input from kissing the
     border. */
  .onboarding-provider-card__actions--api-key {
    width: calc(100% + 2 * var(--space-md));
    margin-inline: calc(-1 * var(--space-md));
    padding-inline: var(--space-xs);
    box-sizing: border-box;
    /* Override the parent rule's justify-content: flex-end. The api-key form
       is a single child without flex-grow, so right-justification pushes it
       against the right edge and leaves a huge left gap. */
    justify-content: stretch;
  }

  .onboarding-provider-card__actions--api-key > .onboarding-apikey-form {
    width: 100%;
    min-width: 0;
  }

  /* When actions are simple buttons (Connect / Skip), make them split the
     row evenly — looks tidier than right-aligned with awkward gaps. */
  .onboarding-provider-card__actions:not(.onboarding-provider-card__actions--api-key) > .btn {
    flex: 1;
    min-width: 0;
  }

  /* Keep the API-key input and the Save button on a single row on mobile.
     Earlier rule stacked them (input above, button below), which doubled
     the vertical space inside an already-cramped provider card. The input
     stays left-aligned and grows to fill the row, the Save button shrinks
     to its label and pins to the right. */
  .onboarding-apikey-input-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
  }

  .onboarding-apikey-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: calc(var(--space-md) * 3);
  }

  .onboarding-apikey-input-row .btn {
    flex: 0 0 auto;
    min-height: calc(var(--space-md) * 3);
    /* Compact label so "Save" doesn't bloat the row. */
    padding-inline: var(--space-md);
  }

  /* Tighten the surrounding form so the row doesn't sit inside a tall
     wrapper of label + input + footnote. */
  .onboarding-apikey-form {
    gap: var(--space-xs);
  }

  .onboarding-apikey-field-label {
    font-size: 11px;
    margin-bottom: 0;
  }

  .onboarding-apikey-instructions,
  .onboarding-apikey-usage {
    font-size: 11px;
    line-height: 1.35;
    margin: 0;
  }

  .onboarding-apikey-dashboard-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  .model-onboarding-footer {
    padding: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  /* FNXC:Onboarding 2026-07-10-10:45: stack the with/without GitHub comparison on phones. */
  .onboarding-feature-list {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .model-onboarding-footer .btn-primary {
    flex: 1;
    min-width: 0;
  }

  .model-onboarding-help-link {
    margin-right: 0;
    width: 100%;
    justify-content: center;
  }

  .model-onboarding-agent-step .setup-wizard-agent-layout {
    grid-template-columns: 1fr;
  }

  .model-onboarding-agent-step .setup-wizard-agent-preset-list {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .onboarding-step-wrapper {
    flex-direction: row;
  }

  .model-onboarding-step-indicator .step-label {
    display: none;
  }

  .model-onboarding-project-setup {
    gap: var(--space-sm);
  }

  .onboarding-project-prerequisite {
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .onboarding-project-prerequisite .btn {
    width: 100%;
  }

  .onboarding-project-ready {
    padding: var(--space-sm) var(--space-md);
  }

  .onboarding-cta-card {
    padding: var(--space-md);
  }

  .onboarding-cta-card .cta-icon {
    width: calc(var(--space-lg) * 2 + var(--space-sm));
    height: calc(var(--space-lg) * 2 + var(--space-sm));
  }

  .onboarding-cta-card .cta-content strong {
    font-size: calc(var(--space-sm) + var(--space-xs) + var(--space-xs) / 2);
  }

  .onboarding-cta-card .cta-content span {
    font-size: 12px;
  }

  .onboarding-task-created__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .onboarding-task-created__actions .btn {
    width: 100%;
  }
}

.onboarding-custom-provider-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-sm) 0;
}

.onboarding-custom-provider-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-muted);
}

.auth-provider-actions-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-sm);
}

.auth-device-code-panel {
  width: 100%;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.auth-device-code-pill {
  font-family: var(--font-mono);
  font-size: calc(var(--space-md) + var(--space-xs) * 0.5);
  letter-spacing: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  border: var(--btn-border-width) solid var(--border);
  background: var(--card);
  color: var(--text);
  display: flex;
  align-self: stretch;
}

@media (max-width: 768px) {
  .auth-device-code-panel {
    width: 100%;
  }

  .auth-device-code-pill {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}