/* ───────────────────────────────────────────────────────────────
   helpgenai runtime — editorial design system
   ───────────────────────────────────────────────────────────────
   The runtime ships its own CSS; we do NOT inherit from the host
   app's Bootstrap / Tailwind / etc. All help-runtime surfaces are
   wrapped in `.help-runtime` so the tokens stay scoped.

   Design reference: Stripe docs, Mintlify, Vercel docs.
   Source of truth: packages/helpgen-runtime-blazor/DESIGN.md.
   ─────────────────────────────────────────────────────────────── */

.help-runtime {
    /* ── color: neutrals ── */
    --hg-bg: #ffffff;
    --hg-surface: #ffffff;
    --hg-surface-subtle: #fafafa;
    --hg-border: #e5e7eb;
    --hg-border-strong: #d4d4d8;
    --hg-text: #18181b;
    --hg-text-strong: #09090b;
    --hg-text-muted: #71717a;
    --hg-text-subtle: #a1a1aa;

    /* ── color: accent ── */
    --hg-accent: #2563eb;
    --hg-accent-hover: #1d4ed8;
    --hg-accent-soft: #eff6ff;
    --hg-accent-on: #ffffff;

    /* ── color: semantic ── */
    --hg-red: #dc2626;
    --hg-red-soft: #fef2f2;
    --hg-amber: #d97706;
    --hg-amber-soft: #fffbeb;
    --hg-green: #059669;
    --hg-green-soft: #ecfdf5;
    --hg-blue: #0284c7;
    --hg-blue-soft: #f0f9ff;
    --hg-neutral-soft: #f4f4f5;

    /* ── typography ── */
    --hg-font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    --hg-font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono",
        monospace;

    /* ── spacing (4px base; only these values) ── */
    --hg-space-1: 4px;
    --hg-space-2: 8px;
    --hg-space-3: 12px;
    --hg-space-4: 16px;
    --hg-space-5: 20px;
    --hg-space-6: 24px;
    --hg-space-8: 32px;
    --hg-space-10: 40px;
    --hg-space-12: 48px;
    --hg-space-16: 64px;

    /* ── layout ── */
    --hg-reading-width: 720px;
    --hg-toc-width: 240px;
    --hg-radius: 6px;
    --hg-radius-sm: 4px;

    /* ── elevation (used sparingly — hover/active only) ── */
    --hg-shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* ── motion ── */
    --hg-transition: 150ms ease;

    font-family: var(--hg-font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--hg-text);
    background: var(--hg-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ───────── Page layout ─────────
   .help-page wraps a single rendered help page. .help-index wraps
   the help-map landing page. */

.help-runtime .help-page,
.help-runtime .help-index {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--hg-space-8) var(--hg-space-12);
}

@media (max-width: 768px) {
    .help-runtime .help-page,
    .help-runtime .help-index {
        padding: var(--hg-space-6) var(--hg-space-5);
    }
}

/* ───────── Breadcrumb ───────── */

.help-runtime .help-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hg-space-2);
    margin: 0 0 var(--hg-space-4) 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--hg-text-muted);
}

.help-runtime .help-breadcrumb li {
    display: flex;
    align-items: center;
}

.help-runtime .help-breadcrumb li + li::before {
    content: "/";
    margin-right: var(--hg-space-2);
    color: var(--hg-text-subtle);
}

.help-runtime .help-breadcrumb a {
    color: var(--hg-text-muted);
    text-decoration: none;
    transition: color var(--hg-transition);
}

.help-runtime .help-breadcrumb a:hover {
    color: var(--hg-text-strong);
}

.help-runtime .help-breadcrumb .active {
    color: var(--hg-text-strong);
    font-weight: 500;
}

/* ───────── Page header (title + meta + edit btn) ───────── */

.help-runtime .help-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hg-space-6);
    margin: 0 0 var(--hg-space-6) 0;
}

.help-runtime .help-title {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--hg-text-strong);
    letter-spacing: -0.01em;
    margin: 0 0 var(--hg-space-2) 0;
}

.help-runtime .help-meta {
    display: flex;
    align-items: center;
    gap: var(--hg-space-3);
    font-size: 13px;
    color: var(--hg-text-muted);
}

.help-runtime .help-meta-sep {
    color: var(--hg-text-subtle);
}

