/* ----------------------------------------------------------------
   Security page — Radix / AssemblyAI Personal Information parity
   Spacing: 1=4 2=8 3=12 4=16 5=24 6=32 7=40 8=48 9=64
   ---------------------------------------------------------------- */
.security-page,
.security-modal {
    --scaling: 1;
    --space-1: calc(4px * var(--scaling));
    --space-2: calc(8px * var(--scaling));
    --space-3: calc(12px * var(--scaling));
    --space-4: calc(16px * var(--scaling));
    --space-5: calc(24px * var(--scaling));
    --space-6: calc(32px * var(--scaling));
    --space-7: calc(40px * var(--scaling));
    --space-8: calc(48px * var(--scaling));
    --space-9: calc(64px * var(--scaling));

    --font-size-1: calc(12px * var(--scaling));
    --font-size-2: calc(14px * var(--scaling));
    --font-size-3: calc(16px * var(--scaling));
    --line-height-1: calc(16px * var(--scaling));
    --line-height-2: calc(20px * var(--scaling));
    --heading-size-6: calc(24px * var(--scaling));
    --heading-line-6: calc(30px * var(--scaling));
    --letter-spacing-6: -0.00625em;

    --field-width: 296px;
    --radius-2: calc(4px * var(--scaling));
    --radius-3: calc(4px * var(--scaling));

    font-family: var(--font-sans);
    font-size: var(--font-size-3);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--gray-12);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reset dashboard shell padding so page controls its own rhythm */
.dashboard-content:has(.security-page),
.dashboard-content:has(.profile-page) {
    padding: 0;
}

.dashboard-content:has(.security-page) > .mx-auto,
.dashboard-content:has(.profile-page) > .mx-auto {
    max-width: none;
    margin: 0;
}

/* Dashboard pages — order VPS border + section title parity (auth forms excluded) */
.dashboard-shell .security-page {
    --section-title-font-family: var(--auth-mono-font);
    --section-title-font-size: 14px;
    --section-title-font-weight: var(--font-weight-regular);
    --section-title-line-height: 1.35;
    --section-title-letter-spacing: 0.06em;
    --section-title-color: var(--gray-12);
    --order-vps-title-font-family: var(--section-title-font-family);
    --order-vps-title-font-size: var(--section-title-font-size);
    --order-vps-title-font-weight: var(--section-title-font-weight);
    --order-vps-title-line-height: var(--section-title-line-height);
    --order-vps-title-letter-spacing: var(--section-title-letter-spacing);
    --order-vps-title-color: var(--section-title-color);
}

.dashboard-shell .security-section-heading,
.dashboard-shell .security-mfa-header .security-text--body,
.dashboard-shell .home-widget__title.security-text--body {
    font-family: var(--section-title-font-family);
    font-size: var(--section-title-font-size);
    font-weight: var(--section-title-font-weight);
    line-height: var(--section-title-line-height);
    letter-spacing: var(--section-title-letter-spacing);
    text-transform: uppercase;
    color: var(--section-title-color);
}

.dashboard-shell .security-page .security-textfield--soft {
    border-color: var(--color-border);
}

.dashboard-shell .security-page .security-textfield--soft:hover {
    border-color: var(--color-border);
}

/* ----------------------------------------------------------------
   Containers — rt-Container rt-r-px-4 sm:px-7 md:px-9
   ---------------------------------------------------------------- */
.security-page-header {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent-9) 5%, transparent), transparent 42%),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent-9) 4%, transparent), transparent 38%),
        linear-gradient(180deg, var(--palette-off-white) 0%, var(--palette-cream) 58%, var(--palette-light) 100%);
}

@keyframes security-page-wave-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.security-page-header__waves {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.security-page-header__wave-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    min-width: 200%;
    height: clamp(6rem, 20vh, 9rem);
    will-change: transform;
}

.security-page-header__wave-layer {
    animation: security-page-wave-drift 15s linear infinite;
}

.security-page-header__wave-layer--slow {
    height: clamp(7rem, 24vh, 11rem);
    animation-duration: 22s;
}

.security-page-header__wave-layer--slower {
    height: clamp(8rem, 28vh, 13rem);
    animation-duration: 28s;
}

.page-header__wave-path--strong {
    fill: var(--header-wave-fill-strong);
}

.page-header__wave-path--soft {
    fill: var(--header-wave-fill-soft);
}

.page-header__wave-path--subtle {
    fill: var(--header-wave-fill-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .security-page-header__wave-layer,
    .security-page-header__wave-layer--slow,
    .security-page-header__wave-layer--slower {
        animation: none;
    }
}

.security-page-header__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 480px;
    padding: var(--space-8) var(--space-4) var(--space-7);
}

