/* Demo page styles, scoped to .demo so the shared header and footer stay untouched. */
.demo{--ok:#3E6B4A;--bad:#8C3A2B;--card:#FFFDF9}
.demo .wrap>*{max-width:880px}
.demo .wrap>.lead{max-width:36em}
.demo .article-head h1{max-width:13.5em}
.demo .notice{display:inline-block;margin:6px 0 0;padding:6px 12px;border:1px solid var(--copper);border-radius:999px;color:var(--copper);font:600 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.demo h2.step-h{font:600 12.5px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brown);margin:52px 0 14px;padding-top:16px;border-top:1.5px solid var(--espresso)}
.demo h2.step-h:first-child{border-top:0;padding-top:0;margin-top:40px}
.demo p.sub{color:var(--brown);max-width:46em}
.demo label{display:block;font-size:13.5px;font-weight:600;color:var(--brown);margin:14px 0 5px}
.demo input,.demo textarea,.demo select{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--field);border-radius:4px;background:#fff;color:var(--espresso);font:16px/1.4 var(--f-text)}
.demo input:focus,.demo textarea:focus,.demo select:focus{outline:2px solid var(--copper);outline-offset:1px;border-color:var(--copper)}
.demo textarea{min-height:110px;resize:vertical}
.demo select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233B302B' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center}
.demo button{cursor:pointer;border:1.5px solid transparent;border-radius:6px;min-height:44px;padding:0 16px;font:600 15px/1 var(--f-text);background:var(--copper);color:#fff}
.demo button:hover{background:var(--copper-dk)}
.demo button.ghost{background:transparent;color:var(--espresso);border-color:var(--espresso)}
.demo button.ghost:hover{background:var(--espresso);color:var(--ivory)}
.demo button:disabled{opacity:.45;cursor:not-allowed}
.demo .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.demo .wf{margin:18px 0 0;padding:0;list-style:none}
.demo .step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--hair);border-radius:6px;background:var(--card);margin:10px 0}
.demo .approve-row:has(.hidden){display:none}
.demo #resetBtn{margin-left:auto;border-color:transparent;text-decoration:underline;text-underline-offset:3px}
.demo #resetBtn:hover{background:transparent;color:var(--copper)}
.demo .step .dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--rule);flex:none;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--f-mono);color:var(--brown)}
.demo .step.run{border-color:var(--copper)}
.demo .step.run .dot{border-color:var(--copper);color:var(--copper)}
.demo .step.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.demo .step.blocked .dot{border-color:var(--bad);color:var(--bad)}
.demo .step .body{flex:1;min-width:0}
.demo .step .body b{font-size:15.5px}
.demo .step .body small{color:var(--brown);display:block;font-size:14px}
.demo .log{background:var(--ink);color:#EFE6DA;border-radius:8px;padding:14px 16px;font:12.5px/1.7 var(--f-mono);max-height:240px;overflow:auto;margin:14px 0 0;white-space:pre-wrap}
.demo .log .t{color:var(--copper-lt);margin-right:8px}
.demo .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:14px}
.demo .card{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:14px 16px}
.demo .card h3{margin:0 0 8px;font:600 12px/1.4 var(--f-mono);letter-spacing:.1em;color:var(--brown);text-transform:uppercase}
.demo .card .kv{margin:3px 0;font-size:14.5px}
.demo .card .kv b{color:var(--espresso);font-weight:600}
.demo .card .kv span{color:var(--brown)}
.demo .email{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:14px 16px;margin-top:14px}
.demo .email .hdr{font-size:13.5px;color:var(--brown);border-bottom:1px solid var(--hair);padding-bottom:8px;margin-bottom:8px}
.demo .email-body{font-size:14.5px;color:var(--brown);white-space:pre-wrap}
.demo .tests{margin:14px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.demo .tests li{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid var(--hair);font-size:14.5px}
.demo .tests .pass{color:var(--ok);font-weight:700;white-space:nowrap}
.demo .tests .fail{color:var(--bad);font-weight:700;white-space:nowrap}
.demo ol.doc{padding-left:22px}
.demo ol.doc li{margin:10px 0}
.demo .hidden{display:none}
.demo .empty-note{grid-column:1/-1;margin:0;padding:16px 18px;border:1px dashed var(--rule);border-radius:6px;color:var(--brown);font-size:15px}
.demo .cards:has(.card:not(.hidden)) .empty-note{display:none}
.demo .next{margin:56px 0 var(--sec);padding:26px 28px;border-radius:6px;background:var(--espresso);color:var(--ivory)}
.demo .next h2{color:var(--ivory);font-size:26px;margin:0 0 10px}
.demo .next p{color:var(--muted-dk)}
.demo .next a.go{color:var(--ivory)}
.demo .next a.go:hover{color:var(--copper-lt)}
.demo .next .btn-primary{color:#fff}