/* BitStream Visual 2.3.3 — full Storybook panels, true ad dimensions, paper-safe editor and CMS-controlled layout. */
:root{
  --public-pad:clamp(16px,var(--public-pad-setting,48px),80px);
  --page-gutter:var(--public-pad);
}
*{min-width:0}
html,body{max-width:100%;overflow-x:hidden}
img,svg,canvas,video{max-width:100%}

/* Public-page gutters come from CMS. Ad-active pages use the separate ad-page padding value. */
body:not(.editor-page) .site-header,
body:not(.editor-page) .hero,
body:not(.editor-page) .section,
body:not(.editor-page) .feature-grid,
body:not(.editor-page) .page-head,
body:not(.editor-page) .site-footer,
body:not(.editor-page) .compact-footer{padding-left:var(--public-pad)!important;padding-right:var(--public-pad)!important}
@media(min-width:1700px){
  body.side-ad-left-active:not(.editor-page),body.side-ad-right-active:not(.editor-page){--public-pad:clamp(12px,var(--ad-page-pad-setting,32px),64px)}
  .page-ad-layout.has-left{padding-left:calc(var(--ad-side) + var(--ad-gap))!important}
  .page-ad-layout.has-right{padding-right:calc(var(--ad-side) + var(--ad-gap))!important}
  body.side-ad-left-active:not(.editor-page) .site-header{padding-left:calc(var(--public-pad) + var(--ad-side) + var(--ad-gap))!important}
  body.side-ad-right-active:not(.editor-page) .site-header{padding-right:calc(var(--public-pad) + var(--ad-side) + var(--ad-gap))!important}
}
@media(max-width:1699px){body.side-ad-left-active:not(.editor-page),body.side-ad-right-active:not(.editor-page){--public-pad:clamp(16px,var(--public-pad-setting,48px),80px)}.ad-rail{display:none!important}.page-ad-layout{padding-left:0!important;padding-right:0!important}}

