/* ============================================================
 * 百科阅读页「可运行代码块」样式
 * 结构由 includes/baike_md.php 产出，交互由 assets/js/baike_code_run.js 提供。
 * 仅在 pages/baike_view.php 加载；其它复用该渲染器的页面不受影响。
 * ============================================================ */

/* ---- 外层容器：与正文 pre 同色系，工具条与代码连成一体 ---- */
.bk2v-code {
    margin: 1.1em 0;
    border: 1px solid rgba(127, 127, 127, .22);
    border-radius: 12px;
    overflow: hidden;
    background: #0d1117;
}

/* ---- 顶部工具条 ---- */
.bk2v-code-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 14px;
    background: #161b22;
    border-bottom: 1px solid rgba(127, 127, 127, .18);
}
.bk2v-code-lang {
    font: 600 12px/1.5 Consolas, Menlo, "Courier New", monospace;
    color: #8b949e;
    letter-spacing: .5px;
}
.bk2v-code-act {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bk2v-code-btn {
    font: 500 12px/1 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #c9d1d9;
    background: rgba(201, 209, 217, .1);
    border: 1px solid rgba(201, 209, 217, .16);
    border-radius: 7px;
    padding: 6px 11px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.bk2v-code-btn:hover { background: rgba(201, 209, 217, .18); color: #fff; }
.bk2v-code-btn:active { transform: translateY(1px); }
.bk2v-code-btn:focus-visible { outline: 2px solid #58a6ff; outline-offset: 1px; }
.bk2v-code-btn[data-act="run"] {
    color: #0d1117;
    background: #58a6ff;
    border-color: #58a6ff;
    font-weight: 600;
}
.bk2v-code-btn[data-act="run"]:hover { background: #79c0ff; border-color: #79c0ff; color: #0d1117; }
.bk2v-code-btn[hidden] { display: none; }

/* ---- 代码块：抹掉正文 pre 的圆角/外边距，贴合工具条 ---- */
.bk2v-article .bk2v-code pre {
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.bk2v-article .bk2v-code pre code {
    background: transparent;
    color: #e6edf3;
    padding: 0;
    font-size: inherit;
}

/* ---- 运行结果：iframe 沙箱预览 ---- */
.bk2v-code-out {
    border-top: 1px solid rgba(127, 127, 127, .18);
    background: var(--bg-secondary, #fff);
}
.bk2v-code-out[hidden] { display: none; }
.bk2v-code-out iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: 0;
    background: #fff;
}
/* 纯 JS 只输出日志，给矮一点的窗口 */
.bk2v-code[data-bk-code="js"] .bk2v-code-out iframe { height: 240px; }
.bk2v-code[data-bk-code="html"] .bk2v-code-out iframe { height: 380px; }

/* ---- 窄屏：工具条收紧，预览降高 ---- */
@media (max-width: 640px) {
    .bk2v-code { border-radius: 10px; margin: 1em 0; }
    .bk2v-code-bar { padding: 5px 8px 5px 12px; }
    .bk2v-code-lang { font-size: 11px; }
    .bk2v-code-btn { padding: 5px 9px; font-size: 11px; }
    .bk2v-article .bk2v-code pre { padding: 12px 13px; }
    .bk2v-code-out iframe { height: 280px; }
    .bk2v-code[data-bk-code="js"] .bk2v-code-out iframe { height: 200px; }
    .bk2v-code[data-bk-code="html"] .bk2v-code-out iframe { height: 300px; }
}

/* ---- 打印：隐藏工具条，只留代码与结果 ---- */
@media print {
    .bk2v-code-bar { display: none; }
    .bk2v-code-out iframe { height: 420px; }
}