.demo-main { padding-top:57px; padding-bottom:63px; }
.demo-intro { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.demo-intro .eyebrow { color:#6d8066; font-size:12px; }
.demo-intro h1 { margin-top:21px; font-size:51px; line-height:1.25; font-weight:550; letter-spacing:-.055em; }
.demo-intro>div>p:last-child { margin-top:21px; font-size:16px; color:#63755d; line-height:1.85; }
.demo-reset { display:flex; gap:17px; align-items:center; border:1px solid #ccd8c0; background:transparent; border-radius:24px; padding:12px 16px; font-size:12px; color:#627458; white-space:nowrap; }
.demo-reset:hover { background:#e7edde; }
.demo-disclosure { margin-top:29px; font-size:12px; line-height:1.85; color:#65775e; padding:15px 18px; border:1px solid #dbe4d0; background:#edf2e6; border-radius:5px; }
.scenario-strip { margin-top:34px; padding:21px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:26px; }
.scenario-strip>div { display:flex; gap:17px; align-items:center; }
.scenario-id { font-size:10px; color:#899b7a; }
.scenario-strip strong { font-size:15px; font-weight:550; letter-spacing:-.02em; }
.scenario-strip>div>span:last-child { font-size:12px; color:#7c8d6f; }
.previous-link { background:transparent; border:0; display:flex; align-items:center; gap:16px; font-size:12px; color:#678052; padding:7px 0; }
.demo-step-nav { margin:28px 0 0; }
.demo-step-nav ol { display:grid; grid-template-columns:repeat(4,1fr); padding:0; list-style:none; margin:0; border-bottom:1px solid #d3deca; }
.demo-step-nav li { min-width:0; }
.demo-step { display:flex; gap:10px; align-items:center; justify-content:center; width:100%; border:0; border-bottom:2px solid transparent; background:none; color:#7a8b6e; padding:16px 6px; font-size:14px; white-space:nowrap; margin-bottom:-1px; }
.demo-step>span { font-size:11px; color:#8b9e7c; }
.demo-step:disabled { color:#a0ad96; cursor:default; }
.demo-step.is-current { color:var(--teal); border-color:var(--teal); font-weight:550; }
.demo-step.is-current>span { color:var(--teal); }
.demo-step.is-visited { color:#6b815e; }
.demo-workbench { display:grid; grid-template-columns:1.7fr 1fr; background:white; border:1px solid #d4decb; border-radius:8px; margin-top:25px; overflow:hidden; box-shadow:0 16px 45px -35px #314f3526; }
.demo-stage-area { min-width:0; }
.demo-stage { padding:35px 37px 31px; min-height:600px; }
.stage-kicker { color:#7a906a; font-size:11px; font-weight:500; letter-spacing:.01em; }
.stage-heading h2 { font-size:25px; line-height:1.45; letter-spacing:-.04em; font-weight:550; margin-top:10px; outline-offset:7px; }
.stage-heading>p { color:#6c7f5f; font-size:14px; line-height:1.85; margin-top:11px; }
.demo-stage form { margin-top:26px; }
.field-label { display:block; font-size:13px; color:#60784f; font-weight:500; margin-bottom:10px; }
.demo-stage textarea,.demo-stage input:not([type=checkbox]) { width:100%; border:1px solid #cddac1; background:#fbfcf8; border-radius:4px; padding:13px 14px; font:inherit; font-size:14px; line-height:1.85; color:#284c37; resize:vertical; }
.demo-stage textarea { min-height:90px; }
.demo-stage textarea:focus,.demo-stage input:focus { outline:2px solid #a6bc81; outline-offset:2px; border-color:#a6bc81; }
.field-hint { font-size:12px; line-height:1.8; color:#7b8c6e; margin-top:9px; }
.sample-photo-button { display:flex; align-items:center; gap:9px; border:1px solid #d3dfc6; color:#647f50; font-size:13px; background:#f6f9f0; padding:11px 15px; border-radius:4px; margin-top:19px; }
.sample-photo-button[aria-pressed=true] { background:#e8f0dc; border-color:#b5c99d; }
.sample-photo { margin:18px 0 0; }
.photo-open { display:block; width:100%; border:0; padding:0; background:transparent; position:relative; overflow:hidden; border-radius:4px; }
.photo-open img { display:block; width:100%; height:150px; object-fit:cover; object-position:70% center; }
.photo-open>span { position:absolute; bottom:9px; right:9px; background:#f5f5f0ed; color:#365b3a; border-radius:3px; padding:7px 10px; font-size:11px; }
.sample-photo figcaption { margin-top:8px; color:#829373; font-size:11px; line-height:1.7; }
.stage-actions { margin-top:31px; padding-top:23px; border-top:1px solid #e0e7d8; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.stage-actions>span { font-size:11px; line-height:1.8; color:#839574; }
.stage-actions .button { font-size:13px; min-height:48px; padding:0 20px; gap:22px; }
.back-button { background:transparent; border:0; font-size:12px; color:#6d835e; padding:10px 0; }
.demo-summary { background:#f5f8ef; border-left:1px solid #dce5d1; padding:32px 28px; }
.summary-top { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.summary-top .stage-kicker { font-size:10px; }
.summary-status { background:#e8eddb; color:#667c43; padding:5px 8px; font-size:10px; border-radius:3px; white-space:nowrap; }
.demo-summary h2 { font-size:22px; line-height:1.5; font-weight:550; letter-spacing:-.035em; margin-top:20px; }
.summary-location { margin-top:9px; color:#7f926d; font-size:12px; line-height:1.7; }
.summary-list { display:grid; gap:20px; margin:28px 0 0; padding:23px 0; border-top:1px solid #dce5d0; border-bottom:1px solid #dce5d0; }
.summary-list>div { display:grid; grid-template-columns:48px 1fr; gap:10px; font-size:13px; line-height:1.8; }
.summary-list dt { color:#8a9b79; }
.summary-list dd { margin:0; color:#5f7652; overflow-wrap:anywhere; }
.summary-sources { margin-top:24px; }
.summary-sources .field-label { font-size:11px; color:#859775; }
.summary-sources>div { display:flex; flex-wrap:wrap; gap:7px; }
.source-open { border:1px solid #d5e0c7; border-radius:3px; background:white; color:#718a5c; font-size:11px; padding:9px 10px; }
.previous-record { margin-top:28px; border:1px solid #cfdcbe; border-radius:5px; background:#edf3e2; padding:18px; width:100%; text-align:left; }
.previous-record>span { display:block; color:#8c9f78; font-size:10px; }
.previous-record>strong { display:flex; justify-content:space-between; gap:15px; font-size:15px; margin-top:10px; font-weight:500; color:#526e3e; }
.previous-record>small { display:block; font-size:11px; line-height:1.8; color:#7e9468; margin-top:13px; }
.summary-footer { font-size:11px; color:#859875; line-height:1.85; margin-top:24px; }
.demo-endnote { font-size:12px; color:#7a8e6b; line-height:1.85; text-align:center; margin-top:23px; }
.original-note { margin-top:23px; background:#f6f8f0; border:1px solid #dce5cf; border-radius:4px; }
.original-note summary { display:flex; justify-content:space-between; font-size:12px; color:#71855f; cursor:pointer; padding:13px 15px; list-style:none; }
.original-note summary::-webkit-details-marker { display:none; }
.original-note>p { padding:0 15px 15px; color:#718162; font-size:13px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.draft-fields { display:grid; gap:18px; }
.draft-fields label { font-size:13px; color:#60784f; font-weight:500; }
.draft-fields input,.draft-fields textarea { display:block; margin-top:9px; }
.draft-state { margin-top:24px; display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-top:1px solid #e2e9d8; border-bottom:1px solid #e2e9d8; gap:20px; }
.draft-state>span { font-size:12px; color:#829570; }
.draft-state>strong { background:#edf0de; color:#718545; font-size:12px; font-weight:500; padding:7px 9px; border-radius:3px; }
.demo-record-timeline { padding:0; list-style:none; margin:28px 0 30px 4px; }
.demo-record-timeline li { position:relative; padding:0 0 22px 24px; }
.demo-record-timeline li:before { content:''; position:absolute; left:0; top:12px; bottom:0; width:1px; background:#d5dfc9; }
.demo-record-timeline li:last-child:before { display:none; }
.demo-record-timeline li:after { content:''; position:absolute; left:-3px; top:5px; width:7px; height:7px; border-radius:50%; background:#99b184; }
.demo-record-timeline time,.demo-record-timeline .record-time { font-size:10px; color:#849775; display:block; }
.demo-record-timeline h3 { font-size:16px; line-height:1.6; color:#456638; font-weight:500; margin-top:7px; }
.demo-record-timeline p { color:#6c825e; font-size:13px; line-height:1.85; margin-top:7px; white-space:pre-wrap; overflow-wrap:anywhere; }
.followup-action { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:12px; }
.inline-feedback { font-size:12px; color:#6f865f; line-height:1.8; }
.inline-feedback.is-error { color:#94643d; }
.small-action { border:1px solid #bcccaa; border-radius:4px; background:#eef4e4; color:#577847; padding:11px 13px; font-size:12px; display:flex; align-items:center; gap:18px; white-space:nowrap; }
.handover-card { border:1px solid #ccdcba; background:#f1f6e9; padding:23px; border-radius:5px; margin-top:26px; }
.handover-status { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #d7e2ca; padding-bottom:18px; }
.handover-status>span { font-size:11px; color:#839871; }
.handover-status>strong { font-size:12px; color:#6a804a; font-weight:550; }
.handover-card>h3 { font-size:19px; margin-top:22px; letter-spacing:-.025em; font-weight:550; }
.handover-card>p { font-size:14px; line-height:1.9; color:#5e784f; margin-top:12px; white-space:pre-wrap; }
.handover-followups { margin-top:24px; padding-top:20px; border-top:1px solid #d7e2ca; }
.handover-followups>span { font-size:11px; color:#839871; }
.handover-followups ul { padding:0 0 0 16px; margin:10px 0 0; }
.handover-followups li { font-size:13px; line-height:1.9; color:#6d835c; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:9px; }
.handover-confirm { display:flex; align-items:center; gap:12px; margin-top:23px; padding-block:10px; font-size:14px; color:#456a37; cursor:pointer; }
.handover-confirm input { accent-color:var(--teal); width:18px; height:18px; flex:none; }
.ack-feedback { font-size:12px; line-height:1.8; color:#79906a; margin-top:7px; }
.ack-feedback.is-acknowledged { color:#336347; }
.demo-dialog { color:var(--ink); background:var(--paper); border:1px solid #c4d3b7; border-radius:7px; width:600px; max-width:calc(100% - 32px); max-height:85svh; padding:27px; box-shadow:0 25px 80px #123b3238; }
.demo-dialog::backdrop { background:#082b2470; backdrop-filter:blur(3px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.dialog-heading h2 { font-size:23px; line-height:1.4; letter-spacing:-.04em; font-weight:550; }
.dialog-heading>button { height:34px; width:34px; border:1px solid #cddac1; background:transparent; border-radius:50%; font-size:24px; font-weight:300; color:#758b64; }
#dialog-content>p { font-size:14px; line-height:1.9; color:#647b54; margin-top:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
#dialog-content>img { width:100%; height:auto; display:block; border-radius:4px; }
.previous-case-label { font-size:11px; color:#8b9d79; }
.previous-case-title { font-size:20px; font-weight:550; letter-spacing:-.025em; margin-top:11px; }
.previous-case-status { display:inline-block; font-size:11px; color:#6f8450; background:#e3edda; padding:6px 9px; border-radius:3px; margin-top:15px; }
.previous-case-note { border-top:1px solid #d4dfc9; padding-top:18px; }
@media(max-width:1050px) {
 .demo-intro h1 { font-size:43px; }
 .demo-workbench { grid-template-columns:1.5fr 1fr; }
 .demo-stage { padding:29px; }
 .demo-summary { padding:28px 23px; }
 .stage-heading h2 { font-size:22px; }
 .stage-actions { gap:15px; flex-wrap:wrap; }
 .stage-actions .button { font-size:12px; padding:0 17px; gap:20px; }
 .scenario-strip>div { flex-wrap:wrap; gap:10px 15px; }
 .scenario-strip>div>span:last-child { width:100%; }
 .scenario-id { font-size:9px; }
 .demo-step { font-size:12px; }
 .demo-summary h2 { font-size:20px; }
}
@media(max-width:700px) {
 .demo-main { padding-top:35px; padding-bottom:45px; }
 .demo-intro { align-items:start; flex-direction:column; gap:21px; }
 .demo-intro h1 { font-size:37px; margin-top:20px; }
 .demo-intro>div>p:last-child { font-size:14px; margin-top:18px; }
 .demo-intro .eyebrow { font-size:11px; }
 .demo-reset { font-size:11px; padding:10px 13px; }
 .demo-disclosure { font-size:11px; padding:13px 14px; margin-top:23px; }
 .scenario-strip { margin-top:25px; padding-block:18px; flex-direction:column; align-items:start; gap:12px; }
 .scenario-strip strong { font-size:15px; }
 .scenario-strip>div>span:last-child { font-size:11px; }
 .previous-link { font-size:12px; padding:7px 0 0; }
 .demo-step-nav { margin-top:18px; }
 .demo-step { flex-direction:column; gap:7px; font-size:10px; padding:12px 2px 14px; }
 .demo-step>span { font-size:9px; }
 .demo-workbench { grid-template-columns:1fr; margin-top:20px; border-radius:5px; }
 .demo-stage { min-height:0; padding:26px 18px; }
 .stage-heading h2 { font-size:22px; line-height:1.5; margin-top:11px; }
 .stage-heading>p { font-size:14px; margin-top:10px; }
 .stage-kicker { font-size:10px; }
 .demo-stage form { margin-top:22px; }
 .demo-stage textarea,.demo-stage input:not([type=checkbox]) { font-size:16px; padding:12px; line-height:1.8; }
 .field-label,.draft-fields label { font-size:13px; }
 .field-hint { font-size:11px; }
 .sample-photo-button { font-size:12px; padding:11px 13px; }
 .sample-photo figcaption { font-size:10px; }
 .stage-actions { margin-top:25px; padding-top:20px; flex-wrap:wrap; row-gap:16px; }
 .stage-actions>span { width:100%; font-size:11px; }
 .stage-actions .button { min-height:47px; font-size:12px; padding-inline:16px; gap:18px; }
 .back-button { font-size:11px; }
 .demo-summary { border-left:0; border-top:1px solid #dce5d1; padding:25px 21px; }
 .demo-summary h2 { font-size:21px; margin-top:17px; }
 .summary-location { font-size:11px; }
 .summary-list { margin-top:22px; padding-block:19px; gap:16px; }
 .summary-list>div { font-size:13px; grid-template-columns:45px 1fr; }
 .summary-sources { margin-top:21px; }
 .summary-footer { font-size:11px; }
 .previous-record { margin-top:23px; }
 .previous-record>strong { font-size:15px; }
 .demo-endnote { font-size:11px; text-align:left; margin-top:18px; }
 .draft-state { gap:10px; }
 .draft-state>strong { font-size:11px; }
 .demo-record-timeline { margin-top:24px; }
 .demo-record-timeline p { font-size:13px; }
 .followup-action { flex-direction:column; align-items:start; gap:12px; }
 .small-action { font-size:12px; min-height:43px; }
 .handover-card { padding:20px 17px; }
 .handover-status>strong { font-size:11px; }
 .handover-card>h3 { font-size:19px; }
 .handover-card>p { font-size:14px; }
 .handover-followups li { font-size:13px; }
 .handover-confirm { font-size:13px; }
 .ack-feedback { font-size:11px; }
 .demo-dialog { padding:22px 19px; }
 .dialog-heading h2 { font-size:20px; }
 #dialog-content>p { font-size:13px; }
}
@media(max-width:370px) { .demo-intro h1 { font-size:33px; } .stage-heading h2 { font-size:20px; } .stage-actions .button { font-size:11px; padding:0 13px; gap:10px; } .back-button { font-size:10px; } }

.demo-reset,.back-button,.source-open { min-height:44px; }
.dialog-heading>button { height:44px; width:44px; flex:none; }
/* Keep the actual work, state and navigation readable on the pale surfaces. */
.stage-heading>p,.demo-record-timeline p,#dialog-content>p,.summary-location,.summary-list dt,.source-open,.back-button,.field-hint,.inline-feedback,.ack-feedback,.summary-footer,.demo-endnote,.demo-disclosure { color:#5f7652; }
.demo-record-timeline p { font-size:14px; }
.summary-status,.draft-state>strong,.handover-status>strong { color:#55652d; }
.inline-feedback.is-error { color:#8a562b; }
.ack-feedback.is-acknowledged { color:#336347; }
/* Keep the input task close to the entry point. */
.demo-main { padding-top:38px; }
.demo-intro h1 { font-size:43px; margin-top:16px; }
.demo-intro>div>p:last-child { margin-top:14px; }
.demo-disclosure { margin-top:22px; padding-block:10px; }
.scenario-strip { margin-top:23px; padding-block:16px; }
.demo-step-nav { margin-top:19px; }
.demo-workbench { margin-top:20px; }
@media(min-width:701px) { .demo-intro h1 br { display:none; } }
@media(max-width:700px) { .demo-main { padding-top:28px; } .demo-intro { gap:15px; } .demo-intro h1 { font-size:33px; } .demo-intro>div>p:last-child { font-size:14px; margin-top:14px; } .demo-disclosure { margin-top:18px; } .scenario-strip { margin-top:19px; padding-block:15px; } }

#stage-1 .stage-actions { justify-content:flex-end; }
@media(min-width:701px) { .demo-stage { min-height:530px; } }