/* SIMUL8OR — WORDPRESS PLUGIN PAGE LAYER (v0.3 kit)
   Sits on s8-tokens.css + s8-ui.css + s8-content.css.
   Scope: the shortcode block, the live quote/chart demo widget and the
   install-step panels. Nothing here redefines a token. */

/* ── shortcode ───────────────────────────────────────── */
.s8pg-sc{display:inline-flex;align-items:center;gap:var(--s8-3);height:var(--s8-h-lg);padding:0 var(--s8-1) 0 var(--s8-4);background:var(--s8-inset);border:1px solid var(--s8-line-2);border-radius:var(--s8-r);font-family:var(--s8-mono);font-size:var(--s8-fs-sm);color:var(--s8-accent-fg);letter-spacing:.02em}
.s8pg-scblock{background:var(--s8-panel);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8pg-scblock__bar{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-h-lg);padding:0 var(--s8-2) 0 var(--s8-4);background:var(--s8-panel-2);border-bottom:1px solid var(--s8-line);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-3)}
.s8pg-scblock__bar .s8-btn{margin-left:auto}
.s8pg-scblock__body{display:flex;align-items:center;justify-content:center;gap:var(--s8-4);padding:var(--s8-7) var(--s8-5);background:var(--s8-inset);background-image:radial-gradient(90% 140% at 50% 0%,var(--s8-accent-tint),transparent 68%)}
.s8pg-scblock__body code{font-family:var(--s8-mono);font-size:clamp(20px,2.1vw,28px);font-weight:600;letter-spacing:-.01em;color:var(--s8-accent-fg);background:none;border:0;padding:0;white-space:nowrap}
.s8pg-scnote{padding:11px var(--s8-4);border-top:1px solid var(--s8-line);background:var(--s8-panel);font-size:var(--s8-fs-sm);color:var(--s8-fg-3)}

/* ── live demo widget: what the shortcode renders ────── */
.s8pg-demo{--pg-line:var(--s8-accent-hi);--pg-fill:rgba(62,162,242,.18);--pg-grid:rgba(255,255,255,.05);--pg-axis:var(--s8-fg-4);background:var(--s8-panel);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8pg-demo--glow{box-shadow:0 0 0 1px var(--s8-accent-line),0 30px 80px -30px rgba(43,143,224,.4)}
.s8pg-form{display:flex;align-items:flex-end;gap:var(--s8-3);padding:var(--s8-4);background:var(--s8-panel-2);border-bottom:1px solid var(--s8-line);flex-wrap:wrap}
.s8pg-form .s8-field{flex:0 1 260px}
.s8pg-form label{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-3)}
.s8pg-form .s8-input{height:var(--s8-h-lg);font-family:var(--s8-mono);letter-spacing:.06em;text-transform:uppercase}
.s8pg-form .s8-btn{height:var(--s8-h-lg)}
.s8pg-form__hint{margin-left:auto;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--s8-fg-4);padding-bottom:9px}
/* shortcode strings stay literal inside uppercased chrome */
.s8pg-form__hint code,.s8pg-foot code{font-family:var(--s8-mono);font-size:inherit;text-transform:none;background:none;border:0;padding:0;white-space:nowrap;color:var(--s8-fg-3)}
.s8pg-out{padding:var(--s8-5)}
.s8pg-quote{display:flex;align-items:flex-end;gap:var(--s8-4);flex-wrap:wrap}
.s8pg-quote__sym{display:flex;flex-direction:column;gap:3px}
.s8pg-quote__sym b{font-size:var(--s8-fs-xl);font-weight:600;letter-spacing:.02em;color:#fff;line-height:1}
.s8pg-quote__sym span{font-size:var(--s8-fs-xs);color:var(--s8-fg-4)}
.s8pg-quote__px{margin-left:auto;display:flex;align-items:baseline;gap:var(--s8-3)}
.s8pg-quote__px b{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);font-size:var(--s8-fs-2xl);font-weight:600;color:#fff;line-height:1;letter-spacing:var(--s8-ls-tight)}
.s8pg-chg{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-sm);font-weight:600;padding:3px 8px;border-radius:var(--s8-r-sm)}
.s8pg-chg[data-dir="up"]{color:var(--s8-up);background:var(--s8-up-tint);border:1px solid var(--s8-up-line)}
.s8pg-chg[data-dir="down"]{color:var(--s8-down);background:var(--s8-down-tint);border:1px solid var(--s8-down-line)}
.s8pg-chart{position:relative;margin-top:var(--s8-4);height:230px;background:var(--s8-inset);border:1px solid var(--s8-line);border-radius:var(--s8-r);overflow:hidden}
.s8pg-chart--tall{height:300px}
.s8pg-chart canvas{display:block;width:100%;height:100%}
.s8pg-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:var(--s8-4);background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r);overflow:hidden}
.s8pg-stats>div{background:var(--s8-panel-2);padding:10px var(--s8-4);display:flex;flex-direction:column;gap:3px}
.s8pg-stats dt{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-4);margin:0}
.s8pg-stats dd{margin:0;font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);font-size:var(--s8-fs-md);font-weight:600;color:var(--s8-fg)}
.s8pg-foot{display:flex;align-items:center;gap:var(--s8-4);padding:9px var(--s8-4);border-top:1px solid var(--s8-line);background:var(--s8-panel-2);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--s8-fg-4);flex-wrap:wrap}
.s8pg-foot .dot{width:6px;height:6px;border-radius:50%;background:var(--s8-up);box-shadow:0 0 0 3px var(--s8-up-tint)}
@media(max-width:700px){.s8pg-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.s8pg-quote__px{margin-left:0;width:100%}}

