/* Unified tool help blocks: intro / steps / formula / scenes / FAQ.
   Loaded globally so every tool page can render the same guidance. */
.help-doc { margin: 26px 0 8px; }
.help-block { margin: 0 0 18px; }
.help-title {
    margin: 0 0 10px; padding-left: 9px; border-left: 3px solid #28a745;
    font-size: .9375rem; font-weight: 700; line-height: 1.35; color: #2f6f4f;
}
.help-text, .help-note, .help-foot { margin: 0; font-size: .8125rem; line-height: 1.85; color: #5b6b62; }
.help-steps { margin: 0; padding-left: 20px; font-size: .8125rem; line-height: 1.9; color: #5b6b62; }
.help-steps li { margin-bottom: 4px; }
.help-formula {
    margin: 0 0 8px; padding: 12px 14px; border: 1px solid #e1e9e3; border-radius: 6px;
    background: #f7fbf8; color: #374151; font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: .75rem; line-height: 1.9; white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.help-note { margin-top: 2px; color: #8a9690; }
.help-scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.help-scene { padding: 10px 12px; border: 1px solid #e6ede8; border-radius: 6px; background: #fcfdfc; }
.help-scene .t { margin-bottom: 4px; font-size: .8125rem; font-weight: 700; color: #2f6f4f; }
.help-scene .d { font-size: .75rem; line-height: 1.7; color: #6b7a72; }
.help-faq details { margin-bottom: 8px; border: 1px solid #e6ede8; border-radius: 6px; background: #fff; }
.help-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; font-size: .8125rem; font-weight: 600; line-height: 1.6;
    color: #374151; cursor: pointer; list-style: none;
}
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary::after { content: "\25BE"; flex: none; color: #8a9690; transition: transform .2s; }
.help-faq details[open] summary::after { transform: rotate(180deg); }
.help-faq details p { margin: 0; padding: 0 12px 11px; font-size: .8125rem; line-height: 1.85; color: #6b7a72; }
.help-foot { padding-top: 10px; border-top: 1px dashed #e1e9e3; font-size: .75rem; color: #9aa8a0; }

/* When the block sits outside .content-body, match its width rules. */
.help-outside { width: 80%; margin: 0 auto; padding-bottom: 2rem; box-sizing: border-box; }
/* Some legacy pages leave .content-body unclosed before the footer, so the
   help block ends up nested inside it and must simply inherit its width. */
.content-body > .help-outside { width: 100%; margin: 0; }
@media only screen and (max-width: 1440px) { .help-outside { width: 86%; } }
@media only screen and (max-width: 1280px) { .help-outside { width: 90%; } }
@media only screen and (max-width: 980px) { .help-outside { width: 92%; } }
@media only screen and (max-width: 640px) {
    .help-outside { width: 92%; }
    .help-scenes { grid-template-columns: 1fr; }
    .help-formula { font-size: .6875rem; padding: 10px; }
}

/* Dark theme */
body.dark .help-title { color: #8fdca5; border-left-color: #3f7a52; }
body.dark .help-text, body.dark .help-steps, body.dark .help-note,
body.dark .help-faq details p, body.dark .help-scene .d { color: #aebfc6; }
body.dark .help-formula { background: #1d2428; border-color: #354147; color: #cfe0e6; }
body.dark .help-scene, body.dark .help-faq details { background: #232a2e; border-color: #3b464c; }
body.dark .help-scene .t { color: #8fdca5; }
body.dark .help-faq summary { color: #dbe6ea; }
body.dark .help-faq summary::after { color: #8b9ba2; }
body.dark .help-foot { border-top-color: #354147; color: #8b9ba2; }