/* Panels: 3D stages and their labels, the SAPCA schematic, specification table, overhead bars,
   NRS trace, Attestic receipt and chain, code. */
.panel{position:relative;min-width:0;margin:0;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);box-shadow:var(--sh-panel);overflow:hidden}
.panel-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:14px 18px;box-shadow:inset 0 -1px 0 var(--line);font-size:13px;font-weight:650;color:var(--muted)}
.panel-hd>span:first-child{color:var(--fg)}
.panel-ft{padding:12px 18px;box-shadow:inset 0 1px 0 var(--line);color:var(--muted);font-size:12.5px}

/* 3D stage: a raised panel; on a page hero it is the screen's one hero, with the glowing edge */
.stage3d{position:relative;overflow:hidden;min-height:360px;aspect-ratio:6/5;max-width:100%;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);box-shadow:var(--sh-panel)}
.stage3d::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 44%,rgba(98,225,239,.08),transparent 64%);pointer-events:none}
.page-hero .stage3d{border-color:rgba(98,225,239,.55);background:linear-gradient(180deg,var(--hero-a) 0%,var(--hero-b) 100%);box-shadow:var(--sh-hero)}
.page-hero .stage3d::after{content:"";position:absolute;right:-30px;top:-26px;width:150px;height:150px;background:url(../img/velariq-mark-192.png) center/contain no-repeat;opacity:.1;pointer-events:none}
.stage3d.wide{aspect-ratio:16/9}
.stage3d canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.stage3d canvas:active{cursor:grabbing}
.stage3d .hud{position:absolute;inset:14px 16px auto;z-index:2;display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:650;color:var(--muted);pointer-events:none}
.stage3d .hud span:first-child{color:var(--fg)}
.stage3d .hud span:last-child{display:inline-flex;align-items:center;gap:7px;color:var(--signal)}
.stage3d .hud span:last-child::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px rgba(98,225,239,.22)}
.stage3d .hint{position:absolute;right:16px;bottom:12px;z-index:2;font-size:12px;font-weight:600;color:var(--muted);pointer-events:none}
.tag3d{position:absolute;left:0;top:0;z-index:2;display:grid;gap:1px;padding:7px 10px;border:1px solid rgba(0,0,0,.42);border-radius:10px;background:var(--chip);box-shadow:var(--sh-well);transform:translate(-50%,calc(-100% - 12px));font-size:11.5px;font-weight:650;color:var(--fg-2);white-space:nowrap;pointer-events:none;transition:opacity .25s;will-change:transform}
.tag3d.sage{color:var(--sage)}
.tag3d.teal{color:var(--teal)}
.tag3d.sea{color:var(--sea)}
.tag3d.warm{color:var(--warm)}
.tag3d b{color:var(--fg);font-size:14px;font-weight:620;font-stretch:var(--wide)}
.tag3d small{color:var(--muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}
.tag3d.off{opacity:0}
.stage3d .fallback{position:absolute;inset:0;display:none;place-items:center;padding:24px;text-align:center;color:var(--fg-2);font-size:14px}
.stage3d.no-gl .fallback{display:grid}
.stage3d.no-gl canvas{display:none}
@media (max-width:600px){.stage3d{aspect-ratio:4/5}.stage3d.wide{aspect-ratio:1/1}.tag3d{font-size:10.5px;padding:5px 8px}.tag3d b{font-size:12.5px}.tag3d:not([data-block]) small{display:none}}

/* SAPCA schematic */
.dg{display:block;width:100%;min-width:520px;height:auto}
.fig-wrap{overflow-x:auto}
.dg text{font-family:var(--f-sans);font-size:10.5px;font-weight:600;letter-spacing:.08em;fill:var(--muted)}
.dg .t1{fill:var(--signal)}.dg .t2{fill:var(--muted)}.dg .t3{fill:var(--fg-2)}
.dg .box{fill:#2A2F36;stroke:var(--line-4);stroke-width:1}
.dg .slot{fill:var(--bg-2);stroke:var(--line-3);stroke-width:1}
.dg .cp{fill:var(--warm)}
.dg .l1,.dg .l2,.dg .l3{fill:none;stroke-width:1.6;stroke-dasharray:4 7;animation:dash 1.6s linear infinite}
.dg .l1{stroke:var(--signal)}.dg .l2{stroke:var(--fg-2);stroke-opacity:.8}.dg .l3{stroke:var(--deep)}
.dg .rev{animation-direction:reverse}
.dg .hx{fill:none;stroke:var(--line-4);stroke-width:1}
.dg .sea{fill:none;stroke:var(--deep);stroke-width:1}
@keyframes dash{to{stroke-dashoffset:-22}}
.keys{display:flex;flex-wrap:wrap;gap:10px 22px}
.key{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--fg-2)}
.key i{width:22px;border-top:2px solid var(--signal)}
.key.k2 i{border-top-color:var(--fg-2)}
.key.k3 i{border-top-color:var(--deep)}

/* Specification table */
.table-wrap{overflow-x:auto}
.spec-table{width:100%;min-width:520px;border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}
.spec-table th,.spec-table td{padding:14px 16px 14px 18px;text-align:left;vertical-align:baseline}
.spec-table tr+tr th,.spec-table tr+tr td,.spec-table tbody tr th,.spec-table tbody tr td{box-shadow:inset 0 1px 0 var(--line)}
.spec-table th{font-size:12.5px;font-weight:650;color:var(--muted)}
.spec-table td{color:var(--fg-2);font-size:15px}
.spec-table td.v{color:var(--fg);font-size:19px;font-weight:560;font-stretch:var(--wide)}
.spec-table td.b{font-size:12px;font-weight:650;white-space:nowrap;color:var(--muted)}
.spec-table td.b.t{color:var(--signal)}

/* Overhead bars, one scale: 100% = 0.50 W */
.bars{display:grid;gap:18px;padding:24px 18px}
.bar{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) 64px;gap:16px;align-items:center}
.bar .lab{color:var(--fg-2);font-size:14px;line-height:1.35}
.bar .track{position:relative;height:12px;border-radius:6px;background:var(--bg-2);box-shadow:var(--sh-well)}
.bar .fill{position:absolute;inset:0 auto 0 0;border-radius:6px;background:var(--warm)}
.bar.cool .fill{background:linear-gradient(90deg,var(--signal-lo),var(--signal))}
.bar .val{font-family:var(--f-mono);font-size:12.5px;text-align:right;color:var(--fg)}
.w100{width:100%}.w12{width:12%}.w6{width:6%}
@media (max-width:560px){.bar{grid-template-columns:minmax(0,1fr) 56px}.bar .lab{grid-column:1/-1}}

