/* ============================================================================
   Build guide (EPIC-17). Components used only by the /build/ tutorial pages.

   Loaded AFTER /styles.css, which owns the brand tokens, the chrome (header,
   nav, footer) and the shared primitives this file deliberately reuses rather
   than re-invents: .browser-section (panel), .browser-hero, .browser-kicker,
   .platform-card, .btn-primary, .mode-toggle/.mode-tab (tabs),
   .browse-pager/.browse-pager-info (step pager), .browser-entry-tag.

   Everything here is token-driven, so light/dark come for free from the
   :root mappings in styles.css (D-03).
   ============================================================================ */

/* ---------- Hero ---------- */
/* The guide never uses the store's 2-column hero (no stat cards to show). */
.browser-hero.guide-hero { grid-template-columns: 1fr; }

.guide-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.9rem 0 0;
  color: var(--color-ink-2);
  font-size: 0.86rem;
}
.guide-hero-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---------- Step rail: "you are on 3 of 10" ---------- */
.guide-rail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.guide-rail-label {
  flex: 0 0 auto;
  color: var(--color-ink-2);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide-rail-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}

.guide-rail-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink-2);
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.guide-rail-step:hover,
.guide-rail-step:focus-visible { border-color: var(--color-ink); color: var(--color-ink); }
.guide-rail-step[aria-current="step"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-on-ink);
}

/* ---------- Prose inside a .browser-section ---------- */
.guide-prose > *:first-child { margin-top: 0; }
.guide-prose > *:last-child { margin-bottom: 0; }

.guide-prose h2 {
  margin: 0 0 0.9rem;
  color: var(--color-ink);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.guide-prose h3 {
  margin: 1.6rem 0 0.6rem;
  color: var(--color-ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.guide-prose p { margin: 0 0 0.9rem; color: var(--color-ink-2); line-height: 1.65; }
.guide-prose strong { color: var(--color-ink); font-weight: 700; }
.guide-prose a { font-weight: 500; }

.guide-prose ul,
.guide-prose ol { margin: 0 0 0.9rem; padding-left: 1.3rem; color: var(--color-ink-2); line-height: 1.65; }
.guide-prose li { margin-bottom: 0.35rem; }
.guide-prose li > ul,
.guide-prose li > ol { margin: 0.35rem 0 0.15rem; }

/* inline code, distinct from the block form below */
.guide-prose code,
.guide-prose kbd,
.guide-callout code,
.guide-check code {
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  font-size: 0.86em;
  word-break: break-word;
}

.guide-prose table {
  width: 100%;
  margin: 0 0 0.9rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.guide-prose th,
.guide-prose td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  color: var(--color-ink-2);
}
.guide-prose th { color: var(--color-ink); font-weight: 700; }
/* wide tables scroll instead of pushing the page sideways */
.guide-tablewrap { overflow-x: auto; margin: 0 0 0.9rem; }
.guide-tablewrap table { margin: 0; }

/* ---------- Code block ---------- */
.guide-code {
  margin: 0 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-2);
  overflow: hidden;
}

.guide-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.55rem 0.45rem 0.8rem;
  border-bottom: 1px solid var(--color-border);
}

.guide-code-label {
  min-width: 0;
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-code-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.guide-code-copy:hover,
.guide-code-copy:focus-visible { border-color: var(--color-ink); background: var(--color-bg-3); }
.guide-code-copy.is-done { border-color: var(--color-ink); }

.guide-code pre {
  margin: 0;
  padding: 0.85rem 0.9rem;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-ink);
}
.guide-code pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}

/* ---------- Figures and inline SVG diagrams ---------- */
/* Diagrams are inline SVG styled through these classes rather than presentation
   attributes, so they inherit the brand tokens and theme with the page. */
.guide-figure { margin: 0 0 1.1rem; }
.guide-figure svg { display: block; width: 100%; height: auto; }
.guide-figure figcaption {
  margin-top: 0.55rem;
  color: var(--color-ink-2);
  font-size: 0.85rem;
  line-height: 1.5;
}

.guide-diagram .d-box { fill: var(--color-bg-2); stroke: var(--color-border); stroke-width: 1.5; }
.guide-diagram .d-box-accent { fill: var(--color-bg-3); stroke: var(--color-ink); stroke-width: 1.5; }
.guide-diagram .d-box-plain { fill: none; stroke: var(--color-border); stroke-width: 1.5; stroke-dasharray: 4 3; }
.guide-diagram .d-title { fill: var(--color-ink); font-family: var(--font-base); font-weight: 700; font-size: 15px; }
.guide-diagram .d-label { fill: var(--color-ink); font-family: var(--font-base); font-weight: 500; font-size: 13px; }
.guide-diagram .d-sub { fill: var(--color-ink-2); font-family: var(--font-base); font-size: 12px; }
.guide-diagram .d-mono { fill: var(--color-ink-2); font-family: var(--font-mono); font-size: 11.5px; }
.guide-diagram .d-line { stroke: var(--color-ink-2); stroke-width: 1.5; fill: none; }
.guide-diagram .d-fill { fill: var(--color-ink-2); }

