/* POSITION GUARD — "close before you switch" dialog (js/position-guard.js).
   A position belongs to one chart; this sits between an open position and
   anything that would load a different one. Built on s8-ui overlay/modal. */
.s8-pg{z-index:2300}
/* own scrim: pages give .s8-scrim a z-index (drawer) that would lift it over the card. Dim only, no blur, like every other simul8or modal. */
.s8-pg__scrim{position:fixed;inset:0;z-index:0;background:var(--s8-scrim);opacity:0;transition:opacity var(--s8-t-slow) var(--s8-ease)}
.s8-pg__modal{position:relative;z-index:1;max-width:432px;opacity:0;transform:translateY(10px) scale(.985);transition:opacity var(--s8-t-slow) var(--s8-ease),transform var(--s8-t-slow) var(--s8-ease)}
.s8-pg.is-shown .s8-pg__scrim{opacity:1}
.s8-pg.is-shown .s8-pg__modal{opacity:1;transform:none}

/* hero: the route from what they hold to what they asked for */
.s8-pg__hero{position:relative;display:grid;justify-items:center;gap:var(--s8-3);padding:var(--s8-6) var(--s8-6) var(--s8-5);text-align:center;border-bottom:1px solid var(--s8-line);background:radial-gradient(120% 90% at 50% 0%,var(--s8-accent-tint) 0%,transparent 62%),var(--s8-panel-2);overflow:hidden}
.s8-pg__route{display:flex;align-items:center;gap:var(--s8-2);max-width:100%}
.s8-pg__sym{display:inline-flex;align-items:center;gap:6px;height:var(--s8-h);padding:0 var(--s8-3);border:1px solid var(--s8-line-2);border-radius:var(--s8-r-pill);background:var(--s8-inset);color:var(--s8-fg);font-size:var(--s8-fs-sm);font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.s8-pg__sym i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--s8-up)}
.s8-pg__sym.is-short i{background:var(--s8-down)}
.s8-pg__sym.is-to{color:var(--s8-fg-2);border-style:dashed}
.s8-pg__arrow{display:flex;align-items:center;gap:3px;color:var(--s8-fg-4)}
.s8-pg__arrow b{width:4px;height:4px;border-radius:50%;background:currentColor;animation:s8-pg-flow 1.4s var(--s8-ease) infinite}
.s8-pg__arrow b:nth-child(2){animation-delay:.18s}
.s8-pg__arrow b:nth-child(3){animation-delay:.36s}
.s8-pg__arrow svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes s8-pg-flow{0%,100%{opacity:.25}40%{opacity:1;color:var(--s8-accent-hi)}}
.s8-pg__title{margin:var(--s8-1) 0 0;font-size:var(--s8-fs-xl);font-weight:600;line-height:var(--s8-lh-tight);letter-spacing:var(--s8-ls-tight);color:var(--s8-fg);text-wrap:balance}
.s8-pg__lede{margin:0;max-width:38ch;font-size:var(--s8-fs-sm);line-height:var(--s8-lh);color:var(--s8-fg-2);text-wrap:pretty}
.s8-pg__x{position:absolute;top:10px;right:10px;width:var(--s8-h-sm);height:var(--s8-h-sm);padding:0}