/* NRS trace: the order is the order the system works in */
.trace .q{padding:18px;box-shadow:inset 0 -1px 0 var(--line);font-size:15px}
.trace .q .label{display:block;margin-bottom:6px;font-size:12.5px;color:var(--muted)}
.steps{margin:0;padding:8px 0;list-style:none}
.step{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:start;padding:13px 18px;transition:background-color .3s}
.step:not(:last-child)::after{content:"";position:absolute;left:35px;top:42px;bottom:-6px;width:2px;background:rgba(98,225,239,.25)}
.step .n{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:26px;border:1px solid rgba(0,0,0,.42);border-radius:8px;background:var(--bg-2);box-shadow:var(--sh-well);color:var(--fg-2);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;transition:background .3s,color .3s}
.step h3{margin:2px 0 4px;font-size:15.5px;font-weight:650;font-stretch:100%;letter-spacing:0}
.step p{color:var(--fg-2);font-size:14px;line-height:1.55}
.step .ok{padding-top:4px;font-size:12.5px;font-weight:650;color:var(--verified)}
.step.is-active{background:rgba(98,225,239,.06)}
.step.is-active .n,.step.final.is-active .n{border-color:rgba(0,0,0,.28);background:linear-gradient(180deg,var(--signal-hi) 0%,var(--signal-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 10px -4px rgba(14,157,182,.6);color:var(--signal-ink)}
.step.final .ok{color:var(--signal)}

/* Attestic receipt */
.receipt{font-size:13px}
.seal{display:inline-flex;align-items:center;gap:10px;color:var(--verified)}
.seal svg{width:24px;height:24px}
.panel-hd .seal{color:var(--verified)}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:10px 18px}
.kv+.kv{box-shadow:inset 0 1px 0 var(--line)}
.kv>span:first-child{padding-top:1px;color:var(--muted);font-size:12.5px;font-weight:650}
.kv>span:last-child{overflow-wrap:anywhere;color:var(--fg);font-family:var(--f-mono);font-size:12.5px}
.kv .h{color:var(--verified)}
.verdict{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:6px 12px 12px;padding:14px 16px;border:1px solid rgba(131,224,166,.4);border-radius:12px;background:var(--bg-2);box-shadow:var(--sh-well)}
.verdict b{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:650;color:var(--verified)}
.verdict span{color:var(--muted);font-size:12.5px}
@media (max-width:480px){.kv{grid-template-columns:minmax(0,1fr);gap:2px}}

/* Attestic chain demo */
.chain{margin:0;padding:0;list-style:none}
.link{display:grid;grid-template-columns:104px minmax(0,1fr) 158px 124px;gap:16px;align-items:center;padding:13px 18px;transition:background-color .3s}
.link+.link{box-shadow:inset 0 1px 0 var(--line)}
.link .id{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.link .out{min-width:0;font-size:14.5px}
.link input{width:100%;height:42px;padding:0 12px;border:1px solid rgba(0,0,0,.42);border-radius:11px;background:var(--bg-2);box-shadow:var(--sh-well);color:var(--fg);font:inherit}
.link input:focus{outline:2px solid var(--signal);outline-offset:1px}
.link .hash{font-family:var(--f-mono);font-size:12px;overflow-wrap:anywhere;color:var(--verified)}
.link .hash.changed{color:var(--alert)}
.state{justify-self:end;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border:1px solid rgba(0,0,0,.42);border-radius:9px;background:var(--bg-2);box-shadow:var(--sh-well);font-size:12.5px;font-weight:650;white-space:nowrap;color:var(--verified)}
.state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.link.bad{background:rgba(255,133,151,.07)}
.link.bad .state{color:var(--alert)}
.link.wait .state{color:var(--muted)}
.chain-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;padding:14px 18px;box-shadow:inset 0 1px 0 var(--line)}
.chain-foot .mono{font-size:12.5px;color:var(--fg-2)}
.chain-foot .mono b{font-weight:500;color:var(--verified)}

/* Code */
.code{margin:0;padding:18px;overflow-x:auto;font-family:var(--f-mono);font-size:12.5px;line-height:1.75;white-space:pre;color:var(--fg-2);background:var(--bg-2);box-shadow:var(--sh-well)}
.code .c{color:var(--muted)}.code .s{color:var(--verified)}.code .k{color:var(--signal)}

/* A sub-page hero's visual is the screen's one hero object: glowing edge and watermark */
.page-hero .visual>.panel{border-color:rgba(98,225,239,.55);background:linear-gradient(180deg,var(--hero-a) 0%,var(--hero-b) 100%);box-shadow:var(--sh-hero)}