/* /demos: the quiet intro, the gallery filter chips and the pager (tokens of vizwalk.css only). Also linked by the home
   page for the demo cards (first block). */

/* ---- The demo cards (demo_cards(), home and /demos; owner-approved #6, #7, #11 of 7 Oct 2026): a real gold "Walk
   inside" on every card, "Send to someone" on /demos, and under the sideways row on phones 48 px arrows and "1 of 3"
   (static/js/pages/demos-cards.js). The picture is a link too (a hidden-from-readers cover under the text). */
.dcard-cover{position:absolute;inset:0;z-index:0;border-radius:inherit}
.dcard-body{position:relative;z-index:1;pointer-events:none}
.dcard-body a,.dcard-body button{pointer-events:auto}
.dcard-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:var(--s4)}
.dcard-actions .button{min-height:52px;padding:0 24px;font-size:16px}
.dcard-walk{box-shadow:0 8px 28px rgba(213,181,141,.3)}
.dcard-send{background:rgba(13,18,17,.42)}
@media (hover:hover) and (pointer:fine){.dcard-walk:hover{background:var(--accent-hover);border-color:var(--accent-hover)}}
.dcard:focus-within{outline:none}
/* The stage a phone tap fills (site.js phoneFullscreen): hidden until then. */
.dcard-stage,.project-stage{position:absolute;inset:0;z-index:4;display:none}
.dcard-stage iframe,.project-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dcards-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin:var(--s4) 0 0;padding:0 var(--gutter)}
.dcards-nav[hidden]{display:none}
@media (min-width:900px){.dcards-nav{display:none}}
.dcards-arrow{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(243,239,231,.6);border-radius:50%;background:rgba(243,239,231,.06);color:var(--ink);cursor:pointer;transition:background-color .2s var(--ease),opacity .2s var(--ease)}
.dcards-arrow:disabled{opacity:.3;cursor:default}
.dcards-prev .icon{transform:scaleX(-1)}
[dir="rtl"] .dcards-prev .icon{transform:none}
[dir="rtl"] .dcards-next .icon{transform:scaleX(-1)}
.dcards-count{margin:0;min-width:7ch;text-align:center;font-size:1.0625rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* "Send to someone" on a computer: the window with the large QR code and the link. */
.send-dialog .dialog-body{text-align:center}
.send-name{margin:0 0 4px;font-size:1.125rem;font-weight:600}
.send-help{margin:0 auto var(--s4);max-width:36ch;color:var(--ink-2)}
.send-qr .qr{max-width:none}
.send-dialog .field{display:block;margin:var(--s5) 0 0;text-align:start}
.send-dialog .field-label{display:block;margin-bottom:6px;font-weight:600}
.send-dialog .copy-row input{font-size:16px;min-height:48px}
.send-dialog .copy-row .button{font-size:16px}

/* ---- /demos only ---- */
.demos-intro{padding-top:var(--s6);padding-bottom:var(--s5)}
.demos-intro .chapter-head{margin-bottom:0}
@media (min-width:900px){.demos-intro{padding-top:var(--s7);padding-bottom:var(--s6)}}
.demos-top{padding-block:0 var(--s7)}
@media (max-width:899px){.demos-cards .dcard{min-height:54vh;min-height:54svh}}
@media (min-width:900px){.demos-cards .dcard{min-height:66vh;min-height:66svh}}

/* #12: the still picture next to the walkthrough, capped on wide screens so the title and both labels fit one screen. */
.demos-compare{padding-block:0 var(--s6)}
.demos-compare .compare-head{padding-block:var(--s7) var(--s5)}
.demos-compare .chapter-head{margin-bottom:0}
@media (min-width:900px){.demos-compare .ba-full{height:60vh;height:60svh}}
.compare-note{margin:var(--s3) 0 0;font-size:1rem;color:var(--soft)}

/* The demo chapters: the whole clip opens the demo (demos-cards.js adds .is-tappable). */
.fs-project.is-tappable{cursor:pointer}

/* #8: "How do I get this?" in three steps inside the closing band. */
.get-steps{list-style:none;margin:var(--s5) auto var(--s4);padding:0;display:grid;gap:14px;max-width:34rem;text-align:start}
@media (min-width:900px){.get-steps{grid-template-columns:repeat(3,minmax(0,1fr));max-width:62rem;gap:24px}}
.get-steps li{display:flex;align-items:center;gap:14px;font-size:1.125rem;line-height:1.45;color:#F3EFE7;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.get-n{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font-weight:600;font-size:1.0625rem;text-shadow:none;background:rgba(13,18,17,.4)}
.demos-get .button{font-size:16px}

/* "Made by our users" (#24): filter chips, poster cards and the pager. */
.demos-filter{display:flex;gap:8px;align-items:center;margin:0 calc(-1 * var(--gutter)) var(--s5);padding:0 var(--gutter) 4px;overflow-x:auto;scrollbar-width:none}
.demos-filter::-webkit-scrollbar{display:none}
.demos-filter-label{flex:none;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-inline-end:4px}
.demos-filter a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);text-decoration:none;color:var(--ink);font-size:.9375rem;font-weight:500;border:1px solid var(--line-2);background:transparent;white-space:nowrap}
.demos-filter a[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.gallery-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);align-items:center;margin-top:var(--s6)}
.pager>:last-child{justify-self:end}
.pager-status{font-size:.9375rem;color:var(--soft);text-align:center}