/* ============================================================================
   SAKADO — long-form markdown / prose styling.
   Rendered inside `.markdown-body`. Inherits the design tokens declared in
   style.css (loaded before this file).
   ========================================================================== */

.markdown-body {
    font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
    font-size: 16.5px;
    line-height: 1.8;
    color: #b6b6b1;
    word-wrap: break-word;
}

.markdown-body > *:first-child { margin-top: 0 !important; }
.markdown-body > *:last-child { margin-bottom: 0 !important; }

/* Headings ---------------------------------------------------------------- */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
    color: var(--text-strong, #f2f2f0);
    font-weight: 600;
    line-height: 1.3;
    scroll-margin-top: 90px;
}
.markdown-body h1 { font-size: 28px; margin: 48px 0 18px; }
.markdown-body h2 { font-size: 22px; margin: 44px 0 16px; }
.markdown-body h3 { font-size: 18px; margin: 36px 0 12px; }
.markdown-body h4 { font-size: 16px; margin: 30px 0 10px; }
.markdown-body h5 { font-size: 14px; margin: 26px 0 8px; }
.markdown-body h6 {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint, #5f5f5c);
    margin: 26px 0 8px;
    font-weight: 500;
}

/* Body text --------------------------------------------------------------- */
.markdown-body p { margin: 0 0 20px; }

