/* Shared published/editor component styling, built on existing theme tokens. */
.bl-component{--bl-series-0:#246db8;--bl-series-1:#cf7416;--bl-series-2:#087a59;--bl-series-3:#8256b4;--bl-series-4:#bd4454;--bl-series-5:#47758a;color:var(--l2l-text,#17233b);background:var(--l2l-surface,#fff)}
.bl-component *{box-sizing:border-box}.bl-component [hidden],[data-bl-tabs] [hidden]{display:none!important}
.bl-component .public-wrap{max-width:1180px;margin:auto;padding:32px clamp(18px,5%,64px)}
.bl-component h2{font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.2;letter-spacing:-.025em;margin:0 0 1.2rem}
.bl-component p,.bl-component li{line-height:1.65;overflow-wrap:anywhere}.bl-component :is(input,textarea,select,button){font:inherit;color:var(--l2l-text);background:var(--l2l-surface-raised);border:1px solid var(--l2l-control-border);border-radius:8px;padding:10px;max-width:100%;min-height:44px}
.bl-component :is(button,summary){cursor:pointer}.bl-component :is(button,input,select,textarea,a,summary,[tabindex]):focus-visible,[data-bl-tabs] button:focus-visible{outline:3px solid var(--l2l-focus);outline-offset:3px}
.bl-component label{display:block;font-weight:600;margin:12px 0}.bl-component label :is(input:not([type=range]),textarea,select){display:block;width:100%;margin-top:6px}.bl-component fieldset{border:1px solid var(--l2l-border);border-radius:12px;padding:20px;min-width:0}
.bl-component :is(details,fieldset){margin:12px 0}.bl-component summary{padding:14px;font-weight:650;border:1px solid var(--l2l-control-border);border-radius:8px;background:var(--l2l-surface-soft)}.bl-component details>p,.bl-component details>dl{padding:0 14px}
.bl-component output{display:block;margin:12px 0;white-space:pre-wrap}.bl-component small{display:block;color:var(--l2l-text-muted);margin-top:12px}
.bl-component :is(img,video,audio,svg){max-width:100%}.bl-component :is(video,audio){display:block;width:100%}.bl-component img{height:auto;border-radius:12px}.bl-component figure{margin:0;min-width:0}.bl-component figcaption{padding:8px 0;color:var(--l2l-text-muted)}
.bl-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center}.bl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.bl-table{overflow:auto;max-width:100%;border:1px solid var(--l2l-border);border-radius:12px}.bl-table table{width:100%;border-collapse:collapse;text-align:left}.bl-table :is(th,td){padding:14px;border-bottom:1px solid var(--l2l-border);vertical-align:top;min-width:130px;overflow-wrap:anywhere}.bl-table th{background:var(--l2l-surface-soft);color:inherit}.bl-table caption{padding:12px;text-align:left;font-weight:650}.bl-table button{width:100%;text-align:left}
.bl-component dl>div{padding:14px 0;border-bottom:1px solid var(--l2l-border)}.bl-component dt{font-weight:750}.bl-component dd{margin:8px 0}.bl-objectives li{padding:12px 0}.bl-bars>div{display:grid;grid-template-columns:minmax(80px,1fr) 3fr minmax(40px,auto);gap:14px;align-items:center;margin:16px 0}.bl-bars meter{width:100%;height:24px;accent-color:var(--l2l-brand-600)}
.bl-line_chart svg{width:100%;max-height:300px;color:var(--l2l-brand-600)}.bl-pie{display:block;height:230px;margin:auto;transform:rotate(-90deg)}
.bl-image-compare{position:relative;min-height:120px}.bl-image-compare figure img{display:block;width:100%}.bl-image-compare .bl-before{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}.bl-image-compare .bl-before img{height:100%;object-fit:cover}.bl-image-compare figcaption{position:absolute;bottom:8px;left:8px;background:var(--l2l-surface);padding:5px 12px;border-radius:8px}
.bl-hotspot-image{position:relative}.bl-hotspot-image>span{position:absolute;transform:translate(-50%,-50%);background:var(--l2l-brand-600);color:var(--l2l-on-action);border:2px solid var(--l2l-surface);width:32px;height:32px;text-align:center;line-height:28px;border-radius:50%;font-weight:800}
.bl-component object{width:100%;height:65vh;min-height:300px;border:1px solid var(--l2l-border)}.bl-profile{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px}.bl-profile img{width:160px;aspect-ratio:1;object-fit:cover}.bl-resources{list-style:none;padding:0;display:grid;gap:16px}.bl-resources li{border:1px solid var(--l2l-border);border-radius:12px;padding:20px}.bl-resources span{display:block;color:var(--l2l-text-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.bl-formula{text-align:center;font-family:var(--l2l-font-mono);font-size:clamp(1.5rem,4vw,2.3rem);padding:24px;background:var(--l2l-surface-soft);border-radius:12px}.bl-component pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:var(--l2l-code);color:var(--l2l-code-text);border-radius:10px}.bl-source{background:var(--l2l-code);color:var(--l2l-code-text);padding:20px 20px 20px 55px;border-radius:12px}.bl-source li{white-space:pre-wrap;font-family:var(--l2l-font-mono);padding-left:10px}.bl-actions{display:flex;gap:12px;flex-wrap:wrap}.bl-preserve{white-space:pre-wrap}.bl-empty{padding:24px;background:var(--l2l-surface-soft);border:1px dashed var(--l2l-control-border);border-radius:12px}
[data-bl-tabs] [role=tablist]{display:flex;gap:8px;overflow:auto;margin-bottom:18px;padding:4px}[data-bl-tabs] [role=tab]{padding:12px 20px;border:1px solid var(--l2l-control-border);border-radius:8px;background:var(--l2l-surface);color:var(--l2l-text);white-space:nowrap}[data-bl-tabs] [aria-selected=true]{background:var(--l2l-brand-600);color:var(--l2l-on-action)}
/* Component controls sit above the editor selection overlay. */
.vb-section .vb-extended-preview :is(button,input,textarea,select,summary,a,[tabindex]){position:relative;z-index:2}.vb-extended-preview>.bl-component{padding:0}.vb-extended-preview{min-height:100px}.vb-preview-error{color:var(--l2l-danger);padding:24px}.vb-preview-loading{padding:24px;color:var(--l2l-text-muted)}
@media(max-width:680px){.bl-split,.bl-profile{grid-template-columns:1fr}.bl-bars>div{grid-template-columns:1fr}.bl-component .public-wrap{padding:24px 18px}.bl-cards{grid-template-columns:1fr}}
/* Device previews follow their canvas width as well as the browser viewport. */
.vb-page-canvas{container-type:inline-size}@container(max-width:680px){.bl-split,.bl-profile{grid-template-columns:1fr}.bl-cards{grid-template-columns:1fr}.bl-bars>div{grid-template-columns:1fr}}
/* Scope tone variables so controls remain readable inside an authored dark section. */
.bl-component:is(.tone-dark,.tone-blue){--l2l-text:#edf5ff;--l2l-text-muted:#adc0d8;--l2l-surface:#0f2035;--l2l-surface-raised:#152942;--l2l-surface-soft:#1a304a;--l2l-border:#304862;--l2l-control-border:#6b829d;--l2l-focus:#f2a93b;--l2l-brand-600:#62aaf2;--l2l-on-action:#081524;background:var(--l2l-surface);color:var(--l2l-text)}
.bl-component.tone-blue{--l2l-surface:#0e2b54;--l2l-surface-raised:#153b6c;--l2l-surface-soft:#153b6c}
.bl-component.tone-soft{background:var(--l2l-surface-soft)}
.bl-component a{color:var(--l2l-brand-600)}
.bl-component.width-narrow>.public-wrap{max-width:820px}.bl-component.width-full>.public-wrap{max-width:none}
.bl-component.align-center{text-align:center}.bl-component.space-compact>.public-wrap{padding-block:18px}.bl-component.space-spacious>.public-wrap{padding-block:65px}
/* IT workbenches share native keyboard controls and theme tokens. */
.bl-component form[data-it-tool] fieldset{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem;border:1px solid var(--border,#8994a3);padding:1rem;border-radius:.5rem}
.bl-component form[data-it-tool] label{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.bl-component form[data-it-tool] textarea{width:100%;box-sizing:border-box;resize:vertical;font:inherit;background:var(--l2l-surface,#fff);color:var(--l2l-text,#182238);border:1px solid var(--border,#8994a3);border-radius:.3rem;padding:.6rem}
.bl-component form[data-it-tool] pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:1rem;border:1px solid var(--border,#8994a3);max-height:38rem;overflow:auto}
.bl-component form[data-it-tool] :focus-visible{outline:3px solid var(--brand,#176acf);outline-offset:3px}

.bl-image-dialog{max-width:94vw;max-height:92vh;padding:1rem;border:1px solid var(--l2l-border);border-radius:12px;background:var(--l2l-surface);color:var(--l2l-text)}.bl-image-dialog::backdrop{background:#000a}.bl-image-dialog img{display:block;max-width:88vw;max-height:72vh;object-fit:contain}.bl-image-dialog button,.public-gallery [data-bl-zoom]{padding:.6rem 1rem;min-height:44px}.bl-flashcards .bl-actions{align-items:center;margin:1rem 0}