/* =========================================================
   Markdown
   ========================================================= */

.markdown {
    line-height: 22px;
    overflow-wrap: break-word;
    color: #222;
}


/* Headings */

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
    line-height: 1.25;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    font-weight: 650;
}

.markdown h1 {
    font-size: 1.9rem;
    margin-top: 0;
}

.markdown h2 {
    font-size: 1.7rem;
    border-bottom: 1px solid #ddd;
}

.markdown h3 {
    font-size: 1.4rem;
}

.markdown h4 {
    font-size: 1.2rem;
}

.markdown h5 {
    font-size: 1.05rem;
}

.markdown h6 {
    font-size: 1rem;
}


/* Paragraphs */

.markdown p {
    margin: 0.8em 0;
    text-align: justify;

}


/* Links */

.markdown a {
    color: #2563eb;
    text-decoration: none;
}

.markdown a:hover {
    text-decoration: underline;
}

.markdown .broken-link {
    color: #888;
}


/* Bold / italic / highlight */

.markdown strong {
    font-weight: 700;
}

.markdown em {
    font-style: italic;
}

.markdown mark {
    background: #fff3a3;
    padding: 0 0.15em;
}


/* Blockquote */

.markdown blockquote {
    margin: 1.2em 0;
    padding: 0.5em 1em;
    border-left: 3px solid #2563eb;
    color: #444;
}

.markdown blockquote p:first-child {
    margin-top: 0;
}

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


/* Lists */

.markdown ul,
.markdown ol {
    margin: 0.8em 0;
    padding-left: 2em;
}

.markdown li {
    margin: 0.2em 0;
}

.markdown li > ul,
.markdown li > ol {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}


/* Task lists */

.markdown .task-list-item {
    list-style: none;
}

.markdown .task-list-control {
    margin-right: 6px;
}


/* Inline code */

.markdown code {
    padding: 0.15em 0.35em;
    border-radius: 4px;
    background: #f1f1f1;
    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
    font-size: 0.9em;
}


/* Code blocks */

.markdown pre {
    margin: 1.2em 0;
    padding: 16px;
    overflow-x: auto;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}

.markdown pre code {
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}


/* Line numbers */

.markdown .linenodiv {
    user-select: none;
}


/* Horizontal rule */

.markdown hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid #ddd;
}


/* Images */

.markdown img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.2em 0;
}

.markdown figure {
    margin: 1.5em 0;
}

.markdown figcaption {
    color: #777;
    text-align: center;
    font-size: 0.9rem;
}


/* Tables */

.markdown table {
    width: 100%;
    margin: 1.5em 0;
    border-collapse: collapse;
}

.markdown th,
.markdown td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.markdown th {
    background: #f5f5f5;
    font-weight: 600;
}

.markdown tr:nth-child(even) td {
    background: #fafafa;
}


/* Details */