/* position ticket */
.s8-pg__body{display:grid;gap:var(--s8-3);padding:var(--s8-5) var(--s8-6)}
.s8-pg__ticket{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s8-3) var(--s8-4);padding:var(--s8-4);border:1px solid var(--s8-line);border-left:3px solid var(--s8-up);border-radius:var(--s8-r);background:var(--s8-inset)}
.s8-pg__ticket.is-short{border-left-color:var(--s8-down)}
.s8-pg__held{display:grid;gap:6px;min-width:0}
.s8-pg__side{justify-self:start;display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--s8-up-line);border-radius:var(--s8-r-xs);background:var(--s8-up-tint);color:var(--s8-up);font-size:var(--s8-fs-micro);font-weight:700;letter-spacing:var(--s8-ls-caps);text-transform:uppercase}
.s8-pg__ticket.is-short .s8-pg__side{border-color:var(--s8-down-line);background:var(--s8-down-tint);color:var(--s8-down)}
.s8-pg__qty{font-size:var(--s8-fs-lg);font-weight:600;color:var(--s8-fg);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat)}
.s8-pg__qty small{margin-left:4px;font-size:var(--s8-fs-sm);font-weight:500;color:var(--s8-fg-3)}
.s8-pg__avg{font-size:var(--s8-fs-xs);color:var(--s8-fg-3);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat)}
.s8-pg__avg b{font-weight:500;color:var(--s8-fg-2)}
.s8-pg__pnl{display:grid;justify-items:end;gap:4px;text-align:right}
.s8-pg__label{font-size:var(--s8-fs-micro);font-weight:700;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-4)}
.s8-pg__fig{font-size:var(--s8-fs-2xl);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--s8-fg);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);border-radius:var(--s8-r-xs);transition:color var(--s8-t) var(--s8-ease)}
.s8-pg__fig.is-up{color:var(--s8-up)}
.s8-pg__fig.is-dn{color:var(--s8-down)}
.s8-pg__fig.flash-up{animation:s8-pg-flash-up .6s var(--s8-ease)}
.s8-pg__fig.flash-dn{animation:s8-pg-flash-dn .6s var(--s8-ease)}
@keyframes s8-pg-flash-up{0%{background:var(--s8-up-tint)}100%{background:transparent}}
@keyframes s8-pg-flash-dn{0%{background:var(--s8-down-tint)}100%{background:transparent}}
.s8-pg__pct{font-size:var(--s8-fs-xs);font-weight:600;color:var(--s8-fg-3);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat)}
.s8-pg__mark{grid-column:1/-1;display:flex;align-items:center;gap:var(--s8-2);padding-top:var(--s8-3);border-top:1px dashed var(--s8-line);font-size:var(--s8-fs-xs);color:var(--s8-fg-3)}
.s8-pg__mark b{margin-left:auto;font-weight:600;color:var(--s8-fg);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat)}
.s8-pg__dot{position:relative;width:7px;height:7px;flex:none;border-radius:50%;background:var(--s8-fg-4)}
.s8-pg__dot.is-live{background:var(--s8-up)}
.s8-pg__dot.is-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--s8-up);animation:s8-pg-ping 1.6s var(--s8-ease) infinite}
@keyframes s8-pg-ping{0%{opacity:.8;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}

/* side effects worth naming */
.s8-pg__note{display:flex;align-items:center;gap:var(--s8-2);margin:0;font-size:var(--s8-fs-xs);color:var(--s8-warn)}
.s8-pg__note svg{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s8-pg__note[hidden]{display:none}

.s8-pg__foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s8-2);padding:var(--s8-4) var(--s8-6);background:var(--s8-panel-2)}
.s8-pg__foot .s8-btn{height:44px;font-size:var(--s8-fs-md)}
.s8-pg__go{gap:var(--s8-2)}
.s8-pg__go span{overflow:hidden;text-overflow:ellipsis}
.s8-pg__go kbd,.s8-pg__keep kbd{display:inline-flex;align-items:center;height:18px;padding:0 5px;border:1px solid rgba(255,255,255,.28);border-radius:var(--s8-r-xs);font:600 10px/1 var(--s8-sans);letter-spacing:.04em;opacity:.75}
.s8-pg__keep kbd{border-color:var(--s8-line-2)}
.s8-pg__go.is-busy{pointer-events:none}
.s8-pg__go.is-busy span::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-2px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:s8-pg-spin .7s linear infinite}
@keyframes s8-pg-spin{to{transform:rotate(360deg)}}
.s8-pg .s8-btn:focus-visible{outline:none;box-shadow:var(--s8-focus)}

@media (max-width:640px){
  .s8-pg__modal{max-width:none;border-radius:var(--s8-r-lg) var(--s8-r-lg) 0 0;transform:translateY(24px)}
  .s8-pg__hero{padding:var(--s8-6) var(--s8-5) var(--s8-4)}
  .s8-pg__body{padding:var(--s8-4) var(--s8-5)}
  .s8-pg__foot{grid-template-columns:1fr;padding:var(--s8-3) var(--s8-5) calc(var(--s8-4) + env(safe-area-inset-bottom))}
  .s8-pg__foot .s8-pg__go{order:-1}
  .s8-pg kbd{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .s8-pg__scrim,.s8-pg__modal{transition:none}
  .s8-pg__arrow b,.s8-pg__dot.is-live::after,.s8-pg__fig.flash-up,.s8-pg__fig.flash-dn{animation:none}
}