/* Santala Quest — layout + SVG scene styles (uses the site's CSS variables) */
.sq-hero { padding: 2.5rem 0 1.5rem; }
.sq-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin: .3rem 0 .5rem; }
.sq-hero .hero-deck { max-width: 60ch; }
.sq-meta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-top: 1rem; }
.sq-badges { display: inline-flex; gap: .4rem; }
.sq-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule-soft); font-size: 1.1rem; filter: grayscale(1); opacity: .35; }
.sq-badge.on { filter: none; opacity: 1; border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.sq-grid { display: grid; grid-template-columns: 300px 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 900px) { .sq-grid { grid-template-columns: 1fr; } }
.sq-col-left { position: sticky; top: 1rem; }
@media (max-width: 900px) { .sq-col-left { position: static; } }
.sq-qlist { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.sq-qbtn { display: flex; gap: .6rem; align-items: center; text-align: left; padding: .55rem .7rem; border: 1px solid var(--rule-soft); background: var(--bg-raised); color: var(--ink); font: inherit; cursor: pointer; }
.sq-qbtn.active { border-color: var(--ink); background: var(--hl-fill); }
.sq-qbtn.done { opacity: .75; }
.sq-qbtn .sq-pts { margin-left: auto; font-size: .75rem; color: var(--muted); }
.sq-card { border: var(--rule-w) solid var(--rule); padding: 1.1rem 1.2rem; background: var(--bg-raised); }
.sq-card h2 { font-size: 1.5rem; margin: .3rem 0 .6rem; }
.sq-card p { margin: .6rem 0; font-size: .95rem; }
.sq-task { border-top: 1px solid var(--rule-soft); padding-top: .6rem; }
.sq-challenge { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0; padding: .7rem; border: 1px dashed var(--rule); }
.sq-challenge .btn { align-self: flex-start; }
.sq-progress { font-family: var(--font-ui); font-size: .9rem; padding: .5rem .7rem; background: var(--bg); border: 1px solid var(--rule-soft); }
.sq-progress.done { border-color: #2f6b3a; color: #2f6b3a; }
.sq-small { font-size: .78rem; }
.sq-muted { color: var(--muted); }
.sq-dl { display: inline-block; margin-top: .4rem; }
.sq-stage { border: var(--rule-w) solid var(--rule); background: var(--bg-raised); }
.sq-stage svg { width: 100%; height: auto; display: block; aspect-ratio: 800/360; }
.sq-stage-bar { display: flex; gap: .8rem; align-items: center; padding: .5rem .8rem; border-top: 1px solid var(--rule-soft); }
.sq-stage-bar .sq-caption { flex: 1; font-size: .85rem; color: var(--muted); }
.vz-ctl button { border: 1px solid var(--rule-soft); background: var(--bg); color: var(--ink); width: 30px; height: 30px; cursor: pointer; font-size: .9rem; }
.vz-ctl { display: inline-flex; gap: .3rem; align-items: center; }
.vz-pos { font-size: .7rem; color: var(--faint); min-width: 2.5rem; text-align: right; }
.sq-panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
@media (max-width: 760px) { .sq-panels { grid-template-columns: 1fr; } }
.sq-panel { border: 1px solid var(--rule-soft); padding: .9rem 1rem; background: var(--bg-raised); }
.sq-panel h3 { font-size: .75rem; font-family: var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .6rem; display: flex; align-items: center; gap: .6rem; }
.sq-panel h3 .sq-link { margin-left: auto; font-size: .7rem; letter-spacing: 0; text-transform: none; cursor: pointer; background: none; border: 1px solid var(--rule-soft); color: var(--muted); padding: .1rem .5rem; }
.sq-panel ul { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.sq-panel li { padding: .35rem 0; border-top: 1px solid var(--rule-soft); }
.sq-kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .88rem; margin-bottom: .6rem; }
.sq-kv .mono { word-break: break-all; }
.sq-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .7rem; font-size: .85rem; }
.sq-form label { display: flex; flex-direction: column; gap: .2rem; }
.sq-form label.wide { grid-column: 1 / -1; }
.sq-form input[type=text], .sq-form input[type=number] { font: inherit; font-family: var(--font-mono); font-size: .8rem; padding: .4rem .5rem; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); }
.sq-form .sq-row { grid-column: 1 / -1; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.sq-msg { grid-column: 1 / -1; font-size: .82rem; min-height: 1.2em; }
.sq-msg.good { color: #2f6b3a; } .sq-msg.bad { color: #a03b3b; }
table.sq-table { width: 100%; font-size: .8rem; border-collapse: collapse; }
.sq-table th { text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--rule); padding: .2rem .3rem; }
.sq-table td { padding: .25rem .3rem; border-bottom: 1px solid var(--rule-soft); }
.sq-table tr.mine td { background: var(--hl-fill); }
.sq-you { font-family: var(--font-mono); font-size: .7rem; padding: .05rem .35rem; border: 1px solid var(--ink); border-radius: 999px; }
.sq-bump { font-size: .7rem; padding: .1rem .45rem; margin-left: .3rem; }
.sq-chain { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; }
.sq-block { flex: 0 0 auto; display: flex; flex-direction: column; border: 1px solid var(--rule); padding: .35rem .5rem; min-width: 72px; background: var(--bg); }
.sq-block.mine { border-color: var(--accent-ink); }
.sq-block b { font-family: var(--font-mono); font-size: .8rem; }
.sq-status { font-family: var(--font-mono); font-size: .7rem; padding: .05rem .35rem; border-radius: 999px; border: 1px solid var(--rule-soft); }
.sq-status.confirmed { color: #2f6b3a; border-color: #2f6b3a; } .sq-status.mempool { color: #8a5a00; border-color: #8a5a00; } .sq-status.replaced, .sq-status.conflicted, .sq-status.orphaned { color: var(--muted); }
.sq-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.sq-actions select { font: inherit; font-size: .85rem; padding: .35rem .5rem; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); }
#sq-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; font-size: .9rem; opacity: 0; pointer-events: none; transition: all .25s; max-width: min(90vw, 40rem); z-index: 100; }
#sq-toast.on { opacity: 1; transform: translate(-50%, 0); }
.sq-foot { font-size: .8rem; color: var(--muted); margin-top: 1.5rem; }
#sq-app:not(.ready) .sq-grid { opacity: .4; }

/* ── SVG scenes ── */
.sq-stage svg text { font-family: var(--font-ui); font-size: 13px; fill: var(--ink); }
.sq-stage svg .vz-h { font-size: 14px; font-weight: 600; }
.sq-stage svg .vz-label { font-size: 10px; letter-spacing: .12em; fill: var(--accent-ink); font-weight: 700; }
.sq-stage svg .vz-mono { font-family: var(--font-mono); font-size: 11.5px; }
.sq-stage svg .vz-small { font-size: 11px; }
.sq-stage svg .vz-muted { fill: var(--muted); }
.sq-stage svg .vz-amt { font-size: 15px; font-weight: 600; }
.sq-stage svg .vz-good { fill: #2f6b3a; } .sq-stage svg .vz-bad { fill: #a03b3b; }
.sq-stage svg .vz-box { fill: var(--bg); stroke: var(--rule); stroke-width: 1.2; }
.sq-stage svg .vz-box.in { stroke: #8a5a00; } .sq-stage svg .vz-box.out { stroke: #2f6b3a; } .sq-stage svg .vz-box.chg { stroke-dasharray: 4 3; } .sq-stage svg .vz-box.op { stroke: var(--muted); stroke-dasharray: 2 3; }
.sq-stage svg .vz-box.fee { fill: var(--hl-fill); } .sq-stage svg .vz-box.key { stroke: #a03b3b; } .sq-stage svg .vz-box.addr { stroke: #2f6b3a; }
.sq-stage svg .vz-box.good { stroke: #2f6b3a; stroke-width: 2; } .sq-stage svg .vz-box.bad { stroke: #a03b3b; stroke-width: 2; }
.sq-stage svg .vz-flow { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sq-stage svg .vz-bill-bg { fill: var(--bg); stroke: var(--rule); }
.sq-stage svg .vz-bill.sel .vz-bill-bg { fill: var(--hl-fill); stroke: var(--ink); stroke-width: 2; }
.sq-stage svg .vz-bill.cb .vz-bill-bg { stroke-dasharray: 4 3; }
.sq-stage svg .vz-bill.pend { opacity: .5; }
.sq-stage svg .vz-edge { stroke: var(--rule-soft); stroke-width: 1.5; }
.sq-stage svg .vz-node circle { fill: var(--bg); stroke: var(--rule); stroke-width: 2; }
.sq-stage svg .vz-node.ok circle { animation: vzNodeOk .5s forwards; animation-delay: inherit; }
.sq-stage svg .vz-node.bad circle { stroke: #a03b3b; }
.sq-stage svg .vz-node-mark { font-size: 16px; font-weight: 700; opacity: 0; animation: vzFade .3s forwards; animation-delay: inherit; }
.sq-stage svg .vz-node.bad .vz-node-mark { fill: #a03b3b; opacity: 1; animation: none; }
@keyframes vzNodeOk { to { stroke: #2f6b3a; fill: color-mix(in srgb, #2f6b3a 12%, var(--bg)); } }
@keyframes vzFade { to { opacity: 1; } }
.sq-stage svg .vz-token { fill: var(--accent-ink); opacity: .9; }
.sq-stage svg .vz-mp-bar { fill: var(--rule); }
.sq-stage svg .vz-mp.in .vz-mp-bar { fill: #2f6b3a; opacity: .55; }
.sq-stage svg .vz-mp.out .vz-mp-bar { fill: var(--muted); opacity: .35; }
.sq-stage svg .vz-mp.hl .vz-mp-bar { fill: var(--accent-ink); opacity: 1; stroke: var(--ink); stroke-width: 1.5; }
.sq-stage svg .vz-cut { stroke: #a03b3b; stroke-width: 1.5; stroke-dasharray: 4 3; }
.sq-stage svg .vz-block-bg { fill: var(--bg); stroke: var(--rule); stroke-width: 1.5; }
.sq-stage svg .vz-block.tip .vz-block-bg { stroke: var(--ink); stroke-width: 2; }
.sq-stage svg .vz-block.hl .vz-block-bg { fill: var(--hl-fill); }
.sq-stage svg .vz-block.side .vz-block-bg { stroke: #a03b3b; stroke-dasharray: 4 3; }
.sq-stage svg .vz-link { fill: none; stroke: var(--ink); stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .sq-stage svg * { animation: none !important; } }

/* ── season 2 / server additions (2026-09-17) ── */
.sq-tabs { display:flex; gap:.4rem; margin:0 0 .8rem; }
.sq-tab { font: inherit; font-size:.85rem; padding:.4rem .9rem; border:1px solid var(--rule-soft); background:var(--bg-raised); color:var(--muted); cursor:pointer; }
.sq-tab.active { border-color:var(--ink); color:var(--ink); background:var(--hl-fill); }
.sq-season-label { font-size:.7rem; color:var(--faint); letter-spacing:.08em; text-transform:uppercase; margin:.6rem 0 .2rem; }
.sq-qbtn.locked { opacity:.45; cursor:not-allowed; }
.sq-badge.verified { box-shadow: 0 0 0 2px var(--c); }
.sq-block.fin-finalized { border-color:#2f6b3a; } .sq-block.fin-justified { border-style:dashed; }
.sq-howto { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1.2rem 0 0; }
@media (max-width:860px) { .sq-howto { grid-template-columns:1fr 1fr; } }
.sq-howto div { border-top:var(--rule-w) solid var(--rule); padding-top:.6rem; font-size:.88rem; }
.sq-howto b { display:block; font-family:var(--font-mono); font-size:.72rem; color:var(--faint); margin-bottom:.2rem; }
.sq-lb { margin-top:1.6rem; }
.sq-lb-head { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.sq-lb-head input { font: inherit; font-size:.85rem; padding:.35rem .5rem; border:1px solid var(--rule); background:var(--bg); color:var(--ink); max-width:14rem; }
.sq-stage svg .vz-gas { stroke:none; } .sq-stage svg .vz-gas.intr { fill:var(--muted); opacity:.5; } .sq-stage svg .vz-gas.exec { fill:var(--accent-ink); opacity:.8; }
.sq-stage svg .vz-gas.burn { fill:#a03b3b; opacity:.7; } .sq-stage svg .vz-gas.tip { fill:#2f6b3a; opacity:.7; }
.sq-stage svg .vz-op { fill:var(--rule); } .sq-stage svg .vz-op.sstore { fill:#a03b3b; } .sq-stage svg .vz-op.sload { fill:#8a5a00; } .sq-stage svg .vz-op.log { fill:#2f6b3a; } .sq-stage svg .vz-op.call { fill:#3b4fa0; }
.sq-stage svg .vz-block.finalized .vz-block-bg { stroke:#2f6b3a; stroke-width:2; } .sq-stage svg .vz-block.justified .vz-block-bg { stroke-dasharray:4 3; }

.sq-done { border:2px solid #2f6b3a; background:color-mix(in srgb, #2f6b3a 8%, var(--bg-raised)); padding:.8rem 1rem; margin:.6rem 0 1rem; }
.sq-done p { margin:.5rem 0 0; }

/* explorer */
.sq-explorer { margin-top:1rem; }
.sq-explorer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.sq-explorer h3 { display:block; font-family:var(--font-display, inherit); font-size:1.15rem; letter-spacing:0; text-transform:none; color:var(--ink); margin:.2rem 0 .6rem; word-break:break-all; }
.sq-explorer h4 { font-family:var(--font-ui); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); margin:1rem 0 .4rem; }
.sq-kvt th { width:11rem; font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0; }
.sq-kvt td { word-break:break-all; }
.sq-raw { font-family:var(--font-mono); font-size:.72rem; white-space:pre-wrap; word-break:break-all; background:var(--bg); border:1px solid var(--rule-soft); padding:.6rem .7rem; max-height:14rem; overflow:auto; margin:0; }
button.sq-block { font:inherit; text-align:left; cursor:pointer; color:var(--ink); }
button.sq-block:hover { background:var(--hl-fill); }
.sq-txlink { color:var(--ink); }

/* long addresses / hashes must wrap inside cards and tables */
.sq-card, .sq-challenge, .sq-challenge span, .sq-progress, .sq-done, .sq-explorer, .sq-kv span, .sq-panel li { overflow-wrap: anywhere; word-break: break-word; }
.sq-challenge .mono, .sq-card .mono, .sq-done .mono { word-break: break-all; }
.sq-card { min-width: 0; }
.sq-grid > * { min-width: 0; }
.sq-table td, .sq-table th { overflow-wrap: anywhere; }
.sq-more { background:none; border:1px solid var(--rule-soft); color:var(--muted); padding:.15rem .5rem; cursor:pointer; font-size:.72rem; }

.sq-stage svg .vz-click { cursor:pointer; }
.sq-stage svg .vz-click:hover .vz-block-bg, .sq-stage svg .vz-click:focus .vz-block-bg { fill:var(--hl-fill); stroke:var(--accent-ink); }
.sq-stage svg .vz-click:focus { outline:none; }