.docs-page > h2 { /* Page title for Docs */
    border-bottom: none; /* Override global if specific design */
    padding-bottom: 0;
    margin-bottom: 16px;
}
.docs-editor-container { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    background-color: var(--surface); 
    border-radius: var(--md-sys-shape-corner-m); 
    box-shadow: var(--md-sys-elevation-level1); 
    overflow: hidden; /* Important for editor scroll */
    border: 1px solid var(--outline);
}
.docs-toolbar { 
    padding: 8px; 
    background-color: var(--surface-container-low); 
    border-bottom: 1px solid var(--outline); 
    display: flex; 
    flex-wrap: wrap; 
    gap: 4px; 
    align-items: center; 
}
/* docs-toolbar button styling handled by .button.icon-button and .button.compact from components.css */

#docsEditor { 
    flex-grow: 1; 
    padding: 16px 24px; /* More padding for readability */
    outline: none; 
    overflow-y: auto; 
    line-height: 1.7; 
    color: var(--on-surface); 
    background-color: var(--surface-bright); 
    caret-color: var(--primary); 
    font-size: 16px; /* Base font size */
    -webkit-user-modify: read-write-plaintext-only; /* iOS helper */
}
#docsEditor:focus-visible {
    box-shadow: inset 0 0 0 2px var(--primary); /* Inner focus ring */
}
#docsEditor:empty:before { 
    content: attr(data-placeholder); 
    color: var(--on-surface-variant); 
    pointer-events: none; 
    position: absolute; /* To not affect layout */
}
/* Basic styling for content within contenteditable */
#docsEditor p, #docsEditor div:not(.docs-toolbar) { /* Ensure div doesn't target toolbar accidentally */
    margin: 0 0 1em 0;
    min-height: 1em; /* Helps with empty paragraph clicking */
}
#docsEditor h1 { font-size: 2em; margin: 0.67em 0; font-weight: bold;}
#docsEditor h2 { font-size: 1.5em; margin: 0.83em 0; font-weight: bold;}
#docsEditor h3 { font-size: 1.17em; margin: 1em 0; font-weight: bold;}
#docsEditor ul, #docsEditor ol { 
    margin: 0 0 1em 2em; 
    padding-left: 20px; /* Consistent list indentation */
}
#docsEditor li { margin-bottom: 0.25em; }
#docsEditor b, #docsEditor strong { font-weight: bold; }
#docsEditor i, #docsEditor em { font-style: italic; }
#docsEditor u { text-decoration: underline; }