/* Zoom to 400 Percent lab styles. Scoped under .zoom-lab so the module can be embedded elsewhere. */
.zoom-lab { display: grid; gap: 1.25rem; }
.zl-controls { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.zl-widths, .zl-fixes { border: 1px solid var(--border, #d1d9e0); border-radius: 10px; padding: 0.75rem 1.25rem 1rem; margin: 0; display: grid; gap: 0.5rem; align-content: start; }
.zl-widths legend, .zl-fixes legend { font-weight: 700; color: var(--heading, #0b3d5c); padding: 0 0.4rem; }
.zl-width-row, .zl-fix { display: flex; gap: 0.5rem; align-items: flex-start; }
.zl-width-row input, .zl-fix input { margin-top: 0.3rem; accent-color: var(--cta, #0c5a8a); flex-shrink: 0; }
.zl-frame-wrap { overflow-x: auto; padding: 0.25rem; }
.zl-frame { height: 320px; overflow: auto; container-type: inline-size; border: 6px solid #1f2937; border-radius: 14px; background: var(--bg, #fff); resize: none; box-sizing: content-box; }
.zl-frame:focus-visible { outline: none; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #0b3d5c; }
.zl-summary { margin: 0; font-weight: 700; color: var(--success, #1f6f43); }
.zl-summary-bad { color: var(--danger, #b3261e); }
.zl-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.zl-checks li { padding-left: 1.6rem; position: relative; }
.zl-checks li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.zl-ok::before { content: "\2713"; color: var(--success, #1f6f43); }
.zl-bad::before { content: "\2717"; color: var(--danger, #b3261e); }
.zl-bad { color: #7a1813; }
.zl-css-box h3 { margin-bottom: 0.5rem; }
.zl-css { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; padding: 0.75rem; border: 1px solid var(--input-border, #9aa7b8); border-radius: 10px; background: var(--bg-warm, #f8fafb); resize: vertical; }
.zl-css-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 0.75rem; }
.zl-copy-status { font-weight: 600; color: var(--success, #1f6f43); }
.zl-css { background: var(--input-bg, #fff); color: var(--ink, #1f2937); }