/* Blog code panels: a quiet editor surface, not inline-code pills. */
.post-single .post-body {
    min-width: 0;
}

.post-single .post-body pre {
    max-width: 100%;
    min-width: 0;
    margin: 1.5rem 0;
    padding: 1.4rem 1.5rem;
    overflow-x: auto;
    background: #111a1b;
    border: 1px solid #2a3b3b;
    border-radius: 14px;
    color: #e0e9e7;
    font: 0.875rem/1.8 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    tab-size: 4;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: #4c6662 #111a1b;
}

.post-single .post-body pre code {
    display: block;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    white-space: inherit;
    text-shadow: none;
}

.post-single .post-body :not(pre) > code {
    padding: 0.12em 0.38em;
    border: 1px solid #273b34;
    border-radius: 5px;
    background: #12231d;
    color: #b0e5ce;
    font-size: 0.85em;
    overflow-wrap: anywhere;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.post-body .code-panel {
    max-width: 100%;
    min-width: 0;
    margin: 1.75rem 0;
    overflow: hidden;
    border: 1px solid #2a3b3b;
    border-radius: 14px;
    background: #111a1b;
    box-shadow: 0 12px 32px -20px #000;
}

.post-body .code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 49px;
    padding: 0.35rem 0.75rem 0.35rem 1.5rem;
    border-bottom: 1px solid #2a3b3b;
    background: #172222;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.post-body .code-language {
    color: #a6c0b8;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.post-body .code-copy {
    flex-shrink: 0;
    min-height: 36px;
    min-width: 76px;
    padding: 0.35rem 0.7rem;
    border: 1px solid #38514a;
    border-radius: 7px;
    background: transparent;
    color: #c8ded5;
    font: 0.75rem/1.4 'JetBrains Mono', ui-monospace, monospace;
    cursor: pointer;
}

.post-body .code-copy:hover {
    background: #243c32;
    border-color: #639d83;
    color: #ecfff5;
}

.post-body .code-copy:focus-visible,
.post-single .post-body pre:focus-visible {
    outline: 2px solid #6ee7b7;
    outline-offset: -3px;
}

.post-single .code-panel pre {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.post-body .code-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.post-body pre ::selection { background: #36554b; color: #fff; }
.post-body pre .token.comment,
.post-body pre .token.prolog,
.post-body pre .token.doctype { color: #91a7a3; font-style: italic; }
.post-body pre .token.keyword,
.post-body pre .token.declaration,
.post-body pre .token.contract { color: #fbbf67; }
.post-body pre .token.string,
.post-body pre .token.char,
.post-body pre .token.attr-value { color: #98ddb2; }
.post-body pre .token.function,
.post-body pre .token.builtin,
.post-body pre .token.method { color: #73ded6; }
.post-body pre .token.number,
.post-body pre .token.boolean,
.post-body pre .token.constant { color: #cea9f8; }
.post-body pre .token.operator,
.post-body pre .token.entity,
.post-body pre .token.url { color: #d3ddd9; background: transparent; }
.post-body pre .token.punctuation { color: #a6bab5; }
.post-body pre .token.class-name,
.post-body pre .token.type,
.post-body pre .token.annotation,
.post-body pre .token.decorator { color: #8ac9f2; }
.post-body pre .token.property,
.post-body pre .token.tag,
.post-body pre .token.attr-name,
.post-body pre .token.label,
.post-body pre .token.selector,
.post-body pre .token.assertion { color: #f3a6b4; }

@media (max-width: 600px) {
    .post-single .post-body pre { padding: 1rem; font-size: 0.8125rem; }
    .post-body .code-toolbar { padding-left: 1rem; }
    .post-body .code-copy { min-height: 44px; }
}

@media print {
    .post-body .code-copy { display: none; }
    .post-body .code-panel { box-shadow: none; break-inside: avoid; }
    .post-single .post-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
    .post-single .post-body pre code { width: auto; }
}