/* ───────── Tab pill row ───────── */

.help-runtime .help-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hg-space-1);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--hg-space-8) 0;
    border-bottom: 1px solid var(--hg-border);
}

.help-runtime .help-tabs a {
    display: inline-block;
    padding: var(--hg-space-2) var(--hg-space-3);
    margin-bottom: -1px;
    font-size: 13px;
    font-weight: 500;
    color: var(--hg-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--hg-transition), border-color var(--hg-transition);
}

.help-runtime .help-tabs a:hover {
    color: var(--hg-text-strong);
}

.help-runtime .help-tabs a.active {
    color: var(--hg-accent);
    border-bottom-color: var(--hg-accent);
}

/* ───────── Body grid: content + right TOC ───────── */

.help-runtime .help-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--hg-toc-width);
    gap: var(--hg-space-12);
    align-items: start;
}

@media (max-width: 1024px) {
    .help-runtime .help-body {
        grid-template-columns: 1fr;
    }
    .help-runtime .help-toc {
        display: none;
    }
}

.help-runtime .help-content {
    max-width: var(--hg-reading-width);
    min-width: 0;
}

.help-runtime .help-toc {
    position: sticky;
    top: var(--hg-space-8);
    padding-left: var(--hg-space-4);
    border-left: 1px solid var(--hg-border);
}

.help-runtime .help-toc-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hg-text-muted);
    margin: 0 0 var(--hg-space-3) 0;
}

.help-runtime .help-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-runtime .help-toc li + li {
    margin-top: var(--hg-space-2);
}

.help-runtime .help-toc a {
    display: block;
    font-size: 13px;
    color: var(--hg-text-muted);
    text-decoration: none;
    padding: var(--hg-space-1) 0;
    transition: color var(--hg-transition);
}

.help-runtime .help-toc a:hover,
.help-runtime .help-toc a.active {
    color: var(--hg-accent);
}

/* ───────── Lede paragraph (above first section) ───────── */

.help-runtime .help-lede {
    font-size: 17px;
    line-height: 1.55;
    color: var(--hg-text);
    margin: 0 0 var(--hg-space-8) 0;
}

/* ───────── Section panels ─────────
   Each `## H2 {#anchor}` in the markdown becomes one `.help-section`. */

.help-runtime .help-section {
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    padding: var(--hg-space-6);
    margin: 0 0 var(--hg-space-8) 0;
}

.help-runtime .help-section:last-child {
    margin-bottom: 0;
}

.help-runtime .help-section > h2,
.help-runtime .help-section > .help-section-title {
    font-size: 24px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--hg-text-strong);
    margin: 0 0 var(--hg-space-4) 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hg-space-3);
}

.help-runtime .help-section-title-text {
    display: inline-block;
}

.help-runtime .help-section h3,
.help-runtime .help-section .help-subsection-title {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--hg-text-strong);
    margin: var(--hg-space-6) 0 var(--hg-space-3) 0;
}

.help-runtime .help-section h3:first-child,
.help-runtime .help-section .help-subsection-title:first-child {
    margin-top: 0;
}

/* ───────── Prose ───────── */

.help-runtime .help-section p {
    margin: 0 0 var(--hg-space-4) 0;
}

.help-runtime .help-section p:last-child {
    margin-bottom: 0;
}

.help-runtime .help-section ul,
.help-runtime .help-section ol {
    margin: 0 0 var(--hg-space-4) 0;
    padding-left: var(--hg-space-6);
}

.help-runtime .help-section li {
    margin-bottom: var(--hg-space-2);
}

.help-runtime .help-section li:last-child {
    margin-bottom: 0;
}

.help-runtime .help-section strong {
    color: var(--hg-text-strong);
    font-weight: 600;
}

.help-runtime .help-section a {
    color: var(--hg-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--hg-transition);
}

.help-runtime .help-section a:hover {
    border-bottom-color: var(--hg-accent);
}

.help-runtime .help-section code {
    font-family: var(--hg-font-mono);
    font-size: 13px;
    background: var(--hg-surface-subtle);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-sm);
    padding: 1px 6px;
    color: var(--hg-text-strong);
}

.help-runtime .help-section pre {
    font-family: var(--hg-font-mono);
    font-size: 13px;
    background: var(--hg-surface-subtle);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    padding: var(--hg-space-4);
    overflow-x: auto;
    margin: 0 0 var(--hg-space-4) 0;
}

