/* ── Article editor ──────────────────────────────────────────── */

.editor-page
{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--space-16) var(--space-8) var(--space-16);
    display: flex;
    flex-direction: column;
}
.editor-header__actions
{
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.editor-error
{
    background-color: var(--accent-bg);
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    padding: var(--space-2) var(--space-6);
    flex-shrink: 0;
}
/* shown while a picture is on its way to the server. deliberately quiet: it is
   information, not a problem, so it uses the muted ink rather than the accent */
.editor-upload-status
{
    background-color: var(--bg-alt);
    border-bottom: 1px solid var(--rule);
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    padding: var(--space-2) var(--space-6);
    flex-shrink: 0;
}
/* meta fields */

.editor-meta
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--rule);
    background-color: var(--bg-alt);
    flex-shrink: 0;
}
.editor-meta__field
{
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.editor-meta__field:first-child
{
    grid-column: 1 / -1;
}
.editor-meta__field label
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.editor-meta__field .required { color: var(--accent); }
.editor-meta__field .optional { color: var(--ink-4); font-weight: 400; text-transform: none; letter-spacing: 0; }
.editor-meta__field input,
.editor-meta__field textarea
{
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background-color: var(--bg);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    outline: none;
    transition: border-color var(--transition);
    box-sizing: border-box;
}
.editor-meta__field input:focus,
.editor-meta__field textarea:focus
{
    border-color: var(--ink-2);
}
.editor-meta__field textarea { min-height: 60px; }
/* title input is bigger */

#title
{
    font-family: var(--font-body);
    font-size: var(--size-lg);
    padding: var(--space-2) var(--space-3);
}
/* formatting toolbar */

.editor-toolbar
{
    display: flex;
    align-items: center;
    gap: 2px;
    padding: var(--space-2) var(--space-6);
    border-bottom: 1px solid var(--rule);
    background-color: var(--bg);
    flex-shrink: 0;
    flex-wrap: wrap;
    position: sticky;
    top: 3.25rem; /* account for sticky site-header */
    z-index: 50;
}
.toolbar-btn
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 500;
    color: var(--ink-3);
    background: none;
    border: 1px solid transparent;
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1.4;
    min-width: 2rem;
    text-align: center;
}
@media (hover: hover)
{
    .toolbar-btn:hover
    {
        color: var(--ink);
        border-color: var(--rule);
        background-color: var(--bg-alt);
    }
}
.toolbar-btn.is-active
{
    color: var(--accent);
    border-color: var(--accent);
    background-color: var(--accent-bg);
}
.toolbar-btn svg
{
    display: block;
    margin: 2px auto;
    pointer-events: none; /* clicks land on the button, not the icon */
}
.toolbar-sep
{
    width: 1px;
    height: 1.2rem;
    background-color: var(--rule);
    margin: 0 var(--space-1);
}
.editor-toolbar.is-disabled
{
    opacity: 0.4;
    pointer-events: none;
}
/* editor body: scrollable content area */

