/* ============================================================
   HELP BODY — scrollable cheatsheet content inside the popover
   ============================================================ */

.help-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-faint) transparent;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-1) 8px 0 0;
    margin-right: -16px;
}

/* ===== Help section card with accent left border ===== */

.help-section {
    --accent: var(--color-primary);

    border-inline-start: 3px solid var(--accent);
    padding: var(--space-2) var(--space-4) var(--space-3);
    background: --tint(var(--accent), 0.04);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: background var(--transition);
}

.help-section:hover {
    background: --tint(var(--accent), 0.08);
}

/* Section title row */

.help-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--space-2);
    line-height: 1.3;
}

/* Colored dot / bullet */

.help-section-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot, var(--accent));
    flex-shrink: 0;
    box-shadow: 0 0 6px --tint(var(--dot, var(--accent)), 0.45);
}

/* Small icon next to section title (optional) */

.help-title-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* ===== Ordered steps list (Getting Started) ===== */

.help-steps {
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
}

.help-steps li {
    counter-increment: step;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    text-wrap-mode: nowrap;
}

.help-steps li::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

/* ===== Grid for key/value rows (actions, shortcuts) ===== */

.help-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
}

.help-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-xs);
    line-height: 1.6;
    padding: 2px 0;
    min-height: 24px;
}

.help-row dt {
    flex: 0 0 auto;
    min-width: 72px;
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: var(--color-text-muted);
}

.help-row dd {
    margin: 0;
    color: var(--color-text);
    flex: 1;
}

/* ===== Inline elements ===== */

/* Keyboard key style */

.help-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    min-width: 20px;
    height: 18px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    background: --tint(var(--color-text), 0.07);
    border: 1px solid --tint(var(--color-text), 0.15);
    border-radius: 4px;
    color: var(--color-text);
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 0 --tint(var(--color-text), 0.12);
}

/* Inline mark / badge for action names */

.help-mark {
    --mk: var(--accent);

    display: inline;
    padding: 1px 6px 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 999px;
    background: --tint(var(--mk), 0.14);
    color: var(--mk);
    white-space: nowrap;
    border: none;
}

/* Arrow between action states */

.help-arrow {
    color: var(--color-text-faint);
    font-family: var(--font-mono);
    font-size: 11px;
    margin: 0 2px;
}

/* Plain text paragraph */

.help-text {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.help-text + .help-text {
    margin-block-start: var(--space-1);
}

/* Inline icon within text */

.help-inline-icon {
    display: inline;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin: -2px 1px 0;
    color: currentColor;
}

/* ============================================================
   SECTION ACCENT COLORS — per-section data attributes
   Replace former inline `style="--accent: …"` on .help-section
   ============================================================ */

[data-section="getting-started"] { --accent: var(--color-primary); }
[data-section="canvas"]          { --accent: oklch(70% 0.22 240); }
[data-section="transform"]       { --accent: oklch(72% 0.2 40); }
[data-section="crop"]            { --accent: oklch(70% 0.22 160); }
[data-section="source"]          { --accent: oklch(68% 0.18 150); }
[data-section="output"]          { --accent: oklch(70% 0.2 320); }
[data-section="settings"]        { --accent: oklch(52% 0.2 280); }
[data-section="download"]        { --accent: oklch(72% 0.18 195); }
[data-section="theme"]           { --accent: var(--color-text-muted); }

/* ============================================================
   HUE-SHIFTED MARK BACKGROUNDS — replace former inline styles
   Each row uses a different hue at ~15 % opacity for variety
   ============================================================ */

/* Transform — rows 2-4 (⇔, ⇕, 🎨) */
[data-section="transform"] .help-row:nth-child(2) .help-mark { background: oklch(72% 0.2 145 / 0.15); }
[data-section="transform"] .help-row:nth-child(3) .help-mark { background: oklch(72% 0.2 250 / 0.15); }
[data-section="transform"] .help-row:nth-child(4) .help-mark { background: oklch(72% 0.2 320 / 0.15); }

/* Output — rows 2-6 (React, React Native, Minified, Encoded, Base64) */
[data-section="output"] .help-row:nth-child(2) .help-mark { background: oklch(70% 0.2 145 / 0.15); }
[data-section="output"] .help-row:nth-child(3) .help-mark { background: oklch(70% 0.2 250 / 0.15); }
[data-section="output"] .help-row:nth-child(4) .help-mark { background: oklch(52% 0.18 285 / 0.15); }
[data-section="output"] .help-row:nth-child(5) .help-mark { background: oklch(72% 0.18 320 / 0.15); }
[data-section="output"] .help-row:nth-child(6) .help-mark { background: oklch(72% 0.2 195 / 0.15); }

/* Download — rows 1-4 (SVG, PNG, JPG, WebP) */
[data-section="download"] .help-row:nth-child(1) .help-mark { background: oklch(72% 0.18 145 / 0.15); }
[data-section="download"] .help-row:nth-child(2) .help-mark { background: oklch(72% 0.18 250 / 0.15); }
[data-section="download"] .help-row:nth-child(3) .help-mark { background: oklch(52% 0.18 285 / 0.15); }
[data-section="download"] .help-row:nth-child(4) .help-mark { background: oklch(72% 0.18 320 / 0.15); }