/* Page composition for create-fc. Components come from Tangerine; this adds
   the two things a tutorial needs that a product page doesn't: terminal
   blocks and long-form prose (tables, lists, inline code). Tokens only. */

html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Tangerine's header background spans 100vw, which includes the scrollbar
   where one is visible and pushes the page 8px wide. Clip sideways overflow
   (clip, not hidden, keeps the sticky header working). */
html, body { overflow-x: clip; }

/* ---------- nav: Tutorial dropdown ---------- */
.nav-dd { position: relative; }
.nav-dd__btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--tg-text-quiet); font: inherit; cursor: pointer; }
.nav-dd__btn:hover, .nav-dd.open .nav-dd__btn { color: var(--tg-ink); }
.nav-dd__btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--tg-dur-fast); }
.nav-dd.open .nav-dd__btn svg { transform: rotate(180deg); }
.dd-panel { position: absolute; top: calc(100% + 16px); left: 50%; z-index: 30; width: 340px; padding: 8px; transform: translateX(-50%); border: 1px solid var(--tg-border); border-radius: var(--tg-radius-panel); background: var(--tg-surface); box-shadow: var(--tg-shadow-popover); text-align: left; }
.dd-item { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 10px; border-radius: var(--tg-radius-md); }
.dd-item:hover, .dd-item:focus-within { background: var(--tg-orange-wash); }
.dd-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--tg-radius-key); background: var(--tg-orange-wash); color: var(--tg-orange-deep); font-size: 14px; font-weight: var(--tg-weight-brand); }
.dd-item:hover .dd-num { background: var(--tg-surface); }
.dd-main { display: block; color: var(--tg-ink); font-size: 14px; font-weight: var(--tg-weight-title); }
.dd-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dd-desc { display: block; margin-top: 2px; color: var(--tg-text-2); font-size: 12px; line-height: 1.5; }
.dd-sub { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.dd-sub a { color: var(--tg-orange-link); font-size: 12px; }
.dd-sub a:hover { text-decoration: underline; }
.nav-help { color: var(--tg-orange-deep) !important; }

/* ---------- nav: phone menu ---------- */
.menu-btn { display: none; padding: 7px 14px; border: 1px solid var(--tg-border-strong); border-radius: var(--tg-radius-pill); background: var(--tg-surface); color: var(--tg-ink); font: inherit; font-size: 13px; cursor: pointer; }
.menu-sheet { position: absolute; left: calc(-1 * var(--tg-gutter-mobile)); right: calc(-1 * var(--tg-gutter-mobile)); top: 100%; z-index: 30; padding: 6px var(--tg-gutter-mobile) 18px; border-bottom: 1px solid var(--tg-border); background: var(--tg-page); box-shadow: var(--tg-shadow-popover); }
.menu-sheet a { display: block; padding: 11px 0; border-bottom: 1px solid var(--tg-border); color: var(--tg-ink); font-size: 16px; }
.menu-kids a { padding: 8px 0 8px 16px; border-bottom: 0; color: var(--tg-text-2); font-size: 14px; }
.menu-kids { padding: 4px 0; border-bottom: 1px solid var(--tg-border); }

/* ---------- inline code ---------- */
code {
  font-family: var(--tg-font-mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: var(--tg-radius-xs);
  background: var(--tg-orange-wash);
  color: var(--tg-ink-2);
  overflow-wrap: anywhere;
}

/* ---------- terminal blocks: the one dark surface ---------- */
.fc-term {
  position: relative;
  min-width: 0;
  border-radius: var(--tg-radius-lg);
  background: var(--fc-term-bg);
  color: var(--fc-term-text);
  box-shadow: var(--tg-shadow-float);
  overflow: hidden;
}
.fc-term__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px 0;
}
.fc-term__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fc-term-dim);
  opacity: 0.45;
}
.fc-term__bar span { margin-left: 8px; color: var(--fc-term-dim); font-size: var(--tg-text-2xs); }
.fc-term pre {
  margin: 0;
  padding: 14px 16px 16px;
  overflow-x: auto;
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-xs);
  line-height: 1.65;
  /* long commands wrap instead of scrolling sideways; URLs may break anywhere */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fc-term code { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: anywhere; }
.fc-term .fc-p { color: var(--fc-term-prompt); user-select: none; }
.fc-term .fc-o { color: var(--fc-term-dim); }

