/* User guide page. Builds on styles.css (fonts, buttons, brand mark, tokens). */
.guide-body{background:var(--cream);color:#253e37;min-height:100vh}
.g-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:12px 28px;background:#fafbf7ee;backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.g-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-family:'Manrope',sans-serif;font-weight:750;font-size:18px;letter-spacing:-.5px;white-space:nowrap}
.g-brand em{font-style:normal;font-weight:500;color:var(--muted);margin-left:6px;font-size:14px;letter-spacing:0}
.g-search{flex:1;max-width:420px;margin-left:auto}.g-search input{width:100%;border:1px solid #dce4d6;border-radius:9px;padding:10px 14px;font-size:14px;background:#fff}
.g-search input:focus{outline:none;border-color:#8eaa7b;box-shadow:0 0 0 3px #e5edde}
.g-download{white-space:nowrap}
.g-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px;max-width:1280px;margin:0 auto;padding:24px 28px 60px}
.g-toc{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;font-size:13px}
.g-toc ol{list-style:none;margin:16px 0;padding:0;counter-reset:toc}.g-toc li{counter-increment:toc}
.g-toc li a{display:block;padding:7px 10px;border-radius:8px;color:#435b39;text-decoration:none;line-height:1.35}
.g-toc li a::before{content:counter(toc) ". ";color:var(--muted)}
.g-toc li a:hover{background:#eef3ea}.g-toc li.active a{background:#e1ecdc;color:#1f4d3f;font-weight:700}
.g-toc li.hidden{display:none}.g-back{display:block;margin-top:8px;color:#567544;font-size:12px}
.g-audience{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.g-audience span{width:100%;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.g-audience button{border:1px solid #dce4d6;background:#fff;border-radius:999px;padding:6px 11px;font-size:12px;cursor:pointer;color:#435b39}
.g-audience button.active{background:#1f4d3f;color:#fff;border-color:#1f4d3f}
.g-main{min-width:0}
.g-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px;margin-bottom:28px}
.g-hero h1{font-family:'Manrope',sans-serif;font-size:36px;letter-spacing:-1.2px;line-height:1.1;margin:6px 0 12px}.g-hero p{font-size:15px;line-height:1.65;color:#4a5f55}
.g-hero-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.g-hero-actions .btn{margin:0}
.g-hero-img{width:100%;border-radius:12px;border:1px solid var(--line);box-shadow:0 12px 30px #18382b14}
.g-section{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 34px;margin-bottom:22px;scroll-margin-top:84px}
.g-section.hidden{display:none}
.g-section-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.g-section h2{font-family:'Manrope',sans-serif;font-size:26px;letter-spacing:-.6px;margin:8px 0 6px}
.g-section h3{font-size:17px;margin:26px 0 10px;color:#1f4d3f}
.g-summary{color:var(--muted);margin:0;font-size:14px}
.g-section p,.g-section li{font-size:15px;line-height:1.7}
.g-tags{display:flex;gap:6px;flex-wrap:wrap}.g-tag{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#eef5e9;color:#2f6a4f}
.g-tag.approver{background:#f1eef7;color:#6a5a8a}.g-tag.staff{background:#edf4f7;color:#3f6f86}.g-tag.owner{background:#fcf5e6;color:#8a6a2a}
.g-steps{counter-reset:step;list-style:none;padding:0;margin:10px 0 16px}
.g-steps li{counter-increment:step;position:relative;padding:4px 0 10px 42px}
.g-steps li::before{content:counter(step);position:absolute;left:0;top:3px;width:28px;height:28px;border-radius:50%;background:#1f4d3f;color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.g-bullets{padding-left:22px}.g-bullets li{margin-bottom:6px}.g-bullets li::marker{color:#2f7d5b}
.g-checklist{list-style:none;padding:0;margin:10px 0}.g-checklist li{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fafbf7}
.g-checklist label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;cursor:pointer}.g-checklist input{width:18px;height:18px;margin-top:4px;accent-color:#1f4d3f;flex:none}
.g-checklist li:has(input:checked){background:#eef5e9}.g-checklist li:has(input:checked) span{color:var(--muted);text-decoration:line-through}
.g-progress{font-size:13px;color:#2f6a4f;font-weight:700;margin:4px 0 0}
.g-table-wrap{overflow-x:auto;margin:12px 0 18px;border:1px solid var(--line);border-radius:12px}
.g-table{border-collapse:collapse;width:100%;font-size:14px}.g-table th{background:#eef5e9;color:#1f4d3f;text-align:left;padding:10px 14px;font-size:13px}
.g-table td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;line-height:1.55}.g-table tr:hover td{background:#fbfcf9}
.g-table.compact td,.g-table.compact th{padding:7px 12px;font-size:13px}
.g-callout{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:14px 16px;margin:14px 0 18px;font-size:14.5px;line-height:1.6;border-left:4px solid}
.g-callout.tip{background:#eef5e9;border-color:#2f7d5b}.g-callout.note{background:#edf4f7;border-color:#2e7ab0}.g-callout.warn{background:#fcf5e6;border-color:#b45309}
.g-callout-icon{font-size:18px;line-height:1.3}
.g-figure{margin:18px auto 22px;text-align:center}.g-figure.medium{max-width:620px}.g-figure.small{max-width:460px}
.g-figure img,.g-phones img{width:100%;border-radius:12px;border:1px solid var(--line);box-shadow:0 8px 24px #18382b12;display:block}
.g-figure figcaption,.g-phones figcaption,.g-chart figcaption{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}
.g-zoom{border:0;padding:0;background:none;cursor:zoom-in;display:block;width:100%}
.g-phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:16px 0 22px}.g-phones figure{margin:0;text-align:center}
.g-chart{margin:18px 0 24px;text-align:center}.g-chart-svg svg{width:100%;height:auto;max-width:760px;display:block;margin:0 auto}
.g-chart .mark{cursor:default}.g-chart .mark:hover{opacity:.82}
.g-chart-table{text-align:left;max-width:760px;margin:0 auto}
#g-tip{position:fixed;z-index:50;pointer-events:none;background:#1f2f2a;color:#fff;font-size:12px;padding:7px 10px;border-radius:8px;max-width:260px;box-shadow:0 6px 18px #0003}
.g-faq details{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fafbf7}
.g-faq summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:14.5px}.g-faq details[open] summary{border-bottom:1px solid var(--line)}
.g-faq p{padding:0 16px;margin:12px 0}
.g-empty{background:#fff;border:1px dashed #cfdcc9;border-radius:12px;padding:20px;text-align:center;color:var(--muted)}
mark.g-hit{background:#fdf0c4;border-radius:3px;padding:0 1px}
#g-lightbox{border:0;border-radius:14px;padding:12px;max-width:min(96vw,1500px);background:#fff}#g-lightbox::backdrop{background:#0f1f1acc}
#g-lightbox img{max-width:100%;max-height:86vh;display:block;border-radius:8px}#g-lightbox [data-close]{position:absolute;top:10px;right:10px;background:#fff}
.g-foot{text-align:center;color:var(--muted);font-size:12px;padding:20px}
@media(max-width:980px){.g-layout{grid-template-columns:1fr;padding:16px}.g-toc{position:static;max-height:none}.g-toc ol{display:none}.g-hero{grid-template-columns:1fr;padding:22px}.g-top{flex-wrap:wrap;padding:10px 16px}.g-search{order:3;max-width:none;flex-basis:100%}.g-section{padding:22px 18px}}
@media(max-width:520px){.g-download{font-size:0;padding:10px 12px}.g-download::after{content:'Word';font-size:12px}.g-hero h1{font-size:28px}}
@media print{.g-top,.g-toc,.g-hero-actions,.g-table-toggle,#g-tip{display:none!important}.g-layout{display:block;padding:0}.g-section{break-inside:auto;border:0;padding:0 0 20px}.g-section.hidden{display:block}.g-chart-table[hidden]{display:block!important}}
/* The app styles give <main> a sidebar margin; the guide has its own layout. */
.guide-body main.g-main{margin:0;flex:none}
.guide-body a.btn{text-decoration:none;margin:0}
.g-download svg,.g-hero-actions svg{width:16px;height:16px;flex:none}
.g-hero .eyebrow{font-size:11px}
.g-jump{display:none}.g-jump select{width:100%;border:1px solid #dce4d6;border-radius:9px;padding:10px 12px;font-size:14px;background:#fff;margin-top:12px}
@media(max-width:980px){.g-jump{display:block}}