.markdown details {
    margin: 1em 0;
    padding: 0.5em 0;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.markdown summary {
    padding: 0.4em 0.8em;
    cursor: pointer;
    font-weight: 600;
}

.markdown details > *:not(summary) {
    margin-left: 1em;
    margin-right: 1em;
}


/* Keyboard */

.markdown kbd {
    padding: 2px 6px;
    border: 1px solid #bbb;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #f5f5f5;
    font-family: monospace;
    font-size: 0.85em;
}


/* Footnotes */

.markdown .footnote {
    font-size: 0.9rem;
    color: #666;
}

.markdown .footnote-ref {
    font-size: 0.8em;
}


/* Definition lists */

.markdown dt {
    font-weight: 700;
    margin-top: 1em;
}

.markdown dd {
    margin-left: 1.5em;
    color: #555;
}


/* Math */

.markdown .arithmatex {
    overflow-x: auto;
}


/* Mermaid */

.markdown .mermaid {
    margin: 1.5em 0;
    overflow-x: auto;
}


/* =========================================================
   Obsidian-like Callouts
   ========================================================= */

.markdown .callout {
    margin: 1.2em 0;
    padding: 12px 16px;
    border-left: 4px solid #888;
    background: #f5f5f5;
    border-radius: 4px;
}

.markdown .callout-title {
    margin-bottom: 6px;
    font-weight: 700;
}

.markdown .callout-note,
.markdown .callout-info,
.markdown .callout-todo {
    border-left-color: #448aff;
    background: #eef5ff;
}

.markdown .callout-tip,
.markdown .callout-success {
    border-left-color: #2e9d50;
    background: #eff9f1;
}

.markdown .callout-warning {
    border-left-color: #e6a700;
    background: #fff8e6;
}

.markdown .callout-danger,
.markdown .callout-bug {
    border-left-color: #e53935;
    background: #fff0f0;
}

.markdown .callout-example {
    border-left-color: #9c5de5;
    background: #f8f1ff;
}

.markdown .callout-quote {
    border-left-color: #777;
    background: #f5f5f5;
}

.markdown .callout-abstract {
    border-left-color: #00a6a6;
    background: #effafa;
}



/* ==============================
   Obsidian Callouts
   ============================== */

.admonition {
    --callout-color: 68, 138, 255;

    margin: 1em 0;
    padding: 0;

    border-left: 4px solid rgb(var(--callout-color));
    background: rgba(var(--callout-color), 0.08);

    border-radius: 4px;
}


/* ==============================
   Title
   ============================== */

.admonition-title,
.admonition > summary {
    display: flex;
    align-items: center;

    padding: 0.7em 1em;

    color: rgb(var(--callout-color));
    font-weight: 600;

    cursor: pointer;
}


/* Normal callout title */

.admonition-title {
    margin: 0;
}


/* Details summary */

.admonition > summary {
    list-style: none;
}

.admonition > summary::-webkit-details-marker {
    display: none;
}


/* ==============================
   Content
   ============================== */

.admonition > p:not(.admonition-title),
.admonition > ul,
.admonition > ol,
.admonition > pre,
.admonition > blockquote {
    margin-left: 1em;
    margin-right: 1em;
}

.admonition > p:last-child,
.admonition > ul:last-child,
.admonition > ol:last-child,
.admonition > pre:last-child,
.admonition > blockquote:last-child {
    margin-bottom: 1em;
}


/* ==============================
   Expand arrow
   ============================== */

.admonition > summary::before {
    content: "›";

    display: inline-block;

    margin-right: 0.5em;

    font-size: 1.2em;

    transition: transform 0.15s ease;
}

.admonition[open] > summary::before {
    transform: rotate(90deg);
}


/* ==============================
   NOTE
   ============================== */

.admonition.note {
    --callout-color: 68, 138, 255;
}


/* ==============================
   ABSTRACT
   ============================== */

.admonition.abstract {
    --callout-color: 0, 188, 212;
}


/* ==============================
   INFO
   ============================== */

.admonition.info {
    --callout-color: 68, 138, 255;
}


/* ==============================
   TODO
   ============================== */

.admonition.todo {
    --callout-color: 68, 138, 255;
}


/* ==============================
   TIP
   ============================== */

.admonition.tip {
    --callout-color: 0, 200, 83;
}


/* ==============================
   SUCCESS
   ============================== */

.admonition.success {
    --callout-color: 0, 200, 83;
}


/* ==============================
   QUESTION
   ============================== */

.admonition.question {
    --callout-color: 156, 39, 176;
}


/* ==============================
   WARNING
   ============================== */

.admonition.warning {
    --callout-color: 255, 152, 0;
}


/* ==============================
   FAILURE
   ============================== */

.admonition.failure {
    --callout-color: 244, 67, 54;
}


/* ==============================
   DANGER
   ============================== */

.admonition.danger {
    --callout-color: 244, 67, 54;
}


/* ==============================
   BUG
   ============================== */

.admonition.bug {
    --callout-color: 244, 67, 54;
}


/* ==============================
   EXAMPLE
   ============================== */

.admonition.example {
    --callout-color: 156, 39, 176;
}


/* ==============================
   QUOTE
   ============================== */

.admonition.quote {
    --callout-color: 117, 117, 117;
}


.obsidian-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
    border-radius: 8px;
}

.broken-link {
    color: #dc2626;
}