/* Article editor typography mirrors app.store_v6/blog.php.
 * Scoped to add/edit article content; does not alter saved HTML or toolbar styling. */
[data-article-form-mode] .fr-element.fr-view {
    color: #242424;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-size: 20px;
    line-height: 1.72;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
}

[data-article-form-mode] .fr-element.fr-view > :first-child { margin-top: 0 !important; }
[data-article-form-mode] .fr-element.fr-view > :last-child { margin-bottom: 0 !important; }

[data-article-form-mode] .fr-element.fr-view p,
[data-article-form-mode] .fr-element.fr-view li {
    color: #242424 !important;
    font-family: inherit;
    font-size: 20px !important;
    line-height: 1.72 !important;
    white-space: normal !important;
}

[data-article-form-mode] .fr-element.fr-view p {
    margin: 0 0 1.35em !important;
}

[data-article-form-mode] .fr-element.fr-view h1,
[data-article-form-mode] .fr-element.fr-view h2,
[data-article-form-mode] .fr-element.fr-view h3,
[data-article-form-mode] .fr-element.fr-view h4,
[data-article-form-mode] .fr-element.fr-view h5,
[data-article-form-mode] .fr-element.fr-view h6 {
    width: auto !important;
    height: auto !important;
    margin: 1.7em 0 .55em !important;
    padding: 0 !important;
    color: #242424 !important;
    font-family: inherit;
    font-weight: 720 !important;
    letter-spacing: -.025em;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
}

[data-article-form-mode] .fr-element.fr-view h1 { font-size: 36px !important; }
[data-article-form-mode] .fr-element.fr-view h2 { font-size: 32px !important; }
[data-article-form-mode] .fr-element.fr-view h3 { font-size: 26px !important; }
[data-article-form-mode] .fr-element.fr-view h4,
[data-article-form-mode] .fr-element.fr-view h5,
[data-article-form-mode] .fr-element.fr-view h6 { font-size: 22px !important; }

[data-article-form-mode] .fr-element.fr-view ul,
[data-article-form-mode] .fr-element.fr-view ol {
    margin: 0 0 1.4em !important;
    padding-left: 1.45em !important;
}

[data-article-form-mode] .fr-element.fr-view li {
    margin: .35em 0 !important;
    padding-left: .15em !important;
}

[data-article-form-mode] .fr-element.fr-view blockquote {
    margin: 1.7em 0 !important;
    padding: .05em 0 .05em 1.05em !important;
    border-left: 3px solid #242424;
    color: #4a4a4a;
    font-style: italic;
}

[data-article-form-mode] .fr-element.fr-view a {
    color: #1a73e8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

[data-article-form-mode] .fr-element.fr-view pre {
    max-width: 100%;
    margin: 1.8em 0;
    padding: 18px;
    overflow: auto;
    border-radius: 6px;
    background: #f5f5f5;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre;
}

[data-article-form-mode] .fr-element.fr-view code {
    padding: .12em .32em;
    border-radius: 4px;
    background: #f5f5f5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .86em;
}

[data-article-form-mode] .fr-element.fr-view pre code {
    padding: 0;
    background: transparent;
}

[data-article-form-mode] .fr-element.fr-view th,
[data-article-form-mode] .fr-element.fr-view td {
    min-width: 120px;
    padding: 10px 12px !important;
    border: 1px solid #e5e5e5;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-align: left;
}

@media (max-width: 767.98px) {
    [data-article-form-mode] .fr-element.fr-view,
    [data-article-form-mode] .fr-element.fr-view p,
    [data-article-form-mode] .fr-element.fr-view li {
        font-size: 18px !important;
        line-height: 1.68 !important;
    }

    [data-article-form-mode] .fr-element.fr-view h1 { font-size: 31px !important; }
    [data-article-form-mode] .fr-element.fr-view h2 { font-size: 28px !important; }
    [data-article-form-mode] .fr-element.fr-view h3 { font-size: 24px !important; }
    [data-article-form-mode] .fr-element.fr-view h4,
    [data-article-form-mode] .fr-element.fr-view h5,
    [data-article-form-mode] .fr-element.fr-view h6 { font-size: 21px !important; }

}