/* one-line command with a copy button */
.fc-term--copy { display: flex; align-items: center; }
.fc-term--copy pre { flex: 1; padding: 14px 16px; }
.fc-copy {
  flex-shrink: 0;
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--tg-radius-pill);
  background: transparent;
  color: var(--fc-term-text);
  font: inherit;
  font-size: var(--tg-text-2xs);
  cursor: pointer;
  transition: background var(--tg-dur-base);
}
.fc-copy:hover { background: rgb(255 255 255 / 0.08); }
.fc-copy--bar { margin: 0 0 0 auto; padding: 3px 11px; }

/* ---------- hero terminal ---------- */
.fc-hero-term {
  width: min(760px, 100%);
  min-width: 0;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  justify-items: center;
}
/* long command lines scroll inside the terminal, never the page */
.fc-hero-term [role="tabpanel"] { width: 100%; min-width: 0; }
.fc-hero-term .tg-tabs { max-width: 100%; }
.fc-caption { margin-top: 12px; text-align: center; color: var(--tg-sage); font-size: var(--tg-text-sm); }

/* ---------- hero: explained terms ---------- */
.term { position: relative; border-bottom: 1.5px dotted var(--tg-orange-edge); cursor: help; outline: none; }
.term:hover, .term:focus-visible { color: var(--tg-orange-deep); border-bottom-color: currentColor; }
.tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5;
  width: 260px; padding: 12px 14px;
  border: 1px solid var(--tg-border); border-radius: var(--tg-radius-md);
  background: var(--tg-surface); box-shadow: var(--tg-shadow-popover);
  color: var(--tg-ink-2); font-size: 12.5px; line-height: 1.55; text-align: left;
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(4px);
  transition: opacity var(--tg-dur-fast), transform var(--tg-dur-fast);
}
.tip a { color: var(--tg-orange-link); }
.tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--tg-surface); }
.term:hover .tip, .term:focus-within .tip { opacity: 1; pointer-events: auto; transform: translateX(-50%); }

/* ---------- hero: two paths side by side, bottoms flush ---------- */
/* Both columns stretch to the row's height, and inside the left one the
   visible tab's terminal grows to fill it, so the terminal and the agent
   card always end on the same line, whichever tab is open. */
.hero-paths { width: min(1180px, calc(100% - 2 * var(--tg-gutter))); margin: 44px auto 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: stretch; text-align: left; }
.hero-path { display: flex; flex-direction: column; min-width: 0; }
.path-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 14px; }
.path-head h2 { font-size: 22px; }
.path-head span { color: var(--tg-text-3); font-size: var(--tg-text-sm); }
.path-jump { flex-shrink: 0; }
.hero-path .fc-hero-term { flex: 1; display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0; }
.hero-path .fc-hero-term .tg-tabs { align-self: center; }
.hero-path [role="tabpanel"]:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
.hero-path [role="tabpanel"] .fc-term { flex: 1; }
.hero-path .qs-card { flex: 1; display: flex; flex-direction: column; box-shadow: none; }
.hero-path .qs-card__body { flex: 1; margin-top: 20px; }

.qs-card { border: 1px solid var(--tg-border); border-radius: var(--tg-radius-card); background: var(--tg-surface); box-shadow: var(--tg-shadow-float); overflow: hidden; }
.qs-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 20px 12px; }
.qs-card__head h2 { font-size: 22px; }
.qs-card__head a { color: var(--tg-orange-link); font-size: var(--tg-text-sm); }
.qs-card__body { position: relative; margin: 0 20px; padding: 14px 16px 54px; border: 1px solid var(--tg-border); border-radius: var(--tg-radius-md); }
.qs-card__prompt { font-family: var(--tg-font-mono); font-size: var(--tg-text-xs); line-height: 1.7; color: var(--tg-ink-2); overflow-wrap: anywhere; }
.qs-card__copy { position: absolute; right: -1px; bottom: -1px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--tg-radius-md) 0 var(--tg-radius-md) 0; }
.qs-card__copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.qs-card__note { margin: 12px 20px 0; color: var(--tg-text-2); font-size: var(--tg-text-xs); line-height: 1.6; }
.qs-card__foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px 16px; font-size: var(--tg-text-xs); color: var(--tg-text-3); }
.qs-card__foot a { color: var(--tg-orange-link); }