.help-runtime .help-section pre code {
    background: transparent;
    border: 0;
    padding: 0;
}

/* ───────── Screenshots (figures) ───────── */

.help-runtime .help-section figure,
.help-runtime .help-figure {
    margin: 0 0 var(--hg-space-4) 0;
}

.help-runtime .help-section figure img,
.help-runtime .help-figure img,
.help-runtime img.help-screenshot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: zoom-in;
    transition: border-color var(--hg-transition);
}

.help-runtime .help-section figure img:hover,
.help-runtime .help-figure img:hover,
.help-runtime img.help-screenshot:hover {
    border-color: var(--hg-border-strong);
}

.help-runtime .help-section figcaption,
.help-runtime .help-figure figcaption {
    font-size: 13px;
    color: var(--hg-text-muted);
    text-align: center;
    margin-top: var(--hg-space-2);
}

/* ───────── Back-to-top button ─────────
   Rendered by HelpPageView, made visible by pageHelp.installBackToTop
   once scrollY passes the threshold (toggles .visible). */

.help-runtime .help-back-to-top {
    position: fixed;
    right: var(--hg-space-6);
    bottom: var(--hg-space-6);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hg-surface);
    color: var(--hg-text-strong);
    border: 1px solid var(--hg-border);
    border-radius: 999px;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--hg-transition), transform var(--hg-transition),
        border-color var(--hg-transition), box-shadow var(--hg-transition);
    z-index: 100;
}

.help-runtime .help-back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.help-runtime .help-back-to-top:hover {
    border-color: var(--hg-border-strong);
    color: var(--hg-accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ───────── Lightbox (zoom-on-click for screenshots) ───────── */

.help-runtime .help-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(9, 9, 11, 0.78);
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hg-space-12);
    cursor: zoom-out;
}

.help-runtime .help-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--hg-radius);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ───────── Reference panels (icon-legend, cell-states) ─────────
   Both render as a table inside a .help-section panel. */

.help-runtime .help-ref-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--hg-space-6) 0;
    font-size: 14px;
}

.help-runtime .help-ref-table:last-child {
    margin-bottom: 0;
}

.help-runtime .help-ref-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--hg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--hg-space-2) var(--hg-space-3);
    border-bottom: 1px solid var(--hg-border);
}

.help-runtime .help-ref-table td {
    padding: var(--hg-space-3);
    border-bottom: 1px solid var(--hg-border);
    vertical-align: top;
}

.help-runtime .help-ref-table tr:last-child td {
    border-bottom: 0;
}

.help-runtime .help-ref-table tr:hover td {
    background: var(--hg-surface-subtle);
}

.help-runtime .help-ref-group-name,
.help-runtime .help-ref-group-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--hg-text-strong);
    margin: var(--hg-space-6) 0 var(--hg-space-3) 0;
}

.help-runtime .help-ref-group-name:first-child,
.help-runtime .help-ref-group-title:first-child {
    margin-top: 0;
}

.help-runtime .help-reference-panel {
    /* Panels render at the top level inside the .help-section wrapper. */
}

.help-runtime .help-reference-panel .text-muted {
    color: var(--hg-text-muted);
    font-size: 13px;
}

.help-runtime .help-reference-panel .small {
    font-size: 12px;
}

.help-runtime .help-reference-panel em {
    color: var(--hg-text);
    font-style: italic;
}

.help-runtime .help-ref-table .col-icon {
    width: 64px;
    text-align: center;
}

.help-runtime .help-ref-table .col-name {
    width: 140px;
}

.help-runtime .help-ref-table .col-icon i.bi {
    font-size: 18px;
}

.help-runtime .help-ref-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--hg-radius-sm);
    background: var(--hg-surface-subtle);
    border: 1px solid var(--hg-border);
    font-size: 14px;
}

.help-runtime .help-ref-icon-red { color: var(--hg-red); }
.help-runtime .help-ref-icon-amber { color: var(--hg-amber); }
.help-runtime .help-ref-icon-green { color: var(--hg-green); }
.help-runtime .help-ref-icon-blue { color: var(--hg-blue); }
.help-runtime .help-ref-icon-neutral { color: var(--hg-text-muted); }

