/**
 * Connect my portfolio — the wizard.
 *
 * One card, one question, one primary action. The progress rail names the four
 * phases rather than numbering screens, because the number of screens depends
 * on the route and a "step 3 of 7" that becomes "step 3 of 9" reads as the
 * flow growing under the investor's feet.
 *
 * The palette is the page's (`--pa-*` on :root), which reaches this dialog in
 * the top layer for the same reason it reaches the import modal.
 */
.vfw {
  background: var(--pa-card);
  border: 1px solid var(--pa-line);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(20, 14, 6, .28);
  color: var(--pa-ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  margin: auto;
  max-height: min(92vh, 860px);
  max-width: min(560px, calc(100vw - 32px));
  overflow: hidden;
  padding: 0;
  width: 100%;
}
.vfw[open] { display: flex; }
.vfw::backdrop { background: rgba(8, 11, 26, .55); }
.vfw-shell { display: flex; flex-direction: column; max-height: inherit; min-height: 0; width: 100%; }

.vfw-head { align-items: center; border-bottom: 1px solid var(--pa-line); display: flex; gap: 10px; padding: 14px 16px; }
.vfw-back, .vfw-close {
  background: var(--pa-line-soft); border: 0; border-radius: 8px; color: var(--pa-muted); cursor: pointer;
  flex: 0 0 32px; font-size: 18px; height: 32px; line-height: 1; padding: 0; width: 32px;
}
.vfw-back:hover, .vfw-close:hover { background: var(--pa-line); color: var(--pa-ink); }
.vfw-back[hidden] { display: block; visibility: hidden; }

.vfw-progress { counter-reset: phase; display: flex; flex: 1; gap: 6px; list-style: none; margin: 0; padding: 0; }
.vfw-progress li { color: var(--pa-dim); flex: 1; font-size: 11px; font-weight: 700; min-width: 0; }
.vfw-progress li::before { background: var(--pa-line); border-radius: 4px; content: ""; display: block; height: 4px; margin-bottom: 6px; }
.vfw-progress li span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vfw-progress li.is-done::before { background: var(--pa-violet); }
.vfw-progress li.is-current { color: var(--pa-ink); }
.vfw-progress li.is-current::before { background: linear-gradient(90deg, var(--pa-violet) 50%, var(--pa-line) 50%); }

.vfw-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding: 24px 24px 20px; }
.vfw-body h2 { font: 400 clamp(22px, 4.5vw, 26px)/1.2 var(--font-display); letter-spacing: -.02em; margin: 0; }
.vfw-lede { color: var(--pa-muted); margin: 0; }

.vfw-notice { background: var(--pa-amber-soft); border-left: 3px solid var(--pa-amber); border-radius: 8px; color: var(--pa-ink); margin: 0; padding: 10px 12px; }

