/* The guided setup (#start) and the access steps (#welcome/access). Built on the onboarding shell (onboarding.css) and the
   kit's tokens; nothing here introduces a colour, font or radius the rest of the Program does not already use. */

/* Eleven short chapter labels fit the top bar on a laptop; the phone keeps the kit's compact bars. */
.onb--setup .onb-top .uk-steps ol{grid-auto-columns:minmax(48px,1fr);gap:4px}
.onb--setup .onb-top .uk-steps__label{font-size:11px;padding-right:4px}
@media (max-width:1199px) and (min-width:768px){.onb--setup .onb-top .uk-steps__label span{display:none}}

.setup-card{padding:24px 28px 28px}
@media (max-width:767px){.setup-card{padding:20px 18px 24px}}
.setup-card .question__controls[hidden]{display:none}
.setup-card .question__title{text-wrap:pretty}
.setup-field--titled .uk-field__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Where a prefilled answer came from: one quiet line above the control. */
.setup-source{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}
.setup-source__hint{font:400 13px/18px var(--font-sans);color:var(--text-3)}

/* "I don't know" sits under every question; once chosen it reads as a plain note with a way back. */
.setup-unknown{display:flex;align-items:center;gap:8px;margin-top:16px}
.setup-unknown.is-on{padding:12px 14px;border-radius:var(--r-md);background:var(--surface-sunken);color:var(--text-2);font:400 14px/20px var(--font-sans)}
.setup-unknown.is-on .uk-btn{margin-left:auto}
.setup-unknown.is-on>.uk-icon{flex:none;color:var(--text-3)}
.setup-other[hidden]{display:none}
.setup-other{margin-top:4px}
.setup-public{margin-top:4px}

/* The website read */
.setup-reading{display:flex;align-items:center;gap:8px;margin:16px 0 0;font:500 14px/20px var(--font-sans);color:var(--text-2)}
.setup-reading[hidden]{display:none}
@keyframes setup-spin{to{transform:rotate(360deg)}}
.setup-spin{animation:setup-spin 900ms linear infinite}
@media (prefers-reduced-motion:reduce){.setup-spin{animation:none}}
.setup-checks,.setup-access,.setup-review,.setup-path,.setup-photos{list-style:none;margin:16px 0 0;padding:0}
.setup-check,.setup-access__row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;padding:8px 0;border-bottom:1px solid var(--border);font:500 15px/20px var(--font-sans);color:var(--text-1)}
.setup-check:last-child,.setup-access__row:last-child{border-bottom:0}
.setup-check__icon{display:inline-flex;color:var(--text-3)}
.setup-check.is-found .setup-check__icon{color:var(--success-text)}
.setup-check__state{font:500 13px/18px var(--font-sans);color:var(--text-3)}
.setup-check.is-found .setup-check__state{color:var(--success-text)}
.setup-practice{margin:12px 0 0}
.setup-site-url{margin:12px 0 0;font-size:13px;overflow-wrap:anywhere}

/* Welcome */
.setup-welcome__note{margin:0;padding:0 0 0 16px;border-left:3px solid var(--border-strong)}
.setup-welcome__note p{margin:0;font:600 20px/28px var(--font-sans);letter-spacing:-.01em;color:var(--text-1)}
.setup-welcome__note footer{margin-top:6px;font:500 14px/20px var(--font-sans);color:var(--text-3)}
.setup-welcome__title{margin-top:24px}
.setup-welcome__line{margin:16px 0 0;font:400 15px/22px var(--font-sans);color:var(--text-2)}
.setup-welcome__kickoff{margin-top:20px}
.setup-video[hidden]{display:none}
.setup-path li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border)}
.setup-path li:last-child{border-bottom:0}
.setup-path__day{font:600 13px/18px var(--font-sans);color:var(--text-1)}
.setup-path__text{font:400 15px/22px var(--font-sans);color:var(--text-2)}
.setup-path__date{font:500 13px/18px var(--font-sans);color:var(--text-3);white-space:nowrap}
@media (max-width:420px){.setup-path li{grid-template-columns:52px minmax(0,1fr)}.setup-path__date{grid-column:2}}

