/* Animated demo player (Views/Demos/Demo.cshtml, wwwroot/js/clients/demo-player.js).
   Builds on the tokens in signet.css, so light and dark mode both work. */

.demo { padding: var(--section-y) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.demo-head { max-width: 760px; margin-bottom: 2.5rem; }
.demo-head h1 { margin-bottom: .4em; }
.demo-lead { font-size: 1.2rem; color: var(--text-soft); }
.demo-note { display: inline-flex; gap: .6rem; align-items: flex-start; font-size: .95rem; padding: .7rem 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); margin: 0; }
.demo-note i { color: var(--accent-text); margin-top: .25rem; }

.demo-body { display: grid; gap: 2rem; }
@media (min-width: 960px) { .demo-body { grid-template-columns: 300px 1fr; align-items: start; } }

/* Steps list. Without JavaScript every step and its explanation is shown as a normal list. */
.demo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.demo-step-btn { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; font: 600 .98rem var(--font-body); color: var(--text); cursor: default; }
.demo-step-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 .85rem var(--font-head); background: var(--bg-alt); color: var(--text-soft); }
.demo-step-text { margin: .4rem .4rem 0; color: var(--text-soft); font-size: .95rem; }
.demo-js .demo-step-btn { cursor: pointer; transition: border-color .2s, background-color .2s; }
.demo-js .demo-step-btn:hover { border-color: var(--accent); }
.demo-js .demo-step-text { display: none; }
.demo-steps .is-current .demo-step-btn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.demo-steps .is-current .demo-step-n { background: var(--red); color: #fff; }
.demo-steps .is-done .demo-step-n { background: var(--green); color: #fff; }
@media (max-width: 959px) {
    /* On phones the steps become a compact row of numbers above the stage. */
    .demo-js .demo-steps { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: .4rem; }
    .demo-js .demo-step-t { display: none; }
    .demo-js .demo-step-btn { padding: .5rem; width: auto; }
}

/* Stage */
.demo-stage { min-height: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.demo:not(:has(.demo-js)) .demo-stage:empty { display: none; }
.demo-narration { margin: 1.2rem 0 1rem; font-size: 1.12rem; min-height: 3.4em; color: var(--text); }
.demo-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.demo-ctl { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 1rem; }
.demo-ctl:hover { border-color: var(--accent); }
.demo-ctl-main { width: 54px; height: 54px; background: var(--red); border-color: var(--red); color: #fff; }
.demo-ctl-main:hover { border-color: var(--red); background: #b81b0b; }
.demo-count { margin-left: auto; font-size: .9rem; color: var(--text-soft); }
.demo-progress { height: 4px; border-radius: 4px; background: var(--line); margin-top: 1rem; overflow: hidden; }
.demo-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s ease; }

/* Scenes */
.dm-bar { padding: .7rem 1.1rem; font: 600 .85rem var(--font-body); color: var(--text-soft); background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.dm-doc-body, .dm-chat-body { padding: 1.2rem 1.3rem; }
.dm-list { list-style: none; margin: 0; padding: 1.2rem 1.3rem; display: grid; gap: .8rem; }

.dm-line, .dm-table tbody tr, .dm-msg, .dm-check, .dm-metric { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.is-in { opacity: 1 !important; transform: none !important; }

.dm-line { display: flex; gap: 1rem; margin: 0 0 .7rem; padding-bottom: .7rem; border-bottom: 1px dashed var(--line); font-family: 'Courier New', ui-monospace, monospace; }
.dm-label { flex: none; min-width: 110px; color: var(--text-soft); font-size: .88rem; }
.dm-text { font-weight: 600; }

.dm-scroll { overflow-x: auto; }
.dm-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.dm-table th { text-align: left; padding: .7rem 1rem; font: 700 .8rem var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); border-bottom: 1px solid var(--line); white-space: nowrap; }
.dm-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.dm-table tr.is-flag td { background: color-mix(in srgb, #e6a100 16%, transparent); }

.dm-chat-body { display: grid; gap: .8rem; }
.dm-msg { max-width: 88%; padding: .8rem 1rem; border-radius: 14px; display: grid; gap: .15rem; }
.dm-who { font: 700 .72rem var(--font-head); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.dm-ai { background: var(--bg-alt); justify-self: start; border-bottom-left-radius: 4px; }
.dm-you { background: var(--navy); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
[data-theme="dark"] .dm-you { background: #14507f; }

.dm-check { display: flex; gap: .8rem; align-items: flex-start; }
.dm-check i { margin-top: .3rem; flex: none; }
.dm-ok i { color: var(--green); }
.dm-warn i { color: #d98e00; }
.dm-info i { color: var(--accent-text); }

.dm-metrics { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.3rem 1.3rem 0; }
.dm-metric { flex: 1 1 200px; padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--navy); color: #fff; display: grid; gap: .2rem; }
[data-theme="dark"] .dm-metric { background: #0f3a58; }
.dm-metric strong { font: 700 clamp(1.8rem, 5vw, 2.6rem)/1 var(--font-head); }
.dm-metric span { color: rgba(255, 255, 255, .8); font-size: .95rem; }

.demo-cta { margin-top: 4rem; padding: clamp(1.8rem, 5vw, 3rem); border-radius: var(--radius); background: linear-gradient(135deg, var(--navy) 0%, #0f5f73 100%); color: #fff; text-align: center; }
.demo-cta h2 { color: #fff; }
.demo-cta p { max-width: 52ch; margin: 0 auto 1.5rem; color: rgba(255, 255, 255, .88); }
.demo-back { display: block; margin-top: 1.2rem; color: rgba(255, 255, 255, .85); }

@media (prefers-reduced-motion: reduce) {
    .dm-line, .dm-table tbody tr, .dm-msg, .dm-check, .dm-metric { opacity: 1; transform: none; transition: none; }
}