/* EcoTracer demo pages 09 — shared headers, native workflow bodies.
   Opt-in only. page-frame.css remains the authority for page gutters.
   command-center-headers.css and command-header-rail.css own the header. */
.eco-demo-page .eco-demo-context-strip {
    display:flex; flex-wrap:wrap; gap:0; margin:1rem 0; padding:0;
    border:1px solid #55dfff40; border-radius:.65rem;
    background:linear-gradient(110deg,#0a3040,#082536); color:#e6f7ff;
    box-shadow:inset 0 1px #c4f6ff12;
}
.eco-demo-page .eco-demo-context-strip>div {
    --demo-accent:#52d9ff; flex:1 1 12rem; min-width:0;
    padding:.85rem 1rem; border-inline-start:2px solid var(--demo-accent);
}
.eco-demo-page .eco-demo-context-strip>div:nth-child(6n+2){--demo-accent:#55ee9b}
.eco-demo-page .eco-demo-context-strip>div:nth-child(6n+3){--demo-accent:#f5c84c}
.eco-demo-page .eco-demo-context-strip>div:nth-child(6n+4){--demo-accent:#bda7ef}
.eco-demo-page .eco-demo-context-strip>div:nth-child(6n+5){--demo-accent:#ffb181}
.eco-demo-page .eco-demo-context-strip>div:nth-child(6n){--demo-accent:#8faeff}
.eco-demo-page .eco-demo-context-strip dt {
    margin:0 0 .35rem; color:var(--demo-accent);
    font:700 .72rem/1.4 var(--eco-font-body,"Segoe UI",sans-serif);
    letter-spacing:.045em; text-transform:uppercase;
}
.eco-demo-page .eco-demo-context-strip dd {
    margin:0; color:#edfaff; font:700 1.1rem/1.4 var(--eco-font-body,"Segoe UI",sans-serif);
    overflow-wrap:anywhere;
}
.eco-demo-page .eco-demo-context-strip p {
    margin:.35rem 0 0; color:#bbd5e2; font:400 .78rem/1.5 var(--eco-font-body,"Segoe UI",sans-serif);
}
/* Presentation accents never determine the stored record's status. */
.eco-demo-page .eco-demo-context-strip dd:is(.critical,.error,.failed,.preview-blocked){color:#ffb0ab}
.eco-demo-page .eco-demo-context-strip dd:is(.warning,.running){color:#f5d684}
.eco-demo-page .eco-demo-context-strip dd:is(.healthy,.good,.completed,.success,.preview-ready){color:#87f5bd}
.eco-demo-page .eco-demo-lineage {
    display:flex; flex-wrap:wrap; align-items:center; gap:.65rem 1rem;
    margin:0 0 1rem; padding:.8rem 1rem; border:1px solid #55dfff30;
    border-radius:.65rem; background:#082536; color:#e6f7ff;
}
.eco-demo-page .eco-demo-lineage>div{flex:1 1 9rem;min-width:0}
.eco-demo-page .eco-demo-lineage strong{display:block;color:#ecfaff;font-size:1.15rem}
.eco-demo-page .eco-demo-lineage span{color:#b9d7e4;font-size:.8rem}
.eco-demo-page .eco-demo-lineage>i{color:#7bdcf4;font-style:normal}
.eco-demo-page :is(#calculation-period,#calculation-review,#saved-calculation-results,#environmental-records,#pd-route-title,#processing-register){scroll-margin-block-start:1.5rem}

/* Keep existing form submission and disabled states; align the visible controls. */
.eco-demo-page :is(.calc-button,.preview-button,.run-button) {
    box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
    gap:.55rem; min-height:2.75rem; max-width:100%; padding:.65rem .95rem;
    border:1px solid #52cbea8c; border-radius:.4rem;
    background:linear-gradient(145deg,#123d52,#062538); color:#e0f5ff;
    font:700 .8125rem/1.4 var(--eco-font-body,"Segoe UI",sans-serif);
    text-decoration:none; white-space:normal; text-align:center;
}
.eco-demo-page :is(.calc-button-primary,.preview-button-primary):not(:disabled) {
    background:linear-gradient(135deg,#83edfa,#39c9e5 80%); border-color:#74e6ff; color:#022030;
}
.eco-demo-page :is(.calc-button,.preview-button,.run-button):disabled {
    color:#a7bdcc; background:#102b3b; border-color:#647e8d; opacity:.72; cursor:not-allowed;
}
.eco-demo-page :is(.calc-button,.preview-button,.run-button):focus-visible {
    outline:2px solid #a9f1ff;outline-offset:3px;
}

/* The preview's ten-column table becomes one readable card per result. */
@container eco-app-frame (max-width:70rem) {
    .eco-demo-page.calculation-workflow-modern .preview-table-wrap{overflow:visible}
    .eco-demo-page.calculation-workflow-modern .preview-table,
    .eco-demo-page.calculation-workflow-modern .preview-table tbody{display:block;width:100%;min-width:0}
    .eco-demo-page.calculation-workflow-modern .preview-table thead{
        position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);
    }
    .eco-demo-page.calculation-workflow-modern .preview-table tr {
        display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
        margin:0 0 .85rem;border:1px solid #54d8fa45;border-radius:.55rem;background:#082536;
    }
    .eco-demo-page.calculation-workflow-modern .preview-table td {
        display:flex;flex-direction:column;align-items:flex-start;gap:.22rem;min-width:0;
        padding:.7rem .85rem;white-space:normal;text-align:left;overflow-wrap:anywhere;border-color:#54d8fa20;
    }
    .eco-demo-page.calculation-workflow-modern .preview-table td::before{
        content:attr(data-label);color:#95dcec;font-size:.72rem;font-weight:600;
    }
    .eco-demo-page.calculation-workflow-modern .preview-table td:first-child{grid-column:1/-1}
}
@container eco-app-frame (max-width:32.5rem) {
    .eco-demo-page .eco-demo-context-strip>div{flex-basis:100%;padding:.75rem .85rem}
    .eco-demo-page .eco-demo-lineage>i{display:none}
    .eco-demo-page.calculation-workflow-modern .preview-table tr{grid-template-columns:minmax(0,1fr)}
}
@media (forced-colors:active) {
    .eco-demo-page .eco-demo-context-strip,.eco-demo-page .eco-demo-lineage{background:Canvas;color:CanvasText;border-color:CanvasText}
    .eco-demo-page .eco-demo-context-strip :is(dt,dd,p){color:CanvasText}
    .eco-demo-page .eco-demo-context-strip>div{border-color:CanvasText}
}