* this overlay would be painted under the later sibling sections and be * silently unclickable, no matter what z-index it carries. Same fix the * .voice-picker-panel comment in style.css documents. */ .stake-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: var(--bg-overlay); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2); } .stake-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .stake-dialog { width: 100%; max-width: var(--modal-max); max-height: calc(100vh - var(--sp-7)); overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: var(--sp-6); transform: translateY(var(--sp-3)) scale(0.98); transition: transform var(--dur-2) var(--ease-out-expo); } .stake-overlay.is-open .stake-dialog { transform: translateY(0) scale(1); } .stake-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .stake-title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-strong); letter-spacing: var(--ls-tight); color: var(--text); margin: 0; } .stake-subtitle { font-size: var(--fs-body-sm); color: var(--text-faint); margin: var(--sp-1) 0 0; line-height: 1.5; } .stake-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--sp-5); height: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-faint); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .stake-close:hover { border-color: var(--border-strong); color: var(--text); } /* --- Balance / figures panel ------------------------------------------- */ .stake-figures { border: 1px solid var(--border-hair); border-radius: var(--radius-md); background: var(--bg-card); padding: var(--sp-4); margin-bottom: var(--sp-4); } .stake-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; } .stake-row + .stake-row { border-top: 1px solid var(--border-hair); } .stake-row-label { font-size: var(--fs-body-sm); color: var(--text-faint); } .stake-row-value { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-emphasis); letter-spacing: var(--ls-normal); font-variant-numeric: tabular-nums; color: var(--text); } .stake-row-value--required { color: var(--accent-strong); } .stake-row-value--yield { color: var(--data); } .stake-row-value--short { color: var(--data-down); } /* --- Inline fields (EZPZ connect flow) ---------------------------------- */ .stake-field { display: flex; flex-direction: column; gap: var(--sp-2); } .stake-field-label { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-faint); } .stake-field-input { width: 100%; padding: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-sunken); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body-sm); /* Never tighten tracking on something the member types into. */ letter-spacing: var(--ls-normal); } .stake-field-input:focus-visible { outline: none; border-color: var(--accent); } /* --- Message states ----------------------------------------------------- */ .stake-note { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-card); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body-sm); color: var(--text-faint); line-height: 1.6; margin-bottom: var(--sp-4); } .stake-note strong { color: var(--text-muted); font-weight: var(--fw-emphasis); } .stake-msg { font-size: var(--fs-label); line-height: 1.5; margin: 0 0 var(--sp-3); } .stake-msg--error { color: var(--data-down); } .stake-msg--ok { color: var(--data); } /* --- Actions ------------------------------------------------------------ */ .stake-actions { display: flex; flex-direction: column; gap: var(--sp-2); } .stake-actions .btn { width: 100%; justify-content: center; } .stake-confirm:disabled { opacity: 0.55; cursor: default; } .stake-spinner { width: var(--sp-3); height: var(--sp-3); margin-right: var(--sp-2); border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: stake-spin var(--dur-4) linear infinite; } @keyframes stake-spin { to { transform: rotate(360deg); } } /* --- Current-stake banner on the pricing card --------------------------- */ .stake-active-note { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; font-size: var(--fs-label); font-family: var(--font-mono); letter-spacing: var(--ls-wide); color: var(--data); margin-top: var(--sp-2); } .stake-active-note--grace { color: var(--voice); } /* --- Motion / responsive ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .stake-overlay, .stake-dialog { transition: none; } .stake-overlay.is-open .stake-dialog { transform: none; } .stake-spinner { animation-duration: 2s; } } @media (max-width: 480px) { .stake-overlay { padding: var(--sp-2); align-items: flex-end; } .stake-dialog { padding: var(--sp-4); max-height: calc(100vh - var(--sp-5)); } }