/* Reading surfaces extend the marketing site's Design Lab tokens. */
.guide-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.guide-previews article { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.guide-previews h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.75rem; }
.guide-previews h3 a { color: var(--text-primary); text-decoration: none; }
.guide-previews p { color: var(--text-secondary); }

.guide-page {
  padding-block: 2rem 4rem;
}

.guide-header {
  max-width: 72ch;
  padding-block: 1rem 1.5rem;
}

.guide-breadcrumbs,
.guide-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.guide-header h1 {
  margin: 1.25rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.12;
  text-wrap: balance;
}

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.guide-column {
  min-width: 0;
  max-width: 72ch;
}

.guide-body {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.guide-body h2,
.guide-next h2 {
  margin: 2.5rem 0 0.75rem;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.2;
  text-wrap: balance;
}

.guide-body h2:first-child { margin-top: 0; }
.guide-body h3 { margin: 2rem 0 0.5rem; color: var(--text-primary); font-size: 1.15rem; }
.guide-body p { margin: 0 0 1.1rem; }
.guide-body li { margin-block: 0.45rem; }
.guide-body strong { color: var(--text-primary); }
.guide-body h2,
.guide-body h3 { scroll-margin-top: calc(var(--header-h) + 1.25rem); }
.guide-body a,
.guide-next a { text-decoration-color: var(--accent-border); }

.guide-body code {
  font-family: var(--font-mono);
  font-size: 0.83em;
  color: var(--text-primary);
}

.guide-body pre {
  padding: 1.25rem;
  background: var(--surface-panel);
  border-radius: var(--radius);
  white-space: pre-wrap;
}

.guide-body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.guide-body blockquote p:last-child { margin-bottom: 0; }
.guide-table { overflow-x: auto; margin-block: 1.25rem 2rem; }
.guide-table table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.guide-table th { text-align: left; color: var(--text-primary); background: var(--surface-panel); }
.guide-table th,
.guide-table td { padding: 0.8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.guide-table td { min-width: 7rem; }
.guide-table th:first-child,
.guide-table td:first-child { min-width: 10rem; }

.guide-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  max-height: calc(100vh - var(--header-h) - 3rem);
  overflow-y: auto;
  padding-left: 1.5rem;
  border-left: 1px solid var(--border);
}

.guide-sidebar h2 { margin: 0 0 0.75rem; font-size: 1rem; }
.guide-sidebar nav + nav { margin-top: 2rem; }
.guide-sidebar ul,
.guide-sidebar ol { margin: 0; padding: 0; list-style: none; }
.guide-sidebar li { margin-bottom: 0.6rem; font-size: 0.875rem; }
.guide-sidebar a { color: var(--text-secondary); text-decoration: none; }
.guide-sidebar a:hover,
.guide-sidebar [aria-current="page"] { color: var(--accent); }
.guide-next { margin-top: 3rem; border-top: 1px solid var(--border); color: var(--text-secondary); }
.guide-next ul { padding-left: 1.1rem; }
.guide-next li { margin-block: 0.6rem; }
.guide-mobile-contents { display: none; }
.guide-library-layout { display: block; }
.guide-library-layout .guide-column { max-width: none; }
.guide-library-layout .guide-body { max-width: 72ch; }
.guide-directory, .guide-category { padding-block: 0; }
.guide-search { margin-block: 2rem 1rem; max-width: 40rem; }
.guide-search label { display: block; color: var(--text-primary); font-weight: 600; margin-bottom: 0.6rem; }
.guide-search input { width: 100%; font: inherit; color: var(--text-primary); background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; }
.guide-search input::placeholder { color: var(--text-muted); }
.guide-search p { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem; }
.guide-topics { display: flex; gap: 0.6rem 1.25rem; flex-wrap: wrap; margin-bottom: 2rem; }
.guide-topics a { color: var(--accent); font-size: 0.95rem; }
.guide-category { margin-block: 2.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.guide-category h2 { font-family: var(--font-display); font-size: 2rem; margin-bottom: 1.25rem; }
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.guide-card { border-top: 1px solid var(--border); padding-block: 1.1rem 1.35rem; }
.guide-card h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.6rem; }
.guide-card h3 a { color: var(--text-primary); text-decoration-color: var(--accent-border); }
.guide-card p { color: var(--text-secondary); max-width: 48ch; line-height: 1.6; margin: 0 0 0.65rem; }
.guide-card span { display: block; color: var(--text-muted); font-size: 0.85rem; }
.guide-page [hidden] { display: none !important; }

.guide-page ::selection { background: var(--accent); color: var(--surface-canvas); }
.guide-page { scrollbar-color: var(--border-hover) var(--surface-canvas); }

@media (max-width: 850px) {
  .guide-previews { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-sidebar { display: none; }
  .guide-mobile-contents { display: block; margin-bottom: 2rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
  .guide-mobile-contents summary { cursor: pointer; color: var(--accent); font-weight: 600; }
  .guide-mobile-contents ul { padding-left: 1.2rem; }
  .guide-mobile-contents li { margin-block: 0.65rem; }
  .guide-body { font-size: 1rem; }
  .guide-table th,
  .guide-table td { padding: 0.65rem; }
}

@media (max-width: 600px) {
  .guide-cards { grid-template-columns: minmax(0, 1fr); }
  .guide-topics { gap: 0.75rem 1rem; }
}