/* «Инструкция» (web/manual.js): contents, chapters, the live-screen highlight and callout, the cave procedure animation. */
:root { --manLine:#b57f00; --manExplored:#9aa7aa; --manRoute:#0b7a86; --manReel:#d4521c; --manStage:#6a4bd0; --manCookie:#2e7d32; --manHl:#d4521c }
@media (prefers-color-scheme: dark) { :root { --manLine:#e6b23a; --manExplored:#5f7275; --manRoute:#3cc3cf; --manReel:#ff7a45; --manStage:#a58cff; --manCookie:#5cc47b; --manHl:#ff9a6b } }
.manual .manproto { margin:0 0 8px }
.manual .manitem.planned b { font-weight:600 }
.manual .manitem > span:first-child { flex:1 1 260px; min-width:0 }
.manual .manitem small { display:block }
.manchips { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px }
.manchip { font-size:11px; padding:1px 7px; border-radius:999px; border:1px solid var(--line); color:var(--muted) }
.manchip.ed { border-color:var(--accent); color:var(--accent) }
.manual h3 { margin:12px 0 6px; font-size:16px }
.manual .manh { margin:16px 4px 8px }
.mansteps { list-style:none; padding:0; margin:0 }
.manstep h3 { margin-top:0 }
.manstep p { margin:6px 0 }
.manlinks { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center }
.manlinks .manterm { border:1px solid var(--line); border-radius:999px; padding:4px 10px; min-height:32px }
.manlist { margin:4px 0; padding-left:20px }
.manlist li { margin:4px 0 }
.manual .warnbox { border-color:var(--warn) }
/* the live screen: the control of the step, and the callout at the bottom (never covering the control: the page scrolls it to the centre) */
.manhl { outline:3px solid var(--manHl) !important; outline-offset:3px; border-radius:6px; animation:manpulse 1.4s ease-in-out 3 }
@keyframes manpulse { 50% { outline-offset:7px } }
@media (prefers-reduced-motion: reduce) { .manhl { animation:none } }
.mancallout { position:fixed; left:50%; bottom:12px; transform:translateX(-50%); z-index:50; width:min(560px, calc(100% - 24px)); background:var(--card); color:var(--ink);
  border:2px solid var(--manHl); border-radius:12px; padding:12px 14px; box-shadow:0 8px 28px rgba(0,0,0,.25); max-height:45vh; overflow:auto }
.mancallout h2 { font-size:17px; margin:2px 0 4px }
.mancallout p { margin:4px 0 }
.mancallout .warn { color:var(--warn) }
body:has(#manCallout) .view { padding-bottom:42vh }
/* the cave procedure animation */
.mananim h3 { margin-top:0 }
.mansheet { border:1px solid var(--line); border-radius:8px; background:var(--bg); overflow:hidden }
.mansheet svg { display:block; width:100%; height:auto }
.mansheet [data-man-a] { transition:opacity .25s }
.manline { fill:none; stroke:var(--manLine); stroke-width:3.5; stroke-linejoin:round; stroke-linecap:round }
.manexplored { fill:none; stroke:var(--manExplored); stroke-width:2; stroke-dasharray:6 5 }
.manroute { fill:none; stroke:var(--manRoute); stroke-width:9; opacity:.28; stroke-linejoin:round; stroke-linecap:round }
.manreel { stroke:var(--manReel); stroke-width:3; stroke-dasharray:3 3 }
.manarrows { fill:var(--ink) }
.mancookie { fill:var(--manCookie); stroke:var(--card); stroke-width:2 }
.manstage { fill:var(--manStage) }
.manstagecl { stroke:var(--manStage); stroke-width:2 }
.manentr { fill:none; stroke:var(--ink); stroke-width:2 }
.manink { fill:var(--ink) }
.mantarget { fill:none; stroke:var(--danger); stroke-width:2.5 }
.manturn { fill:var(--danger); font-size:22px; font-weight:700 }
.mandiver { fill:var(--manRoute); stroke:var(--card); stroke-width:2 }
.mansmall { fill:var(--muted); font-size:12px }
.mancap { min-height:5.2em; margin:8px 0 }
.mancap b { display:block; font-size:16px }
.mancap p { margin:2px 0 0 }
.mananim input[type=range] { margin:8px 0; accent-color:var(--manRoute); padding:0 }
.manphases { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0 12px; padding-left:24px; margin:4px 0 }
.manphases button.on { font-weight:700; text-decoration:underline }
.manlegend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--muted) }
.manlegend i { display:inline-block; width:24px; height:0; vertical-align:middle; margin-right:6px; border-top:3px solid var(--manLine) }
.manlegend i.l2 { border-top:2px dashed var(--manExplored) } .manlegend i.l3 { border-top:7px solid var(--manRoute); opacity:.4 } .manlegend i.l4 { border-top:3px dashed var(--manReel) }
.manual .manitem .badge { align-self:flex-start; flex:0 0 auto; white-space:nowrap }
/* the overview «Что делает программа»: tiles, tags, the difference table, the dive profile animation */
.manual .manlead { font-size:16px; line-height:1.5 }
.manovcard { display:block; border:2px solid var(--accent); margin:8px 0 }
.manovcard b { display:block; font-size:17px } .manovcard small { color:var(--muted) }
.manovsec { margin-top:8px }
.mantiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:10px }
.mantiles .card { margin:0 }
.mantile p { margin:6px 0 }
.mantilehead { display:flex; flex-wrap:wrap; align-items:center; gap:6px }
.manicon { font-size:20px; line-height:1 }
.mantag { font-size:11px; padding:1px 7px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap }
.mantag.tag-free { border-color:var(--ok); color:var(--ok) } .mantag.tag-pro { border-color:var(--accent); color:var(--accent) }
.mantag.tag-soon, .mantag.tag-beta { border-color:var(--warn); color:var(--warn) }
.manual .mango { align-self:center; padding:4px 6px }
.mantablebox { overflow-x:auto }
.mantable { border-collapse:collapse; width:100%; font-size:14px }
.mantable th, .mantable td { text-align:left; vertical-align:top; padding:6px 8px; border-bottom:1px solid var(--line) }
.mantable thead th { color:var(--muted); font-weight:600 }
.manscreen { white-space:nowrap }
.manscreenrow { margin:12px 0 }
.mansky { fill:var(--manRoute); opacity:.12 }
.mangrid { stroke:var(--line); stroke-width:1 }
.manprof { fill:none; stroke:var(--manRoute); stroke-width:3.5; stroke-linejoin:round }
.manceil { fill:none; stroke:var(--danger); stroke-width:2; stroke-dasharray:5 4 }
.manndl { stroke:var(--ok); stroke-width:1.5; stroke-dasharray:3 3 }
.manswitch { fill:var(--manStage) }
.mangauge { fill:none; stroke:var(--muted); stroke-width:1.5 }
.mangas.bottom { fill:var(--manRoute) } .mangas.deco { fill:var(--manStage) }
.manres { stroke:var(--danger); stroke-width:2 }
.manok { fill:var(--ok); font-size:13px; font-weight:700 }
.manlegend i.l5 { border-top:3px solid var(--manRoute) } .manlegend i.l6 { border-top:2px dashed var(--danger) }
.badge.acc { background:rgba(13,90,184,.12); color:var(--accent) }