/* Markdown editor (/markdown-editor): what is its own (the formatting bar, the panes, the rendered preview, drag and
   drop and focus mode). Buttons, fields, the segmented control and colours come from the app kit (css/app-kit,
   docs/app-kit.md). Loaded only on this app's page (StylePaths). */

/* --- The app's own -------------------------------------------------------------------------------------------- */

/* On a phone the site's photo-app rule (seo-pages.css, body.filter-app-mode ... > .filter-landing-stage) sets
   align-items: start on every stage, which beats the kit's stretch: the panes would shrink to their own width. */
.mde-landing-app > .ak-stage > * {
    align-self: stretch;
}

/* The app's own colours: inline code and code blocks, and the syntax highlighting (mostly kit series colours). */
.mde-landing-app {
    --mde-code-bg: #f1f5f9;
    --mde-tok-k: var(--ak-series-4);
    --mde-tok-s: var(--ak-success);
    --mde-tok-c: var(--ak-muted);
    --mde-tok-n: var(--ak-warning);
    --mde-tok-a: var(--ak-series-1);
}

.mde-landing-app[data-theme="dark"] > .filter-landing-stage {
    --mde-code-bg: #1e293b;
    --mde-tok-k: var(--ak-series-4);
    --mde-tok-s: var(--ak-success);
    --mde-tok-c: var(--ak-muted);
    --mde-tok-n: var(--ak-warning);
    --mde-tok-a: var(--ak-series-1);
}

.mde-landing-app > .ak-stage {
    position: relative;
}

/* --- Formatting bar ---------------------------------------------------------------------------------------------- */

.mde-landing-app .mde-fmtbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius);
    background: var(--ak-panel);
}

.mde-landing-app .mde-fmtbar-gap {
    flex: 1 1 auto;
}

/* --- Panes: editor and preview side by side, or one of them ------------------------------------------------------- */

/* flex-shrink 0: on a phone the stage is short, and a shrunk grid would draw the stacked panes over each other. */
.mde-landing-app .mde-panes {
    display: grid;
    flex-shrink: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
    min-height: 26rem;
}

.mde-landing-app[data-mde-view="editor"] .mde-panes,
.mde-landing-app[data-mde-view="preview"] .mde-panes {
    grid-template-columns: minmax(0, 1fr);
}

.mde-landing-app[data-mde-view="editor"] .mde-pane--preview,
.mde-landing-app[data-mde-view="preview"] .mde-pane--editor {
    display: none;
}

.mde-landing-app .mde-pane {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    min-height: 0;
}

.mde-landing-app textarea.mde-input,
.mde-landing-app .mde-preview {
    flex: 1 1 auto;
    width: 100%;
    height: 32rem;
    min-height: 16rem;
    margin: 0;
    padding: 0.85rem 1rem;
    overflow: auto;
}

.mde-landing-app textarea.mde-input {
    font-size: 0.92rem;
    line-height: 1.6;
}

/* --- The rendered Markdown, in the frame of the editor ------------------------------------------------------------ */

.mde-landing-app .mde-preview {
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-sm);
    background: var(--ak-field);
    color: var(--ak-text);
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.mde-landing-app .mde-preview:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 1px;
}

