@layer components {
  /* Asked once, inside the vault: a row of its foot, above the way forward, ruled and run to the
     vault's edges as that row is. It opens the professional's page, which shows exactly what they
     would see. It takes the vault's inks. */
  .partner-ask {
    position: relative;
    z-index: var(--z-raised);
    display: grid;
    grid-template-columns: minmax(var(--space-0), 1fr) auto;
    align-items: center;
    column-gap: var(--space-5);
    margin-inline: calc(-1 * var(--space-8));
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
    border-block-start: var(--border-width) solid var(--vault-rule);
    transition: background-color var(--dur-fast) var(--ease-calm);
  }

  .partner-ask__open {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--vault-ink);
    text-decoration: none;
  }

  .partner-ask__open::after {
    content: "";
    position: absolute;
    inset: var(--space-0);
  }

  .partner-ask__title {
    font: var(--type-heading);
  }

  .partner-ask__detail {
    color: var(--vault-quiet);
    font: var(--type-body-sm);
    text-wrap: pretty;
  }

  .partner-ask__form {
    position: relative;
    z-index: var(--z-raised);
  }

  .partner-ask .partner-ask__not-now {
    color: var(--vault-ink);
  }

  .partner-ask:has(.partner-ask__open:active) {
    background-color: var(--vault-hover);
  }

  @media (any-hover: hover) {
    .partner-ask:has(.partner-ask__open:hover) {
      background-color: var(--vault-hover);
    }

    .partner-ask .partner-ask__not-now:hover:where(:not(:disabled)) {
      background-color: var(--vault-hover);
    }
  }
}