/* Map builder — help page (standalone, layers on top of app.css tokens) */
/* overflow:visible overrides app.css's base body{overflow:hidden} (needed
   for the main app's fixed-panel layout, wrong here) so the page scrolls
   normally. */
html,body.helppage{height:auto;min-height:100vh;overflow:visible}
body.helppage{
  padding:32px 20px 80px;
  background:
    radial-gradient(1100px 560px at 12% -12%, rgba(45,127,249,.16), transparent 60%),
    radial-gradient(900px 520px at 108% 8%, rgba(125,180,255,.20), transparent 55%),
    var(--canvas);
}
.helpwrap{width:100%;max-width:980px;margin:0 auto}
.helpback{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--dim);text-decoration:none;margin-bottom:20px}
.helpback:hover{color:var(--ink)}
.helpbrand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;letter-spacing:-.01em;margin-bottom:18px}
.helpbrand img{width:26px;height:26px;border-radius:50%}
.helpwrap h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.helpintro{font-size:13.5px;color:var(--dim);line-height:1.5;margin-bottom:28px}

/* position:relative so .helpnav (absolute, below) anchors to this box, not
   some further-up ancestor. Not flex anymore — .helpcontent gets a fixed
   margin-left instead, since .helpnav is out of flow either way now. */
.helplayout{position:relative}

/* Two states, toggled by js/help.js based on scroll position (not CSS
   sticky — sticky is forced to detach and scroll away once it nears the
   bottom of its containing block, which happens while the sidebar is
   comparable in height to the last section or two of real content; that
   showed up as the sidebar flying off-screen while reading the last
   sections). Unpinned: scrolls normally as part of the page (absolute
   within .helplayout, so it moves with the header/title above it). Pinned:
   position:fixed at top:32px and stays there for the rest of the scroll,
   no matter how much content remains below. */
.helpnav{position:absolute;top:0;left:0;width:210px;max-height:calc(100vh - 64px);overflow-y:auto;display:flex;flex-direction:column}
.helpnav.is-pinned{position:fixed;top:32px}
.helpnav .grp-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:14px 10px 4px}
.helpnav .grp-label:first-child{padding-top:0}
.helpnav a{display:block;padding:6px 10px;border-radius:6px;font-size:12.5px;color:var(--dim);text-decoration:none;line-height:1.4}
.helpnav a:hover{background:var(--hover);color:var(--ink)}
.helpnav a.active{background:var(--accent-soft);color:var(--accent);font-weight:600}

.helpcontent{margin-left:250px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 32px;box-shadow:0 10px 28px rgba(28,44,60,.08)}
.helpsection{padding:28px 0;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.helpsection:last-child{border-bottom:none}
.helpsection h2{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.helpsection p{font-size:13.5px;color:var(--ink);line-height:1.65;margin-bottom:12px}
.helpsection p:last-child{margin-bottom:0}
.helpsection a{color:var(--accent);text-decoration:none}
.helpsection a:hover{text-decoration:underline}
.helpsection ul{margin:0 0 12px;padding-left:20px}
.helpsection li{font-size:13.5px;color:var(--ink);line-height:1.65;margin-bottom:6px}
.helpsection kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;background:var(--hover);font-family:inherit;font-size:12px}

.helptable{width:100%;border-collapse:collapse;background:var(--hover);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:12.5px;margin-bottom:12px}
.helptable th,.helptable td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line)}
.helptable th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:700}
.helptable tr:last-child td{border-bottom:none}

@media (max-width:820px){
  /* js/help.js also skips the pin logic below this width */
  .helpnav,.helpnav.is-pinned{position:static;width:100%;max-height:none;overflow-y:visible;flex-direction:row;flex-wrap:wrap;gap:2px 4px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .helpnav .grp-label{display:none}
  .helpcontent{margin-left:0;padding:8px 20px}
}