@charset "UTF-8"; body.modal-open { overflow: hidden; } .modal-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 1.15rem; background: rgba(4, 4, 7, 0.72); backdrop-filter: blur(1.6px); /* * Stacking model: each open modal owns its own .modal-overlay element * appended to at its own z-index layer. One overlay per modal * = one flex container per modal, so each shell vertically-centres in * its own layer with no sibling-positioning collisions. * * Demoted (background) overlays get `.is-below` â€” they remain visible * behind the active modal but are pointer-disabled and visually * recessed so only the top modal is interactive. */ } .modal-overlay.is-below { background: transparent; backdrop-filter: none; pointer-events: none; } /* * Inline `?` info pip â€” used inside a paragraph of copy. Keep it from * wrapping to its own line by binding it to the preceding word with a * non-breaking flow and giving it a small fixed footprint. */ .rtx-info.rtx-info--inline { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; margin-left: 0.2rem; vertical-align: middle; white-space: nowrap; } /* * Compact "create" action used in surface-panel headers â€” the default * `btn btn-primary` is sized for hero CTAs and forces wrapping when sat * next to a title in a constrained dialog. */ .tf-create-btn { flex: 0 0 auto; font-size: 0.82rem; padding: 0.42rem 0.85rem; white-space: nowrap; min-height: 32px; line-height: 1.1; } .modal-shell { width: min(760px, 100%); max-height: calc(100vh - 2.3rem); background: rgba(var(--t-surface-rgb), 0.995); border: 1px solid rgba(var(--t-fg-rgb), 0.14); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(var(--t-fg-rgb), 0.06), 0 16px 34px rgba(0, 0, 0, 0.42); padding: 1.2rem 1.22rem 1.12rem; display: flex; flex-direction: column; gap: 0.92rem; overflow: hidden; margin: auto 0; } .modal-shell--wide { width: min(980px, 100%); } .modal-shell .modal-content .surface-notice { margin-bottom: 0.85rem; } .modal-shell.is-pulse { border-color: rgba(var(--t-fg-rgb), 0.36); } .modal-shell.is-confirm .modal-icon-wrap { color: rgba(var(--t-primary-rgb), 1); background: rgba(var(--t-primary-rgb), 0.14); border-color: rgba(var(--t-primary-rgb), 0.42); } .modal-shell.is-info .modal-icon-wrap { color: #8ad9ff; background: rgba(94, 203, 255, 0.14); border-color: rgba(94, 203, 255, 0.34); } .modal-shell.is-warning .modal-icon-wrap { color: #ffda85; background: rgba(255, 193, 7, 0.14); border-color: rgba(255, 193, 7, 0.36); } .modal-shell.is-error .modal-icon-wrap { color: #ffb1f2; background: rgba(var(--t-secondary-rgb), 0.14); border-color: rgba(var(--t-secondary-rgb), 0.4); } .modal-header { display: flex; gap: 0.92rem; align-items: flex-start; flex: 0 0 auto; } .modal-icon-wrap { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; border-radius: 999px; border: 1px solid rgba(var(--t-fg-rgb), 0.24); background: rgba(var(--t-fg-rgb), 0.08); color: rgba(var(--t-fg-rgb), 0.92); margin-top: 0; } .modal-icon { display: block; width: 20px; height: 20px; } .modal-heading { display: flex; flex-direction: column; gap: 0.38rem; min-width: 0; padding-top: 0.04rem; } .modal-title { margin: 0; color: var(--t-text); font-family: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1.34rem; font-weight: 400; letter-spacing: 0.62px; line-height: 1.05; text-transform: uppercase; } .modal-message { margin: 0; color: rgba(var(--t-fg-rgb), 0.76); font-size: 1rem; line-height: 1.42; max-width: 56ch; } .modal-content { flex: 1 1 auto; min-height: 0; border-top: 1px solid rgba(var(--t-fg-rgb), 0.08); padding-top: 0.88rem; padding-right: 0.9rem; margin-right: -1.22rem; overflow-y: auto; } .modal-form { display: flex; flex-direction: column; gap: 0.66rem; } .modal-form-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; } .modal-form-field { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.35rem; } .modal-form-field label { margin: 0; color: var(--t-text); font-weight: 600; letter-spacing: 0.12px; } .modal-form-field.is-checkbox { flex-direction: row; align-items: center; gap: 0.42rem; } .modal-form-error { margin: 0.12rem 0 0; color: #ffc3f7; font-size: 0.77rem; min-height: 1rem; } .modal-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: stretch; gap: 0.56rem; padding-top: 0.9rem; border-top: 1px solid rgba(var(--t-fg-rgb), 0.08); } .modal-btn { margin-top: 0; min-width: 100px; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1; white-space: nowrap; min-height: 36px; padding: 0.4rem 0.75rem; font-size: 0.88rem; font-weight: 700; } @media (max-width: 640px) { .modal-overlay { padding: 0.72rem; } .modal-shell { width: 100%; max-height: calc(100vh - 1.44rem); padding: 0.98rem 0.96rem 0.92rem; } .modal-content { margin-right: -0.96rem; padding-right: 0.75rem; } .modal-title { font-size: 1.24rem; } .modal-message { font-size: 0.95rem; } .modal-actions { justify-content: stretch; } .modal-btn { width: auto; min-width: 0; flex: 1 1 100%; } }