/* ---------- hero: what each command does, and how long ---------- */
.lead-in { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 2px 12px; text-align: left; }
.lead-in__what { color: var(--tg-ink); font-size: 18px; font-weight: 550; letter-spacing: -0.01em; }
.lead-in__what .aside { color: var(--tg-text-2); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.lead-in__what a { color: var(--tg-orange-link); }
.lead-in__time { color: var(--tg-text-2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- quickstart ---------- */
.fc-prereq {
  padding: 26px 28px;
  margin-bottom: 26px;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-card);
  background: var(--tg-surface);
}
.fc-prereq .tg-title { margin-bottom: 16px; }
.fc-steps { list-style: none; counter-reset: step -1; display: grid; gap: 14px; padding: 0; }
.fc-steps > li {
  counter-increment: step;
  display: grid;
  gap: 10px;
  padding: 26px 28px;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-card);
  background: var(--tg-surface);
}
.fc-steps > li .tg-title::before {
  content: counter(step);
  margin-right: 12px;
  color: var(--tg-orange);
  font-variant-numeric: tabular-nums;
}
.fc-steps .tg-body { color: var(--tg-text-2); }
  counter-increment: step;
  display: grid;
  gap: 10px;
  padding: 26px 28px;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-card);
  background: var(--tg-surface);
}
  content: counter(step);
  margin-right: 12px;
  color: var(--tg-orange);
  font-variant-numeric: tabular-nums;
}
.fc-done {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 22px 28px;
  border: 1px dashed var(--tg-border-hover);
  border-radius: var(--tg-radius-card);
}
.fc-done .tg-body { color: var(--tg-text-2); }
.fc-note { margin-top: 18px; }
.fc-term--prompt pre, .fc-term--prompt code { font-family: var(--tg-font-sans); font-size: var(--tg-text-sm); line-height: 1.6; }

/* ---------- tutorial prose ---------- */
.fc-doc {
  width: min(var(--tg-narrow-width), calc(100% - 2 * var(--tg-gutter)));
  margin: 40px auto 0;
  border-top: 1px solid var(--tg-border-editorial);
}
.fc-doc .tg-editorial__intro { padding-top: 64px; }
.fc-doc .tg-editorial__intro h2 { margin-top: 10px; }
.fc-doc .tg-lead { margin-top: 18px; color: var(--tg-text-2); }
.fc-doc section > h3 { margin: 30px 0 10px; font-size: var(--tg-text-title); font-weight: var(--tg-weight-title); }
.fc-doc section > p,
.fc-doc section > ol,
.fc-doc section > ul { color: var(--tg-ink-3); font-size: 15px; line-height: 1.75; }
.fc-doc section > p + p { margin-top: 14px; }
.fc-doc section > ol { padding-left: 20px; margin: 12px 0 16px; display: grid; gap: 8px; }
.fc-doc section > .fc-term,
.fc-doc section > .fc-table { margin: 20px 0; }
.fc-doc b { font-weight: var(--tg-weight-title); color: var(--tg-ink); }

.fc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tg-text-sm);
  display: block;
  overflow-x: auto;
}
.fc-table caption { padding-bottom: 10px; text-align: left; color: var(--tg-text-2); font-size: var(--tg-text-xs); }
.fc-table th, .fc-table td { padding: 10px 14px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tg-border-editorial); }
.fc-table th { color: var(--tg-text-2); font-weight: var(--tg-weight-title); }
.fc-table td:not(:first-child) { white-space: nowrap; }

/* ---------- tutorial contents ---------- */
.toc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.toc-card { display: block; padding: 16px 18px; border: 1px solid var(--tg-border); border-radius: var(--tg-radius-card); background: var(--tg-surface); transition: border-color var(--tg-dur-fast); }
.toc-card:hover, .toc-card:focus-visible { border-color: var(--tg-orange-edge); }
.toc-card .k { display: block; color: var(--tg-orange-deep); font-size: var(--tg-text-xs); }
.toc-card b { display: block; margin-top: 4px; color: var(--tg-ink); font-size: 16px; font-weight: var(--tg-weight-title); }
.toc-card > span:last-child { display: block; margin-top: 4px; color: var(--tg-text-2); font-size: var(--tg-text-sm); line-height: 1.55; }
.in-section { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -10px 0 18px; }
.in-section > span { margin-right: 4px; color: var(--tg-text-3); font-size: var(--tg-text-xs); }
.in-section a { padding: 4px 10px; border: 1px solid var(--tg-border-strong); border-radius: var(--tg-radius-pill); background: var(--tg-surface); color: var(--tg-text-2); font-size: 12.5px; }
.in-section a:hover { border-color: var(--tg-orange-edge); color: var(--tg-orange-deep); }

