/* Monochrome Bootstrap 5 skin */
:root {
    --ink: #0b0b0b;
    --paper: #ffffff;
    --muted: #5a5a5a;
    --line: #d9d9d9;
    --panel: #f7f7f7;
}

html,
body {
    height: 100%;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
        "Segoe UI Emoji";
    line-height: 1.55;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover {
    color: #000;
}

/* NAV */
.navbar {
    border-bottom: 1px solid var(--line);
    background: var(--paper) !important;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.2px;
}

.nav-link {
    text-decoration: none;
    color: var(--ink) !important;
}

.nav-link:hover {
    text-decoration: underline;
}

.nav-link.active {
    font-weight: 700;
    text-decoration: underline;
}

.container-narrow {
    max-width: 980px;
}

/* HERO / PANELS */
.hero {
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 16px;
    padding: 2rem;
}

@media (max-width: 991.98px) {
    .hero {
        padding: 1.5rem;
    }
}

/* BADGES / PILLS */
.badge-mono {
    border: 1px dashed var(--line);
    color: var(--muted);
    background: var(--paper);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    border-radius: 999px;
    padding: 0.28rem 0.6rem;
    cursor: default;
    user-select: none;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    background: var(--paper);
    color: var(--muted);
    font-weight: 600;
}

/* CARDS / TABLES */
.card {
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: none;
}

.card-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.table {
    color: var(--ink);
}

.table thead th {
    border-bottom: 1px solid var(--line) !important;
}

/* BUTTONS */
.btn {
    border-radius: 12px;
    font-weight: 700;
    padding: 0.6rem 1rem;
    border-width: 2px;
}

.btn-dark {
    background: #000;
    border-color: #000;
}

.btn-dark:hover {
    background: #111;
    border-color: #111;
}

.btn-outline-dark {
    border-color: #000;
    color: #000;
    background: var(--paper);
}

.btn-outline-dark:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Consistent action layout for card buttons (Downloads page + reusable) */
.card-actions {
    margin-top: 1.25rem;
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.action-grid .btn {
    width: 100%;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .action-grid {
        grid-template-columns: 1fr;
    }

    .action-grid .btn {
        white-space: normal;
    }
}

/* TYPOGRAPHY / UTILS */
hr {
    border-top: 1px solid var(--line);
    opacity: 1;
}

small,
.text-muted {
    color: var(--muted) !important;
}

.kbd {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
    background: var(--paper);
}

.section-title {
    font-weight: 800;
    letter-spacing: -0.2px;
}

/* FOOTER */
.footer {
    border-top: 1px solid var(--line);
    background: var(--paper);
}

/* TOC */
.toc {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem;
    background: var(--paper);
}

.toc a {
    text-decoration: none;
}

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

/* NOTICE / CALLOUTS */
.notice {
    border-left: 4px solid #000;
    background: var(--panel);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

/* DIAGRAM WRAPPER */
.diagram {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem;
    background: var(--paper);
}

.diagram-img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* CODEBLOCK (generic) */
.codeblock {
    border: 1px solid var(--line, #e6e6e6);
    border-radius: 16px;
    background: var(--paper, #fff);
    padding: 1rem;
    overflow: hidden;
    text-align: left;
}

.codeblock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.codeblock-title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
}

.codeblock-meta {
    font-size: 0.8rem;
    color: var(--muted, #666);
    margin: 0;
}

.copy-btn {
    border: 1px solid var(--line, #e6e6e6);
    background: var(--paper, #fff);
    color: #000;
    border-radius: 12px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.copy-btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Make YAML/code left-aligned and prevent “drifting right” */
.codeblock pre,
.codeblock code {
    text-align: left;
}

.codeblock pre {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--line, #e6e6e6);
    background: #fafafa;
    overflow: auto;
    max-height: 520px;
    line-height: 1.5;
    font-size: 0.92rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;
    white-space: pre;
    /* preserve YAML alignment */
    tab-size: 2;
}

.codeblock code {
    color: #000;
}

/* Optional: subtle section spacing */
.spec-contract {
    margin-bottom: 1.25rem;
}

/* Prism integration inside our codeblock */
.codeblock pre[class*="language-"] {
    background: #fafafa !important;
    border: 1px solid var(--line, #e6e6e6);
    border-radius: 12px;
    margin: 0;
    font-size: 0.92rem;
}

/* Keep Prism monochrome: overwrite token colors */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata,
.token.punctuation,
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted,
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted,
.token.operator,
.token.entity,
.token.url,
.token.atrule,
.token.attr-value,
.token.keyword,
.token.function,
.token.class-name,
.token.regex,
.token.important,
.token.variable {
    color: #000 !important;
}

/* Use only weight + subtle opacity differences (still monochrome) */
.token.comment {
    opacity: 0.55;
    font-style: normal;
}

.token.keyword {
    font-weight: 700;
}

.token.string,
.token.number {
    opacity: 0.85;
}

.token.operator {
    opacity: 0.8;
}

.footer-links .dot {
    margin: 0 .45rem;
    opacity: .6;
}