/* Shared body typography for editing, preview and published writing. */
.writing_body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #d8d8d8;
    overflow-wrap: anywhere;
    text-align: left;
}

.writing_body p { margin: 0 0 .75em; white-space: pre-wrap; }
.writing_body p:last-child { margin-bottom: 0; }
.writing_body ul, .writing_body ol { margin: .6em 0; padding-inline-start: 1.65em; }
.writing_body li { padding-inline-start: .2em; }
.writing_body li > p { margin-bottom: .25em; }
.writing_body blockquote { margin: .75em 0; padding: .15em 0 .15em 1em; border-left: 2px solid #777; color: #bdbdbd; }
.writing_body a { color: #d6becb; text-decoration: underline; text-underline-offset: .15em; }
.writing_body a:hover { color: #f1e8ee; }
.writing_reference { display: inline; white-space: normal; }
.writing_reference--missing { color: #999; }
.writing_reference--editing { border-radius: 3px; background: rgba(255, 255, 255, .035); padding-inline: 2px; }
.writing_reference--editing.ProseMirror-selectednode { outline: 1px solid #c5a3b6; }

.writing_editor {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: rgba(48, 48, 48, .8);
    color: #ccc;
    font-family: Georgia, "Times New Roman", serif;
    text-align: left;
}

.writing_editor:focus-within { border-color: rgba(255, 255, 255, .28); }
.writing_editor [hidden] { display: none !important; }
.writing_editor button, .writing_editor input, .writing_editor select { font: inherit; }
.writing_editor button {
    min-height: 32px;
    padding: .25rem .55rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #ccc;
    cursor: pointer;
    line-height: 1.2;
}
.writing_editor button:hover:not(:disabled) { background: rgba(94, 94, 94, .8); border-color: rgba(255, 255, 255, .12); color: #fff; }
.writing_editor button:focus-visible, .writing_editor input:focus-visible, .writing_editor select:focus-visible { outline: 2px solid #c4a3b5; outline-offset: 2px; }
.writing_editor button:disabled { opacity: .4; cursor: default; }
.writing_toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: .35rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: .85rem;
}
.writing_toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    border-color: rgba(255, 255, 255, .08);
    background: rgba(48, 48, 48, .8);
}
.writing_toolbar_icon { display: block; flex-shrink: 0; }
.writing_toolbar button[aria-pressed="true"] { color: #f0d8e5; border-color: #90657e; background: rgba(255, 255, 255, .06); }
.writing_toolbar_separator { width: 1px; height: 18px; margin-inline: .15rem; background: rgba(255, 255, 255, .12); }
.writing_toolbar .writing_preview_toggle { margin-left: auto; }
.writing_surface .tiptap { min-height: 110px; padding: .8rem 1rem; outline: none; }
.writing_surface .tiptap p.is-editor-empty:first-child::before { color: #858585; content: attr(data-placeholder); float: left; height: 0; pointer-events: none; }
.writing_surface .tiptap:has(> p:only-child > br.ProseMirror-trailingBreak:only-child)::before { content: attr(data-placeholder); color: #858585; float: left; pointer-events: none; height: 0; }
.writing_surface .tiptap > :first-child { margin-top: 0; }
.writing_surface .tiptap > :last-child { margin-bottom: 0; }
.writing_preview { min-height: 110px; padding: .8rem 1rem; }
.writing_preview > .writing_body { font-size: inherit; }
.writing_editor_footer { display: flex; align-items: baseline; gap: .5rem; padding: .35rem .65rem; font-size: .75rem; color: #929292; }
.writing_editor_message { flex: 1; margin: 0; }
.writing_editor_message--error, .writing_editor_count--over { color: #edaaaa; }
.writing_editor_count { flex-shrink: 0; margin-left: auto; font-variant-numeric: tabular-nums; }
.writing_panel { padding: .65rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.writing_panel label { display: block; font-size: .85rem; color: #bbb; margin-bottom: .4rem; }
.writing_panel_row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.writing_panel input, .writing_panel select {
    box-sizing: border-box;
    min-height: 36px;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 4px;
    padding: .4rem .5rem;
    background: #242424;
    color: #ddd;
}
.writing_panel input { flex: 1 1 160px; }
.writing_panel select { flex: 0 0 78px; }
.writing_search_status { color: #999; font-size: .8rem; margin: .4rem 0; }
.writing_reference_results { max-height: 240px; overflow-y: auto; }
.writing_reference_results button { display: block; width: 100%; text-align: left; padding: .45rem .6rem; }
.writing_reference_results button[aria-selected="true"] { background: rgba(94, 94, 94, .8); border-color: rgba(255, 255, 255, .12); }
.list_editor_note_summary { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; margin-top: .45rem; }
.list_editor_note_summary p { flex-basis: 100%; color: #aaa; font-size: .9rem; line-height: 1.5; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.list_editor_note_unsaved { font-size: .75rem; color: #bba2b0; }
.list_editor_note_area { margin-top: .6rem; }
.list_editor_note_area .tiptap { min-height: 155px; }
.list_editor_save_capacity { color: #d4bf98; font-size: .85rem; line-height: 1.4; margin: .35rem 0 0; max-width: 40em; }
.list_editor_create .writing_editor { margin-bottom: .5rem; }
.list_editor_page .list_editor_meta_bar,
.list_editor_page .list_editor_save_bar,
.list_editor_page .list_editor_rank_item {
    background: rgba(48, 48, 48, .8);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 6px;
    box-shadow: none;
}
.list_editor_page .list_editor_rank_item:hover { background: rgba(94, 94, 94, .8); border-color: rgba(255, 255, 255, .12); }
.list_editor_page .list_editor_meta_group_head { border-color: rgba(255, 255, 255, .1); }
.list_editor_page .list_editor_meta_group_title,
.list_editor_page .list_editor_label,
.list_editor_page .list_editor_meta_group_note,
.list_editor_page .list_editor_kicker { color: #aaa; }
.list_editor_page .list_editor_meta_group_title { text-transform: none; letter-spacing: .02em; }
.list_editor_page .list_editor_save_actions { flex-wrap: wrap; }
.list_editor_page .list_editor_rank_head h2,
.list_editor_page .list_editor_hint,
.list_editor_page .list_editor_save_hint { color: #bbb; }

@media (max-width: 600px) {
    .writing_toolbar { gap: 3px; font-size: .8rem; }
    .writing_toolbar button { min-height: 36px; padding: .25rem .45rem; }
    .writing_toolbar_separator { margin-inline: .05rem; }
    .writing_surface .tiptap, .writing_preview { padding: .7rem; }
    .writing_panel_row { gap: .3rem; }
    .writing_editor_footer { align-items: flex-start; }
}