.code-card { display:flex; flex-direction:column; height:100%; min-height:0; padding:5px 10px; background:var(--color-surface-card); border-radius:var(--r-md); color:var(--text-2); font-family:var(--app-font-code); }
.has-html-preview pre { flex:1; min-height:0; overflow:auto; }
/* clip prevents native focus scrolling the larger internal iframe viewport. */
.html-preview { position:relative; display:block; flex:1; min-height:120px; width:100%; border:0; background:transparent; overflow:clip; }
.html-preview-frame { position:absolute; left:0; top:0; width:390px; height:844px; min-width:0; min-height:0; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; transform-origin:top left; }
.html-preview[hidden],.code-card pre[hidden] { display:none; }
.composer-stage .html-preview { pointer-events:none; }
.published-layout-stage .html-preview { pointer-events:auto; }
.code-card pre { flex:1; min-height:0; margin:0; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; tab-size:2; font-family:var(--app-font-code);font-size:var(--app-text-1125);font-weight:var(--app-weight-400);line-height:var(--app-leading-155); }
.code-card code { font:inherit; user-select:text; }
.published-layout-stage .composer-block a,.published-layout-stage .composer-block button,.published-layout-stage .composer-block[role="button"] { pointer-events:auto; }
#composerCodeSource { width:100%; min-height:44px; padding:8px 9px; border:0; border-radius:var(--r-md); background:var(--input); color:var(--text); font-family:var(--app-font-code);font-size:var(--app-text-0812);font-weight:var(--app-weight-400);line-height:var(--app-leading-155); white-space:pre-wrap; overflow-wrap:anywhere; tab-size:2; }
#composerCodeControls { display:grid; gap:12px; }
#composerCodeControls[hidden] { display:none; }
.layout-mobile .code-card { padding:5px 10px; }
.layout-mobile .code-card pre { font-size:var(--app-text-0875); }
@media print { .code-card { color:#111; background:transparent; } }

/* The editor frame owns its size; app measurements only size the reader. */
.composer-stage .has-html-preview { min-width:0; min-height:0; overflow:hidden; }
.composer-stage .html-preview { flex:1 1 0; min-width:0; min-height:0!important; height:0; }

/* Embedded apps occupy exactly the authored box, without editor chrome. */
.composer-stage .has-html-preview,.published-layout-stage .has-html-preview { padding:0; min-width:0; min-height:0; background:transparent; border-radius:0; overflow:hidden; }
.published-layout-stage .html-preview { flex:1 1 0; min-width:0; min-height:0; height:0; }