/* Photos and brand */
.setup-photos{display:flex;flex-wrap:wrap;gap:8px}
.setup-photos:empty{display:none}
.setup-photos img{display:block;width:72px;height:72px;object-fit:cover;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--border)}
.setup-brand{display:flex;align-items:center;gap:12px}
.setup-brand__logo{width:64px;height:64px;border-radius:var(--r-md);object-fit:contain;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.setup-brand__logo--empty{display:inline-flex;align-items:center;justify-content:center;color:var(--text-3)}
.setup-brand__swatch{width:32px;height:32px;border-radius:var(--r-full);background:var(--swatch);box-shadow:inset 0 0 0 1px var(--border)}

/* Access summary inside the setup */
.setup-access__label{min-width:0}
.setup-access__open{margin-top:16px}

/* Review */
.setup-review__row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;min-height:44px;border-bottom:1px solid var(--border);font:500 15px/20px var(--font-sans)}
.setup-review__row:last-child{border-bottom:0}
.setup-review__count{font:400 13px/18px var(--font-sans);color:var(--text-3)}
.setup-review__answers{grid-column:1/-1;display:grid;gap:6px;margin:0 0 14px;font:400 14px/20px var(--font-sans)}
.setup-review__answers div{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);gap:10px}
.setup-review__answers dt{color:var(--text-3)}
.setup-review__answers dd{margin:0;color:var(--text-1);overflow-wrap:anywhere}
/* Each answer opens its own question: the whole row is the tap target (44 px tall at least), with a pencil at its end. */
.setup-review__answers div{position:relative;min-height:28px;align-items:start}
.setup-review__answer{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;color:inherit;text-decoration:none}
.setup-review__answer::after{content:"";position:absolute;inset:-8px -6px;border-radius:8px}
.setup-review__answer:hover::after,.setup-review__answer:focus-visible::after{background:var(--surface-hover,rgba(24,24,27,.04))}
.setup-review__answer:focus-visible{outline:none}.setup-review__answer:focus-visible::after{box-shadow:0 0 0 3px var(--focus-ring)}
.setup-review__answer-icon{flex:none;margin-top:3px;color:var(--text-3)}
.setup-review__edit{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font:500 14px/20px var(--font-sans)}
.setup-review__unknown{margin:8px 0 0;padding-left:18px;font:400 14px/20px var(--font-sans);color:var(--text-2)}
.setup-review__unknown li+li{margin-top:6px}

/* The access steps page and its sheet */
.setup-access-page .wa-list{display:flex;flex-direction:column}
.setup-access-list{margin-top:16px}
.wa .wa-list .wa-row.setup-access-row{width:100%;text-align:left;cursor:pointer;font:inherit;grid-template-columns:20px minmax(0,1fr) auto 16px}
.wa .wa-list .wa-row.setup-access-row:hover{background:var(--gray-25)}
.wa .wa-list .wa-row.setup-access-row:focus-visible{outline:2px solid var(--green-600);outline-offset:-2px}
@media (max-width:767px){
 .wa .wa-list .wa-row.setup-access-row{grid-template-columns:20px minmax(0,1fr);row-gap:6px}
 .setup-access-row .fw-row__pills{grid-column:2;grid-row:2;justify-content:flex-start}
 .setup-access-row .wa-row__chev{display:none}
}
.setup-steps{margin:12px 0 0;padding-left:20px;font:400 15px/22px var(--font-sans);color:var(--text-1)}
.setup-steps li+li{margin-top:8px}
.setup-send{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;font:500 14px/20px var(--font-sans);color:var(--text-2)}
.setup-send .uk-icon{flex:none;margin-top:3px}
.setup-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.setup-note{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-sunken);font:400 14px/20px var(--font-sans);color:var(--text-2)}
.setup-send-form{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.setup-scope{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.fw-tier__plan{margin:8px 0 0}
/* Save & exit and Sign out, side by side in the setup's top bar. */
.setup-top-actions{display:inline-flex;gap:4px;align-items:center}
@media (max-width:560px){.setup-top-actions [data-sign-out] .uk-btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* "Before you start" on the setup's welcome. */
.setup-ready{list-style:none;margin:8px 0 16px;padding:0;display:grid;gap:8px}
.setup-ready li{display:flex;gap:8px;align-items:flex-start;color:var(--text-2)}
.setup-ready li svg{flex:none;margin-top:3px;color:var(--success-text)}
/* Brand colours read from the logo: one tap sets the colour. */
.setup-swatches{border:0;margin:12px 0 4px;padding:0}
.setup-swatches__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.setup-swatch{width:44px;height:44px;border-radius:var(--r-full);background:var(--swatch);border:0;box-shadow:inset 0 0 0 1px var(--border);cursor:pointer}
.setup-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text-1)}
.setup-swatch:focus-visible{outline:2px solid var(--text-1);outline-offset:3px}
.setup-accent-other{margin:8px 0 12px}
.setup-accent-other summary{cursor:pointer;color:var(--text-2);font-size:14px;margin-bottom:8px}

/* The brand color: the device's own color picker, labelled, no code to type (fix round 4). */
.setup-color{display:flex;align-items:center;gap:12px;margin:12px 0}.setup-color__label{font-size:var(--fs-sm,15px);color:var(--text-2)}.setup-color input[type=color]{width:56px;height:44px;padding:0;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.setup-later{display:flex;justify-content:center;margin-top:8px}

/* Connect your AI: the last setup step (28 Oct) */
.setup-connect__made{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.setup-connect__url{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:13px;overflow-wrap:anywhere}
.setup-connect__steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font:var(--t-body);color:var(--text-1)}
.setup-connect .fd-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.setup-connect .fd-making{display:flex;align-items:center;gap:8px;font:var(--t-small);color:var(--text-2)}