/* ---------- concepts ---------- */
.fc-concepts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fc-concepts > div { padding: 22px 24px; border: 1px solid var(--tg-border); border-radius: var(--tg-radius-card); background: var(--tg-surface); }
.fc-concepts dt { font-size: var(--tg-text-title); font-weight: var(--tg-weight-title); }
.fc-concepts dd { margin: 8px 0 0; color: var(--tg-text-2); font-size: var(--tg-text-body); line-height: 1.7; }

/* ---------- safety ---------- */
.fc-split-text { max-width: 420px; margin-top: 18px; color: var(--tg-text-2); line-height: 1.75; }
.fc-points { display: grid; gap: 26px; }

/* ---------- troubleshooting: question / answer rows ---------- */
.fc-spec .tg-spec__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
.fc-spec h3 { font-size: var(--tg-text-body); font-weight: var(--tg-weight-title); line-height: 1.5; }
.fc-spec p { color: var(--tg-text-2); font-size: var(--tg-text-body); line-height: 1.7; }

.fc-offer { padding-block: 28px 104px; }

/* ---------- the client ---------- */
.fc-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fc-feature { padding: 24px 26px; border: 1px solid var(--tg-border); border-radius: var(--tg-radius-card); background: var(--tg-surface); }
.fc-feature .tg-body { margin-top: 8px; color: var(--tg-text-2); }
.fc-shot { margin: 22px 0 26px; }
.fc-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--tg-border); border-radius: var(--tg-radius-lg); box-shadow: var(--tg-shadow-float); }
.fc-shot figcaption { margin-top: 10px; color: var(--tg-text-2); font-size: var(--tg-text-sm); line-height: 1.6; }
.fc-shot figcaption b { color: var(--tg-ink); }
.fc-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.fc-shots figure { margin: 0; }
.fc-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--tg-border); border-radius: var(--tg-radius-lg); box-shadow: var(--tg-shadow-float); }
.fc-shots figcaption { margin-top: 10px; text-align: center; color: var(--tg-sage); font-size: var(--tg-text-sm); }
.fc-try { display: grid; gap: 12px; margin-top: 14px; padding: 26px 28px; border: 1px solid var(--tg-orange-line); border-radius: var(--tg-radius-card); background: var(--tg-orange-wash); }
.fc-try .tg-body { margin-top: 6px; color: var(--tg-text-2); }
.fc-vouch { margin-top: 22px; }

@media (max-width: 900px) {
  .hero-paths { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .tg-header__nav .tg-quiet-link, .nav-dd { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 700px) {
  .hero-paths { width: calc(100% - 2 * var(--tg-gutter-mobile)); }
  .tip { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; transform: translateY(8px); }
  .term:hover .tip, .term:focus-within .tip { transform: none; }
  .tip::after { display: none; }
  .fc-hero-term { width: calc(100% - 2 * var(--tg-gutter-mobile)); }
  .fc-doc { width: calc(100% - 2 * var(--tg-gutter-mobile)); }
  .fc-concepts, .fc-features, .fc-shots, .toc-grid { grid-template-columns: 1fr; }
  .fc-try { padding: 22px 20px; }
  .fc-steps > li, .fc-prereq, .fc-done { padding: 22px 20px; }
  .fc-spec .tg-spec__row { grid-template-columns: 1fr; }
  .fc-term--copy { flex-direction: column; align-items: stretch; }
  .fc-copy { margin: 0 12px 12px auto; }
  .tg-header__nav .tg-quiet-link { display: none; }
}

/* fameboy's own mark (the clear keycap) beside its name in the client section */
.cc-eyebrow { display: flex; align-items: center; gap: 10px; }
.cc-eyebrow img { flex: none; filter: drop-shadow(0 2px 6px rgb(23 21 31 / 0.12)); }