.guide-content {
    @apply max-w-3xl mx-auto py-6 text-base-content;
    line-height: 1.75;

    h1 { @apply text-3xl font-bold mb-2; }
    h1 + p { @apply text-base-content/60 mb-8; }

    h2 { @apply text-2xl font-bold mt-12 mb-4; }
    h2 + p { @apply text-base-content/70 mb-6; }

    h3 {
        @apply text-lg font-semibold mt-8 mb-3;
    }
    h4 { @apply text-base font-semibold mt-6 mb-2; }

    p { @apply mb-4; }
    p.step-label > strong {
        @apply block text-base font-semibold mt-6 mb-1;
    }

    ul { @apply list-disc pl-6 mb-4 space-y-1; }
    ol { @apply list-decimal pl-6 mb-4 space-y-1; }

    a { @apply text-primary underline; }

    blockquote {
        @apply border-l-4 border-primary pl-4 my-4 italic text-base-content/70;
    }

    code {
        @apply bg-base-200 rounded px-1 py-0.5 text-sm font-mono;
    }

    pre {
        @apply bg-base-200 rounded p-4 mb-4 overflow-x-auto text-sm font-mono;
        code { @apply bg-transparent p-0; }
    }

    table {
        @apply w-full mb-4 text-sm border-collapse;
        th { @apply text-left font-semibold p-2 bg-base-200 border border-base-300; }
        td { @apply p-2 border border-base-300; }
        tr:nth-child(even) td { @apply bg-base-200/50; }
    }

    img {
        @apply rounded-lg border border-base-300 shadow-sm my-4 max-w-full;
    }

    hr { @apply my-8 border-base-300; }

    strong { @apply font-semibold; }
}

.guide-content.handbook-content {
    @apply w-full py-0;

    > :first-child, .lexxy-editor__content > :first-child { @apply mt-0; }
    h2 + p { @apply text-base-content mb-4; }
    th p, td p { @apply m-0; }
}

lexxy-editor, lexxy-toolbar {
    --lexxy-color-accent-dark: var(--color-primary);
    --lexxy-color-accent-medium: color-mix(in oklch, var(--color-primary) 80%, white);
    --lexxy-color-link: var(--color-primary);
    --lexxy-color-selected: color-mix(in oklch, var(--color-primary) 10%, white);
    --lexxy-color-selected-hover: color-mix(in oklch, var(--color-primary) 20%, white);
    --lexxy-color-selected-dark: var(--color-primary);
}

/* The handbook's toolbar sits outside the editor, so it needs the spacing Lexxy sets on the editor. */
lexxy-toolbar {
    --lexxy-toolbar-gap: 2px;
    --lexxy-toolbar-spacing: 0.5ch;
    --lexxy-toolbar-padding: 0;
    --lexxy-toolbar-border-size: 0;
}

lexxy-editor.handbook-content {
    --lexxy-editor-padding: 0;
    --lexxy-editor-rows: 12lh;
    border: 0;
}

/* Lexxy fills its own toolbar icons, but Tabler draws ours with strokes. */
lexxy-toolbar svg.icon-tabler {
    fill: none;
}