/* Document-page BODY styles — /faq, /user-guide (and the three legal pages once retrofitted).
   Navbar + footer are NOT here; they are shared chrome in inc/chrome.css, which every page loads.
   Palette is the homepage's: ground #1c2430, accent #FFB800, secondary #8a919c, body #3c4250.
   The homepage's .reveal/.memory choreography is deliberately absent — a help page wants a readable
   column, a term list and a way back to the index. */

:root {
	--ground:    #1c2430;
	--accent:    #FFB800;
	--secondary: #8a919c;
	--body:      #3c4250;
	--rule:      rgba(0, 0, 0, 0.08);
	--surface:   #f7f8fa;
}

html, body { margin: 0; padding: 0; font-family: "Arial", sans-serif; color: var(--ground); line-height: 1.6; }

/* --- the reading column --- */
.doc { max-width: 760px; margin: 0 auto; padding: 150px 20px 80px; }
@media only screen and (max-width: 800px) { .doc { padding-top: 90px; } }
.doc h1 { font-size: 2.3em; margin: 0 0 6px; line-height: 1.2; }
.doc h2 { font-size: 1.3em; margin: 38px 0 10px; }
.doc p, .doc li { color: var(--body); }
.doc a { color: var(--ground); }
.doc a:hover { color: var(--ground); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.doc code { background: var(--surface); border-radius: 3px; padding: 1px 5px; font-size: 0.92em; }
.doc .updated, .doc .lede { color: var(--secondary); }
.doc .lede { font-size: 1.15em; margin: 0 0 36px; }

/* --- FAQ index --- */
.faq-group { margin: 0 0 34px; }
.faq-group h2 { margin-bottom: 8px; }
.faq-list { list-style: none; margin: 0; padding: 0; }
.faq-list li { border-bottom: 1px solid var(--rule); }
.faq-list li:first-child { border-top: 1px solid var(--rule); }
/* The left padding is permanent, not applied on :hover — the accent bar appears in that gutter, and
   padding that arrives with the bar would shift the text sideways under the pointer. */
.faq-list a { display: block; padding: 12px 2px 12px 4pt; text-decoration: none; color: var(--ground); }
.faq-list a:hover { color: var(--ground); background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }

/* --- answer pages --- */
.faq-back { display: inline-block; margin: 0 0 18px; font-size: 0.92em; color: var(--secondary); text-decoration: none; }
.faq-back:hover { color: var(--ground); }
.faq-meta { color: var(--secondary); font-size: 0.9em; margin: 0 0 34px; }
.faq-related { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--rule); }
.faq-related h2 { font-size: 1.05em; color: var(--secondary); }

/* Wide content scrolls inside its own box rather than making the page scroll sideways on a phone. */
.terms { width: 100%; border-collapse: collapse; margin: 18px 0 26px; display: block; overflow-x: auto; }
.terms th, .terms td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); }
.terms th { color: var(--ground); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; }
.terms td { color: var(--body); }
.terms td:first-child { white-space: nowrap; }

.doc figure { margin: 24px 0; }
.doc figure img { max-width: 100%; height: auto; border-radius: 6px; }
.doc figcaption { color: var(--secondary); font-size: 0.9em; margin-top: 8px; }

/* --- copyable section anchors (answer pages; inc/doc.js does the copying) --- */
.doc h2 { position: relative; }
.anchor {
	margin-left: 0.45em; text-decoration: none; line-height: 0;
	color: var(--secondary); opacity: 0; transition: opacity 0.15s ease;
}
/* Sized in em so the glyph tracks the heading it belongs to. `stroke: currentColor` is what makes the
   .anchor colour rules below reach inside the SVG — a fill-based icon would ignore them. */
.anchor-glyph {
	width: 0.72em; height: 0.72em; vertical-align: baseline;
	fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
}
.doc h2:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover, .anchor:focus-visible { color: var(--accent); }
/* Touch devices never fire :hover, so a hover-only glyph is simply unreachable on a phone. Show it
   permanently there, dimmed enough not to compete with the heading. */
@media (hover: none) { .anchor { opacity: 0.45; } }
/* The confirmation replaces the glyph in place, so the heading must not reflow when it swaps in. */
.anchor.copied .anchor-glyph { display: none; }
.anchor.copied::after {
	content: "Copied"; color: var(--accent); font-size: 0.62em; letter-spacing: 0.03em;
	line-height: normal; vertical-align: middle;
}
.anchor.copied { opacity: 1; }

/* Fragment markup the answer bodies use. Both arrived with the macOS paths in backup.html and had no
   rule until now — an unstyled <pre> inherits the browser default monospace at full size. */
.doc pre {
	background: var(--surface); border-radius: 4px; padding: 10px 12px; margin: 14px 0;
	font-size: 0.92em; overflow-x: auto;   /* a long path scrolls in its box, not the page */
}