9db2565e99
Operator report: the first-run "Set Up AI" modal had extra space along its right edge, and it asked a browser visitor to connect a remote server and mentioned a native shell they do not have. Three defects, verified in a real container build at desktop and mobile widths: - FN-8015 reserved `margin-inline-end: var(--space-lg)` on the shared `.floating-window__body` so a hosted scrollbar cleared the east resize hot zones. One shared reservation every caller had to know about produced a recurring class of asymmetric-right-inset bugs instead: it was zeroed piecemeal five times (FN-8766, mobile task detail, FN-8722, FN-8702, every tablet window) while two callers leaned on it for their right inset and had to restore it whenever one of those predicates fired. Delete the gutter, its five overrides, and GitHub Import's borrowed-inset compensation. Where a scrollbar and a resize target actually collide, use FN-8766's outboard east targets. Trade-off accepted by the operator; the ratchet test now forbids the gutter in any stylesheet at any breakpoint. - The hosted Set Up AI modal did not fill its window: its standalone `height: min(85vh, ...)` rule ties on specificity with FloatingWindow's `height: 100%` and won on source order, leaving ~60px of dead window surface under the footer alongside the 16px gutter strip. Right gap 17px -> 1px, bottom gap 62px -> 1px. - The "Connect remote Fusion server" card keyed only on `desktopMode !== "local"`, and `desktopMode` is undefined on web, so every browser first-run led with a native-shell hand-off form. Now also requires `host !== "web"`. Verified: 165 dashboard test files / 5829 tests pass, eslint and `tsc -p tsconfig.app.json` clean, and a container built from this tree shows the panel flush at 1280x800 and as a symmetric full-screen sheet at 390x844 with no remote-server card. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1732 lines
40 KiB
CSS
1732 lines
40 KiB
CSS
/* ===== 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;
|
||
}
|
||
}
|