/* Explorer interactive demo — intentionally a finite simulation on sample data. */
.demo-page{background:#fafbf7;min-height:100vh;color:var(--ink)}
.demo-header{position:relative}.demo-header-actions{gap:24px}.demo-back{font-size:12px;color:#345044;font-weight:650;white-space:nowrap}.demo-back:hover{text-decoration:underline;text-underline-offset:4px}
.demo-main{padding-top:57px;padding-bottom:80px}.demo-introduction{display:flex;gap:30px;justify-content:space-between;align-items:end;margin-bottom:35px}.demo-introduction>.demo-tagline{align-self:end;margin-bottom:7px;flex:0 1 270px}.demo-introduction .eyebrow{font-size:10px;letter-spacing:.16em;margin:0 0 19px;display:flex;gap:9px;align-items:center;color:#5b705e;font-weight:730}.demo-introduction h1{font-size:clamp(36px,4.5vw,64px);font-weight:650;letter-spacing:-.053em;line-height:1.06;max-width:870px;margin:0 0 20px}.demo-intro-text{font-size:15px;line-height:1.75;color:#63746b;max-width:800px;margin:0}.demo-tagline{background:#eff3e8;border:1px solid #dce5d4;border-radius:10px;padding:15px 17px;display:flex;gap:9px;color:#536c57;font-size:11px;line-height:1.55}.demo-smallmark{color:#7b9b64}
.demo-app-window{background:#fff;border:1px solid #dee6dc;border-radius:20px;box-shadow:0 28px 80px rgba(35,60,43,.08);display:grid;grid-template-columns:235px minmax(0,1fr);overflow:hidden;min-height:690px}
.demo-side{background:#192e28;color:#e7f0e8;padding:27px 17px;display:flex;flex-direction:column;min-width:0}.demo-side-brand{font-size:26px;letter-spacing:-.072em;font-weight:760;padding:0 13px 25px}.demo-side-brand span{color:#b8d68f}.demo-company-box{display:flex;gap:10px;align-items:center;background:#284238;border:1px solid #355346;border-radius:10px;padding:12px 10px;min-width:0}.demo-company-icon{flex:0 0 35px;height:35px;background:#d7e5ba;color:#203729;border-radius:10px;display:grid;place-items:center;font-size:18px;font-weight:760}.demo-company-box strong{font-size:11px;display:block;line-height:1.35}.demo-company-box small{display:block;color:#b2c6b8;font-size:10px;line-height:1.5;margin-top:4px}.demo-side-menu{margin-top:44px;display:grid;gap:8px}.demo-side-label{font-size:9px;color:#83a18e;letter-spacing:.15em;text-transform:uppercase;margin:0 14px 8px}.demo-menu-entry{color:#a9bfb1;border-radius:8px;padding:11px 12px;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:560}.demo-menu-entry.active{color:#e9f4ea;background:#365543}.demo-menu-icon{color:#b2d49a;font-size:17px;width:19px;text-align:center}.demo-side-footer{margin-top:auto;font-size:9px;letter-spacing:.11em;color:#9abb9c;padding:20px 13px 3px;display:flex;gap:7px;align-items:center}.demo-live-dot{width:6px;height:6px;border-radius:99px;background:#c0d9a2}
.demo-workspace{background:#fdfefa;min-width:0}.demo-toolbar{padding:19px 30px;border-bottom:1px solid #e6ebe3;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px}.demo-breadcrumb{color:#85938b}.demo-chevron{padding:0 11px;color:#9ca99f}.demo-mode{border:1px solid #d9e6d0;background:#eef5e5;color:#4b6d43;padding:6px 9px;border-radius:5px;font-size:9px;letter-spacing:.1em;white-space:nowrap}.demo-work-content{padding:27px 30px 25px}.demo-label{display:block;text-transform:uppercase;letter-spacing:.105em;color:#8b9b90;font-size:9px;font-weight:780;line-height:1.55}
.demo-role-line{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:25px}.demo-role-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.demo-role-tabs button{background:#eff2ec;border:1px solid transparent;border-radius:8px;padding:9px 14px;font-size:11px;font-weight:650;color:#5b695f}.demo-role-tabs button.active{color:#fff;background:#244237;box-shadow:0 2px 8px rgba(0,0,0,.07)}.demo-role-tabs button:hover:not(.active){background:#e2ebe0}.demo-role-description{color:#65796d;font-size:12px;line-height:1.55;max-width:290px;margin:0;text-align:right}
.demo-job-card,.demo-stock,.demo-action-card,.demo-history{border:1px solid #e2e9df;background:white;border-radius:13px}.demo-job-card{padding:22px 23px 19px}.demo-job-head{display:flex;justify-content:space-between;gap:15px;align-items:start}.demo-job-head h2{font-size:21px;letter-spacing:-.03em;line-height:1.25;font-weight:700;margin:6px 0 0;max-width:500px}.demo-job-status{background:#eef3e5;color:#4e704c;padding:7px 10px;border-radius:7px;font-size:10px;white-space:nowrap;font-weight:720}.demo-job-info{display:grid;grid-template-columns:1fr 1.3fr .8fr;gap:20px;margin-top:24px;padding-top:16px;border-top:1px solid #edf1eb}.demo-job-info small{display:block;color:#8a9a90;font-size:10px;margin-bottom:7px}.demo-job-info strong{font-size:11px;font-weight:650;line-height:1.5;display:block}
.demo-stock{padding:22px 23px 17px;margin-top:16px}.demo-stock-title{display:flex;justify-content:space-between;align-items:center;gap:15px}.demo-stock-title h3{font-size:15px;margin:4px 0 0;font-weight:720;letter-spacing:-.015em}.demo-unit-tag{font-size:10px;font-weight:750;padding:5px 9px;color:#5c7b53;background:#eaf1e2;border-radius:7px}.demo-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}.demo-metric{background:#f6f8f3;border:1px solid #eef2eb;border-radius:10px;padding:13px 13px 12px;min-width:0}.demo-metric.used{background:#eef4e7}.demo-metric>span{display:block;color:#65786a;font-size:10px;min-height:25px;line-height:1.3}.demo-metric strong{display:inline-block;font-size:31px;letter-spacing:-.05em;margin-top:6px;line-height:1;font-weight:750}.demo-metric small{font-size:10px;color:#708371;margin-left:6px}.demo-stock-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e7eee4;padding-top:14px;margin-top:17px;gap:12px;font-size:11px;color:#607368}.demo-stock-bottom strong{font-size:14px;color:#244338}
.demo-lower-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;margin-top:16px}.demo-action-card{padding:22px;min-width:0;min-height:280px}.demo-card-top{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#819489}.demo-step-dots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:13px;margin-bottom:24px}.demo-step-dots i{height:5px;background:#e8efe5;border-radius:99px}.demo-step-dots i.complete{background:#82a477}.demo-action-card h3{font-size:20px;line-height:1.25;letter-spacing:-.03em;margin:0 0 8px;font-weight:690}.demo-action-card>p:not(.demo-micro-help){color:#617469;font-size:12px;line-height:1.7;min-height:59px;margin:0}.demo-action-bar{display:flex;align-items:stretch;gap:9px;flex-wrap:wrap;margin-top:19px}.demo-main-action{font-size:11px;padding:12px 16px;min-height:42px;border-radius:8px;justify-content:center;flex:1 1 auto;display:flex;gap:12px;align-items:center}.demo-main-action:disabled{opacity:.52;cursor:default;transform:none}.demo-switch-action{padding:12px 15px;font-size:11px;min-height:42px;border-radius:8px;border:1px solid #9db4a1;background:white;color:#29543b;font-weight:710}.demo-switch-action:hover{background:#eaf2e9}.demo-micro-help{font-size:10px!important;color:#95a197!important;line-height:1.65!important;margin-top:15px!important;min-height:0!important}.demo-finish-notice{display:flex;gap:9px;align-items:start;background:#eff6e9;border-radius:9px;color:#4a7145;margin-top:15px;padding:10px 12px;font-size:11px;line-height:1.5}
.demo-history{padding:21px;min-height:280px}.demo-history-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid #edf0e9;padding-bottom:12px}.demo-history-heading h3{font-size:13px;margin:0}.demo-history-heading span{font-size:10px;color:#91a195}.demo-events{list-style:none;padding:13px 0 0;margin:0;display:grid;gap:0;max-height:250px;overflow:auto}.demo-event{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start;padding-bottom:16px;font-size:11px;line-height:1.45;color:#445b4c}.demo-event:not(:last-child) .demo-event-dot:after{content:'';position:absolute;width:1px;background:#dce9d8;height:30px;top:7px;left:5px}.demo-event-dot{position:relative;width:11px;height:11px;background:#c8d9bd;border:3px solid #fff;box-shadow:0 0 0 1px #9db798;border-radius:50%;margin-top:1px}.demo-event:first-child .demo-event-dot{background:#6a9369;box-shadow:0 0 0 1px #6a9369}.demo-bottomline{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:17px}.demo-bottomline p{font-size:10px;color:#8a978e;margin:0}.demo-reset{font-size:10px;color:#4a6955;padding:8px 2px;white-space:nowrap;font-weight:720}.demo-reset:hover{text-decoration:underline;text-underline-offset:3px}
.demo-final-disclaimer{font-size:11px;line-height:1.6;color:#819185;margin-top:17px;text-align:center}.demo-pilot{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #e3eae0;padding:26px 0 0;margin-top:28px;font-size:12px;color:#76897a}.demo-pilot a{border:1px solid #b5c8b4;padding:11px 17px;border-radius:8px;color:#2d5942;font-weight:700}.demo-pilot a:hover{background:#e8f0e5}
.demo-page [hidden]{display:none!important}
@media(max-width:1080px){.demo-app-window{grid-template-columns:190px minmax(0,1fr)}.demo-side{padding-inline:12px}.demo-work-content{padding:21px}.demo-toolbar{padding:16px 21px}.demo-lower-grid{grid-template-columns:1fr}.demo-history{min-height:0}.demo-events{max-height:150px}.demo-introduction>.demo-tagline{flex-basis:230px}}
@media(max-width:760px){.demo-main{padding-top:35px}.demo-introduction{display:block}.demo-introduction h1{font-size:clamp(36px,7.8vw,56px)}.demo-tagline{margin-top:25px;margin-bottom:0;max-width:none}.demo-app-window{grid-template-columns:1fr}.demo-side{display:none}.demo-work-content{padding:18px}.demo-toolbar{padding:14px 18px}.demo-job-info{grid-template-columns:1fr 1fr;gap:14px}.demo-role-line{display:block}.demo-role-description{text-align:left;margin-top:13px}.demo-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-intro-text{font-size:14px}.demo-header-actions{gap:12px}.demo-back{font-size:11px}}
@media(max-width:420px){.demo-introduction h1{font-size:36px}.demo-introduction .eyebrow{font-size:9px}.demo-work-content{padding:12px}.demo-job-card,.demo-stock,.demo-action-card,.demo-history{padding:17px}.demo-job-head h2{font-size:18px}.demo-job-info{grid-template-columns:1fr}.demo-role-tabs button{font-size:10px;padding:9px 11px}.demo-metric strong{font-size:29px}.demo-bottomline{align-items:start;flex-direction:column}.demo-pilot{flex-direction:column;align-items:start}.demo-header .header-inner{width:calc(100% - 28px)}.demo-back{font-size:10px}}
@media(prefers-reduced-motion:reduce){.demo-page *{scroll-behavior:auto!important;transition:none!important}}

/* Keep the keyboard skip target outside the document until focused (also in full-page captures). */
.demo-page .skip-link{position:absolute;top:-160px;transform:none}
.demo-page .skip-link:focus{top:10px;z-index:100}

/* v2.3: make the role workspaces and left-side navigation genuinely interactive. */
.demo-side-menu button.demo-menu-entry{width:100%;text-align:left;border:0;cursor:pointer;line-height:1.35;background:transparent;font-family:inherit}
.demo-side-menu button.demo-menu-entry.active{background:#365543;color:#e9f4ea}
.demo-side-menu button.demo-menu-entry:hover:not(.active){background:#29463b;color:#fff}
.demo-side-menu button.demo-menu-entry:focus-visible,.demo-role-tabs button:focus-visible{outline:3px solid #c9e5a2;outline-offset:2px}
.demo-persona-card{padding:22px 24px;margin-bottom:16px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(230px,1fr);align-items:center;gap:16px;border:1px solid #dce6d6;background:#f1f6ec;border-radius:13px;transition:background .2s}
.demo-persona-copy h2{font-size:23px;letter-spacing:-.035em;line-height:1.18;margin:7px 0 8px;font-weight:730}
.demo-persona-copy p{color:#587064;font-size:12px;line-height:1.65;max-width:420px;margin:0}
.demo-persona-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.demo-persona-metrics>div{padding:12px 7px;background:#fff;border:1px solid #e0e9d9;border-radius:9px;min-width:0}
.demo-persona-metrics span{display:block;font-size:9px;line-height:1.35;color:#607567;min-height:26px}
.demo-persona-metrics strong{display:block;font-size:24px;line-height:1.2;color:#223b31;margin-top:5px}
.demo-app-window[data-active-role="technician"] .demo-persona-card{background:#edf3f9;border-color:#d8e3eb}
.demo-app-window[data-active-role="technician"] .demo-persona-metrics>div{border-color:#dce6ee}
.demo-app-window[data-active-role="manager"] .demo-persona-card{background:#1d3930;border-color:#1d3930;color:#f3f8f0}
.demo-app-window[data-active-role="manager"] .demo-persona-copy .demo-label{color:#b3d6ab}
.demo-app-window[data-active-role="manager"] .demo-persona-copy p{color:#c7ded0}
.demo-app-window[data-active-role="manager"] .demo-persona-metrics>div{background:#2b4b3c;border-color:#456751}
.demo-app-window[data-active-role="manager"] .demo-persona-metrics span{color:#c8dbc9}
.demo-app-window[data-active-role="manager"] .demo-persona-metrics strong{color:#fff}
.demo-inventory-detail{border:1px solid #e1e8dc;background:#fff;border-radius:13px;padding:22px 23px;margin-top:16px}
.demo-inventory-detail h3{font-size:23px;letter-spacing:-.03em;margin:6px 0}
.demo-inventory-detail p{font-size:12px;color:#62786a;line-height:1.7;margin:0 0 18px}
.demo-location-rows{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.demo-location-rows>div{border-radius:10px;border:1px solid #e2e9de;background:#f6f8f3;padding:16px 13px}
.demo-location-rows span{display:block;color:#667a6d;font-size:11px;line-height:1.5;min-height:32px}
.demo-location-rows strong{display:block;color:#213c31;font-size:29px;margin-top:5px}
.demo-app-window[data-pane="activity"] .demo-lower-grid{display:block}
.demo-app-window[data-pane="activity"] .demo-action-card{display:none}
.demo-app-window[data-pane="activity"] .demo-history{margin-top:0;min-height:260px}
.demo-app-window[data-pane="activity"] .demo-history-heading h3{font-size:23px}
.demo-app-window[data-pane="activity"] .demo-events{max-width:100%}
[hidden]{display:none!important}
@media(max-width:1000px){.demo-persona-card{grid-template-columns:1fr;gap:18px}.demo-persona-metrics{max-width:600px}}
@media(max-width:700px){.demo-persona-card{padding:18px 17px}.demo-persona-copy h2{font-size:21px}.demo-persona-metrics strong{font-size:21px}.demo-persona-metrics span{font-size:9px}.demo-location-rows{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-side-menu button.demo-menu-entry{justify-content:center}}
@media(max-width:420px){.demo-persona-metrics{gap:4px}.demo-persona-metrics>div{padding:10px 6px}.demo-persona-metrics span{font-size:8px}.demo-location-rows{gap:7px}}

.demo-mobile-panes{display:none}
.demo-app-window[data-active-role="manager"][data-pane="job"] #demo-job-card{display:none}
@media(max-width:760px){
 .demo-mobile-panes{display:flex;gap:7px;overflow-x:auto;margin:-3px 0 18px;padding:2px 0}
 .demo-mobile-panes button{flex:1 0 auto;border:1px solid #d7e3d4;border-radius:9px;color:#45614e;background:#f1f5ef;font-weight:660;font-size:11px;padding:10px 8px;min-height:42px}
 .demo-mobile-panes button.active{background:#274838;border-color:#274838;color:#fff}
 .demo-mobile-panes button:focus-visible{outline:3px solid #b6d7aa;outline-offset:2px}
}