/* User Manual and docs hub. Loaded after app.css. */
.m-manual { background: #0d9488; }

/* Three-column doc layout when a page has an "On this page" list. */
.docs-layout.has-toc { grid-template-columns: 250px minmax(0, 1fr) 200px; }
.toc { position: sticky; top: 80px; align-self: start; display: grid; gap: .1rem; font-size: .82rem; border-left: 1px solid var(--line); padding-left: 1rem; max-height: calc(100vh - 100px); overflow-y: auto; }
.toc .side-label { margin: 0 0 .4rem; }
.toc a { color: var(--muted); padding: .25rem 0; line-height: 1.35; }
.toc a:hover, .toc a.active { color: var(--accent-text); }
.toc a.active { font-weight: 600; }

/* Manual sidebar tree. */
.manual-chapter { margin-top: .35rem; }
.manual-chapter > summary { list-style: none; cursor: pointer; display: flex; align-items: center; padding: .35rem .6rem; border-radius: 7px; font-weight: 600; font-size: .86rem; }
.manual-chapter > summary::-webkit-details-marker { display: none; }
.manual-chapter > summary::before { content: "›"; color: var(--muted); margin-right: .45rem; transition: transform .15s; display: inline-block; }
.manual-chapter[open] > summary::before { transform: rotate(90deg); }
.manual-chapter > summary span { margin-left: auto; font: 500 .7rem "JetBrains Mono", monospace; color: var(--muted); }
.manual-chapter > summary:hover { background: var(--bg-soft); }
.manual-chapter .side-cat { padding-left: 1.6rem; font-size: .84rem; }
.manual-chapter[hidden], .side-cat[hidden] { display: none; }

/* Long-form pages. */
.doc-meta { margin: -.25rem 0 1.5rem; }
.doc-longform .prose { max-width: 52rem; }
.prose h2 { font-size: 1.3rem; margin: 2.25rem 0 .75rem; padding-top: .25rem; }
.prose h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.prose .table-wrap { margin: .75rem 0 1.25rem; }
.prose table.params td { font-size: .88rem; }
.field-table td:first-child { white-space: nowrap; }

.manual-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); margin: 0 0 1.5rem; font-size: .88rem; }
.manual-meta > div { display: grid; gap: .1rem; }
.manual-meta span:first-child { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.menu-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .84em; font-weight: 600; padding: .1rem .5rem; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.menu-path .sep { color: var(--muted); font-weight: 400; }

.manual-steps { counter-reset: step; list-style: none; padding: 0; margin: .75rem 0 1.25rem; display: grid; gap: .55rem; }
.manual-steps li { counter-increment: step; position: relative; padding: .1rem 0 .1rem 2.4rem; }
.manual-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: .8rem; }

.callout { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; padding: .85rem 1rem; border-radius: 10px; margin: 1rem 0 1.25rem; border: 1px solid; font-size: .92rem; }
.callout > strong { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; padding-top: .15rem; }
.callout > div { min-width: 0; }
.callout-note { border-color: color-mix(in srgb, var(--get) 30%, var(--line)); background: color-mix(in srgb, var(--get) 7%, transparent); }
.callout-note > strong { color: var(--get); }
.callout-tip { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); }
.callout-tip > strong { color: var(--accent-text); }
.callout-warning { border-color: color-mix(in srgb, var(--put) 40%, var(--line)); background: color-mix(in srgb, var(--put) 9%, transparent); }
.callout-warning > strong { color: color-mix(in srgb, var(--put) 80%, var(--text)); }

.status-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .5rem 0 .9rem; }
.status-flow .arrow { color: var(--muted); }
.state { font-size: .82rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.state-start { color: var(--get); border-color: color-mix(in srgb, var(--get) 35%, var(--line)); }
.state-ok { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
.state-end { color: var(--muted); }
.state-bad { color: var(--delete); border-color: color-mix(in srgb, var(--delete) 35%, var(--line)); }

/* Docs hub. */
.docs-search { display: flex; align-items: center; gap: .65rem; width: 100%; max-width: 640px; padding: .85rem 1rem; margin: .5rem 0 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--muted); font: inherit; cursor: pointer; box-shadow: var(--shadow); text-align: left; }
.docs-search span { flex: 1; }
.docs-search kbd { border: 1px solid var(--line); border-radius: 5px; padding: 0 .35rem; font-size: .72rem; }
.docs-search:hover { border-color: var(--line-strong); }
.docs-h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.role-card { display: grid; gap: .3rem; }
.role-link { color: var(--accent-text); font-weight: 500; margin-top: .2rem; }
.chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.chapter { display: flex; flex-direction: column; gap: .5rem; }
.chapter-head { display: flex; gap: .85rem; align-items: center; }
.chapter-head h3 { margin: 0; font-size: 1.05rem; }
.chapter-no { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #34d399, #0f766e); color: #fff; font-weight: 700; font-size: .9rem; }
.chapter p { margin: 0; }
.chapter-pages { list-style: none; margin: .25rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .3rem; font-size: .88rem; }
.chapter-pages a { color: var(--muted); }
.chapter-pages a:hover { color: var(--accent-text); }
.chapter-pages a::before { content: "→ "; color: var(--line-strong); }

@media (max-width: 1180px) { .docs-layout.has-toc { grid-template-columns: 240px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 860px) { .role-grid, .chapter-grid { grid-template-columns: 1fr; } .docs-layout.has-toc { grid-template-columns: 1fr; } .field-table td:first-child { white-space: normal; } }

/* Story page H1 keeps the card look. */
.story-detail .story-title { font-size: 1.6rem; margin: 0 0 .15rem; letter-spacing: -.02em; }

/* Footer social icons. */
.social-links { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .35rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.social-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
.social-btn:hover { color: var(--text); background: var(--bg-soft); }
@media (max-width: 560px) { .footer-bottom-links { flex-wrap: wrap; } .social-links { border: 0; padding: 0; } }