/* THE HELP PANEL (help/panel.js), in the shell's tokens (lib/shell/shell.css) so it follows its theme. */
.help { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--sh-panel); color: var(--sh-ink); font: 13px/1.5 var(--sh-sans); }
.help-bar { display: flex; gap: 4px; align-items: center; padding: 4px 6px; background: var(--sh-raised); border-bottom: 1px solid var(--sh-line); flex: none; }
.help-btn { font: inherit; color: var(--sh-ink); background: transparent; border: 1px solid var(--sh-line); border-radius: 4px; padding: 1px 8px; cursor: pointer; }
.help-btn:disabled { opacity: 0.35; cursor: default; }
.help-search { flex: 1; min-width: 80px; font: inherit; color: var(--sh-ink); background: var(--sh-bg); border: 1px solid var(--sh-line); border-radius: 4px; padding: 2px 6px; }
.help-body { display: flex; flex: 1; min-height: 0; }
.help-side { flex: none; width: 210px; overflow: auto; padding: 6px 0; border-right: 1px solid var(--sh-line); background: var(--sh-bg); }
.help-track { padding: 8px 10px 2px; color: var(--sh-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.help-entry, .help-subentry { display: block; padding: 2px 10px 2px 14px; color: var(--sh-ink); text-decoration: none; }
.help-entry:hover, .help-subentry:hover { background: var(--sh-accent-bg); }
.help-entry.on { background: var(--sh-strong); }
.help-subentry { padding-left: 24px; color: var(--sh-muted); font-size: 12px; }
.help-subentry.l3 { padding-left: 34px; }
.help-page { flex: 1; overflow: auto; padding: 8px 18px 40px; max-width: 820px; }
.help-page h1 { font-size: 20px; margin: 8px 0 12px; }
.help-page h2 { font-size: 16px; margin: 22px 0 8px; border-bottom: 1px solid var(--sh-line); padding-bottom: 3px; }
.help-page h3 { font-size: 14px; margin: 16px 0 6px; }
.help-page a { color: #9cc7ec; }
.help-page code { font: 12px var(--sh-mono); background: var(--sh-raised); padding: 0 3px; border-radius: 3px; }
.help-page pre { background: var(--sh-raised); padding: 8px 10px; border-radius: 4px; overflow: auto; }
.help-page pre code { background: none; padding: 0; }
.help-page blockquote { margin: 10px 0; padding: 4px 12px; border-left: 3px solid var(--sh-accent); background: var(--sh-accent-bg); }
.help-page table { border-collapse: collapse; margin: 8px 0; }
.help-page th, .help-page td { border: 1px solid var(--sh-line); padding: 3px 8px; text-align: left; vertical-align: top; }
.help-page th { background: var(--sh-raised); }
.help-page img { max-width: 100%; }
.help-widget { margin: 12px 0; }
.help-sdf { display: block; width: 100%; max-width: 360px; border-radius: 4px; cursor: crosshair; touch-action: none; }
.help-sdf-controls label { display: inline-flex; gap: 6px; align-items: center; margin-right: 14px; color: var(--sh-muted); }
.help-sdf-note { color: var(--sh-muted); font-size: 12px; }
.help-hit { margin: 8px 0; }
.help-hit p { margin: 2px 0; color: var(--sh-muted); }
.help-hit-track { color: var(--sh-faint); }
.help-error { color: var(--sh-warn); }
/* A PART OF THE WINDOW POINTED AT by a page's show: link (index.html) */
.help-flash { outline: 3px solid #ffd34d !important; outline-offset: -3px; transition: outline-color 0.3s; }