.help-runtime .help-ref-name {
    font-weight: 500;
    color: var(--hg-text-strong);
    display: block;
    margin-bottom: 2px;
}

.help-runtime .help-ref-condition {
    font-size: 13px;
    color: var(--hg-text-muted);
}

.help-runtime .help-ref-tooltip {
    font-size: 13px;
    color: var(--hg-text);
    font-style: italic;
}

/* ───────── Badges (status, priority) ───────── */

.help-runtime .help-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--hg-radius-sm);
    background: var(--hg-neutral-soft);
    color: var(--hg-text-strong);
}

.help-runtime .help-badge-info { background: var(--hg-blue-soft); color: var(--hg-blue); }
.help-runtime .help-badge-warn { background: var(--hg-amber-soft); color: var(--hg-amber); }
.help-runtime .help-badge-success { background: var(--hg-green-soft); color: var(--hg-green); }
.help-runtime .help-badge-danger { background: var(--hg-red-soft); color: var(--hg-red); }

/* ───────── Section-title action buttons (Edit / Save / Cancel / Guidance) ─────────
   Live inside .help-section-title's flex row, so the title and the
   buttons share a baseline. Small, ghost-style, gain a soft fill
   on hover. The "primary" Save action gets the accent fill. */

.help-runtime .help-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 5px 10px;
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-sm);
    background: var(--hg-surface);
    color: var(--hg-text-muted);
    cursor: pointer;
    transition: all var(--hg-transition);
    text-decoration: none;
}

.help-runtime .help-action-btn:hover {
    border-color: var(--hg-border-strong);
    background: var(--hg-surface-subtle);
    color: var(--hg-text-strong);
}

.help-runtime .help-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.help-runtime .help-action-btn-success {
    background: var(--hg-accent);
    border-color: var(--hg-accent);
    color: var(--hg-accent-on);
}

.help-runtime .help-action-btn-success:hover {
    background: var(--hg-accent-hover);
    border-color: var(--hg-accent-hover);
    color: var(--hg-accent-on);
}

.help-runtime .help-edit-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.help-runtime .help-edit-button {
    margin-left: 4px;
}

.help-runtime .help-guidance-button {
    margin-left: 4px;
}

/* The textarea slot for the per-section editor. EasyMDE attaches to this
   and replaces it with its own CodeMirror chrome; the surrounding panel
   stays neutral so the editor reads as part of the section. */

.help-runtime .help-edit-form {
    margin-top: var(--hg-space-3);
}

.help-runtime .help-edit-textarea {
    width: 100%;
    min-height: 200px;
    font-family: var(--hg-font-mono);
    font-size: 13px;
    line-height: 1.5;
    padding: 12px;
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    color: var(--hg-text);
    background: var(--hg-bg);
}

.help-runtime .help-edit-textarea:focus {
    outline: none;
    border-color: var(--hg-accent);
    box-shadow: 0 0 0 3px var(--hg-accent-soft);
}

/* EasyMDE's container, once attached, lives next to the textarea. Give
   its toolbar+content an editorial frame so it doesn't read as plain
   browser chrome. */
.help-runtime .EasyMDEContainer .editor-toolbar {
    border: 1px solid var(--hg-border);
    border-bottom: 0;
    border-top-left-radius: var(--hg-radius);
    border-top-right-radius: var(--hg-radius);
    background: var(--hg-surface-subtle);
    padding: 6px 8px;
}

.help-runtime .EasyMDEContainer .CodeMirror {
    border: 1px solid var(--hg-border);
    border-top: 0;
    border-bottom-left-radius: var(--hg-radius);
    border-bottom-right-radius: var(--hg-radius);
    font-family: var(--hg-font-mono);
    font-size: 13px;
}

/* ───────── Buttons ───────── */

.help-runtime .help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hg-space-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 8px 16px;
    border-radius: var(--hg-radius);
    border: 1px solid var(--hg-border);
    background: var(--hg-surface);
    color: var(--hg-text);
    cursor: pointer;
    transition: background var(--hg-transition), border-color var(--hg-transition),
        color var(--hg-transition);
    text-decoration: none;
}

.help-runtime .help-btn:hover {
    border-color: var(--hg-border-strong);
    background: var(--hg-surface-subtle);
}

.help-runtime .help-btn-primary {
    background: var(--hg-accent);
    border-color: var(--hg-accent);
    color: var(--hg-accent-on);
}