.editor-body
{
    position: relative;
}
.editor-pane,
.editor-preview
{
    padding: var(--space-8) var(--space-8);
    min-height: 100%;
}
.editor-content
{
    max-width: 860px;
    margin: 0 auto;
    min-height: 400px;
    font-family: var(--font-body);
    font-size: var(--size-base);
    line-height: var(--lh-loose);
    color: var(--ink);
    outline: none;
    border-left: 2px solid var(--rule);
    padding-left: var(--space-6);
    padding-bottom: var(--space-16);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.editor-content:focus
{
    border-left-color: var(--accent);
}
.editor-content:empty::before
{
    content: "Start writing your article here...";
    color: var(--ink-4);
    font-style: italic;
    pointer-events: none;
}
/* inherit article body styles for editor content */

.editor-content h1 { font-size: var(--size-2xl); font-weight: 500; margin: var(--space-12) 0 var(--space-4); }
.editor-content h2 { font-size: var(--size-xl); font-weight: 500; margin: var(--space-8) 0 var(--space-3); }
.editor-content h3 { font-size: var(--size-lg); font-weight: 500; margin: var(--space-6) 0 var(--space-2); }
.editor-content h4 { font-size: var(--size-md); font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.editor-content h5 { font-size: var(--size-base); font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.editor-content h6 { font-size: var(--size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: var(--space-4) 0 var(--space-2); font-family: var(--font-ui); }
/* override browser default 1em margin on <p> so formatBlock-generated paragraphs
   look the same as plain text typed directly into the editor */
.editor-content p { margin: 0; }
.editor-content blockquote
{
    border-left: 3px solid var(--rule-heavy);
    margin: var(--space-6) 0;
    padding: var(--space-3) var(--space-6);
    background-color: var(--bg-alt);
    font-style: italic;
    color: var(--ink-2);
}
.editor-content pre
{
    background-color: var(--code-bg);
    border: 1px solid var(--rule);
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--size-sm);
    overflow-x: auto;
    margin: var(--space-4) 0;
}
.editor-content code { font-family: var(--font-mono); font-size: 0.875em; }
.editor-content table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.editor-content th, .editor-content td { border: 1px solid var(--rule); padding: var(--space-2) var(--space-3); font-family: var(--font-ui); font-size: var(--size-sm); }
.editor-content th { font-weight: 600; background-color: var(--bg-alt); }
.editor-content img { max-width: 100%; height: auto; border: 1px solid var(--rule); margin: var(--space-2) auto; display: block; }
.editor-content figure { margin: var(--space-4) 0; text-align: center; }
.editor-content figcaption { font-family: var(--font-ui); font-size: var(--size-xs); color: var(--ink-3); margin-top: var(--space-1); display: block; }
.editor-content hr { border: none; border-top: 1px solid var(--rule); margin: var(--space-8) 0; }
.editor-content a { color: var(--accent); }
/* the indent lives on the li in em units so it scales with the li's own font:
   a heading-sized item gets a heading-sized gap, keeping its big marker clear
   of the editor's left border line at any width */
.editor-content ul, .editor-content ol { padding-left: 0; margin-left: 0; margin-bottom: var(--space-4); }
.editor-content li { margin-left: 2em; margin-bottom: var(--space-2); }

/* a heading turned into a list item wraps as <li><h2>..</h2></li>. the marker
   sizes to the li, so size the li to the heading and let the heading inherit.
   descendant :has(), not child: aligning can wrap the heading in a div. the
   heading renders inline so an inside-positioned marker (used for centered or
   right-aligned items) shares its line instead of sitting above it. */
.editor-content li:has(h1) { font-size: var(--size-2xl); }
.editor-content li:has(h2) { font-size: var(--size-xl); }
.editor-content li:has(h3) { font-size: var(--size-lg); }
.editor-content li:has(h4) { font-size: var(--size-md); }
.editor-content li h1,
.editor-content li h2,
.editor-content li h3,
.editor-content li h4 { display: inline; margin: 0; font-size: 1em; }
/* image alignment classes */
.editor-content .img-center { display: block; margin-left: auto; margin-right: auto; }
.editor-content .img-left { float: left; margin-right: var(--space-4); margin-bottom: var(--space-2); }
.editor-content .img-right { float: right; margin-left: var(--space-4); margin-bottom: var(--space-2); }
/* image resize handle */
.editor-content img.is-selected
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* preview pane */

.editor-preview .article-body { max-width: 860px; margin: 0 auto; word-wrap: break-word; overflow-wrap: break-word; }
/* ── Insert dialogs (replaces browser prompt()) ──────────────── */

.editor-dialog-overlay
{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.editor-dialog
{
    background: var(--bg);
    border: 1px solid var(--rule-heavy);
    padding: var(--space-6);
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.editor-dialog h3
{
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--rule);
}
.editor-dialog__field
{
    margin-bottom: var(--space-3);
}
.editor-dialog__field label
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: block;
    margin-bottom: var(--space-1);
}
.editor-dialog__field input,
.editor-dialog__field select
{
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--bg);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    outline: none;
}
.editor-dialog__field input:focus,
.editor-dialog__field select:focus
{
    border-color: var(--ink-2);
}
/* tabs for image source */
.editor-dialog__tabs
{
    display: flex;
    gap: 0;
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
}
.editor-dialog__tab
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: all var(--transition);
}
.editor-dialog__tab.is-active
{
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.editor-dialog__tab-panel { display: none; }
.editor-dialog__tab-panel.is-active { display: block; }
.editor-dialog__file-drop
{
    border: 2px dashed var(--rule);
    padding: var(--space-4) var(--space-6);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}
@media (hover: hover)
{
    .editor-dialog__file-drop:hover
    {
        border-color: var(--accent);
        background-color: var(--accent-bg);
    }
}
.editor-dialog__file-drop-text
{
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    color: var(--ink-3);
    display: block;
    margin-bottom: var(--space-1);
}
.editor-dialog__file-drop-hint
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    color: var(--ink-4);
}
.editor-dialog__file-name
{
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    color: var(--accent);
    margin-top: var(--space-2);
    display: none;
}
.editor-dialog__actions
{
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
}




/* ── Narrow screens ──────────────────────────────────────────── */

@media (max-width: 700px)
{
    .editor-page { padding: var(--space-8) var(--space-3); }

    .editor-meta

    {
        grid-template-columns: 1fr;
        padding: var(--space-3) var(--space-4);
    }

    /* the site header is not sticky on phones, so the toolbar pins to the
       viewport top instead of hanging 3.25rem below it */
    .editor-toolbar { top: 0; }

    .editor-pane,
    .editor-preview { padding: var(--space-4) var(--space-3); }

    .editor-content { padding-left: var(--space-3); }
}

@media (max-width: 1000px)
{
    /* same overflow guard as the article page: wide tables scroll in place */
    .editor-content table { display: block; overflow-x: auto; }
}