/* ========================================
   MARKDOWN TOOLBAR
   ======================================== */

.markdown-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-unit);
    background-color: rgba(245, 245, 245, .6);
    padding: .5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    width: 100%;
    overflow: hidden
}

.markdown-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0
}

.markdown-btn {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--accent-gray);
    padding: .5rem .75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    transition: all var(--transition-default);
    min-width: 44px;
    min-height: 44px;
    text-align: center;
    flex-shrink: 0
}

.markdown-btn:hover,
.markdown-btn:focus {
    background-color: var(--text-primary);
    color: var(--highlight-accent);
    border-color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-light);
    outline: 0
}

.markdown-btn:active {
    background-color: var(--text-primary);
    color: var(--highlight-accent);
    transform: translateY(0)
}

.markdown-toolbar .separator {
    border-left: 1px solid var(--accent-gray);
    height: 24px;
    margin: 0 .25rem;
    flex-shrink: 0
}

.markdown-dropdown {
    position: relative;
    display: inline-block;
    flex-shrink: 0
}

.markdown-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--secondary-bg);
    min-width: 120px;
    box-shadow: var(--shadow-medium);
    border-radius: var(--border-radius);
    z-index: 1;
    top: 100%;
    left: 0
}

.markdown-dropdown-content a {
    color: var(--text-primary);
    padding: .5rem .75rem;
    text-decoration: none;
    display: block;
    font-size: var(--font-size-sm);
    transition: background-color var(--transition-default);
}

.markdown-dropdown-content a:hover,
.markdown-dropdown-content a:focus {
    background-color: var(--highlight-accent);
    outline: 0
}

.markdown-dropdown:hover .markdown-dropdown-content,
.markdown-dropdown:focus-within .markdown-dropdown-content {
    display: block
}

.language-flags {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-left: auto;
    flex-shrink: 0
}

.markdown-toolbar .language-flags .lang-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: .5rem .75rem;
    border: 1px solid var(--accent-gray);
    border-radius: var(--border-radius);
    background: 0 0;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-default);
}

.markdown-toolbar .language-flags .lang-btn:hover {
    background-color: var(--text-primary);
    color: var(--highlight-accent);
    border-color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-light);
}

.markdown-toolbar .language-flags .lang-btn.active {
    background: 0 0;
    color: var(--text-primary);
    border: 2px solid var(--text-primary);
    transform: none;
    box-shadow: none
}

.markdown-toolbar .language-flags .lang-btn:focus {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px
}

@counter-style footnote-circled {
    system: fixed;
    symbols:
        "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" "\2468" "\2469"
        "\246A" "\246B" "\246C" "\246D" "\246E" "\246F" "\2470" "\2471" "\2472" "\2473"
        "\3251" "\3252" "\3253" "\3254" "\3255" "\3256" "\3257" "\3258" "\3259" "\325A"
        "\325B" "\325C" "\325D" "\325E" "\325F"
        "\32B1" "\32B2" "\32B3" "\32B4" "\32B5" "\32B6" "\32B7" "\32B8" "\32B9" "\32BA"
        "\32BB" "\32BC" "\32BD" "\32BE" "\32BF";
    fallback: decimal;
    suffix: "";
}

body {
    counter-reset: footnote-inline katexEqnNo mmlEqnNo;
}

/* Footnotes */
sup.footnote-ref {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 1;
    color: var(--text-secondary);
}

sup.footnote-ref a,
a.footnote-ref {
    counter-increment: footnote-inline;
    position: relative;
    color: transparent;
    text-decoration: none;
}

sup.footnote-ref a::before,
a.footnote-ref::before {
    content: counter(footnote-inline, footnote-circled);
    color: var(--text-secondary);
}

sup.footnote-ref a:hover,
sup.footnote-ref a:focus,
a.footnote-ref:hover,
a.footnote-ref:focus {
    color: transparent;
}

sup.footnote-ref a:hover::before,
sup.footnote-ref a:focus::before,
a.footnote-ref:hover::before,
a.footnote-ref:focus::before {
    color: var(--text-primary);
}

.footnotes {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--accent-gray);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.footnotes hr {
    display: none;
}

.footnotes ol {
    padding-left: 1.5rem;
    margin: 0;
    list-style: none;
    counter-reset: footnote-list;
}

.footnotes li {
    position: relative;
    margin-bottom: 0.5rem;
    list-style-type: none;
    counter-increment: footnote-list;
}

.footnotes li::before {
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
    content: counter(footnote-list, footnote-circled);
    position: absolute;
    left: -1.5rem;
}

.footnotes a {
    color: var(--text-secondary);
    text-decoration: none;
}

.footnotes a:hover,
.footnotes a:focus {
    color: var(--text-primary);
    text-decoration: underline;
}

.footnotes-backref {
    margin-left: 0.35rem;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.footnotes-backref:hover,
.footnotes-backref:focus {
    color: var(--text-primary);
    text-decoration: underline;
}