/* Blinded claims demo. Loads after site.css. No inline styles (CSP).
   The page is Bodega OS like the rest of the site; the demo app itself keeps a light UI,
   a product window sitting on the blue page, so its own palette is scoped here. */
:root{--ink:#17161E;--pencil:#55525E;--carbon:#24308C;--stamp:#B3262B;--carbon-wash:#E3E6F4;--bond:#F5F6F2;--hand:var(--mono)}
.demo-console,.demo-email,.demo-log,.demo-ba-col,.demo .btn{color:var(--ink);--fg:var(--ink);--dim:var(--pencil);--link:var(--carbon);--on-link:var(--white);--rule:#8A93C9;--sig:var(--stamp)}

.demo [hidden]{display:none!important}

/* ---------- banner + intro (canary) ---------- */
.demo-banner{border-bottom:1.5px dashed var(--rule)}
.demo-banner p{margin:0;padding:12px 0;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;font-size:1rem}
.demo-banner b{font-weight:700}
.demo-banner a{font-family:var(--mono);font-size:.75rem;white-space:nowrap}
.demo-intro .wrap{display:grid;gap:var(--s5);padding-top:var(--s6);padding-bottom:var(--s6)}
@media (min-width:900px){.demo-intro .wrap{grid-template-columns:minmax(0,7fr) minmax(280px,4fr);gap:var(--s6);align-items:end}}
.demo-intro h1{font-size:clamp(2.2rem,5vw,4.25rem);max-width:17ch}
.demo-intro .dek{max-width:48ch}
.demo-what{margin:0;border:2px solid var(--line)}
.demo-what dl{grid-template-columns:5.5rem minmax(0,1fr);gap:6px 10px}
@media (max-width:599px){.demo-intro h1{font-size:2.25rem} .demo-intro .dek{font-size:1.0625rem}}

/* ---------- walkthrough (bond) ---------- */
.demo{display:grid;gap:var(--s4)}
.demo .btn{min-height:44px;padding:0 14px;font-size:.9375rem;background:var(--white)}
.demo .btn:hover{background:var(--bond)}
.demo .btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white);--fg:var(--white)}
.demo .btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.demo .btn[aria-disabled="true"]:active{transform:none}
.demo-bar{display:grid;gap:8px}
.demo-picks,.demo-controls{display:none;flex-wrap:wrap;gap:8px;align-items:center}
.demo-live .demo-picks,.demo-live .demo-controls{display:flex}
.demo-live .demo-nojs{display:none}
.demo-picks .note{margin-right:4px}
.demo-nojs{margin:0}

.demo-console{background:var(--white);border:2px solid var(--ink);padding:var(--s3) var(--s4);display:grid;gap:12px}
.demo-route{font-size:.8125rem;flex-direction:row;flex-wrap:wrap;border-left:0;padding-left:0}
.demo-route li::before{color:var(--carbon)}
.demo-route li{padding:6px 12px 6px 0}
@media (max-width:599px){.demo-route{font-size:.75rem} .demo-route li{padding:5px 8px 5px 0}}
.demo-route .tick{width:auto;min-width:12px;text-align:center}
.demo-route li.is-now{color:var(--ink);font-weight:600}
.demo-route li.is-now .lbl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.demo-route li.is-flag{color:var(--stamp)}
.demo-route li.is-held,.demo-route li.is-wait,.demo-route li.is-none{color:var(--ink)}
.demo-route li.is-skip{color:var(--pencil)}
.demo-route li.is-flag .tick,.demo-route li.is-held .tick,.demo-route li.is-wait .tick,
.demo-route li.is-none .tick,.demo-route li.is-skip .tick{opacity:1;color:inherit}
.demo-status{margin:0;font-size:1.0625rem;line-height:1.45;min-height:2.9em;border-top:1.5px dashed var(--rule);padding-top:12px;max-width:68ch}
.demo-status .note{display:block;margin-bottom:2px}

.demo-grid{display:grid;gap:var(--s4)}
@media (min-width:900px){.demo-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.demo-k{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--dim);letter-spacing:0;margin:0 0 12px}
.demo-k-note{font-weight:400}

