/* Styles for the static guide pages (generated by scripts/build-guides.js). These pages load style.css first,
   so the colour tokens and the whole top bar (header, load form, theme button, language selector) are the
   app's own and stay identical to the root page. This file only styles the article and the footer. */
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: 8px; z-index: 20; }
.skip:focus { left: 8px; }

#load-form input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: -1px; }

main.guide {
  display: block; max-width: 720px; padding-top: 32px; padding-bottom: 24px;
  font-size: 1.0625rem; line-height: 1.65;
}
main.guide a, footer.site a { color: var(--accent); text-underline-offset: 0.18em; }
main.guide a:focus-visible, footer.site a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

main.guide h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 14px; text-wrap: balance; }
.lead { font-size: 1.15rem; color: var(--text-secondary); margin: 0 0 8px; }
main.guide section { margin-top: 30px; }
main.guide h2 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 8px; }
main.guide p { margin: 0 0 12px; }
main.guide ol, main.guide ul { margin: 0 0 12px; padding-left: 1.4em; }
main.guide li { margin-bottom: 8px; padding-left: 4px; }
main.guide code, main.guide kbd {
  font: 0.88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--accent-bg); color: var(--text);
  border-radius: 6px; padding: 1px 6px;
}
main.guide kbd { background: var(--bg-card); border: 0.5px solid var(--separator); border-bottom-width: 2px; }
.try { margin: 18px 0 4px; }
main.guide a.try-btn {
  display: inline-block; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 1rem; line-height: 1.2;
  padding: 11px 20px; border-radius: 10px; text-decoration: none;
}
main.guide a.try-btn:hover { filter: brightness(1.08); }
.next { margin-top: 30px; font-weight: 600; }

footer.site { border-top: 0.5px solid var(--separator); padding: 22px 0 36px; font-size: 0.92rem; line-height: 1.5; color: var(--text-secondary); }
footer.site .bar { max-width: 720px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
footer.site nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
footer.site nav strong { color: var(--text); }
footer.site [aria-current] { color: var(--text); font-weight: 600; text-decoration: none; }
footer .fine { max-width: 720px; margin: 14px auto 0; padding: 0 16px; font-size: 0.82rem; }
.lang-tag { color: var(--text-secondary); font-size: 0.8em; }