.help-runtime .help-btn-primary:hover {
    background: var(--hg-accent-hover);
    border-color: var(--hg-accent-hover);
}

/* ───────── Help index — page cards ───────── */

.help-runtime .help-index-intro {
    font-size: 17px;
    color: var(--hg-text-muted);
    margin: 0 0 var(--hg-space-8) 0;
    max-width: var(--hg-reading-width);
}

.help-runtime .help-group {
    margin: 0 0 var(--hg-space-10) 0;
}

.help-runtime .help-group-name {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hg-text-muted);
    margin: 0 0 var(--hg-space-4) 0;
}

.help-runtime .help-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--hg-space-4);
}

.help-runtime .help-card {
    display: flex;
    align-items: flex-start;
    gap: var(--hg-space-4);
    padding: var(--hg-space-5);
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--hg-transition), box-shadow var(--hg-transition),
        transform var(--hg-transition);
}

.help-runtime .help-card:hover {
    border-color: var(--hg-border-strong);
    box-shadow: var(--hg-shadow-hover);
    transform: translateY(-1px);
}

.help-runtime .help-card-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--hg-radius-sm);
    background: var(--hg-accent-soft);
    color: var(--hg-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
}

.help-runtime .help-card-body {
    min-width: 0;
    flex: 1;
}

.help-runtime .help-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--hg-text-strong);
    margin: 0 0 var(--hg-space-1) 0;
}

.help-runtime .help-card-summary {
    font-size: 13px;
    line-height: 1.5;
    color: var(--hg-text-muted);
    margin: 0 0 var(--hg-space-2) 0;
}

.help-runtime .help-card-meta {
    display: flex;
    align-items: center;
    gap: var(--hg-space-2);
    font-size: 12px;
    color: var(--hg-text-subtle);
}

.help-runtime .help-card-meta-sep {
    color: var(--hg-text-subtle);
}

/* ───────── Empty state ───────── */

.help-runtime .help-empty {
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    padding: var(--hg-space-12);
    text-align: center;
    color: var(--hg-text-muted);
}

.help-runtime .help-empty-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--hg-text-strong);
    margin: 0 0 var(--hg-space-2) 0;
}

.help-runtime .help-empty code {
    font-family: var(--hg-font-mono);
    font-size: 13px;
    background: var(--hg-surface-subtle);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-sm);
    padding: 1px 6px;
    color: var(--hg-text-strong);
}

/* ───────────────────────────────────────────────────────────────
   Admin settings UI (Components/Admin/*)
   ─────────────────────────────────────────────────────────────── */

.help-runtime .help-admin-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--hg-space-8);
    align-items: start;
}

@media (max-width: 768px) {
    .help-runtime .help-admin-body {
        grid-template-columns: 1fr;
    }
}

.help-runtime .help-admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--hg-space-3) 0;
    border-right: 1px solid var(--hg-border);
    position: sticky;
    top: var(--hg-space-6);
}

@media (max-width: 768px) {
    .help-runtime .help-admin-nav {
        flex-direction: row;
        border-right: 0;
        border-bottom: 1px solid var(--hg-border);
        padding: var(--hg-space-3);
        overflow-x: auto;
    }
}

.help-runtime .help-admin-tab {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    border-radius: var(--hg-radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--hg-text-muted);
    cursor: pointer;
    transition: all var(--hg-transition);
}

.help-runtime .help-admin-tab:hover {
    background: var(--hg-surface-subtle);
    color: var(--hg-text-strong);
}

.help-runtime .help-admin-tab.active {
    background: var(--hg-accent-soft);
    color: var(--hg-accent);
    font-weight: 600;
}

.help-runtime .help-admin-detail {
    min-width: 0;
}

.help-runtime .help-admin-section h2 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--hg-text-strong);
    margin: 0 0 var(--hg-space-2) 0;
}

.help-runtime .help-admin-section h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--hg-text-strong);
    margin: var(--hg-space-6) 0 var(--hg-space-2) 0;
}

.help-runtime .help-admin-section h4 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hg-text-muted);
    margin: var(--hg-space-6) 0 var(--hg-space-3) 0;
}

.help-runtime .help-admin-section > p {
    margin: 0 0 var(--hg-space-6) 0;
}

