/*
 * Vishow Tools stylesheet: Public Markdown editor and resizable source/preview workspace.
 * Sections are intentionally kept unminified and human-readable for direct maintenance.
 */

.markdown-page>.shell {
    width: min(1320px, calc(100% - 40px));
}

.markdown-workspace {
    padding: 0;
    overflow: hidden;
}

.markdown-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.view-buttons, .export-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    color: #475569;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.tool-button:hover, .tool-button.active {
    border-color: #b8c9e2;
    background: var(--soft);
    color: var(--blue);
}

.button.compact {
    min-height: 38px;
    padding: 0 15px;
    box-shadow: none;
    font-size: 12px;
}

.button.compact:disabled {
    cursor: wait;
    opacity: .65;
}

.markdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 660px;
}

.editor-pane, .preview-pane {
    min-width: 0;
    background: white;
}

.editor-pane {
    border-right: 1px solid var(--line);
}

.pane-label {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border-bottom: 1px solid var(--line);
    color: #64748b;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#markdown-source {
    display: block;
    width: 100%;
    height: 618px;
    padding: 25px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: #fbfcfe;
    color: #172033;
    font: 14px/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    tab-size: 2;
}

#markdown-source:focus {
    box-shadow: inset 0 0 0 3px #93b4fb;
}

.preview-pane:focus {
    outline: 0;
}

.markdown-preview {
    max-width: 760px;
    margin: 0 auto;
    padding: 38px 42px 70px;
    color: #273449;
    font: 15px/1.78 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    overflow-wrap: anywhere;
}

.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 {
    color: #111827;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.markdown-preview h1 {
    margin: 0 0 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 36px;
}

.markdown-preview h2 {
    margin: 38px 0 14px;
    font-size: 26px;
}

.markdown-preview h3 {
    margin: 30px 0 12px;
    font-size: 20px;
}

.markdown-preview p {
    margin: 0 0 20px;
    white-space: pre-wrap;
}

.markdown-preview a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.markdown-preview code {
    padding: 2px 5px;
    border-radius: 4px;
    background: #edf2f8;
    color: #1e3a5f;
    font: 13px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.markdown-preview pre {
    margin: 24px 0;
    padding: 18px 20px;
    overflow: auto;
    border-radius: 9px;
    background: var(--navy);
    color: #dbeafe;
}

.markdown-preview pre code {
    padding: 0;
    background: none;
    color: inherit;
    white-space: pre;
}

.markdown-preview blockquote {
    margin: 24px 0;
    padding: 3px 0 3px 20px;
    border-left: 4px solid #93b4fb;
    color: #526176;
}

.markdown-preview blockquote p:last-child {
    margin-bottom: 0;
}

.markdown-preview li {
    margin: 6px 0;
}

.markdown-preview hr {
    margin: 34px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.table-scroll {
    margin: 24px 0;
    overflow: auto;
}

.markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.markdown-preview th, .markdown-preview td {
    padding: 10px 12px;
    border: 1px solid var(--line);
    text-align: left;
}

.markdown-preview th {
    background: #f4f7fb;
}

.empty-preview {
    color: var(--muted);
    font-style: italic;
}

.markdown-status {
    min-height: 20px;
    margin: 0;
    padding: 12px 17px;
    border-top: 1px solid var(--line);
    background: #f8fafc;
    color: #64748b;
    font-size: 10px;
}

@media (max-width:800px) {
    .markdown-page>.shell {
        width: min(100% - 28px, 1320px);
    }

    .markdown-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .view-buttons, .export-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .markdown-grid {
        display: block;
        min-height: 560px;
    }

    .markdown-grid[data-view="editor"] .preview-pane, .markdown-grid[data-view="preview"] .editor-pane {
        display: none;
    }

    .editor-pane {
        border-right: 0;
    }

    .markdown-grid[data-view="preview"] .preview-pane {
        display: block;
    }

    #markdown-source {
        height: 560px;
    }

    .markdown-preview {
        padding: 28px 20px 55px;
    }
}

/* --------------------------------------------------------------------------
   Alpha16: wide Markdown workspace with a user-resizable source/preview split
   --------------------------------------------------------------------------
   Purpose:
   - Keep the page heading and explanatory article at a comfortable reading width.
   - Let only the editor workspace expand across the wider tool canvas.
   - Preserve the Alpha15 workspace height while giving Markdown substantially
     more horizontal room than the other compact utility cards.
   - Expose a small draggable divider so readers can favor source or preview.

   Future adjustment:
   - Change --markdown-workspace-width to alter only this tool's outer width.
   - The JavaScript updates --markdown-source-width while the divider is dragged.
   - Mobile returns to the existing single-pane Editor / Preview switching model.
   -------------------------------------------------------------------------- */

.tool-pagehead .markdown-reading-shell {
    width: min(860px, calc(100% - 40px));
}

.markdown-page {
    --markdown-workspace-width: 1320px;
}

.markdown-page > .shell {
    width: min(var(--markdown-workspace-width), calc(100% - 40px));
}

.markdown-page .markdown-reading-block {
    width: min(860px, 100%);
    margin-right: auto;
    margin-left: auto;
}

/* Markdown is the deliberate exception to the shared 760 px tool-card width.
   Its height stays aligned with the Alpha15 tool-card footprint. */

.tool-pagebody .markdown-workspace {
    width: min(var(--markdown-workspace-width), 100%);
}

.tool-pagebody .markdown-workspace .markdown-grid {
    --markdown-source-width: 50%;
    display: grid;
    grid-template-columns: minmax(280px, var(--markdown-source-width)) 22px minmax(280px, 1fr);
}

.tool-pagebody .markdown-workspace .editor-pane {
    border-right: 0;
}

.markdown-splitter {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 22px;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
    background: #f8fafc;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.markdown-splitter span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid #cfd9e7;
    border-radius: 50%;
    background: #fff;
    color: #64748b;
    box-shadow: 0 2px 7px #0f172114;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.markdown-splitter:hover span, .markdown-splitter:focus-visible span, .markdown-splitter.is-dragging span {
    border-color: #93b4fb;
    color: var(--blue);
    box-shadow: 0 3px 10px #2563eb24;
}

.markdown-splitter.is-dragging {
    background: #eff6ff;
}

@media (max-width: 800px) {
    .tool-pagehead .markdown-reading-shell, .markdown-page > .shell {
        width: min(100% - 28px, 1320px);
    }

    .markdown-page .markdown-reading-block {
        width: 100%;
    }

    .tool-pagebody .markdown-workspace .markdown-grid {
        display: block;
    }

    .markdown-splitter {
        display: none;
    }
}