/* Tool.css - Markdown Cheatsheet
   Theme-aware styles so cards stay readable in both light and dark modes.
   Replaces the previously hardcoded light-only inline backgrounds/colors. */

.mdc-syntax-box {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    padding: .5rem;
    border-radius: 4px;
    overflow-x: auto;
    font-size: .85rem;
}

.mdc-preview {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    font-size: .9rem;
}

/* Blockquote inside the rendered preview */
.mdc-preview .mdc-bq {
    border-left: 3px solid var(--bs-border-color);
    padding-left: .6rem;
    color: var(--bs-secondary-color);
    margin: 0;
}

/* Fenced / indented code preview */
.mdc-preview .mdc-pre {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    padding: .4rem;
    margin: .2rem 0;
    border-radius: 4px;
}

/* Image placeholder chips */
.mdc-preview .mdc-imgchip {
    display: inline-block;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    padding: .3rem .6rem;
    border-radius: 4px;
}

/* GitHub-style callouts */
.mdc-preview .mdc-callout {
    padding: .4rem .6rem;
    margin: 0;
    color: var(--bs-body-color);
    background: var(--bs-secondary-bg);
}
.mdc-preview .mdc-callout-note { border-left: 4px solid #0d6efd; }
.mdc-preview .mdc-callout-tip { border-left: 4px solid #198754; }
.mdc-preview .mdc-callout-warn { border-left: 4px solid #ffc107; }

/* Compatibility badge row */
.mdc-compat {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}
.mdc-compat .badge {
    font-weight: 500;
    font-size: .7rem;
}
.mdc-compat .badge.bg-secondary {
    opacity: .65;
    text-decoration: line-through;
}

.mdc-legend {
    font-size: .8rem;
}