/* ── install steps ───────────────────────────────────── */
.s8pg-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8pg-steps>div{display:flex;flex-direction:column;gap:var(--s8-2);background:var(--s8-panel);padding:var(--s8-6) var(--s8-5);transition:background var(--s8-t) var(--s8-ease)}
.s8pg-steps>div:hover{background:var(--s8-panel-2)}
.s8pg-steps .n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--s8-r-sm);background:var(--s8-accent-tint);border:1px solid var(--s8-accent-line);font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600;color:var(--s8-accent-fg);margin-bottom:var(--s8-2)}
.s8pg-steps h3{margin:0;font-size:var(--s8-fs-base);font-weight:600;color:#fff}
.s8pg-steps p{margin:0;font-size:var(--s8-fs-sm);color:var(--s8-fg-2);text-wrap:pretty}
.s8pg-steps .s8-btn,.s8pg-steps .s8pg-sc{align-self:flex-start;margin-top:var(--s8-3)}
@media(max-width:900px){.s8pg-steps{grid-template-columns:1fr}}
/* vertical variant for the docs layout */
.s8pg-vsteps{display:flex;flex-direction:column;gap:1px;margin-top:var(--s8-5);background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8pg-vsteps>div{display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--s8-4);align-items:start;background:var(--s8-panel);padding:var(--s8-5)}
.s8pg-vsteps .n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--s8-r-sm);background:var(--s8-panel-2);border:1px solid var(--s8-line-2);font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600;color:var(--s8-fg-2)}
.s8pg-vsteps h3{margin:2px 0 0;font-size:var(--s8-fs-base);font-weight:600;color:#fff}
.s8pg-vsteps p{margin:6px 0 0;font-size:var(--s8-fs-sm);color:var(--s8-fg-2);max-width:var(--s8c-measure);text-wrap:pretty}
.s8pg-vsteps .s8-btn,.s8pg-vsteps .s8pg-sc{margin-top:var(--s8-3)}


/* Production Option B integration. */
.s8pg-hero{display:block;text-align:center}
.s8pg-hero h1{max-width:19ch;margin-left:auto;margin-right:auto}
.s8pg-hero .s8c-sub,.s8pg-hero .s8c-p{margin-left:auto;margin-right:auto}
.s8pg-hero .s8c-cta-row{align-items:center;justify-content:center}
.s8pg .s8c-card{background:var(--s8-panel-2)}
.s8pg-quote{min-height:38px}
.s8pg-quote__sym{font-size:var(--s8-fs-xl);font-weight:600;letter-spacing:.02em;color:#fff;line-height:1}
.s8pg-quote__px{margin-left:auto;font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);font-size:var(--s8-fs-2xl);font-weight:600;color:#fff;line-height:1;letter-spacing:var(--s8-ls-tight)}
.s8pg-spinner{position:absolute;z-index:1;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:3px solid var(--s8-line-2);border-top-color:var(--s8-accent-hi);border-radius:50%;animation:s8pg-spin .8s linear infinite}
@keyframes s8pg-spin{to{transform:rotate(360deg)}}
.s8pg-steps>article{display:flex;flex-direction:column;gap:var(--s8-2);background:var(--s8-panel);padding:var(--s8-6) var(--s8-5);transition:background var(--s8-t) var(--s8-ease)}
.s8pg-steps>article:hover{background:var(--s8-panel-2)}
@media(max-width:700px){.s8pg-chart--tall{height:230px}}