/* Shared typography for saved HTML and the editor preview. Keep these rules
   scoped and non-important so explicit saved styles always take precedence. */
.editor-content,
.note-editor .note-editable,
.note-editor.note-frame .note-editing-area .note-editable {
    color: #556664;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: break-word;
}

.editor-content p,
.note-editor .note-editable p {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0 0 16px;
}

.editor-content h1, .editor-content h2, .editor-content h3,
.editor-content h4, .editor-content h5, .editor-content h6,
.note-editor .note-editable h1, .note-editor .note-editable h2,
.note-editor .note-editable h3, .note-editor .note-editable h4,
.note-editor .note-editable h5, .note-editor .note-editable h6 {
    color: inherit;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 8px;
}

.editor-content h1, .note-editor .note-editable h1 { font-size: 40px; }
.editor-content h2, .note-editor .note-editable h2 { font-size: 32px; }
.editor-content h3, .note-editor .note-editable h3 { font-size: 28px; }
.editor-content h4, .note-editor .note-editable h4 { font-size: 24px; }
.editor-content h5, .note-editor .note-editable h5 { font-size: 20px; }
.editor-content h6, .note-editor .note-editable h6 { font-size: 16px; }

.editor-content b, .editor-content strong,
.note-editor .note-editable b, .note-editor .note-editable strong {
    font-weight: 700;
}

.editor-content ul, .editor-content ol,
.note-editor .note-editable ul, .note-editor .note-editable ol {
    margin: 0 0 16px;
    padding-left: 32px;
    list-style-position: outside;
}

.editor-content ul, .note-editor .note-editable ul { list-style-type: disc; }
.editor-content ol, .note-editor .note-editable ol { list-style-type: decimal; }
.editor-content ul ul, .note-editor .note-editable ul ul { list-style-type: circle; }

.editor-content blockquote, .note-editor .note-editable blockquote {
    border-left: 4px solid #ddd;
    margin: 0 0 16px;
    padding: 10px 20px;
    font-size: inherit;
}

.editor-content pre, .note-editor .note-editable pre {
    background: #f5f5f5;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
    padding: 10px;
    white-space: pre-wrap;
}

.editor-content img, .note-editor .note-editable img {
    max-width: 100%;
    height: auto;
}

.editor-content table, .note-editor .note-editable table {
    border-collapse: collapse;
    margin: 0 0 16px;
    width: 100%;
}

.editor-content td, .editor-content th,
.note-editor .note-editable td, .note-editor .note-editable th {
    border: 1px solid #ddd;
    padding: 8px;
}

.editor-content hr, .note-editor .note-editable hr {
    border: 0;
    border-top: 1px solid #ddd;
    height: 0;
    margin: 16px 0;
    opacity: 1;
}