.help-runtime .help-admin-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hg-space-3);
    margin: var(--hg-space-4) 0;
}

.help-runtime .help-admin-card {
    padding: var(--hg-space-5);
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
}

.help-runtime .help-admin-card h3 {
    margin: 0 0 var(--hg-space-2) 0;
}

.help-runtime .help-admin-card p {
    margin: 0 0 var(--hg-space-2) 0;
    font-size: 14px;
    line-height: 1.55;
}

.help-runtime .help-admin-card p:last-child {
    margin-bottom: 0;
}

.help-runtime .help-admin-note {
    padding: var(--hg-space-4);
    background: var(--hg-accent-soft);
    border: 1px solid #bfdbfe;
    border-radius: var(--hg-radius);
    color: var(--hg-text);
    font-size: 14px;
    line-height: 1.55;
    margin: var(--hg-space-4) 0;
}

.help-runtime .help-admin-note + .help-admin-note {
    margin-top: var(--hg-space-3);
}

/* ───── Pages tab ───── */

.help-runtime .help-admin-pages-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--hg-space-6);
    align-items: start;
}

@media (max-width: 768px) {
    .help-runtime .help-admin-pages-layout {
        grid-template-columns: 1fr;
    }
}

.help-runtime .help-admin-pages-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--hg-space-2);
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    max-height: 70vh;
    overflow-y: auto;
}

.help-runtime .help-admin-group-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hg-text-muted);
    padding: var(--hg-space-3) var(--hg-space-3) var(--hg-space-1);
}

.help-runtime .help-admin-group-name:first-child {
    padding-top: var(--hg-space-2);
}

.help-runtime .help-admin-page-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--hg-radius-sm);
    cursor: pointer;
    transition: background var(--hg-transition);
}

.help-runtime .help-admin-page-item:hover {
    background: var(--hg-surface-subtle);
}

.help-runtime .help-admin-page-item.active {
    background: var(--hg-accent-soft);
}

.help-runtime .help-admin-page-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--hg-text-strong);
    margin-bottom: 2px;
}

.help-runtime .help-admin-page-meta {
    display: flex;
    align-items: center;
    gap: var(--hg-space-2);
    font-size: 12px;
}

.help-runtime .help-admin-page-detail {
    min-width: 0;
}

.help-runtime .help-admin-page-detail h3 {
    margin-top: 0;
}

.help-runtime .help-admin-page-detail h4 {
    margin-top: 0;
}

/* ───── Form fields (used across all admin tabs) ───── */

.help-runtime .help-admin-field {
    margin-bottom: var(--hg-space-4);
}

.help-runtime .help-admin-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--hg-text);
    margin-bottom: 6px;
}

.help-runtime .help-admin-input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hg-text);
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    transition: border-color var(--hg-transition), box-shadow var(--hg-transition);
    -webkit-appearance: none;
    appearance: none;
}

.help-runtime select.help-admin-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2371717a'%3e%3cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 01.753 1.659l-4.796 5.48a1 1 0 01-1.506 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

.help-runtime .help-admin-input:focus {
    outline: 0;
    border-color: var(--hg-accent);
    box-shadow: 0 0 0 3px var(--hg-accent-soft);
}

.help-runtime .help-admin-textarea {
    font-family: var(--hg-font-mono);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

.help-runtime .help-admin-textarea-tall {
    min-height: 500px;
}

.help-runtime .help-admin-help-text {
    font-size: 12px;
    color: var(--hg-text-muted);
    margin-top: 4px;
    line-height: 1.5;
}

.help-runtime .help-admin-token-field {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--hg-space-3);
    align-items: center;
    margin-bottom: var(--hg-space-2);
}

.help-runtime .help-admin-token-field .help-admin-label {
    margin-bottom: 0;
    font-family: var(--hg-font-mono);
    font-size: 12px;
    color: var(--hg-text-muted);
}

.help-runtime .help-admin-divider {
    border: 0;
    border-top: 1px solid var(--hg-border);
    margin: var(--hg-space-8) 0;
}

.help-runtime .help-admin-actions {
    display: flex;
    align-items: center;
    gap: var(--hg-space-3);
    margin-top: var(--hg-space-6);
    padding-top: var(--hg-space-4);
    border-top: 1px solid var(--hg-border);
}

.help-runtime .help-admin-saved {
    font-size: 13px;
    color: var(--hg-green);
    font-weight: 500;
}

