/* codemany.com home: the onboarding screens inside the demo window, after the app's
 * OnboardingScaffold (top bar: wordmark + step indicator; centered content; footer bar with the
 * primary button), ConnectGitHubStep, ChooseTargetStep + RepoPicker, and DoneStep.
 * demo.js toggles the state classes. Tokens are the app's Theme (demo.css). */
.ob-top { display: flex; justify-content: space-between; align-items: center; padding: 30px 20px 0; flex: none; }
.wm { font: 700 14px/1 var(--font); letter-spacing: -.02em; }
.ind { display: flex; align-items: center; gap: 3px; }
.ind i { width: 10px; height: 4px; border-radius: 2px; background: var(--app-border); }
.ind i.f { background: var(--app-fg); }
.ind i.c { width: 20px; }
.ind b { margin-left: 7px; font: 500 11px/1 var(--font); color: var(--app-muted); }

.ob-mid {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 460px; margin: 0 auto; padding: 8px 24px; text-align: center; font-family: var(--app-sans);
}
.ob-ico { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--app-border); border-radius: 8px; background: #fff; }
.ob-ico svg { width: 16px; height: 16px; fill: none; stroke: var(--app-fg); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ob-h { margin: 2px 0 0; font: 700 21px/1.2 var(--font); letter-spacing: -.03em; }
.ob-sub { margin: -4px 0 0; font-size: 13px; color: var(--app-muted); }
.ob-link { font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.ob-note { margin: 0; font-size: 11px; color: var(--app-muted); }
.ob-foot {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 16px;
  border-top: 1px solid var(--app-border); background: #fffffff0;
}
.hint { font: 11px/1.3 var(--app-sans); color: var(--app-muted); }
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 112px; height: 32px; padding: 0 16px;
  border-radius: 8px; background: var(--app-fg); color: #fff; font: 700 13px/1 var(--font); white-space: nowrap;
  transition: opacity .3s, transform .18s;
}
.pbtn .ghm { width: 15px; height: 15px; }
.pbtn.off { opacity: .3; }
.pbtn.press { transform: scale(.96); }
.spin { display: none; width: 12px; height: 12px; border: 1.6px solid var(--app-muted); border-right-color: transparent; border-radius: 50%; flex: none; }
@media (prefers-reduced-motion: no-preference) { .spin { animation: ob-spin 1.35s linear infinite; } }
@keyframes ob-spin { to { transform: rotate(360deg); } }

/* identity card (GitHubIdentityCard): photo, name, caption, green tick */
.idc {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left;
  border: 1px solid var(--app-border); border-radius: 8px; background: #fff;
}
.av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--app-border); background: var(--app-fill); }
.av svg { width: 60%; height: 60%; color: var(--app-fg); }
.idc-t { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.idc-t b { font-size: 14px; font-weight: 600; }
.idc-t span { font-size: 11px; color: var(--app-muted); }
.tick { width: 16px; height: 16px; border-radius: 50%; background: var(--app-idle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; flex: none; }

/* 1: sign in -> waiting -> connected (.found) */
#s1-card { display: none; }
.found #s1-card { display: flex; animation: scene-in .375s ease-out; }
.found #s1-sub { display: none; }
.waiting #s1-go .ghm { display: none; }
.waiting #s1-go::before { content: ""; width: 11px; height: 11px; border: 1.6px solid #ffffff99; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .waiting #s1-go::before { animation: ob-spin 1.35s linear infinite; } }

/* 2: the repo picker (RepoPicker, SelectedChips) */
.ob-pick { justify-content: flex-start; gap: 7px; padding-top: 12px; text-align: left; align-items: stretch; }
.ob-pick .ob-h { text-align: center; font-size: 18px; margin: 0 0 2px; }
.idc-s { padding: 6px 10px; gap: 9px; }
.idc-s .av { width: 24px; height: 24px; }
.idc-s .idc-t { display: flex; align-items: baseline; gap: 6px; }
.idc-s .idc-t b { font-size: 13px; }
.idc-s .idc-t span { font: 11px var(--font); }
.pk-sum { display: flex; justify-content: space-between; margin: 0; font-size: 12px; color: var(--app-muted); }
.pk-sum .ob-link { color: var(--app-fg); }
.chips { display: flex; gap: 6px; height: 22px; flex: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.chip {
  display: none; align-items: center; gap: 3px; height: 22px; padding: 0 4px 0 8px; flex: none;
  border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-fill); font: 11px/1 var(--font); white-space: nowrap;
}
.chip i { font-style: normal; width: 14px; text-align: center; color: var(--app-muted); }
.chip.on { display: inline-flex; animation: pop .3s ease-out; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.pk { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid var(--app-border); border-radius: 8px; background: #fff; }
.pk-search { display: flex; align-items: center; gap: 8px; padding: 7px 10px; flex: none; border-bottom: 1px solid var(--app-border); font-size: 13px; color: var(--app-faint); }
.pk-search svg { width: 13px; height: 13px; fill: none; stroke: var(--app-muted); stroke-width: 1.5; }
.repos { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; }
.repo {
  display: grid; grid-template-columns: 13px 12px minmax(0, 1fr) auto 6ch; gap: 8px; align-items: center;
  height: 27px; padding: 0 10px; white-space: nowrap; transition: background-color .225s;
}
.repo.hi { background: var(--app-fill); }
.cb { width: 13px; height: 13px; border: 1.2px solid var(--app-muted); border-radius: 3px; display: grid; place-items: center; }
.repo.sel .cb { background: var(--app-fg); border-color: var(--app-fg); }
.repo.sel .cb::after { content: ""; width: 6px; height: 3.5px; border: 1.6px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(.5px, -1px); }
.ri { width: 12px; height: 12px; color: var(--app-muted); }
.rn { font: 12px/1 var(--font); overflow: hidden; text-overflow: ellipsis; }
.ra { font-size: 11px; color: var(--app-muted); }
.rv { font: 10px/1 var(--font); color: var(--app-muted); text-align: right; }

/* 3: done (DoneStep): the one line, typed; Copy; the live status line */
.snip {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px 7px 12px; text-align: left;
  border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-card);
}
.snip code { flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: 600 13px/1.4 var(--font); white-space: nowrap; overflow: hidden; }
.caret { display: none; width: 7px; height: 15px; margin-left: 1px; background: var(--app-fg); vertical-align: -3px; }
.typing .caret { display: inline-block; }
.sbtn { flex: none; padding: 4px 10px; border: 1px solid var(--app-border); border-radius: 6px; background: #fff; font: 500 11px/1.2 var(--font); }
.st { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 13px; }
.st .ok { display: none; }
.st.wait .spin { display: inline-block; }
.st:not(.wait) .ok { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--app-idle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

@media (max-width: 600px) {
  .ob-top { padding: 28px 14px 0; }
  .ob-mid { padding: 6px 14px; gap: 8px; }
  .ob-h { font-size: 17px; }
  .ob-sub { font-size: 12px; }
  .ob-pick { padding-top: 8px; gap: 6px; }
  .ob-pick .ob-h { font-size: 15px; }
  .ob-pick .idc-s { display: none; }
  .ob-foot { padding: 8px 12px; }
  .pbtn { height: 30px; min-width: 96px; font-size: 12px; padding: 0 12px; }
  .snip code { font-size: 11.5px; }
  .repo { gap: 6px; padding: 0 8px; font-size: 11px; grid-template-columns: 13px 12px minmax(0, 1fr) auto 6ch; }
  .rn { font-size: 11px; }
}