.cmcs-page{max-width:1180px;margin:0 auto;padding:28px 18px 48px}
.cmcs-page-header{margin-bottom:22px}.cmcs-page-header h1{margin:0 0 8px;font-size:clamp(30px,5vw,52px);line-height:1.05}
.cmcs-page-content{margin:0 0 24px;line-height:1.65}
.cmcs-demo{border:1px solid #d0d7de;border-radius:12px;overflow:hidden;background:#fff;color:#1f2328}
.cmcs-loading,.cmcs-error{padding:24px}.cmcs-error{color:#b42318;background:#fff5f5}
.cmcs-runner-head{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #d0d7de;background:#f6f8fa}
.cmcs-runner-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmcs-runner-head small{color:#667085}
.cmcs-frame{display:block;width:100%;height:620px;border:0;background:white}
.cmcs-console{margin:0;padding:18px;min-height:180px;white-space:pre-wrap;overflow:auto;background:#0d1117;color:#e6edf3;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cmcs-source-wrap{border-top:1px solid #d0d7de}.cmcs-source-title{padding:10px 14px;font-weight:700;background:#f6f8fa}
.cmcs-source{margin:0;padding:18px;max-height:520px;overflow:auto;white-space:pre;background:#0d1117;color:#e6edf3;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cmcs-text{padding:18px;white-space:pre-wrap;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media(max-width:700px){.cmcs-page{padding:18px 10px 36px}.cmcs-frame{height:520px}.cmcs-runner-head{align-items:flex-start;flex-direction:column}}


/* Plug-and-play portfolio templates — no page builder required. */
.cmcs-archive .cmcs-page-header{margin-bottom:28px}
.cmcs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.cmcs-card{margin:0;border:1px solid #d0d7de;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 18px rgba(16,24,40,.06);transition:transform .18s ease,box-shadow .18s ease}
.cmcs-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(16,24,40,.10)}
.cmcs-card-link{display:block;height:100%;color:inherit;text-decoration:none}
.cmcs-card-image{aspect-ratio:16/9;overflow:hidden;background:#f2f4f7}
.cmcs-card-image img{display:block;width:100%;height:100%;object-fit:cover}
.cmcs-card-body{padding:18px}
.cmcs-card-body h2{margin:0 0 10px;font-size:22px;line-height:1.2}
.cmcs-card-body p{margin:0 0 18px;color:#667085;line-height:1.55}
.cmcs-card-open{font-weight:700}
.cmcs-pagination{margin-top:28px}
.cmcs-empty{padding:32px;border:1px dashed #c8ccd0;border-radius:14px;background:#f8fafc}
.cmcs-back{display:inline-block;margin-bottom:12px;text-decoration:none;font-weight:600}
.cmcs-hero-image{margin:0 0 24px;border-radius:14px;overflow:hidden}
.cmcs-hero-image img{display:block;width:100%;height:auto}
body.single-cm_code_demo .site-main,
body.post-type-archive-cm_code_demo .site-main{max-width:none}
@media (prefers-color-scheme:dark){
    .cmcs-demo,.cmcs-card{background:#161b22;color:#e6edf3;border-color:#30363d}
    .cmcs-runner-head,.cmcs-source-title{background:#21262d;border-color:#30363d}
    .cmcs-card-body p{color:#9da7b3}
    .cmcs-empty{background:#161b22;border-color:#30363d}
}


/* Embedded VBA UserForm runtime — same purpose as Code Editor Run Form, but inline on the portfolio page. */
.cmcs-vba-embed{position:relative;overflow:auto;padding:22px;background:#e5e7eb;min-height:260px}
.cmcs-vba-window{position:relative;margin:0 auto;max-width:100%;border:1px solid #808080;box-shadow:0 10px 30px rgba(0,0,0,.18);background:#f0f0f0}
.cmcs-vba-titlebar{height:32px;display:flex;align-items:center;padding:0 10px;background:#f2f2f2;border-bottom:1px solid #a0a0a0;color:#111;font:600 13px/1 Arial,sans-serif}
.cmcs-vba-canvas{position:relative;max-width:none;transform-origin:top left;font:9pt Arial,sans-serif;overflow:hidden}
.cmcs-vba-control{position:absolute;box-sizing:border-box;font:inherit;overflow:hidden}
.cmcs-vba-control input,.cmcs-vba-control select,.cmcs-vba-control button{box-sizing:border-box;width:100%;height:100%;font:inherit}
.cmcs-vba-control label{display:flex;align-items:center;width:100%;height:100%;font:inherit}
.cmcs-vba-control label input{width:auto;height:auto}
.cmcs-vba-commandbutton,.cmcs-vba-togglebutton,.cmcs-vba-filepicker{background:transparent!important}
.cmcs-vba-frame{border:1px solid #a0a0a0!important;background:transparent!important;overflow:visible}
.cmcs-vba-frame-caption{position:absolute;top:-8px;left:8px;padding:0 4px;background:#f0f0f0}
.cmcs-vba-progressbar{border:1px solid #8b8b8b;background:white!important}
.cmcs-vba-progressbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:currentColor;opacity:.28}
.cmcs-vba-progressbar span{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%}
.cmcs-vba-statusbar{display:flex;align-items:center;padding:0 6px;border:1px solid #aaa}
.cmcs-vba-multipage{border:1px solid #999;overflow:visible}
.cmcs-vba-tabs{position:absolute;left:-1px;right:-1px;top:-27px;height:27px;display:flex;align-items:end;gap:2px}
.cmcs-vba-tabs button{width:auto;height:27px;padding:3px 10px;border:1px solid #999;border-bottom:0;background:#ddd}
.cmcs-vba-tabs button.is-active{background:#f0f0f0}
.cmcs-vba-message{position:absolute;inset:0;z-index:100;display:grid;place-items:center;background:rgba(0,0,0,.2)}
.cmcs-vba-message>div{min-width:220px;max-width:80%;padding:18px;background:white;border:1px solid #777;box-shadow:0 8px 24px rgba(0,0,0,.28);color:#111}
.cmcs-vba-message p{margin:0 0 14px;white-space:pre-wrap}.cmcs-vba-message button{min-width:72px}
@media(max-width:700px){.cmcs-vba-embed{padding:10px}.cmcs-vba-window{transform-origin:top left}}


/* v1: screen-aware embedded VBA runtime */
.cmcs-vba-embed{
    width:100%;
    max-width:100%;
    overflow:hidden;
    box-sizing:border-box;
}
.cmcs-vba-stage{
    position:relative;
    margin:0 auto;
    max-width:100%;
}
.cmcs-vba-window{
    margin:0;
    max-width:none;
    transform-origin:top left;
}
.cmcs-vba-canvas{
    max-width:none;
}

/* v1: compact read-only Monaco source viewer */
.cmcs-source-wrap{border-top:1px solid #d0d7de}
.cmcs-source-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    background:#f6f8fa;
    border-bottom:1px solid #d0d7de;
}
.cmcs-source-lines{
    flex:0 0 auto;
    font-size:12px;
    font-weight:600;
    color:#667085;
}
.cmcs-source-monaco{
    width:100%;
    height:min(52vh,520px);
    min-height:260px;
    overflow:hidden;
    background:#0d1117;
}
.cmcs-source-monaco.cmcs-source-fallback{
    box-sizing:border-box;
    overflow:auto;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    padding:14px;
    color:#e6edf3;
    font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media(max-width:700px){
    .cmcs-vba-embed{padding:10px}
    .cmcs-source-monaco{height:46vh;min-height:240px}
}

/* v1 — VBA runtime button → Monaco handler navigation. */
.cmcs-source-monaco .cmcs-source-handler-hit{background:rgba(127,127,127,.14)}
.cmcs-source-monaco .cmcs-source-handler-gutter{border-left:3px solid currentColor;margin-left:2px}


/* Active VBA procedure selected by the running UserForm.
   The page does not move; only Monaco's internal viewport changes.
   Highlight remains until the event ends or its MsgBox OK is pressed. */
.cmcs-source-monaco .cmcs-source-handler-hit {
    background: rgba(255, 214, 10, .20) !important;
}
.cmcs-source-monaco .cmcs-source-handler-gutter {
    border-left: 3px solid currentColor;
}


/* v1 — Responsive VBA demo + Monaco layout.
   Phones stay stacked. Tablet, iPad, laptop and desktop show the running
   UserForm and the Monaco source viewer side-by-side. */
@media (min-width: 768px) {
    .cmcs-demo.cmcs-vba-layout {
        display:grid;
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "head head"
            "runner source";
        align-items:stretch;
    }

    .cmcs-demo.cmcs-vba-layout > .cmcs-runner-head {
        grid-area:head;
    }

    .cmcs-demo.cmcs-vba-layout > .cmcs-vba-embed {
        grid-area:runner;
        min-width:0;
        height:100%;
        border-right:1px solid #d0d7de;
    }

    .cmcs-demo.cmcs-vba-layout > .cmcs-source-wrap {
        grid-area:source;
        min-width:0;
        border-top:0;
        display:flex;
        flex-direction:column;
    }

    .cmcs-demo.cmcs-vba-layout > .cmcs-source-wrap .cmcs-source-monaco {
        flex:1 1 auto;
        height:100%;
        min-height:420px;
    }
}

@media (max-width: 767px) {
    .cmcs-demo.cmcs-vba-layout {
        display:block;
    }

    .cmcs-demo.cmcs-vba-layout > .cmcs-vba-embed {
        border-right:0;
    }

    .cmcs-demo.cmcs-vba-layout > .cmcs-source-wrap {
        border-top:1px solid #d0d7de;
    }
}


/* Locked Monaco viewer.
   Users can scroll, but cannot manually select/highlight/copy code.
   Automatic VBA event highlighting remains visible because it uses Monaco decorations. */
.cmcs-source-monaco[data-cmcs-locked-viewer="1"],
.cmcs-source-monaco[data-cmcs-locked-viewer="1"] .monaco-editor,
.cmcs-source-monaco[data-cmcs-locked-viewer="1"] .view-lines,
.cmcs-source-monaco[data-cmcs-locked-viewer="1"] .view-line,
.cmcs-source-monaco[data-cmcs-locked-viewer="1"] .margin,
.cmcs-source-monaco[data-cmcs-locked-viewer="1"] .monaco-editor-background {
    -webkit-user-select:none !important;
    user-select:none !important;
    -webkit-touch-callout:none !important;
}

.cmcs-source-monaco[data-cmcs-locked-viewer="1"] .cursor,
.cmcs-source-monaco[data-cmcs-locked-viewer="1"] textarea.inputarea {
    opacity:0 !important;
    caret-color:transparent !important;
}

.cmcs-source-monaco[data-cmcs-locked-viewer="1"] .selected-text,
.cmcs-source-monaco[data-cmcs-locked-viewer="1"] .selectionHighlight,
.cmcs-source-monaco[data-cmcs-locked-viewer="1"] .focused .selected-text {
    background:transparent !important;
}

.cmcs-source-monaco[data-cmcs-locked-viewer="1"] .cmcs-source-handler-hit {
    background:rgba(255,214,10,.20) !important;
}