/* Documentation pages. Shared colors and navigation live in site.css. */
.manual-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:52px; padding-top:34px; padding-bottom:88px; align-items:start; }
.manual-sidebar { position:sticky; top:28px; }
.manual-sidebar nav { border-right:1px solid var(--color-border); padding-right:22px; }
.manual-sidebar nav>p { font-weight:750; font-size:14px; margin-bottom:14px; color:var(--color-primary); }
.manual-sidebar a { display:block; font-size:14px; padding:10px 12px; margin:3px 0; border-radius:8px; line-height:1.6; }
.manual-sidebar a:hover,.manual-sidebar a[aria-current] { background:var(--color-surface-soft); color:var(--color-primary); }
.manual-sidebar a[aria-current] { font-weight:750; }
.manual-sidebar .manual-beginner-link { margin-top:22px; padding-top:18px; border-top:1px solid var(--color-border); border-radius:0; }
.manual-mobile-toc { display:none; }
.manual-content { min-width:0; }
.manual-heading { padding:0 0 30px; }
.manual-heading h1 { font-size:clamp(30px,3.2vw,42px); margin:10px 0 14px; }
.manual-lead { color:var(--color-text-muted); max-width:680px; font-size:17px; }
.manual-content a:not(.manual-card) { color:var(--color-primary); }
.manual-content p a,.manual-content li a,.manual-screen figcaption a { text-decoration:underline; text-underline-offset:4px; }
.manual-callout { background:var(--color-surface-soft); border-left:3px solid var(--color-primary); padding:22px 26px; border-radius:0 12px 12px 0; margin:0 0 26px; }
.manual-callout strong { display:block; margin-bottom:6px; }
.manual-callout p { margin-top:0; }
.manual-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.manual-card { display:flex; flex-direction:column; padding:25px 25px 22px; border:1px solid var(--color-border); border-radius:16px; background:var(--color-surface); transition:border-color .15s,box-shadow .15s; }
.manual-card:hover { border-color:var(--color-primary); box-shadow:0 8px 24px var(--color-route-shadow); }
.manual-card-number { color:var(--color-primary); font-size:13px; font-weight:750; letter-spacing:.1em; margin-bottom:12px; }
.manual-card h2 { font-size:21px; }
.manual-card p { color:var(--color-text-muted); margin:12px 0 20px; font-size:14px; }
.manual-card-link { display:flex; justify-content:space-between; margin-top:auto; font-size:14px; font-weight:700; color:var(--color-primary); }
.manual-quick-links { padding-top:38px; }
.manual-quick-links h2 { font-size:24px; margin-bottom:16px; }
.manual-quick-links ul { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; }
.manual-quick-links a { display:block; padding:12px 15px; background:var(--color-surface); border-radius:8px; border:1px solid var(--color-border); font-size:14px; }
.manual-page-toc { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.manual-page-toc a { display:flex; align-items:center; min-height:42px; padding:7px 12px; border:1px solid var(--color-border); border-radius:7px; font-size:13px; background:var(--color-surface); }
.manual-section { padding:38px 0; border-top:1px solid var(--color-border); scroll-margin-top:24px; }
.manual-section h2 { font-size:25px; margin-bottom:22px; }
.manual-section h3 { font-size:18px; margin:24px 0 10px; }
.manual-section p { font-size:15px; }
.manual-section ul,.manual-section ol { padding-left:24px; margin:16px 0; font-size:15px; }
.manual-section li { padding-left:3px; margin-bottom:11px; }
.manual-illustrated { display:grid; grid-template-columns:minmax(0,1fr) 225px; gap:30px; align-items:start; }
.manual-screen { width:100%; max-width:250px; margin:0 auto; }
.manual-screen img { width:100%; border-radius:18px; box-shadow:0 8px 26px var(--color-route-shadow); border:1px solid var(--color-border); background:#000; }
.manual-screen figcaption { color:var(--color-text-muted); font-size:12px; line-height:1.7; margin-top:14px; }
.manual-screen figcaption a { display:block; margin-top:6px; min-height:30px; }
.manual-section .manual-callout { margin-top:20px; padding:18px 20px; }
.manual-definition { margin:14px 0 0; }
.manual-definition dt { font-size:15px; font-weight:750; margin-top:20px; }
.manual-definition dd { margin:5px 0 0; color:var(--color-text-muted); font-size:15px; }
.manual-faq details { background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; margin:10px 0; }
.manual-faq summary { display:list-item; cursor:pointer; padding:17px 20px; font-size:15px; font-weight:700; }
.manual-faq details>div { padding:0 20px 20px; }
.manual-back { display:inline-flex; align-items:center; min-height:44px; font-weight:700; margin:10px 0 26px; }
.manual-screen-note { margin-top:38px; padding-top:22px; border-top:1px solid var(--color-border); color:var(--color-text-muted); font-size:12px; line-height:1.8; }
.manual-screen-note strong { display:block; margin-bottom:8px; }
.manual-screen-note p { margin-top:0; }
@media(max-width:1100px) {
  .manual-layout { grid-template-columns:185px minmax(0,1fr); gap:28px; }
  .manual-illustrated { grid-template-columns:minmax(0,1fr) 195px; gap:22px; }
}
@media(max-width:900px) {
  .manual-layout { display:block; padding-top:18px; }
  .manual-sidebar { display:none; }
  .manual-mobile-toc { display:block; margin-bottom:28px; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); }
  .manual-mobile-toc summary { padding:13px 17px; cursor:pointer; color:var(--color-primary); font-weight:750; font-size:14px; }
  .manual-mobile-toc nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:8px 12px 16px; }
  .manual-mobile-toc a { display:block; padding:10px; font-size:14px; border-radius:6px; }
  .manual-mobile-toc a[aria-current] { background:var(--color-surface-soft); color:var(--color-primary); }
  .manual-illustrated { grid-template-columns:minmax(0,1fr) 230px; }
}
@media(max-width:600px) {
  .manual-heading { padding-bottom:24px; }
  .manual-heading h1 { font-size:30px; }
  .manual-lead { font-size:15px; }
  .manual-cards { grid-template-columns:1fr; gap:13px; }
  .manual-card { padding:22px; }
  .manual-card h2 { font-size:21px; }
  .manual-card p { margin-top:9px; }
  .manual-illustrated { grid-template-columns:1fr; gap:25px; }
  .manual-screen { max-width:260px; }
  .manual-section { padding:30px 0; }
  .manual-section h2 { font-size:23px; }
  .manual-callout { padding:20px; }
  .manual-quick-links ul { grid-template-columns:1fr; }
  .manual-mobile-toc nav { grid-template-columns:1fr; }
  .manual-layout { padding-bottom:56px; }
}
@media(prefers-reduced-motion:reduce) { .manual-card { transition:none; } }