/**
* Styling for the per-content-type editors and everything around choosing between them:
* the editor hosts inside the "Editor" tab, the Markdown reference (panel and modal),
* the "New document" content type chooser, and how plain text renders when read.
*
* Rich text (TinyMCE) brings its own styling, so there's very little for it here.
*/


/* -------------------------------------------------------------------------------- */
/*                            Editor hosts                                          */
/* -------------------------------------------------------------------------------- */


/* One per content type, all inside #editor-container. Exactly one is visible at a time. */
.editor-host
{
    height: 100%;
}

/* The <form> wrapping #content-tinymce (see editor-tab.html) is a plain block element with no
   height of its own, which broke the percentage-height chain TinyMCE's height:"100%" config
   relies on (see timymce-setup.js) - .tox-tinymce was resolving 100% of the form's auto/
   content-based height instead of #editor-host-html's real, bounded one, collapsing the editor
   to toolbar-height with a zero-height iframe. This was masked before by a manual JS resize that
   forced a pixel height every render; removed now that the layout owns height (ROUND-6-NOTES.md). */
#editor-host-html form
{
    height: 100%;
}


/* Markdown: the editor, with the reference panel beside it. */
#editor-host-markdown
{
    display: flex;
    gap: 10px;
    align-items: stretch;
    min-height: 0;
}

#editor-host-markdown.hidden
{
    display: none;
}


/* The editor column: the raw-HTML notice (when shown) stacked above the editor itself. */
.markdown-editor__main
{
    flex-grow: 1;

    /* Without these a flex item refuses to shrink below its content's size, and the editor's
       own scrolling (horizontal here, and - since #editor-host-markdown is now a real bounded
       height, see ROUND-6-NOTES.md .fill - vertical too) never kicks in. Same reasoning as
       #markdown-editor-host below and .markdown-reference__panel*. */
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: 8px;
}


#markdown-editor-host
{
    flex-grow: 1;

    /* Lets the editor shrink to whatever height is left after the notice, instead of
       overflowing the tab. */
    min-height: 0;
}


/* Why this document opened in Markdown mode rather than WYSIWYG. */
.markdown-editor__notice
{
    flex-shrink: 0;

    display: flex;
    align-items: flex-start;
    gap: 8px;

    padding: 8px 12px;

    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    background-color: var(--warning-quiet);
    color: var(--text-body);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

    .markdown-editor__notice i
    {
        margin-top: 2px;
        color: var(--warning);
    }


/* Scribe's own buttons sitting in Toast UI's toolbar. Sized to match the buttons either side
   of them, but drawn with a Font Awesome icon rather than Toast UI's sprite. */
.markdown-editor__toolbar-button
{
    width: 32px;
    height: 32px;
    margin: 0 5px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);

    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
}

.markdown-editor__toolbar-button:hover:not(:disabled)
{
    background-color: var(--surface-hover);
    color: var(--accent);
}

.markdown-editor__toolbar-button.is-active
{
    background-color: var(--accent-quiet);
    color: var(--accent);
}

.markdown-editor__toolbar-button:disabled
{
    opacity: 0.35;
    cursor: default;
}




/* -------------------------------------------------------------------------------- */
/*                            Plain Markdown source                                 */
/* -------------------------------------------------------------------------------- */


/*
 * Toast UI styles the Markdown source pane as you type - headings get bigger, bold goes bold,
 * code gets a background. The toolbar's highlighter button turns that off, for reading and
 * editing the document as the plain characters it actually is.
 *
 * Everything below is scoped to `.toastui-editor-md-container .ProseMirror`, which is ONLY the
 * source pane - the live preview beside it is a sibling (`.toastui-editor-md-preview`) and is
 * deliberately left alone.
 */
.markdown-editor--plain-source .toastui-editor-md-container .ProseMirror
{
    font-family: var(--font-mono);
}

    /* The tokens Toast UI wraps around each piece of syntax. `!important` because these undo
       single-class library rules that would otherwise win inside the editor. */
    .markdown-editor--plain-source .toastui-editor-md-container .ProseMirror span[class*="toastui-editor-md-"]
    {
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: normal !important;
        font-style: normal !important;
        text-decoration: none !important;
        letter-spacing: normal !important;

        color: var(--text-body) !important;
        background-color: transparent !important;

        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* Whole-line backgrounds behind fenced code and custom blocks. */
    .markdown-editor--plain-source .toastui-editor-md-container .ProseMirror div[class*="toastui-editor-md-"]
    {
        background-color: transparent !important;
    }


/* Plain text: a textarea, and nothing more. */
#content-plaintext
{
    width: 100%;
    height: 100%;
    margin-top: 0;
    padding: 12px;
    resize: none;

    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);

    /* Tabs typed into a plain text document should look the way they'll be stored. */
    tab-size: 4;
}




/* -------------------------------------------------------------------------------- */
/*                            Plain text, when read                                 */
/* -------------------------------------------------------------------------------- */


/* The whole point of a plain text document: what was typed is what is shown. */
.plain-text-content
{
    margin: 0;

    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-body);

    white-space: pre-wrap;
    overflow-wrap: break-word;
    tab-size: 4;
}