.help-runtime .help-admin-error {
    font-size: 13px;
    color: var(--hg-red);
}

/* ───── ListEditor ───── */

.help-runtime .help-admin-list-items {
    display: flex;
    flex-direction: column;
    gap: var(--hg-space-2);
    margin-bottom: var(--hg-space-2);
}

.help-runtime .help-admin-list-item {
    display: flex;
    gap: var(--hg-space-2);
    align-items: center;
}

.help-runtime .help-admin-list-item .help-admin-input {
    flex: 1;
}

.help-runtime .help-admin-add-btn {
    margin-top: var(--hg-space-2);
}

/* ───────────────────────────────────────────────────────────────
   Guidance editor modal (existing — restyled to editorial tokens)
   ─────────────────────────────────────────────────────────────── */

.helpgen-guidance-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(9, 9, 11, 0.55);
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 16px 16px;
    overflow-y: auto;
}

.helpgen-guidance-modal {
    background: var(--hg-surface, #fff);
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: min(720px, 100%);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
    font-family: var(--hg-font-sans, -apple-system, sans-serif);
    color: var(--hg-text, #18181b);
}

.helpgen-guidance-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--hg-border, #e5e7eb);
}

.helpgen-guidance-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 2px 0;
    color: var(--hg-text-strong, #09090b);
}

.helpgen-guidance-subtitle {
    font-size: 13px;
    color: var(--hg-text-muted, #71717a);
    margin: 0 0 12px 0;
}

.helpgen-guidance-close {
    background: transparent;
    border: 0;
    color: var(--hg-text-muted, #71717a);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 150ms ease;
}
.helpgen-guidance-close:hover { color: var(--hg-text-strong, #09090b); }

.helpgen-guidance-explain {
    padding: 14px 24px;
    background: var(--hg-surface-subtle, #fafafa);
    border-bottom: 1px solid var(--hg-border, #e5e7eb);
    font-size: 13px;
    color: var(--hg-text, #18181b);
}
.helpgen-guidance-explain ul {
    padding-left: 18px;
    margin: 0;
}
.helpgen-guidance-explain li {
    margin-bottom: 6px;
    line-height: 1.5;
}
.helpgen-guidance-scope-note {
    margin-top: 8px;
    font-size: 12px;
    color: var(--hg-text-muted, #71717a);
}

.helpgen-guidance-body {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.helpgen-guidance-textarea {
    font-family: var(--hg-font-mono, monospace);
    font-size: 13px;
    line-height: 1.5;
    min-height: 200px;
    width: 100%;
    border: 1px solid var(--hg-border, #e5e7eb);
    border-radius: 6px;
    padding: 12px;
    color: var(--hg-text, #18181b);
    background: var(--hg-bg, #fff);
}

.helpgen-guidance-textarea:focus {
    outline: none;
    border-color: var(--hg-accent, #2563eb);
    box-shadow: 0 0 0 3px var(--hg-accent-soft, #eff6ff);
}

.helpgen-guidance-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 24px 20px;
    border-top: 1px solid var(--hg-border, #e5e7eb);
}

.help-guidance-button {
    margin-left: 6px;
}

/* Build tab — live log + run controls. Spawn output streams into
   .help-admin-build-log line by line; stderr renders in a muted-red
   accent so warnings stand out from normal progress output. */
.help-runtime .help-admin-section-head {
    margin-bottom: var(--hg-space-6);
}

.help-runtime .help-admin-section-lede {
    color: var(--hg-text-muted);
    margin: var(--hg-space-2) 0 0 0;
    max-width: 60ch;
}

.help-runtime .help-admin-build-controls {
    display: flex;
    align-items: center;
    gap: var(--hg-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--hg-space-4);
}

.help-runtime .help-admin-build-last {
    font-size: 13px;
}

.help-runtime .help-admin-build-ok {
    color: #15803d;
    font-weight: 600;
}

.help-runtime .help-admin-build-fail {
    color: #b91c1c;
    font-weight: 600;
}

.help-runtime .help-admin-build-log {
    background: #0b1020;
    color: #d4d4d8;
    border-radius: 8px;
    padding: 16px 18px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    max-height: 520px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* Stderr tint deliberately subtle. The engine writes most progress
   output to stderr (Node convention for status/log messages), so
   making it look like errors would confuse on a successful build.
   Only the actual failure summary line uses the red status pill. */
.help-runtime .help-admin-build-log-err {
    color: #d4d4d8;
}


/* Pages tab — Add/Delete affordances. */
.help-runtime .help-admin-page-add {
    width: 100%;
    border: 1px dashed var(--hg-border);
    background: transparent;
    color: var(--hg-text-muted);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 12px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
}

.help-runtime .help-admin-page-add:hover {
    border-color: var(--hg-accent);
    color: var(--hg-accent);
    background: var(--hg-accent-soft);
}

.help-runtime .help-admin-delete-btn {
    color: #b91c1c;
    border-color: #fecaca;
}

.help-runtime .help-admin-delete-btn:hover {
    background: #fee2e2;
    border-color: #b91c1c;
}

.help-runtime .help-admin-delete-confirm {
    margin-top: var(--hg-space-6);
    padding: 16px 18px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}

.help-runtime .help-admin-delete-confirm h4 {
    margin: 0 0 8px 0;
    color: #991b1b;
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
}

.help-runtime .help-admin-delete-confirm p {
    color: var(--hg-text);
    margin: 0 0 12px 0;
}

.help-runtime .help-admin-delete-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--hg-text);
}

.help-runtime .help-admin-delete-confirm-btn {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

.help-runtime .help-admin-delete-confirm-btn:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
}


/* Inline include-in-builds toggle on the Pages editor. */
.help-runtime .help-admin-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--hg-text);
}

.help-runtime .help-admin-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}


/* Inline schema validation: red border + red error chip under the
   offending control. Cleared when the operator successfully saves. */
.help-runtime .help-admin-input-invalid {
    border-color: #dc2626 !important;
    background: #fef2f2;
}

.help-runtime .help-admin-field-error {
    color: #b91c1c;
    font-size: 12.5px;
    margin-top: 4px;
}


/* Curated styleguide editor: each named group is its own card, and
   colors get a swatch + hex text pair instead of a raw string. */
.help-runtime .help-admin-card {
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.help-runtime .help-admin-card h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--hg-text-strong);
    text-transform: none;
    letter-spacing: normal;
}

.help-runtime .help-admin-card > p.help-admin-help-text:first-of-type {
    margin: 0 0 12px 0;
}

.help-runtime .help-admin-color-field {
    margin-bottom: 10px;
}

.help-runtime .help-admin-color-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.help-runtime .help-admin-color-swatch {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: auto;
    min-height: 36px;
    padding: 0;
    border: 1px solid var(--hg-border);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
}

.help-runtime .help-admin-color-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.help-runtime .help-admin-color-swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
.help-runtime .help-admin-color-swatch::-moz-color-swatch { border: none; border-radius: 4px; }

.help-runtime .help-admin-color-text {
    flex: 1;
    font-family: var(--hg-font-mono);
    font-size: 13px;
}

.help-runtime .help-admin-disclosure {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.help-runtime .help-admin-disclosure:hover {
    color: var(--hg-accent);
}

.help-runtime .help-admin-token-field {
    margin-bottom: 10px;
}


/* Guidance modal — previous-versions disclosure. Lives inside the
   modal body, between the textarea and the footer's Save button. */
.help-runtime .helpgen-guidance-history,
.helpgen-guidance-history {
    margin-top: 16px;
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}

.helpgen-guidance-history-toggle {
    background: none;
    border: 0;
    padding: 4px 0;
    font: inherit;
    color: #475569;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.helpgen-guidance-history-toggle:hover {
    color: #2563eb;
}

.helpgen-guidance-history-help {
    color: #6b7280;
    font-size: 12.5px;
    margin: 6px 0 10px 0;
    line-height: 1.5;
}

.helpgen-guidance-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.helpgen-guidance-history-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
}

.helpgen-guidance-history-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.helpgen-guidance-history-ts {
    font-size: 12.5px;
    color: #475569;
    font-weight: 500;
}

.helpgen-guidance-history-restore {
    font-size: 12.5px;
    padding: 3px 10px;
}

.helpgen-guidance-history-body {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #18181b;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.55;
}



/* Content-style tab toolbar — Load default button + helper line. */
.help-runtime .help-admin-content-style-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.help-runtime .help-admin-content-style { min-height: 500px; }