/*
 * QUOTIFY FAQ and help pages: the tool's documentation in the site's design language (6 Oct 2026, a copy of
 * UltraCompress Pro's docs.css). Base: /libs/site-pages.css and /libs/shared-nav.css. This file styles only the
 * question-and-answer blocks and the note boxes those two pages use.
 */
.docs-container .subtitle { text-align: center; color: var(--text-2); font-size: 1.1rem; margin: 0 auto 1.5rem; max-width: 42rem; }
.docs-container .last-updated { margin: 0 0 2rem; padding: 0; background: none; border: 0; box-shadow: none; font-size: 0.9rem; color: var(--text-3); }
/* ----- Tools back link above the header, as on every other tool: the bar scrolls away under the sticky header ----- */
body { padding-top: 0; }
.back-bar { height: 48px; display: flex; align-items: center; padding: 0 var(--zdu-gutter, 24px); }
body > header { position: sticky; top: 0; z-index: 50; }
header .site-nav { position: relative; top: auto; }
.theme-toggle { top: calc(90px + var(--bar-offset, 48px)); }
@media (max-width: 768px) { .theme-toggle { top: calc(75px + var(--bar-offset, 48px)); } }
.docs-container h2 { padding-bottom: 0.5rem; border-bottom: 1px solid var(--surface-border); }
.docs-container h3 { font-size: 1.1rem; }
.faq-item { padding: 18px 20px; margin-bottom: 12px; }
.faq-item .question { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; color: var(--text-strong); font-size: 1.05rem; margin-bottom: 8px; }
.faq-item .answer { color: var(--text); }
.faq-item .answer ul, .faq-item .answer ol { margin: 10px 0 0; }
.faq-item .answer li { color: var(--text-2); font-size: 0.95rem; }
.tip, .warning, .step-guide, .quality-guide, .architecture-info, .contact-note, .table-of-contents {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    box-shadow: var(--surface-shadow);
    padding: 20px;
    margin: 1.25rem 0 1.75rem;
}
.tip { background: var(--tint-brand); border-color: var(--tint-brand-border); box-shadow: none; }
.warning { background: rgba(180, 83, 9, 0.07); border-color: rgba(180, 83, 9, 0.35); box-shadow: none; }
.tip h3, .warning h3, .step-guide h3, .quality-guide h3, .architecture-info h3, .contact-note h3, .table-of-contents h3 { margin-top: 0; }
.table-of-contents .toc-title { font-size: 1.1rem; font-weight: 600; letter-spacing: normal; margin-top: 0; margin-bottom: 12px; padding-bottom: 0; border-bottom: 0; } /* h2 for heading order, the former h3 look */
.tip p:last-child, .warning p:last-child, .step-guide p:last-child, .quality-guide p:last-child, .architecture-info p:last-child, .contact-note p:last-child,
.tip ul:last-child, .warning ul:last-child, .step-guide ul:last-child, .quality-guide ul:last-child, .architecture-info ul:last-child { margin-bottom: 0; }
.table-of-contents ol { margin-bottom: 0; }
.table-of-contents li { margin-bottom: 4px; }
.docs-container ul, .docs-container ol { margin-bottom: 1.25rem; }
.docs-container li { color: var(--text); }

/* Phones: 16 px text, 44 px tap targets (AdSense audit H-04, 8 Oct 2026) */
@media (max-width: 639.98px) {
    .faq-item .answer li, .docs-container li, .docs-container .last-updated { font-size: 1rem; }
}