.mde-landing-app .mde-preview > :first-child { margin-top: 0; }
.mde-landing-app .mde-preview > :last-child { margin-bottom: 0; }
.mde-landing-app .mde-preview h1,
.mde-landing-app .mde-preview h2,
.mde-landing-app .mde-preview h3,
.mde-landing-app .mde-preview h4,
.mde-landing-app .mde-preview h5,
.mde-landing-app .mde-preview h6 { margin: 1.2em 0 0.5em; color: var(--ak-text); line-height: 1.25; }
.mde-landing-app .mde-preview h1 {
    padding-bottom: 0.25em;
    border-bottom: 1px solid var(--ak-border);
    font-size: 1.8em;
}
.mde-landing-app .mde-preview h2 {
    padding-bottom: 0.2em;
    border-bottom: 1px solid var(--ak-border);
    font-size: 1.45em;
}
.mde-landing-app .mde-preview h3 { font-size: 1.2em; }
.mde-landing-app .mde-preview h4 { font-size: 1.05em; }
.mde-landing-app .mde-preview h5,
.mde-landing-app .mde-preview h6 { color: var(--ak-muted); font-size: 0.95em; }
.mde-landing-app .mde-preview p,
.mde-landing-app .mde-preview ul,
.mde-landing-app .mde-preview ol,
.mde-landing-app .mde-preview blockquote,
.mde-landing-app .mde-preview pre,
.mde-landing-app .mde-preview table { margin: 0 0 1em; }
.mde-landing-app .mde-preview ul,
.mde-landing-app .mde-preview ol { padding-inline-start: 1.6em; }
.mde-landing-app .mde-preview li + li { margin-top: 0.2em; }
.mde-landing-app .mde-preview ul.mde-tasks { padding-inline-start: 0.4em; list-style: none; }
.mde-landing-app .mde-preview li.mde-task > input {
    margin: 0 0.45em 0 0;
    vertical-align: middle;
    accent-color: var(--ak-accent);
}
.mde-landing-app .mde-preview a { color: var(--ak-accent); }
.mde-landing-app .mde-preview img { max-width: 100%; height: auto; }
.mde-landing-app .mde-preview hr { height: 0; margin: 1.4em 0; border: 0; border-top: 2px solid var(--ak-border); }
.mde-landing-app .mde-preview blockquote {
    padding: 0.2em 1em;
    border-inline-start: 4px solid var(--ak-accent);
    color: var(--ak-muted);
}
.mde-landing-app .mde-preview code {
    padding: 0.1em 0.35em;
    border-radius: 0.3em;
    background: var(--mde-code-bg);
    font-family: var(--ak-font-mono);
    font-size: 0.88em;
}
.mde-landing-app .mde-preview pre {
    padding: 0.8em 1em;
    overflow: auto;
    border-radius: 0.5em;
    background: var(--mde-code-bg);
    line-height: 1.45;
}
.mde-landing-app .mde-preview pre code { padding: 0; background: none; font-size: 0.86em; }
.mde-landing-app .mde-preview table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }
.mde-landing-app .mde-preview th,
.mde-landing-app .mde-preview td { padding: 0.35em 0.7em; border: 1px solid var(--ak-border); }
.mde-landing-app .mde-preview th { background: var(--ak-panel); font-weight: 600; }
.mde-landing-app .mde-preview .mde-al-left { text-align: left; }
.mde-landing-app .mde-preview .mde-al-center { text-align: center; }
.mde-landing-app .mde-preview .mde-al-right { text-align: right; }
.mde-landing-app .mde-preview del { color: var(--ak-muted); }
.mde-landing-app .mde-tok-k { color: var(--mde-tok-k); font-weight: 600; }
.mde-landing-app .mde-tok-s { color: var(--mde-tok-s); }
.mde-landing-app .mde-tok-c { color: var(--mde-tok-c); font-style: italic; }
.mde-landing-app .mde-tok-n { color: var(--mde-tok-n); }
.mde-landing-app .mde-tok-a { color: var(--mde-tok-a); }

/* --- Status bar: counts, "Saved", the last message ---------------------------------------------------------------- */

.mde-landing-app .mde-saved[data-state="error"] { color: var(--ak-danger); }
.mde-landing-app .mde-saved[data-state="pending"] { opacity: 0.6; }

.mde-landing-app .mde-focus-note,
.mde-landing-app .mde-drop {
    display: none;
    margin: 0;
}

/* --- Drag and drop a .md file ------------------------------------------------------------------------------------- */

.mde-landing-app.is-drop .mde-drop {
    position: absolute;
    inset: 0.5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px dashed var(--ak-accent);
    border-radius: var(--ak-radius-lg);
    background: color-mix(in srgb, var(--ak-bg) 85%, transparent);
    color: var(--ak-accent);
    font-size: var(--ak-fs-lg);
    font-weight: 600;
    pointer-events: none;
}

/* --- Focus mode: only the text stays, Esc leaves ------------------------------------------------------------------ */

body.mde-focus-lock {
    overflow: hidden;
}

.mde-landing-app.is-focus > .filter-landing-stage {
    position: fixed;
    inset: 0;
    z-index: 2000;
    padding: 2.5rem max(1rem, calc((100vw - 52rem) / 2)) 1rem;
    overflow: auto;
}

.mde-landing-app.is-focus > .filter-landing-controls,
.mde-landing-app.is-focus .mde-fmtbar,
.mde-landing-app.is-focus .mde-pane-title,
.mde-landing-app.is-focus .mde-pane--preview,
.mde-landing-app.is-focus .mde-saved,
.mde-landing-app.is-focus .mde-status {
    display: none;
}

.mde-landing-app.is-focus .mde-pane--editor {
    display: flex;
}

.mde-landing-app.is-focus .mde-panes {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
}

.mde-landing-app.is-focus textarea.mde-input {
    height: auto;
    min-height: 60vh;
    border-color: transparent;
    background: transparent;
    font-size: 1.05rem;
    line-height: 1.75;
    resize: none;
}

.mde-landing-app.is-focus .mde-statusbar {
    justify-content: center;
    opacity: 0.55;
}

.mde-landing-app.is-focus .mde-focus-note {
    display: block;
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    color: var(--ak-muted);
    font-size: 0.8rem;
}

/* --- Narrow stages: the panes stack ------------------------------------------------------------------------------- */

@container (max-width: 760px) {
    .mde-landing-app .mde-panes {
        grid-template-columns: minmax(0, 1fr);
    }

    .mde-landing-app textarea.mde-input,
    .mde-landing-app .mde-preview {
        height: 22rem;
    }
}

/* Phones: the buttons of the control panel fill their rows. */
@media (max-width: 600px) {
    .mde-landing-app > .filter-landing-controls .ak-btn-row > .ak-btn,
    .mde-landing-app > .filter-landing-controls .ak-seg-btn {
        flex: 1 1 auto;
    }
}