/* Tool directory: real thumbnails + useful copy without oversized cards. */
.tool-group{display:grid;gap:12px}
.tool-group-head h2{margin:0 0 4px!important;font-size:20px!important}.tool-group-head p{margin:0;color:#718096;font-size:12px;line-height:1.55}
.tool-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.tool-directory-grid>a.tool-directory-card{display:grid!important;grid-template-columns:116px minmax(0,1fr) 18px;align-items:center;gap:14px!important;padding:14px!important;min-height:110px;text-decoration:none;overflow:hidden}
.tool-directory-thumb{width:116px!important;height:76px!important;border-radius:10px!important;display:block!important;overflow:hidden;background:var(--tool-color,#eef4ff)!important}
.tool-directory-grid .tool-directory-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;display:block}
.tool-directory-copy{display:grid;gap:3px;align-content:center;min-width:0}.tool-directory-copy small{font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7d91aa}.tool-directory-copy h3{margin:0!important;font-size:14px!important;line-height:1.25;color:#18304d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool-directory-copy p{margin:0!important;font-size:10.5px!important;line-height:1.45!important;color:#738399!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tool-open-arrow{margin:0!important;justify-self:end}
.tool-thumb-v22{height:148px!important;padding:0!important;background:var(--tool-color,#eef4ff)!important}.tool-thumb-v22 img{width:100%!important;height:112px!important;object-fit:cover!important;display:block}.tool-thumb-v22 b{height:36px;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.template-library{grid-template-columns:repeat(4,minmax(0,1fr))!important}.template-card{width:100%;max-width:100%;overflow:hidden}.template-card>.row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-intro .tool-icon{overflow:hidden}.tool-intro .tool-icon img{width:100%;height:100%;padding:14px;object-fit:contain}.tool-detail-meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px auto 0}.tool-detail-meta span{border:1px solid #dde6f0;border-radius:999px;padding:6px 10px;font-size:10px;color:#64748b;background:#fff}

/* Editor chrome: v2.2 proportions and aligned brand/header. */
body.editor-page{--editor-rail:190px;--editor-tools:220px;overflow:hidden}
body.editor-page .site-header{padding-left:16px!important;padding-right:16px!important}
body.editor-page .editor-shell{max-width:100vw;overflow:hidden}
body.editor-page .editor-sidebar{padding:10px 8px!important}
body.editor-page .catalog-intro{font-size:14px!important;padding:4px 8px 8px!important}
body.editor-page .catalog-group-name{font-size:9.5px!important;padding:6px 8px 3px!important}
body.editor-page .visual-catalog button{font-size:11.5px!important;min-height:28px!important;padding:5px 8px!important;gap:5px;white-space:nowrap!important;overflow:hidden!important}
body.editor-page .visual-catalog .catalog-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.editor-page .catalog-lock{font-size:7.5px!important;flex:0 0 auto}
body.editor-page .inspector{min-width:0;overflow-x:hidden}
body.editor-page .inspector label{font-size:11.5px!important}
body.editor-page .editor-title-wrap{min-width:0}.editor-title-wrap #projectTitle{min-width:120px;max-width:520px;text-overflow:ellipsis}.editor-title-wrap #saveState{white-space:nowrap}
@media(min-width:1201px){body.editor-page{--editor-rail:190px;--editor-tools:220px}}
@media(max-width:1200px) and (min-width:901px){body.editor-page{--editor-rail:176px;--editor-tools:210px}.editor-title-wrap #saveState{display:none}}

/* Keep every visual inside a single design paper at 100% zoom. */
body.editor-page .editor-main>.canvas-wrap{overflow:hidden!important;padding:12px!important;display:flex;align-items:center;justify-content:center}
body.editor-page .editor-main>.canvas-wrap .canvas-card{width:min(100%,840px)!important;height:min(100%,720px);max-height:100%!important;overflow:hidden!important;margin:auto;box-sizing:border-box}
body.editor-page .editor-shell.learning-mode .canvas-card{height:100%!important;max-height:100%!important;padding:16px 18px!important;display:block!important;overflow:hidden!important}
body.editor-page .learning-host{height:100%;max-height:100%;overflow:hidden;display:flex;flex-direction:column}
body.editor-page .learning-host>.lab-header{flex:0 0 auto;margin-bottom:12px!important}
body.editor-page .learning-host>.lab-stage,body.editor-page #labStage{min-height:0;flex:1;overflow:hidden}
.lab-header h2{font-size:20px!important;margin:4px 0!important}.lab-header p{font-size:10.5px!important}.lab-header-icon{width:46px!important;height:46px!important}
.lab-scorebar{margin-bottom:12px!important;padding:10px 9px!important}.lab-scorebar>span{gap:2px!important}.lab-scorebar b{font-size:12px!important}
.maze-layout{height:calc(100% - 62px);min-height:0;grid-template-columns:minmax(240px,1.05fr) minmax(220px,.95fr)!important;gap:14px!important;align-items:start}.maze-board-wrap{height:100%;display:flex;flex-direction:column;min-height:0}.maze-board-wrap svg{width:100%;height:auto;max-height:400px!important;min-height:0}.maze-legend{margin-top:3px}.program-panel{height:100%;min-height:0}.program-list{min-height:120px!important;max-height:290px!important;overflow:auto!important}.program-panel>.row.gap{flex:0 0 auto}
.quiz-card{max-width:560px!important;margin:16px auto!important;padding:22px!important}.quiz-card h3{font-size:22px!important;margin:14px 0 20px!important}.quiz-answer{padding:11px!important}
.sequencer-scroll{max-height:390px}.typing-passage{max-height:190px!important;padding:16px!important}.typing-input{min-height:100px!important;max-height:150px}.flash-study-card{min-height:210px!important;padding:22px!important}.match-card{min-height:70px!important}

/* Storybook edits one page at a time; export still includes all pages in order. */
.story-panel-tabs{display:flex;gap:6px;overflow-x:auto;padding:0 0 8px;scrollbar-width:thin}.story-panel-tabs button{border:1px solid #dbe5f2;background:#f8fbff;color:#64748b;border-radius:999px;padding:6px 10px;font-size:9px;white-space:nowrap;cursor:pointer}.story-panel-tabs button.active{background:#eaf1ff;color:#2455b7;border-color:#94b6f0;font-weight:800}.storybook{display:grid;grid-template-columns:minmax(0,620px)!important;justify-content:center;align-items:start;height:calc(100% - 98px);min-height:0}.storybook .story-panel{height:100%;width:auto;max-width:100%;max-height:100%;aspect-ratio:340/270;justify-self:center;overflow:hidden;background:transparent}.storybook .story-panel-svg{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:fill}.storybook .panel-select{display:none}

/* Data Table is a paper view, not a horizontal spreadsheet scroller. */
.table-visual{width:100%;height:100%;overflow:hidden!important;padding:18px!important;display:flex;flex-direction:column;justify-content:center}.table-visual table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse}.table-visual th,.table-visual td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 8px!important}.table-page-note{margin-top:10px;text-align:center;font-size:9px;color:#8190a4;line-height:1.4}

/* Dashboard sidebar visually runs to the footer even when the running footer is enabled. */
.app-shell.modern-dashboard{align-items:stretch!important;background:linear-gradient(90deg,#071a38 0 260px,transparent 260px)!important}
.app-shell.modern-dashboard .sticky-sidebar{align-self:start}
body.has-running-footer .app-shell.modern-dashboard{min-height:calc(100vh - 66px - 31px)}
.free-plan-usage{padding:18px}.free-allowance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.free-allowance-card{border:1px solid #dfe7f1;border-radius:12px;padding:13px;background:#fbfdff}.free-allowance-card span{display:block;font-size:10px;color:#64748b}.free-allowance-card b{display:block;margin:5px 0 3px;font-size:18px;color:#123567}.free-allowance-card small{font-size:9.5px;color:#8795a8}.free-feature-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.free-feature-chips span{padding:6px 9px;border-radius:999px;background:#eef5ff;color:#416187;font-size:9px}

/* CMS free-plan controls stay readable and do not create horizontal overflow. */
.cms-card .free-feature-grid,.cms-card .free-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cms-card input,.cms-card select,.cms-card textarea{max-width:100%}.cms-card label{min-width:0}.cms-card .setting-row{min-width:0}

@media(max-width:1100px){
  .template-library{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tool-directory-grid{grid-template-columns:1fr!important}
  .free-allowance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  body.editor-page .editor-main>.canvas-wrap{padding:7px!important;overflow:auto!important}
  body.editor-page .editor-shell.learning-mode .canvas-card{height:auto!important;min-height:100%;overflow:visible!important}
  body.editor-page .learning-host{height:auto;overflow:visible}.maze-layout{height:auto;grid-template-columns:1fr!important}.maze-board-wrap svg{max-height:320px!important}.storybook{height:auto}.storybook .story-panel{width:100%;height:auto;aspect-ratio:340/270}.storybook .story-panel-svg{width:100%!important;height:100%!important}
  .app-shell.modern-dashboard{background:none!important}
}
@media(max-width:700px){
  :root{--public-pad:16px!important}
  body.side-ad-left-active:not(.editor-page),body.side-ad-right-active:not(.editor-page){--public-pad:16px!important}.template-library{grid-template-columns:1fr!important}.tool-directory-grid>a.tool-directory-card{grid-template-columns:86px minmax(0,1fr) 16px;padding:11px!important}.tool-directory-thumb{width:86px!important;height:64px!important}.tool-directory-copy h3{font-size:13px!important}.tool-directory-copy p{font-size:10px!important}.tool-thumb-v22{height:132px!important}.tool-thumb-v22 img{height:96px!important}
  .free-allowance-grid{grid-template-columns:1fr}.cms-card .free-feature-grid,.cms-card .free-action-grid{grid-template-columns:1fr}
  .site-header .brand{max-width:calc(100vw - 150px)}.site-header .brand span{overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:480px){.tool-directory-grid>a.tool-directory-card{grid-template-columns:72px minmax(0,1fr)}.tool-directory-thumb{width:72px!important;height:58px!important}.tool-open-arrow{display:none}.tool-directory-copy p{-webkit-line-clamp:1}}

@media print{.story-panel-tabs,.table-page-note{display:none!important}}

html[data-theme="dark"] .tool-detail-meta span,html[data-theme="dark"] .free-allowance-card{background:#101c2e;border-color:#2a3e59;color:#dbeafe}html[data-theme="dark"] .story-panel-tabs button{background:#13243b;border-color:#2a3e59;color:#a9bdd5}

.feature-switch-card{display:flex!important;align-items:flex-start!important;justify-content:space-between;gap:12px;border:1px solid #dfe7f1;border-radius:12px;padding:12px;background:#fbfdff;margin:0!important}.feature-switch-card>span{display:grid;gap:3px;min-width:0}.feature-switch-card b{font-size:11px;color:#203b59}.feature-switch-card small{font-size:9.5px;line-height:1.45;color:#7d8da0}.feature-switch-card input{width:auto!important;flex:0 0 auto;margin-top:2px}.free-action-card{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:end;gap:10px;border:1px solid #dfe7f1;border-radius:12px;padding:12px;background:#fbfdff}.free-action-card .switch-row{margin:0!important;align-self:center}.free-action-card>label:last-child{margin:0!important}.free-action-card input[type="number"]{width:100%!important}.tool-detail-meta span{display:grid;gap:2px}.tool-detail-meta b{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#8a99aa}
body.editor-page #labStatus{flex:0 0 auto;min-height:20px!important;margin-top:4px!important;padding:4px 0!important;font-size:10px!important}
@media(max-width:700px){.free-action-card{grid-template-columns:1fr}.feature-switch-card{padding:10px}}


/* v2.3.3 — CMS ad dimension preview and exact side-rail sizing. */
.ad-size-preview{display:flex;align-items:center;gap:16px;margin:12px 0 4px;padding:12px;border:1px solid #dfe7f1;border-radius:12px;background:#fbfdff}.ad-size-preview-creative{display:grid;place-items:center;flex:0 0 auto;width:90px;height:150px;max-width:120px;max-height:180px;border:1px dashed #7aa2df;border-radius:8px;background:linear-gradient(145deg,#edf4ff,#f8fbff);color:#315b9b;font-size:9px;font-weight:800;text-align:center;padding:6px}.ad-size-preview>div:last-child{display:grid;gap:4px;min-width:0}.ad-size-preview b{font-size:11px;color:#203b59}.ad-size-preview small{font-size:9.5px;line-height:1.5;color:#718096}
@media(max-width:700px){.ad-size-preview{align-items:flex-start}.ad-size-preview-creative{width:70px;height:110px}}