.security-page-header:has(.security-page-header__wave) .security-page-header__inner {
    padding-bottom: calc(var(--space-7) + var(--header-wave-height));
}

.security-page-header__wave,
.order-vps-hero__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: var(--header-wave-height);
    pointer-events: none;
}

.security-page-header__wave-accent,
.order-vps-hero__wave-accent {
    fill: var(--color-primary);
}

.security-page-header__wave-surface,
.order-vps-hero__wave-surface {
    fill: var(--color-background);
}

.security-page-body {
    padding: var(--space-9) var(--space-4);
    padding-top: var(--space-7);
}

.security-container-inner {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .security-page-header__inner {
        padding-left: var(--space-7);
        padding-right: var(--space-7);
    }

    .security-page-body {
        padding-left: var(--space-7);
        padding-right: var(--space-7);
    }
}

@media (min-width: 768px) {
    .security-page-header__inner {
        padding-top: var(--space-9);
        padding-inline: var(--space-9);
    }

    .security-page-header:has(.security-page-header__wave) .security-page-header__inner {
        padding-bottom: calc(var(--space-8) + var(--header-wave-height));
    }

    .security-page-header:not(:has(.security-page-header__wave)) .security-page-header__inner {
        padding-bottom: var(--space-8);
    }

    .security-page-body {
        padding-left: var(--space-9);
        padding-right: var(--space-9);
    }
}

/* ----------------------------------------------------------------
   Page header — rt-Heading size-6 weight-regular mb-1 + rt-Text size-2
   ---------------------------------------------------------------- */
.security-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    font-family: var(--font-sans);
    font-size: var(--heading-size-6);
    font-weight: 400;
    line-height: var(--heading-line-6);
    letter-spacing: var(--letter-spacing-6);
    color: var(--gray-12);
}

.security-heading-text {
    display: inline-block;
}

.security-heading-badge {
    display: inline-flex;
    align-items: center;
    height: calc(22px * var(--scaling));
    padding: 0 calc(8px * var(--scaling));
    border-radius: calc(4px * var(--scaling));
    background: var(--accent-a3);
    color: var(--accent-11);
    font-size: calc(12px * var(--scaling));
    font-weight: var(--font-weight-regular);
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.security-page-description {
    margin: 0;
    display: block;
    font-family: var(--font-sans);
    font-size: var(--font-size-2);
    font-weight: 400;
    line-height: var(--line-height-2);
    color: var(--gray-11);
}

.security-text {
    display: block;
    font-family: var(--font-sans);
    font-weight: 400;
}

.security-text--1 {
    font-size: var(--font-size-1);
    line-height: var(--line-height-1);
}

.security-text--2 {
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
}

.security-text--body {
    font-size: var(--font-size-3);
    line-height: var(--line-height-2);
    color: var(--gray-12);
}

/* Section headings — configure-vps-legend parity */
.security-section-heading,
.security-mfa-header .security-text--body,
.home-widget__title.security-text--body {
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-regular);
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-12);
}

.security-mfa-header .security-text--1.security-text--secondary {
    margin: 0;
    max-width: 42rem;
    font-size: var(--font-size-1);
    line-height: 1.4;
    color: var(--gray-11);
}

.security-text--gray {
    color: var(--gray-11);
}

.security-text--secondary {
    color: var(--gray-11);
}

/* ----------------------------------------------------------------
   Stack — rt-Flex column gap-9 pb-9
   ---------------------------------------------------------------- */
.security-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    padding-bottom: var(--space-9);
}

/* ----------------------------------------------------------------
   Email / password — rt-Flex wrap gap-7 mb-4, field width 296px
   ---------------------------------------------------------------- */
.security-fields-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-7);
    margin-bottom: var(--space-4);
}

.security-field-block {
    display: flex;
    flex-direction: column;
    width: var(--field-width);
    max-width: 100%;
}

.security-field-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: var(--field-width);
    max-width: 100%;
    flex: 1;
}

.security-textfield {
    width: 100%;
}

.security-field-foot {
    display: flex;
    align-items: flex-start;
    min-height: var(--line-height-2);
    margin-top: var(--space-2);
}

.security-textfield--soft {
    display: flex;
    align-items: center;
    min-height: calc(40px * var(--scaling));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    background: var(--color-surface);
    box-shadow: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.security-page .security-textfield--soft {
    border-color: var(--color-border);
    background: var(--color-surface);
}

.security-page .security-textfield--soft:hover {
    border-color: var(--color-border);
}

.security-page .security-textfield--soft:focus-within {
    border-color: var(--accent-9);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-9) 20%, transparent);
}