/* ---------- Callouts ---------- */
/* Same shape family as .test-banner / .channel-banner in styles.css, but
   block-level with a heading, since guide callouts carry a paragraph. */
.guide-callout {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-bg-2);
  color: var(--color-ink-2);
  font-size: 0.93rem;
  line-height: 1.6;
}
.guide-callout > i { flex: 0 0 auto; margin-top: 0.2rem; color: var(--color-ink); font-size: 1rem; }
.guide-callout-body { min-width: 0; }
/* Only the callout's own heading is a block. A `strong` nested inside a
   paragraph or list item stays inline, or it breaks the sentence around it. */
.guide-callout-body > strong { display: block; margin-bottom: 0.2rem; }
.guide-callout strong { color: var(--color-ink); font-weight: 700; }
.guide-callout p { margin: 0 0 0.5rem; }
.guide-callout > .guide-callout-body > *:last-child { margin-bottom: 0; }
.guide-callout ul { margin: 0.3rem 0 0.5rem; padding-left: 1.2rem; }
.guide-callout li { margin-bottom: 0.25rem; }

.guide-callout-note { background: var(--color-bg-2); }
.guide-callout-tip { background: var(--color-bg-3); }
.guide-callout-warn { background: var(--color-bg-3); border-left-color: #b3261e; }
.guide-callout-warn > i { color: #b3261e; }
.guide-callout-llm { background: var(--color-bg-2); border-left-style: dashed; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide-callout-warn { border-left-color: #f2b8b5; }
  :root:not([data-theme="light"]) .guide-callout-warn > i { color: #f2b8b5; }
}
:root[data-theme="dark"] .guide-callout-warn { border-left-color: #f2b8b5; }
:root[data-theme="dark"] .guide-callout-warn > i { color: #f2b8b5; }

/* ---------- Checklist ---------- */
.guide-checklist { margin: 0 0 1rem; padding: 0; list-style: none; }

.guide-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0.15rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-2);
  line-height: 1.55;
}
.guide-checklist > .guide-check:last-child { border-bottom: 0; }
.guide-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.22rem;
  accent-color: var(--color-ink);
}
.guide-check-body { min-width: 0; }
/* Same rule as the callout heading: only the item's own title is a block. */
.guide-check-body > strong { display: block; }
.guide-check-body strong { color: var(--color-ink); font-weight: 700; }
.guide-check-body span { display: block; font-size: 0.9rem; }

/* ---------- Tabs (progressive enhancement, see guide.js) ---------- */
/* Without JS every panel stays visible with its own heading, so nothing is
   unreachable. guide.js builds the .mode-toggle row and hides all but one. */
/* guide.js toggles the `hidden` attribute; make that explicit so a future
   display rule on .guide-tabpanel cannot silently defeat it. */
.guide-tabpanel[hidden] { display: none; }

.guide-tabpanel-title {
  margin: 0 0 0.5rem;
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 700;
}
.guide-tabs.is-enhanced .guide-tabpanel-title { display: none; }
.guide-tabs .mode-toggle { display: none; }
.guide-tabs.is-enhanced .mode-toggle { display: inline-flex; }

/* ---------- Step pager ---------- */
/* .browse-pager / .browse-pager-info come from styles.css. */
.guide-pager { justify-content: space-between; margin-top: 1.25rem; }

.guide-pager-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 46%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-2);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.guide-pager-link:hover,
.guide-pager-link:focus-visible { border-color: var(--color-ink); background: var(--color-bg-3); }
.guide-pager-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-pager-spacer { flex: 0 0 auto; }

/* ---------- Track index: the map of the steps ---------- */
.guide-steplist { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.guide-steplist-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-2);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.guide-steplist-item:hover,
.guide-steplist-item:focus-visible {
  border-color: var(--color-ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.guide-stepnum {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-weight: 700;
  font-size: 0.95rem;
}

.guide-steplist-body { min-width: 0; flex: 1 1 auto; }
.guide-steplist-body h3 { margin: 0 0 0.15rem; color: var(--color-ink); font-size: 1rem; font-weight: 700; }
.guide-steplist-body p { margin: 0; color: var(--color-ink-2); font-size: 0.9rem; line-height: 1.45; }
.guide-steplist-go { flex: 0 0 auto; color: var(--color-ink-2); }

/* ---------- Platform picker (step 0) ---------- */
/* .platform-card is a <div role="button"> in the store; here it is a real <a>. */
.guide-platform-card { text-decoration: none; color: inherit; }
.guide-platform-card:hover { text-decoration: none; }

/* ---------- Small print ---------- */
.guide-verified {
  margin: 1rem 0 0;
  color: var(--color-ink-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

.guide-backlink { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 1rem; font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .guide-rail { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .guide-pager { flex-direction: column; align-items: stretch; }
  .guide-pager-link { max-width: none; justify-content: center; }
  .guide-steplist-go { display: none; }
}