/* /setup: connect Claude, Grok Bot and Wispr Flow so prompts reach Tinker.
   Every component here is from the design system (/design-components.css):
   page head, tool list, pill buttons, steps, copy field, fine print, side
   nav and sign-in modal. This file only lays out and places them. Your
   prompts loads it too. */

html,
body.setup-page {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: auto;
  display: block;
  background: var(--color-background, #fffdf7);
  color: var(--color-foreground, #2d2a26);
}

.setup {
  /* Content box, as on the board: a 40rem column inside the gutters. */
  box-sizing: content-box;
  max-width: 40rem;
  margin: 0 auto;
  /* 88px top: clear of the fixed 44px "Show sidebar" button, as on the board. */
  padding: calc(88px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right)) 80px max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-sans, "Instrument Sans", system-ui, sans-serif);
}

.setup [hidden],
.setup-page [hidden],
.prompts-page [hidden] { display: none !important; }

/* ── Side nav: the design-system Sidebar as a drawer ─────────────── */

.page-nav__show {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  z-index: 5;
}
.page-nav__btn,
.page-nav__row { cursor: pointer; }
.page-nav__btn:hover { background: rgba(45, 90, 61, 0.08); }
.page-nav__btn:focus-visible,
.page-nav__row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.page-nav__row { text-decoration: none; }
.page-nav__row:hover:not([aria-current="page"]) { background: rgba(255, 255, 255, 0.55); }

.page-nav {
  position: fixed;
  inset: 0;
  z-index: 30;
  /* The app shell narrows its own sidebar on small screens; the drawer is
     always the design-system 252px. */
  --sidebar-width: 252px;
}
.page-nav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(45, 42, 38, 0.32);
}
.page-nav__side {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  max-width: calc(100vw - 56px);
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(45, 42, 38, 0.18);
}
html.page-nav-open,
html.page-nav-open body { overflow: hidden; }

/* ── Sign in: the design-system modal over the tools page ────────── */

.setup-modal {
  position: fixed;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.setup-modal.tk-modal--sheet .tk-signin {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.setup-modal form { margin: 0; }


.setup-modal .tk-begin,
.setup-modal .tk-alt,
.setup-modal .tk-textlink { cursor: pointer; }
.setup-modal .tk-begin:hover { background: var(--color-accent-press); }
.setup-modal .tk-alt:hover { border-color: var(--color-foreground); }
.setup-modal .tk-alt:disabled { opacity: 0.6; cursor: default; }
.setup-modal .tk-begin:focus-visible,
.setup-modal .tk-alt:focus-visible,
.setup-modal .tk-textlink:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.setup-modal .tk-textlink:hover { color: var(--color-foreground); }

/* Code step: one real one-time-code input laid over the six boxes. */
.setup-code {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.setup-code__field { position: relative; width: 100%; }
.setup-code__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  font-size: 16px;
  letter-spacing: 0.5em;
  cursor: text;
}
.setup-code__input::selection { background: transparent; }

.setup-modal__status {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-muted);
}
.setup-modal__status:empty { display: none; }
.setup-modal__status[data-kind="error"] { color: #b3261e; }
.setup-modal__status[data-kind="ok"] { color: var(--color-forest); }


/* Account line under the tools (design-system fine print). */
.setup__account { margin: 18px 4px 0; }
/* Adding a phone to a signed-in account: no GitHub option in the modal. */
#auth-gate[data-linking] [data-signin-alt] { display: none !important; }

/* Dictation in Tinker: the choice list sits under the row, aligned with the name. */
.setup__dictation { padding: 0 16px 16px; }
.setup__dictation-lede { margin: 0 0 6px 10px; font-size: 14px; line-height: 1.5; color: var(--color-muted, #6f6a65); }

/* Keep the page width fixed (same fix as lessons/lesson.css). styles.css
 * hides scroll bars (0px) until the cursor is over them, then shows a 6px
 * one; on the page scroll bar that narrowed the column every time the
 * cursor entered the window, so the page jittered. Always reserve a 6px
 * track; the thumb still only shows on hover. Chromium styles the page
 * scroll bar from body (checked with scroll bars on: 1274px wide before
 * and after the cursor moves in). */
body.setup-page::-webkit-scrollbar,
body.setup-page:hover::-webkit-scrollbar { width: 6px; }