.security-textfield-input {
    width: 100%;
    min-height: calc(40px * var(--scaling));
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--font-size-2);
    font-weight: 400;
    line-height: var(--line-height-2);
    color: var(--gray-12);
    outline: none;
}

.security-textfield-input:disabled {
    color: var(--gray-11);
    cursor: default;
    opacity: 1;
    -webkit-text-fill-color: var(--gray-11);
}

.security-textfield-input::placeholder {
    color: var(--gray-11);
}

.security-field-action {
    display: block;
    color: var(--gray-11);
    line-height: var(--line-height-2);
}

.security-field-action a {
    color: var(--accent-11);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.security-field-action a:hover {
    color: var(--accent-10);
}

.security-ghost-link {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-1);
    font-weight: 400;
    line-height: var(--line-height-2);
    color: var(--accent-11);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    text-align: left;
}

.security-ghost-link:hover {
    color: var(--accent-10);
}

.security-ghost-link:focus-visible {
    outline: 2px solid var(--accent-9);
    outline-offset: 2px;
    border-radius: calc(4px * var(--scaling));
}

/* ----------------------------------------------------------------
   MFA / sessions section headers — gap-2 mb-4
   ---------------------------------------------------------------- */
.security-mfa-section,
.security-sessions-section {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
}

.security-mfa-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.security-sessions-list {
    display: flex;
    flex-direction: column;
}

.security-sessions-footer {
    margin-top: var(--space-4);
}

/* ----------------------------------------------------------------
   Cards — rt-BaseCard surface p-4 mb-2
   ---------------------------------------------------------------- */
.security-card {
    width: 100%;
    margin-bottom: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    background: var(--color-surface);
    box-shadow: 0 1px 2px var(--shadow-xs);
}

.security-card:last-child {
    margin-bottom: 0;
}

.security-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
}

.security-card-inner--stacked {
    align-items: flex-start;
}

.security-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.security-card-label-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.security-card-action-note {
    max-width: 220px;
    text-align: right;
}

/* ----------------------------------------------------------------
   Badges — rt-Badge size-1 solid gray
   ---------------------------------------------------------------- */
.security-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(18px * var(--scaling));
    padding: 0 calc(6px * var(--scaling));
    border-radius: calc(4px * var(--scaling));
    font-family: var(--font-sans);
    font-size: calc(11px * var(--scaling));
    font-weight: var(--font-weight-regular);
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.security-badge--solid.security-badge--gray {
    background: var(--gray-9);
    color: var(--color-on-accent);
}

.security-badge--solid.security-badge--enabled {
    background: var(--green-9);
    color: var(--color-on-accent);
}

/* ----------------------------------------------------------------
   Buttons — rt-BaseButton size-2 solid / soft
   ---------------------------------------------------------------- */
.security-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-regular);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.security-btn--2 {
    height: calc(32px * var(--scaling));
    padding: 0 var(--space-3);
    border-radius: var(--radius-2);
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
}

.security-btn--solid {
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--palette-black) 5%, transparent);
}

.security-btn--solid:hover:not(:disabled) {
    background: var(--color-button-primary-bg-hover);
}

.security-btn--soft.security-btn--red {
    background: var(--red-a3);
    color: var(--red-11);
}

.security-btn--soft.security-btn--red:hover:not(:disabled) {
    background: var(--red-a3);
}

.security-btn:focus-visible {
    outline: 2px solid var(--accent-9);
    outline-offset: 2px;
}

.security-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.security-logout-row {
    display: flex;
}

/* ----------------------------------------------------------------
   Auth-style action buttons (order VPS hero / table parity)
   ---------------------------------------------------------------- */
.security-action-btn {
    width: auto;
    min-width: calc(6.25rem * var(--scaling));
    height: calc(32px * var(--scaling));
    padding: 0 var(--space-3);
    flex-shrink: 0;
    font-size: calc(12px * var(--scaling));
    letter-spacing: 1.1px;
    white-space: nowrap;
    text-decoration: none;
}

.auth-button-outline.security-action-btn {
    font-family: var(--auth-mono-font);
    text-transform: uppercase;
    border: 1px solid var(--color-primary);
    box-shadow: none;
    color: var(--color-primary);
    background: var(--color-button-secondary-bg);
}

.auth-button-outline.security-action-btn:hover:not(:disabled) {
    border-color: var(--color-button-primary-bg);
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    box-shadow: none;
}

.auth-button-outline.security-action-btn--danger {
    border-color: var(--color-border);
    color: var(--color-danger);
}

.auth-button-outline.security-action-btn--danger:hover:not(:disabled) {
    border-color: var(--color-border);
    background: var(--color-danger);
    color: var(--color-surface);
}

