/* Screen tools share the site's restrained working interface. */
html:root[data-theme] body[data-page="tools"] .screenWorkspace{min-width:0;width:100%;color:var(--text-primary)}
html:root[data-theme] body[data-page="tools"] .screenModeTabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0 0 12px;border-bottom:1px solid var(--border)}
html:root[data-theme] body[data-page="tools"] .screenModeTabs button{min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-secondary);font:inherit;font-size:15px;box-shadow:none;cursor:pointer;transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease}
html:root[data-theme] body[data-page="tools"] .screenModeTabs button[aria-selected="true"]{border-color:var(--rezim-nav-accent,#315CFF);background:var(--surface);color:var(--text-primary)}
html:root[data-theme] body[data-page="tools"] .screenModeTabs button:focus-visible{outline:2px solid var(--rezim-nav-accent,#315CFF);outline-offset:3px}
html:root[data-theme] body[data-page="tools"] [data-screen-panel][hidden]{display:none!important}
html:root[data-theme] body[data-page="tools"] [data-screen-panel="audience"]{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start;min-width:0}
html:root[data-theme] body[data-page="tools"] [data-screen-panel="audience"] .screenCalculatorIntro{grid-column:1/-1;margin:0;padding:0;max-width:70ch;border:0;background:none}
html:root[data-theme] body[data-page="tools"] [data-screen-panel="audience"] .screenCalculatorIntro h4{font-size:20px;line-height:1.35;margin:0 0 10px}
html:root[data-theme] body[data-page="tools"] [data-screen-panel="audience"] .screenCalculatorIntro p{font-size:15px;line-height:1.55;margin:0;color:var(--text-secondary)}
html:root[data-theme] body[data-page="tools"] .screenWorkspace .screenCalculatorForm{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:0!important;gap:16px!important;min-width:0;background:transparent!important;border:0!important;box-shadow:none!important}
html:root[data-theme] body[data-page="tools"] .screenWorkspace .screenCalculatorForm label{min-width:0;font-size:14px!important;line-height:1.45}
html:root[data-theme] body[data-page="tools"] .screenWorkspace .screenCalculatorForm :is(input,select){min-width:0;width:100%;min-height:44px;padding:10px;font:inherit;font-size:15px!important;border-radius:6px;box-sizing:border-box}
html:root[data-theme] body[data-page="tools"] .screenWorkspace .screenCalculatorForm .wide{grid-column:1/-1}
html:root[data-theme] body[data-page="tools"] .screenWorkspace .screenCalculatorResult{min-width:0;margin:0!important;padding:20px!important;max-width:100%;box-shadow:none!important}
@media(max-width:1100px){html:root[data-theme] body[data-page="tools"] [data-screen-panel="audience"]{grid-template-columns:1fr}}
@media(max-width:540px){html:root[data-theme] body[data-page="tools"] .screenModeTabs{display:grid;grid-template-columns:1fr;gap:6px}html:root[data-theme] body[data-page="tools"] .screenModeTabs button{text-align:left}html:root[data-theme] body[data-page="tools"] .screenWorkspace .screenCalculatorResult{padding:16px!important}}
@media(prefers-reduced-motion:reduce){.screenModeTabs button{transition:none!important}}

[data-screen-panel="audience"] > form{grid-column:1;grid-row:2}[data-screen-panel="audience"] > [data-screen-result]{grid-column:2;grid-row:2 / span 2}[data-screen-panel="audience"] > .calculationSaveStatus{grid-column:1;grid-row:3}
@media(max-width:1100px){[data-screen-panel="audience"] > form,[data-screen-panel="audience"] > [data-screen-result],[data-screen-panel="audience"] > .calculationSaveStatus{grid-column:1;grid-row:auto}}
/* Each view has its own coordinate system; no intrinsic 320px sibling can
   squeeze the screen illustration inside a narrow result column. */
html:root[data-theme] body[data-page="tools"] .screenTechnicalViews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0;background:transparent;gap:16px;container-type:inline-size}
html:root[data-theme] body[data-page="tools"] .screenTechnicalViews :is(.screenFrontView,.screenSightlineView){display:block;position:relative;min-width:0;min-height:0;margin:0;padding:12px!important;background:var(--surface)!important;border:1px solid var(--border);overflow:visible}
html:root[data-theme] body[data-page="tools"] .screenTechnicalViews figcaption{position:static;font-size:14px;line-height:1.5;color:var(--text-secondary);margin:0 0 8px;overflow-wrap:anywhere}
html:root[data-theme] body[data-page="tools"] .screenTechnicalSvg{display:block;width:100%;height:auto;overflow:visible}
html:root[data-theme] body[data-page="tools"] .screenTechnicalSvg text{fill:var(--text-primary);font:18px Manrope,Arial,sans-serif}
html:root[data-theme] body[data-page="tools"] .screenTechnicalSvg .screenDiagramMuted{fill:var(--text-muted);font-size:16px}
html:root[data-theme] body[data-page="tools"] .screenDiagramDisplay{fill:var(--accent);fill-opacity:.18;stroke:var(--accent);stroke-width:2}
html:root[data-theme] body[data-page="tools"] .screenDiagramLine{fill:none;stroke:var(--text-muted);stroke-width:1.5}
html:root[data-theme] body[data-page="tools"] .screenDiagramBeam{fill:var(--accent);fill-opacity:.1;stroke:var(--border);stroke-width:1}
@container(max-width:650px){.screenTechnicalViews>figure{grid-column:1/-1}}
@media(max-width:760px){html:root[data-theme] body[data-page="tools"] .screenTechnicalViews{grid-template-columns:minmax(0,1fr)}}
html:root[data-theme] body[data-page="tools"] .screenBuildAction{display:grid;gap:12px;margin:0;padding:16px 0;border-block:1px solid var(--border)}
html:root[data-theme] body[data-page="tools"] .screenBuildAction .button{justify-self:start;min-height:48px}
html:root[data-theme] body[data-page="tools"] .screenBuildAction p{margin:0;font-size:13px;line-height:1.5;color:var(--text-muted)}
html:root[data-theme] body[data-page="tools"] .screenCalculatorForm label{display:flex;flex-direction:column;justify-content:flex-end}
html:root[data-theme] body[data-page="tools"] .screenWorkspace .screenResultContent{background:transparent!important;gap:16px}
html:root[data-theme] body[data-page="tools"] .screenTechnicalViews{padding:0!important}
html:root[data-theme] body[data-page="tools"] .screenWorkspace .screenCalculatorForm :is(input,select){height:44px;min-height:44px;padding:9px 10px}