.markdown-body a {
    color: #d0d0cc;
    text-decoration: underline;
    text-decoration-color: var(--hair, #3a3a3a);
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.markdown-body a:hover {
    color: var(--accent, #c23a30);
    text-decoration-color: var(--accent, #c23a30);
}

.markdown-body strong { color: var(--text, #e8e8e6); font-weight: 600; }
.markdown-body em { font-style: italic; }

.markdown-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 28px auto;
    border: 1px solid var(--border, #1a1a1a);
}

.markdown-body hr {
    border: 0;
    border-top: 1px solid var(--border, #1a1a1a);
    margin: 40px 0;
}

/* Lists ------------------------------------------------------------------- */
.markdown-body ul,
.markdown-body ol { margin: 0 0 20px; padding-left: 1.5rem; }
.markdown-body li { margin: 6px 0; }
.markdown-body li > ul,
.markdown-body li > ol { margin: 6px 0; }
.markdown-body ul { list-style: none; }
.markdown-body ul > li { position: relative; }
.markdown-body ul > li::before {
    content: "—";
    position: absolute;
    left: -1.5rem;
    color: var(--accent, #c23a30);
}
.markdown-body ol { list-style: decimal; }
.markdown-body ol li::marker { color: var(--text-faint, #5f5f5c); font-family: var(--font-mono, monospace); }

.markdown-body .task-list-item { list-style: none; }
.markdown-body .task-list-item::before { content: none; }
.markdown-body .task-list-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin: 0 8px 0 -1.5rem;
    border: 1px solid var(--border-2, #222);
    background: var(--bg-card, #0c0c0c);
    vertical-align: middle;
    position: relative;
}
.markdown-body .task-list-item input[type="checkbox"]:checked {
    border-color: var(--accent, #c23a30);
}
.markdown-body .task-list-item input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    inset: -3px 0 0 1px;
    font-size: 11px;
    color: var(--accent, #c23a30);
}

/* Inline code + code blocks ---------------------------------------------- */
.markdown-body code {
    font-family: var(--font-mono, monospace);
    font-size: 0.88em;
    background: var(--bg-inline, #151515);
    border: 1px solid var(--border-2, #222);
    padding: 1px 6px;
    border-radius: 3px;
    color: #d8d8d4;
}
.markdown-body pre {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    line-height: 1.7;
    background: var(--bg-code, #0d0d0d);
    border: 1px solid #1c1c1c;
    border-left: 2px solid var(--accent, #c23a30);
    padding: 20px 22px;
    overflow: auto;
    color: #c8c8c4;
    margin: 0 0 24px;
}
.markdown-body pre code {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
}

/* Blockquote -------------------------------------------------------------- */
.markdown-body blockquote {
    margin: 0 0 24px;
    padding: 4px 20px;
    border-left: 2px solid var(--border-2, #222);
    color: var(--text-3, #9a9a96);
    font-style: italic;
}
.markdown-body blockquote p:last-child { margin-bottom: 0; }

/* Tables ------------------------------------------------------------------ */
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 14.5px;
    display: block;
    overflow-x: auto;
}
.markdown-body th,
.markdown-body td {
    padding: 10px 14px;
    border: 1px solid var(--border, #1a1a1a);
    text-align: left;
}
.markdown-body th {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-2, #c8c8c4);
    background: var(--bg-card, #0c0c0c);
    font-weight: 500;
}
.markdown-body tr:nth-child(even) { background: rgba(255,255,255,0.015); }
.markdown-body tr:hover { background: rgba(255,255,255,0.03); }

/* Details / summary ------------------------------------------------------- */
.markdown-body details {
    border: 1px solid var(--border, #1a1a1a);
    background: var(--bg-card, #0c0c0c);
    padding: 4px 18px;
    margin: 0 0 24px;
}
.markdown-body details:hover { border-color: var(--border-2, #222); }
.markdown-body summary {
    cursor: pointer;
    padding: 12px 0;
    font-family: var(--font-mono, monospace);
    font-size: 13.5px;
    color: var(--text-2, #c8c8c4);
}
.markdown-body details[open] summary {
    border-bottom: 1px solid var(--border, #1a1a1a);
    margin-bottom: 14px;
}

/* Heading anchors (added by script.js) ----------------------------------- */
.markdown-body .heading-anchor {
    opacity: 0;
    margin-left: 10px;
    color: var(--text-faint, #5f5f5c);
    text-decoration: none;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.markdown-body .heading-anchor::before { content: "#"; }
.markdown-body h2:hover .heading-anchor,
.markdown-body h3:hover .heading-anchor,
.markdown-body h4:hover .heading-anchor { opacity: 1; }
.markdown-body .heading-anchor:hover,
.markdown-body .heading-anchor:focus,
.markdown-body .heading-anchor.is-copied { opacity: 1; color: var(--accent, #c23a30); }

/* KaTeX ------------------------------------------------------------------- */
.markdown-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: 6px 0; }

/* ============================================================================
   ADMONITIONS (mkdocs-style callouts)
   Neutral card + a colored left rule and title per type.
   ========================================================================== */
.markdown-body .admonition {
    border: 1px solid var(--border, #1a1a1a);
    border-left: 3px solid var(--text-dim, #6f6f6c);
    background: var(--bg-card, #0c0c0c);
    padding: 16px 20px;
    margin: 0 0 24px;
}
.markdown-body .admonition-title {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-2, #c8c8c4);
    margin: 0 0 10px;
    font-weight: 600;
}
.markdown-body .admonition > p:last-child { margin-bottom: 0; }
.markdown-body .admonition > pre { margin-top: 14px; }

/* Info / note / tip / help — neutral-cool */
.markdown-body .admonition.note,
.markdown-body .admonition.info,
.markdown-body .admonition.abstract,
.markdown-body .admonition.summary,
.markdown-body .admonition.tldr,
.markdown-body .admonition.cite,
.markdown-body .admonition.quote { border-left-color: #6b8cae; }
.markdown-body .admonition.note .admonition-title,
.markdown-body .admonition.info .admonition-title,
.markdown-body .admonition.abstract .admonition-title,
.markdown-body .admonition.summary .admonition-title,
.markdown-body .admonition.tldr .admonition-title,
.markdown-body .admonition.cite .admonition-title,
.markdown-body .admonition.quote .admonition-title { color: #8fb0d0; }

/* Tip / success / help / faq / question — green */
.markdown-body .admonition.tip,
.markdown-body .admonition.success,
.markdown-body .admonition.help,
.markdown-body .admonition.faq,
.markdown-body .admonition.question,
.markdown-body .admonition.flag { border-left-color: #7fbf7f; }
.markdown-body .admonition.tip .admonition-title,
.markdown-body .admonition.success .admonition-title,
.markdown-body .admonition.help .admonition-title,
.markdown-body .admonition.faq .admonition-title,
.markdown-body .admonition.question .admonition-title,
.markdown-body .admonition.flag .admonition-title { color: #9ad39a; }

/* Warning / caution / example — amber */
.markdown-body .admonition.warning,
.markdown-body .admonition.caution,
.markdown-body .admonition.example { border-left-color: #d4a24a; }
.markdown-body .admonition.warning .admonition-title,
.markdown-body .admonition.caution .admonition-title,
.markdown-body .admonition.example .admonition-title { color: #e0b866; }

/* Danger / error / bug / security / ctf — red (the house accent) */
.markdown-body .admonition.danger,
.markdown-body .admonition.error,
.markdown-body .admonition.bug,
.markdown-body .admonition.security,
.markdown-body .admonition.ctf { border-left-color: var(--accent, #c23a30); }
.markdown-body .admonition.danger .admonition-title,
.markdown-body .admonition.error .admonition-title,
.markdown-body .admonition.bug .admonition-title,
.markdown-body .admonition.security .admonition-title,
.markdown-body .admonition.ctf .admonition-title { color: #e5675c; }