/* Markdown Previewer Custom Styling */

.apple-glass {
    background: rgba(18, 18, 20, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.custom-input {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f4f4f5;
    transition: all 0.2s ease-in-out;
}

.custom-input:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
}

/* Rendered Markdown Styling */
.markdown-rendered-preview h1 {
    font-size: 1.85rem;
    font-weight: 800;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.25rem;
}

.markdown-rendered-preview h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: #f3f4f6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 0.2rem;
}

.markdown-rendered-preview h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 0.85rem;
    margin-bottom: 0.4rem;
    color: #e5e7eb;
}

.markdown-rendered-preview p {
    margin-bottom: 0.75rem;
    line-height: 1.7;
    color: #d1d5db;
}

.markdown-rendered-preview ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.markdown-rendered-preview ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.markdown-rendered-preview blockquote {
    border-left: 4px solid #38bdf8;
    padding-left: 1rem;
    margin: 0.75rem 0;
    color: #9ca3af;
    font-style: italic;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 8px 8px 0;
}

.markdown-rendered-preview code {
    background: rgba(255, 255, 255, 0.08);
    color: #38bdf8;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
}

.markdown-rendered-preview pre {
    background: #09090b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.markdown-rendered-preview pre code {
    background: transparent;
    padding: 0;
    color: #e5e7eb;
}

.markdown-rendered-preview table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.markdown-rendered-preview th, .markdown-rendered-preview td {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.markdown-rendered-preview th {
    background: rgba(255, 255, 255, 0.05);
    font-weight: bold;
    color: #ffffff;
}

.result-card-glow {
    background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 70%);
}

/* ============================================================
   Download PDF (native browser print) — markdown-previewer only
   ============================================================ */
#dev-workspace[data-tool-slug="markdown-previewer"] #btn-download-pdf {
    min-height: 44px;
}

@page {
    size: A4;
    margin: 20mm 16mm;
}

@media print {
    /* Isolation strategy: rather than visibility:hidden (which preserves
       normal document flow and keeps padding the printed output with
       phantom blank pages, since hidden elements still occupy — and in
       Chrome's print pagination, still count — their natural height),
       walk the real ancestor chain from <body> down to #rendered-md-view
       and display:none every branch that peels off along the way. Each
       collapsed selector here is always a sibling of the next link in the
       chain, never an ancestor of #rendered-md-view itself, so nothing in
       this block can clip the document. What survives is exactly:
       html > body > .tool-content-container > #workspace-section >
       #dev-workspace > .workspace-body > .panel-right > (2 unnamed flex
       wrappers) > #pane-rendered > #rendered-md-view. */
    body > :not(.tool-content-container) {
        display: none !important;
    }

    .tool-content-container > :not(#workspace-section) {
        display: none !important;
    }

    .workspace-command-bar,
    .dt-mobile-io-tabs,
    .panel-left.workspace-panel,
    .workspace-splitter,
    .panel-right > .panel-header,
    .workspace-statusbar,
    #pane-html,
    #pane-cheatsheet {
        display: none !important;
    }

    /* The surviving ancestor chain is styled for an on-screen split
       workbench (flex layouts with overflow-hidden, viewport-relative
       heights), which would otherwise clip or truncate a print-length
       document. Force natural, unconstrained flow height instead. */
    html,
    body,
    .tool-content-container,
    #workspace-section,
    #dev-workspace,
    .workspace-body,
    .panel-right,
    .panel-right > .flex-1,
    #pane-rendered {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        width: auto !important;
        position: static !important;
    }

    #rendered-md-view {
        background: #ffffff !important;
        color: #111111 !important;
    }

    /* Force print-safe paper styling: the live preview is styled for a dark
       theme (white/light text on dark/transparent backgrounds), which would
       otherwise render illegible on white paper. */
    #rendered-md-view * {
        color: #111111 !important;
        background: transparent !important;
        border-color: #cccccc !important;
    }

    #rendered-md-view a {
        color: #0645ad !important;
        text-decoration: underline !important;
    }

    #rendered-md-view code {
        background: #f0f0f0 !important;
    }

    #rendered-md-view pre {
        background: #f7f7f7 !important;
        border: 1px solid #cccccc !important;
        white-space: pre-wrap;
        word-break: break-word;
    }

    #rendered-md-view pre code {
        background: transparent !important;
    }

    #rendered-md-view blockquote {
        background: #f5f5f5 !important;
        border-left: 4px solid #666666 !important;
    }

    #rendered-md-view table,
    #rendered-md-view th,
    #rendered-md-view td {
        border: 1px solid #999999 !important;
    }

    #rendered-md-view th {
        background: #eeeeee !important;
    }

    #rendered-md-view img {
        max-width: 100%;
        height: auto;
    }

    /* Sensible pagination: avoid orphaned headings and mid-block splits where
       reasonably possible, without guaranteeing it for exceptionally large
       individual blocks. Long tables are allowed to split across pages. */
    #rendered-md-view h1,
    #rendered-md-view h2,
    #rendered-md-view h3,
    #rendered-md-view h4,
    #rendered-md-view h5,
    #rendered-md-view h6 {
        page-break-after: avoid;
    }

    #rendered-md-view pre,
    #rendered-md-view blockquote {
        page-break-inside: avoid;
    }

    #rendered-md-view table {
        page-break-inside: auto;
    }
}