/* -------------------------------------------------------------------------------- */
/*                            Markdown reference: panel                             */
/* -------------------------------------------------------------------------------- */


.markdown-reference__panel
{
    /* `width` is what sizes this, not `flex-basis` - browsers don't reliably animate a
       flex-basis that came from the `flex` shorthand, and collapsing should be visible. */
    flex: 0 0 auto;
    width: 250px;

    display: flex;
    flex-direction: column;
    /* Without this, the panel refuses to shrink below its content's height once
       #editor-container has a real bounded height (see ROUND-6-NOTES.md, .fill) - it would
       push that height open again instead of scrolling its own sections internally. */
    min-height: 0;

    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--surface-sunken);

    overflow: hidden;
    transition: width var(--duration-base) var(--ease-out);
}

.markdown-reference__panel.collapsed
{
    width: 42px;
}

    .markdown-reference__panel.collapsed .markdown-reference__panel-sections,
    .markdown-reference__panel.collapsed .markdown-reference__panel-full-button,
    .markdown-reference__panel.collapsed .markdown-reference__panel-toggle-label
    {
        display: none;
    }


.markdown-reference__panel-toggle
{
    flex-shrink: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    padding: 10px;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;

    background-color: var(--surface-raised);
    color: var(--text-muted);
    font-weight: var(--weight-semibold);
    text-align: left;
    cursor: pointer;
}

.markdown-reference__panel-toggle:hover
{
    background-color: var(--surface-hover);
    color: var(--accent);
}


.markdown-reference__panel-sections
{
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}


.markdown-reference__panel-full-button
{
    flex-shrink: 0;
    margin: 10px;
}


.markdown-reference__panel .markdown-reference__section
{
    margin-bottom: 14px;
}

.markdown-reference__panel .markdown-reference__section-title
{
    margin-bottom: 4px;

    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.markdown-reference__item
{
    margin-bottom: 4px;
}

.markdown-reference__syntax
{
    display: block;

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);

    white-space: pre-wrap;
}

.markdown-reference__description
{
    font-size: var(--text-xs);
    color: var(--text-muted);
}




/* -------------------------------------------------------------------------------- */
/*                            Markdown reference: modal                             */
/* -------------------------------------------------------------------------------- */


.markdown-reference__intro
{
    margin-top: 0;
    color: var(--text-muted);
}


#markdown-reference__modal-sections .markdown-reference__section
{
    margin-bottom: 25px;
}

.markdown-reference__section-title
{
    margin: 0 0 8px;
    color: var(--accent);
    font-size: var(--text-lg);
}


.markdown-reference__table
{
    width: 100%;
    border-collapse: collapse;
}

    .markdown-reference__table td
    {
        padding: 6px 8px;
        border-bottom: 1px solid var(--border-subtle);
        vertical-align: top;
    }


.markdown-reference__syntax-cell
{
    width: 45%;
}

    .markdown-reference__syntax-cell code
    {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--accent);

        white-space: pre-wrap;
    }


.markdown-reference__description-cell
{
    color: var(--text-muted);
}


.markdown-reference__note
{
    margin: 8px 0 0;
    padding: 8px 10px;

    border-radius: var(--radius-sm);
    background-color: var(--info-quiet);
    color: var(--text-muted);
    font-size: var(--text-sm);
}




/* -------------------------------------------------------------------------------- */
/*                            "New document" chooser                                */
/* -------------------------------------------------------------------------------- */


#new-document__dialog
{
    width: 620px;
}


.new-document__intro
{
    margin-top: 0;
    color: var(--text-muted);
}


.new-document__type-card
{
    display: flex;
    align-items: flex-start;
    gap: 15px;

    width: 100%;
    margin-bottom: 10px;
    padding: 15px;

    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--surface-raised);
    color: var(--text-body);

    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.new-document__type-card:hover
{
    border-color: var(--accent);
    background-color: var(--accent-quiet);
}

.new-document__type-card:focus-visible
{
    outline: none;
    box-shadow: var(--focus-ring);
}


.new-document__type-icon
{
    flex-shrink: 0;

    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--accent-quiet);
    color: var(--accent);
    font-size: var(--text-lg);
}


.new-document__type-text
{
    display: block;
}

.new-document__type-name
{
    display: block;
    margin-bottom: 3px;

    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
}

.new-document__type-description
{
    display: block;

    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}




/* -------------------------------------------------------------------------------- */
/*                            Mobile                                                */
/* -------------------------------------------------------------------------------- */


/* Not enough width for the editor AND a reference column - drop the panel and leave the
   toolbar's reference button (and the full modal) as the way in. */
@media (max-width: 800px)
{
    .markdown-reference__panel
    {
        display: none;
    }
}




/* -------------------------------------------------------------------------------- */
/*                            Diff, for non-HTML documents                          */
/* -------------------------------------------------------------------------------- */


/* A Markdown or plain text document is diffed as source (see `setContentViewActiveTab()`),
   so the "Diff" tab has to show that source's own line breaks and spacing. */
.source-diff
{
    font-family: var(--font-mono);
    font-size: var(--text-sm);

    white-space: pre-wrap;
    overflow-wrap: break-word;
    tab-size: 4;
}