.vfw-options { display: flex; flex-direction: column; gap: 10px; }
.vfw-option {
  align-items: center; background: var(--pa-card); border: 1px solid var(--pa-line); border-radius: 14px; color: var(--pa-ink);
  cursor: pointer; display: flex; font: inherit; gap: 14px; padding: 14px 16px; text-align: left; width: 100%;
}
.vfw-option:hover, .vfw-option:focus-visible { border-color: #c9c2ff; box-shadow: 0 0 0 3px var(--pa-violet-soft); outline: none; }
.vfw-option > span:not(.vfw-mark):not(.pa-provider-logo) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.vfw-option b { font-size: 15px; }
.vfw-option b em { background: var(--pa-violet-soft); border-radius: 999px; color: var(--pa-violet); font-size: 11px; font-style: normal; margin-left: 6px; padding: 2px 8px; vertical-align: 2px; }
.vfw-option small { color: var(--pa-muted); font-size: 13px; }
.vfw-option > i { color: var(--pa-dim); font-style: normal; }
.vfw-option.is-recommended { background: var(--pa-violet-soft); border-color: #c9c2ff; }
.vfw-option .pa-provider-logo { flex: 0 0 40px; height: 40px; width: 40px; }
.vfw-mark {
  align-items: center; background: var(--pa-line-soft); border-radius: 10px; color: var(--pa-violet); display: inline-flex;
  flex: 0 0 40px; font-size: 18px; font-weight: 700; height: 40px; justify-content: center; width: 40px;
}
.vfw-option.is-recommended .vfw-mark { background: var(--pa-card); }

.vfw-divider { align-items: center; color: var(--pa-dim); display: flex; font-size: 12px; gap: 10px; margin: 4px 0 0; }
.vfw-divider::before, .vfw-divider::after { background: var(--pa-line); content: ""; flex: 1; height: 1px; }

.vfw-primary, .vfw-secondary {
  align-items: center; border-radius: 12px; cursor: pointer; display: inline-flex; font: inherit; font-size: 15px; font-weight: 700;
  gap: 10px; justify-content: center; min-height: 48px; padding: 0 20px; text-decoration: none; width: 100%;
}
.vfw-primary { background: var(--pa-ink); border: 0; color: #fff; }
.vfw-primary:hover:not(:disabled) { background: var(--pa-violet); }
.vfw-primary:disabled { cursor: progress; opacity: .7; }
.vfw-primary .pa-provider-logo { height: 24px; width: 24px; }
.vfw-secondary { background: var(--pa-card); border: 1px solid var(--pa-line); color: var(--pa-ink); }
.vfw-secondary:hover { border-color: #c9c2ff; color: var(--pa-violet); }
.vfw-link { align-self: center; background: none; border: 0; color: var(--pa-muted); cursor: pointer; font: inherit; font-size: 13px; padding: 6px; text-decoration: underline; }
.vfw-link:hover { color: var(--pa-violet); }

.vfw-steps { color: var(--pa-ink); margin: 0; padding-left: 20px; }
.vfw-steps li { margin: 4px 0; }
.vfw-more { color: var(--pa-muted); font-size: 13px; }
.vfw-more summary { cursor: pointer; }
.vfw-more a { color: var(--pa-violet); font-weight: 700; }

.vfw-drop {
  align-items: center; background: var(--pa-paper); border: 1.5px dashed var(--pa-line); border-radius: 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; padding: 22px 16px; position: relative; text-align: center;
}
.vfw-drop:hover, .vfw-drop:focus-within { border-color: var(--pa-violet); }
.vfw-drop.has-file { background: var(--pa-green-soft); border-color: var(--pa-green); border-style: solid; }
.vfw-drop input { cursor: pointer; inset: 0; opacity: 0; position: absolute; }
.vfw-drop b { font-size: 15px; overflow-wrap: anywhere; }
.vfw-drop span { color: var(--pa-muted); font-size: 12px; }

.vfw-field { display: flex; flex-direction: column; gap: 6px; }
.vfw-field > span { font-weight: 700; }
.vfw-field input {
  border: 1px solid var(--pa-line); border-radius: 10px; font: inherit; font-size: 15px; letter-spacing: .04em; min-height: 46px; padding: 0 12px;
}
.vfw-field input:focus { border-color: var(--pa-violet); box-shadow: 0 0 0 3px var(--pa-violet-soft); outline: none; }
.vfw-field small { color: var(--pa-muted); font-size: 12px; }

.vfw-tiles { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.vfw-tile { background: var(--pa-green-soft); border-radius: 14px; display: flex; flex-direction: column; padding: 14px; }
.vfw-tile small { color: var(--pa-muted); font-size: 12px; font-weight: 700; }
.vfw-tile b { font: 400 30px/1.1 var(--font-display); }
.vfw-tile span { color: var(--pa-muted); font-size: 13px; }
.vfw-tile.is-empty { background: var(--pa-line-soft); }

.vfw-others { display: flex; flex-direction: column; gap: 8px; }
.vfw-other { align-items: center; border: 1px solid var(--pa-line); border-radius: 12px; display: flex; gap: 12px; padding: 10px 12px; }
.vfw-other > span:first-child { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.vfw-other small { color: var(--pa-muted); font-size: 12px; }
.vfw-amount { align-items: center; display: flex; flex: 0 0 132px; gap: 4px; }
.vfw-amount i { color: var(--pa-dim); font-style: normal; }
.vfw-amount input { border: 1px solid var(--pa-line); border-radius: 8px; font: inherit; min-height: 38px; padding: 0 8px; text-align: right; width: 100%; }
.vfw-amount input:focus { border-color: var(--pa-violet); outline: none; }

.vfw-done-mark {
  align-items: center; align-self: center; background: var(--pa-green-soft); border-radius: 50%; color: var(--pa-green);
  display: flex; font-size: 30px; height: 64px; justify-content: center; width: 64px;
}
.vfw-body[data-step="done"] { text-align: center; }

.vfw-foot { align-items: center; border-top: 1px solid var(--pa-line); color: var(--pa-muted); display: flex; font-size: 12px; gap: 8px; padding: 12px 20px; }
.vfw-foot svg { fill: none; flex: 0 0 16px; height: 16px; stroke: currentColor; stroke-width: 2; width: 16px; }

@media (max-width: 520px) {
  .vfw { border-radius: 16px; max-height: calc(100dvh - 16px); }
  .vfw-body { padding: 20px 16px 16px; }
  .vfw-progress li span { display: none; }
  .vfw-amount { flex-basis: 112px; }
}
.vfw-primary .pa-provider-logo svg { height: 22px; width: 22px; }