/* the email */
.demo-email{background:var(--white);border:2px solid var(--ink);padding:var(--s4)}
.demo-head{margin:0;display:grid;gap:6px;font-size:.9375rem;line-height:1.4}
.demo-head div{display:grid;grid-template-columns:5.25rem minmax(0,1fr);gap:8px}
.demo-head dt{font-family:var(--mono);font-size:.6875rem;color:var(--pencil);padding-top:3px}
.demo-head dd{margin:0;overflow-wrap:anywhere}
.demo-head .demo-subj{font-weight:600}
.demo-mailbody{border-top:1.5px dashed var(--rule);margin-top:var(--s3);padding-top:var(--s3);font-size:1rem}
.demo-mailbody p{margin:0 0 .6em}
.demo-mailbody p:last-child{margin-bottom:0}
.demo-hit{background:transparent;color:inherit;font-family:var(--mono);font-size:.875em;padding:0 2px}
.is-read .demo-hit{background:var(--carbon-wash);color:var(--carbon);outline:1.5px solid var(--carbon)}

/* the log: one routing slip, a dashed rule between stations */
.demo-run{display:grid;gap:var(--s3)}
.demo-run .demo-k{margin:0}
.demo-log{list-style:none;margin:0;padding:0;background:var(--white);border:2px solid var(--ink)}
.demo-step{padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) - 4px);border-left:4px solid transparent;border-bottom:1.5px dashed var(--rule)}
.demo-step:last-child{border-bottom:0}
.demo-step.is-now{border-left-color:var(--carbon)}
.demo-step h4{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-family:var(--mono);font-size:.8125rem;font-weight:600;color:var(--carbon)}
.demo-step h4 .n{font-weight:400;color:var(--rule)}
.demo-step h4 .st{margin-left:auto;font-weight:400;font-size:.6875rem;color:var(--pencil)}
.demo-step.is-flag h4 .st{color:var(--stamp);font-weight:600}
.demo-step.is-held h4 .st,.demo-step.is-wait h4 .st,.demo-step.is-none h4 .st{color:var(--ink)}
.demo-step.is-pending h4{color:var(--pencil)}
.demo-pending{margin:6px 0 0;font-size:.9375rem;color:var(--pencil)}
.demo-step:not(.is-pending) .demo-pending,.demo-step.is-pending .demo-stepbody{display:none}
.demo-say{margin:6px 0 0;font-size:1.0625rem;max-width:60ch}
.demo-detail{margin-top:4px}
.demo-detail summary{list-style:none;cursor:pointer;display:inline-block;padding:8px 0 4px}
.demo-detail summary::-webkit-details-marker{display:none}
.demo-detail .more{font-size:.75rem}
.demo-detail .slip{margin-top:4px}
.demo .slip dl{grid-template-columns:6.25rem minmax(0,1fr)}
.demo-checks{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.demo-checks li{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:6px}
.demo-checks .bad{color:var(--stamp)}
.demo-checks .skip{color:var(--pencil)}
.demo-checks mark.flag{padding:0 4px;margin:0}

/* review folder: the step the adjuster owns */
.demo-sign{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:12px}
.demo-signed{margin:12px 0 0;font-size:1.0625rem;display:flex;gap:10px;align-items:baseline}
.demo-signed:focus{outline:none}
.demo-signed:focus-visible{outline:3px solid var(--carbon);outline-offset:2px}
.demo-outcome{margin:0}

@keyframes demo-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.demo-step.is-enter .demo-stepbody{animation:demo-in .16s ease-out}

/* before and after */
.demo-ba{margin-top:var(--s6)}
.demo-ba h3{margin:0 0 var(--s3);font-size:1.5rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.demo-ba-cols{display:grid;gap:var(--s4)}
@media (min-width:720px){.demo-ba-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.demo-ba-col{background:var(--white);border:2px solid var(--ink);padding:var(--s4)}
.demo-ba-col ol{margin:0;padding-left:1.25em;display:grid;gap:8px;font-size:1rem}

/* ---------- under the hood (pink) ---------- */
.demo-hood-grid{display:grid;gap:var(--s5)}
@media (min-width:900px){.demo-hood-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.demo-side .demo-k{color:var(--fg)}
.demo-stack{margin:0 0 var(--s5);border-top:2px solid var(--line)}
.demo-stack div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:2px 12px;padding:10px 0;border-bottom:1.5px dashed var(--rule)}
.demo-stack dt{font-family:var(--mono);font-size:.75rem;font-weight:600;color:var(--sign);padding-top:3px}
.demo-stack dd{margin:0;font-size:1rem}
@media (max-width:599px){.demo-stack div{grid-template-columns:minmax(0,1fr)}}
.demo-facts{list-style:none;margin:0;padding:0;border-top:2px solid var(--line)}
.demo-facts li{padding:10px 0;border-bottom:1.5px dashed var(--rule);font-size:1rem}
.demo-side .margin-note{margin-top:var(--s3)}

@media (prefers-reduced-motion:reduce){
  .demo-step.is-enter .demo-stepbody{animation:none}
}