/* In-app user guides (fragments from tools/build-manuals.mjs). Everything is scoped to .manual and uses the
   app's tokens, so a guide follows light and dark mode and never restyles the rest of the app. */
.manual-page { display: flex; flex-direction: column; gap: var(--s-3); }
.manual-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.manual-switch a { display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--s-3); border-radius: calc(var(--r-control) - 2px); color: var(--muted); font-weight: 600; font-size: var(--fs-14); text-decoration: none; }
.manual-switch a:hover { color: var(--ink); }
.manual-switch a[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 var(--bw) var(--line-strong); }
.manual-switch a:focus-visible { outline: var(--focus-w) solid var(--signal); outline-offset: 1px; }

.manual { color: var(--ink); line-height: var(--lh-body); font-size: var(--fs-16); }
.manual *, .manual *::before, .manual *::after { box-sizing: border-box; }
.manual h1, .manual h2, .manual h3 { font-family: var(--font-display); color: var(--ink); line-height: var(--lh-tight); }
.manual h1.chapter { font-size: var(--fs-36); margin: 1.4em 0 .6em; padding-bottom: .25em; border-bottom: 3px solid var(--signal); scroll-margin-top: var(--s-6); }
.manual h2 { font-size: var(--fs-22); margin: 1.5em 0 .5em; scroll-margin-top: var(--s-6); }
.manual h1 .num, .manual h2 .num { color: var(--signal-text); margin-right: .25em; }
.manual .mk { position: absolute; font-size: 0; color: transparent; }
.manual p { margin: .55em 0; }
.manual a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.manual ol, .manual ul { padding-left: 1.6em; margin: .5em 0; }
.manual li { margin: .25em 0; }
.manual ol > li::marker { font-weight: 700; }
.manual strong { font-weight: 700; }
.manual figure { margin: 1.1em 0; text-align: center; }
.manual figure img { max-width: 100%; height: auto; max-height: 640px; width: auto; border: var(--bw) solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-float); }
.manual img[data-mw="68"] { max-width: 68%; }
.manual img[data-mw="100"] { max-width: 100%; }
.manual figcaption { font-size: var(--fs-14); color: var(--muted); margin-top: .45em; }
.manual code { font-family: var(--font-mono); font-size: .88em; background: var(--paper-sunk); border: var(--bw) solid var(--line); border-radius: 4px; padding: .05em .35em; }
.manual .tw { overflow-x: auto; margin: .9em 0; }
.manual table { border-collapse: collapse; width: 100%; font-size: var(--fs-14); }
.manual th { background: var(--inverse-bg); color: var(--inverse-text); text-align: left; padding: .5em .65em; font-weight: 600; }
.manual td { border-bottom: var(--bw) solid var(--line); padding: .45em .65em; vertical-align: top; }
.manual tr:nth-child(even) td { background: var(--paper-sunk); }
.manual .callout { border-left: 5px solid var(--line-strong); background: var(--paper-sunk); border-radius: var(--r-control); padding: .6em .95em; margin: 1em 0; }
.manual .callout .ctitle { font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-12); color: var(--muted); margin-bottom: .1em; }
.manual .callout p { margin: .3em 0; }
.manual .callout.tip { border-color: var(--mastery); background: color-mix(in srgb, var(--mastery) 10%, transparent); }
.manual .callout.tip .ctitle { color: var(--mastery); }
.manual .callout.tip .ctitle::before { content: "💡 "; }
.manual .callout.note .ctitle::before { content: "ℹ️ "; }
.manual .callout.box { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 12%, transparent); }
.manual .callout.box .ctitle { color: var(--signal-text); }

.manual .hero { background: var(--inverse-bg); color: var(--inverse-text); padding: var(--s-5) var(--s-5) var(--s-5); border-bottom: 5px solid var(--signal); border-radius: var(--r-card) var(--r-card) 0 0; }
.manual .hero .kicker { color: var(--signal); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-size: var(--fs-12); }
.manual .hero h1 { color: var(--inverse-text); font-size: var(--fs-48); margin: .15em 0 .2em; border: 0; padding: 0; }
.manual .hero p { margin: 0; color: var(--inverse-muted); max-width: 760px; }
.manual .wrap { display: flex; gap: var(--s-5); padding: var(--s-5) 0 var(--s-7); align-items: flex-start; }
.manual nav.toc { position: sticky; top: calc(var(--s-6) * 2); flex: 0 0 280px; max-height: calc(100dvh - var(--s-6) * 3); overflow: auto; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-card); padding: var(--s-3) var(--s-3) var(--s-4); font-size: var(--fs-14); }
.manual nav.toc summary { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-22); cursor: pointer; list-style: none; }
.manual nav.toc summary::-webkit-details-marker { display: none; }
.manual nav.toc summary { display: flex; align-items: center; justify-content: space-between; }
.manual nav.toc summary::after { content: "▾"; font-size: var(--fs-18); color: var(--muted); transition: transform var(--t-fast) var(--ease); }
.manual nav.toc details[open] > summary::after { transform: rotate(180deg); }
.manual nav.toc ul { list-style: none; padding: 0; margin: .3em 0; }
.manual nav.toc li { margin: 0; }
.manual nav.toc a { display: block; text-decoration: none; color: var(--ink); padding: 2px 6px; border-radius: 5px; }
.manual nav.toc a:hover, .manual nav.toc a:focus-visible { background: var(--paper-sunk); }
.manual nav.toc .l1 > a { font-weight: 700; margin-top: .4em; }
.manual nav.toc .l2 > a { padding-left: 1.9em; color: var(--muted); }
.manual nav.toc .n { color: var(--signal-text); margin-right: .35em; font-weight: 700; }
.manual nav.toc .pg, .manual nav.toc .dots { display: none; }
.manual .m-main { flex: 1; min-width: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-card); padding: var(--s-2) var(--s-6) var(--s-6); }
.manual .m-main section:first-child h1 { margin-top: .6em; }
.manual .top { display: inline-block; margin-top: 1em; font-size: var(--fs-14); text-decoration: none; color: var(--muted); }
@media (max-width: 900px) {
  .manual .wrap { display: block; padding: var(--s-3) 0 var(--s-6); }
  .manual nav.toc { position: static; max-height: none; margin-bottom: var(--s-3); }
  .manual .m-main { padding: var(--s-1) var(--s-4) var(--s-5); }
  .manual .hero h1 { font-size: var(--fs-36); }
  .manual img[data-mw="68"] { max-width: 100%; }
}
@media print {
  .manual-bar, .manual nav.toc { display: none; }
  .manual .wrap { display: block; }
  .manual .m-main { border: 0; padding: 0; }
  .manual .hero { border-radius: 0; }
}