/* Interactive demo of the citizen reporting platform – phone-first */
.demo-body { background: var(--primary-soft); min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
.demo-wrap { width: 100%; max-width: 560px; margin-inline: auto; padding-inline: 1rem; }
.demo-top { background: var(--primary); color: #fff; position: sticky; top: 0; z-index: 20; }
.demo-top-in { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.demo-back { color: #fff; font-weight: 600; padding: .6rem 0; }
.demo-tag { background: var(--accent); color: #fff; font-size: .78rem; font-weight: 700; padding: .15rem .8rem; border-radius: 999px; }
.demo-app { background: #fff; margin: 1.25rem 0 2rem; border: 1px solid var(--line); border-radius: 20px; padding: 1.4rem 1.25rem 1.5rem; box-shadow: var(--shadow); }
.demo-head h1 { font-size: 1.5rem; line-height: 1.4; color: var(--primary); }
.demo-head p { color: var(--muted); font-size: .93rem; margin: .4rem 0 1.2rem; }
.step { margin-bottom: 1.5rem; }
.step h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; margin-bottom: .75rem; }
.step h2 span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .85rem; flex: none; }
.step h2 small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.cat { position: relative; display: block; }
.cat input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cat span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 92px; padding: .6rem .3rem; text-align: center; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); transition: all .15s; }
.cat svg { width: 26px; height: 26px; color: var(--primary); }
.cat b { font-size: .84rem; font-weight: 600; line-height: 1.35; }
.cat input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-line); }
.cat input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 70%, #fff); outline-offset: 2px; }
.err { display: none; color: #b42318; font-size: .84rem; margin-top: .5rem; }
.err.show { display: block; }
.map { position: relative; height: 140px; margin: .8rem 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #e8efe9; }
.map i { position: absolute; background: #fff; }
.map i:nth-child(1) { inset-inline: 0; top: 55%; height: 14px; transform: rotate(-6deg); }
.map i:nth-child(2) { top: 0; bottom: 0; right: 35%; width: 12px; transform: rotate(8deg); }
.map i:nth-child(3) { inset-inline: 0; top: 20%; height: 8px; transform: rotate(4deg); }
.pin { position: absolute; top: 40%; right: 35%; transform: translate(50%, -60%); color: #c2410c; animation: drop .5s ease; }
.pin svg { width: 40px; height: 40px; fill: #fff; stroke-width: 1.8; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
@keyframes drop { from { transform: translate(50%, -160%); opacity: 0; } to { transform: translate(50%, -60%); opacity: 1; } }
.photo { display: flex; align-items: center; justify-content: center; min-height: 84px; margin-bottom: 1rem; border: 2px dashed var(--primary-line); border-radius: 14px; background: var(--bg); color: var(--primary); font-weight: 600; cursor: pointer; text-align: center; padding: .5rem; overflow: hidden; }
.photo svg { width: 20px; height: 20px; vertical-align: -4px; margin-inline-end: .3rem; }
.photo img { max-height: 160px; border-radius: 10px; }
.done { text-align: center; }
.done h2 { font-size: 1.4rem; }
.ticket { margin: .3rem 0; }
.ticket b { color: var(--primary); letter-spacing: .03em; }
.muted { color: var(--muted); font-size: .9rem; }
.track { text-align: start; margin: 1.4rem auto; max-width: 300px; display: grid; gap: 1rem; position: relative; }
.track li { position: relative; padding-inline-start: 2.2rem; color: #8a948d; font-weight: 600; transition: color .3s; }
.track li::before { content: ''; position: absolute; inset-inline-start: 0; top: .2rem; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #cfd8d2; background: #fff; transition: all .3s; }
.track li::after { content: ''; position: absolute; inset-inline-start: 9px; top: 1.45rem; width: 2px; height: calc(100% + .1rem); background: #d9e2dc; }
.track li:last-child::after { display: none; }
.track li.on { color: var(--text); }
.track li.on::before { background: var(--primary); border-color: var(--primary); }
.track li.now::before { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.track li.final.on { color: var(--primary); }
.demo-note { background: var(--primary-soft); border-radius: 10px; padding: .7rem 1rem; font-size: .84rem; color: var(--muted); margin-bottom: 1rem; }
.done .btn { margin-top: .6rem; }
@media (min-width: 700px) { .demo-wrap { max-width: 620px; } .demo-app { padding: 2rem; } }