.auth-button-solid.security-action-btn--danger {
    background: var(--color-danger);
    color: var(--color-surface);
}

.auth-button-solid.security-action-btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-danger) 90%, var(--palette-black));
    color: var(--color-surface);
}

/* ----------------------------------------------------------------
   Modal (password + 2FA dialogs)
   ---------------------------------------------------------------- */
.security-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

.security-modal[hidden] {
    display: none;
}

.security-modal-open {
    overflow: hidden;
}

.security-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--surface-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.security-modal-panel {
    position: relative;
    width: min(100%, 28rem);
    max-height: calc(100vh - var(--space-8));
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    background: var(--color-surface);
    box-shadow: 0 12px 40px var(--overlay-light);
    padding: var(--space-6);
}

.security-modal-panel--password {
    width: min(100%, 30rem);
}

.security-modal-panel--subscription {
    width: min(100%, 28rem);
    border-radius: var(--radius-3);
}

.subscription-confirm-modal__eyebrow {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-9);
}

.security-modal-title--standalone {
    margin: 0 0 var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-2);
    color: var(--gray-12);
}

.security-modal-form {
    display: flex;
    flex-direction: column;
}

.security-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.security-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.security-field-label {
    font-family: var(--font-sans);
    font-size: var(--font-size-1);
    font-weight: 400;
    line-height: var(--line-height-1);
    color: var(--gray-11);
}

.security-input-wrap {
    position: relative;
}

.security-input-wrap .security-field-input--modal {
    padding-right: calc(var(--space-4) + 28px);
}

.security-password-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: calc(4px * var(--scaling));
    background: transparent;
    color: var(--gray-11);
    cursor: pointer;
    transform: translateY(-50%);
}

.security-password-toggle:hover {
    color: var(--gray-12);
}

.security-password-toggle:focus-visible {
    outline: 2px solid var(--accent-9);
    outline-offset: 1px;
}

.security-password-icon-hide {
    display: none;
}

.security-password-toggle.is-visible .security-password-icon-show {
    display: none;
}

.security-password-toggle.is-visible .security-password-icon-hide {
    display: block;
}

.security-field-input--modal {
    display: block;
    width: 100%;
    min-height: calc(40px * var(--scaling));
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    background: var(--color-surface);
    font-family: var(--font-sans);
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
    color: var(--gray-12);
    outline: none;
    transition: border-color 0.12s ease;
}

.security-field-input--modal:focus {
    border-color: var(--accent-9);
    outline: none;
}

.security-field-input--modal:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-9) 35%, transparent);
    outline-offset: 0;
}

.security-field-input--readonly {
    background: var(--gray-3);
    color: var(--gray-11);
}

.security-password-hint {
    margin: 0;
    font-size: var(--font-size-1);
    line-height: var(--line-height-2);
    color: var(--gray-11);
}

.security-modal-text {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
    color: var(--gray-11);
}

.security-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-2);
    background: var(--gray-3);
}

.security-qr-image {
    width: 180px;
    height: 180px;
    border-radius: var(--radius-2);
    background: var(--palette-off-white);
}

.security-primary-button,
.security-secondary-button,
.security-danger-button,
.security-cancel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(32px * var(--scaling));
    padding: 0 var(--space-3);
    border-radius: var(--radius-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-2);
    cursor: pointer;
}

.security-primary-button {
    border: none;
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
}

.security-primary-button:hover:not(:disabled) {
    background: var(--color-button-primary-bg-hover);
}

.security-cancel-button {
    border: 1px solid var(--accent-9);
    background: var(--color-button-secondary-bg);
    color: var(--accent-9);
}

.security-cancel-button:hover:not(:disabled) {
    background: var(--accent-a3);
}

.security-secondary-button {
    border: 1px solid var(--color-border);
    background: var(--color-button-secondary-bg);
    color: var(--gray-12);
}

.security-secondary-button:hover:not(:disabled) {
    background: var(--gray-3);
}

.security-danger-button {
    border: none;
    background: var(--red-9);
    color: var(--color-on-accent);
}

.security-danger-button:hover:not(:disabled) {
    background: var(--red-11);
}

.security-primary-button:disabled,
.security-secondary-button:disabled,
.security-danger-button:disabled,
.security-cancel-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.security-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
    .security-card-inner,
    .security-card-inner--stacked {
        flex-direction: column;
        align-items: stretch;
    }

    .security-btn--2,
    .security-action-btn {
        width: 100%;
    }

    .security-modal-actions {
        flex-direction: column-reverse;
    }

    .security-modal-actions .security-action-btn {
        width: 100%;
    }
}