/* Page composition only. Controls, cards, badges and type come from VI2. */
.pages { overflow-wrap:anywhere; }
.pages img { max-width:100%; }
.pages main { min-width:0; }
.pages .wrap { width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--space-8); }
.pages .section { padding-block:var(--space-16); border-top:1px solid var(--border); }
.pages .section-head { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:var(--space-6); margin-bottom:var(--space-8); }
.pages .section-head h2,.pages .page-head h1 { margin-block:var(--space-3); }
.pages .page-head { display:flex; justify-content:space-between; align-items:start; gap:var(--space-6); margin-bottom:var(--space-8); }
.pages .page-head p { color:var(--fg-secondary); }
.pages .site-header { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6); padding-block:var(--space-4); border-bottom:1px solid var(--border); }
.pages .site-nav { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-6); margin-left:auto; }
.pages .site-nav a { text-decoration:none; font-size:var(--font-size-13); color:var(--fg-secondary); min-height:44px; display:flex; align-items:center; }
.pages .site-nav a[aria-current] { color:var(--fg-primary); font-weight:600; }
.pages .site-actions { display:flex; gap:var(--space-2); align-items:center; }
.pages .menu-toggle { display:none; }
.pages .hero { display:grid; grid-template-columns:1.08fr 1fr; gap:var(--space-16); align-items:center; padding-block:var(--space-20); }
.pages .hero h1 { margin-block:var(--space-6); }
.pages .hero-copy .lead { max-width:32em; color:var(--fg-secondary); font-size:var(--font-size-17); }
.pages .hero-copy .button-row { margin-block:var(--space-8) var(--space-4); }
.pages .hero-paper { min-width:0; padding:var(--space-8); position:relative; border-top:4px solid var(--brand-amber); }
.pages .hero-paper h2 { margin-block:var(--space-6); }
.pages .hero-paper>.eyebrow { display:block; margin-top:var(--space-4); }
.pages .demo-report { padding-top:var(--space-6); }
.pages .report-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); margin-block:var(--space-8); }
.pages .report-kpis strong { display:block; font-size:var(--font-size-32); line-height:var(--line-height-32); font-weight:600; }
.pages .report-kpis span { font-size:var(--font-size-12); color:var(--fg-secondary); }
.pages .report-kpis small { font-size:var(--font-size-13); font-weight:400; }
.pages .report-line { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); padding-block:var(--space-3); border-top:1px solid var(--border); font-size:var(--font-size-13); }
.pages .three-col { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }
.pages .three-col .card { display:flex; flex-direction:column; align-items:start; gap:var(--space-4); }
.pages .three-col .card .button { margin-top:auto; }
.pages .model-strip { padding-block:var(--space-6); border-top:1px solid var(--border); }
.pages .model-line { display:grid; gap:var(--space-2); border-right:1px solid var(--border); padding-right:var(--space-6); }
.pages .model-line:last-child { border-right:0; }
.pages .health-strip { display:flex; flex-wrap:wrap; gap:var(--space-6); align-items:center; padding-block:var(--space-4); border-top:1px solid var(--border); font-size:var(--font-size-13); }
.pages .demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); }
.pages .demo-source { display:grid; gap:var(--space-6); align-content:start; }
.pages .demo-upload { padding:var(--space-6); border:1px dashed var(--border-control); border-radius:var(--radius-lg); background:var(--bg-subtle); }
.pages .demo-upload .field { margin-top:var(--space-4); }
.pages .demo-output { display:grid; align-content:start; gap:var(--space-6); }
.pages .demo-output .empty { padding-block:var(--space-8); }
.pages .process-list { margin:0; padding-left:var(--space-6); color:var(--fg-secondary); }
.pages .process-list li { margin-block:var(--space-3); }
.pages .progress-meter { width:100%; height:8px; accent-color:var(--fg-info); }
.pages .demo-progress { display:grid; gap:var(--space-6); padding-block:var(--space-6); }
.pages .service-strip { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-6); }
.pages .page-footer { display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; padding-block:var(--space-8); border-top:1px solid var(--border); font-size:var(--font-size-12); color:var(--fg-secondary); }
.pages .work-shell { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100dvh; }
.pages .work-sidebar { position:sticky; top:0; height:100dvh; }
.pages .side-section { display:grid; gap:var(--space-2); }
.pages .side-note { padding-block:var(--space-6); border-top:1px solid var(--border); }
.pages .side-note p { margin-top:var(--space-3); color:var(--fg-secondary); font-size:var(--font-size-13); }
.pages .workspace { padding:var(--space-8); max-width:1280px; margin-inline:auto; }
.pages .local-note { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); font-size:var(--font-size-12); color:var(--fg-secondary); margin-bottom:var(--space-6); }
.pages .work-overview { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-6); margin-bottom:var(--space-8); }
.pages .welcome-panel { border-top:3px solid var(--brand-amber); }
.pages .welcome-panel h2 { margin-bottom:var(--space-3); }
.pages .quick-stats { display:flex; flex-wrap:wrap; gap:var(--space-12); margin-top:var(--space-6); }
.pages .quick-stats strong { font-size:var(--font-size-32); display:block; }
.pages .quick-stats span { font-size:var(--font-size-13); color:var(--fg-secondary); }
.pages .sample-panel { display:flex; align-items:center; gap:var(--space-4); }
.pages .sample-panel .illustration { width:112px; height:96px; margin:0; flex:none; }
.pages .sample-panel p { margin-block:var(--space-3); }
.pages .task-tools { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--space-4); padding:var(--space-6); border-bottom:1px solid var(--border); }
.pages .filters { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.pages .filters [aria-pressed="true"] { background:var(--bg-active); border-color:var(--focus); }
.pages .task-table-head,.pages .task-row { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr) 24px; gap:var(--space-4); align-items:center; padding:var(--space-5) var(--space-6); }
.pages .task-table-head { background:var(--bg-subtle); font-size:var(--font-size-12); color:var(--fg-secondary); }
.pages .task-row { text-decoration:none; color:var(--fg-primary); border-top:1px solid var(--border); }
.pages .task-row:hover { background:var(--bg-hover); }
.pages .task-row .badge { justify-self:start; }
.pages .task-title p { margin-top:var(--space-2); font-size:var(--font-size-12); color:var(--fg-secondary); }
.pages .task-date { font-size:var(--font-size-13); color:var(--fg-secondary); }
.pages .task-row h3 { font-size:var(--font-size-15); }
.pages .back-link { display:inline-flex; align-items:center; gap:var(--space-2); min-height:44px; font-size:var(--font-size-13); margin-bottom:var(--space-4); }
.pages .detail-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,272px); gap:var(--space-6); align-items:start; }
.pages .content-stack { display:grid; gap:var(--space-6); min-width:0; align-content:start; }
.pages .form-section { padding:var(--space-8); display:grid; gap:var(--space-6); border-bottom:1px solid var(--border); }
.pages .form-section>p { color:var(--fg-secondary); }
.pages .date-fields { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.pages .upload-field { padding:var(--space-4); border:1px dashed var(--border-control); border-radius:var(--radius-md); }
.pages .upload-field input { margin-top:var(--space-2); }
.pages .upload-field .file-meta { margin-top:var(--space-2); }
.pages .form-actions { padding:var(--space-6) var(--space-8); }
.pages .optional-files summary,.pages .state-options summary { cursor:pointer; padding-block:var(--space-3); }
.pages .optional-files .field { margin-top:var(--space-4); }
.pages .info-list { margin:var(--space-4) 0 0; }
.pages .info-list>div { display:grid; gap:var(--space-1); margin-bottom:var(--space-4); }
.pages .info-list dt { font-size:var(--font-size-12); color:var(--fg-secondary); }
.pages .info-list dd { margin:0; font-size:var(--font-size-13); }
.pages .file-summary { margin-top:var(--space-4); display:flex; align-items:start; gap:var(--space-2); font-size:var(--font-size-13); }
.pages .file-summary span { display:block; }
.pages .review-summary { display:flex; flex-wrap:wrap; align-items:start; justify-content:space-between; gap:var(--space-4); padding:var(--space-6); border-bottom:1px solid var(--border); }
.pages .review-summary p { margin-top:var(--space-2); }
.pages .check-totals { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:start; }
.pages .review-action,.pages .narrative { padding:var(--space-6); border-top:1px solid var(--border); }
.pages .narrative { display:grid; gap:var(--space-4); }
.pages .review-action { background:var(--bg-subtle); }
.pages .review-action p { margin-top:var(--space-3); }
.pages .state-options { margin-bottom:var(--space-6); font-size:var(--font-size-13); }
.pages .state-options .button-row { margin-bottom:var(--space-4); }
.pages .result-banner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding:var(--space-8); background:var(--bg-success); border-radius:var(--radius-lg); }
.pages .result-banner .illustration { width:112px; height:96px; margin:0; }
.pages .result-banner h2 { margin-block:var(--space-3); }
.pages .output-files { padding:var(--space-6); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.pages .output-files .output-card { flex-wrap:wrap; }
.pages .output-files .output-card .file-meta { display:block; margin-top:var(--space-1); }
.pages .output-files .output-card .button { width:100%; }
.pages .checks-history summary { padding:var(--space-6); cursor:pointer; }
.pages .login-layout { display:grid; grid-template-columns:1.1fr 1fr; min-height:calc(100dvh - 81px); }
.pages .login-stage { display:grid; align-content:center; gap:var(--space-6); padding:var(--space-20) var(--space-16); background:var(--bg-subtle); border-right:1px solid var(--border); }
.pages .login-stage h1 { max-width:12em; }
.pages .login-stage>.badge { justify-self:start; }
.pages .login-form-panel { display:grid; place-items:center; padding:var(--space-12); }
.pages .login-form-wrap { width:100%; max-width:380px; display:grid; gap:var(--space-6); }
.pages .login-form-wrap form { display:grid; gap:var(--space-6); }
.pages .password-row { display:flex; gap:var(--space-2); }
.pages .password-row input { flex:1; }
.pages .pack-heading { padding-block:var(--space-16); max-width:850px; }
.pages .pack-heading h1 { margin-block:var(--space-6); }
.pages .pack-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:var(--space-12); padding-bottom:var(--space-16); }
.pages .pack-section { padding-block:var(--space-8); border-top:1px solid var(--border); }
.pages .pack-section h2 { margin-bottom:var(--space-6); }
.pages .input-spec { display:grid; grid-template-columns:1fr 2fr; gap:var(--space-6); padding-block:var(--space-4); border-bottom:1px solid var(--border); }
.pages .input-spec p { font-size:var(--font-size-13); color:var(--fg-secondary); }
.pages .screenshot-placeholder { min-height:240px; padding:var(--space-8); display:grid; place-content:center; text-align:center; gap:var(--space-4); border:1px dashed var(--border-control); border-radius:var(--radius-lg); background:var(--bg-subtle); }
.pages .index-controls { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6); padding-block:var(--space-6); }
.pages .board-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8); padding-bottom:var(--space-16); }
.pages .board-tile { padding:var(--space-4); }
.pages .board-thumb { display:block; background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; margin-bottom:var(--space-4); height:280px; }
.pages .board-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; }
.pages[data-board-size="390"] .board-thumb { max-width:260px; height:420px; margin-inline:auto; }
.pages .board-tile h2 { font-size:var(--font-size-20); }
.pages .board-tile p { margin-block:var(--space-2) var(--space-4); }
.pages .download-preview { max-width:850px; padding-block:var(--space-12); }
.pages .download-preview h1 { margin-block:var(--space-6); }
/* Batch 2: compositions share VI2 controls and semantic tokens. */
.pages .main-column { min-width:0; }
.pages .product-workspace { width:100%; }
.pages .product-heading { padding-block:var(--space-12) var(--space-8); }
.pages .product-heading h1 { margin-block:var(--space-4); text-wrap:balance; }
.pages .product-heading p { max-width:48em; }
.pages .product-section { margin-bottom:var(--space-8); }
.pages .product-section .section-head { margin-bottom:var(--space-4); }
.pages .metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); margin-block:var(--space-6); }
.pages .metric-value { display:block; font-size:var(--font-size-32); line-height:var(--line-height-32); margin-block:var(--space-3); }
.pages .data-table { width:100%; min-width:0; table-layout:fixed; }
.pages .data-table caption { text-align:left; padding:var(--space-4); color:var(--fg-secondary); font-size:var(--font-size-13); }
.pages .data-table th,.pages .data-table td { white-space:normal; vertical-align:top; overflow-wrap:anywhere; }
.pages .data-table .model-name { width:24%; }
.pages .data-table td .help { display:block; margin-top:var(--space-2); }
.pages .channel-label { font-size:var(--font-size-13); }
.pages .code-block { margin-block:var(--space-4); padding:var(--space-5); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-subtle); white-space:pre-wrap; overflow-wrap:anywhere; }
.pages .code-block code { font-family:ui-monospace,Consolas,monospace; }
.pages .usage-chart { display:block; width:100%; height:auto; color:var(--fg-info); }
.pages .usage-chart .chart-grid { stroke:var(--border); stroke-width:1; }
.pages .usage-chart text { fill:var(--fg-secondary); font:13px var(--font-system); }
.pages .usage-chart .chart-line { fill:none; stroke:currentColor; stroke-width:3; }
.pages .usage-chart .chart-area { fill:var(--bg-info); }
.pages .usage-chart circle { fill:var(--fg-info); }
.pages .chart-caption { margin-top:var(--space-4); }
.pages .desktop-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--space-8); align-items:start; margin-bottom:var(--space-12); }
.pages .desktop-intro { border-top:4px solid var(--brand-amber); }
.pages .desktop-intro h2 { margin-block:var(--space-6); }
.pages .desktop-intro .illustration { margin-inline:0; }
.pages .notify-card form { display:grid; gap:var(--space-4); margin-top:var(--space-6); }
.pages .notify-card p { margin-top:var(--space-4); }
.pages .status-legend { margin-bottom:var(--space-12); }
.pages .status-legend summary { cursor:pointer; padding-block:var(--space-3); }
.pages .status-legend dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); }
.pages .status-legend dd { margin:var(--space-3) 0 0; font-size:var(--font-size-13); color:var(--fg-secondary); }
.pages .docs-layout { display:grid; grid-template-columns:184px minmax(0,1fr); gap:var(--space-12); align-items:start; padding-bottom:var(--space-12); }
.pages .docs-toc { display:grid; gap:var(--space-2); position:sticky; top:var(--space-6); }
.pages .docs-toc a { min-height:44px; display:flex; align-items:center; }
.pages .doc-section { padding-bottom:var(--space-8); border-bottom:1px solid var(--border); scroll-margin-top:var(--space-6); }
.pages .doc-section h2 { margin-bottom:var(--space-4); }
.pages .doc-section p+p { margin-top:var(--space-4); }
.pages .doc-section h3 { margin-top:var(--space-6); }
@media (max-width:1023px) {
 .pages .work-shell { grid-template-columns:1fr; }
 .pages .work-sidebar { position:static; height:auto; padding:var(--space-4); }
 .pages .work-sidebar .brand,.pages .work-sidebar>.eyebrow,.pages .work-sidebar>.side-note { display:none; }
 .pages .work-sidebar .side-section { display:none; }
 .pages .work-sidebar[data-open="true"] .side-section { display:grid; }
 .pages .menu-toggle { display:inline-flex; }
 .pages .site-nav { display:none; width:100%; order:3; }
 .pages .site-nav[data-open="true"] { display:flex; }
 .pages .site-actions { margin-left:auto; }
 .pages .hero { gap:var(--space-8); }
 .pages .detail-layout { grid-template-columns:minmax(0,1fr) minmax(0,224px); }
 .pages .login-stage { padding:var(--space-12) var(--space-8); }
 .pages .docs-toc { position:static; }
}
@media (max-width:767px) {
 .pages .wrap { padding-inline:var(--space-4); }
 .pages .site-header { gap:var(--space-2); }
 .pages .site-header .brand span { display:none; }
 .pages .site-nav { gap:var(--space-4); }
 .pages .hero,.pages .demo-grid,.pages .three-col,.pages .work-overview,.pages .detail-layout,.pages .pack-layout,.pages .board-grid,.pages .login-layout { grid-template-columns:minmax(0,1fr); }
 .pages .hero { padding-block:var(--space-12); }
 .pages h1 { font-size:var(--font-size-32); line-height:var(--line-height-32); }
 .pages .hero-paper,.pages .form-section { padding:var(--space-6); }
 .pages .report-kpis { grid-template-columns:minmax(0,1fr); gap:var(--space-3); }
 .pages .report-kpis>div { min-width:0; display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); padding-bottom:var(--space-3); border-bottom:1px solid var(--border); }
 .pages .hero-paper>.badge { max-width:100%; white-space:normal; }
 .pages .section { padding-block:var(--space-12); }
 .pages .model-line { border-right:0; border-bottom:1px solid var(--border); padding-bottom:var(--space-4); }
 .pages .model-line:last-child { border-bottom:0; }
 .pages .workspace { padding:var(--space-6) var(--space-4); }
 .pages .page-head { flex-direction:column; gap:var(--space-2); }
 .pages .page-head .button-row { margin-top:var(--space-2); }
 .pages .task-table-head { display:none; }
 .pages .task-row { grid-template-columns:minmax(0,1fr) 24px; padding:var(--space-4); gap:var(--space-3); }
 .pages .task-title { grid-column:1/-1; }
 .pages .task-row .task-date { grid-column:1; grid-row:3; }
 .pages .task-row>.icon { grid-column:2; grid-row:2; }
 .pages .task-tools { padding:var(--space-4); }
 .pages .task-tools .field { width:100%; }
 .pages .date-fields,.pages .output-files { grid-template-columns:minmax(0,1fr); }
 .pages .quick-stats { gap:var(--space-8); }
 .pages .form-actions { padding:var(--space-6); }
 .pages .result-banner { padding:var(--space-6); }
 .pages .result-banner .illustration { width:72px; height:64px; flex:none; }
 .pages .login-stage { border-right:0; border-bottom:1px solid var(--border); padding:var(--space-8) var(--space-6); }
 .pages .login-stage .login-process { display:none; }
 .pages .login-form-panel { padding:var(--space-8) var(--space-6); }
 .pages .input-spec { grid-template-columns:1fr; gap:var(--space-2); }
 .pages .pack-heading { padding-block:var(--space-12); }
 .pages .board-thumb { height:180px; }
 .pages .metric-grid,.pages .desktop-layout,.pages .docs-layout,.pages .status-legend dl { grid-template-columns:minmax(0,1fr); }
 .pages .product-heading { padding-block:var(--space-8) var(--space-6); }
 .pages .data-table,.pages .data-table tbody,.pages .data-table tr,.pages .data-table td { display:block; width:100%; }
 .pages .data-table caption { display:block; width:100%; }
 .pages .usage-chart text { font-size:22px; }
 .pages .data-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .pages .data-table tr { padding:var(--space-4); border-top:1px solid var(--border); }
 .pages .data-table td { padding:var(--space-2) 0; border:0; }
 .pages .data-table td::before { content:attr(data-label); display:block; color:var(--fg-secondary); font-size:var(--font-size-12); margin-bottom:var(--space-1); }
 .pages .data-table td[colspan]::before { display:none; }
 .pages .docs-layout { gap:var(--space-6); }
 .pages .docs-toc { border-bottom:1px solid var(--border); padding-bottom:var(--space-4); }
 .pages .metric-grid { gap:var(--space-3); }
 .pages .metric-grid .card { padding:var(--space-4); }
}