/* Purpose-based composition. Native nodes, events, form values, theme and
   saved preferences stay untouched. Smaller viewports use the native layout. */
@media(min-width:1280px){
html[data-page-layout="purpose"] .app:not([data-sidebar-collapsed="true"]){--workspace-navigation-width:200px}
html[data-page-layout="purpose"] .sidebar{padding-inline:10px}
html[data-page-layout="purpose"] .nav-workflow-group{padding-block:5px}
html[data-page-layout="purpose"] .nav-workflow-panel a{min-height:34px;padding-block:7px}
html[data-page-layout="purpose"] .nav-attention{padding:10px;margin-block:10px}
html[data-page-layout="purpose"] .workspace{padding:20px;gap:20px}
/* Documents: one operational canvas, with selected work permanently adjacent. */
html[data-page-layout="purpose"][data-active-view="documents"] #documents{padding:0;border:0;background:transparent}
html[data-page-layout="purpose"] .documents-header{padding:0 0 16px;margin:0;border:0}
html[data-page-layout="purpose"] .documents-header h1{font-size:26px;margin:0 0 4px}
html[data-page-layout="purpose"] .document-workflow-steps{min-height:36px;padding:6px 12px;margin:0 0 12px}
html[data-page-layout="purpose"] .documents-summary{display:flex;gap:0;margin:0 0 16px;border-block:1px solid var(--line);background:var(--surface-quiet)}
html[data-page-layout="purpose"] .documents-summary>div{flex:1;min-height:52px;padding:10px 16px;display:flex;align-items:center;border:0;border-right:1px solid var(--line);background:none}
html[data-page-layout="purpose"] .documents-summary>div>span{display:flex;gap:16px;align-items:center}
html[data-page-layout="purpose"] .documents-summary strong{font-size:22px}
html[data-page-layout="purpose"] .documents-layout.documents-has-folders{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto minmax(0,1fr);gap:0 20px;align-items:start}
html[data-page-layout="purpose"] .documents-layout>.documents-folders{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:20px;min-height:48px;padding:8px 12px;margin:0 0 16px;border:1px solid var(--line);background:var(--surface-quiet)}
html[data-page-layout="purpose"] .documents-folders :is(h2,h3,p){margin:0}
html[data-page-layout="purpose"] .documents-folders [role=tree]{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html[data-page-layout="purpose"] .documents-folders>label{margin-left:auto;white-space:nowrap}
html[data-page-layout="purpose"] .documents-main{grid-column:1;grid-row:2;min-width:0;background:var(--surface);border:1px solid var(--line);padding:12px}
html[data-page-layout="purpose"] .documents-tabs{padding:0 0 8px}
html[data-page-layout="purpose"] .documents-toolbar{margin:0 0 12px;gap:8px}
html[data-page-layout="purpose"] .documents-table :is(th,td){padding:12px 8px}
html[data-page-layout="purpose"] .documents-layout>.documents-inspector{grid-column:2;grid-row:2;align-self:start;position:sticky;top:96px;max-height:calc(100vh - 116px);overflow:auto;background:var(--surface-quiet);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column}
html[data-page-layout="purpose"] .documents-inspector>:is(small,h2,.documents-status,.documents-filename){order:-3}
html[data-page-layout="purpose"] .documents-inspector>.documents-next-step{order:-1}
html[data-page-layout="purpose"] .documents-inspector>dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block:16px}
html[data-page-layout="purpose"] .documents-inspector>section{padding-block:12px;margin:0;border-top:1px solid var(--line)}
html[data-page-layout="purpose"] .documents-inspector-actions{order:-2;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-block:12px;background:var(--surface-quiet)}
html[data-page-layout="purpose"] .documents-folders>button{flex:0 0 auto;width:auto}
html[data-page-layout="purpose"] .documents-folders>ul{display:flex;gap:12px;margin:0;padding:0;list-style:none}
/* Editor: queue stays tall on the left; edit and evidence share the right. */
html[data-page-layout="purpose"][data-active-view="editor"] .workspace{padding:0;gap:0}
html[data-page-layout="purpose"][data-active-view="editor"]:not([data-inline-editor="true"]) #editor.workbench:has(#editor-panel[data-editor-mode="bilingual"]){grid-template-columns:minmax(500px,1.05fr) minmax(480px,1fr);grid-template-rows:auto 208px minmax(0,1fr) 32px;grid-template-areas:"ribbon ribbon" "workbook active" "workbook inspector" "status status"}
html[data-page-layout="purpose"][data-active-view="editor"] #editor>.segment-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);min-width:0;border-right:1px solid var(--line-strong)}
html[data-page-layout="purpose"][data-active-view="editor"] #editor>.segment-panel:has(>#editor-document-tabs:not([hidden])){grid-template-rows:auto 44px auto minmax(0,1fr)}
html[data-page-layout="purpose"][data-active-view="editor"] #segment-operational-filters{grid-row:1;grid-column:1;min-height:48px;flex-wrap:wrap;align-items:center;padding:10px;gap:6px}
html[data-page-layout="purpose"] #segment-operational-filters :is(button,summary){white-space:nowrap}
html[data-page-layout="purpose"] #segment-operational-filters .editor-quick-search{flex:1 1 180px;max-width:none;min-width:160px}
html[data-page-layout="purpose"][data-active-view="editor"] #editor-workbook-navigation{grid-column:1;grid-row:2;display:flex;flex-direction:row;align-content:start;align-items:center;flex-wrap:wrap;gap:8px;padding:8px;border-right:0;border-bottom:1px solid var(--line);max-height:100px;overflow:auto}
html[data-page-layout="purpose"][data-active-view="editor"] .segment-panel:has(>#editor-document-tabs:not([hidden]))>#editor-workbook-navigation{grid-row:3}
html[data-page-layout="purpose"] #editor-workbook-navigation>section{display:flex;align-items:center;gap:6px;border:0;padding:0}
html[data-page-layout="purpose"] #editor-workbook-navigation :is(h3,h4){margin:0;font-size:11px}
html[data-page-layout="purpose"][data-active-view="editor"] .segment-panel>.segment-list{grid-column:1;grid-row:3;min-height:0}
html[data-page-layout="purpose"][data-active-view="editor"] .segment-panel:has(>#editor-document-tabs:not([hidden]))>.segment-list{grid-row:4}
html[data-page-layout="purpose"][data-active-view="editor"] #editor-panel[data-editor-mode="bilingual"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:34px minmax(100px,1fr) 40px;border-bottom:1px solid var(--line-strong);background:var(--surface-quiet)}
html[data-page-layout="purpose"][data-active-view="editor"] #editor-panel[data-editor-mode="bilingual"]>.source-box{padding:14px;min-width:0}
html[data-page-layout="purpose"][data-active-view="editor"] #editor-panel>.editor-actions{padding:6px 14px}
html[data-page-layout="purpose"][data-active-view="editor"] #insight-panel.unified-inspector{display:flex;flex-direction:column;border-left:0;min-width:0;scroll-padding-top:184px;overflow:auto;overflow-anchor:none}
html[data-page-layout="purpose"][data-active-view="editor"] #insight-panel>*{flex:0 0 auto;min-width:0}
html[data-page-layout="purpose"][data-active-view="editor"] #insight-panel>.tabs{order:-3;position:sticky;top:0;z-index:3;gap:4px;padding:10px;border-block:1px solid var(--line-strong);background:var(--surface)}
html[data-page-layout="purpose"][data-active-view="editor"] #insight-panel>.editor-candidate-summary{order:-2;position:sticky;top:54px;z-index:2;max-height:90px;overflow:auto;background:var(--surface)}
html[data-page-layout="purpose"][data-active-view="editor"] #insight-panel>.insight-tab-panel{order:1}
/* Keep panel order stable; the insight controller scrolls the selected panel below the sticky navigation. */
html[data-page-layout="purpose"][data-active-view="editor"] #insight-panel>.tabs .tab{min-height:32px;padding:6px 10px}
html[data-page-layout="purpose"][data-active-view="editor"] #insight-panel>.insight-tab-panel{scroll-margin-top:104px;padding:16px}
/* Import: sequence is a vertical rail; source and options occupy one canvas. */
html[data-page-layout="purpose"] #imports.file-auto-import{grid-template-columns:176px minmax(0,1fr) 300px;grid-template-areas:"nav nav nav" "steps intro intro" "steps source settings" "steps selection settings" "steps results results" "steps footer footer";grid-template-rows:auto auto auto auto auto auto}
html[data-page-layout="purpose"] #imports.file-auto-import[data-file-settings=false]{grid-template-columns:176px minmax(0,1fr);grid-template-areas:"nav nav" "steps intro" "steps source" "steps selection" "steps results" "steps footer"}
html[data-page-layout="purpose"] .file-auto-import .file-workflow-rail{align-self:stretch;padding:28px 16px;border-right:1px solid var(--line);background:var(--surface-quiet)}
html[data-page-layout="purpose"] .file-auto-import .file-workflow-rail ol{flex-direction:column;gap:28px}
html[data-page-layout="purpose"] .file-auto-import .file-workflow-rail li{flex:none;align-items:flex-start}
html[data-page-layout="purpose"] .file-auto-import .file-workflow-rail li:not(:last-child):after{content:none}
html[data-page-layout="purpose"] .file-auto-import .file-import-dropzone{min-height:240px;align-items:flex-start;text-align:left;padding:28px}
html[data-page-layout="purpose"] .file-auto-import .file-import-drop-help{justify-content:flex-start}
html[data-page-layout="purpose"] .file-import-settings{margin-right:20px;padding:20px}
html[data-page-layout="purpose"] #imports[data-column-stage="open"]{display:block}
html[data-page-layout="purpose"] .file-column-layout{grid-template-columns:minmax(0,1fr)}
html[data-page-layout="purpose"] .file-column-main{grid-template-columns:minmax(360px,.9fr) minmax(400px,1.1fr);gap:20px;align-items:start}
html[data-page-layout="purpose"] .file-column-main>.file-column-method{grid-column:1/-1}
html[data-page-layout="purpose"] .file-column-main>.file-column-roles{grid-column:1;grid-row:2}
html[data-page-layout="purpose"] .file-column-main>.file-column-preview{grid-column:2;grid-row:2;position:sticky;top:96px;min-width:0}
html[data-page-layout="purpose"] .file-column-sidebar{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* Delivery: persistent left target form; readiness and history on the right. */
html[data-page-layout="purpose"][data-active-view="exports"] #exports{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px 24px;padding:24px}
html[data-page-layout="purpose"][data-active-view="exports"] #exports>.export-head{grid-column:1/-1;margin:0;padding-bottom:16px;border-bottom:1px solid var(--line)}
html[data-page-layout="purpose"][data-active-view="exports"] #export-job-message{grid-column:1/-1;margin:0}
html[data-page-layout="purpose"][data-active-view="exports"] #export-job-form{grid-column:1;grid-row:3;display:flex;flex-direction:column;align-items:stretch;gap:16px;position:sticky;top:96px;align-self:start;padding:20px;border:1px solid var(--line);background:var(--surface-quiet);margin:0}
html[data-page-layout="purpose"][data-active-view="exports"] #export-job-form select{width:100%;max-width:none}
html[data-page-layout="purpose"][data-active-view="exports"] #exports>.export-layout{grid-column:2;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;min-width:0;margin:0}
html[data-page-layout="purpose"] .export-layout>:is(.export-gates,.export-history,.export-detail){grid-column:1;padding:20px;border:1px solid var(--line)}
html[data-page-layout="purpose"] .export-history{order:2}
/* The native file-first export controller inserts its own scope/preview nodes. */
html[data-page-layout="purpose"][data-active-view="exports"] #exports.file-workflow-export{grid-template-columns:360px minmax(0,1fr);grid-template-areas:"nav nav" "intro intro" "steps steps" "head message" "target report" "scope report" "preview preview" "footer footer";grid-template-rows:none;align-content:start;padding:0;gap:16px 20px}
html[data-page-layout="purpose"] #exports.file-workflow-export>.file-workflow-nav{grid-area:nav}
html[data-page-layout="purpose"] #exports.file-workflow-export>.file-workflow-intro{grid-area:intro;padding:8px 24px}
html[data-page-layout="purpose"] #exports.file-workflow-export>.file-workflow-intro h2{font-size:26px}
html[data-page-layout="purpose"] #exports.file-workflow-export>.file-workflow-rail{grid-area:steps;display:flex;gap:24px;align-items:start;padding:16px 24px;border-block:1px solid var(--line);border-right:0;background:var(--surface-quiet)}
html[data-page-layout="purpose"] #exports .file-workflow-rail ol{display:flex;flex:1;gap:24px}
html[data-page-layout="purpose"] #exports .file-workflow-rail li{flex:1;min-height:50px}
html[data-page-layout="purpose"] #exports .file-workflow-rail li:after{content:none}
html[data-page-layout="purpose"] #exports .file-workflow-rail section{max-width:280px;margin:0;padding:0;border:0}
html[data-page-layout="purpose"][data-active-view="exports"] #exports.file-workflow-export>.export-head{grid-area:head;margin:0 0 0 24px;padding:0;border:0}
html[data-page-layout="purpose"][data-active-view="exports"] #exports.file-workflow-export>#export-job-message{grid-area:message;padding:0 24px;margin:0;align-self:center}
html[data-page-layout="purpose"] #exports.file-workflow-export>.file-template-banner{grid-area:target;display:flex;flex-wrap:wrap;gap:12px;align-items:start;padding:20px;margin:0 0 0 24px;background:var(--surface-quiet);border:1px solid var(--line)}
html[data-page-layout="purpose"] #exports.file-workflow-export>.file-document-selection{grid-area:scope;margin:0 0 0 24px;padding:20px;border:1px solid var(--line);align-self:start}
html[data-page-layout="purpose"] #exports .file-documents{flex-direction:column;align-items:stretch}
html[data-page-layout="purpose"][data-active-view="exports"] #exports.file-workflow-export>.export-layout{grid-area:report;margin:0 24px 0 0;align-content:start}
html[data-page-layout="purpose"] #exports.file-workflow-export>.file-export-preview{grid-area:preview}
html[data-page-layout="purpose"] #exports.file-workflow-export>.file-workflow-footer{grid-area:footer;margin-top:0}
/* Public landing: value/entry first, wide tangible example, then steps/roles. */
html[data-page-layout="purpose"] body:has(.site-header) main{padding-top:32px}
html[data-page-layout="purpose"] .hero{grid-template-columns:minmax(0,1fr);gap:28px}
html[data-page-layout="purpose"] .hero>div{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);column-gap:64px;align-items:start}
html[data-page-layout="purpose"] .hero .eyebrow{grid-column:1/-1}
html[data-page-layout="purpose"] .hero h1{grid-column:1;grid-row:2/span 2;max-width:none;font-size:clamp(42px,3.8vw,58px);line-height:1.2;margin:0;word-break:keep-all}
html[data-page-layout="purpose"] .hero .lead{grid-column:2;grid-row:2;margin:0;font-size:17px}
html[data-page-layout="purpose"] .hero .actions{grid-column:2;grid-row:3;margin-top:20px}
html[data-page-layout="purpose"] .rail{margin:0;border-radius:0;box-shadow:none}
html[data-page-layout="purpose"] .segment-context{display:grid;grid-template-columns:1fr 1fr}
html[data-page-layout="purpose"] .segment-context>div{min-height:88px;grid-template-columns:100px minmax(0,1fr);align-items:center}
html[data-page-layout="purpose"] .segment-context dd{font:600 15px/1.6 var(--ui)}
html[data-page-layout="purpose"] .compatibility{margin:20px 0 0;padding:14px 0;border-bottom:1px solid var(--line)}
html[data-page-layout="purpose"] #workflow{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;margin-top:48px}
html[data-page-layout="purpose"] #workflow .section-heading{display:block}
html[data-page-layout="purpose"] #workflow h2{font-size:28px}
html[data-page-layout="purpose"] .workflow{display:grid;grid-template-columns:1fr 1fr;border:0;background:transparent;gap:0}
html[data-page-layout="purpose"] .workflow article{padding:20px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-page-layout="purpose"] #roles .roles{display:flex;gap:32px;border:0;background:transparent}
html[data-page-layout="purpose"] .roles article{flex:1;border-top:3px solid var(--teal);padding:20px 0}
}