/* Styles for the open learning guides; shared site tokens remain authoritative. */
.guide-page .guide-hero {
  padding-block:clamp(1.5rem,3vw,3rem) clamp(2.5rem,5vw,4.5rem);
}
.guide-page .guide-category {
  color:var(--accent);
  font-size:.875rem;
  font-weight:600;
  margin-bottom:1.25rem;
}
.guide-page .guide-hero h1 {
  font-size:clamp(2.5rem,5.3vw,4.5rem);
  max-width:20ch;
}
.guide-page .guide-intro {
  font-size:clamp(1.125rem,1.5vw,1.375rem);
  line-height:1.55;
  max-width:58ch;
  margin-top:1.5rem;
}
.guide-page .guide-byline {
  color:var(--muted);
  font-size:.875rem;
  margin-top:1.25rem;
}
.guide-page .guide-layout {
  display:grid;
  grid-template-columns:minmax(200px,260px) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
  padding-bottom:clamp(3rem,6vw,6rem);
}
.guide-page .guide-navigation {
  position:sticky;
  top:calc(var(--header-height) + var(--header-inset) + 2rem);
}
.guide-page .guide-toc h2 {
  font-size:1rem;
  letter-spacing:0;
  margin-bottom:1rem;
}
.guide-page .guide-toc ol {
  list-style:none;
  margin:0;
  padding:0;
}
.guide-page .guide-toc li+li {
  margin-top:.25rem;
}
.guide-page .guide-toc a {
  display:block;
  padding:.5rem 0;
  min-height:44px;
  color:var(--muted);
  font-size:.875rem;
  line-height:1.4;
}
.guide-page .guide-toc a:hover {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:4px;
}
.guide-page .guide-body {
  min-width:0;
  max-width:74ch;
  font-size:1.0625rem;
}
.guide-page .guide-section {
  scroll-margin-top:calc(var(--header-height) + var(--header-inset) + 2rem);
}
.guide-page .guide-section+.guide-section {
  margin-top:clamp(3rem,6vw,5rem);
}
.guide-page .guide-body h2 {
  font-size:clamp(1.75rem,3vw,2.375rem);
  margin-bottom:1.5rem;
}
.guide-page .guide-body h3 {
  font-size:1.25rem;
}
.guide-page .guide-body p {
  line-height:1.75;
}
.guide-page .guide-steps {
  padding-left:1.5rem;
  margin:1.5rem 0 2rem;
}
.guide-page .guide-steps li,
.guide-page .guide-checklist li {
  padding-left:.25rem;
  margin-top:.75rem;
}
.guide-page .guide-steps li::marker {
  color:var(--accent);
  font-weight:600;
}
.guide-page .guide-comparison {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
  gap:1.5rem;
  padding:1.75rem;
  background:var(--surface);
  border-radius:12px;
  margin-block:2rem;
}
.guide-page .guide-comparison h3 {
  font-size:1rem;
  margin-bottom:.75rem;
}
.guide-page .guide-comparison>div:last-child h3 {
  color:var(--accent);
}
.guide-page .guide-comparison p {
  font-size:1rem;
}
.guide-page .guide-note {
  color:var(--muted);
  font-size:.9375rem;
}
.guide-page .guide-example {
  margin-top:2.75rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-height) + var(--header-inset) + 2rem);
}
.guide-page .guide-example-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.375rem 1rem;
  margin-bottom:.75rem;
}
.guide-page .guide-example-heading>span {
  color:var(--muted);
  font-size:.8125rem;
}
.guide-page .guide-template {
  background:var(--surface);
  padding:1.25rem 1.5rem;
  border-radius:12px;
  margin-block:1.25rem;
}
.guide-page .guide-template-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  margin-bottom:1rem;
}
.guide-page .guide-template-actions>span {
  color:var(--muted);
  font-size:.8125rem;
}
.guide-page .guide-copy-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.375rem .875rem;
  border:1px solid var(--accent);
  border-radius:6px;
  background:var(--bg);
  color:var(--accent);
  font-size:.875rem;
  font-weight:600;
}
.guide-page .guide-copy-button:hover {
  background:var(--tint);
}
.guide-page .guide-template pre {
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:inherit;
  font-size:.9375rem;
  line-height:1.75;
}
.guide-page .guide-template code {
  font:inherit;
}
.guide-page .guide-check,
.guide-page .guide-refinement {
  font-size:.9375rem;
}
.guide-page .guide-check strong,
.guide-page .guide-refinement strong {
  font-weight:600;
}
.guide-page .guide-example .guide-refinement {
  margin-top:.75rem;
}
.guide-page .guide-copy-status {
  font-size:.875rem;
  color:var(--accent);
}
.guide-page .guide-copy-status:empty {
  margin:0;
}
.guide-page .guide-checklist {
  margin:1.5rem 0 2rem;
  padding-left:1.25rem;
}
.guide-page .guide-checklist+h3 {
  margin-bottom:1rem;
}
.guide-page .guide-takeaway {
  padding:1.5rem;
  margin-top:2rem;
  background:var(--mint);
  color:var(--mint-ink);
  border-radius:12px;
}
.guide-page .guide-takeaway p {
  margin-top:.5rem;
}
.guide-page .guide-source {
  color:var(--muted);
  font-size:.875rem;
  margin-top:1.5rem;
}
.guide-page .guide-source a {
  text-decoration:underline;
  text-underline-offset:3px;
}
.guide-page .guide-course {
  margin-top:3rem;
  padding:clamp(1.5rem,4vw,2.5rem);
  background:var(--tint);
  border-radius:12px;
}
.guide-page .guide-course>p:first-child {
  font-size:.875rem;
  color:var(--accent);
  font-weight:600;
  margin-bottom:.75rem;
}
.guide-page .guide-course h2 {
  margin-bottom:1rem;
}
.guide-page .guide-course .button {
  margin-top:1.5rem;
  max-width:100%;
  gap:1.25rem;
}
@media (max-width:1099px) {
  .guide-page .guide-layout {
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .guide-page .guide-navigation {
    position:static;
    max-width:74ch;
  }
  .guide-page .guide-toc {
    padding:1.25rem 1.5rem;
    background:var(--surface);
    border-radius:12px;
  }
  .guide-page .guide-toc ol {
    columns:2;
    column-gap:2rem;
  }
  .guide-page .guide-toc li {
    break-inside:avoid;
  }
}
@media (max-width:699px) {
  .guide-page .guide-hero h1 {
    font-size:clamp(2.25rem,9vw,3rem);
  }
  .guide-page .guide-body {
    font-size:1rem;
  }
  .guide-page .guide-toc ol {
    columns:1;
  }
  .guide-page .guide-comparison {
    grid-template-columns:1fr;
    gap:1.5rem;
    padding:1.25rem;
  }
  .guide-page .guide-template {
    padding:1rem 1.125rem;
  }
  .guide-page .guide-course .button {
    width:100%;
    font-size:.9375rem;
  }
}
@media print {
  .guide-page .site-header,
  .guide-page .site-footer,
  .guide-page .guide-navigation,
  .guide-page .guide-copy-button {
    display:none;
  }
  .guide-page .guide-layout {
    display:block;
  }
  .guide-page .guide-body {
    max-width:none;
  }
  .guide-page .guide-template {
    break-inside:avoid;
  }
}