/* Help is organized around reading, writing, and local-file workflows. */
.help-heading { margin-bottom:24px; }
.help-guides { display:flex; flex-wrap:wrap; gap:8px 28px; border-bottom:1px solid var(--line); margin-bottom:36px; }
.help-guides a { padding:12px 0; color:var(--muted); border-bottom:2px solid transparent; }
.help-guides a[aria-current="page"] { color:var(--accent); font-weight:600; border-color:var(--accent); }
.help-contents { max-height:calc(100vh - 48px); overflow:auto; }
.help-content { max-width:820px; }
.help-content > section:first-child { border-top:0; padding-top:0; }
.help-content > section > h2 { max-width:26ch; }
.help-content ul { padding-left:24px; margin:0 0 20px; }
.help-content pre { margin:16px 0 24px; font-size:13px; line-height:1.65; }
.help-content pre code { font-size:inherit; }
.help-content figure { margin:24px 0; }
.help-content figcaption { color:var(--muted); font-size:13px; line-height:1.6; }
.help-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0; }
.help-choice-grid > div { border-left:3px solid var(--line); padding-left:18px; }
.help-choice-grid h3,.help-example h3 { margin:0 0 10px; }
.help-choice-grid p:last-child,.help-example p:last-child { margin:0; }
.help-example { border:1px solid var(--line); background:white; border-radius:6px; padding:22px; margin:24px 0; }
.help-example ol { margin-bottom:0; }
.help-flow ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; list-style:none; border:1px solid var(--line); border-radius:6px; background:var(--soft); overflow:hidden; }
.help-flow li { margin:0; padding:20px; border-right:1px solid var(--line); }
.help-flow li:last-child { border-right:0; }
.help-flow strong,.help-flow span { display:block; }
.help-flow strong { color:var(--accent); }
.help-flow span { font-size:13px; color:var(--muted); margin-top:5px; }
.help-sample { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--line); border-radius:6px; overflow:hidden; background:white; }
.help-sample > div { padding:20px; min-width:0; }
.help-sample > div > h3 { font-family:inherit; font-size:12px; color:var(--muted); margin:0 0 20px; }
.help-sample-source pre { background:none; border:0; padding:0; margin:0; }
.help-sample-result { border-left:1px solid var(--line); }
/* Preview content keeps the same typography and block styles as paper readers. */
.help-sample-result .markdown-body { font-size:17px; }
.help-sample-result .markdown-body > :first-child { margin-top:0; }
.help-sample-source h4 { font:600 12px/1.5 system-ui; margin:20px 0 8px; color:var(--muted); }
.help-sample figcaption { grid-column:1 / -1; padding:14px 20px; background:var(--ground); border-top:1px solid var(--line); }
.help-sample .markdown-body section { scroll-margin-top:24px; }
.help-disclosure { margin:20px 0; border:1px solid var(--line); border-radius:6px; }
.help-disclosure summary { padding:14px 18px; color:var(--accent); font-weight:500; }
.help-disclosure > div { padding:0 18px 4px; }
@media(max-width:800px) {
  .help-contents { max-height:none; overflow:visible; }
  .help-guides { gap:4px 20px; font-size:13px; margin-bottom:20px; }
  .help-choice-grid { grid-template-columns:1fr; }
}
@media(max-width:560px) {
  .help-sample { grid-template-columns:minmax(0,1fr); }
  .help-sample-result { border-left:0; border-top:1px solid var(--line); }
  .help-flow ol { grid-template-columns:1fr; }
  .help-flow li { border-right:0; border-bottom:1px solid var(--line); padding:14px 20px; }
  .help-flow li:last-child { border-bottom:0; }
}
