/* Copyright (c) 2026 Naganori Yamaguchi. Apache-2.0.
 * Authors: Naganori Yamaguchi (assisted by OpenAI Codex)
 * https://github.com/n-yamaguchi-0729
 */
.guide-header { display: flex; justify-content: space-between; }
.guide-header nav { display: flex; align-items: center; gap: 24px; font: var(--type-navigation); }
.guide-header nav a { color: var(--ink); text-decoration: none; }
/* Match the main column's left edge while using the space without a tree. */
.guide-layout { margin-left: max(0px, calc((100% - var(--tree) - var(--content-width)) / 2)); padding: var(--content-top) var(--content-gutter-end) var(--content-bottom) var(--content-gutter); }
.guide-main { min-width: 0; }
.guide-hero .eyebrow { margin-bottom: 10px; }
.guide-hero h1 { margin: 0 0 15px; font: var(--type-page-title); letter-spacing: -.03em; overflow-wrap: anywhere; }
.guide-hero .lead { color: var(--muted); font: var(--type-lead); margin-bottom: 20px; }
.guide-description, .guide-hero .overview { font: var(--type-body); text-align: justify; text-align-last: start; hyphens: auto; }
.guide-description p, .guide-hero .overview p { margin-bottom: .85em; }
.guide-description > :last-child, .guide-hero .overview > :last-child { margin-bottom: 0; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; font: var(--type-navigation); }
.guide-actions a { padding: 10px 0; }
.guide-actions .primary { border: 1px solid var(--accent); background: var(--accent); color: var(--bg); border-radius: 4px; padding: 10px 16px; }
.guide-section { margin-top: 30px; scroll-margin-top: calc(var(--header) + 24px); font: var(--type-body); }
.guide-section h2 { font: var(--type-section-title); margin: 0 0 14px; }
.guide-section h3 { font: var(--type-subheading); }
.guide-section p { margin: 0 0 .85em; }
.mathematical-statement { border-left: 3px solid var(--accent); padding: 16px 17px; background: var(--accent-soft); border-radius: 4px; }
.mathematical-statement p:last-child { margin-bottom: 0; }
.result-grid { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.result-grid li { min-width: 0; }
.result-grid a { height: 100%; display: block; border: 1px solid var(--line); border-radius: 5px; padding: 22px; background: var(--paper); text-decoration: none; color: var(--ink); }
.result-grid a:hover { border-color: var(--accent); background: var(--accent-soft); }
.result-grid h3 { margin: 8px 0 7px; font: var(--type-item-title); color: var(--ink); }
.result-grid h3 span { color: var(--accent); }
.result-grid p { font: var(--type-caption); margin: 0; color: var(--muted); }
.lean-source { min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 20px; margin: 20px 0; background: var(--paper); }
.lean-source h3 { margin: 0; overflow-wrap: anywhere; font: var(--type-code-title); }
.guide-section .source-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; font: var(--type-caption); }
.lean-source pre { margin: 14px 0 0; padding: 15px 17px; max-height: 460px; overflow: auto; white-space: pre; word-break: normal; border: 0; border-radius: 4px; background: var(--code); font: var(--type-code); }
.lean-source pre code { font-size: inherit; white-space: inherit; background: none; padding: 0; }
.lean-source details { margin: 12px 0 0; font: var(--type-small); }
.lean-source summary { cursor: pointer; color: var(--accent); padding: 4px 0; }
.related-sources { font: var(--type-small); overflow-wrap: anywhere; }
.related-sources summary { cursor: pointer; color: var(--muted); }
.related-sources li { margin: 8px 0; }
.references { padding-left: 1.4em; font: var(--type-body); }
.references li { padding-left: 6px; margin: 14px 0; overflow-wrap: anywhere; }
.source-version { font: var(--type-caption); color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 30px; }
.back-link { font: var(--type-navigation); margin-top: 20px; }
.guide-footer { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); font: var(--type-caption); color: var(--muted); }
.guide-main mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding: 8px 0; max-width: 100%; }
.math-notice { padding: 8px 0; font: var(--type-caption); color: var(--muted); }
@media (max-width: 900px) {
  .guide-layout { width: min(100%, var(--content-width)); margin-inline: auto; }
  .guide-header nav { gap: 16px; }
}
@media (max-width: 540px) {
  .guide-header nav { gap: 12px; }
  .result-grid { grid-template-columns: 1fr; }
  .mathematical-statement, .lean-source, .lean-source pre { padding: 12px; }
}